Archive for the 'JavaScript' Category

Natively lazy-loading Facebook social plugins

Jul 24th, 2020

tl;dr: Add data-lazy=”true” to your Facebook social plugins that are below the fold and reap the benefits. In code: // before <div class=”fb-like” data-href=”https://phpied.com”></div> // after <div class=”fb-like” data-href=”https://phpied.com” data-lazy=”true”></div> The following 18 seconds video demonstrates the difference. Where currently your visitors load Facebook iframe content even if it’s way down the page, after you […]

 

WebAudio Deep Note, part 5: gain node

Nov 9th, 2019

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds nodes In part 4 we figured out how to play all 30 sounds of the Deep Note at the same time. The problem is that’s way too loud. Depending on the browser and speakers you […]

 

WebAudio Deep Note, part 5: nodes

Nov 3rd, 2019

Previously on “Deep Note via WebAudio”: intro play a sound 2.1. boots and cats loop and change pitch multiple sounds Nodes WebAudio makes a heavy use of the concept of nodes. A node is something that does a thing (I know, very helpful), for example makes noise or manipulates sound somehow. Then you connect the […]

 

WebAudio Deep Note, part 4: multiple sounds

Oct 20th, 2019

Previously in this series: intro play a sound 2.1. kick and snare (a fun distraction from the main series) loop and change pitch We need to play 30 sounds at the time, that is 30 instances of the same cello sample, all pitched all over the place and over time. (If that sounds odd, please […]

 

WebAudio Deep Note, part 3: loop and change pitch

Oct 11th, 2019

This journey started here, then continued, then took a slight turn, just for giggles, and now we’re back. After you learned how to play a sound, now let’s loop it, because the DeepNote goes on for about 25 seconds and we play the exact same sample of a cello that is under a second long. […]

 

WebAudio Deep Note, part 2.1: Boots and Cats

Oct 3rd, 2019

In the previous installment we came across the idea of creating noise via an oscillator and via a buffer filled with your own values (as opposed to values being read from a pre-recorded file). I thought a bit of elaboration is in order, even though we’re not going to use these ideas for the Deep […]

 

WebAudio Deep Note, part 2: play a sound

Sep 28th, 2019

(Part 1 (intro) is here.) Now that we know what to do, let’s go for it! First rule of business: load an audio file and play it. UI Let’s build a simple HTML page (demo) to test things: <button onclick=”play()”>▶ play</button> <button onclick=”stop()”>STOP!!!!</button> Now let’s implement this play() function. Fetch… Loading means fetching from the […]

 

WebAudio Deep Note, part 1: intro

Sep 18th, 2019

You’ve heard of WebAudio, but have you done any experimenting with it? This is a series of posts on exploring and discovering various APIs that WebAudio has to offer, by doing something concrete, namely recreate the THX Deep Note sound. If you cannot wait for me to write up everything, the code and slides (these […]

 

Exploring prefers-reduced-motion

Aug 13th, 2019

Animations and transitions on the web are cool and all, they can make the UI feel snappier and responsive (if used judiciously). However there are problems with motion like this. A whole lot of people are sensitive to motion and you don’t want your site to cause motion sickness and dizziness, right? Luckily, most modern […]

 

Asynchronous inline scripts via data: URIs

Feb 9th, 2019

Inline scripts are synchronous. “Well, duh!” you may say. That’s a feature, not a bug. Because accessing a variable after an inline script should succeed. And that’s fine. But not great. When is this bad? Well, inline scripts cause stylesheets to be blocking. Wait, what? Steve explained it 10 years ago, and it’s still relevant […]

 

Using ESLint in a script

Aug 29th, 2018

Instead of running ESLint on the command line and passing files to it, I wanted to require() and use it with code from strings. That is because I want to lint and unit-test the code from the book I write in AsciiDoc. (Will post the complete script once it’s running properly, some taste) Had to […]

 

This page loaded in X seconds

Mar 27th, 2018

I was just admiring Tim Kadlec eye-pleasing site. Nice, simple, see what I’m talkin’ ’bout. The feature I liked most was the footer that said “This page loaded in 0.186 seconds”. First of all – fast! Second – I thought all sites should have that. And what better way than an on-demand bookmarklet you carry […]

 

Do Search Engines speak JavaScript?

Mar 16th, 2018

A quick survey… So my onlinemusictools.com is a bunch of little React apps. I was wondering – is the JS-generated content of the apps visible in search engines? A quick survey was in order. The answer is – out of Google, Bing, DuckDuckGo, Yandex, only Google search crawler speaks the lingua JavaScript. Google screenshot below. […]

 

Intercepting new Image().src requests

Apr 14th, 2017

Maybe you’re an attacker who sneaked in a little JavaScript to an unsuspecting site and would like to, well, sneak. Or maybe you want to know what exactly all these third-party analytics scripts are “calling home”. Or maybe just for fun – wouldn’t it be cool to intercept and log all requests made with new […]

 

WebMIDI test page

Mar 3rd, 2017

Yesterday I had to plug in my keyboard to the computer and wasn’t sure if it was working. How do I test? Well, I had to look up an older post, copy and paste some code to the console… what a drag. I though it would be cool to have a page where you can […]

 

Intervals

Feb 6th, 2017

Here’s my new tool called intervals Play with it here. Learn about the theory behind it here. The code for the tool. What does it do? Generates a random music interval, shows it on the musical staff. You try to guess it. Clicking on the staff reveals the answer. You can also play the interval. […]

 

Photocreep

Jan 22nd, 2017

There’s a new tool in town. It lets you drag photos and gives you a map of where the photo was taken. Creepy, isn’t it? It figures this out using the meta (exif) information that’s part of a photo. The tool also lets you download a version of the photo without any exif information. The […]

 

create-react-app + sw-precache = PWA

Dec 31st, 2016

(this industry and its lingo…) PWA – Progressive Web App, it’s… a long story, go read here React – library for building UIs. There’s a book on React by yours truly. create-react-app – a tool that generates skeleton React apps sw-precache – a tool that helps turn any web app into a PWA Before This […]

 

File API Input Layer

Dec 31st, 2016

Every once in a while I feel inspired to create a little tool to “do one thing” ™. But often I get distracted and a little too lazy to get off the ground and forget all about it. So I thought maybe a little helper can, well, help move things along. Enter FAIL, short for […]

 

List of all the countries: HTML select and JSON too

Nov 6th, 2016

Ever needed a list of all the countries in the world to put as options in an HTML select? Well, here you go. And JSON too. You’re welcome! But how… How was the list derived so you can update it once in a while? Glad you asked. https://www.iso.org/obp/ui/#search/code/ is the page linked from W3 spec […]

 

Hello WebMIDI

Oct 30th, 2016

Inspired by this talk by Jean-Philippe Côté I saw at Web Unleashed in Toronto last month, I thought I should dust off the old midi cable. MIDI? MIDI is a protocol that various music and lighting devices use to talk to each other. Believe it or not v1.0 of the spec from 1983 is still […]

 

React: Up and Running

Sep 12th, 2016

I’m a little late (like, omgbbq, 2 months late) with this announcement, but here goes: I published my new book, called “React: Up and Running”. Go get it everywhere where books are sold and learn React from the ground up! I’ve been working with React for a while now and thought I have something to […]

 

Custom animated cursor via canvas

Aug 9th, 2016

Warning: don’t do this. Stop it! Just. Don’t. So there’s this hack by Ben Foxall that shows how you can escape the browser window and draw outside the page. I had to try it myself. So here comes: the animated “progress” indicator mouse cursor. Wait what? There exists the ability for your web page to […]

 

Jest + jQuery for testing a vanilla “app”

May 15th, 2014

Jest is a new javascript testing tool announced today. I thought I’d take it out for a spin testing the UI of a simple vanilla JS app – no CommonJS modules, no fancy stuff. Just old school JavaScript. Granted, it’s probably not what the tool was optimized to do, but it totally worked. The app […]

 

DIY source maps

May 8th, 2014

In today’s world of always having some sort of code transformation before your JS/CSS/HTML reaches the user, e.g. minification, concatenation, es6-to-es3 transpilation, it’s nice to be able to go back to the source before the transformation. And when that happens in the comfort and the immediacy of the browser’s dev tools, even better! Enter source […]