Frontend Dogma

News and Tools for Frontend Development (22)

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

  1. Top 2021 CSS Frameworks Report: The CSS File Sizes · · , , , ,
  2. 4 Simple Ways to Improve Web Accessibility · · ,
  3. Overlay Position and Recommendations · · ,
  4. When to Avoid the “text-decoration” Shorthand Property · ·
  5. How I Structure My React Projects · · ,
  6. Screaming Architecture—Evolution of a React Folder Structure · · ,
  7. Accessibility and Inclusivity in Practice · · , ,
  8. Understanding Dependencies Inside Your package.json · · , , ,
  9. Deploying a React Application to Netlify · · , , ,
  10. 5 Accessibility Quick Wins You Can Implement Today · ·
  11. Container Queries, the Next Step Towards a Truly Modular CSS · · , ,
  12. Moving from Next to Remix · · , , ,
  13. Can You Get Pwned With CSS? · · ,
  14. HTML Comments Work in JavaScript Too · · , ,
  15. How to Fix Your Security Vulnerabilities With npm Override · · , , ,
  16. How to Make MPAs That Are as Fast as SPAs · · , , ,
  17. A Complete Guide to CSV Files in Node.js · · , , ,
  18. Component Tokens and Themes Example (to Learn Figma Tokens) · · , , , ,
  19. Inclusive Design vs. Accessible Design: Understanding the Differences · · , , ,
  20. Reliably Send an HTTP Request as a User Leaves a Page · ·
  21. Support for Marking Radio Buttons Required, Invalid · · ,
  22. Turning the Tables on Accessibility · ·
  23. What Is Responsible JavaScript? · · ,
  24. The Case for Adding Validation State to Your Design Tokens · · ,
  25. Favi-Gone: 6 Reasons Why Your Favicon Disappeared from the Google Search Results · · , , ,
  26. SPAs Were a Mistake · · ,
  27. Comparing Gatsby and Next.js for Website Development · · , , ,
  28. Design Systems in Figma: How to Be More Productive · · , , ,
  29. How to Prioritize Your Components · · , ,
  30. 15 Useful Placeholder Tools for Designers and Developers · · , , , , ,
  31. A Complete Guide to CSS Cascade Layers · · , ,
  32. How Websites Die · · ,
  33. Let’s Get Inclusive: Designing Products for Everyone · · ,
  34. Writing Logic in CSS · ·
  35. Design System: How to Successfully Collaborate? · · , ,
  36. CSS Quick Tip: Animating in a Newly Added Element · · , ,
  37. Column Headers and Browser Support · · , ,
  38. Invisible Characters · · ,
  39. Minimizing Google Fonts by Only Loading It for Certain Characters · · , , , ,
  40. React State Management Libraries in 2022 · · , ,
  41. You Can “throw()” Anything in JavaScript—and Other “async”/“await” Considerations · ·
  42. There Is No Character Limit for “Alt Text” · · , ,
  43. Comparing Node JavaScript to JavaScript in the Browser · · , , ,
  44. Core Web Vitals: What Next? · · , ,
  45. Structuring Documentation in Multi-Brand Design Systems · · ,
  46. Using “mask” as “clip-path” · · , ,
  47. JavaScript Obfuscation: The Definitive Guide (2022) · · , ,
  48. Flexbox Dynamic Line Separator · ·
  49. What Makes Writing More Readable? · · ,
  50. Web Developers and Cognitive Biases · · ,
  51. How to Create a Search Page for a Static Website With Vanilla JS · · , , , ,
  52. An Auto-Filling CSS Grid With Max Columns of a Minimum Size · · ,
  53. The State of JavaScript 2021 · · ,
  54. The Harsh Reality for JavaScript Developers: If You Don’t Study the Fundamentals You Will Be Just Another “Coder” · · , ,
  55. 7 Lessons I’ve Learned in the Last Year as a Software Engineer · · ,
  56. Track Down the JavaScript Code Responsible for Polluting the Global Scope · · ,
  57. What Is the Difference Between WCAG Compliance Level A, AA, and AAA? · · , ,
  58. 10 Mental Models Developers Can Use to Get Unstuck · ·
  59. Colors That Make Sense · · , ,
  60. Foundations: Colour and Meaning · · ,
  61. Version 100 in Chrome and Firefox · · , , , , ,
  62. The Basics of package.json · · , , , ,
  63. Never, Ever, Ever Use Pixelation for Redacting Text · · , , ,
  64. WCAG 2.2 Update · · ,
  65. 7 Killer One-Liners in JavaScript · ·
  66. Functions and the Future of Design Systems · ·
  67. The Entire Cascade (as a Funnel) · · , ,
  68. Hello, CSS Cascade Layers · · ,
  69. Using the Language Attribute to Make Your Website Accessible · · , ,
  70. Why Radio Buttons Are Called Radio Buttons in UIs? · · , ,
  71. Multi-Value CSS Properties With Optional Custom Property Values · · ,
  72. WebDex: Web Specs Index · · , ,
  73. Moving from JavaScript to TypeScript · · ,
  74. How to Keep Your Repo Package Dependencies Up to Date Automatically · · , ,
  75. How Thinking About Hierarchical Grids Helps You Take a Content-First Approach to Design · · , ,
  76. MHTML in Chromium · · ,
  77. Only 2% of Sites Meet Accessibility Standards—Let’s Change That · ·
  78. The Difference Between Brotli and Gzip Compression Algorithms to Speed Up Your Site · · ,
  79. What I Learned Implementing a Design System for an Existing Product · ·
  80. How to Make CSS Slanted Containers · · ,
  81. Everything Publishers Need to Know About URLs · · , ,
  82. Building an Adaptive Favicon · · ,
  83. Accessibility Monitoring: How We Test · · , , ,
  84. Aspect Ratio Is Great · · ,
  85. Debugging JavaScript · · ,
  86. New in JavaScript: “reportError”—a Method to Report to Global Event Handlers · · ,
  87. Move Over JavaScript: Back-End Languages Are Coming to the Front-End · ·
  88. Developing a Focus Style for a Themable Design System · · , , ,
  89. This Is Why Your Node.js Application Is Slow · · ,
  90. Replace JavaScript Dialogs With the New HTML Dialog Element · · , ,
  91. Accessibility Testing Best Practices in CI/CD · · , , ,
  92. Creating Generative SVG Grids · · ,
  93. Modern, Single-Page Web Design: UX Design Trends and Tips · · , ,
  94. Do We Need Screen Reader for Accessibility Testing · · , , , ,
  95. How to Favicon in 2022: Six Files That Fit Most Needs · · , ,
  96. CSS Animations Tutorial: Complete Guide for Beginners · · , , ,
  97. Introducing the Dialog Element · · , ,
  98. How to Create a UX Vision Statement · · ,
  99. How to Use the Accessibility Tree for A11Y Testing · · , ,
  100. UX and User Personas: How to Get It Right · · , ,
  101. Are We Live? · · ,
  102. Design System Versioning: Single Library or Individual Components? · · ,
  103. Foundations: Colour Contrast · · , ,
  104. Understanding the W3C’s Accessibility Conformance Testing (ACT) Requirements · · , ,
  105. What Web Frameworks Solve: The Vanilla Alternative · · , ,
  106. 8 Key Elements for Creating a Culture of Accessibility · · ,
  107. Reducing the Web’s Carbon Footprint: Optimizing Social Media Embeds · · , , ,
  108. The Impact of Motion Animation on Cognitive Disability · · , ,
  109. No Accessibility Without Disabilities · · ,
  110. Why Efficient Hydration in JavaScript Frameworks Is So Challenging · · , ,
  111. Grow Your Design System from Good to Great · ·
  112. Settings Are Not a Design Failure · · , ,
  113. State of Frontend 2022 · ·
  114. Assistive Technology, Accessible Technology, and the Accessibility Tree · · , , , ,
  115. Improving JavaScript Bundle Performance With Code-Splitting · · , , , ,
  116. 5 Pitfalls of Using Micro Frontends and How to Avoid Them · ·
  117. Building Like It’s 1984: A Comprehensive Guide to Creating Intuitive Context Menus · · , ,
  118. Career Advice Nobody Gave Me: Never Ignore a Recruiter · ·
  119. CSS—Understanding the Cascade · · , ,
  120. “Evergreen” Does Not Mean Immediately Available · ·
  121. Structuring Your Storybook · ·
  122. Cascade Layers Are Coming to Your Browser · · , , ,
  123. Website Themes and Color Schemes · · , , ,
  124. 24 Lesser-Known HTML Attributes You May Want to Use · ·
  125. 4 Questions to Ask Before Using ARIA · · , , ,
  126. Accessibly Insecure · · ,
  127. Learn Responsive Design · · ,
  128. Speed Matters, but It Isn’t Everything · · , ,
  129. Use Cases for CSS “fit-content” · ·
  130. A More Easy Way to Write “if … or” Checks With Vanilla JavaScript · ·
  131. Preventing Smooth Scrolling With JavaScript · · ,
  132. The Focus-Indicated Pseudo-Class “:focus-visible” · · , ,
  133. Inclusive Design · · ,
  134. Cascade Layers: First Contact · · ,
  135. Internal Onboarding for Design System Teams · · ,
  136. How Does “!important” Actually Work? · · , ,
  137. What Web Frameworks Solve and How to Do Without Them · · , ,
  138. Why Testing After Is a Bad Practice · ·
  139. Why You Should Use a Developer Font · · , ,
  140. WCAG, but in Language I Can Understand · · ,
  141. Caching Header Best Practices · · , ,
  142. Cherry Picking Commits in Git · · ,
  143. Demystifying TypeScript Discriminated Unions · ·
  144. There’s No Such Thing as Clean Code · · ,
  145. To Create an Excellent Design System, Treat It Like a Collaborative Process · · , ,
  146. Top Ten Most Common Web Accessibility Issues · ·
  147. A Pipe Operator for JavaScript: Introduction and Use Cases · · , ,
  148. WebAssembly Feature Detection · · , ,
  149. Naming Design Tokens · · ,
  150. The Double-Assignment Pattern in jQuery’s Source Code · · ,
  151. What’s New in DevTools? · · , , , , , , , , ,
  152. The Return of Server Side Routing · ·
  153. Design System: How to Efficiently Scale Development? · · , ,
  154. How to Convert Markdown to HTML · · , , ,
  155. Fancy CSS Borders Using Masks · · , , ,
  156. Overview of Accessibility Testing Using DevTools · · , , , , , ,
  157. The Baseline for Web Development in 2022 · · , , , , , ,
  158. Here’s What I Didn’t Know About “:where()” · · ,
  159. An Introduction to CSS Cascade Layers · · , ,
  160. Best Practices for Creating Your UX Design Portfolio · · , , ,
  161. Foundations: Text Descriptions · · ,
  162. Monorepo Explained · · ,
  163. Why Don’t Developers Take Accessibility Seriously? · ·
  164. The Risks and Rewards of App Modernization · · , ,
  165. More to Give Than Just the Div: Semantics and How to Get Them Right · · , ,
  166. Drift: Why Your Design System Isn’t Working · · ,
  167. Technology Time-Outs · · ,
  168. The Many Ways to Modify Leading and Trailing Characters from Strings With JavaScript · ·
  169. Context-Aware Web Components Are Easier Than You Think · · , ,
  170. How to Check What Item Is in Focus When Accessibility Testing · · , , ,
  171. Accessibility Acceptance Criteria · · , , ,
  172. Big Images, Blazingly Fast · · , ,
  173. Div Divisiveness · · ,
  174. Optimize Your PNGs With Oxipng and pre-commit · · , , , ,
  175. The Future of CSS: Detect At-Rule Support With “@ supports at-rule(@ keyword)” · · ,
  176. Frontend Predictions for 2022 · · , , , ,
  177. Design Systems Are Flawed · ·
  178. Giving Web Standards a Seat at the Table · · ,
  179. What Should Someone Learn About CSS If They Last Boned Up During CSS3? · ·
  180. How to Avoid Layout Shifts Caused by Web Fonts · · , , ,
  181. Create an Open Graph Image Generator With Node.js · · , ,
  182. The Breakpoints We Tested in 2021 and 2022, and the Ones to Test in 2023 · · ,
  183. An Introduction to High Contrast Accessibility · · , , ,
  184. How to Set Up a Node.js Project With TypeScript · · , ,
  185. Making IT Accessible for All! · · ,
  186. Naming Conventions for Your Design System · · , ,
  187. Quick Accessibility Tests Anyone Can Do · · , ,
  188. TypeScript Features to Avoid · ·
  189. Building UI Components With SVG and CSS · · , ,
  190. Using PostCSS With Media Queries Level 4 · · , ,
  191. Becoming a Better Writer as a Software Engineer · · ,
  192. Modern Fluid Typography Using CSS Clamp · · ,
  193. Rethinking Component Libraries · ·
  194. Comparing CSS Specificity Values · · ,
  195. Find HTML Parsing Errors · · , , , ,
  196. Frontend Challenges: Front-End Engineer Assignment · · , , ,
  197. On the Peculiarities of Counting the Number of HTML Elements · ·
  198. The Real Added Costs of Accessibility · · ,
  199. “structuredClone()”: Deeply Copying Objects in JavaScript · · ,
  200. Choosing Open Source License Wisely · · ,
  201. Accessibility Data Is Not the Enemy · · ,
  202. CSS Cascade Layers: An Overview of the New “@ layer” and “layer()” CSS Primitives · · , , ,
  203. Building an Accessible Digital World · ·
  204. Rationalise It! 5 Steps to Introduce a New Component to the Design System · · ,
  205. Accessibility and 2022: 13 Design Trends from a Usability Perspective · · , , ,
  206. Git Organized: A Better Git Flow · · , ,
  207. Boolean Attributes in HTML and ARIA: What’s the Difference? · · ,
  208. Web Accessibility Lawsuits Dramatically Rose in 2021 · · , ,
  209. Website Performance and the Planet · · , ,
  210. An Introduction to Tech Debt (and Why It Can Change Your Career) · · , ,
  211. Make Beautiful Gradients · · ,
  212. PHP in 2022 · ·
  213. Remix vs. Next.js · · , ,
  214. Social Media Image Sizes 2022: Cheat Sheet for Every Network · · , ,
  215. Software Is Automating Design—What Does That Mean for Designers? · · ,
  216. Revisiting Why Hyperlinks Are Blue · · ,
  217. A Deep CSS Dive into Radial and Conic Gradients · · ,
  218. Don’t Fight the Cascade, Control It! · · ,
  219. How Not to Learn TypeScript · ·
  220. Writing With Respect · ·
  221. Alt Tag Emptiness · · , , , ,
  222. Foundations: Animations and Flashing Content · · ,
  223. HTML Is General, ARIA Is Specific · · ,
  224. Memory Leaks, How to Avoid Them in a React App · · , ,
  225. Ban Embed Codes · ·
  226. Your CSS Reset Needs “text-size-adjust” (Probably) · · ,
  227. Two Ways to Clear an Array With Vanilla JavaScript · · ,
  228. 22 Smart Google SEO Tips for 2022 · · , ,
  229. Labeling the Point: Scenarios of Label Misuse in WCAG · · , ,
  230. Reduce the Pressure on Young and Inexperienced Developers · · ,
  231. How to Measure Your Design System? · · , ,
  232. Memory Leaks: The Forgotten Side of Web Performance · · ,
  233. Styling Strategies Using Typography · ·
  234. The 6 Most Important CSS Concepts for Beginners · · ,
  235. The Good, the Bad, and the Toggle · · ,
  236. CSS Underlines Are Too Thin and Too Low in Chrome · · , , ,
  237. 30 Frontend Tips · · ,
  238. Fetch Commit Logs of Certain Function or Method in Git · · ,
  239. Imperative vs. Declarative Programming · · , ,
  240. The Web Doesn’t Have Version Numbers · · ,
  241. 8 Techniques to Write Cleaner JavaScript Code · ·
  242. Accessible Heading Structure · · , ,
  243. Responsive Image Gallery With Animated Captions · · , , , ,
  244. How Flexbox Works · · ,
  245. A Contrast of Errors · · , , ,
  246. Five 2022 Accessibility Trends · · ,
  247. A Unified Theory of Web Performance · ·
  248. Exposing Mid-Resource LCP Values · · ,
  249. Image Magnifier Using Only One Line of CSS · · ,
  250. Page Visibility: If a Tree Falls in the Forest… · · , ,