background preloader

Light Table - a new IDE concept

Light Table - a new IDE concept
You can now try Light Table out via the Light Table Playground! Light Table's kickstarter has wrapped up! Despite the dramatic shift toward simplification in software interfaces, the world of development tools continues to shrink our workspace with feature after feature in every release. Even with all of these things at our disposal, we're stuck in a world of files and forced organization - why are we still looking all over the place for the things we need when we're coding? Why is everything just static text? Bret Victor hinted at the idea that we can do much better than we are now - we can provide instant feedback, we can show you how your changes affect a system. We can do better, and to that end, let me introduce you to Light Table is based on a very simple idea: we need a real work surface to code on, not just an editor and a project explorer. Light table is based on a few guiding principles: Let's take a look at how these things manifest themselves in Light Table. Docs everywhere Related:  Javascript

Journey Through The JavaScript MVC Jungle When writing a Web application from scratch, it’s easy to feel like we can get by simply by relying on a DOM1 manipulation library (like jQuery412) and a handful of utility plugins. The problem with this is that it doesn’t take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications. In short, we’re stuck with spaghetti code3. What Is MVC, Or Rather MV*? These modern frameworks provide developers an easy path to organizing their code using variations of a pattern known as MVC4 (Model-View-Controller). Models represent the domain-specific knowledge and data in an application. JavaScript ‘MVC’ frameworks that can help us structure our code don’t always strictly follow the above pattern. For this reason we refer to such frameworks as following the MV* pattern, that is, you’re likely to have a View and a Model, but more likely to have something else also included. When Do You Need A JavaScript MV* Framework? Dojo Link

Lazy Load Plugin for jQuery Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request. How to Use? Lazy Load depends on jQuery. You must alter your image tags. <img class="lazy" data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); }); This causes all images of class lazy to be lazy loaded. PRO TIP! Setting Threshold Event to Trigger Loading

24 JavaScript Best Practices for Beginners | Nettuts+ As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript! Once you've reviewed the list, be sure to let us know what little tips you've come across! JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing. "If two operands are of the same type and value, then === produces true and ! However, when working with == and ! For those unfamiliar, the "eval" function gives us access to JavaScript's compiler. Not only will this decrease your script's performance substantially, but it also poses a huge security risk because it grants far too much power to the passed in text. Technically, you can get away with omitting most curly braces and semi-colons. However, consider this: One might think that the code above would be equivalent to: Unfortunately, he'd be wrong. As you'll notice, the indentation mimics the functionality of the curly brace. Consider the following code:

Introduction to JavaScript Source Maps Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you've combined and minified it, without impacting performance? Well now you can through the magic of source maps. Basically it's a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. Demo: Get original location The above demo allows you to right click anywhere in the textarea containing the generated source. Real world Before you view the following real world implementation of Source Maps make sure you've enabled the source maps feature in either Chrome Canary or WebKit nightly by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option. Firefox 23+ has source maps enabled by default in the built in dev tools. So... Why should I care about source maps?

The Future of Web Apps – Single Page Applications | The Worm Hole The Future of Web Apps – Single Page Applications Mark Boas The world wide web is constantly evolving and so is the way we write the applications that run upon it. Due to differing paradigms we are forced to design our web apps in a completely different way to native apps. The price is high. In this article I propose that we can have our cake and eat it. But first let’s take a look at the advantages of a single-page approach. 1. What we are essentially talking about here is having an application where ‘virtual pages’ are loaded into one single web-page, which means switching between pages need not involve a trip to the server and so the switch occurs almost instantly. 2. Using the ‘traditional’ approach we load a lot of duplicated content for each page we visit. 3. When all ‘pages’ are accessible from one page you give yourself more freedom to manipulate the content of these ‘pages’ client-side. Making it Work Next let’s take a look at the example application. Try the Demo 2. 3. With me?

Asynchronous Programming in JavaScript with “Promises” - IEBlog Asynchronous patterns are becoming more common and more important to moving web programming forward. They can be challenging to work with in JavaScript. To make asynchronous (or async) patterns easier, JavaScript libraries (like jQuery and Dojo) have added an abstraction called promises (or sometimes deferreds). Benefits and Challenges with Asynchronous Programming As an example, consider a web page that starts an asynchronous operation like XMLHttpRequest2 (XHR2) or Web Workers. When you make an asynchronous call, you need to handle both successful completion of the work as well as any potential errors that may arise during execution. function searchTwitter(term, onload, onerror) { var xhr, results, url; url = ' xhr = new XMLHttpRequest();'GET', url, true); xhr.onload = function (e) { if (this.status === 200) { results = JSON.parse(this.responseText); onload(results); xhr.onerror = function (e) { onerror(e); xhr.send(); function handleError(error) {

Detecting HTML5/CSS3 Features using Modernizr - Dan Wahlin's WebLog HTML5, CSS3, and related technologies such as canvas and web sockets bring a lot of useful new features to the table that can take Web applications to the next level. These new technologies allow applications to be built using only HTML, CSS, and JavaScript allowing them to be viewed on a variety of form factors including tablets and phones. Although HTML5 features offer a lot of promise, it’s not realistic to develop applications using the latest technologies without worrying about supporting older browsers in the process. If history has taught us anything it’s that old browsers stick around for years and years which means developers have to deal with backward compatibility issues. Although you can write code by hand to detect different HTML5 and CSS3 features, it’s not always straightforward. If you want to check for local storage support the following check can be made. Getting Started with Modernizr Modernizr is available at Modernizr and the HTML Element

Parallel asynchronous Ajax requests using jQuery Lab.js and jQuery with $(window).load(function() fire much too early Strings Page last changed today See section 5F of the book. split() and toString() do not work in Netscape 2 and Explorer 3. substr() is not supported by Netscape 2 and 3, Explorer 3, Hotjava 3, Opera 3 and WebTV. This page has been translated into French. On this page I explain what strings are and then give an overview of some useful things you can do with them. Strings are simply groups of characters, like 'JavaScript', 'Hello world!' When you write JavaScripts, you need to know what strings are and how they work. First I explain the basics of strings. String basics Let's review the basics of strings. When you declare and manipulate strings in JavaScript, always write them with single quotes ' or double quotes " around them. Let's introduce our two test strings that we'll use throughout this page: var a = 'Hello world!' Now we have declared two variables, a and b and put strings in them. var b = 'I'm a JavaScript hacker var b = 'I\'m a JavaScript hacker.' var b = 'I\'m a JavaScript "hacker".' gives charAt

DevTools/Features/SourceMap Please use "Edit with form" above to edit this page. Status Team Open issues/risks Stage 1: Definition 1. Nearly every web developer starts with JavaScript in one form during development and then produces JavaScript in another form for production use. When JavaScript gets an error, being able to help the web developer out by showing them where the error occurred in the original source file (PHP script or unminified, still-separate JavaScript for example) would save the developer time every single time they hit an error. For a long time, there have been languages that have compiled to JavaScript, and recently there has been a surge in support for these languages led by CoffeeScript. When developing an application in CoffeeScript, any time an error is hit the browser tells the user the location of the problem in the JavaScript file, not the source file that the user is working with. The solution to this problem is a mapping from the generated JS to the original source files. 2. 3. 4. Non-goals

jquery - How can I get keydown events on a div in chrome? coodict/javascript-in-one-pic