background preloader

Front-end dev

Facebook Twitter

Superhero.js. JavaScript object creation: Learning to live without "new" In this article, I'm going to discuss object creation in JavaScript using prototypal inheritance as an alternative to the new operator. One significant aspect of JavaScript is that there is rarely a single right way to do any particular task. JavaScript is a loosely-typed, dynamic, and expressive language, which means that there are usually many different ways to accomplish the same task.

I'm not saying that the methods described here to create objects are the only correct ways to do so or even the best ways, but I do feel that they are closer to the true nature of the language and will help you to understand what's going on under the covers if you choose to use other methods. To help you better understand these concepts, this article describes the creation of a basic particle system with multiple rendering targets. The crux of this article is the creation of JavaScript objects. Personally, I see this as a bit of a misguided effort. Embracing prototypal inheritance Adding extend and init.

SeuratJS - A Raphaël plugin for creating beautiful pointillized animations. Unheap - A tidy repository of jQuery plugins. Building a Spotify App. On Wednesday November 30, Spotify announced their Spotify Apps platform that will let developers create Spotify-powered music apps that run inside the Spotify App. I like Spotify and I like writing music apps so I thought I would spend a little time kicking the tires and write about my experience. First thing, the Spotify Apps are not part of the official Spotify client, so you need to get the Spotify Apps Preview Version. This version works just like the version of Spotify except that it includes an APPS section in the left-hand navigator. If you click on the App Finder you are presented with a dozen or so Spotify Apps including Last.fm, Rolling Stones, We are Hunted and Pitchfork.

A Spotify App is essentially a web app run inside a sandboxed web browser within Spotify. To get started you need to have your Spotify account enabled as a ‘developer’. Under the hood, Spotify Apps is based on Chromium so those that are familiar with Chrome and Safari will feel right at home debugging apps. Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources. A Beginner's Journey I was recently approached by someone at a .NET User Group about how to get started in HTML5, JavaScript, jQuery, CSS3, etc... The developer's primary background was writing thick client Windows applications. I figured the best place to start is to focus on the bare essentials and then work up to more advanced concepts and resources. I started to respond to the developer in an e-mail, but then I remembered what Scott Hanselman said in a recent post and video ...

"Instead, consider writing a blog post or adding to a wiki with your keystrokes, then emailing the link to the original emailer. " So, I decided to make this blog post for the developer and also for anyone else who may be interested in similar resources. So, it is pretty obvious that you are going to need to learn HTML5 if you are doing to do front-end web development. Resources JavaScript Even if you think you know JavaScript it might behoove you to go back and learn it from the beginning. jQuery Backbone.js. JSDB.io - The Database of JavaScript Libraries. Details | Adaptive Images. Limitations I think this is one of the most flexible, future-proof, retro-fittable, and easy to use solutions available today.

But, there are problems with this approach as there are with all of the one’s I’ve seen so far. In the case of Adaptive Images they are these: This is a PHP solution. I wish I was smarter and knew some fancy modern languages the cool kids discuss at parties, but I don’t. Content Delivery Networks. Adaptive Images relies on the server being able to intercept requests for images, do some logic, and then send one of a given number of responses. A minor but interesting Cookie setting issue. As Yoav Veiss pointed out in his article Pre-loaders, Cookies, and race-conditions there is no way to guarantee that a cookie will be set before images are requested - even though the JavaScript that sets the cookie is loaded by the browser before it finds any <img> tags. Adaptive Images checks the User Agent String for the presence of 'mobile'. The Future. Mousetrap - Keyboard shortcuts in Javascript. Single page apps in depth (new free book) New methods in jQuery 1.6.

jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Delaying the ready event with the holdReady() method The holdReady() method is used to delay the firing of jQuery’s ready event, a cornerstone event which is popularly used to execute custom code once the DOM is ready to be manipulated. It’s a dual-purpose method, as is the jQuery way, and can be used to both delay the event and release the event using the same simple signature. One downside to this method is that it should be called as early in the document as possible, such as in the <head> of the page, and can obviously only be called after jQuery itself has loaded. jQuery.holdReady(true); jQuery.holdReady(false); Adding and removing element properties Promise objects.