Snippets

These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.

Using the Page visibility API to optimize an application for background

Web developers should be aware that users often have a lot of tabs open in the background and it can have a serious effect on power usage and battery life. Work in the background should be kept to a minimum unless it’s absolutely necessary to provide a particular user experience. The Page visibility API should be used to detect when page is the backgrounded and suspend all unnecessary work like visual updates.

Javascript

var doVisualUpdates = true;
 
document.addEventListener('visibilitychange', function(){
  doVisualUpdates = !document.hidden;
});
 
function update() {
  if (!doVisualUpdates) {
    return;
  }
  doStuff();
}

Tags: 

hyperHTML: A Virtual DOM Alternative

The easiest way to describe hyperHTML is through an example.

Javascript

// this is React's first tick example
// https://facebook.github.io/react/docs/state-and-lifecycle.html
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);
 
// this is hyperHTML
function tick(render) {
  render`
    <div>
      <h1>Hello, world!</h1>
      <h2>It is ${new Date().toLocaleTimeString()}.</h2>
    </div>
  `;
}
setInterval(tick, 1000,
  hyperHTML.bind(document.getElementById('root'))
);

Permalink to this heading.Features

  • Zero dependencies and it fits in less than 2KB (minzipped)
  • Uses directly native DOM instead of inventing new syntax/APIs, DOM diffing, or virtual DOM
  • Designed for template literals, a templating feature built in to JS
  • Compatible with vanilla DOM elements and vanilla JS data structures *
  • Also compatible with Babel transpiled output, hence suitable for every browser you can think of

* actually, this is just a 100% vanilla JS utility, that's why is most likely the fastest and also the smallest. I also feel like I'm writing Assembly these days ... anyway ...

Tags: 

Are We Breaking The Internet?

As more people and more devices get connected to the internet, the lure of centralizing control—which makes it easier for companies to manage them—is bumping its head against the initial design of the internet: to drive reliability and scalability. With every new largely centralized system that comes online, the internet becomes more brittle, as centralization creates an increased number of single points of failure.

Tags: 

CSS Grid Guides on MDN

A few weeks ago I was approached by the good people over at MDN, asking if I would be interested in writing a comprehensive resource for MDN on CSS Grid Layout. A series of guides to explain the grid specification with examples - ready for Grid shipping in Firefox 52 today.

I think that MDN is the best place for references and increasingly for learning web development, therefore I was very keen to add to that material and to create a learning resource for grid. Over the last couple of weeks I have written a book-worth of words and it is all available on MDN right now.

[...]

  1. Basics concepts of grid layout
  2. Relationship to other layout methods
  3. Line-based placement
  4. Grid template areas
  5. Layout using named grid lines
  6. Auto-placement in grid layout
  7. Box alignment in grid layout
  8. Grids, logical values and writing modes
  9. CSS Grid Layout and Accessibility
  10. CSS Grid Layout and Progressive Enhancement
  11. Realizing common layouts using grids

Tags: 

Text stroke with CSS

The text "Here is some special text" with the words "some special" having a stroke applied to them, and a base inner colour matching the background.

There is a non-standard way to stroke HTML text (SVG has a standard way). It's not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:

CSS

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

And she's right:

This CSS isn't fully-baked or fully-supported. But it's good enough to be used today, especially since it's simply offering a visual enhancement. It's not mission critical to making a website usable.

I'd only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it'll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color) :

CSS

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

See the link for more tricks, and the comments make a good point that you don't have to use text-fill-color if you're using @supports: just use color.

Tags: 

Dealing with long words in CSS

CSS

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. [Although] I have tested this solution in 26 different browsers I am still not sure this will work 100% – if you find any edge case please let me know.

Tags: 

Expand last row of wrapped flex items to fill entire row

Thanks to Jonathan Snook, I've learnt that we don't need quantity queries to create a balanced grid. Quantity queries are very powerful, but so is Flexbox. If we just want all the items in the last row to fill the space, regardless of how many there are, then Flexbox can take care of this. But if we want to add additional styles to the items, we still need quantity queries.

This is the grid we want to achieve:

A wrapped grid of flexbox items. The first two rows have four items each, stretching to the full width of the container. The third row only has three items, but they also stretch to the available space.

Here's the Flexbox magic.

The container needs to have the property display: flex; and the items need to be wrapped using flex-wrap: wrap;

CSS

.list {
    display: flex;
    flex-wrap: wrap;
}

Now here's the clever bit. We can set an initial width to the items (in this case flex-basis: 23%;) so that each item will always get a width of 23% unless otherwise stated in the CSS. flex-grow: 1; tells the items to grow and fill the space in the row.

CSS

.list-item {
    ...
    flex-basis: 23%;
    flex-grow: 1;
}

So, thanks to flex-grow, no matter how many items are in the last row, they will always fill the space. Works like magic! It's amazing how much can be achieved with so little CSS.

Tags: 

Pages