Tag Archives: javascript

Node.js the Right Way

Jan 8, 2014 by Matt | Posted in Coding 89 Comments

Node.js The Right WayLooking to quickly get started with Node.js without learning bad habits? Node.js the Right Way is a short and concise—100 pages—book that you can easily read in an afternoon (maybe two if you’re following along with the examples), promising a focused, tutorial-based experience.

The book makes the assumption that you’re already somewhat familiar with programming and the JavaScript language in particular. Instead of wasting time with absolute basics, it dives right in to Node. The first two chapters explain what exactly Node is, and how the the event loop works. It covers the differences between synchronous and asynchronous tasks, illustrating the reason you want to avoid blocking I/O. The next two chapters deal with sockets, serializing data and message queues. Other sections deal with databases (using CouchDB as an example), unit tests, building and consuming RESTful APIs and single-page web apps.

If you work your way through the examples in the book, you’ll end up building a reasonably complex web app and batch-importing a bunch of data from Project Gutenberg.

Node.js the Right Way is the best introduction to Node that I’ve seen so far. It’s concise enough it won’t take up a lot of your time, covers things more thorougly than a 500-word blog post or hour-long screencast, and there’s no magic “just copy and paste this, I’m not going to bother explaining it.” You should come out of it knowing where to go to keep learning. It’s easy enough to think “I used Express for this, and Grunt for that. Maybe I should search for more information about those tools.”

List.js: Table and List Sorting in 5kb of JavaScript

Dec 11, 2013 by Matt | Posted in Software & Scripts 32 Comments

List.js is a tiny (five kilobytes!) library that can add dynamic sorting, searching and pagination to HTML lists and tables. It requires no dependencies, and claims to be able to handle lists with “thousands of items.”

It also includes a templating system that makes it possible to allow the addition and editing of items, a pagination plugin, and a plugin that adds fuzzy search. (Also, they get bonus points for using characters from The Secret of Monkey Island as an example.)

The script looks very promising, though there is one caveat about the file size claim: the minified version is 5kb when served with gzip compression. If, for whatever reason, your server is not configured to do so, then it’s more to the order of 15kb. Still small, but not quite as amazingly so.

List.js [listjs.com]

Custom JavaScript Twitter Widgets in an API 1.1 World

Jul 3, 2013 by Matt | Posted in Coding No Comments

My Twitter WidgetContinuing their gradual shutdown of old APIs (following the launch of version 1.1 of their API), Twitter recently pulled the plug on their old-style widgets and the unauthenticated search API. This means if you had a fancy custom-designed JavaScript widget to show off your latest tweets, it’s not going to work anymore. The only officially supported options are the new widgets or a server-side solution with OAuth authentication.

What can you do if you don’t like either option?

Jason Mayes hacked together a clever bit of JavaScript that loads up one of the new Twitter widgets, scrapes the content out, and reformats it into nicer unstyled HTML. Then you can style it however you want in your stylesheet.

I’m using this right now on my personal blog, since Twitter’s new widgets don’t look very good when they’re crammed into a narrow sidebar.

Using the WordPress 3.5 Media Uploader in Your Plugin or Theme

Feb 6, 2013 by Matt | Posted in Featured, WordPress 70 Comments

Back in 2010, I wrote a post on Using the WordPress Uploader in Your Plugin or Theme that went on to be one of my most popular tutorials of all time. Then the WordPress team went and added a much cooler media uploader in version 3.5 and make that post outdated. Since most of you probably want to add the new uploader in a theme or plugin you’re working on right now, I figured it was time for an updated post.

WordPress 3.5 Media Uploader

The process required to add the new uploader is a bit different, but not too much more difficult. I was able to adapt the old tutorial a little, so it shouldn’t be too hard to replace some code in an existing project and get the new uploader instead of the old.

Continue reading →

Getting More From Twitter Bootstrap’s Typeahead Library

Nov 7, 2012 by Matt | Posted in Coding 15 Comments

Twitter Bootstrap comes packaged with a simple auto-complete library that’s stylistically integrated into the CSS framework. It’s convenient, but not the most-documented part of Bootstrap. I was working on a hobby project recently, and I wanted to have an auto-completing search field, but it took a bit of work to extend the basic implementation.

