Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Youtube

Github Stackoverflow Pinterest

Version controlled simplicity


Overview

Static is Cool Now

Here is why building a static site is now “cool” (popular, interesting, etc.).

When someone types in a URL on a web browser and lands on a website built using WordPress, Drupal, or other CMS (Content Management System), that user waits while the web server make calls to a database and builds the HTML to send back.

Static sites are faster for several reasons.

  1. There is no time lost generating HTML dynamically. There is no time lost calling a database. The web page sent to a visitor is direct response to the URL requested.

    Personalization is done by JavaScript running on the user’s machine, calling web services APIs (Application Programming Interfaces).

  2. The HTML file can be spread out around the world in a CDN (Content Distribution Network) such as Amazon S3. This reduces network latency.

    Reduction in cost of CDNs via Amazon S3, CloudFlair, Fastly, etc. vs. the enterprise Akamai makes this possible.

    Due to less processing, the website is also more scalable, able to handle a much larger number of visitors.

Fraction of a Second to First Byte

Techniques described on this website achieve the fastest possible loading speed, world-wide:
https://performance.sucuri.net/domain/wilsonmar.github.io

wm-fast-20161020-650x366-214kb.jpg
(Click here for new window containing higher resolution image)

“JAM” Stack

Static sites are called “JAM stack” for

  • JavaScript,
  • API calls (to various 3rd party sites rather than local databases), and
  • Markup text stored in GitHub then built into HTML and stored in CDN.

Video: The JAM Stack 16 April 2016 by Mathias Billmann (@Billmann at Netlify.com)



  • https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/

jamstack.org comments on the drivers for the JAM stack:

“Today browsers are the operating system of the web, and are able to run complex applications completely client side. They are capable of consuming and interacting with an ever growing amount of APIs and services across domains and infrastructures. CDNs (Content Delivery Networks) have gone from being a luxury only large corporations could afford, to being the natural way to cut down the time to first byte for sites and apps of all sizes. Deployment models have shifted from cumbersome manual uploads to automated processes triggered by ever-present version control systems.”

API Calls

The rise of APIs has removed many of the limitations of static HTML:

  • Discourse for visitor comments
  • Lunr.js for search
  • Stripe for e-commerce

The downside

  1. Some feel git version control is a hassle to use.

  2. Some prefer the WSIWYG editors like Microsoft Word over text editors and writing markdown code.

    However, CloudCannon.com enables users to create a Jekyll site that presents Visual Editor forms for editing text in context of background graphics.

  3. Since Jekyll and other static platforms are newer than WordPress, Drupal, etc. there are not as much of a diversity in themes and plug-ins available.

Tools to generate static websites

I’ve configured a few, but most recently:

  • Jekyll is the most popular among static website generation tools largely because GitHub.io websites are hosted automatically, and free, from repositories in GitHub.com.

Much like what wordpress.org provides, but with the git version control added – a crucial feature.

Surveys are:

Sites using this approach

React-driven generation of SPA pages

https://phenomic.io, generates html from .md files containing yaml like Jekyll, but instead of template code, it processes standard templating in React.js with Webpack does the generation.

Coding JavaScript in ES6 is possible because Babel or PostCSS or CSSNext enables can translate the ES6 code back to ES5 so that current websites work.

  • ESLint for JavaScript and
  • Stylelint for CSS

Phenomic_app is rather young. Its @Phenomic_app on Twitter had 130 followers as of July 6, 2016.

Its advantage is that it generates SPA (Singe Page App) JavaScript which initially loads just enough to display on the page (so it’s faster than loading the whole HTML file). More importantly, additional pages are downloaded as needed in response to user action such as scrolling.

When a link or a button is clicked by a visitor, JavaScript running on the page updates the address bar, but the whole web page is not refreshed. Management of the address bar is done by the router JavaScript library.

Use of React means changes to markup is instantly reflected on the web page display.

See video: “A static website with React? Really?” on 25 May 2016 by Maxime Thirouin

There are several router libraries in the React ecosystem. The most popular router is react-router.

Social:

  • @MoOx (from France) is its creator.

Webpack

  • https://github.com/petehunt/react-webpack-template
  • https://github.com/petehunt/webpack-howto

  • https://webpack.github.io/docs/list-of-plugins.html#dllplugin
  • https://gist.github.com/robertknight/058a194f45e77ff95fcd
  • https://github.com/mxstbr/react-boilerplate/pull/495/files
  • https://github.com/FrendEr/webpack-optimize-example/tree/master/dll-bundles

Most people (including Facebook) are using React.createClass() rather than JSX.

  1. Use npm to download phenomic into present working directory:

    npm i phenomic

    This takes several minutes to download from
    https://github.com/MoOx/phenomic

  2. Install phenomic using npm:

    ./node_modules/.bin/phenomic setup

    Note: All values can be adjusted later.
    ? Dashed name of your project (eg: my-project) 
    
  3. Type “phenomic” and press Enter for:

    ? Website url (eg: http://abc.xyz/) 
    
  4. Type URL for:

    ? Repository url (eg: https://github.com/MoOx/phenomic.git, optional) 
    ? Twitter nickname (eg: MoOx, optional) 
    ? Do you want a CNAME file (eg: for GitHub Pages)? No
    Generated package.json file
    Copied boilerplate
    Setup done. Now run "npm install" to get started
    

    These can be changed later by editing the package.json file.

  5. Install npm

    npm i && npm start

  6. Start npm:

    npm start –devPort=3001

    Without the extra parameter, this starts a web page on port 3000 by default. The response:

    
      
  7. Edit the configuration file (subsituting vim with atom, subl, or other text editor):

    vim package.json

    “stage-1” refers to ES7.

    See https://phenomic.io/docs/usage/configuration/

  8. Run tests:

    npm test

Edit this site

The built site has a Edit this link to the GitHub repo file.

  • https://github.com/MoOx/phenomic/edit/master/docs/content/showcase.md

  • https://github.com/petehunt/react-howto

Footnotes

People who have commented on this include:

Resources

More on front-end styling

This is one of several topics:

  1. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling

  10. Email from website
  11. Search within Hyde format Jekyll websites
  12. Windows Tile Pin Picture to Website Feed

  13. Data Visualization using Tableau