Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marcobiedermann/awesome-bookmarklets

đź”– Awesome collection of helpful bookmarklets
https://github.com/marcobiedermann/awesome-bookmarklets

List: awesome-bookmarklets

Last synced: 26 days ago
JSON representation

đź”– Awesome collection of helpful bookmarklets

Awesome Lists containing this project

README 

        
# Awesome Bookmarklets [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



## Table of contents

* [Accessibility & Validation](#accessibility--validation)

* [Debug](#debug)

* [Fonts](#fonts)

* [Performance](#performance)

* [Search Engine Optimization](#search-engine-optimization)

* [Games](#games)



## Accessibility & Validation

### [a11y.css](https://github.com/ffoodd/a11y.css)

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.



### [HTML_CodeSniffer](https://github.com/squizlabs/HTML_CodeSniffer)

HTML_CodeSniffer is a client-side JavaScript that checks an HTML document or source code, and detects violations of a defined coding standard.



### [Readability Bookmarklet](http://accessibility.oit.ncsu.edu/tools/readability/)

This tool will show you how readable selected text is on a page. The readability guidelines are based on WCAG 2 Level AAA Conformance. Note, there is no readability requirement for WCAG 2, Level AA Conformance. The results are based on six tests.



### [REVENGE.CSS](https://github.com/Heydon/REVENGE.CSS)

The premise of revenge.css is simple: A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML.



### [Web Evaluation Tools Bookmarklet](http://accessibility.oit.ncsu.edu/tools/web-evaluation-tools)

This set of tools allows you to check for several aspects of Web accessibility that other tools do not. It is not designed to replace any other tools, but rather to supplement them.



## Debug



### [45-75](https://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/)

Check whether lines are between 45 and 75 characters, for optimal readability; this especially helps with font sizing for responsive web design.



### [CSS Debugger](https://github.com/roykolak/css-debugger)

CSS styles to highlight problematic and malformed HTML



### [CSS Layout Debugger](https://gist.github.com/addyosmani/fd3999ea7fce242756b1)

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.



## Fonts

### [FFFFALLBACK](http://ffffallback.com/)

Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.



### [FontFriend](http://somadesign.ca/projects/fontfriend/)

Font­Friend is a book­marklet for typo­graph­i­cally obsessed web design­ers. It enables rapid check­ing of fonts and font styles directly in the browser with­out edit­ing code and refresh­ing pages, mak­ing it the ideal com­pan­ion for cre­at­ing CSS font stacks.



### [Fount](http://fount.artequalswork.com/)

Identify webfonts on any site.



### [Flippant](http://flippant.artequalswork.com/)

View any site from all angles.



### [MIN](http://min.artequalswork.com/)

Basic looks at type and layout.



### [WebFontPicker](https://github.com/danielgavrilov/WebFontPicker)

A bookmarklet that helps preview Google Web Fonts live on any website.



### [WhatFont](https://github.com/chengyin/WhatFont-Bookmarklet)

WhatFont is a JavaScript script to detect what font in the stack is being used on any elements of a web page.



## Performance

### [CriticalCSS](https://gist.github.com/PaulKinlan/6284142)

CriticalCSS Bookmarklet and Devtool Snippet.js



### [ CSS Stress Test](https://github.com/andyedinborough/stress-css)

This project is a bookmarklet for stress testing the CSS on any given webpage.

It indexes all the elements and their classes, and then--class by class--it removes one, and times how long it takes to scroll the page. Selectors that save a considerable amount of time when removed indicate problem areas.



### [pagespeedThis](https://github.com/kimblim/pagespeedThis)

Analyses the pagespeed of the current page



### [perfmap](https://github.com/zeman/perfmap)

A bookmarklet to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API. A browser with support for the Resource Timing API is required.



### [Performance-Bookmarklet](https://github.com/micmro/performance-bookmarklet)

Bookmarklet to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more - sort of a light live WebPageTest.



### [stats.js](https://github.com/mrdoob/stats.js)

This class provides a simple info box that will help you monitor your code performance. FPS Frames rendered in the last second. The higher the number the better. MS Milliseconds needed to render a frame. The lower the number the better.



### [timing.js](https://github.com/addyosmani/timing.js)

Timing.js is a small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet.



### [Yslow](http://yslow.org/mobile/)

YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high-performance websites



## Search Engine Optimization

### [OuiSEO](https://github.com/carlsednaoui/seo-bookmarklet)

Displays SEO and social metadata information.



### [SEO Bookmarklet](http://twkm.ca/projects/seo-bookmarklet)

A One-Stop SEO Bookmarklet to Quickly Review On-Site SEO



## Games

### [Astroids](http://websiteasteroids.com/)

Play Astroids on a website and destroy it.



## License

[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](//creativecommons.org/publicdomain/zero/1.0/)