Frontend Dogma

News and Tools for Frontend Development (20)

(Stay up-to-date on all topics by RSS feed or on Mastodon.)

  1. Revisiting Why Hyperlinks Are Blue · · ,
  2. A Deep CSS Dive into Radial and Conic Gradients · · ,
  3. Don’t Fight the Cascade, Control It! · · ,
  4. How Not to Learn TypeScript · ·
  5. Writing With Respect · ·
  6. Alt Tag Emptiness · · , , , ,
  7. Foundations: Animations and Flashing Content · · ,
  8. HTML Is General, ARIA Is Specific · · ,
  9. Memory Leaks, How to Avoid Them in a React App · · ,
  10. Ban Embed Codes · ·
  11. Your CSS Reset Needs “text-size-adjust” (Probably) · · ,
  12. Two Ways to Clear an Array With Vanilla JavaScript · · ,
  13. 22 Smart Google SEO Tips for 2022 · · , ,
  14. Labeling the Point: Scenarios of Label Misuse in WCAG · · , ,
  15. Reduce the Pressure on Young and Inexperienced Developers · · ,
  16. How to Measure Your Design System? · · , ,
  17. Memory Leaks: The Forgotten Side of Web Performance · · ,
  18. Styling Strategies Using Typography · ·
  19. The 6 Most Important CSS Concepts for Beginners · · ,
  20. The Good, the Bad, and the Toggle · · ,
  21. CSS Underlines Are Too Thin and Too Low in Chrome · · , , ,
  22. 30 Frontend Tips · · ,
  23. Fetch Commit Logs of Certain Function or Method in Git · · ,
  24. Imperative vs. Declarative Programming · · , ,
  25. The Web Doesn’t Have Version Numbers · · ,
  26. Accessible Heading Structure · · , ,
  27. 8 Techniques to Write Cleaner JavaScript Code · ·
  28. How Flexbox Works · · ,
  29. A Contrast of Errors · · , , ,
  30. Five 2022 Accessibility Trends · · ,
  31. A Unified Theory of Web Performance · ·
  32. Exposing Mid-Resource LCP Values · · ,
  33. Image Magnifier Using Only One Line of CSS · · ,
  34. Page Visibility: If a Tree Falls in the Forest… · · , ,
  35. Add Less · ·
  36. pkg.land · · , ,
  37. Using Diagnostic Metrics · · ,
  38. Empathetic Animation · · ,
  39. WCAG and Accessibility: What Is a Statement of Partial Conformance? · · , ,
  40. Practical Tips for Load-Testing Web Applications · · , , ,
  41. Shedding Light on Fiverr’s Dark Mode Creation Process · · ,
  42. Add a Service Worker to Your Site · · ,
  43. CSS in 2022 · ·
  44. Web Accessibility Cheat Sheet · · ,
  45. The Business Case for Performance · · ,
  46. 1000+ Web Development Resources · ·
  47. Faster Websites by Using Less HTML · · , , , ,
  48. Form Autocomplete · · ,
  49. Redirect Liquidation · · ,
  50. Show, Don’t Tell · · , ,
  51. The Many Methods for Using SVG Icons · · , ,
  52. Personalize It! · · , ,
  53. Frontend Web Performance: The Essentials · ·
  54. The CSS “:has()” Pseudo-Class, aka Parent Selector · · ,
  55. Wrapping Text Inside an SVG Using CSS · · ,
  56. CSS Animation · · ,
  57. CSS Snapshot 2021 · ·
  58. Make Joyful Things · ·
  59. Building a Greener Web · ·
  60. The CSS “:has()” Selector Is Way More Than a “Parent Selector” · · ,
  61. Introduction to Cognitive Disability and Accessibility Testing · · , ,
  62. Auto Dark Theme · · , ,
  63. Be Prepared for Failure and Handle It Gracefully · · ,
  64. Image Display Elements · · , ,
  65. Smoothly Reverting CSS Animations · · ,
  66. The Web Starts on Page Four · ·
  67. Why UX Is the Best SEO Strategy · · , ,
  68. Design Sprints Revisited: Designing With Your Users and Developers · · ,
  69. How to Add and Remove a CSS Class from Multiple Elements With Vanilla JavaScript · · , ,
  70. PHP 8 in a Nutshell · · ,
  71. How to Define Your Relationship to Sites You Link To · · , , , ,
  72. 5 Common Misconceptions About WAI-ARIA and Accessibility · · , ,
  73. Preference Queries · ·
  74. Web Performance, Core Web Vitals, and Vanity Metrics · · , ,
  75. 4 HTML Concepts You Didn’t Know · · , ,
  76. This Is WCAG 2.1 · · , ,
  77. This Is WCAG · · , , ,
  78. There’s Never Been a Better Time to Build Websites · · ,
  79. Consistent, Fluidly Scaling Type, and Spacing · · ,
  80. Inaccessibility of CAPTCHA · · ,
  81. Web Platform Design Principles · · , ,
  82. Why Motion on Websites and Digital Content Is a Problem · ·
  83. Don’t Start With Microservices in Production—Monoliths Are Your Friend · · , ,
  84. Hands On With the New Responsiveness Metrics · · , ,
  85. Deep-Copying in JavaScript Using “structuredClone” · ·
  86. Sustaining Maintaining · ·
  87. CSS Custom Properties · · ,
  88. Explain Like I’m Five: Web Performance Optimization · · ,
  89. Shifting the Mindset About Accessible Content · · ,
  90. Thoughts on Skin Tone and Text Descriptions · · , ,
  91. The State of CSS 2021 · · ,
  92. 100 Tips on Software Developer Productivity · · ,
  93. CSS Can Help Improve Your HTML!? Buttons and Links · · , , , ,
  94. Details/Summary · · ,
  95. Performance Implications of JavaScript Errors · · , ,
  96. Practical Ethics for the Modern Web Designer · · ,
  97. The Ideal Line Length and Line Height in Web Design · · ,
  98. Visual Regression Testing for Design Systems With Figma Branches · · , , ,
  99. Read Your Website · ·
  100. Lessons Learned from Publishing a Content Security Policy · · , ,
  101. Intersection Observer · · ,
  102. WCAG 2.2: What We Know Till Now · · ,
  103. Embrace the Platform · · , , ,
  104. WCAG 2 Is What We Have · · ,
  105. Defer Non-Critical Resources · · ,
  106. 5 Key Benefits of Using a Tag Manager · ·
  107. WCAG 3 Is Not Ready Yet · · ,
  108. Standardizing Focus Styles With CSS Custom Properties · · , , ,
  109. How to Customize Firefox UI—Step-by-Step Tutorial · · , , , , , ,
  110. Breaking Out of the Box · · ,
  111. Caching: Understanding the Scope · · ,
  112. The Last Design You’ll Ever Make · ·
  113. Responsive Iframes With the CSS “aspect-ratio” Property · · ,
  114. WCAG 3 and APCA · · , , , ,
  115. 1993: Mosaic Launches and the Web Is Set Free · · ,
  116. 5 Reasons You Should Adopt a Micro Frontend Architecture · ·
  117. Content Separation · ·
  118. Node.js Memory Limits—What You Should Know · · ,
  119. Writing Better CSS · · , ,
  120. A Beginner’s Guide to Vue Router · · ,
  121. Defensive CSS · ·
  122. Explainer for W3C Accessibility Guidelines (WCAG) 3.0 · · ,
  123. Google Fonts Knowledge · · , ,
  124. Optimizing State Management in React Applications · · ,
  125. Test Your Product on a Crappy Laptop · · , ,
  126. Where Do You Put Spacing on Design System Components? · · , , ,
  127. HTTP Compression · · , , ,
  128. Why You Should Check in Your Node Dependencies · · ,
  129. Reduce Your Website’s Environmental Impact With a Carbon Budget · ·
  130. Designing Better Links for Websites and Emails: A Guideline · · , ,
  131. CSS Fingerprinting · · , , ,
  132. Have Core Web Vitals Made the Web Faster? · · ,
  133. The Love of Curvilinear Design · ·
  134. How Many People With Disabilities Use Our Site? · ·
  135. Plugging Memory Leaks in Your App · · ,
  136. Ain’t No Party Like a Third Party · · , ,
  137. JSON Modules in JavaScript · · , ,
  138. Request for a General Theory of Web Performance · ·
  139. Revisiting the Anatomy of a Design System · ·
  140. Why Every Developer Should Start Blogging · · , , ,
  141. Markup · · ,
  142. Best Practices for Node.js Development · · , ,
  143. Accessibility · · ,
  144. CSS · · ,
  145. HTTP · · , ,
  146. JavaScript · · ,
  147. Page Weight · · ,
  148. Security · · ,
  149. Understanding Accessibility · · , ,
  150. Why Color Contrast Is Not as Black and White as It Seems · · , ,
  151. The Fundamentals of CSS Layout · · , , ,
  152. The Surprising Behavior of “Important CSS Custom Properties” · · , ,
  153. CSS Layout from the Inside Out · · , ,
  154. Making Accessibility More Accessible · ·
  155. Introduction to TCP Connection Establishment for Software Developers · · , ,
  156. Introduction to Svelte Actions · · ,
  157. Understanding WCAG 2.1 Level AAA · · ,
  158. Select Elements With “pointer-events: none” by Holding Shift · · ,
  159. How to Maintain a Large Next.js Application · · , ,
  160. On Yak Shaving and “<md-block>”, a New HTML Element for Markdown · · , ,
  161. What Is WHOIS and How Does It Work? · · ,
  162. Programmers Should Stop Celebrating Incompetence · ·
  163. Make Your Website Stand Out With a Custom Scrollbar · ·
  164. How to Trim Strings in JavaScript · · ,
  165. 7 Ways to Improve Node.js Performance at Scale · · , ,
  166. Three Phases of Life for Design Systems · ·
  167. Creating Generative Patterns With the CSS Paint API · · ,
  168. Get Started With Validation in Node.js · · ,
  169. What Kind of Developer Do I Want to Be? · ·
  170. Adding a Dyslexia-Friendly Mode to a Website · · ,
  171. Control Layout in a Multi-Directional Website · · , ,
  172. The 6 Ways of Writing HTML (and Their Combinations) · ·
  173. Functional Programming in PHP: Higher-Order Functions · · , ,
  174. Modern CSS in a Nutshell · ·
  175. How JavaScript Engines Achieve Great Performance · · , ,
  176. Responsive Layouts, Fewer Media Queries · · ,
  177. Blog Page Accessibility Deep Dive · · ,
  178. Designing Sustainable Websites · · , ,
  179. Dear HTML Element · ·
  180. Communicating Accessibility as Needs to Be Met and Not Rules to Be Followed · · ,
  181. Parallax Powered by CSS Custom Properties · · ,
  182. 20 Years of bram.us · ·
  183. Tales of the Autistic Developer—Order and Chaos · ·
  184. How to Make Blob Menu Using HTML, CSS and JavaScript · · , , ,
  185. Introduction to Web Sockets · · , , ,
  186. 1992: The Web vs. Gopher, and the First External Browsers · ·
  187. Let’s Not Send Developers to the Accessibility Tree Tool · · , ,
  188. PHP Date and Time Recipes · ·
  189. Various Ways to Include Comments on Your Static Site · ·
  190. Dynamic Color Manipulation With CSS Relative Colors · · ,
  191. Performance · · , ,
  192. Three Principles to Better Present Your UI Designs · · ,
  193. WCAG 3.0: What You Need to Know About the Future of Accessibility Standards · · , ,
  194. A Guide to Modern CSS Colors With RGB, HSL, HWL, LAB, and LCH · · , ,
  195. How to Create Reusable Components With the Vue 3 Composition API · · , ,
  196. A Clever Sticky Footer Technique · · ,
  197. A Primer on Product Management for Engineers · ·
  198. Reframing Tech Debt · ·
  199. We Need to Talk About Accessibility—Again, and Again, and Then Some More · ·
  200. 4 Ways to Document Your Design System With Storybook · · , ,
  201. Generate a Pull Request of Static Content With a Simple HTML Form · · ,
  202. Using Position Sticky With CSS Grid · · ,
  203. GitHub’s Commitment to npm Ecosystem Security · · , ,
  204. Your CSS Is an Interface · · ,
  205. Access to Tech, Tech to Live · · ,
  206. Get Your “Head” Straight · · , ,
  207. 5 Popular Frontend Development Tools in 2021 · ·
  208. Some Notes on Using esbuild · · ,
  209. How to Fetch Data in Svelte · · , ,
  210. Why IndexedDB Is Slow and What to Use Instead · · , , ,
  211. Design Systems, Structured Content, and Headless Publishing · · , , ,
  212. Useful React Hooks That You Can Use in Your Projects · · ,
  213. Using Web Workers to Boost Third-Party Script Performance · · , ,
  214. Chrome DevTools: Copy CSS Styles as JavaScript-Compatible Properties · · , , , , ,
  215. Why Your Website Should Not Use Dithered Images · · , , ,
  216. How to Debounce and Throttle Callbacks in Vue · · , , , ,
  217. Other Looks at the Conditional Border Radius Trick · · , ,
  218. Easy Dark Mode (and Multiple Color Themes) in React · · , ,
  219. It’s Not About Your Favorite Color—Moving from Brand Strategy to Visual Identity · · , ,
  220. View-Source · · ,
  221. Everything You Ever Wanted to Know About the Accessibility Tree · · ,
  222. A Beginner’s Guide to Routing in Next.js, With Examples · · , ,
  223. Browsing With Screen Magnification · · , ,
  224. Be Usable, Not Consistent, Not Uniform · · ,
  225. How Designers Can Prevent User Errors · · , ,
  226. Localizing Your Next.js App · · , ,
  227. Detecting Specific Text Input With HTML and CSS · · ,
  228. Debugging HTML: Accessibility · · , ,
  229. Why You Should Prioritise Quality over Speed in Design Systems · ·
  230. Becoming an Expert · · , , ,
  231. Designing a Reorderable List Component · · , , ,
  232. PHP 8.1 in 8 Code Blocks · ·
  233. In Defence of Dialog · · ,
  234. Deep Dive into Node.js Architecture · · ,
  235. Chrome DevTools: Record and Playback Your User Journeys · · , , , , ,
  236. Everything You Have to Know About Core Web Vitals · · ,
  237. RenderingNG: The Next-Generation Rendering Architecture for Chrome · · , , , , , ,
  238. The Key to Developer Happiness and How to Prevent Coding from Becoming Just Another Job · · ,
  239. How to Implement Memoization in React to Improve Performance · · , , , ,
  240. Browser Wars · · ,
  241. Building Real-Life Components: Facebook Messenger’s Chat Bubble · · , ,
  242. Design Is Not Art, and UX Is Not Design · · ,
  243. Designing Error Messages and a Logging Strategy in Node.js · · , , , ,
  244. Understanding the Differences Between WCAG 2.1 and WCAG 2.2 · · , ,
  245. Learn Forms · · , ,
  246. Learn PWA · · ,
  247. A Deep Dive into Serverless UI With TypeScript · · ,
  248. Rebase vs. Merge: Integrating Changes in Git · · ,
  249. The State of the Web · · ,
  250. What Are Accessible Fonts? · · ,