News and Tools for Frontend Development (22)
(Stay up-to-date on all topics by RSS feed or on Mastodon.)
- Colors That Make Sense · · accessibility, semantics, colors
- Foundations: Colour and Meaning · · accessibility, colors
- Version 100 in Chrome and Firefox · · user-agents, support, google, chrome, mozilla, firefox
- The Basics of package.json · · fundamentals, nodejs, dependencies, npm, yarn
- WCAG 2.2 Update · · accessibility, wcag
- 7 Killer One-Liners in JavaScript · · javascript
- Functions and the Future of Design Systems · · design-systems
- The Entire Cascade (as a Funnel) · · code-pens, css, cascade
- Hello, CSS Cascade Layers · · css, cascade
- Using the Language Attribute to Make Your Website Accessible · · accessibility, localization, internationalization
- Why Radio Buttons Are Called Radio Buttons in UIs? · · html, semantics, naming
- Multi-Value CSS Properties With Optional Custom Property Values · · css, custom-properties
- WebDex: Web Specs Index · · websites, terminology, standards
- Moving from JavaScript to TypeScript · · javascript, typescript
- How to Keep Your Repo Package Dependencies Up to Date Automatically · · how-tos, dependencies, tooling
- How Thinking About Hierarchical Grids Helps You Take a Content-First Approach to Design · · design, layout, content
- MHTML in Chromium · · html, user-agents
- Only 2% of Sites Meet Accessibility Standards—Let’s Change That · · accessibility
- The Difference Between Brotli and Gzip Compression Algorithms to Speed Up Your Site · · performance, compression
- What I Learned Implementing a Design System for an Existing Product · · design-systems
- How to Make CSS Slanted Containers · · how-tos, css
- Everything Publishers Need to Know About URLs · · seo, urls, naming
- Building an Adaptive Favicon · · images, favicons
- Accessibility Monitoring: How We Test · · accessibility, monitoring, testing, case-studies
- Debugging JavaScript · · javascript, debugging
- Aspect Ratio Is Great · · css, layout
- New in JavaScript: “reportError”—a Method to Report to Global Event Handlers · · javascript, events
- Move Over JavaScript: Back-End Languages Are Coming to the Front-End · · javascript
- Developing a Focus Style for a Themable Design System · · accessibility, design-systems, theming, focus
- This Is Why Your Node.js Application Is Slow · · performance, nodejs
- Replace JavaScript Dialogs With the New HTML Dialog Element · · modals, html, semantics
- Accessibility Testing Best Practices in CI/CD · · accessibility, testing, ci-cd, best-practices
- Creating Generative SVG Grids · · javascript, svg
- Modern, Single-Page Web Design: UX Design Trends and Tips · · design, user-experience, trends
- Do We Need Screen Reader for Accessibility Testing · · accessibility, testing, user-agents, assistive-tech, screen-readers
- How to Favicon in 2022: Six Files That Fit Most Needs · · how-tos, images, favicons
- CSS Animations Tutorial: Complete Guide for Beginners · · tutorials, guides, css, animations
- Introducing the Dialog Element · · introductions, html, modals
- How to Create a UX Vision Statement · · how-tos, user-experience
- How to Use the Accessibility Tree for A11Y Testing · · how-tos, accessibility, testing
- UX and User Personas: How to Get It Right · · user-experience, usability, personas
- Are We Live? · · accessibility, aria
- Design System Versioning: Single Library or Individual Components? · · design-systems, versioning
- Foundations: Colour Contrast · · accessibility, colors, contrast
- Understanding the W3C’s Accessibility Conformance Testing (ACT) Requirements · · accessibility, conformance, testing
- What Web Frameworks Solve: The Vanilla Alternative · · frameworks, javascript, react
- 8 Key Elements for Creating a Culture of Accessibility · · accessibility, culture
- The Impact of Motion Animation on Cognitive Disability · · accessibility, css, javascript
- Reducing the Web’s Carbon Footprint: Optimizing Social Media Embeds · · social-media, embed-code, sustainability, performance
- No Accessibility Without Disabilities · · accessibility, user-experience
- Why Efficient Hydration in JavaScript Frameworks Is So Challenging · · javascript, frameworks, hydration
- Grow Your Design System from Good to Great · · design-systems
- Settings Are Not a Design Failure · · design, usability, user-experience
- State of Frontend 2022 · · surveys
- Assistive Technology, Accessible Technology, and the Accessibility Tree · · accessibility, user-agents, assistive-tech, screen-readers, tooling
- Improving JavaScript Bundle Performance With Code-Splitting · · javascript, performance, bundling, code-splitting, optimization
- 5 Pitfalls of Using Micro Frontends and How to Avoid Them · · micro-frontends
- Building Like It’s 1984: A Comprehensive Guide to Creating Intuitive Context Menus · · guides, design, usability
- Career Advice Nobody Gave Me: Never Ignore a Recruiter · · career
- Structuring Your Storybook · · storybook
- “Evergreen” Does Not Mean Immediately Available · · user-agents
- CSS—Understanding the Cascade · · videos, css, cascade
- Cascade Layers Are Coming to Your Browser · · css, cascade, user-agents, support
- Website Themes and Color Schemes · · design, theming, colors, color-palettes
- 24 Lesser-Known HTML Attributes You May Want to Use · · html
- 4 Questions to Ask Before Using ARIA · · accessibility, aria, semantics, testing
- Accessibly Insecure · · accessibility, security
- Speed Matters, but It Isn’t Everything · · performance, user-experience, metrics
- Use Cases for CSS “fit-content” · · css
- Learn Responsive Design · · courses, responsive-design
- A More Easy Way to Write “if … or” Checks With Vanilla JavaScript · · javascript
- Preventing Smooth Scrolling With JavaScript · · javascript, scrolling
- The Focus-Indicated Pseudo-Class “:focus-visible” · · css, selectors, focus
- Inclusive Design · · design, inclusion
- Cascade Layers: First Contact · · css, cascade
- Internal Onboarding for Design System Teams · · design-systems, onboarding
- What Web Frameworks Solve and How to Do Without Them · · frameworks, react, svelte
- How Does “!important” Actually Work? · · videos, css, cascade
- Why You Should Use a Developer Font · · fonts, typography, productivity
- Why Testing After Is a Bad Practice · · testing
- WCAG, but in Language I Can Understand · · accessibility, wcag
- Caching Header Best Practices · · performance, caching, best-practices
- Cherry Picking Commits in Git · · git, command-line
- Demystifying TypeScript Discriminated Unions · · typescript
- There’s No Such Thing as Clean Code · · developer-experience, quality
- To Create an Excellent Design System, Treat It Like a Collaborative Process · · design-systems, processes, collaboration
- Top Ten Most Common Web Accessibility Issues · · accessibility
- A Pipe Operator for JavaScript: Introduction and Use Cases · · introductions, javascript, operators
- WebAssembly Feature Detection · · webassembly, feature-detection, support
- Naming Design Tokens · · design-tokens, naming
- The Double-Assignment Pattern in jQuery’s Source Code · · jquery, javascript
- What’s New in DevTools? · · dev-tools, user-agents, google, chrome, microsoft, edge, apple, safari, mozilla, firefox
- The Return of Server Side Routing · · routing
- Design System: How to Efficiently Scale Development? · · how-tos, design-systems, scaling
- How to Convert Markdown to HTML · · how-tos, markdown, html, conversion
- Overview of Accessibility Testing Using DevTools · · overviews, dev-tools, accessibility, testing, user-agents, microsoft, edge
- Fancy CSS Borders Using Masks · · css, borders, decoration, masking
- The Baseline for Web Development in 2022 · · user-agents, support, interoperability, web-platform, libraries, frameworks, comparisons
- Here’s What I Didn’t Know About “:where()” · · css, selectors
- An Introduction to CSS Cascade Layers · · introductions, css, cascade
- Best Practices for Creating Your UX Design Portfolio · · user-experience, design, career, best-practices
- Foundations: Text Descriptions · · accessibility, writing
- Monorepo Explained · · websites, monorepos
- Why Don’t Developers Take Accessibility Seriously? · · accessibility
- The Risks and Rewards of App Modernization · · maintenance, modernization, quality
- More to Give Than Just the Div: Semantics and How to Get Them Right · · html, semantics, accessibility
- Drift: Why Your Design System Isn’t Working · · design-systems, design-debt
- Technology Time-Outs · · processes, productivity
- The Many Ways to Modify Leading and Trailing Characters from Strings With JavaScript · · javascript
- Context-Aware Web Components Are Easier Than You Think · · web-components, html, javascript
- How to Check What Item Is in Focus When Accessibility Testing · · how-tos, accessibility, testing, focus
- Accessibility Acceptance Criteria · · websites, accessibility, testing, components
- Big Images, Blazingly Fast · · performance, images, quality
- Div Divisiveness · · html, semantics
- Optimize Your PNGs With Oxipng and pre-commit · · images, png, performance, compression, tooling
- The Future of CSS: Detect At-Rule Support With “@ supports at-rule(@ keyword)” · · css, support
- Frontend Predictions for 2022 · · visions, micro-frontends, tech-stacks, jamstack, progressive-enhancement
- Design Systems Are Flawed · · design-systems
- Giving Web Standards a Seat at the Table · · standards, history
- What Should Someone Learn About CSS If They Last Boned Up During CSS3? · · css
- How to Avoid Layout Shifts Caused by Web Fonts · · how-tos, performance, user-experience, fonts
- Create an Open Graph Image Generator With Node.js · · nodejs, open-graph, images
- The Breakpoints We Tested in 2021 and 2022, and the Ones to Test in 2023 · · responsive-design, css
- How to Set Up a Node.js Project With TypeScript · · how-tos, nodejs, typescript
- An Introduction to High Contrast Accessibility · · introductions, accessibility, colors, contrast
- Making IT Accessible for All! · · videos, accessibility
- Naming Conventions for Your Design System · · design-systems, naming, conventions
- Quick Accessibility Tests Anyone Can Do · · accessibility, user-experience, testing
- TypeScript Features to Avoid · · typescript
- Building UI Components With SVG and CSS · · components, svg, css
- Using PostCSS With Media Queries Level 4 · · css, tooling, media-queries
- Becoming a Better Writer as a Software Engineer · · writing, career
- Modern Fluid Typography Using CSS Clamp · · css, typography
- Rethinking Component Libraries · · components
- Comparing CSS Specificity Values · · css, cascade
- Find HTML Parsing Errors · · user-agents, dev-tools, html, parsing, quality
- Frontend Challenges: Front-End Engineer Assignment · · react, javascript, typescript, training
- On the Peculiarities of Counting the Number of HTML Elements · · html
- The Real Added Costs of Accessibility · · accessibility, economics
- “structuredClone()”: Deeply Copying Objects in JavaScript · · javascript, objects
- Choosing Open Source License Wisely · · open-source, licensing
- Accessibility Data Is Not the Enemy · · accessibility, metrics
- CSS Cascade Layers: An Overview of the New “@ layer” and “layer()” CSS Primitives · · videos, overviews, css, cascade
- Building an Accessible Digital World · · accessibility
- Rationalise It! 5 Steps to Introduce a New Component to the Design System · · design-systems, components
- Accessibility and 2022: 13 Design Trends from a Usability Perspective · · accessibility, design, trends, usability
- Git Organized: A Better Git Flow · · git, command-line, processes
- Boolean Attributes in HTML and ARIA: What’s the Difference? · · html, aria
- Web Accessibility Lawsuits Dramatically Rose in 2021 · · accessibility, conformance, legal
- Website Performance and the Planet · · performance, sustainability, caching
- An Introduction to Tech Debt (and Why It Can Change Your Career) · · introductions, technical-debt, career
- Make Beautiful Gradients · · css, gradients
- PHP in 2022 · · php
- Remix vs. Next.js · · remix, nextjs, comparisons
- Social Media Image Sizes 2022: Cheat Sheet for Every Network · · cheat-sheets, social-media, images
- Software Is Automating Design—What Does That Mean for Designers? · · design, automation
- Revisiting Why Hyperlinks Are Blue · · design, links
- A Deep CSS Dive into Radial and Conic Gradients · · css, gradients
- Don’t Fight the Cascade, Control It! · · css, cascade
- How Not to Learn TypeScript · · typescript
- Writing With Respect · · writing
- Alt Tag Emptiness · · accessibility, html, images, alt-text, aria
- Foundations: Animations and Flashing Content · · accessibility, animations
- HTML Is General, ARIA Is Specific · · html, aria
- Memory Leaks, How to Avoid Them in a React App · · how-tos, memory, react
- Ban Embed Codes · · embed-code
- Your CSS Reset Needs “text-size-adjust” (Probably) · · css, resetting
- Two Ways to Clear an Array With Vanilla JavaScript · · javascript, arrays
- 22 Smart Google SEO Tips for 2022 · · seo, google, tips-and-tricks
- Labeling the Point: Scenarios of Label Misuse in WCAG · · accessibility, wcag, html
- Reduce the Pressure on Young and Inexperienced Developers · · career, training
- How to Measure Your Design System? · · how-tos, design-systems, metrics
- Memory Leaks: The Forgotten Side of Web Performance · · performance, memory
- Styling Strategies Using Typography · · typography
- The 6 Most Important CSS Concepts for Beginners · · videos, css
- The Good, the Bad, and the Toggle · · design, forms
- CSS Underlines Are Too Thin and Too Low in Chrome · · css, user-agents, google, chrome
- 30 Frontend Tips · · career, tips-and-tricks
- Fetch Commit Logs of Certain Function or Method in Git · · git, command-line
- Imperative vs. Declarative Programming · · videos, programming, comparisons
- The Web Doesn’t Have Version Numbers · · versioning, web
- Accessible Heading Structure · · accessibility, html, headings
- 8 Techniques to Write Cleaner JavaScript Code · · javascript
- Responsive Image Gallery With Animated Captions · · images, css, animations, responsive-design, examples
- How Flexbox Works · · css, layout
- A Contrast of Errors · · accessibility, wcag, colors, contrast
- Five 2022 Accessibility Trends · · accessibility, trends
- A Unified Theory of Web Performance · · performance
- Exposing Mid-Resource LCP Values · · performance, web-vitals
- Image Magnifier Using Only One Line of CSS · · css, images
- Page Visibility: If a Tree Falls in the Forest… · · performance, web-vitals, user-experience
- Add Less · · simplicity
- pkg.land · · websites, packages, npm
- Using Diagnostic Metrics · · performance, metrics
- Empathetic Animation · · animations, user-experience
- WCAG and Accessibility: What Is a Statement of Partial Conformance? · · accessibility, wcag, conformance
- Practical Tips for Load-Testing Web Applications · · performance, testing, tips-and-tricks, web-apps
- Shedding Light on Fiverr’s Dark Mode Creation Process · · design, dark-mode
- Add a Service Worker to Your Site · · web-workers, javascript
- CSS in 2022 · · css
- Web Accessibility Cheat Sheet · · accessibility, cheat-sheets
- The Business Case for Performance · · performance, economics
- 1000+ Web Development Resources · · link-lists
- Faster Websites by Using Less HTML · · cross-posted, html, performance, optimization, minimalism
- 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
- CSS Animation · · css, animations
- CSS Snapshot 2021 · · css
- Make Joyful Things · · user-experience
- Building a Greener Web · · sustainability
- 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
- 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
- 5 Common Misconceptions About WAI-ARIA and Accessibility · · accessibility, aria, html
- 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
- Don’t Start With Microservices in Production—Monoliths Are Your Friend · · microservices, monoliths, architecture
- Hands On With the New Responsiveness Metrics · · performance, responsive-design, metrics
- 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