Stoyan's web dev blog: phpied.com

Time 2020-10-04 12:03:48

Web Name: Stoyan's web dev blog: phpied.com

WebSite: http://www.phpied.com

ID:69916

Keywords:

dev,web,Stoyan,

Description:

Randomizing music with MuseScore and Node.js One of my esteemed professors from Santa Monica College, Dr. Driscoll asked for an opinion on how one can use a sheet of music and reshuffle some measures to generate a unique exercise for each student. This turned out more fun than anticipated and here s a solution I came up with using the free notation [ ] Natively lazy-loading Facebook social plugins tl;dr: Add data-lazy= true to your Facebook social plugins that are below the fold and reap the benefits. In code: // before div > Life after Facebook? Yesterday was my last day at Facebook. After 9 1/2 years it was high time for a change. I dropped the news on twitter/fb and thought now it would be nice to answer the question of what s next? that friends are wondering. The trajectory I myself have wondered sometimes what the life after Facebook could [ ] A programmer s job dimensions I m not the one who philosophizes often in public, but indulge me this thought on the types of work we do as programmers and feel free to add your own dimensions. I ve thought about how sometimes I like to work on user-facing products and sometimes on developer-facing ones. Real products that my mom can see [ ] WebAudio Deep Note, part 5: gain node 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 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 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 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 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 [ ] A bookmarklet: dataURI, please! Ever had a string of a data URI image and you want to see said image? Simple: type data:image/png;base64, followed by the base 64 string. Except it s too much syntax to remember. I mean c mon: colon, semi-colon, comma. And you probably don t do this often enough. A bookmarklet is called for to aid the memory. [ ] WebAudio Deep Note, part 2: play a sound (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 #8221;play() ▶ play /button button #8221;stop() STOP!!!! /button Now let s implement this play() function. Fetch Loading means fetching from the [ ] WebAudio Deep Note, part 1: intro 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 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 [ ] Integrating React Profiler Say hello to the new perf hotness a profiler built into React. This announcement blog post shows how to use it as a Chrome Extension, but you can also use it in your code, to get insight into real world interactions, even in production. Let s see how. Create a new react app If you re [ ] Prettier in TextMate Prettier is a code formatter, great for following consistent coding conventions with 0 effort. Here s how to add it to TextMate, my text editor of choice. Install Prettier Globally, so you take advantage of it in any old directory. npm install global prettier If that doesn t work, you probably need to install Node first. So [ ] Asynchronous inline scripts via data: URIs 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 [ ] Defining user styles User styles have been around since the early days of the web. They are a way for users to specify their browsing preferences using CSS cascade. I remember way back when this option was fairly prominent in Internet Explorer settings. Now, I don t even know how to find it in most browsers. But I did [ ] Using ESLint in a script 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 [ ] 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 [ ] 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 [ ] 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. [ ] 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 [ ] 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 [ ] 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 [ ] 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

TAGS:dev web Stoyan 

<<< Thank you for your visit >>>

Hot Websites