Bram.us

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 javascript, link, react, redux 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 design, google chrome, link, ui 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 kaytranada, music, video 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 kanye west, music, video, vox Leave a comment

Minify: A JavaScript and CSS Minifier Written in PHP

September 19, 2016 by Bramus! Leave a comment

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 css, javascript, link, minify, php 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 javascript, link, react, shadow dom Leave a comment

Title Design: The Making of Movie Titles

September 19, 2016 by Bramus! Leave a comment

Title designer Dan Perri explains how he designed movie titles for films such as “Star Wars,” “The Exorcist,” and “Raging Bull.”

Elsewhere design, movies, star wars, typography, video Leave a comment

Making viewport units work properly in Mobile Safari

September 12, 2016 by Bramus! Leave a comment

A typical issue with the well supported Viewport Relative Units (you know: vh, vw, vmin, and vmax) that bothers me a lot is that MobileSafari (Safari on iOS) takes the height of the address bar into account for 100vh.

Take a look at the footer of that first block in the screenshot below: since its container exceeds 100% of the viewport’s height – even though said container is set to be 100vh in height – the date at the bottom bleeds out of the viewport:

Viewport Units Buggyfill is a script that fixes that kind of bad browser implementations. With Viewport Units Buggyfill applied, all is fine and dandy: