Search

Nalezeno "language": 665

Toward Responsive Elements


Hot news from Brian Kardell, regarding what we've been referring to as "container queries", the most hotly requested feature in CSS: There does seem to be some general agreement on at least one part of what I am going to call instead "Responsive Design for Components" and that is that flipping...

The Hooks of React Router


React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering...

Select an Element with a Non-Empty Attribute


Short answer: [data-foo]:not([data-foo=""] { Longer answer (same conclusion, just an explanation on why we might need this): Say you have an element that you style with a special data-attribute: <div data-highlight="product"</div You want to target that element and do special things when...

The Three Types of Code


Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open source project. Whether I’m writing HTML or CSS or building a React component, thinking...

Understanding Immutability in JavaScript


If you haven’t worked with immutability in JavaScript before, you might find it easy to confuse it with assigning a variable to a new value, or reassignment. While it’s possible to reassign variables and values declared using let or var, you'll begin to run into issues when you try that with...

Resizing Values in Steps in CSS


There actually is a steps() function in CSS, but it's only used for animation. You can't, for example, tell an element it's allowed to grow in height but only in steps of 10px. Maybe someday? I dunno. There would have to be some pretty clear use cases that something like background-repeat: space...

“Browser Functions”


Serverless functions are fairly straightforward. Put a bit of back-end language code, like Node, in the cloud and communicate with it via URL. But what if that URL didn't run a back-end language, it ran an actual browser? Richard Young: We can now do full stack development using just Web APIs....

Bundling JavaScript for Performance: Best Practices


Performance advice from David Calhoun on how many scripts to load on a page for best performance: [...] some of your vendor dependencies probably change slower than others. react and react-dom probably change the slowest, and their versions are always paired together, so they...

Searching the Jamstack


Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site: <form action="https://www.google.com/search" method="get"<input type="search" name="q"...

JAMstack vs. Jamstack


It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that. The "official website" changed their language from JAMstack (evoking the JavaScript, APIs, and Markup acronym) to Jamstack. It's nothing...

The Best Color Functions in CSS?


I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it. hsl(120, 100%, 40%) Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from...

IP Geolocation and Threat Intelligence API: ipdata (Sponsored)


An IP address is a simple, numeric piece of information that gets passed to a server, but that IP address can provide a wealth of information with ipdata. With ipdata you can learn user location, language, currency, and much more! Quick Hits ipdata is an IP Geolocation and Threat Intelligence API....

A Web Component with Different HTML for Desktop and Mobile


Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them. One code snippet that caught my eye was a simple way to design a component...

Snowpack


Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It's a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports). This is how I digest it. When you write a line of code...

Is “is” Useful?


God I'm funny. Anytime we have fairly repetitive selectors that have a common parent, it's probably a place we can use the :is() pseudo-selector. Holger Bartel demonstrates like this: section section h1, section article h1, section aside h1, section nav h1, article section h1, article article...

New Year, New Job? Let’s Make a Grid-Powered Resume!


Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during...

A Use Case for a Parent Selector


Having a "parent selector" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then when I ask my brain for a use case, I find it hard to think of one. Well, I just had one so I thought I'd document it here. A classic...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace