Frontend Dogma

“2021” Archive

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