Author Archives: Bramus!

Realtime Audio-Visualizations with JavaScript

window.onload = function() { var ctx = new AudioContext(); var audio = document.getElementById(‘myAudio’); var audioSrc = ctx.createMediaElementSource(audio); var analyser = ctx.createAnalyser(); // we have to connect the MediaElementSource with the analyser audioSrc.connect(analyser); // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec) // frequencyBinCount tells you how many values you’ll receive …

Continue reading “Realtime Audio-Visualizations with JavaScript”

Read Post →

Twemoji

twemoji.parse(‘I \u2764\uFE0F emoji!’); // will produce /* I <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/36×36/2764.png"> emoji! */ Nugget of JavaScript to replace astral symbols (emoji) with images in browsers that don’t support them. Yes, looking at you Chrome on OS X. Images are included in the repo, or can be loaded from a CDN. Twitter Emoji for …

Continue reading “Twemoji”

Read Post →

SSL Config Generator

Just choose the web server / web front you’re using (Apache, Nginx, HAProxy) + whether you want to support only modern, intermediate, or old versions of browsers and a proper configuration will be generated. <VirtualHost *:443> … SSLEngine on SSLCertificateFile /path/to/signed_certificate SSLCertificateChainFile /path/to/intermediate_certificate SSLCertificateKeyFile /path/to/private/key SSLCACertificateFile /path/to/all_ca_certs # modern configuration, tweak to your needs SSLProtocol …

Continue reading “SSL Config Generator”

Read Post →

7 Principles of Rich Web Applications

My approach is to examine the usage of JavaScript exclusively from the lens of user experience (UX). In particular, I put a strong focus on the idea of minimizing the time it takes the user to get the data they are interested in. Starting with networking fundamentals all the way to predicting the future. Server …

Continue reading “7 Principles of Rich Web Applications”

Read Post →

Responsive Images in Practice

<img srcset="quilt_3/large.jpg 1240w, quilt_3/medium.jpg 620w, quilt_3/small.jpg 310w" sizes="(min-width: 41.25em) 38.75em, calc(100vw – 2.5em)" src="quilt_3/medium.jpg" alt="A crazy quilt whose irregular fabric scraps are fit into a lattice of diamonds." /> Let’s take an existing web page and make its images responsive. We’ll do so in three passes, applying each piece of the new markup in turn: …

Continue reading “Responsive Images in Practice”

Read Post →

9 basic principles of responsive web design

Let’s clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it. To keep it simple we’ll focus on layouts Great and easy to understand gifs explaining a few concepts – I prefer this word over principles – of responsive web design. 9 basic principles of responsive web …

Continue reading “9 basic principles of responsive web design”

Read Post →

The iOS Design Guidelines

Designing iOS apps can be difficult sometimes, but finding correct and up-to-date information about all of Apples’ devices shouldn’t be. These design guidelines will help any designer who’s building neat things for iOS get started within seconds. Screen sizes, icons, grids, typography, etc. – it’s all there. The iOS Design Guidelines →

Read Post →