Your Web News in One Place

Articles by CSS Tricks from November 2020

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
< Return to CSS Tricks details.
03:54 pm GMT - Fri, November 27, 2020
CSS Tricks A Complete State Machine Made With HTML Checkboxes and CSS
State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, ama...
03:11 pm GMT - Thu, November 26, 2020
CSS Tricks Exploring What the Details and Summary Elements Can Do
Weve mentioned before just how great the <details> and <summary> elements are. Theyre great for quickly making accordions that are accessible to touch, mouse, and keyboard input:CodePe...
03:07 pm GMT - Thu, November 26, 2020
CSS Tricks Three Things You Didnt Know About AVIF
AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if br...
09:40 pm GMT - Wed, November 25, 2020
CSS Tricks Tailwind versus BEM
Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don’t have to hate or love everything. Baby bear thinking, I like to say. There ar...
03:47 pm GMT - Wed, November 25, 2020
CSS Tricks Considerations for Making a CSS Framework
Around eight months ago, I started building a framework which would eventually go on to become Halfmoon. I made a post on this very website announcing the launch of the very first version. Halfmoon ha...
12:30 am GMT - Wed, November 25, 2020
CSS Tricks Rendering Spectrum
Here are the big categories of rendering websites:Client: ship a <div id="root"></div> and let a JavaScript template render all of it.Static: pre-render all the HTML.Server: let a live...
03:42 pm GMT - Tue, November 24, 2020
CSS Tricks How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Googl...
03:42 pm GMT - Tue, November 24, 2020
CSS Tricks The Core Web Vitals hype train
Some baby bear thinking from Katie Sylor-Miller:my excitement for Core Web Vitals is tempered with a healthy skepticism. I’m not yet convinced that Largest Contentful Paint (LCP), First Inp...
11:35 pm GMT - Mon, November 23, 2020
CSS Tricks How to Create a Timeline Task List Component Using SVG
Im thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes an...
11:35 pm GMT - Mon, November 23, 2020
CSS Tricks Creating UI Components in SVG
Im thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes an...
11:33 pm GMT - Mon, November 23, 2020
CSS Tricks Graphery SVG
Ive compared SVG and Canvas before. If youre trying to decide between them, read that. Id say the #1 difference between them is vector (SVG) versus raster (Canvas). But the #2 difference is how you wo...
03:25 pm GMT - Mon, November 23, 2020
CSS Tricks DRY-ing up styled-components
I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who lov...
07:44 pm GMT - Sat, November 21, 2020
CSS Tricks Whats Missing from CSS?
The survey results from the State of CSS aren’t out yet, but they made this landing page that randomly shows you what one person wrote to answer that question. Just clicking the reload button a ...
09:18 pm GMT - Fri, November 20, 2020
CSS Tricks How You Might Build a Modern Day Webring
I’m sure different people picture different things when they think about webrings, so let me clarify what I picture. I see an element on a website that:Signifies this site is part of a webringAl...
03:52 pm GMT - Fri, November 20, 2020
CSS Tricks A Dynamically-Sized Sticky Sidebar with HTML and CSS
Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set th...
10:30 pm GMT - Thu, November 19, 2020
CSS Tricks console.log({ myVariable });
I think this might be my most popular tweet of all time, but I’m not sure how to verify that these days. I’ll restate this neat little trick here because blogging is cool and fun. I used t...
10:05 pm GMT - Thu, November 19, 2020
CSS Tricks mediastack
Have you ever had the idea for a website or new app that involved showing news content? You don’t have to create content yourself to have the right to build an innovative news reading experience...
03:52 pm GMT - Thu, November 19, 2020
CSS Tricks Color Theming with CSS Custom Properties and Tailwind
Custom properties not only enable us to make our code more efficient, but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tail...
01:11 am GMT - Thu, November 19, 2020
CSS Tricks grid-auto-flow : CSS Grid :: flex-direction : Flexbox
When setting a parent element to display: flex, its child elements align left-to-right like this:CodePen Embed FallbackNow, one of the neat things we can do with flexbox is change the direction so tha...
11:26 pm GMT - Wed, November 18, 2020
CSS Tricks Firefox 83
There’s a small line in the changelog that is is big news for CSS:We’ve added support for CSS Conic Gradients (bug 1632351) and (bug 1175958).🎉🎉&#x...
11:23 pm GMT - Wed, November 18, 2020
CSS Tricks Thinking Outside the Box with CSS Grid
Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines cr...
03:51 pm GMT - Wed, November 18, 2020
CSS Tricks Creating WebGL Effects with CurtainsJS
This article focuses adding WebGL effects to <image> and <video> elements of an already completed web page. While there are a few helpful resources out there on this subject (like thes...
03:48 pm GMT - Wed, November 18, 2020
CSS Tricks Upptime
GitHub Actions are like free computers. Well, there is pricing, but even free plans get 2,000 minutes a month. You write configuration files for what you want these computers to do. Those configuratio...
10:13 pm GMT - Tue, November 17, 2020
CSS Tricks Measuring Core Web Vitals with Sentry
Chris made a few notes about Core Web Vitals the other day, explaining why measuring these performance metrics are so gosh darn important:I still think the Google-devised Core Web Vitals are smart. Wh...
03:56 pm GMT - Tue, November 17, 2020
CSS Tricks Copyediting with Semantic HTML
Tracking changes is a quintessential copyediting feature for comparing versions of content. While were used to tracking changes in a word processing document, we actually have HTML elements capable of...
03:54 pm GMT - Tue, November 17, 2020
CSS Tricks Jetpack Backup
It’s no secret that CSS-Tricks is a WordPress site. And as such, we like to keep things WordPress-y, like enabling the block editor and creating some custom blocks. We also rely on Jetpack for a...
11:40 pm GMT - Mon, November 16, 2020
CSS Tricks A Complete Guide to CSS Gradients
Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as...
11:40 pm GMT - Mon, November 16, 2020
CSS Tricks CSS Background Patterns
Nice little tool from Jim Raptis: CSS Background Patterns. A bunch of easy-to-customize and copy-and-paste backgrounds that use hard stop CSS gradients to make classy patterns. Not quite as flexible a...
09:05 pm GMT - Mon, November 16, 2020
CSS Tricks Logical layout enhancements with flow-relative shorthands
Admission: I’ve never worked on a website that was in anything other than English. I have worked on websites that were translated by other teams, but I didn’t have much to do with it. I do...
03:21 pm GMT - Mon, November 16, 2020
CSS Tricks Mixing Colors in Pure CSS
Red + Blue = Purple right?Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesnt seem rig...
03:59 pm GMT - Fri, November 13, 2020
CSS Tricks Parsing Markdown into an Automated Table of Contents
A table of contents is a list of links that allows you to quickly jump to specific sections of content on the same page. It benefits long-form content because it shows the user a handy overview of wha...
12:06 am GMT - Fri, November 13, 2020
CSS Tricks SVGBOX
I’ve been saying for years that a pretty good icon system is just dropping in icons with inline <svg> where you need them. This is simple to do, offers full design control, has (generall...
08:59 pm GMT - Thu, November 12, 2020
CSS Tricks How to Work With WordPress Block Patterns
Just a little post I wrote up over at The Events Calendar blog. The idea is that a set of blocks can be grouped together in WordPress, then registered in a register_block_pattern() function that makes...
03:46 pm GMT - Thu, November 12, 2020
CSS Tricks How Film School Helped Me Make Better User Experiences
Recently, I finished a sixty-day sprint where I posted hand-coded zombie themed CSS animation every day. I learned a lot, but it also took me back to film school and reminded me of so many things I le...
03:46 pm GMT - Thu, November 12, 2020
CSS Tricks A Spreadsheet Importer Youll Enjoy Using
A great developer tool takes a painful task that would normally be a developers entire job, and makes it a pleasure to do. As a personal example, Ive needed to build an image uploading experience many...
12:48 am GMT - Thu, November 12, 2020
CSS Tricks My WordPress Comments Wishlist
A built-in commenting system is one of the reasons people reach for WordPress (and often stay there long-term). While I do think having a comment system is compelling (and as big of a fan of building ...
10:51 pm GMT - Wed, November 11, 2020
CSS Tricks Libraries for SVG Drawing Animations
In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like its drawing itself. Its 2020 now, and the trick is still popular. Ive seen it on a lot of websites Ive visited ...
03:22 pm GMT - Wed, November 11, 2020
CSS Tricks The Cleanest Trick for Autogrowing Textareas
Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in height as much as it needs to in order to c...
11:47 pm GMT - Tue, November 10, 2020
CSS Tricks Understanding flex-grow, flex-shrink, and flex-basis
When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, lets say we have some HTML like this:<div class="parent"<div class="child"Child&...
11:45 pm GMT - Tue, November 10, 2020
CSS Tricks ARIA in CSS
Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state.… this is my preferred way of ho...
03:40 pm GMT - Tue, November 10, 2020
CSS Tricks The Raven Technique: One Step Closer to Container Queries
For the millionth time: We need container queries in CSS! And guess what, it looks like we’re heading in that direction.When building components for a website, you dont always know how that comp...
03:35 pm GMT - Tue, November 10, 2020
CSS Tricks Netlify Background Functions
As quickly as I can:AWS Lambda is great: it allows you to run server-side code without really running a server. This is what “serverless” largely means.Netlify Functions run on AWS Lambda ...
01:27 am GMT - Tue, November 10, 2020
CSS Tricks How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.Ideally there would be a :stuck CSS directive we could use, but in...
08:49 pm GMT - Mon, November 9, 2020
CSS Tricks Chapter 5: Publishing
Not long after HotWired launched on the web in 1994, Josh Quittner wrote an article entitled Way New Journalism for the publication. He was enthusiastic about the birth of a new medium.Im talking abou...
08:48 pm GMT - Mon, November 9, 2020
CSS Tricks JavaScript Operator Lookup
Okay, this is extremely neat: Josh Comeau made this great site called Operator Lookup that explains how JavaScript operators work. There are some code examples to explain what they do as well, which i...
03:29 pm GMT - Mon, November 9, 2020
CSS Tricks A Continuous Integration and Deployment Setup with CircleCI and Coveralls
Continuous Integration (CI) and Continuous Deployment (CD) are crucial development practices, especially for teams. Every project is prone to error, regardless of the size. But when there is a CI/CD p...
09:17 pm GMT - Fri, November 6, 2020
CSS Tricks Bidirectional scrolling: whats not to like?
Some baby bear thinking from Adam Silver.Too hot:[On horizontal scrolling, like Netflix] This pattern is accessible, responsive and consistent across screen sizes. And its pretty easy to implement. To...
04:13 pm GMT - Fri, November 6, 2020
CSS Tricks How to Create a Commenting Engine with Next.js and Sanity
One of the arguments against the Jamstack approach for building websites is that developing features gets complex and often requires a number of other services. Take commenting, for example. To set up...
07:20 pm GMT - Thu, November 5, 2020
CSS Tricks Quick LocalStorage Usage in Vue
localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I’ve personally used it in each! In cases where you...
07:18 pm GMT - Thu, November 5, 2020
CSS Tricks Build an app for monday.com and potentially win BIG
monday.com is an online Work OS platform where teams create custom workflows in minutes to run their projects, processes, and everyday work.Over 100,000 teams use monday.com to work together. They hav...
03:01 pm GMT - Thu, November 5, 2020
CSS Tricks How to Animate the Details Element Using WAAPI
Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2011.In this artic...
03:00 pm GMT - Thu, November 5, 2020
CSS Tricks More People Dipping Toes Into Web Monetization
Lonie Watson:I do think that Coil and Web Monetization are at the vanguard of a quiet revolution.Here’s me when I’m visiting Lonie’s site:Enjoy the pennies!My Coil subscription ($5/m...
12:21 am GMT - Thu, November 5, 2020
CSS Tricks How to Write Loops with Preprocessors
Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot. Sass (SCSS)for LoopCodePe...
09:46 pm GMT - Wed, November 4, 2020
CSS Tricks This page is a truly naked, brutalist html quine.
Here’s a fun page coming from secretGeek.net. You don’t normally think “fun” with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that.Th...
03:19 pm GMT - Wed, November 4, 2020
CSS Tricks Getting the WordPress Block Editor to Look Like the Front End Design
I’m a WordPress user and, if you’re anything like me, you always have two tabs open when you edit a post: one with the new fancy pants block editor, aka Gutenberg, and another with a previ...
10:59 pm GMT - Tue, November 3, 2020
CSS Tricks Additive Animations in CSS
Daniel C. Wilson explains how with CSS @keyframe animations, when multiple of them are applied to an element, they do both work. But if any properties are repeated, only the last one works. They overr...
09:22 pm GMT - Tue, November 3, 2020
CSS Tricks Websites We Like: Whimsical
Whimsical is an app that lets you create flowcharts, wireframes, and mind maps but it was only earlier today that I spotted just how great the website is especially the product pages. Check out this ...
03:27 pm GMT - Tue, November 3, 2020
CSS Tricks GIFS and prefers-reduced-motion
The <picture> element has a trick it can do where it shows different image formats in different situations. If all you are interested in is formats for the sake of performance, maybe you’...
12:26 am GMT - Tue, November 3, 2020
CSS Tricks Gray Burst
I made this neat little gray burst thing. It’s nothing particularly special, especially compared to the amazing creativity on CodePen, but I figured I could document some of the things happening...
04:02 pm GMT - Mon, November 2, 2020
CSS Tricks How to Automate Project Versioning and Releases with Continuous Deployment
Having a semantically versioned software will help you easily maintain and communicate changes in your software. Doing this is not easy. Even after manually merging the PR, tagging the commit, and pus...