Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Headless CMS Break Down & Roundup

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <a href="http://sanity.io/">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 02:38 - What and why</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20">A headless CMS doesn’t mean you have to use a static site generator</li> <li class="has-line-data" data-line-start="20" data-line-end="24">A headless CMS has an API: <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> REST</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> GraphQL</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> GROQ</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="28">A headless CMS can pipe its content into: <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Static Site on build - like <a href= "https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> An app on run/refresh</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> An existing website - widget</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> What makes a CMS? Do you need a UI?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> What is the threshold?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Is a hotdog a sandwich?</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Things to think about when choosing an API <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Auth - Rules + roles + levels</li> </ul> </li> <li class="has-line-data" data-line-start="33" data-line-end="36"> How easy is it to create new data types? <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> Is it code or UI?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Can my mom use it?</li> </ul> </li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Can you create one-off content types? (e.g. settings pages)</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Custom workflows <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> dRafts, revisions, roll backs</li> </ul> </li> <li class="has-line-data" data-line-start="39" data-line-end="40"> How are images handled? Do you need another service for that?</li> <li class="has-line-data" data-line-start="40" data-line-end="44"> Pre-determined UI <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Is custom UI possible?</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Two-way relationships?</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Tags?</li> </ul> </li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Data validation? <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> UI + API?</li> </ul> </li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Hosting?</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Pricing?</li> <li class="has-line-data" data-line-start="48" data-line-end="53"> Content movability? <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> Can you get your data out?</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Schemas</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Users</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Revisions</li> </ul> </li> <li class="has-line-data" data-line-start="53" data-line-end="54"> CORS or realtime API?</li> <li class="has-line-data" data-line-start="54" data-line-end="59"> APIs <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Can you insert data via the API? (or just pull)</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://nodejs.org/en/">Node</a> API</li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Importing data</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="59" data-line-end="60"> 24:37 - Hosted</p> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.sanity.io/">Sanity</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://prismic.io/">Prismic</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.contentful.com/">Contentful</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.datocms.com/">Dato CMS</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.storyblok.com/">Storyblok</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.8base.com/">8Base</a></li> <li class="has-line-data" data-line-start="67" data-line-end="70"> <a href="https://agilitycms.com/">Agility CMS</a> <ul> <li class="has-line-data" data-line-start="68" data-line-end="70"> Seems to be making a big corporate play</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="70" data-line-end="71"> 36:59 - Self-Hosted</p> <ul> <li class="has-line-data" data-line-start="72" data-line-end="79"> <a href="https://wordpress.org/">WordPress</a> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> WordPress REST API</li> <li class="has-line-data" data-line-start="74" data-line-end="75"> GraphQL API</li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.wpgraphql.com/">WP GraphQL</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://advancedcustomfields.com/">Advanced Custom Fields</a> for custom UI</li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced</li> <li class="has-line-data" data-line-start="78" data-line-end="79"> The theme UI from plugins is often lost</li> </ul> </li> <li class="has-line-data" data-line-start="79" data-line-end="81"> <a href="https://www.drupal.org/">Drupal</a> <ul> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="http://contentacms.org/">contentacms.org</a></li> </ul> </li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://craftcms.com/">Craft CMS</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://ghost.org/">Ghost</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://strapi.io/">Strapi</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.keystonejs.com/">Keystone</a></li> <li class="has-line-data" data-line-start="85" data-line-end="87"> <a href="https://www.joomla.org/">Joomla</a> (JK!)</li> </ul> <p class="has-line-data" data-line-start="87" data-line-end="88"> 44:33 - API (BYOUI)</p> <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://hasura.io/">Hasura</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.prisma.io/">Prisma</a></li> <li class="has-line-data" data-line-start="91" data-line-end="93"> <a href="https://firebase.google.com/">Firebase</a></li> </ul> <p class="has-line-data" data-line-start="93" data-line-end="94"> 47:37 - Git Based</p> <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="96" data-line-end="98"> <a href="http://forestry.io/">Forestry</a></li> </ul> <p class="has-line-data" data-line-start="98" data-line-end="99"> 50:30 - Other</p> <ul> <li class="has-line-data" data-line-start="100" data-line-end= "102"><a href="https://www.google.com/sheets">Google Sheets</a> <ul> <li class="has-line-data" data-line-start="101" data-line-end= "102"><a href="https://sheety.co/">Sheety</a></li> </ul> </li> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href="https://airtable.com/">Airtable</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "105"><a href="https://tinacms.org/">Tina CMS</a> <ul> <li class="has-line-data" data-line-start="104" data-line-end= "105">Not a CMS</li> </ul> </li> <li class="has-line-data" data-line-start="105" data-line-end= "106">Markdown under the hood</li> <li class="has-line-data" data-line-start="106" data-line-end= "108"><a href="https://www.notion.so/">Notion</a></li> </ul> <h2 class="code-line" data-line-start="108" data-line-end="109"> <a id="Links_108" name="Links_108"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="109" data-line-end= "110"><a href= "https://twitter.com/wesbos/status/1254772936935739393">https://twitter.com/wesbos/status/1254772936935739393</a></li> <li class="has-line-data" data-line-start="110" data-line-end= "111"><a href="https://pixelandtonic.com/">Pixel & Tonic</a></li> <li class="has-line-data" data-line-start="111" data-line-end= "112"><a href="https://www.graph.cool/">GraphCool</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href="https://graphcms.com/">GraphCMS</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "115"><a href="https://sapper.svelte.dev/">Sapper</a></li> </ul> <h2 class="code-line" data-line-start="115" data-line-end="116"> <a id="_SIIIIICK__PIIIICKS__115" name= "_SIIIIICK__PIIIICKS__115"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="116" data-line-end= "117">Scott: <a href="https://amzn.to/2WnUgo0">DEWALT Random Orbit Sander</a></li> <li class="has-line-data" data-line-start="117" data-line-end= "119">Wes: <a href= "https://www.amazon.com/s?k=black+shelf+brackets&ref=nb_sb_noss_1">Shelf Brackets</a></li> </ul> <h2 class="code-line" data-line-start="119" data-line-end="120"> <a id="Shameless_Plugs_119" name= "Shameless_Plugs_119"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="120" data-line-end= "121">Scott: <a href= "https://www.leveluptutorials.com/pro">New course on Sapper</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="121" data-line-end= "123">Wes: <a href="https://www.youtube.com/wesbos">Wes’ YouTube Channel</a></li> </ul> <h2 class="code-line" data-line-start="123" data-line-end="124"> <a id="Tweet_us_your_tasty_treats_123" name= "Tweet_us_your_tasty_treats_123"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="126" data-line-end= "127"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="127" data-line-end= "128"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="128" data-line-end= "129"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="129" data-line-end= "130"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="130" data-line-end= "131">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Show Notes 02:38 - What and why
 A headless CMS doesn’t mean you have to use a static site generator
 A headless CMS has an API:  REST
 GraphQL
 GROQ

 A headless CMS can pipe its content into:  Static Site on build - like Gatsby

 An app on run/refresh
 An existing website - widget

 What makes a CMS? Do you need a UI?
 What is the threshold?
 Is a hotdog a sandwich?
 Things to think about when choosing an API  Auth - Rules + roles + levels

 How easy is it to create new data types?  Is it code or UI?
 Can my mom use it?

 Can you create one-off content types? (e.g. settings pages)
 Custom workflows  dRafts, revisions, roll backs

 How are images handled? Do you need another service for that?
 Pre-determined UI  Is custom UI possible?
 Two-way relationships?
 Tags?

 Data validation?  UI + API?

 Hosting?
 Pricing?
 Content movability?  Can you get your data out?
 Schemas
 Users
 Revisions

 CORS or realtime API?
 APIs  Can you insert data via the API? (or just pull)
 Node API
 Importing data

  24:37 - Hosted
  Sanity

 Prismic

 Contentful

 Dato CMS

 Storyblok

 8Base

 Agility CMS  Seems to be making a big corporate play

  36:59 - Self-Hosted
  WordPress  WordPress REST API
 GraphQL API
 WP GraphQL

 Advanced Custom Fields for custom UI
 Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced
 The theme UI from plugins is often lost

 Drupal  contentacms.org

 Craft CMS

 Ghost

 Strapi

 Keystone

 Joomla (JK!)
  44:33 - API (BYOUI)
  Hasura

 Prisma

 Firebase

  47:37 - Git Based
  Netlify

 Forestry

  50:30 - Other

Google Sheets Sheety

 Airtable

Tina CMS Not a CMS

 Markdown under the hood
 Notion
  Links https://twitter.com/wesbos/status/1254772936935739393
 Pixel & Tonic
 GraphCool
 GraphCMS
 Sapper
  ××× SIIIIICK ××× PIIIICKS ××× Scott: DEWALT Random Orbit Sander

 Wes: Shelf Brackets

  Shameless Plugs Scott: New course on Sapper - Sign up for the year and save 25%!
 Wes: Wes’ YouTube Channel

  Tweet us your tasty treats! Scott’s Instagram
 LevelUpTutorials Instagram
 Wes’ Instagram
 Wes’ Twitter
 Wes’ Facebook
 Scott’s Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Headless CMS Break Down & Roundup

Poslechněte si podcast