Frontend Dogma

News and Tools for Frontend Development (10)

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

  1. Introduction to JSX · · , ,
  2. React Developers Love Preact, Here’s Why · · , ,
  3. The “details” Element and In-Page Search · · , , ,
  4. What’s the Perfect Design Process? · · ,
  5. Under-Engineered Comboboxen? · · , , ,
  6. Accessible Overlays Aren’t Accessible · · ,
  7. An Introduction to the View Transitions API · · , ,
  8. WCAG 2.2, Quick and Simplified · · , ,
  9. JavaScript Gom Jabbar · ·
  10. What’s Next for Redux With Mark Erikson · · , , , ,
  11. Understanding TypeScript Generators · ·
  12. How to Build Things People Want to Use · · ,
  13. Solved: Tricky Floating Image Alignment · · , ,
  14. Combat Accessibility Decay: How to Maintain Ongoing Accessibility · · , ,
  15. Introduction to MySQL Data Types · · , ,
  16. The Importance of Verifying Webhook Signatures · · ,
  17. Position-Driven Styles · · ,
  18. 4 Ways to Improve Mobile Accessibility · · ,
  19. Web and App ADA Lawsuits: 6 Trends So Far in 2023 · · , ,
  20. Why You Must Commit to Grounding Every DEI-Related Effort With Data · · , , ,
  21. How to Use CSS “background-size” and “background-position” · · , ,
  22. Feature Flags Configuration, Instrumentation, and Use · · , , ,
  23. Release Notes for Safari Technology Preview 173 · · , , ,
  24. JavaScript Console Methods: A Deep Dive · · , ,
  25. Form and Search Landmarks · · , , , , ,
  26. Getting Started With Native Design Tokens in Figma · · , ,
  27. The Massive Bug at the Heart of the npm Ecosystem · · , ,
  28. Building Sliding Cards With “position: sticky;” · ·
  29. Demystifying JavaScript Operators: What Does That Symbol Mean? · · ,
  30. Amplify Design Values Through Building Design System · · ,
  31. Feature Management and Feature Experimentation, Why You Should Do Both—How It Helps Both Product and Software Engineering Teams · · , , ,
  32. Popular DevTools Tips · · , ,
  33. Screen Magnification: Digital Accessibilitiy · · , , ,
  34. What’s Next for JavaScript: New Features to Look Forward To · ·
  35. Faking a “:snapped” Selector With Scroll-Driven Animations · · , , ,
  36. Going Beyond Constants With Custom Properties · · ,
  37. Transition Between Pages Smoothly With a Single Line of Code · · ,
  38. AI Is Killing the Old Web, and the New Web Struggles to Be Born · · ,
  39. What Does the Image “decoding” Attribute Actually Do? · · , ,
  40. Learn How to Use Hue in CSS Colors With HSL · · , ,
  41. Live Regions in React · · , , ,
  42. Top Tips from a Web Accessibility Evaluator at WebAIM · · , ,
  43. Tips for Upgrading Your Techstack for Faster Frontend Development · · , , , ,
  44. Qwik Introduction—a Framework That Goes Fast · · , ,
  45. What’s Your Type? Try These Tests to Pick the Perfect Font for You · · , ,
  46. Mapping Typography · · , ,
  47. An Introduction to Parser Combinators · · ,
  48. Mixing Colors With CSS · · ,
  49. A Beginner’s Guide to Laravel: Introduction and Key Features · · , ,
  50. XML Is the Future · · ,
  51. WebSockets 101 · · , ,
  52. Text Wrap Pretty Is Coming to CSS · · ,
  53. An Introduction to Command Injection Vulnerabilities in Node.js and JavaScript · · , , ,
  54. Using BEM for Design System Tokens · · , ,
  55. Choosing a Color Palette · · , , ,
  56. Converting [a] JavaScript Codebase to TypeScript · · , , ,
  57. Understanding Authorization Before Authentication: Enhancing Web API Security · · , , , ,
  58. Debugging INP · · , , ,
  59. All You Need to Know About CORS and CORS Errors · · , ,
  60. Announcing Svelte 4 · · ,
  61. The Cost of JavaScript 2023 · · , ,
  62. Future CSS: State Container Queries · · ,
  63. Component Driven User Interface Testing (CDUIT) · · ,
  64. The Unlikely Story of UTF-8: The Text Encoding of the Web · · ,
  65. Introducing the MDN Playground: Bring Your Code to Life · · , ,
  66. What Exactly Is [the] “:root” Pseudo-Element in CSS? · · , ,
  67. WCAG 2.2 Removes 4.1.1 Parsing and How axe-core Is Impacted · · , , ,
  68. Design Systems Directory · · ,
  69. Designing for Inclusion · · , ,
  70. How Designers Can Beat AI at Design · · ,
  71. Using Multiple Selectors With JavaScript Selector Methods · · ,
  72. Cascade Layers Are Useless * · · ,
  73. CSS in Micro Frontends · · ,
  74. The 5 Pillars of Every HTTP Request · ·
  75. Too Much JavaScript? Why the Frontend Needs to Build Better · · , ,
  76. State of CSS 2023 · · ,
  77. W3C Launch Their New Website · ·
  78. Three Key Principles for an Accessible Website · · ,
  79. Creating a Flexible Design Token Taxonomy for Intuit’s Design System · · ,
  80. Thoughts from “Meet Safari for Spatial Computing” · · , , ,
  81. Making Your Design Tokens Future-Proof · ·
  82. Authentication vs. Authorization · · , ,
  83. Style Your RSS Feed · · ,
  84. Continuous Accessibility · · , ,
  85. Balancing Users’ Data Privacy and the User Experience · · ,
  86. Can Web Developers Be Held Liable? · · ,
  87. Balancing Users’ Needs and Business Goals in UX Design · · ,
  88. Packaging and Selling a Node.js App · ·
  89. Why UX Testing Is Critical to Your Web Site’s Success · · ,
  90. Gatsby Headaches and How to Cure Them: I18N II · · ,
  91. Button Types · · ,
  92. Radix UI Component With Next.js and Tailwind CSS · · , , , ,
  93. Import Maps to Natively Import JavaScript Modules Using Bare Names · ·
  94. The New CSS · · , ,
  95. The Problem With Sticky Menus That Appear on Scroll and What to Do Instead · · , ,
  96. How to Clean Up Your Local Repository With Git Commands · · , , ,
  97. It’s Time for Dimensional Thinking in Design · · ,
  98. IndexedDB Tutorial for Beginners: A Comprehensive Guide with Coding Examples · · , , , ,
  99. Git Concepts Everyone Should Know · · ,
  100. TypeScript 5.2’s New Keyword: “using” · ·
  101. The Five Types of People Who Produce Inaccessible Code · · ,
  102. Standardising Design Tokens · · ,
  103. Create React UI Lib: Component Library Speedrun · · , , ,
  104. Scoping · · ,
  105. Creating Scroll-Triggered Animations by Combining Scroll-Driven Animations, Custom Properties, Style Queries, and Transitions · · , , , , ,
  106. 6 Quick Tests You Can Do to Test Your Forms for Accessibility · · , ,
  107. The Next Phase of Eleventy: Return of the Side Project · ·
  108. What’s UnAI-Able · ·
  109. What Are Deceptive Patterns? · · ,
  110. An Explosion in Software Engineers Using AI Coding Tools? · · , ,
  111. A Guide to Coding Standards to Improve Code Quality · · , , , ,
  112. How to Add a CSS Reveal Animation to Your Images · · , , ,
  113. Top 10 Things You Should Add While Coding: Valuable Tips for Programmers · · ,
  114. Using Color Wheel Combinations in Your Designs · · ,
  115. Cyclic Dependency Space Toggles · · ,
  116. How (and Should?) We Stop the Infinite Scroll · · ,
  117. How to Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit · · , , , ,
  118. Design vs. Accessibility and the CSS “visually-hidden” Class · · , , ,
  119. npm Won’t Publish Packages Containing the Word “keygen” · · , ,
  120. Puppeteer in Node.js: More Antipatterns to Avoid · · , , , ,
  121. Rebuilding a Comment Component With Modern CSS · · , ,
  122. The Gotchas of CSS Nesting · · ,
  123. When and Why to Use a Click Test · · ,
  124. Nuxt in 100 Seconds · · , ,
  125. Tuesday, June 20, 2023 Security Releases · · , ,
  126. Chrome for Testing: Reliable Downloads for Browser Automation · · , , ,
  127. Gatsby Headaches and How to Cure Them: I18N · · ,
  128. Blur Vignette Effect in CSS · · ,
  129. Naming Components · · , ,
  130. “margin-trim” as a Best Practice? · ·
  131. Positioning Anchored Popovers · · ,
  132. CSS! CSS! CSS! · · ,
  133. The Continuing Tragedy of CSS: Thoughts from CSS Day 2023 · · ,
  134. How to Highlight Required and Optional Form Fields · · , , ,
  135. Bottom Sheets: Definition and UX Guidelines · · , , ,
  136. You Can Stop Using “user-scalable=no” and “maximum-scale=1” in Viewport Meta Tags Now · · , , ,
  137. Design Under Constraints: Challenges, Opportunities, and Practical Strategies · · ,
  138. Modern CSS for Dynamic Component-Based Architecture · · , ,
  139. That’s Not How I Wrote CSS Three Years Ago · · , ,
  140. Shining Light on the Shadow DOM · · , ,
  141. Liven Up Your Websites With Scroll-Driven Animations and View Transitions · · , , , ,
  142. Best Animation Libraries for React · · , , ,
  143. CSS Containers, What Do They Know? · · , ,
  144. Internet Explorer: The 1st Browser to Support CSS · · , , , , , ,
  145. An Introduction to DevOps · · ,
  146. State of the CSS Community · · , ,
  147. Sticky Content: Focus in View · · , , ,
  148. The CSS “overscroll‑behavior” Property Can Be Used to Disable Default Browser Gestures · · ,
  149. No, “AI” Will Not Fix Accessibility · · ,
  150. Style Recalculation Secrets They Don’t Want You to Know · · , , ,
  151. The Universal Focus State · · , ,
  152. Why Doesn’t CSS Have Scope? · · , ,
  153. Must Know JavaScript API—IndexedDB API · · , , ,
  154. Are Simple Websites Better for Business? · · ,
  155. 48 Laws, Rules, and Principles of Web Development · · , ,
  156. Chrome DevTools Tips: Styles Pane and Elements Panel · · , , , ,
  157. Before Your Next Frontend Pull Request, Use This Checklist · · , , , , , ,
  158. Best Practices for Container Queries · · , ,
  159. Testing Sites and Apps With Blind Users: A Cheat Sheet · · , , , , , ,
  160. Designing a Scalable Backend in Node.js · · , ,
  161. Assume the Position—a Labelling Story · · , ,
  162. Be Careful With “ch” Units · · ,
  163. Modern CSS in Real Life · ·
  164. Reducing Complexity in Front End Development · · , , ,
  165. Exploring Universal and Cognitive-Friendly UX Design Through Pivot Tables and Grids · · ,
  166. Styling Scrollbars · · ,
  167. RSC from Scratch: Server Components · · , ,
  168. What’s New in CSS · · , ,
  169. Tokens Are the Most Valuable Artifact a Design System Can Provide · · ,
  170. Angular at Google I/O 2023 · · , ,
  171. The Ultimate Guide to Writing Technical Blog Posts · · , ,
  172. Accessibility and Artificial Intelligence · · ,
  173. Accessible Rich Internet Applications (WAI-ARIA) 1.2 · · , ,
  174. Accessibility Testing—Pay Attention to the Details · · ,
  175. An Introduction to Debugging in Node.js · · , ,
  176. Primitive Objects in JavaScript: When to Use Them · · ,
  177. Is React Having An Angular.js Moment? · · ,
  178. One More Thing—Apple’s Push on Web Apps on macOS · · ,
  179. The Problem With Automatically Focusing the First Input and What to Do Instead · · , , ,
  180. New Job? Negotiate as If Your Life Depends on It · ·
  181. How to Detect Unnecessary Renderings of DOM Elements in Your Web App to Improve Performance · · , , , , ,
  182. No Single Metric Captures Productivity · · ,
  183. wasmati: You Should Write Your WebAssembly in TypeScript · · , ,
  184. Every Design Team Needs Writers · · ,
  185. How Chrome Achieved High Scores on Three Browser Benchmarks · · , , ,
  186. WCAG 2.2 Misses Mark on Defining Visible Focus · · , , ,
  187. The Many Ways to Select the n-th Character from a String · ·
  188. How AI Can Make Software More Intuitive · · ,
  189. Do Not Drop Sass for CSS · · , ,
  190. An Introduction to “@ scope” in CSS · · , ,
  191. New CSS Color Spaces and Functions in All Major Engines · · , , , ,
  192. How We Created an Accessible, Scalable Color Palette · · , , , ,
  193. Announcing TypeScript 5.1 · · ,
  194. Asynchronous JavaScript for Beginners · ·
  195. Watch Transitions in Slow Motion in Chrome’s DevTools · · , , , ,
  196. The Context Dilemma · · ,
  197. Accessible Components: The Hamburger Menu · · , ,
  198. Semantic Code in HTML: What Is It and Does It Still Matter? · · ,
  199. Why We Should Stop Using JavaScript According to Douglas Crockford · · ,
  200. Performance Is Not a Checklist · · , ,
  201. A Practical Guide to Deploying a Complex, Production-Level, Three-Tier Architecture on AWS · · , , , ,
  202. Advanced Form Control Styling With “selectmenu” and Anchoring API · · , ,
  203. Quick Tip: Shipping Resilient CSS Components · · , , ,
  204. Some Things I Learnt from Working on Big Frontend Codebases · · ,
  205. Presentational Colors · · ,
  206. Design Systems: A Curated List for Today’s UI/UX Designers · · , , ,
  207. Accessibility Audits for All · · , ,
  208. security.txt Now Mandatory for Dutch Government Websites · · ,
  209. Re-Evaluating “px” vs. “em” in Media Queries · · , , ,
  210. Token Operations · ·
  211. New to the Web Platform in May · · , , , , , , , ,
  212. Is There a Viable Animated GIF Alternative Yet or What? · · ,
  213. Watch Out for Layout Shifts With “ch” Units · · , ,
  214. Linting Defensive and Logical CSS With Stylelint Plugins · · , , , ,
  215. How Blink Invalidates Styles When “:has()” [Is] in Use · · , , ,
  216. Release Notes for Safari Technology Preview 171 · · , , ,
  217. 21 Awesome Web Features You’re Not Using Yet · · , , ,
  218. Cracking the Theme Switcher and Dark Mode · · , ,
  219. An Introduction to JavaScript Proxies · · ,
  220. Hands on With the Node.js Test Runner · · ,
  221. The Art of Code Review · · , ,
  222. I Think I Finally “Get” JS Objects · · ,
  223. What Is Personalization? · · ,
  224. Announcing the Second Compute Pressure Origin Trial · · , , ,
  225. The Double-Edged Sword of Design Systems · · ,
  226. Don’t Meddle With User Input · · ,
  227. 10 Incident Management Best Practices · · , ,
  228. Sass-Like Nesting in Native CSS · · , , ,
  229. Mastering CSS Blend Modes · · ,
  230. The Optimization Sinkhole · · ,
  231. How Screen-Reader Users Type on and Control Mobile Devices · · , , , , ,
  232. The Problem With Nested Fieldsets and How to Avoid Them · · , , ,
  233. Why Does “👩🏾‍🌾” Have a Length of 7 in JavaScript? · · ,
  234. Plain Old JavaScript and the DOM · · ,
  235. WordPress Turns 20 · ·
  236. When to Use Plain Text or Images Instead of MathML · · , ,
  237. Understanding the Importance of Encoding · ·
  238. We Need to Talk About How We Talk About Accessibility · · , ,
  239. Designing a Better Design Handoff File in Figma · · , ,
  240. Supper Club × Bramus Van Damme on CSS · · , ,
  241. How to Draw Any Regular Shape With Just One JavaScript Function · · , ,
  242. A Practical Overview on Architecture Decision Records (ADR) · · , ,
  243. Brief Note on Popovers With Dialogs · · , , , ,
  244. “display: contents” Considered Harmful · · ,
  245. Levelling Up Accessibility Skills in Your Organisation · · ,
  246. Two Things That Are Not Great About OKLCH · · ,
  247. Seven Lessons from 7 Years Designing Systems · · ,
  248. Deploying AVIF for More Responsive Websites · · , ,
  249. The Yellow Fade Technique With Modern CSS Using “@ starting-style” · · ,
  250. Responsive CSS Layout Grids Without Media Queries · · , ,