Frontend Dogma

News and Tools for Frontend Development (19)

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

  1. Working With File System Paths on Node.js · · ,
  2. Minimal Social Markup · · , ,
  3. Perceived Affordances and the Functionality Mismatch · · , ,
  4. What Is the Best Way to Mark Up an Exclusive Button Group? · · , , ,
  5. Web Accessibility Laws and Policies · · , , ,
  6. The Hidden History of Screen Readers · · , , , ,
  7. My War on Animation · · ,
  8. Optimizing Node.js Dependencies in AWS Lambda · · , , ,
  9. The “Array.prototype.at()” Method in Vanilla JavaScript · ·
  10. Bag Some AAA Wins Where You Can · · ,
  11. Custom ESM Loaders: Who, What, When, Where, Why, How · · ,
  12. Applying SOLID Principles in React · · , , ,
  13. The Methods UX Professionals Use · · ,
  14. What You Need to Know About ARIA and How to Fix Common Mistakes · · , , ,
  15. The Cost of Consistency in UI Frameworks · · ,
  16. 37 Easy Ways to Spice Up Your UI Designs · · ,
  17. Fundamentals Matter · ·
  18. Guide to Trending Front-End Frameworks in 2022 · · , , , , , ,
  19. Integer Math in JavaScript · · ,
  20. Statements vs. Expressions · · ,
  21. Technical Writing for Developers · · ,
  22. The Many Faces of Themeable Design Systems · · ,
  23. A Look at Remix and the Differences With Next.js · · , , ,
  24. Generating Accessibility Test Results for a Whole Website With Pa11y CI · · , ,
  25. Forms in Modals: UX Case · · , ,
  26. Building (or Rebuilding) a Website With Accessibility in Mind · ·
  27. Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes · · , , , ,
  28. The Ultimate Guide to Debugging Accessibility Issues · · , ,
  29. JavaScript Obfuscation Techniques by Example · · , , ,
  30. Choosing the Right Mindset to Design Complex Applications · · , ,
  31. Figma Auto Layout = “display: flex” · · ,
  32. Working on a New Feature as a Senior Frontend Developer · ·
  33. CSS Complexity: It’s Complicated · · ,
  34. The Future of CSS: Variable Units, Powered by Custom Properties · · , ,
  35. Set JAWS Free! · · , , , ,
  36. Data Structure and Algorithms 102 · · ,
  37. An Accessibility-First Approach to Chart Visual Design · · ,
  38. It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility Via Display Properties · · , , , ,
  39. The CSS Cascade, a Deep Dive · · , ,
  40. Make It Accessible · · ,
  41. Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · , , ,
  42. Why the HTML Outlining Algorithm Was Removed from the Spec—the Truth Will Shock You! · · , ,
  43. Captions: Humans vs. Artificial Intelligence: Who Wins? · · , , , ,
  44. What Are Color Gamuts · ·
  45. The Joy of Variable Fonts: Getting Started on the Frontend · · , ,
  46. The Hard Parts of Developer Advocacy (for Me) · · , ,
  47. Truly Portable Design Patterns · · ,
  48. Consistency in UX Design: To What Extent Is “Best Practice” the Right Choice? · · , , ,
  49. Executing Shell Commands from Node.js · · ,
  50. Inverted Media Queries and Breakpoints · · ,
  51. The Off by Default Web · · ,
  52. Masonry? In CSS?! · · ,
  53. The Case for Null in Design Systems · ·
  54. The Ballad of Text Overflow · · ,
  55. Style With Stateful, Semantic Selectors · · ,
  56. Body Margin 8px · · ,
  57. The Unlocked Possibilities of the “:has()” Selector · · ,
  58. Two Levels of Customising “<selectmenu>” · · ,
  59. How to Make Text Improve User Experience: Insights into UX Writing · · , ,
  60. Super-Helpful Tips When Working With Figma Component Properties · · , ,
  61. css-browser-support · · , , , ,
  62. Frontend Web Performance: The Essentials · · ,
  63. Faster WordPress Rendering With 3 Lines of Configuration · · , , , ,
  64. Imagemin Guard · · , , , , , , , , ,
  65. Best Practices for Images · · , ,
  66. Web Development Is Like Assembling IKEA Furniture · ·
  67. Breaking Out of a Central Wrapper · ·
  68. Reimagining Front-End Web Development With htmx and Hyperscript · · ,
  69. Write Git Commit Messages That Your Colleagues Will Love · ·
  70. CSS Variable Secrets · · ,
  71. “That’s Not Accessible!” and Other Statements About Accessibility · ·
  72. The New Wave of React State Management · · , ,
  73. 404 vs. 410—the Technical SEO Experiment · · , , ,
  74. Thoughts on an Accessibility “Get Well” Plan · · , ,
  75. Farewell to HTML5Rocks · · , ,
  76. Building Tabs in Web Components · ·
  77. What Every Newbie Developer Should Know · ·
  78. What the Hell Is “<!DOCTYPE html>”? · ·
  79. Googlebot and the 15 MB Thing · · ,
  80. Are You Sure That’s a Number Input? · ·
  81. Working With the File System on Node.js · · , ,
  82. Demystifying the New Gatsby Framework · · ,
  83. SPAs: Theory Versus Practice · · ,
  84. What Do the Developers Do in the Last Week of the Sprint? · · , ,
  85. A CLS Punishment for Progressive Enhancement? · · , ,
  86. Style Queries · · ,
  87. A Previous Sibling Selector · · ,
  88. Using JavaScript to Fill localStorage to Its Maximum Capacity · · ,
  89. UX Writing: Study Guide · · , , , ,
  90. GA4 Is Being Blocked by Content Security Policy · · , , ,
  91. Why Use Sass? · · ,
  92. Accessible Design Systems · · ,
  93. Introduction to Defensive CSS · · ,
  94. WCAG 2.1 AA Web Accessibility Checklist · · , ,
  95. Single Element Loaders: The Bars · ·
  96. Missing Introduction to React · · ,
  97. 4+ Years of Cracking Technical Interviews · · ,
  98. 5 Useful CSS Properties That Get No Love · · ,
  99. 7 UX Laws You’re Probably Getting Wrong · · , ,
  100. Apple Is Not Defending Browser Engine Choice · · , , ,
  101. Can We Enterprise CSS Grid? · · , ,
  102. Mastering “z-index” in CSS · ·
  103. Managing Specificity With CSS Cascade Layers · · , ,
  104. Stop the Screen Going to Sleep With JavaScript · ·
  105. Getting Started With Vue Composables · · ,
  106. Everything You Need to Know About Web Performance (in 5 Minutes) · · , ,
  107. How We Designed an Accessible Color Palette from Scratch · · , , ,
  108. Different Ways to Write CSS in React · · ,
  109. User Vulnerabilities in the Data Cycle · · , ,
  110. Introducing Keyboard Navigation · · , ,
  111. “text-overflow: ellipsis” Considered Harmful · · ,
  112. Please Remove That .git Folder · · ,
  113. In Defense of Blocks for Local Scopes II · · ,
  114. In Defense of Blocks for Local Scopes · · ,
  115. Style Scoping Versus Shadow DOM: Which Is Fastest? · · , , , , , ,
  116. 10 Incident Management Best Practices for Streamlined Operations · · , ,
  117. Looking Ahead—Insights from Jeffrey Zeldman and Eric Meyer · · , ,
  118. What Would a Chromium-Only Web Look Like? · · , , , ,
  119. How and When to Use the CSS “:has” Selector · · ,
  120. Svelte Origins: A JavaScript Documentary · · , ,
  121. What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? · · , , ,
  122. The Right Space Around Headings in Web Typography · · , ,
  123. Cascade Layers—There’s a Polyfill for That! · · , ,
  124. Be the Browser’s Mentor, Not Its Micromanager · · ,
  125. A Beginner’s Guide to Inclusive UX Design · · , , ,
  126. Best Practices for Overlays II · · , ,
  127. Future Features of JS · · ,
  128. How I Built a Dark Mode Toggle · ·
  129. One Line of CSS to Add Basic Dark/Light Mode · · ,
  130. Icon-Only Links Fail WCAG · · , , , ,
  131. The Dos and Don’ts of Pairing Typefaces · · , , , ,
  132. Alternatives to Installing npm Packages Globally · · ,
  133. The Case for Using Sass in 2022 · · ,
  134. Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement · · , , ,
  135. Why Do We Call It Breadcrumbs? Diving into the History of UI Components · · , ,
  136. The Cost of Convenience · · ,
  137. Using Web Streams on Node.js · · ,
  138. Is It Expensive to Build an Eco-Friendly Website? · · ,
  139. 3 Useful CSS Hacks · · ,
  140. In and Out of Style · · ,
  141. Naming Conventions for Design Systems · · , ,
  142. Notes on Maintaining an Internal React Component Library · · , , ,
  143. How to Use ESLint and Prettier for Code Analysis and Formatting · · , , , , , ,
  144. 5 Very Simple Steps You Can Take for Accessibility Improvement · · ,
  145. Communication Accessibility: It’s Time to Change How We Communicate · · ,
  146. Complex vs. Compound Selectors · · , ,
  147. Conditionally Styling Selected Elements in a Grid Container · · ,
  148. Do Dyslexia Fonts Improve Accessibility? · · ,
  149. Fun CSS-Only Scrolling Effects for Matterday · · ,
  150. You Don’t Need a JavaScript Library for Your Components · · , ,
  151. How to Prevent Merge Conflicts (or at Least Have Less of Them) · · , ,
  152. How to Remove 99% of JavaScript from Main Thread · · , , ,
  153. The Guide to Windows High Contrast Mode · · , ,
  154. Change Management for Accessibility · · ,
  155. CSS Card Shadow Effects · · ,
  156. Design Principles for the Web · · , , ,
  157. Simple CSS Solutions · · ,
  158. Understanding the JavaScript Window Object · · ,
  159. Why You Shouldn’t Modify Scrum · · , ,
  160. Should I Have Separate GitHub Accounts for Personal and Professional Projects? · · , , ,
  161. Software Engineering: The Soft Parts · ·
  162. Dialogs and Shadow DOM: Can We Make It Accessible? · · , , ,
  163. Design System Maturity · · ,
  164. The Folly of Design System “Foundations” · ·
  165. What We’ve Learned from One Year of Real User Monitoring Data on GOV.UK · · , ,
  166. Designing the Perfect Button · · ,
  167. The Smallest CSS · · ,
  168. Modern JavaScript, 10 Things You Should Be Using, Starting Today · ·
  169. AbortController Is Your Friend · ·
  170. Better Scrolling Through Modern CSS · · ,
  171. 10 Do’s and Don’ts of Web Design in 2022 · · ,
  172. Measuring the Performance of Typefaces for Users II · · , ,
  173. State of the Vuenion 2022 · · ,
  174. The Many Definitions of Server-Side Rendering · ·
  175. Write HTML Right · · ,
  176. Make DevTools Pick Colors Outside of Chrome · · , , , ,
  177. Single Element Loaders: The Spinner · · ,
  178. How We Think About Browsers · · ,
  179. Design Systems; the Great Connector · ·
  180. The Future of Frontend Build Tools · · ,
  181. Inclusive User Research: Analysing Findings · · , ,
  182. Mobile-First CSS: Is It Time for a Rethink? · · ,
  183. Simplify Your Color Palette With CSS “color-mix()” · · , ,
  184. WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow · · , ,
  185. Patterns for Building JavaScript Websites in 2022 · · , ,
  186. How to Animate SVG Shapes on Scroll · · , , ,
  187. How to Use Headings for Website Accessibility · · , , ,
  188. JavaScript Hydration Is a Workaround, Not a Solution · · ,
  189. Mathematical Notation for JavaScript Developers Explained · · ,
  190. Building Interoperable Web Components That Even Work With React · · , ,
  191. Optimize the Use of “if–else” · ·
  192. How to Create Dark Mode for Your Designs in Figma · · , ,
  193. Meet Web Push · · , , ,
  194. Aspects of Accessibility—Semantics, Contrast, and… Anxiety? · · , , , ,
  195. Best Practices for Overlays · · , ,
  196. Web Typography: Establishing a Strong Typographic System · ·
  197. Shallow Copy and Deep Copy · ·
  198. Are You Ignoring Digital Accessibility at Your Job? · · ,
  199. Can I DevTools? · · , , ,
  200. How to Use Variables in CSS · · , ,
  201. Measuring the Performance of Typefaces for Users · · , ,
  202. Hamburger Footer: Reaching the Bottom of Infinite Scroll · · ,
  203. WCAG 3 Compliant? Check Again · · , ,
  204. Why Most Design Systems Implode · · ,
  205. A Brief History of Responsive Web Design · · ,
  206. Web Development Resources · · ,
  207. Don’t Sink Your Website With Third Parties · · , ,
  208. Declarative Design Systems · ·
  209. Do We Have a Lack of Developers or a False Assumption What the Job Is? · ·
  210. Monorepos in JavaScript and TypeScript · · , ,
  211. Useful Built-In Node.js APIs · · ,
  212. Dealing With Hover on Mobile · · , , ,
  213. How to Pick the Least Wrong Colors · · , , ,
  214. Obscure CSS: Implicit List-Item Counter · ·
  215. The Cicada Principle and Why It Matters to Web Designers · · ,
  216. Writing Useful Alt Text · · , ,
  217. Checklist for Moderating a Usability Test · · , ,
  218. How Does Social Interaction Change in an Age of New Media? · · ,
  219. Interview With Léonie Watson · · ,
  220. Two Lines of CSS That Boosts 7× Rendering Performance · · , ,
  221. Understanding CSRF Attacks · ·
  222. JavaScript of Halftone Printing · · ,
  223. APCA: The New Algorithm for Accessible Colour Contrast · · , , ,
  224. 7 Tips to Improve Your TypeScript · · , ,
  225. You May Not Need a Bundler for Your npm Library · · ,
  226. Just How Long Should Alt Text Be? · · , ,
  227. Processing Arrays Non-Destructively: “for-of” vs. “.reduce()” vs. “.flatMap()” · · , ,
  228. The Story of the Custom Scrollbar Using CSS · · ,
  229. What npm Can Learn from Go · ·
  230. Manage Accessible Design System Themes With CSS “color-contrast()” · · , ,
  231. The “Form” Element Created the Modern Web—Was It a Big Mistake? · · , , ,
  232. npm Security Update: Attack Campaign Using Stolen OAuth Tokens · · , , ,
  233. What’s the Alternative (Text)? · · ,
  234. How to Fix: “Buttons Do Not Have Accessible Names” · · , ,
  235. 8 Shocking HTML Tips You Probably Don’t Know About · · ,
  236. CSS: Absolutely Positioning Things Relatively · · ,
  237. Making Headers Sticky Using CSS for a Better Reading Experience · · , ,
  238. Understanding Weak Reference in JavaScript · ·
  239. Why Are Iframe Titles Important for Accessibility? · · , ,
  240. A Perfect Table of Contents With HTML and CSS · · ,
  241. JavaScript Closures, Explained · ·
  242. Single Page Applications · ·
  243. Customizing Color Fonts on the Web · · , ,
  244. Advocating for Your Design System · ·
  245. Four Tradeoffs When Designing Navigation Menus · · ,
  246. Inclusive Design 101 · · ,
  247. Snyk Finds 200+ Malicious npm Packages, Including Cobalt Strike Dependency Confusion Attacks · · , , ,
  248. How to Position Your Design System Team for Success · · , , ,
  249. 15 Sprint Review Anti-Patterns—Scrum Anti-Patterns Guide 2022 · · , , ,
  250. 5 Things I’d Want to See Improved in WordPress Core · ·