background preloader

Javascript

Facebook Twitter

Resources for Staying on Top of JavaScript. Last year, I wrote about and recommended some great resources for getting good with andJavaScript.

Resources for Staying on Top of JavaScript

A year is a long time in Internet terms and I figured now was a good time for a refresh. JavaScript continues to explode in terms of adoption and being fully embraced, not only in the browser but also on the server. So it's about time we revisit the list and update it with good places to stay current. With JavaScript's continued adoption rate, there's been an explosion of books but from what I've seen, only a small percentage are offering new and interesting reading material. Here are the ones I've enjoyed so far: I'm keeping this one on the list because I honestly haven't seen a new book that so thoroughly covers the JavaScript language like Nicholas' does.

There's no argument that leveraging good design patterns helps in building maintainable code. One of the consistent issues developers face with JavaScript is the concept of object-oriented programming. Dr. 125 CSS and JavaScript tutorials to power up your skills. There are so many blogs and sites publishing high quality CSS and JavaScript tutorials these days that it can be hard to keep track - and it's easy to miss an amazing tutorial completely.

125 CSS and JavaScript tutorials to power up your skills

And sod's law dictates that the one you do miss will be the one that could have saved you days of work on your latest project... Subscription offer So to help out we've rounded up some of the very best CSS and JavaScript tutorials from around the web, covering web design techniques old and new, how to use the latest tools and frameworks, and a series of projects you can sink your teeth into. They're all written by leading experts in the field, and many come with downloadable code you can play around with. Finally, we've grouped the tutorials into a series of categories to make it easier to find what you're looking for. Read all the tutorials on Creative Bloq here NOTE: most of these CSS and JavaScript tutorials are aimed at professional web designers. 40 top examples of JavaScript.

JavaScript Tutorials. AngularJS — Superheroic JavaScript MVW Framework. Get your JavaScript in order. Flight by Twitter. Overview Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes.

Flight by Twitter

Twitter uses it for their web applications. By way of example, we've included a simple email client demo (browse the source) built over the Flight framework. There's also a flight implementation over on the todoMVC site (source), courtesy of @mkuklis Flight uses ES5-shim and jQuery. Why Flight? Flight is distinct from existing frameworks in that it doesn't prescribe or provide any particular approach to rendering or providing data to a web application.

Not only does this obviate the need for additional data structures that will inevitably influence the broader architecture, but by mapping our functionality directly onto the native web we get to take advantage of native features. How does it work? Flight enforces strict separation of concerns. Why events? Digital Web Magazine - jQuery Crash Course. The web professional's online magazine of choice.

Digital Web Magazine - jQuery Crash Course

In: Columns > The Carpenter's Workbench By Nathan Smith Published on October 8, 2007 As developers, we have more and more JavaScript libraries to choose from and, of course, the option not to use any at all. Over time, we each tend to favor one method of coding over another. The Best Way to Learn JavaScript. Learning something new is scary.

The Best Way to Learn JavaScript

For me, the biggest issue with picking up a new skill is that I don’t know what I don’t know. Given that, it’s often useful to find a plan for learning whatever you’re interested in. That’s what this post is: your blueprint, your roadmap, your plan of action for learning JavaScript! You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next. It’s all here. JavaScript is the language of the browser. Before you actually begin learning JavaScript, take a minute to understand what it is and does. JavaScript is not jQuery, Flash, or Java. JavaScript is the language of the browser (not exclusively these days, though). One more note: you’ve heard about jQuery, which is probably the most widely-used JavaScript library.

Jquery

How to Add Finger-Swipe Support to Your Webpage. One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad.

How to Add Finger-Swipe Support to Your Webpage

For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural. However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on these pages will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part. Add the JavaScript Script The first step in implementing swipe support for specific page elements is to copy and add this script to the HEAD section of the webpage.

<head><meta http-equiv="content-type" content="text/html; charset=utf-8"><! Tag the Page ELement The Start Event is triggered when the user touches the iPad screen. FractionSlider: jQuery parallax Slider Plugin. FractionSlider is a jQuery plugin for image/text-sliders.

FractionSlider: jQuery parallax Slider Plugin

It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated). This Plugin is published under the MIT license New version: 0.9.9.9 IE bugfix: images without width/height get calculated correctlypager: You can now set a jQuery-Object as pager-wrapper outside of the slider New version: 0.9.9.8 New features arriving:Plugin option: pauseOnHover The slider has now the pause on hover functionality.Plugin option: increase The slider can get bigger than the specified dimensions (useful for responsive design)Plugin options: callbacks I added support for a lot of custom callback functions (see Plugin options for more information)