A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “Functional Animations: What Makes a Good Transition?”
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 …
Continue reading “Spectacle CodeSlide: Present code with style”
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 →
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 …
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, …
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 …
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” …
Continue reading “Kanye deconstructed: The human voice as the ultimate instrument”
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: …
Continue reading “Minify: A JavaScript and CSS Minifier Written in PHP”
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 →