background preloader

32 Indispensable Bookmarklets for Web Developers and Designers

32 Indispensable 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 Related:  Browsers

100+ Useful Bookmarklets For Better Productivity | Ultimate List In a nutshell, bookmarklets are small little applications you can place as browser’s bookmark bar and they each perform a specific function, depending on what they are coded for. Bookmarklets are usually written in Javascript and they are extremely easy to install/remove. Bookmarklets work in most common used browsers like Firefox, Opera and Safari but probably lesser support in Internet Explorer. In this article, we’ll show you some of the most useful bookmarklets for designers, developers or even if you are a net surfer, they might just come in handy. Why bookmarklet are cool? They are efficient! Hassle-less installation – Installing a bookmarklet is simple. Social Bookmarking and Sharing Here are a bunch of social bookmarking bookmarklets that might come in handy: Browser resize Here’s a complete article of browser resizing bookmarklets with positioning capability. Readability, Download and Prints Print Screen – Another print screen bookmarklet. Traffic, Password and Site Information

The Opera Browser and Internet Suite 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. You can share them and work on them in groups. 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

Welcome to the Open Source Design Pattern Library! | Open Source Design Pattern Library Free Web-to-PDF with Google Chrome, Safari, and More — PDF Download by Nitro PDF Software PDF Download lets you convert web pages into high-quality PDF files free from any web browser, including Google Chrome, Safari, Firefox, Internet Explorer and Opera. Just drag this bookmarklet link onto your browser's Bookmarks toolbar, and wherever you find a web page to convert, simply click Save Page as PDF and wait a moment to receive your PDF copy. What is a bookmarklet? Bookmarklets are links you can add to your browser's toolbar area. Setting up PDF Download For step-by-step instructions for all browsers, follow the links below. Google Chrome Safari Firefox (also see full add-on) Internet Explorer (also see full add-on) Opera Google Chrome Make sure the Bookmars Bar is visible. Safari Make sure the Bookmarks Toolbar is visible. Firefox Make sure the Bookmarks Toolbar is visible. Internet Explorer Make sure your Links Toolbar is visible. Opera Make sure the Personal Bar is visible.

List of web browsers The following is a list of web browsers that are notable. Timeline representing the history of various web browsers. Historical[edit] This is a table of personal computer web browsers by year of release of major version, in chronological order, with the approximate number of worldwide Internet users in millions. Notable releases[edit] In order of release: Notable layout engines[edit] Graphical[edit] Current/maintained projects are in boldface. Trident shells[edit] Other software publishers have built browsers and other products around Microsoft's Trident engine. Gecko-based[edit] Mozilla Firefox (formerly Firebird and Phoenix) Yahoo! Gecko- and Trident-based[edit] K-Meleon with the IE Tab extensionMozilla Firefox with the IE Tab extensionNetscape Browser 8 (discontinued) Webkit- and Trident-based[edit] Gecko-, Trident- and WebKit-based[edit] KHTML-based[edit] Presto-based[edit] WebKit-based[edit] For Java platform[edit] Specialty browsers[edit] Current[edit] Discontinued[edit] Mosaic based[edit] Others[edit]

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 The UI Pattern Factory 15 Must-Have Bookmarklets For Web Designers And Developers Bookmarklets are a great way of saving time when used regularly. With just a click, they can provide so much information / help. Here is a list of 15 very handy web designer / developer bookmarklets which includes: learning the colors usedinserting a ruler on a webpagereloading CSS without reloading the whole site & more.. To use them, bookmark the "Get It" links. If no "Get It" link is provided, than they can be bookmarked from the author’s websites or: Click here to download all the bookmarklets mentioned as a Firefox bookmark folder (can be added from bookmarks>organize bookmarks>import&backup>import HTML menu at Firefox). Note: If you’re not using it already, Firefox web developer extension is strongly adviced for developing faster besides using these bookmarklets (few of the bookmarklets mentioned are already in the extension). WTFramework – Learn JavaScript Framework Used XRAY – See Details Of Any Web Element It lets you see the box model in action for any element, all the details of it.

Gollum, the Wikipedia Browser 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

9 Common Usability Mistakes In Web Design | How-To Advertisement By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. 1. Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area: Newspond comments link. Why would we want a larger clickable area? <a href=" style="padding: 5px;">Example Site<a> You can read more about padded link targets for better mousing in a 37signals article on padded link targets. 2. Pagination refers to splitting up content onto several pages. 3. 4. The Basecamp landing page. 5.