Give Your Eleventy Site Superpowers With Environment Variables (bel/css) | | 575 |
eleventy, environments, variables |
A Practical Introduction to Dependency Injection (sma) | | 574 |
introductions, javascript, maintainability |
Ethical Design Guide | | 573 |
websites, guides, design |
HTML and CSS Techniques to Reduce Your JavaScript | | 572 |
html, css, javascript, performance |
Integrating TypeScript With Svelte (ada/css) | | 571 |
svelte, typescript |
What’s Coming to Vuex? (sma) | | 570 |
vuejs, state-management, libraries |
The Art of Leadership | | 569 |
leadership |
Continuous Performance Analysis With Lighthouse CI and GitHub Actions (css) | | 568 |
performance, lighthouse, google, github-actions |
Symbols to Copy | | 567 |
tooling, typography |
Using “throw” as an Expression in PHP 8 (ami) | | 566 |
php |
WordPress Cookies (wpe) | | 565 |
wordpress, cookies |
CSS Snapshot 2020 (tab+/w3c) | | 564 |
css, standards |
“Yes or No?” (chr/css) | | 563 |
forms, html, comparisons |
A Beginner’s Guide to Webpack | | 562 |
guides, webpack |
Get Up to Speed With Partial Clone and Shallow Clone (sto/git) | | 561 |
git |
How the Web Is Really Built (lea/css) | | 560 |
tech-stacks, jquery, wordpress |
Ignore AMP (j9t) | | 559 |
google, amp |
Optimizing Image Depth (mey/css) | | 558 |
images, quality, performance, optimization |
I Learned to Love the Same-Origin Policy (eee/css) | | 557 |
security, cors |
Meet Redwood, a Full-Stack, Serverless Jamstack Framework | | 556 |
frameworks, redwoodjs, jamstack |
W3C in 2020 (koa/w3c) | | 555 |
w3c, standards, retrospectives |
Why You Should Self-Host Google Fonts in 2021 | | 554 |
google, fonts |
What’s New in WCAG 2.1: Label in Name (css) | | 553 |
accessibility, wcag, aria |
Debugging CSS (chr/css) | | 552 |
books, css, debugging |
Netlify and Next.js (chr/css) | | 551 |
netlify, nextjs |
The Shorthand–Longhand Problem in Atomic CSS (rob) | | 550 |
css, shorthands, cascade, atomic-css, css-in-js |
How and Why to Use Lynx—the Faster Web Browser (ede) | | 549 |
lynx, browsers |
Make It Personal (mat/css) | | 548 |
blogging, career |
JavaScript (tka/htt) | | 547 |
web-almanac, studies, research, metrics, javascript |
Page Weight (htt) | | 546 |
web-almanac, studies, research, metrics, performance |
Accessibility (htt) | | 545 |
web-almanac, studies, research, metrics, accessibility |
CSS (lea+/htt) | | 544 |
web-almanac, studies, research, metrics, css |
Houdini.how (una/dev) | | 543 |
websites, css, apis, houdini |
How to Create a Favicon That Changes Automatically (css) | | 542 |
how-tos, favicons, data-urls, javascript |
Is Edge Computing Secure? Here Are 4 Security Risks to Be Aware Of | | 541 |
edge-computing, security |
“npm ruin dev” (ada/css) | | 540 |
html, css, javascript, nodejs, npm |
TLS and mTLS Demystified | | 539 |
security, tls, protocols |
Notes on Zsh and Oh My Zsh (spe) | | 538 |
shell, oh-my-zsh |
Very Extremely Practical CSS Art (mia/css) | | 537 |
css, art |
The Power of Web Development Outside Tech (css) | | 536 |
career, lessons |
Notes on HTML 3.2 (j9t) | | 535 |
html |
Command Line Interface Guidelines | | 534 |
websites, guidelines, command-line |
How to Display the Last Build Date in Eleventy (ste) | | 533 |
how-tos, eleventy |
CommonMark: A Formal Specification for Markdown (sma) | | 532 |
markdown, content, documentation |
Happier HTML5 Form Validation in Vue (chr/css) | | 531 |
html, forms, validation, css, selectors, vuejs |
How to Make an Area Chart With CSS (css) | | 530 |
how-tos, css, clipping, visualization |
Minimal Takes on Faking Container Queries (chr/css) | | 529 |
container-queries, web-components, javascript, css |
The Internet’s Server-Based Infrastructure Is Ushering Us Through the Pandemic—Here’s How the W3C Is Helping | | 528 |
web, servers, w3c, standards |
Alt vs. Figcaption (tho) | | 527 |
html, accessibility, comparisons |
Why Choose TYPO3 CMS for Your Website | | 526 |
videos, typo3, content-management |
Native CSS Masonry Layout in CSS Grid (chr/css) | | 525 |
css, layout, masonry, grids |
The State of UX: 100 Design Lessons for 2021 (fab/uxd) | | 524 |
user-experience, design, outlooks |
Time to Say Goodbye to Google Fonts: Cache Performance | | 523 |
google, fonts, caching, performance |
Weaving Web Accessibility With Usability (sma) | | 522 |
accessibility, usability, testing |
Information Scent | | 521 |
videos, links, usability, information-scent |
Considerations for Making a CSS Framework (css) | | 520 |
css, frameworks, theming |
Why It’s Good for Users That HTML, CSS, and JS Are Separate Languages (hdv) | | 519 |
html, css, javascript |
Know Your Standards (ste) | | 518 |
accessibility, standards, wcag, aria, html, link-lists |
Testing Vue Applications With the Vue Testing Library (sma) | | 517 |
vuejs, testing, tooling |
To Be Creative, Practice | | 516 |
design, creativity |
Best Practices for Inclusive Textual Websites | | 515 |
security, performance, accessibility, best-practices |
DRY-ing Up styled-components (css) | | 514 |
components, css, maintainability |
Leveraging System Fonts on the Web (jim) | | 513 |
fonts |
CSS Vendor Prefixes | | 512 |
css, vendor-extensions |
Color Theming With CSS Custom Properties and Tailwind (mic/css) | | 511 |
theming, colors, css, custom-properties, tailwind |
“console.log({ myVariable });” (chr/css) | | 510 |
javascript, console |
Standardizing Select and Beyond: The Past, Present, and Future of Native HTML Form Controls (sea/sma) | | 509 |
html, forms |
A GitHub Action for Automated Deployment to WP Engine (clo) | | 508 |
github, deploying, automation, wordpress, wp-engine |
Measuring Core Web Vitals With Sentry (fon/css) | | 507 |
performance, web-vitals, tooling |
Semantic Web With Structured Data | | 506 |
semantic-web, json, structured-data |
Upgrade Your HTML II (j9t/fro) | | 505 |
books, frontend-dogma, html, minimalism, craft, conformance |
Creating a Continuous Integration Test Workflow Using GitHub Actions (sma) | | 504 |
nodejs, ci-cd, github-actions |
CSS Gradients Guide (geo/css) | | 503 |
guides, css, gradients |
How to Deal With Common React JS Problems—Actionable Tips | | 502 |
how-tos, react, tips-and-tricks |
New WebKit Features in Safari 14 (jon/web) | | 501 |
release-notes, safari, apple, browsers, webkit |
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format | | 500 |
webp, images, google |
Abandoning Best Practices in UX | | 499 |
videos, user-experience, usability, best-practices |
What’s New in Vue 3? (sma) | | 498 |
vuejs |
Warp: Improved JS Performance in Firefox 83 (jan/moz) | | 497 |
firefox, mozilla, browsers, javascript, performance, spidermonkey, javascript-engines |
Career Opportunities Mean a Lot of Things (kar) | | 496 |
career |
No Config for Old Men | | 495 |
configuration |
The What, Why, and How of Using a Skeleton Loading Screen (tre) | | 494 |
placeholders, performance, react |
Authenticating React Apps With Auth0 (sma) | | 493 |
react, authentication, tooling, auth0 |
My WordPress Comments Wishlist (chr/css) | | 492 |
wordpress, blogging, wish-lists |
ARIA in CSS (chr/css) | | 491 |
css, aria |
Markup (j9t+/htt) | | 490 |
web-almanac, studies, research, metrics, html |
The Raven Technique: One Step Closer to Container Queries (css) | | 489 |
css, container-queries, techniques |
Webmentions and Eleventy Talk (sia) | | 488 |
slides, webmentions, eleventy |
Write Better Code and Be a Better Programmer by Avoiding “else” Statements | | 487 |
programming, best-practices |
[JavaScript] Operator Lookup (jos) | | 486 |
javascript, operators |
How to Find and Fix Common Website Accessibility Issues (kil) | | 485 |
how-tos, accessibility, contrast, color-blindness, colors, responsive-design, quality |
Quick localStorage Usage in Vue (sar/css) | | 484 |
vuejs, browser-storage |
Internationalization and Localization for Static Sites (sma) | | 483 |
internationalization, localization, site-generators |
GIFs and “prefers-reduced-motion” (chr/css) | | 482 |
images, gif, reduced-motion, html |
Chasing the Pixel-Perfect Dream (jos) | | 481 |
design, css |
Native CSS Masonry Layout in CSS Grid (rac/sma) | | 480 |
css, masonry, grids, layout |
What Is Section 508 and Why Does It Matter? (deq) | | 479 |
accessibility, legal, section-508 |
In Defense of Tables and Floats in Modern Day Development (css) | | 478 |
html, css, floats, tables |
The Principles of Visual Communication (sma) | | 477 |
design, communication, principles, examples |
Bootstrap vs. Materialize Showdown | | 476 |
bootstrap, materialize, comparisons, frameworks |
Are Template Engines Still Relevant in 2020? | | 475 |
discussions, template-engines, pug, nunjucks, handlebars |
More on “content-visibility” (chr/css) | | 474 |
css |
Authentication in Vue.js (sma) | | 473 |
vuejs, authentication |
Comparing Various Ways to Hide Things in CSS (css) | | 472 |
accessibility, css, hiding, comparisons |
Selecting Random Posts in Eleventy (ray) | | 471 |
eleventy, randomness |
WordPress and Jamstack (chr/css) | | 470 |
wordpress, jamstack, netlify |
A General Introduction to Cloud Computing | | 469 |
introductions, cloud-computing, concepts, history |
Getting Started With Next.js (sma) | | 468 |
introductions, nextjs, react |
A Primer on the Different Types of Browser Storage (ido/css) | | 467 |
introductions, browser-storage, indexeddb, databases, apis, cookies, caching |
Smarter Ways to Generate a Deep Nested HTML Structure (ana/css) | | 466 |
html, php, pug |
Touch, Point, Click: Mouse vs. Touch Screen Input | | 465 |
accessibility, interaction-design, comparisons |
Comparing Styling Methods in 2020 (chr/css) | | 464 |
css, sass, less, stylus, postcss, modules, css-in-js, presentational-html, comparisons |
Handling Continuous Integration and Delivery With GitHub Actions (sma) | | 463 |
ci-cd, github-actions, heroku, deploying, automation |
Come Full Circle—Back to HTML | | 462 |
code-editors, vi+vim, neovim, html |
New Google Quality Rater Guidelines, Update Adds Emphasis on Needs Met | | 461 |
guidelines, seo, quality, google |
Core Web Vitals: A Guide to Google’s Web Performance Metrics (cra) | | 460 |
guides, google, web-vitals, performance |
How to Test Responsive Web Design Cross-Browser Compatibility (cra) | | 459 |
how-tos, testing, responsive-design, browsers, support |
An Opinionated Guide to Accessibility Testing | | 458 |
guides, accessibility, testing |
CSS “min()”, “max()”, and “clamp()” (una/dev) | | 457 |
css, functions, typography |
Signed Exchanges (SXGs) (twi/dev) | | 456 |
authentication, signed-exchanges, web-packaging, performance |
An Introduction to JSX | | 455 |
introductions, jsx |
Run Gulp as You Open a VS Code Project (chr/css) | | 454 |
gulp, vs-code, microsoft, code-editors |
The “--var: ;” Hack to Toggle Multiple Values With One Custom Property (lea) | | 453 |
css, custom-properties, hacks, toggles |
What Apple, Google, and Amazon’s Websites Looked Like in 1999 (mas) | | 452 |
design, history |
Node.js Testing Best Practices | | 451 |
nodejs, testing, best-practices, examples |
What Can We Learn From the W3C CMS Selection Process | | 450 |
w3c, tooling, content-management, lessons |
Getting Started With React: A Beginner’s Guide | | 449 |
introductions, guides, react, jsx |
How to Find the Cause of Horizontal Scrollbars (kil/pol) | | 448 |
how-tos, css, overflow, debugging, scrolling |
Apache Configuration Basics | | 447 |
fundamentals, servers, apache, configuration |
How to Design a Set of Icons | | 446 |
design, icons, images |
The Widening Responsibility for Front-End Developers (chr/css) | | 445 |
career, craft, tech-stacks |
Tuning Your Apache Server | | 444 |
apache, servers, optimization, configuration |
A Guide to HTML and CSS Forms (No Hacks) | | 443 |
guides, html, css, forms |
CSS Variables 101 (sha) | | 442 |
css, custom-properties |
GitLab vs. GitHub—a Comparison of the Two Version Control Systems | | 441 |
version-control, gitlab, github, comparisons |
How to Create High-Performance CSS Animations (rac/dev) | | 440 |
how-tos, css, animations, performance |
Micro-Note on “aria-roledescription” (ste) | | 439 |
accessibility, aria |
Compile Svelte in Your Head | | 438 |
svelte, compiling, javascript |
Reading Content With RSS | | 437 |
rss, syndication |
Should Coding Be Mandatory? (ara) | | 436 |
programming, training, career |
CSS Media Queries Guide (css) | | 435 |
guides, css, media-queries |
Reducing the Site Speed Impact of Third-Party Tags | | 434 |
performance, embed-code |
Unit Testing in React Native Applications (sma) | | 433 |
react, native, testing |
Webflow vs. WordPress: A Head-to-Head Comparison | | 432 |
webflow, wordpress, content-management, hosting, comparisons |
Why I IndieWeb | | 431 |
indieweb, community |
“font-kerning” (geo/css) | | 430 |
css, kerning, typography |
Building and Running WebKit (mar) | | 429 |
webkit, building |
Accessible Web Animation: The WCAG on Animation Explained (vlh/css) | | 428 |
accessibility, animations, reduced-motion, wcag |
Drawing the Invisible: React Explained in Five Visual Metaphors | | 427 |
videos, react |
Smashing Podcast Episode 25 With Anthony Campolo: What Is RedwoodJS? (dre/sma) | | 426 |
podcasts, interviews, redwoodjs, jamstack |
Custom Properties: Questioning “:root” (j9t) | | 425 |
cross-posts, css, custom-properties |
Enforcing Performance Budgets With Webpack (css) | | 424 |
performance-budgets, performance, webpack |
The Good Web and the Bad Web (kzi) | | 423 |
web, mastodon, javascript |
Vue 3 (chr/css) | | 422 |
vuejs |
[Vue.js] v3.0.0 One Piece (vue) | | 421 |
vuejs, release-notes |
Advanced GraphQL Usage in Gatsby Websites (sma) | | 420 |
gatsby, graphql, javascript |
Generate a Sitemap for Your Eleventy Website | | 419 |
eleventy, sitemaps, seo |
Basic Math in JavaScript—Numbers and Operators (mdn) | | 418 |
javascript, math, operators |
Change the [Eleventy] Default Directories (per) | | 417 |
eleventy |
Mastering Wrapping of Flex Items (mdn) | | 416 |
css, flexbox, layout |
MIME Types (IANA Media Types) (mdn) | | 415 |
mime-types |
npx [Cheatsheet] | | 414 |
npx, nodejs, cheat-sheets |
Animating React Components With GreenSock (sma) | | 413 |
react, gsap, javascript, components, animations |
React With TypeScript: Best Practices | | 412 |
react, typescript, best-practices |
An Introduction to Running Lighthouse Programmatically (sma) | | 411 |
introductions, lighthouse, google, automation |
Creating a Custom Cursor Using CSS? | | 410 |
css, images, svg, cursors |
Getting Started With Eleventy (11ty) | | 409 |
introductions, eleventy, site-generators |
Modifying Specific Letters With CSS and JavaScript (css) | | 408 |
css, javascript |
How CSS Perspective Works (ami/css) | | 407 |
css, transforms, animations |
AVIF Has Landed (jaf) | | 406 |
images, avif, performance, quality, jpeg, webp, svg, png, comparisons |
Eleventy: Escaping Nunjucks Statements in Markdown Code Blocks (mar) | | 405 |
eleventy, nunjucks, markdown, escaping |
How to Automate API Testing With Postman (sma) | | 404 |
how-tos, testing, apis, automation, postman |
Working With JavaScript Media Queries (css) | | 403 |
javascript, media-queries |
Similarity Principle in Visual Design (nng) | | 402 |
design, principles, colors, shapes |
A Brief About Web Browser Wars | | 401 |
browsers, browser-wars, retrospectives |
Building React Apps With Storybook (sma) | | 400 |
react, storybook |
Everything Developers Need to Know About Figma (sma) | | 399 |
figma, processes |
How to Use CSS Grid for Sticky Headers and Footers (ada/css) | | 398 |
css, grids, layout, navigation |
Using “@ property” for CSS Custom Properties (chr/css) | | 397 |
css, custom-properties, houdini |
How the Heck Do I Use Eleventy? The Intro Guide I Wish I Had | | 396 |
introductions, guides, eleventy |
My Experience With Jekyll | | 395 |
jekyll |
Ground Rules for Web Animations (css) | | 394 |
animations, transitions, css |
Copy the Browser’s Native Focus Styles (chr/css) | | 393 |
css, focus |
Adversarial Interoperability (plu) | | 392 |
interoperability, terminology, concepts, link-lists |
A Bit on CI/CD (chr/css) | | 391 |
ci-cd, link-lists |
9 Best CSS Frameworks in 2020 | | 390 |
css, presentational-html, frameworks, bootstrap, foundation, bulma, tailwind, uikit, milligram, pure, tachyons, materialize, comparisons |
Electron 10.0.0 (kee/ele) | | 389 |
release-notes, electron |
How to Create Customer-Centric Landing Pages (sma) | | 388 |
how-tos, landing-pages, content, design |
The Thing With Leading in CSS (mat) | | 387 |
css, typography |
Use Advanced Typography With Local Fonts (tom/dev) | | 386 |
typography, fonts, apis |
Where Does Logic Go on Jamstack Sites? (css) | | 385 |
jamstack |
Why Did Mozilla Remove XUL Add-Ons? | | 384 |
browsers, mozilla, xul |
Run JavaScript When Variable Exists (sea) | | 383 |
javascript, variables |
Loading Third-Party JavaScript (add/dev) | | 382 |
javascript, performance |
Optimize Images With a GitHub Action (chr/css) | | 381 |
images, compression, github-actions |
“this” in JavaScript and TypeScript (dea) | | 380 |
javascript, typescript |
21 Node.js Interview Questions With Solutions | | 379 |
nodejs, interviewing |
Mastering Props and PropTypes in React (sma) | | 378 |
react, props |
Microsoft Will Bid Farewell to Internet Explorer and Legacy Edge in 2021 (ver) | | 377 |
browsers, microsoft, internet-explorer, edge |
The Anti-Reset (to Reset to User Agent Styles) (j9t) | | 376 |
css, resets |
Effective Code Browsing | | 375 |
code-reviews |
A Smashing Guide to the World of Search Engine Optimization (fre/sma) | | 374 |
guides, seo, link-lists |
JS Minification Benchmarks | | 373 |
javascript, minification, metrics |
That’s Just How I Scroll (chr/css) | | 372 |
scrolling, user-experience |
What I Learned by Fixing One Line of CSS in an Open Source Project (css) | | 371 |
css, apple, mobile |
Accessibility in Chrome DevTools (sma) | | 370 |
dev-tools, chrome, google, browsers, accessibility |
Islands Architecture | | 369 |
architecture, html, concepts |
Meet Polypane, a Browser That Makes You Five Times Faster (kil) | | 368 |
polypane, browsers, productivity, developer-experience |
Performance Is an Issue of Equity (clo) | | 367 |
performance, accessibility |
Smashing Podcast Episode 22 With Chris Coyier: What Is Serverless? (chr+/sma) | | 366 |
podcasts, interviews, architecture, serverless |
Better Error Handling in Node.js With Error Classes (sma) | | 365 |
nodejs, javascript, errors |
Difference Between Concurrent Versions System (CVS) and Subversion (SVN) | | 364 |
comparisons, version-control, cvs, svn |
Every Website Is an Essay (fon/css) | | 363 |
design, communication |
“font-weight: 300” Considered Harmful (chr/css) | | 362 |
css, typography, legibility |
HTML for Subheadings and Headings (chr/css) | | 361 |
html, headings |
TypeScript, Minus TypeScript (css) | | 360 |
typescript |
Vue vs. React in 2021: Which Framework to Choose and When | | 359 |
frameworks, vuejs, react, comparisons |
In a Land Before Dev Tools (amb) | | 358 |
dev-tools, browsers |
The Myth of Incentive Alignment (lor) | | 357 |
culture, prioritization, google |
LCARS Website HTML Template | | 356 |
websites, templates |
Five Decades of Access to Tools (lor) | | 355 |
tooling |
SVG Title vs. HTML Title Attribute (chr/css) | | 354 |
svg, html, attributes |
The Renaissance of No-Code for Web Designers (sma) | | 353 |
design, low-and-no-code |
Introduction to Metrics, Monitoring, and Alerting | | 352 |
introductions, metrics, monitoring, alerting |
Updating React at Etsy | | 351 |
case-studies, react, preact, frameworks |
A Bit on Web Component Libraries (chr/css) | | 350 |
web-components, pattern-libraries |
Pausing a GIF With “details”/“summary” (chr/css) | | 349 |
html, disclosure-widgets, gif, images, animations |
Want to Get Better at Code? Teach Someone CSS (css) | | 348 |
css, learning |
Accessibility on the Canvas With JavaScript | | 347 |
accessibility, javascript, canvas |
Happy Birthday Web Fonts! (w3c) | | 346 |
anniversaries, fonts, woff, standards |
The GitHub Profile Trick (chr/css) | | 345 |
github, readme |
Bold on Hover… Without the Layout Shift (chr/css) | | 344 |
css |
Introduction to Memoization in JavaScript (hic) | | 343 |
introductions, memoization, javascript |
How to Use Styled Components in React (sma) | | 342 |
how-tos, react, css-in-js, css, javascript |
Writing Alt Text for Data Visualization | | 341 |
accessibility, images, alt-text, writing, information-design, visualization |
Modern CSS Techniques to Improve Legibility (sma) | | 340 |
css, techniques, legibility, typography |
The Recruitment Confusion Matrix and Your Right to Be Wrong | | 339 |
hiring, metrics |
ReactJS: A Simple Custom Hook | | 338 |
react, hooks |
Creating a Gatsby Site With WordPress Data (css) | | 337 |
gatsby, wordpress |
Levels of Fix (chr/css) | | 336 |
maintenance |
When Do You Use “inline-block”? (chr/css) | | 335 |
css |
Why We Moved a 20-Year-Old Site to Gatsby | | 334 |
gatsby, migrating |
Terminating a Frozen SSH Session | | 333 |
ssh, command-line |
“font-weight: 300” Considered Harmful (and a Fontconfig Workaround) (lis) | | 332 |
css, typography, legibility, unix-like |
10 Modern Layouts in 1 Line of CSS (una/dev) | | 331 |
videos, css, layout |
JSON-LD 1.1 (gke+/w3c) | | 330 |
json-ld, json, standards |
Lazy Loading Images in Svelte (css) | | 329 |
images, lazy-loading, svelte, performance |
Methods of Improving and Optimizing Performance in React Apps (sma) | | 328 |
react, performance, optimization |
Release Notes for Safari Technology Preview 110 (jon/web) | | 327 |
release-notes, safari, apple, browsers |
An Introduction to Stimulus.js (sma) | | 326 |
introductions, frameworks, stimulus |