Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS

May 3, 2018 by Bramus! Leave a comment

Handcrafted recreation of an 18th-century oil painting using just HTML and CSS.

Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish:

Chrome only though:

Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.

However, the results in other browsers are quite viewable (and remind me of the ACID tests)

Pure CSS Francine →
Pure CSS Francine Source →

Elsewhere , , , , Leave a comment

Destructuring arrays in PHP: Practical examples

May 3, 2018 by Bramus! Leave a comment

Being more focussed on JavaScript nowadays, I kinda forgot that it’s possible to destructure arrays in PHP ever since the release of PHP 7.1. Frank de Jonge provides us with some practical examples such as this simple one:

// JavaScript
let options = {enabled: true, compression: 'gzip'};  
let { enabled, compression } = options;

console.log(enabled);
console.log(compression);
// PHP 7.1+
$options = ['enabled' => true, 'compression' => 'gzip'];
['enabled' => $enabled, 'compression' => $compression] = $options;

var_dump($enabled);
var_dump($compression);

Freek Van der Herten adds some extra examples, showing its use in for loops:

$members = [
    [1, 'Seb'],
    [2, 'Alex'],
    [3, 'Brent'],
];

foreach ($members as [$id, $name]) {
   // do stuff with $id and $name
}

Array destructuring in PHP →
Array destructuring in PHP (Additions by Freek) →

Elsewhere , , , Leave a comment

What the React Native docs forgot to tell you about animations

May 3, 2018 by Bramus! Leave a comment

Good article by Karen de Graaf to use along with the React Native docs on Animations

Unfortunately React Native’s documentation about animations is not so great. Some things are explained rather vaguely and other things are plain missing. That’s why I wanted to give you a quick overview of the things I think need a bit of extra explanation. There’s still more out there, but these are the things you’ll probably need most.

What the React Native docs forgot to tell you about animations →

Elsewhere , , Leave a comment

“last 2 versions” considered harmful

May 3, 2018 by Bramus! 2 Comments

When using babel-preset-env with the list of supported browsers set to "last 2 versions" – which I am doing used to do – you’re basically supporting browsers that are dead or have no users.

Take Internet Explorer for example. It’s been replaced by Edge and will never have any new versions after Internet Explorer 11. Microsoft gave us that gift.

But if you say that you support the “last 2 versions” of every browser, that means you support the last 2 versions of Edge AND the last 2 versions of Internet Explorer.

And since there’s never going to be another version of Internet Explorer, you will be supporting Internet Explorer 10 & 11… forever.

The personal recommendation of the author is this setting:

"browsers": [
  ">0.25%",
  "not ie 11",
  "not op_mini all"
]

“last 2 versions” considered harmful →

Elsewhere , , , 2 Comments

How to reposition multiple iOS apps at the same time

May 3, 2018 by Bramus! Leave a comment

TIL: You can move multiple iOS apps at the same time. Tap and hold to start wiggling one, move it a little, then tap other apps to add ‘m to the stack you’re moving.

Elsewhere , , Leave a comment

Best Practices With CSS Grid Layout

April 26, 2018 by Bramus! Leave a comment

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

April 26, 2018 by Bramus! 1 Comment

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 , , 1 Comment

Let’s play with Chrome’s Face Detection API

April 26, 2018 by Bramus! Leave a comment

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

April 26, 2018 by Bramus! Leave a comment

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.

April 26, 2018 by Bramus! Leave a comment

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