CSS-Tricks·4yThe Invisible JavaScript Backdoor
An interesting (scary) trick of an nearly undetectable exploit. Wolfgang Ettlinger: What if a backdoor literally cannot be seen and thus evades detection even from thorough code reviews?I’ll post the screenshot of the exploit from the post with the actual exploit circled.
CSS-Tricks·5yYou want enabling CSS selectors, not disabling ones
An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element.
CSS-Tricks·5yNotion API
Public Beta of the Notion API has been released. The API is a full-blown API, so you can do things you’d expect to be able to do, like cURL for users, the content of pages, and manipulate databases. They have detailed documentation, expected barriers like rate limits, and even a JavaScript SDK.
CSS-Tricks·5yFront-End Testing is For Everyone
There are many types of tests and perhaps that is where some of the initial fear or confusion comes from. Testing is an automated tool that finds errors in your development as early as possible. Tests also serve as a reminder that you may have forgotten to check your own work in a certain area.
CSS-Tricks·5yVS Code Extensions for HTML
This week we look at some extensions for VS Code that make writing and editing HTML better. These are just a handful that I’ve tried and liked to some degree. You may not like all of them. Maybe some of them don’t appeal to you, or feel like more clutter than you need.
CSS-Tricks·5yScroll Shadows With JavaScript
scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except… it just doesn’t work on iOS Safari.
CSS-Tricks·5yLet’s Create an Image Pop-Out Effect With SVG Clip Path
A cool pop-out effect by Mikael Ainalem showcases the clip-path: path() in CSS. The effect looks cool, but there are some issues with the path value. We’re going to re-create this effect using standard, widely-supported CSS techniques so that it not only works, but is truly responsive.
CSS-Tricks·5yWhat I Wish I Knew About CSS When Starting Out As A Frontender
The Box Model (e.g. box-sizing , height , width , margin , padding ) The Document Flow and Positioning (e,g. position , top , left , etc.) There are also some useful concepts to keep in mind when building reusable and composable components.
CSS-Tricks·5yFirebase Crash Course
Firebase is a platform that provides the infrastructure for developers and tools for marketers. While Firebase can make up the entirety of your app’s back-end, you can use each product individually as well. Each product is designed to empower a part of an application's infrastructure. Firebase also gives you insight into how your app is performing and what your users are doing.
CSS-Tricks·5yLet’s Create a Custom Audio Player
HTML has a built-in native audio player interface that we get simply using the <audio> element. We get to specify multiple files for better browser support, as well as a little CSS flexibility to style things up. Lottie is a library that renders Adobe After Effects animations natively.
CSS-Tricks·5yHow to Create a Shrinking Header on Scroll Without JavaScript
Sticky headers are a way to shrink a website’s header without using JavaScript. The inner container contains all the header elements, such as the logo and the navigation. The outer container is in a way the actual header, while the only function of the parent element is to make the header taller.
CSS-Tricks·5yDid You Know About the :has CSS Selector?
The :has CSS selector is going to have a big impact on how we write CSS in the future. In fact, if it ever ships in browsers, I think it breaks my mental model for how CSS fundamentally works because it would be the first example of a parent selector in CSS. :has isn’t supported in browsers right now (probably for those performance reasons), it is part of the CSS Selectors Level 4 specification.
CSS-Tricks·5yGreenSock ScrollTrigger
ScrollTrigger is a new plugin from Greensock. It triggers animation when a page scrolls to certain positions, as well as when certain elements are in the viewport. It’s tightly integrated with all the other animation possibilities of GSAP. You can play with it on CodePen for free (search for it).
CSS-Tricks·5y“Cancelable” Smooth Scrolling
I’m finding some discrepancies between browsers, as well as between CSS and JavaScript on how this all works. Here’s what I experienced on the browsers I have easy access to: Chrome, Firefox, Safari and Edge. I find the cancellable behavior better UX, although I have no data to back that up.
CSS-Tricks·5yA Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
The Easy Carousel is a simple carousel component that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. We’re going to be working with quite a bit of JavaScript, React and the DOM API from here on out. Let’s start by bootstrapping a simple React application with styled-components tossed in for styling.
CSS-Tricks·5yA DRY Approach to Color Themes in CSS
The goal of DRY (Don’t Repeat Yourself) programming is to avoid redefining custom properties when switching between light and dark modes. Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I remembered Lea Verou’s trick using --var: ; , and found a way to make it work.
CSS-Tricks·5yAnimXYZ
AnimXYZ is designed to be highly customizable, calling itself “the first composable CSS animation toolkit.” You can use as many of the different composable bits as you need to get the in/out animation you want. Play with their builder and you’ll see output like: xyz="tall-2 stagger-back duration-6 ease-out-back"
CSS-Tricks·5yHow to Map Mouse Position in CSS
The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We will use the mouse position to set the value of these properties, and then use them set the .square element’s width and height accordingly.
CSS-Tricks·5y“We had 90% unused CSS because everybody was afraid to touch the old stuff”
At PayPal, 90% of CSS was unused because people were afraid to touch it. That’s one of the reasons I sometimes like component-based-styling solutions. Because nobody is afraid of the styles anymore — they are tightly coupled to what they are styling. I’m excited that “scoped styles” are making a bit of a comeback in standards discussions.
CSS-Tricks·5yDemystifying styled-components
styled-components is a tool that takes arbitrary CSS and assigns it to a React component. By demystifying it, we'll be able to diagnose and fix weird CSS issues with way less frustration. This article is written for experienced React developers. It may surprise you to learn that styled-Components doesn't do anything with the CSS we added to it.