background preloader

Web Development Bookmarklets

Web Development Bookmarklets
Web Development Bookmarklets These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and experiment with CSS or JS without editing the actual page. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Opens a JavaScript Shell and allows it to access the current page. Opens a JavaScript Development Environment and allows it to access the current page. Type in CSS rules to experiment or to create a temporary user style sheet. Creates a new window into which you can type CSS rules for the original page. Experiment with changes to the page's style sheet. Similar to "test styles". This bookmarklet supports inline and linked style sheets, imports, and style sheets with data: URLs (such as those created by "test styles"). Also shows classes (e.g.

ReloadIt Favelets Authoring microformats Multivalidator: HTML, CSS & HREFs all in one. Screen sizes Readability Learning Scripts etc. Enhanced User Interface Translation Summary Add any of these Favelets to your Favorites, or drag them to your Favorites Toolbar or Bookmarks Bar. Introduction Combine Internet Explorer's Toolbar Favorites feature and mini applications ( applets ) written in jscript, stamped with a "javascript:" URI scheme, and you have Favelets - a way to add features built from DHTML to your browser. I have found Favelets useful for: Authoring: Validating the HTML, CSS and HREFs in pages I've written, and testing how my layouts reflow to various screen sizes. Questions? teleject/Responsive-Web-Design-Artboards - GitHub Accessibility-Checking Favelets - Little scripts that you can save to test for web accessibility Please note that this page requires JavaScript for it to function.. Please read the instructions if you don't know how to use these favelets. Highlight some text on your web page (or perhaps some text that you are entering into a <textarea>, for example a Blogger or MovableType post), then run this favelet - the highlighted text will be passed through the Acrobot, converting all your acronyms and abbreviations. When designing a web page, you will often use id attributes in <div> tags to enable precise positioning using Cascading Style Sheets. Exactly as above, but this time only <div>s that have a class attribute are labelled. Displays all images on the page, alongside their alt attributes - useful for checking that alt attributes match up with the image. Alt attributes - images missing alt attribute Displays all images on the page that do not have any alt attributes - useful accessibility checking tool. Does exactly what it says on the tin ... Show table headings <th> Show table cells <td>

CSSrefresh - automatically refresh CSS files Miscellaneous Bookmarklets Miscellaneous Bookmarklets These bookmarklets add to the simple Back and Forward navigation built into web browsers, and do other miscellaneous things. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Goes up a directory from the page you're viewing. For example, takes you from to and then to top ( Goes to the top level of the site. For example, takes you from to Increases the last number in the URL by 1. For example, takes you from to Suggested by Brian Bober and Alan Horkan. Decreases the last number in the URL by 1. For example, takes you from to Adds the page you're viewing as sidebar panel.

twolfson/File-Watcher - GitHub Link Bookmarklets Link Bookmarklets These bookmarklets let you quickly search, open, or list links on whatever page you're viewing. (To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.) Browsers: is Internet Explorer for Windows, is Netscape 7 or Mozilla, is Netscape 4, and is Opera. Details Lists all links on the page containing the specified text. Prompts for a string (word or phrase), and then lists links on the page that contain that string in a new window. Opera/NS4: the text of the link won't be shown or searched (only the URL will be). Opens a window showing all images linked to from the current page. Use this on a page or directory listing where many of the links are links to images, such as Opera 6 bug: to load the images after running the bookmarklet, press G three times. Opens a window showing all pages linked to from the current page. An example of where this is useful is the Tiny Sepuku page.

chjj/tty.js - GitHub More Must-Have Bookmarklets Than You Can Swing a Browser At I’ve seen a lot of links to Special Geek to Live – Ten Must-Have Bookmarklets which lists the top ten must-have bookmarklets to help your online research and browsing. I thought I’d do you better and offer you more must-have javascript bookmarklets than you can swing a bookmarklet at – if you could swing a bookmarklet. Can you? A bookmarklet is a javascript found inside of a link. Click and drag the link to your Favorites or Bookmarks sidebar, or your links bar and it stores the javascript in a link. When viewing a web page, you can click the javascript link to initiate the little program or action. Written in Javascript, they are designed to work with just about any browser, though there are a few browser specific bookmarklets. If you are inspired, I’ve included some helpful articles so you can learn how to write your own Javascript Bookmarklets. If you know of any other bookmarklets that I’ve missed, please add them. General Collections of Bookmarklets Bookmarks for Specific Browsers:

Fu Commandlinefu.com is an online repository for recording commandline gems, that you return to again and again. 'fu' is a commandline interface that allows you to harvest the power of internets commandline wisdom. Now you can search this trove of online treasures from the comfort of your commandline . For example ... Try commandlinefu.com » So you searched commandlinefu.com for for "query wikipedia" above. And with a little ⌘-V (Mac) or Ctrl-V or Shift-Insert, you can paste your query into the terminal, and voilà! And if you are curious about others think about that command you can learn more by reading the associated comments in a browser... For more information check out the wiki! Go to Wiki »

Getting Started - schema.org Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! You use the schema.org vocabulary, along with the microdata format, to add information to your HTML content. 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. <div><h1>Avatar</h1><span>Director: James Cameron (born August 16, 1954)</span><span>Science fiction</span><a href=".. To begin, identify the section of the page that is "about" the movie Avatar. By adding itemscope, you are specifying that the HTML contained in the <div>... 1d.

Related: