Contentful Berlin Office by toi toi toi creative studio, they have reshaped the in-office experience for Contentful’s ever growing roster of employees.

Contentful Berlin Office

This merger touted as "world's biggest creative agency". B&T guessing it won't be using the "quick & nimble" cliché.

WPP Merges Wunderman Thompson With VMLY&R To Create VML

WPP has announced the merger of Wunderman Thompson and VMLY&R. The combined entity will be known as VML and is being touted as the industry’s largest creative company. “VML unites two of the most awarded creative agencies in the world,

WPP creates VML, a merger of Wunderman Thompson and VMLY&R

This connection is not about aggregating content in the platform but instead connecting to it where it lives and giving customers access to that content live in Contentful. Content architects and marketers can then model and organize all the content in the content graph into spaces in a consistent and reusable manner.

Contentful shifts focus to empower the entire digital team with new products and capabilities

New integrations, multi-experience orchestration, Experience Builder, and AI-driven advancements round out Contentful's newest additions.

Contentful Adds to Contentful Composable Content Platform

First contentful paint (FCP) is the time when the browser renders the first text, image, or other content element that provides some information to the user. Both FP and FCP are measured from the ...

How can you optimize web performance for first paint and contentful paint?

For example, both of them reference First Contentful Paint (FCP), Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). In a way, the types of metrics examined by each rating system are fairly similar. It’s the level of detail and the source ...

Measuring and optimizing for Google Core Web Vitals: A technical SEO guide

This ethos was applied to the 8,215 sq.m interior for Berlin’s software company Contentful. The imminent return of employees after the corona pandemic required rethinking the work environment. T3’s vision was to design human-centric, agile spaces of a ...

Contentful Workplace by toi toi toi creative studio

DENVER and SAN FRANCISCO and BERLIN, Sept. 19, 2023 /PRNewswire/ -- Contentful, a leading composable content platform for digital-first business, today announced that it has expanded its ...

Contentful Expands Relationship with AWS to Launch Contentful Composable Content Platform in AWS Marketplace

19, 2023 /PRNewswire/ -- Contentful, a leading composable content platform for digital-first business, today announced that it has expanded its relationship with Amazon Web Services (AWS ...

Contentful

contentful

Setting up a development machine can be a tedious process. I once worked in a company where it was an achievement to complete the setting up of the development environment, for the custom shop system we were working on, in under two days (to be fair though, this was before Vagrant and Docker became a thing). And why’s that? Building software products relies heavily on things like your favorite editor or IDE to be productive, it depends on installed dependencies like databases, shell programs or servers to actually run and update your software. Is this still a necessity or could we ditch all of that and rely completely on cloud services today? I recently gave a talk about the and had a look at how far you can get without placing a single file on your computer. Frontend stack 2018 As it turned out; you really can create websites, make them editable and later deploy them ( I’m a big fan of the recent static site generators ) from any computer using powerful online services today. CodeSandbox — the new online editor in town A while back, I noticed CodeSandbox being increasingly used for React prototyping, when people started sharing sandboxes on Twitter with specific React patterns or best practices. “Do we need another online editor?” was my immediate response. Earlier this year, I wrote an article and decided to give a try. It doesn’t feel like my local editor (I’m using VSCode) — but it’s pretty close. on how to use render props in React CodeSandbox In CodeSandbox you can start by forking one of the 500,000 (!) available user sandboxes, or choose to start from scratch using starter templates for React, Vue, Angular, and other frameworks. Looking at all the user-created sandboxes, you’ll see that the editor is used primarily for quick prototyping in the React ecosystem today. However, this doesn’t mean that you can’t use it to build something more complex inside or outside the React ecosystem. Getting started with JavaScript development entirely in the cloud Getting started with a new JavaScript-based project using a modern framework was very tedious, and far and away from being beginner friendly in the past. The folks working on React discovered that this had to change and came up with . This project helps you to bootstrap and start a new React project in a few minutes by taking all and providing all the needed defaults (#zeroconfig all the things 🎉). create-react-app the configuration away is the base for CodeSandbox to create new React projects. For Preact, Vue and other frameworks similar CLI tools are available, and there’s even a “vanilla” starter template without heavy framework dependencies that uses (a new zero-config bundler — it’s fantastic, trust me!) under the hood to give you all the freedom you need. create-react-app Parcel When you decide to go the React route and initialize a new project, you’ll get a codebase that is ready to dive into React development. Crucial editor features that let you forget that you’re “just” in an online editor cmd/ctrl+p to quickly access files and commands There are a few things that I can not live without while doing web development — first, and . These two shortcuts let you jump to any file or execute any command available via a quick and easy-to-use fuzzy search. Programming is very often about productivity, and these two shortcuts help you to achieve anything without leaving the keyboard. CMD+p CMD+Shift+p Dependency handling and automatic installation But now you’re in a cloud environment, right? How does it work to install dependencies then? CodeSandbox provides a dialog which lets you choose dependencies from npm easily. When you install packages with this dialog, the will be automatically updated. Sweet! package.json Prettier included by default When developing in CodeSandbox, is enabled by default, is configurable, and also runs very smoothly! Prettier Hot reloading in a separate window Looking at the screenshot above, the editor provides you with an in-browser preview. The cool thing is that you can open the preview in a separate window, which is perfect for two monitor setups like mine. This way, the code is on one monitor and I can see the changes in near-realtime on the other one. Autocompletion for projects shipping with TypeScript type definitions When I discovered that VSCode picks up type definition included in npm packages, I finally decided to go for TypeScript. As a JavaScript developer, I’m very used to working without great autocompletion but seeing my editor picking up TypeScript definitions is excellent. To see that CodeSandbox does the same is nice! GitHub integration makes CodeSandbox a real tool to work with The last feature that got me was GitHub integration, which lets you create a project in CodeSandbox, push it to GitHub, and then make commits from CodeSandbox directly to GitHub. Very cool stuff! The only feature missing Split-view mode for viewing multiple files at once is the only thing missing to make it my everyday application for development. Let’s hope that it’ll come soon! 🤞🏻 Contentful — the content infrastructure for any project With CodeSandbox you can quickly create your next JavaScript project and push it to GitHub. Very often when you do website development, the projects are built for people that are not that comfortable with writing code, though. Take a quick, one-pager portfolio site for a friend as an example. How would you realize this project saving the effort of updating content with a pull request but also without setting up a complete content management system yourself? You can use Contentful’s content infrastructure for that. With Contentful you can define your needed data models in minutes and get the data back using JSON APIs. For the above example, you need an entity with individual fields for an image, a headline, and a paragraph respectively. This flexibility is where Contentful shines — create a content type and define the three needed fields without any need to set up a server or something similar. portfolio Your non-techy friend can now make content changes to the JavaScript app you’re building without editing JSON files or React code. Later, you can use the provided to get the Contentful data edited by your friend. JavaScript SDK import React from "react";import ReactDOM from "react-dom";import { createClient } from "contentful";import "./styles.css"; const client = createClient({space: "...",accessToken: "..."}); // create the SDK client with the needed credentials // which you can get in the web app function Portfolio() { } /* … */ class App extends React.Component {constructor() {super();this.state = { isLoading: true, portfolio: null }; client.getEntries({content_type: "portfolio"}).then(({ items }) => {this.setState({ isLoading: false, portfolio: items[0] });});} // fetch the entry of your portfolio entry type render() {return this.state.isLoading ? (<div>Loading</div>) : (<div className="App"><Portfolio {...this.state.portfolio.fields} /></div>);}} , one of my favorite things is that you can connect content entries with your frontend component quite easily ( ). This connection makes Contentful . When you look at the code above <Portfolio {...this.state.portfolio.fields} /> a perfect fit for component-driven applications and sites Netlify — the few-clicks static deployment tool Now, you have the code editable and connected to Github in CodeSandbox, and you can edit the content that powers the application via Contentful. The last step is to deploy this application somewhere. is a relatively new service out there that specializes in static deployments. The cool thing about Netlify is that they also allow you to define build scripts — they’re your CI service and host, so to say. Netlify To deploy a site to Netlify you can start by importing a specific GitHub repository: Your next steps are to define a build command and public directory in which the static files will be present. In the case of , the build command is and the published directory will be . After submitting these two configurations, your first deploy will get up and running, and you’ll get a unique subdomain on netlify.com. create-react-app npm run build build One less obvious thing after importing a GitHub repository in Netlify is that this process also defines webhooks on GitHub. Now every time you push new code to GitHub, Netlify will automatically redeploy your site. Magic? Magic! Usage of webhooks to connect all the pieces For this portfolio demo site, there is no additional webhook configuration needed because the React application fetches that data right from the browser. Client-side only applications have the significant downside that they show a loading spinner initially until they fetched all needed API data though. A more performant way to do it is to statically pre-render React on the server and then do something that is called when the client-side React code kicks in. hydration The static pre-render approach means that you would have to rerender the generated HTML files and deploy them whenever your friend updates her portfolio data in Contentful, too. An additional webhook notifying Netlify has to be configured in Contentful in that case. With a little bit more of webhook configuration, you can then set up a complete deployment pipeline without any local installation and configuration shipping static sites without loading spinners. Use the power of web services to not reinvent the wheel In conclusion, I’m amazed how much the web development field has changed. and we no longer have to worry about all the tiny pieces that might be needed in a project. For running Node.js projects we can use , for authentication , and for a performant search experience . Serverless technologies change the way we work Zeit Auth0 Algolia Webhooks and serverless functions give me the possibility to connect all these services and write quick connectors in the cloud in an easy and speedy manner. That’s very exciting because I can now focus on building things rather than setting things up and… I can even create and deploy websites on my friend’s computer while we’re sitting on his balcony. Originally published at www.contentful.com on August 7, 2018.

Develop, edit & deploy websites entirely in the cloud with the CodeSandbox, Contentful and Netlify…

The React Blog Series: Part Two This article is part two in a weekly series on building a blog with React and is an extension of the code created in part one. The React Blog Series Building a Blog with React and Contentful ( ) Writing Unit Test for a React Blog with Redux Sagas Building a website with React and Bulma Part One: Part Two: Import your Medium Feed into React Part Three: Adding a Redux to a React Blog Part Four: Replacing Redux Thunks with Redux Sagas Part Five: Part Six: In Progress This will go over the basics of setting up Contentful and displaying its data as a blog feed in our React application. This does include Redux… yet ;) not Contentful Sign up for Contentful Click here to Sign Up Here When you start poking around Contentful, you might get a strange failure feeling, daja vue perhaps, or is it just that it looks exactly like the Wordpress Admin? is very clean, easy to navigate, and it looks and feels like Wordpress. As much as hate to admit, I love it and thats an amazing thing because I . To be fair, I don’t hate Wordpress for its UX, I hate it because its slow and built on what looks like hacked together PHP, and lets face it, no one actually likes PHP. Not even the creator of PHP. Contentful a lot loth Wordpress The Concept is content management as a service (CaaS), this replaces the need to have to connect your site to that terrible MySQL database hosted on some crappy Apachy Server, where you have to install phpMyAdmin and spend hours trying to figure out cPanel. Contentful The Data There are two parts to your data, the structure and the data. It’s basically a really nice web form the converts to simple json. You have to first set up your form the in , then you can hop over to and fill out your forms, each form becomes an item in the models array of data sent via rest end points. Content Model Content Let start by making a Blog Model Add in three fields: Title, Path, and Content The JSON preview will look like this Now let’s create a Blog post for the app to pull and display on our Blog page. Go to Content, and Click Add Blog in the top corner and fill out the form. Now you have your first blog post! Get Api Token You will need a and access token to retrieve your data. Go to the tab and click Space Id APIs Add Api Key. Name it what ever you want and save. Set Up Contentful in React npm install contentful Let’s just see if we can connect and get our data. On let’s import Contentful, set up a simple client and then getEntries. Now let’s console log what we get, with any luck we should be see our test blog post. This is temporary. src/index.js import React from 'react';import ReactDOM from 'react-dom'import registerServiceWorker from './registerServiceWorker'import { BrowserRouter as Router } from 'react-router-dom' import App from './App'import './index.css' import * as contentful from 'contentful' var client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a' }) client.getEntries().then(entries => {entries.items.forEach(entry => {if(entry.fields) {console.log(entry.fields)}})}) ReactDOM.render((<Router><App /></Router>), document.getElementById('root'))registerServiceWorker() Run your app and open your console. You should see a little clean object full our data. Isn’t that amazing. It was like, the simplest thing to set up ever! But now let’s do it right… well, as much as we can without Redux :P Setting Up Your Blog Page Copy all of your Contentful stuff and delete it from your index. Head over to your and change it from a dumb component to a smart React.Component class. Blog.js Then, we will need to include state with an empty post array. Paste in your Contentful createClient object. Next, using the lifecycle hook , we need to call a function which will call a function React componentDidMount fetchPosts setPosts import React from 'react'import * as contentful from 'contentful' class Blog extends React.Component { state = {posts: []} client = contentful.createClient({space: 'qu10m4oq2u62',accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a'}) componentDidMount() {this.fetchPosts().then(this.setPosts);} fetchPosts = () => this.client.getEntries() setPosts = response => {this.setState({posts: response.items})} render() {return (<p>This is the Blog Page</p>)}} export default Blog If you plug a console log in the function you will see we are getting our data back from . fetchPosts Contentful Now that we are getting data and we are doing it the React way (w/o Redux), let’s update the render function to display the data. We will move these to their own pretty component later, but for now let’s stick it in some pre tags. render() {return (<div><p>This is the Blog Page</p><br/>{ this.state.posts.map(({fields}, i) =><pre key={i}>{JSON.stringify(fields, null, 2)}</pre>)}</div>)} Yay!!! Adding New Blog Posts Head back over to and click , then fill out the information. You know the drill. Contentful Content > Add Blog Click and head get back over to your app, refresh the browser and !! There’s your second post. Publish BLAMMO Styling the Blog Feed We need to set up a Blog Item component. Our Blog page will contain a list of Blog Items which make up “ ”. the feed and will be a child of . Since is in the folder, we will create a folder called in the folder, then create our in our newly created folder. Remember we are using fractal file structures BlogItem.js Blog.js Blog.js app blog app BlogItem.js blog If you’re keeping score, and following correctly, our current file structure should look something like this. Fractal File Structures Create BlogItem Component In , create as simple component with box. We’ll pass in props which for now will be a spread of the fields from Contentful. BlogItem.js Bulma import React from 'react' const BlogItem = (props) => (<div className="box content"><h1>{props.title}</h1><p>{props.content}</p></div>) export default BlogItem Now, back in we need update our posts map in render to return our component and spread the fields as properties. Blog.js BlogItem render() {return (<div><p>This is the Blog Page</p><br/>{ this.state.posts.map(({fields}, i) => )}</div>)} <BlogItem key={i} {...fields} /> Refresh and there you go. But… that kind of looks . terrible Style Blog Page Let’s replace with a for our page header. Since we will probably do this on the top of most of our pages, lets create this as a global reusable component. <p>This is the Blog Page</p> Bulma Hero In our app folder, create a new folder named components. By our fractal logic this implies that these components will all exist as children of the App. : If you haven’t figured it out yet, and it’s folder of children ( ), will contain all our presentation logic. For now, every we do will be a child of . , will get a sibling named and its folder of children ( ) and it will contain all of our and . Spoiler alert App.js app App Later when we refactor to use Redux App Store.js store data services state In the folder create two files, and components PageHeader.js PageContent.js will be a component for our Bulma Hero. We will not be including the subtitle content. This way we can do css styling or include links and pass it as a children prop. PageHeader import React from 'react' const PageHeader = (props) => (<section className={`hero ${props.color}`}><div className="hero-body"><div className="container"><h1 className="title">{props.title}</h1><h2 className="subtitle">{props.children}</h2></div></div></section>) export default PageHeader And in our replace with Blog.js <p>This is the Blog Page</p> <PageHeader color="is-info" title="Code Blog">Your standard <strong>JavaScript</strong> programming blog, albeit, probably not very good, but I will at least try to keep it entertaining. This blog is a chronological mix of random posts on Angular, React, Functional Programming, and my <strong>project walkthroughs</strong>.</PageHeader> will be a styled component to confine our page to a max width and add padding and what have you. PageContent import styled from 'styled-components' const PageContent = styled.div`margin: 0 auto;max-width: 960px;padding: 1.5rem;`export default PageContent Ahh… now that’s much better. Better More Realistic Blog Posts Back in Contentful, let’s add some fields to our Blog Content Model We are going to add three new fields: Set appearance as icon: single line : Valid as only values “IN_PROGRESS” and not required. Set appearance as status Dropdown : Set appearance as date date only Now hop over to your First and Second blog post and fill in some data. Icon can be a url link to an icon or base64 as long is it can normally go into a attribute. src Content should set as Markdown so when you fill your page content it can be styled with Markdown ! Do something like this for both posts, , then refresh your. It probably going to look terrible… save YUP! Rendering Markdown So lets start by addressing the elephant in the room. We need make react render the markdown as html and it needs to look… pretty. npm install react-markdown In the , replace content <p> with the react-markdown. BlogItem.js import React from 'react' import * as Markdown from 'react-markdown' const BlogItem = (props) => (<div className="box content"><h1>{props.title}</h1> </div>) <Markdown source={props.content} /> export default BlogItem BOOM! Much better, but I would remove the H1 titles from the in and rename your blog posts with what the H1 title was. You will see why when we add the Icon and stuff in next. Markdown Contentful Contentful Adding the Icon This is just simple . Open your and we are going to steal the example from website. Bulma BlogItem.js box media Bulma’s import React from 'react'import { Link } from 'react-router-dom'import * as Markdown from 'react-markdown'import moment from 'moment' const BlogItem = (props) => (<div className="box"><article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"> <h1>{props.title}</h1>  
      <Markdown source={props.content.split(" ").splice(0,150).join(" ").concat('...')} />  
    </div>  
    <div className="level">  
      <div className="level-left">  
        <Link className="level-item button is-small is-link is-outlined" to={props.path}>Read More</Link>  
      </div>  
    <div className="level-right">  
      <p className="level-item has-text-link is-size-7">

        {moment(props.date).calendar(null, {  
          sameDay: '\[Today\]',  
          lastDay: '\[Yesterday\]',  
          lastWeek: '\[Last\] dddd',  
          sameElse: 'MMM Do YYYY'  
        })}  
      </p>  
    </div>  
  </div>  
</div> </article></div>) export default BlogItem Yeah, so thats it but it’s kind of busy, and to be fair I think there is some overlap with the full page blog post Create A BlogPost page and clean up BlogItem Hmm… If you remember correctly in our last article, Routing works off a static component. But we don’t want to have to hard code our every single blog post, that kind of defeats the purpose of using Contentful as CMS. <Switch> Luckily for us, has planned ahead and allows us to have path params. In add new route react-router-dom Router.js <Switch><Route exact path='/' component={Home}/><Route path='/blog' component={Blog}/> </Switch> exact <Route path='/blog/:blogPost' component={BlogPost}/> Important: This one took me a hot minute to figure our but you CAN NOT include a dash (-) in the parameter name. I originally had _:blog-post_ and couldn’t figure out why it looked like it was working but it wasn’t . It’s also important to note that you need to add exact in the Blog path , otherwise it will match the _/blog_ route first. Update the in our to put the /blog/ in front of our path <Link …> BlogItem.js <Link className="level-item button is-small is-link is-outlined" >Read More</Link> to={{pathname: `/blog/${props.path}`,state: { props }}} But before we can test this, we need to create a BlogPost page. For now lets just do some simple <pre> displaying so we can make sure we are sending the data to the blog post as state import React from 'react' const BlogPost = (props) => (<h1>Blog Post</h1><pre>{JSON.stringify(props, null, 2)}</pre>) export default BlogPost Now when we navigate to our blog post from the blog page we should see a huge object in our and the history object contains our state which is our blog post. <pre> Set Up the Blog Page Okay, before you read this and roar with rage that i clearly have no clue what I’m doing, this is not the best way to do this and object de-structuring this way can not be a best practice. This will all move to Redux in my next tutorial and which will be a WAY cleaner solution. import React from 'react'import { Link } from 'react-router-dom'import moment from 'moment'import * as Markdown from 'react-markdown'import PageContent from './../components/PageContent' const BlogPost = ({ location: { state: { props } }}) => { return (<PageContent><nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to="/blog">Back to Blog</Link></div><div className="level-right"><p className="level-item has-text-link is-size-7">    {moment(props.date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav><article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"><h1>{props.title}</h1><Markdown source={props.content} /></div></div></article></PageContent>)} export default BlogPost Clean Up the Overlap Now we can look at our and and find out overlapping code and make them nice pretty little components. BlogItem.js BlogPost.js Both our pages contain a content sections with the icon and and bottom and date sections, however, the button and date sections are in different places on the two pages. Let’s first create a folder for our new components. These are share components of the so in the blog folder create a folder, then create two files and Blog shared BlogContent.js BlogNav.js import React from 'react'import { Link } from 'react-router-dom'import moment from 'moment' const BlogNav = ({ to, date }) => (<nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to={to}>Back to Blog</Link></div><div className="level-right"><p className="level-item has-text-link is-size-7">{moment(date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav>) export default BlogNav and import React from 'react'import * as Markdown from 'react-markdown' const BlogContent = (props) => (<article className="media"><div className="media-left"><figure className="image is-64x64"><img src={props.icon} alt="Image" /></figure></div><div className="media-content"><div className="content"><h1>{props.title}</h1><Markdownsource={props.limit? props.content.split(" ").splice(0,props.limit).join(" ").concat('...'): props.content}/></div>{ props.children }</div></article>) export default BlogContent In , we won’t always use but we want to put it there so we can place the nav in the that location on . You’ll see… BlogContent.js **props.children** BlogItems.js Now, lets update our and . This is gonna blow your mind. BlogItem.js BlogPost.js import React from 'react'import BlogNav from './shared/BlogNav'import BlogContent from './shared/BlogContent' const BlogItem = (props) => (<div className="box"><BlogContent limit={150} {...props }><BlogNav date={props.date} to={{pathname: `/blog/${props.path}`,state: { props }}} /></BlogContent></div>) export default BlogItem Notice how we are wrapping the BlogNav in this snippet, but not in the next one. This is what the props.children is used for. and import React from 'react'import PageContent from './../components/PageContent'import BlogNav from './shared/BlogNav'import BlogContent from './shared/BlogContent' const BlogPost = ({ location: { state: { props } }}) => (<PageContent><BlogNav date={props.date} to="/blog" /><BlogContent {...props } /></PageContent>) export default BlogPost That’s much better! SO The Status Tag In my examples I am including a tag for Status, this way I can tag my posts as in progress or archived or whatever You don’t know this yet but I do plan to use this in other places so we are going to add this in the folder. Create a file called . src/components StatusTag.js import React from 'react' const StatusTag = ({status}) => {switch(status) {case 'IN_PROGRESS':return (<span className="tag is-small is-warning" style={{ marginRight: 20 }}>In Progress</span>)case 'ARCHIVED':return (<span className="tag is-small is-danger" style={{ marginRight: 20 }}>Archived</span>)default:return (<span></span>)}} export default StatusTag And back in our let’s add the StatusTag next to the date. And don’t forget to import it. BlogNav.js import StatusTag from './../../components/StatusTag' const BlogNav = ({ to, date, }) => (<nav className="level"><div className="level-left"><Link className="level-item button is-small is-link is-outlined" to={to}>Back to Blog</Link></div><div className="level-right"> <p className="level-item has-text-link is-size-7">{moment(date).calendar(null, {sameDay: '[Today]',lastDay: '[Yesterday]',lastWeek: '[Last] dddd',sameElse: 'MMM Do YYYY'})}</p></div></nav>) status <StatusTag status={status} /> And we need to update places we use the component. <BlogNav … > <BlogNav date={props.date} to="/blog" /> status={props.status} Now we have a nice little tag so we can let our readers know that we are still working on this article. Let’s Review We learned about Contentful and signed up for an account Created Contentful content Connect Contentful to our app Created a blog feed page Created a blog feed items Created a blog post page Updated our Contentful content to realistic content Set up React to render Markdown as Html Refacted our code to make it cleaner Added a blog Status tag Now, we have the basic blog that you can start using today if you wanted — Next Import your Medium Feed into React

Building a Blog with React and Contentful

Earlier this year I had a goal to step up my blogging game. When it comes to blogging there are tons of platforms available for people to use. A blog could use a static site generator like , or a CMS like or . Jekyll Wordpress Drupal Both of these approaches have their own strengths and weaknesses, and whatever solution a blogger chooses will come with its own set of constraints. I was partial towards Jekyll, mostly because I didn’t really enjoy writing in PHP if I could help it. I also considered writing all of my blog posts on Medium, and then porting it to my blog via . However, I wanted to be able to separate my technical writing from my future plans of writing about motivation and productivity. Medium’s REST API After some good ol’ google-fu, I came across a combination of tools that really changed the game for me in an unexpected way: Contentful and Netlify . What is Contentful? Contentful is a powerful SaaS platform that provides developers and small businesses with a highly configurable CMS that lives independently from the user’s publishing platform. I like to think of it as a easily-accessed cloud database for different types of content. Using Contentful, a blogger can create models to represent different types of content they may want to include in their blog. I like to think of these models as which then have that describe them. entities attributes As an aside, if you’re not familiar with the idea of entities and attributes in database design, I highly recommend you check out Modeling is an awesome tool for orienting your thoughts about a project before you’re first getting started. this video that covers how you can make visual models to describe a database. Let’s dive into an example of a Contentful model. In my opinion, a simple blog post can be broken down into several attributes. If you think about it, the main attributes are: A blog title Slug (unique path to the content) Author of the post Category Post body (your content) A featured image (an optional image that can be shown to readers as they scroll throw your posts) Post published date When you put all of these together, you have a basic skeleton of a blog post already done, without worrying about styling or formatting. Here is an example of a model on Contentful. I use this as my standard scaffold for posts on my blog: The model representing a blog post on my blog. Awesome features of Contentful When I first got started with Contentful, there were two features when describing a model that I found particularly useful: Dynamic field entries Field validation based on customizable criteria Dynamic Fields A good example of a is the slug (the path to the specific post). For SEO purposes, it’s a best practice to put hyphens in between the words in your slug, because when you use spaces, it is encoded as . dynamic field “%20” This is because Google and other search engines only treat hyphens as word separators, and ignores alternatives like underscores and spaces. If you’re interested in a little bit of history into why this became a standard, check out this video by Google’s Matt Cutt on the topic. For an example, let’s use spaces inside of our slug. When the browser encodes the URL, the result will look like this: https://malikbrowne.com/blog/contentful%20and%20netlify%20the%20dynamic%20static%20site%20duo Yuck. The whole idea behind SEO is to Let’s take a look at another example with dashes: make your content readable. https://malikbrowne.com/blog/contentful-and-netlify-the-dynamic-static-site-duo This is much easier to read. It’s a minor difference in ranking, but there definitely is a difference. As a convenience, Contentful will automatically convert your title into a properly formatted slug if you set the option . “slug” Contentful also allows you to create new instances of each model you define. These individual units of a model are then considered the “content” itself by the CMS. Field Validation In a blog, you can’t really have a post without a body or title. Those can be set as required fields so that Contentful won’t publish a post unless they are filled. Out of all the validation features they have, the one I use the most is image requirements. When working with multiple people on a piece of content, requirements can easily get lost in the mix, and if you’re not careful, bad images could break the layout and functionality of your site. For example, to optimize loading times you may want to limit the file size of an image that someone sets as the featured image of a blog post, since Contentful doesn’t compress your images for you. Contentful allows you to set multiple different image parameters: Image file size Image proportions (width and height) Type of file (jpg, png, gif) This is a really useful feature that allows you to have a lot of granular control when working with a group of editors. If creating these complex models seems daunting, don’t fret. Contentful has plenty of basic content model templates available to users once they sign up. On top of that, Contentful allows you to create up to new content records in their system for 10,000 free. Talk about a free trial. After you or a collaborator has filled out the content of a post and hits that green publish button, Contentful will make your content accessible via a convenient REST API. This allows developers to query and manipulate all of the available , , and that you provide. models assets content data Contentful also stores metadata about of your models, provides parameters for filtering your blog to allow pagination, and provides you with a basic markdown editor to write your blog posts if you don’t have a setup already. (I personally use this application called , it’s increased my productivity when writing Markdown by a ton.) Typora Markdown can be easily parsed down into HTML using a whole bunch of tools on the internet. After writing your posts, you can pull the information you need either through the previously mentioned REST API, or Contentful’s SDK. The next issue you would need to think about is deployment. That’s where comes in. Netlify What is Netlify? Netlify is an automation platform that focuses on providing the easiest flow for managing deployments, covering everything from continuous integration to CDN distribution and caching. Some of my favorite features that Netlify offers are: A global CDN that distributes your content across the globe A fast native DNS service Automatic deployments, bundled with one click rollbacks Build automation You can check out a list of all the awesome features that Netlify provides here. Netlify makes the process extremely simple — you only have to push your code to Github. When Netlify detects a change in your linked git repository, it will start the deployment by checking your file in your Github repo for any build scripts. You can also specify which build script Netlify runs. package.json Another thing to note is that Netlify scales with your website, no matter how big it gets. Also, just like AWS you only pay for what you use. Why use Netlify and Contentful together? When I first created my blog, I was deploying my website manually, using to create the newly rendered HTML files (for SEO purposes), and dragging these production-ready files onto my FTP server. react-snapshot Whenever I wanted to make CSS changes after testing on other devices, I had to rebuild my create-react-app project and then re-run react-snapshot every single time. Let me tell you something: that got old. FAST. Manual deployments are stupid. This is where web hooks came in. If you’re not familiar with webhooks, a webhook is a way for an application to provide other applications with real-time information. A webhook delivers data to other applications as it happens, which means you get data immediately. In a normal API, you need to make a network request frequently to simulate real-time data. This is very inefficient, and is the reason why webhooks are growing in popularity. Contentful allows you to set a webhook that gets called based on different actions a user can do in their application. These actions include: Creating or updating a new asset, entry, or content type Publishing or unpublishing an asset, entry, or content type Deleting an asset, entry, or content type When any of these actions occur, Contentful will send out a request to a specific URL, telling all listeners that data has been changed. Netlify can listen to this webhook, and trigger a build command when it receives a network request for this URL. These are my personal webhook settings in Contentful: Available actions to a user in Contentful With the help of Netlify and these webhooks in Contentful, everything that I had to do manually before is now done with a “git push” command, and the push of a button on Contentful. I have also switched over to GatsbyJS, which does several things for me that I had to do manually before. This includes: Providing a nice templating system for my blog posts Creating a sitemap for search engines Providing new HTML pages for ones that didn’t exist previously Optimizing images on my website. Powerful, helpful, and super intuitive. Tools to use with Contentful and Netlify There are tons of static site generators out there. But a real pain point that I faced when working with other development environments was that adding functionality was an extremely daunting process. Most of the time, the solutions were either unidiomatic or unintuitive. After doing some more research into the , I came across these two projects that stood out to me as great tools for optimal server-side rendering: JAMstack Gatsby.js Next.js Both of these tools are compatible React out of the box, which gives your static site the potential to have the same functionality as a complex web application. If you’re a developer and you’re looking to create a new blog, I highly recommend using these tools together with one of the static site generators I mentioned. Thanks for reading :) If you liked this post, please give me some claps! It will make it so other people will see this here on Medium. This post was originally published on malikbrowne.com. You can find more articles like this on my website! I’m always interested in hearing from people in the dev community, so feel free to say hello to me on Twitter . Tell me your opinion on the JAMstack!

Contentful and Netlify: The Dynamic Duo of Static Site Management

Even after a few years of coding and a year doing web development, I was apprehensive of doing any work for an actual client. Although I'm good at the stuff I know, dealing with the expectations of another person felt like a step up. It was this that made me wary of taking the plunge into building a website for someone else (especially since they would be paying me for it). But, even though there were lots of new things to learn and obstacles to overcome, I was able to deliver and leave a very happy client. Difficulties There were several challenges I faced as I moved from creating and coding my own projects to working with someone else. Most of the issues that I faced were not to do with the code at all. Here are some of them Not Getting enough Information Before I Started. Based on a few texts send over Facebook I thought I had a good idea of what the client wanted. The website was for a takeaway food service and I had in mind a single-page site with fixed content. After looking into the client's requirements a bit more I realized that the menu would need to be updated every week. Which led me to my second problem. What to do about the Backend Everything that I'd made up to this point was personal coding projects. If I needed to update anything I would go into the code and make any changes that I needed to. Well, this wouldn't work here. I needed to find a way for the client to update certain information on her own. After a bit of research, I realized a content management system would solve this problem; I just had to pick one. WordPress didn't seem to fit in with what I wanted (although I'm sure it could have with more time). In the end, I went with . It allowed me to add a couple of items and retrieve them with a REST API then add them to the code however I wanted. This was the perfect solution for something that I thought might be a big problem. contentful Client Content Another way that this was different from working on personal projects was that I had the client give me content (copy and images) to add to the site. I'm used to sourcing my own images and writing my own copy. It's nice not to worry about this but it also brings about its own issues. I have a writing background and I'm used to writing things my own way. I had to relinquish my own opinions and embrace the client's style of writing. While I did source most of the images for the site myself, some were given to me by the client. I decided here that I would suggest some edits. For the profile picture, I removed the background and added a plain color, and changed the shape to a circle. I didn't know how much design/editing I would need to do but the client was happy with the changes and it didn't take me long to do. Hosting This is another non-code area that I didn't have a lot of experience in. However, I imagine most people wouldn't be too pleased if you told them their website was done and dumped a load of files in their email. Clearly, the website has to be hosted and up and running online. I've hosted (work in progress, guys) using Netlify but I didn't feel like I had loads of experience. my website This was another situation where I was saved by a lot of Googling. In the end, I decided to host it on Firebase. They have pretty good documentation and it was relatively painless to get it up and running. It also had the added benefit of proving the site with an SSL certificate. What was not as easy was getting the different accounts to work together in the way that I wanted. Passwords and Accounts The biggest problem I ran into was how to manage accounts without having full access. For example, I directed the client towards Google Domains to purchase a domain name. It made sense for her to do that as she would be paying for it. However, when I came to setting up the hosting for the site I didn't have access to the Google domains profile, and so couldn't verify the ownership of the domain name. To make things more difficult Google Domains uses the Google ID so for the client to share her password with me would be very insecure. Some furious Googling later I was able to give the client instructions to follow in order to add me as an administrator and be able to verify the domain name. The same thing happened in reverse with Contentful. I set up an account in my name in order to set up the content. Then when it came time to give the client access I ended up changing the username and email to her details. This was not that easy as she had to verify her email address. I'm sure there is an easier way to do it but this was the hacky way that work for me this time. Creating an Invoice Another new experience for me! I hadn't anticipated being asked for an invoice, so again I went to my good friend Google. This was actually a pretty easy fix. I downloaded a template and filled in my details and was all done within 15 minutes. The challenging parts of this project were actually what I enjoyed most. I learned lots of new things and got to play around with some new software. Coming away from the project, I have a much better idea of the aspects of making a website, that goes beyond coding. Wins As well as having some challenges, there were also some definite wins. I found someone who would pay me for what I know. This was pretty cool. It wasn't loads of money but it felt good to be earning doing something I love. The other win was realizing that coding the website didn't feel hard. I've spent so many hours battling against JavaScript it was nice for everything to fall into place. Code-wise, it wasn't a particularly difficult project, but it has given me the confidence to know that I can take on similar projects.

Everything I Learnt From Landing My First Paid Client

In the we took a look at , the PHP static site generator which is currently the most starred on Github. Today we’re exploring , a tool which promises to bring a Laravel-based approach to the world of PHP static site generators (SSGs). first article of the series Sculpin Jigsaw I’m gonna be honest with you — I’m not the biggest Laravel user. I appreciate what it’s done for PHP, and how it has helped push forward the world of PHP development in a time where older frameworks were struggling to keep up with innovations coming from other platforms. It’s also a prime example of the good kind of cross pollination happening in the PHP world: it employs packages from the Symfony world, The PHP League, Doctrine, and more. It’s a good lesson in building something cool on top of great foundations, without having to continuously reinvent the wheel. Overall, I think that Laravel is an excellent framework, but I’m definitely inexperienced with it. If you think I have overlooked or misjudged something (both Laravel and Jigsaw-related), please feel free to reach out to me on Twitter: constructive criticism is always welcome! Jigsaw (~900★) Just like I did with Sculpin, I’ll jump straight into the action, so let’s create a sample project and play with it! We’ll open the and start from there. official docs Unlike Sculpin, Jigsaw doesn’t provide a skeleton project we can use as quickstart. Instead, we must create a normal project, add as dependency, and use its CLI: tightenco/jigsaw mkdir jigsaw-example && cd jigsaw-examplecomposer require tightenco/jigsaw./vendor/bin/jigsaw init Let’s go through the default directory structure that was just generated. In the top level directory, we have a with this code: config.php <?phpreturn [    'baseUrl' => '',    'production' => false,    'collections' => [],]; I’m not sure yet what this means, but having a configuration file clearly placed seems like a good approach 👍. The second PHP file is called , and it’s empty (only some commented-out code), but it hints at how we could use the event system at some point. bootstrap.php We also have Javascript dependencies. I see a , which lets me know that is being used. So I run and in the meantime I’ll explore the docs to try to understand a bit more of what I’m doing 😉. webpack.mix.js Laravel Mix npm install About 10 dependencies and 300MB in later, we’re back. Now, let’s try to build our site. It appears we have 2 ways of doing so: we can use the Jigsaw CLI to build and then serve, or use npm and its live reload capabilities provided by Browsersync: node_modules # With Jigsaw CLI./vendor/bin/jigsaw build./vendor/bin/jigsaw serve # localhost:8000# With npmnpm run watch # localhost:3000 Regardless, both work and you get this! Naturally, only John Oliver can really convey my reaction to this page. The directory structure Now let’s explore the skeleton project that was generated earlier. The order in which we’re exploring parts of the project might appear to be random because, well, it is. That’s the cool thing about discovering something new, right? The exploratory phase, where you peek at this, take a look at that, and oh, a directory! What lies therein? source Being a Laravel-based project, I’m not surprised to find an file, which contains the shiny from above. The directive hints to me that I should go look in the directory for a template, and lo and behold, there it is. Everything seems nice and tidy with the templates, let’s go check how assets are handled. index.blade.php Hello world! @extends('_layouts.master') _layouts master.blade.php Assets and configuration Laravel Mix provides out of the box support for Sass, so is your starting point. SCSS might not be the latest and shiniest thing on the CSS landscape, but it’s battle-tested and definitely gets the job done, so I approve of its inclusion. Let’s turn that page into something that will get your attention source/_assets/sass/main.scss /* source/_assets/sass/main.scss */$bg-color: red;body {  background-color: $bg-color;} Let’s hit save and webpack should do its magic and turn our background red, right? Yes, it does! I’ll spare you the screenshot for your eyes’ sake, and now let’s continue our exploration. I’d like to set up a basic blog, with posts written in Markdown files. To do that, let’s introduce the concept of , which, as the docs state, . Sounds about right for a blog. Remember the file from earlier? Let’s tweak it to tell Jigsaw about our collection of blog posts: collections give you the ability to access your content at an aggregate level config.php <?phpreturn [    'baseUrl' => '',    'production' => false,    'collections' => [        'posts' => [            'path' => 'blog/{date|Y-m-d}/{filename}',        ],    ],]; Jigsaw will look for the corresponding directory for every collection we define. In our example, will become , so in that directory let’s create a blog post to show our love for one of the greatest songs of all times. posts source/_posts ---extends: _layouts.posttitle: The Fresh Princeauthor: Will Smithdate: 1990-09-10section: content--- Now this is a story all about howMy life got flipped-turned upside downAnd I'd like to take a minuteJust sit right thereI'll tell you how I became the prince of a town called Bel-Air Let’s save this file as , and then let’s create the appropriate template as specified in the part of the front matter: . the-fresh-prince.md extends source/_layouts/post.blade.php @extends('_layouts.master')@section('body')<h1></h1>    <p>By  - </p>    @yield('content')@endsection Let’s run , and we’ll have a nice directory generated with our shiny website, so let’s open the URL (which we still have to build ourselves) and… It works! ./vendor/bin/jigsaw build build_local (Author’s note: at this point I would like to add more GIFs, but I have to keep it professional. Let’s all just pretend to have a GIF of Jake Peralta saying , thank you.) noice Is Jigsaw Contentful-ready? We’ve covered some of the basics, so now the million-dollar question: is Jigsaw Contentful-ready? With this, of course, I mean how easily content stored in Contentful can be integrated in a Jigsaw-powered website. We open the , and with that page open in the tab, we can give this a try. Remember ? It contained some commented-out code which hinted at how events work, so let’s reopen that: documentation page about event listeners bootstrap.php <?phpuse TightenCo\Jigsaw\Jigsaw;/** @var $container \Illuminate\Container\Container *//** @var $events \TightenCo\Jigsaw\Events\EventBus *//*** You can run custom code at different stages of the build process by* listening to the 'beforeBuild', 'afterCollections', and 'afterBuild' events.** For example:** $events->beforeBuild(function (Jigsaw $jigsaw) {*     // Your code here* });*/ Ok, seems to be reasonably easy. As extra help, after some googling I found an about creating a sitemap with Jigsaw, and the original for the events feature, so I have enough to figure this out. Let’s and hack this thing together! article pull request composer require contentful/contentful // In bootstrap.phprequire_once 'contentful_fetcher.php';$events->beforeBuild(ContentfulFetcher::class);// In contentful_fetcher.phpuse Contentful\Delivery\Client;use Contentful\Delivery\Resource\Entry;use TightenCo\Jigsaw\Jigsaw;class ContentfulFetcher{    /**     * Jigsaw requires either a callable or the name of     * a class which implements a method called "handle"     *     * @param Jigsaw $jigsaw     */    public function handle(Jigsaw $jigsaw): void    {       // Let's only build for production        if ($jigsaw->getEnvironment() === 'local') {            return;        }        $client = $this->getClient($jigsaw);        foreach ($jigsaw->getCollections() as $collection) {            $this->cleanSourceDir($jigsaw, $collection);            $entries = $this->getPlainEntries($client, $collection);            foreach ($entries as $entry) {                $this->writeEntryToMarkdownFile($jigsaw, $entry, $collection);            }        }    }    private function getClient(Jigsaw $jigsaw): Client    {        return new Client(            $jigsaw->getConfig('contentful.accessToken'),            $jigsaw->getConfig('contentful.spaceId')        );     }    /**     * Before every run, we remove the previous contents of the source directory.     */    private function cleanSourceDir(Jigsaw $jigsaw, string $collection): void    {        $dir = $jigsaw->getSourcePath().'/_'.$collection;        $jigsaw->getFilesystem()->deleteDirectory($dir, true);    }    /**     * We transform objects of type Contentful\Delivery\Resource\Entry     * into plain arrays for ease of use later on.     */    private function getPlainEntries(Client $client, string $collection): array    {        // Convention:        // Every defined collection corresponds to a content type ID in Contentful        $query = (new Contentful\Delivery\Query())            ->setContentType($collection)        ;        $entries = $client->getEntries($query);        if (!count($entries)) {            return [];        }        /** @var Contentful\Delivery\Resource\ContentType $contentType */        $contentType = $entries[0]->getContentType();        return \array_map(function (Entry $entry) use ($contentType) {            // Convention:            // The content types may contain a field called body,            // which will be used as the markdown content of the generated file,            // so we give it a default value            $plainEntry = [                'id' => $entry->getId(),                'body' => '',            ];            foreach ($contentType->getFields() as $field) {                $plainEntry[$field->getId()] = $entry->get($field->getId());            }            return $plainEntry;        }, $entries->getItems());    }    /**     * Converts an entry into a markdown file and writes it to disk.     */    private function writeEntryToMarkdownFile(Jigsaw $jigsaw, array $entry, string $collection): void    {        $contents = '---extends: _layouts.'.$collection.'section: content';        $body = '';        foreach ($entry as $field => $value) {            if ($field === 'body') {                $body = $value;                continue;            }            $contents .= $field.': '.$value."\n";        }        $contents .= '---'."\n\n".$body;        $path = sprintf('_%s/%s.md', $collection, $entry['id']);        $jigsaw->writeSourceFile($path, $contents);    }} This code is more of a proof of concept than complete implementation (it relies a lot on conventions, and it lacks handling of special fields such as locations, links, etc); however, it should get the job done for a basic example. First of all, we pass a fully-qualified class name (FQCN) to , and Jigsaw will know that it must create an instance of that class and execute the method of it. Truth be told, I think there should be an interface in order to have a stronger contract, something like this: $events->beforeBuild() handle namespace TightenCo\Jigsaw;use TightenCo\Jigsaw\Jigsaw;interface EventHandlerInterface{    public function handle(Jigsaw $jigsaw);} Or perhaps just requiring any valid callable (thus including objects implementing ). It works now in its present state but I like strong contracts, and you should know by now that I'm picky—it's in the title of the series! __invoke This is an overview of what actually does: ContentfulFetcher If the environment is detected, the whole process will be stopped. This is done to avoid the performance impact due to having to fetch all data from Contentful on every build (which can likely be very often, if running on watch mode). The idea is to run a initially to fetch all content, and then operate with what’s been stored locally. Of course, a good idea would be to add the generated files to the local , to avoid keeping them in version control (content doesn't belong there). local ./vendor/bin/jigsaw build production .gitignore We create an instance of a client object using the Contentful Delivery SDK for PHP. We iterate through all the defined collections, and we use a convention to map a local collection to a content type ID in Contentful. We then clean the corresponding directory, where we will dump the generated files. We fetch entries for the given content type, and we use the object to get a list of fields. With those fields, we build the appropriate YAML front matter section, and then we add the body at the end (string handling here is very basic and could be improved). Contentful\Delivery\Resource\ContentType We finally dump the contents of the generated file. We use the Contentful ID to save them, as we can define a pretty URL when configuring the collection. There’s a lot of gluing going on, but it works on my machine™️. This could be done a thousand times better, with more flexible configuration, but as a proof of concept I’m reasonably satisfied with it. Verdict Before our final verdict, I think it’s only fair to mention that during the process of writing this article, I experienced a couple of issues which have since been fixed. Before publishing, I got in touch with (one of the people behind Jigsaw) and explained that I was experiencing some difficulties with the handling of assets and events (misconfiguration for the former, and lack of docs for the latter). Over the course of a weekend, both issues have been fixed 👏 Matt Stauffer I quite like Jigsaw, but it’s rather barebones in its out-of-the-box configuration. Unlike Sculpin, it makes no assumption over what kind of use you’ll have for it, which is a double-edged sword: it avoids clutter and gives you complete control, but it also creates a higher barrier of entry for simple use cases such as blog. To solve this issue, Matt revealed to me that they’re building a generator with website skeletons, to address the most common needs (such as a blog, a documentation website, etc), with a to track progress. He also mentioned that they just launched a new , which I encourage you to check out. Github issue showcase of websites built with Jigsaw As a non-Laravel developer, I was afraid that Jigsaw would be difficult to pick up and use, but it definitely wasn’t the case. It is actively being developed (the events system was added just a few months ago) and is on track to quickly become the most popular PHP static site generator, in terms of stars on Github. It provides very good defaults, and assets are preconfigured to use a modern stack (Sass for CSS, and webpack with Babel for JS). The only real criticisms I can make are actually the same as when I discussed Sculpin: content and presentation (assets and templates) could be more separate; instead, they belong to the same directory, and I would love to be able to have a more defined structure for collections, instead of relying exclusively on the YAML bit before the actual Markdown contents. source Next article will be about , which describes itself as a documentation generator. Stay tuned! Couscous Originally published at www.contentful.com on August 1, 2018.

An extremely picky developer’s take on static site generators for PHP: Part 2 — Jigsaw

This article is a reflection on the bigger picture around the new generation of static sites generators that are currently gaining traction and adoption. Static site generators have been around for a while and an early player in the field was . We’re now seeing a new wave of static site generators like , that no longer are limited to publishing needs of the developer audience (as in, manage your content completely on GitHub), and instead have the ambition of becoming new tool for content publishing. Jekyll, which gained a lot of traction at launch, triggered the birth of GitHub Pages and hence created a developer-friendly solution to content GatsbyJS the The current wave of static site generators comes with an entire ecosystem that makes the movement wider in scope than site-building tools themselves or even just content. While there’s a lot of attention surrounding what this means for , there’s much less thought put into behind-the-scenes reasons on why these new stacks like + + are getting attention and being chosen by development teams. applications that directly touch the browser Contentful GatsbyJS Netlify Runtime that reaches out for data and some adventures in game servers Years ago, I worked at , building game servers for social games — one problematic performance aspect of games is that the state of the game has to be updated very frequently. This means game servers are write-heavy beasts that hammer your databases in a way where caching, the technique most often used in lifting database load to cope with high traffic, would not be an option. Wooga It was back then when I started reflecting on the implication of choices regarding the position of the runtime. By runtime, I mean the process where the code is running — which is with respect to all databases and services that need to be reached in order for actions, that allow you to fulfill the current request, to be performed. The solution to the pressure that our applications put on databases was a complete turn-around of all strategies surrounding interaction with the data layer; which meant transitioning from a model, where each and every request had a direct database interaction, to one where a user’s entire game-state would be loaded in the runtime (we chose Erlang) at the beginning of a session. You can still find the slides — from a scary number of years ago — from the and the . beginning of the project considerations after running it in production In a nutshell, that project led to the decrease number of interactions with databases by two or three orders of magnitude and achieve sub-millisecond response time improvement by two orders of magnitude compared to previous approach. The idea must have also germinated in other brains within the gaming industry, as Microsoft launched a year later. Orleans What we learned from the push for having data in the runtime So, how is our work at Wooga on strategies around working with game-state now relevant in the scope of static site generators? Working on that topic brought me to more general reflections on how stacks are built (data at last) — the runtime is the part that coordinates all actions, the request enters the runtime and from the runtime, you ensure that a number of other systems are touched or triggered. After a request enters your runtime, you write your code which is a mix of two things: Interacting with elements external to the process Reading data Writing data Checking authorization Triggering tracking 2. The actual business logic that must be performed in order to satisfy the request Now if you think about the two places most of the pain (bugs, errors, outage) comes from; writing and operating application, I’m sure that the former is thought of as the more evil place to be. I remember clearly what it meant to start programming in a paradigm where writing was mostly out of the picture, which enabled me to realize the idea of ninja state or “flow” that you can find in books like or “ ”. “Getting things done” Flow It’s a superior state of mind, where you are able to just think and focus on what you want to achieve and are not stuck with internal dialogs such as: “Where’s the data I need?” — all data is just there; just access and manipulate it as needed “In what order would these things happen?” — in the exact order you’re writing them, which should be arranged flow naturally according to how one would think “Is there anything that could fail in this?” — the only problem you might have is with the data at hand; but there’s no other interference or clutter that could influence what you’re writing (no network errors, collisions, race condition). These considerations have led me to think about the “upside down stack”, one where the database or other services come first — not in between or just in time as the logic progresses — and where you enter the runtime with all data and authorization necessary in order to perform the request. Static site generators are essentially build processes, processes that are triggered because of change in either the code or data underlying the static artifact (this is a novelty of SSGs building both data & code versus building just code). Because these processes are triggered by changes in the data or the code, those changes are what enter computation rather than something that is fetched a runtime. This is how static site generators are akin to the “upside-down stack”; data comes first and is what you enter the process with, versus being something that is sought after only during an ongoing process. This vision is already present in a modern build system like Concourse CI with its concept of . This goes in the direction of thinking “Okay, this job is triggered by a change on some resources and, in order to perform the job, other resources will also be needed.” The dependency tree of the resources required in order to perform an action is specified beforehand and you can ensure that all resources are in place prior to performing a job. Pipelines being composed of Job and Resources This is where I see static site generators as early adopters of certain patterns that will gain more generalized adoption. If you have a domain where the data is read more than it is written, a build-driven approach has a number of advantages (among them excellent performance, low cost and a ). better security model The intersection with serverless As mentioned in my previous post, where I predicted some , serverless has deeper implications than what is usually known for. For example, it can be seen as Serverless is a very compelling technology to deal with workloads that are build driven like static site generators, you need to handle workloads that are event driven (with events generated by changes to the application, the data or the domain model) and then different in scale and distribution over time than workloads to serving constant traffic. bigger trends behind the surface of Serverless & GraphQL To support build cycles and pipelines, Serverless becomes relevant again as infrastructure used to host these new kinds of architectures. are something to look at in order to understand how this future might look like. Step functions Trends to watch for Before concluding this post, it’s important to look at what static site generators represent and which factors they rely on to achieve the popularity they currently enjoy. The first important realization is that static site generators can be and that the concepts they apply might see much wider adoption if accompanied with a significant innovation of the toolchains currently in use. As an example static site generators might be a pointer to the fact that build processes are about to be re-evaluated as a delivery mechanism for more than application logic. more dynamic than the name suggests In short, here are trends to watch for, as they might serve as seeds for future looking-thoughts: Data enters the runtime at the very beginning of the computation, instead of being grabbed during computation The event that triggers the computation is a change in application logic, in the data of the domain that the application deals with, or changes of the data domain itself A user request can be satisfied by serving a pre-compiled set of assets (that are built only when the underlying data is updated, and not at request time) The data is “built”, instead of being fetched and integrated at every request; requiring more modern build systems and innovations of the concept of build systems Looking into the future It’s important to keep watching how the phenomenon of static sites continues to evolve and seeing the prospects of the new generation of web architectures that are build-based rather than the current request/response-focused patterns. In order for that trend to grow, other trends need to fall into place; build systems and databases (or systems that front the database) are some areas we need to look at for innovations. This will be something I will elaborate in follow up posts of this series. Originally published at www.contentful.com on July 17, 2018.

The understated innovation of static site generators

5 Integrations in React: Contentful, Tilda, Hubspot, Typeform, Builder.io

One of the major concerns with loading web fonts using the rule is the increased load time. With the increased load time, the text to which the font has been applied takes longer than usual to appear on the page — that’s not good for the User Experience. @font-face We don’t want our users to wait for the content considering the fact that is already available but just isn't visible to their eyes. The modern browsers come with a mechanism called or “ ”. Chrome and Firefox render invisible text for 3-seconds, if the font is still not available, they use system font as a fallback and swap once the web font is ready. The problem is more severe in Microsoft Edge and Safari browsers, the former uses a system font as a fallback and the latter waits until the font is ready with no fallback as an option. With that, the time required for the takes a toll. “Flash of Invisible Text” FOIT First Contentful Paint This can be very useful for demographics with slower internet connections, especially on mobile devices. Below is a demo page with FOIT in action as observed in the second frame where the text is completely invisible. Also, notice the metrics. It takes 1.7s to achieve the First Contentful Paint. The metrics and the impact of FOIT can be severe on a complex webpage or an application. Thankfully, there is a very simple fix to overcome this issue. And it can be achieved by just adding a few lines of code to your CSS. We now apply a technique called “ or simply, “FOUT” to mitigate this issue. This allows us to display the text the moment it is ready in the DOM with a system-native font as a fallback before the custom font is loaded. Flash of Unformatted Text” Unformatted text (left). Text using the custom font (Right). to the rescue! 🎉 font-display Adding to your @font-face rule will tell the browser to use the fallback font provided in the font-family property until the custom font is available and applied to the text. In the below example, the “sans-serif” is used as a fallback until the “WildCoorg” custom font is available. font-display: swap; <a href="https://medium.com/media/5671b33461781649724f867f6f6de08d/href">https://medium.com/media/5671b33461781649724f867f6f6de08d/href</a> This significantly improves the overall load time with an almost 100% reduction in First Contentful Paint and First Meaningful Paint as well. As observed in the below Lighthouse report, you can notice that the text is already visible to the user in the second frame, unlike FOIT. The font-display property currently has full support by major browsers excluding Internet Explorer and Edge. Hopefully, it should soon be supported on all browsers. Until then, we can leverage this to improve the UX for users with modern web browsers. This can be very useful for demographics with slower internet connections, especially on mobile devices. The sooner the content is visible to the user, better the user experience. Additionally, the lighthouse reports yield you a better performance rating for your site. If you like the post, share it with your team and friends. I’m on Twitter. Find the complete list of my articles . @Gigacore over here

Speeding up First Contentful Paint while loading web fonts using @font-face

In today’s lightning-fast digital landscape, website speed is no longer a luxury — it’s a fundamental requirement. Every developer should possess the knowledge to analyze and optimize web page performance for a seamless user experience. After all, a speedy website translates into higher engagement, lower bounce rates, and ultimately, increased conversions. The High Cost of Slow Websites The detrimental effects of sluggish websites are well-documented by numerous studies: Upward of 25% of users abandon a site if it takes longer than 4 seconds to load Akami Study.
A 3-second delay can lead to a significant drop in engagement, with 22% fewer page views and a 50% higher bounce rate Strangeloop Networks Study.
Conversions take a major hit for websites taking 5 seconds to load, experiencing a decrease of 38% Strangeloop Networks Study.
Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.
The BBC found they lost an additional 10% of users for every extra second their site took to load. Prioritizing Core Web Vitals Forget outdated metrics — Google prioritizes Core Web Vitals for website performance evaluation. These metrics measure real-world user experience and directly impact search engine rankings. Here’s a breakdown of the three key Core Web Vitals: Largest Contentful Paint (LCP): This tracks the time it takes for the largest content element to load. Optimize images and preload content to improve LCP (ideally under 2.5 seconds). Learn more about LCP
Interaction to Next Paint (INP): This metric measures the user’s perceived responsiveness. Aim for an INP of under 50 milliseconds. Learn more about INP
Cumulative Layout Shift (CLS): This metric assesses how much your page layout shifts as elements load. Use pre-defined dimensions for images and avoid lazy loading critical content to minimize CLS (ideally below a score of 0.1). Learn more about CLS Optimizing for Interactivity Beyond loading speed, interactivity matters. Here’s how to ensure your page feels responsive: Time to Interactive (TTI): This measures the time it takes for your page to become fully interactive. Reduce unnecessary JavaScript and optimize critical rendering paths to achieve a TTI under 3.1 seconds. Learn more about TTI
Total Blocking Time (TBT): This metric focuses on how long your main thread is blocked by JavaScript execution. Minimize render-blocking JavaScript and leverage code splitting to keep TBT below 3.1 seconds. Learn more about TBT Actionable Steps for Improvement Leverage a CDN: Consider a content delivery network (CDN) to improve content delivery speed for geographically dispersed users. Monitor CDN performance, including cache hit rate and first-byte time. Remember to carefully consider the Time-to-Live (TTL) of your content. A longer TTL can improve performance by reducing the number of requests to your origin server, but it can also lead to stale content if not managed properly.
Minify and Optimize Resources: Reduce file sizes and optimize images for web delivery.
Implement Lazy Loading: Load non-critical content below the fold only when the user scrolls down to improve initial page load.
Utilize Browser Caching: Enable browser caching for static assets to reduce server requests on subsequent visits. Other Considerations While Core Web Vitals and interactivity metrics provide a solid foundation, there are other factors to consider for comprehensive website performance optimization: Network Performance: Although not directly measured by Lighthouse, network response times significantly impact user experience. Tools like Google PageSpeed Insights can help identify network bottlenecks.
Server-Side Optimization: Optimizing server response times and resource processing can significantly improve perceived website performance. Continuous Monitoring and Improvement Remember, website performance is an ongoing process. Regularly monitor your website’s performance metrics using tools like Google PageSpeed Insights and Lighthouse. Continuously analyze and optimize your code, content, and infrastructure to ensure a top-notch user experience. In today’s lightning-fast digital landscape, website speed is no longer a luxury — it’s a fundamental requirement. Every developer should possess the knowledge to analyze and optimize web page performance for a seamless user experience. After all, a speedy website translates into higher engagement, lower bounce rates, and ultimately, increased conversions. The High Cost of Slow Websites The detrimental effects of sluggish websites are well-documented by numerous studies: Upward of 25% of users abandon a site if it takes longer than 4 seconds to load Akami Study. A 3-second delay can lead to a significant drop in engagement, with 22% fewer page views and a 50% higher bounce rate Strangeloop Networks Study. Conversions take a major hit for websites taking 5 seconds to load, experiencing a decrease of 38% Strangeloop Networks Study. Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. The BBC found they lost an additional 10% of users for every extra second their site took to load. Upward of 25% of users abandon a site if it takes longer than 4 seconds to load Akami Study . Akami Study A 3-second delay can lead to a significant drop in engagement, with 22% fewer page views and a 50% higher bounce rate Strangeloop Networks Study . Strangeloop Networks Study Conversions take a major hit for websites taking 5 seconds to load, experiencing a decrease of 38% Strangeloop Networks Study . Strangeloop Networks Study Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. Pinterest increased search engine traffic and sign-ups by 15% The BBC found they lost an additional 10% of users for every extra second their site took to load. The BBC found they lost an additional 10% of users Prioritizing Core Web Vitals Forget outdated metrics — Google prioritizes Core Web Vitals for website performance evaluation. These metrics measure real-world user experience and directly impact search engine rankings. Here’s a breakdown of the three key Core Web Vitals: Core Web Vitals Largest Contentful Paint (LCP): This tracks the time it takes for the largest content element to load. Optimize images and preload content to improve LCP (ideally under 2.5 seconds). Learn more about LCP Interaction to Next Paint (INP): This metric measures the user’s perceived responsiveness. Aim for an INP of under 50 milliseconds. Learn more about INP Cumulative Layout Shift (CLS): This metric assesses how much your page layout shifts as elements load. Use pre-defined dimensions for images and avoid lazy loading critical content to minimize CLS (ideally below a score of 0.1). Learn more about CLS Largest Contentful Paint (LCP): This tracks the time it takes for the largest content element to load. Optimize images and preload content to improve LCP (ideally under 2.5 seconds). Learn more about LCP Largest Contentful Paint (LCP): Learn more about LCP Interaction to Next Paint (INP): This metric measures the user’s perceived responsiveness. Aim for an INP of under 50 milliseconds. Learn more about INP Interaction to Next Paint (INP): Learn more about INP Cumulative Layout Shift (CLS): This metric assesses how much your page layout shifts as elements load. Use pre-defined dimensions for images and avoid lazy loading critical content to minimize CLS (ideally below a score of 0.1). Learn more about CLS Cumulative Layout Shift (CLS): Learn more about CLS Optimizing for Interactivity Beyond loading speed, interactivity matters. Here’s how to ensure your page feels responsive: Time to Interactive (TTI): This measures the time it takes for your page to become fully interactive. Reduce unnecessary JavaScript and optimize critical rendering paths to achieve a TTI under 3.1 seconds. Learn more about TTI Total Blocking Time (TBT): This metric focuses on how long your main thread is blocked by JavaScript execution. Minimize render-blocking JavaScript and leverage code splitting to keep TBT below 3.1 seconds. Learn more about TBT Time to Interactive (TTI): This measures the time it takes for your page to become fully interactive. Reduce unnecessary JavaScript and optimize critical rendering paths to achieve a TTI under 3.1 seconds. Learn more about TTI Time to Interactive (TTI): Learn more about TTI Total Blocking Time (TBT): This metric focuses on how long your main thread is blocked by JavaScript execution. Minimize render-blocking JavaScript and leverage code splitting to keep TBT below 3.1 seconds. Learn more about TBT Total Blocking Time (TBT): Learn more about TBT Actionable Steps for Improvement Leverage a CDN: Consider a content delivery network (CDN) to improve content delivery speed for geographically dispersed users. Monitor CDN performance, including cache hit rate and first-byte time. Remember to carefully consider the Time-to-Live (TTL) of your content. A longer TTL can improve performance by reducing the number of requests to your origin server, but it can also lead to stale content if not managed properly. Minify and Optimize Resources: Reduce file sizes and optimize images for web delivery. Implement Lazy Loading: Load non-critical content below the fold only when the user scrolls down to improve initial page load. Utilize Browser Caching: Enable browser caching for static assets to reduce server requests on subsequent visits. Leverage a CDN: Consider a content delivery network (CDN) to improve content delivery speed for geographically dispersed users. Monitor CDN performance, including cache hit rate and first-byte time. Remember to carefully consider the Time-to-Live (TTL) of your content. A longer TTL can improve performance by reducing the number of requests to your origin server, but it can also lead to stale content if not managed properly. Leverage a CDN: Minify and Optimize Resources: Reduce file sizes and optimize images for web delivery. Minify and Optimize Resources: Implement Lazy Loading: Load non-critical content below the fold only when the user scrolls down to improve initial page load. Implement Lazy Loading: Utilize Browser Caching: Enable browser caching for static assets to reduce server requests on subsequent visits. Utilize Browser Caching: Other Considerations While Core Web Vitals and interactivity metrics provide a solid foundation, there are other factors to consider for comprehensive website performance optimization: Network Performance: Although not directly measured by Lighthouse, network response times significantly impact user experience. Tools like Google PageSpeed Insights can help identify network bottlenecks. Server-Side Optimization: Optimizing server response times and resource processing can significantly improve perceived website performance. Network Performance: Although not directly measured by Lighthouse, network response times significantly impact user experience. Tools like Google PageSpeed Insights can help identify network bottlenecks. Network Performance: Server-Side Optimization: Optimizing server response times and resource processing can significantly improve perceived website performance. Server-Side Optimization: Continuous Monitoring and Improvement Remember, website performance is an ongoing process. Regularly monitor your website’s performance metrics using tools like Google PageSpeed Insights and Lighthouse. Continuously analyze and optimize your code, content, and infrastructure to ensure a top-notch user experience.

Stories, News & Mentions about CONTENTFUL

Contentful’s Stories on HackerNoon

Contentful's News & Mentions