New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md, and Release #80

Open
d-g-h opened this Issue Aug 1, 2017 · 3 comments

Comments

Projects
None yet
1 participant
@d-g-h
Owner

d-g-h commented Aug 1, 2017

Based on #76

An Update on a Refactor. Updated the site to go through a build, and cognitive reduction by removing Gulp, and the HTML templating setup (Pug/ formerly Jade). This aims to simplify the process of developing and contribution. Webpack coupled with various other plugins (see package.json) helped make the existing site a Progressive Web App (PWA). When I was performing the refactor of the codebase, I used audit scores from Lighthouse as a benchmark, and here we are. Not sure what the next post is, but I imagine it might be about removing Webpack, and using a completely native solution

==Insert image score image==

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#4078c0"/>
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/styles.css">
    <title>d-g-h.co</title>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-31166273-1', 'auto');
    </script>
  </head>
  <body>
    <header>
      <div class="logo"></div>
      <h1><a href="/">d-g-h.co</a></h1>
      <nav>
        <ul>
          <li><a href="https://github.com/d-g-h" class="icon-mark-github">GitHub</a></li>
          <li><a href="https://d-g-h.co/resume/" class="icon-file-text">Resume</a></li>
          <li><a href="https://github.com/d-g-h/dotfiles" class="contribute">.dotfiles</a></li>
          <li><a href="https://github.com/d-g-h/d-g-h.github.com" class="contribute">(View Source/Contribute/Search)</a></li>
        </ul>
      </nav>
    </header>
    <div class="container">
      <h2 id="webpack">Add webpack, or npm install --save-dev refactor</h2>
      <p>An Update on a Refactor. Updated the site to go through a build, and cognitive reduction by removing Gulp, and the HTML templating setup (Pug/ formerly Jade). This aims to simplify the process of developing and contribution. Webpack coupled with various other plugins (see package.json) helped make the existing site a Progressive Web App (PWA). When I was performing the refactor of the codebase, I used <a href="https://github.com/d-g-h/d-g-h.github.com/issues/80#issuecomment-319546295">audit scores</a> from Lighthouse as a benchmark, and here we are. Not sure what the next post is, but I imagine it might be about removing Webpack, and using a completely native solution</p>
      <p>Modified <time datetime="2017-08-31">August 31, 2017</time></p>
      <h2 id="dack">DACK</h2>
      <p><a href="https://github.com/d-g-h/DACK">https://github.com/d-g-h/DACK</a></p>
      <pre><code class="lang-sh">git clone https://github.com/d-g-h/DACK.git</code></pre>
      <pre><code class="lang-sh">vagrant up</code></pre>
      <p>For building sites, for testing real world use, or testing real world use as closely as possible.</p>
      <p><a href="http://www.ansible.com">Ansible</a></p>
      <p><a href="http://docs.ansible.com/playbooks_best_practices.html">Best Practices for Ansible</a></p>
      <p><a href="http://brew.sh">Homebrew</a></p>
      <p><a href="http://www.vagrantup.com">Vagrant</a></p>
      <p><a href="https://www.virtualbox.org">VirtualBox</a></p>
      <p>Install and configure. Install more tools, and take deep dives when necessary.</p>
      <p>Modified <time datetime="2015-10-29">October 29, 2015</time></p>
      <h2 id="gulp-generated-static-site">Gulp Generated Static Site</h2>
      <p><video width="400" height="210" nocontrols="" autoplay loop>
        <source src="https://www.dropbox.com/s/0w5qdbp1z4ku9lj/gulpBrowserSync.webm?raw=1" type="video/webm">
        <source src="https://www.dropbox.com/s/gn841eedzduxlwx/gulpBrowserSync.mp4?raw=1" type="video/mp4">
        Your browser does not support the <code>video</code> element.
      </video></p>
      <pre><code class="lang-sh">gulp
      </code></pre>
      <p>This site is simple. It’s based on <a href="http://daringfireball.net/projects/markdown/syntax#philosophy">an easy-to-read and easy-to-write as is feasible</a> language (markdown) to share information. It can be corrected, or duplicated, or replicated by anyone over at <a href="https://github.com/d-g-h/d-g-h.github.com">https://github.com/d-g-h/d-g-h.github.com</a></p>
      <p>The dependencies are <a href="https://nodejs.org/">node</a>(v5.1.0), and everything in <code>package.json</code>.</p>
      <p>Run</p>
      <pre><code class="lang-sh">npm install
      </code></pre>
      <p>The idea here is to watch for file changes, and then recompile all related styles, scripts, and content.</p>
      <pre><code class="lang-js">import path from &#39;path&#39;;
      import childProcess from &#39;child_process&#39;;
      import gulp from &#39;gulp&#39;;
      import browserSync from &#39;browser-sync&#39;;
      import gulpLoadPlugins from &#39;gulp-load-plugins&#39;;

      const $ = gulpLoadPlugins();
      const reload = browserSync.reload;
      const exec = childProcess.exec;
      const port = &#39;8001&#39;;

      gulp.task(&#39;scripts&#39;, () =&gt; {
        return gulp.src(&#39;assets/js/src/**/*.js&#39;)
          .pipe($.changed(&#39;asset/js/dist&#39;, {extension: &#39;.js&#39;}))
          .pipe($.babel({stage: 1}))
          .pipe($.concat(&#39;main.min.js&#39;))
          .pipe($.uglify({preserveComments: &#39;some&#39;}))
          .pipe(gulp.dest(&#39;assets/js/dist&#39;));
      });

      gulp.task(&#39;styles&#39;, () =&gt; {
        gulp.src(&#39;assets/sass/style.sass&#39;)
          .pipe($.changed(&#39;.&#39;, {extension: &#39;.sass&#39;}))
          .pipe($.sass({
            indentedSyntax: true,
            outputStyle: &#39;compressed&#39;,
            errLogToConsole: true,
            sourceComments: false
          }))
          .pipe($.autoprefixer())
          .pipe(gulp.dest(&#39;.&#39;))
          .pipe(reload({stream: true}));
      });

      gulp.task(&#39;csslint&#39;, () =&gt; {
        gulp.src(&#39;style.css&#39;)
          .pipe($.csslint(&#39;.csslintrc&#39;))
          .pipe($.csslint.reporter());
      });

      gulp.task(&#39;eslint&#39;, () =&gt; {
        gulp.src([&#39;assets/js/src/*.js&#39;, &#39;gulpfile.babel.js&#39;])
          .pipe($.eslint())
          .pipe($.eslint.format());
      });

      gulp.task(&#39;exec&#39;, () =&gt; {
        exec(&#39;pa11y -s Section508 localhost:8001 --color&#39;, (err, stdout, stderr) =&gt; {
          console.log(stdout);
          console.log(stderr);
        });
      });

      gulp.task(&#39;indexJade&#39;, () =&gt; {
        gulp.src(&#39;.templates/index.jade&#39;)
          .pipe($.changed(&#39;.&#39;, {extension: &#39;.jade&#39;}))
          .pipe($.jade({
            pretty: true
          }))
          .pipe(gulp.dest(&#39;.&#39;))
          .pipe(reload({stream: true}));
      });

      /*
       *Here let&#39;s create, and maintain the content in .content
       *Once, we are ready to go, we can feature it in the .template/index.jade,
       *and/or we can add a new directory (named after the title), and copy of
       *over the layout with specific .content that matches. The task below will
       *generate the .html in the same directory four times a year.
       */

      gulp.task(&#39;postsJade&#39;, () =&gt; {
        gulp.src(&#39;posts/**/*.jade&#39;)
          .pipe($.tap( file =&gt; {
            let filename = path.basename(file.path);
            let dirname  = path.basename(path.dirname(file.path));
            return gulp.src(file.path)
            .pipe($.jade({
              pretty: true,
              name: filename
            }))
            .pipe(gulp.dest(&#39;posts/&#39; + dirname));
          }))
          .pipe(reload({stream: true}));
      });

      gulp.task(&#39;resumeJade&#39;, () =&gt; {
        gulp.src(&#39;resume/*.jade&#39;)
          .pipe($.jade({
            pretty: true
          }))
          .pipe(gulp.dest(&#39;resume&#39;))
          .pipe(reload({stream: true}));
      });

      gulp.task(&#39;browser-sync&#39;, () =&gt; {
        browserSync.init({
          server: true,
          notify: false,
          ghostMode: {
            clicks: true,
            forms: true,
            scroll: true
          },
          logConnections: true,
          open: false,
          port: port
        });
      });

      gulp.task(&#39;watch&#39;, () =&gt; {
        gulp.watch([&#39;assets/**/*.js&#39;, &#39;gulpfile.babel.js&#39;], { interval: 500 }, [&#39;eslint&#39;, &#39;styles&#39;]);
        gulp.watch(
          [
            &#39;.content/**/*.md&#39;,
            &#39;**/*.jade&#39;,
            &#39;.templates/**/*.jade&#39;
          ],
          { interval: 500 },
          [
            &#39;indexJade&#39;,
            &#39;postsJade&#39;,
            &#39;exec&#39;
          ]
        );
        gulp.watch(&#39;assets/sass/**/*&#39;, { interval: 500 }, [&#39;styles&#39;]);
        gulp.watch(&#39;style.css&#39;, { interval: 500 }, [&#39;csslint&#39;]);
      });

      // Default Task
      gulp.task(&#39;default&#39;, [
        &#39;styles&#39;,
        &#39;scripts&#39;,
        &#39;csslint&#39;,
        &#39;eslint&#39;,
        &#39;indexJade&#39;,
        &#39;postsJade&#39;,
        &#39;browser-sync&#39;,
        &#39;exec&#39;,
        &#39;watch&#39;
      ]);
      </code></pre>
      <p>Modified <time datetime="2015-11-24">November 24, 2015</time></p>

    </div>
    <script src="vendor.js"></script>
    <script src="main.js"></script>
  </body>
</html>

@d-g-h d-g-h self-assigned this Aug 1, 2017

@d-g-h d-g-h changed the title from Update README.md to Update README.md, and Release Aug 1, 2017

d-g-h added a commit that referenced this issue Aug 1, 2017

d-g-h added a commit that referenced this issue Aug 1, 2017

d-g-h added a commit that referenced this issue Aug 2, 2017

d-g-h added a commit that referenced this issue Aug 2, 2017

d-g-h added a commit that referenced this issue Aug 2, 2017

@d-g-h

This comment has been minimized.

Show comment
Hide comment
@d-g-h
Owner

d-g-h commented Aug 2, 2017

screenshot 2017-08-01 21 56 50

@d-g-h

This comment has been minimized.

Show comment
Hide comment
Owner

d-g-h commented Sep 2, 2017

@d-g-h d-g-h closed this Sep 2, 2017

@d-g-h d-g-h reopened this Jan 23, 2018

@d-g-h

This comment has been minimized.

Show comment
Hide comment
@d-g-h

d-g-h Mar 5, 2018

Owner

Update.

Owner

d-g-h commented Mar 5, 2018

Update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment