Frontend Dogma

“2022” Archive (5)

  1. Bag Some AAA Wins Where You Can · · ,
  2. Custom ESM Loaders: Who, What, When, Where, Why, How ·
  3. The “Array.prototype.at()” Method in Vanilla JavaScript ·
  4. Optimizing Node.js Dependencies in AWS Lambda · · , , ,
  5. The Cost of Consistency in UI Frameworks · · ,
  6. What You Need to Know About ARIA and How to Fix Common Mistakes · · , , ,
  7. The Methods UX Professionals Use · · ,
  8. Applying SOLID Principles in React · · , , ,
  9. Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes · · , , , ,
  10. Building (or Rebuilding) a Website With Accessibility in Mind ·
  11. Forms in Modals: UX Case · · , ,
  12. Generating Accessibility Test Results for a Whole Website With Pa11y CI · · , ,
  13. A Look at Remix and the Differences With Next.js · · , , ,
  14. The Many Faces of Themeable Design Systems · · ,
  15. Technical Writing for Developers · · ,
  16. Statements vs. Expressions · · ,
  17. Integer Math in JavaScript · · ,
  18. Guide to Trending Front-End Frameworks in 2022 · · , , , , , ,
  19. Fundamentals Matter ·
  20. 37 Easy Ways to Spice Up Your UI Designs · · ,
  21. JavaScript Obfuscation Techniques by Example · · , , ,
  22. The Ultimate Guide to Debugging Accessibility Issues · · , ,
  23. Working on a New Feature as a Senior Frontend Developer ·
  24. Figma Auto Layout = “display: flex” · · ,
  25. Choosing the Right Mindset to Design Complex Applications · · , ,
  26. Data Structure and Algorithms 102 · · ,
  27. Set JAWS Free! · · , , , ,
  28. The Future of CSS: Variable Units, Powered by Custom Properties · · , ,
  29. CSS Complexity: It’s Complicated · · ,
  30. Why the HTML Outlining Algorithm Was Removed from the Spec—the Truth Will Shock You! · · , ,
  31. Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · , , ,
  32. Make It Accessible · · ,
  33. The CSS Cascade, a Deep Dive · · , ,
  34. It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility Via Display Properties · · , , , ,
  35. An Accessibility-First Approach to Chart Visual Design · · ,
  36. Truly Portable Design Patterns · · ,
  37. The Hard Parts of Developer Advocacy (for Me) · · , ,
  38. The Joy of Variable Fonts: Getting Started on the Frontend · · , ,
  39. What Are Color Gamuts ·
  40. Captions: Humans vs. Artificial Intelligence: Who Wins? · · , , , ,
  41. Style With Stateful, Semantic Selectors · · ,
  42. The Ballad of Text Overflow · · ,
  43. The Case for Null in Design Systems ·
  44. Masonry? In CSS?! · · ,
  45. The Off by Default Web · · ,
  46. Inverted Media Queries and Breakpoints · · ,
  47. Executing Shell Commands from Node.js · · ,
  48. Consistency in UX Design: To What Extent Is “Best Practice” the Right Choice? · · , , ,
  49. Super-Helpful Tips When Working With Figma Component Properties · · , ,
  50. How to Make Text Improve User Experience: Insights into UX Writing · · , ,
  51. Two Levels of Customising “<selectmenu>” · · ,
  52. The Unlocked Possibilities of the “:has()” Selector · · ,
  53. Body Margin 8px · · ,
  54. Frontend Web Performance: The Essentials · · ,
  55. css-browser-support · · , , , ,
  56. Imagemin Guard · · , , , , , , , , ,
  57. Faster WordPress Rendering With 3 Lines of Configuration · · , , , ,
  58. Write Git Commit Messages That Your Colleagues Will Love ·
  59. Reimagining Front-End Web Development With htmx and Hyperscript · · ,
  60. Breaking Out of a Central Wrapper ·
  61. Web Development Is Like Assembling IKEA Furniture ·
  62. Best Practices for Images · · , ,
  63. 404 vs. 410—the Technical SEO Experiment · · , , ,
  64. The New Wave of React State Management · · , ,
  65. “That’s Not Accessible!” and Other Statements About Accessibility ·
  66. CSS Variable Secrets · · ,
  67. What the Hell Is “<!DOCTYPE html>”? ·
  68. What Every Newbie Developer Should Know ·
  69. Building Tabs in Web Components ·
  70. Farewell to HTML5Rocks · · , ,
  71. Thoughts on an Accessibility “Get Well” Plan · · , ,
  72. Working With the File System on Node.js · · , ,
  73. Are You Sure That’s a Number Input? ·
  74. Googlebot and the 15 MB Thing · · ,
  75. Style Queries ·
  76. What Do the Developers Do in the Last Week of the Sprint? · · , ,
  77. SPAs: Theory Versus Practice · · ,
  78. Demystifying the New Gatsby Framework · · ,
  79. A CLS Punishment for Progressive Enhancement? · · , ,
  80. UX Writing: Study Guide · · , , , ,
  81. Using JavaScript to Fill localStorage to Its Maximum Capacity · · ,
  82. A Previous Sibling Selector · · ,
  83. Why Use Sass? · · ,
  84. GA4 Is Being Blocked by Content Security Policy · · , , ,
  85. 4+ Years of Cracking Technical Interviews · · ,
  86. Missing Introduction to React · · ,
  87. Single Element Loaders: The Bars ·
  88. WCAG 2.1 AA Web Accessibility Checklist · · , ,
  89. Introduction to Defensive CSS · · ,
  90. Accessible Design Systems · · ,
  91. How We Designed an Accessible Color Palette from Scratch · · , , ,
  92. Everything You Need to Know About Web Performance (in 5 Minutes) · · , ,
  93. Getting Started With Vue Composables · · ,
  94. Stop the Screen Going to Sleep With JavaScript ·
  95. Managing Specificity With CSS Cascade Layers · · , ,
  96. Mastering “z-index” in CSS ·
  97. Can We Enterprise CSS Grid? · · , ,
  98. Apple Is Not Defending Browser Engine Choice · · , , ,
  99. 7 UX Laws You’re Probably Getting Wrong · · , ,
  100. 5 Useful CSS Properties That Get No Love · · ,
  101. 10 Incident Management Best Practices for Streamlined Operations · · , ,
  102. Style Scoping Versus Shadow DOM: Which Is Fastest? · · , , , , , ,
  103. In Defense of Blocks for Local Scopes · · ,
  104. In Defense of Blocks for Local Scopes II · · ,
  105. Please Remove That .git Folder · · ,
  106. “text-overflow: ellipsis” Considered Harmful · · ,
  107. Introducing Keyboard Navigation · · , ,
  108. What Would a Chromium-Only Web Look Like? · · , , , ,
  109. User Vulnerabilities in the Data Cycle · · , ,
  110. Looking Ahead—Insights from Jeffrey Zeldman and Eric Meyer · · , ,
  111. Different Ways to Write CSS in React · · ,
  112. Cascade Layers—There’s a Polyfill for That! · · , ,
  113. The Right Space Around Headings in Web Typography · · , ,
  114. What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? · · , , ,
  115. Svelte Origins: A JavaScript Documentary · · , ,
  116. How and When to Use the CSS “:has” Selector · · ,
  117. Be the Browser’s Mentor, Not Its Micromanager · · ,
  118. Icon-Only Links Fail WCAG · · , , , ,
  119. One Line of CSS to Add Basic Dark/Light Mode · · ,
  120. How I Built a Dark Mode Toggle ·
  121. Future Features of JS · · ,
  122. Best Practices for Overlays II · · , ,
  123. A Beginner’s Guide to Inclusive UX Design · · , , ,
  124. The Dos and Don’ts of Pairing Typefaces · · , , , ,
  125. The Case for Using Sass in 2022 · · ,
  126. Alternatives to Installing npm Packages Globally · · ,
  127. Is It Expensive to Build an Eco-Friendly Website? · · ,
  128. Using Web Streams on Node.js · · ,
  129. The Cost of Convenience · · ,
  130. Why Do We Call It Breadcrumbs? Diving into the History of UI Components · · , ,
  131. Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement · · , , ,
  132. How to Use ESLint and Prettier for Code Analysis and Formatting · · , , , , , ,
  133. Notes on Maintaining an Internal React Component Library · · , , ,
  134. Naming Conventions for Design Systems · · , ,
  135. In and Out of Style · · ,
  136. 3 Useful CSS Hacks · · ,
  137. How to Remove 99% of JavaScript from Main Thread · · , , ,
  138. How to Prevent Merge Conflicts (or at Least Have Less of Them) · · , ,
  139. You Don’t Need a JavaScript Library for Your Components · · , ,
  140. The Guide to Windows High Contrast Mode · · ,
  141. Fun CSS-Only Scrolling Effects for Matterday · · ,
  142. Do Dyslexia Fonts Improve Accessibility? · · ,
  143. Conditionally Styling Selected Elements in a Grid Container · · ,
  144. Complex vs. Compound Selectors · · , ,
  145. Communication Accessibility: It’s Time to Change How We Communicate · · ,
  146. 5 Very Simple Steps You Can Take for Accessibility Improvement · · ,
  147. Dialogs and Shadow DOM: Can We Make It Accessible? · · , , ,
  148. Software Engineering: The Soft Parts ·
  149. Should I Have Separate GitHub Accounts for Personal and Professional Projects? · · , , ,
  150. Why You Shouldn’t Modify Scrum · · , ,
  151. Understanding the JavaScript Window Object · · ,
  152. Simple CSS Solutions · · ,
  153. Design Principles for the Web · · , , ,
  154. CSS Card Shadow Effects · · ,
  155. Change Management for Accessibility · · ,
  156. Designing the Perfect Button · · ,
  157. What We’ve Learned from One Year of Real User Monitoring Data on GOV.UK · · , ,
  158. The Smallest CSS · · ,
  159. The Folly of Design System “Foundations” ·
  160. Design System Maturity · · ,
  161. AbortController Is Your Friend ·
  162. Modern JavaScript, 10 Things You Should Be Using, Starting Today ·
  163. Better Scrolling Through Modern CSS · · ,
  164. How We Think About Browsers · · ,
  165. Single Element Loaders: The Spinner · · ,
  166. Make DevTools Pick Colors Outside of Chrome · · , , , ,
  167. Write HTML Right · · ,
  168. The Many Definitions of Server-Side Rendering ·
  169. State of the Vuenion 2022 · · ,
  170. Measuring the Performance of Typefaces for Users II · · , ,
  171. 10 Do’s and Don’ts of Web Design in 2022 · · ,
  172. The Future of Frontend Build Tools · · ,
  173. Design Systems; the Great Connector ·
  174. How to Use Headings for Website Accessibility · · , , ,
  175. How to Animate SVG Shapes on Scroll · · , , ,
  176. Patterns for Building JavaScript Websites in 2022 · · , ,
  177. WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow · · , ,
  178. Simplify Your Color Palette With CSS “color-mix()” · · , ,
  179. Mobile-First CSS: Is It Time for a Rethink? · · ,
  180. JavaScript Hydration Is a Workaround, Not a Solution · · ,
  181. Inclusive User Research: Analysing Findings · · , ,
  182. Meet Web Push · · , , ,
  183. How to Create Dark Mode for Your Designs in Figma · · , ,
  184. Optimize the Use of “if–else” ·
  185. Building Interoperable Web Components That Even Work With React · · , ,
  186. Mathematical Notation for JavaScript Developers Explained · · ,
  187. Aspects of Accessibility—Semantics, Contrast, and… Anxiety? · · , , ,
  188. Shallow Copy and Deep Copy ·
  189. Web Typography: Establishing a Strong Typographic System ·
  190. Best Practices for Overlays · · , ,
  191. Are You Ignoring Digital Accessibility at Your Job? · · ,
  192. How to Use Variables in CSS · · , ,
  193. Can I DevTools? · · , , ,
  194. Measuring the Performance of Typefaces for Users · · , ,
  195. Why Most Design Systems Implode · · ,
  196. WCAG 3 Compliant? Check Again · · , ,
  197. Hamburger Footer: Reaching the Bottom of Infinite Scroll · · ,
  198. Don’t Sink Your Website With Third Parties · · , ,
  199. Web Development Resources · · ,
  200. A Brief History of Responsive Web Design · · ,
  201. Obscure CSS: Implicit List-Item Counter ·
  202. How to Pick the Least Wrong Colors · · , , ,
  203. Dealing With Hover on Mobile · · , , ,
  204. Useful Built-In Node.js APIs · · ,
  205. Monorepos in JavaScript and TypeScript · · , ,
  206. Do We Have a Lack of Developers or a False Assumption What the Job Is? ·
  207. Declarative Design Systems ·
  208. Writing Useful Alt Text · · , ,
  209. The Cicada Principle and Why It Matters to Web Designers · · ,
  210. Understanding CSRF Attacks ·
  211. Two Lines of CSS That Boosts 7× Rendering Performance · · , ,
  212. Interview With Léonie Watson · · ,
  213. How Does Social Interaction Change in an Age of New Media? · · ,
  214. Checklist for Moderating a Usability Test · · , ,
  215. 7 Tips to Improve Your TypeScript · · , ,
  216. APCA: The New Algorithm for Accessible Colour Contrast · · , , ,
  217. JavaScript of Halftone Printing · · ,
  218. Just How Long Should Alt Text Be? · · , ,
  219. You May Not Need a Bundler for Your npm Library · · ,
  220. 8 Shocking HTML Tips You Probably Don’t Know About · · ,
  221. How to Fix: “Buttons Do Not Have Accessible Names” · · , ,
  222. What’s the Alternative (Text)? · · ,
  223. npm Security Update: Attack Campaign Using Stolen OAuth Tokens · · , , ,
  224. The “Form” Element Created the Modern Web—Was It a Big Mistake? · · , , ,
  225. Manage Accessible Design System Themes With CSS “color-contrast()” · · , ,
  226. What npm Can Learn from Go ·
  227. The Story of the Custom Scrollbar Using CSS · · ,
  228. Processing Arrays Non-Destructively: “for-of” vs. “.reduce()” vs. “.flatMap()” · · , ,
  229. Customizing Color Fonts on the Web · · , ,
  230. Single Page Applications ·
  231. JavaScript Closures, Explained ·
  232. A Perfect Table of Contents With HTML and CSS · · ,
  233. Why Are Iframe Titles Important for Accessibility? · · , ,
  234. Understanding Weak Reference in JavaScript ·
  235. Making Headers Sticky Using CSS for a Better Reading Experience · · , ,
  236. CSS: Absolutely Positioning Things Relatively · · ,
  237. How to Position Your Design System Team for Success · · , , ,
  238. Snyk Finds 200+ Malicious npm Packages, Including Cobalt Strike Dependency Confusion Attacks · · , , ,
  239. Inclusive Design 101 · · ,
  240. Four Tradeoffs When Designing Navigation Menus · · ,
  241. Advocating for Your Design System ·
  242. Dialog Components: Go Native HTML or Roll Your Own? · · , ,
  243. A Guide to Writing Industry Standard Git Commit Messages · · , ,
  244. Lesser-Known and Underused CSS Features in 2022 ·
  245. 5 Things I’d Want to See Improved in WordPress Core ·
  246. 15 Sprint Review Anti-Patterns—Scrum Anti-Patterns Guide 2022 · · , , ,
  247. Accessibility from Different Perspectives ·
  248. The Balance Has Shifted Away from SPAs ·
  249. Triaging WCAG 2.1 Level AAA · · , ,
  250. First Look at the CSS “object-view-box” Property ·