News and Tools for Frontend Development (25)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- The (Most Comprehensive) JavaScript Design Principles Guide · · guides, software-design, javascript, principles
- 2021 Scroll Survey Report · · surveys, css, scrolling
- How We Reduced Next.js Page Size by 3.5× and Achieved a 98 Lighthouse Score · · performance, nextjs, lighthouse, google, case-studies
- Why It’s Okay for Web Components to Use Frameworks · · frameworks, web-components
- Chrome DevTools: Better Accessibility Inspection With the Source Order Viewer · · dev-tools, accessibility, debugging, user-agents, google, chrome
- Avoid the Most Common 18 Mistakes to Make Your UI/UX Design Better · · design, user-experience, mistakes
- 101 Digital Accessibility Tips and Tricks · · accessibility, tips-and-tricks
- CSS Architecture and Performance in Micro Frontends · · css, architecture, performance, micro-frontends
- Optimizing Your Own Performance as a Designer · · design, career
- There Is No Such Thing as a CSS Absolute Unit · · css, units
- How to Stay Focused as a Self-Taught Frontend Web Developer · · how-tos, career, learning, productivity
- 5 Git Tips to Level Up Your Workflow · · git, tips-and-tricks, command-line
- Best Practices for Tags and Tag Managers · · tag-management, web-vitals, best-practices
- Architecting and Scaffolding a TypeScript and Express API · · typescript, express, apis
- Learnings from a WebPageTest Session on CSS-Tricks · · performance
- Using Absolute Value, Sign, Rounding, and Modulo in CSS Today · · css
- Safari Isn’t Protecting the Web, It’s Killing It · · user-agents, apple, safari, web
- How to Hand Off Accessible Designs to Developers? · · how-tos, accessibility, processes
- Creating an Accessible Dialog from Scratch · · accessibility, modals
- CSS Logical Properties and Values · · css, logical-properties
- Global vs. Local Styling in Next.js · · css, nextjs, comparisons
- Thinking About the Cut-Out Effect: CSS or SVG? · · css, svg, techniques, effects
- Is It Time to Ditch the Design Grid? · · design, layout
- When You Cannot Run Away from Using Tables on Mobile · · layout, user-experience, tables, mobile
- Webhooks Tutorial: The Beginner’s Guide to Working With Webhooks · · tutorials, guides, webhooks
- Accessible Design from the Get-Go · · accessibility
- My First CSS—What I Wish I Knew About CSS When Starting Out as a Frontender · · css, layout
- Takeaways from the 2021 State of Digital Accessibility Report · · surveys, accessibility
- UX Principles That Include Cognitive Accessibility · · accessibility, user-experience, principles
- Getting Started With React “useContext” Hook and React Context · · react, hooks, introductions
- Overview of the RenderingNG Architecture · · overviews, user-agents, engines, chromium, google, rendering
- Break HTML Content into Newspaper-Like Columns Using Pure CSS · · css, layout
- Four Factors in UX Maturity · · user-experience
- It Is Time to Ditch the Title “Evangelist” from Accessibility · · accessibility
- You Don’t Need React for Building Websites · · react
- Complete Introduction to CSS Flexbox · · introductions, css, layout
- 5 UI Tips to Become a Better Front-End Developer · · design, colors, tips-and-tricks
- Accessibility Strategy for Product Management · · accessibility, strategies, product-management
- How to Eliminate Render-Blocking Resources: a Deep Dive · · how-tos, performance, rendering
- The Vanishing Designer · · design, career
- Using Google Drive as a CMS · · content-management, google
- What We Learned About Accessibility by Scanning More Than 2 Million Federal .gov Web Pages · · accessibility
- Custom Properties and “@ property” · · css, custom-properties
- Definition of Done vs. Acceptance Criteria · · agile, scrum, processes, comparisons
- Simple Monorepos Via npm Workspaces and TypeScript Project References · · monorepos, npm, typescript
- Why the WCAG Colour Contrast Ratio Doesn’t Always Seem to Work · · accessibility, wcag, colors, contrast
- A Visual Guide to React Rendering—It Always Re-Renders · · guides, react
- From a Colourblind Designer to the World: Please Stop Using Red and Green Together · · accessibility, colors
- The Accessibility Stalemate · · accessibility
- Maintaining End-to-End Quality With Visual Testing · · testing, quality, design
- Practical Use Cases for Scroll-Linked Animations in CSS With Scroll Timelines · · css, animations
- An Introduction to Frameworkless Web Components · · introductions, web-components, javascript, dom
- 6 Useful Frontend Techniques That You May Not Know About · · html, css, javascript, techniques
- The Ultimate Cheat Sheet List for Web Developers · · html, css, javascript, cheat-sheets
- Journey of a Web Page—How Browsers Work · · user-agents, concepts
- Designing for Information Density · · design
- Why Has User Experience Design Become Legal Experience Design? · · accessibility, user-experience, legal
- The State of Developer Ecosystem 2021 · · surveys
- What I Learned from “Software Engineering at Google” · · google
- Accessibility of the “Section” Element · · accessibility, html
- Content Accessibility Fact Sheet · · content, accessibility
- Designing for the Unexpected · · design, html, css
- There’s No Such Thing as Fully Automated Web Accessibility · · accessibility, automation
- What Is Tree Shaking? · · javascript, concepts, tree-shaking
- For Developers, Apple’s Safari Is Crap and Outdated · · user-agents, apple, safari
- Hobson’s Browser—How Apple, Facebook, and Google Broke the Mobile Browser Market by Silently Undermining User Choice · · user-agents, mobile, user-experience, apple, meta, google
- How to Get a Pixel-Perfect, Linearly Scaled UI · · how-tos, css, preprocessors, layout
- The Performance Effects of Too Much Lazy-Loading · · performance, web-vitals, lazy-loading
- Angular Is Costing Companies Billions · · angular
- The 3-Second Frontend Developer Test · · html, css, conformance, quality
- The Ultimate Guide to Browser-Side Storage · · guides, user-agents, storage, javascript
- What’s the Difference Between the Alignment Values of “start”, “flex-start”, and “self-start”? · · css
- Build Complex CSS Transitions Using Custom Properties and “cubic-bezier()” · · css, transitions, custom-properties, complexity
- I’m Changing How I Review Code · · code-reviews, quality
- The Most Important Lessons I’ve Learned from Senior Software Engineers · · lessons, career
- An Unreasonably Long Introduction to ARIA (With Example Implementation) · · introductions, accessibility, aria, live-regions, examples
- Detecting Media Query Support in CSS and JavaScript · · css, javascript, media-queries, support
- How to Migrate from jQuery to Next.js · · how-tos, migration, jquery, nextjs
- Gridless Design · · websites, design, layout
- Refactoring CSS: Introduction · · introductions, css, maintenance, refactoring
- TypeScript Interfaces: A Quick Guide to Help You Get Started · · guides, typescript
- What People Should Know Before Writing Articles or Creating Products About Accessibility · · accessibility, writing
- Freelance React Developer Checklist · · react, checklists
- Image Descriptions: A Human Technique That Robots Can’t Grasp · · accessibility, images
- How to Convert Arrays to Human-Readable Lists in JavaScript · · how-tos, javascript, conversion, arrays
- Making a Strong Case for Accessibility · · accessibility
- The Document Outline · · html, accessibility
- Creating Accessible CSS Art · · css, accessibility, art
- Performance Design: The Illusion of Speed · · performance, user-experience
- The Large, Small, and Dynamic Viewports · · layout, responsive-design, css
- The Numeric Colour Palettes in Modern Web Frameworks Explained · · colors, color-palettes, frameworks
- Five Ways to Include D/Deaf Users in Your Designs · · accessibility, design
- TypeScript and Native ESM on Node.js · · javascript, typescript, nodejs
- ARIA in HTML · · accessibility, aria, html
- Accessibility and Inclusivity: Distinctions in Experience Design · · accessibility, inclusion, user-experience
- The Dilemma of Naming Font Size Variables · · css, preprocessors, custom-properties
- How Does Node.js Load Its Built-In/Native Modules? · · javascript, nodejs, modules
- How to Use “Promise.all()” · · how-tos, javascript, promises
- Using HSL Colors in CSS · · css, colors
- Where Did This Interaction Come From?—A Brief History of Interaction Design · · history, interaction-design
- Feature Checklists Are Not Enough: How to Avoid Making Bad Software · · how-tos, usability, design, checklists
- Basics of JavaScript Test Driven Development (TDD) With Jest · · fundamentals, javascript, testing, jest
- “export default thing” Is Different to “export { thing as default }” · · javascript
- Evaluating Color and Contrast—How Hard Can It Be? · · accessibility, colors, contrast
- Short Note on Skip Links With Sticky Headers · · accessibility, links, css
- Accessibility and SEO · · accessibility, seo, html
- It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them · · testing, quality
- Towards Richer Colors on the Web · · design, colors
- 10 Figma Best Practices to 10× Your Workflow · · design, figma, productivity, best-practices
- The Internet Is Rotting · · link-rot, web
- When a Click Is Not Just a Click · · javascript
- Detecting Hover-Capable Devices · · css
- How We Built React Components for Any Front End · · react, components, case-studies
- Encoding Data for POST Requests · · javascript, security, encoding
- 9 Tips to Help You Ace a Whiteboard Interview · · interviewing, career, tips-and-tricks
- The State of Web Workers in 2021 · · javascript, web-workers
- Colorblind Accessibility Manifesto · · websites, accessibility, colors, guidelines
- Use the “i” Element, and Use It Appropriately · · html, semantics
- Good News: Google No Longer Requires Publishers to Use the AMP Format · · amp, web-vitals, google
- The Most Popular Design Thinking Strategy Is BS · · design, strategies
- Resource Inlining in JavaScript Frameworks · · javascript, frameworks, performance, web-vitals
- Screen Readers: Hearing the Unseen · · accessibility, user-agents, assistive-tech, screen-readers
- Tip: Don’t Preprocess What You Can Design Token · · preprocessors, design-tokens
- CSS Frameworks in Vogue, but Don’t Forget Style Fundamentals · · css, frameworks, fundamentals, quality
- My Journey from a Novice to a Front-End Engineer · · career
- I Regret Being a Hipster in Tech · · career
- timefind · · packages, npm, history
- All You Need Is 5 Fonts · · design, typography, fonts
- Container Queries and the Future of CSS · · videos, css, container-queries
- Debugging JavaScript and Front-End · · videos, javascript, debugging
- JavaScript Frameworks and the Lost Art of HTML · · javascript, html, frameworks
- Using CSS to Enforce Accessibility · · accessibility, css
- Building a Responsive Layout With CSS Grid and Container Queries · · videos, css, layout, responsive-design, container-queries
- Making the Web—Faster · · web, performance, developer-experience, principles
- No Code Reviews by Default · · code-reviews
- Accessibility in React · · accessibility, react
- React Architecture: How to Structure and Organize a React Application · · how-tos, react, architecture
- The True Cost of a Redesign · · redesign, economics
- Craft Good Questions for Usability Tests · · usability, testing
- Custom Scrollbars in CSS · · css
- Demystifying Styled Components · · css, javascript, components
- Sorting Colors in JavaScript · · javascript, sorting, colors
- What’s New in ES2021 · · javascript, ecmascript, standards
- A Framework for Building Open Graph Images · · open-graph, images
- RenderingNG—Ready for the Next Generation of Web Content · · user-agents, engines, chromium, google, rendering
- Keeping It Consistent: Design Tokens · · design-systems, design-tokens, consistency
- Blogged Answers: The Evolution of Redux Testing Approaches · · redux, state-management, testing, history
- Organize Your CSS Declarations Alphabetically · · css, maintainability
- How to Use Dynamic Imports in JavaScript · · how-tos, javascript
- Updating a 25-Year-Old Website · · maintenance
- How Apple Changed the Way We Navigate—Forever · · design, navigation, apple
- OMG, SVG Favicons FTW! · · html, images, favicons, svg
- Optical Size, the Hidden Superpower of Variable Fonts · · css, fonts, typography
- A Complete Guide to Accessibility Tooling · · guides, accessibility, tooling
- NPM Global Audit · · packages, npm, security, quality, auditing
- Shut Up, Old Man… · · career
- Understanding and Preventing Common Security Vulnerabilities · · security
- Everyday Accessibility · · accessibility
- Dart Basics · · fundamentals, dart, flutter
- When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · css, javascript, accessibility
- Provided “As Is,” Without Warranty of Any Kind · · open-source, community, licensing
- Regular Expressions (RegEx) in Google Search Console · · regex, seo, google
- Half the Size of Images by Optimising for High Density Displays · · html, images, performance
- Serving Sharp Images to High Density Screens · · performance, images
- The Art of Frontend Engineering · · career
- Adding Shadows to SVG Icons With CSS and SVG Filters · · css, svg, shadows, effects
- React Cheat Sheet (Updated June 2021) · · react, cheat-sheets
- How to Center Anything in CSS Using Flexbox and Grid · · how-tos, css, layout
- Let’s Learn About Aspect Ratio in CSS · · css
- The Ultimate CSS Flexbox Cheat Sheet With Examples · · css, layout, cheat-sheets, examples
- An Interactive Guide to CSS Transitions · · guides, css, transitions
- Micro-Expressions in User Testing: When Users Reveal Their True Emotional States · · design, usability
- Ready-Made Counter Styles · · css, localization
- Why Validate? · · html, css, quality, conformance, craft
- Meet :has, a Native CSS Parent Selector (and More) · · css
- Building a Color Scheme · · css, design, colors, color-palettes
- Improving the UX of Your Design System · · design-systems, user-experience, optimization
- Reasons Why Bugs Might Feel “Impossible” · · debugging, quality
- Component-Specific Design Tokens · · components, design-tokens
- Accessible Overflow · · accessibility, html, css
- An Accessibility Strategy · · accessibility, strategies
- What Can the HTTP Archive Tell Us About Largest Contentful Paint? · · performance
- Using AVIF to Compress Images on Your Site · · performance, images, avif, compression
- Vue.js vs. React—Not Your Usual Comparison · · frameworks, vuejs, react, comparisons
- 10 Utility Functions for Working With Objects in JavaScript · · javascript, functions, objects
- A Little Book of Accessibility · · accessibility
- JavaScript: Debouncing and Throttling · · javascript, debouncing, throttling
- CSS System Colors · · css, colors
- Best Practices for Fonts · · fonts, best-practices, performance
- Open Source Insights · · websites, open-source, dependencies, security, licensing
- Getting Started With a Kanban Board: 6 Tips for Productive Work · · introductions, kanban, agile, tips-and-tricks, productivity
- CSS for Web Vitals · · css, performance, web-vitals
- How to Fix Cumulative Layout Shift (CLS) Issues · · how-tos, performance, web-vitals
- Thoughts for the Aging Web Developer · · career
- Embracing Design Constraints · · design
- The Hidden World of “aria-hidden” · · accessibility, html
- Why Accessibility Overlays Hurt More Than Help · · accessibility, overlays
- Disabling a Link · · links, css, accessibility
- What Makes a Great Component Library? · · components, libraries
- How to Build an Image Comparison Slider · · how-tos, react, images
- Accessible Web Forms · · videos, accessibility, forms
- A Thorough Analysis of CSS-in-JS · · javascript, css, css-in-js
- History of Web Browser Engines from 1990 Until Today · · user-agents, engines, history
- Writing Better Regular Expressions in PHP · · php, regex, readability
- 25 Years of CSS · · css, history
- Your Design System Is Actually a Product—Treat It Like One · · design-systems
- Access Guide · · websites, guides, accessibility
- CSS Container Queries: Use Cases and Migration Strategies · · css, container-queries
- Svelte for the Experienced React Dev · · react, svelte
- A11y Audit Bookmarklets · · accessibility, auditing, link-lists, bookmarklets
- Professional Development Is a Choice · · career, training
- Don’t Overabstract Your Components · · html, javascript, components
- Dark Patterns Tip Line · · websites, dark-patterns, user-experience
- The New Responsive: Web Design in a Component-Driven World · · responsive-design, css, components
- Useful and Useless Code Comments · · developer-experience, documentation
- How to Name Your Design System · · how-tos, design-systems, naming
- We Need to Talk About WCAG · · accessibility, wcag
- 2021: 98% of the Top 100 U.S. Websites Use Invalid HTML · · html, css, conformance, quality
- Learn CSS · · courses, css
- The Button Cheat Sheet · · html, cheat-sheets
- Theoretical Foundations for Server-Side Rendering and Static-Rendering · · studies, research, server-side-rendering
- Container Queries in Web Components · · css, container-queries, web-components
- Create Scripts in JavaScript With zx · · zx, javascript, automation
- Upgrade Your HTML III · · books, html, minimalism, craft, conformance
- A Complete Guide to Grid · · guides, css, layout
- Building a React Design System for Adoption and Scale · · react, design-systems
- Making Disabled Buttons More Inclusive · · css, accessibility
- Everything You Need to Know About A/B Testing · · metrics, testing
- Rethinking Component Libraries · · components
- Web Application Development: The Ultimate Guide (2021) · · guides, web-apps
- Introduction to Using Dart in Flutter · · introductions, dart, flutter
- A Primer on CSS Container Queries · · introductions, css, container-queries
- Meet zx: A Better Way to Write Scripts With Node.js · · zx, nodejs
- Introduction to HTTP Cookies · · introductions, cookies, javascript
- Custom Attributes Are Fast Good and Cheap · · css, selectors
- How to Satisfy User Intent When Considering Search vs. Browse · · how-tos, usability, browsing, searching, comparisons
- Overreliance on Overlays Is Counter to Enculturation of Accessibility · · accessibility, overlays
- Is Vendor Prefixing Dead? · · css, prefixing
- Auditing Design Systems for Accessibility · · accessibility, design-systems, quality, auditing
- Using Hotwire to Build a Search Form With Minimal JavaScript · · hotwire, forms, searching, functionality
- Understanding Design Systems—Designing Component APIs · · design-systems, components, apis
- Designing Adaptive Components, Beyond Responsive Breakpoints · · videos, components, responsive-design
- Better Onboarding: How to Prevent Codebase Overwhelm · · how-tos, onboarding
- Immersive Content Strategy · · content, strategies, user-experience
- Level Up Your Team Workflows With These Kanban Board Best Practices · · agile, kanban, best-practices
- Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit · · css, custom-properties, engines, webkit
- A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors · · guides, css, selectors, support
- 21 Best Practices for a Clean React Project · · best-practices, quality, react
- Do You Need to Localize Your Website? · · content, localization, strategies
- 136 Facts Every Web Dev Should Know Before They Burn Out and Turn to Landscape Painting or Nude Modelling · · career