News and Tools for Frontend Development (22)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Form Autocomplete · · html, forms
- Redirect Liquidation · · performance, optimization
- Show, Don’t Tell · · writing, design, semantics
- The Many Methods for Using SVG Icons · · css, svg, images
- Personalize It! · · css, user-experience, personalization
- Frontend Web Performance: The Essentials · · performance
- The CSS “:has()” Pseudo-Class, aka Parent Selector · · css, selectors
- Wrapping Text Inside an SVG Using CSS · · svg, css
- Building a Greener Web · · sustainability
- CSS Animation · · css, animations
- CSS Snapshot 2021 · · css
- Make Joyful Things · · user-experience
- The CSS “:has()” Selector Is Way More Than a “Parent Selector” · · css, selectors
- Introduction to Cognitive Disability and Accessibility Testing · · introductions, accessibility, testing
- 13 Tools and Techniques to Accelerate Frontend Development · · tooling, techniques, software-design-patterns, linting, bundling, testing, logging, frameworks, processes, ci-cd
- 5 Common Misconceptions About WAI-ARIA and Accessibility · · accessibility, aria, html
- Auto Dark Theme · · user-agents, dark-mode, usability
- Be Prepared for Failure and Handle It Gracefully · · javascript, graceful-degradation
- Image Display Elements · · html, images, responsive-design
- Smoothly Reverting CSS Animations · · css, animations
- The Web Starts on Page Four · · web
- Why UX Is the Best SEO Strategy · · user-experience, seo, strategies
- Design Sprints Revisited: Designing With Your Users and Developers · · design, usability
- How to Add and Remove a CSS Class from Multiple Elements With Vanilla JavaScript · · how-tos, css, javascript
- PHP 8 in a Nutshell · · books, php
- How to Define Your Relationship to Sites You Link To · · how-tos, html, links, semantics, seo
- Preference Queries · · css
- Web Performance, Core Web Vitals, and Vanity Metrics · · performance, web-vitals, metrics
- 4 HTML Concepts You Didn’t Know · · html, concepts, tables
- This Is WCAG 2.1 · · websites, accessibility, wcag
- This Is WCAG · · websites, accessibility, standards, wcag
- There’s Never Been a Better Time to Build Websites · · frameworks, css
- Inaccessibility of CAPTCHA · · accessibility, captcha
- Web Platform Design Principles · · web-platform, software-design, w3c
- Why Motion on Websites and Digital Content Is a Problem · · accessibility
- Hands On With the New Responsiveness Metrics · · performance, responsive-design, metrics
- Don’t Start With Microservices in Production—Monoliths Are Your Friend · · microservices, monoliths, architecture
- Deep-Copying in JavaScript Using “structuredClone” · · javascript
- Sustaining Maintaining · · open-source
- Consistent, Fluidly Scaling Type, and Spacing · · typography, css
- CSS Custom Properties · · css, custom-properties
- Explain Like I’m Five: Web Performance Optimization · · performance, optimization
- Shifting the Mindset About Accessible Content · · accessibility, content
- Thoughts on Skin Tone and Text Descriptions · · accessibility, inclusion, writing
- The State of CSS 2021 · · surveys, css
- 100 Tips on Software Developer Productivity · · productivity, tips-and-tricks
- CSS Can Help Improve Your HTML!? Buttons and Links · · html, css, buttons, links, accessibility
- Details/Summary · · html, semantics
- Performance Implications of JavaScript Errors · · javascript, performance, errors
- Practical Ethics for the Modern Web Designer · · videos, ethics
- The Ideal Line Length and Line Height in Web Design · · design, typography
- Visual Regression Testing for Design Systems With Figma Branches · · design-systems, testing, regressions, figma
- Read Your Website · · user-experience
- Lessons Learned from Publishing a Content Security Policy · · lessons, csp, security
- Embrace the Platform · · html, css, javascript, web-platform
- Intersection Observer · · javascript, apis
- WCAG 2.2: What We Know Till Now · · accessibility, wcag
- WCAG 2 Is What We Have · · accessibility, wcag
- Defer Non-Critical Resources · · performance, html
- 5 Key Benefits of Using a Tag Manager · · tag-management
- WCAG 3 Is Not Ready Yet · · accessibility, wcag
- Standardizing Focus Styles With CSS Custom Properties · · css, custom-properties, accessibility, focus
- How to Customize Firefox UI—Step-by-Step Tutorial · · how-tos, tutorials, xul, user-agents, mozilla, firefox, customization
- Breaking Out of the Box · · user-agents, css
- Caching: Understanding the Scope · · performance, caching
- The Last Design You’ll Ever Make · · design
- Responsive Iframes With the CSS “aspect-ratio” Property · · css, responsive-design
- WCAG 3 and APCA · · accessibility, wcag, apca, colors, contrast
- 1993: Mosaic Launches and the Web Is Set Free · · history, user-agents
- 5 Reasons You Should Adopt a Micro Frontend Architecture · · micro-frontends
- Content Separation · · servers
- Node.js Memory Limits—What You Should Know · · nodejs, memory
- Writing Better CSS · · css, quality, efficiency
- A Beginner’s Guide to Vue Router · · guides, vuejs
- Defensive CSS · · css
- Explainer for W3C Accessibility Guidelines (WCAG) 3.0 · · accessibility, wcag
- Google Fonts Knowledge · · fonts, typography, google
- Optimizing State Management in React Applications · · react, state-management
- Test Your Product on a Crappy Laptop · · testing, performance, usability
- Where Do You Put Spacing on Design System Components? · · design-systems, components, design, spacing
- HTTP Compression · · http, protocols, compression, performance
- Why You Should Check in Your Node Dependencies · · nodejs, dependencies
- Reduce Your Website’s Environmental Impact With a Carbon Budget · · sustainability
- Designing Better Links for Websites and Emails: A Guideline · · design, links, email
- CSS Fingerprinting · · websites, css, security, privacy
- Have Core Web Vitals Made the Web Faster? · · web-vitals, performance
- The Love of Curvilinear Design · · design
- How Many People With Disabilities Use Our Site? · · accessibility
- Plugging Memory Leaks in Your App · · performance, memory
- Ain’t No Party Like a Third Party · · dependencies, embed-code, security
- JSON Modules in JavaScript · · javascript, json, modules
- Request for a General Theory of Web Performance · · performance
- Revisiting the Anatomy of a Design System · · design-systems
- Why Every Developer Should Start Blogging · · blogging, communication, learning, career
- Best Practices for Node.js Development · · nodejs, javascript, best-practices
- Markup · · studies, research, html
- The Fundamentals of CSS Layout · · videos, fundamentals, css, layout
- Understanding Accessibility · · accessibility, testing, tooling
- Why Color Contrast Is Not as Black and White as It Seems · · accessibility, colors, contrast
- Page Weight · · studies, research, performance
- Security · · studies, research, security
- Accessibility · · studies, research, accessibility
- JavaScript · · studies, research, javascript
- CSS · · studies, research, css
- HTTP · · studies, research, http, protocols
- CSS Layout from the Inside Out · · videos, css, layout
- The Surprising Behavior of “Important CSS Custom Properties” · · css, custom-properties, cascade
- Making Accessibility More Accessible · · accessibility
- Introduction to TCP Connection Establishment for Software Developers · · introductions, protocols, tcp
- Introduction to Svelte Actions · · introductions, svelte
- Understanding WCAG 2.1 Level AAA · · accessibility, wcag
- Select Elements With “pointer-events: none” by Holding Shift · · user-agents, dev-tools
- How to Maintain a Large Next.js Application · · how-tos, nextjs, maintenance
- On Yak Shaving and “<md-block>”, a New HTML Element for Markdown · · web-components, html, markdown
- What Is WHOIS and How Does It Work? · · whois, domains
- Programmers Should Stop Celebrating Incompetence · · career
- Make Your Website Stand Out With a Custom Scrollbar · · css
- How to Trim Strings in JavaScript · · how-tos, javascript
- 7 Ways to Improve Node.js Performance at Scale · · nodejs, performance, optimization
- Three Phases of Life for Design Systems · · design-systems
- Creating Generative Patterns With the CSS Paint API · · css, decoration
- Get Started With Validation in Node.js · · nodejs, validation
- What Kind of Developer Do I Want to Be? · · career
- Adding a Dyslexia-Friendly Mode to a Website · · accessibility, css
- Control Layout in a Multi-Directional Website · · internationalization, html, css
- The 6 Ways of Writing HTML (and Their Combinations) · · html
- Modern CSS in a Nutshell · · css
- Functional Programming in PHP: Higher-Order Functions · · php, programming, functions
- How JavaScript Engines Achieve Great Performance · · javascript, engines, performance
- Responsive Layouts, Fewer Media Queries · · css, responsive-design
- Blog Page Accessibility Deep Dive · · accessibility, react
- Designing Sustainable Websites · · sustainability, performance, software-design
- Dear HTML Element · · html
- Accessibility Myths · · websites, accessibility
- 20 Years of bram.us · · history
- Communicating Accessibility as Needs to Be Met and Not Rules to Be Followed · · accessibility, communication
- Parallax Powered by CSS Custom Properties · · css, custom-properties
- Tales of the Autistic Developer—Order and Chaos · · career
- How to Make Blob Menu Using HTML, CSS and JavaScript · · how-tos, html, css, javascript
- Introduction to Web Sockets · · introductions, apis, protocols, websocket
- 1992: The Web vs. Gopher, and the First External Browsers · · history
- Let’s Not Send Developers to the Accessibility Tree Tool · · user-agents, accessibility, tooling
- PHP Date and Time Recipes · · php
- Various Ways to Include Comments on Your Static Site · · functionality
- Dynamic Color Manipulation With CSS Relative Colors · · css, colors
- Three Principles to Better Present Your UI Designs · · design, principles
- WCAG 3.0: What You Need to Know About the Future of Accessibility Standards · · accessibility, wcag, standards
- A Guide to Modern CSS Colors With RGB, HSL, HWL, LAB, and LCH · · guides, css, colors
- How to Create Reusable Components With the Vue 3 Composition API · · how-tos, vuejs, components
- Performance · · studies, research, performance, user-experience
- A Clever Sticky Footer Technique · · css, layout
- Reframing Tech Debt · · technical-debt
- We Need to Talk About Accessibility—Again, and Again, and Then Some More · · accessibility
- 4 Ways to Document Your Design System With Storybook · · design-systems, storybook, documentation
- Generate a Pull Request of Static Content With a Simple HTML Form · · html, github
- Using Position Sticky With CSS Grid · · css, layout
- A Primer on Product Management for Engineers · · introductions, product-management
- GitHub’s Commitment to npm Ecosystem Security · · github, npm, security
- Your CSS Is an Interface · · css, performance
- Access to Tech, Tech to Live · · videos, accessibility
- Get Your “Head” Straight · · videos, html, performance
- 5 Popular Frontend Development Tools in 2021 · · tooling
- Some Notes on Using esbuild · · bundling, tooling
- How to Fetch Data in Svelte · · how-tos, svelte, data-fetching
- Why IndexedDB Is Slow and What to Use Instead · · databases, indexeddb, javascript, performance
- Design Systems, Structured Content, and Headless Publishing · · design-systems, content, semantics, headless
- Useful React Hooks That You Can Use in Your Projects · · react, hooks
- Using Web Workers to Boost Third-Party Script Performance · · web-workers, javascript, performance
- Chrome DevTools: Copy CSS Styles as JavaScript-Compatible Properties · · dev-tools, css, javascript, user-agents, google, chrome
- Why Your Website Should Not Use Dithered Images · · images, dithering, compression, performance
- How to Debounce and Throttle Callbacks in Vue · · how-tos, vuejs, javascript, debouncing, throttling
- Other Looks at the Conditional Border Radius Trick · · css, borders, tips-and-tricks
- Easy Dark Mode (and Multiple Color Themes) in React · · react, dark-mode, theming
- It’s Not About Your Favorite Color—Moving from Brand Strategy to Visual Identity · · design, branding, strategies
- View-Source · · auditing, user-agents
- Everything You Ever Wanted to Know About the Accessibility Tree · · videos, accessibility
- A Beginner’s Guide to Routing in Next.js, With Examples · · guides, nextjs, routing
- Browsing With Screen Magnification · · accessibility, browsing, assistive-tech, screen-magnification
- Be Usable, Not Consistent, Not Uniform · · design, usability
- How Designers Can Prevent User Errors · · design, usability, errors
- Localizing Your Next.js App · · nextjs, localization, javascript
- Detecting Specific Text Input With HTML and CSS · · html, css
- Debugging HTML: Accessibility · · html, accessibility, debugging
- Why You Should Prioritise Quality over Speed in Design Systems · · design-systems
- Becoming an Expert · · learning, career, processes, craft
- Designing a Reorderable List Component · · software-design, components, html, css
- PHP 8.1 in 8 Code Blocks · · php
- In Defence of Dialog · · html, modals
- Deep Dive into Node.js Architecture · · nodejs, architecture
- Chrome DevTools: Record and Playback Your User Journeys · · dev-tools, user-experience, performance, user-agents, google, chrome
- Everything You Have to Know About Core Web Vitals · · web-vitals, performance
- RenderingNG: The Next-Generation Rendering Architecture for Chrome · · videos, user-agents, google, chrome, engines, chromium, rendering
- The Key to Developer Happiness and How to Prevent Coding from Becoming Just Another Job · · how-tos, career
- How to Implement Memoization in React to Improve Performance · · how-tos, react, performance, memoization, optimization
- Browser Wars · · history, user-agents
- Building Real-Life Components: Facebook Messenger’s Chat Bubble · · components, html, css
- Design Is Not Art, and UX Is Not Design · · design, user-experience
- Designing Error Messages and a Logging Strategy in Node.js · · software-design, javascript, nodejs, logging, strategies
- Learn Forms · · courses, forms, html
- Learn PWA · · courses, web-apps
- Understanding the Differences Between WCAG 2.1 and WCAG 2.2 · · accessibility, wcag, comparisons
- A Deep Dive into Serverless UI With TypeScript · · typescript, serverless
- Rebase vs. Merge: Integrating Changes in Git · · git, comparisons
- The State of the Web · · videos, web
- What Are Accessible Fonts? · · accessibility, fonts
- Name, Labels, ARIA, What to Do? · · accessibility, writing, naming
- What Does a Good Design System Feel Like? · · design-systems, user-experience
- A Comprehensive Guide to Error Handling in Node.js · · guides, nodejs, javascript, errors
- Accessible Toggles · · accessibility, html, javascript
- An Introduction to PostCSS · · introductions, css, tooling
- Developer Tools Secrets That Shouldn’t Be Secrets · · user-agents, tooling, developer-experience
- The Guideline Gap · · design-systems, quality, accessibility, localization
- So, You Want to Build an “@ mention” Autocomplete Feature? · · functionality
- CSS-ing Candy Ghost Buttons · · css
- The Golden Ratio and User-Interface Design · · design
- HTMLoween—HTML, JS, and CSS to Make Your Blood Boil · · html, css, javascript
- You Probably Don’t Need Media Queries Anymore · · css, media-queries
- The Little Book of Little Books · · books, frameworks, conventions, quality
- Chrome DevTools: Visualise Your JavaScript Bundles · · dev-tools, javascript, bundling, user-agents, google, chrome, lighthouse
- Make Your Design System Accessible—Color · · design-systems, accessibility, colors
- Using CSS Variables for Reduced Motion on a Global Scale · · css, custom-properties
- Indecisive Skip Links and Their Targets—the Renaissance of the “<hr>” Element · · accessibility, links, html
- Best Practices on Embedding Third-Party Web Widgets · · embed-code, performance, best-practices
- UX Design Isn’t Killing Creativity, Money Is · · user-experience, creativity, economics
- A Step by Step TypeScript Tutorial for Beginners · · typescript, tutorials
- Media Queries Level 4: Media Query Range Contexts · · css, media-queries
- Photoshop’s Journey to the Web · · tooling, webassembly
- Design Systems at Replit: Better Tokens · · case-studies, design-systems, design-tokens
- So, You Want an Accessibility Score? · · accessibility, auditing
- The Problem With “Click Here” and “Learn More” Links · · links, usability, writing
- In-Page Filtered Search With Vanilla JavaScript · · javascript, functionality, searching
- A Deep Dive into “object-fit” and “background-size” in CSS · · css, backgrounds
- Building an Effective Image Component · · components, javascript, performance
- The Process of Building a CSS Framework · · frameworks, processes
- Why Outdated jQuery Is Still the Dominant JavaScript Library · · javascript, libraries, jquery
- Why Accessibility Overlays on Your Website Can Make Things Worse · · accessibility, overlays
- Web Performance Metrics Cheatsheet · · performance, cheat-sheets
- If HTML and ARIA Don’t Allow It, It’s Probably a Bad Idea · · html, aria, accessibility
- Finding Common Patterns Across Frameworks · · frameworks, javascript
- Switch Role Support · · html, accessibility, support
- Micro-Frontends: The Next Gen Way to Build Web Apps · · micro-frontends, web-apps
- On Using Custom Properties · · css, custom-properties
- The Start of a New Era for Responsive Web Design · · responsive-design, css
- Common Mistakes When Writing CSS With BEM · · css, naming, bem, mistakes
- This Is the Way: A Phased Approach to Accessibility in the Development Lifecycle · · accessibility
- Decoupling HTML, CSS, and JavaScript in Design Systems · · html, css, javascript, design-systems
- Making the Web Developer’s Pilgrimage · · html
- Respecting Users’ Motion Preferences · · accessibility, css
- Identify Potential CSS Improvements · · dev-tools, css, auditing, user-agents, google, chrome
- Semantic “menu” Context · · html, semantics