Useful links: Shadow DOM, social media & Myers Briggs, CSS examples

What the Heck is Shadow DOM? Indeed.

Here’s a fun infographic relating Myers Briggs results to the way you use social media.

Web Design Inspiration: 45 examples of CSS. I normally don’t link to stories like this, but these examples were selected by Jenn Lukas from Happy Cog and are more interesting than the usual list of this type.

Useful links: REM, 3-D Printing, Coding Tools, JS libraries

Easy-peasy REM Conversion with SASS is from Stubbornella.

3-D printing is capable of anything, apparently. What won’t we make with 3-D printing in the future? Now there’s a duck with a new foot thanks to 3-D printing. How about a house? A bus? A person (beam me up, Scotty)?

Coding Tools to Make Life Easier is from Ann Maria’s Blog.

Which JavaScript Library Should I Pick? Here are some tips to help you evaluate the numerous JavaScript libraries that are available now so you can make an intelligent choice.

Main element added to HTML 5.1

Main St 1903
The <main> element was added to the HTML 5 specification recently. The element name is pretty obvious in meaning, but just in case you want the W3C’s definition, it is the “main content of the body of a document or application.”

The <main> element can include only content that is unique to a page. Repeating content such as navigation, copyright information or banners do not belong in the <main> element. There can only be one <main> element in a document, and the element should not be a descendant of an <article>, <aside>, or <nav>.

The W3C does suggest that a <main> element could “a grouping content or sectioning content element as appropriate.” I interpret this to mean you can nest a <main> element in a <div> or a <section>. If I’m misunderstanding what this means, I hope someone will speak up with a correction.

Coding with <main> until the new wears off

Until assistive devices include a keyboard command that will move the focus directly to the <main> element, a best practice suggested for accessibility is to include the ARIA role “main” as an attribute of the element. For example:

<main role="main">

Some browsers (and validators) won’t recognize <main> immediately, although browser support is coming quickly. If you start using it now, be sure to include this in your CSS, along with the other HTML5 resets:

main {display:block;}

For older versions of Internet Explorer, add this to your script.

<script>document.createElement('main');</script>

The html5shiv now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.

Code Examples

You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.

5 Great Web Teacher Tips

flames

If you read Web Teacher posts via an RSS feed, you may forget that there is a page on the blog where I track a list of most of the posts I categorize as Web Teacher Tips. Here are 5 of the best ones brought back to your attention.

Review: The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

[Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.]

The Modern Web cover

The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript by Peter Gasston is from no starch press (2013).

Recently I’ve been reevaluating that pyramid (or three-legged stool) image we have of what skills are used to create a web site. The traditional pyramid metaphor has been a broad foundational layer of semantic HTML, followed by a second presentational layer of CSS, with the complete pyramid being topped by a small peak of interaction created with JavaScript.

Now we have a modern web. We deal more and more often with responsive (or adaptive) thinking, with apps, with APIs, with new CSS layout techniques using programming concepts, and with images built from SVG or canvas. All these changes lead me to think that the foundational layer in the pyramid of web design skills should be recognized as JavaScript. Books like this one reinforce that idea. (I first began thinking about this when I reviewed Introducing HTML5, but I didn’t mention it at the time.)

There is concern over the idea of HTML5 as “pure” HTML vs. the idea of HTML5 and related technologies that often get labeled as HTML5. It’s a dilemma facing many authors today who tackle the topic of modern web technologies, because you can no longer talk “just” about HTML.

The web is moving toward scripting as a way of dealing with every part of a website. In this book by Peter Gasston, it’s very clear that what he calls “the demands and requirements of working on the multi-device Web” are interlaced inextricably with JavaScript. He’s writing about that broader range of technologies I mentioned.

This is a well-written book. In a clear and accessible manner, Gasston leads you through several chapters detailing the latest technologies and thinking in modern web design. The book isn’t for newbies, it’s for people who already have skills and want to keep informed on the latest thinking, trends, techniques, and possible future directions. Here’s a summary of the chapters. Every chapter has an extensive section called Further Reading with excellent resources for the reader.

  1. The Web Platform talks about HTML5 and new best practices, CSS3 and beyond, and CSS preprocessors.
  2. Structure and Semantics deals with new elements in HTML5, WAI-ARIA, semantic markup, microformats, RDFa, microdata, data attributes and web components.
  3. Device-Responsive CSS provides information about media queries, adaptive and responsive design, viewport relative length units, and responsive images.
  4. New Approaches to CSS Layouts talks about multi-columns, flexbox, and grid layout.
  5. Modern JavaScript looks at new features in JavaScript, JavaScript libraries, and polyfills and shims.
  6. Device APIs covers a whole bunch of APIs from geolocation to drag and drop as well as information about PhoneGap and Native Wrappers.
  7. Images and Graphics includes SVG and canvas.
  8. New Forms takes you through new input types, new attributes, datalists, on-screen controls, form validation, constraint validation and css for forms.
  9. Multimedia deals with media elements, media API, and media events.
  10. Web Apps talks about various kinds of apps and tools for creating them as well as application cache.
  11. The Future goes through some really interesting ideas that may become reality in the future such as decorators, the shadow DOM, regions and exclusions in CSS and more.

There’s an appendix for browser support and one with further reading suggestions.

The style of presenting each concept is consistent throughout the book. He introduces a single idea, provides a spare code example, and shows the results. (He talks as if there are code samples available for download somewhere, but although I searched for a mention of the location of those code samples, I couldn’t find it.) Then he builds on the previous example with an new idea, a new code example, and a new result. It’s a very effective way of walking the reader through the new information and building an understanding of it step by step.

Summary: Trying to keep up? This book is an informative and up-to-the-minute look at modern web technologies.

A review by Virginia DeBolt of The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript (rating: 5 stars)

Useful Links: TED Talks, Embed video sections, XAMPP, JQuery2.0

Spydergrrl earns a hat tip and a +1 for sharing Finding Our Tribe: 75 TED Talks Featuring Geek Girls. Her post will lead you to the TED Talks blog, where you can find the list of More than 75 TED Talks showing women in science and tech.

How to embed just a portion of a You Tube video? from Digital Inspiration tells you how to specify a start and stop point for embedded video.

What is XAMPP? is the explanation you’ve been looking for.

A new version of JQuery (JQuery 2.0) is now available that supports only IE10. Older versions of JQuery still support older versions of IE.