Bag of Tricks - Plasterdog Web Design

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

ADA COMPLIANCE

BACKLINKS:

Inbound links contribute significantly to a site’s rank and position, this tool will show the inbound links to any given URL

smallseotools.com/backlink-checker/

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.”

smallseotools.com/page-authority-checker/

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

smallseotools.com/keyword-position/

KEYWORD DENSITY:

Tool to calculate the keyword desity of a given URL

www.seochat.com/seo-tools/keyword-density/

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