Tag Archives: browserify

A three.js npm template

rotating demo cube

I can’t imagine dropping a series of <script> tags on a page to build a minimally complex website anymore. I’ve got used to browserify and so I can’t go back to building my fancy 3D thingies like it was 2012 all over again.

So I made this minimal template that sets the bare minimum you might need to build a three.js powered site using browserify via gulp. That lets you use any other npm-based modules and libraries you want! So your code should not be messy and/or a tremendously big file with everything tucked on it.

There’s also some extra help like a file watcher… and not much more, really.

Do let me know if you use it for something cool… or if you can/want to help on this issue! 😀

Reading list, 6

4th-10th May 2015

Note: there wasn’t reading list for the past week(s) because I was traveling and conferencing and urgh.

  • Jason Orendorff is writing a series of articles introducing ES6 for the Mozilla Hacks blog, and they are truly great and enjoyable! I can’t wait to use ES6 features in every browser without transpiling, but it will have to wait I’ll guess. Time to set up some Babel into my toolchains!
  • Professional Web Typography by Donny Truong – a book, via Adactio
  • The WWW is in the public domain – i.e. the software, architecture, etc initially used to build the WWW. I didn’t know this! Again, from Adactio
  • User agents of change, by Allen Pike: “Microsoft Edge claims to be every computing platform ever conceived – except for Internet Explorer”. An hilarious account of the new user agent string Microsoft Edge uses, and an exhortation to work on something else before the clock stops ticking–in about 1600 years. So better get to work!
  • Dealing with SMS spam — Terence Eden went to the sources and confirmed what we thought: advertising standards bodies are pretty much not doing anything at all to protect the targets of said advertising, and advertising companies keep buying and selling consumers’ data without following any of the rules. Woohoo!
  • Flickr Commons – many (public) institutions are putting their archive images in these collections. I believe this also includes photography marked as CC, but I’m not entirely sure. Be warned, browsing these can eat copious amounts of your time 😉
  • IPFS is The Permanent Web – (yet another) p2p protocol. I’m always curious about these initiatives.
  • Decommissioned – melancholic pictures of decommissioned and deconstructed aircraft. As any proper engineer I’m always curious to see the innards of objects, and aircraft are not an exception. Still I feel oddly bad about these pictures; I believe perhaps they are humanising the aircraft? and that’s why, empathically, I feel sad.
  • Soléy – I’ll drown —I’m really fascinated by how she builds layer upon layer. Great discovery–I will be listening to more from her! (I’m also a bit amused by her name being so similar to mine, hehe)
  • When to use the button element from CSS Tricks. I had a moment of doubt last Friday and some searches brought me to this page which is a good recap.
  • I’m pretty excited about learning to better use Browserify transforms for all sorts of things as for example tucking a worker into a bundle using Workerify, so you don’t need to distribute two files with your worker-powered library!
  • Hire more women in tech. Some advice and resources so people can stop paying lip service and actually being impactful, diversity wise. Related: On the diversity-readiness of STEM environments: “It’s almost as if I could only enter the makerspace as a janitor” from Mel Chua.

Loading webcomponents-lite with require()

I just realised that the Web Components polyfills not only are in npm so you can install them like this:

npm install --save webcomponents-lite

but they also have a well formed package.json with a main entry.

So if you’re writing your front-end code with Browserify and want to load the polyfill without adding an additional script tag, you can do this:

require('webcomponents-lite');

and this pulls the polyfill into the scope.

NICE! Thanks, Addy :-)

PS I guess this should also work with webpack, if you’re so inclined.

webpack vs browserify

I saw a project yesterday that was built using webpack, and I started to wonder what makes webpack better than Browserify? The website didn’t really explain to me, so I asked in Twitter because I was sure there would be a bunch of webpack experts ready to tell me—and I wasn’t wrong! 😉

TL;DR

Webpack comes with “batteries included” and preconfigured, so you get more “out of the box”, it’s easier to get started, and the default outputs are really decent. Whereas with browserify you need to choose the modules you want to use, and essentially assemble the whole thing together: it’s slower to learn, but way more configurable.
Continue reading

Speaking at OneShotLondon NodeConf

“Just turn it into a node module,” and other mantras Edna taught me

The story of leaving behind a random mix of Python + php + bash + makefile + Scons scripts to totally embrace using Node, modules, standard callbacks, browserify, and friends to build toys that bleep and bloop with MIDI, WebGL and Web Audio.

As you can maybe deduct, this might not be your average super expert node.js talk, but a story of learning with a non-appointed mentor and an spontaneous community, and improving and making the most out of node.js—and how it informed and shaped the rest of my coding philosophy, both inside and outside of Mozilla.

I must confess that I’m really humbled and flattered to be amongst this amazing line up of true node experts.

UUUUUUUHHH THE EXPECTATIONS!—feeling a bit like an impostor now.

Next next Saturday 19th of July. See you there? :-)