(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » CSS

Understanding the difference between grid-template and grid-auto

2018-10-23T03:05:42+00:00October 23rd, 2018|Categories: News, Tutorials|Tags: |

Ire Aderinokun: Within a grid container, there are grid cells. Any cell positioned and sized using the grid-template-* properties forms part of the explicit grid. Any grid cell that is not positioned/sized using this property forms part of the implicit grid instead. Understanding explicit grids and implicit grids is powerful. This is my quicky take: [...]

Hard Costs of Third-Party Scripts

2018-10-23T03:05:41+00:00October 23rd, 2018|Categories: News, Tutorials|Tags: |

Dave Rupert: Every client I have averages ~30 third-party scripts but discussions about reducing them with stakeholders end in “What if we load them all async?” This is a good rebuttal because there are right and wrong ways to load third-party scripts, but there is still a cost, a cost that’s passed on to the [...]

Building Skeleton Components with React

2018-10-23T03:05:38+00:00October 23rd, 2018|Categories: News, Tutorials|Tags: |

One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two [...]

8 Tips for Great Code Reviews

2018-10-20T03:05:09+00:00October 20th, 2018|Categories: News, Tutorials|Tags: |

Kelly Sutton with good advice on code reviews. Hard to pick a favorite. I like all the stuff about minding your tone and getting everyone involved, but I also think the computerization stuff is important: If a computer can decide and enforce a rule, let the computer do it. Arguing spaces vs. tabs is not [...]

Using Feature Detection, Conditionals, and Groups with Selectors

2018-10-20T03:05:01+00:00October 20th, 2018|Categories: News, Tutorials|Tags: |

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues [...]

Dealing with Dependencies Inside Design Systems

2018-10-20T03:05:00+00:00October 20th, 2018|Categories: News, Tutorials|Tags: |

Dependencies in JavaScript are pretty straightforward. I can't write library.doThing() unless library exists. If library changes in some fundamental way, things break and hopefully our tests catch it. Dependencies in CSS can be a bit more abstract. Robin just wrote in our newsletter how the styling from certain classes (e.g. position: absolute) can depend on [...]

SVG Marching Ants

2018-10-19T03:05:07+00:00October 19th, 2018|Categories: News, Tutorials|Tags: |

Maxim Leyzerovich created the marching ants effect with some delectably simple SVG. See the Pen SVG Marching Ants by Maxim Leyzerovich (@round) on CodePen. Let's break it apart bit by bit and see all the little parts come together. Step 1: Draw a dang rectangle We can set up our SVG like a square, but [...]

CSS border-radius can do that?

2018-10-19T03:05:06+00:00October 19th, 2018|Categories: News, Tutorials|Tags: |

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so: .element { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those [...]

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok