Best of CSS — May 2022
- 1
- 2
Josh W Comeau·4y
The Surprising Truth About Pixels and Accessibility
If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. The most popular unit for anything size-related is the px unit, short for “pixel” The em unit is an interesting fellow, based on the element's calculated font size.
- 3
web.dev·4y
State of CSS 2022
The year 2022 is set to be one of CSS's greatest years, in both features and cooperative browser feature releases. The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five features.
- 4
DEV·4y
Two lines of CSS that boosts 7x rendering performance!
Website's nowadays need to be optimal and performant, users on the web have very short attention span. Most common use cases for this is when you have huge list/grid of data that needs to render at the mount of the application. With progressing web development it will soon be supported in all browsers too.
- 5
Hashnode·4y
12 Awesome Shape Generators for Your Web Projects 😍🚀
In this article, I have compiled some of my favorite shape generators. I have further sorted them across the categories like blogs, waves, separators, and miscellaneous. I will provide a direct link, a short description, and a preview image, so you can get the initial impression of each generator and its features.
- 6
How to Improve Coding skills by doing 100 Days Of Code? Here are the 16 benefits that I got from it.
On 26 May 2022, I completed the 100 Days of code series on Twitter. I was consistent for the first 48 days but after that, due to my family problem I broke that consistency. By doing code daily and sharing projects on Twitter I grew my Audience from 0 to 3200+.That's all about this article.
- 7
- 8
asayer·4y
Building a Mobile App using HTML, CSS, and JavaScript
In this article, we will learn how to leverage the power of HTML, CSS, and Javascript to build a simple mobile app. We will not be using frameworks like Ionic or React Native. This tutorial focuses on showing how a basic web app can be made to feel and behave like a native mobile application that can be installed and run on mobile devices.
- 9
Section·4y
Building an Animated Vertical Timeline Chart with HTML, CSS, and JavaScript
This article will use HTML5 , CSS3 (glassmorphism implementation), and Vanilla JavaScript to create a vertical timeline chart. The chart will display various events vertically aligned in a card-like layout. Event cards at odd number positions are placed on the right side of the vertical line, and those at even number positions on the left side. Each event card is alternatively displayed in opposite positions.
- 10
Web Performance
Rendering is the process of turning a web page's assets ( HTML, CSS, JS, and other static assets) into interactive content on the browser. A typical request travels through the internet before it reaches a server that sends back a response to the client. The response manifests different entities such as Styles , Markup , Scripts , and other files. They represent the different life forms on Renderland.
- 11
DevDojo·4y
5 new services developers NEED TO KNOW!
There are many services for developers that launch every week. Some are really impressive. I am showing you some of them and giving details about them. Let's go!Motion DevTools is a Chrome extension that speeds up your animation design and development. Topline Resumes will highlight the in-demand missing skills for you.
- 12
LogRocket·4y
Full-stack DApp tutorial with Vite + React, Tailwind CSS, and Solidity
In this tutorial, we’ll build a full-stack DApp, test it on the Ropsten testnet, and deploy it with the Alchemy Web3 development platform. We will use Vite, React, and Tailwind CSS to build the DApp frontend and Solidity to create the backend.
- 13
Web Tools Weekly·4y
CSS Tools, JS Utilities, JSON, Databases
The URL API is a modern upgrade on what the Location object was doing. Once a URL is generated (e.g. using the URL() constructor), you'll have the following extra features: URLURL. username - This allows you to include a username as part of the URL, for a private login. URL.password - Same as URL. username , now deprecated on Location but available on the URL object. URL searchParams - Allows you to access individual parameters in a query string.
- 14
CSS-Tricks·4y
4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks
In this article we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but here’s the catch: we’re not actually going to make any shadows for these text hover effects.
- 15
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D | CSS-Tricks
We’ve walked through a series of posts about interesting approaches to CSS hover effects. In this article, we will build off those two articles to create even more complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives.
- 16
Ahmad Shadeed·4y
First Look At The CSS object-view-box Property
object-view-box was suggested by Jake Archibald early this year. It allows us to crop or resize replaced HTML elements like an </img> or a <video> It will help us in drawing an inset and control the four edges, just like we deal with margin or padding.
- 17
Bootstrap·4y
Bootstrap 5.2.0 beta
Bootstrap v5.2.0-beta1 is the biggest release since v5 itself. This release features redesigned docs, CSS variables for all our components, new helpers and utilities, refined buttons and inputs, and lots of improvements under the hood. We’ve streamlined our navbar, done away with our subnav and changed the sidebar to always show every page link.
- 18
David Walsh·4y
CSS :optional
CSS :optional represents form elements that aren't required. In a sense, it feels like : optional represents :not([required]) , but :optional is limited to just form fields. A decade ago HTML and CSS added the ability to, at least signal, validation of form fields with required attribute.
- 19
Halodoc·4y
Automatically formatting and cleaning code on commit
Every developer has their own coding style because they come from different backgrounds and institutions. To ensure everyone is on the same page about coding style and patterns, guidelines or rules are essential. Not every developer knows about the long-term code they build, especially when a deadline approaches and another task awaits.
- 20
30 seconds of code·4y
What's the difference between :root and html in CSS?
CSS has two ways to target the root element of an HTML document - the :root pseudo-class and the html selector. The :root selector has a higher specificity than thehtml selector. This is because :root is a pseudo- class selector, while html is a type selector.
