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

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

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

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

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

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

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

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

As announced, starting with React v0.14 (next release), the JSXTransformer.js won’t be part of the release. Also `react-tools` npm package is no more. So whatchagonnawannado is switch to Babel. Here’s how. Build-time transform Prerequisite: install Babel $ npm install –global babel Where you previously had this as part of your development/build process: $ jsx –watch […]

Previously… React and tables. I’ve been meaning to improve a little on the table example built with React and a post by Steve was the final push. He shared his “ActiveTable” bookmarklet. So, introducing a bookmarklet to make it easier to work with random HTML tables you come across… ReActiveTable Drag this link to your […]

Part 1 ended with todos. The first one was to couple the server-side generated code with the client-side React, so that any updates past the initial page load will be handled by React’s client JS, which is where React shines. Let’s see how you can do just that. PHP data fetch, gluing JS for v8 […]

Problem: Build web UIs Solution: React Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives) Solution: React page to render the first view Problem: Can’t host node.js apps / I have tons of PHP code Solution: Use PHP then! This post […]

In the previous post I mentioned the pains, misery and suffering attached to creating and updating an HTML table in DOM land. Now let’s see how you do this simple task in React. Demo React is all about components. So let’s build one. Let’s call it Table (to avoid any confusion what the component is […]

I gave a talk about React at BrazilJS few days ago. The “slides” are here. In this post I’ll go over what I said (more or less) at the beginning of the presentation. I hope to follow up with some more code. Disclaimer: I work at Facebook. But these are my thoughts. In fact, I […]