Dannyrb

Cornerstone.js: A New Look

2019-02-25T00:00:00+00:00

For those not aware, I became a core team member of Cornerstone.js in late 2017. Since then, I’ve actively worked to improve the cornerstone.js libaries and grow its community.

Today, as a part of those efforts, we have developed a style guide and adopted a new logo. Here’s a piece on how we found our way.

From One to Many

From early 2014 to late 2017 Cornerstone’s face was Chris Hafey’s face. The Cornerstone repositories were owned by his personal GitHub account, and most major changes (unofficially) required his blessing. By late 2017, the bulk of Cornerstone’s maintenance efforts had fallen squarely on the shoulders of OHIF’s Erik Ziegler. Ziegler worked dilligently to cultivate academic and commercial collaborators (including me 👋).

Together, having identified community growth as a top priority, we made the following changes:

Creation of GitHub Organization “cornerstonejs”
Creation of NPM Organization “cornerstonejs”
Creation of Slack Group for active contributor discussions
Purchase of cornerstonejs.org
Founding of “Core Team” charged with charting Cornerstone.js’s path

Branding the Cornerstone libraries Hafey created as the “Cornerstone.js Organization” was an important step. It created a shift in thinking from Cornerstone.js: “the work of one or two individuals” to “a community effort”.

Growing a Community

Why do individuals volounteer their time for organizations? What motivates people to contribute?

We volounteer when we believe our values align, when we are uniquely qualified to help, and when our efforts will have impact. To give would-be-contributors a chance to evaluate statements like these, we first need to clearly demonstrate our own values and efforts.

How do we do this? By:

Providing consistent, cohesive, and helpful documentation
Being responsive, helpful, and approachable (re: GitHub issues and pull requests)
Creating opportunities to share knowledge, take ownership, and have impact
Displaying an identity and culture that community members resonate with

Adopting a logo, branding, and consistent style helps move a few of these bullet points forward.

Sourcing Logo Designs

I originally reached out to the Slack Group to see if any organizations or individuals could provide design resources. insert cricket sounds here

Failing that, I ventured over to Fiverr.com to see what < $100 of my own personal funds could make happen. Surprisingly, a lot. I provided some rough guidelines and example look-and-feel logos to the very talented Artfeel_. She came back with the following concepts:

$72 worth of logo concepts.

Erik Ziegler, James A. Petts, and myself discussed the above options. We ultimately settled on “The Blob” (as we endearingly named it). After playing a bit of word association, we believe it reinforces:

fluid, liquid, malleable, volume, adaptable, “part of”

With the ultimate goal that it reminds our libraries’ consumers that cornerstone.js is a “core building block” for larger applications and medical image viewers – even as our landscape (and the library’s purpose) shifts and changes.

We then played with a few different color variations:

Color variations of "The Blob" when shifting the hue of the three main colors that comprise its gradiants.

We decided to stick with the original green for now, but believe the gradiant and alternative colors could allow for some interesting use cases and animations at a later time.

Our last stick point revolved around usage of “.js” in the logo’s design.

Finalized Cornerstone.js "The Blob" Logos

Reinforcing “cornerstone.js” over “cornerstone” is of prime importance. Cornerstone, on its own, is less descriptive and can be difficult to locate us by. Our rule of thumb is:

When included alongside the text cornerstone.js, the .js may be absent from “The Blob”
When displayed solely as “The Blob”, the .js should be present to reinforce “cornerstone.js”

Assets and Usage Guidelines

You can find our current style guide on GitHub

It includes assets you can use in your own projects, and serves as a reference for our own repositories.

Disclaimer

This post is purposely brief. Cornerstone’s history is long, rich, and filled with countless contributors that have helped it grow to where it is today. If you feel something is innacurate or requires updating, please don’t hesitate to reach out to me directly or in the comments below.

Graduating from Boostrap: With help from Atomic Design

2017-10-06T00:00:00+00:00

When replying to a conference’s “Call for Speakers” or “Call for Proposals” you often submit an abstract. The abstract serves as a pitch for a topic you would be interested in speaking on. Often times, the talk does not have slides or even an outline at this point. If one or more conferences likes the abstract and asks the submitter to present, a talk is born.

Abstract

Here is a copy of the abstract that ultimately led to this slide deck and presentation:

Bootstrap defines itself as “… the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” and it’s not wrong. At 105,000 stars, and over 48,000 forks on GitHub, it comes in as the second most popular repository of all time. Bootstrap is an amazing tool, but it’s not without it’s problems. Have you ever found yourself overriding a default Bootstrap style? Including CSS or JS for components you don’t use? Or maybe you’re just tired of your website looking like everyone else’s? We put up with this technical debt because of the wins Bootstrap provides, but what if we could keep the benefits without all of the headache? Enter Atomic Design.

In this discussion, we will start by exploring the problems Atomic design solves, how it promotes consistency/cohesion, easily traverses from abstract to concrete, and provides methodology for crafting an effective design system. Next we will get our hands dirty by digging into a concrete implementation of an Atomic Design based toolkit. Finally, we will go over resources for further education, how to begin the process of integrating Atomic Design into your process, and next steps. By the end of this talk you will be comfortable with Atomic Design basics and have the knowledge and resources necessary to create your own atomically driven comprehensive component library.

Slide Deck

Click Here to view on slides.com

Fullscreen is not available/does not function correctly within this layout. You can view the speaker notes and the slides in their full resolution on slides.com.

This talk was presented at Techbash 2017. You can find information about the other wonderful talks presented there in this GitHub Repo.

If you have any questions, please don’t hesitate to reach out below!

How To Use Google Analytics’ API To Share Your Traffic

2015-11-10T00:00:00+00:00

This is a “proof of concept” post on open sourcing your website’s traffic data. A number of enhancements, both visual and performance wise, can be made. This post walks you through getting the data into your hands, so you can do with it what you will (:

Finished Product: Advanced == OR == Basic

Project on GitHub: Click Here

One of the most difficult components of working with Google’s APIs is authentication. Thankfully, Google has a number of client libraries that make this easier.

For this guide, we’ll be using:

Google’s PHP API Client Library
Google’s Embeded API

We’re doing this for a couple of reasons. First, I eventually want to package this code into a reusable HTML WebComponent. Second, the Javascript API cannot generate it’s own Auth Token; it needs to be passed one from a server side call.

It’s worth noting that we could swap out the PHP portion of the code with any of Google’s other API Client Libraries.

Installing PHP API Client Library

You need a local PHP server for this to work well. If you don’t already, look into setting one up using either:

After installing a local server, make sure you have composer installed:

Get Composer!

Next. open up a new command prompt window. Navigate to your product directory and use this command:

composer require google/apiclient:^2.0.0@RC

If you receive an error, you may want to try:

composer require google/apiclient:^2@RC

Or check out the GitHub Repository for Google’s PHP API Client as the install instructions may have changed.

Google Developers Console

This is where you manage permissions and account associations for all of Google’s APIs. We need to navigate to the Developer Console and create a reference to the project that will be pulling our analytics data.

Next, we need to turn on API Access to Google Analytics for this project. From your new project’s dashboard, navigate to “API”, then “Analytics”. You should see this screen. Click “Enable” to turn on support for the Analytic’s API.

Service Accounts

Okay, now Google requires an authenticated account to access account specific data. We don’t want our users to have to authenticate (they couldn’t see our data anyway). To get around this, Google uses Service Accounts.

Think of our Service Account as just another user account. We need to:

Create it ;) (It has it’s own e-mail address)
Grant it account permissions in Google Analytics
Use it’s credentials to authenticate before requesting data

Create A Service Account

To create a service account, we head back to the Google Developer Console, and access the project we created in our previous steps. You select “Credentials”, “Add Credentials”, and then “Service Account”. You should see your newly created service account as pictured below! Make sure to save the e-mail address of your new account in a text file. We’ll be using it in the next steps.

Note: In the last step, you should have been forced to download a JSON Key file. If you don’t have one, or you’ve lost yours, you can generate a new file by viewing the details of your service account and clicking “Generate New JSON Key”

Give Our Service Account Permissions

Next, we need to make sure our Service Account has permission to read the data we want to query. We can give it permission by logging in to our Google Analytics account, navigating to “Admin”, under “Account” selecting “User Management”, and finally by adding “Read & Analyze” permissions for our Service Account using its e-mail address.

Querying Data

And finally… Lets write some code. Here is the general run-down of what we need to do:

Use server-side library to authenticate our service account
Authentication process provides us an access token
Pass access token to client-side api
Query for data using embedded client-side api
Render charts using built in functions

Server-Side Code

<?php
// MUST be using composer
require_once '/path/to/vendor/autoload.php';
session_start();	 	

$client = new Google_Client();	 	
// Name of proj in GoogleDeveloperConsole
$client->setApplicationName("Example Project");

// Generated in GoogleDeveloperConsole --> Credentials --> Service Accounts
$client->setAuthConfig('/some/secure/path/example-project-c0a14bc34a03.json');
$client->addScope(Google_Service_Analytics::ANALYTICS_READONLY);

// Grab token if it's set
if (isset($_SESSION['service_token'])) {
 	$client->setAccessToken($_SESSION['service_token']);
}

// Refresh if expired
if ($client->isAccessTokenExpired()) {
	$client->refreshTokenWithAssertion();
}

// Pin to Session
$_SESSION['service_token'] = $client->getAccessToken();

$myToken = $client->getAccessToken();
?>

Note:

The require_once is referencing a file generated by Composer.
setApplicationName() is being passed the name of our project
setAuthConfig() is passed the location of our JSON Key file
- Please put this in a secure place

Client-Side Code

<body>
<!-- Load Google's Embed API Library -->
<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>

<div id="chart-1-container"></div>

<script>
gapi.analytics.ready(function() {

  /**
   * Authorize the user with an access token obtained server side.
   */
  gapi.analytics.auth.authorize({
    'serverAuth': {
      'access_token': '<?php print_r($myToken["access_token"]); ?>'
    }
  });

  /**
   * Creates a new DataChart instance showing sessions over the past 30 days.
   * It will be rendered inside an element with the id "chart-1-container".
   */
  var dataChart1 = new gapi.analytics.googleCharts.DataChart({
    query: {
      'ids': 'ga:110849216', 			// THIS NEEDS TO BE A VIEW
      'start-date': '30daysAgo',		// THAT YOUR SERVICE ACCOUNT HAS
      'end-date': 'yesterday',			// ACCESS TO
      'metrics': 'ga:sessions,ga:users',
      'dimensions': 'ga:date'
    },
    chart: {
      'container': 'chart-1-container',
      'type': 'LINE',
      'options': {
        'width': '100%'
      }
    }
  });
  dataChart1.execute();
});
</script>
</body>

Note:

Our accessToken is being passed in by the server-side language
Our ViewID 'ids': 'ga:110849216' is specific to our Analytics View

Our Result

Click here to see the live result

Not beautiful, or even super functional, but it’s a good start!

What Next?

This is a proof of concept, so there are plenty of enhancements that can be made. On the visual UI/UX side we have:

Set up charts to work for multiple analytic “views”
Add support for real-time reporting
Use Chart.js or similar libraries to enhance charts

But there are also performance issues that should be considered. You may want to look into storing common requests into a database, and then using data from your local database to display charts. This has the benefit of using less of your query quota (set by Google), and the page should load much faster coming from a local data source.

Stuck?

If you’re stuck on a step, it could because my guide is now outdated. Try Googling the problem, but don’t be afraid to ask for help in the comments below. I really, really appreciate any advice, feedback, and questions.

Resources

Libraries and Google Documentation

Determine “Views” you can access
Google’s PHP API Client
Embeded API Tutorials
Crafting different queries to pull back data

My repositories:

Main example on GitHub
PHP Only example on GitHub

Other Blogs/Guides

Most of these use deprecated functions, but they provided a lot of clarity to the process for me. I hope they can help, and if you have specific questions, please feel free to reach out.

SEO Meta Tags and Microdata for Blogs

2015-11-08T00:00:00+00:00

A quick, no explanation reference on how to optimize blog posts and blogs for search engines.

Meta Tags

Meta tags go in the <head> of an HTML document. They add additional information/context to the current web page or website.

OpenGraph: Facebook tags
Schema.org: Bing, Yahoo, Google, etc.
Twitter: … Twitter

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here" />
<meta itemprop="description" content="This is the page description" />
<meta itemprop="image" content="http://www.example.com/image.jpg" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@publisher_handle" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description less than 200 characters" />
<meta name="twitter:creator" content="@author_handle" />
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.html" />

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<!-- 1200 x 630 For optimal sharing -->
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

HERE: As a GitHub Gist

If you want to see if you’ve set these correctly, you can check to see how each of the appropriate vendors reads your webpage.

OpenGraph Validator: HERE
Twitter Card Validator: HERE
Schema.org Validator: HERE

Semantic Markup

Does your websites HTML markup contain a large number of <div> elements?!?! Use HTML tags that are more semantic/descriptive of the content they contain! <div>s can be replaced with…

<article> <aside> <details> <figure> <figcaption> <footer> <header> <main> <nav> <section> <summary> <time>

Mostly self explanatory, but there are a couple rules to how these should be used. For some direction, try reading my more in-depth post on HTML5’s sectioning elements.

Other Stuff

Make it easy to share content
HAVE AMAZING CONTENT (and original)
alt tags for images
Sign up for Google’s webmaster tools
Make your website mobile friendly
Increase page load times
URLs should contain key words to content on page
Add SSL to your website

But most importantly.. Provide solid, original content, and a great user experience.

The Template Tag: A Refresher

2015-11-05T00:00:00+00:00

The <template> specification was introduced in 2011, along with the other three specs that make up WebComponents. Since then, <template> has become a part of the W3C Living Document, and has full support in Chrome, Firefox, Opera, Safari, and Android. To boot, Edge has just announced upcoming support.

In light of that announcement, let’s refresh (:

Native Templates

Before the <template> tag was introduced we still had templates, but to get them to work, we had to abuse existing functionality. The two most common techniques were:

Hide the DOM off screen ```html

<ol start="2">
	<li>Abusing the <code>&lt;script&gt;</code> tag</li>
</ol>
```html
<script id="simple-template" type="text/x-handlebars-template">
  // My template's contents
</script> 

Both of these techniques are not ideal. The first is clunky and can be accidentally modified by DOM manipulation. The latter exposes us to potential cross-site scripting attacks. The <template> element seeks to solve these issues, and also provides additional benefits.

The Anatomy of a Template

The anatomy of a template is simple. It is any set of markup, styles, and javascript that is wrapped in <template> tags. A template can even include another template! Here is a basic example:

<template id="simple">
    <style>
        span { color: purple; }
    </style>

    <img src="http://placehold.it/50x50" />
    <span>Hello World!</span>

    <script>
        function boom(){
            alert("BOOM!");
        }
        boom();
    </script>
</template>

The Properties of a Template

Flexible placement

This code can live anywhere inside the <head> or <body>. It’s also important to note that you can place it as a child for a <select> or <table> element.

Inert

This means that the Javascript and CSS play no role in modifying the page. The code is not active until the template has been cloned and added to the page.

Hidden from CSS and Selectors

Your template’s content cannot be selected or modified with CSS or query selectors. This is to protect it from accidental changes, and for performance reasons.

But.. How do we use our template?

Chiggity-check this out:

function addSimple(){
    // Grab our template
    var t = document.querySelector('template#simple').content;

    // Optional -- Modify template

    // Clone and add
    var clone = document.importNode(t, true);
    document.getElementById("simple-target").appendChild(clone);
}

Simple enough. We’re:

Grabbing a reference to our template’s content.
We create a deep-copy clone of the template’s content
and then we insert it into our existing DOM.

Simple Template Example

Notice that even though our span style is defined in our template, it doesn’t affect the existing span until it is cloned and added. Also, the JS is not executed until the template is added. Even the <image> isn’t fetched pre-load. Basically, adding the template is like a live copy & paste into your DOM.

Can I data-bind? Data-binding is fun!

Nope. The closest we can get to this is using DOM manipulation techniques to change our templates to create “fake” data-binding. Here is a slightly more intense example that demonstrates this:

<form id="data-binding-form" onsubmit="return addRow()">
    <label for="name-field">Name:</label>
    <input type="text" name="name" id="name-field" />

    <label for="age-field">Age:</label>
    <input type="text" name="age" id="age-field" />

    <label for="gender-field">Gender:</label>
    <input type="text" name="gender" id="gender-field" />

    <input type="submit" name="Submit" value="Submit"/>
</form>

<table id="persons-table">
<thead>
<tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Chester Examplefield</td>
    <td>92</td>
    <td>Female</td>
</tr>
<!-- Our Row Template -->
<template id="table-row">
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</template>
<!-- End Row Template -->
</tbody>
</table>

Please Note:

Our template is inside our table
The template’s row is not visible on the screen

// ADD ROW
function addRow()
{
    // Grab our template
    var t = document.querySelector('template#table-row').content;

    // Optional -- Modify template
    var form = document.querySelector('#data-binding-form');

    var age = form.querySelector("#age-field").value; 		
    //var age = $("#data-binding-form #age-field"); // Equiv
    var name = form.querySelector("#name-field").value;
    var gender = form.querySelector("#gender-field").value;

    t.querySelector("td:first-child").innerHTML = name;
    t.querySelector("td:nth-child(2)").innerHTML = age;
    t.querySelector("td:last-child").innerHTML = gender;

    // Clone/activate template & add to page
    var clone = document.importNode(t, true);
    $("#persons-table tr:last").after(clone);   // .after() is using jQuery

    // Vanilla JS of .after();
    //var allRows = document.querySelectorAll("table tr");
    //var lastRow = allRows[allRows.length- 1];

    //lastRow.parentNode.insertBefore(clone, lastRow.nextSibling);

    return false; // Stop submit event from bubbling up
}

Please Note:

We grab a reference to the template’s content
We pull values from our form fields
We update the template’s content with our values
We clone the now modified template
We add the clone to the page

“Data-Binding” Example

You get the idea. Not super intuitive, but it works. This is likely where we’ll see abstractions like polymer pick up the slack and introduce more developer friendly ways to do data-binding.

Support

Until we get full cross-browser support, it’s fairly safe to rely on Polyfills for <template> as they’re simple and performant. Here are some examples of polyfill use:

Even so, unless your target browser support is IE11+, you probably shouldn’t be using <template> in production. If anyone has any sources that show otherwise, please let me know! (:

Next Steps?

Templates lay the groundwork for the real meat and potatoes of WebComponents. To fully leverage their power, you may want to check out:

Continuing your education on the <template> tag
Annnddd some more education
Learning about Custom Elements (hint they use templates)
Learn more about polyfills

Resources

This article in Markdown format on GitHub
“Simple Template” Example on GitHub
“Data-Bind Template” Example on GitHub
Track <template>s browser support

FAQ

Questions from this reddit thread and comments below will eventually be aggregated here

The Programmer’s Guide to Better SEO: Semantic Markup and HTML5

2015-10-28T00:00:00+00:00

Disclaimer: Content is king. Provide value, make yourself accessible, make your website easy to navigate and easy to understand for your users. Everything detailed below is about Search Engine OPTIMIZATION, and is not worth a thought until you have something worth optimizing.

Search Engines. Their goal is to provide quality, up-to-date, and relevant content. To accomplish this, they send out little bots that crawl and index trillions of web pages. Bots read these pages to better understand their content, and to help ensure they’re serving up the best possible results. How they weigh pages is a little bit of a mystery, but one thing is for sure:

Bots need to be able to read your web pages to properly index them.

Unfortunately, most websites are uneccessarily hard for these bots to read. Because of this, the bots are forced to make “best guesses” about the content; often causing less than optimal page rank (and thereby hurting SEO).

Semantic vs. Non-Semantic

Humans can see web page styles. This allows us to group content and understand each element’s context regardless of the underlying DOM elements. Robots lack this ability. When a bot reads a web page, it ignores all of the styling and uses the HTML tags to understand what it’s looking at.

Non-Semantic

With all of the styling ripped away, and using non-semantic elements (like <span> and <div>), this is what a bot would see. Going off of this structure alone, the bot is forced to make “best guesses” about the context of the page’s content.

Do you know where to find the unique content on this page? Do you know which content isn’t relevant?

I’m sure you can make some educated guesses. But it’s hard to know for sure.

Semantic

By using semantic elements, how and where to find the different kinds of information on our web page becomes much clearer. Bots can now find:

Content unique to our page
Where one article stops and another begins
The components that make up each article
Etc.

We can use semantic elements (basically “more descriptive <div> tags) to provide context and clarity. But what elements do we have at our disposal? What are the rules that govern when and how we should use them?

Being Semantically Correct

There are two different kinds of semantic elements: Sectioning Elements and.. uh.. All of the other ones. Where Sectioning Elements are more descriptive versions of the classic <div>, and the remaining elements imply or add additional behavior (<a href=""></a>, <p></p>, etc.)

Sectioning Elements

<main> <article> <section> <nav> <aside> <header> <footer> <address>

For sectioning elements, there are only a few non-obvious rules regarding their usage:

<main> Represents the main content of the page. There should only be one. You should not place <main> inside another semantic element.
<article> Should make sense if distributed outside the context of the page. Can contain other articles. Should have a heading.
<aside> Much like a play’s aside, content in an aside breaks away from the normal flow. It is usually related, and expands on something. Commonly contains <figures>, groups of <nav>s and quotes.
<address> Should contain the author’s contact information. Author of… the website, of the article, of the comment, etc.

The remaining sectioning elements can be used any number of ways so long as their meaning is preserved. For example: your webpage can have a <footer>, but an <artical> can also have a <footer>.

Still Confused?

Tree House has a great article that examines each sectioning element, and HTML5 Doctor has a great flow-chart that walks you through picking the right element.

Other Semantic Elements

Most of HTML’s elements are semantic, but arguably the most important ones (in order) are:

Title: <title>
Headers <h1> through <h6>
Hyperlinks <a>
Emphasis <b> and <strong>

Google bots are reading your web page trying to figure out which keywords best correlate with your content. Like humans, they look to the <title> of the document, and at the main headings (<h1>, <h2>, and <h3>). They’ll likely assume emphasized and bold words are important, and that any other web pages you link to are related to your content.

It is less common to see these elements missused. Switching out an <aside> with an <article> makes no visual difference, but swap a hyperlink <a> for <span> and you will immediately notice.

<aside> == Ignorance ==> <article>

<a> == Willfull Ignorance ==> <span>

Still Confused?

HTML5Doctor has a list of all HTML elements, as well as descriptions and examples of how and when to use them.

FAQ

Why not <insert-any-name-here> elements?

Actually… The newest W3C spec for WebComponents leaves room for programmers to create their own DOM Elements. Projects like Google’s Polymer seeks to implement the new spec, and groups like webcomponents.org are helping facilitate discussion and education on the topic.

Why should I take the time to care about Semantic Markup?

Going through your application and replacing lame duck <div>s with cool, hip-happenin’ Sectioning Elements is a quick process. It nets you increased SEO, makes your website more accessible to modern screen readers, and you’re creating easier to maintain code.

What does a google bot look like?

Next Steps

MicroData & Schema.org

Semantic Markup on steroids. MicroData introduces additional tags search engines can use to pull specific data from your page. Not a part of the W3C spec, but standardized by the major search engines. Here is a treehouse post on MicroData

MetaData & Social Share

Your website’s metadata is important. It tells social websites how to format specific pages when they’re shared, it helps to further define your page’s keywords and relevance for SEO, and so. much. more.

Resources & More Reading:

Overview: W3Schools Semantic Elements
In-Depth: HTML5 Doctor: Let’s Talk Semantics
Official: W3C

Dannyrb

Cornerstone.js: A New Look

From One to Many

Growing a Community

Sourcing Logo Designs

Assets and Usage Guidelines

Disclaimer

Graduating from Boostrap: With help from Atomic Design

Abstract

Slide Deck

How To Use Google Analytics’ API To Share Your Traffic

Sharing Your Traffic

Installing PHP API Client Library

Google Developers Console

Service Accounts

Create A Service Account

Give Our Service Account Permissions

Querying Data

Server-Side Code

Client-Side Code

Our Result

What Next?

Stuck?

Resources

SEO Meta Tags and Microdata for Blogs

Meta Tags

More Reading

Semantic Markup

Other Stuff

The Template Tag: A Refresher

Native Templates

The Anatomy of a Template

The Properties of a Template

But.. How do we use our template?

Simple Template Example

Can I data-bind? Data-binding is fun!

“Data-Binding” Example

Support

Next Steps?

Resources

FAQ

The Programmer’s Guide to Better SEO: Semantic Markup and HTML5

Semantic vs. Non-Semantic

Non-Semantic

Semantic

Being Semantically Correct

Sectioning Elements

Still Confused?

Other Semantic Elements

Still Confused?

FAQ

Next Steps

Resources & More Reading: