gatsby features page

docs/features/gatsby-specs.csv

@@ -0,0 +1,70 @@
+Category,Subcategory,Feature,Gatsby,Jekyll,Wordpress,Squarespace,Description
+Performance,Faster content delivery,Static content,3,3,1,2,"Can you build your site as 'static' files which can be deployed without a server, cached on CDN distributed throughout the globe?
+<ul>
+<li>Gatsby, like Jekyll and other static site generators, is built for this.</li>
+<li>Squarespace allows static content but <a href=""https://developers.squarespace.com/static-pages/"">doesn't allow it</a> to be edited with the CMS.</li> 
+<li>Wordpress allows it with <a href=""https://www.itsupportguides.com/knowledge-base/wordpress/wordpress-how-to-serve-static-content-from-a-cookieless-domain/"">some customization</a>.</li> 
+</ul>"
+,,CDN,2,2,2,3,"<ul>
+<li>CDN-providing hosts like <a href=""www.netlify.com"" target=""_blank"">Netlify</a> support sites built on Gatsby and other static frameworks</li>
+<li>Wordpress allows this through <a href=""https://wordpress.org/plugins/cdn-enabler/"" target=""_blank"">plugins</a>.</li>
+<li>Site builders like Squarespace usually come with a CDN out of the box.</li>
+</ul>"
+,,AMP support,2,2,2,3,"Google's <a href=""https://www.ampproject.org/"" target=""_blank"">AMP format</a> is a specific type of static page format enabling faster loads. AMP pages are privileged in Google search results.
+
+<ul>
+<li><a href=""https://github.com/chiedo/gatsby-amp-starter-blog"" target=""_blank"">Gatsby</a>, <a href=""https://github.com/juusaw/amp-jekyll"">Jekyll</a>, and <a href=""https://wordpress.org/plugins/amp/"">Wordpress</a> all support this through plugins and starter kits.</li>
+<li>Squarespace <a href=""https://blog.squarespace.com/blog/now-supporting-accelerated-mobile-pages"" target=""_blank"">supports this</a>.
+</ul>"
+,Progressive Web,Offline access,3,2,2,0,"Offline access via service workers is one of the core principles of Progressive Web Apps, since many users -- especially in developing countries -- will be accessing your site over spotty connections. 
+
+Gatsby supports this out of the box; adoption is possible with <a href=""https://fossbytes.com/get-jekyll-blog-work-offline/"" target=""_blank"">Jekyll</a> and <a href=""https://wordpress.org/plugins/offline-content/"">Wordpress</a>. Squarespace <a href=""https://answers.squarespace.com/questions/56762/i-need-to-run-a-demo-of-my-squarespace-website-offline.html"">doesn't currently support</a> any offline access."
+,,Prefetch linked pages,3,1,1,0,"<p>Gatsby supports content pre-fetching, out of the box. This means that when a page loads, the content needed to load the next link you click will be loaded in the background while you browse the page.</p>
+
+<p>You can put this together in <a href=""https://stackoverflow.com/questions/9951179/this-is-my-jekyll-with-hash-routing-setup-strategy-is-there-a-better-way"" target=""_blank>Jekyll</a>. The situation is <a href=""https://trevan.co/observations-on-front-end-routing-wordpress/"">considerably more tricky</a> for Wordpress & requires maintaining dual PHP and JS templates.</p> "
+,,Page caching,3,3,2,0,"<p>Fingerprinting static resources that aren't expected to change lets browsers serve content locally when a user visits a page they've already been to, as opposed to making an extra network call.</p>
+<p>Gatsby and Jekyll support this out of the box, while Wordpress allows this via plugins and Squarespace <a href=""https://answers.squarespace.com/questions/173452/enabling-browser-cache-for-sqaurespace-site.html"">doesn't allow it</a> at all.</p>"
+,,No extraneous code fetching,3,3,3,3,Extraneous code fetches is typically done by single-page applications written in various JS frameworks; on page load they fetch the code needed to run the entire application rather than just the page that's loaded. Website-building frameworks tend to be fiine on this.
+,Faster time to interaction,Progressive image loading,3,1,2,0,"<p>Progressive image loading means displaying a blurry placeholder image before loading the full heavyweight asset. This prevents the display from ""bouncing around"" as images load in addition to making the page feel complete before they have.</p>
+
+<p>The most well-known implementation of this is on Medium-hosted blogs. Gatsby comes with this feature out of the box (demo at <a href=""https://using-gatsby-image.gatsbyjs.org/"">using-gatsby-image.gatsbyjs.org</a>); it takes custom per-page code on other code-based platforms.</p>"
+,,Responsive image loading,3,2,3,3,"<p>Responsive images enable modern browsers to load the right size of image assets given browser size -- that way users with high-resolution, large-screen devices can get a high-quality image while users on low-resolution or small-screen devices don't spend extra time waiting for the page to load when a low-resolution asset would suffice. Gatsby comes with this feature out of the box (demo at <a href=""https://using-gatsby-image.gatsbyjs.org/"">using-gatsby-image.gatsbyjs.org</a>).</p>
+
+<p>Wordpress and Squarespace supports this out-of-the-box automatically, while Jekyll requires <a href=""https://github.com/wildlyinaccurate/jekyll-responsive-image"" target =""_blank"">some customization</a>.</p> "
+,,Inlines critical CSS,3,1,1,1,"<p>There's two ways to get CSS on your web page -- inline it with your html, or load it on a separate page referenced in your html. If you reference CSS in a separate page, your client's browser will block page loading until it receives the CSS file. This can delay interactivity by 500ms (on a fast connection), to 3+ seconds on a slow connection.</p>
+
+<p>Gatsby offers this out of the box; in other frameworks it is usually possible but requires a lot of custom code, often written on a per-page basis.</p>"
+,,Font self-hosting,3,3,3,0,"<p>Google Fonts and other open-source font libraries are helpful in building beautiful sites. The hard part is what you don't see -- a page load blocking request to Google's servers. While this request is pretty fast, even faster is hosting fonts on your own server, so you can just load them from your local filesystem. </p>
+
+<p>This is doable with Wordpress and Jekyll; Gatsby <a href=""https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/"">open-sourced a library enabling this</a> for Gatsby and other Javascipt-based apps; it's baked into the framework.</p>"
+Developer Experience,Maintenance & Extensibility,Serverless,3,3,2,2,"<p>Serverless means not having to worry about security and framework upgrades. It means reduced ops -- you don't have to ssh into a live production server and see what's going on.</p>
+
+<p>Hosted is not quite as good as serverless -- they still have a server you just don't see it.</p>"
+,,Export as Code,3,3,3,0,"<p>If your site is built on open-source software, you can change your hosting provider; and customize to your heart's content.</p>
+
+<p>If you use a site-builder, you're locked into a specific platform and a specific provider. If they don't offer a feature you need, your only option is to rebuild your site on a different platform. You also assume additional business risk that the platform goes out of business or moves in a direction different than you had hoped.</p>"
+,Faster edit/debug cycle time,Refresh or link to preview,3,3,3,3,"Refreshing & Click To Preview are standard features of content creation workflows. When you write or edit a post, in order to preview what your content looks like, you click a Preview button, or refresh the page."
+,,Hot reload content,3,1,1,0,"Hot reloading is an innovation of modern web development. As you edit content, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress offers a partial version where content in posts you edit is seen in your editing page as you change the text."
+,,Hot reload code,3,1,0,0,"Hot reloading is an innovation of modern web development. As you edit code, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress does not offer this feature while editing components."
+,Declarative frameworks,Componentization,3,0,3,3,Component systems allow developers to plug-n-play either external 3rd party components or internal components from a shared codebase or component library. Wordpress and Squarespace both support this; Gatsby supports this through React; other static site generators like Jekyll don't offer this at all.
+,,One-way data binding,3,3,1,0,"<p>Gatsby is built on top of React, which uses a one-directional data binding system for its components. One-directional data flows are <a href=""https://www.infoq.com/news/2014/05/facebook-mvc-flux"" target=""_blank"">essential to building complex frontend components</a> by removing complex cross-dependencies present in alternate data flow approaches, such as MVC.</p>
+
+<p>React's one-directional data flow is a pattern, rather than a library, so you <a href=""https://stackoverflow.com/questions/32948971/flux-architecture-in-php-from-backend-perspective"">could in theory</a> implement in PHP / Wordpress, but there's no out-of-the-box solution.</p> "
+,,Declarative API data queries (GraphQL),3,0,2,0,"Gatsby is built on top of GraphQL, which allows you to write declarative queries for the data you want, and co-locate your components. Its build system pulls all of the data in for you, so you can query it in your local GraphiQL IDE / query constructor in order to get data in the shape you're looking for."
+,,Declarative UI,3,0,1,0,"Gatsby is built on top of React, which allows a hierarchical UI construction by declaratively passing props down child trees. When components are behaving oddly, you can inspect their state using the DevTools extension and compare expected state of each element in a hierarchy to the actual state, enabling faster debug cycles compared to alternate frameworks."
+,Modern code syntax,Asset pipelines,3,1,1,0,"<p>Asset pipelines are the compilers of the web stack -- turning images and code in a variety of developer-friendly languages (SCSS, LESS, CSS modules, templates, JSX, JS modules, ES7, ES6, Typescript, Flow...) into minified, raw HTML, CSS and JS that browsers can parse.</p>
+
+<p>Gatsby provides asset pipelining out of the box through its build system on top of Webpack and Babel. Wordpress and Jekyll don't provide this, although you could set up your own. Squarespace has a limited and tightly controlled development environment (no local development) that doesn't allow for creating an asset pipeline.</p>"
+,,CSS Extensions (eg Sass),3,1,1,1,"Languages such as Sass and Less compile to CSS while offering support for variables, functions, hierarchal class definitions; libraries like glamor and aphrodite allow css to be colocated with JS and HTML in React. This solves problems in vanilla CSS like global namespacing, non-determinatism, dead code elimination and minification"
+,,Advanced Javascript syntax,3,1,1,0,"Javascript has become more powerful as a language in the last several years, making it easier to write code. These include:
+<ul>
+<li><b>Syntactic sugar</b>: arrow functions, destructuring, template strings, dynamic object property names.</li>
+<li><b>Language features</b>: Classes, static variables, generators, async control flows like promises & async / await</lI>
+<li><b>Data structures / types and modularity</b>: Maps, sets, modules, module loading, unicode...</li>
+</ul>"
+Ecosystem,Ecosystem,Component ecosystem,3,0,3,0,"React has several sets of out-of-the-box component libraries, as well as curated sets eg <a href=""https://js.coach/react"">JSCoach</a>"
+,,Hosted option,2,2,3,3,Gatsby and other static site generators can be plugged into static hosts such as Netlify or surge.sh. Wordpress and Squarespace both come with built-in hosting.
+,,Theme ecosystem,2,2,3,3,"Gatsby offers various themes through Typography.js, and Jekyll has themes built on it as well. Wordpress and Squarespace offer support for multiple themes through theme selectors out of the box."
+Design,Faster design iterations,Programmatic Design,2,0,0,0,"Gatsby offers support for programmatic design by being built on <a href=""https://kyleamathews.github.io/typography.js/"">Typography.js</a>."
+,,Design systems,2,0,0,0,"Gatsby offers native support for design systems through react-sketch, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem."
+,,Component library,2,0,0,0,"Gatsby offers native support for component libraries through react-sketch, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem."

www/gatsby-config.js

@@ -103,6 +103,7 @@ module.exports = {
         navigateFallbackWhitelist: [],
       },
     },
+    `gatsby-transformer-csv`,
     `gatsby-plugin-twitter`,
     `gatsby-plugin-react-helmet`,
     {

www/package.json

@@ -31,6 +31,7 @@
     "gatsby-remark-responsive-iframe": "^1.4.7",
     "gatsby-remark-smartypants": "^1.4.7",
     "gatsby-source-filesystem": "^1.4.12",
+    "gatsby-transformer-csv":"^1.3.5",
     "gatsby-transformer-documentationjs": "^1.4.6",
     "gatsby-transformer-remark": "^1.7.7",
     "gatsby-transformer-sharp": "^1.6.5",