diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md index 3402029dd9c94..404b9201c14c9 100644 --- a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md +++ b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md @@ -27,7 +27,7 @@ generated content. Gatsby [recently released][gatsby-release] a v1.0.0 with a bunch of new features, including (but not limited to) the ability to create content queries with GraphQL, integration with various CMSs--including WordPress, Contentful, -Drupal, etc., and route based code splitting to keep the end-user experience as +Drupal, etc., and route based code splitting to keep the end user experience as snappy as possible. In this post, we'll take a deep dive into Gatsby and some of these new features by creating a static blog. Let's get on it! diff --git a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md index f4e8b051c5466..e3076aba6057a 100644 --- a/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md +++ b/docs/blog/2017-11-09-why-i-created-my-blog-with-gatsby-and-contentful/index.md @@ -338,6 +338,6 @@ paradigms like Serverless, I predict it could be very far. But whatever that limit is, I am quite sure that this is a step in the right direction towards making the web a safer, faster and more enjoyable experience -for both developers and end-users. +for both developers and end users.

via GIPHY

diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md index 173c8f585617a..7d19fac928ba5 100644 --- a/docs/blog/2018-1-18-strapi-and-gatsby/index.md +++ b/docs/blog/2018-1-18-strapi-and-gatsby/index.md @@ -10,11 +10,11 @@ tags: ["blogs", "cms", "headless-cms", "getting-started"] ![Showing the idea of using Gatsby with Strapi ](gatsby-strapi.png) -A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any back-end programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster. +A static website contains Web pages with fixed content. Technically, it is a simple list of HTML files, which displays the same information to every visitor. Unlike dynamic websites, they do not require any backend programming or database. Publishing a static website is easy: the files are uploaded on a simple Web server or storage provider. The two main advantages of static websites are security and speed: there is no database so it can not be hacked and there is no need to render a page for each request, which makes Web browsing faster. To make their creation easier, numerous open-source static websites generators are available: [Jekyll](https://jekyllrb.com/), [Hugo](https://gohugo.io/), [Hexo](https://hexo.io/), etc. Most of the time, the content is managed through static (ideally Markdown) files or a Content API. Then, the generator requests the content, injects it in templates defined by the developer and generates a bunch of HTML files. -Progressive Web Apps (PWA) are web applications, highly based on JavaScript, and are [reliable, fast and engaging](https://developers.google.com/web/progressive-web-apps/). Since they make web browsing much faster and offer a better user experience, PWA have become the default way to build Web interfaces. Thus, many amazing front-end frameworks appeared over the last couple years: Angular, React and more recently, Vue. +Progressive Web Apps (PWA) are web applications, highly based on JavaScript, and are [reliable, fast and engaging](https://developers.google.com/web/progressive-web-apps/). Since they make web browsing much faster and offer a better user experience, PWA have become the default way to build Web interfaces. Thus, many amazing frontend frameworks appeared over the last couple years: Angular, React and more recently, Vue. > Gatsby: when static websites meet Progressive Web Apps @@ -32,7 +32,7 @@ Created by [Kyle Mathews](https://twitter.com/kylemathews), the project was offi ## What is Strapi? -[Strapi](https://strapi.io) is an _open source **Headless CMS Front-End Developers Love**_. It's more than a [Node.js Framework and more than a Headless CMS](https://strapi.io/overview), it saves weeks of API development time, and allows easy long-term content management through a beautiful administration panel _anyone can use_. +[Strapi](https://strapi.io) is an _open source **Headless CMS Frontend Developers Love**_. It's more than a [Node.js Framework and more than a Headless CMS](https://strapi.io/overview), it saves weeks of API development time, and allows easy long-term content management through a beautiful administration panel _anyone can use_. ![The Strapi Logo](logo-strapi.png) diff --git a/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md b/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md index b3d476ac85458..38c477240aba3 100644 --- a/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md +++ b/docs/blog/2018-1-24-creative-software-destruction-new-presentation-layer/index.md @@ -15,7 +15,7 @@ This process of creative destruction tends to begin within the infrastructure se ## Where Have We Come From? -During the late-1980s the industry converged around the client-server model. While there were challengers, eventually Windows (it took until version 3.1!) emerged as the dominant end-user client environment. The applications in this era were relatively small, specific to a single operating system, and typically built for hundreds or thousands of users. In designing these applications, the choice was really whether you put the business logic directly into the client application or pushed it down into the database. Unix systems became the dominant server platforms largely based upon database performance requirements. +During the late-1980s the industry converged around the client-server model. While there were challengers, eventually Windows (it took until version 3.1!) emerged as the dominant end user client environment. The applications in this era were relatively small, specific to a single operating system, and typically built for hundreds or thousands of users. In designing these applications, the choice was really whether you put the business logic directly into the client application or pushed it down into the database. Unix systems became the dominant server platforms largely based upon database performance requirements. The availability of the internet, and the birth of the browser — thank you, Marc Andreessen — greatly simplified cross-platform client development. However, these new applications now had to support several orders of magnitude more users. Consequently, several new tiers were added to the architecture: the web server and the application server. The web server and associated proxies and load balancers provided a stateless layer to handle the presentation layer. The application server became the obvious place for the business logic and to manage the interaction with the (typically relational) database server. diff --git a/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md b/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md index b25d235346e29..64f9a62d7bb63 100644 --- a/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md +++ b/docs/blog/2018-10-04-journey-to-the-content-mesh/index.md @@ -53,7 +53,7 @@ Change is being spurred by the confluence of three revolutions in how we create These technological changes have made modern web technology both _essential_ for creating fresh, novel, and engaging digital experiences, and _more accessible_ for the enterprise. -Each change primarily affects a different stakeholder --- marketing, development/IT, and the end-user, respectively. +Each change primarily affects a different stakeholder --- marketing, development/IT, and the end user, respectively. The key challenge is that without a content mesh, integrating these systems together is a lot of work. Forrester titled one of their [report sections](https://www.tangomodem.com/wp-content/uploads/2017/09/the-rise-of-the-headless-cms.pdf): "Warning: Headless Content Management Is For Do-It-Yourself Shops." But _with_ a content mesh, all of these systems can be brought together in a unified, low-cost, low-defect whole. diff --git a/docs/blog/2018-11-07-gatsby-for-apps/index.md b/docs/blog/2018-11-07-gatsby-for-apps/index.md index f6e919b3c3e8b..dec3b9554e79e 100644 --- a/docs/blog/2018-11-07-gatsby-for-apps/index.md +++ b/docs/blog/2018-11-07-gatsby-for-apps/index.md @@ -178,7 +178,7 @@ Next: let's compare and contrast the end user experience of fetching authenticat ### The App Shell -In merely adding the [`gatsby-plugin-offline`][gatsby-plugin-offline] plugin, we enable a fully-featured, progressive web application that works offline and creates an app shell by registering a service worker. An app shell is essentially separate components of your application (e.g. header, footer, sidebar, etc.) that are instantly available from a service worker while dynamic content is fetched in the background. This creates a great end-user experience, as the application is able to visually populate instantly as data loads into place in the background. +In merely adding the [`gatsby-plugin-offline`][gatsby-plugin-offline] plugin, we enable a fully-featured, progressive web application that works offline and creates an app shell by registering a service worker. An app shell is essentially separate components of your application (e.g. header, footer, sidebar, etc.) that are instantly available from a service worker while dynamic content is fetched in the background. This creates a great end user experience, as the application is able to visually populate instantly as data loads into place in the background. If we consider this approach, the technique looks like the following: @@ -213,7 +213,7 @@ Additionally, Gatsby Mail shows some specific web application functionality, suc - GraphQL at build time and _run time_ utilizing a remote GraphQL API and [apollo-boost][apollo-boost], and - loading an app shell with `gatsby-plugin-offline` (check out the "Fast 3G" example below!) -and even a light/dark theme, because why not! You can see all of these concepts unify to form this great end-user experience in the below example with a simulated fast 3G connection. The app shell (header, footer, etc.) loads into place _instantly_ as the dynamic content is fetched (from the remote GraphQL API!) in the background. +and even a light/dark theme, because why not! You can see all of these concepts unify to form this great end user experience in the below example with a simulated fast 3G connection. The app shell (header, footer, etc.) loads into place _instantly_ as the dynamic content is fetched (from the remote GraphQL API!) in the background. ![App Shell with Gatsby Mail](./images/gatsby-mail-app-shell.gif) diff --git a/docs/blog/2018-12-17-ibm-case-study/index.md b/docs/blog/2018-12-17-ibm-case-study/index.md index 56eba617186aa..2438d9a8db996 100644 --- a/docs/blog/2018-12-17-ibm-case-study/index.md +++ b/docs/blog/2018-12-17-ibm-case-study/index.md @@ -25,7 +25,7 @@ The main goals for the new site were simple: ## Easy onboarding with Gatsby -Alison Joseph, Front-End Developer at IBM, took over this project from a coworker who had already done great work choosing the framework for the website rebuild. Taking on a new project mid-stream can be daunting but Alison found the Gatsby documentation was top notch and better than any other open source docs she’s seen. +Alison Joseph, Frontend Developer at IBM, took over this project from a coworker who had already done great work choosing the framework for the website rebuild. Taking on a new project mid-stream can be daunting but Alison found the Gatsby documentation was top notch and better than any other open source docs she’s seen. Alison was the only developer able to focus full-time on the Gatsby project and it took about six months before the new site launched in October 2018. She’s quick to point out if they had gone the custom, in-house route, the project would have easily taken twice as long and required more than one developer. diff --git a/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md b/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md index 7beec9ebfd01b..778c960ee25ec 100644 --- a/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md +++ b/docs/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/index.md @@ -20,7 +20,7 @@ In this post, I want to explain how Gatsby led me into learning React and how yo ## The beginnings -When I first discovered Gatsby two years ago, React was already quite popular. I decided to learn it to get more into modern front-end development and to step up my game. Before that I did **static** HTML/CSS/JS websites with the help of SCSS and Gulp. I never used a server-side scripting language (e.g. PHP) or a scripting engine (e.g. Nunjucks). So this was a big step, wasn't it? +When I first discovered Gatsby two years ago, React was already quite popular. I decided to learn it to get more into modern frontend development and to step up my game. Before that I did **static** HTML/CSS/JS websites with the help of SCSS and Gulp. I never used a server-side scripting language (e.g. PHP) or a scripting engine (e.g. Nunjucks). So this was a big step, wasn't it? Gatsby offers you a playground to learn React. diff --git a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md index 9c9e651c8bbed..2d00679221eb8 100644 --- a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md +++ b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md @@ -9,7 +9,7 @@ tags: ["react", "graphql", "content-mesh"] I have to admit I have never really been a fan of JavaScript. I know, shame on me! When I was finishing my studies, I was all about .NET as it was easy to understand, debugging capabilities came with Visual Studio out-of-the-box, and the inheritance and objects model was simple. I looked at JavaScript with thoughts like "what kind of language would allow you to create objects freely, clone them, add functions to only specific instances or allow anyone to see the source code?" -It was during the first years of my development time that I needed to use something on the front-end to enrich user experience on a client's project. That something was the first version of Angular and believe it or not; I loved it. Angular made it so easy to build a UI communicating with .NET backend. At some point, I think I even owned a mug with NG on it. +It was during the first years of my development time that I needed to use something on the frontend to enrich user experience on a client's project. That something was the first version of Angular and believe it or not; I loved it. Angular made it so easy to build a UI communicating with .NET backend. At some point, I think I even owned a mug with NG on it. A few years ago I heard about static sites for the first time from a friend of mine who was very enthusiastic about them, especially their performance. I thought it was a nice idea, but very fresh at the time and with only a small community around it. It was earlier this year when I met some awesome guys from the [Gatsby community in Berlin](http://bit.ly/2ClmzcT) that changed everything for me. @@ -19,9 +19,9 @@ The great presentation by Callum MacDonald explained basic Gatsby features and p ## Why static site? -One of the websites in our company stack is [Kentico Advantage](http://bit.ly/2T0ynXJ). It is a content-oriented website where we provide our customers with our own methodology on how to build amazing and successful websites with traditional CMS. The website was originally also built on top of a traditional CMS until we switched to MVC during this year. We did that to be able to use a [headless CMS](/docs/headless-cms/) as content storage and drop all the pieces that required maintenance like the database server. The business logic was in the MVC layer and we hosted the front-end on Microsoft Azure. +One of the websites in our company stack is [Kentico Advantage](http://bit.ly/2T0ynXJ). It is a content-oriented website where we provide our customers with our own methodology on how to build amazing and successful websites with traditional CMS. The website was originally also built on top of a traditional CMS until we switched to MVC during this year. We did that to be able to use a [headless CMS](/docs/headless-cms/) as content storage and drop all the pieces that required maintenance like the database server. The business logic was in the MVC layer and we hosted the frontend on Microsoft Azure. -So why did I decide to make Kentico Advantage a static site? A key aspect was performance. We wanted to enable our clients to access the site while being on-site with their customers, using mobile devices and a slow internet connection. I personally wanted the source code to be as little as possible, in a language that everyone would understand. I won't be the only developer on the project for eternity and we tend to have more front-end developers in-house these days. And obviously I did not want to spend months on it. With Gatsby we were fine on all those counts. I was not familiar with React all that much before, but having the site content-oriented and well structured, the implementation was a piece of cake. Saving money on server costs was a nice side-effect, but more on that later. +So why did I decide to make Kentico Advantage a static site? A key aspect was performance. We wanted to enable our clients to access the site while being on-site with their customers, using mobile devices and a slow internet connection. I personally wanted the source code to be as little as possible, in a language that everyone would understand. I won't be the only developer on the project for eternity and we tend to have more frontend developers in-house these days. And obviously I did not want to spend months on it. With Gatsby we were fine on all those counts. I was not familiar with React all that much before, but having the site content-oriented and well structured, the implementation was a piece of cake. Saving money on server costs was a nice side-effect, but more on that later. ## Why Content-as-a-Service? diff --git a/docs/blog/2019-01-09-gatsby-days-talks-are-here.md b/docs/blog/2019-01-09-gatsby-days-talks-are-here.md index 9740e670e836d..baeaf93f11b8d 100644 --- a/docs/blog/2019-01-09-gatsby-days-talks-are-here.md +++ b/docs/blog/2019-01-09-gatsby-days-talks-are-here.md @@ -26,4 +26,4 @@ Get caught up on all the latest presentations from Gatsby Days in Mountain View, [How Gatsby Does High-Impact, Low-Effort UX Research (and You Can Too!)](https://www.gatsbyjs.com/gatsby-days-UXresearch-shannon/) by **Shannon Soper**, UX Specialist and Head of Learning, Gatsby -[Move Fast, Don't Break Things: Trends in Modern Web Development with Mediacurrent](https://www.gatsbyjs.com/gatsby-days-mediacurrent-ben/) by **Ben Robertson**, Front-End Developer, Mediacurrent +[Move Fast, Don't Break Things: Trends in Modern Web Development with Mediacurrent](https://www.gatsbyjs.com/gatsby-days-mediacurrent-ben/) by **Ben Robertson**, Frontend Developer, Mediacurrent diff --git a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md index 5f6d1c0691bba..b86ad87985478 100644 --- a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md +++ b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md @@ -8,23 +8,23 @@ image: "./images/ghost-headless-feature-image.png" showImageInArticle: true --- -There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years. At [Ghost](https://ghost.org/), we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed. +There has been a lot of progress around static site generators, frontend frameworks and API-centric infrastructure in recent years. At [Ghost](https://ghost.org/), we’ve been building open source technology for modern publishing for over 5 years and as a developer-centric team, the momentum around static sites didn’t go unnoticed. -Wildly fast websites which have no back end and can be deployed just about anywhere felt very much like the future. So I’m thrilled to share that with the recent updates to the Ghost API, it’s now possible to use Ghost as a completely decoupled headless CMS and bring your own front-end written in Gatsby.js! +Wildly fast websites which have no back end and can be deployed just about anywhere felt very much like the future. So I’m thrilled to share that with the recent updates to the Ghost API, it’s now possible to use Ghost as a completely decoupled headless CMS and bring your own frontend written in Gatsby.js! ## API driven publishing -Ghost has always been architected into 3 distinct areas: A core Node.js API, an Ember.js Admin client, and a speedy Handlebars.js front-end theme layer. Until now those 3 areas have been fairly tightly coupled, so it hasn't been possible to use them separately. +Ghost has always been architected into 3 distinct areas: A core Node.js API, an Ember.js Admin client, and a speedy Handlebars.js frontend theme layer. Until now those 3 areas have been fairly tightly coupled, so it hasn't been possible to use them separately. ![](./images/ghost-core-1.png) -Our latest updates allow you to completely replace the default Handlebars theme layer in favor of a front-end framework, so you can use Gatsby to build your site statically from the Ghost API. +Our latest updates allow you to completely replace the default Handlebars theme layer in favor of a frontend framework, so you can use Gatsby to build your site statically from the Ghost API. ## Why use a headless CMS? Many developers use static site generators alongside locally stored Markdown files, using a code editor to create content and a GIT workflow to publish. While this works great and is suitable for some sites, it quickly becomes unmanageable for publishers that need to scale, or teams that are not solely developers. -This is where a [headless CMS](/docs/headless-cms/) comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static front-end. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips. +This is where a [headless CMS](/docs/headless-cms/) comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static frontend. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips. When you look at the bigger picture of the [content mesh](/blog/2018-10-04-journey-to-the-content-mesh/), it really starts to feel like an inevitable future for building publishing websites. @@ -46,6 +46,6 @@ We’ve also introduced an official [Netlify integration](https://docs.ghost.org ## Publishing on the JAMstack -I’m really excited to see what people build with these new technologies. The concept of having just one front-end and many APIs all connected together and served as a single site or application with Gatsby opens up so much opportunity in the publishing space. +I’m really excited to see what people build with these new technologies. The concept of having just one frontend and many APIs all connected together and served as a single site or application with Gatsby opens up so much opportunity in the publishing space. If you want to give it a try with Ghost, sign up for a free trial account at [Ghost.org](https://ghost.org/pricing/) and use our official Gatsby plugin + starter to put it through it’s paces! diff --git a/docs/blog/2019-01-24-swag-store/index.md b/docs/blog/2019-01-24-swag-store/index.md index bf670c2211366..a39ba03201107 100644 --- a/docs/blog/2019-01-24-swag-store/index.md +++ b/docs/blog/2019-01-24-swag-store/index.md @@ -235,9 +235,9 @@ The top section lists each tool that we’re using to manage and automated the s - Each **hexagon** is a question that the framework needs to ask to decide how to move forward -In this process, just like any site, we have a front-end that people see, and a backend that people don’t. +In this process, just like any site, we have a frontend that people see, and a backend that people don’t. -In this case, the front-end was the process that people went through to order and get their swag. +In this case, the frontend was the process that people went through to order and get their swag. And the backend was the systems design, tools, and automation triggers that handled all the requests and process. diff --git a/docs/blog/2019-01-30-flamingo-case-study/index.md b/docs/blog/2019-01-30-flamingo-case-study/index.md index 4c3390338af21..b73f48ac6cb39 100644 --- a/docs/blog/2019-01-30-flamingo-case-study/index.md +++ b/docs/blog/2019-01-30-flamingo-case-study/index.md @@ -38,7 +38,7 @@ The manual process required to make the Harry’s website perform was what they Since Gatsby simply serves html files that are hosted on the edge (CDN: Content Delivery Network), this dramatically improves SEO. The developers can focus on other things because Gatsby just takes care of the performance. The team was excited about the image support from Gatsby that is “out-of-the-box.” They didn’t have to write code in-house, which was game changing for a team looking to lead in mobile-optimized shopping. -The Flamingo team also wanted to shake things up with content and image design by providing the fastest, most seamless shopping experience. Gatsby’s image handling helps reduce raw image sizes and speed up page load times, and serves the right resolution image depending on different screen sizes. This gave the front-end developers the ability to go beyond JS to focus on edge hosting and optimization. With a site driven by modern development tools, Gatsby’s out-of-the-box image support is the cherry on top for Flamingo. “We don’t have to write the code ourselves!” said Johnny. +The Flamingo team also wanted to shake things up with content and image design by providing the fastest, most seamless shopping experience. Gatsby’s image handling helps reduce raw image sizes and speed up page load times, and serves the right resolution image depending on different screen sizes. This gave the frontend developers the ability to go beyond JS to focus on edge hosting and optimization. With a site driven by modern development tools, Gatsby’s out-of-the-box image support is the cherry on top for Flamingo. “We don’t have to write the code ourselves!” said Johnny. The duo also praised the ease of getting up to speed on Gatsby, which gave them the ability to hire new developers and get them going in only a day. If there was familiarity with React, onboarding was successful and reduced the management of dependencies and servers. @@ -74,6 +74,6 @@ Reflecting on it post-launch, the team says that Gatsby allowed them to focus on The team has gotten excited about learning – excited about hosting at the edge and optimizing for performance, because Gatsby makes it easy. -Front-end engineers are going beyond JS and tools and focusing on edge hosting, the modern web technology stack and optimizing for speed. The team is using this as a blueprint for how they’ll build websites in the future. +Frontend engineers are going beyond JS and tools and focusing on edge hosting, the modern web technology stack and optimizing for speed. The team is using this as a blueprint for how they’ll build websites in the future. Gatsby delivered a performance-optimized website for Flamingo, hosted on the edge. It made it easy to onboard new developers and create engaging experiences. It improved the website visitor’s experience with speed and design and it inspired the Flamingo team in a new age of ecommerce design. diff --git a/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md b/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md index f8f9eeffa6c40..831a03b991093 100644 --- a/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md +++ b/docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md @@ -65,7 +65,7 @@ We'll look at each of these in the context of our homepage redesign. As mentioned above, our most significant challenge transitioning the codebase from 18F to ONRR was operating system compatibility. We were asking a lot of our IT group, who had to vet our tech stack to ensure it met security requirements. It was a time consuming process that, even when we were granted administrative privileges, still left us with dependency errors and a parallel data-update workflow using separate machines. -Gatsby combines multiple front-end tools into one, and the packages are managed with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), so the scope of our IT requests is limited to widely used package managers. From what we can tell so far, running Gatsby is nearly identical regardless of the operating system you're using. As we'll describe in the next section, we were able to build a data-update workflow that we could support using our government-issued computers. +Gatsby combines multiple frontend tools into one, and the packages are managed with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/), so the scope of our IT requests is limited to widely used package managers. From what we can tell so far, running Gatsby is nearly identical regardless of the operating system you're using. As we'll describe in the next section, we were able to build a data-update workflow that we could support using our government-issued computers. ### GraphQL diff --git a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md index 5d0af63b17b57..5f857b98f2d18 100644 --- a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md +++ b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md @@ -12,7 +12,7 @@ At the last Gatsby Days conference a couple months ago, I gave a talk about how When you’re a developer, choosing the best tool for the job is essential in doing great work but then you may have to convince another stakeholder about your choice. Or if you work with clients, letting them know why you chose a certain tech stack is important because it may impact the final product. -So how do you explain all the technical nuance to an audience that doesn’t work in front-end website development every day? +So how do you explain all the technical nuance to an audience that doesn’t work in frontend website development every day? I’ve worked at tech companies large and small over the past decade and one thing I’ve learned over the years is that highly skilled technical people can have a hard time explaining deep technical concepts to a not-as-technical audience. This makes sense because since there is so much to know about certain topics, it’s difficult to know where to start and how to simplify the concepts and still be accurate. To help, I’ve put together some thoughts on how to position Gatsby to your clients and team members. diff --git a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md index 8b8f489134484..ff736cbc5aee5 100644 --- a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md +++ b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md @@ -26,7 +26,7 @@ In terms of what this means to you as a marketer – it's essentially a modern w ![What is JAMstack](./images/whatisjamstack.jpeg) -Put simply, a JAMstack website has an unlimited ecosystem of all of the tools and services you need in the background, but the actual site itself on the front-end is just HTML. +Put simply, a JAMstack website has an unlimited ecosystem of all of the tools and services you need in the background, but the actual site itself on the frontend is just HTML. Building your marketing site on the JAMstack is an efficient and reliable way to combine all of your content and channels and serve it up as a lightning-fast website that your visitors will love. If you need to add ecommerce, paywalls, a podcast or some other content to your site in the future, your team won't have to figure out how to get everything to play ball with your CMS or build a new site from scratch. Instead they'll be able to connect new APIs or services to your existing site. @@ -64,7 +64,7 @@ Site performance and site speed is an increasingly important ranking factor. Not Using plugins to assist the speed at which you can launch marketing campaigns makes sense. But if the end result is hindered by poor performance and reduced page engagement – does it still make sense? -Ditching the concept of the plugin and opting for a JAMstack site which is "just HTML" doesn't actually mean you have to give up functionality, or suddenly need to know how to code like a front-end developer to manage a site and its content. You can still achieve the same results with an ecosystem of tools and services that are tailored specifically for you. Yes it takes some development up-front (let's be real, so does any website) - but the payoff is huge! +Ditching the concept of the plugin and opting for a JAMstack site which is "just HTML" doesn't actually mean you have to give up functionality, or suddenly need to know how to code like a frontend developer to manage a site and its content. You can still achieve the same results with an ecosystem of tools and services that are tailored specifically for you. Yes it takes some development up-front (let's be real, so does any website) - but the payoff is huge! ## Example: Ghost Docs site performance @@ -103,14 +103,14 @@ As always, there is still work to do to ensure the site ranks well for the most **Here's the stack we're using:** - [Ghost](https://ghost.org/) delivering content via the API -- A front-end built in React with [Gatsby](https://gatsbyjs.org/) (our static site generator of choice) +- A frontend built in React with [Gatsby](https://gatsbyjs.org/) (our static site generator of choice) - Deployed with [Netlifly](https://netlify.com/) (really nifty content delivery network) - [Algolia](https://algolia.com/) powering the search functionality - [Zapier](https://zapier.com/) to automate community feedback into Slack for content improvements We have also built and contributed an [advanced sitemap plugin](/packages/gatsby-plugin-advanced-sitemap/?=sitemap) which automatically builds a sitemap for any Gatsby project. -Much of the SEO functionality is being pulled directly from Ghost via the API (which has all of the structured data, custom meta data, canonicals etc built-in). This means I can manage most of the content and meta data directly in the Ghost admin client. When I save new changes they're pushed into the static front-end via Netlify – it's a fantastic workflow! +Much of the SEO functionality is being pulled directly from Ghost via the API (which has all of the structured data, custom meta data, canonicals etc built-in). This means I can manage most of the content and meta data directly in the Ghost admin client. When I save new changes they're pushed into the static frontend via Netlify – it's a fantastic workflow! ![Netlify](./images/netlify.png) diff --git a/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md b/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md index 33f6c58ce7daf..e53f9e2fd6f5b 100644 --- a/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md +++ b/docs/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/index.md @@ -107,7 +107,7 @@ To begin describing why build-time SSR is so appealing, let's first take a look - Creating a bucket/location to host static content (like S3, Google Cloud Storage, etc.) - Setting up a [Domain Name System (DNS)](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) to make your content reachable via a pretty URL, e.g. gatsbyjs.org - Routing the CDN layer in front of your static content -- Set up a Continuous Integration (CI) environment so we can build and deploy code to production with minimal impact to end-users +- Set up a Continuous Integration (CI) environment so we can build and deploy code to production with minimal impact to end users ... and, that's it! We're done as far as setup goes! We can use _whatever_ stack you prefer here. Netlify? [You bet.](https://www.gatsbyjs.org/docs/deploying-to-netlify) More a fan of AWS? [Of course.](https://www.gatsbyjs.org/docs/deploying-to-aws-amplify/) Heroku? [Yup.](https://www.gatsbyjs.org/docs/deploying-to-heroku/) You get the idea. Gatsby can be deployed anywhere easily and cheaply. @@ -325,7 +325,7 @@ _Want to dive deeper? Much of this is encapsulated in our internal [Webpack conf ## Modern APIs in Gatsby -Gatsby uses modern browser APIs to both maximize performance and user experience--which oftentimes go hand in hand!--only loading assets when they are necessary and likely to be requested. Specifically, the following APIs are crucial to the end-user experience in Gatsby: +Gatsby uses modern browser APIs to both maximize performance and user experience--which oftentimes go hand in hand!--only loading assets when they are necessary and likely to be requested. Specifically, the following APIs are crucial to the end user experience in Gatsby: 1. `IntersectionObserver` - an API to conditionally perform some action when an element enters the viewport/view 1. `link rel="prefetch"` - an API to prefetch resources in the background when the browser is idle diff --git a/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md b/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md index 63fd42690f89e..67ce40b5f94c3 100644 --- a/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md +++ b/docs/blog/2019-04-08-meet-the-gatsby-team-at-drupalcon-seattle-jamstack-conf-nyc-and-jsheroes/index.md @@ -31,7 +31,7 @@ Four of our team will be behind the table at various times during DrupalCon, inc On Thursday, during the DrupalCon closing plenary, **[Marcy Sutton](https://twitter.com/marcysutton)**, our Head of Learning, will deliver one of the keynotes to close out DrupalCon with a discussion of how to design and build software that fosters inclusion. [“JavaScript and Civil Rights”](https://events.drupal.org/seattle2019/sessions/javascript-and-civil-rights) will take place in Hall 4E from 4:15-5:30pm on Thursday. -“As designers and developers of software, we act as gatekeepers in people’s lives more than we realize,” states the keynote abstract. “Now more than ever, it is our duty to create digital experiences that honor our users’ rights to inclusion–no matter where they live, or how they access the Web. This applies to both authors and contributors, as well as end-users and consumers; we must do more to protect everyone’s rights to access, safety, security, and privacy.” +“As designers and developers of software, we act as gatekeepers in people’s lives more than we realize,” states the keynote abstract. “Now more than ever, it is our duty to create digital experiences that honor our users’ rights to inclusion–no matter where they live, or how they access the Web. This applies to both authors and contributors, as well as end users and consumers; we must do more to protect everyone’s rights to access, safety, security, and privacy.” ### Meet Gatsby CEO Kyle Mathews at Decoupled Summit diff --git a/docs/blog/2019-04-19-gatsby-why-we-write/index.md b/docs/blog/2019-04-19-gatsby-why-we-write/index.md index be666013baa6d..92e7c1811256e 100644 --- a/docs/blog/2019-04-19-gatsby-why-we-write/index.md +++ b/docs/blog/2019-04-19-gatsby-why-we-write/index.md @@ -96,7 +96,7 @@ In the docs, things are structured hierarchically, so usually content is mostly But outside the docs, that's far from the case. We have blog posts, [using-\* example sites / guides](https://github.com/gatsbyjs/gatsby/tree/master/examples), [starters](/starters/), conference talks, podcast appearances, tweets, and whatever Gatsby community members dream up and publish! -**It's a constant challenge to organize these in ways that are useful and obvious for the end-user**. We're always attacking this in five or ten different ways -- discoverability via search, cross-linking, hierarchy, navbars and breadcrumbs, turning conference talks into blog posts and blog posts into docs. +**It's a constant challenge to organize these in ways that are useful and obvious for the end user**. We're always attacking this in five or ten different ways -- discoverability via search, cross-linking, hierarchy, navbars and breadcrumbs, turning conference talks into blog posts and blog posts into docs. Our goal is to make it easy for the user to gather relevant context, know where to look when they get stuck, and feel confident that they can make it if they keep on reading, learning, and trying. diff --git a/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md b/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md index 419a71bc947a5..75db3bd10736a 100644 --- a/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md +++ b/docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md @@ -54,7 +54,7 @@ With Gatsby, we can generate several hundred pages for all of the industries tha By providing data in the form of a JSON object, we can parse and iterate over each industry in which to generate a new page. Whether this JSON data comes from a file, or a CMS via an API call, or our own database, Gatsby provides the flexibility to build in any way we need. -This has dramatically decreased developer time and rocketed the speed of page creation. We went from building several pages a week using front-end developers, to building out dozens of pages a day with professional content creators. +This has dramatically decreased developer time and rocketed the speed of page creation. We went from building several pages a week using frontend developers, to building out dozens of pages a day with professional content creators. Below is an example of one of our live industry pages (in this case Heating/Air Conditioning). Each industry page follows the same template, and content authors can build out new industries, complete with whatever copy, icons, images, and animations they need to allow each to stand out as its own work of art. diff --git a/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md b/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md index d1f813a9b9421..44529387f9493 100644 --- a/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md +++ b/docs/blog/2019-05-15-enterprise-gatsby-how-to-reduce-your-digital-total-cost-of-ownership-with-gatsby/index.md @@ -47,7 +47,7 @@ For enterprise users, hiring more affordable developers with a flexible, more mo ## Performance: Optimization at every page interaction -Enterprises today expect fast performance at every stage of page interaction: first load, moving between pages, and dynamic updates and transitions that occur after page load. Traditional CMSs like Adobe, Drupal, Sitecore, and WordPress have long struggled with performance bottlenecks at each step of this process, whether it is due to an oversized server bootstrap, overly stale cache, a lack of prefetching across linked pages, or an unwieldy Ajax or JavaScript API for front-end interactions. As new users continue to acquire smartphones at a high rate in low-bandwidth network areas, these concerns become even more paramount. +Enterprises today expect fast performance at every stage of page interaction: first load, moving between pages, and dynamic updates and transitions that occur after page load. Traditional CMSs like Adobe, Drupal, Sitecore, and WordPress have long struggled with performance bottlenecks at each step of this process, whether it is due to an oversized server bootstrap, overly stale cache, a lack of prefetching across linked pages, or an unwieldy Ajax or JavaScript API for frontend interactions. As new users continue to acquire smartphones at a high rate in low-bandwidth network areas, these concerns become even more paramount. Gatsby solves all of these problems thanks to its focus on rendering server-side markup first and foremost before handing off all asynchronous rendering to a React application initialized client-side. With its prefetching, Gatsby users can rest assured that any link click will lead to an instantaneous render rather than a roundtrip back to the server. Moreover, because React controls all state after the page has loaded, the management of interactive functionality becomes a much simpler consideration. Our very own [Dustin Schau](https://dustinschau.com/) recently penned a deep dive into [what makes Gatsby’s performance so incredible](https://www.gatsbyjs.org/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/). @@ -79,7 +79,7 @@ Fortunately, Gatsby is currently hard at work on supporting incremental builds f At Gatsby, we’ve heard many questions about whether Gatsby is truly ready for the enterprise. The short answer is yes or very soon, depending on your requirements. After all, Gatsby currently lacks many of the features that end-to-end CMSs routinely tout such as contextual editing and layout manipulation. At the moment it also doesn’t have some of the features needed to support compliance in the evolving digital landscape such as HIPAA, FEDRamp, and others, but they are on our radar. -Nonetheless, Gatsby makes up what it lacks at the moment in the administrative experience with benefits in other ways that make it a uniquely compelling choice for enterprises seeking an ambitious developer-first solution paired with sensible defaults for performance and security. If you are seeking a decoupled CMS solution that includes a fast-off-the-shelf front end and security benefits that stand up to any traditional CMS currently in vogue, Gatsby should be at the top of your list of considerations. +Nonetheless, Gatsby makes up what it lacks at the moment in the administrative experience with benefits in other ways that make it a uniquely compelling choice for enterprises seeking an ambitious developer-first solution paired with sensible defaults for performance and security. If you are seeking a decoupled CMS solution that includes a fast-off-the-shelf frontend and security benefits that stand up to any traditional CMS currently in vogue, Gatsby should be at the top of your list of considerations. We’re just getting started! In addition to our ongoing beta for [Gatsby Preview](https://gatsbyjs.com/preview), soon to be opened up to the general public in open beta ([join the waitlist](https://gatsbyjs.com/preview) today!), we’re hard at work on features we know will be relevant not only to Gatsby’s early adopters but also enterprise users who require fast deployment times in addition to live high-fidelity preview and quicker turnarounds in content production workflows. diff --git a/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md b/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md index d356f60d31a65..21c4b0ff2eb1c 100644 --- a/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md +++ b/docs/blog/2019-05-29-the-great-gatsby-gathering-nyc/index.md @@ -7,7 +7,7 @@ tags: - gatsby-inc --- -"You belong here" is a core tenet of both Gatsby, the open source project, and Gatsby, the enterprise. Involving the developer community in this adventure to the front end far horizon has been our prime directive ever since launch. In the past four years we have worked alongside a constellation of 1,900+ contributors helping to build Gatsbyjs and created a robust library of useful plugins. All along, Gatsby’s competitive advantage has been the strength of its community and ecosystem: we came this far this fast thanks to users who rolled up their sleeves and pitched in. +"You belong here" is a core tenet of both Gatsby, the open source project, and Gatsby, the enterprise. Involving the developer community in this adventure to the frontend far horizon has been our prime directive ever since launch. In the past four years we have worked alongside a constellation of 1,900+ contributors helping to build Gatsbyjs and created a robust library of useful plugins. All along, Gatsby’s competitive advantage has been the strength of its community and ecosystem: we came this far this fast thanks to users who rolled up their sleeves and pitched in. Gatsby Days is one of our ways to say thank you. ([Another is tasty swag for contributors)](https://www.gatsbyjs.org/contributing/contributor-swag/). This series of single-day conferences aims to connect the Gatsby community with Gatsby’s creators, core team and most of all each other. Our first event was held in San Francisco this past December, and our second Gatsby Days gathering just took place in New York on May 6th. diff --git a/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md b/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md index de434e83b1cf3..4f7596797988b 100644 --- a/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md +++ b/docs/blog/2019-06-08-delicious-simplicity-case-study-part-1/index.md @@ -26,7 +26,7 @@ So Brian kept trying, and not finding, a better way to develop projects and mana ## Swiping Right for Gatsby -There was only one potential hurdle to true romance: convincing the Delicious Simplicity team. They were mainly front end developers used to working with HTML/CSS, maybe a little jQuery. Stepping across the divide into the backend to confront the complexities of a headless CMS was not in their comfort zone. But Brian was confident he could get them there. +There was only one potential hurdle to true romance: convincing the Delicious Simplicity team. They were mainly frontend developers used to working with HTML/CSS, maybe a little jQuery. Stepping across the divide into the backend to confront the complexities of a headless CMS was not in their comfort zone. But Brian was confident he could get them there. “Once I got hands on with Gatsby, I was shocked how quickly I managed to pick things up. The syntax was just so intuitive, which made it easy to digest,” he says. There were definitely some growing pains -- the team had little experience with React or Node, and some of the devs found the new component-based way of thinking overwhelming to grasp at first. But they eventually fell in love with Gatsby and now don’t want to work in anything else. diff --git a/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md b/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md index a62a238bd1247..a28735c4d1fa5 100644 --- a/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md +++ b/docs/blog/2019-06-10-how-to-recognize-when-gatsby-is-a-good-fit-for-your-client/index.md @@ -21,13 +21,13 @@ In November, I began a conversation with a mid-sized retail and digital commerce - First, the content editorial experience for staff was so poor that multiple team members had actually quit because of it (saying as much in their exit interview). - Second, development velocity was painfully slow because of the complex implementation. -Once I talked about the value of a microservices approach, the unbeatable fast speed of a React powered front end, preview, and the partial builds feature on the roadmap Gatsby (and was honest about the trade offs), the client enthusiastically wanted to know more, and they are likely proceeding with a Gatsby stack for their replatform. +Once I talked about the value of a microservices approach, the unbeatable fast speed of a React powered frontend, preview, and the partial builds feature on the roadmap Gatsby (and was honest about the trade offs), the client enthusiastically wanted to know more, and they are likely proceeding with a Gatsby stack for their replatform. Here are three smart points of entry to get the conversation focused on use cases. (To learn more about explaining the technicalities of Gatsby, check out Linda’s extensive article on [how to break down Gatsby in a way that will resonate](/blog/2019-03-07-sell-gatsby-to-clients/). ## #1 Developers are the bottleneck -One of the primary drawbacks of a monolithic CMS like WordPress or Drupal is that the front-end theming layer is tightly coupled with the backend data layer. That means that a developer working only in the theme layer must still be comfortable with PHP, a backend programming language. In a headless approach, using JavaScript at the render layer, a themer only needs to know HTML, CSS, and JavaScript, the languages already in their toolkit. +One of the primary drawbacks of a monolithic CMS like WordPress or Drupal is that the frontend theming layer is tightly coupled with the backend data layer. That means that a developer working only in the theme layer must still be comfortable with PHP, a backend programming language. In a headless approach, using JavaScript at the render layer, a themer only needs to know HTML, CSS, and JavaScript, the languages already in their toolkit. If the client is suffering from slow developer velocity, this benefit will resonate and provide value to their organization. @@ -45,7 +45,7 @@ Mobile websites that take [more than 3 seconds to load have a 53% bounce rate](h There is fast (which every site should be) and then there is Gatsby-fast. -Every site needs to be performant. There isn’t a site out there where slow response times won’t negatively impact user engagement, conversion, and often, the bottom line. But remember, there is fast (which every site should be) and then there is Gatsby-fast. Companies that migrate to Gatsby will find their site is [between three and 10 times faster](https://www.gatsbyjs.com/guides/why-are-gatsby-sites-fast/). Indeed, the speed of a Gatsby-powered front end resembles more of the instantaneous feel of native mobile apps. +Every site needs to be performant. There isn’t a site out there where slow response times won’t negatively impact user engagement, conversion, and often, the bottom line. But remember, there is fast (which every site should be) and then there is Gatsby-fast. Companies that migrate to Gatsby will find their site is [between three and 10 times faster](https://www.gatsbyjs.com/guides/why-are-gatsby-sites-fast/). Indeed, the speed of a Gatsby-powered frontend resembles more of the instantaneous feel of native mobile apps. --- diff --git a/docs/blog/2019-06-25-profitable-agency-wordpress/index.md b/docs/blog/2019-06-25-profitable-agency-wordpress/index.md index 6ff1730a504a0..44d2d78af4251 100644 --- a/docs/blog/2019-06-25-profitable-agency-wordpress/index.md +++ b/docs/blog/2019-06-25-profitable-agency-wordpress/index.md @@ -85,7 +85,7 @@ Gatsby is different. Consider this example: If your client needs ecommerce features on their site, Gatsby can pull in the product data and shopping cart functionality from two different services, if you so choose. Those two services are not produced by the same server, or writing to the same database. So a problem with one may not affect the other. -In theory, break-fix for Gatsby should be easier to diagnose and solve. An issue with the build has nothing to do with a problem with the front-end, and vice versa. Gatsby's lower technical maintenance may be the difference between you taking on 5 client sites or 15. +In theory, break-fix for Gatsby should be easier to diagnose and solve. An issue with the build has nothing to do with a problem with the frontend, and vice versa. Gatsby's lower technical maintenance may be the difference between you taking on 5 client sites or 15. Personally I keep forgetting about the static sites under my care because there's literally nothing to work on for them month-to-month. diff --git a/docs/blog/2019-06-28-component-driven-drupal-development/index.md b/docs/blog/2019-06-28-component-driven-drupal-development/index.md index 4a2f702cd6a1c..05b96b3c5b9e4 100644 --- a/docs/blog/2019-06-28-component-driven-drupal-development/index.md +++ b/docs/blog/2019-06-28-component-driven-drupal-development/index.md @@ -9,7 +9,7 @@ tags: - agencies --- -In our recent webinar, [Gatsby for Agencies and Teams: Better, Faster, Smarter](https://www.gatsbyjs.com/gatsby-for-agencies/), Ben Robertson talked with us about adopting Gatsby at Mediacurrent and how it transformed their development process. Ben is a front-end developer at Mediacurrent where he has established front-end development best practices and led Drupal development projects. +In our recent webinar, [Gatsby for Agencies and Teams: Better, Faster, Smarter](https://www.gatsbyjs.com/gatsby-for-agencies/), Ben Robertson talked with us about adopting Gatsby at Mediacurrent and how it transformed their development process. Ben is a frontend developer at Mediacurrent where he has established frontend development best practices and led Drupal development projects. ## About Mediacurrent @@ -21,9 +21,9 @@ One of the things that excited Ben about working at Mediacurrent was their compo “I thought this was an awesome workflow. It gave us a single source of truth - for each component. The same template was used by both front-end and back-end + for each component. The same template was used by both frontend and backend developers. We could reuse that same component anywhere it was needed, and it - let the front-enders focus more on front-end specific concerns like semantics + let the frontenders focus more on frontend specific concerns like semantics and richer interactivity and accessibility.” @@ -31,11 +31,11 @@ Or at least, that’s what the component-driven workflows were supposed to do… ## Trouble in the Integration Layer -Unfortunately, things were not so simple. In addition to the component templates themselves, the front-end team had to code the logic for integrating the component templates with the Drupal CMS data. Placing the logic in the template files made them overly complex and difficult to read, but placing the integration logic on the Drupal side meant writing PHP, which was outside the front-end team’s comfort zone. The front-end team also didn’t necessarily think about or understand all the particulars of how the CMS data is fed into the component templates when they were building them, which meant additional time had to be spent reconciling the templates with the data. +Unfortunately, things were not so simple. In addition to the component templates themselves, the frontend team had to code the logic for integrating the component templates with the Drupal CMS data. Placing the logic in the template files made them overly complex and difficult to read, but placing the integration logic on the Drupal side meant writing PHP, which was outside the frontend team’s comfort zone. The frontend team also didn’t necessarily think about or understand all the particulars of how the CMS data is fed into the component templates when they were building them, which meant additional time had to be spent reconciling the templates with the data. -Finally, they were running into performance issues. The typical complex Drupal site is always going to have a variety of performance issues that could originate in the server, hosting environment, instances of bad PHP, issues with file compilation or bundling, and many other spots. Troubleshooting these issues would then require advanced knowledge of Drupal that could only be found among the back-end team. +Finally, they were running into performance issues. The typical complex Drupal site is always going to have a variety of performance issues that could originate in the server, hosting environment, instances of bad PHP, issues with file compilation or bundling, and many other spots. Troubleshooting these issues would then require advanced knowledge of Drupal that could only be found among the backend team. -Despite their best efforts, their component-driven process was being undermined by the quirks and inefficiencies of having to stand up sites within the Drupal CMS. The front-end and back-end teams were frustrated with the amount of effort they had to put into making the integration work, it was pulling their focus away from the front-end and back-end work they were actually there to do, and it was costing the company money. +Despite their best efforts, their component-driven process was being undermined by the quirks and inefficiencies of having to stand up sites within the Drupal CMS. The frontend and backend teams were frustrated with the amount of effort they had to put into making the integration work, it was pulling their focus away from the frontend and backend work they were actually there to do, and it was costing the company money. ## Effortless Integration and Performance with Gatsby @@ -49,24 +49,24 @@ Performance also became a low-effort task, thanks to Gatsby. Because Gatsby site “It's incredible. Like incredibly fast and incredibly easy to set up.“ -The front-end and back-end teams experienced new levels of productivity. They no longer had to waste time passing integration problems back and forth or troubleshooting esoteric CMS issues. With Gatsby, the front-end team could focus on the front end and the back-end team could focus on the back end, and any new issues that appeared could be pretty clearly identified as belonging to one or the other. +The frontend and backend teams experienced new levels of productivity. They no longer had to waste time passing integration problems back and forth or troubleshooting esoteric CMS issues. With Gatsby, the frontend team could focus on the frontend and the backend team could focus on the back end, and any new issues that appeared could be pretty clearly identified as belonging to one or the other. - “With the Gatsby site, if something is running slow on the front-end, you know - that it's a front-end problem because, for the most part, everything is + “With the Gatsby site, if something is running slow on the frontend, you know + that it's a frontend problem because, for the most part, everything is rendered in real-time. You can't get away with saying, ‘Oh, the user shouldn't have uploaded that large of an image,’ or, ‘Drupal didn't concatenate my JavaScript in the right order.’ But on the flip side, if something is not - available in the API, you know for a fact it's a back-end issue. **The - separation lets back-enders do what they like and excel at it, and it lets - front-enders do what they like and excel at it.**” + available in the API, you know for a fact it's a backend issue. **The + separation lets backenders do what they like and excel at it, and it lets + frontenders do what they like and excel at it.**” ## Looking Ahead: New Opportunities for the Team, New Opportunities for the Agency -The clarity that Gatsby has brought to front-end and back-end responsibilities has empowered the front-end team to develop more advanced front-end skills. Gatsby offers a great new way for team members to start working with React, and, because it solves a lot of back-end integration issues, they’re seeing that more projects can be accomplished entirely by front-end developers. +The clarity that Gatsby has brought to frontend and backend responsibilities has empowered the frontend team to develop more advanced frontend skills. Gatsby offers a great new way for team members to start working with React, and, because it solves a lot of backend integration issues, they’re seeing that more projects can be accomplished entirely by frontend developers. -As Ben and the Mediacurrent wrap up their first successful Gatsby project, they’re already leveraging it in other ways. They recently integrated Gatsby into a new Drupal install profile called [RAIN](https://www.mediacurrent.com/?utm_source=gatsbyjs_cbd&utm_medium=blog&utm_campaign=partners2019&utm_content=rain), and they’re excited to see how much more efficient their processes are in current client projects. Their new level of efficiency makes it more practical and profitable for the agency to take on smaller, front-end focused projects; and every Gatsby build opens them up to more React projects in the future. +As Ben and the Mediacurrent wrap up their first successful Gatsby project, they’re already leveraging it in other ways. They recently integrated Gatsby into a new Drupal install profile called [RAIN](https://www.mediacurrent.com/?utm_source=gatsbyjs_cbd&utm_medium=blog&utm_campaign=partners2019&utm_content=rain), and they’re excited to see how much more efficient their processes are in current client projects. Their new level of efficiency makes it more practical and profitable for the agency to take on smaller, frontend focused projects; and every Gatsby build opens them up to more React projects in the future. Everyone is looking forward to new growth and bright future with Gatsby. diff --git a/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md b/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md index 9202c38203ea4..1440d92d4f781 100644 --- a/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md +++ b/docs/blog/2019-07-09-digital-display-drupal-gatsby/index.md @@ -28,9 +28,9 @@ Sandy Springs came to [Mediacurrent](https://www.mediacurrent.com/?utm_source=ga ## Mediacurrent’s Solution -A decoupled approach, where front end templating is separate from the content management system and database was required to achieve a unified system. Proven as a powerful decoupled CMS, Drupal replaced the city’s existing WordPress site. +A decoupled approach, where frontend templating is separate from the content management system and database was required to achieve a unified system. Proven as a powerful decoupled CMS, Drupal replaced the city’s existing WordPress site. -On the back end, a [Drupal 8](https://www.drupal.org/8) foundation manages content. On the front end, Gatsby presents content. With this approach, the Sandy Springs team can “create once, publish everywhere,” with a more efficient process for sharing information with the local community. +On the back end, a [Drupal 8](https://www.drupal.org/8) foundation manages content. On the frontend, Gatsby presents content. With this approach, the Sandy Springs team can “create once, publish everywhere,” with a more efficient process for sharing information with the local community. ![Drupal-powered large scale digital signage in a cafe](./images/CitySprings2.jpg "City Spring's large scale digital signage") @@ -45,7 +45,7 @@ In this [video presentation](https://www.youtube.com/watch?time_continue=3&v=Qio - **Stable**: With full control over the markup, the site build is fast. - **Scalable**: Gatsby makes it easier for the client to add additional sites in the future. -- **Speedy**: Gatsby bakes in a lot of performance optimization for the front end, ultimately delivering a faster site. +- **Speedy**: Gatsby bakes in a lot of performance optimization for the frontend, ultimately delivering a faster site. - **Hosting**: The Drupal site is never used by a non-editorial user, so fewer hosting resources are needed. ![Drupal-powered digital display kiosk promotes a theatre event](./images/CitySprings3.jpg "City Spring's digital signage kiosk") diff --git a/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md b/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md index 5bfd8bc4eb940..26976c770fe65 100644 --- a/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md +++ b/docs/blog/2019-07-11-user-testing-accessible-client-routing/index.md @@ -54,7 +54,7 @@ By user testing a few variations of known routing techniques, we gained some val ## Working with Fable -We worked with [Fable Tech Labs](https://makeitfable.com) to conduct this research and found it to be a very productive process. I connected with Fable’s lead front end developer Perry Trinier at the CSUN accessibility conference in early 2019. Fable’s generous offer to pair with us on this initiative has been wonderful, and we’re grateful for the opportunity to see this through. +We worked with [Fable Tech Labs](https://makeitfable.com) to conduct this research and found it to be a very productive process. I connected with Fable’s lead frontend developer Perry Trinier at the CSUN accessibility conference in early 2019. Fable’s generous offer to pair with us on this initiative has been wonderful, and we’re grateful for the opportunity to see this through. The experience of testing with people with disabilities and the results that followed felt very important, and something product teams should seek out regularly. We’d highly recommend this process for anyone working on digital experiences; particularly if you can test prototypes to adapt to the findings early and often in design & development. User testing for accessibility can provide game-changing detail that you’ll be eternally grateful to have uncovered. Addressing accessibility issues sooner than later is both a [smart business investment](https://www.w3.org/WAI/business-case/) and can make your project more [inclusive](https://www.microsoft.com/design/inclusive/) from the start! diff --git a/docs/blog/2019-08-07-gazette-august/index.md b/docs/blog/2019-08-07-gazette-august/index.md index 38b4b8e648ad1..ccd0a302c73b5 100644 --- a/docs/blog/2019-08-07-gazette-august/index.md +++ b/docs/blog/2019-08-07-gazette-august/index.md @@ -23,7 +23,7 @@ The past few weeks has been all about what we're calling the Snow Leopard releas First, an aside. -[Snow Leopard](https://en.wikipedia.org/wiki/Mac_OS_X_Snow_Leopard) was the seventh major release of macOS. Unlike those of previous versions, the goals of Snow Leopard were improved performance, greater efficiency and the reduction of its overall memory footprint. Addition of new end-user features was not a primary consideration: its name signified its goal to be a refinement of the previous OS X version, Leopard. +[Snow Leopard](https://en.wikipedia.org/wiki/Mac_OS_X_Snow_Leopard) was the seventh major release of macOS. Unlike those of previous versions, the goals of Snow Leopard were improved performance, greater efficiency and the reduction of its overall memory footprint. Addition of new end user features was not a primary consideration: its name signified its goal to be a refinement of the previous OS X version, Leopard. Similarly, earlier last month, we felt like we needed to take some time to slow down and clean up Gatsby after some of the big features that we've shipped recently: notably ([themes](https://www.gatsbyjs.org/blog/2019-07-03-announcing-stable-release-gatsby-themes/) and [per page manifest](https://www.gatsbyjs.org/blog/2019-06-12-performance-improvements-for-large-sites/)). Our goal was to take a step back, move a bit more slowly, and improve the overall code base, add tests, and overall ensure our house is in good order for more improvements in the future. diff --git a/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md b/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md index 1f4e2802c09f6..dd3709c1c2fc7 100644 --- a/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md +++ b/docs/blog/2019-08-13-Localised-strings-from-Kentico-Cloud-GatsbyJS-GraphQL/index.md @@ -22,7 +22,7 @@ The flexibility of Kentico Cloud means there are many ways to achieve the same g ## Identify your language -Our first step is to determine how we are going to identify cultures or languages from the front end of the site. As Kentico Cloud is purely a content hub, there’s not the same set of localization web parts and widgets that you might get from a product like Kentico EMS. We need an alternative to pick up that culture code. +Our first step is to determine how we are going to identify cultures or languages from the frontend of the site. As Kentico Cloud is purely a content hub, there’s not the same set of localization web parts and widgets that you might get from a product like Kentico EMS. We need an alternative to pick up that culture code. There are a few options here. You could be using a simple language switcher control on your site or application. Or, it might be as simple as deriving it from the URL e.g. _www.mysite.com/en-gb/about-us_ or _www.mysite.com/about-us?lang=en-gb_. diff --git a/docs/blog/2019-08-27-roll-your-own-comment-system/index.md b/docs/blog/2019-08-27-roll-your-own-comment-system/index.md index 603637d5af13f..c58b5244690c7 100644 --- a/docs/blog/2019-08-27-roll-your-own-comment-system/index.md +++ b/docs/blog/2019-08-27-roll-your-own-comment-system/index.md @@ -47,7 +47,7 @@ The comments API consists of three parts: - [API Server](#api) - [Front End](#front-end) -The front end is written for React, but if you know how to make a form and an API call, it can be easily adjusted to whatever static system you're using. +The frontend is written for React, but if you know how to make a form and an API call, it can be easily adjusted to whatever static system you're using. ## Database @@ -241,7 +241,7 @@ app.delete("/comments/:id", deleteComment) ## Front End -Again, for the front end I'm using React as an example, but the concept is the same for any template system. In whatever your post template file is, use JavaScript to make a `fetch` or `axios` call to your comment API, and save the data in state somewhere. Once I retrieve the JSON response from the API server, which will be an array of comment objects, I can pass it to wherever I'm displaying the comments. +Again, for the frontend I'm using React as an example, but the concept is the same for any template system. In whatever your post template file is, use JavaScript to make a `fetch` or `axios` call to your comment API, and save the data in state somewhere. Once I retrieve the JSON response from the API server, which will be an array of comment objects, I can pass it to wherever I'm displaying the comments. > Sorry, I'm not using hooks yet. It's okay, deep breath. We'll get through this. diff --git a/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md b/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md index 0971e08cde637..370a78a56a795 100644 --- a/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md +++ b/docs/blog/2019-09-12-building-the-new-third-and-grove-website-in-gatsby/index.md @@ -13,11 +13,11 @@ canonicalLink: https://www.thirdandgrove.com/building-new-site-with-drupal-and-g This rebrand/replatform is a big leap forward for our brand, marking a milestone in who we want to be as a company. In this article, I’m going to focus on the tech behind the screen that makes it all happen. -## Why use a modern front end? +## Why use a modern frontend? -We’re a Drupal agency through and through. But since we saw the promise of front end tech like React, we’ve better equipped our team with people who can build modern digital experiences for our clients (including people like me!) Building our own site with a modern front end is foremost a way for us to eat our own dog food (good news is that we’re still really enjoying eating it). +We’re a Drupal agency through and through. But since we saw the promise of frontend tech like React, we’ve better equipped our team with people who can build modern digital experiences for our clients (including people like me!) Building our own site with a modern frontend is foremost a way for us to eat our own dog food (good news is that we’re still really enjoying eating it). -There are several reasons to modernize from an aging front end but these stick out to us. +There are several reasons to modernize from an aging frontend but these stick out to us. 1. **User Experience.** It’s possible to create an amazing user experience with dated technology (we’ve done it many a time). BUT it’s easier, cheaper, and faster to do with a modern set of solutions. 2. **Developer Velocity.** Leveraging Gatsby has improved the code quality and tooling. So development, while faster, can produce code that is more testable, has less duplication and is of higher quality. It also reduces the overhead for developers to know HTML, CSS, JavaScript, and PHP. This last part wasn’t of huge importance to us but for this can make a world of difference to our clients that don’t have as wide a skillset on their team. @@ -56,6 +56,6 @@ In our new site, we have content coming from multiple sources. Each source might ## More like TAGV5.1 -The beauty of building React projects is that they are highly flexible. This flexibility allows us to construct this front end in a way that it can grow with us. So instead of having to rebuild everything when we want a new look, we can change some of our wrapper components out, or add a new data source if we start a swag store. This gives us a layer of abstraction that is useful in the real world. Our data/content is separate from our views, and our views are abstracted from their structure. This is powerful for many reasons, foremost being that, instead of building a single entity that is our site, we are building modular pieces that when combined become an awesome thing, like a Megazord, or Captain Planet. This mentality of modular code isn't new and isn't unique to React. However, the JavaScript ecosystem and React in particular have taken this approach to heart. Gatsby takes it a step further with their plugin model. For example, adding a sitemap is as easy as adding a plugin. Once the plugin is installed it’s just another task added into the Gatsby build process using information that is already available. +The beauty of building React projects is that they are highly flexible. This flexibility allows us to construct this frontend in a way that it can grow with us. So instead of having to rebuild everything when we want a new look, we can change some of our wrapper components out, or add a new data source if we start a swag store. This gives us a layer of abstraction that is useful in the real world. Our data/content is separate from our views, and our views are abstracted from their structure. This is powerful for many reasons, foremost being that, instead of building a single entity that is our site, we are building modular pieces that when combined become an awesome thing, like a Megazord, or Captain Planet. This mentality of modular code isn't new and isn't unique to React. However, the JavaScript ecosystem and React in particular have taken this approach to heart. Gatsby takes it a step further with their plugin model. For example, adding a sitemap is as easy as adding a plugin. Once the plugin is installed it’s just another task added into the Gatsby build process using information that is already available. With this modular approach, we can add, refactor, and redesign at will. The TAG website is now a living breathing internet creature more than ever before. Now on to TAGV5.2. diff --git a/docs/blog/2019-10-15-free-headless-cms/index.md b/docs/blog/2019-10-15-free-headless-cms/index.md index 7d23e23e2714e..20dbea0959df6 100644 --- a/docs/blog/2019-10-15-free-headless-cms/index.md +++ b/docs/blog/2019-10-15-free-headless-cms/index.md @@ -18,7 +18,7 @@ How do you know which headless CMS is right for your site? In this post, we’ll 2. This headless CMS has to be robust enough to grow with the site over time. -3. This headless CMS has to work with with front-end frameworks like Gatsby. +3. This headless CMS has to work with with frontend frameworks like Gatsby. The difficulty with these must-haves is that there are no _truly free_ options. There are open source projects that provide code for free, but you have to host it somewhere. Then, there are hosted headless CMS’s with generous free tiers. But most of them have prohibitive pricing once your project grows. @@ -42,7 +42,7 @@ Every writer or marketer who works on the Internet is familiar with WordPress, s Cheap hosting is easy to find - providers like Bluehost and Amazon Lightsail offer WordPress hosting for about \$4 dollars a month. Other popular hosts like GoDaddy can get you going for less than \$10 dollars a month. -If your website needed all-in-one WordPress, then these cheap, shared hosting packages wouldn’t be enough to handle a website that expects any sort of traffic. However, you’re just using headless WordPress, and all that you ask from the software is to organize your content, and send it to a front-end framework like Gatsby. +If your website needed all-in-one WordPress, then these cheap, shared hosting packages wouldn’t be enough to handle a website that expects any sort of traffic. However, you’re just using headless WordPress, and all that you ask from the software is to organize your content, and send it to a frontend framework like Gatsby. So, as long as the host is reputable, and the service is secure, you can buy the most cost-friendly hosting available. See Gatsby’s guide on getting started with [over a dozen headless CMS’s](https://www.gatsbyjs.org/docs/headless-cms/) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 90c5547f2d1fa..cd99bb9ee3872 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -12,7 +12,7 @@ CSS-in-JS bridges the gap between CSS and JavaScript: 3. **Dynamic**: style your site dynamically based on component state by integrating JavaScript variables. 4. **Bonuses**: many CSS-in-JS libraries generate unique class names which can help with caching, automatic vendor prefixes, timely loading of critical CSS, and implementing many other features, depending on the library you choose. -CSS-in-JS, while not required in Gatsby, is very popular among JavaScript developers for the reasons listed above. For more context, read Max Stoiber's (creator of CSS-in-JS library [styled-components](/docs/styled-components/)) article [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/). However, you should also consider whether CSS-in-JS is necessary, as not relying on it can encourage more inclusive front-end skill-sets. It is also more difficult to port styles from JSX to and from CSS. +CSS-in-JS, while not required in Gatsby, is very popular among JavaScript developers for the reasons listed above. For more context, read Max Stoiber's (creator of CSS-in-JS library [styled-components](/docs/styled-components/)) article [_Why I write CSS in JavaScript_](https://mxstbr.com/thoughts/css-in-js/). However, you should also consider whether CSS-in-JS is necessary, as not relying on it can encourage more inclusive frontend skill-sets. It is also more difficult to port styles from JSX to and from CSS. _Note that this functionality is not a part of React or Gatsby, and requires using any of the many [third-party CSS-in-JS libraries](https://github.com/MicheleBertoli/css-in-js#css-in-js)._ diff --git a/docs/docs/gatsby-in-the-enterprise.md b/docs/docs/gatsby-in-the-enterprise.md index bbe0f7a92f3d2..86f8e09257f7d 100644 --- a/docs/docs/gatsby-in-the-enterprise.md +++ b/docs/docs/gatsby-in-the-enterprise.md @@ -42,7 +42,7 @@ These requirements tend to be in place to enable marketing, security, analytics, **Solution 1: Dedicate a few days or weeks to build integrations.** If your company has these requirements, building integrations is quite feasible with Gatsby’s plugin system (and even well-documented, with many examples for each category of integration). -**Challenge 2: Need for buy-in from executives.** Sometimes new technology adoption in the enterprise requires buy-in from executives who aren’t end-users of Gatsby. +**Challenge 2: Need for buy-in from executives.** Sometimes new technology adoption in the enterprise requires buy-in from executives who aren’t end users of Gatsby. **Solution 2: Potential strategies to get buy-in include building consensus among developers, executing a simple proof of concept, and using the language of execs and managers.** diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index ee354289bd1d5..855c1498dff8f 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -80,7 +80,7 @@ The configuration file, `gatsby-config.js` tells Gatsby information about your w ### CSS -[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) stands for Cascading Style Sheets, and it's a major part of the Web Platform with [HTML](#html) and [JavaScript](#javascript). CSS is a language for styling webpages designed to be highly backwards-compatible. As new features are rolled out to end-users, [CSS parsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing) can safely ignore unsupported features and enhance with the properties they do support. CSS accomplishes this with its _cascading_ design, fundamental to styling with new techniques like [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) while providing fallbacks for older browsers. Gatsby supports multiple [approaches to styling](/docs/styling/), including regular CSS files, CSS modules, and CSS-in-JS. +[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) stands for Cascading Style Sheets, and it's a major part of the Web Platform with [HTML](#html) and [JavaScript](#javascript). CSS is a language for styling webpages designed to be highly backwards-compatible. As new features are rolled out to end users, [CSS parsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing) can safely ignore unsupported features and enhance with the properties they do support. CSS accomplishes this with its _cascading_ design, fundamental to styling with new techniques like [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) while providing fallbacks for older browsers. Gatsby supports multiple [approaches to styling](/docs/styling/), including regular CSS files, CSS modules, and CSS-in-JS. ## D @@ -242,7 +242,7 @@ Something that automatically happens based on your code and configuration. For e ### Progressive enhancement -Progressive enhancement is a strategy for the web that emphasizes core page content is loaded from a server before anything else, without [JavaScript](#javascript) as a requirement to load. This strategy then progressively adds more complex layers of presentation and features on top of the content as the end-user's browser/network connection allow. Gatsby's default approach to [building](#build) pages ahead-of-time means content will load first and enhance as scripts download and execute. +Progressive enhancement is a strategy for the web that emphasizes core page content is loaded from a server before anything else, without [JavaScript](#javascript) as a requirement to load. This strategy then progressively adds more complex layers of presentation and features on top of the content as the end user's browser/network connection allow. Gatsby's default approach to [building](#build) pages ahead-of-time means content will load first and enhance as scripts download and execute. ### Public diff --git a/docs/docs/sourcing-from-ghost.md b/docs/docs/sourcing-from-ghost.md index d6371573b32f9..773a557a860bc 100644 --- a/docs/docs/sourcing-from-ghost.md +++ b/docs/docs/sourcing-from-ghost.md @@ -4,7 +4,7 @@ title: Sourcing from Ghost [Ghost](https://ghost.org) is an open source, professional publishing platform built on a modern Node.js technology stack — designed for teams who need power, flexibility and performance - used by Apple, NASA, Sky News, OpenAI & many more. -It comes with all the benefits of modern, centralized Headless CMS platforms, with the added benefit of being released completely for free under an MIT license, so you have total ownership and control of it without needing to depend on a third party back-end. +It comes with all the benefits of modern, centralized Headless CMS platforms, with the added benefit of being released completely for free under an MIT license, so you have total ownership and control of it without needing to depend on a third party backend. This guide will walk you through using [Gatsby](/) with the [Ghost Content API](https://docs.ghost.org/api/content/). diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index c5c21508cbb45..bb2b68d448776 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -156,6 +156,6 @@ With this code, you have: ## Summary -Hopefully you've seen how easy it is to start working with GraphCMS and Gatsby. With projects of all sizes gravitating towards the benefits of the JAM stack, the time has never been better to learn how to work with Gatsby. Adding a content API in the back-end with GraphCMS provides a scalable CMS that you can start using within minutes and keep using for the life of your project. +Hopefully you've seen how easy it is to start working with GraphCMS and Gatsby. With projects of all sizes gravitating towards the benefits of the JAM stack, the time has never been better to learn how to work with Gatsby. Adding a content API in the backend with GraphCMS provides a scalable CMS that you can start using within minutes and keep using for the life of your project. [Check out GraphCMS today and build "fast websites", fast!](https://graphcms.com?ref="gatsby-headless-docs-bottom") diff --git a/docs/docs/winning-over-developers.md b/docs/docs/winning-over-developers.md index 6fa7cad117da4..b1dd9dc886e4d 100644 --- a/docs/docs/winning-over-developers.md +++ b/docs/docs/winning-over-developers.md @@ -37,9 +37,9 @@ Gatsby has many benefits that give developers the freedom to build great website > You'd be hard-pressed to find a more active and welcoming open-source community than Gatsby. Documentation is thorough, detailed, and doesn't make any assumptions about your experience-level going in. The Gatsby team is committed to transparency and working in the open so the community can follow and participate in Gatsby's development and direction. Everyone is encouraged to contribute to Gatsby and every contribution is valued. -### Brings focus to the front end +### Brings focus to the frontend -> A benefit that frequently comes up in discussions of Gatsby is how it helps bring more focus to font-end development and a clearer division between front-end and back-end tasks. Complicated tooling and configuration can consume a lot of development time and can pull front-end developers away from doing what they do best. Because Gatsby requires minimal tooling and configuration, front-end developers can spend more time making great UI's and back-end developers can focus on adding the features and integrations that make your product better. +> A benefit that frequently comes up in discussions of Gatsby is how it helps bring more focus to fontend development and a clearer division between frontend and backend tasks. Complicated tooling and configuration can consume a lot of development time and can pull frontend developers away from doing what they do best. Because Gatsby requires minimal tooling and configuration, frontend developers can spend more time making great UI's and backend developers can focus on adding the features and integrations that make your product better. ## Common concerns diff --git a/docs/docs/winning-over-engineering-leaders.md b/docs/docs/winning-over-engineering-leaders.md index e3f2b8afe7531..860fe7858ca64 100644 --- a/docs/docs/winning-over-engineering-leaders.md +++ b/docs/docs/winning-over-engineering-leaders.md @@ -41,7 +41,7 @@ Gatsby has many benefits that will appeal to engineering leaders and help them m ### Improved development process -> Gatsby [unifies your stack](/docs/sanitize-your-stack) and eliminates a lot of the complicated and time-consuming configuration steps that come with most development processes. This means happier developers and clearer division between front-end and back-end tasks. Front-end developers can spend more time making great UIs and back-end developers can focus on adding the features and integrations that make your product better. You can find more information on this subject in Sam Bhagwat's article [How Gatsby Changes Teams' Website Development Workflow](/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/#architecture) +> Gatsby [unifies your stack](/docs/sanitize-your-stack) and eliminates a lot of the complicated and time-consuming configuration steps that come with most development processes. This means happier developers and clearer division between frontend and backend tasks. Frontend developers can spend more time making great UIs and backend developers can focus on adding the features and integrations that make your product better. You can find more information on this subject in Sam Bhagwat's article [How Gatsby Changes Teams' Website Development Workflow](/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/#architecture) ## Common concerns