Organizing a React component these days (H1/2018)

I started typing an answer to a question by @alexharrisonsax since my React book is written for the recent past (React 14) and things change. Twitter is not great for code discussions, so here goes. Import dependencies import React, {Component, Node} from ‘react’; Declare the component class App extends Component {} Unless it’s functional stateless […]

May 25th, 2018
Tags: react

This page loaded in X seconds

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 […]

March 27th, 2018
Tags: bookmarklets, JavaScript, performance

Do Search Engines speak JavaScript?

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. […]

March 16th, 2018
Tags: JavaScript

OnlineMusicTools.com

Finally managed to cobble together an index page for the bunch of tools I’ve been hacking on in the past year as I progress through my music education. Is it better UX than the Apache default file listing? Hmm… Say hello to onlinemusictools.com! Not the best domain name, I know. But everything is bloody taken […]

March 16th, 2018
Tags: Music, react, tools

How it’s made: flashcards with Italian slang for musicians

Update: Now in French too Update 2: and in German Update 3: now with Web Speech API (scroll to the bottom) Here’s a little app that gives you flashcards of Italian words used in music: https://www.onlinemusictools.com/italiano/ It also pronounces the words in four different voices. The code for the tool: https://github.com/stoyan/italiano A few implementation notes […]

March 7th, 2018
Tags: ffmpeg, Music, react, tools

Say Yuri, or How to kill an hour on a rainy afternoon

