👋 Want to chat? Feel free to say hey!

Free Tutorial Series

Making Demos Dynamic

Converting HTML into dynamic demos with Svelte, Parse, and Postgres.

Course Status:

  • Basic UI HTML file ready for download
  • Building out reactive HTML UI
  • Creating material - Lesson One: Getting Started

* I'll email with updates to course as well occassional projects I'm working on.

Who is this for?

Do you know how to design and code websites, but don't know how to go about persisting state or retrieving data?

Have you tried to learn other tutorials about React or Vue but found yourself deep in the weeds around webpack, redux, or routing?

This course is going to assume some familiarity with HTML. In the first lesson, we're going to start converting a pre-made HTML template to Svelte. We're then going to start saving some data to Parse and Postgres.

As the lessons go on we'll look to cover more advanced topics like converting HTML elements to reusable components, using the NPM package manager for external resources, and adding routing to your dynamic demo.

The goal of these lessons is not to be a front-end developer, but to be dangerous enough to create your own proof-of-concepts as a designer.

How much command-line magic do I need to know?

The goal is not too much - we're going to be using Docker to set up your dev environment and I'll have some pre-made helpers for that section.

Again, we'll look to get started quickly and then back-out into the weeds of how the underlying systems work as needed.

If you can read and understand this post Getting to Know Docker: Running Your First Container you probably know more than you need to.

Why make dynamic demos?

I love Invision, you love Invision, Invision is great.

But sometimes click-through demos aren't enough when it comes to proving out highly-dynamic interfaces.

Input heavy UIs are oftentimes filled with traps which may only be discoverable from observing a user's interactions with the interface.

Often, interfaces are reactive and data-dependent - addressing these difficult experiences early in the pre-development process can be valuable in saving development resources further down the line.

It may also be easier to use a database to load up demonstration data to convey your ideas to your customers.

Lastly, it's always great to be speaking in the same language when working collaboratively with your development teams.

What is Svelte?

Svelte is a newer framework, currently in use at the New York Times, Spotify, and Ikea. It's different from React and Vue in that instead of using a virtual DOM diffing it uses a compiler to "surgically update" (their words) the display of your application.

What that means for you is that Svelte uses a lot of the HTML, CSS, and JS you already know to build your demo, and then extends from your code with features like reactivity, components, and logic.

It's pragmatic approach of using what you need, when you need it - while extending generally understandable HTML, CSS, and JS - make it a great candidate for this type of course.

What is Parse?

Parse is an open-source hosted alternative to Google's Firebase.

It means it will allow us to quickly define our data-models in our application's code and allow us to persist and retrieve data objects from our database using relatively simple javascript.