Jon Low jonlow

There are two ways to make an infographic accessible:

By providing a text alternative for the infographic that conveys the same meaning and information that is represented visually.
By using HTML/CSS to create your infographic rather than using an image file.

No matter which method you choose, colours used in the infographic must meet colour contrast requirements.

http://www.accessiq.org/create/content/how-to-create-an-accessible-infographic

Use a console in my directory where I hold all my projects (not that cygwin folder)
Haved access to all the normal CMD commands and more
Use Linux like commands cd, ls, etc. anywhere in the Windows filesystem
Control Vagrant, Node, Git, SSH, and whatever else you need
Have it look pretty
Have tabs

http://scotch.io/bar-talk/get-a-functional-and-sleek-console-in-windows

Further reading: http://superuser.com/questions/454380/git-bash-here-in-conemu/454381#454381

#Simple Versioning 0.1

Why should we simplify versioning?

Semantic Versioning is great, but it can be overkill for small standalone projects. Projects that have no dependencies on specific versions of other projects do not require a sophisticated method of software versioning.

Keeping software versioning simple allows teams to focus on building their products; rather than the version number they should be using across the development lifecycle.

The Gist

The Problem

When we use jQuery to fade on images that use an IE8 png fix, there can be issues such as:

The PNG fix not working at all, and the image having a black outline or going completely black
The png looks ok, but the image doesn't fade on.

##Solution

Wrap the image in a div and apply all styling to the wrapper div. The key is to not target the image with any css, and apply any positioning or class references to the wrapping div.


	<html>
	<head>
	<title>Select styles with CSS only</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	background-color: #fff;
	font-family: helvetica, sans-serif;
	margin: 4% 10%

	var i = 0,
	pages = contentframe.document.querySelectorAll('#foldertree a')

	for (; i < pages.length; i++) {
	if(!pages[i].querySelector('img')) {
	console.log(pages[i]);

	// Now that we have the links we can use the
	// trivExitPage('page12345.html') function
	// to handpick pages to navigate to

	<!-- /#transition -->

	<!-- 1. Directly after the transition html
	have a link that goes to the next page. Use the visuallyhidden class
	to make sure that only the screen reader can access it -->

	<a href="#" class="screenReaderBtn visuallyhidden">Go to the next page</a>

	<script>

	<!-- Dialog popups should be directly after the button that activates them
	in the HTML source order, so that they can be read by screen readers
	as soon as they are opened -->

	<ul>
	<li class="button1">
	<a href="#">The button that activates the popup</a>
	<div class="popup1">My popup content</div>
	</li>
	<li class="button2">

	<!-- Bad -->
	<ul id="toolbar">
	<li class="menuButton"><a href="#"><div><img src="img/btn_menu.gif" aria-label="Menu" alt=""></div><span>MENU</span></a>
	</li><li class="resourcesButton"><a href="#"><div><img src="img/btn_resources.gif" aria-label="Resources" alt=""></div><span>RESOURCES</span></a>
	</li><li class="helpButton"><a href="#"><div><img src="img/btn_help.gif" aria-label="Help" alt=""></div><span>HELP</span></a>
	</li><li class="exitButton"><a href="#"><div><img src="img/btn_save_exit.gif" aria-label="Save and exit" alt="Save & Exit"></div><span>SAVE & EXIT</span></a></li>
	</ul>

	<!-- Good -->
	<!-- Removed the inline images. These can be added as background images via CSS

	<script>

	$(document).ready(function () {

	T2.CreateButton.prototype.run = (function(_super) {

	return function() {

	// This adds some visually hidden text for screen readers.
	// Change the text so it makes sense in context with your explore page