Frontend Dogma

News and Tools for Frontend Development (14)

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

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