Wicks Works: October 2013

19 October, 2013

Setting up some HTML5 experiments

Recently, I have been increasing my knowledge about HTML5 and CSS by reading blogs and books. I have come across a wide range of information including the HTML5 specifications, tips, tricks, examples and best practices. To test my understanding, I am planning on creating some sample web sites and a few blogs posts.

To get started, I am creating a HTML5 page that contains some content and simple structure. It will be the base for examples, samples and experiments.

Putting styles in there place

Put the style code in its own file or files.
Don't use inline styles
Link to the style sheet should be placed within the <head> tags.

By keeping the content separate from the styling information makes the HTML easier to read, makes the HTML easier to maintain, makes the CSS easier to read, makes the CSS easier to maintain.

Remember to close the tags

By closing the tags it reduces validation errors, makes the code easier to understand, and it is considered a best practice.

Make place for the JavaScript

Place the scripts just before the closing </body> tag.
Avoid using inline script

JavaScript within the HTML page can block the browser from parallel downloading.

Use the correct DocType

By telling the browser what type of document the page, you get the benefit of more consistent results.

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Defines the title of the document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="me">
	<meta name="description" content="A simple template to use with learning projects">
	<meta name="robots" content="all">
	<link rel="stylesheet" media="screen" href="myStyle.css" />
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	</header>
	<main role="main">
	<h1>Page Header</h1>

	<div>The main element represents the main content of the body of a document or application.
	The main content area consists of content that is directly related to or expands upon the
	central topic of a document or central functionality of an application.
	- W3C HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML </div>

	<div> The main content area of a document includes content that is unique to that document
	and excludes content that is repeated across a set of documents such as site navigation links,
	copyright information, site logos and banners and search forms (unless the document or
	applications main function is that of a search form).
	- W3C HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML
	</DIV>
	</main>
	<aside>
	<a href="http://www.w3.org/">W3C</a>
	<a href="https://developer.mozilla.org">Mozilla Devevloper Network</a>
	</aside>
	<footer>
	<div>A nice footer message or hyperlinks could go here</div>
	</footer>
	<script type="text/javascript" src="path/script.js"></script>
	</body>
	</html>

view raw starter.html hosted with ❤ by GitHub

14 October, 2013

Relearning HTML and CSS

Due to some recent changes at work, I am now relearning HTML and CSS. So far it has been fairly easy to refresh my memory of the language and technology. I am now in the process of learning HTML5 and CSS3. The following is a list of frameworks, tools, generators, tips and resources that have left an impression on me during my learning process.

HTML Frameworks

HTML5 Boilerplate is a quick way of getting started with a new website. I have used this framework a few times in learning projects. I have found it to be straight-forward to use and helped me to learn some of the modern tips and tricks with HTML and CSS.

LimeJS is a framework for HTML5 games. I have read some nice reviews. As of yet, I don't have any experience with framework.

Web Design Software / Editors / IDEs

jEdit is one of my go too tools. The interface is easy to use, syntax highlighting for lot of languages and it works in Window, Mac and Linux. I switch between Windows and Linux on a daily bases. It is nice to have tool that works well and has a familiar interface.

Eclipse is the tool that I normally turn to for Java and Android development. I have not used the HTML and CSS editing features extensively. What I really like about this is the familiar interface. This allows me to focus on learning the language and not the tool.

BlueGriffon is an editor that uses the rendering engine of Firefox. I don't have any experience with the tool other than reading a few blog posts. It appear the tool has a lot of promise.

CSS3 Generators

CSS3.me a simple and fast way of creating CSS for border-radius, box-shadow, background gradient, and opacity.

css3.mikeplate.com helps create CSS3 for border-radius, box-shadow, text-shadow, transforms, columns, background gradients, and more

Ultimate CSS Gradient Generator helps with creating the CSS for gradients. This tool has helped me out on more than one project.

CSS Formatters / Optimisers / Beautfiers

CleanCSS, CSS Portal, and CSS Beautifier make it fast and easy to organiser and format CSS.

Snippets, Tips, Tricks and the Like

Useful and Ready-to-use HTML Snippets is a post over at DZone.com. It is a quick list of helpful snippets that are ready to be copied and pasted.

CSS Zen Garden demonstrates the power of CSS and a good place to find inspiration.

CSS-Tricks is a great place to learn more about CSS. I have watched several of the videos and picked up a lot of good information, tips, tricks and techniques.

!important is a powerful CSS keyword that changes the precedence of a declaration. It is easy to miss use and abuse check out the blog post 'When Using !important is The Right Choice' for more information.