Thursday, March 28

Tag: css

Let’s make a form that puts current location to use in a map!
CSS Tricks

Let’s make a form that puts current location to use in a map!

I love shopping online. I can find what I need and get most things for a decent price. I am Nigerian currently working and studying in India, and two things I dread when shopping online are: Filling out a credit card form Filling out shipping and billing address forms Maybe I’m just lazy, but these things are not without challenges! For the first one, thanks to payment processing services like PayPal and e-wallets, I neither have to type in my 12-digit credit card number for every new e-commerce site I visit, nor have to save my credit card details with them. For the second, the only time-saving option given by most shopping websites is to save your shipping address, but you still have to fill the form (arrghh!). This is where the challenge is. I've had most of my orders returned because ...
Using data in React with the Fetch API and axios
CSS Tricks

Using data in React with the Fetch API and axios

If you are new to React, and perhaps have only played with building to-do and counter apps, you may not yet have run across a need to pull in data for your app. There will likely come a time when you’ll need to do this, as React apps are most well suited for situations where you’re handling both data and state. The first set of data you may need to handle might be hard-coded into your React application, like we did for this demo from our Error Boundary tutorial: See the Pen error boundary 0 by Kingsley Silas Chijioke (@kinsomicrote) on CodePen. What if you want to handle data from an API? That's the purpose of this tutorial. Specifically, we'll make use of the Fetch API and axios as examples for how to request and use data. The Fetch API The Fetch API provides an interface for fetching re...
VS Code extensions for the discerning developer palette
CSS Tricks

VS Code extensions for the discerning developer palette

I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code — the ones that nobody knows about — and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities… then watch as they look around desperately for someone else to talk to. It’s like the “Sideways” of VS Code. In my endless pursuit of the perfect VS Code setup, I reached out to my colleagues here on the Azure team and asked them to share their favorite extension in their own words. So clear your pallet and breathe in the aromatic flavors of productivity; I am your VS Code Extension Sommelier. Christina Warren - Settings Sync I cannot live without this extension. If you use multiple machines (especially on multiple platforms, where a sym-linked Dropbox folder won...
CSS Tricks

​Experience a Simpler Cloud Computing Platform with DigitalOcean

(This is a sponsored post.)From deploying static sites and blogging platforms to managing multiple client websites, DigitalOcean provides a flexible platform for developers and their teams to deliver an unparalleled end-user experience with a lightning-fast network, pre-configured applications, and a 99.99% uptime SLA. Simply let us know your needs and our solutions engineers will provide the best options available. Direct Link to Article — PermalinkThe post ​Experience a Simpler Cloud Computing Platform with DigitalOcean appeared first on CSS-Tricks. Source: CSS-tricks.com
On Switching Code Editors
CSS Tricks

On Switching Code Editors

I'm sure a lot of you are like me and have switched code editors a number of times. I think my first major editor was Coda. Then I moved to TextMate when I started working primarily on local. Then Sublime Text. And, most recently, VS Code. I bet your journey was different. I know lots of folks that quite love Atom, Brackets, WebStorm, and even BBedit. You do you! For me, that's four changes in a dozen years, or a change every three years. Moving isn't something I do quickly. Here's a collection of thoughts around the idea of changing editors. When moving, I have to take time to make sure it works pretty much like the old one. Otherwise, I'll just end up disliking it to the point that I switch back a day or two later. It's happened to me every time I switch. I have little false-starts afte...
CSS Tricks

Getting to Know a Legacy Codebase

Harry Roberts talks about some methods for getting comfy with a new ("specifically CSS") code base. Harry's done this a lot as someone who parachutes into new code bases regularly as a consultant. But I think this is also quite interesting for people starting a new job. So much web development work is working on existing sites, not green fielding new ones. Direct Link to Article — PermalinkThe post Getting to Know a Legacy Codebase appeared first on CSS-Tricks. Source: CSS-tricks.com
CSS Tricks

Framer X

Framer X is a brand new app that’s about to be released and this quick demo reel takes us on a tour through some of the changes to the previous app—it all looks super exciting. As a designer, I’m most interested in the prototyping tools and being able to quickly explore complex scene transitions between one state and another. But as a developer, I’m interested in how it all ties into React. The website describes it like so: Use actual React in your projects to create interactive components from scratch. Want more control? Create custom UI in the properties panel for your components. I can imagine a wonderful near-future where it’s possible to tie Framer X into a design system so that folks on a team can use all the real life React components without having to worry if they’re up-to-date o...
The trick to viewport units on mobile
CSS Tricks

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we're often concerned with the vertical height, so let's look specifically at viewport height (vh): vh unit Equal to 1% of the height of the initial containing block. So yeah, no clear guidance there when it comes to handling ...
abc to SVG
CSS Tricks

abc to SVG

Here's a little example that Jeremy Keith used to use in his talks. It's stuck with me as one of the coolest examples of progressive enhancement and Technology Being CoolTM around. There is this musical notation format called abc. They don't capitalize it. Kinda like npm, which I guess makes sense as it isn't an acronym. But it is the name of something so it's super awkward. Ughakdhk. Anyway. The format itself is really cool. It's super simple and text-based. Here's the example from their homepage: X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| A little like YAML, I suppose. That's the music for that whole song. It's not loade...
On xlink:href being deprecated in SVG
CSS Tricks

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG <use> elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That's pretty strong language, hence the reader's warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So... <!-- This is old --> <svg> <use xlink:href="#whatever" /> </svg> <!-- This is new --> <svg> <use href="#whatever" /> </svg> I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari 11 Edge 17 IE 11 iOS 11 ✅ ✅ ?‍♂️ ✅ ✅ ?‍♂️ Better than I thought! But...
CSS Tricks

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead. One topic like this (which is an area I’ve sort of always known about but never really understood) is how auto margins and flexbox interact with one another. Take this example for instance: .parent { display: flex } .child { margin: auto; } What does this do again? I seem to recall there’s a bunch of nifty things you can do with it, and earlier this week, I half-remembered them after reading a great po...
CSS Tricks

Stuff you can do with CSS pointer events

Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within). Here's how I reasoned it out to myself: You know how if you display: hidden; an element, even if you display: block; a child, it doesn't matter — it's hidden because its parent is hidden. The same is not true for visibility: hidden;. Children will be hidden because visibility inherits, but if you visibility: visible; them, they become visible again. That's what is happening here with pointer-events. If you pointer-events: none; on a parent and then pointer-events: auto; on a child, you're re-enabling pointer events. Then a :hover on a parent will be trigge...
Sometimes `sizes` is quite important.
CSS Tricks

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of "responsive websites," srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: "If you’re just changing resolutions, use srcset." In this case, we're changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we're also going to need to use the sizes attribute to get the most out of res...
Solved with CSS! Logical Styling Based on the Number of Given Elements
CSS Tricks

Solved with CSS! Logical Styling Based on the Number of Given Elements

Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.   This year, I started working at Bustle Digital Group. In media, as with a lot of products, the engineering team builds a platform that should support all use cases. Our CMS provides capabilities for authors and editors to create articles as well as curate pages, and control ad injection. Unlike working with a static site, the engineering team doesn’t have full contr...
Build a state management system with vanilla JavaScript
CSS Tricks

Build a state management system with vanilla JavaScript

Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help us with this. Libraries like Redux, MobX and Vuex make managing cross-component state almost trivial. This is great for an application’s resilience and it works really well with a state-first, reactive framework such as React or Vue. How do these libraries work though? What would it take to write one ourselves? Turns out, it’s pretty straightforward and there’s an opportunity to learn some really common patterns and also learn about some useful modern APIs that are available to us.   Be...