TOOLS FOR DOWNLOAD
GUI tools for the command line coward
- KOALA => http://koala-app.com/
In order to get SASS compiling to work Ruby needs to be installed (often already included in a Mac) along with the SASS Ruby gem. Koala is a free open source compiler which has all of the necessary tools built right into the system – so you can install KOALA and get to work right away - SOURCETREE => https://www.sourcetreeapp.com/
A great version control GUI that can use either Git or Mecurial methods - BITBUCKET => https://bitbucket.org/
Github alternative from Atlassian which plays quite nicely with SourceTree and which allows for private repositories without a fee - BULK RENAME UTILITY => http://www.bulkrenameutility.co.uk/Main_Intro.php
This tool allows you to select a folder in your file system and execute find and replace commands so as to eliminate illegal characters and spaces in file names
Downloadable tools that are great to have around
- EVERNOTE => https://evernote.com/
This is a terrific way to keep track of notes which allows access to those notes either locally or in the cloud which means that multiple devices can have access to the same group of notes. Firefox and Chrome have browser extensions which allow you to copy a webpage directly into a selected folder - SKITCH => http://download.cnet.com/Skitch-for-Windows/3000-12511_4-75835711.html
This is a companion to evernote which allows you to grab a screenshot as well as crop and annotate it, still supported on a Mac here but the windows version still works just fine! - DUET DISPLAY => https://www.duetdisplay.com/
A great little $10 app that lets you use an I-Pad as an external monitor on either Mac or PC - COLOR CONTRAST ANALYSIS TOOL => https://www.paciellogroup.com/resources/contrastanalyser/
If you need to absolutely know that your color scheme will pass accessibility tests, download this tool
COLORS
Online generators for color selection and generation
- COLOR HARMONY “KULER” => https://color.adobe.com/create/color-wheel/
More than a color identifier, it lets you apply color harmony rules to a base color and save the group to share with others via a unique URL - COLOR GRADIENTS => http://www.herethere.net/~samson/php/color_gradient/
Will generate a selected number of steps between a beginning and ending color - CSS GRADIENT GENERATOR => http://www.colorzilla.com/gradient-editor/
CSS controlled gradient colors allows you to insert multiple color stop positions and transition points - HEX TO RGB => http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
Normally I only think in HEX and don’t consider RGB until I want to play with opacity wth RGBA a quick down and dirty tool that will convert between HEX & RGB - CSS TEXTURE => http://www.noisetexturegenerator.com/
This will throw noise and “texture” into a background image which will tile perfectly
CSS
Generators which save you from excessive memorization
- CSS3 GENERATOR => http://css3generator.com/
Generates all the common CSS3 parameters with the appropriate browser prefixes - CSS COLOR FILTER GENERATOR => http://www.cssreflex.com/css-generators/filter/
CSS Filters to change the presentation if images
MINIMIZE / MAXIMIZE
When you need to compress or de-compress a file
- CSS COMPRESSOR => http://www.cssdrive.com/index.php/main/csscompressor
Uncompressed CSS can look sloppy and be hard to work with, but is inevitable when you are in the middle of a project. This tool will compress it for you. - UNMINIFY => http://unminify.com/
Minimized scripts and style sheets can be impossible to read, this tool renders them human readable
FLEXBOX PREFIXES
Flexbox has its’ own prefix issues this generator remembers the syntax for you
- AUTO PREFIXER (flexbox) => https://autoprefixer.github.io/
Auto prefixer for flexbox CSS
CSS SHAPES
Shapes via pure CSS
- CSS TRIANGLE GENERATOR => http://apps.eky.hk/css-triangle-generator/
Generates CSS defined triangles - CSS ARROW PLEASE => http://www.cssarrowplease.com/
Generates CSS defined arrows – a little trickier since it involves the :before and :after pseudo classes - CSS 3 SHAPES PORTAL => http://www.cssportal.com/css3-shapes/
A variety of examples of CSS shapes
FREE IMAGES
When you don’t want to pay for stock images
- OPEN SOURCE IMAGES => http://search.creativecommons.org/
A variety of sources for free open source image, you could also =>google a term => go to images => select tools =>select usage rights =>select “labeled for reuse with modification” - OPEN SOURCE IMAGES => https://morguefile.com/
Good free image library
MALWARE CHECK
Quick site scanners which can help diagnose problems, the first two look for blacklisting notices & rely on google, Succuri goes deeper and will let you know what issues to look for. It should be noted that when a site is connected to google webmaster tools you will be notified when an issue is noticed
- SITE CHECK => http://www.unmaskparasites.com/
- STOP BADWARE => https://www.stopbadware.org/clearinghouse/search
- SUCURI => https://sitecheck.sucuri.net/
PAGE SPEED ANALYSIS TOOLS
Quick site scanners which can help diagnose problems
- PAGE SPEED TOOLS => https://developers.google.com/speed/pagespeed/
See the site the way google see is, complete with a grade and advice on what could be corrected - PINGDOM => https://www.pingdom.com/free
Test site response time via variety of worldwide locations – free level will only show uptime
HISTORICAL ARCHIVE
- WAY BACK MACHINE:https://archive.org/web/
Look at historical copies of sites as they were indexed in the past … the main site is a wealth of open source media including close to every Grateful Dead show ever performed!
ICONS
SVG files for icons
- ICONS THE NOUN PROJECT => https://thenounproject.com
Thousands of PNG and SVG icons available at a reasonable subscription rate - FONT AWESOME => http://fontawesome.io/
Icons which operate as a font face and so behave like SVG files without the browser restrictions check out what is in store for the paid version - ICON MOON => https://icomoon.io/app/#/select
I haven’t personally used this, but it is well rated and allows you to create your own icons
SITE ANALYSIS
Site scanner which will show technologies used in a given site
- BUILT WITH:https://builtwith.com/
Scans a site and will report what technologies are in use on that site
WORDPRESS SPECIFIC
Generators for common WordPress queries, templates & more
- GENERATE WP => https://generatewp.com/
WORDPRESS FORENSICS
WordPress specific forensic tools
- WHAT THEME IS THAT => http://whatwpthemeisthat.com/
- PLUGIN CHECKER => http://wppluginchecker.earthpeople.se/ <= (looks for list of 65)
- THEME & PLUGIN DETECTOR => http://www.wpthemedetector.com/
- WORDPRESS SECURITY SCAN => https://hackertarget.com/wordpress-security-scan/
WORDPRESS DESKTOP SERVER
Local development environment fine-tuned for WordPress
- SERVERPRESS: https://serverpress.com/
WORDPRESS CODE SNIPPETS
My personal notes and code snippets
- SEE MY NOTES: https://plasterdog.com/codetype/all/
More here: https://plasterdog.com/category/theming/
Even more here: https://plasterdog.com/category/otherstuff/
DRUPAL SPECIFIC
Drupal specific forensic tool
- DRUPAL XRAY => http://www.drupalxray.com/
DRUPAL DESKTOP SERVER
Local development environment fine-tuned for Drupal
- AQUIA DESKTOP SERVER: https://www.acquia.com/products-services/dev-desktop
FIREFOX EXTENSIONS
Yes I know that all the cool kids prefer Chrome, but I still like firefox largely because of these extensions
- FIREBUG: https://getfirebug.com/downloads <= no longer maintained, but still works, Firefox now also has a web inspector which functions pretty much like the Chrome tools, but the Firebug information is a little different and complimentary
- SPEED TEST: https://addons.mozilla.org/En-us/firefox/addon/apptelemetry/ <= rough speed estimate
- BUILT WITH: https://addons.mozilla.org/en-US/firefox/addon/builtwith/ <= same as site but instant
- EVERNOTE WEB CLIPPER: https://addons.mozilla.org/en-US/firefox/addon/evernote-web-clipper/
- MEASURE IT: https://addons.mozilla.org/en-us/firefox/addon/measureit/<= allows you to measure things right in the browser
- DEVLEOPER TOOLS: https://addons.mozilla.org/en-us/firefox/addon/web-developer/<= impressive set of tools including most of what you see in Chrome inspection tools, also a good responsive view utility and a way to quickly sample colors
SEO RELATED TOOLS
- Popular search terms
- Checks page for keyword density
- Keyword position analysis
- Matrix of searches related to term
- Checks URL for backlinks
- SEO performance analysis
- Crawl analysis tool
- Accessibility, SEO, social media and technology analysis
- Page authority analysis
- Link building tool
- Verify webhost
- Test page weight
- Test mobile speed
- Historical DNS data
- Last edited timestamp for URL
ADA COMPLIANCE
- Test color contrast
- Accessible color contrast builder
- ADA compliance checker
- ADA compliance checker – 2
- ADA compliance checker – 3
BACKLINKS:
Inbound links contribute significantly to a site’s rank and position, this tool will show the inbound links to any given URL
WEBSITE ANALYSIS:
These are “full spectrum” analysis tools
PAGE AUTHORITY CHECKER:
“Page Authority (PA) is a score developed by Moz that predicts how well a specific page will rank on search engine result pages (SERP). Page Authority scores range from one to 100, with higher scores corresponding to a greater ability to rank.”
KEYWORD TOOLS
- KEYWORD DENSITY: http://tools.seobook.com/general/keyword-density/
Scan a competitor’s site and see what their keyword strategy may be - KEYWORD PLANNER: https://adwords.google.com/home/tools/keyword-planner/
Get keyword performance data straight from the source
KEYWORD POSITION:
Shows keyword position of specific URL
KEYWORD DENSITY:
Tool to calculate the keyword desity of a given URL
SITE PINGING:
When you need to know that the site is up and running
** wordpress sites depend on site visits for cron and some updates are triggered on a cron run so for a site that gets low traffic pinging (BASE URL)/wp-cron.php can help