The first, and probably most important, step was to implement an AJAX data source. The plugin supports this out of the box, but the documentation page doesn’t have an example. It’s easy enough. You pass a function that takes the query and hands it off to one of jQuery’s magic asynchronous request functions, like so:

$(document).ready(function() {
	$("#searchfield").typeahead({
		minLength: 3,
		source: function(query, process) {
			$.post('/search/typeahead', { q: query, limit: 8 }, function(data) {
			 	process(JSON.parse(data));
			});
		}
	});
});

Your request URL needs to respond with a JSON array of strings, which the typeahead library will process. The variables “q” and “limit” are sent along with the POST request in this example, and a PHP back-end returns the relevant data in response.

Continue reading →

Animating a CSS Sprite With JavaScript

Jun 4, 2012 by Matt | Posted in Coding, Featured 9 Comments

Take a look at this demo, and guess how the animation is achieved. It’s not an animated GIF. It’s a PNG sprite that is brought to life with a little bit of JavaScript.

The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)

It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)

Continue reading →

BrowserQuest: A Massively Multiplayer Game in HTML5 and JavaScript

Mar 29, 2012 by Matt | Posted in Coding No Comments

Imagine a massively multiplayer game using HTML5 features, such as Canvas and WebSocket, that works in any modern browser. Ridiculous, you say? Then you haven’t seen BrowserQuest yet.

The clever demonstration, featured on the Mozilla Hacks blog, works on both desktops and mobile devices, in all it’s scrolling two-dimensional glory. It’s rendered on an HTML5 Canvas, uses WebSockets to stay in constant communication with the Node.js server, saves your progress with the local storage API, preloads the map in a different thread with Web Workers, plays sound with HTML5 Audio and even uses media queries to adapt to different devices. Oh, and the source code is all available on GitHub.

The game is largely exploring, hacking-and-slashing monsters along the way, while you collect achievements. It has chat, and you can find new items to replace your default gear, but no player-versus-player combat.

My laptop’s fans stayed far quieter than they would while playing a similar Flash game, which I would say says something about the level of optimization browsers have done when compared to OS X/Linux versions of Flash.

I think we’ll be seeing more games built this way in the near future, and 3D games once WebGL reaches the same level of maturity and browser support.

Thinking Async

Mar 16, 2012 by Matt | Posted in Coding No Comments

I’ve written about loading JavaScript asynchronously in the past, as it’s a great way to decrease load times and prevent hang-ups when third-party scripts don’t load properly. But Chris Coyier has went and compiled the definitive guide. It covers the basic concepts and reasons for doing it, as well as different methods for implementing it; the easy HTML5 way and using embedded scripts to inject a non-blocking call to an external script.

Its a nice long and informative article, and worth a look if you’re looking to do some performance optimization of web site. (Be sure to look into sprites after you’ve switched to loading JavaScript asynchronously!)

Thinking Async [CSS-Tricks]

Tinycon: Favicon Alert Bubbles

Feb 27, 2012 by Matt | Posted in Software & Scripts No Comments

Tinycon is a neat script that manipulates the favicon of a page. Using a simple JavaScript call, you can add a little alert bubble over the icon, and change the number within. If the browser doesn’t support Canvas, it falls back to appending a number to the page title, like GMail does.

Very cool. Now I just need to think of something to use it for…

Tinycon – Favicon Alert Bubbles [GitHub]

JSFiddle: A Playground for Web Developers

Jan 5, 2012 by Matt | Posted in Coding No Comments

JSFiddle is a sort of interactive pastebin site that I’ve been finding useful lately. It features three panes for entering HTML, CSS and JavaScript, and a fourth where the resulting output is rendered. If you save the workspace, it generates a URL like http://jsfiddle.net/fLP64/ and will even save each revision as you update it. You can share the URL to show off the result, and the other user can play with the code as well.

This is great for two scenarios. You can use it to experiment with a bit of CSS or JavaScript for brainstorming purposes, or you can use it if you need to ask someone for help. (It’s a lot easier to figure out what’s going wrong with someone’s code or markup if you can jump right in and start messing with the code.) Chris Coyier (of CSS-Tricks) uses it all the time to show off CSS experiments that will likely be used in future posts of his.