background preloader

24 JavaScript Best Practices for Beginners

24 JavaScript Best Practices for Beginners
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:

Related:  HTML / CSS / JSJavascriptBonnes pratiques

Getting started with Grunt and Sass - Ryan Christiani - Front-End Developer - Ryan Christiani – Front-End Developer There are a lot of new tools out there to help speed up and streamline your workflow as a developer, and to be honest they can seem a bit daunting to get into. Two new tools I have started using this year were Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor that lets you write more powerful css, with the use of variables, mixins/functions and nesting! Lets take a look at getting started using Grunt to compile our Sass. If you are new to the working in the command line, check my quick overview of some of the basic commands to help get you started.

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. 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.

Java Documentation Comments The Java language supports three types of comments: This tutorial is all about explaining Javadoc. We will see how we can make use of Javadoc for generating useful documentation for our Java code. What is Javadoc? Javadoc is a tool which comes with JDK and it is used for generating Java code documentation in HTML format from Java source code which has required documentation in a predefined format. Following is a simple example where red part of the code represents Java comments: Toolkit — Susy 2.2.12 documentation The Susy 2.0 toolkit is built around our shorthand syntax. Use the shorthand to control every detail, and adjust your defaults on-the-fly, so you are never tied down to just one grid, or just one output style. Span [mixin]¶ The Future of Web Apps – Single Page Applications 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. The web was never really designed as a platform for today’s applications, nevertheless we continue to bend it to our will. Due to differing paradigms we are forced to design our web apps in a completely different way to native apps. Some of the most obvious constraints are those imposed by using the traditional multiple page model, when employed this model clearly illustrates the difference in performance between native and web apps.

SVG Attribute reference - SVG « SVG / SVG Element reference » SVG Attributes Categories Animation event attributes onbegin, onend, onload, onrepeat Animation attribute target attributes 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?

An Introduction To Object Oriented CSS (OOCSS) Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. 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. Fortunately there are modern JavaScript frameworks that can assist with bringing structure and organization to our projects, improving how easily maintainable they are in the long-run. What Is MVC, Or Rather MV*? Link

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). With these libraries, developers can use promises in any browser with good ECMAScript 5 support. In this post, we’ll explore how to use promises in your web applications using XMLHttpRequest2 (XHR2) as a specific example. Benefits and Challenges with Asynchronous Programming 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.