Frontend Dogma

News and Tools for Frontend Development (17)

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

  1. How to Write Good Alt Text · · , , ,
  2. New Patterns for Amazing Apps · ·
  3. A Little Semantic HTML Trick for React Components · · , , , ,
  4. Landing the Second Click: A Guide to Designing Better Landing Pages · · , , ,
  5. Usability Heuristic Frameworks: Which One Is Right for You? · · ,
  6. Personas: Study Guide · · , , , ,
  7. Turn Around Your Git Mistakes in 17 Ways · · , ,
  8. 4 Required Tests Before Shipping New Features · · ,
  9. Layout Breakouts With CSS Grid · · ,
  10. Understanding “async” and “await” · ·
  11. 2022 Web Almanac Report Finds WordPress Adoption Is Growing, Adds New Page Builder Data · · , , ,
  12. Debugging CSS, No Extensions Required · · , ,
  13. Five Months Worth of Takes on the Digital Accessibility Space · · , ,
  14. The Future of Rendering in React · · , ,
  15. The Future of the Web Is on the Edge · · ,
  16. Unless You’re in the Mafia, Your Company Isn’t Your Family · ·
  17. Adding Components to Eleventy With WebC · · ,
  18. Awesome Tools for Open Source Contributions · · , ,
  19. How to Safely Share Your Email Address on a Website · · , ,
  20. WordPress.org Plugin Developers Demand Transparency Regarding the Removal of Active Install Growth Data · · , ,
  21. How to Safely Pass Data to JavaScript in a Django Template · · , ,
  22. AI Code Completion Is Like Cruise Control—and That’s Great News for Bigger Teams · · , , ,
  23. Foundations: HTML Semantics · · ,
  24. Patching the Open Web · ·
  25. Use “npm query” and jq to Dig into Your Dependencies · · , , ,
  26. Front-End Development Is Like… · ·
  27. Using Web Components With Next (or Any SSR Framework) · · , ,
  28. Easy Fluid Typography With “clamp()” Using Sass Functions · · , , , ,
  29. Quick Tip: How to Use the Spread Operator in JavaScript · · , , ,
  30. 3 Things to Consider Before You Implement CAPTCHA for Accessibility · · ,
  31. Can Consistency Harm Your Product? · · ,
  32. Component-Level Design Tokens: Are They Worth It? · · ,
  33. Four Ways to Pick the Right UX Method · · ,
  34. One Formula to Rule Them All: The ROI of a Design System · ·
  35. The Missing Math Methods in JavaScript · · ,
  36. Where Are the Accessibility Statements? Digital Accessibility Shouldn’t Be a Surprise · ·
  37. CSS Halftone Patterns · · ,
  38. Designing a Secure API · · , ,
  39. When Going Somewhere Does a Thing: On Links and Buttons · · , , , ,
  40. A CSS Class-Naming Convention Might Still Be Your Best Choice · · , ,
  41. A Beginner’s Complete Guide to Form Accessibility: The 5 Things Accessible Forms Need and How to Fix Common Errors · · , ,
  42. Busting the Myths About Agile Development and User Research · · , ,
  43. CSS-Only Type Grinding: Casting Tokens into Useful Values · · ,
  44. I Changed My Mind About Writing New JavaScript Frameworks · · ,
  45. Minimalism as Narcissism · ·
  46. The Difference Between “undefined” and “not defined” in JavaScript · ·
  47. Delightful UI Animations With Shared Element Transitions API · · , , ,
  48. Mobile UX Design in 2022 · · , ,
  49. I Turned JS into a Compiled Language (for Fun and Wasm) · · , ,
  50. Phylum Detects Active Typosquatting Campaign Targeting npm Developers · · , ,
  51. Ten Years of TypeScript · ·
  52. What Is Website Minimalism? · · ,
  53. Building Delight in Your Design System · · ,
  54. Templating in HTML · · ,
  55. Why UX? · · ,
  56. depngn · · , , ,
  57. Optimize Long Tasks · · ,
  58. Learn Accessibility · · ,
  59. Getting Started With WordPress Block Development · · ,
  60. A Web Component Story · · ,
  61. Choosing the Best Node.js Docker Image · · ,
  62. Intersectionality, Accessibility, and Inclusion · · , ,
  63. Why You Should Care About Design in Uncertain Times · ·
  64. Yes, Accessibility Is Also a Backend Concern · ·
  65. “:has()” Opens Up New Possibilities With CSS · · , ,
  66. State of CSS 2022 · · ,
  67. How to Center a Div Using CSS Grid · · ,
  68. GIFs Without the .gif: The Most Performant Image and Video Options Right Now · · , , , ,
  69. Performance Budgets: The Easiest Way to a Faster Site · ·
  70. This Site’s Type Is Now Variable · · , ,
  71. Websites Need to Be Accessible to Be Inclusive · · ,
  72. Let Me Understand How JavaScript Works Under the Hood · ·
  73. How to Make Your Designs Scannable (and Why You Should) · · , ,
  74. How to Return Multiple Values from a Function in JavaScript · · , ,
  75. Closing a 30 Pixel Gap Between Native and Web · · , ,
  76. Five Data-Loading Patterns to Boost Web Performance · ·
  77. Named Element IDs Can Be Referenced as JavaScript Globals · · ,
  78. A Deep Dive into WCAG 2.2—and Beyond · · , ,
  79. 7 Things to Consider When Working On a Personal Project · · ,
  80. Learn HTML · · ,
  81. Don’t Worry, Nobody Is Replacing Node, Not Even Bun and Even Less Deno · · , ,
  82. Useful JavaScript Math Functions and How to Use Them · · , ,
  83. Dear Console… · · , ,
  84. 100 Days of More or Less Modern CSS · ·
  85. 6+5 Ways to Make a Two-Column Layout: From Pretty Reasonable to Completely Wrong · · ,
  86. I Am Not That Excited About New CSS Features · ·
  87. The New Wave of JavaScript Web Frameworks · · ,
  88. How to Create Wavy Shapes and Patterns in CSS · · , ,
  89. How to Get All Sibling Elements of a Link or Button With Vanilla JavaScript · · , , ,
  90. Accessibility · · , ,
  91. CMS · · , ,
  92. CSS · · , ,
  93. Fonts · · , ,
  94. HTTP · · , , ,
  95. Interoperability · · , ,
  96. JavaScript · · , ,
  97. Markup · · , ,
  98. Media · · , , ,
  99. Page Weight · · , ,
  100. Security · · , ,
  101. SEO · · , ,
  102. Sustainability · · , ,
  103. The 2022 Web Almanac · · , , ,
  104. Continue Using .env Files as Usual · · ,
  105. Streamable HTML Fragments · · ,
  106. Two Things I Learned by Validating My HTML Again · · , ,
  107. Audience-Based Website Navigation · · , ,
  108. Writing Composable SQL Using JavaScript · · , ,
  109. Attitudes to Digital Accessibility Survey 2022 · · , ,
  110. Blind People Need to Be Considered More When Making Data Visualizations · · ,
  111. Quick Reminder: HTML5 “required” and “pattern” Are Not a Security Feature · · , ,
  112. The Indisputable Truth About Accessibility · · ,
  113. Things I Wish I Had Known About Angular When I Started · ·
  114. Top Task Analysis: Make It Fast and Efficient · ·
  115. A Designer’s Guide to Documenting Accessibility · · , , ,
  116. Randomness in CSS · · ,
  117. Use Cases for CSS Comparison Functions · · ,
  118. Testing Web Design Color Contrast · · , ,
  119. Speedy CSS Tip! Animated Loader · · ,
  120. 5 Ways That UX Developers Influence SEO · · ,
  121. Creative Section Breaks Using CSS “clip-path” · · ,
  122. Element Timing: One True Metric to Rule Them All? · · , ,
  123. Rest vs. Spread Syntax in JavaScript · · ,
  124. Designing Better Inline Validation UX · · , ,
  125. Will Serving Real HTML Content Make a Website Faster? Let’s Experiment! · · , , ,
  126. Accessibility Is Systemic · ·
  127. Clarifying Color Contrast and Font Size Guidelines · · , , ,
  128. React I Love You, but You’re Bringing Me Down · ·
  129. The Web Is Good Now · · ,
  130. Type-Level TypeScript · · ,
  131. Why Designers Quit · · ,
  132. Shell Scripting With Node.js · · , ,
  133. Making Your Web Pages Printer-Friendly With CSS · · ,
  134. It’s Good to Make Mistakes · · , ,
  135. How to Generate Random Numbers in JavaScript With “Math.random()” · · , , ,
  136. CSS Rules vs. CSS Rulesets · · ,
  137. Prototyping to Learn · · ,
  138. A “details” Element as a Burger Menu Is Not Accessible · · , ,
  139. 5 Ways to Use Data Visualization in Your Content to Increase Traffic · · , ,
  140. Design 4.0: Leading Design in the New Industry · ·
  141. How Rapid Usability Testing Is Changing UX Research · · , , ,
  142. Rethinking a Design System · ·
  143. Web Sustainability and the Ethical Dilemma · · , ,
  144. CSS Drawings · · ,
  145. Building a Retro Draggable Web Component With Lit · · ,
  146. Stop Using .env Files Now · · ,
  147. How to Get the Current Timestamp in JavaScript · · ,
  148. Accidental Dismissal of Overlays: A Common Mobile Usability Problem · · , ,
  149. Debunking Myths About HTTPS · · ,
  150. The Git Commands I Use Every Day · · ,
  151. Accessibility Is for Every One · ·
  152. Brief Note on Super- and Subscript Text · · , , ,
  153. When Design Systems Lie · · ,
  154. How to (Not) Make a Button · · , , , ,
  155. Accessibility in Times of Headless · · , ,
  156. Design Tokens 101 · ·
  157. Let’s Get Logical · · ,
  158. The Rise of the TikTok Pattern · · ,
  159. Total Blocking Time: A Short and Sweet Guide for Happier Users · · ,
  160. Why Are Vanity Metrics Still Problematic? · ·
  161. Why the Number Input Is the Worst Input · · , , ,
  162. Invalid CSS · · ,
  163. Designing for People With Cognitive Disabilities and Everyone Else · · , ,
  164. I Never Thought This Would Be Possible With CSS · · , ,
  165. Five Things You Can Do to Be More Inclusive · · ,
  166. How to Substantially Slow Down Your Node.js Server · · , ,
  167. Buttons and the Baader–Meinhof Phenomenon · · ,
  168. 7 Must Know JavaScript Tips and Tricks · · ,
  169. 3 Problems Scrum Doesn’t Solve · · , ,
  170. A Guide to Rounding Numbers in JavaScript · · ,
  171. Container Queries in Browsers! · · , ,
  172. JavaScript APIs You Don’t Know About · · ,
  173. The State of Digital Accessibility: Three Key Challenges · · , ,
  174. W3C TAG Ethical Web Principles · · , ,
  175. When Is It OK to Disable Text Selection? · · , ,
  176. On Better Browsers: Arbitrary Media Queries and Browser UIs · · , ,
  177. Quick Tip: Embedding YouTube Videos in GitHub Pages · · , , ,
  178. Secure Your Node.js App With JSON Web Tokens · · , ,
  179. Better Accessible Names · · ,
  180. Conditionally Spreading Objects in JavaScript · · ,
  181. Disability Is Not a Dirty Word · · ,
  182. First Batch of Color Fonts Arrives on Google Fonts · · , ,
  183. Wtf Is an Island and Why Is It in My Website? · · , , ,
  184. Detecting CSS Selector Support · · , , ,
  185. Intrinsic CSS With Container Queries and Units · · , , ,
  186. PureComponents vs. Functional Components With Hooks · · , ,
  187. The Power of CSS Blend Modes · · ,
  188. Node.js Native Binary Compilation Using Vercel pkg · · ,
  189. Making Sense of WAI-ARIA: A Comprehensive Guide · · , , ,
  190. What Is Data Engineering? · · ,
  191. The Basics of Remix · · , ,
  192. Best Practices for Creating a Modern npm Package · · ,
  193. Nuclear Footnotes · · ,
  194. When Life Gives You Lemons, Write Better Error Messages · · ,
  195. Which Fonts to Use for Your Charts and Tables · · , ,
  196. The “details” and “summary” Elements, Again · · ,
  197. My Five Biggest Design System Mistakes · · ,
  198. Justin Yarbrough Talks About Alt Text · · , , ,
  199. The Seventh Way to Call a JavaScript Function Without Parentheses · · ,
  200. 2022: 0 of the Global Top 100 Websites Use Valid HTML · · , , ,
  201. Antipersonas: What, How, Who, and Why? · · ,
  202. Your Next.js Bundle Will Thank You · · , ,
  203. Mastering DOM Manipulation With Vanilla JavaScript · · ,
  204. Mastering These 7 Basics CSS Skills Will Make You a Frontend Wizard · · ,
  205. Converting PNG Images to WebP Using PHP · · , , , ,
  206. Make It Short—Make It Better · · ,
  207. A Guide to Choosing the Right React State Management Solution · · , ,
  208. CSS “line-height” · · ,
  209. How I Made a Pure CSS Puzzle Game · ·
  210. How to Monitor a Next.js Application · · , ,
  211. Keeping Your CSS Small: Scopes, Containers, and Other New Stuff · · , , ,
  212. Button Minimum Width · · ,
  213. Lightning CSS · · , ,
  214. Text Is the Universal Interface · ·
  215. Towards a Factory Model of Designing User Interfaces—Slotted Systems in Figma · · , ,
  216. What’s New With Forms in 2022? · · , ,
  217. 12 Modern UI Components to Inspire Your Future Designs · · ,
  218. Me and React: 5 Years in 15 Minutes · ·
  219. A Quick Primer on Testing JavaScript · · , ,
  220. Dependabot Unlocks Transitive Dependencies for npm Projects · · , ,
  221. How Your Favourite UI Libraries Manage Their Icons · · , ,
  222. Building the Main Navigation for a Website · · , ,
  223. Are Modals in Web Design a UX Disaster? · · , , ,
  224. WCAG 2.2 Hits Candidate Recommendation—but What Does It Mean? · · ,
  225. Detect When Users Switch Tabs Using JavaScript · ·
  226. Rewriting Tests from Cypress to Playwright Using GPT3 · · , , , , ,
  227. An Overview of Node.js: Architecture, APIs, Event Loop, Concurrency · · , , , , ,
  228. A Whole Cascade of Layers · · ,
  229. An Attempt at Outlining the Many Factors Influencing Developer Experience · ·
  230. Critical CSS? Not So Fast! · · ,
  231. Hacking CSS Animation State and Playback Time · · ,
  232. So Your Designer Wants Stuff to Overlap · · ,
  233. The Realities and Myths of Contrast and Color · · , ,
  234. W3C Accessibility Maturity Model · · ,
  235. Rewrite Your Git History in 4 Friendly Commands · · ,
  236. How to Improve Largest Contentful Paint for Faster Load Times · · , , ,
  237. Introducing Signals · · , ,
  238. How to Build Event-Driven Architecture on AWS? · · , , ,
  239. 5 Reasons to Invest in User Experience · ·
  240. Dreamy Blur · · , ,
  241. Top 5 Technology Trends in UX Design · · , ,
  242. Understanding Regulatory Compliance and Making It Work on Your Web Site · · ,
  243. Getting Started With MathML · · ,
  244. A/B Testing in 7 Steps to Quickly Improve Your Conversions · · , ,
  245. HTML Markup Tips for Developing Accessible Websites · · , ,
  246. A Beginner’s Guide to Design Tokens · · ,
  247. A Content Warning Component · · , ,
  248. Infinite Scrolling: When to Use It, When to Avoid It · · , ,
  249. Prestige Is the Designer’s Achilles’ Heel · ·
  250. Dear Oracle, Please Release the JavaScript Trademark · · ,