With Svelte/Sapper, Netlify and FaunaDB — Part 2

Corn field — by Olivier Vanbiervliet
Corn field — by Olivier Vanbiervliet

In the second and final part of this tutorial, we’ll finish up by adding FaunaDB to our stack and integrating it in the Svelte/Sapper site.

If you remember from the first part, here’s the plan:

  1. Clone template repository
  2. Build/run/push back
  3. Deploy to Netlify
  4. Add FaunaDB & posts
  5. Glueing it together

4. Add FaunaDB to the mix

Faunadb is a serverless database. It starts with a free account, and very generous limits. It’s fast, global and easy to implement.

Sign up for free, then follow the short onboarding tutorial — highly recommended.

When you’re ready, let’s create a…


With Svelte/Sapper, Netlify and FaunaDB: Part 1

Corn field — by Olivier Vanbiervliet
Corn field — by Olivier Vanbiervliet

In this tutorial, we’ll build a small content website based on the Sapper template from Nicholas Christ, and modify it to use FaunaDB as storage and Netlify as free host. It uses Svelte and Tailwind CSS to make creating and designing webpages very clean and easy.

The first part is just an easy starter so everyone can follow along. You need some git knowledge (or use a git gui). It’s up to you to take it to the next level.

Here’s the plan:

  1. Clone template repository
  2. Build/run/push back
  3. Deploy to Netlify
  4. Add FaunaDB & posts
  5. Glueing it together


Image for post
Image for post

In a previous post, we discovered the functionality of Smart Selections in Figma. These allow for implicit grouping and are a quick way of dealing with multiple objects.

When working with many layers and objects however, we need a more formal way of bundling these. Usually, you would use a group for this, but Figma throws another option in the mix: Frames.

At first sight, Frames looks very similar to Groups, so let’s have a deep dive and discover their individual qualities.

Groups

The Basics


Image for post
Image for post

Working with several items at once can be challenging, especially in a design app. In an upcoming post we’ll have an in-depth look at groups and frames, but before that let’s have a look at another neat feature in Figma: Smart Selections.

Creating a Smart Selection

Smart Selection works on 2 or more objects. Ideally, they already have uniform spacing or arrangement, but if that is not the case you can use the Tidy Up function, turning your selection effectively into a smart selection.

You select your objects as usual and then use the blue button that appears in the bottom right to tidy…


How much of a business problem can you tackle in a one week ux sprint? What insights can you learn in such a small time?

Let’s find out in the first week of User Experience Design Immersive 28 at General Assembly London.

Image for post
Image for post
Aldgate, General Assembly London

Overview

Meet Matthew. He’s the business owner of a music teaching website where new students are linked to experienced music teachers.


Image for post
Image for post
Symbolset Gizmo icon library in Sketch

I’ve always been a fan of the Symbolset icon fonts, for a number of reasons:

The ease at which you find an icon is unmatched—you just type a keyword and it gets replaced by the corresponding icon.

As they’re defined in a font, the icons are made of vectors, so they scale infinitely.

When you use them in a website, they remain as text in your html source. That means they’re accessible to screen readers and search engines.

Olivier Van Biervliet

Designer, photographer, musician.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store