Best Practices With CSS Grid Layout

Rachel Andrew:

An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short answer to this question is to use the layout method as defined in the specification. The particular parts of the spec you choose to use, and indeed how you combine Grid with other layout methods such as Flexbox, is down to what works for the patterns you are trying to build and how you and your team want to work.

Worth a read.

Best Practices With CSS Grid Layout →

Elsewhere , , , Leave a comment

ngrok – Public URLs for exposing your local web server

To make a local server available to the outside world you could use a service like xip.io. Only problem is that xip.io doesn’t play that nice with firewalls and stuff like that.

Recently I used ngrok to solve just that. When started the app creates a tunnel to the ngrok servers, and makes your local server accessible via a (temporary) public URL.

Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.

Installation possible via Homebrew Cask:

brew cask install ngrok

ngrok – Public URLs for exposing your local web server →

Elsewhere , , Leave a comment

Let’s play with Chrome’s Face Detection API

Recently Wes Bos sent out this tweet:

Sparked by that tweet, João Miguel Cunha set out to play with it. The code itself is pretty simple: create an instance of FaceDetector and call .detect() on it. That promise eventually resolves with an array of detected faces.

var faceDetector = new FaceDetector();
faceDetector.detect(image)
  .then(faces => faces.forEach(face => console.log(face)))
  .catch(e => {
    console.error("Boo, Face Detection failed: " + e);
  });

Let’s play with Chrome’s Face Detection API →

Elsewhere , , , Leave a comment

“Crowded Fields” – The Brilliant and Absurd Time-Lapse Photography of Pelle Cass

I like these photos by Pelle Cass, in which he composes several of the same shots on top of each-other.

The contrast between the crowded fields (the name of this series) and the empty stands make this great.

Booooooom: The Brilliant and Absurd Time-Lapse Photography of Pelle Cass →
Pelle Cass: Crowded Fields →

Elsewhere , , Leave a comment

Scroll to the future – CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.

Very in-depth article on Evil Martians’ team blog on scrolling:

We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.

Subjects tackled are styling of scrollbars, position: sticky, IntersectionObserver, Smooth Scrolling, the overscroll-behavior property, etc.

I especially like this part of the closing notes (next to the plea for Progressive Enhancement):

Maybe even now, while you were scrolling through this article, another browser has shipped support for a property that will make your life easier, and your bundle size smaller.

Scroll to the future →

Elsewhere , , , Leave a comment

The dots do matter: how to scam a Gmail user

Recently James Fisher received an email from Netflix asking him to update his credit card information.

“Odd,” I thought, “but OK, I’ll check.” The email is genuinely from netflix.com, so I clicked the link. It logged me in and took me to an “Update your credit or debit card” page, which is genuinely hosted on netflix.com. No phishing here. But hang on, the “Update” page showed my declined card as **** 2745. A card number I don’t recognize. Checking my records, I’ve never seen this card number. What’s going on?

I finally realized that this email is to james.hfisher@gmail.com. I normally use jameshfisher@gmail.com, with no dots. You might think this email should have bounced, but instead it reached my inbox, because “dots don’t matter in Gmail addresses”

Whenever you’re implementing email addresses in your code, also beware for plussing when handling them. Additionally James also offers a nice idea, in which Gmail could prevent lots of these scams.

The dots do matter: how to scam a Gmail user →

Elsewhere , , , Leave a comment

FontCode – Putting hidden messages in text snippets by adjusting individual glyphs

Provided a text document with specific fonts, our method embeds user-specified information in the text by perturbing the glyphs of text characters while preserving the text content. We devise an algorithm to choose unobtrusive yet machine-recognizable glyph perturbations, leveraging a recently developed generative model that alters the glyphs of each character continuously on a font manifold. We then introduce an algorithm that embeds a user-provided message in the text document and produces an encoded document whose appearance is minimally perturbed from the original document.

FontCode →

Elsewhere , Leave a comment

React v16.3.0: New Lifecycle Events and Context API

React 16.3.0 just got released. Next to being able to forward refs and some changes to the lifecycle events it also sports a new Context API which I’ve written about before.

Even though the introductory blogpost over at the React blog is very detailed, the video below – covering the new Context API – forms a nice addition:

UPDATE 2018.03.30 Elijah Manner has created a video covering this release. Definitely also worth checking out:

React v16.3.0: New Lifecycles Events and Context API →

Elsewhere , , Leave a comment

Instagram Terminal Feed

Forget about that Instagram for Windows 95, and go for the real deal: Instagram on the CLI:

Sometimes checking your instagram during work is kind of strange, so why not check your instagram inside your terminal? OK… I know checking this during work is still strange… 😑 To be honest, I did this just for pure fun.

A color mode is also available.

Instagram Terminal Feed →

Elsewhere , , Leave a comment

Variable Fonts, an interactive presentation

Interactive slidedeck of a talk on Variable Fonts by Scott Kellum:

Advance with the arrow keys. Watch it fullscreen here.

Elsewhere , , Leave a comment