Frontend Dogma

News and Tools for Frontend Development

Articles and books, tips and tricks, craft and beauty from the world of frontend development. (Stay up-to-date on all topics by RSS feed or on Mastodon.)

  1. New to the Web Platform in April · · , , , , , , , ,
  2. Passkeys: A Shattered Dream · · , ,
  3. The Picture-Superiority Effect: Harness the Power of Visuals · · , ,
  4. What Do Developers Want from AI? · · , ,
  5. Design Deja Vu · · , , , ,
  6. Maintaining a Design System in Figma · · , ,
  7. Celebrate JavaScript Naked Day Every Year on April 24 · · , ,
  8. How to Escape JavaScript for a Script Tag · · , , ,
  9. HTML Attributes vs. DOM Properties · · , ,
  10. JSR Is Not Another Package Manager · · ,
  11. Node.js 22 Available Now · · ,
  12. The Problem With “new URL()”, and How “URL.parse()” Fixes That · · ,
  13. Adding ESLint and Auto-Fixing an Existing TypeScript Project · · , , ,
  14. Comparing Full Stack and Headless CMS Platforms · · , , ,
  15. Creating Fluid Typography With the CSS “clamp()” Function · · , ,
  16. F-Shape Pattern and How Users Read · · ,
  17. Hello Bun: How Sveld Now Deploys 2× Faster on GitHub and Render · · , , ,
  18. The First Framework That Lets You Visualize Your React/Node.js App · · , ,
  19. The Front End Developer/Engineer Handbook 2024 · · , , , , ,
  20. Update on the Plan for Phase-Out of Third-Party Cookies on Chrome · · , , , ,
  21. Reflecting on My Programming Career · ·
  22. 15 Essential UX Design Principles and Practices for Developers · · , ,
  23. The Crucial Dance: Enhancing Designer–Developer Collaboration for Exceptional Products · · ,
  24. Using Legitimate GitHub URLs for Malware · · ,
  25. What You Can Do as a Web Builder on Earth Day · · ,
  26. Write Alt Text Like You’re Talking to a Friend · · ,
  27. The Ultimate Collection of CSS-Only Shapes · · ,
  28. 5 Hidden CSS Properties You Didn’t Know Existed · ·
  29. April 24 Is JS Naked Day · · , ,
  30. Considerations for AI Opt-Out · ·
  31. Detect JavaScript Support · · , , ,
  32. Optimising React Apps · · ,
  33. Long Alt · · , , , , ,
  34. Make Sure That Your Design System Is Accessible · · ,
  35. A Short Guide to Mastering Keyboard Shortcuts on GitHub · · , ,
  36. Help Us Invent CSS Grid Level 3, aka “Masonry” Layout · · ,
  37. How to Work With GraphQL in WordPress in 2024 · · , ,
  38. This Web of Ours, Revisited · ·
  39. How to Create CSS Utility Classes · · ,
  40. Git Common Developer Pitfalls and Solutions · ·
  41. The End of an Era: Women Who Code Closing · ·
  42. The “Intl.Segmenter” Object Is Now Part of Baseline · · , , , ,
  43. Sustainable Web Development: Website Redesign With a Low Carbon Footprint · · ,
  44. 12 Tips from a Mid-Level Developer · · ,
  45. Converting Plain Text to Encoded HTML With Vanilla JavaScript · · , ,
  46. Displaying HTML Web Components · · ,
  47. How to Write World-Beating Web Content · · , ,
  48. Property Hooks Are Coming in PHP 8.4 · · ,
  49. Upgrading jQuery: Working Towards a Healthy Web · · , ,
  50. When Security and Accessibility Clash: Why Are Banking Applications So Inaccessible? · · ,
  51. Who Should Block AI Bots? · · , ,
  52. [pnpm] v9.0.0 · · ,
  53. The Invisible Seafaring Industry That Keeps the Internet Afloat · ·
  54. Things That Can Break “aspect-ratio” in CSS · ·
  55. We Need to Rewild the Internet · · , , , ,
  56. An Intro to Flexbox · · , ,
  57. ARIA in HTML · · , , ,
  58. Document Collaboration (With Comments!) · · , , ,
  59. Five Ways Cookie Consent Managers Hurt Web Performance (and How to Fix Them) · · , ,
  60. How a Successful Website Migration Led to a 20% Increase in Keyword Rankings · · , , ,
  61. Open Source Security (OpenSSF) and OpenJS Foundations Issue Alert for Social Engineering Takeovers of Open Source Projects · · ,
  62. Ethics in Times of Growth Design · · ,
  63. Don’t Use the “maxlength” Attribute to Stop Users from Exceeding the Limit · · , ,
  64. Interview With Senior JS Developer 2024 · · , , , , , , ,
  65. My “Skip to Content” Markup Was Breaking the Back Button on iOS · · , , ,
  66. Things You Should Do in Your Dev Journey · ·
  67. What If You Had Real Control over Light Mode / Dark Mode on a Per-Site Basis? · · ,
  68. 9 Signs Your Frontend Code Has Quality Issues That Affect Your Users · · , , , , , ,
  69. 10 Things Software Developers Should Learn About Learning · · ,
  70. Blockin’ Bots · · , , ,
  71. How Do Open Source Licenses Work? The Ultimate Guide · · , ,
  72. Introducing JS Naked Day · · , ,
  73. Monitoring BFCache Blocking Reasons · · , , ,
  74. Sliding 3D Image Frames in CSS · · , ,
  75. CSS Tricks to Master the “clip-path” Property · · ,
  76. Gap Is the New Margin · · ,
  77. Quick Tip: How to Animate Text Gradients and Patterns in CSS · · , , , ,
  78. Web Accessibility Statement: How to Write One · · , ,
  79. Zombie Estimation · · ,
  80. A Comparison of Automated Testing Tools for Digital Accessibility · · , , , ,
  81. Control Your Vertigo—the Unspoken Rule for Defending Design Decisions · · ,
  82. Frontend Development Beyond React: Svelte · ·
  83. JS Naked Day · · , , ,
  84. Notes on Git’s Error Messages · · ,
  85. Optimizing WebKit and Safari for Speedometer 3.0 · · , , , , ,
  86. Release Notes for Safari Technology Preview 192 · · , , ,
  87. The Guide to Git I Never Had · · , , ,
  88. Wednesday, April 10, 2024 Security Releases · · , ,
  89. A Love Letter to Gen Z from Gen Y: Understanding React’s Evolution · · ,
  90. Ableism and Related Terms You Need to Know · · , ,
  91. Figma Prototypes vs. HTML Prototypes · · , , , , ,
  92. Happy CSS Naked Day 2024 · · , ,
  93. Layered Toggles: Optional CSS Mixins · · ,
  94. React Server Components in a Nutshell · · ,
  95. Recapping ng-conf 2024 · ·
  96. Sending Email Using Node.js · · ,
  97. The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps · · , , ,
  98. Understanding Interaction to Next Paint (INP) · · ,
  99. Building a CLI from Scratch With TypeScript and oclif · · ,
  100. Inclusive Digital Experiences: Redesign Strategies for Addressing Diverse Abilities and Accessibility Challenges · · , , ,
  101. Justice Department to Publish Final Rule to Strengthen Web and Mobile App Access for People With Disabilities · · , , ,
  102. Misinformation and Disinformation Online: What Design Can Do to Remedy This Problem · · ,
  103. Node.js Debugging in Chrome DevTools · · , , , , , ,
  104. Node.js Secure Coding: Mitigate and Weaponize Code Injection Vulnerabilities · · , ,
  105. Things That I Like Better in Vue Than in React · · , , ,
  106. User Experience in the Era of AI: Enhancing Human-Machine Interactions · · ,
  107. What Is Whitespace? · · , , ,
  108. Creating a Navbar in React · · , ,
  109. DORA’s Software Delivery Metrics: The Four Keys · · ,
  110. How I Write Commits Like a Pro · · , ,
  111. The Death of Creativity · · ,
  112. 10 Must Know System Design Concepts for Interviews · · , , ,
  113. Blind Internet Users Struggle With Error-Prone AI Aids · · ,
  114. Demystifying the Shadow DOM · · ,
  115. Testing HTML With Modern CSS · · , , ,
  116. 21 HTML Tips You Must Know About · · ,
  117. WCAG Bypass Blocks (“Skip to Content”)—Improve User Interaction Speed and Even Prevent Pain · · , , , ,
  118. Why I’m Yet Another Woman Leaving the Tech Industry · · ,
  119. [zx] 8.0.0 · · ,
  120. How to Think About HTML Responsive Images · · , ,
  121. “AI” Won’t Solve Accessibility · · ,
  122. Breakpoints in Responsive Design · · , ,
  123. Creativity in Software Engineering · · , ,
  124. DevTools Tips and Tricks · · , ,
  125. Drive-By Accessibility Tweaks · ·
  126. How to Make Your Website Work Offline · · , ,
  127. Managing User Focus With “:focus-visible” · · , ,
  128. Should Designers Code? · · ,
  129. A Complete Guide to CSS Logical Properties, With Cheat Sheet · · , , ,
  130. AI and the Future of Web Accessibility Guidelines · · , , , , ,
  131. Building Components With Radix UI · · ,
  132. Modern CSS Patterns in Campfire · · ,
  133. Rounded Tabs With Inner Curves · · ,
  134. The V8 Sandbox · · ,
  135. When to Use “tabindex="0"” · · , , ,
  136. AI and the Web: Understanding and Managing the Impact of Machine Learning Models on the Web · · ,
  137. An Advanced Way to Use CSS Variables · · ,
  138. “aspect-ratio” Gotcha · · ,
  139. BFCache Explained · · ,
  140. Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks? · · ,
  141. Finally Understand Responsive Design · · , ,
  142. Fluid Typography With Discrete Steps · · ,
  143. Hanging Punctuation in CSS · · ,
  144. How to Build a Simple Web Server With Node.js · · , ,
  145. In-Page Links: 3 Usability Tips · · , , ,
  146. Svelte Parses HTML All Wrong · · , ,
  147. The View Transitions API · · , ,
  148. Theming Design Systems · · ,
  149. Using JSON Web Tokens With Node.js · · , , ,
  150. Wednesday, April 3, 2024 Security Releases · · , ,
  151. An Interactive Guide to CSS Container Queries · · , ,
  152. Authentication in Next.js · · ,
  153. Drawing a Line to Connect Elements With CSS Anchor Positioning · ·
  154. How to Get Somebody Fired Using Git · · , ,
  155. How We’re Approaching Theming With Modern CSS · · ,
  156. Infinite-Scrolling Logos in Flat HTML and Pure CSS · · , , , ,
  157. Learn JavaScript · · ,
  158. WebAssembly at Google · · , ,
  159. WordPress 6.5 “Regina” · · ,
  160. 14 Top UX Tools for Designers in 2024 · · , ,
  161. A Complete Guide for Content Creators to Start Making Accessible Content · · , ,
  162. Bun 1.1 · · ,
  163. Micro Frontends with Native Federation · · ,
  164. The Detail, the Quality · · ,
  165. What Even Is a JSON Number? · · ,
  166. 10 JavaScript Sites Every Web Developer Should Know · · , ,
  167. Kobold Letters · · , ,
  168. Latest WebAIM’s Million—Some Thoughts · ·
  169. Object Structure in JavaScript Engines · · , ,
  170. The DevOps Basics · · ,
  171. Why I Care Deeply About Web Accessibility and You Should Too · · ,
  172. Why I Use Node, Deno, Bun, [QuickJS], [txiki.js] at the Same Time · · , , ,
  173. Design Is a Process of Getting Stuck · · ,
  174. Figma Plugins · ·
  175. Front-End Development’s Identity Crisis · ·
  176. On “disabled” and “aria-disabled” Attributes · · , ,
  177. “@ scope” Is Coming to CSS and It’s Amazing · · , ,
  178. The Curious Case of the CSS Monochrome Media Query · · ,
  179. The Easy Way to Access the Last JavaScript Array Element · · ,
  180. The Power of “:has()” in CSS · · ,
  181. The WebAIM Million: The 2024 Report on the Accessibility of the Top 1,000,000 Home Pages · · , , ,
  182. What Negative Effects Does a Bad Website Design Have on My Business? · · ,
  183. A Guide to Building CLI Tools in JavaScript · · , , , ,
  184. CSS Color-Scheme-Dependent Colors With “light-dark()” · · , , ,
  185. History of JS Interop in Dart · · , , ,
  186. Improving the Developer Experience of Enterprise Design Systems · · , ,
  187. New to the Web Platform in March · · , , , , , , , ,
  188. Release Notes for Safari Technology Preview 191 · · , , ,
  189. The Complete Guide to Captioned Videos · · , , ,
  190. What’s New in DevTools, Chrome 124 · · , , , ,
  191. Flickering Glowing Text Effect With CSS · · ,
  192. How I Fixed My Brutal TTFB · · , ,
  193. In-App Browsers Are Still a Privacy, Security, and Choice Problem · · , , ,
  194. Iterator Helpers · · , ,
  195. Meet Angular’s New “output()” API · · ,
  196. What Even Are Dragging Movements? · · , ,
  197. Animating Clip Paths on Scroll With “@ property” in CSS · · , ,
  198. Be Flexible About What People Need (and Don’t Assume) · ·
  199. Convention over Creativity? The Ups and Downs of UX Design · · ,
  200. CSS Anchor Positioning · ·
  201. Exploring the Power of ARIA Live Attribute in Web Accessibility · · ,
  202. History of Web Accessibility · · , ,
  203. How to Take Control of Flexbox · · , ,
  204. How to Use jQuery’s “ajax()” Function for Asynchronous HTTP Requests · · , ,
  205. Node v20.12.0 (LTS) · · ,
  206. Quick Tip: How to Align Column Rows With CSS Subgrid · · , , ,
  207. What You Need to Know About Modern CSS (Spring 2024 Edition) · · ,
  208. Setting and Persisting Color Scheme Preferences With CSS and a “Touch” of JavaScript · · , , ,
  209. 7 Simple Rules for Better Data Visualization · ·
  210. Error Messages 101 · · , , ,
  211. How to Consolidate Multiple Design Systems · · ,
  212. Spicing Up Text With “text-emphasis” in CSS · · , ,
  213. Diving into the Node.js Website Redesign · · ,
  214. Incredible JavaScript Animation Libraries · · , , ,
  215. JavaScript Visualized: Promise Execution · · ,
  216. No One Actually Wants Accessibility · ·
  217. ARIA “role="application"” and Mobile Screen Readers · · , , , , ,
  218. Learn OAuth 2.0 by Building Your Own OAuth Client · · ,
  219. Profile Node.js Performance With the Performance Panel · · , , , , , ,
  220. Radix Themes 3.0 · · ,
  221. The “Current Branch” in Git · ·
  222. CSS Values and Units Module Level 3 · · ,
  223. Accessible Forms With Pseudo Classes · · , , ,
  224. 12 Figma Tips to Work More Efficiently · · , ,
  225. CAPTCHA Excludes Disabled Web Users · · ,
  226. Don’t Get Scammed by Fake Performance Experts and Apps · · ,
  227. Going Beyond Pixels and (r)ems in CSS—Absolute Length Units · · ,
  228. Node.js TSC Confirms: No Intention to Remove npm from Distribution · · ,
  229. Quick Tip: How to Add Gradient Effects and Patterns to Text · · , , , ,
  230. The Cost of Interrupted Work: More Speed and Stress · · , ,
  231. Optimizing JavaScript for Fun and for Profit · · ,
  232. Node.js: The Documentary · · , ,
  233. Building a Micro htmx SSR Framework · · , ,
  234. [Bulma] 1.0.0 · · ,
  235. “__dirname” Is Back in Node.js With ES Modules · · , ,
  236. How to Test 3.3.8 Accessible Authentication (Minimum) · · , , ,
  237. On Popover Accessibility: What the Browser Does and Doesn’t Do · · , ,
  238. On the Gift of OKR for Company Culture · · ,
  239. This Pattern Will Wreck Your React App’s TS Performance · · , , ,
  240. Welcome to Future of Web Accessibility Based on Predictors · · , ,
  241. How to Create a Website and a PDF from the Same Codebase · · , ,
  242. Aesthetic Layouts: 2 Column Magazine With “shape-outside” · · , ,
  243. Psychology and UX: Decoding the Science Behind User Clicks · · , ,
  244. How to Plan Your First Successful Website · · ,
  245. Folder Structures in React Projects · · ,
  246. Progressive Disclosure Defaults · · , ,
  247. The Box Model and Box Sizing · · ,
  248. Build a Full-Stack App With Node.js and htmx · · , ,
  249. Chill Scroll Snapping: Article Headers · · ,
  250. Using Relative Colors · · ,