Theme maker - 2000

So, the idea is to build a full-custom theme maker from scratch, but here's the catch, I'm only allowed to use css, js and html, no libraries allowed 🙅‍♂️. (Catch of the catch, I will be using snowpack because I've been wanting to try it out)

Since the name of this page is actually collected notes, this is what I'm doing, taking progressive notes here of how the process goes along.

The whole purpose of these endeavor is to learn and to test how a webpage could actually be functional today where everything I've built for a client has been using a framework, it's got me thinking, would I be actually able to build something that is useful and solely built with the basics?

Please do not take me as an example of anything, these will indeed be a bumpy ride, I will, by no means, be taking the best decisions here. I will probably make thousands of mistakes, but still, live and learn.

Footnote: I will not be taking IE11 into account and i'm sorry but I hope it dies.

The app

So, we'll start slowly and work our way up, to begin with, we'll actually make a button maker, for that, we need a page with a fancy UI where you get to pick the shape and color of your button, once you are happy with the result, the page will spit out the code to paste wherever you want it.

Here's an image of the app made with my amazing design skills.

Starting point

We'll start from the CSA (Create Snowpack App) blank template, also, in order to keep my state of mind, I will be using prettier with the default config.

Whats included

.
+-- public
|   +-- favicon.ico
|   +-- index.css
|   +-- index.html
|   +-- logo.svg
|   +-- robots.txt 
+-- src
|   +-- index.js
+-- .npmignore
+-- .prettierrc
+-- package.json
+-- snowpack.config.json
+-- README.md

Let's get started

To begin we'll create our projects folder

npx create-snowpack-app theme-maker-2000 --template @snowpack/app-template-blank --use-yarn

• Why that name? Sounds cool, you can change it if you are lame.
• Why yarn? I don't know, I like it better.

Now, cd theme-maker-2000 && yarn start

There you go, you should be able to see your project on http://localhost:8080.

Coding

All we'll do today is remove the lovely confetti dependency. We don't want this post to get that large!

Navigate to the src/index.js file and lets remove everything and replace it with

const app = document.getElementById('app')
app.innerHTML = "<h1>Theme Maker 2000!</h1>"

Now, lets move to the public/index.html file and change the img and canvas that the template starts with for a simple

<div id="app">No app 😢</app>

While we are here, you can change the title of the app for anything you'd like, mine is, of course, Theme Maker 2000.

Next we can remove canvas-confetti from the dependencies on package.json 👐

If anyone is crazy enough to be following this, the code is at https://github.com/jenaro94/theme-maker-2000

next post →