Functional Animations: What Makes a Good Transition?

September 27, 2016 by Bramus! Leave a comment

1-0i2slw80l7-agewecmzqpq

Functional animation is subtle animation that has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life.

[…]

Successful motion design possesses six characteristics.

Having built quite a few animations into some (web) interfaces lately I know it’s hard – both functional as technical – to get everything right.

Functional Animation In UX Design: What Makes a Good Transition? →

Elsewhere , , Leave a comment

Spectacle CodeSlide: Present code with style

September 26, 2016 by Bramus! Leave a comment

spectacle-code-slide

Present code with style using spectacle.

Awesome way to present code, and putting the focus of the reader where it needs to be. It also lets you jump to specific lines even if they’ve already been displayed before (because code tends to jump).

import React from 'react';
import { Spectacle, Deck } from 'spectacle';
import CodeSlide from 'spectacle-code-slide';
import shiaLabeoufMagicGif from "./shiaLabeoufMagic.gif"
import preloader from "spectacle/lib/utils/preloader";

preloader({
  shiaLabeoufMagicGif
});

export default class Presentation extends React.Component {
  render() {
    return (
      <Spectacle theme={theme}>
        <Deck transition={[]} transitionDuration={0} progress="bar">
          // ...
          <CodeSlide
            transition={[]}
            lang="js"
            code={require("raw!../assets/code.example")}
            ranges={[
              { loc: [0, 270], title: "Walking through some code" },
              { loc: [0, 1], title: "The Beginning" },
              { loc: [1, 2] },
              { loc: [1, 2], note: "Heres a note!" },
              { loc: [2, 3] },
              { loc: [4, 7], image: shiaLabeoufMagicGif },
              { loc: [8, 10] },
              // ...
            ]}/>
          // ...
        </Deck>
      </Spectacle>
    );
  }
}

Spectacle CodeSlide (GitHub) →
Spectacle CodeSlide Demo →

In the past – when I was still working in education – I worked with snippets that fade in when advancing, or code that is executed inline. Spectacle CodeSlide would’ve been a great addition to these two techniques, and could’ve formed a replacement for the laser pointer.

Elsewhere , , , Leave a comment

Webpack Module Tree Visualizer

September 26, 2016 by Bramus! 1 Comment

webpack-visualizer

Visualize and analyze your Webpack bundle to see which modules are taking up space and which might be duplicates.

Generate JSON stats, and pass it into the online tool.

webpack --json > stats.json

You can also use the plugin locally if you want.

Webpack Visualizer →

Related: Disc – Browserify Module Tree Visualizer →

Elsewhere , , , , 1 Comment

Disc – Browserify Module Tree Visualizer

September 26, 2016 by Bramus! Leave a comment

disc

Disc is a tool for analyzing the module tree of browserify project bundles. It’s especially handy for catching large and/or duplicate modules which might be either bloating up your bundle or slowing down the build process.

Build your bundle with the --full-paths flag and then pass that to discify:

browserify --full-paths index.js > bundle.js
discify bundle.js > disc.html
open disc.html

Disc →

Related: Webpack Module Tree Visualizer →

Elsewhere , , , , Leave a comment

You Might Not Need Redux

September 23, 2016 by Bramus! 1 Comment

react-opti

I like this post by Dan Abramov, the author of Redux, on how you might not need Redux:

If you’re working on an extensible terminal, a JavaScript debugger, or some kinds of webapps, it might be worth giving Redux a try, or at least considering some of its ideas.

However, if you’re just learning React, don’t make Redux your first choice. Instead learn to think in React. Come back to Redux if you find a real need for it, or if you want to try something new. But approach it with caution, just like you do with any highly opinionated tool.

In the article he also included an example which uses the Redux way of thinking (actions being dispatched, and reducers adjusting the state), but does not have Redux installed:

Redux library itself is only a set of helpers to “mount” reducers to a single global store object. You can use as little, or as much of Redux, as you like.

You Might Not Need Redux →

Related: A cartoon intro to Redux →

Elsewhere , , , 1 Comment

Redesigning Chrome desktop

September 23, 2016 by Bramus! Leave a comment

1-lnwjbpaofmearexl1ixkea

In the beginning of this month of September, the new Chrome Core UI redesign, or so called “Chrome MD” (for Material design), rolled out on Windows as part of our 53rd update. It is the last step of a three phase deployment of the new design,which started in 51 with Chrome OS and Linux, followed by macOS in 52. Windows is the culmination of that process and while Chrome is never finished, it felt to me like the right time to take a look back and reflect on this process that almost took 2 years, hopefully delivering some details and experiences that might be useful to you.

Extensive and detailed write-up. Be sure to read the “Lessons learned” closing note too.

Redesigning Chrome desktop →

Elsewhere , , , Leave a comment

Kaytranada – Leave Me Alone (ft. Shay Lia)

September 23, 2016 by Bramus! Leave a comment

It’s been a while since I’ve posted a music video. Here’s one by Kaytranada, taken from his album “99.9%”.

The album has been on repeat ever since it dropped in May, and has already taken its place in my “Best Albums of 2016” list.

Elsewhere , , Leave a comment

Kanye deconstructed: The human voice as the ultimate instrument

September 19, 2016 by Bramus! Leave a comment

Once again a great video by the folks over at Vox — their videos are always insightful, clear, well narrated, edited nicely, etc. In this video they talk about Kanye West and usage of the human voice throughout his oeuvre:

Kanye West’s music orbits around the power and flexibility of the human voice.

Take “Wolves” from “The Life of Pablo” for example (track starts at around 1:00):

It’s that voice floating throughout the track – in contrast with that bass — which does all the heavy lifting.

Kanye deconstructed: the human voice as the ultimate instrument →

Note: “808s & Heartbreak” and “My Beautiful Dark Twisted Fantasy“ are two of my favourite Kanye West albums. His most recent “The Life of Pablo” also pleases me. I suggest you start with those if you haven’t been listening to his albums yet. I wouldn’t recommend “Yeezus”.

Elsewhere , , , Leave a comment

Minify: A JavaScript and CSS Minifier Written in PHP

September 19, 2016 by Bramus! Leave a comment

php-logo

MatthiasMullie\Minify is a JavaScript and CSS Minifier written in PHP. Usage is straightforward:

use MatthiasMullie\Minify;

$sourcePath = '/path/to/source/css/file.css';
$minifier = new Minify\CSS($sourcePath);

// we can even add another file, they'll then be
// joined in 1 output file
$sourcePath2 = '/path/to/second/source/css/file.css';
$minifier->add($sourcePath2);

// or we can just add plain CSS
$css = 'body { color: #000000; }';
$minifier->add($css);

// save minified file to disk
$minifiedPath = '/path/to/minified/css/file.css';
$minifier->minify($minifiedPath);

// or just output the content
echo $minifier->minify();

The JavaScript version syntax is the same, just swap out the CSS classes with JS classes.

Install MatthiasMullie\Minify using composer:

composer require matthiasmullie/minify

MatthiasMullie\Minify Source (GitHub) →
Minifier (Demo/Hosted Minify Implementation) →

Elsewhere , , , , Leave a comment

React + The Shadow DOM = ReactShadow

September 19, 2016 by Bramus! Leave a comment

reactshadow

By using ReactShadow you have all the benefits of Shadow DOM in React.

import ShadowDOM from 'react-shadow';

export default props => {

    return (
        <ShadowDOM include={['css/core/calendar.css', props.theme]}>
            <h1>Calendar for {props.date}</h1>
        </ShadowDOM>
    );

}

Installation per npm, of course: 

npm i react-shadow --save

ReactShadow (GitHub) →
ReactShadow Demo →

Elsewhere , , , Leave a comment