Metablog

Auto-Growing Inputs & Textareas

By default, and elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS <span class="text-muted"> | </span> <a href="https://css-tricks.com/auto-growing-inputs-textareas/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/did-you-know-the-ordered-list-element-has-start-and-reversed-attributes/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73022335&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2018%252F05%252Fcustom-list-style.jpg%253Fssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Did You Know the Ordered List Element Has Start and Reversed Attributes?</h2> </header> <p> I sure didn't! Tomek Sułkowsi shows how we can reverse the numbering of ordered lists with a simple HTML attribute: <ol reversed> <span class="text-muted"> | </span> <a href="https://css-tricks.com/did-you-know-the-ordered-list-element-has-start-and-reversed-attributes/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/emojis-as-favicons/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73022127&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Ffavicon-emoji-svg.png%253Ffit%253D1706%25252C1138%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Emojis as Favicons</h2> </header> <p> Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck <span class="text-muted"> | </span> <a href="https://css-tricks.com/emojis-as-favicons/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/indicating-scroll-position-on-a-page-with-css/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73021739&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fscroll-indicators-sections.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Indicating Scroll Position on a Page With CSS</h2> </header> <p> Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s <span class="text-muted"> | </span> <a href="https://css-tricks.com/indicating-scroll-position-on-a-page-with-css/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/performance-links/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73021741&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2019%252F08%252Fwebsite-lightning.png%253Fssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Performance Links</h2> </header> <p> I've had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They <span class="text-muted"> | </span> <a href="https://css-tricks.com/performance-links/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/different-favicon-for-development/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73020489&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Ffavicons.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Different Favicon for Development</h2> </header> <p> I bet a lot of us tend to have the production website and the development website up simultaneously a lot. It's almost a developer cliché at this point to <span class="text-muted"> | </span> <a href="https://css-tricks.com/different-favicon-for-development/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73019449&url=https%253A%252F%252Fi1.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Freact-firebase-chat.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Building a Real-Time Chat App with React and Firebase</h2> </header> <p> In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth <span class="text-muted"> | </span> <a href="https://css-tricks.com/building-a-real-time-chat-app-with-react-and-firebase/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/auto-archival/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73015417&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fwayback-machine.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Auto-Archival</h2> </header> <p> I'm sure most of us have used the ol' Wayback Machine to access some site that's gone offline. I don't actually know how it decides what sites to archive <span class="text-muted"> | </span> <a href="https://css-tricks.com/auto-archival/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/neumorphism-and-css/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73014417&url=https%253A%252F%252Fi0.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fneumorphism-featured.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Neumorphism and CSS</h2> </header> <p> Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal <span class="text-muted"> | </span> <a href="https://css-tricks.com/neumorphism-and-css/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/react-suspense-in-practice/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73012925&url=https%253A%252F%252Fi1.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fsuspense-all-loading.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">React Suspense in Practice</h2> </header> <p> This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate <span class="text-muted"> | </span> <a href="https://css-tricks.com/react-suspense-in-practice/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/consistent-backends-and-ux-what-are-the-barriers-to-adoption/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73012413&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F02%252Fbikefail.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Consistent Backends and UX: What are the Barriers to Adoption?</h2> </header> <p> There are very few scenarios in which an eventually consistent database is preferable over a strongly consistent database. Further, in a multi-region application scenario where scaling is necessary, choosing either an undistributed database or an eventually consistent database is … <span class="text-muted"> | </span> <a href="https://css-tricks.com/consistent-backends-and-ux-what-are-the-barriers-to-adoption/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/a-few-background-patterns-sites/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73011245&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fchevron-pattern-1024x512.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">A Few Background Patterns Sites</h2> </header> <p> If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember <span class="text-muted"> | </span> <a href="https://css-tricks.com/a-few-background-patterns-sites/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/what-does-playsinline-mean-in-web-video/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73011141&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fparty-on-wayne.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">What Does `playsinline` Mean in Web Video?</h2> </header> <p> I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is <span class="text-muted"> | </span> <a href="https://css-tricks.com/what-does-playsinline-mean-in-web-video/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/playing-with-particles-using-the-web-animations-api/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73010307&url=https%253A%252F%252Fi0.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fsparkles.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Playing With Particles Using the Web Animations API</h2> </header> <p> When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always <span class="text-muted"> | </span> <a href="https://css-tricks.com/playing-with-particles-using-the-web-animations-api/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73008991&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fcalc-guide.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">A Complete Guide to calc() in CSS</h2> </header> <p> CSS has a special calc() function for doing basic math. Here's an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } In <span class="text-muted"> | </span> <a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/tools-for-optimizing-svg/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73008791&url=https%253A%252F%252Fi0.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fsvg-services.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Tools for Optimizing SVG</h2> </header> <p> Command Line Tools The biggest (and maybe only?) player in this space: SVGO. It's even used under the hood of other tools. Using with a Task Runner <span class="text-muted"> | </span> <a href="https://css-tricks.com/tools-for-optimizing-svg/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73008141&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F02%252Fskip-01.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">How to Create a “Skip to Content” Link</h2> </header> <p> Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re <span class="text-muted"> | </span> <a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/woocommerce-4-0-woocommerce-payments-beta/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73008017&url=https%253A%252F%252Fi0.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fwc-4.png%253Ffit%253D1424%25252C793%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">WooCommerce 4.0 & WooCommerce Payments Beta</h2> </header> <p> Y'all know WooCommerce: it's a plugin for WordPress that adds robust eCommerce functionality to your site. Notably, like WordPress itself, it's <span class="text-muted"> | </span> <a href="https://css-tricks.com/woocommerce-4-0-woocommerce-payments-beta/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/how-to-make-repeating-border-images/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73006015&url=https%253A%252F%252Fi1.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fembroidery.png%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">How to Make Repeating Border Images</h2> </header> <p> I just saw this cool little site from Max Bittker: broider. You design an image on a 9-slice grid (except the middle part) and it will produce an image <span class="text-muted"> | </span> <a href="https://css-tricks.com/how-to-make-repeating-border-images/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/build-a-node-js-tool-to-record-and-compare-google-lighthouse-reports/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73006017&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Freport-numbers.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Build a Node.js Tool to Record and Compare Google Lighthouse Reports</h2> </header> <p> In this tutorial, I’ll show you step by step how to create a simple tool in Node.js to run Google Lighthouse audits via the command line, save the reports <span class="text-muted"> | </span> <a href="https://css-tricks.com/build-a-node-js-tool-to-record-and-compare-google-lighthouse-reports/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/get-started-building-graphql-apis-with-node/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=73001105&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fgraphql-node.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Get Started Building GraphQL APIs With Node</h2> </header> <p> We all have a number of interests and passions. For example, I’m interested in JavaScript, 90’s indie rock and hip hop, obscure jazz, the city of <span class="text-muted"> | </span> <a href="https://css-tricks.com/get-started-building-graphql-apis-with-node/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/programming-sass-to-create-accessible-color-combinations/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72998935&url=https%253A%252F%252Fi0.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Fcontrast-colors.jpg%253Ffit%253D1200%25252C600%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Programming Sass to Create Accessible Color Combinations</h2> </header> <p> We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed. <span class="text-muted"> | </span> <a href="https://css-tricks.com/programming-sass-to-create-accessible-color-combinations/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/consistent-backends-and-ux-what-can-go-wrong/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72998937&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F02%252Funidragon2.png%253Ffit%253D1024%25252C748%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Consistent Backends and UX: What Can Go Wrong?</h2> </header> <p> Article Series Why should you care?What can go wrong?What are the barriers to adoption? (Coming soon)How do new algorithms help? (Coming soon) In the <span class="text-muted"> | </span> <a href="https://css-tricks.com/consistent-backends-and-ux-what-can-go-wrong/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/words-avoid-educational-writing/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72996843&url=https%253A%252F%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2014%252F03%252Fcss-tricks-star.png'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Words to Avoid in Educational Writing</h2> </header> <p> I'm no English major, but as a writer and consumer of loads of educational (mostly tech) writing, I've come to notice a number of words and phrases that <span class="text-muted"> | </span> <a href="https://css-tricks.com/words-avoid-educational-writing/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/how-to-make-a-line-chart-with-css/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72996693&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F02%252Fline-chart.png%253Fssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">How to Make a Line Chart With CSS</h2> </header> <p> Line, bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use <span class="text-muted"> | </span> <a href="https://css-tricks.com/how-to-make-a-line-chart-with-css/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/fluid-width-video/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72996697&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252Ffluid-width-video.png%253Ffit%253D1464%25252C902%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Fluid Width Video</h2> </header> <p> IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video <span class="text-muted"> | </span> <a href="https://css-tricks.com/fluid-width-video/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72995371&url=https%253A%252F%252Fi2.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2019%252F04%252Fcards-featured.jpg%253Fssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Block Links Are a Pain (and Maybe Just a Bad Idea)</h2> </header> <p> As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let's call that a "block link." Like you <span class="text-muted"> | </span> <a href="https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/considerations-when-choosing-fonts-for-a-multilingual-website/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72994695&url=https%253A%252F%252Fi1.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2018%252F05%252Ftypography.png%253Fssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Considerations When Choosing Fonts for a Multilingual Website</h2> </header> <p> As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases <span class="text-muted"> | </span> <a href="https://css-tricks.com/considerations-when-choosing-fonts-for-a-multilingual-website/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 left"> <a href="https://css-tricks.com/make-yourself-a-little-api-with-netlify-functions/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72994697&url=https%253A%252F%252Fi1.wp.com%252Fcss-tricks.com%252Fwp-content%252Fuploads%252F2020%252F03%252FScreen-Shot-2020-03-10-at-7.32.14-AM.png%253Ffit%253D1400%25252C700%2526ssl%253D1'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Make Yourself a Little API With Netlify Functions</h2> </header> <p> Here's an example of a nice little use case for cloud functions. Glitch has this great package of friendly words. Say you wanted to randomly generate <span class="text-muted"> | </span> <a href="https://css-tricks.com/make-yourself-a-little-api-with-netlify-functions/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article>  <article class="container box style1 right"> <a href="https://css-tricks.com/adventures-in-css-semi-transparency-land/" class="image fit"> <div style="background-image: url('/imageurl?width=800&id=72992391&url=http%253A%252F%252FmyImage.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 100%"> </div> </a> <div class="inner"> <header> <h2 class="tt-none">Adventures in CSS Semi-Transparency Land</h2> </header> <p> Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with <span class="text-muted"> | </span> <a href="https://css-tricks.com/adventures-in-css-semi-transparency-land/" target="_blank" href="">Continue reading</a> </p> <hr> <a class="img" href="/latest?query=%2Cfacet_who%3Acss-tricks.com"> <div class="item-avatar"> <div lazy-load class="inner-avatar-placeholder" data-original="/imageavatarurl?width=64&url=https%253A%252F%252Fcss-tricks.com%252Fapple-touch-icon.png&username=%40css-tricks.com"> </div> </div> </a> <small> @css-tricks.com <span class="text-muted"> | 4 years ago</span> </small> </div> </article> <section id="footer"> <div class="icons"> <h2>Page 31</h2> <ul> <li class="page-item"> <a title="Go to first page" class="page-link track-fragment" href="?query=,facet_who:css-tricks.com&page=1"><i class="icon fa-angle-double-left"></i> First</a> </li> <li class="page-item"> <a title="Go to previous page" class="page-link track-fragment" href="?query=,facet_who:css-tricks.com&page=30"><i class="icon fa-angle-left"></i> Prev</a> </li> <li class="page-item"> <a title="Go to next page" class="page-link track-fragment" href="?query=,facet_who:css-tricks.com&page=32"><i class="icon fa-angle-right"></i> Next</a> </li> <li class="page-item"> <a title="Go to last page" class="page-link track-fragment" href="?query=,facet_who:css-tricks.com&page=45"><i class="icon fa-angle-double-right"></i> Last</a> </li> </ul> </div> <hr> <div class="copyright"> <ul class="menu"> <li> © 2005-2025 <a target="_blank" href="https://in-two.com">IN2</a> </li> <li> <a href="mailto:metablog@in-two.com"><span class="label">Say hello</span></a> </li> <li> Design: <a href="http://html5up.net">HTML5 UP</a> </li> </ul> </div> </section>  <script src="/public/templates/overflow/assets/js/jquery.min.js"></script> <script src="/public/templates/overflow/assets/js/jquery.scrolly.min.js"></script> <script src="/public/templates/overflow/assets/js/jquery.poptrox.min.js"></script> <script src="/public/templates/overflow/assets/js/browser.min.js"></script> <script src="/public/templates/overflow/assets/js/breakpoints.min.js"></script> <script src="/public/templates/overflow/assets/js/util.js"></script> <script src="/public/templates/overflow/assets/js/main.js"></script>  <script src="/public/javascripts/vendor.dist.js"></script> <script src="/public/javascripts/app_frontend.dist.js"></script> <script type="text/javascript"> angular.module('Frontend').factory('APIPaths', function() { return { getGetConnectedSetsPath : function(options) {var pattern = '/organise/api/sets/connected?itemId=:itemId';for(key in options) {var val = options[key];pattern = pattern.replace(':' + encodeURIComponent(key), ( (val===undefined || val===null)?'': val));}return pattern;} , getCheckUniqueUsernamePath : function(options) {var pattern = '/check/unique/username';for(key in options) {var val = options[key];pattern = pattern.replace(':' + encodeURIComponent(key), ( (val===undefined || val===null)?'': val));}return pattern;} , getCheckUniqueEmailPath: function(options) {var pattern = '/check/unique/email';for(key in options) {var val = options[key];pattern = pattern.replace(':' + encodeURIComponent(key), ( (val===undefined || val===null)?'': val));}return pattern;} , getCheckExistsEmailPath: function(options) {var pattern = '/check/exists/email';for(key in options) {var val = options[key];pattern = pattern.replace(':' + encodeURIComponent(key), ( (val===undefined || val===null)?'': val));}return pattern;} , getRecordConsentPath: function(options) {var pattern = '/application/consent';for(key in options) {var val = options[key];pattern = pattern.replace(':' + encodeURIComponent(key), ( (val===undefined || val===null)?'': val));}return pattern;} } }) </script> <script> (function(w,d,t,u,n,a,m) { w['MauticTrackingObject']=n; w[n] = w[n] || function() { (w[n].q = w[n].q || []).push(arguments) }, a = d.createElement(t), m = d.getElementsByTagName(t)[0] a.async=1; a.src=u; m.parentNode.insertBefore(a,m) }) (window,document,'script','https://mautic.in-two.com/mtc.js','mt'); mt('send', 'pageview'); </script>  <script defer data-domain="metablog.co" src="https://plausible.in-two.com/js/plausible.js"></script> </body> </html>

Metablog

Getting JavaScript to Talk to CSS and Sass

Accessibility Links

Why Do Some HTML Elements Become Deprecated?

Web Performance Checklist

Cloudinary Studio

Performant Expandable Animations: Building Keyframes on the Fly

How to build a bad design system

APIs and Authentication on the Jamstack

RSS Stuff

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

Creating an Editable Site with Google Sheets and Eleventy

Get Static

Consistent Backends and UX: How Do New Algorithms Help?

How to Repeat Text as a Background Image in CSS Using element()

Add Beautiful Images with the Unsplash API

Value Bubbles for Range Inputs

How to Animate Text with SVG and CSS

An Introduction to MDXJS

Auto-Growing Inputs & Textareas