Frontend Dogma

News and Tools for Frontend Development (25)

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

  1. The (Most Comprehensive) JavaScript Design Principles Guide · · , , ,
  2. 2021 Scroll Survey Report · · , ,
  3. How We Reduced Next.js Page Size by 3.5× and Achieved a 98 Lighthouse Score · · , , , ,
  4. Why It’s Okay for Web Components to Use Frameworks · · ,
  5. Chrome DevTools: Better Accessibility Inspection With the Source Order Viewer · · , , , , ,
  6. Avoid the Most Common 18 Mistakes to Make Your UI/UX Design Better · · , ,
  7. 101 Digital Accessibility Tips and Tricks · · ,
  8. CSS Architecture and Performance in Micro Frontends · · , , ,
  9. Optimizing Your Own Performance as a Designer · · ,
  10. There Is No Such Thing as a CSS Absolute Unit · · ,
  11. How to Stay Focused as a Self-Taught Frontend Web Developer · · , , ,
  12. 5 Git Tips to Level Up Your Workflow · · , ,
  13. Best Practices for Tags and Tag Managers · · , ,
  14. Architecting and Scaffolding a TypeScript and Express API · · , ,
  15. Learnings from a WebPageTest Session on CSS-Tricks · ·
  16. Using Absolute Value, Sign, Rounding, and Modulo in CSS Today · ·
  17. Safari Isn’t Protecting the Web, It’s Killing It · · , , ,
  18. How to Hand Off Accessible Designs to Developers? · · , ,
  19. Creating an Accessible Dialog from Scratch · · ,
  20. CSS Logical Properties and Values · · ,
  21. Global vs. Local Styling in Next.js · · , ,
  22. Thinking About the Cut-Out Effect: CSS or SVG? · · , , ,
  23. Is It Time to Ditch the Design Grid? · · ,
  24. When You Cannot Run Away from Using Tables on Mobile · · , , ,
  25. Webhooks Tutorial: The Beginner’s Guide to Working With Webhooks · · , ,
  26. Accessible Design from the Get-Go · ·
  27. My First CSS—What I Wish I Knew About CSS When Starting Out as a Frontender · · ,
  28. Takeaways from the 2021 State of Digital Accessibility Report · · ,
  29. UX Principles That Include Cognitive Accessibility · · , ,
  30. Getting Started With React “useContext” Hook and React Context · · , ,
  31. Overview of the RenderingNG Architecture · · , , , , ,
  32. Break HTML Content into Newspaper-Like Columns Using Pure CSS · · ,
  33. Four Factors in UX Maturity · ·
  34. It Is Time to Ditch the Title “Evangelist” from Accessibility · ·
  35. You Don’t Need React for Building Websites · ·
  36. Complete Introduction to CSS Flexbox · · , ,
  37. 5 UI Tips to Become a Better Front-End Developer · · , ,
  38. Accessibility Strategy for Product Management · · , ,
  39. How to Eliminate Render-Blocking Resources: a Deep Dive · · , ,
  40. The Vanishing Designer · · ,
  41. Using Google Drive as a CMS · · ,
  42. What We Learned About Accessibility by Scanning More Than 2 Million Federal .gov Web Pages · ·
  43. Custom Properties and “@ property” · · ,
  44. Definition of Done vs. Acceptance Criteria · · , , ,
  45. Simple Monorepos Via npm Workspaces and TypeScript Project References · · , ,
  46. Why the WCAG Colour Contrast Ratio Doesn’t Always Seem to Work · · , , ,
  47. A Visual Guide to React Rendering—It Always Re-Renders · · ,
  48. From a Colourblind Designer to the World: Please Stop Using Red and Green Together · · ,
  49. The Accessibility Stalemate · ·
  50. Maintaining End-to-End Quality With Visual Testing · · , ,
  51. Practical Use Cases for Scroll-Linked Animations in CSS With Scroll Timelines · · ,
  52. An Introduction to Frameworkless Web Components · · , , ,
  53. 6 Useful Frontend Techniques That You May Not Know About · · , , ,
  54. The Ultimate Cheat Sheet List for Web Developers · · , , ,
  55. Journey of a Web Page—How Browsers Work · · ,
  56. Designing for Information Density · ·
  57. Why Has User Experience Design Become Legal Experience Design? · · , ,
  58. The State of Developer Ecosystem 2021 · ·
  59. What I Learned from “Software Engineering at Google” · ·
  60. Accessibility of the “Section” Element · · ,
  61. Content Accessibility Fact Sheet · · ,
  62. Designing for the Unexpected · · , ,
  63. There’s No Such Thing as Fully Automated Web Accessibility · · ,
  64. What Is Tree Shaking? · · , ,
  65. For Developers, Apple’s Safari Is Crap and Outdated · · , ,
  66. Hobson’s Browser—How Apple, Facebook, and Google Broke the Mobile Browser Market by Silently Undermining User Choice · · , , , , ,
  67. How to Get a Pixel-Perfect, Linearly Scaled UI · · , , ,
  68. The Performance Effects of Too Much Lazy-Loading · · , ,
  69. Angular Is Costing Companies Billions · ·
  70. The 3-Second Frontend Developer Test · · , , ,
  71. The Ultimate Guide to Browser-Side Storage · · , , ,
  72. What’s the Difference Between the Alignment Values of “start”, “flex-start”, and “self-start”? · ·
  73. Build Complex CSS Transitions Using Custom Properties and “cubic-bezier()” · · , , ,
  74. I’m Changing How I Review Code · · ,
  75. The Most Important Lessons I’ve Learned from Senior Software Engineers · · ,
  76. An Unreasonably Long Introduction to ARIA (With Example Implementation) · · , , , ,
  77. Detecting Media Query Support in CSS and JavaScript · · , , ,
  78. How to Migrate from jQuery to Next.js · · , , ,
  79. Gridless Design · · , ,
  80. Refactoring CSS: Introduction · · , , ,
  81. TypeScript Interfaces: A Quick Guide to Help You Get Started · · ,
  82. What People Should Know Before Writing Articles or Creating Products About Accessibility · · ,
  83. Freelance React Developer Checklist · · ,
  84. Image Descriptions: A Human Technique That Robots Can’t Grasp · · ,
  85. How to Convert Arrays to Human-Readable Lists in JavaScript · · , , ,
  86. Making a Strong Case for Accessibility · ·
  87. The Document Outline · · ,
  88. Creating Accessible CSS Art · · , ,
  89. Performance Design: The Illusion of Speed · · ,
  90. The Large, Small, and Dynamic Viewports · · , ,
  91. The Numeric Colour Palettes in Modern Web Frameworks Explained · · , ,
  92. Five Ways to Include D/Deaf Users in Your Designs · · ,
  93. TypeScript and Native ESM on Node.js · · , ,
  94. ARIA in HTML · · , ,
  95. Accessibility and Inclusivity: Distinctions in Experience Design · · , ,
  96. The Dilemma of Naming Font Size Variables · · , ,
  97. How Does Node.js Load Its Built-In/Native Modules? · · , ,
  98. How to Use “Promise.all()” · · , ,
  99. Using HSL Colors in CSS · · ,
  100. Where Did This Interaction Come From?—A Brief History of Interaction Design · · ,
  101. Feature Checklists Are Not Enough: How to Avoid Making Bad Software · · , , ,
  102. Basics of JavaScript Test Driven Development (TDD) With Jest · · , , ,
  103. “export default thing” Is Different to “export { thing as default }” · ·
  104. Evaluating Color and Contrast—How Hard Can It Be? · · , ,
  105. Short Note on Skip Links With Sticky Headers · · , ,
  106. Accessibility and SEO · · , ,
  107. It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them · · ,
  108. Towards Richer Colors on the Web · · ,
  109. 10 Figma Best Practices to 10× Your Workflow · · , , ,
  110. The Internet Is Rotting · · ,
  111. When a Click Is Not Just a Click · ·
  112. Detecting Hover-Capable Devices · ·
  113. How We Built React Components for Any Front End · · , ,
  114. Encoding Data for POST Requests · · , ,
  115. 9 Tips to Help You Ace a Whiteboard Interview · · , ,
  116. The State of Web Workers in 2021 · · ,
  117. Colorblind Accessibility Manifesto · · , , ,
  118. Use the “i” Element, and Use It Appropriately · · ,
  119. Good News: Google No Longer Requires Publishers to Use the AMP Format · · , ,
  120. The Most Popular Design Thinking Strategy Is BS · · ,
  121. Resource Inlining in JavaScript Frameworks · · , , ,
  122. Screen Readers: Hearing the Unseen · · , , ,
  123. Tip: Don’t Preprocess What You Can Design Token · · ,
  124. CSS Frameworks in Vogue, but Don’t Forget Style Fundamentals · · , , ,
  125. My Journey from a Novice to a Front-End Engineer · ·
  126. I Regret Being a Hipster in Tech · ·
  127. timefind · · , ,
  128. All You Need Is 5 Fonts · · , ,
  129. Container Queries and the Future of CSS · · , ,
  130. Debugging JavaScript and Front-End · · , ,
  131. JavaScript Frameworks and the Lost Art of HTML · · , ,
  132. Using CSS to Enforce Accessibility · · ,
  133. Building a Responsive Layout With CSS Grid and Container Queries · · , , , ,
  134. Making the Web—Faster · · , , ,
  135. No Code Reviews by Default · ·
  136. Accessibility in React · · ,
  137. React Architecture: How to Structure and Organize a React Application · · , ,
  138. The True Cost of a Redesign · · ,
  139. Craft Good Questions for Usability Tests · · ,
  140. Custom Scrollbars in CSS · ·
  141. Demystifying Styled Components · · , ,
  142. Sorting Colors in JavaScript · · , ,
  143. What’s New in ES2021 · · , ,
  144. A Framework for Building Open Graph Images · · ,
  145. RenderingNG—Ready for the Next Generation of Web Content · · , , , ,
  146. Keeping It Consistent: Design Tokens · · , ,
  147. Blogged Answers: The Evolution of Redux Testing Approaches · · , , ,
  148. Organize Your CSS Declarations Alphabetically · · ,
  149. How to Use Dynamic Imports in JavaScript · · ,
  150. Updating a 25-Year-Old Website · ·
  151. How Apple Changed the Way We Navigate—Forever · · , ,
  152. OMG, SVG Favicons FTW! · · , , ,
  153. Optical Size, the Hidden Superpower of Variable Fonts · · , ,
  154. A Complete Guide to Accessibility Tooling · · , ,
  155. NPM Global Audit · · , , , ,
  156. Shut Up, Old Man… · ·
  157. Understanding and Preventing Common Security Vulnerabilities · ·
  158. Everyday Accessibility · ·
  159. Dart Basics · · , ,
  160. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · , ,
  161. Provided “As Is,” Without Warranty of Any Kind · · , ,
  162. Regular Expressions (RegEx) in Google Search Console · · , ,
  163. Half the Size of Images by Optimising for High Density Displays · · , ,
  164. Serving Sharp Images to High Density Screens · · ,
  165. The Art of Frontend Engineering · ·
  166. Adding Shadows to SVG Icons With CSS and SVG Filters · · , , ,
  167. React Cheat Sheet (Updated June 2021) · · ,
  168. How to Center Anything in CSS Using Flexbox and Grid · · , ,
  169. Let’s Learn About Aspect Ratio in CSS · ·
  170. The Ultimate CSS Flexbox Cheat Sheet With Examples · · , , ,
  171. An Interactive Guide to CSS Transitions · · , ,
  172. Micro-Expressions in User Testing: When Users Reveal Their True Emotional States · · ,
  173. Ready-Made Counter Styles · · ,
  174. Why Validate? · · , , , ,
  175. Meet :has, a Native CSS Parent Selector (and More) · ·
  176. Building a Color Scheme · · , , ,
  177. Improving the UX of Your Design System · · , ,
  178. Reasons Why Bugs Might Feel “Impossible” · · ,
  179. Component-Specific Design Tokens · · ,
  180. Accessible Overflow · · , ,
  181. An Accessibility Strategy · · ,
  182. What Can the HTTP Archive Tell Us About Largest Contentful Paint? · ·
  183. Using AVIF to Compress Images on Your Site · · , , ,
  184. Vue.js vs. React—Not Your Usual Comparison · · , , ,
  185. 10 Utility Functions for Working With Objects in JavaScript · · , ,
  186. A Little Book of Accessibility · ·
  187. JavaScript: Debouncing and Throttling · · , ,
  188. CSS System Colors · · ,
  189. Best Practices for Fonts · · , ,
  190. Open Source Insights · · , , , ,
  191. Getting Started With a Kanban Board: 6 Tips for Productive Work · · , , , ,
  192. CSS for Web Vitals · · , ,
  193. How to Fix Cumulative Layout Shift (CLS) Issues · · , ,
  194. Thoughts for the Aging Web Developer · ·
  195. Embracing Design Constraints · ·
  196. The Hidden World of “aria-hidden” · · ,
  197. Why Accessibility Overlays Hurt More Than Help · · ,
  198. Disabling a Link · · , ,
  199. What Makes a Great Component Library? · · ,
  200. How to Build an Image Comparison Slider · · , ,
  201. Accessible Web Forms · · , ,
  202. A Thorough Analysis of CSS-in-JS · · , ,
  203. History of Web Browser Engines from 1990 Until Today · · , ,
  204. Writing Better Regular Expressions in PHP · · , ,
  205. 25 Years of CSS · · ,
  206. Your Design System Is Actually a Product—Treat It Like One · ·
  207. Access Guide · · , ,
  208. CSS Container Queries: Use Cases and Migration Strategies · · ,
  209. Svelte for the Experienced React Dev · · ,
  210. A11y Audit Bookmarklets · · , , ,
  211. Professional Development Is a Choice · · ,
  212. Don’t Overabstract Your Components · · , ,
  213. Dark Patterns Tip Line · · , ,
  214. The New Responsive: Web Design in a Component-Driven World · · , ,
  215. Useful and Useless Code Comments · · ,
  216. How to Name Your Design System · · , ,
  217. We Need to Talk About WCAG · · ,
  218. 2021: 98% of the Top 100 U.S. Websites Use Invalid HTML · · , , ,
  219. Learn CSS · · ,
  220. The Button Cheat Sheet · · ,
  221. Theoretical Foundations for Server-Side Rendering and Static-Rendering · · , ,
  222. Container Queries in Web Components · · , ,
  223. Create Scripts in JavaScript With zx · · , ,
  224. Upgrade Your HTML III · · , , , ,
  225. A Complete Guide to Grid · · , ,
  226. Building a React Design System for Adoption and Scale · · ,
  227. Making Disabled Buttons More Inclusive · · ,
  228. Everything You Need to Know About A/B Testing · · ,
  229. Rethinking Component Libraries · ·
  230. Web Application Development: The Ultimate Guide (2021) · · ,
  231. Introduction to Using Dart in Flutter · · , ,
  232. A Primer on CSS Container Queries · · , ,
  233. Meet zx: A Better Way to Write Scripts With Node.js · · ,
  234. Introduction to HTTP Cookies · · , ,
  235. Custom Attributes Are Fast Good and Cheap · · ,
  236. How to Satisfy User Intent When Considering Search vs. Browse · · , , , ,
  237. Overreliance on Overlays Is Counter to Enculturation of Accessibility · · ,
  238. Is Vendor Prefixing Dead? · · ,
  239. Auditing Design Systems for Accessibility · · , , ,
  240. Using Hotwire to Build a Search Form With Minimal JavaScript · · , , ,
  241. Understanding Design Systems—Designing Component APIs · · , ,
  242. Designing Adaptive Components, Beyond Responsive Breakpoints · · , ,
  243. Better Onboarding: How to Prevent Codebase Overwhelm · · ,
  244. Immersive Content Strategy · · , ,
  245. Level Up Your Team Workflows With These Kanban Board Best Practices · · , ,
  246. Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit · · , , ,
  247. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors · · , , ,
  248. 21 Best Practices for a Clean React Project · · , ,
  249. Do You Need to Localize Your Website? · · , ,
  250. 136 Facts Every Web Dev Should Know Before They Burn Out and Turn to Landscape Painting or Nude Modelling · ·