Frontend Dogma

News and Tools for Frontend Development (21)

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

  1. What Does a Good Design System Feel Like? · · ,
  2. Name, Labels, ARIA, What to Do? · · , ,
  3. A Comprehensive Guide to Error Handling in Node.js · · , , ,
  4. An Introduction to PostCSS · · , ,
  5. Developer Tools Secrets That Shouldn’t Be Secrets · · , ,
  6. The Guideline Gap · · , , ,
  7. Accessible Toggles · · , ,
  8. So, You Want to Build an “@ mention” Autocomplete Feature? · ·
  9. CSS-ing Candy Ghost Buttons · ·
  10. The Golden Ratio and User-Interface Design · ·
  11. HTMLoween—HTML, JS, and CSS to Make Your Blood Boil · · , ,
  12. You Probably Don’t Need Media Queries Anymore · · ,
  13. The Little Book of Little Books · · , , ,
  14. Chrome DevTools: Visualise Your JavaScript Bundles · · , , , , , ,
  15. Make Your Design System Accessible—Color · · , ,
  16. Using CSS Variables for Reduced Motion on a Global Scale · · ,
  17. Indecisive Skip Links and Their Targets—the Renaissance of the “<hr>” Element · · , ,
  18. Best Practices on Embedding Third-Party Web Widgets · · , ,
  19. UX Design Isn’t Killing Creativity, Money Is · · , ,
  20. A Step by Step TypeScript Tutorial for Beginners · · ,
  21. Media Queries Level 4: Media Query Range Contexts · · ,
  22. Photoshop’s Journey to the Web · · ,
  23. Design Systems at Replit: Better Tokens · · , ,
  24. So, You Want an Accessibility Score? · · ,
  25. The Problem With “Click Here” and “Learn More” Links · · , ,
  26. In-Page Filtered Search With Vanilla JavaScript · · , ,
  27. A Deep Dive into “object-fit” and “background-size” in CSS · · ,
  28. The Process of Building a CSS Framework · · ,
  29. Why Outdated jQuery Is Still the Dominant JavaScript Library · · , ,
  30. Building an Effective Image Component · · , ,
  31. Why Accessibility Overlays on Your Website Can Make Things Worse · · ,
  32. Web Performance Metrics Cheatsheet · · ,
  33. If HTML and ARIA Don’t Allow It, It’s Probably a Bad Idea · · , ,
  34. Finding Common Patterns Across Frameworks · · ,
  35. Switch Role Support · · , ,
  36. Micro-Frontends: The Next Gen Way to Build Web Apps · · ,
  37. The Start of a New Era for Responsive Web Design · · ,
  38. On Using Custom Properties · · ,
  39. Common Mistakes When Writing CSS With BEM · · , , ,
  40. This Is the Way: A Phased Approach to Accessibility in the Development Lifecycle · ·
  41. Decoupling HTML, CSS, and JavaScript in Design Systems · · , , ,
  42. Making the Web Developer’s Pilgrimage · ·
  43. Respecting Users’ Motion Preferences · · ,
  44. Semantic “menu” Context · · ,
  45. Identify Potential CSS Improvements · · , , , , ,
  46. Prevent Scroll Chaining With Overscroll Behavior · · ,
  47. Designing for Color Contrast: Guidelines for Accessibility · · , , ,
  48. Back to Basics: Understanding the “for…in” Loop in JavaScript · ·
  49. New HTTP Standards for Caching on the Modern Web · · , , , ,
  50. We Analyzed 425,909 Favicons · · ,
  51. How I Made Google’s Data Grid Scroll 10x Faster With One Line of CSS · · ,
  52. Optimizing Resource Loading With the Fetch Priority API · · , , ,
  53. How to Cancel an HTTP Request in Node.js · · , ,
  54. It’s Time for a Healthy Tech Approach · ·
  55. “@ supports selector()” · · , ,
  56. Yes, Node.js Is Part of the Web Platform · · , ,
  57. Evaluating Clever CSS Solutions · ·
  58. Understanding and Implementing OAuth2 in Node.js · · ,
  59. What Svelte’s Accessibility Warnings Won’t Tell You · · ,
  60. Chrome DevTools: Easily Change CSS Units and Values · · , , , , ,
  61. Fix Web Accessibility Systematically · · ,
  62. Disability: Let’s Say the Word · · ,
  63. HTML With Superpowers · · , ,
  64. Landmarks · · , ,
  65. Processing CPU-Intensive Jobs in Node.js · ·
  66. 100 Bytes of CSS to Look Great Everywhere · ·
  67. Dealing With Timezones in Web Development · ·
  68. Expandable Sections Within a CSS Grid · · ,
  69. Custom Properties With Defaults: 3+1 Strategies · · ,
  70. Beginner’s Guide to Responsive Images: How to Get Them Right · · , , ,
  71. Different Degrees of Custom Property Usage · · ,
  72. Smart CSS Solutions for Common UI Challenges · · ,
  73. Stop Writing JavaScript Like This · ·
  74. “min()”, “max()”, and “clamp()”: Three Logical CSS Functions to Use Today · · ,
  75. Conditional “border-radius” and Three Future CSS Features · · ,
  76. 1999: The Fall of Netscape and the Rise of Mozilla · · , ,
  77. Five Proven Approaches for a Better Developer Experience in Your Organisation · ·
  78. The Ultimate Guide to 3xx HTTP Status Codes · · , ,
  79. The Tortuous Journey of Enhancing Our Color Palette · · ,
  80. Building a Multi-Select Component · · , , ,
  81. What Constitutes a Digital Accessibility Audit · · , ,
  82. How to Win at CORS · · , , , ,
  83. Easy Read Is Hard to Get Right · · ,
  84. Google Chrome Hidden Features Every Developer Should Know · · , , ,
  85. Best UI Frameworks for React.js · · ,
  86. How Design Debt Can Hurt Your Product · · ,
  87. Appreciation for Being a Web Developer · ·
  88. Introduction to Styled Components · · , , ,
  89. A Tangled Web of ARIA · · , ,
  90. Native CSS Nesting: What You Need to Know · · , ,
  91. Why We Crave Software With Style over “Branding” · · ,
  92. Have Single-Page Apps Ruined the Web? · · , ,
  93. Why Does Everything Look the Same? · ·
  94. Accessibility: A Gentle Introduction · · ,
  95. Internationalization: How to Boost Traffic With a Multilingual Site · · ,
  96. How We Improved Our Design System Delivery · · , , ,
  97. Buttons vs. Links · · , , , ,
  98. A Guide to CSS Debugging · · , ,
  99. My Challenge to the Web Performance Community · ·
  100. The Options for Password-Revealing Inputs · · , , , ,
  101. RenderingNG: An Architecture That Makes and Keeps Chrome Fast for the Long Term · · , , , , ,
  102. Safe DOM Manipulation With the Sanitizer API · · ,
  103. What Is Micro-Content? · · , ,
  104. How to Implement and Style the “Dialog” Element · · , , ,
  105. Automating a Design System · · , ,
  106. What Creating a Simple Font Taught Me About Font Design · · ,
  107. UX Accessibility: How to Start Designing for All · · , ,
  108. Why Do Webdevs Keep Trying to Kill REST? · · , ,
  109. Browsing With a Mobile Screen Reader · · , , , , ,
  110. Animation Techniques for Adding and Removing Items from a Stack · · , ,
  111. Redundantly Redundant a11y Accessibility · · ,
  112. Writing Clean JavaScript Tests With the BASIC Principles · · , ,
  113. How to Build an Expandable Accessible Gallery · · , , ,
  114. Conditional Border Radius in CSS · · ,
  115. The CSS “prefers-color-scheme” User Query and Order of Preference · ·
  116. Using JavaScript to Detect High Contrast and Dark Modes · · , , ,
  117. Introducing Svelte, and Comparing Svelte With React and Vue · · , , , ,
  118. Sorting JavaScript Arrays by Nested Properties · · , ,
  119. Understanding and Working With Submodules in Git · · ,
  120. Links, Missing “href” Attributes, and Over-Engineered Code · · , ,
  121. Declaring Page Language—and Declaring Changes in Language · · , ,
  122. How I Built a Modern Website in 2021 · · , ,
  123. Practical Frontend Philosophy · · ,
  124. 9 Tag Management Solutions You Should Consider · · , , ,
  125. Web Streams Everywhere (and Fetch for Node.js) · · , , ,
  126. Figma Cheat Sheet · · , ,
  127. Comparing Page Language Declaration Setups in Screen Readers · · , , , , , ,
  128. Guidelines for Choosing a Node.js Framework · · , ,
  129. Faster React Apps With Memoization · · , ,
  130. Design Tokens Automation Pipeline: From Design Tools to Component Libraries · · , ,
  131. Let’s Dive into Cypress for End-to-End Testing · · ,
  132. Accessibility Isn’t New—and Neither Is Ableism · ·
  133. A JavaScript Developer’s Guide to Browser Cookies · · , ,
  134. How I Make CSS Art · · ,
  135. Beware False Negatives · ·
  136. Not Releasing Late on Fridays, a Matter of Courtesy · · ,
  137. One Last Time: Custom Styling Radio Buttons and Checkboxes · · , ,
  138. 7 UI Design Fundamentals for Developers · · ,
  139. A Content Model Is Not a Design System · · ,
  140. “initial” Doesn’t Do What You Think It Does · · ,
  141. Simplifying Form Styles With “accent-color” · · ,
  142. Just Redux: The Complete Guide · · ,
  143. When Everything Is Urgent, Nothing Is: What Is Alarm Fatigue and How to Deal With It · · ,
  144. Container Units Should Be Pretty Handy · · , ,
  145. ct.css—Let’s Take a Look Inside Your “<head>” · · , ,
  146. 7 Useful HTML Attributes You May Not Know · ·
  147. 7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS · · ,
  148. Cascade Layers? · · ,
  149. Node.js Garbage Collection Explained · ·
  150. Yarn vs. npm: Everything You Need to Know · · , ,
  151. CSS Container Queries: Container-Relative Lengths · · ,
  152. Optimising a JavaScript Library With WebAssembly, a Failed Attempt · · , ,
  153. Contemporary Design Has Lost Its Soul · ·
  154. Understanding “min-content”, “max-content”, and “fit-content” in CSS · ·
  155. Simpler Block Spacing in WordPress With “:is()” and “:where()” · · , ,
  156. How I Learnt to Stop Worrying and Love Animating the Box Model · · ,
  157. Provide Pronunciation for Ambiguous Words · · , ,
  158. Practical Frontend Architecture · ·
  159. 20 Killer JavaScript One-Liners · ·
  160. CSS Container Query Units · · , ,
  161. Why Inequalities Can Appear in Digital Accessibility and Inclusive Design · · , ,
  162. The New Requirements for WCAG 2.2 · · ,
  163. Design Direction as a Step Before Design System · · ,
  164. Minding the “gap” · ·
  165. New Principle: Do Not Design Around Third-Party Tools Unless It Actually Breaks the Web · · , ,
  166. Web Quality Assurance: From User Requirements to Web Risk Management · · ,
  167. What’s the Right Font Size in Web Design? · · ,
  168. Web Vitals Patterns · ·
  169. Small Bundles, Fast Pages: What to Do With Too Much JavaScript · · , ,
  170. Accessible Palette: Stop Using HSL for Color Systems · · , , ,
  171. How to Expand Your Engineering Skill Set Without Quitting Your Day Job · · , ,
  172. Optimizing Images on the Web · · ,
  173. Reducing the Need for Pseudo-Elements · · ,
  174. 1995: MySQL Arrives, Completing the LAMP Stack · · , , ,
  175. The Future of CSS: Cascade Layers (CSS “@ layer”) · · ,
  176. Master Frontend Development by Cloning These Websites · ·
  177. Modernising CSS Infrastructure in DevTools · · , , , , ,
  178. Designing Beautiful Shadows in CSS · · ,
  179. Notes on Synthetic Speech · · ,
  180. 29 Projects to Help You Practice HTML CSS Javascript 2021 · · , ,
  181. Myths About Web Accessibility · ·
  182. The Ultimate Guide to Web Console · · , , ,
  183. Less Absolute Positioning With Modern CSS · ·
  184. Vanilla JS Is a Web Performance Decision · · ,
  185. Flexible API Design: Create Hooks for Your PHP API Pipeline · · , ,
  186. Line Length Revisited: Following the Research · · , , ,
  187. Okhsv and Okhsl · · , ,
  188. Subsets and Supersets of WCAG · · ,
  189. The Case for “Developer Experience” · ·
  190. What Is Redundant Entry, and How Does It Affect Accessibility? · · ,
  191. Developer Decisions for Building Flexible Components · ·
  192. Bundling Non-JavaScript Resources · ·
  193. Enterprise UX: Essential Resources to Design Complex Data Tables · · , , ,
  194. Blowing Up HTML Size With Responsive Images · · , , ,
  195. Becoming a Design Tokens Ambassador · ·
  196. Defining Basic JavaScript Terms: “map”, “filter”, and “reduce” · ·
  197. Using CSS 3 Overflow Properties to Make Containers Meet WCAG 2.1 · · , ,
  198. What’s New in PHP 8.1: Features, Changes, Improvements, and More · ·
  199. Firefox’s “bolder” Default Is a Problem for Variable Fonts · · , , , ,
  200. Fractional SVG Stars With CSS · · ,
  201. What’s New With DevTools: Cross-Browser Edition · · , , , , , , , , ,
  202. 13 Advanced (but Useful) Git Techniques and Shortcuts · · ,
  203. 5 Steps for Writing Alt Text for Accessibility · · , ,
  204. A Practical Guide to Creating Reusable React Components · · , ,
  205. Color and Universal Design · · , ,
  206. HTTP/3: Practical Deployment Options · · , ,
  207. Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design · · , ,
  208. Avoiding FOUT With Async CSS · ·
  209. Stop! Put Down That Ternary, Lines Are Free · ·
  210. Make Accessibility Part of Your Startup’s Products and Culture from Day One · · ,
  211. Reducing Carbon Emissions on the Web · ·
  212. The Pros and Cons of Professional Language · ·
  213. Multiple Accounts and Git · ·
  214. Element Diversity · ·
  215. Threats of Using Regular Expressions in JavaScript · · ,
  216. Getting Started With Web Accessibility Testing · · , ,
  217. The Effect of CSS on Screen Readers · · , , , ,
  218. Interactive Learning Tools for Front-End Developers · ·
  219. Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) · · , , , ,
  220. Best Practices for Logging in Node.js · · , ,
  221. It Takes a PhD to Develop That · · , ,
  222. Web Scraping With JavaScript and Node.js · · , ,
  223. Building a Split-Button Component · · , , ,
  224. Twitter’s Div Soup and Uglyfied CSS, Explained · · , ,
  225. Building a Stepper Component · · , ,
  226. Rethinking User Personas · · , ,
  227. Shifting Accessibility Testing to the Left · · , ,
  228. State Management in Next.js · · ,
  229. 9.5 Ways Google Rewrites Your Title Tags · · ,
  230. Writing High-Performance JavaScript · · ,
  231. Understanding Target Size Under WCAG 2.2 and How It Affects People With Disabilities · · ,
  232. Using SVG With Media Queries · · , ,
  233. Why You Should Manage Your Energy, Not Your Time · · ,
  234. Building Reactive Systems With Node.js · · ,
  235. Color and Contrast, What Does It Mean? · · , ,
  236. 1995: Apache and Microsoft IIS Shake Up the Web Server Market · · , ,
  237. 7 Practices to Create Good JavaScript Variables · ·
  238. Times New Roman Doesn’t Have to Be Boring—Here’s Why · · ,
  239. What Are the Web Performance Metrics That Actually Matter? · · ,
  240. The Seniority Rollercoaster · ·
  241. Common npm Mistakes Every Developer Should Avoid · · ,
  242. Exploring the CSS Paint API: Blob Animation · · , ,
  243. 7 Useful CSS Cheat Sheets to Improve Your Skills · · ,
  244. Creating a Positive Culture Around Accessibility · · ,
  245. 10 Fun Things You Can Do With GitHub.dev · ·
  246. Essential Concepts in JS · · ,
  247. Compound Components in React · · ,
  248. 5 Tools to Automate Your Development · · , ,
  249. Named and Framed · · ,
  250. Small Wins for Accessibility and Resilience · · ,