background preloader

Minify JavaScript - Free JavaScript Compressor

Minify JavaScript - Free JavaScript Compressor
Related:  Learning JS

Control Flow in Node Part II Static Version I had so much fun writing the last article on control flow, that I decided to play around with the feedback I received. One thing in particular I want to talk about is the good work inimino is doing. Node has two constructs that are used currently to handle async return values, namely callbacks and event emitters. UPDATE Promises were removed from node a while back, this article has been updated to show callbacks instead of promises. Why the distinction between Callback and EventEmitter? In node there are two event handling techniques. callback.js var fs = require('fs'); fs.readFile('mydata.txt', function (err, buffer) { if (err) { // Handle error console.error(err.stack); return; } // Do something console.log(buffer);}); fs.readFile() takes a filename and "returns" the contents of the file. Sometimes you want to listen for events that can happen several times. http-body.js var http = require('http'); console.log("Server started on continuable.js do.js - Minify Your Javascript/jQuery Code Online Control Flow in Node Static Version One of the unique aspects of programming in an async framework like node is the ability to decide between which function will run in serial and which will run in parallel. While there are no built-in methods for managing this in node, I'll discuss some of the tricks I came up with while writing the node-blog engine that generates this site. Parallel vs Serial Usually in an application you have steps that can't run until the result from a previous step is known. This is the case in Node too, except for functions that would otherwise perform blocking IO. For my blog engine I have a tree structure of files that need to be processed. Get a list of articles.Read in and parse the articles.Get a list of authors.Read in and parse the authors.Get a list of HAML templates.Read in all the HAML templates.Get a list of static resource files.Read in the static files.Write article html pages.Write author pages.Write index page.Write feed page.Write static resources. simple-scanner.js

JSMIN, The JavaScript Minifier The JavaScript Minifier Douglas JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. What JSMin Does JSMin is a filter that omits or modifies some characters. JSMin first replaces carriage returns ('\r') with linefeeds ('\n'). It omits spaces except when a space is preceded and followed by a non-ASCII character or by an ASCII letter or digit, or by one of these characters: It is more conservative in omitting linefeeds, because linefeeds are sometimes treated as semicolons. and if it follows a non-ASCII character or an ASCII letter or digit or one of these characters: No other characters are omitted or modified. JSMin knows to not modify quoted strings and regular expression literals. JSMin does not obfuscate, but it does uglify. Before: After: Character Set JSMin requires, but does not verify, that the character set encoding of the input program is either ASCII or UTF-8. Caution Be sure to retain your original source file. a + ++b

Prototypal Inheritance Static Version In almost all modern programming languages we use the concept of Object Oriented Programming (OOP) to help manage the complexity of today's software. The biggest challenge in modern software is in fact managing the complexity of it. Most languages do this with a variant OOP called Classical OOP. This is the one you see in Java, C#, C++, PHP, Ruby, and Python. While this is a great abstraction, I would like to experiment with other ideas. So what does JavaScript have? From what I hear (I wasn't there at the time), JavaScript was initially a prototypal inheritance system. Classical OOP classical.js var frank = new Person("Frank Dijon");frank.greet(); Output => 'Hello world, my name is Frank Dijon' Here we have a class like object Person. Prototypal OOP I don't like the new keyword, it overloads the meaning of functions and is dangerous. Instead try this on for size: prototypal.js#intro-to-style There is more you can set, but value and enumerable are the interesting ones.

CSS Minifier What is "this"? Static Version Most people that learn JavaScript are coming from a background in another language. This brings with it a view of how the world works that may be different from how it really works in JavaScript. It's all about where you are. In all programming languages, there is this idea of current scope and current context. In JavaScript all new scopes are created through "function" definitions. This is an example of global scope: global.js // Define a couple of global variablesvar name = "Tim";var age = 28; // Access one of them from the global scopename; Output => 'Tim' This is an example of local scope: local.js // Create a couple of local variables in a function.function newScope() { var name = "tim"; var age = 28;}// Try to access the local variables from the global scope// This will cause an; Error ReferenceError: name is not defined Lexical Scope Lexical scope is the key to making closures work. So what does all that mean? lexical.js ReferenceError: other is not defined closure.js

CSS Compressor, Free CSS Compressor and CSS Compression Tool EASY - One Click CSS Compressor NO coding expertise required A click of the mouse is all you need to speed up your webpage load time by up to 80%! Most CSS can be compressed to one third its original size. Our CSS Compressor works with virtually all coding styles of CSS stylesheets and CSS versions. 99% of users can just copy and paste their CSS, followed by clicking the “Process CSS” button and thats it to to give their website the single greatest potential boost in page load time - as compared to any other speed up your CSS technique. ADVANCED FEATURES - Optional CSS Compression Settings Simple - compress your CSS so it loads faster The Minify CSS compressor has optional advanced features to give you even further control over how you compress your CSS. SPEED INCREASE TIME!!! Decrease webpage load time dramatically Faster loading pages make your users happier and it saves you money on your web hosting bill. FAST COMPRESSION - Ultra Fast Compression & Stylesheet Minifying

Why use "closure"? Static Version One of the greatest features of the JavaScript language is closure. I've discussed this concept some in the "What is This?" article. There I was explaining scope and context. Today I wish to explain about some practical uses of a closure in event based programming as well as compare it to other methods like object orientation to preserve state across event calls. What is a closure Again from wikipedia: In computer science, a closure is a first-class function with free variables that are bound in the lexical environment. Or the way I understand it intuitively: A closure is a function defined within another scope that has access to all the variables within the outer scope. Using closure to hide state Imagine this piece of code: greet_plain.js function greet(message) { console.log(message);} function greeter(name, age) { return name + ", who is " + age + " years old, says hi!" // Generate the messagevar message = greeter("Bob", 47); // Pass it explicitly to greetgreet(message); Output

Minify Javascript Online / Online JavaScript Packer Learning Javascript with Object Graphs (Part III) Static Version Part I of this series explained basic object graphs and visually described references, closures, and basic inheritance in JavaScript. Part II compared different styles for doing object-oriented programming in JavaScript. Now in Part III we'll get creative and look as Ruby's object model and compare it to how JavaScript works. Why Ruby Ok, I'll admit, I used to be a ruby guy. Also I chose ruby because I've noticed that several newcomers to the node.js community come from ruby and other languages with similar object systems. What are Objects Both languages are object oriented languages. Methods versus Functions Probably the biggest difference between the object models when you get down to it and ignore syntax is the fact that Ruby has methods and JavaScript has first-class functions. Gotta keep them separated In classical OO, there is this idea that you must separate function from state. In JavaScript there is no concept of methods. Controlled Inheritance self and this A String