How to kill an hour on a Mac on a rainy afternoon? open Terminal.app say -v ? (to list all the voices installed) or say -v ? | grep en_ (for English-only) say -v Fred Fitter. Happier. More productive. Replace Fred with Yuri. Repeat. And if you want more voices, or better ones (some do […]

March 4th, 2018
Tags: mac, tools

ffmpeg to mix audio files

Here’s how to mix three audio files into one: ffmpeg -i alex.aiff -i fred.aiff -i whisper.aiff -filter_complex “[0:0][1:0] amix=inputs=3:duration=longest” out.mp3 Note the inputs=3 part as we’re mixing three files. And this mixes only two files putting one on the left and one on the right: ffmpeg -i alex.aiff -i fred.aiff -filter_complex amerge out.mp3

March 2nd, 2018
Tags: ffmpeg, tools

Minimum Viable Sharing Meta Tags

MVSMT for short… yeah, like this is going to catch up. So anyway. Before starting publishing the Web Performance Calendar this year I though: hey, them articles should show up nicer when shared in the most Social of Medias. You know, a big ol’ image and that. (It’s not really how I talk actually, even […]

December 28th, 2017
Tags: (x)HTML(5), WordPress

Taking Mozilla’s DeepSpeech for a spin

Speech-to-text, eh? I wanted to convert episodes of my favorite podcast so their invaluable content is searchable. I’m moderately excited with the results but I’d like to document the effort nonetheless. DeepSpeech First thought – what open-source packages exist out there? Checking out wikipedia I see a brand-new one from Mozilla – DeepSpeech. Intriguing. Install […]

December 1st, 2017
Tags: ffmpeg, misc hackery

Performance calendar ’17 call to all

Helloooo! It’s time to sit down and write an article for the performance calendar. You have until Nov 30 to send me your piece. Details. What do you want to write about? Some ideas: Hello, 2007 called! Do I still shard domains to load resources from? Do I still package all JS in one big […]

November 11th, 2017
Tags: performance

Browser remembers your password, but you don’t? Take it back!

We’ve all seen something like this: But you have no idea what the password is. How to get the human-readable version of *******? Method 1: use the browser’s developer tools Provided you have a reasonably recent browser, just open the Developer tools by right-clicking the input field with the password and then select “Inspect Element”. […]

November 5th, 2017
Tags: bookmarklets, qa

hg revert a single file from the repo

Revert hg revert -r .^ filename What’s in a commit? hg tip -vp

October 9th, 2017
Tags: qa

Stylelint + TextMate integration

Naturally, you want your lint tools integrated with your text editor. Here’s what I did to integrate Stylelint (hello!) with TextMate. New Bundle In TextMate… menu Bundles / Edit Bundles…. I didn’t see a way to add a new Command, so I right-clicked an existing one (one with a C icon for Command), selected Find […]

October 1st, 2017
Tags: CSS, tools

Hello Stylelint

Stylelint is a great new modern unopinionated CSS linter. It’s a must for any project beyond test.html. After my last post about always adding generic font families I thought it should be a lint-able thing. So I looked into extending Stylelint. You can write new lint rules and tell Stylelint to use them. In my […]

October 1st, 2017
Tags: CSS

PSA: always add a generic font-family backup

TL;DR: /* WRONG */ .huh { font-family: Helvetica Neue, Helvetica, Arial; } /* OK */ .huh { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; } Exhibit 1: Bing search Yeah, I use Bing search, shut up! Check this out, the ugly Times New Roman font to the right where it says Rewards: Definitely not what the […]

September 27th, 2017
Tags: font-face

Font Fiddling

I’ve been trying to stay away from webfonts as much as I can. IMO they are not worth the performance complications. Font loaders, FOUT, yadda-yadda. But… it happens. Story time While showing off another one of my music theory exercises to my prof, he mentioned it would be nice to be able to tell v […]

September 27th, 2017
Tags: font-face, performance

广西风采快乐双彩: Quick stats on html/js/css sizes

I’m sure better tools exist, but hey, quick and dirty is faster: running a quick console thing to tell me what makes the HTML payload bigger

Intercepting new Image().src requests

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 […]

April 14th, 2017
Tags: JavaScript

WebMIDI test page

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 […]

March 3rd, 2017
Tags: JavaScript, Music, tools, WebAudio

Batch convert image formats with imagemagick

mogrify (like convert) is one of the utilities that come with imagemagick. Here’s an example of how you convert a batch of pic files to jpeg. Same for png to jpeg, vice-versa, etc. $ mogrify -format jpg *.pic Boom! Next! Also see: batch convert audio/video files with ffmpeg

February 18th, 2017
Tags: ffmpeg, images, tools

Intervals

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. […]

February 6th, 2017
Tags: JavaScript, Music, react, tools

Photocreep

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 […]

January 22nd, 2017
Tags: images, JavaScript, react, tools

The last line-height you’ll ever need

One of the trouble areas with CSS (other than it’s too hard to master) is that it’s too easy to write a lot of it. (I’ll just leave it here. Lately we’ve seen far too much anti-CSS talk, I’m sure most of it is not wrong, but maybe not too productive either.) Therefore anything you […]

January 8th, 2017
Tags: CSS

HTTPS migration: a WordPress blog hosted on Dreamhost

I use Dreamhost. Have been since 2008. If you’re not using Dreamhost… well, go sign up and here’s $50 off of the $97 yearly plan. Now some folks reminded me recently that the Perf calendar was not yet migrated to HTTPS… True enough. I have to do it. Eventually. In any normal situation I’ll procrastinate […]

January 8th, 2017
Tags: hosting, WordPress

When did blog comments die?

I disabled comments on this blog and a few other some time ago because I couldn’t keep up deleting spam and it was getting embarrassing. I decided to clean the old ones up, add more protection (captcha? 1 + 5 = ?) and enable again. Needless to say, I failed because of procrastinating at step […]

January 6th, 2017
Tags: misc hackery

  • “四新”彰显党的十九大思想灵魂和精髓要义 2018-08-17
  • 热身赛-U17女篮73-68立陶宛 杨舒宇19分刘禹彤13分 2018-08-16
  • 七月流火:一半是甜蜜 一半是仁慈 2018-08-15
  • “嫦娥”飞向月球背面,将会揭开哪些秘密? 2018-08-15
  • 一代枭雄身后事:“曹操墓”认定过程缘何一波三折? 2018-08-04
  • 女出纳侵吞千万公款扮富婆 7年未被公司发现 2018-08-04
  • 南昌PM2.5浓度写进目标责任书 切实防治大气污染 2018-07-20
  • 网友投诉不文明养犬行为 有关部门加强治理 2018-07-20
  • 144| 620| 739| 441| 770| 604| 7| 645| 976| 919|