Frontend Dogma

News and Tools for Frontend Development (22)

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

  1. Colors That Make Sense · · , ,
  2. Foundations: Colour and Meaning · · ,
  3. Version 100 in Chrome and Firefox · · , , , , ,
  4. The Basics of package.json · · , , , ,
  5. WCAG 2.2 Update · · ,
  6. 7 Killer One-Liners in JavaScript · ·
  7. Functions and the Future of Design Systems · ·
  8. The Entire Cascade (as a Funnel) · · , ,
  9. Hello, CSS Cascade Layers · · ,
  10. Using the Language Attribute to Make Your Website Accessible · · , ,
  11. Why Radio Buttons Are Called Radio Buttons in UIs? · · , ,
  12. Multi-Value CSS Properties With Optional Custom Property Values · · ,
  13. WebDex: Web Specs Index · · , ,
  14. Moving from JavaScript to TypeScript · · ,
  15. How to Keep Your Repo Package Dependencies Up to Date Automatically · · , ,
  16. How Thinking About Hierarchical Grids Helps You Take a Content-First Approach to Design · · , ,
  17. MHTML in Chromium · · ,
  18. Only 2% of Sites Meet Accessibility Standards—Let’s Change That · ·
  19. The Difference Between Brotli and Gzip Compression Algorithms to Speed Up Your Site · · ,
  20. What I Learned Implementing a Design System for an Existing Product · ·
  21. How to Make CSS Slanted Containers · · ,
  22. Everything Publishers Need to Know About URLs · · , ,
  23. Building an Adaptive Favicon · · ,
  24. Accessibility Monitoring: How We Test · · , , ,
  25. Debugging JavaScript · · ,
  26. Aspect Ratio Is Great · · ,
  27. New in JavaScript: “reportError”—a Method to Report to Global Event Handlers · · ,
  28. Move Over JavaScript: Back-End Languages Are Coming to the Front-End · ·
  29. Developing a Focus Style for a Themable Design System · · , , ,
  30. This Is Why Your Node.js Application Is Slow · · ,
  31. Replace JavaScript Dialogs With the New HTML Dialog Element · · , ,
  32. Accessibility Testing Best Practices in CI/CD · · , , ,
  33. Creating Generative SVG Grids · · ,
  34. Modern, Single-Page Web Design: UX Design Trends and Tips · · , ,
  35. Do We Need Screen Reader for Accessibility Testing · · , , , ,
  36. How to Favicon in 2022: Six Files That Fit Most Needs · · , ,
  37. CSS Animations Tutorial: Complete Guide for Beginners · · , , ,
  38. Introducing the Dialog Element · · , ,
  39. How to Create a UX Vision Statement · · ,
  40. How to Use the Accessibility Tree for A11Y Testing · · , ,
  41. UX and User Personas: How to Get It Right · · , ,
  42. Are We Live? · · ,
  43. Design System Versioning: Single Library or Individual Components? · · ,
  44. Foundations: Colour Contrast · · , ,
  45. Understanding the W3C’s Accessibility Conformance Testing (ACT) Requirements · · , ,
  46. What Web Frameworks Solve: The Vanilla Alternative · · , ,
  47. 8 Key Elements for Creating a Culture of Accessibility · · ,
  48. The Impact of Motion Animation on Cognitive Disability · · , ,
  49. Reducing the Web’s Carbon Footprint: Optimizing Social Media Embeds · · , , ,
  50. No Accessibility Without Disabilities · · ,
  51. Why Efficient Hydration in JavaScript Frameworks Is So Challenging · · , ,
  52. Grow Your Design System from Good to Great · ·
  53. Settings Are Not a Design Failure · · , ,
  54. State of Frontend 2022 · ·
  55. Assistive Technology, Accessible Technology, and the Accessibility Tree · · , , , ,
  56. Improving JavaScript Bundle Performance With Code-Splitting · · , , , ,
  57. 5 Pitfalls of Using Micro Frontends and How to Avoid Them · ·
  58. Building Like It’s 1984: A Comprehensive Guide to Creating Intuitive Context Menus · · , ,
  59. Career Advice Nobody Gave Me: Never Ignore a Recruiter · ·
  60. Structuring Your Storybook · ·
  61. “Evergreen” Does Not Mean Immediately Available · ·
  62. CSS—Understanding the Cascade · · , ,
  63. Cascade Layers Are Coming to Your Browser · · , , ,
  64. Website Themes and Color Schemes · · , , ,
  65. 24 Lesser-Known HTML Attributes You May Want to Use · ·
  66. 4 Questions to Ask Before Using ARIA · · , , ,
  67. Accessibly Insecure · · ,
  68. Speed Matters, but It Isn’t Everything · · , ,
  69. Use Cases for CSS “fit-content” · ·
  70. Learn Responsive Design · · ,
  71. A More Easy Way to Write “if … or” Checks With Vanilla JavaScript · ·
  72. Preventing Smooth Scrolling With JavaScript · · ,
  73. The Focus-Indicated Pseudo-Class “:focus-visible” · · , ,
  74. Inclusive Design · · ,
  75. Cascade Layers: First Contact · · ,
  76. Internal Onboarding for Design System Teams · · ,
  77. What Web Frameworks Solve and How to Do Without Them · · , ,
  78. How Does “!important” Actually Work? · · , ,
  79. Why You Should Use a Developer Font · · , ,
  80. Why Testing After Is a Bad Practice · ·
  81. WCAG, but in Language I Can Understand · · ,
  82. Caching Header Best Practices · · , ,
  83. Cherry Picking Commits in Git · · ,
  84. Demystifying TypeScript Discriminated Unions · ·
  85. There’s No Such Thing as Clean Code · · ,
  86. To Create an Excellent Design System, Treat It Like a Collaborative Process · · , ,
  87. Top Ten Most Common Web Accessibility Issues · ·
  88. A Pipe Operator for JavaScript: Introduction and Use Cases · · , ,
  89. WebAssembly Feature Detection · · , ,
  90. Naming Design Tokens · · ,
  91. The Double-Assignment Pattern in jQuery’s Source Code · · ,
  92. What’s New in DevTools? · · , , , , , , , , ,
  93. The Return of Server Side Routing · ·
  94. Design System: How to Efficiently Scale Development? · · , ,
  95. How to Convert Markdown to HTML · · , , ,
  96. Overview of Accessibility Testing Using DevTools · · , , , , , ,
  97. Fancy CSS Borders Using Masks · · , , ,
  98. The Baseline for Web Development in 2022 · · , , , , , ,
  99. Here’s What I Didn’t Know About “:where()” · · ,
  100. An Introduction to CSS Cascade Layers · · , ,
  101. Best Practices for Creating Your UX Design Portfolio · · , , ,
  102. Foundations: Text Descriptions · · ,
  103. Monorepo Explained · · ,
  104. Why Don’t Developers Take Accessibility Seriously? · ·
  105. The Risks and Rewards of App Modernization · · , ,
  106. More to Give Than Just the Div: Semantics and How to Get Them Right · · , ,
  107. Drift: Why Your Design System Isn’t Working · · ,
  108. Technology Time-Outs · · ,
  109. The Many Ways to Modify Leading and Trailing Characters from Strings With JavaScript · ·
  110. Context-Aware Web Components Are Easier Than You Think · · , ,
  111. How to Check What Item Is in Focus When Accessibility Testing · · , , ,
  112. Accessibility Acceptance Criteria · · , , ,
  113. Big Images, Blazingly Fast · · , ,
  114. Div Divisiveness · · ,
  115. Optimize Your PNGs With Oxipng and pre-commit · · , , , ,
  116. The Future of CSS: Detect At-Rule Support With “@ supports at-rule(@ keyword)” · · ,
  117. Frontend Predictions for 2022 · · , , , ,
  118. Design Systems Are Flawed · ·
  119. Giving Web Standards a Seat at the Table · · ,
  120. What Should Someone Learn About CSS If They Last Boned Up During CSS3? · ·
  121. How to Avoid Layout Shifts Caused by Web Fonts · · , , ,
  122. Create an Open Graph Image Generator With Node.js · · , ,
  123. The Breakpoints We Tested in 2021 and 2022, and the Ones to Test in 2023 · · ,
  124. How to Set Up a Node.js Project With TypeScript · · , ,
  125. An Introduction to High Contrast Accessibility · · , , ,
  126. Making IT Accessible for All! · · ,
  127. Naming Conventions for Your Design System · · , ,
  128. Quick Accessibility Tests Anyone Can Do · · , ,
  129. TypeScript Features to Avoid · ·
  130. Building UI Components With SVG and CSS · · , ,
  131. Using PostCSS With Media Queries Level 4 · · , ,
  132. Becoming a Better Writer as a Software Engineer · · ,
  133. Modern Fluid Typography Using CSS Clamp · · ,
  134. Rethinking Component Libraries · ·
  135. Comparing CSS Specificity Values · · ,
  136. Find HTML Parsing Errors · · , , , ,
  137. Frontend Challenges: Front-End Engineer Assignment · · , , ,
  138. On the Peculiarities of Counting the Number of HTML Elements · ·
  139. The Real Added Costs of Accessibility · · ,
  140. “structuredClone()”: Deeply Copying Objects in JavaScript · · ,
  141. Choosing Open Source License Wisely · · ,
  142. Accessibility Data Is Not the Enemy · · ,
  143. CSS Cascade Layers: An Overview of the New “@ layer” and “layer()” CSS Primitives · · , , ,
  144. Building an Accessible Digital World · ·
  145. Rationalise It! 5 Steps to Introduce a New Component to the Design System · · ,
  146. Accessibility and 2022: 13 Design Trends from a Usability Perspective · · , , ,
  147. Git Organized: A Better Git Flow · · , ,
  148. Boolean Attributes in HTML and ARIA: What’s the Difference? · · ,
  149. Web Accessibility Lawsuits Dramatically Rose in 2021 · · , ,
  150. Website Performance and the Planet · · , ,
  151. An Introduction to Tech Debt (and Why It Can Change Your Career) · · , ,
  152. Make Beautiful Gradients · · ,
  153. PHP in 2022 · ·
  154. Remix vs. Next.js · · , ,
  155. Social Media Image Sizes 2022: Cheat Sheet for Every Network · · , ,
  156. Software Is Automating Design—What Does That Mean for Designers? · · ,
  157. Revisiting Why Hyperlinks Are Blue · · ,
  158. A Deep CSS Dive into Radial and Conic Gradients · · ,
  159. Don’t Fight the Cascade, Control It! · · ,
  160. How Not to Learn TypeScript · ·
  161. Writing With Respect · ·
  162. Alt Tag Emptiness · · , , , ,
  163. Foundations: Animations and Flashing Content · · ,
  164. HTML Is General, ARIA Is Specific · · ,
  165. Memory Leaks, How to Avoid Them in a React App · · , ,
  166. Ban Embed Codes · ·
  167. Your CSS Reset Needs “text-size-adjust” (Probably) · · ,
  168. Two Ways to Clear an Array With Vanilla JavaScript · · ,
  169. 22 Smart Google SEO Tips for 2022 · · , ,
  170. Labeling the Point: Scenarios of Label Misuse in WCAG · · , ,
  171. Reduce the Pressure on Young and Inexperienced Developers · · ,
  172. How to Measure Your Design System? · · , ,
  173. Memory Leaks: The Forgotten Side of Web Performance · · ,
  174. Styling Strategies Using Typography · ·
  175. The 6 Most Important CSS Concepts for Beginners · · ,
  176. The Good, the Bad, and the Toggle · · ,
  177. CSS Underlines Are Too Thin and Too Low in Chrome · · , , ,
  178. 30 Frontend Tips · · ,
  179. Fetch Commit Logs of Certain Function or Method in Git · · ,
  180. Imperative vs. Declarative Programming · · , ,
  181. The Web Doesn’t Have Version Numbers · · ,
  182. Accessible Heading Structure · · , ,
  183. 8 Techniques to Write Cleaner JavaScript Code · ·
  184. Responsive Image Gallery With Animated Captions · · , , , ,
  185. How Flexbox Works · · ,
  186. A Contrast of Errors · · , , ,
  187. Five 2022 Accessibility Trends · · ,
  188. A Unified Theory of Web Performance · ·
  189. Exposing Mid-Resource LCP Values · · ,
  190. Image Magnifier Using Only One Line of CSS · · ,
  191. Page Visibility: If a Tree Falls in the Forest… · · , ,
  192. Add Less · ·
  193. pkg.land · · , ,
  194. Using Diagnostic Metrics · · ,
  195. Empathetic Animation · · ,
  196. WCAG and Accessibility: What Is a Statement of Partial Conformance? · · , ,
  197. Practical Tips for Load-Testing Web Applications · · , , ,
  198. Shedding Light on Fiverr’s Dark Mode Creation Process · · ,
  199. Add a Service Worker to Your Site · · ,
  200. CSS in 2022 · ·
  201. Web Accessibility Cheat Sheet · · ,
  202. The Business Case for Performance · · ,
  203. 1000+ Web Development Resources · ·
  204. Faster Websites by Using Less HTML · · , , , ,
  205. Form Autocomplete · · ,
  206. Redirect Liquidation · · ,
  207. Show, Don’t Tell · · , ,
  208. The Many Methods for Using SVG Icons · · , ,
  209. Personalize It! · · , ,
  210. Frontend Web Performance: The Essentials · ·
  211. The CSS “:has()” Pseudo-Class, aka Parent Selector · · ,
  212. Wrapping Text Inside an SVG Using CSS · · ,
  213. CSS Animation · · ,
  214. CSS Snapshot 2021 · ·
  215. Make Joyful Things · ·
  216. Building a Greener Web · ·
  217. The CSS “:has()” Selector Is Way More Than a “Parent Selector” · · ,
  218. Introduction to Cognitive Disability and Accessibility Testing · · , ,
  219. 13 Tools and Techniques to Accelerate Frontend Development · · , , , , , , , , ,
  220. Auto Dark Theme · · , ,
  221. Be Prepared for Failure and Handle It Gracefully · · ,
  222. Image Display Elements · · , ,
  223. Smoothly Reverting CSS Animations · · ,
  224. The Web Starts on Page Four · ·
  225. Why UX Is the Best SEO Strategy · · , ,
  226. Design Sprints Revisited: Designing With Your Users and Developers · · ,
  227. How to Add and Remove a CSS Class from Multiple Elements With Vanilla JavaScript · · , ,
  228. PHP 8 in a Nutshell · · ,
  229. How to Define Your Relationship to Sites You Link To · · , , , ,
  230. 5 Common Misconceptions About WAI-ARIA and Accessibility · · , ,
  231. Preference Queries · ·
  232. Web Performance, Core Web Vitals, and Vanity Metrics · · , ,
  233. 4 HTML Concepts You Didn’t Know · · , ,
  234. This Is WCAG 2.1 · · , ,
  235. This Is WCAG · · , , ,
  236. There’s Never Been a Better Time to Build Websites · · ,
  237. Inaccessibility of CAPTCHA · · ,
  238. Web Platform Design Principles · · , ,
  239. Why Motion on Websites and Digital Content Is a Problem · ·
  240. Don’t Start With Microservices in Production—Monoliths Are Your Friend · · , ,
  241. Hands On With the New Responsiveness Metrics · · , ,
  242. Deep-Copying in JavaScript Using “structuredClone” · ·
  243. Sustaining Maintaining · ·
  244. Consistent, Fluidly Scaling Type, and Spacing · · ,
  245. CSS Custom Properties · · ,
  246. Explain Like I’m Five: Web Performance Optimization · · ,
  247. Shifting the Mindset About Accessible Content · · ,
  248. Thoughts on Skin Tone and Text Descriptions · · , ,
  249. The State of CSS 2021 · · ,
  250. 100 Tips on Software Developer Productivity · · ,