Mozilla Rebranding

Nice!

Arrival – Mozilla Open Design →

Elsewhere , , Leave a comment

Conditions for CSS Calculations

In CSS we have feature queries (@supports) available to create ifelse-like structs. What if we could extend our means of using conditions in CSS?

Roman Komarov provides us with a clever technique – which involves using CSS Variables, calc(), and some binary logic – to implementing this type of conditions on a per CSS rule basis. The simplest way to explain it is to just show it:

:root {
    --is-big: 0;
}

.is-big {
    --is-big: 1;
}

.block {
    padding: calc(
        25px * var(--is-big) +
        10px * (1 - var(--is-big))
    );
    border-width: calc(
        3px * var(--is-big) +
        1px * (1 - var(--is-big))
    );
}

The lines where * var(--is-big) is used are applied when the value of that CSS Variable is 1 (true). The lines where * (1 - var(--is-big)) is used are applied when said value is 0 (false).

In the example above it’d be much easier/better to define two different CSS blocks (one for just .block, and one for .block.is-big (or .is-big .block depending on the HTML structure)). Perhaps some scenarios where JavasScript changes the value of a CSS variable could provide us with a few interesting use cases.

Conditions for CSS Variables →

Elsewhere , , Leave a comment

Free Book: Exploring ES2016 and ES2017

From the same author as Exploring ES6. Again available for free online, or available for purchase as an ebook.

Exploring ES2016 and ES2017 →

Elsewhere , , Leave a comment

Free Book: Exploring ES6

An in-depth book on ECMAScript 6, for JavaScript programmers.

Extensive book written by Axel Rauschmayer (whom you might know from 2ality.com), available for free online. It’s also possible to purchase as an ebook-version (.epub et al) of the book.

Exploring ES6 – Upgrade to the next version of JavaScript →

Elsewhere , , , 1 Comment

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 styles. A lot faster than applying them one-by-one (*).

const $demo = document.querySelector('#demo');

Object.assign(demo.style, {
    display: 'inline-block',
    padding: '0.2em 0.4em',
    borderRadius: '0.4em',
    color: 'white',
    fontWeight: 700,
    background: 'rebeccapurple',
});

Here’s a demo pen:

(*) I know, a better approach would be to assign just one extra className onto an HTMLElement in order to apply a set of CSS rules onto it. I’m merely pointing out here that it’s possible to do this kind of thing.

Elsewhere , , Leave a comment

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 working tree. Commit or stash changes first.");
                        }
                    })
                },
                {
                    title: "Checking remote history",
                    task: () => execa.stdout("git", ["rev-list", "--count", "--left-only", "@{u}...HEAD"]).then(result => {
                        if (result !== "0") {
                            throw new Error("Remote history differ. Please pull changes.");
                        }
                    })
                }
            ], {concurrent: true});
        }
    },
    {
        title: "Install package dependencies",
        task: () => execa("npm", ["install"])
    },
    {
        title: "Run tests",
        task: () => execa("npm", ["test"])
    },
    {
        title: "Publish package",
        task: () => execa("npm", ["publish"])
    }
]);

tasks.run().catch(err => {
    console.error(err);
});

It’s also possible to dynamically skip a task in the series, and to run tasks concurrently.

A standalone binary to pass in a .json file with tasks would nicely compliment this.

listr – Terminal task list →

Elsewhere , Leave a comment

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 select files to upload.</div>
        </Dropzone>
    );
  }

}

In the onDrop you can then process the files for uploading.

react-dropzone
react-dropzone Source (GitHub) →

Elsewhere , , , Leave a comment

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 Input Types →

Elsewhere , , Leave a comment

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 DateInput which combines an <input /> and a react-day-picker.

Here’s a screenshot of an example component I created at work, based upon this example:

That’s a <DayPicker /> contained in a <Popover position="bottom" align="left" /> next to an <input type="text" /> contained in a <StreamSettingsForm /> contained in a <Modal /> you see there 😉

react-day-picker

Elsewhere , , , 1 Comment

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 the photographers intended them to be seen. By using RAISR to display some of the large images on Google+, we’ve been able to use up to 75 percent less bandwidth per image we’ve applied it to.

Wow!

Google Blog: Saving you bandwidth through machine learning →
Enhance! RAISR Sharp Images with Machine Learning →

Elsewhere , , , 1 Comment