Frontend Dogma

News and Tools for Frontend Development (21)

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

  1. Designing Better Breadcrumbs · · , ,
  2. How to Create Animated Anchor Links Using CSS · · , , , ,
  3. Principles of Object-Oriented Programming in TypeScript · · ,
  4. 12 Years Beyond a HTML Joke · · ,
  5. Core Web Vitals: Finding Common Ground Between SEOs and Developers · · , , ,
  6. Fonts in Use: Variable Fonts · · ,
  7. The Business Case for Accessibility · · ,
  8. Sharing State in Distributed UIs at Runtime · · , ,
  9. Animated Grid Tracks With “:has()” · · , ,
  10. Alternative Text (Alt Text) · · , , ,
  11. HTML Is All You Need to Make a Website · ·
  12. A New Statistical Approach for Predicting Usability Problems · · , , ,
  13. A Simple Way to Create a Slideshow Using Pure CSS · · , ,
  14. Accessible Description Exposure · · ,
  15. Thoughts on Exerting Control With Media Queries · · , ,
  16. What If… One Day Everything Got Better? · ·
  17. “aria-labelledby” Usage Notes · · , ,
  18. Tweaking in the Browser · · ,
  19. How to Respond to Growing Supply Chain Security Risks? · · , , , ,
  20. Accessible Cards · · , ,
  21. Top 3 Informational Interview Questions in UX · · , , ,
  22. Are You Using Coding Interviews for Senior Software Developers? · · , ,
  23. Why We Don’t Use a Staging Environment · · ,
  24. Exciting Times for Browsers (and CSS) · · ,
  25. How to Match HTML Elements With an Indeterminate State · · , , ,
  26. The WebAIM Million: The 2022 Report on the Accessibility of the Top 1,000,000 Home Pages · · , , ,
  27. Accessibility Policy Implementation: What You Need to Know · · , ,
  28. Web Accessibility Guidance Project · · ,
  29. Introduction to the SSH Protocol · · , ,
  30. Designing a Better Infinite Scroll · · , ,
  31. If We Can Make a Product Work for Anyone, It Usually Works Better for Everyone · · ,
  32. Neubrutalism Is Taking Over the Web · · ,
  33. Make Beautifully Resilient Apps With Progressive Enhancement · ·
  34. How to Optimize Your LCP (with Visuals) · · , , ,
  35. HTML-Only Keyboard Shortcuts · · , ,
  36. 7 Learning Habits for Developers: Reach Skill Goals in Less Time · ·
  37. A Guide to Hover and Pointer Media Queries · · , ,
  38. An Opinionated Guide to Unit Testing · · , ,
  39. Case: Accessibility in Software Development · ·
  40. CSS “:has” · · ,
  41. Locale Aware Sorting in JavaScript · · , , ,
  42. Optimising Largest Contentful Paint · · ,
  43. Secret Mechanisms of CSS · · ,
  44. Understanding Layout Algorithms · · ,
  45. Picture Perfect Images With the Modern “<img>” Element · · , , ,
  46. How to Document Accessibility Issues · · , ,
  47. The Art of CSS Art · · ,
  48. Why Every Programmer Must Blog · · , , ,
  49. 14 Linting Rules to Help You Write Asynchronous Code in JavaScript · · ,
  50. Building a Headless Design System · · , ,
  51. Quick Survey: Help Improve the Simulation Options of Browser Developer Tools · · , , ,
  52. Remix Routes Demystified · · ,
  53. You ≠ User · · , ,
  54. You’re Unselectable · · ,
  55. How to Use Props in React · · , ,
  56. Designing “Above the Fold”? Try the Reciprocity Principle · · ,
  57. How Should You Name Your Colors in a Design System? · · , ,
  58. Variable Fonts in Real Life: How to Use and Love Them · · ,
  59. Speed Needs Design, or: You Can’t Delight Users You’ve Annoyed · · , ,
  60. How Do Design Systems Improve Developer Efficiency? · · ,
  61. Spotlight: What Happens When a Project Team Shifts Accessibility Left? · ·
  62. The 5 Riders of Accessible Media · · ,
  63. The Web Is for Everyone: Our Vision for the Evolution of the Web · · , , , , , ,
  64. There Are No Bad Questions in Accessibility · ·
  65. Resetting Inherited CSS With “Revert” · · ,
  66. Those HTML Attributes You Never Use · ·
  67. ADA Web Site Compliance Still Not a Thing · · , ,
  68. Deep Dive into the CSS “:where()” Function · · ,
  69. Dynamically Generated Content and Accessibility: 3 Quick Tips · · ,
  70. Optimising Core Web Vitals on SPAs · · , , ,
  71. The Book on Accessibility · · , ,
  72. When to Use a Function Expression vs. Function Declaration · · , ,
  73. 4 Xs That Aren’t UX · ·
  74. Design System—Principles of Success · · ,
  75. Design Systems Aren’t Cheap · · , ,
  76. HTML Semantics · · ,
  77. Improving Your User Experience to Reduce Bounce Rates · · , , ,
  78. Usability Testing: Driving the Best User Experience for Business Success · · , ,
  79. Write HTML, the HTML Way (Not the XHTML Way) · · ,
  80. Windows High Contrast Mode, Forced Colors Mode, and CSS Custom Properties · · , , ,
  81. “!important” Was Added for One Reason Only · · ,
  82. Do’s and Don’ts of Mobile UX Design · · , , ,
  83. Conquering JavaScript Hydration · · ,
  84. Should “Cancel” Be a Button or a Link? · · , , ,
  85. Design Mistakes That Hurt Your Web Site’s Conversion Rates · · , , , ,
  86. Authorization in a Microservices World · · ,
  87. UX Strategy: Definition and Components · · ,
  88. How to Use CSS Math Functions: “calc”, “min”, “max”, “clamp” · · , , ,
  89. Typography in Design Tokens for Figma and Code · · , , ,
  90. Why Is Dark Mode So Captivating? · ·
  91. The Web Doesn’t Have Version Numbers · · ,
  92. Performance Tests on Common JavaScript Array Methods · · , , ,
  93. Identifying Fonts: The Complete Guide · · , ,
  94. Migrating Our Monorepo to Yarn 2 · · , ,
  95. Optimizing SVG Patterns to Their Smallest Size · · ,
  96. The Impact That High Quality Mark-Up Can Have on Accessibility, Performance, and Discoverability · · , , ,
  97. 4 Accessibility Mistakes Plaguing Most Government Websites · · ,
  98. Guidance on Web Accessibility and the ADA · · ,
  99. How Do I Resolve Merge Conflicts? · · , ,
  100. How to Make a Drag-and-Drop File Uploader With Vue.js 3 · · , , ,
  101. Google Calendar Webhooks With Node.js · · , ,
  102. Introduction to Bulma: A Simple and Intuitive CSS Framework · · ,
  103. The Future of the Web and Accessibility · · , ,
  104. Accessibility, Assistive Technology, and JavaScript · · , ,
  105. What Makes You a Professional Web Developer · ·
  106. A Designer’s Guide to Documenting Accessibility and User Interactions · · , , ,
  107. Perceptually Uniform Color Models and Their Implications · · ,
  108. A Quick Guide to Closures · · ,
  109. What Every Good README Should Contain · ·
  110. How to Empathize With Your Users · · , , ,
  111. How to Prep Your SEO Strategy for a New Website · · , ,
  112. Building a Loading Bar Component · · , , ,
  113. What Is Platform Engineering? · · ,
  114. Don’t Believe the Type! · · , , , ,
  115. What Are Micro-Frontends? · ·
  116. Making the World’s Fastest Website, and Other Mistakes · · ,
  117. React Best Practices and Patterns to Reduce Code · · , ,
  118. Prevent Technical Debt With These 3 Strategies · ·
  119. How to Automatically Size a Textarea Based on Its [Text] Using Vanilla JavaScript · · , ,
  120. Implementing JavaScript Delay for Cookie Consent Banner · · , , ,
  121. The Weirdly Obscure Art of Streamed HTML · · , ,
  122. Aligning Content in Different Wrappers · · ,
  123. Tao of Node—Design, Architecture, and Best Practices · · , ,
  124. Update Node Dependencies Automatically, Selectively, or Incrementally · · , , ,
  125. When or If · ·
  126. It Needs to Map Back to a Role · · , , ,
  127. In Defense of Sass · · ,
  128. Explaining Micro Frontends as Simply as Possible · ·
  129. How to Use Spectator to Test Your Angular Components · · , , , ,
  130. Giving New Meanings to the Color Functions in CSS · · , ,
  131. 20 Productivity Tips from Developers to Developers · · ,
  132. The Future of Web Accessibility: WCAG 3.0 · · , ,
  133. Horizontal Scrolling Nav · · ,
  134. 42 Tips for Getting Good at DevOps and Life · · , , ,
  135. Where TypeScript Excels · · ,
  136. Arrow Functions in JavaScript: How to Use Fat and Concise Syntax · · , ,
  137. Ten Years of Page Bloat: What Have We Learned? · · , ,
  138. Accumulation of Tech Debt · ·
  139. Digging into CSS Media Queries · · , ,
  140. An Introduction to User Journey Maps · · , , ,
  141. You Don’t Always Need a CMS · ·
  142. Carousels: No One Likes You · · , , ,
  143. A Look at the Dialog Element’s Super Powers · · , ,
  144. WebGPU—All of the Cores, None of the Canvas · · , ,
  145. Don’t Alienate Your User: A Primer for Internationalisation and Localisation · · , , ,
  146. Designing the User Experience of a Rating System · · ,
  147. JavaScript Naming Conflicts: How Existing Code Can Force Proposed Features to Be Renamed · · , ,
  148. Moderated Versus Unmoderated Usability Testing · · , ,
  149. Optimizing a Web Site for Google’s New UX Criteria · · , , ,
  150. Performance Signals for Customizing Website UX · · , , ,
  151. Using HTTPS in Your Development Environment · · , ,
  152. A New Speed Milestone for Chrome · · , , ,
  153. 10 Amazing Games to Learn CSS · · ,
  154. An Introduction to AWS CloudFront Functions · · , , ,
  155. Session Timeouts · · ,
  156. 7 Ways to Achieve a Faster Core Web Vitals Score · · ,
  157. Alternatives to Pagination on Product-Listing Pages · · , , ,
  158. Why I Avoid “async”/“await” · ·
  159. Creating Native Web Components · · , ,
  160. The Basics—Generics in PHP · · , ,
  161. Accessibility and Limited Fine Motor Skills · ·
  162. Remix vs. Next.js · · , ,
  163. The Best Design System Is No System · ·
  164. Interop 2022: Browsers Working Together to Improve the Web for Developers · · , ,
  165. The Importance of Screen Reader Software for Web Navigation · · , , , ,
  166. How to Design Better APIs · · , ,
  167. How to Prevent SQL Injection Attacks in Node.js · · , , , ,
  168. Building Web Layouts for Dual-Screen and Foldable Devices · · , ,
  169. Dive into Node.js Streams · · ,
  170. It’s Always Been You, Canvas2D · · , , ,
  171. How Do Primitive Values Get Their Properties? · ·
  172. Progressive Enhancement, the New Hotness · ·
  173. How to Make a “Raise the Curtains” Effect in CSS · · , ,
  174. How to Use Higher-Order Functions in JavaScript · · , ,
  175. Taming CSS Variables With Web Inspector · · , , ,
  176. How Many Hyperlinks Are Too Many for Accessibility? · · ,
  177. Simple Color System for Complex Digital Interfaces · · , , ,
  178. What’s Really Going On Inside Your node_modules Folder? · · , ,
  179. New CSS Features in 2022 · ·
  180. 5 Things You Don’t Need JavaScript For · ·
  181. A Recipe for a Good Design System · ·
  182. Accessibility Checklist: Five Things Usually Left Out · · ,
  183. (Not So) Short Note on Being Owned · · , ,
  184. Web Component Pseudo-Classes and Pseudo-Elements Are Easier Than You Think · · , ,
  185. Foundations: Headings · · , , ,
  186. How to Build a File Upload Service With Vanilla JavaScript · · , ,
  187. Essential Cryptography for JavaScript Developers · · , ,
  188. CSS “content” Property · ·
  189. Importing ES6 Modules over HTTP/HTTPS in Node.js · · , , ,
  190. Higher-Order Components in React Hooks Era · · , ,
  191. Should Frontend Devs Care About Performance? · ·
  192. Solid.js Feels Like What I Always Wanted React to Be · · , ,
  193. Top 2021 CSS Frameworks Report: The CSS File Sizes · · , , , ,
  194. 4 Simple Ways to Improve Web Accessibility · · ,
  195. Overlay Position and Recommendations · · ,
  196. When to Avoid the “text-decoration” Shorthand Property · ·
  197. Screaming Architecture—Evolution of a React Folder Structure · · ,
  198. How I Structure My React Projects · · ,
  199. Accessibility and Inclusivity in Practice · · , ,
  200. Understanding Dependencies Inside Your package.json · · , , ,
  201. Deploying a React Application to Netlify · · , , ,
  202. 5 Accessibility Quick Wins You Can Implement Today · ·
  203. Container Queries, the Next Step Towards a Truly Modular CSS · · , ,
  204. Moving from Next to Remix · · , , ,
  205. Can You Get Pwned With CSS? · · ,
  206. HTML Comments Work in JavaScript Too · · , ,
  207. How to Fix Your Security Vulnerabilities With npm Override · · , , ,
  208. How to Make MPAs That Are as Fast as SPAs · · , , ,
  209. A Complete Guide to CSV Files in Node.js · · , , ,
  210. Component Tokens and Themes Example (to Learn Figma Tokens) · · , , , ,
  211. Inclusive Design vs. Accessible Design: Understanding the Differences · · , , ,
  212. Reliably Send an HTTP Request as a User Leaves a Page · ·
  213. Support for Marking Radio Buttons Required, Invalid · · ,
  214. Turning the Tables on Accessibility · ·
  215. What Is Responsible JavaScript? · · ,
  216. The Case for Adding Validation State to Your Design Tokens · · ,
  217. Favi-Gone: 6 Reasons Why Your Favicon Disappeared from the Google Search Results · · , , ,
  218. SPAs Were a Mistake · · ,
  219. Comparing Gatsby and Next.js for Website Development · · , , ,
  220. Design Systems in Figma: How to Be More Productive · · , , ,
  221. How to Prioritize Your Components · · , ,
  222. 15 Useful Placeholder Tools for Designers and Developers · · , , , , ,
  223. A Complete Guide to CSS Cascade Layers · · , ,
  224. How Websites Die · · ,
  225. Let’s Get Inclusive: Designing Products for Everyone · · ,
  226. Writing Logic in CSS · ·
  227. Design System: How to Successfully Collaborate? · · , ,
  228. CSS Quick Tip: Animating in a Newly Added Element · · , ,
  229. Column Headers and Browser Support · · , ,
  230. Invisible Characters · · ,
  231. Minimizing Google Fonts by Only Loading It for Certain Characters · · , , , ,
  232. React State Management Libraries in 2022 · · , ,
  233. You Can “throw()” Anything in JavaScript—and Other “async”/“await” Considerations · ·
  234. There Is No Character Limit for “Alt Text” · · , ,
  235. Comparing Node JavaScript to JavaScript in the Browser · · , , ,
  236. Core Web Vitals: What Next? · · , ,
  237. Structuring Documentation in Multi-Brand Design Systems · · ,
  238. Using “mask” as “clip-path” · · , ,
  239. JavaScript Obfuscation: The Definitive Guide (2022) · · , ,
  240. Flexbox Dynamic Line Separator · ·
  241. What Makes Writing More Readable? · · ,
  242. Web Developers and Cognitive Biases · · ,
  243. How to Create a Search Page for a Static Website With Vanilla JS · · , , , ,
  244. An Auto-Filling CSS Grid With Max Columns of a Minimum Size · · ,
  245. The State of JavaScript 2021 · · ,
  246. The Harsh Reality for JavaScript Developers: If You Don’t Study the Fundamentals You Will Be Just Another “Coder” · · , ,
  247. 7 Lessons I’ve Learned in the Last Year as a Software Engineer · · ,
  248. Track Down the JavaScript Code Responsible for Polluting the Global Scope · · ,
  249. What Is the Difference Between WCAG Compliance Level A, AA, and AAA? · · , ,
  250. 10 Mental Models Developers Can Use to Get Unstuck · ·