Frontend Dogma

News and Tools for Frontend Development (22)

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

  1. Getting Started With CSS Animations · · , ,
  2. How to Use “Promise.any()” · · , ,
  3. Why Are Hyperlinks Blue? · · ,
  4. Embracing Asymmetrical Design and Overcoming the Harmful Effects of “text-overflow: ellipsis” in CSS · · ,
  5. jsc: My New Best Friend · · ,
  6. Flexbox or CSS Grid? How to Make Layout Decisions That Make Sense · · , , ,
  7. Scrollbar Reflowing · · , ,
  8. 8 Fundamental Principles of Effective Web Design · ·
  9. Key Data Structures and Their Roles in RenderingNG · · , , , ,
  10. React JS—the Confusing Parts · · ,
  11. HTTP/3: Performance Improvements · · , ,
  12. 5 Ways to Undo Mistakes With Git · · , ,
  13. 4 Important Differences Between Regular and Arrow Functions · · , ,
  14. How I Experience Web Today · · ,
  15. Using the Platform · ·
  16. 6 CSS Shorthand Properties to Improve Your Web Application · · ,
  17. Bootstrapping a Node.js TypeScript API: Routing, Middleware, and Custom Types and Errors Modules · · , , , , ,
  18. Accessibility from the Ground Up · ·
  19. UI Cheat Sheet: Spacing Friendships · · , ,
  20. What’s on the Menu? · · ,
  21. I Give You Feedback on Your Blog Post Draft but You Don’t Send It to Me · · ,
  22. How to Calculate REMs from Pixels · · ,
  23. I Tried Angular as a React Developer: Here Are 6 Things I Like About It · · , ,
  24. Truthy and Falsy: When All Is Not Equal in JavaScript · ·
  25. Web Accessibility Checklist · · , ,
  26. Top 9 Lessons Learned in 12 Years as a Software Developer · · ,
  27. One Favicon to Rule Them All · · , ,
  28. Building the Same App 5 Times · · , , , , ,
  29. ARIA Spec for the Uninitiated · · , ,
  30. Level Up Your CSS Linting Using Stylelint · · , ,
  31. State Management in Svelte Applications · · ,
  32. Using CSS Module Scripts to Import Stylesheets · · , ,
  33. What’s New in Bootstrap 5 · · ,
  34. CSS Grid Tooling in DevTools · · , , , , ,
  35. Does Shadow DOM Improve Style Performance? · · , , ,
  36. You Don’t Know “useEffect” · ·
  37. Practical Uses of CSS Math Functions: “calc”, “clamp”, “min”, “max” · · , ,
  38. Reviewing a Design for Accessibility · · , ,
  39. Decoding AVIF: Deep Dive With Cats and imgproxy · · ,
  40. A Guide to Designing Accessible, WCAG-Compliant Focus Indicators · · , , , ,
  41. Big O, Code Efficiency Analysis · · ,
  42. Breaking the Web Forward · · ,
  43. Accessible Design Systems: Look Good While Doing Good · · ,
  44. How to Test for Accessibility With Users at Every Design Stage · · , ,
  45. Static vs. Dynamic vs. Jamstack: Where’s the Line? · · , , ,
  46. CSS “accent-color” · · ,
  47. Accessible Contrast Ratios and A-Levels Explained · · , ,
  48. “<Lazy>” Rendering in Vue to Improve Performance · · , , ,
  49. Principles by Design · · ,
  50. The Complete Guide to HTML Forms and Constraint Validation · · , , ,
  51. “return await promise” vs. “return promise” in JavaScript · · , ,
  52. Adding 100 Underline/Overlay Animations: The Impressive CSS Collection · · ,
  53. The State of Mobile First and Desktop First · · , ,
  54. Google vs. the Web · · ,
  55. How Writing Can Advance Your Career as a Developer · · ,
  56. HTTP/3 from A to Z: Core Concepts · · , ,
  57. JavaScript Development: Making a Web Worker Optional · · ,
  58. The World of CSS Transforms · ·
  59. A Performance-Focused Workflow Based on Google Tools · · , , ,
  60. Exploring the CSS Paint API: Image Fragmentation Effect · · , , ,
  61. Next-Level List Bullets With CSS “::marker” · · ,
  62. Uploading Multiple Files With Fetch · · , ,
  63. Pixelart and the “image-rendering” Paradox · · , ,
  64. Browsers and Representation · ·
  65. On the “<dl>” · ·
  66. A Guide to Accessible Digital UX Design · · , , ,
  67. Inclusive Usability Testing: The Benefits of Inclusive Design · · , ,
  68. Sustainable Web Design, an Excerpt · ·
  69. Visualizing a Codebase · · ,
  70. Why Are We Talking So Much About Design Leadership? · · ,
  71. React Children and Iteration Methods · ·
  72. Using CSS Shapes for Interesting User Controls and Navigation · · ,
  73. What Are Accessibility Overlays Good For? · · ,
  74. Refresher on JavaScript Callbacks and Promises · · ,
  75. CSS Nesting, Specificity, and You · · , ,
  76. Accessibility Testing With Storybook · · , ,
  77. Writing Great Alt Text: Emotion Matters · · , , ,
  78. A Deep Dive on Skipping to Content · · , ,
  79. Building the Perfect GitHub CI Workflow for Your Frontend Team · · ,
  80. Web Accessibility Myths: Debunking 7 Common Misconceptions · ·
  81. Using localStorage With React Hooks · · , ,
  82. What Devs Need · · , ,
  83. npm Security Best Practices · · , ,
  84. How to Build Resilient JavaScript UIs · · , ,
  85. How to Use “Promise.allSettled()” · · , ,
  86. Introduction to TCP: Transmission Control Protocol · · , ,
  87. Mitigating User Errors · · ,
  88. Refactoring CSS: Strategy, Regression Testing, and Maintenance · · , , , , ,
  89. The (Most Comprehensive) JavaScript Design Principles Guide · · , , ,
  90. 2021 Scroll Survey Report · · , ,
  91. How We Reduced Next.js Page Size by 3.5× and Achieved a 98 Lighthouse Score · · , , , ,
  92. Why It’s Okay for Web Components to Use Frameworks · · ,
  93. Chrome DevTools: Better Accessibility Inspection With the Source Order Viewer · · , , , , ,
  94. Avoid the Most Common 18 Mistakes to Make Your UI/UX Design Better · · , ,
  95. 101 Digital Accessibility Tips and Tricks · · ,
  96. CSS Architecture and Performance in Micro Frontends · · , , ,
  97. Optimizing Your Own Performance as a Designer · · ,
  98. There Is No Such Thing as a CSS Absolute Unit · · ,
  99. How to Stay Focused as a Self-Taught Frontend Web Developer · · , , ,
  100. 5 Git Tips to Level Up Your Workflow · · , ,
  101. Best Practices for Tags and Tag Managers · · , ,
  102. Architecting and Scaffolding a TypeScript and Express API · · , ,
  103. Learnings from a WebPageTest Session on CSS-Tricks · ·
  104. Using Absolute Value, Sign, Rounding, and Modulo in CSS Today · ·
  105. Safari Isn’t Protecting the Web, It’s Killing It · · , , ,
  106. How to Hand Off Accessible Designs to Developers? · · , ,
  107. Creating an Accessible Dialog from Scratch · · ,
  108. CSS Logical Properties and Values · · ,
  109. Global vs. Local Styling in Next.js · · , ,
  110. Thinking About the Cut-Out Effect: CSS or SVG? · · , , ,
  111. Is It Time to Ditch the Design Grid? · · ,
  112. When You Cannot Run Away from Using Tables on Mobile · · , , ,
  113. Webhooks Tutorial: The Beginner’s Guide to Working With Webhooks · · , ,
  114. Accessible Design from the Get-Go · ·
  115. My First CSS—What I Wish I Knew About CSS When Starting Out as a Frontender · · ,
  116. Takeaways from the 2021 State of Digital Accessibility Report · · ,
  117. UX Principles That Include Cognitive Accessibility · · , ,
  118. Getting Started With React “useContext” Hook and React Context · · , ,
  119. Overview of the RenderingNG Architecture · · , , , , ,
  120. Break HTML Content into Newspaper-Like Columns Using Pure CSS · · ,
  121. Four Factors in UX Maturity · ·
  122. It Is Time to Ditch the Title “Evangelist” from Accessibility · ·
  123. You Don’t Need React for Building Websites · ·
  124. Complete Introduction to CSS Flexbox · · , ,
  125. 5 UI Tips to Become a Better Front-End Developer · · , ,
  126. Accessibility Strategy for Product Management · · , ,
  127. How to Eliminate Render-Blocking Resources: a Deep Dive · · , ,
  128. The Vanishing Designer · · ,
  129. Using Google Drive as a CMS · · ,
  130. What We Learned About Accessibility by Scanning More Than 2 Million Federal .gov Web Pages · ·
  131. Custom Properties and “@ property” · · ,
  132. Definition of Done vs. Acceptance Criteria · · , , ,
  133. Simple Monorepos Via npm Workspaces and TypeScript Project References · · , ,
  134. Why the WCAG Colour Contrast Ratio Doesn’t Always Seem to Work · · , , ,
  135. A Visual Guide to React Rendering—It Always Re-Renders · · ,
  136. From a Colourblind Designer to the World: Please Stop Using Red and Green Together · · ,
  137. The Accessibility Stalemate · ·
  138. Maintaining End-to-End Quality With Visual Testing · · , ,
  139. Practical Use Cases for Scroll-Linked Animations in CSS With Scroll Timelines · · ,
  140. An Introduction to Frameworkless Web Components · · , , ,
  141. 6 Useful Frontend Techniques That You May Not Know About · · , , ,
  142. The Ultimate Cheat Sheet List for Web Developers · · , , ,
  143. Journey of a Web Page—How Browsers Work · · ,
  144. Designing for Information Density · ·
  145. Why Has User Experience Design Become Legal Experience Design? · · , ,
  146. The State of Developer Ecosystem 2021 · ·
  147. What I Learned from “Software Engineering at Google” · ·
  148. Accessibility of the “Section” Element · · ,
  149. Content Accessibility Fact Sheet · · ,
  150. Designing for the Unexpected · · , ,
  151. There’s No Such Thing as Fully Automated Web Accessibility · · ,
  152. What Is Tree Shaking? · · , ,
  153. For Developers, Apple’s Safari Is Crap and Outdated · · , ,
  154. Hobson’s Browser—How Apple, Facebook, and Google Broke the Mobile Browser Market by Silently Undermining User Choice · · , , , , ,
  155. How to Get a Pixel-Perfect, Linearly Scaled UI · · , , ,
  156. The Performance Effects of Too Much Lazy-Loading · · , ,
  157. Angular Is Costing Companies Billions · ·
  158. The 3-Second Frontend Developer Test · · , , ,
  159. The Ultimate Guide to Browser-Side Storage · · , , ,
  160. What’s the Difference Between the Alignment Values of “start”, “flex-start”, and “self-start”? · ·
  161. Build Complex CSS Transitions Using Custom Properties and “cubic-bezier()” · · , , ,
  162. I’m Changing How I Review Code · · ,
  163. The Most Important Lessons I’ve Learned from Senior Software Engineers · · ,
  164. An Unreasonably Long Introduction to ARIA (With Example Implementation) · · , , , ,
  165. Detecting Media Query Support in CSS and JavaScript · · , , ,
  166. How to Migrate from jQuery to Next.js · · , , ,
  167. Gridless Design · · , ,
  168. Refactoring CSS: Introduction · · , , ,
  169. TypeScript Interfaces: A Quick Guide to Help You Get Started · · ,
  170. What People Should Know Before Writing Articles or Creating Products About Accessibility · · ,
  171. Freelance React Developer Checklist · · ,
  172. Image Descriptions: A Human Technique That Robots Can’t Grasp · · ,
  173. How to Convert Arrays to Human-Readable Lists in JavaScript · · , , ,
  174. Making a Strong Case for Accessibility · ·
  175. The Document Outline · · ,
  176. Creating Accessible CSS Art · · , ,
  177. Performance Design: The Illusion of Speed · · ,
  178. The Large, Small, and Dynamic Viewports · · , ,
  179. The Numeric Colour Palettes in Modern Web Frameworks Explained · · , ,
  180. Five Ways to Include D/Deaf Users in Your Designs · · ,
  181. TypeScript and Native ESM on Node.js · · , ,
  182. ARIA in HTML · · , ,
  183. Accessibility and Inclusivity: Distinctions in Experience Design · · , ,
  184. The Dilemma of Naming Font Size Variables · · , ,
  185. How Does Node.js Load Its Built-In/Native Modules? · · , ,
  186. How to Use “Promise.all()” · · , ,
  187. Using HSL Colors in CSS · · ,
  188. Where Did This Interaction Come From?—A Brief History of Interaction Design · · ,
  189. Basics of JavaScript Test Driven Development (TDD) With Jest · · , ,
  190. Feature Checklists Are Not Enough: How to Avoid Making Bad Software · · , , ,
  191. “export default thing” Is Different to “export { thing as default }” · ·
  192. Evaluating Color and Contrast—How Hard Can It Be? · · , ,
  193. Short Note on Skip Links With Sticky Headers · · , ,
  194. Accessibility and SEO · · , ,
  195. It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them · · ,
  196. Towards Richer Colors on the Web · · ,
  197. 10 Figma Best Practices to 10× Your Workflow · · , , ,
  198. The Internet Is Rotting · · ,
  199. When a Click Is Not Just a Click · ·
  200. Detecting Hover-Capable Devices · ·
  201. How We Built React Components for Any Front End · · , ,
  202. Encoding Data for POST Requests · · , ,
  203. 9 Tips to Help You Ace a Whiteboard Interview · · , ,
  204. The State of Web Workers in 2021 · · ,
  205. Use the “i” Element, and Use It Appropriately · · ,
  206. CSS Frameworks in Vogue, but Don’t Forget Style Fundamentals · · , , ,
  207. Good News: Google No Longer Requires Publishers to Use the AMP Format · · , ,
  208. The Most Popular Design Thinking Strategy Is BS · · ,
  209. Resource Inlining in JavaScript Frameworks · · , , ,
  210. Screen Readers: Hearing the Unseen · · , , ,
  211. Tip: Don’t Preprocess What You Can Design Token · · ,
  212. My Journey from a Novice to a Front-End Engineer · ·
  213. I Regret Being a Hipster in Tech · ·
  214. timefind · · , ,
  215. All You Need Is 5 Fonts · · , ,
  216. Container Queries and the Future of CSS · · , ,
  217. Debugging JavaScript and Front-End · · , ,
  218. JavaScript Frameworks and the Lost Art of HTML · · , ,
  219. Using CSS to Enforce Accessibility · · ,
  220. Building a Responsive Layout With CSS Grid and Container Queries · · , , , ,
  221. Making the Web—Faster · · , , ,
  222. No Code Reviews by Default · ·
  223. Accessibility in React · · ,
  224. React Architecture: How to Structure and Organize a React Application · · , ,
  225. The True Cost of a Redesign · · ,
  226. Craft Good Questions for Usability Tests · · ,
  227. Custom Scrollbars in CSS · ·
  228. Demystifying Styled Components · · , ,
  229. Sorting Colors in JavaScript · · , ,
  230. What’s New in ES2021 · · , ,
  231. A Framework for Building Open Graph Images · · ,
  232. RenderingNG—Ready for the Next Generation of Web Content · · , , , ,
  233. Keeping It Consistent: Design Tokens · · , ,
  234. Blogged Answers: The Evolution of Redux Testing Approaches · · , , ,
  235. Organize Your CSS Declarations Alphabetically · · ,
  236. How to Use Dynamic Imports in JavaScript · · ,
  237. Updating a 25-Year-Old Website · ·
  238. How Apple Changed the Way We Navigate—Forever · · , ,
  239. OMG, SVG Favicons FTW! · · , , ,
  240. Optical Size, the Hidden Superpower of Variable Fonts · · , ,
  241. A Complete Guide to Accessibility Tooling · · , ,
  242. NPM Global Audit · · , , , ,
  243. Shut Up, Old Man… · ·
  244. Understanding and Preventing Common Security Vulnerabilities · ·
  245. Everyday Accessibility · ·
  246. Dart Basics · · , ,
  247. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · , ,
  248. Provided “As Is,” Without Warranty of Any Kind · · , ,
  249. Regular Expressions (RegEx) in Google Search Console · · , ,
  250. Half the Size of Images by Optimising for High Density Displays · · , ,