1 | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
2 | Category | Sub-Category | Name / Title | Description | URL | ||||||||||||||||||||||
3 | Bookmarklets | BreakpointTester | Test your responsive design by breakpoints, not by device widths. | http://breakpointtester.com/ | |||||||||||||||||||||||
4 | Bookmarklets | CSSrefresh | As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. | http://cssrefresh.frebsite.nl/ | |||||||||||||||||||||||
5 | Bookmarklets | FFFFallback | A simple tool for bulletproof web typography. | http://ffffallback.com/ | |||||||||||||||||||||||
6 | Bookmarklets | HTML Code Sniffer | Checks HTML source code and detects violations of a defined coding standard. | http://squizlabs.github.io/HTML_CodeSniffer/ | |||||||||||||||||||||||
7 | Bookmarklets | MIN | Strip out colour and styles from designs, to give you a deeper insight into a design. | http://min.artequalswork.com/ | |||||||||||||||||||||||
8 | Bookmarklets | Pesticide | Quickly debug CSS layout issues by toggling different coloured outlines on every element. | http://pesticide.io/ | |||||||||||||||||||||||
9 | Bookmarklets | Revenge.css | A CSS bookmarklet that reports bad html using pseudo content. | http://heydonworks.com/revenge_css_bookmarklet/ | |||||||||||||||||||||||
10 | Bookmarklets | RWD Bookmarklet | A handy tool for responsive design testing. | http://responsive.victorcoulon.fr/ | |||||||||||||||||||||||
11 | Bookmarklets | Wirify | Turn any web page into a wireframe. | https://www.wirify.com/ | |||||||||||||||||||||||
12 | Cheat Sheets & Checklists | Cheetyr | A handy collection of cheatsheets and shortcuts to speed up your work. | http://www.cheetyr.com/ | |||||||||||||||||||||||
13 | Cheat Sheets & Checklists | CSS3 Animation Cheat Sheet | http://justinaguilar.com/animations/index.html | ||||||||||||||||||||||||
14 | Cheat Sheets & Checklists | Easing Functions Cheat Sheet | http://easings.net/ | ||||||||||||||||||||||||
15 | Cheat Sheets & Checklists | Emmet Cheat Sheet | http://docs.emmet.io/cheat-sheet/ | ||||||||||||||||||||||||
16 | Cheat Sheets & Checklists | jQuery UI Events Cheat Sheet | http://bitsofco.de/2015/jquery-ui-events/ | ||||||||||||||||||||||||
17 | Cheat Sheets & Checklists | The Accessibility Cheatsheet | https://bitsofco.de/the-accessibility-cheatsheet/ | ||||||||||||||||||||||||
18 | Cheat Sheets & Checklists | The Ultimate Flexbox Cheat Sheet | http://www.sketchingwithcss.com/samplechapter/cheatsheet.html | ||||||||||||||||||||||||
19 | Cheat Sheets & Checklists | Typography Cheatsheet | A guide to using proper typographic characters. | https://www.typewolf.com/cheatsheet | |||||||||||||||||||||||
20 | Cheat Sheets & Checklists | WCAG 2.0 Checklists | https://www.wuhcag.com/wcag-checklist/ | ||||||||||||||||||||||||
21 | Cheat Sheets & Checklists | Web Accessibility Checklist | By The Accessibility Project. | http://a11yproject.com/checklist.html | |||||||||||||||||||||||
22 | Cheat Sheets & Checklists | Web Developer Checklist | A checklist for web developers building modern websites. | http://webdevchecklist.com/ | |||||||||||||||||||||||
23 | Colours | Generators | Adobe Colour CC | https://color.adobe.com/create/color-wheel/ | |||||||||||||||||||||||
24 | Colours | Compare Colors | BrandColors | Official colour codes for the worlds biggest brands. | http://brandcolors.net/ | ||||||||||||||||||||||
25 | Colours | Generators | colllor | Colour palette generator. | http://colllor.com/ | ||||||||||||||||||||||
26 | Colours | Compare Colors | Color Hunt | A curated collection of beautiful colours. | http://www.colorhunt.co/ | ||||||||||||||||||||||
27 | Colours | Compare Colors | Color Oracle | A free color blindness simulator. | http://colororacle.org/ | ||||||||||||||||||||||
28 | Colours | Generators | ColorHexa | Provides information about any color & generates matching color palettes. | http://www.colorhexa.com/ | ||||||||||||||||||||||
29 | Colours | Generators | colourcode | An online designer tool, which allows you to easily and intuitively combine colours. | http://www.colourco.de/ | ||||||||||||||||||||||
30 | Colours | Compare Colors | Colourgorize | Thousands of websites analyzed and searchable by color. | http://www.colorgorize.com/ | ||||||||||||||||||||||
31 | Colours | Compare Colors | COLOURlovers | A creative community where people from around the world create and share colours, palettes and patterns. | http://www.colourlovers.com/ | ||||||||||||||||||||||
32 | Colours | Compare Colors | Colours | A list of colour names in CSS. | http://colours.neilorangepeel.com/ | ||||||||||||||||||||||
33 | Colours | Compare Colors | Coolors | Colour scheme generator. | https://coolors.co/ | ||||||||||||||||||||||
34 | Colours | Compare Colors | CSS Colours | A list of colour names in CSS. | http://colours.neilorangepeel.com/ | ||||||||||||||||||||||
35 | Colours | Flat UI | Flat UI Color Picker | Colours for Flat UI Designs. | http://www.flatuicolorpicker.com/ | ||||||||||||||||||||||
36 | Colours | Flat UI | Flat UI Colors | http://flatuicolors.com/ | |||||||||||||||||||||||
37 | Colours | Converters | HEX to RGB Converter | http://hex.colorrrs.com/ | |||||||||||||||||||||||
38 | Colours | Compare Colors | hexcodes | All 4,096 shorthand hexcodes. | http://chrisnager.github.io/hexcodes/ | ||||||||||||||||||||||
39 | Colours | Compare Colors | Hexwalk | Simple colour inspiration. | http://hexwalk.in/ | ||||||||||||||||||||||
40 | Colours | Converters | HTML Color Codes | Get HTML colour codes, Hex colour codes, RGB and HSL values. | http://htmlcolorcodes.com/ | ||||||||||||||||||||||
41 | Colours | Compare Colors | Paletton | Colour scheme designer. | http://paletton.com/ | ||||||||||||||||||||||
42 | Colours | Compare Colors | Swiss Style Color Picker | http://swisscolors.net/ | |||||||||||||||||||||||
43 | Colours | Compare Colors | uiGradients | A handpicked collection of beautiful colour gradients. | http://uigradients.com/ | ||||||||||||||||||||||
44 | Colours | Compare Colors | Web Colour Data | Popular colour palettes. | http://webcolourdata.com/ | ||||||||||||||||||||||
45 | Command Line / Terminal | Awesome OS X Command Line | A curated list of shell commands and tools specific to OS X. | https://github.com/herrbischoff/awesome-osx-command-line | |||||||||||||||||||||||
46 | Command Line / Terminal | EditorConfig | Helps developers define and maintain consistent coding styles between different editors and IDEs. | http://editorconfig.org/ | |||||||||||||||||||||||
47 | Command Line / Terminal | iTerm 2 | A terminal emulator for Mac OS. | https://www.iterm2.com/ | |||||||||||||||||||||||
48 | Command Line / Terminal | Unix Toolbox | A collection of Unix/Linux/BSD commands and tasks which are useful for IT work. | http://cb.vu/unixtoolbox.xhtml | |||||||||||||||||||||||
49 | Content Management Systems | CloudCannon | The Cloud CMS for Jekyll. | http://cloudcannon.com/ | |||||||||||||||||||||||
50 | Content Management Systems | Contentful | https://www.contentful.com/ | ||||||||||||||||||||||||
51 | Content Management Systems | DatoCMS | A fully customizable administrative area for your static websites. | https://www.datocms.com/ | |||||||||||||||||||||||
52 | Content Management Systems | Forestry.io | A full-featured CMS for your static site with support for Jekyll, Hugo and Git. | https://forestry.io/ | |||||||||||||||||||||||
53 | Content Management Systems | Kirby | https://getkirby.com/ | ||||||||||||||||||||||||
54 | Content Management Systems | Perch | https://grabaperch.com/ | ||||||||||||||||||||||||
55 | Content Management Systems | Pulse CMS | https://www.pulsecms.com/ | ||||||||||||||||||||||||
56 | Content Management Systems | Sir Trevor | http://madebymany.github.io/sir-trevor-js/ | ||||||||||||||||||||||||
57 | CSS | Flexbox | A Complete Guide to Flexbox | https://css-tricks.com/snippets/css/a-guide-to-flexbox/ | |||||||||||||||||||||||
58 | CSS | Flexbox | Almost complete guide to Flexbox | https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox | |||||||||||||||||||||||
59 | CSS | Frameworks / Toolkits | Animate.css | Just add water CSS animations. | https://daneden.github.io/animate.css/ | ||||||||||||||||||||||
60 | CSS | Frameworks / Toolkits | Atomic CSS | CSS for component-based frameworks. | https://acss.io/ | ||||||||||||||||||||||
61 | CSS | Frameworks / Toolkits | Basscss | An atomic class based CSS library. | http://www.basscss.com/ | ||||||||||||||||||||||
62 | CSS | Frameworks / Toolkits | Bulma | A modern CSS framework based on Flexbox. | http://bulma.io/ | ||||||||||||||||||||||
63 | CSS | Frameworks / Toolkits | Clank | An open source HTML/CSS framework for prototyping native phone/tablet applications. | http://getclank.com/ | ||||||||||||||||||||||
64 | CSS | Frameworks / Toolkits | Codrops CSS Reference | An extensive CSS reference with all the important properties and info. | http://tympanus.net/codrops/css_reference/ | ||||||||||||||||||||||
65 | CSS | Frameworks / Toolkits | Corpus | A collection of CSS things. | http://corpuscss.com/ | ||||||||||||||||||||||
66 | CSS | Frameworks / Toolkits | Crayon.css | A list of CSS variables linking colour names to hexadecimal values. | http://riccardoscalco.github.io/crayon/ | ||||||||||||||||||||||
67 | CSS | Frameworks / Toolkits | CSS Reset | The most popular CSS Reset scripts. | http://cssreset.com/ | ||||||||||||||||||||||
68 | CSS | Frameworks / Toolkits | CSS Values | A quick-reference online resource for getting all possible values for every valid CSS property. | http://cssvalues.com/ | ||||||||||||||||||||||
69 | CSS | Frameworks / Toolkits | cssreference.io | A free visual guide to CSS. | http://cssreference.io/ | ||||||||||||||||||||||
70 | CSS | Frameworks / Toolkits | csswizardry-grids | A fully responsive, mobile-first, infinitely nestable, | https://csswizardry.com/csswizardry-grids/ | ||||||||||||||||||||||
71 | CSS | Frameworks / Toolkits | Element Queries for CSS | http://codepen.io/tomhodgins/post/element-queries-for-css | |||||||||||||||||||||||
72 | CSS | Frameworks / Toolkits | Flexbox Grid | A grid system based on the flex display property. | http://flexboxgrid.com/ | ||||||||||||||||||||||
73 | CSS | Flexbox | Flexbox Patterns | Practical examples of how UI components can be built using Flexbox CSS. | http://www.flexboxpatterns.com/ | ||||||||||||||||||||||
74 | CSS | Flexbox | Flexplorer | A Flexbox Grid Editor. | http://bennettfeely.com/flexplorer/ | ||||||||||||||||||||||
75 | CSS | Flexbox | Flexy Boxes | Flexbox playground and code generator. | http://the-echoplex.net/flexyboxes/ | ||||||||||||||||||||||
76 | CSS | Frameworks / Toolkits | Gutenberg | A modern framework to print correctly. | https://github.com/BafS/Gutenberg | ||||||||||||||||||||||
77 | CSS | Frameworks / Toolkits | Gutenberg | A web typography starter kit. | http://matejlatin.github.io/Gutenberg/ | ||||||||||||||||||||||
78 | CSS | Frameworks / Toolkits | Rucksack | A little bag of CSS superpowers. | http://simplaio.github.io/rucksack/ | ||||||||||||||||||||||
79 | CSS | Frameworks / Toolkits | Semantic UI | A development framework that helps create responsive layouts. | http://semantic-ui.com/ | ||||||||||||||||||||||
80 | CSS | Flexbox | Solved by Flexbox | A showcase of problems once hard or impossible to solve with CSS alone. | http://philipwalton.github.io/solved-by-flexbox/ | ||||||||||||||||||||||
81 | CSS | Frameworks / Toolkits | Tachyons | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. | http://tachyons.io/ | ||||||||||||||||||||||
82 | CSS | Frameworks / Toolkits | ungrid | A simple responsive CSS grid. | http://chrisnager.github.io/ungrid/ | ||||||||||||||||||||||
83 | CSS | Flexbox | Using Flexbox Today | http://chriswrightdesign.com/experiments/using-flexbox-today/ | |||||||||||||||||||||||
84 | CSS | Flexbox | Webkit Flexbox Patterns | The following examples demonstrate simples patterns of the 2012 Flexbox specification. | http://webkit-flex.atomeye.com/ | ||||||||||||||||||||||
85 | CSS Generators | Patterns / Gradients | Animista | CSS animations on demand. | http://animista.net/ | ||||||||||||||||||||||
86 | CSS Generators | Patterns / Gradients | Atomize | See how much a website can benefit by adopting Atomic CSS. | https://atomize-io.herokuapp.com/ | ||||||||||||||||||||||
87 | CSS Generators | Optimisation | Bear CSS | Helping you build a solid stylesheet foundation based on your markup. | http://bearcss.com/ | ||||||||||||||||||||||
88 | CSS Generators | Patterns / Gradients | Clippy | CSS clip-path maker. | http://bennettfeely.com/clippy/ | ||||||||||||||||||||||
89 | CSS Generators | Patterns / Gradients | Critical Path CSS Generator | This tool extracts only the CSS needed for the above-the-fold content for the page you specify. | http://jonassebastianohlsson.com/criticalpathcssgenerator/ | ||||||||||||||||||||||
90 | CSS Generators | Forms | CSS Button Generator | A free online tool to create cross browser CSS buttons. | http://www.bestcssbuttongenerator.com/ | ||||||||||||||||||||||
91 | CSS Generators | Optimisation | CSS Compressor | Compress your CSS to increase loading speed. | http://www.cssdrive.com/index.php/main/csscompressor/ | ||||||||||||||||||||||
92 | CSS Generators | Filters | CSS Filters Playground | http://bennettfeely.com/filters/ | |||||||||||||||||||||||
93 | CSS Generators | Patterns / Gradients | CSS Gradient Animator | https://www.gradient-animator.com/ | |||||||||||||||||||||||
94 | CSS Generators | Patterns / Gradients | CSS Keyframes Animation Generator | http://cssanimate.com/ | |||||||||||||||||||||||
95 | CSS Generators | Patterns / Gradients | CSS Matic | Generators for gradients, border radius, noise texture and box shadow. | http://www.cssmatic.com/ | ||||||||||||||||||||||
96 | CSS Generators | Optimisation | CSS Optimizer | Optimise your CSS code. | http://www.cssportal.com/css-optimize/ | ||||||||||||||||||||||
97 | CSS Generators | Patterns / Gradients | CSS Ruler | Explore CSS lengths. | http://katydecorah.com/css-ruler/ | ||||||||||||||||||||||
98 | CSS Generators | Patterns / Gradients | CSS Scales | Diverging and sequential colour scales approximated as CSS gradients. | http://bennettfeely.com/scales/ | ||||||||||||||||||||||
99 | CSS Generators | Patterns / Gradients | CSS Shorthand Generator | Converts CSS properties into shorthand, making shorter and more readable stylesheets. | http://shrthnd.volume7.io/ | ||||||||||||||||||||||
100 | CSS Generators | Optimisation | CSS Shrink | Shrink your CSS. | http://cssshrink.com/ | ||||||||||||||||||||||
101 | CSS Generators | Patterns / Gradients | CSS3 Patterns Gallery | http://lea.verou.me/css3patterns/ | |||||||||||||||||||||||
102 | CSS Generators | Patterns / Gradients | CSSArrow | Allows you to create and export CSS code for a custom box with an arrow extending out from the side. | http://cssarrowplease.com/ | ||||||||||||||||||||||
103 | CSS Generators | Patterns / Gradients | Cursors | All the CSS cursors. | http://chrisnager.github.io/cursors/ | ||||||||||||||||||||||
104 | CSS Generators | Patterns / Gradients | EnjoyCSS | An advanced CSS3 generator that allows you to get rid of routine coding. | http://enjoycss.com/ | ||||||||||||||||||||||
105 | CSS Generators | Filters | Filter Blend | CSS blend modes and filters playground. | http://ilyashubin.github.io/FilterBlend/ | ||||||||||||||||||||||
106 | CSS Generators | Forms | Form Builder | http://livetools.uiparade.com/form-builder.html | |||||||||||||||||||||||
107 | CSS Generators | Grids | Grid System Generator | Create custom grid systems. | http://www.gridsystemgenerator.com/ | ||||||||||||||||||||||
108 | CSS Generators | Grids | Grid.Guide | Pixel perfect grids for the web. | http://grid.guide/ | ||||||||||||||||||||||
109 | CSS Generators | Patterns / Gradients | Mastering the :nth-child | http://nthmaster.com/ | |||||||||||||||||||||||
110 | CSS Generators | Patterns / Gradients | Patternify | CSS Pattern Generator. | http://www.patternify.com/ | ||||||||||||||||||||||
111 | CSS Generators | Calculators | PXtoEM | PX to EM conversion calculator. | http://pxtoem.com/ | ||||||||||||||||||||||
112 | CSS Generators | Patterns / Gradients | Randomized CSS3 Gradient Generator | http://paintbycode.github.io/gradient-generator/ | |||||||||||||||||||||||
113 | CSS Generators | Calculators | REM Calculator | Calculate the rem sizes you need for your CSS. | https://offroadcode.com/rem-calculator/ | ||||||||||||||||||||||
114 | CSS Generators | Optimisation | StyleStats | An evaluating tool for writing better CSS. | http://www.stylestats.org/ | ||||||||||||||||||||||
115 | CSS Generators | Optimisation | Stylify Me | Gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. | http://stylifyme.com/ | ||||||||||||||||||||||
116 | CSS Generators | Patterns / Gradients | The Sprite Generator | Get animations that work across devices, full alpha transparency and control over the timeline. | http://apps.stupid-studio.com/ | ||||||||||||||||||||||
117 | CSS Generators | Patterns / Gradients | Transfonter | A modern and simple CSS @font-face generator. | http://transfonter.org/ | ||||||||||||||||||||||
118 | CSS Generators | Patterns / Gradients | Tridiv | A web-based editor for creating 3D shapes in CSS. | http://tridiv.com/ | ||||||||||||||||||||||
119 | Email Marketing | Guides | Bulletproof background images | Use rock-solid background images in your HTML email with some help from VML and CSS. | http://backgrounds.cm/ | ||||||||||||||||||||||
120 | Email Marketing | Guides | Bulletproof email buttons | Design gorgeous buttons using progressively enhanced VML and CSS. | https://buttons.cm/ | ||||||||||||||||||||||
121 | Email Marketing | Guides | Campaign Monitor CSS Support Guide for Email Clients | https://www.campaignmonitor.com/css/ | |||||||||||||||||||||||
122 | Email Marketing | CSS Inliners | CSS inliner | A tool that does the hard work of writing inline CSS. | http://inliner.cm/ | ||||||||||||||||||||||
123 | Email Marketing | Guides | Email Client Support for Interactive and Dynamic CSS | http://freshinbox.com/resources/ | |||||||||||||||||||||||
124 | Email Marketing | Guides | EmailComb | Remove unused CSS from email templates. | https://emailcomb.com/ | ||||||||||||||||||||||
125 | Email Marketing | Guides | Gallery of Common Outlook Rendering Issues | http://freshinbox.com/blog/gallery-of-outlook-rendering-issues/ | |||||||||||||||||||||||
126 | Email Marketing | Guides | Image Carousel for Email | A tool to create an image carousel that will render in many major email clients. | http://freshinbox.com/resources/tools/carousel/ | ||||||||||||||||||||||
127 | Email Marketing | Guides | Inkbrush | A web based email design and coding tool. | https://www.inkbrush.com/ | ||||||||||||||||||||||
128 | Email Marketing | Guides | MailChimp Email Design Guide | http://mailchimp.com/resources/email-design-guide/ | |||||||||||||||||||||||
129 | Email Marketing | Guides | mjml | A markup language designed to reduce the pain of coding a responsive email. | https://mjml.io/ | ||||||||||||||||||||||
130 | Email Marketing | Guides | Outline Mail | An email framework with a bunch of fully trusted responsive components. | http://outlinemail.co.uk/ | ||||||||||||||||||||||
131 | Email Marketing | CSS Inliners | Premailer | Preflight for HTML e-mail. Makes CSS inline, converts links and warns about unsupported code. | http://premailer.dialect.ca/ | ||||||||||||||||||||||
132 | Email Marketing | Guides | Responsive Email Patterns | A collection of patterns & modules for responsive email. | http://responsiveemailpatterns.com/ | ||||||||||||||||||||||
133 | Google Chrome Extensions | Accessibility Developer Tools | Accessibility audit and element properties. | https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en | |||||||||||||||||||||||
134 | Google Chrome Extensions | Alix | Allows you to lint your HTML for Accessibility issues simply by applying a stylesheet that makes use of advanced CSS selectors. | https://chrome.google.com/webstore/detail/alix-for-chrome/aepmadgjacfjcneccddiccnkbpimobge | |||||||||||||||||||||||
135 | Google Chrome Extensions | Appspector | Detect web applications and javascript libraries run on browsing website. | ||||||||||||||||||||||||
136 | Google Chrome Extensions | Awesome Screenshot | Screen capture for all or part of any web page. | https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en | |||||||||||||||||||||||
137 | Google Chrome Extensions | Built With | Find out the technology behind any website. | https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=en | |||||||||||||||||||||||
138 | Google Chrome Extensions | Bukket | Screen capture and record animated GIFs all within the browser. | http://bukketapp.com/ | |||||||||||||||||||||||
139 | Google Chrome Extensions | Chrome Developer Tools | https://chrome.google.com/webstore/search/devtools?_category=extensions | ||||||||||||||||||||||||
140 | Google Chrome Extensions | Clear Cache | Clear your cache and browsing data with a single click of a button. | https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn | |||||||||||||||||||||||
141 | Google Chrome Extensions | ColorZilla | Includes a colour picker, eye dropper, gradient generator and other advanced colour tools (available for Firefox too). | http://www.colorzilla.com/chrome/ | |||||||||||||||||||||||
142 | Google Chrome Extensions | Context Menu Search | Use the right-click menu to search for selected text in different search engines. | https://chrome.google.com/webstore/detail/context-menu-search/ocpcmghnefmdhljkoiapafejjohldoga | |||||||||||||||||||||||
143 | Google Chrome Extensions | CSS Dig | Collect and analyse CSS. | https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco | |||||||||||||||||||||||
144 | Google Chrome Extensions | CSS Shapes Editor | Interactive editor for CSS Shapes. | https://chrome.google.com/webstore/detail/css-shapes-editor/nenndldnbcncjmeacmnondmkkfedmgmp | |||||||||||||||||||||||
145 | Google Chrome Extensions | CSSPeeper | A smart CSS viewer tailored for Designers. | https://csspeeper.com/ | |||||||||||||||||||||||
146 | Google Chrome Extensions | DevTools Author | A selection of author settings for Chrome Developer Tools. | https://chrome.google.com/webstore/detail/devtools-author/egfhcfdfnajldliefpdoaojgahefjhhi | |||||||||||||||||||||||
147 | Google Chrome Extensions | DevTools Snippets | A collection of helpful tools to use inside of browser devtools. | http://bgrins.github.io/devtools-snippets/ | |||||||||||||||||||||||
148 | Google Chrome Extensions | Dewey | Better bookmarks. | http://deweyapp.io/ | |||||||||||||||||||||||
149 | Google Chrome Extensions | DiagnostiCSS | Helps visually detect any potentially invalid, inaccesible or erroneous HTML markup. | https://chrome.google.com/webstore/detail/diagnosticss/ekpmkpffmmchjaopplcmdadmdhibpmdi?hl=en | |||||||||||||||||||||||
150 | Google Chrome Extensions | Emmet Re:View | Shows views with all responsive media-query breakpoints for current page. | https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp?hl=en | |||||||||||||||||||||||
151 | Google Chrome Extensions | Form Filler | Fills all form inputs in a page with dummy data. | https://chrome.google.com/webstore/detail/form-filler/bnjjngeaknajbdcgpfkgnonkmififhfo?hl=en | |||||||||||||||||||||||
152 | Google Chrome Extensions | Ghostery | See who is tracking your web browsing. | https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij | |||||||||||||||||||||||
153 | Google Chrome Extensions | Go F#cking Work | Redirect unproductive sites to motivational messages. | https://chrome.google.com/webstore/detail/go-fucking-work/hibmkkpfegfiinilnlabbfnjcopdiiig?hl=en | |||||||||||||||||||||||
154 | Google Chrome Extensions | Image Size Info | Inserts an option in the image context menu to view image width, height and file size. | https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf?hl=en | |||||||||||||||||||||||
155 | Google Chrome Extensions | Image Tool | Helps you easily read and understand design specs. | https://chrome.google.com/webstore/detail/image-tool/bbahpklmeonhcijijenbnjecpdokmaeg?hl=en | |||||||||||||||||||||||
156 | Google Chrome Extensions | JSONView | Validate and view JSON documents. | https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc | |||||||||||||||||||||||
157 | Google Chrome Extensions | Linkclump | Lets you open, copy or bookmark multiple links at the same time. | https://chrome.google.com/webstore/detail/linkclump/lfpjkncokllnfokkgpkobnkbkmelfefj?hl=en | |||||||||||||||||||||||
158 | Google Chrome Extensions | Marmoset | Create code snapshots. | https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb?hl=en | |||||||||||||||||||||||
159 | Google Chrome Extensions | Neo Vision | Syntax-highlights source code files with customisable themes. | https://chrome.google.com/webstore/detail/neo-vision/lcckpjpfpmnojpkhlnekhclcfegepaij?hl=en-US | |||||||||||||||||||||||
160 | Google Chrome Extensions | OneTab | Save up to 95% memory and reduce tab clutter. | https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=en | |||||||||||||||||||||||
161 | Google Chrome Extensions | Page Ruler | Draw a rule to get pixel dimensions and positioning, and measure elements on any web page. | https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=en | |||||||||||||||||||||||
162 | Google Chrome Extensions | Palette Creator | Create a colour palette from any image. | https://chrome.google.com/webstore/detail/palette-creator/oolpphfmdmjbojolagcbgdemojhcnlod?hl=en | |||||||||||||||||||||||
163 | Google Chrome Extensions | Palette Ninja | An online tool that allows you to create harmonious color schemes. | https://chrome.google.com/webstore/detail/palette-ninja/aiciopeddnenljjhfhpaonfohefjblnk?hl=en | |||||||||||||||||||||||
164 | Google Chrome Extensions | Panda | Daily news and inspiration for designers, developers & entrepreneurs. | http://www.usepanda.com/ | |||||||||||||||||||||||
165 | Google Chrome Extensions | PerfectPixel | Develop websites with per-pixel accuracy. | http://www.welldonecode.com/perfectpixel/ | |||||||||||||||||||||||
166 | Google Chrome Extensions | Performance-Analyser | Get insight into the performance of the website in the current tab - sort of a mini live version of WebPageTest. | https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf | |||||||||||||||||||||||
167 | Google Chrome Extensions | Pesticide | Inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page. | https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh | |||||||||||||||||||||||
168 | Google Chrome Extensions | PHP Console | Display PHP errors & var dumps in Google Chrome console and notification popups, execute PHP code remotely. | https://chrome.google.com/webstore/detail/php-console/nfhmhhlpfleoednkpnnnkolmclajemef | |||||||||||||||||||||||
169 | Google Chrome Extensions | Play | Listen to any Medium article. | https://play.ht/ | |||||||||||||||||||||||
170 | Google Chrome Extensions | Portent’s SEO Page Review | Review common SEO elements and issues on the page. | https://chrome.google.com/webstore/detail/portents-seo-page-review/babgchcegnkbiojmdpnoilficladccfm?hl=en-US | |||||||||||||||||||||||
171 | Google Chrome Extensions | React Developer Tools | Adds React debugging tools to the Chrome Developer Tools. | https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi | |||||||||||||||||||||||
172 | Google Chrome Extensions | Responsive Web Design Tester | Quickly preview your responsive website designs at the dimensions they will be seen on popular mobile devices. | https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en | |||||||||||||||||||||||
173 | Google Chrome Extensions | Search Overflow | Search Stack Overflow answers right from DevTools. | https://chrome.google.com/webstore/detail/search-overflow/mnjjnlpfohojhebjajehppdpepmhidnc | |||||||||||||||||||||||
174 | Google Chrome Extensions | Session Buddy | A session manager for your browser. | https://chrome.google.com/webstore/detail/session-buddy/edacconmaakjimmfgnblocblbcdcpbko?hl=en | |||||||||||||||||||||||
175 | Google Chrome Extensions | Show me the React | Highlights React components on the page. | https://github.com/cymen/show-me-the-react | |||||||||||||||||||||||
176 | Google Chrome Extensions | simple-debug.css | Debug your layouts. | https://chrome.google.com/webstore/detail/simple-debugcss/jlkgkebpphmaiemciejnmgccejccnpha | |||||||||||||||||||||||
177 | Google Chrome Extensions | SnappySnippet | Easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click. | https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil | |||||||||||||||||||||||
178 | Google Chrome Extensions | Toby | Manage and organise tabs and easily find content. | https://www.gettoby.com/ | |||||||||||||||||||||||
179 | Google Chrome Extensions | User-Agent Switcher | Switches User-Agent strings to mimic, spoof or fake other browsers or bots. | https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf | |||||||||||||||||||||||
180 | Google Chrome Extensions | Web Developer | Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox. | http://chrispederick.com/work/web-developer/ | |||||||||||||||||||||||
181 | Google Chrome Extensions | Web Developer Checklist | Analyse any web page for violation of best practices. | https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp | |||||||||||||||||||||||
182 | Google Chrome Extensions | Wildfire | Record browser actions then replay immediately. | https://chrome.google.com/webstore/detail/wildfire/djhgeeodemlfdpmcccdekfalbhllcoim | |||||||||||||||||||||||
183 | Google Chrome Extensions | Window Resizer | Resize browser window to emulate various screen resolutions. | https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh | |||||||||||||||||||||||
184 | Gulp & Grunt | Grulp | Moving from Grunt to Gulp (or vice-versa)? Get the list of ready-to-use grunt/gulp plugins for your next project. | https://github.com/pankajparashar/grulp | |||||||||||||||||||||||
185 | Gulp & Grunt | Grunt Devtools | Extends the Developer Tools, adding tools for Grunt. | https://chrome.google.com/webstore/detail/grunt-devtools/fbiodiodggnlakggeeckkjccjhhjndnb | |||||||||||||||||||||||
186 | Gulp & Grunt | Grunt Email Workflow | A Grunt workflow for designing and testing responsive HTML email templates with SCSS. | https://github.com/leemunroe/grunt-email-workflow | |||||||||||||||||||||||
187 | Gulp & Grunt | Gulp Plugin Registry | http://gulpjs.com/plugins/ | ||||||||||||||||||||||||
188 | Gulp & Grunt | Gulp Recipes | https://github.com/gulpjs/gulp/tree/master/docs/recipes | ||||||||||||||||||||||||
189 | Gulp & Grunt | Gulpsetup | A simple starting point for using GulpJS. | http://urre.github.io/gulpsetup/ | |||||||||||||||||||||||
190 | Gulp & Grunt | Offroadcode Starter Kit | https://github.com/Offroadcode/Offroadcode-Starter-Kit | ||||||||||||||||||||||||
191 | Icons | Fontastic | Icon font generator. | http://fontastic.me/ | |||||||||||||||||||||||
192 | Icons | Fontello | A tool to build custom fonts with icons. | http://fontello.com/ | |||||||||||||||||||||||
193 | Icons | GlyphSearch | Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, Octicons and Foundation. | http://glyphsearch.com/ | |||||||||||||||||||||||
194 | Icons | IcoMoon | Pixel perfect icon solutions. | https://icomoon.io/ | |||||||||||||||||||||||
195 | Icons | iconmonstr | Free simple icons. | http://iconmonstr.com/ | |||||||||||||||||||||||
196 | Icons | Iconogen | Favicon, Windows 8 Tiles, Apple Touch Icon and iOS7 Icon Generator. | http://iconogen.com/ | |||||||||||||||||||||||
197 | Icons | Nucleo | A library of 2000 responsive icons and a web application to manage and customize them. | https://nucleoapp.com/ | |||||||||||||||||||||||
198 | Inspiration | AGDA Design Awards | https://awards.agda.com.au/finalist/3/10006 | ||||||||||||||||||||||||
199 | Inspiration | Best About Pages | http://bestaboutpages.com/ | ||||||||||||||||||||||||
200 | Inspiration | codedoodl.es | Creative code sketches. | http://codedoodl.es/ | |||||||||||||||||||||||
201 | Inspiration | Inspiring Online | Cool creative things online. | http://inspiring.online/ | |||||||||||||||||||||||
202 | Inspiration | Media Queries | A collection of inspirational websites using media queries and responsive web design. | http://mediaqueri.es/ | |||||||||||||||||||||||
203 | Inspiration | Virgin America | Introduction to new website. | https://www.virginamerica.com/vxnewlook/ | |||||||||||||||||||||||
204 | Inspiration | Ways We Work | Conversations with people doing the work they love. | http://wayswework.io/ | |||||||||||||||||||||||
205 | JavaScript | Adapt.js | A JavaScript file that determines which CSS file to load before the browser renders a page. | http://adapt.960.gs/ | |||||||||||||||||||||||
206 | JavaScript | alertify.js | Browser dialogs never looked so good. | http://fabien-d.github.io/alertify.js/ | |||||||||||||||||||||||
207 | JavaScript | anime.js | A flexible JavaScript animation library. | http://anime-js.com/ | |||||||||||||||||||||||
208 | JavaScript | Animsition | A jQuery plugin for CSS animated page transitions. | http://git.blivesta.com/animsition/ | |||||||||||||||||||||||
209 | JavaScript | DataTables | Add advanced interaction controls to any HTML table. | https://www.datatables.net/ | |||||||||||||||||||||||
210 | JavaScript | enquire.js | Media queries in JavaScript. | http://wicky.nillia.ms/enquire.js/ | |||||||||||||||||||||||
211 | JavaScript | Every JavaScript project you should be looking into | http://www.javascriptoo.com/ | ||||||||||||||||||||||||
212 | JavaScript | FitText | A plugin for inflating web type. | http://fittextjs.com/ | |||||||||||||||||||||||
213 | JavaScript | FitVids.JS | jQuery plugin for fluid width video embeds. | http://fitvidsjs.com/ | |||||||||||||||||||||||
214 | JavaScript | FlowType.JS | Font size based on element width. | http://simplefocus.com/flowtype/ | |||||||||||||||||||||||
215 | JavaScript | FormatJS | Internationalize your web apps on the client & server. | https://formatjs.io/ | |||||||||||||||||||||||
216 | JavaScript | Formvalidation.io | Validate your form fields. | http://formvalidation.io/ | |||||||||||||||||||||||
217 | JavaScript | Head.JS | A small library for responsive design, feature detection & resource loading. | http://headjs.com/ | |||||||||||||||||||||||
218 | JavaScript | Intention.js | A light-weight and clear way to dynamically restructure HTML in a responsive manner. | http://intentionjs.com/ | |||||||||||||||||||||||
219 | JavaScript | JavaScripting.com | A collection of the world’s best client-side JavaScript libraries. | https://www.javascripting.com/ | |||||||||||||||||||||||
220 | JavaScript | JCF (JavaScript Custom Forms) | This library allows crossbrowser customization of form elements using CSS. | https://www.psd2html.com/js-custom-forms/ | |||||||||||||||||||||||
221 | JavaScript | jQuery Credit Card Validator | http://jquerycreditcardvalidator.com/ | ||||||||||||||||||||||||
222 | JavaScript | jQuery Rain | Another repository of jQuery plugins. | http://www.jqueryrain.com/ | |||||||||||||||||||||||
223 | JavaScript | jQWidgets | A feature complete framework with professional touch-enabled jQuery widgets. | http://www.jqwidgets.com/ | |||||||||||||||||||||||
224 | JavaScript | JSLint | The JavaScript code quality tool. | http://jslint.com/ | |||||||||||||||||||||||
225 | JavaScript | Microjs | Micro-frameworks and Micro-libraries for fun and profit. | http://microjs.com/ | |||||||||||||||||||||||
226 | JavaScript | Paper.js | An open source vector graphics scripting framework that runs on top of the HTML5 Canvas. | http://paperjs.org/ | |||||||||||||||||||||||
227 | JavaScript | plainJS | Vanilla JavaScript for building web applications. | https://plainjs.com/ | |||||||||||||||||||||||
228 | JavaScript | Polyfill.io | Just the polyfills you need for your site, tailored to each browser. | https://cdn.polyfill.io/v2/docs/ | |||||||||||||||||||||||
229 | JavaScript | Readmore.js | Collapse and expand long blocks of text with “Read more” and “Close” links. | http://jedfoster.com/Readmore.js/ | |||||||||||||||||||||||
230 | JavaScript | Reframe.js | A javascript plugin that makes unresponsive elements responsive. | https://dollarshaveclub.github.io/reframe.js/ | |||||||||||||||||||||||
231 | JavaScript | Response JS | An experimental jQuery plugin that can dynamically swap content based on breakpoints and data attributes. | http://responsejs.com/ | |||||||||||||||||||||||
232 | JavaScript | Responsify.js | Helps to make images truly responsive. | http://responsifyjs.space/ | |||||||||||||||||||||||
233 | JavaScript | Restive.js | A jQuery plugin that helps you to add features to your website to enable it to respond and adapt. | http://restivejs.com/ | |||||||||||||||||||||||
234 | JavaScript | ScrollWatch | Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position. | https://edull24.github.io/ScrollWatch/ | |||||||||||||||||||||||
235 | JavaScript | simpleWeather | Display current weather data for any location. | http://simpleweatherjs.com/ | |||||||||||||||||||||||
236 | JavaScript | snabbt.js | A minimalistic animation library. | http://daniel-lundin.github.io/snabbt.js/ | |||||||||||||||||||||||
237 | JavaScript | Snap.svg | The JavaScript SVG library for the modern web. | http://snapsvg.io/ | |||||||||||||||||||||||
238 | JavaScript | The Ultimate jQuery List | A daily updated list of plugins & examples for jQuery. | http://jquerylist.com/ | |||||||||||||||||||||||
239 | JavaScript | TodoMVC | Helping you select an MV* framework. | http://todomvc.com/ | |||||||||||||||||||||||
240 | JavaScript | Trunk-js | Hide top navigation into a navigation drawer on tablet and mobile phones. | http://www.roblukedesign.com/trunk/trunk.html | |||||||||||||||||||||||
241 | JavaScript | Unheap | A tidy repository of jQuery plugins. | http://www.unheap.com/ | |||||||||||||||||||||||
242 | JavaScript | Vanilla List | The Vanilla Javascript Repository. | http://www.vanillalist.com/ | |||||||||||||||||||||||
243 | JavaScript | Vue.js | The progressive JavaScript framework. | http://vuejs.org/ | |||||||||||||||||||||||
244 | JavaScript | Weight Of It | Compare JavaScript libraries by weight. | http://weightof.it/ | |||||||||||||||||||||||
245 | JavaScript | WOW.js | Reveal animations when you scroll. | http://mynameismatthieu.com/WOW/ | |||||||||||||||||||||||
246 | JavaScript | You might not need jQuery plugins | http://youmightnotneedjqueryplugins.com/ | ||||||||||||||||||||||||
247 | MAC Software | Atom | A hackable text editor. | https://atom.io/ | |||||||||||||||||||||||
248 | MAC Software | Firefox Developer Edition | https://www.mozilla.org/en-US/firefox/developer/ | ||||||||||||||||||||||||
249 | MAC Software | GitHub Desktop | Simple collaboration from your desktop. | https://desktop.github.com/ | |||||||||||||||||||||||
250 | MAC Software | Google Chrome Canary | The newest of the new Chrome features. | https://www.google.com.au/chrome/browser/canary.html | |||||||||||||||||||||||
251 | MAC Software | import.io | Instantly turn web pages into data. | https://import.io/ | |||||||||||||||||||||||
252 | MAC Software | MockFlow | Online wireframe tool for software and websites. | https://www.mockflow.com/ | |||||||||||||||||||||||
253 | MAC Software | Mou | A Markdown editor for developers. | http://25.io/mou/ | |||||||||||||||||||||||
254 | MAC Software | NameChanger | Rename a list of files quickly and easily. | https://mrrsoftware.com/namechanger/ | |||||||||||||||||||||||
255 | MAC Software | Opera Mobile Emulator | Mobile debugging on your desktop. | http://www.opera.com/developer/mobile-emulator | |||||||||||||||||||||||
256 | MAC Software | Origami | A free tool for designing modern user interfaces. | ||||||||||||||||||||||||
257 | MAC Software | Sip | A simple colour picker that instantly samples and encodes any colour on your screen. | https://itunes.apple.com/au/app/sip/id507257563?mt=12 | |||||||||||||||||||||||
258 | MAC Software | Smaller | An HTML, CSS and JavaScript compressor which also has the ability to combine several files into one. | http://25.io/smaller/ | |||||||||||||||||||||||
259 | MAC Software | VirtualBox | A general-purpose full virtualizer for x86 hardware. Also see IE 7 8 9 10 11 Testing VM’s. | ||||||||||||||||||||||||
260 | Performance | GTmetrix | Website speed and performance optimisation. | https://gtmetrix.com/ | |||||||||||||||||||||||
261 | Performance | intoDNS | Checks the health and configuration and provides a DNS report and mail server reports. | http://www.intodns.com/ | |||||||||||||||||||||||
262 | Performance | Loader | A free load testing service that allows you to stress test your web-apps & apis with thousands of concurrent connections. | https://loader.io/ | |||||||||||||||||||||||
263 | Performance | netmonitor | A Chrome extension which shows background network activity of web pages after they are loaded. | https://chrome.google.com/webstore/detail/netmonitor/jekcpjegemgakiacfgiplacomhabclce | |||||||||||||||||||||||
264 | Performance | PageSpeed Insights | Make your web pages fast on all devices. | https://developers.google.com/speed/pagespeed/insights/ | |||||||||||||||||||||||
265 | Performance | PageSpeed Insights Rules | https://developers.google.com/speed/docs/insights/rules | ||||||||||||||||||||||||
266 | Performance | Performance Budget Builder | Lets you lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template. | http://bradfrost.com/blog/post/performance-budget-builder/ | |||||||||||||||||||||||
267 | Performance | Performance Budget Calculator | Calculate your website performance budget. | http://www.performancebudget.io/ | |||||||||||||||||||||||
268 | Performance | Pingdom Website speed test | Enter a URL to test the load time of that page, analyse it and find bottlenecks. | http://tools.pingdom.com/fpt/ | |||||||||||||||||||||||
269 | Performance | PNG Crush | http://pngcrush.com/ | ||||||||||||||||||||||||
270 | Performance | Speedtest | Broadband testing and analysis tools. | http://www.speedtest.net/ | |||||||||||||||||||||||
271 | Performance | testmy.net | Website independent speed test (note that the measurements are to/from the TestMyNet Server). | http://testmy.net/country/au | |||||||||||||||||||||||
272 | Performance | WebPagetest | Test a website’s performance. | http://www.webpagetest.org/ | |||||||||||||||||||||||
273 | Performance | YSlow | Analyse web pages and why they are slow based on Yahoo’s rules for high performance web sites. | http://yslow.org/ | |||||||||||||||||||||||
274 | Photoshop | Compressor.io | Compress and optimise your images. | https://compressor.io/ | |||||||||||||||||||||||
275 | Photoshop | Craft | A suite of plugins to let you design with real data in mind. | https://www.invisionapp.com/craft | |||||||||||||||||||||||
276 | Photoshop | Export your vector layers from PS to SVG | http://hackingui.com/design/export-photoshop-layer-to-svg/ | ||||||||||||||||||||||||
277 | Photoshop | Fontea | 800 Google Fonts in your Photoshop. | https://fontea.madebysource.com/ | |||||||||||||||||||||||
278 | Photoshop | Ghoster | Helpful if you have a greyscale picture you want to transform to transparent. | http://maxwellito.github.io/ghoster/ | |||||||||||||||||||||||
279 | Photoshop | Oven | Bake your Photoshop layers. | http://oven.chrometaphore.com/ | |||||||||||||||||||||||
280 | Photoshop | PluginMate | Useful tools for designers. | https://pluginmate.com/ | |||||||||||||||||||||||
281 | Photoshop | PSD Repo | Free PSDs available for download. | http://psdrepo.com/ | |||||||||||||||||||||||
282 | Photoshop | Psddd | Beautiful Dribble freebies. | http://psddd.co/ | |||||||||||||||||||||||
283 | Photoshop | Skala Preview | Sends lossless, colour accurate image previews to any iOS or Android device. | http://bjango.com/mac/skalapreview/ | |||||||||||||||||||||||
284 | Photoshop | Style Tiles | A visual web design process. | http://styletil.es/ | |||||||||||||||||||||||
285 | Photoshop | Subtle Patterns | Free textures for your next web project. | http://subtlepatterns.com/ | |||||||||||||||||||||||
286 | Photoshop | SVG Layers | Import SVG files as editable vector layers. | http://svglayers.com/ | |||||||||||||||||||||||
287 | Photoshop | UberPlugins | Photoshop Extensions, Tools & Resources. | http://uberplugins.cc/ | |||||||||||||||||||||||
288 | Photoshop | Unsplash It | Beautiful placeholder images. | https://unsplash.it/ | |||||||||||||||||||||||
289 | References | Browserhacks | An extensive list of browser specific CSS and JavaScript hacks. | http://browserhacks.com/ | |||||||||||||||||||||||
290 | References | Code Beautify | Free online tools to beautify, validate, minify, analyse and convert JSON, XML, JavaScript, CSS & HTML. | http://codebeautify.org/ | |||||||||||||||||||||||
291 | References | Cross Browser Handbook Knowledgebase | http://www.crossbrowserbook.com/Knowledge | ||||||||||||||||||||||||
292 | References | DPI love | Easily find the DPI/PPI of any screen. | http://dpi.lv/ | |||||||||||||||||||||||
293 | References | FireFox Site Compatibility | Browse all documents related to Firefox site compatibility. | https://www.fxsitecompat.com/en-US/docs/ | |||||||||||||||||||||||
294 | References | getAwesomeness() | Retrieve all the amazing awesomeness from Github. | http://getawesomeness.com/ | |||||||||||||||||||||||
295 | References | Gethtml | All the HTML elements. | https://gethtml.at/ | |||||||||||||||||||||||
296 | References | Google Advanced Search Operators Tips and Tricks | http://supple.stfi.re/tools/google-advanced-search-operators/?sf=oernal | ||||||||||||||||||||||||
297 | References | HTML Reference | A free guide to HTML. | http://htmlreference.io/ | |||||||||||||||||||||||
298 | References | HTML5 Please | Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them. | http://html5please.com/ | |||||||||||||||||||||||
299 | References | Is It Maintained? | Check the activity of open source projects. | http://isitmaintained.com/ | |||||||||||||||||||||||
300 | References | Online regex tester and debugger | https://regex101.com/ | ||||||||||||||||||||||||
301 | References | Public APIs | A curated list of APIs from round the web. | https://github.com/abhishekbanthia/Public-APIs | |||||||||||||||||||||||
302 | References | searchcode | Search over 20 billion lines of code. | https://searchcode.com/ | |||||||||||||||||||||||
303 | References | The Grid System | The ultimate resource in grid systems. | http://www.thegridsystem.org/ | |||||||||||||||||||||||
304 | References | What Web Can Do Today | An overview of the device integration HTML5 APIs. | https://whatwebcando.today/ | |||||||||||||||||||||||
305 | Responsive | Adaptive Images | Detect your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. | http://adaptive-images.com/ | |||||||||||||||||||||||
306 | Responsive | Am I Responsive | Show off how responsive design looks across different browsers easily with this 4 in 1 viewport tool. See how your site looks on desktop, laptop, iPad & iPhone. | http://ami.responsivedesign.is/ | |||||||||||||||||||||||
307 | Responsive | Designmodo Responsive Web Design Test Tool | Test while you build your responsive design. | http://designmodo.com/responsive-test/ | |||||||||||||||||||||||
308 | Responsive | deviceponsive | Show a quick preview of your website’s responsive to different device resolutions like Macbook, iPad, or iPhone. share this preview with your client. | http://deviceponsive.com/ | |||||||||||||||||||||||
309 | Responsive | Embed Responsively | Helps build responsive embed codes for embedding rich third-party media (i.e. YouTube, Vimeo) into responsive web pages. | http://embedresponsively.com/ | |||||||||||||||||||||||
310 | Responsive | Flexible Math | A quick way to get pixel widths in percentages. | http://responsv.com/flexible-math/ | |||||||||||||||||||||||
311 | Responsive | Gridpak | A responsive grid generator. | http://gridpak.com/ | |||||||||||||||||||||||
312 | Responsive | Modularscale | Calculate, visualize, and learn about modular scales. | http://www.modularscale.com/ | |||||||||||||||||||||||
313 | Responsive | mydevice.io | Common smartphones and tablets devices values. | http://mydevice.io/devices/ | |||||||||||||||||||||||
314 | Responsive | NavNav | A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web. | http://navnav.co/ | |||||||||||||||||||||||
315 | Responsive | Responsinator | Designed to test responsive websites on different device resolutions. | https://www.responsinator.com/ | |||||||||||||||||||||||
316 | Responsive | Responsive Image Breakpoints Generator | Easily generate the optimal responsive image dimensions. | http://www.responsivebreakpoints.com/ | |||||||||||||||||||||||
317 | Responsive | Responsive Image Hotspots Creator | http://www.inabrains.com/tooltip/image-hotspot-creator.html | ||||||||||||||||||||||||
318 | Responsive | Responsive Navigation | Popular methods of dealing with responsive navigation. | http://responsivenavigation.net/ | |||||||||||||||||||||||
319 | Responsive | Responsive Patterns | A series of patterns that are useful when putting together your website designs. | https://responsivedesign.is/patterns | |||||||||||||||||||||||
320 | Responsive | Responsive Web Page Layouts | Layout your pages in minutes. | https://www.entomic.com/responsivecss | |||||||||||||||||||||||
321 | Responsive | Responsive.is | Display and present responsive web designs. | http://responsive.is/typecast.com | |||||||||||||||||||||||
322 | Responsive | responsivepx | Find that tricky breakpoint. | http://responsivepx.com/ | |||||||||||||||||||||||
323 | Responsive | Responsiver | Responsive design testing. | ||||||||||||||||||||||||
324 | Responsive | Screen Sizes | Quickly find the screen specifications of the most popular devices and monitors currently on the market. | http://screensiz.es/ | |||||||||||||||||||||||
325 | Responsive | Screenfly | Test your website at different screen resolutions. | http://quirktools.com/screenfly/ | |||||||||||||||||||||||
326 | Responsive | Sizzy | Preview changes on multiple devices instantly. | http://sizzy.co/ | |||||||||||||||||||||||
327 | Responsive | The W3C Mobile Checker | https://validator.w3.org/mobile/ | ||||||||||||||||||||||||
328 | Responsive | Viewport Resizer | Build your own bookmarklet to test any website’s responsiveness. | http://lab.maltewassermann.com/viewport-resizer/ | |||||||||||||||||||||||
329 | Sass | A Visual Guide to Sass & Compass Color Functions | http://jackiebalzer.com/color | ||||||||||||||||||||||||
330 | Sass | Atomic Docs | A style guide generator and component manager. | http://atomicdocs.io/ | |||||||||||||||||||||||
331 | Sass | Mixins | Bourbon | A lightweight mixin library for Sass. | http://bourbon.io/ | ||||||||||||||||||||||
332 | Sass | Buttons | A CSS button library built with SASS & Compass. | http://unicorn-ui.com/buttons/builder/ | |||||||||||||||||||||||
333 | Sass | css2sass | Convert CSS Snippets to SASS code. | https://css2sass.herokuapp.com/ | |||||||||||||||||||||||
334 | Sass | css2scss | This converter takes (valid) CSS and generates compass (scss) code, SASS or cleaned css for it. | http://sebastianpontow.de/css2compass/ | |||||||||||||||||||||||
335 | Sass | Koala | A GUI application for Less, Sass, Compass and CoffeeScript compilation. | http://koala-app.com/ | |||||||||||||||||||||||
336 | Sass | Mixins | Media Queries with superpowers | Compose media queries in an elegant way. | https://github.com/sass-mq/sass-mq | ||||||||||||||||||||||
337 | Sass | Sass Compatibility | Reporting incompatibilities between different Sass engines. | http://sass-compatibility.github.io/ | |||||||||||||||||||||||
338 | Sass | Sass Guidelines | An opinionated style guide for writing maintainable and scalable Sass. | http://sass-guidelin.es/ | |||||||||||||||||||||||
339 | Sass | Sass Reference | SitePoint Sass Reference. | http://www.sitepoint.com/sass-reference/ | |||||||||||||||||||||||
340 | Sass | Sass.js | An online Playground for Sass.js. | http://sass.js.org/ | |||||||||||||||||||||||
341 | Sass | SassDoc | A documentation system. | http://sassdoc.com/ | |||||||||||||||||||||||
342 | Sass | sassify | A configurable CSS to SCSS converter. | http://sassify.io/ | |||||||||||||||||||||||
343 | Sass | Sassisfaction | A place to share Sass resources. | https://sassisfaction.com/ | |||||||||||||||||||||||
344 | Sass | SassMe | Visualise SASS color functions without compiling. | http://sassme.arc90.com/ | |||||||||||||||||||||||
345 | Sass | SassMeister | A playground for Sass, Compass, and LibSass. Add some Sass and SassMeister will show you the rendered CSS. | http://sassmeister.com/ | |||||||||||||||||||||||
346 | Sass | Sassquatch | Live Sass previews for OS X. | http://sassquatch.thoughtbot.com/ | |||||||||||||||||||||||
347 | Sass | Scout-App | Sass without hassle. | http://scout-app.io/ | |||||||||||||||||||||||
348 | Style Guides | Bits | The front-end component library for 24 ways. | http://bits.24ways.org/ | |||||||||||||||||||||||
349 | Style Guides | Buffer | https://buffer.com/style-guide | ||||||||||||||||||||||||
350 | Style Guides | BuzzFeed | http://solid.buzzfeed.com/ | ||||||||||||||||||||||||
351 | Style Guides | Code For America | http://style.codeforamerica.org/ | ||||||||||||||||||||||||
352 | Style Guides | Crew’s App Style Guide | https://crew.co/app-style-guide | ||||||||||||||||||||||||
353 | Style Guides | Disqus | https://disqus.com/pages/style-guide/ | ||||||||||||||||||||||||
354 | Style Guides | Envato Market Styleguide | https://market.styleguide.envato.com/ | ||||||||||||||||||||||||
355 | Style Guides | Lonely Planet | http://rizzo.lonelyplanet.com/styleguide/design-elements/colours | ||||||||||||||||||||||||
356 | Style Guides | MailChimp UX | http://ux.mailchimp.com/patterns | ||||||||||||||||||||||||
357 | Style Guides | Material UI | http://material-ui.com/ | ||||||||||||||||||||||||
358 | Style Guides | Mozilla Sandstone | https://www.mozilla.org/en-US/styleguide/websites/sandstone/ | ||||||||||||||||||||||||
359 | Style Guides | Poor Man’s Styleguide | A quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS. | http://www.poormansstyleguide.com/ | |||||||||||||||||||||||
360 | Style Guides | Primer | http://primercss.io/ | ||||||||||||||||||||||||
361 | Style Guides | Pure | http://purecss.io/ | ||||||||||||||||||||||||
362 | Style Guides | Starbuck’s Style Guide | https://www.starbucks.com/static/reference/styleguide/ | ||||||||||||||||||||||||
363 | Style Guides | Uber Brand Guide | http://brand.uber.com/typography/hierarchy/ | ||||||||||||||||||||||||
364 | Style Guides | Yelp | http://www.yelp.com/styleguide | ||||||||||||||||||||||||
365 | Testing | Browsersync | Synchronised browser testing. | http://www.browsersync.io/ | |||||||||||||||||||||||
366 | Testing | Can I use | Tells you which browsers support what and from which version. | http://caniuse.com/ | |||||||||||||||||||||||
367 | Testing | Clean Code Linters | https://github.com/showcases/clean-code-linters | ||||||||||||||||||||||||
368 | Testing | Detergent.io | Clean and convert the text from the client brief (PSD, Sketch, Illustrator, Word, Excel, etc), so you can paste it straight into the HTML code. | https://detergent.io/ | |||||||||||||||||||||||
369 | Testing | Dirty Markup | Tidy up your HTML, CSS, and JavaScript code. | http://www.dirtymarkup.com/ | |||||||||||||||||||||||
370 | Testing | HTML5 Please | Look up HTML5 & CSS3 features, know if they are ready to use, and if so find out how you should use them. | http://html5please.com/ | |||||||||||||||||||||||
371 | Testing | NTH-TEST | A quick and easy way to test your nth-child and nth-of-type. | http://nth-test.com/ | |||||||||||||||||||||||
372 | Testing | Paragrabbr | A tool for prototyping the paragraph content of your website. | http://paragrabbr.heydonworks.com/ | |||||||||||||||||||||||
373 | Testing | Peek | See and hear a 5-minute video of a real person using your site or app. | http://peek.usertesting.com/ | |||||||||||||||||||||||
374 | Testing | Perfmap | A heatmap of resources loaded in the browser. | https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk?hl=en | |||||||||||||||||||||||
375 | Testing | Qaid | Helps you replicate your design in the browser. | ||||||||||||||||||||||||
376 | Testing | SSL Check | Scan your website for non-secure content. | https://www.jitbit.com/sslcheck/ | |||||||||||||||||||||||
377 | Testing | TogetherJS | Add real time collaboration features to your website. | https://togetherjs.com/ | |||||||||||||||||||||||
378 | Testing | Your Browser | Can be given to clients to determine their browser, operating system & screen resolution. | http://ivt.yourbrowser.is/ | |||||||||||||||||||||||
379 | User Interface | AlloyUI | Robust UI tools at your fingertips. | http://alloyui.com/ | |||||||||||||||||||||||
380 | User Interface | BackgroundCheck | Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it. | http://www.kennethcachia.com/background-check/ | |||||||||||||||||||||||
381 | User Interface | CALL to IDEA | Components, Layouts & Utilities. | http://www.calltoidea.com/ | |||||||||||||||||||||||
382 | User Interface | Eager | Improve your website for free with apps you can install in seconds. | https://eager.io/ | |||||||||||||||||||||||
383 | User Interface | Mapbox | A mapping platform for developers. | https://www.mapbox.com/ | |||||||||||||||||||||||
384 | User Interface | Picksum Ipsum | A badass text generator will give you the best lines from some of the hardest Hollywood legends. | http://www.picksumipsum.co.uk/ | |||||||||||||||||||||||
385 | User Interface | Random Thing Generator | For when you really need to come up with random names, places and businesses and just can’t. | http://www.randomthing.me/ | |||||||||||||||||||||||
386 | User Interface | Random User Generator | Like Lorem Ipsum, but for people. | https://randomuser.me/ | |||||||||||||||||||||||
387 | User Interface | TabPatterns | Tablet UI Patterns. | http://tabpatterns.com/ | |||||||||||||||||||||||
388 | User Interface | The Pattern Library | A compilation of free patterns. | http://thepatternlibrary.com/ | |||||||||||||||||||||||
389 | Web Accessibility | 90 examples of A11y compliant colour combinations | http://clrs.cc/a11y/ | ||||||||||||||||||||||||
390 | Web Accessibility | A11y | Web accessibility audits powered by the Chrome Accessibility Developer Tools. | https://addyosmani.github.io/a11y/ | |||||||||||||||||||||||
391 | Web Accessibility | A11Y Style Guide | http://a11y-style-guide.com/style-guide/ | ||||||||||||||||||||||||
392 | Web Accessibility | Assets Framework | The Section 508 Compliant Responsive Framework for Front-End Development. | https://assets.cms.gov/resources/framework/3.0/Pages/ | |||||||||||||||||||||||
393 | Web Accessibility | ChromeLens | A set of developer tools that allow developers to code websites better suited for the visually impaired. | http://chromelens.xyz/ | |||||||||||||||||||||||
394 | Web Accessibility | Color Safe | Explore accessible colour palettes for your website based on Web Content Accessibility Guidelines (WCAG). | http://colorsafe.co/ | |||||||||||||||||||||||
395 | Web Accessibility | Hex Naw | A color accessibility tool for designers and developers. | https://hexnaw.com/ | |||||||||||||||||||||||
396 | Web Accessibility | Input Type Sandbox | Test onscreen keyboards, input types, patterns and attributes. | http://inputtypes.com/ | |||||||||||||||||||||||
397 | Web Accessibility | Swiffy | A Flash to HTML5 converter that helps makes SWF files available to a larger audience. | https://developers.google.com/swiffy/ | |||||||||||||||||||||||
398 | Web Accessibility | tota11y | An accessibility visualisation toolkit. | http://khan.github.io/tota11y/ | |||||||||||||||||||||||
399 | Web Accessibility | WAVE | Web accessibility evaluation tool. | http://wave.webaim.org/ | |||||||||||||||||||||||
400 | Web Accessibility | Web Accessibility Evaluation Tools List | Software programs or online services that help you determine if web content meets accessibility guidelines. | http://www.w3.org/WAI/ER/tools/ | |||||||||||||||||||||||
401 | Web Accessibility | WebAIM Color Contrast Checker | http://webaim.org/resources/contrastchecker/ | ||||||||||||||||||||||||
402 | Web Fonts | About Web Fonts | Examples of Google web fonts in action. | http://www.aboutwebfonts.com/ | |||||||||||||||||||||||
403 | Web Fonts | Dummy HTML snippets for Web Designers | http://www.blindtextgenerator.com/snippets | ||||||||||||||||||||||||
404 | Web Fonts | FFFFallback | Makes it easy to find fallback fonts, so that your designs degrade gracefully. | http://ffffallback.com/ | |||||||||||||||||||||||
405 | Web Fonts | Font Family Reunion | Compatibility tables for default local fonts. | http://fontfamily.io/ | |||||||||||||||||||||||
406 | Web Fonts | Font Flame | Like Tinder for font pairing. | http://fontflame.com/ | |||||||||||||||||||||||
407 | Web Fonts | Font Squirrel Webfont Generator | http://www.fontsquirrel.com/tools/webfont-generator | ||||||||||||||||||||||||
408 | Web Fonts | FontFont Subsetter | Customise your web fonts by dropping what you don’t need. | http://www.subsetter.com/ | |||||||||||||||||||||||
409 | Web Fonts | Golden Ratio Typography Calculator | http://www.pearsonified.com/typography/ | ||||||||||||||||||||||||
410 | Web Fonts | Online Font Converter | http://onlinefontconverter.com/ | ||||||||||||||||||||||||
411 | Web Fonts | The Elements of Typographic Style Applied to the Web | http://webtypography.net/toc/ | ||||||||||||||||||||||||
412 | Web Fonts | The Font Matcherator | Upload an image with type and identify the fonts that match. | http://www.fontspring.com/matcherator | |||||||||||||||||||||||
413 | Web Fonts | The State of Web Type | Up-to-date data on support for type and typographic features on the web. | http://stateofwebtype.com/ | |||||||||||||||||||||||
414 | Web Fonts | Tiff | A type diff tool that visually contrasts the differences between two fonts. | http://tiff.herokuapp.com/ | |||||||||||||||||||||||
415 | Web Fonts | Type Genius | Find the perfect font combo for your next project. | http://www.typegenius.com/ | |||||||||||||||||||||||
416 | Web Fonts | Type Scale | Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts. | http://type-scale.com/ | |||||||||||||||||||||||
417 | Web Fonts | Typefaces for Source Code Beautification | https://github.com/chrissimpkins/codeface | ||||||||||||||||||||||||
418 | Web Fonts | Typetester | Test and compare more than typefaces. | http://www.typetester.org/ | |||||||||||||||||||||||
419 | Web Fonts | TypeWonder | Test web fonts on any web site on the fly. | http://typewonder.com/ | |||||||||||||||||||||||
420 | Web Fonts | Web-Typography Tool | CSS-Typeset Matrix and code generator. | http://www.jan-quickels.de/tools-web-typography/ | |||||||||||||||||||||||
421 | Web Fonts | wordmark | Quickly display previews of any text with the fonts installed on your computer. | http://wordmark.it/ |
