background preloader

Introduction to JavaScript Source Maps

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? Related:  articles

Bearded Octo - OO JS in 15mins or Less A JavaScript survival guide Are you a programmer who is considering learning JavaScript, but unsure whether it is worth the pain? Then this blog post is for you: I argue that it is worth it and give tips for surviving the language. Why learn JavaScript? The present The main reason for choosing JavaScript is the breadth of its ecosystem: the web platform, Node.js, JSON, NoSQL databases, Cordova/PhoneGap, automating PhotoShop and many other apps, etc. Compared to Java, I like the interactivity of JavaScript and the web platform. I also like the flexibility of the language. The future ECMAScript 6 [1], the upcoming version of JavaScript fixes many of JavaScript’s problems: not enough data structures, limited built-in support for inheritance, no built-in support for modules, shadowing this, functions playing too many roles, … Additionally, there is much innovation and experimentation around: Take your time to get to know JavaScript An important insight for learning JavaScript (paraphrasing Golo Roden): JavaScript’s power

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:

La revolución de Javascript De un lenguaje de script, Javascript se ha convertido en los últimos años en la plataforma de desarrollo más usada en el mundo. Hoy, Javascript se está reinventando gracias a proyectos como Coffeescript, DART, Node.js y jQuery.Javascript es un lenguaje de script muy simple. Orientado a objetos (como Actionscript 2, sin clases) y basado en la sintaxis ECMAScript, derivado de C. DART es el esfuerzo de Google por crear un Javascript más Java. Código : class HelloDartTest { static testMain() { print("Hello, Darter!") Las desventajas: Ese hola mundo de unas 5 lineas de código se convierten en ! Node.js Node.js es la capacidad de usar Javascript del lado del servidor, igual que usarías PHP. Y esto en el JS del HTML: ¿Desventajas? CoffeeScript Coffeescript es una revolución muy interesante. mensaje = parte1: "hola " parte2: "mundo" holaMundo = -> alert mensaje.parte1 + mensaje.parte2 + "!" Y este el resultado compilado en Javascript: Es bastante eficiente y robusto y todo se convierte a JS nativo.

Visual Event 2 Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes. Introduction Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows: Which elements have events attached to them The type of events attached to an element The code that will be run with the event is triggered The source file and line number for where the attached function was defined (Webkit browsers and Opera only) In addition to being useful for debugging your own code, Visual Event can be used as an educational tool, showing how many web-sites have been authored. Visual Event is open source software (GPLv2) and a Git repo is hosted on GitHub for you to fork and modify as you wish!

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:

Frameworks Javascript prometedores para tus proyectos Los populares Frameworks para Javascript: jQuery, Prototype, MooTools y demás, no son lo únicos que existen. Actualmente disponemos de alternativas orientadas a diferentes públicos y tipos de aplicaciones, que no son populares, pero sí prometedoras. Es bueno recordar que los Frameworks son simplemente herramientas utilizadas bajo ciertas necesidades. RightJS: El Framework JavaScript correcto RightJS está dirigido al público de los lenguajes dinámicos, intenta posicionarse dentro del grupo de los Frameworks Javascript más populares. Su instalación es prácticamente igual que todos los demás Frameworks, simplemente incluyes el archivo del núcleo en la página, de la siguiente manera: La librería viene con dos archivos, uno es el código actualizado y el otro contiene código soportado por navegadores viejos. Fue probado y funciona en los siguientes navegadores: Firefox >= 1.5Safari >= 3Todas las versiones de Google ChromeInternet Explorer >=6Opera >= 9.25Konqueror >= 3.10 Qooxdoo: creación RIA

JS NICE: Statistical renaming, Type inference and Deobfuscation 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

20 JavaScript Frameworks Worth Checking Out The number of web applications being created and used has grown rapidly since the new millenium. And importantly, so has the sheer complexity of them -- specially on the front end. No more static pages, no sir! You have a ton of sections each interacting with each other and the server and yes, it's as complicated as it sounds and just as hard to pull off. Today, I'd like to talk about a few choice JavaScript frameworks that aim to simplify front-end application development. If you think jQuery is the answer, you lose a cookie and get an F grade! Creating responsive, fluid, and maintainable interfaces for web apps isn't as easy as one would imagine -- there is data to be sent back to the server and the results parsed, data stores to be updated, views to be re-rendered and so much else that needs to be done in the background. Sure, a few of these may be a little old but their code bases have lots of lessons to teach. Related links: Introduction to Sammy.js Github Repo Google Code

Kreate.js | A Tiny jQuery Element Creator Welcome to the tutorial portion of Kreate! Below are a some snippets and guides to help you become a master of kreation. Are you ready? Of course you are. You were born ready. 1. To Kreate something, just enter in the code below: $.kreate(); Congrats! 2. There are two ways you can kreate elements - express and advanced. To express kreate something, enter a string into the kreate function. Format: $.kreate( ' selector#id.class ' ); selector - Type of element (e.g. div, span, image, ul..) * Just a heads up, you can only add one class to the element. Now that you know the express formatting, let's start expressing ourselves! Express Creating a Single Element Let's try express kreating a div with a class.. $.kreate('div.fancy'); Awesome! Next, let's try something a little fancier. $.kreate('div. Great work - You just made this: Express Creating Multiple Elements Yes, oh yes. All you have to do is add a number after your string. $.kreate('div.fancy', 7); Did you just make 7 divs? Express Outputting

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

Related: