DEV Community: Team Prismic

May Monthly Recap: A Project I Loved Working On

Grace Miller — Wed, 08 Jun 2022 19:06:35 +0000

May was a really exciting month for me at Prismic. 🤸‍♀️

A few years ago, I transitioned from a career as a writer and editor to web development through a full-stack coding boot camp. It’s been a fun, but sometimes difficult journey. I have definitely struggled with imposter syndrome and more, but I’ve also found a lot of excitement in the fact that there’s always something new to explore as a developer.

My work at Prismic has been an amazing way to bring both the content part of me and the developer part of me together. And in May, we launched a project that brought that synergy to a new level. 📈 I got to work with our team to bring my enjoyment of new things in web dev together with content creation in the best way: a coding challenge newsletter that helps you explore new tech.

The best part about it, though, was the way that our team made this newsletter idea into something even better than I could have imagined on my own. After years of freelancing, that kind of collaboration adds a special sprinkle of joy to my work here. ☺️

But enough about me. Here are some of the awesome pieces that our writers published in May! 👇

The Jamstack Ecosystem vs. WordPress: Why and When to Switch

WordPress. It’s a dominant force in the world of web development, to be sure. But when innovations are on the horizon, the sheer number of users on a platform doesn’t necessarily make it the very best solution available. In particular, comparing the Jamstack ecosystem (plus a headless CMS, of course) with WordPress can reveal a number of benefits for different projects. Coner did a great job of covering this comparison, and it’s worth a read whether it’s you or someone you work with who needs to be convinced that it’s time for a switch.

15 Awesome Web Development News Sources

As much as I love keeping up with new things in development, it can honestly be a bit overwhelming at times. I really love the list of resources for web development news that Coner put together here. There’s something for everyone, no matter how you prefer to keep up with the news.

The Optimized Dev Newsletter

This is it! One of the most enjoyable projects I’ve ever gotten to work on. To quickly recap, it’s a coding challenge newsletter that helps developers explore new tech each month to stay on the leading edge of web development. You’ll see the first-ever challenge solution below, since we post the solution each month after our subscribers have had time to try it out on their own. Next month, we’re going to dip into Svelte!

Trying Vue as a React Developer: A Quick Introduction

So, when I talk about scaffolding in The Optimized Dev newsletter, this is what I mean. May’s challenge was all about trying out Pinia, which is set to be the default state management library for Vue 3. Not all of our subscribers are Vue developers, though, so we wanted to be sure to provide a little extra support so they could still join in the fun. Anthony’s quick introduction helps React developers understand the differences they’ll notice when trying Vue.

6 Ways Slice Machine Empowers Developers to Build Better Websites

Here at Prismic, we have a developer tool that we’re pretty fond of called Slice Machine. I think we love it so much because it really reflects something that we value as a company, which is delivering a great developer experience. Essentially Slice Machine is our tool for creating reusable components (Slices) for content teams to use in Prismic’s editing interface. It helps you by creating the models that Prismic’s API needs to configure the editor and store/send data, while also helping you with the boilerplate of coding components and connecting them to the API. There are a lot of benefits when using this tool, and I could keep talking about it for a while 😂 but Angelo did a great job highlighting them, so I’ll let you read it from him.

Give Pinia a Try: Build a Confetti Clicker Game with Us

If you want a try-before-you-buy preview of the Optimized Dev Newsletter, this tutorial is the solution to May’s coding challenge. Our subscribers built Pinia’s Party, a confetti clicker game that used Pinia to leverage stores. Lucie did a great job of making this a truly fun project to help devs explore state management in Vue, and more specifically the default library for state management in Vue 3, Pinia.

How Do APIs Work?

I love this blog post. If you’re just getting into web development and you’re wondering what APIs are and how they work, Sam has given you a great place to start. There are great analogies, helpful illustrations, and a nice overview of all of the questions you might have starting out.

I’ll be back next month to share what we’ve been working on and what I’ve been learning from all of the awesome people I get to collaborate with. In the meantime, happy coding! 🚀

An April 2022 Recap

Grace Miller — Fri, 13 May 2022 21:59:34 +0000

One of the coolest things I’ve observed while working at Prismic is seeing how our headless website builder frees devs to do more of what they enjoy. When devs master building with Slices (aka website sections), they can ship a custom website builder experience to their content teams, and then spend their time building and optimizing. They’re not constantly bogged down with requests from content teams or, worse still, broken stuff to fix and maintain.

With that in mind, we’re creating content that helps developers step into and explore something they love to work on: optimization.

