Replace Bootstrap Layouts with CSS Grid

Past issues Subscribe

Apr 18 May 2

Apr 25 2017

Replace Bootstrap Layouts with CSS Grid

What's going on in < / > world

"Easy is boring. That's why I love the web and browsers." - Remy Sharp

Hello, you're reading Infinum Frontend Cookies, bringing you the latest JavaScript and CSS related news straight to your inbox every week.

Replace Bootstrap Layouts with CSS Grid

Layouts on the web have always been tricky. When the web was first introduced, there was no method for layouts. Then came tables (in tables, in tables, in tables). It was hackish and weird, but it worked. When CSS was introduced in the late 90s, developers were able to start using divs and floats for their designs and layouts. This eventually led to frameworks and grid systems that helped make sense of all of the “gotchas” like clearing floats, negative margins, responsive design and more.

In the news

Node.js 8 will be published a month later than previously planned

Node.js contributors decided to postpone the release of the newest version in order to include the newest V8 engine version (v5.9, with TurboFan + Ignition) which should be considerably faster than the old one.

Tools & libraries

Stickybits

Stickybits is a lightweight alternative to position: sticky polyfills

Tutorials & guides

Server-side Rendering With Preact and Firebase

Firebase is excellent for mobile web and mobile apps. In this article, Valeri will walk you through using Firebase with Preact, a lightweight React alternative, to build a simple app with server-side rendering.

How to install and use Headless Chrome on OSX

This walkthrough shows you how to get headless Chrome up and running on OSX and explains in detail how to use the code examples provided by the Chrome team

For beginners

Pseudo-classes - The Basics

It’s likely that you’re already familiar with some of the user interaction pseudo-classes, namely :link, :visited, :hover, :active, and :focus.

Blogs

Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions

Familiarity bias is a measurable human cognitive bias that leads us to make self-destructive decisions despite being aware of a better option. We keep using the same old patterns in spite of knowing about better patterns out of comfort and habit.

How we made our product more personalized with CSS Variables and React

CSS Variables (Or CSS Custom Properties as they are officially known) are a new feature of CSS that allow you to define placeholder values for CSS properties.

When Does a Project Need React?

You know when a project needs HTML and CSS, because it's all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries.

Building virtual reality experiences on the web with React VR

Over the past year, virtual reality has made major strides toward becoming the next computing platform.
With React VR, you can use React components to compose scenes in 3D, combining 360 panoramas with 2D UI, text, and images. You can immerse the user with audio and video capabilities, plus take full advantage of the space around you with 3D models. If you know React, you now know how to build 360 and VR content!

Hello from the server side

Hard-won lessons: Five years with Node.js

After five years working with Node.js, Scott has learned a lot. He has already shared a few stories, but this time he wanted to focus on the ones he leaned the hard way. Bugs, challenges, surprises, and the lessons you can apply to your own projects!

Demo