<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="UTF-8">
    <title> - My Blog Post</title>
    <meta name="description" content="Integer quis felis leo. Suspendisse elementum.">
    <link rel="alternate" type="application/rss+xml" title="MicahGodbolt.com Feed" href="/rss.xml" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="/css/main.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="/assets/img/favicon.ico">
</head>

<body>
    <div class="page">
        <div class="header">
            <nav class="nav">
                <h1 class="nav-title"><a class="nav-link" href="/">Micah Godbolt</a></h1>
                <ul class="nav-container">
                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/about.html">About Me</a></li>
                    <li class="nav-item"><a class="nav-link" href="/talks.html">Talks</a></li>
                    <li class="nav-item"><a target="_blank" class="nav-link" href="http://fea.pub">Book</a></li>

                </ul>
            </nav>
        </div>
        <div class="body">
            <article>
                <header>
                    <h1 class="post-title">My Blog Post</h1>
                    <time class="post-postedOn" datetime="01/05/2017">Posted on: <span class="post-date">01/05/2017</span></time>
                </header>
                Integer quis felis leo. <a href="#">Suspendisse elementum</a>, elit consectetur maximus blandit, lectus leo euismod ipsum, quis efficitur erat augue ut lorem. Duis convallis dictum pellentesque. Quisque eget quam finibus, eleifend odio
                eget, hendrerit dui. Ut bibendum justo id ex interdum eleifend. Morbi vel magna a lectus dictum dapibus. Aliquam ac tellus posuere risus suscipit vehicula. Sed pharetra fermentum accumsan. Ut malesuada justo mi, at suscipit sapien auctor
                quis.
                <h3 id="converting-our-markdown-to-html">Converting our Markdown to HTML</h3>
                <p>To convert our markdown file to an HTML file we need to go back to the <code>use()</code> function and invoke the <code>markdown()</code> plugin. There aren't any settings we need to fiddle with right now, just <code>.use(markdown())</code>                    and we're good to go.</p>
                <pre><code class="lang-js">metalsmith = Metalsmith(__dirname)
    .use(markdown())
    .use(function(files, metalsmith, done) {
        console.log(files);
        console.log(metalsmith);
        done();
    })
    .build(function(err){
        if (err) throw err;
    });
</code></pre>
                <h2 id="the-many-faces-of-frontend-design">The many faces of Frontend Design</h2>
                <ul>
                    <li>UI Developer</li>
                    <li>Client Side Developer</li>
                    <li>UI Engineer</li>
                    <li>Design Engineer</li>
                    <li>Designer/Developer</li>
                    <li>Prototyper</li>
                    <li>Frontend Architect</li>
                </ul>
                <h3 id="if-dante-were-a-developer-he-d-be-a-frontend-designer">If Dante were a developer, he'd be a Frontend Designer</h3>
                <ol>
                    <li>Need to be skilled in UX, yet we are not UX developers</li>
                    <li>Need to have an eye for design, yet we are not visual designers</li>
                    <li>Need to have a mastery with JavaScript, yet we are not JavaScript Developers</li>
                    <li>Need to understand the role of our server side code and infrastructure, yet we are neither backend developers or sysops engineers.</li>
                </ol>

            </article>
        </div>
        <div class="footer">
            <h2>Follow Along:</h2>
            <nav>
                <ul>
                    <li><a href="http://www.twitter.com/micahgodbolt">Twitter</a></li>
                    <li><a href="http://www.github.com/micahgodbolt/micahgodbolt.com">Github</a></li>
                    <li><a href="https://library.micahgodbolt.com">Pattern Library</a></li>
                    <li><a href="https://micahgodbolt.com/rss.xml">RSS</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

</html>
{% extends '@page' %}

{% block header %}
    {% include '@navigation' %}
{% endblock %}
    
{% block body %}
    {% include '@post' %}
{% endblock %}

{% block footer %}
   {% include '@footer' %}
{% endblock %}
{
  "title": "My Blog Post",
  "published": "2017-01-05",
  "contents": "Integer quis felis leo. <a href=\"#\">Suspendisse elementum</a>, elit consectetur maximus blandit, lectus leo euismod ipsum, quis efficitur erat augue ut lorem. Duis convallis dictum pellentesque. Quisque eget quam finibus, eleifend odio eget, hendrerit dui. Ut bibendum justo id ex interdum eleifend. Morbi vel magna a lectus dictum dapibus. Aliquam ac tellus posuere risus suscipit vehicula. Sed pharetra fermentum accumsan. Ut malesuada justo mi, at suscipit sapien auctor quis.\n<h3 id=\"converting-our-markdown-to-html\">Converting our Markdown to HTML</h3>\n<p>To convert our markdown file to an HTML file we need to go back to the <code>use()</code> function and invoke the <code>markdown()</code> plugin. There aren't any settings we need to fiddle with right now, just <code>.use(markdown())</code> and we're good to go.</p>\n<pre><code class=\"lang-js\">metalsmith = Metalsmith(__dirname)\n    .use(markdown())\n    .use(function(files, metalsmith, done) {\n        console.log(files);\n        console.log(metalsmith);\n        done();\n    })\n    .build(function(err){\n        if (err) throw err;\n    });\n</code></pre>\n<h2 id=\"the-many-faces-of-frontend-design\">The many faces of Frontend Design</h2>\n<ul>\n    <li>UI Developer</li>\n    <li>Client Side Developer</li>\n    <li>UI Engineer</li>\n    <li>Design Engineer</li>\n    <li>Designer/Developer</li>\n    <li>Prototyper</li>\n    <li>Frontend Architect</li>\n</ul>\n<h3 id=\"if-dante-were-a-developer-he-d-be-a-frontend-designer\">If Dante were a developer, he'd be a Frontend Designer</h3>\n<ol>\n    <li>Need to be skilled in UX, yet we are not UX developers</li>\n    <li>Need to have an eye for design, yet we are not visual designers</li>\n    <li>Need to have a mastery with JavaScript, yet we are not JavaScript Developers</li>\n    <li>Need to understand the role of our server side code and infrastructure, yet we are neither backend developers or sysops engineers.</li>\n</ol>\n",
  "excerpt": "Integer quis felis leo. Suspendisse elementum."
}

There are no notes for this item.