I get to work with awesome developers to pull this content together, and I’m really proud of all they’ve been doing. Our new motto is that the Prismic blog is a place where devs can go to optimize their skills, stacks, and careers. Here’s a quick round-up of what we published in April:

6 Thoughts on Building a Career in Web Development

Okay, this one came out a little before April, but how could I know about a blog with career advice from Cassidy Williams and not share that with you? From community to your personal brand, she shares some awesome insights based on her experience building a career in tech.

12 Discovery Questions to Ask Freelance Web Development Clients

Especially at the outset of a freelance career in web development, one of the most challenging things to do is manage clients. Asking the right questions when starting a project can help the whole process run a lot smoother. Thanks to Coner for sharing these great questions!

14 Actionable Tips for Developer Productivity

If you haven’t heard of Alex Trost and Frontend Horse, you’re lucky to have stumbled on this post. He’s one of the most productive and hardworking developers I’ve met, and the tips he shared in this post are things you can immediately do to improve your productivity — in a healthy way.

How to Choose the Best CSS Framework: Understanding Metrics and Context

Have you ever wondered how different parts of development evolved to where they are today? Anthony Campolo gave us a tour of CSS framework history, and it provides an excellent context for understanding which option might work best for you and your project.

How We Helped Bring You the New Nuxt 3 Link Component

Lucie is our resident Nuxt Ambassador and all-around developer extraordinaire. She spent the first part of this year bringing her RFC for <NuxtLink> to life and shared a bit about her experience in this post. We’re all really proud of the work she’s doing, and I can’t wait to see what she does next!

Part 3: Striving for Accessibility When Building Components for a CMS

Accessibility is a topic that’s near and dear to me, and when Alexander Dubovoy proposed a series on it, I was thrilled. As developers, we have a unique perspective of the need and requirements for accessibility on the web. This is the third installment in a series on working with accessibility in Next.js, which takes developers through the unique concerns that arise when we hand websites off to a content team at the helm of a CMS.

There are many more exciting things ahead of us, from a coding challenge newsletter to a bit of a makeover for our blog. I can't wait to share more next month!

How to Make a Website with Svelte and SvelteKit

Sam Littlefair — Wed, 24 Mar 2021 14:24:44 +0000

Svelte is one of the fastest-growing web development frameworks, and Sveltekit is Svelte's web app development framework. In this tutorial, you'll learn how to build and launch a website from scratch with Svelte and Sveltekit.

But, head's up! Svelte is in beta, so it still has lots of bugs, and many of these steps are likely to change.

You can see the final code for this project on GitHub, and the final project live on Netlify.

What is Svelte?

Svelte is a JavaScript framework for creating web apps. Whereas other frameworks like React and Vue.js generally add code to your web app to make it work in the user's browser, Svelte compiles the code that you write when you build your app. In doing so, it creates very small files and fast websites.

As a compiler, when you write Svelte, it looks unique. Here's an example of a Svelte file:

<script>
  let name = 'world';
</script>
<h1>Hello {name}!</h1>

That will generate a web page that looks like this:

Svelte looks like HTML, with <script> and <style> tags included, but it also adds syntax to make your HTML dynamic, inside curly braces. All of this code gets transformed into vanilla HTML, CSS, and JavaScript with Svelte's compiler.

What is Sveltekit?

Currently the most popular application framework for Svelte is Sapper. Sveltekit is the new official framework developed by Svelte, superseding Sapper as Svelte's go-to framework. It adds key features like routing, layouts, and state management to Svelte.

Sveltekit allows you to make static sites, server-rendered sites, and even hybrid static-and-server-rendered web apps. It also has extremely fast hot reloading in development mode because of the way it bundles JavaScript.

Getting started

This tutorial draws heavily from the SK Incognito docs. Big thanks to SK Incognito for documenting Sveltekit in development.

Prerequisites

This tutorial assumes you're already familiar with the basics of HTML, CSS, and JavaScript.

You'll need Node Node 12 LTS or Node 14 LTS and npm installed. Here's how to install Node and npm on Mac and Windows.

Setup

In your terminal, run this command:

npm init svelte@next svelte-kit-app
# replace `svelte-kit-app` with whatever you like

You'll get a warning in the terminal that Sveltekit is in development. Take heed.

In the options, do not use TypeScript, Less, or SCSS. As Sveltekit is still in alpha, we'll stick with plain 'ol CSS and JavaScript (for now).

Once the setup is complete, cd into your new folder and install dependencies:

npm i

Then run the app in dev mode:

npm run dev

You can now view Svelte's classic counter app in your browser at http://localhost:3000.

Make a new homepage

In Sveltekit, every page is a Svelte component. Svelte components are identified by their .svelte extension. Pages are stored in ~/src/routes, and every component in this directory is a page in your app (we'll discuss that more in our section on routing, below).

To get started, we'll overwrite the content of ~/src/routes/index.svelte (the app's homepage).

Erase everything on that page, and replace it with a simple heading, like this:

<main>
  <h1>Homepage</h1>
</main>

When you click save, your browser should update instantly to display the new homepage:

For starters, we can edit this page as normal HTML. Try adding some content in-between the main tags to see what happens.

Then, try adding a style tag, with some CSS inside:

<main>
  <div class="container">
    <h1>Homepage</h1>
    <hr>
    <p>This is my new Sveltekit app.</p>
  </div>
</main>

<style>
  main {
    font-family: sans-serif;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 20px;
  }

  .container > * {
    width: 100%;
    max-width: 700px;
  }
</style>

Add interactivity

Svelte makes it easier to create interaction between JavaScript and HTML. Declare a variable in your JavaScript and then include it in your HTML in curly braces.

Try updating your homepage like this:

<!-- ~/src/routes/index.svelte -->

<script>
  let number = 2;
</script>

<main>
  <div class="container">
    <h1>{number}</h1>
    <hr>
    <p>This is my new Sveltekit app.</p>
  </div>
</main>

<style>
  main {
    font-family: sans-serif;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 20px;
  }

  .container > * {
    width: 100%;
    max-width: 700px;
  }
</style>

You can make your app interactive by binding a variable to an input. Try replacing your <script> and <main> sections with this:

<script>
  let text = 'Homepage';
</script>

<main>
  <div class="container">
    <h1>{text}</h1>
    <input bind:value={text}>
  </div>
</main>

This should create an input. When you change the value of the input, it should change the text in the heading.

In our app, we'll use JavaScript to fetch content from an API and display that content in HTML. In the next step, we'll set up a content API with Prismic.

Set up Prismic

If you don't already have a Prismic account, create one (it's free). Then, visit prismic.io/dashboard, and create a new repo.

Note: If you want to skip this step, you can use the Prismic repository that we're using in these examples. Just skip to the next section, "Fetch content in Svelte," and use this URL for your API endpoint: https://svelte-tutorial.cdn.prismic.io/api/v2

In your new repo, create a repeatable Custom Type called "page".

Add:

a Key Text field called "title",
a UID field called "uid",
an Image field called "image",
and a Rich Text field called "content".

✨ For a shortcut, you can copy-paste this JSON into the JSON Editor in the Custom Type builder, and it will configure all of these fields for you.

Now, go back to the main page of your repository and create your first document. Give it the title and UID "homepage". Then, add an image and some content, and click Save and Publish.

In a new tab, go to <your-repo-name>.prismic.io/api/v2. This will open your API browser, allowing you to view your content on the Prismic API. Click Search documents, and the document you just published should appear:

Next, we're going to use Prismic's dev tools to fetch content and render it in Svelte.

Fetch content in Svelte

We will use two packages to work with Prismic in Svelte. @prismicio/client is Prismic's basic JavaScript package for fetching content from the API, and prismic-dom is Prismic's basic package for rendering content in the DOM.

To install them, run:

npm i -D @prismicio/client prismic-dom

Next, create a directory at the root of your project, called utils/. Inside, create a file called client.js, and paste in this code:

import Prismic from '@prismicio/client';
const apiEndpoint = 'https://your-repo-name.cdn.prismic.io/api/v2';
const Client = Prismic.client(apiEndpoint);

export default Client;

Make sure to update your repo name in the apiEndpoint variable.

Now, in our homepage component, ~/src/routes/index.svelte, we'll add our new utilities. Update your component like this:

<!-- ~/src/routes/index.svelte -->

<script context="module">
  import Client from './../../utils/client';
  import PrismicDom from 'prismic-dom';

  export async function load() {
    const document = await Client.getByUID('page','homepage');
    return {
      props: {
        document,
      }
    };
  }
</script>

<script>
  export let document;
</script>

<main>
  <div class="container">
    <h1>Homepage</h1>
    <pre>{JSON.stringify(document, null, 2)}</pre>
  </div>
</main>

<style>
  main {
    font-family: sans-serif;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 20px;
  }

  .container > * {
    width: 100%;
    max-width: 700px;
  }
</style>

What's happening here?

The most important thing is the load() function. This function accepts information about the current page as arguments and returns props that you can use in your app.

Inside that function, we're using the Prismic query helper Client.getByUID() to fetch your homepage document from the API and then returning that document as a prop.

Then, in a separate script tag, we initialize the response variable, which makes the variable accessible in our app.

If everything worked, you should now see your raw API response on the page.

Of course, we don't want to display JSON. Instead, let's display some human-readable content, by updating the <main> tag, like this:

<main>
  <div class="container">
    <h1>{document.data.title}</h1>
  </div>
</main>

Now, the title of your document is coming directly from Prismic.

Prismic provides utilities for working with Rich Text. prismic-dom will convert your Rich Text field to HTML. Then, you can use Svelte's {@html } utility to render it.

Update your <main> tag like this:

<main>
  <div class="container">
    <h1>{document.data.title}</h1>
  </div>
</main>

Now you should have some content on your page:

Style your content

Let's bind an inline style. We'll create a header section and use the image from Prismic as the background:

<!-- ~/src/routes/index.svelte -->

<script context="module">
  import Client from './../../utils/client';
  import PrismicDom from 'prismic-dom';

  export async function load() {
    const document = await Client.getByUID('page','homepage')
    return {
      props: {
        document,
      }
    };
  }
</script>

<script>
  export let document;
</script>

<main>
  <div class="header container" style="background-image: url('{document.data.image.url}')">  
    <h1>
      {document.data.title}
    </h1>
  </div>
  <div class="container">
    <div class="text">
      {@html PrismicDom.RichText.asHtml(document.data.content)}
    </div>
  </div>
</main>

<style>
  main {
    font-family: sans-serif;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 20px;
  }

  .container > * {
    width: 100%;
    max-width: 700px;
  }

  .header {
    color: white;
    background-size: cover;
    min-height: 25vw;
    padding-top: 2rem;
    justify-content: flex-end;
  }
</style>

This looks good, but we've still got some unnecessary padding around the whole page. We can eliminate that with a CSS reset. In Svelte, CSS is scoped to the component. That means that the CSS in the component only styles that component. To style the document's <body> tag (where the padding is), we need to import a style sheet.

For starters, create the folder ~/src/styles/, and then add a file called reset.css. Inside that file, paste the following code:

/* ~/static/styles/reset.css */

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

Now, we need to import those styles to the component. You can do this by importing a CSS file in the component's second <script> tag, like this:

<script>
  import "./../styles/reset.css";
  export let document;
</script>

When the page reloads, the hero image should be full-width.

Create a layout

However, we know that we want the CSS reset on every page of the website. We can abstract it out of our component by moving it to a layout.

If you have content that appears on every page --- like a header and footer --- you can move it into a layout file. To create a layout, create the file ~/src/routes/$layout.svelte. In that file, paste this code:

<!-- ~/src/routes/$layout.svelte -->

<script>
  import "./../styles/reset.css";
</script>

<div class="flex-layout">
  <slot></slot>
  <p class="footer">© Acme Corp, 1951</p>
</div>

<style>
  .footer {
    margin: 3rem 0;
    text-align: center;
  }

  .flex-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>

The <slot> element is where your page component will be inserted.

You can now remove the CSS reset from ~/src/routes/index.svelte.

We can abstract more styles to the layout by creating a file called globals.css in ~/src/styles/ and importing that CSS to your layout:

<script>
  import "./../styles/reset.css";
  import "./../styles/globals.css";
</script>

For instance, you can delete the main and .container style rules from index.svelte and these rules to ~/src/styles/globals.css:

body {
  font-family: sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;
}

.container > * {
  width: 100%;
  max-width: 700px;
}

You've now created a page of your website with JavaScript and CSS.

Next, we'll look at how to add more pages.

Add multiple pages

In Svelte, every file in ~/src/routes/ represents a route in your app, so ~/src/routes/dogs/daschund.svelte corresponds to your-site.com/dogs/daschund.

File and folder names in square brackets are dynamic routes. So, the file ~/src/routes/dogs/[breed].svelte would generate the route /dogs/*. If you visit /dogs/doberman, you will get the [breed].svelte file.

Similarly, folder names can be dynamic. So, you could have ~/src/routes/[pet]/[breed].svelte, which would be rendered for both /fish/goldfish and /cat/siamese.

To proceed, copy the contents of ~/src/routes/index.svelte into a new file in the same folder called [uid].svelte.

In [uid].svelte, modify the load() function to destructure the page prop (the props include information about the current page) like this:

export async function load({ page }) {
    const { uid } = page.params;
    const document = await Client.getByUID('page','homepage');
    return {
      props: {
        document,
        uid
      }
    };
  }

page.params is an object containing the variables from the URL path, which are specified in the file and folders with square brackets around their names. In the example above, /fish/goldfish would have a page.params object like this:

{
  pet: "fish",
  breed: "goldfish"
}

So, in the load() function, we extract the uid parameter from the page route and add it to the props object, which the function returns.

Then, add uid to the export statement in the second <script> tag:

<script>
  export let document, uid;
</script>

Finally, we can use the uid variable somewhere in the template:

<main>
  <div class="header container" style="background-image: url('{document.data.image.url}')">  
    <h1>
      {uid}
    </h1>
  </div>
  <div class="container">
    <div class="text">
      {@html PrismicDom.RichText.asHtml(document.data.content)}
    </div>
  </div>
</main>

Now, navigate to another page at the root-level of your website, like /doberman or /tabby. If everything is working, you should see the uid param in your page:

However, it's not very useful to directly display the param on the page. Instead, we want to use it to dynamically display content.

In the Prismic query function, replace "homepage" with the uid variable. Now, Svelte will query content from Prismic depending on the page path:

export async function load({ page }) {
  const { uid } = page.params;
  const document = await Client.getByUID('page',uid);
  return {
    props: {
      document,
      uid
    }
  };
}

Right now, there is only one document in Prismic. Go back to your Prismic repo, and create a page with the UID "about", and add some content to the page. Now, if you go to /about, you should see your new about page.

In your <main> tag, remove the uid variable and replace the document title:

<main>
  <div class="header container" style="background-image: url('{document.data.image.url}')">  
    <h1>
      {document.data.title}
    </h1>
  </div>
  <div class="container">
    <div class="text">
      {@html PrismicDom.RichText.asHtml(document.data.content)}
    </div>
  </div>
</main>

Create a nav component

Finally, we can add some site navigation. Let's create a nav component in ~/src/lib/, called nav.svelte. Paste in the following code:

<!-- ~/src/lib/nav.svelte -->

<nav class="container">
  <div class="menu">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
</nav>

<style>  
  nav {
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    text-shadow: 0px 1px 3px rgba(0,0,0,.8), 0px 0px 6px rgba(0,0,0,.8);
  }

  nav a {
    color: white;
    text-decoration: none;
    padding-right: 1rem;
  }
</style>

Then, in your layout file, import the Nav component and update your HTML and CSS like so:

<!-- ~/src/routes/$layout.svelte -->

<script>
  import Nav from "./../lib/nav.svelte"
  import "./../styles/reset.css";
  import "./../styles/globals.css"
</script>

<div class="flex-layout">
  <header class="absolute">
    <Nav />
  </header>
  <slot></slot>
  <p class="footer">© Acme Corp, 1951</p>
</div>

<style>
  .absolute {
    position: absolute;
    width: 100%;
  }

  .footer {
    margin: 3rem 0;
    text-align: center;
  }

  .flex-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>

Now, you should have two pages that you can click before and forth between:

Deploy your site

For now, deploying with Sveltekit is a little tricky, as it is still in development. Sveltekit has a handful of "adapters" to handle deployment in different environments. For now, we'll deploy statically on Netlify.

To install the necessary adapter, run the following command:

npm i -D @sveltejs/adapter-static

Then, in ~/svelte.config.cjs, set the adapter:

const static = require('@sveltejs/adapter-static');
const pkg = require('./package.json');

/** @type {import('@sveltejs/kit').Config} */
module.exports = {
  kit: {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    adapter: static(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
      ssr: {
        noExternal: Object.keys(pkg.dependencies || {}),
      },
    },
  },
}

Next, make sure your project is pushed to Github. You'll need to initialize your project as a git repository:

git init

Add all of your files to staging:

git add .

And commit them:

git commit -m "Init"

In GitHub, create a new repository and follow the instructions to push your project to GitHub.

Visit Netlify and create an account or log in. Click New site from Git. Follow the instructions to deploy your new GitHub repo.

For the deploy settings, ensure the build command is npm run build, and the build directory is build.

Once you deploy your site, it should be live!

See a bug?

If you notice a bug in this tutorial, please add a comment or get at me on Twitter: @samlfair

Thanks for reading :)

Resources

To keep learning, check out these resources:

This tutorial was originally published on the Prismic blog.