Rain

Today was all about rain. Boulder snapped its run of 90 degree days with a two day stretch of rain that is expected to continue all week. The roof at the class started to leak and buckets were placed strategically throughout the building. In a city that has 300+ days of sun a year, I can understand why a several day deluge of rain could lead to unexpected problems.

Boulder, CO

On a positive note, the rain has made it easy to focus on our exercises. We continued to hammer away at HTML and focused on the CSS basics. Here's what I learned today:

HTML

With the dawn of HTML5 and web standards, there has been a push to encourage a complete separation between HTML and CSS. To explain, it is possible to format a bit of text using CSS within an html document, or even embedded within a line of text. This may seem advantageous: you can see the stylistic changes that are being made to a particular line of text without searching for the corresponding .css file. The downside is that it can make already long documents longer, making it harder to edit files, and and can to conflicts when external .css files are used.

The follow up to this mentality is an emphasis on html tags that are semantic, meaning that they communicate a particular meaning that can be interpreted by computers. An example of this is the <time> tag. By surrounding "Valentine's Day" with <time datetime="2008-02-14"> and </time> tags, the computer interprets the text Valentine's Day as a date, not just text. On many devices, time or dates with this tag will have access to the device's calendar, which is useful for scheduling events.

Adding semantic tags to your website can enhance search engine optimization as well as internet "crawlers" from search engines will value certain tags more than others. An example of this would be the <article> tag, which flags news items.

On the CSS side of things...

We focused on the Box Model and basic element positioning using standard attributes and their most useful corresponding values.

Box Model

To be clear, the following is the standard for styling html elements using css. The selector applies the following attributes and values to the contents of its corresponding html tag.

selector { 
attribute: value;
}

Some useful CSS I learned:

* { //* applies to ALL html tags
attribute: value;
}

selector { //applies changes to margin & padding without effecting element dimensions
box-sizing: border-box;
} //****should be applied to all pages!

body { //makes content flush with browser
margin: 0px;
padding: 0px;
}

body { //makes content flush with browser
margin: 0px;
padding: 0px;
}

selector { //hides element from document. keeps their element dimensions
display: none;
}

selector { //renders on top of non-positioned elements. Controlled by z-index.
position: absolute;
} //

selector { //changes layer order amongst absolutely positioned elements.
z-index: 0;
}

selector { //positions element relative to parent container rather than body (browser)
position: relative;
}

selector { //fixed on screen. does not move with scroll bar
position: fixed;
}

selector { // centers element
margin: 0px auto;
}

selector { //elements width determined by content. Are "in line" horizontally
display: inline;
}

selector { //elements arranged vertically
display: block;
}

selector { //hides content outside of element box
overflow: hidden;
}

selector:link :visited :hover :active { 
//respectively: unvisited, visited, moused over, selected
}

To see the rudimentary website I made to include as many separate html tags as possible, check out the source code at my github.

Web News:
An interesting project is emerging in the development world. Former bigshot at Wordpress, John O'Nolan is prototyping ghost.js, the first cms and blog written fully in JavaScript. The project first surfaced as a kickstarter project, and is now being haled as the new big thing in the blogosphere.

At refactoru we are learning JavaScript, so I am very excited by the opportunity to be part of a big incoming boom.