Frontend Dogma

News and Tools for Frontend Development (22)

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

  1. Form Autocomplete · · ,
  2. Redirect Liquidation · · ,
  3. Show, Don’t Tell · · , ,
  4. The Many Methods for Using SVG Icons · · , ,
  5. Personalize It! · · , ,
  6. Frontend Web Performance: The Essentials · ·
  7. The CSS “:has()” Pseudo-Class, aka Parent Selector · · ,
  8. Wrapping Text Inside an SVG Using CSS · · ,
  9. Building a Greener Web · ·
  10. CSS Animation · · ,
  11. CSS Snapshot 2021 · ·
  12. Make Joyful Things · ·
  13. The CSS “:has()” Selector Is Way More Than a “Parent Selector” · · ,
  14. Introduction to Cognitive Disability and Accessibility Testing · · , ,
  15. 13 Tools and Techniques to Accelerate Frontend Development · · , , , , , , , , ,
  16. 5 Common Misconceptions About WAI-ARIA and Accessibility · · , ,
  17. Auto Dark Theme · · , ,
  18. Be Prepared for Failure and Handle It Gracefully · · ,
  19. Image Display Elements · · , ,
  20. Smoothly Reverting CSS Animations · · ,
  21. The Web Starts on Page Four · ·
  22. Why UX Is the Best SEO Strategy · · , ,
  23. Design Sprints Revisited: Designing With Your Users and Developers · · ,
  24. How to Add and Remove a CSS Class from Multiple Elements With Vanilla JavaScript · · , ,
  25. PHP 8 in a Nutshell · · ,
  26. How to Define Your Relationship to Sites You Link To · · , , , ,
  27. Preference Queries · ·
  28. Web Performance, Core Web Vitals, and Vanity Metrics · · , ,
  29. 4 HTML Concepts You Didn’t Know · · , ,
  30. This Is WCAG 2.1 · · , ,
  31. This Is WCAG · · , , ,
  32. There’s Never Been a Better Time to Build Websites · · ,
  33. Inaccessibility of CAPTCHA · · ,
  34. Web Platform Design Principles · · , ,
  35. Why Motion on Websites and Digital Content Is a Problem · ·
  36. Hands On With the New Responsiveness Metrics · · , ,
  37. Don’t Start With Microservices in Production—Monoliths Are Your Friend · · , ,
  38. Deep-Copying in JavaScript Using “structuredClone” · ·
  39. Sustaining Maintaining · ·
  40. Consistent, Fluidly Scaling Type, and Spacing · · ,
  41. CSS Custom Properties · · ,
  42. Explain Like I’m Five: Web Performance Optimization · · ,
  43. Shifting the Mindset About Accessible Content · · ,
  44. Thoughts on Skin Tone and Text Descriptions · · , ,
  45. The State of CSS 2021 · · ,
  46. 100 Tips on Software Developer Productivity · · ,
  47. CSS Can Help Improve Your HTML!? Buttons and Links · · , , , ,
  48. Details/Summary · · ,
  49. Performance Implications of JavaScript Errors · · , ,
  50. Practical Ethics for the Modern Web Designer · · ,
  51. The Ideal Line Length and Line Height in Web Design · · ,
  52. Visual Regression Testing for Design Systems With Figma Branches · · , , ,
  53. Read Your Website · ·
  54. Lessons Learned from Publishing a Content Security Policy · · , ,
  55. Embrace the Platform · · , , ,
  56. Intersection Observer · · ,
  57. WCAG 2.2: What We Know Till Now · · ,
  58. WCAG 2 Is What We Have · · ,
  59. Defer Non-Critical Resources · · ,
  60. 5 Key Benefits of Using a Tag Manager · ·
  61. WCAG 3 Is Not Ready Yet · · ,
  62. Standardizing Focus Styles With CSS Custom Properties · · , , ,
  63. How to Customize Firefox UI—Step-by-Step Tutorial · · , , , , , ,
  64. Breaking Out of the Box · · ,
  65. Caching: Understanding the Scope · · ,
  66. The Last Design You’ll Ever Make · ·
  67. Responsive Iframes With the CSS “aspect-ratio” Property · · ,
  68. WCAG 3 and APCA · · , , , ,
  69. 1993: Mosaic Launches and the Web Is Set Free · · ,
  70. 5 Reasons You Should Adopt a Micro Frontend Architecture · ·
  71. Content Separation · ·
  72. Node.js Memory Limits—What You Should Know · · ,
  73. Writing Better CSS · · , ,
  74. A Beginner’s Guide to Vue Router · · ,
  75. Defensive CSS · ·
  76. Explainer for W3C Accessibility Guidelines (WCAG) 3.0 · · ,
  77. Google Fonts Knowledge · · , ,
  78. Optimizing State Management in React Applications · · ,
  79. Test Your Product on a Crappy Laptop · · , ,
  80. Where Do You Put Spacing on Design System Components? · · , , ,
  81. HTTP Compression · · , , ,
  82. Why You Should Check in Your Node Dependencies · · ,
  83. Reduce Your Website’s Environmental Impact With a Carbon Budget · ·
  84. Designing Better Links for Websites and Emails: A Guideline · · , ,
  85. CSS Fingerprinting · · , , ,
  86. Have Core Web Vitals Made the Web Faster? · · ,
  87. The Love of Curvilinear Design · ·
  88. How Many People With Disabilities Use Our Site? · ·
  89. Plugging Memory Leaks in Your App · · ,
  90. Ain’t No Party Like a Third Party · · , ,
  91. JSON Modules in JavaScript · · , ,
  92. Request for a General Theory of Web Performance · ·
  93. Revisiting the Anatomy of a Design System · ·
  94. Why Every Developer Should Start Blogging · · , , ,
  95. Best Practices for Node.js Development · · , ,
  96. Markup · · , ,
  97. The Fundamentals of CSS Layout · · , , ,
  98. Understanding Accessibility · · , ,
  99. Why Color Contrast Is Not as Black and White as It Seems · · , ,
  100. Page Weight · · , ,
  101. Security · · , ,
  102. Accessibility · · , ,
  103. JavaScript · · , ,
  104. CSS · · , ,
  105. HTTP · · , , ,
  106. CSS Layout from the Inside Out · · , ,
  107. The Surprising Behavior of “Important CSS Custom Properties” · · , ,
  108. Making Accessibility More Accessible · ·
  109. Introduction to TCP Connection Establishment for Software Developers · · , ,
  110. Introduction to Svelte Actions · · ,
  111. Understanding WCAG 2.1 Level AAA · · ,
  112. Select Elements With “pointer-events: none” by Holding Shift · · ,
  113. How to Maintain a Large Next.js Application · · , ,
  114. On Yak Shaving and “<md-block>”, a New HTML Element for Markdown · · , ,
  115. What Is WHOIS and How Does It Work? · · ,
  116. Programmers Should Stop Celebrating Incompetence · ·
  117. Make Your Website Stand Out With a Custom Scrollbar · ·
  118. How to Trim Strings in JavaScript · · ,
  119. 7 Ways to Improve Node.js Performance at Scale · · , ,
  120. Three Phases of Life for Design Systems · ·
  121. Creating Generative Patterns With the CSS Paint API · · ,
  122. Get Started With Validation in Node.js · · ,
  123. What Kind of Developer Do I Want to Be? · ·
  124. Adding a Dyslexia-Friendly Mode to a Website · · ,
  125. Control Layout in a Multi-Directional Website · · , ,
  126. The 6 Ways of Writing HTML (and Their Combinations) · ·
  127. Modern CSS in a Nutshell · ·
  128. Functional Programming in PHP: Higher-Order Functions · · , ,
  129. How JavaScript Engines Achieve Great Performance · · , ,
  130. Responsive Layouts, Fewer Media Queries · · ,
  131. Blog Page Accessibility Deep Dive · · ,
  132. Designing Sustainable Websites · · , ,
  133. Dear HTML Element · ·
  134. Accessibility Myths · · ,
  135. 20 Years of bram.us · ·
  136. Communicating Accessibility as Needs to Be Met and Not Rules to Be Followed · · ,
  137. Parallax Powered by CSS Custom Properties · · ,
  138. Tales of the Autistic Developer—Order and Chaos · ·
  139. How to Make Blob Menu Using HTML, CSS and JavaScript · · , , ,
  140. Introduction to Web Sockets · · , , ,
  141. 1992: The Web vs. Gopher, and the First External Browsers · ·
  142. Let’s Not Send Developers to the Accessibility Tree Tool · · , ,
  143. PHP Date and Time Recipes · ·
  144. Various Ways to Include Comments on Your Static Site · ·
  145. Dynamic Color Manipulation With CSS Relative Colors · · ,
  146. Three Principles to Better Present Your UI Designs · · ,
  147. WCAG 3.0: What You Need to Know About the Future of Accessibility Standards · · , ,
  148. A Guide to Modern CSS Colors With RGB, HSL, HWL, LAB, and LCH · · , ,
  149. How to Create Reusable Components With the Vue 3 Composition API · · , ,
  150. Performance · · , , ,
  151. A Clever Sticky Footer Technique · · ,
  152. Reframing Tech Debt · ·
  153. We Need to Talk About Accessibility—Again, and Again, and Then Some More · ·
  154. 4 Ways to Document Your Design System With Storybook · · , ,
  155. Generate a Pull Request of Static Content With a Simple HTML Form · · ,
  156. Using Position Sticky With CSS Grid · · ,
  157. A Primer on Product Management for Engineers · · ,
  158. GitHub’s Commitment to npm Ecosystem Security · · , ,
  159. Your CSS Is an Interface · · ,
  160. Access to Tech, Tech to Live · · ,
  161. Get Your “Head” Straight · · , ,
  162. 5 Popular Frontend Development Tools in 2021 · ·
  163. Some Notes on Using esbuild · · ,
  164. How to Fetch Data in Svelte · · , ,
  165. Why IndexedDB Is Slow and What to Use Instead · · , , ,
  166. Design Systems, Structured Content, and Headless Publishing · · , , ,
  167. Useful React Hooks That You Can Use in Your Projects · · ,
  168. Using Web Workers to Boost Third-Party Script Performance · · , ,
  169. Chrome DevTools: Copy CSS Styles as JavaScript-Compatible Properties · · , , , , ,
  170. Why Your Website Should Not Use Dithered Images · · , , ,
  171. How to Debounce and Throttle Callbacks in Vue · · , , , ,
  172. Other Looks at the Conditional Border Radius Trick · · , ,
  173. Easy Dark Mode (and Multiple Color Themes) in React · · , ,
  174. It’s Not About Your Favorite Color—Moving from Brand Strategy to Visual Identity · · , ,
  175. View-Source · · ,
  176. Everything You Ever Wanted to Know About the Accessibility Tree · · ,
  177. A Beginner’s Guide to Routing in Next.js, With Examples · · , ,
  178. Browsing With Screen Magnification · · , , ,
  179. Be Usable, Not Consistent, Not Uniform · · ,
  180. How Designers Can Prevent User Errors · · , ,
  181. Localizing Your Next.js App · · , ,
  182. Detecting Specific Text Input With HTML and CSS · · ,
  183. Debugging HTML: Accessibility · · , ,
  184. Why You Should Prioritise Quality over Speed in Design Systems · ·
  185. Becoming an Expert · · , , ,
  186. Designing a Reorderable List Component · · , , ,
  187. PHP 8.1 in 8 Code Blocks · ·
  188. In Defence of Dialog · · ,
  189. Deep Dive into Node.js Architecture · · ,
  190. Chrome DevTools: Record and Playback Your User Journeys · · , , , , ,
  191. Everything You Have to Know About Core Web Vitals · · ,
  192. RenderingNG: The Next-Generation Rendering Architecture for Chrome · · , , , , , ,
  193. The Key to Developer Happiness and How to Prevent Coding from Becoming Just Another Job · · ,
  194. How to Implement Memoization in React to Improve Performance · · , , , ,
  195. Browser Wars · · ,
  196. Building Real-Life Components: Facebook Messenger’s Chat Bubble · · , ,
  197. Design Is Not Art, and UX Is Not Design · · ,
  198. Designing Error Messages and a Logging Strategy in Node.js · · , , , ,
  199. Learn Forms · · , ,
  200. Learn PWA · · ,
  201. Understanding the Differences Between WCAG 2.1 and WCAG 2.2 · · , ,
  202. A Deep Dive into Serverless UI With TypeScript · · ,
  203. Rebase vs. Merge: Integrating Changes in Git · · ,
  204. The State of the Web · · ,
  205. What Are Accessible Fonts? · · ,
  206. Name, Labels, ARIA, What to Do? · · , ,
  207. What Does a Good Design System Feel Like? · · ,
  208. A Comprehensive Guide to Error Handling in Node.js · · , , ,
  209. Accessible Toggles · · , ,
  210. An Introduction to PostCSS · · , ,
  211. Developer Tools Secrets That Shouldn’t Be Secrets · · , ,
  212. The Guideline Gap · · , , ,
  213. So, You Want to Build an “@ mention” Autocomplete Feature? · ·
  214. CSS-ing Candy Ghost Buttons · ·
  215. The Golden Ratio and User-Interface Design · ·
  216. HTMLoween—HTML, JS, and CSS to Make Your Blood Boil · · , ,
  217. You Probably Don’t Need Media Queries Anymore · · ,
  218. The Little Book of Little Books · · , , ,
  219. Chrome DevTools: Visualise Your JavaScript Bundles · · , , , , , ,
  220. Make Your Design System Accessible—Color · · , ,
  221. Using CSS Variables for Reduced Motion on a Global Scale · · ,
  222. Indecisive Skip Links and Their Targets—the Renaissance of the “<hr>” Element · · , ,
  223. Best Practices on Embedding Third-Party Web Widgets · · , ,
  224. UX Design Isn’t Killing Creativity, Money Is · · , ,
  225. A Step by Step TypeScript Tutorial for Beginners · · ,
  226. Media Queries Level 4: Media Query Range Contexts · · ,
  227. Photoshop’s Journey to the Web · · ,
  228. Design Systems at Replit: Better Tokens · · , ,
  229. So, You Want an Accessibility Score? · · ,
  230. The Problem With “Click Here” and “Learn More” Links · · , ,
  231. In-Page Filtered Search With Vanilla JavaScript · · , ,
  232. A Deep Dive into “object-fit” and “background-size” in CSS · · ,
  233. Building an Effective Image Component · · , ,
  234. The Process of Building a CSS Framework · · ,
  235. Why Outdated jQuery Is Still the Dominant JavaScript Library · · , ,
  236. Why Accessibility Overlays on Your Website Can Make Things Worse · · ,
  237. Web Performance Metrics Cheatsheet · · ,
  238. If HTML and ARIA Don’t Allow It, It’s Probably a Bad Idea · · , ,
  239. Finding Common Patterns Across Frameworks · · ,
  240. Switch Role Support · · , ,
  241. Micro-Frontends: The Next Gen Way to Build Web Apps · · ,
  242. On Using Custom Properties · · ,
  243. The Start of a New Era for Responsive Web Design · · ,
  244. Common Mistakes When Writing CSS With BEM · · , , ,
  245. This Is the Way: A Phased Approach to Accessibility in the Development Lifecycle · ·
  246. Decoupling HTML, CSS, and JavaScript in Design Systems · · , , ,
  247. Making the Web Developer’s Pilgrimage · ·
  248. Respecting Users’ Motion Preferences · · ,
  249. Identify Potential CSS Improvements · · , , , , ,
  250. Semantic “menu” Context · · ,