Using Object.assign() to quickly set multiple inline styles

Since an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects. The result is that all keys from those extra objects will be merged as CSS properties along with their values on the currently applied …

Run a Terminal task list with listr

With listr one can define a set of tasks to run: const execa = require("execa"); const Listr = require("listr"); const tasks = new Listr([ { title: "Git", task: () => { return new Listr([ { title: "Checking git status", task: () => execa.stdout("git', ['status', '–porcelain"]).then(result => { if (result !== "") { throw new Error("Unclean …

react-dropzone

Simple HTML5 drag-drop zone to drop files on. import React from ‘react’; import Dropzone from ‘react-dropzone’; export default class DropzoneDemo extends React.Component { onDrop(acceptedFiles, rejectedFiles) { console.log("Accepted files: ", acceptedFiles); console.log("Rejected files: ", rejectedFiles); } render() { return ( <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}> <div>This dropzone accepts only images. Try dropping some here, or click to …

Date/Time Input Types coming to Firefox

Date/Time Input Types are coming to Firefox, and I must say they look quite good too (as a reference: here’s how Chrome implemented this): The implementation also looks familiar, doesn’t it? 😉 The date/timepickers are currently locked behind a flag in Nightly. Change dom.forms.datetime in about:config if you want to try them out already. Date/Time …

react-day-picker

react-day-picker is a flexible date picker component for React. no external dependencies select days, ranges, whatever using CSS modifiers ready for localization, even with moment.js customizable style navigable via keyboard, ARIA support As with every other well-written React component you can easily include this in your own code to – for example – create a …

Saving bandwidth through machine learning

When requesting a high-resolution image with the Android Google+ app, one no longer gets the full version sent over. Instead, one gets a low-resolution version which is then processed by RAISR: RAISR, which was introduced in November, uses machine learning to produce great quality versions of low-resolution images, allowing you to see beautiful photos as …

Mood boards in a content-first design process

Thomas Byttebier, who has been taking a content first approach, wondered if he could design something visual to present to their clients alongside the content prototype: Do we really need to finish all content before researching the project’s visual vocabulary? It’s a tricky question of course. At first I believed it to be impossible even. …

TensorKart: self-driving MarioKart with TensorFlow

During the winter break Kevin Hughes decided to try and train an artificial neural network to play MarioKart 64: After playing way too much MarioKart and writing an emulator plugin in C, I managed to get some decent results. Getting to this point wasn’t easy and I’d like to share my process and what I …

Does Google execute JavaScript?

Stephan Boyer created a website with some JS injected content and waited for Google to crawl it. It got indexed, but without JS execution. Only after having submitted the site manually via the Google Search Console it got indexed with JS executed. His conclusion: Google may or may not decide to run your JavaScript, and …