Frontend Dogma

“2023” Archive (7)

  1. The Problem With Nested Fieldsets and How to Avoid Them · · , , ,
  2. How Screen-Reader Users Type on and Control Mobile Devices · · , , , , ,
  3. The Optimization Sinkhole · · ,
  4. Mastering CSS Blend Modes · · ,
  5. Understanding the Importance of Encoding · ·
  6. When to Use Plain Text or Images Instead of MathML · · , ,
  7. WordPress Turns 20 · ·
  8. Plain Old JavaScript and the DOM · · ,
  9. Why Does “👩🏾‍🌾” Have a Length of 7 in JavaScript? · · ,
  10. Brief Note on Popovers With Dialogs · · , , , ,
  11. A Practical Overview on Architecture Decision Records (ADR) · · , ,
  12. How to Draw Any Regular Shape With Just One JavaScript Function · · , ,
  13. Supper Club × Bramus Van Damme on CSS · · , ,
  14. Designing a Better Design Handoff File in Figma · · , ,
  15. We Need to Talk About How We Talk About Accessibility · · , ,
  16. Seven Lessons from 7 Years Designing Systems · · ,
  17. Two Things That Are Not Great About OKLCH · · ,
  18. Levelling Up Accessibility Skills in Your Organisation · · ,
  19. “display: contents” Considered Harmful · · ,
  20. Reading a Voluntary Product Accessibility Template (VPAT) or Accessibility Conformance Report (ACR) · · , ,
  21. A Complete Guide to Using IndexedDB · · , ,
  22. 11 HTML Best Practices for Login and Sign-Up Forms · · , ,
  23. Register Custom Properties in CSS, Get and Update Them With JavaScript · · ,
  24. Single Line Comments in CSS · · ,
  25. Querying Parsed HTML in BigQuery · ·
  26. Responsive CSS Layout Grids Without Media Queries · · , ,
  27. The Yellow Fade Technique With Modern CSS Using “@ starting-style” · · ,
  28. Deploying AVIF for More Responsive Websites · · , ,
  29. Introducing the “popover” API · · , ,
  30. Future of CSS: Popover API · · , ,
  31. File Upload Security and Malware Protection · · , ,
  32. Addressing Timeout Modals: Navigating the Nuances for Inclusive Web Design · · , ,
  33. I Created 100+ Unique CSS Patterns · · , ,
  34. You Don’t Need a Modal Window · · ,
  35. Two Simple Layouts That Work Better With Grid · · , ,
  36. Graph Slider · ·
  37. 10 Ways to Boost Your Landing Page Conversion Rates · · , ,
  38. Working With URLs With Vanilla JavaScript · · ,
  39. Building a Modern Design System in Layers · ·
  40. Be Careful Using “Menu” · · , , ,
  41. Stop Rewriting Your CSS! Use “:not()” Instead · · , , ,
  42. Why We’re Bad at CSS · ·
  43. Visual-Design Principles and UX Design Best Practices · · , , ,
  44. A Web Component Intro With Example · · , ,
  45. Building Offline-First Web Applications With Service Workers and IndexedDB · · , , , ,
  46. Beyond Design Systems for Interfaces: A Mega System of Design Systems · ·
  47. A Beginners Guide to Digital Accessibility · · ,
  48. Server-Sent Events With Node.js · · ,
  49. How to Build Lean Efficient Websites in 2023 · · , , ,
  50. Creating a Shine Effect on a Card With Tailwind CSS · · ,
  51. Using “linear()” for Better Animation · · , ,
  52. Website Issues: On the Relevance of Audience Size and Impact · · ,
  53. A New Approach to Measuring Developer Productivity · · ,
  54. What Devs Can Do on Global Accessibility Awareness Day · · ,
  55. Getting Started With View Transitions on Multi-Page Apps · · , ,
  56. How to Create a Custom Range Slider Using CSS · · , ,
  57. Write Better Code by Following These JavaScript Best Practices · · ,
  58. Are We There Yet? WCAG 2.2 Is at the Candidate Recommendation [Stage] v3 · · , ,
  59. Accessible Numbers · · ,
  60. Release Notes for Safari Technology Preview 170 · · , , ,
  61. 6 Tips for Improving Language Switchers on Ecommerce Sites · · , , , ,
  62. ESLint Guide: How to Use It With Confidence · · , , , ,
  63. Thinking on Ways to Solve Color Palettes · · , , ,
  64. A History of Metaphors for the Internet · · , ,
  65. Semantics and the “popover” Attribute: What to Use When? · · , , ,
  66. Fieldsets, Legends, and Screen Readers Again · · , , , , ,
  67. Why Your Design Language System Needs a Product Manager · · ,
  68. Design Patterns Are a Better Way to Collaborate on Your Design System · · , ,
  69. Vertical Rhythm Using CSS “lh” and “rlh” Units · · ,
  70. Getting an Item an Array With a Negative Index With Modern JavaScript · · ,
  71. State of Node.js Performance 2023 · ·
  72. Why Is Web Accessibility Important? · · ,
  73. I Just Did a Test to Apply as a Front End Developer—and Things Aren’t Going Well · · ,
  74. GitHub Copilot and ChatGPT Alternatives · · , ,
  75. Conditional CSS With “:has” and “:nth-last-child” · · ,
  76. 10 Books to Improve Coding Skill in 2023 · · , ,
  77. Using HTML Landmark Roles to Improve Accessibility · · ,
  78. HTML Landmark Roles Screen Reader Demo · · , , , , ,
  79. How to Handle Production Support When Using Scrum · · , , ,
  80. Solving Media Object Float Issues With CSS Block Formatting Contexts · ·
  81. Get Full Type Support With Plain JavaScript · ·
  82. Let’s Share Our Salaries, Title, Location, XP · · ,
  83. CSS Art: Drawing a Coffee Stain · · ,
  84. 7 Secret TypeScript Tricks Pros Use · · ,
  85. The Problem With Disabled Buttons and What to Do Instead · · , ,
  86. Error Message Guidelines · · , , ,
  87. Screen Readers Don’t Announce When the User Reaches the “maxlength” Character Limit · · , , , , ,
  88. ES2023 Features · ·
  89. Building a Frontend Framework—Reactivity and Composability With Zero Dependencies · · , ,
  90. Respect Your Children · · , ,
  91. What Is “Fake Door” Testing in UX? · · ,
  92. Keeping Up With an Ever Changing Web · · ,
  93. Building a Greener Web · · , ,
  94. Add Opacity to an Existing Color · · ,
  95. An Introduction to the Bun JavaScript Runtime · · , ,
  96. Best Practices for All Developers · ·
  97. Introduction to Screen‐Readers: VoiceOver macOS Edition · · , , , , ,
  98. Introduction to Screen‐Readers: NVDA Edition · · , , , ,
  99. Introduction to Screen‐Readers: JAWS Edition · · , , , ,
  100. Regular Expressions in JavaScript · · ,
  101. What’s New in CSS and UI: I/O 2023 Edition · · ,
  102. The JavaScript Ecosystem Is Delightfully Weird · ·
  103. Slow Design · · ,
  104. Introducing Baseline · · , , ,
  105. Introducing Baseline: A Unified View of Stable Web Features · · , , ,
  106. Baseline Features You Can Use Today · · , , ,
  107. Why an Engineering Manager Should Not Review Code · · ,
  108. How to Optimize Web Responsiveness With Interaction to Next Paint · · , , ,
  109. The Difference Between Agile and UX Is Not About Quantity vs. Quality · · , , ,
  110. What’s New in Web · · , , ,
  111. What’s New in Web Animations · · ,
  112. The 9 Most Effective Core Web Vitals Opportunities of 2023 · · , ,
  113. Is Data Transfer the Best Proxy for Website Carbon Emissions? · · ,
  114. Introducing INP to Core Web Vitals · · , ,
  115. Developer Tools That Shouldn’t Be Secrets · · , ,
  116. Advancing Interaction to Next Paint · · ,
  117. ES2023 Introduces New Array Copying Methods to JavaScript · · , , ,
  118. Crafting a Modern Spotlight Effect With React and CSS · · , ,
  119. See What’s New in Firefox [113.0] · · , , ,
  120. How to Handle Emojis in Node.js · · , , ,
  121. Design Systems [Are] a Mindset Not a Library · ·
  122. Script Evaluation and Long Tasks · · , ,
  123. The Ongoing Defence of Frontend as a Full-Time Job · ·
  124. Optimize Input Delay · · , ,
  125. Find Slow Interactions in the Field · · , ,
  126. Diagnose Slow Interactions in the Lab · · ,
  127. How Large DOM Sizes Affect Interactivity, and What You Can Do About It · · , , ,
  128. An Introduction to Container Queries in CSS · · , ,
  129. Rearrange/Animate CSS Grid Layouts With the View Transition API · · , , ,
  130. Client-Side Rendering of HTML and Interactivity · · , ,
  131. Improving Web-Site Conversion Rates Through Better UX Design · · , , ,
  132. A Comprehensive Guide to Using Langchain.js and Google Cloud Functions for AI Applications · · , , , ,
  133. Dithering · · ,
  134. Speed Trap · · , ,
  135. Proportional Design Systems With Proportio.app · ·
  136. ShatGPT · · ,
  137. Pay Attention to Web Performance Metrics to Improve the UX · · , , , ,
  138. A Complete Guide to Usability Testing · · , ,
  139. How to Configure Path Aliases in Frontend Projects in the Native Way · · , ,
  140. How Far Back in Time Can I Take My Website’s Design · · , , , ,
  141. The Problem With Sticky Menus and What to Do Instead · · , ,
  142. Cron Job: A Comprehensive Guide for Beginners · · ,
  143. Should the Confirmation Button Come First or Last? · · ,
  144. Complete Guide on Playwright Visual Regression Testing · · , , ,
  145. Scaling Node.js Web Apps With Docker · · , , ,
  146. The Image Sorting Experiment · · , , ,
  147. htmx Is the Future · · ,
  148. How “:not()” Chains Multiple Selectors · · ,
  149. HTTP/1 vs. HTTP/2 vs. HTTP/3 · · , ,
  150. Scroll-Driven Animations · · , ,
  151. Speed Up or Slow Down a Video · · , ,
  152. I’m Done With React · · ,
  153. CSS Logical Properties: A Good Use Case · · , ,
  154. Code Coverage vs. Test Coverage · · , , ,
  155. GitHub Actions: All Actions Will Run on Node 16 Instead of Node 12 · · , ,
  156. React Testing Library and Accessibility · · , , , ,
  157. 5 Best Practices to Sustainably Improve Core Web Vitals · · , ,
  158. An Introduction to the “:has()” Selector in CSS · · , ,
  159. The Latest Innovations in Drupal · ·
  160. Release Notes for Safari Technology Preview 169 · · , , ,
  161. 7 Practical CSS Typography Tips and Tricks · · , , ,
  162. Detecting If an Event Was Triggered by a User or by JavaScript · · ,
  163. How to Write More Efficient JavaScript Conditions · · , ,
  164. How to Make a CSS-Only Hamburger Menu · · , ,
  165. Security Implications of HTTP Response Headers · · ,
  166. Make Your Website Load Fast by Optimizing Request Priorities · · , ,
  167. The Intersectionality of Web Performance · · , ,
  168. Digital Accessibility Is a Bigger Education Issue Than We Think—Here’s What We Can Do About It · · ,
  169. Where Would You Take the W3C? · · ,
  170. Don’t Use Custom CSS Scrollbars · · ,
  171. Angular v16 Is Here · · ,
  172. CSS Naked Day and the Missing Wikipedia Page · · , ,
  173. A Radical Proposal: Put UX Research in Charge · · , , ,
  174. The Simple Trick to Transition from Height “0” to “auto” With CSS · · , , ,
  175. Creating an Animated Gradient Border With CSS · · , , ,
  176. Why “font-size” Must Never Be in Pixels · · , , ,
  177. developers.events: Maintaining a GitHub repository—What Have I Learned in 7 Years? · · , ,
  178. 3 Engineering Mistakes That Kill Startups · · ,
  179. Short Note: Why Isn’t “role=presentation”/“none” Allowed on Focusable Elements? · · , , ,
  180. SupportsCSS · · , , ,
  181. Do Logical Properties Make CSS Easier to Learn? · · , ,
  182. A Complete Guide to Performance Budgets · · , ,
  183. An Update on the Lock Icon · · , ,
  184. Configuring ESLint, Prettier, and TypeScript Together · · , , , , , ,
  185. This Blog Is Hosted on My Android Phone · · ,
  186. Tailwind CSS vs. UnoCSS · · , , ,
  187. Beyond Content Creation: How Open Source Contributions Can Help You Get Noticed · · , ,
  188. What’s New in Svelte: May 2023 · · , ,
  189. Practical Guide to Not Blocking the Event Loop · · , , ,
  190. CSS Wishlist 2023 · · ,
  191. “:root” Isn’t Global · ·
  192. Testing Feature Support for Modern CSS · · , ,
  193. CDNs: Speed Up Performance by Reducing Latency · · ,
  194. My Favorite Free Courses to Learn JavaScript in Depth · · , , ,
  195. Two Underused Arguments for Writing Documentation · · , ,
  196. 30th Anniversary of Licensing the Web for General Use and at No Cost · · , , , ,
  197. The Popover API Is Exciting, Sort Of · · ,
  198. Dark Mode in 3 Lines of CSS and Other Adventures · · ,
  199. A Beginner’s Introduction to the Most Common Data Types in Programming · · , ,
  200. Everything You Need to Know About Webpack’s Bundle Analyzer · · , ,
  201. Write Better CSS by Borrowing Ideas from JavaScript Functions · · , , ,
  202. New to the Web Platform in April · · , , , , , ,
  203. JS Private Class Fields Considered Harmful · ·
  204. Animating the Impossible · · , ,
  205. Rebuilding a Featured News Section With Modern CSS: Vox News · · , , ,
  206. Modern CSS Layout Is Awesome! · · , ,
  207. How to Manage Design Tokens · · , ,
  208. How to Deep Merge Arrays and Objects With JavaScript · · , , ,
  209. The Most Underrated Section of Design Portfolios · · ,
  210. What Is the Value of a Design System? · ·
  211. Progress over Perfection: The Better Way for Communication and Accessibility Advocacy · · , ,
  212. Typography for Everyone · · , ,
  213. Writing Unit Tests in Node.js Using Jest · · , ,
  214. Accessible Target Sizes Cheatsheet · · ,
  215. Discovering the Power of JavaScript Proxy After All This Time · ·
  216. The Most Important Thing Productivity Tools Are Missing About AI · · , ,
  217. The Interactive Guide to Rendering in React · · , ,
  218. The Best Way to Get nvm Working in CI/CD Systems · · ,
  219. Comparing the Best Node.js Version Managers: nvm, Volta, and asdf · · , ,
  220. Transition to and from “display: none” With Upcoming CSS Capabilities · · , ,
  221. Reducing the Cost of String Serialization in Node.js Core · · ,
  222. Crafting the Next.js Website · ·
  223. Adding Motion to the Next Decade of Atomic Design · ·
  224. Scoped CSS Is Back · · ,
  225. Design Debt: The Hidden Cost of Neglecting UX Investment, and How to Measure and Manage It · · , , ,
  226. npm vs. Yarn vs. pnpm · · , , ,
  227. Frontend Web Performance Checklist · · ,
  228. CSS Blend Modes · · ,
  229. Avoiding Dark Patterns in Web Design · · ,
  230. Organizing a Web Design System for Scalability in Figma · · , ,
  231. Goodbye “create-react-app”: A New Approach · ·
  232. Figma, I Love You but You’re Bringing Me Down · ·
  233. The Potentially Dangerous Non-Accessibility of Cookie Notices · · , , , ,
  234. The “const” Deception · ·
  235. How to Write Comments in React: The Good, the Bad, and the Ugly · · , ,
  236. Dark Mode Toggle and “prefers-color-scheme” · · ,
  237. Transitioning to Height Auto (Two Ways) · ·
  238. “The Secret List of Websites” · · , ,
  239. The Effects of Technical Debt on Morale · · ,
  240. Meeting WCAG Level AAA · · , , ,
  241. Considering Content Warnings in HTML · · , ,
  242. “details”/“summary” Inconsistencies · · , , ,
  243. Exploring the Potential of Web Workers for Multithreading on the Web · · , , ,
  244. Spinning Diagrams With CSS · · ,
  245. 5 Topics You Should Touch on During the Recruitment Process · · , ,
  246. Read-Only Web Apps · · ,
  247. Designing and Coding for Voice · ·
  248. CSS Custom Properties Beyond the “:root” · · , ,
  249. Upgrading Our CSS Habits: “aspect-ratio” · ·
  250. Why Is Scrum the Most Popular Agile Framework? · · , ,