Archive for the 'JavaScript' Category

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

 

Writing ES6 today with jstransform

Apr 21st, 2014

So there’s this recent open-source project from Facebook called jstransform. It’s also used by ReactJS. It lets you explore ES6 features and not only explore, but use them in production code. All you need to do is add the transformation to your static resource pipeline. (Of course you have one, right, for minification and so […]

 

Hello subpixel world

Feb 6th, 2014

Since IE9 and Firefox(v.?) we now have subpixel rendering of fonts. This is cool and all but imagine this: you have some text you want to measure the width of the text and size another element to the same dimensions Simple. But if you use offsetWidth/offsetHeight to measure, you get a rounded integer and not […]

 

NYC.bind(me)

Sep 22nd, 2013

On my way to NYC for Edge conference and NYC Web perf meetup. Some slides and RSVP links inside.

 

Server-side React with PHP – part 2

Sep 19th, 2013

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

 

Server-side React with PHP

Sep 13th, 2013

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

 

Installing v8js for PHP on a Mac

Sep 11th, 2013

Motivation? Run JS code inside PHP. Just… because I struggled for a while with this installation, so leaving a trail here for anyone looking. What you need to accomplish? Goal: run JS code inside a PHP script running on a webserver. Already accomplished: Macs come with a webserver (Apache) and PHP. To get there: 1. […]

 

Reactive table

Sep 10th, 2013

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

 

Remarkable React

Aug 26th, 2013

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

 

C3PO: Common 3rd-party objects

Feb 18th, 2013

Problem: too much JavaScript in your page to handle 3rd party widgets (e.g. Like buttons) Possible solution: a common piece of JavaScript to handle all third parties’ needs What JavaScript? If you’ve read the previous post, you see that the most features in a third party widget are possible only if you inject JavaScript from […]

 

Speed geek’s guide to Facebook buttons

Feb 14th, 2013

or “How to help your users share your content on Facebook and not hurt performance” Facebook’s like button is much much faster now than it used to be. It also uses much fewer resources. And lazy-evaluates JavaScript on demand. And so on. But it’s still not the only option when it comes to putting a […]

 

Run jsperf tests in a bunch of WebPagetest browsers

Feb 11th, 2013

Motivation 1. You write a new test to confirm a JavaScript-related performance speculation 2. You click 3. Your test runs in a bunch of browsers Glossary JSperf.com is the site where all you JavaScript performance guesswork should go to die or be confirmed. You know how the old wise people say “JSperf URL or it […]

 

WebAudio: live input

Oct 28th, 2012

Live input, aka getUserMedia: it exists in Chrome Canary for audio too. Great times to be a web developer, right? Let’s check it out. Here’s the demo, but first a prerequisite: go chrome://flags, search for “Web Audio Input” and enable it. Restart Chrome Canary. With a guitar I wanted to have a little trickier setup […]

 

WebAudio: oscillator in JS

Oct 27th, 2012

How about generating some noise in JavaScript? Demo is here: oscillator. How does this work? Using HTML Web Audio you can synthesize audio with a given frequency. E.g. 440Hz is A (“la” in solf├Ęge) This means you don’t need an <audio> element or any mp3, ogg, wav, etc, no external files. Let’s see how. Capable […]

 

Non-onload-blocking async JS

Jun 28th, 2012

Update Oct 2013: for a more bulletproof version, tested in the wild, IE and all, check Philip’s snippet at http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ Asynchronous JS is cool but it still blocks window.onload event (except in IE before 10). That’s rarely a problem, because window.onload is increasingly less important, but still… At my Velocity conference talk today Philip “Log […]

 

YSlow development: getting started

Jun 17th, 2012

Since version 2.0, YSlow is no longer just a tool, it’s a platform. You can create your own rules (performance or otherwise), combine them into rulesets, tweak scores to your liking and so on. Once Marcel took over and did version 3.0. YSlow can now run in many many environments: as a Firebug extension (like […]

 

Anaconda Limousine: the guitar parts

Jun 17th, 2012

I’m part of a band that has an album out now. I know, right? (links: excuse-for-a-site, amazon, itunes). I wanted to put up all the songs on the site, but seems like there’s a little dissonance in the band whether this is a good idea. Plan B: 30s samples. Like the bigwigs do on Amazon […]

 

3PO#fail

Jun 16th, 2012

So I was flipping through recent slides from Steve Souders and came across a reference to a nice post from Pat Meenan explaining how he setup blackhole.webpagetest.org and how you can edit your hosts file to send third party scripts to the black hole simulating a firewall-blocked or down third party and the effect on […]

 

Canvas pixels #3: getUserMedia

Jun 13th, 2012

getUserMedia() is a proposal for one of the most desired device APIs that can give HTML and JS access to the user’s camera and microphone. It’s already available in Chrome Canary in the form of navigator.webkitGetUserMedia(). It’s also available in Opera without a prefix. In part #1 of this miniseries I talked about manipulating pixels […]

 

Canvas pixels #2: convolution matrix

Jun 11th, 2012

In the previous post I talked about manipulating and changing pixels in an image (using JavaScript and canvas) one at a time. We took a single pixel and messed around with its R, G, B or A values. This time let’s look into taking account not only the single pixel but the pixels around it. […]

 

Async JavaScript callbacks

Jun 3rd, 2012

Ah, asynchronous JavaScripts. Love ‘em, hate ‘em, but you gotta use them! I have quite a few posts here on this blog about this stuff. Starting with something I considered an interesting hack to emulate PHP’s require(). This was posted in 2005. (2005! That’s ancient. That’s only a year after gmail was introduced, and you […]

 

Ajax with images

Jun 2nd, 2012

So you can do Ajaxy stuff with XMLHttpRequest or or iframes or dynamic JavaScript tags or… how about simple images. This is best used for simple stuff where you can have a limited number of predefined responses, such as “success” and “oops”. All you do is create an image and set its source and this […]

 

Simple music player

Apr 18th, 2012

I put up a few MP3s on http://anacondalimousine.com, in simple a hrefs. While modern browsers will let you click and display some sort of player in a new page, why not play them in-page without a refresh? Simple enough. Plus we have HTML5 audio. Problem is, old IEs don’t support HTML5 audio and you need […]

 

The Truth about semicolons in JavaScript

Apr 16th, 2012

jk jsdrama.com is live though. Enjoy and feel free to add more next time. (image from wikipedia)