Frontend Dogma

News and Tools for Frontend Development (18)

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

  1. Git Cheatsheet · · , ,
  2. Disabled JavaScript Turns Off Native Lazy Loading · · , , ,
  3. Is It “:modal”? · · , ,
  4. Focus Appearance Explained · · , , ,
  5. The Accessibility and Usability Journey of Drupal’s Primary Navigation · · , ,
  6. Big O Notation Basics Made Dead Simple · · ,
  7. Accessible Lists and Tables · · , ,
  8. Default Exports in JavaScript Modules Are Terrible · ·
  9. Is Design Thinking Overhyped? · ·
  10. Useful JavaScript Data Grid Libraries · · , , ,
  11. Don’t Overwrite Visual Labels With “aria-label” · · , ,
  12. Comparing JAWS, NVDA, and VoiceOver · · , , , , , , , ,
  13. How I Maintain OSS Projects · · ,
  14. DevTools Tips: How to Inspect and Debug CSS Flexbox · · , , , , , ,
  15. Small Steps: Celebrating Four Accessibility Wins · · ,
  16. Neutrality Isn’t an Option When It Comes to Accessibility · ·
  17. 4 Ways to Minimize Your Dependencies in Node.js · · , ,
  18. CSS Container Queries Are Finally Here · · ,
  19. Cypress Testing: A Guide to Running Web Application Tests · · , ,
  20. Things Not Available When Someone Blocks All Cookies · ·
  21. Understanding “useMemo” and “useCallback” · · ,
  22. Interpolating Numeric CSS Variables · · ,
  23. JavaScript Bugs Aplenty in Node.js Ecosystem—Found Automatically · · , , , , , ,
  24. An Argument Against CSS Opacity · · , , ,
  25. Communication Around Digital Accessibility Must Improve: How Users and Businesses Alike Are Failing to Advance Digital Accessibility · · ,
  26. Parents Counting Children in CSS · · ,
  27. Monitor Events and Function Calls Via Console · · , ,
  28. What Makes A Great Toggle Button? II · · ,
  29. Should I Use a Button or a Link? · · , , ,
  30. The Three Laws of Utility Classes · · ,
  31. An Ideal REST API—Best Practices · · ,
  32. Be Good-Argument-Driven, Not Data-Driven · · ,
  33. On Design System Support · ·
  34. Using Grid Named Areas to Visualize (and Reference) Your Layout · · ,
  35. What Is Closed Captioning? · · , ,
  36. Making a Twitter Bot in the Year 2022 With Node.js · · ,
  37. Modern Alternatives to BEM · · , , , ,
  38. CSS Classes Considered Harmful · · ,
  39. Implementing Promisable “setTimeout” · ·
  40. Installing and Running Node.js Bin Scripts · · ,
  41. Short Note on “figure” and “figcaption” · · ,
  42. Why Your Website Should Be Under 14 kB in Size · · ,
  43. Designing Better Error Messages UX · · , , ,
  44. 20 Principles I Learned from 10 Years of Developing Software · ·
  45. Complex Conditional Width Using “flex-basis” With “clamp” · ·
  46. Measure What You Impact, Not What You Influence · · , ,
  47. The Design Principle Paradox · · ,
  48. What Customer-First Web Design Looks Like · ·
  49. What Is a REST API? · · ,
  50. Why Every University Needs an Accessible Standard Website Template · · , ,
  51. Creative List Styling · · ,
  52. TIL: You Can Access a User’s Camera With Just HTML · · ,
  53. Accessibility and Supporting Internet Explorer · · , , , ,
  54. Exploring the Underrated “output” Element · ·
  55. A Handy Use for Cascade Layers · · ,
  56. What’s the Value of a Design System? · · ,
  57. Scaling SCM Front-End Design With a Design System · · ,
  58. Does Accessibility Stifle the Creative Process? · · , ,
  59. 8 Tricks for SVG Optimization · · , ,
  60. How to Use localStorage in JavaScript: An Easy Guide · · , , ,
  61. Advanced TypeScript Patterns: API Contracts · · ,
  62. Class-Less CSS Frameworks · · , , ,
  63. Conducting an Effective Web-Site UX Audit · · ,
  64. Design Systems: Prototyping on Steroids · · ,
  65. Prepare for WCAG 2.2 and Beyond · · , , ,
  66. What Makes a Great Toggle Button? · · ,
  67. Why User Personas Matter in UX Design · · , , ,
  68. Meet the Top Layer: A Solution to “z-index:10000” · ·
  69. Bring Focus to the First Form Field With an Error · · , ,
  70. CSS Grid and Custom Shapes II · · ,
  71. Mac VoiceOver Testing the Simple Way · · , , , , , ,
  72. Learn 5 Optimization Tips for Webpack Step by Step · · , ,
  73. A Guide to Using User-Experience Research Methods · · , ,
  74. You’re Not Using HTTP Status Codes Right · · ,
  75. A Simple “clamp()” Function in PHP · · ,
  76. React Query vs. SWR · · , , ,
  77. Scaling a System · · ,
  78. An Introduction to Context Propagation in JavaScript · · ,
  79. Optimize Data Fetching · · ,
  80. When Do You Use CSS Columns? · · ,
  81. Inclusion Beats Optimization · · , ,
  82. Using “:has()” as a CSS Parent Selector and Much More · · ,
  83. Use the Right Container Query Syntax · · ,
  84. Dependency Injection in JS/TS · · ,
  85. How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work · · ,
  86. Outline Is Your Friend · · ,
  87. Can Browsers Optimize the Loading of Third-Party Resources? · · , ,
  88. Better Conditionals in CSS Media Queries With Range Syntax · · ,
  89. React Re-Renders Guide: Preventing Unnecessary Re-Renders · · , ,
  90. Color and Contrast · · , , ,
  91. Why React Re-Renders · · ,
  92. Introduction to Screen Readers (Desktop Edition) · · , , , , , ,
  93. Designing a Better Back Button UX · · , ,
  94. Building Accessible Select Components in React · · , , ,
  95. Table Column Alignment With Variable Transforms · · , ,
  96. Accessible User Experience and A/B Testing · · , ,
  97. CSS Grid and Custom Shapes · · ,
  98. Check Heading Accessibility Using the WAVE Tool · · , , , , ,
  99. Top 9 Ways to Become a Successful Self-Taught Developer · · ,
  100. Tip: Use “fetchpriority=high” to Load Your LCP Hero Image Sooner · · , ,
  101. What Was That Media Query Code Again? · · , ,
  102. 5 Modern CLI Tools That Help Boost Your Productivity · · ,
  103. Automation and Accessibility—What You Need to Know · · , ,
  104. If You’re Not Checking, You’re Guessing · · ,
  105. On Ratings and Meters · · , ,
  106. Custom Event Naming Conventions · · , ,
  107. Creative CSS Layout · · , , ,
  108. (Re-)Introducing Gatsby, a Reactive Site Generator · · , , , , ,
  109. An Introduction to Constraint Based Design Systems · · ,
  110. The Console API · · , ,
  111. Websites: Past and Present · · , ,
  112. How and Why We Removed jQuery from GOV.UK · · , ,
  113. Modern CSS Selectors · · ,
  114. TypeScript vs. JavaScript: Which One You Should Use, and Why · · , ,
  115. Do You Know About “overflow: clip”? · ·
  116. TypeScript: It’s Not Actually Validating Your Types · · ,
  117. Results of Quick Testing of Documentation Tools’ Accessibility · · , ,
  118. Designing for Long-Form Articles · · ,
  119. Here, Here, and Here · ·
  120. Accessibility Is Writing · · ,
  121. Core Web Vitals Tools to Boost Your Web Performance Scores · · , ,
  122. Defining “Integration” Tests · ·
  123. Brief Note on Calendar Tables · · , ,
  124. How to Research Components and Patterns: Common Challenges and How to Overcome Them · · , ,
  125. Code Golfing Tips and Tricks: How to Minify Your JavaScript Code · · , , ,
  126. SEO Links Obfuscation and Accessibility Problems · · , , ,
  127. The Death of Mozilla Is the Death of the Open Web · · ,
  128. Zooming Images in a Grid Layout · · ,
  129. The JavaScript Paradox · ·
  130. Dark Mode With Design Tokens · · ,
  131. No Demo [Website] Reno · · ,
  132. Capturing Images and Videos from the Camera of Mobile Devices Using HTML · · , ,
  133. 5 Good Practices to Scale Your React Projects Easily · · , ,
  134. Bringing Perspective to CSS · ·
  135. The Infinite Marquee · · , ,
  136. Polyhierarchy in Information Architecture · · ,
  137. How I Added Scroll Snapping to My Twitter Timeline · · , ,
  138. How to Use Multithreading in Node.js · · , ,
  139. Light/Dark Mode · · , , ,
  140. One-Dimensional Website Optimization Considered Harmful · · ,
  141. AI-Generated Images from AI-Generated Alt Text · · , , ,
  142. What Are Best Practices for Creating Alt Text? · · , , ,
  143. 5 Heading Accessibility Issues and How to Fix Them · · , ,
  144. Not All Zeros Are Equal · ·
  145. Migration from jQuery to Next.js: A Guide · · , , ,
  146. Introducing the New npm Dependency Selector Syntax · · ,
  147. “:has()”: The Family Selector · · ,
  148. One Year of Coding—Recommendations for Beginners from a Beginner · · , ,
  149. Popular Node.js Patterns and Tools to Re-Consider · · ,
  150. A Delightful Guide to Culture at Mamo (Inspired by Khalil Gibran) · · , ,
  151. Finer Grained Control over CSS Transforms With Individual Transform Properties · ·
  152. Making a Website Under 1 kB · · , ,
  153. Introduction to SolidJS · · ,
  154. Fluid Sizing Instead of Multiple Media Queries? · · ,
  155. Ruby Styling · · ,
  156. Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers · · ,
  157. CSS Border Animations · · , ,
  158. IE: RIP or BRB? · · , , , ,
  159. Fitts’s Law and Its Applications in UX · · ,
  160. The Importance of Clean Code in Your Startup’s Success · ·
  161. Firefox (and Other Browsers), Forgotten? · · , , ,
  162. How to Add a Subtle Gradient on Top of an Image Using CSS · · , ,
  163. Checking If a JavaScript Native Function Is Monkey Patched · · ,
  164. The Horizontal Overflow Problem · ·
  165. Use the Active Voice to Transform Your Design System Documentation · · , ,
  166. Which Generator Builds Markdown the Fastest? · · , , ,
  167. 10+ Things I Always Set Up in Git When I Prepare a New Environment · · , ,
  168. 8 Simple Steps to Complete a Technical SEO Audit · · ,
  169. Adding Observability to Your Jest Tests · · , ,
  170. The Advanced Guide to the CSS “:has()” Selector · · , ,
  171. Underengineer Your Websites · · , ,
  172. Testable Frontend: The Good, the Bad, and the Flaky · ·
  173. Detecting CSS Selector Support With JavaScript · · , , ,
  174. Recreating MDN’s Truncated Text Effect · · ,
  175. 500 ms to 1.7 ms in React: A Journey and a Checklist · · ,
  176. When Will Scrum Die? · · , , ,
  177. Quick Tip: Negative Animation Delay · · , ,
  178. Abbreviations Suck · · ,
  179. Design Systems for Humans · · ,
  180. You Don’t Need Microservices · ·
  181. 3 Simple Ways to Center an Element Using CSS · · ,
  182. Why I’m Learning Typescript · ·
  183. CSS Minimal Dark Mode Toggle Button · · , ,
  184. Adventures in Text Rendering: Kerning and Glyph Atlases · · ,
  185. A Good Reset · · ,
  186. #ADA32: The ADA Has Applied to Digital for Decades · · ,
  187. Introducing Even More Security Enhancements to npm · · ,
  188. Maintenance Matters · · , , , , ,
  189. Neubrutalism Style in UX: A Twist on the Dominant Modern Minimalist · · , ,
  190. Speaking Up and Speaking Out: Tactical Communication in Accessibility · · ,
  191. The 10 Affirmations of Good Digital Accessibility · ·
  192. UX Principles That Include Cognitive Accessibility · · , ,
  193. Django Tips and Tricks · · ,
  194. 5 Best UX Careers to Pursue in 2022 · · ,
  195. “<article>” vs. “<section>”: How to Choose the Right One · · , ,
  196. Everything You Need to Know About JavaScript Import Maps · ·
  197. Typography in Web Design · · ,
  198. Your Code Doesn’t Have to Be a Mess · ·
  199. Priority Hints—What Your Browser Doesn’t Know (Yet) · · ,
  200. Solving the “Dangler” Conundrum With Container Queries and “:has()” · · ,
  201. Mobile UX: Study Guide · · , , , ,
  202. Clean Architecture: Applying With React · · ,
  203. The History of JavaScript · · ,
  204. Ancient Web Browsers · · , ,
  205. Definitive Guide to CAPTCHA Accessibility · · , ,
  206. Type Annotations in JavaScript · · ,
  207. Say No to Tailwind, Embrace Plain CSS · · , ,
  208. Understanding CSS “:has()” · · , ,
  209. Intro to Serverless Functions · · , , ,
  210. Escaping the sRGB Prison · · ,
  211. Front-End Internationalisation Tips · · , , ,
  212. Introduction to SvelteKit · · , ,
  213. RedwoodJS vs. BlitzJS: The Future of Fullstack JavaScript Meta-Frameworks · · , ,
  214. Research Insight: Accessibility of Images · · , , ,
  215. Where’s the Fun in Accessibility? · · ,
  216. Top Layer Support in Chrome DevTools · · , , , ,
  217. Vector Animations With Figma and SVG Animate · · , ,
  218. Roundup of Recent Document Outline Chatter · · , ,
  219. 20 Git Commands Every Developer Should Know · · ,
  220. With “:focus-visible”, You Can Have Focus Styles When It Makes Sense · · , , , ,
  221. Rethinking Device Emulation in Browsers · · , ,
  222. Create Complex Transitions With Individual CSS Transform Properties · · , ,
  223. Powerful Image Optimization Tools · · , , , ,
  224. Creating an App Using Drag and Drop With React Without Libraries · ·
  225. An Introduction to Multithreading in Node.js · · , ,
  226. JavaScript SDK “Package Size Is Massive”—So We Reduced It by 29% · · , ,
  227. Logical Properties for Useful Shorthands · · ,
  228. 15 Common Beginner JavaScript Mistakes · · ,
  229. The 10 Most Common JavaScript Issues Developers Face · · ,
  230. Subheadings, Subtitles, Alternative Titles, and Taglines in HTML · · , , ,
  231. Expert Tips for Color Accessibility on the Web · · , ,
  232. Hacking Javascript Objects · · ,
  233. JSON Creator Douglas Crockford Interview · · ,
  234. What Is Passwordless Authentication and How to Implement It · · , ,
  235. What Is WAI? The Web Accessibility Initiative · ·
  236. Why I No Longer Care What People “Like” or “Don’t Like” · ·
  237. Abbreviations Can Be Problematic · · ,
  238. How Did REST Come to Mean the Opposite of REST? · ·
  239. How Scrum With Kanban Works · · , , ,
  240. Useful Tips and Tricks in JavaScript · · ,
  241. Using Grids in Interface Designs · · ,
  242. Use Firefox for Accessibility Testing · · , , , ,
  243. CSS Gradient Background from Figma to CodePen · · , , ,
  244. An Approach to Continuous Learning · · ,
  245. Can SVG Symbols Affect Web Performance? · · ,
  246. 7 Tips for Clean React TypeScript Code You Must Know · · , ,
  247. 7 Quick Facts About WCAG 2.2 · · , ,
  248. What Does x% of Issues Mean? · · ,
  249. Welcome to the Dark Side · · , ,
  250. Could Sustainable Websites Increase Energy Consumption? · ·