Frontend Dogma

News and Tools for Frontend Development (16)

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

  1. Making a Website Under 1 kB · · , ,
  2. Introduction to SolidJS · · ,
  3. Fluid Sizing Instead of Multiple Media Queries? · · ,
  4. Ruby Styling · · ,
  5. Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers · · ,
  6. CSS Border Animations · · , ,
  7. IE: RIP or BRB? · · , , , ,
  8. Fitts’s Law and Its Applications in UX · · ,
  9. The Importance of Clean Code in Your Startup’s Success · ·
  10. Firefox (and Other Browsers), Forgotten? · · , , ,
  11. How to Add a Subtle Gradient on Top of an Image Using CSS · · , ,
  12. Checking If a JavaScript Native Function Is Monkey Patched · · ,
  13. The Horizontal Overflow Problem · ·
  14. Use the Active Voice to Transform Your Design System Documentation · · , ,
  15. Which Generator Builds Markdown the Fastest? · · , , ,
  16. 10+ Things I Always Set Up in Git When I Prepare a New Environment · · , ,
  17. 8 Simple Steps to Complete a Technical SEO Audit · · ,
  18. Adding Observability to Your Jest Tests · · , ,
  19. The Advanced Guide to the CSS “:has()” Selector · · , ,
  20. Underengineer Your Websites · · , ,
  21. Testable Frontend: The Good, the Bad, and the Flaky · ·
  22. Detecting CSS Selector Support With JavaScript · · , , ,
  23. Recreating MDN’s Truncated Text Effect · · ,
  24. 500 ms to 1.7 ms in React: A Journey and a Checklist · · ,
  25. When Will Scrum Die? · · , , ,
  26. Quick Tip: Negative Animation Delay · · , ,
  27. Abbreviations Suck · · ,
  28. Design Systems for Humans · · ,
  29. You Don’t Need Microservices · ·
  30. 3 Simple Ways to Center an Element Using CSS · · ,
  31. Why I’m Learning Typescript · ·
  32. CSS Minimal Dark Mode Toggle Button · · , ,
  33. Adventures in Text Rendering: Kerning and Glyph Atlases · · ,
  34. A Good Reset · · ,
  35. #ADA32: The ADA Has Applied to Digital for Decades · · ,
  36. Introducing Even More Security Enhancements to npm · · ,
  37. Maintenance Matters · · , , , , ,
  38. Neubrutalism Style in UX: A Twist on the Dominant Modern Minimalist · · , ,
  39. Speaking Up and Speaking Out: Tactical Communication in Accessibility · · ,
  40. The 10 Affirmations of Good Digital Accessibility · ·
  41. UX Principles That Include Cognitive Accessibility · · , ,
  42. Django Tips and Tricks · · ,
  43. 5 Best UX Careers to Pursue in 2022 · · ,
  44. “<article>” vs. “<section>”: How to Choose the Right One · · , ,
  45. Everything You Need to Know About JavaScript Import Maps · ·
  46. Typography in Web Design · · ,
  47. Your Code Doesn’t Have to Be a Mess · ·
  48. Priority Hints—What Your Browser Doesn’t Know (Yet) · · ,
  49. Solving the “Dangler” Conundrum With Container Queries and “:has()” · · ,
  50. Mobile UX: Study Guide · · , , , ,
  51. Clean Architecture: Applying With React · · ,
  52. Ancient Web Browsers · · ,
  53. The History of JavaScript · · ,
  54. Definitive Guide to CAPTCHA Accessibility · · , ,
  55. Type Annotations in JavaScript · · ,
  56. Say No to Tailwind, Embrace Plain CSS · · , ,
  57. Understanding CSS “:has()” · · , ,
  58. Intro to Serverless Functions · · , , ,
  59. Escaping the sRGB Prison · · ,
  60. Front-End Internationalisation Tips · · , , ,
  61. Introduction to SvelteKit · · , ,
  62. RedwoodJS vs. BlitzJS: The Future of Fullstack JavaScript Meta-Frameworks · · , ,
  63. Research Insight: Accessibility of Images · · , , ,
  64. Where’s the Fun in Accessibility? · · ,
  65. Top Layer Support in Chrome DevTools · · , , , ,
  66. Vector Animations With Figma and SVG Animate · · , ,
  67. Roundup of Recent Document Outline Chatter · · , ,
  68. 20 Git Commands Every Developer Should Know · · ,
  69. With “:focus-visible”, You Can Have Focus Styles When It Makes Sense · · , , , ,
  70. An Introduction to Multithreading in Node.js · · , ,
  71. Rethinking Device Emulation in Browsers · · , ,
  72. Create Complex Transitions With Individual CSS Transform Properties · · , ,
  73. Powerful Image Optimization Tools · · , , , ,
  74. Creating an App Using Drag and Drop With React Without Libraries · ·
  75. JavaScript SDK “Package Size Is Massive”—So We Reduced It by 29% · · , ,
  76. Logical Properties for Useful Shorthands · · ,
  77. 15 Common Beginner JavaScript Mistakes · · ,
  78. The 10 Most Common JavaScript Issues Developers Face · · ,
  79. Subheadings, Subtitles, Alternative Titles, and Taglines in HTML · · , , ,
  80. Expert Tips for Color Accessibility on the Web · · , ,
  81. Hacking Javascript Objects · · ,
  82. JSON Creator Douglas Crockford Interview · · ,
  83. What Is Passwordless Authentication and How to Implement It · · , ,
  84. What Is WAI? The Web Accessibility Initiative · ·
  85. Why I No Longer Care What People “Like” or “Don’t Like” · ·
  86. Abbreviations Can Be Problematic · · ,
  87. How Did REST Come to Mean the Opposite of REST? · ·
  88. How Scrum With Kanban Works · · , , ,
  89. Useful Tips and Tricks in JavaScript · · ,
  90. Using Grids in Interface Designs · · ,
  91. Use Firefox for Accessibility Testing · · , , , ,
  92. CSS Gradient Background from Figma to CodePen · · , , ,
  93. An Approach to Continuous Learning · · ,
  94. Can SVG Symbols Affect Web Performance? · · ,
  95. 7 Tips for Clean React TypeScript Code You Must Know · · , ,
  96. 7 Quick Facts About WCAG 2.2 · · , ,
  97. What Does x% of Issues Mean? · · ,
  98. Welcome to the Dark Side · · , ,
  99. Could Sustainable Websites Increase Energy Consumption? · ·
  100. Working With File System Paths on Node.js · · ,
  101. Minimal Social Markup · · , ,
  102. Perceived Affordances and the Functionality Mismatch · · , ,
  103. What Is the Best Way to Mark Up an Exclusive Button Group? · · , , ,
  104. Web Accessibility Laws and Policies · · , , ,
  105. The Hidden History of Screen Readers · · , , , ,
  106. My War on Animation · · ,
  107. Optimizing Node.js Dependencies in AWS Lambda · · , , ,
  108. The “Array.prototype.at()” Method in Vanilla JavaScript · ·
  109. Custom ESM Loaders: Who, What, When, Where, Why, How · ·
  110. Bag Some AAA Wins Where You Can · · ,
  111. Applying SOLID Principles in React · · , , ,
  112. The Methods UX Professionals Use · · ,
  113. What You Need to Know About ARIA and How to Fix Common Mistakes · · , , ,
  114. The Cost of Consistency in UI Frameworks · · ,
  115. 37 Easy Ways to Spice Up Your UI Designs · · ,
  116. Fundamentals Matter · ·
  117. Guide to Trending Front-End Frameworks in 2022 · · , , , , , ,
  118. Integer Math in JavaScript · · ,
  119. Statements vs. Expressions · · ,
  120. Technical Writing for Developers · · ,
  121. The Many Faces of Themeable Design Systems · · ,
  122. A Look at Remix and the Differences With Next.js · · , , ,
  123. Generating Accessibility Test Results for a Whole Website With Pa11y CI · · , ,
  124. Forms in Modals: UX Case · · , ,
  125. Building (or Rebuilding) a Website With Accessibility in Mind · ·
  126. Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes · · , , , ,
  127. The Ultimate Guide to Debugging Accessibility Issues · · , ,
  128. JavaScript Obfuscation Techniques by Example · · , , ,
  129. Choosing the Right Mindset to Design Complex Applications · · , ,
  130. Figma Auto Layout = “display: flex” · · ,
  131. Working on a New Feature as a Senior Frontend Developer · ·
  132. CSS Complexity: It’s Complicated · · ,
  133. The Future of CSS: Variable Units, Powered by Custom Properties · · , ,
  134. Set JAWS Free! · · , , , ,
  135. Data Structure and Algorithms 102 · · ,
  136. An Accessibility-First Approach to Chart Visual Design · · ,
  137. It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility Via Display Properties · · , , , ,
  138. The CSS Cascade, a Deep Dive · · , ,
  139. Make It Accessible · · ,
  140. Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · , , ,
  141. Why the HTML Outlining Algorithm Was Removed from the Spec—the Truth Will Shock You! · · , ,
  142. Captions: Humans vs. Artificial Intelligence: Who Wins? · · , , , ,
  143. What Are Color Gamuts · ·
  144. The Joy of Variable Fonts: Getting Started on the Frontend · · , ,
  145. The Hard Parts of Developer Advocacy (for Me) · · , ,
  146. Truly Portable Design Patterns · · ,
  147. Consistency in UX Design: To What Extent Is “Best Practice” the Right Choice? · · , , ,
  148. Executing Shell Commands from Node.js · · ,
  149. Inverted Media Queries and Breakpoints · · ,
  150. The Off by Default Web · · ,
  151. Masonry? In CSS?! · · ,
  152. The Case for Null in Design Systems · ·
  153. The Ballad of Text Overflow · · ,
  154. Style With Stateful, Semantic Selectors · · ,
  155. Body Margin 8px · · ,
  156. The Unlocked Possibilities of the “:has()” Selector · · ,
  157. Two Levels of Customising “<selectmenu>” · · ,
  158. How to Make Text Improve User Experience: Insights into UX Writing · · , ,
  159. Super-Helpful Tips When Working With Figma Component Properties · · , ,
  160. css-browser-support · · , , , ,
  161. Frontend Web Performance: The Essentials · · ,
  162. Faster WordPress Rendering With 3 Lines of Configuration · · , , , ,
  163. Imagemin Guard · · , , , , , , , , ,
  164. Best Practices for Images · · , ,
  165. Web Development Is Like Assembling IKEA Furniture · ·
  166. Breaking Out of a Central Wrapper · ·
  167. Reimagining Front-End Web Development With htmx and Hyperscript · · ,
  168. Write Git Commit Messages That Your Colleagues Will Love · ·
  169. CSS Variable Secrets · · ,
  170. “That’s Not Accessible!” and Other Statements About Accessibility · ·
  171. The New Wave of React State Management · · , ,
  172. 404 vs. 410—the Technical SEO Experiment · · , , ,
  173. Thoughts on an Accessibility “Get Well” Plan · · , ,
  174. Farewell to HTML5Rocks · · , ,
  175. Building Tabs in Web Components · ·
  176. What Every Newbie Developer Should Know · ·
  177. What the Hell Is “<!DOCTYPE html>”? · ·
  178. Googlebot and the 15 MB Thing · · ,
  179. Are You Sure That’s a Number Input? · ·
  180. Working With the File System on Node.js · · , ,
  181. A CLS Punishment for Progressive Enhancement? · · , ,
  182. Demystifying the New Gatsby Framework · · ,
  183. SPAs: Theory Versus Practice · · ,
  184. What Do the Developers Do in the Last Week of the Sprint? · · , ,
  185. Style Queries · ·
  186. A Previous Sibling Selector · · ,
  187. Using JavaScript to Fill localStorage to Its Maximum Capacity · · ,
  188. UX Writing: Study Guide · · , , , ,
  189. GA4 Is Being Blocked by Content Security Policy · · , , ,
  190. Why Use Sass? · · ,
  191. Accessible Design Systems · · ,
  192. Introduction to Defensive CSS · · ,
  193. WCAG 2.1 AA Web Accessibility Checklist · · , ,
  194. Single Element Loaders: The Bars · ·
  195. Missing Introduction to React · · ,
  196. 4+ Years of Cracking Technical Interviews · · ,
  197. 5 Useful CSS Properties That Get No Love · · ,
  198. 7 UX Laws You’re Probably Getting Wrong · · , ,
  199. Apple Is Not Defending Browser Engine Choice · · , , ,
  200. Can We Enterprise CSS Grid? · · , ,
  201. Mastering “z-index” in CSS · ·
  202. Managing Specificity With CSS Cascade Layers · · , ,
  203. Stop the Screen Going to Sleep With JavaScript · ·
  204. Getting Started With Vue Composables · · ,
  205. Everything You Need to Know About Web Performance (in 5 Minutes) · · , ,
  206. How We Designed an Accessible Color Palette from Scratch · · , , ,
  207. Different Ways to Write CSS in React · · ,
  208. Looking Ahead—Insights from Jeffrey Zeldman and Eric Meyer · · , ,
  209. User Vulnerabilities in the Data Cycle · · , ,
  210. What Would a Chromium-Only Web Look Like? · · , , , ,
  211. Introducing Keyboard Navigation · · , ,
  212. “text-overflow: ellipsis” Considered Harmful · · ,
  213. Please Remove That .git Folder · · ,
  214. In Defense of Blocks for Local Scopes II · · ,
  215. In Defense of Blocks for Local Scopes · · ,
  216. Style Scoping Versus Shadow DOM: Which Is Fastest? · · , , , , , ,
  217. 10 Incident Management Best Practices for Streamlined Operations · · , ,
  218. Be the Browser’s Mentor, Not Its Micromanager · · ,
  219. How and When to Use the CSS “:has” Selector · · ,
  220. Svelte Origins: A JavaScript Documentary · · , ,
  221. What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? · · , , ,
  222. The Right Space Around Headings in Web Typography · · , ,
  223. Cascade Layers—There’s a Polyfill for That! · · , ,
  224. A Beginner’s Guide to Inclusive UX Design · · , , ,
  225. Best Practices for Overlays II · · , ,
  226. Future Features of JS · · ,
  227. How I Built a Dark Mode Toggle · ·
  228. One Line of CSS to Add Basic Dark/Light Mode · · ,
  229. Icon-Only Links Fail WCAG · · , , , ,
  230. The Dos and Don’ts of Pairing Typefaces · · , , , ,
  231. Alternatives to Installing npm Packages Globally · · ,
  232. The Case for Using Sass in 2022 · · ,
  233. Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement · · , , ,
  234. Why Do We Call It Breadcrumbs? Diving into the History of UI Components · · , ,
  235. The Cost of Convenience · · ,
  236. Using Web Streams on Node.js · · ,
  237. Is It Expensive to Build an Eco-Friendly Website? · · ,
  238. 3 Useful CSS Hacks · · ,
  239. In and Out of Style · · ,
  240. Naming Conventions for Design Systems · · , ,
  241. Notes on Maintaining an Internal React Component Library · · , , ,
  242. How to Use ESLint and Prettier for Code Analysis and Formatting · · , , , , , ,
  243. 5 Very Simple Steps You Can Take for Accessibility Improvement · · ,
  244. Communication Accessibility: It’s Time to Change How We Communicate · · ,
  245. Complex vs. Compound Selectors · · , ,
  246. Conditionally Styling Selected Elements in a Grid Container · · ,
  247. Do Dyslexia Fonts Improve Accessibility? · · ,
  248. Fun CSS-Only Scrolling Effects for Matterday · · ,
  249. The Guide to Windows High Contrast Mode · · ,
  250. You Don’t Need a JavaScript Library for Your Components · · , ,