Frontend Dogma

News and Tools for Frontend Development (8)

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

  1. The Gotchas of CSS Nesting · · ,
  2. When and Why to Use a Click Test · · ,
  3. Nuxt in 100 Seconds · · , ,
  4. Tuesday June 20 2023 Security Releases · · , ,
  5. Chrome for Testing: Reliable Downloads for Browser Automation · · , , ,
  6. Positioning Anchored Popovers · · ,
  7. Gatsby Headaches and How to Cure Them: I18N · · ,
  8. Blur Vignette Effect in CSS · · ,
  9. Naming Components · · , ,
  10. “margin-trim” as a Best Practice? · ·
  11. CSS! CSS! CSS! · · ,
  12. The Continuing Tragedy of CSS: Thoughts from CSS Day 2023 · · ,
  13. How to Highlight Required and Optional Form Fields · · , , ,
  14. Bottom Sheets: Definition and UX Guidelines · · , , ,
  15. You Can Stop Using “user-scalable=no” and “maximum-scale=1” in Viewport Meta Tags Now · · , , ,
  16. Design Under Constraints: Challenges, Opportunities, and Practical Strategies · · ,
  17. Modern CSS for Dynamic Component-Based Architecture · · , ,
  18. That’s Not How I Wrote CSS Three Years Ago · · , ,
  19. Shining Light on the Shadow DOM · · , ,
  20. Liven Up Your Websites With Scroll-Driven Animations and View Transitions · · , , , ,
  21. Best Animation Libraries for React · · , , ,
  22. CSS Containers, What Do They Know? · · , ,
  23. Internet Explorer: The 1st Browser to Support CSS · · , , , , , ,
  24. State of the CSS Community · · , ,
  25. Sticky Content: Focus in View · · , , ,
  26. The CSS “overscroll‑behavior” Property Can Be Used to Disable Default Browser Gestures · · ,
  27. No, “AI” Will Not Fix Accessibility · · ,
  28. Style Recalculation Secrets They Don’t Want You to Know · · , , ,
  29. The Universal Focus State · · , ,
  30. Why Doesn’t CSS Have Scope? · · , ,
  31. Must Know JavaScript API—IndexedDB API · · , , ,
  32. Are Simple Websites Better for Business? · · ,
  33. 48 Laws, Rules, and Principles of Web Development · · , ,
  34. Chrome DevTools Tips: Styles Pane and Elements Panel · · , , , ,
  35. Designing a Scalable Backend in Node.js · · , ,
  36. Before Your Next Frontend Pull Request, Use This Checklist · · , , , , , ,
  37. Best Practices for Container Queries · · , ,
  38. Testing Sites and Apps With Blind Users: A Cheat Sheet · · , , , , , ,
  39. Assume the Position—a Labelling Story · · , ,
  40. Be Careful With “ch” Units · · ,
  41. Modern CSS in Real Life · ·
  42. Reducing Complexity in Front End Development · · , , ,
  43. Exploring Universal and Cognitive-Friendly UX Design Through Pivot Tables and Grids · · ,
  44. Styling Scrollbars · · ,
  45. RSC from Scratch: Server Components · · , ,
  46. What’s New in CSS · · , ,
  47. Tokens Are the Most Valuable Artifact a Design System Can Provide · · ,
  48. Angular at Google I/O 2023 · · , ,
  49. The Ultimate Guide to Writing Technical Blog Posts · · , ,
  50. Accessibility and Artificial Intelligence · · ,
  51. Accessible Rich Internet Applications (WAI-ARIA) 1.2 · · , ,
  52. Accessibility Testing—Pay Attention to the Details · · ,
  53. An Introduction to Debugging in Node.js · · , ,
  54. Primitive Objects in JavaScript: When to Use Them · · ,
  55. Is React Having An Angular.js Moment? · · ,
  56. One More Thing—Apple’s Push on Web Apps on macOS · · ,
  57. The Problem With Automatically Focusing the First Input and What to Do Instead · · , , ,
  58. New Job? Negotiate as If Your Life Depends on It · ·
  59. How to Detect Unnecessary Renderings of DOM Elements in Your Web App to Improve Performance · · , , , , ,
  60. No Single Metric Captures Productivity · · ,
  61. wasmati: You Should Write Your WebAssembly in TypeScript · · , ,
  62. Every Design Team Needs Writers · · ,
  63. How Chrome Achieved High Scores on Three Browser Benchmarks · · , , ,
  64. WCAG 2.2 Misses Mark on Defining Visible Focus · · , , ,
  65. The Many Ways to Select the n-th Character from a String · ·
  66. How AI Can Make Software More Intuitive · · ,
  67. Do Not Drop Sass for CSS · · , ,
  68. An Introduction to “@ scope” in CSS · · , ,
  69. New CSS Color Spaces and Functions in All Major Engines · · , , , ,
  70. How We Created an Accessible, Scalable Color Palette · · , , , ,
  71. Announcing TypeScript 5.1 · · ,
  72. Asynchronous JavaScript for Beginners · ·
  73. Watch Transitions in Slow Motion in Chrome’s DevTools · · , , , ,
  74. The Context Dilemma · · ,
  75. Accessible Components: The Hamburger Menu · · , ,
  76. Semantic Code in HTML: What Is It and Does It Still Matter? · · ,
  77. Why We Should Stop Using JavaScript According to Douglas Crockford · · ,
  78. Performance Is Not a Checklist · · , ,
  79. Presentational Colors · · ,
  80. A Practical Guide to Deploying a Complex, Production-Level, Three-Tier Architecture on AWS · · , , , ,
  81. Some Things I Learnt from Working on Big Frontend Codebases · ·
  82. Advanced Form Control Styling With “selectmenu” and Anchoring API · · , ,
  83. Quick Tip: Shipping Resilient CSS Components · · , , ,
  84. Design Systems: A Curated List for Today’s UI/UX Designers · · , , ,
  85. Accessibility Audits for All · · , ,
  86. security.txt Now Mandatory for Dutch Government Websites · · ,
  87. Re-Evaluating “px” vs. “em” in Media Queries · · , , ,
  88. Token Operations · ·
  89. New to the Web Platform in May · · , , , , , , , ,
  90. Is There a Viable Animated GIF Alternative Yet or What? · · ,
  91. Watch Out for Layout Shifts With “ch” Units · · , ,
  92. Linting Defensive and Logical CSS With Stylelint Plugins · · , , , ,
  93. How Blink Invalidates Styles When “:has()” [Is] in Use · · , , ,
  94. Release Notes for Safari Technology Preview 171 · · , , ,
  95. Announcing the Second Compute Pressure Origin Trial · · , , ,
  96. 21 Awesome Web Features You’re Not Using Yet · · , , ,
  97. Cracking the Theme Switcher and Dark Mode · · , ,
  98. An Introduction to JavaScript Proxies · · ,
  99. Hands on With the Node.js Test Runner · · ,
  100. The Art of Code Review · · , ,
  101. I Think I Finally “Get” JS Objects · · ,
  102. What Is Personalization? · · ,
  103. The Double-Edged Sword of Design Systems · · ,
  104. Don’t Meddle With User Input · · ,
  105. 10 Incident Management Best Practices · · , ,
  106. Sass-Like Nesting in Native CSS · · , , ,
  107. Mastering CSS Blend Modes · · ,
  108. The Optimization Sinkhole · · ,
  109. How Screen-Reader Users Type on and Control Mobile Devices · · , , , , ,
  110. The Problem With Nested Fieldsets and How to Avoid Them · · , , ,
  111. Why Does “👩🏾‍🌾” Have a Length of 7 in JavaScript? · · ,
  112. Plain Old JavaScript and the DOM · · ,
  113. WordPress Turns 20 · ·
  114. When to Use Plain Text or Images Instead of MathML · · , ,
  115. Understanding the Importance of Encoding · ·
  116. We Need to Talk About How We Talk About Accessibility · · , ,
  117. Designing a Better Design Handoff File in Figma · · , ,
  118. Supper Club × Bramus Van Damme on CSS · · , ,
  119. How to Draw Any Regular Shape With Just One JavaScript Function · · , ,
  120. A Practical Overview on Architecture Decision Records (ADR) · · , ,
  121. Brief Note on Popovers With Dialogs · · , , , ,
  122. “display: contents” Considered Harmful · · ,
  123. Levelling Up Accessibility Skills in Your Organisation · · ,
  124. Two Things That Are Not Great About OKLCH · · ,
  125. Seven Lessons from 7 Years Designing Systems · · ,
  126. Deploying AVIF for More Responsive Websites · · , ,
  127. The Yellow Fade Technique With Modern CSS Using “@ starting-style” · · ,
  128. Reading a Voluntary Product Accessibility Template (VPAT) or Accessibility Conformance Report (ACR) · · ,
  129. Responsive CSS Layout Grids Without Media Queries · · , ,
  130. Querying Parsed HTML in BigQuery · ·
  131. Single Line Comments in CSS · · ,
  132. Register Custom Properties in CSS, Get and Update Them With JavaScript · · ,
  133. 11 HTML Best Practices for Login and Sign-Up Forms · · , ,
  134. A Complete Guide to Using IndexedDB · · , ,
  135. Introducing the “popover” API · · , ,
  136. Graph Slider · ·
  137. Two Simple Layouts That Work Better With Grid · · , ,
  138. You Don’t Need a Modal Window · · ,
  139. Future of CSS: Popover API · · , ,
  140. I Created 100+ Unique CSS Patterns · · , ,
  141. Addressing Timeout Modals: Navigating the Nuances for Inclusive Web Design · · , ,
  142. File Upload Security and Malware Protection · · , ,
  143. Visual-Design Principles and UX Design Best Practices · · , , ,
  144. Why We’re Bad at CSS · ·
  145. Stop Rewriting Your CSS! Use “:not()” Instead · · , , ,
  146. Be Careful Using “Menu” · · , , ,
  147. Building a Modern Design System in Layers · ·
  148. 10 Ways to Boost Your Landing Page Conversion Rates · · ,
  149. Working With URLs With Vanilla JavaScript · · ,
  150. Beyond Design Systems for Interfaces: A Mega System of Design Systems · ·
  151. Building Offline-First Web Applications With Service Workers and IndexedDB · · , , , ,
  152. A Web Component Intro With Example · · , ,
  153. Server-Sent Events With Node.js · · ,
  154. A New Approach to Measuring Developer Productivity · · ,
  155. Website Issues: On the Relevance of Audience Size and Impact · · ,
  156. Using “linear()” for Better Animation · · , ,
  157. Creating a Shine Effect on a Card With Tailwind CSS · · ,
  158. How to Build Lean Efficient Websites in 2023 · · , , ,
  159. Accessible Numbers · · ,
  160. Are We There Yet? WCAG 2.2 Is at the Candidate Recommendation [Stage] v3 · · , ,
  161. Write Better Code by Following These JavaScript Best Practices · · ,
  162. What Devs Can Do on Global Accessibility Awareness Day · ·
  163. How to Create a Custom Range Slider Using CSS · · , ,
  164. Getting Started With View Transitions on Multi-Page Apps · · , ,
  165. A History of Metaphors for the Internet · · , ,
  166. Thinking on Ways to Solve Color Palettes · · , , ,
  167. ESLint Guide: How to Use It With Confidence · · , , , ,
  168. 6 Tips for Improving Language Switchers on Ecommerce Sites · · , , , ,
  169. Release Notes for Safari Technology Preview 170 · · , , ,
  170. Conditional CSS With “:has” and “:nth-last-child” · · ,
  171. I Just Did a Test to Apply as a Front End Developer—and Things Aren’t Going Well · · ,
  172. GitHub Copilot and ChatGPT Alternatives · · , ,
  173. Why Is Web Accessibility Important? · · ,
  174. State of Node.js Performance 2023 · ·
  175. Getting an Item an Array With a Negative Index With Modern JavaScript · · ,
  176. Semantics and the “popover” Attribute: What to Use When? · · , , ,
  177. Vertical Rhythm Using CSS “lh” and “rlh” Units · · ,
  178. Design Patterns Are a Better Way to Collaborate on Your Design System · · , ,
  179. Why Your Design Language System Needs a Product Manager · · ,
  180. Fieldsets, Legends, and Screen Readers Again · · , , , , ,
  181. CSS Art: Drawing a Coffee Stain · · ,
  182. Let’s Share Our Salaries, Title, Location, XP · · ,
  183. Get Full Type Support With Plain JavaScript · ·
  184. Solving Media Object Float Issues With CSS Block Formatting Contexts · ·
  185. How to Handle Production Support When Using Scrum · · , , ,
  186. Using HTML Landmark Roles to Improve Accessibility · · ,
  187. HTML Landmark Roles Screen Reader Demo · · , , , , ,
  188. 10 Books to Improve Coding Skill in 2023 · · , ,
  189. ES2023 Features · ·
  190. Screen Readers Don’t Announce When the User Reaches the “maxlength” Character Limit · · , , , , ,
  191. Error Message Guidelines · · , , ,
  192. The Problem With Disabled Buttons and What to Do Instead · · , ,
  193. 7 Secret TypeScript Tricks Pros Use · · ,
  194. Building a Frontend Framework—Reactivity and Composability With Zero Dependencies · · , ,
  195. Building a Greener Web · · , ,
  196. What Is “Fake Door” Testing in UX? · · ,
  197. Keeping Up With an Ever Changing Web · · ,
  198. Add Opacity to an Existing Color · · ,
  199. Respect Your Children · · , ,
  200. The JavaScript Ecosystem Is Delightfully Weird · ·
  201. What’s New in CSS and UI: I/O 2023 Edition · · ,
  202. Regular Expressions in JavaScript · · ,
  203. Introduction to Screen‐Readers: JAWS Edition · · , , , ,
  204. Introduction to Screen‐Readers: NVDA Edition · · , , , ,
  205. Introduction to Screen‐Readers: VoiceOver macOS Edition · · , , , , ,
  206. Best Practices for All Developers · ·
  207. An Introduction to the Bun JavaScript Runtime · · , ,
  208. Crafting a Modern Spotlight Effect With React and CSS · · , ,
  209. ES2023 Introduces New Array Copying Methods to JavaScript · · , , ,
  210. Developer Tools That Shouldn’t Be Secrets · · , ,
  211. The 9 Most Effective Core Web Vitals Opportunities of 2023 · · , ,
  212. What’s New in Web · · , , ,
  213. What’s New in Web Animations · · ,
  214. Advancing Interaction to Next Paint · · ,
  215. Introducing INP to Core Web Vitals · · , ,
  216. Is Data Transfer the Best Proxy for Website Carbon Emissions? · · ,
  217. The Difference Between Agile and UX Is Not About Quantity vs. Quality · · , , ,
  218. Slow Design · · ,
  219. How to Optimize Web Responsiveness With Interaction to Next Paint · · , , ,
  220. Why an Engineering Manager Should Not Review Code · · ,
  221. Introducing Baseline · · , , ,
  222. Introducing Baseline: A Unified View of Stable Web Features · · , , ,
  223. Baseline Features You Can Use Today · · , , ,
  224. An Introduction to Container Queries in CSS · · , ,
  225. Client-Side Rendering of HTML and Interactivity · · , ,
  226. How Large DOM Sizes Affect Interactivity, and What You Can Do About It · · , , ,
  227. Rearrange/Animate CSS Grid Layouts With the View Transition API · · , , ,
  228. Find Slow Interactions in the Field · · , ,
  229. Diagnose Slow Interactions in the Lab · · ,
  230. Optimize Input Delay · · , ,
  231. The Ongoing Defence of Frontend as a Full-Time Job · ·
  232. Script Evaluation and Long Tasks · · , ,
  233. Design Systems [Are] a Mindset Not a Library · ·
  234. How to Handle Emojis in Node.js · · , , ,
  235. See What’s New in Firefox [113.0] · · , , ,
  236. A Complete Guide to Usability Testing · · , ,
  237. Improving Web-Site Conversion Rates Through Better UX Design · · , ,
  238. Pay Attention to Web Performance Metrics to Improve the UX · · , , , ,
  239. ShatGPT · · ,
  240. Proportional Design Systems With Proportio.app · ·
  241. Speed Trap · · , ,
  242. Dithering · · ,
  243. A Comprehensive Guide to Using Langchain.js and Google Cloud Functions for AI Applications · · , , , ,
  244. The Problem With Sticky Menus and What to Do Instead · · , ,
  245. How Far Back in Time Can I Take My Website’s Design · · , , , ,
  246. How to Configure Path Aliases in Frontend Projects in the Native Way · · , ,
  247. The Image Sorting Experiment · · , , ,
  248. Scaling Node.js Web Apps With Docker · · , , ,
  249. Complete Guide on Playwright Visual Regression Testing · · , , ,
  250. Should the Confirmation Button Come First or Last? · · ,