Cheat Sheet

HTML5 Cheat Sheet

Cheat Sheet via Make a Website Hub

Website Deployment Checklist

Description:

This is my take on a website deployment checklist. Feel free to adapt it to your own projects. Hopefully this will act as a good stating point for you. If I've missed anything, please add your suggestions to the comments. Thanks!

• Proofread, check Spelling and Grammar (Yes, again)
• Have you ensured all HTML5 is semantically correct
• Have you checked all links to ensure no broken links exist?
  W3C Link Checker
• Have you evaluated all small images for base64 encoding?
  http://www.base64-image.de/
  https://www.nccgroup.com/en/blog/2014/06/image-optimisation-tips-no-8-be-aware-of-base64-encoding-but-approach-with-caution%E2%80%A6/
• Have you double checked all browser prefixes in CSS?
  http://cssprefixer.appspot.com/
• Have you linted everything?
  http://www.jslint.com/
  http://validator.w3.org/
  http://csslint.net/
• If using a CSS preprocessor (SASS/Compass, LESS, Stylus, etc.), have you switched to production mode from development mode?
• Have you compressed and concatenated your CSS?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Have you compressed and concatenated your JavaScript?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Did you build custom error pages (e.g. 404 page)?
  http://www.searchenginejournal.com/importance-of-404-error-page-top-404-designed-pages/64899/
• Have you tested usability / accessibility?
  http://wave.webaim.org/
• Have you verified basic site accessibility / usability with CSS & JavaScript disabled?
• Have you tried to navigate the site using screen-reader software to verify usability / accessibility?
  http://www.nvaccess.org/
  http://www.freedomscientific.com/Products/Blindness/Jaws
• Have you ensured images have appropriate ALT tags?
  http://www.feedthebot.com/tools/alt/
• Have you updated your version control system (GIT, subversion, etc.) with the latest changes prior to deployment?
  http://git-scm.com/
• Have you added the favicon?
  http://blog.teamtreehouse.com/how-to-make-a-favicon
• Have you added the necessary Meta Data?
  https://support.google.com/webmasters/answer/79812?hl=en
• Have you added the necessary code for analytics (e.g. Google Analytics)?
• Have you added the site map document?
  https://www.xml-sitemaps.com/
• Have you added the robots document?
  http://www.robotstxt.org/robotstxt.html

Export SVG with Cut and Paste from Illustrator

Here's a handy tip: If you want to export part of an Adobe Illustrator file as an SVG, select that part, copy it to the clipboard, and paste it into a text only application (e.g. textedit in plain text mode).

It turns out that whenever you copy an element in Illustrator, it's stored in the clipboard as an SVG.

HTML Canvas Demo

Description:

This is a simple web app for drawing boxes on a canvas object. It allows for changing the stroke and fill color and size of the boxes and calculates the box area and perimeter on the fly. It can also undo up to 10 times. It includes mouse and touch events and will therefore work on tablet devices (though multi-touch is not utilized).
This simple web app could be the basis for a more robust web based drawing program. All the JavaScript is well documented.

Notes:

The page layout is not responsive, so a minimum screen size of 1024 x 768 is recommended.

The demo page can be viewed here:

Canvas Demo

The files can be downloaded here:

canvas_boxes_demo.zip

Attribution

All the code was written by me. The fonts are provided via Google Fonts. The textures are from subtle patterns.

Course Evaluation Web App Demo

Description:

This is a simple web app designed to calculate an average score from grades in a class. It does all calculations with JavaScript. It could be adapted to work for most classes and is a simple demonstration of the usefulness of JavaScript for basic client side data processing.

All JavaScript is well documented.

Notes:

While there is no indication, clicking on the word average in any of the attendance, assignments, or evaluations sections will calculate the average for that section only.

The demo page can be viewed here:

Course Evaluation Calculator Demo

The files can be downloaded here:

course_eval_calc_demo.zip

Attribution

All the code was written by me.

PHP Tic-Tac-Toe

Description:

A simple Tic-Tac-Toe game written in PHP to demonstrate the use of PHP classes. Of course this is just for the purposes of demonstrating the code patterns, as PHP is not the language to write a Tic-Tac-Toe game in. This is because every turn requires an interaction with the server. It's just a bit of fun that's a good learning tool.

Notes:

As this demo is written in PHP, a server side language, you will need a web server to run this demo. Opening the index page in your browser won't work.

The demo page can be viewed here:

PHP Tic-Tac-Toe Demo

The files can be downloaded here:

php_ttt.zip

Attribution

All the code was written by me. The fonts are provided via Font Squirrel. The background image of the beach and sand is available through iStockphoto.com and is copyrighted work. You may re-purpose all the code, but the background image is copyrighted and my not be reproduced unless you purchase a license.

JSON Parsing Demo

Description:

The following test project parses a JSON file of Presidents and their Vice Presidents. It also merges local data (images of the Presidents) with the data provided in the JSON file. It displays the results in a table (and a table within a table for the Vice Presidents). A simple search / sort function is also provided.

The JSON file is retrieved using an AJAX request and stored in a local variable. Everything is processed using only JavaScript (neither jQuery nor any other JavaScript library is utilized).

Graphics and CSS files to style the page are included along with a copy of the JSON file. The JavaScript is well documented.

Notes:

Because the data is retrieved using an AJAX request, a web server is required to make everything function. Simply opening the index.html file in your web browser will not work. A local server, such as MAMP would work well or a basic Linux server would also do the job.

The demo page can be viewed here:

JSON parse - Presidents List Demo

The files can be downloaded here:

json_parse.zip

Attribution:

The original images of the presidents were gathered from wikimedia commons, the frame and sepia tone effects were added by me. The provided JSON file is based on sample data from University College of the University of Denver, original author Michael Schwartz. The fonts are provided via Google Fonts

Web tools

Description:

This is a list of the main tools that I use for web Development. While I will occasionally use other resources, these are the ones I use on a regular basis.

Sublime Text

My favorite code editor. Having look at and used many other code editors, sublime text is the editor I use for 99.9% of my work. It strikes the right balance between basic text editor and full blown development environment. With the robust plug-ins available, you can customize it to provide the functions you need without the the overhead and clutter of the things you don't need or want.

Speaking of plug-ins for sublime text, here are the ones I think are essential:

• Package Control - Install this first. Package control allows you to download, install, and manage all your other plug-ins with ease. It's like npm for node.js or apt-get in Ubuntu. It should be the first stop when adding plug-ins to sublime text. Get it here.
• Emmet - The fastest way to code HTML & CSS. Works with editors besides sublime text. View the demo
• Side​Bar​Enhancements - Provides enhancements for working with files in sublime text. Find, move, copy, delete files right from within the sidebar. You can copy file paths, encode images as data:uri base64, and a whole lot more. Install with Package Control.
• SublimeLinter - In-line code checking while you work. The fast, easy way to quality control your code. Install with Package Control.
• GIST - allows you to create code snippets that can be saved to and retrieved from GIT hubs GISTs. Great for storing and sharing reusable code through github. Install with Package Control.
• Code Highlighting - There are a number of languages supported by the built in code highlighting in sublime text, but for those that it doesn't support natively, you can install a package that will cover whatever language your coding in. I have installed packages for SASS, HTML5, jQuery, and more. Just look in Package control to find what you need.

Please don't think this is in any way a comprehensive list of sublime text plug-ins, there are literally hundreds of packages that cover a wide range of capabilities. Please note as well that a lot of these packages can be used with other editors (like text-mate), if sublime text isn't right for you.

MAMP

I develop on the Mac and so I need a local web server to work with. MAMP Pro is my choice for a simple local web server setup. MAMP (Mac, Apache, MySql, PHP) is super simple to setup and configure and is solid and stable. The latest version (V3) has added support for python and perl. They are now available on windows as well. Check them out here.

Code Kit

I used to use grunt.js to automate code compiling, auto-browser refreshes, file concatenation and minification, but not anymore. The latest version of code kit (v2) does everything I need and more. In addition to all the tasks above, it can install and manage packages using bower, which is built in. It has its own built in basic web server, but works with MAMP for more advanced capabilities. And it does all this from a simple GUI interface, no command line needed. Watch the demo video here.

SASS / Compass

SASS or Syntactically Awesome StyleSheets is an extension of CSS that adds innumerable capabilities to CSS, like the use of variables, nested rules, mixins, and in-line imports. It makes coding CSS fast and easy, and more importantly, it makes it easy to make changes. You can get SASS here. Compass is a framework for use in SASS. They have built the code that you would have built using SASS, and packaged it for you. You can learn more about Compass here.

GIT / Tower

Tower is a GUI interface for GIT. It makes using GIT and accessing github easy. If you didn't know, GIT is used for software version control. If your coding, but haven't used version control software, drop what your doing and take a look at GIT here. Once you have that sorted, Tower is the best GUI interface for GIT. Check out the screen cast here.

VMWare Fusion

VMWare Fusion is what I use to run virtual machines. I can download various versions of Windows and Internet Explorer from modern.IE and run them in VMWare Fusion for testing. I can also install and configure a Linux web server if I need a special configuration for a project. It's my indispensable tool for cross platform testing. Get it here.

Adobe Creative Cloud

For content creation, nobody beats Adobe and with the Adobe Creative Cloud Master Collection, you have everthing you need to create content for the web, or any other design project. Check it out here.