background preloader

32 Bookmarklets for Web Developers and Designers

32 Bookmarklets for Web Developers and Designers
All of these bookmarklets/favelets will be useful to all web designers and developers, they are the quickest method for testing, analyzing and tweaking any web page. A Bookmarklet or Favelet is a small application tool, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. To use these bookmarklets you can drag and drop the links to your Bookmark Toolbar or right click and save link as, this way you will always have quick access to these great tools Layout Grid and Overlay Bookmarklets Bookmarklet Javascript Code (Copy and Paste) : javascript:void(d=document);void(el=d.getElementsByTagName('body'));void('url( MRI from WESTCIV Bookmarklet Javascript Code : Spry Medias Design Bookmarklet Quick Accessibility Page Tester Reload CSS Slayer Office Mouseover DOM Inspector (Domi) Slayer Office Favelet Suite Wave – Web Accesibilty javascript:void(' CSS Bookmarklets

Javascript Cheat Sheet Basic Objects Math Methods DOM Events Event Object Constant Event Object Methods initEvent() preventDefault() stopPropagation() EventTarget Object addEventListener() dispatchEvent() removeEventListener() EventListener Object handleEvent() MouseEvent/KeyboardEvent Methods initMouseEvent() initKeyboardEvent() DOM Node Node Types Element1 Attr2 Text3 CDATASection4 EntityReference5 Entity6 ProcessingInstruction7 Comment8 Document9 DocumentType10 DocumentFragment11 Notation12 nodeName Returns Element element name Attr attribute name Text #text CDATASection #cdata-section EntityReference entity reference name Entity entity name ProcessingInstruction target Comment #comment Document #document DocumentType doctype name DocumentFragment #document fragment Notation notation name nodeValue Returns RegExp Modifiers i Perform case-insensitive matching g Perform a global match (find all matches rather than stopping after the first match) m Perform multiline matching Brackets Metacharacters . Quantifiers Core DOM length Ad

Visual thinking guides This presents nine sources of visual thinking guides: Exploratree, Gamestorming, LexIcon, Education Oasis, TeacherVision, Freeology, Education Place and Writing Fun. Exploratree hosts a set of interactive thinking guides. This is a free web resource where you can use the guides, print them, edit them or make your own. Interactive map: Flash (recommended) PDF (problem?) Here are some of the overall categories, names of individual diagram type and an indication of their purposes. Click the thumbnail to see a full-size image. Develop ideas Solve problems Explore Analyse Different perspectives Gamestorming presents thinking patterns as games, many of them visual, that will help to make meetings and discussions more fruitful and stimulating. $ - $100 Test 3 - 3-12-3 Brainstorm 4 - 4Cs 7 - 7Ps Framework A - Affinity Map; Air Time Mastermind; Argument map; Atomize B - Back of the Napkin; Bodystorming; Boundary matrix; Brainwriting; Break; Build The Checklist D - Dot Voting; Draw the Problem R - Random Inputs

How to Send e-mail using Node.js | Code for geek In this tutorial i am going to discuss about sending e-mail with Node.js. I have already covered Express.js tutorials and in this tutorial also i am going to use Express.js and NodeMailer package. In many forums and blogs people used to ask about sending e-mail’s using Node.js for account verification, password recovery and promotion. So let’s begin with tutorial and at the end you will have Node application which is able to send e-mail’s to any one’s account. Links: Watch live Demo on YouTube here and Download it from Github here. What we are Building ? Create package.json file and keep it in any folder. Once done. Implementing Server.js: Let’s begin with creation of our Server file. var express=require('express'); var nodemailer = require("nodemailer"); var app=express(); app.listen(3000,function(){ console.log("Express Started on Port 3000"); }); This is basic block of our app. app.get('/',function(req,res){ res.sendfile('index.html'); }); Email is been sent at "+to+" .

dropbox/dropbox-js tech blog » Blog Archive » Some love for JavaScript applications During our last hack week, Aakanksha Sarda and I set out to build a library that helps JavaScript developers use the Dropbox API. My main goal was to take “static” Web applications to the next level. However, the JavaScript library can be useful for any application that runs a significant part of its logic in the browser, as well as for node.js server-side code. If you prefer getting your hands dirty right away, go ahead and register for a Dropbox API key, set up an application in your Dropbox, borrow sample code, and read the library documentation. Motivation: static Web applications Thanks to recent improvements in browser support and VM performance, I often find myself writing small and medium applications completely in JavaScript, whenever I can get away with it. My interest in static Web apps is greatly influenced by how easy they are to deploy. However, up until now, having to handle per-user data has been a different story. Demo: “powered by Dropbox” Web applications