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:
Changing Drop Down selector Arrow Each browser displays select elements differently and it’s usually the one thing that will stop your forms from looking amazing. Where is with a regular button it’s fairly easy to change it, changing the selector arrow is another story. Just look at some of the possible variations (and those are outdated)! There are many tutorials out there to change the selector drop down. Unfortunately many of them involve placing an image over the entire element or creating your own image and sticking it in the corner. The below solution will work for all browsers and only take seconds to implement and only needs some CSS! How does it work? Simple, we hide the standard arrow, then we create “<>” text and just rotate it 90 degrees. basic select html code <div class="selectdiv"><label><select><option selected> Select Box </option><option>Option 1</option><option>Option 2</option><option>Last long option</option></select></label></div> The CSS : So the final magical CSS that will make this work is:
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?
Change the Default Select Drop-Down List In this article I’m going to help you style a Select drop-down input with just CSS without the need for javascript. Ok let’s get to it! So here’s the story – The awesome designer in your team sends you a new PSD (Photoshop Document) with the final design of a new website or app. Well the reality is that you shouldn’t complain to the designer because little things like this makes you push yourself a little bit harder and not rely on default stylings just because. This article is based on two workarounds (One for Chrome and Safari and one for Firefox) already posted on the web. Credit for Chrome workaround goes to Chris Coyier from CSS-tricks.com Credit for Firefox workaround goes to João Cunha who posted this on stackoverflow Ok let’s get started! Let’s say that the design for the drop-down is this one: When we add the html for a Select Dropdown we get this: Firefox Default styling Chrome Default Styling Not very pretty. It will start to look something like this on Firefox: On Chrome: On Safari:
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
Create animations on page scroll using CSS Hi there, you probably seen this done many times on web sites before. You get to the site and as you scroll elements will animate in (ex bounce, fade in etc). Today we are going to learn how to do this quickly. For this tutorial we are going to use animate.css this file will have all of our animations already created and you can just pick the ones you want to use. Final Result See the Pen mejvpj What we will use: animate.css – can be downloaded herewow.js – can be downloaded here Setup The reason we are using animate.css is because it comes pre built with almost all animations you can think of. First things first import our files: We are using CloudFlare CDN services (cdnjs.com which you should too to save on your bandwidth!) /** * Register and enqueue a wow script, it doesn't depend on anything */ function wow_add_scripts() { wp_register_script( 'wow-script', get_stylesheet_directory_uri() . Now we just need to add initialization of our script on to the html page itself: Creating basic html
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
Créer un menu contextuel avec HTML5 - JavaScript / jQuery | Creative Juiz Vous vous souvenez certainement des scripts JS qui permettent de hacker le clic-droit afin de proposer un menu contextuel personnalisé ? Sachez qu’il est possible depuis peu de le faire grâce à du HTML et un bout de JS. HTML5 étend les capacités de l’élément menu grâce à un nouvel attribut. On est d’accord, en dehors des problèmes d’accessibilité qu’implique ce genre de modification, le changement de ce bout d’interface pour l’utilisateur n’est clairement pas conseillé. En effet l’utilisateur qui utilise son clic-droit dans son navigateur a l’habitude des commandes dont il peut bénéficier, en ajouter ou les modifier peut s’avérer perturbateur pour lui. Ce n’est pas parce que vous pouvez le faire qu’il FAUT nécessairement le faire ! Puis entre nous cacher des commandes dans un clic-droit… m’enfin, si jamais vous avez besoin de ce genre de chose, voici comment faire. Place au code L’élément HTML menu permet de créer de base… un menu, oui. Voici le code HTML proposé. Démonstration
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(); xhr.open('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) {
A Preview of HTML 5 Abstract#section1 The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. Article Continues Below To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics. Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG. Note that the specification is still a work in progress and quite a long way from completion. Structure#section2 HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer. <body><header>... <!
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
Please Stop Using Local Storage Seriously. Just stop it already. I don’t know what it is, exactly, that drives so many developers to store session information in local storage, but whatever the reason: the practice needs to die out. Things are getting completely out of hand. Almost every day I stumble across a new website storing sensitive user information in local storage and it bothers me to know that so many developers are opening themselves up to catastrophic security issues by doing so. Let’s have a heart-to-heart and talk about local storage and why you should stop using it to store session data. What is Local Storage? I’m sorry if I was a bit grumpy earlier. Let’s start with the basics: local storage is a new feature of HTML5 that basically allows you (a web developer) to store any information you want in your user’s browser using JavaScript. In practice, local storage is just one big old JavaScript object that you can attach data to (or remove data from). What’s Cool About Local Storage? OK. Sensitive Data