CSS Tricks

Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It’s an extension of Azure Functions that allow you to write stateful executions in a serverless environment. Think of it this way. There are a few big benefits that people tend to focus on when they talk about Serverless Functions: They’re cheap They scale with your needs (not necessarily, but that’s the default for many services) They allow you to write event-driven code Let’s talk about that last one for a minute. When you can write event-driven code, you can break your operational needs down into smaller functions that essentially say: when this request comes in, run this code. You don’t mess around with infrastructure, that’s taken care of for you. It...

Sharing functionality between React components is a pretty common need. The concept is that we can establish the behavior in one place and then extend it across different components. Higher-Order Components are one way to do this. Yet, there is another way using a library called Recompose. GitHub Repo What is Recompose? The documentation helps us answer that: Recompose is a React utility belt for function components and higher-order components. Think of it like lodash for React. Basically, it’s a library for React that contains a bunch of helpers that return different higher-order components — which is nice because it takes some of the grunt work out of defining common React patterns and making them immediately available to extend to other components. What exactly can it do? Well, let’s w...

Let's say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this: <div class="module" id="module"></div> And you toss a background on it: .module { background-image: url(big-image.jpg); } You can adjust the background-position in JavaScript like this: const el = document.querySelector("#module"); el.addEventListener("mousemove", (e) => { el.style.backgroundPositionX = -e.offsetX + "px"; el.style.backgroundPositionY = -e.offsetY + "px"; }); See the Pen Move a background with mouse by Chris Coyier (@chriscoyier) on CodePen. Or, you could update CSS custom properties in the JavaScript instead: const el = document.querySelector("#module"); el.addEventListener("mousemove", (e) =>...

(This is a sponsored post.)With our robust SDK, super clean dashboard, detailed documentation, and world-class support, HelloSign API is one of the most flexible and powerful APIs on the market. Start building for free today. Direct Link to Article — PermalinkThe post The industry’s best open API appeared first on CSS-Tricks. Source: CSS-tricks.com

Jonathan Snook on managing the complexity between what designers make and what developers end up building: Everything that a designer draws in a Sketch or Photoshop file needs to be turned into code. Code needs to be developed, delivered to the user, and maintained by the team. That means that complexity in design can lead to complexity in code. That’s not to say that complexity isn’t allowed. However, it is important to consider what the impact of that complexity is—especially as it relates to your codebase. Jonathan continues in that post to argue that designers and developers need to be in a constant feedback loop in order to properly assess whether the complexity of the design is worth the complexity of the engineering solution. I’ve been thinking about this sort of thing for a really ...

I saw a little conversation about this the other day and figured it would be fun to look at all the different ways to do it. None of them are particularly tricky, but perhaps you'll favor one over another for clarity of syntax, efficiency, or otherwise. Let's assume we want a border on the bottom, left, and right (but not top) of an element. Explicitly declare each side .three-sides { border-bottom: 2px solid black; border-right: 2px solid black; border-left: 2px solid black; } While that's pretty clear, it's still making use of shorthand. Completely expanded it would be like this: .three-sides { border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 2px; border-left-color: black; border-left-style: solid; border-left-width: 2px; border-...

"Why the heck don't we have ::first-column?" I heard someone ask that the other day and it's a valid question. I'd even take that question further by asking about ::nth-column() or whatever else relates to CSS columns. We have stuff like ::first-letter and ::first-line. Why not others? There are many notable things missing from the "nth" crowd. Seven years ago, I wrote "A Call for ::nth-everything" and it included clear use cases like, perhaps, selecting the first two lines of a paragraph. I don't know all the technical details of it all, but I know there are some fairly decent reasons why we don't have all of these in CSS. Part of it is the difficulty of getting it specced (e.g. words and characters get tricky across written languages) and part of it is the difficulty of implementing the...

You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky. There are CSS properties that specific to backgrounds, like background-blend-mode — but blending and filters are not the same thing. It sorta seems to be the reason we have backdrop-filter, but not quite. That does filtering as the background interacts with what is behind the element. There is no background-filter, unfortunately. What are we to do?   Use a pseudo-element instead of a background If you put the contents of the element in an inside wrapper, you can set that on top of a pseudo-element that is simply pretending to be a background. .module { position: relative; } .module::before ...