Frontend Dogma

“how-tos” Archive

  1. How to Design Accessible Forms in 10 Steps · · , ,
  2. How to Escape JavaScript for a Script Tag · · , ,
  3. How to Work With GraphQL in WordPress in 2024 · · ,
  4. How to Write World-Beating Web Content · · ,
  5. How to Build a Reusable Grid System With CSS Grid · · ,
  6. Web Accessibility Statement: How to Write One · · ,
  7. Quick Tip: How to Animate Text Gradients and Patterns in CSS · · , , ,
  8. How to Make Your Website Work Offline · · ,
  9. How to Build a Simple Web Server With Node.js · · ,
  10. Quick Tip: How to Align Column Rows With CSS Subgrid · · , ,
  11. How to Use jQuery’s “ajax()” Function for Asynchronous HTTP Requests · · ,
  12. Quick Tip: How to Add Gradient Effects and Patterns to Text · · , , ,
  13. How to Test 3.3.8 Accessible Authentication (Minimum) · · , ,
  14. How to Plan Your First Successful Website · ·
  15. How to Create a Website and a PDF from the Same Codebase · · ,
  16. How to Test 2.5.8 Target Size (Minimum) · · ,
  17. How to Use WebSockets in Node.js to Create Real-Time Apps · · ,
  18. How to Ensure Your Designs Work If You Can’t Access Sample Data · · , , ,
  19. How to Create a Sidebar Navigation With Astro, Tailwind CSS, and Alpine.js · · , , ,
  20. How to Lazy-Load CodePen and CanIUse Embeds · · ,
  21. How to Use Server-Sent Events in Node.js · · ,
  22. How to Build a Newthing · · , ,
  23. How to Optimize the Web for the Worst User Conditions? · · , , ,
  24. How to Transfer Binary Data Efficiently Across Worker Threads in Node.js · · ,
  25. How to Design an Accessible Web Site for People with Color-Deficient Vision · · , , , , ,
  26. How to Set Up a Node Server With TypeScript in 2024 · · , ,
  27. How to Center a Div · · ,
  28. How to Fix the Invisible Scrollbar Issue in iOS Browsers · · , , ,
  29. How to Boost WordPress Security and Protect Your SEO Ranking · · , ,
  30. How to Create Rounded Gradient Borders With Any Background in CSS · · , , ,
  31. How to Stream Files from Next.js Route Handlers · · , ,
  32. How to Favicon in 2024: Six Files That Fit Most Needs · · ,
  33. Git Lesson: How to Use .gitignore and .gitkeep? · ·
  34. How to Use “data-nosnippet” to Block Specific Content from Being Used in a Google Search Snippet (Experiment) · · , ,
  35. How to Get Started With Progressive Web Apps · · ,
  36. How to Make External Links Accessible · · ,
  37. How to Center an Element in CSS Without Adding a Wrapper in HTML · · , ,
  38. How to Get Good at Competitive Programming · ·
  39. How to Enable Experimental CSS and JS Features in Chrome, Firefox, and Safari · · , , , , , , , ,
  40. How to Use a Color Font · · ,
  41. How to Use Chrome’s Accessibility Tree · · , , ,
  42. How to Use the File System in Node.js · · , ,
  43. How to Test 3.3.7 Redundant Entry · · , ,
  44. How to Avoid Breaking Web Pages for Keyboard Users · · ,
  45. How to Use Node.js With Docker · · ,
  46. How to Optimize MongoDB Performance for Node.js · · , ,
  47. How to Use Timeouts in Node.js · · ,
  48. How to Build a Server-Side React App Using Vite and Express · · , , ,
  49. How to Use npm Packages Outside of Node · · , ,
  50. How to Do a TypeScript Conversion · · , , , ,
  51. How to Use the Fetch API in Node.js, Deno, and Bun · · , , , , ,
  52. How to Write Good Alt Text for Screen Readers · · , , , ,
  53. Information vs. Experience: How to Build Mature Design Systems · · ,
  54. How to Find a Developer Job in 2023 (With Little or No Experience) · ·
  55. How to Map a Number Between Two Ranges · · ,
  56. How to Collaborate on Pull Requests for Beginners · · ,
  57. How to Animate Along a Path in CSS · · ,
  58. How to Use SEO to Build Long-Term Brand Recognition and Visibility · · ,
  59. How to Style Element Descendants With Tailwind CSS · ·
  60. How to Be an Accessibility Ally · · ,
  61. How to Make the Case for Design Systems · ·
  62. How to Escape CSS Selectors in JavaScript · · , , ,
  63. How to Build Trust With Others by Organizing Your Figma Files · · , ,
  64. How to Make Forms in Angular Reusable · · , , ,
  65. How to Use the New “<search>” Element With WordPress · · ,
  66. How to Make a Strong Case for Accessibility · · ,
  67. How to Make Charts and Graphs More Accessible · · , ,
  68. How to Implement SSL/TLS Pinning in Node.js · · , , ,
  69. How to Get 12% More LinkedIn Followers, Impressions, and Clicks—Practical Accessibility Tips and Tricks · · , , ,
  70. How to Make an Impact as a Developer Advocate · · ,
  71. How to Use Headless Chrome in Serverless Functions With a 50 MB Limit · · , , , , ,
  72. How to Use the CSS “gap” Property · · ,
  73. How to Test Mobile Apps on a Real Device Cloud · · ,
  74. How to Improve Performance of Your Database by Indexing Large Tables · · , ,
  75. How to Use the CSS Grid “repeat()” Function · · , ,
  76. How to Earn High-Authority Links That Drive Rankings · · ,
  77. How to Define an Array of Colors With CSS · · , ,
  78. How to Make Your Captions and Audio Descriptions WCAG-Compliant · · , , , ,
  79. How to Use CSS “aspect-ratio” · ·
  80. How to Use CSS “object-fit” and “object-position” · · ,
  81. How to Build and Deploy a Modern Day Next.js Application · · , ,
  82. How to Use Your Intuition in Your Product Design Process · · , ,
  83. ARIA Can Hurt or Help Web Accessibility: How to Review Your Website’s ARIA · · , ,
  84. How to Prevent Unnecessary React Component Re-Rendering · · , ,
  85. How to Improve the Release Frequency of Your Team? · · , , ,
  86. How to Validate HTML On-Line at W3C · · , ,
  87. How to Use Node.js to SSH into Remote Servers: A Comprehensive Guide · · , , , ,
  88. How to Tackle Docker and Kubernetes for Frontend · · ,
  89. How to Measure the Impact of a Design System? · · ,
  90. Combat Accessibility Decay: How to Maintain Ongoing Accessibility · · ,
  91. How to Build Things People Want to Use · ·
  92. How to Use CSS “background-size” and “background-position” · · ,
  93. Learn How to Use Hue in CSS Colors With HSL · · ,
  94. How to Clean Up Your Local Repository With Git Commands · · , ,
  95. How to Add a CSS Reveal Animation to Your Images · · , ,
  96. How to Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit · · , , ,
  97. How to Highlight Required and Optional Form Fields · · , ,
  98. How to Detect Unnecessary Renderings of DOM Elements in Your Web App to Improve Performance · · , , , ,
  99. How to Draw Any Regular Shape With Just One JavaScript Function · · ,
  100. How to Build Lean Efficient Websites in 2023 · · , ,
  101. How to Create a Custom Range Slider Using CSS · · ,
  102. How to Handle Production Support When Using Scrum · · , ,
  103. How to Optimize Web Responsiveness With Interaction to Next Paint · · , ,
  104. How to Handle Emojis in Node.js · · , ,
  105. How to Configure Path Aliases in Frontend Projects in the Native Way · · ,
  106. How to Make a CSS-Only Hamburger Menu · · ,
  107. How to Write More Efficient JavaScript Conditions · · ,
  108. How to Manage Design Tokens · · ,
  109. How to Deep Merge Arrays and Objects With JavaScript · · , ,
  110. How to Write Comments in React: The Good, the Bad, and the Ugly · · ,
  111. How to Create an SEO Strategy · · ,
  112. How to Name Design Tokens in a Design System · · , ,
  113. How to Work With Dates and Times in Vanilla JavaScript · ·
  114. How to Use Google Fonts and “font-display” · · , ,
  115. How to Review and Refactor Code With GPT-4 (and ChatGPT) · · , , ,
  116. How to Split an Angular App into Micro-Frontend Apps · · , ,
  117. How to Start a React Project in 2023 · ·
  118. How to Stop a React Component from Rendering · · , ,
  119. How to Use “v-model” With Form Inputs in Vue · · ,
  120. How to Fix: Child Stylesheet Loading Twice (WordPress) · · ,
  121. Quick Tip: How to Cache Data in PHP · · , ,
  122. Learn How to Set Up a CI/CD Pipeline from Scratch · ·
  123. Quick Tip: How to Handle Exceptions in PHP · · , ,
  124. How to Contribute to a Project You Have No Idea About · · , ,
  125. How to Style Your Alt Text · · , ,
  126. How to Handle Date and Time With JavaScript · ·
  127. Quick Tip: How to Trim Whitespace With PHP · · ,
  128. How to Password-Protect a Static HTML Page With No JS · · , ,
  129. How to Build Offline Web Applications · · ,
  130. How to Use View Transitions in Hotwire Turbo · · ,
  131. Quick Tip: How to Hash a Password in PHP · · , , ,
  132. How to Inspect Interactions in the Browser · · , ,
  133. Git: How to Skip Hooks · ·
  134. Technical Writing Process: How to Write a Good Technical Article · · ,
  135. How to Scale Node.js Applications With Clustering · · ,
  136. Quick Tip: How to Check If a Variable Is Set in PHP · · ,
  137. How to Write Semantic CSS · · , ,
  138. How to Add an Event Handler in React · · , ,
  139. How to Build Accessible Main Navigation? · · ,
  140. How to Favicon in 2023: Six Files That Fit Most Needs · · ,
  141. How to Build a Magazine Layout With CSS Grid Areas · · ,
  142. How to Pick a Font (That Doesn’t Suck) · · , ,
  143. How to Make a Zoom Effect Using CSS · · ,
  144. How to Get the Last Matching Item in an Array With Vanilla JavaScript · · ,
  145. Quick Tip: How to Manage Timezones in PHP · · , ,
  146. Quick Tip: How to Manage Error Reporting in PHP · · , ,
  147. How to Review a Web Site · · , ,
  148. How to Use Pico CSS and Next.js? · · ,
  149. Quick Tip: How to Read a Local File With PHP · · , ,
  150. How to Destructure Props in Vue (Composition API) · · ,
  151. Quick Tip: How to Filter Data With PHP · · ,
  152. How to Build Great HTML Form Controls · · ,
  153. How to Increase Your Chances of Getting Interviews and Job Offers in Tech · · ,
  154. How to Write an Awesome Readme · ·
  155. How to Learn in Public · · ,
  156. How to Find and Fix the Top 3 Accessibility Issues · · , ,
  157. How to Merge Objects in JavaScript · · ,
  158. How to Create Typography Guidelines for a Product That Does Not Follow a Design System · · ,
  159. How to Transfigure Wireframes into HTML · · , ,
  160. How to Use Huge Type on the Web · · ,
  161. How to Handle Unplanned Work in Scrum · · , ,
  162. How to Improve User Experience and Wow Your Users · ·
  163. How to Create the Perfect Hero Image for Your Portfolio Site · ·
  164. How to Start a Content Audit · · , , ,
  165. How to Create Advanced Animations With CSS · · ,
  166. How to Build, Test, and Publish a TypeScript npm Package in 2022 · · ,
  167. How to Communicate Effectively as a Developer · · , ,
  168. How to Set Up the New Google Auth in a React and Express App · · , , ,
  169. How to Build the Foundation for Digital Accessibility · · , ,
  170. How to Rebase Stacked Git Branches · ·
  171. How to Animate CSS Box Shadows and Optimize Performance · · , , ,
  172. Quick Tip: How to Use the Ternary Operator in JavaScript · · , ,
  173. How to Write Good Alt Text · · , ,
  174. How to Safely Pass Data to JavaScript in a Django Template · · ,
  175. How to Safely Share Your Email Address on a Website · · ,
  176. Quick Tip: How to Use the Spread Operator in JavaScript · · , ,
  177. How to Center a Div Using CSS Grid · ·
  178. How to Return Multiple Values from a Function in JavaScript · · ,
  179. How to Make Your Designs Scannable (and Why You Should) · · ,
  180. How to Get All Sibling Elements of a Link or Button With Vanilla JavaScript · · , ,
  181. How to Create Wavy Shapes and Patterns in CSS · · ,
  182. How to Generate Random Numbers in JavaScript With “Math.random()” · · , ,
  183. How to Get the Current Timestamp in JavaScript · ·
  184. How to (Not) Make a Button · · , , ,
  185. How to Substantially Slow Down Your Node.js Server · · ,
  186. How to Monitor a Next.js Application · · ,
  187. How to Build Event-Driven Architecture on AWS? · · , ,
  188. How to Improve Largest Contentful Paint for Faster Load Times · · , ,
  189. DevTools Tips: How to Inspect and Debug CSS Flexbox · · , , , , ,
  190. How to Use localStorage in JavaScript: An Easy Guide · · , ,
  191. Code Golfing Tips and Tricks: How to Minify Your JavaScript Code · · , ,
  192. How to Research Components and Patterns: Common Challenges and How to Overcome Them · · ,
  193. How to Use Multithreading in Node.js · · ,
  194. How to Add a Subtle Gradient on Top of an Image Using CSS · · ,
  195. Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · , ,
  196. How to Make Text Improve User Experience: Insights into UX Writing · · ,
  197. How to Use ESLint and Prettier for Code Analysis and Formatting · · , , , , ,
  198. How to Remove 99% of JavaScript from Main Thread · · , ,
  199. How to Prevent Merge Conflicts (or at Least Have Less of Them) · · ,
  200. How to Use Headings for Website Accessibility · · , ,
  201. How to Animate SVG Shapes on Scroll · · , ,
  202. How to Create Dark Mode for Your Designs in Figma · · ,
  203. How to Use Variables in CSS · · ,
  204. How to Pick the Least Wrong Colors · · , ,
  205. How to Fix: “Buttons Do Not Have Accessible Names” · · ,
  206. How to Position Your Design System Team for Success · · , ,
  207. How to Ask for a Promotion · ·
  208. How to Use Google CrUX to Analyze and Compare the Performance of JS Frameworks · · , , ,
  209. How to Learn JavaScript Fast: Six Simple Mind Tricks · · , ,
  210. How to Use the GitHub Pulls API to Manage Pull Requests · · ,
  211. How to Use Videos With Alpha Transparency on the Web · · ,
  212. Design Patterns: How to Create Simple Interfaces · · ,
  213. How to Create a Color Palette for Your Design System · · , ,
  214. How to Reduce Figma Memory Usage · ·
  215. CTA Modal: How to Build a Web Component · · , ,
  216. How to Build Node.js REST API With MySQL · · , , ,
  217. How to Start Testing Your Website With a Screen Reader · · , ,
  218. How to Write Good Code: 10 Beginner-Friendly Techniques for Instant Results · · ,
  219. How to Improve UX Design Through A/B Testing · · , , ,
  220. How to Develop Your UX Design Philosophy · · ,
  221. How to Fix Your Low-Contrast Text · · , ,
  222. How to Create Animated Anchor Links Using CSS · · , , ,
  223. How to Respond to Growing Supply Chain Security Risks? · · , , ,
  224. How to Match HTML Elements With an Indeterminate State · · , ,
  225. How to Optimize Your LCP (with Visuals) · · , ,
  226. How to Document Accessibility Issues · · ,
  227. How to Use Props in React · · ,
  228. How to Use CSS Math Functions: “calc”, “min”, “max”, “clamp” · · , ,
  229. How to Make a Drag-and-Drop File Uploader With Vue.js 3 · · , ,
  230. How to Prep Your SEO Strategy for a New Website · · ,
  231. How to Empathize With Your Users · · , ,
  232. How to Automatically Size a Textarea Based on Its [Text] Using Vanilla JavaScript · · ,
  233. How to Use Spectator to Test Your Angular Components · · , , ,
  234. Arrow Functions in JavaScript: How to Use Fat and Concise Syntax · · ,
  235. How to Prevent SQL Injection Attacks in Node.js · · , , ,
  236. How to Design Better APIs · · ,
  237. How to Use Higher-Order Functions in JavaScript · · ,
  238. How to Make a “Raise the Curtains” Effect in CSS · · ,
  239. How to Build a File Upload Service With Vanilla JavaScript · · ,
  240. How to Make MPAs That Are as Fast as SPAs · · , ,
  241. How to Fix Your Security Vulnerabilities With npm Override · · , ,
  242. How to Prioritize Your Components · · ,
  243. Design Systems in Figma: How to Be More Productive · · , ,
  244. Design System: How to Successfully Collaborate? · · ,
  245. How to Create a Search Page for a Static Website With Vanilla JS · · , , ,
  246. How to Keep Your Repo Package Dependencies Up to Date Automatically · · ,
  247. How to Make CSS Slanted Containers · ·
  248. How to Favicon in 2022: Six Files That Fit Most Needs · · ,
  249. How to Use the Accessibility Tree for A11Y Testing · · ,
  250. How to Create a UX Vision Statement · ·