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.

​Level Up Your JavaScript Error Monitoring

(This is a sponsored post.)

Automatically detect and diagnose JavaScript errors impacting your users with Bugsnag without changing your code or adding try/catch blocks. Get comprehensive diagnostic reports, know immediately which errors are worth fixing, and debug in a fraction of the time compared to traditional tools.

Bugsnag detects every single error and prioritizes errors with the greatest impact on your users. Get support for 50+ platforms and integrate with the development and productivity tools your team already uses.

Bugsnag is used by the world’s top engineering teams including Airbnb, Lyft, Square, Yelp, Eventbrite, Shopify, MailChimp, and Docker. Start your free trial today.

Direct Link to Article — Permalink

The post ​Level Up Your JavaScript Error Monitoring appeared first on CSS-Tricks.

Grid to Flex

Una Kravets shows how to make layouts in CSS Grid with flexbox fallbacks for browsers that don’t support those grid properties just yet. Una writes:

CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect…This site is a solution for you so you can start to progressively enhance without fear!

The site is a provides examples using common layouts and component patterns, including code snippets. For example:

See the Pen Grid To Flex — Example 1 by Una Kravets (@una) on CodePen.

Direct Link to Article — Permalink

The post Grid to Flex appeared first on CSS-Tricks.

Scroll to the Future

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.

My favorite part of all though? It has to be this bit:

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is becoming a thing of the past with more CSS properties and DOM API methods making their way into standard browser implementations.

In our opinion, Progressive Enhancement is the best approach to follow when implementing non-trivial scrolling in your web projects.

Make sure you can provide the best possible minimal, but universally supported UX, and then improve with modern browser features in mind.

Speaking of the cross-browser behavior of scrollbars, Louis Hoebregts also has a new post that notes how browsers do not include the scrollbar when dealing with vw units and he provides a nice way of handling it with CSS custom properties.

Direct Link to Article — Permalink

The post Scroll to the Future appeared first on CSS-Tricks.

Kinsta

(This is a sponsored post.)

Huge thanks to Kinsta for sponsoring CSS-Tricks this week! We’re big fans of WordPress around here, and know some of you out there are too. So this might come of interest: Kinsta is WordPress hosting that runs on Google Cloud Platform. And in fact, it’s officially recommended by Google Cloud for fully-managed WordPress hosting.

What does that matter? Well, when you go with a cloud host you’re entering a new realm of reliability. For example, your site is run in its own isolated container, including all the software required to run it. Familiar stuff like PHP, MySQL, and Nginx. Those resources are 100% private and not shared between anyone else – not even other sites of yours.

Spinning up a site is incredibly easy from their nice dashboard

You aren’t on your own here. Yes, you’re using powerful low-level infrastructure from Google Cloud Platform, but you get site management comfort from the Kinsta dashboard:

As you spin up a site, you can select from any of 15 global data center locations. You can even pick a different location for every site, as you need, for no additional cost.

Serious speed

You’ll be on the latest versions of important software, like PHP 7.2 and HHVM, which if you haven’t heard, is smokin’ fast.

Beyond that, there is built-in server-level caching, so you can rest easy that everything possible is being done to make sure your WordPress site is fast without you having to do much.

WordPress

Install WordPress as you spin up a site this easily:

As a WordPress site owner, you’ll care about these things:

  • At the pro plan, they’ll migrate your site for free.
  • At the business plan, you get SSH and WP-CLI access.
  • If you’re somehow hacked, they’ll fix it for you.
  • The servers are optimized to work particularly well with popular plugins like WooCommerce or Easy Digital Downloads.
  • The support staff are 24/7 and WordPress developers themselves.

It’s worth putting a point on a few other things that you either already care about as a developer, or should.

  • Free CDN – At no additional cost, your assets will be served from a CDN. That’s great for performance and a requirement for some performance auditing tools that clients care more and more about.
  • Git support – You can pull and push your site from a Git repo on any of the major services, like you expect as a developer.
  • Free SSL and security – Don’t worry about hand-managing your SSL certificates.
  • Easy staging environments – It’s just one click to build a staging environment and another click to push it live from there when you’re ready.
  • Automatic daily backups – Or even hourly if you wish. Plus, you can restore from any of these backups with a click.
  • GeoIP – Use the visitors geographic location to do things like cache location-specific data and content more effectively.

What’s going on with your site will be no mystery

New Relic provides performance monitoring and analysis. Plus you dashboard will expose to you resource usage at a glance!

Serious WordPress power at affordable prices.

Go check out Kinsta

Direct Link to Article — Permalink

The post Kinsta appeared first on CSS-Tricks.

VuePress Static Site Generator

VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line.

We talk a lot about Vue around here, from a five-part series on getting started with it to a detailed implementation of a serverless checkout cart

But, like anything new, even the basics of getting started can feel overwhelming and complex. A tool like VuePress can really lower the barrier to entry for many who (like me) are still wrapping our heads around the basics and tinkering with the concepts.

There are alternatives, of course! For example, Nuxt is already primed for this sort of thing and also makes it easy to spin up a Vue project. Sarah wrote up a nice intro to Nuxt and it’s worth checking out, particularly if your project is a progressive web application. If you’re more into React but love the idea of static site generating, there is Gatsby.

Direct Link to Article — Permalink

The post VuePress Static Site Generator appeared first on CSS-Tricks.

Museum of Websites

The team at Kapwing has collected a lot of images from the Internet Archive’s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It’s super interesting.

I particularly love how Amazon has evolved from a super high information dense webpage that sort of looks like a blog to basically a giant carousel that takes over the whole screen.

A screenshot of the Amazon.com homepage from 1999 showing a lot of text next to another screenshot of the homepage in 2018 showing a clean design with a focus on product images.

Direct Link to Article — Permalink

The post Museum of Websites appeared first on CSS-Tricks.