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, …
Tag Archives: link
Redesigning Chrome desktop
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 …
Minify: A JavaScript and CSS Minifier Written in PHP
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”
React + The Shadow DOM = 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 →
Making viewport units work properly in Mobile Safari
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 …
Continue reading “Making viewport units work properly in Mobile Safari”
Grade.js
This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images. Apply the Grade function to elements wrapping the source images: <script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ Grade(document.querySelectorAll('.gradient-wrap')) }) </script> … <div class="gradient-wrap"> <img src="./samples/finding-dory.jpg" alt="" /> </div> Installation possible with npm: npm install grade-js Grade.js →Grade Source (GitHub) →
Mission Control – Remote Config Utility for iOS, OSX, …
Have you ever wished you could change some config parameter for your app without deploying a new version? Of course you have! Wouldn’t it be great if you had whole config for your app in the cloud and change it as you see fit? Of course it would! Well, go ahead, just put some config …
Continue reading “Mission Control – Remote Config Utility for iOS, OSX, …”
BlokDust – Visual web-based music making app
Chrome DevTools Tip: Blackboxing Scripts
The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained in that file. A typical example would be to blackbox the script of the JS …