Unicode Patterns

These Unicode patterns by Yuan Chuan are extraordinarily clever. It’s a <css-doodle> custom web component that sets up a CSS grid and randomizes what character to drop into a cell and things, like color.

See all their gorgeous work on CodePen and the very cool <css-doodle> website as well.

Direct Link to Article — Permalink

The post Unicode Patterns appeared first on CSS-Tricks.

Build Nodejs APIs Using Serverless

Simona Cotin did a great talk at Microsoft Build about Serverless technologies, called “Build Node APIs Using Serverless.” In this talk, she addresses pretty much every major gotcha that you might run into while creating Serverless infrastructure for JavaScript applications. Some of the topics included, but are not limited to:

  • CORS
  • Local Debugging with VS Code
  • Installing npm packages
  • Configuring REST-like URLs
  • Saving environment variables

All in all, it’s one of the best talks on Serverless I’ve seen, and if you’re interested in this topic, then I highly suggest giving it a watch.

Direct Link to Article — Permalink

The post Build Nodejs APIs Using Serverless appeared first on CSS-Tricks.

Responsive tables, revisited

Lea Verou with some extra super fancy CSS trickery. No way we could miss linking this one up!

One of the problems with responsive table solutions, at least the ones where you are using CSS to rejigger things, is that there is duplicated content somewhere. Either in CSS or HTML.

Lea finds two ways to prevent that. One of which uses text-shadow to “duplicate” a copy of the text and move it into place. Another uses the Firefox-only element() function.

Another thing to remember: if you’re forcing table elements to anything other than their natural display value (like block), make sure to use ARIA roles so they don’t lose their accessibility usefulness.

Direct Link to Article — Permalink

The post Responsive tables, revisited appeared first on CSS-Tricks.

A Strategy Guide To CSS Custom Properties

CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables”) can do some of the same things, but are not the same.

Practical advice from Mike Riethmuller:

If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative to a condition in the DOM — especially a dynamic condition such as :focus, :hover, media queries or with JavaScript.

Direct Link to Article — Permalink

The post A Strategy Guide To CSS Custom Properties appeared first on CSS-Tricks.

designsystems.com

The team at Figma has created a new resource for “learning, creating and evangelizing design systems” called Design Systems that already has a good collection of interviews and articles by some folks thinking about these things.

I particularly liked Jeroen Ransijn’s post on how to convince your company it’s ready for a design system, where he writes:

Building a design system is not about reaching a single point in time. It’s an ongoing process of learning, building, evangelizing and driving adoption in your organization.

Design systems are a popular topic. Ethan Marcotte recently looked at instances where patterns get weird, Lucan Lemonnier shared a process for creating a consistent design system in Sketch, and Brad Frost debunked the perception that design systems are rigid. Seems like Figma’s new site will be a nice curated repository of this ongoing discussion.

Direct Link to Article — Permalink

The post designsystems.com appeared first on CSS-Tricks.

Locate and identify website visitors by IP address

(This is a sponsored post.)

Big thanks to ipstack for sponsoring CSS-Tricks this week!

Have you ever had the need to know the general location of a visitor of your website? You can get that information, without having to explicitly ask for it, by the user’s IP address. You’re just going to need a API to give you that information, and that’s exactly what ipstack is.

Here’s me right now:

This works globally through an API that covers over 2 million unique locations in over 200,000 cities around the world, and it’s update dozens of times a day.

It’s a nice clean JSON API for all you front-end JavaScript folks! XML is there too, if you need it. You’re probably curious about all the data you can get, so let’s just take a look:

{ "ip": "134.201.250.155", "hostname": "134.201.250.155", "type": "ipv4", "continent_code": "NA", "continent_name": "North America", "country_code": "US", "country_name": "United States", "region_code": "CA", "region_name": "California", "city": "Los Angeles", "zip": "90013", "latitude": 34.0453, "longitude": -118.2413, "location": { "geoname_id": 5368361, "capital": "Washington D.C.", "languages": [ { "code": "en", "name": "English", "native": "English" } ], "country_flag": "https://assets.ipstack.com/images/assets/flags_svg/us.svg", "country_flag_emoji": "&#x1f1fa;&#x1f1f8;", "country_flag_emoji_unicode": "U+1F1FA U+1F1F8", "calling_code": "1", "is_eu": false }, "time_zone": { "id": "America/Los_Angeles", "current_time": "2018-03-29T07:35:08-07:00", "gmt_offset": -25200, "code": "PDT", "is_daylight_saving": true }, "currency": { "code": "USD", "name": "US Dollar", "plural": "US dollars", "symbol": "$", "symbol_native": "$" }, "connection": { "asn": 25876, "isp": "Los Angeles Department of Water & Power" } "security": { "is_proxy": false, "proxy_type": null, "is_crawler": false, "crawler_name": null, "crawler_type": null, "is_tor": false, "threat_level": "low", "threat_types": null }
}

What is this useful for?

All kinds of things! Whatever you want! But here’s some very practical ones:

  • Does your site display times? You can adjust those times to the user’s local time zone, so long as you know where they are.
  • Does your site display currency? You can adjust your prices to show local currencies, so long as you know where they are.
  • Does your site only work in certain countries due to laws, regulations, or other reasons? You might want to deliver different experiences to those different countries. ipstack is also often used for protection against potential security threats.

Lots of big companies like Microsoft, Airbnb, and Samsung use ipstack.

Usage

ipstack has a free tier covering up to 10,000 requests over a month, and plans start at a reasonable $9.99 a month covering 5 times that many requests and unlocking useful modules like the Time Zone and Currency modules. Plans scale up to any level, including millions of requests a day.

Direct Link to Article — Permalink

The post Locate and identify website visitors by IP address appeared first on CSS-Tricks.

Grid Level 2 and Subgrid

I find the concept of subgrid a little hard to wrap my mind around.

I do understand the idea that we want to use nested semantic markup as we like and have elements participate in one grid so we don’t have to flatten our markup just for layout reasons. But that is largely handled by display: contents;.

Rachel Andrew explains it in a way that finally clicked for me:

I have an item spanning three column tracks of the grid, it is also a Grid Container with three column tracks – however these do not line up with the tracks of the parent…

If the nested grid columns were to be defined as a subgrid, we would use the subgrid value of grid-template-columns on that child element. The child would then use the three column tracks that it spanned, and its children would lay out on those tracks.

It’s not that the parent disappears, it’s that it shares grid lines with the parent so that getting internal elements to line up with everything else happens naturally.

Direct Link to Article — Permalink

The post Grid Level 2 and Subgrid appeared first on CSS-Tricks.

VS Code Can Do That?

Clever microsite from Burke Holland and Sarah Drasner that highlights some of VS Code’s coolest features. All fifteen of them are pretty darn cool. Here’s a few other compelling features I’ve seen people use/love:

  • There is a terminal right in there, so you don’t need a separate app.
  • The GitLens add-on, which shows you who last updated any line of code in your codebase, and when.
  • Vim nerds aren’t left out.
  • Live Share is coming soon.
  • Solis looks like a pretty cool add-on for live previews.
  • Type checking

Personally, I’m still on Sublime. I gave VS Code the college try last year but failed. I can’t even remember why now, which means it’s probably about time to try again. If it was slowness, maybe it was because I was using too many add-ons.

Direct Link to Article — Permalink

The post VS Code Can Do That? appeared first on CSS-Tricks.

Practical Jokes in the Browser

I know April Fool’s Day is at the beginning of this month, but hey, now you’ve got a year to prepare. Not to mention a gool ol’ practical joke can be done anytime.

Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow a family heirloom, or it’s someone who’s been the target of a little too much office prankery to the point it isn’t funny anymore. Do good. Have fun.

setTimeout(function() { var text = new SpeechSynthesisUtterance("LOLOLOLOLOLOLOLOL"); speechSynthesis.speak(text);
}, 600000);

Direct Link to Article — Permalink

The post Practical Jokes in the Browser appeared first on CSS-Tricks.

CSS Blocks

A new entry into the CSS-in-JS landscape! Looks like the idea is that you write an individual CSS file for every component. You have to work in components, that’s how the whole thing works. In the same isle as styled-components, css-modules, and glamorous.

Then you write :scope { } which is the base style for that component. Which I guess means you get out of having to pick a name! But also means you’re pretty locked in (true with just about any style processing setup).

Then both the CSS and component are compiled, and probably optimized with its partner tool OptiCSS. The end result is super optimized styles. Since it’s “template aware”, the styles can be far more optimized than they could be by any system trying to optimize CSS in isolation.

Chris Eppstein:

With CSS Blocks, and OptiCSS running at its core, you get to write ergonomic CSS and let the build take care of making your stylesheets properly scoped, screaming fast, and fantastically small.

Speed, style scoping, and never/rarely having unsued CSS definitely seem like the big benefits to me. A non-trivial thing to move to, but sounds like it could be worth it for plenty of big sites and new sites.

A couple of setup repos to explore to see how it could work: css-blocks-webpack-3 and css-blocks-hello-world.

Direct Link to Article — Permalink

The post CSS Blocks appeared first on CSS-Tricks.