background preloader

HTML(.js) - Befriend the DOM!

HTML(.js) - Befriend the DOM!
HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|Array HTML allows you to access document elements via their tag name. If multiple elements of the same tag exist, a proper array of elements is returned; otherwise, an Element is returned. HTML.body.header; HTML.body.header.textContent = "A Better Header!" HTML.query(selector) Element|Array 0.10.0 HTML.query acts as a proxy for querySelectorAll and returns the selected element(s). HTML.query("#example"); HTML.query(".example"); HTML.query("#example").h1.em; HTML.tag....query(selector) Element|Array 0.10.0 You can, of course, use query on any "HTML-ified" element(s) to search only the children thereof. HTML.body.div.query(".example"); HTML.query(selector limit) Element|Array 0.11.0 HTML.query acts as a proxy for querySelector or querySelectorAll (as appropriate) and returns no more than the specified number of selected element(s).

Cory Gross -- How To Create Your Own Chrome Extensions I really like the Chrome browser. It wasn't until recently that I looked into creating extensions and was surprised by how simple it was. If you know basic HTML, CSS, JavaScript then you know all you need to be able to extend your Chrome browser in multitudes of ways. I decided to write up a simple guide explaining some of the basic ways you can easily extend Chrome. Getting Started With Extensions In order to get started creating a new extension all you need to do is create a new root directory for your extension. The Manifest Every extension must contain a file in the root directory with filename manifest.json. Google has published a list of all the fields supported in manifest version 2.. Background Pages Most extensions will have an entry in the manfiest.json which looks like the following: This entry specifies two scripts which will be loaded and kept in memory running in the background. Event Pages This is all you need to know to start adding some functionality. Interaction chrome.* APIs

ECMA-262 » JavaScript. The core. Read this article in: Japanese, German (version 2), Arabic, Russian, French, Chinese. This note is an overview and summary of the “ECMA-262-3 in detail” series. Every section contains references to the appropriate matching chapters so you can read them to get a deeper understanding. Intended audience: experienced programmers, professionals. We start out by considering the concept of an object, which is fundamental to ECMAScript. ECMAScript, being a highly-abstracted object-oriented language, deals with objects. An object is a collection of properties and has a single prototype object. Let’s take a basic example of an object. For the code: we have the structure with two explicit own properties and one implicit __proto__ property, which is the reference to the prototype of foo: Figure 1. What for these prototypes are needed? Prototype objects are also just simple objects and may have their own prototypes. ECMAScript has no concept of a class. Easy enough, isn’t it? Figure 2. Figure 3.

Fortune.js - web framework for prototyping rich APIs Recurly.js: Picking a Signup Workflow So you probably came across the Recurly.js examples at some point, maybe while reading the first part of this series of articles. If you’re like me, though, you’ll then wonder how to properly integrate the Recurly.js form into your app. In this post I’m documenting the 3 different types of integration I could think of, so far. Collecting billing information at the end of trial In this setup you require payment information once the trial is over only. Pros super easy! Cons postponing billing information collection means (at least in my experience) more support and less engaged users Collecting billing information upfront (two-step workflow) This is the workflow I ended up implementing for WiseCash: a good middle-ground in my opinion. In the first step, you will present your app signup form then create a user record in your database with login/password (which you will mark as “not yet activated”). upfront payment details collection, yay! Collecting billing information upfront (single-step workflow)

intention.js Become a Handlebars.js ninja Handlebars can be compiled at runtime, however this is as expensive as it is appending it into the document by jQuery, clearly this article is about alleviating the pain and heavy lifting at runtime, so lets focus on that. In order to precompile Handlebars you need it installed on your system globally as a command line tool, on unix like systems you can execute the following command (assuming you have Node.js installed): $ npm install -g handlebars If that installed OK you’re set to rock and roll! If you've read the Handlebars documentation, you should be familiar with rendering templates with context at runtime, infact you should be familiar with precompiling templates prior to runtime too. Okay, well, here is the trick the documentation failed to mention: $ handlebars templates/ > template.js Boom.

A Simple, Comprehensive Overview of Javascript This isn’t a reference guide, programming tutorial or detailed overview. It’s a Javascript refresher, assuming you know another programming language and puts all the information in one place (just ctrl+f to find!). Javascript has nothing to do with Java, is dynamically typed and has C-like syntax. Enabling Javascript Include javascript inside HTML: <script> x = 3; </script> Reference external file: <script src=" Redirect if javascript disabled: <noscript><meta http-equiv="refresh" content="0; URL= Using Variables, Objects and Arrays Deep dive into objects. Comparisons and Manipulations Javascript has some funky types and comparisons. Conditionals and Loops Defining Functions Javascript Classes Javascript doesn’t have formal class notation, but you can create a “constructor” and add methods to it. Advanced Javascript Browser Document Object Model (DOM), and GUI Find and change HTML elements. Keep learning

AngularFire - A real-time backend for AngularJS from Firebase

Related: