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 …

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 …

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 …

Creating a Multiple Image Hero Layout with CSS Grid Layout

Excellent demo by Rachel Andrew: Using CSS Grid Layout and a touch of flexbox to build a more forgiving hero image block that can cope with additional content or additional boxes. CSS Grid: Multiple image hero block (CodePen) → Related: A Complete Guide to CSS Grid Layout →