Web - Tips for Prototyping

#webdev #javascript #css #html

_{Cover photo by zoo_monkey on Unsplash}

I am the type of person that has to think through code when building new things. At least once a day I get an idea for something that could be used in a project and instantly create an HTML doc, prototype, and then leave knowing I tried what I was thinking.

Prototyping is super important to web development. There are a lot of different trains of thought on how to learn and maintain knowledge in software, but prototyping and scratch pad coding are some of the best ways to really understand what you're learning.

Below I will go through my setup for prototyping and some patterns that come in handy. This has been an ongoing journey through my growth as a developer and I want to share to help others in this way.

Table of Contents
Create a project template
Start with one file
Always publish your work
Buy a Domain
Online Code Editors
Styling that works for you

Create a project template

The biggest hurdle when taking action is the first step. So why not cheat the system and lower the barrier to starting.

For my scratch pad projects I have a gist html file that comes with any dependency I might need for a little side project. If I don't need a specific dependency at the time, I can just remove it. But the point is having a good starting place for getting things done.

Here's my simple Vuejs starter:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Site Behavior tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Basic site info-->
    <meta name="title" data-hid="title" content="">
    <meta name="description" data-hid="description" content="">

    <!-- Open Graph (Facebook/Linkedin) tags -->
    <!-- Testing tool: https://developers.facebook.com/tools/debug/ -->
    <meta property="og:site_name" content="">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="http://">
    <meta property="og:type" content="website">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">

    <!-- Twitter tags -->
    <!-- Testing tool: https://cards-dev.twitter.com/validator -->
    <meta name="twitter:site" content="http://">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="">
    <title>Document</title>

    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hehe'
            }
        })
    </script>
</body>
</html>

The things to note are:

I don't want to remember which meta tags I need to make my links look pretty on Twitter
I don't want to remember the tag testing urls
I want to interact with the site using Vue
If I'm lazy, having a classless style system like new.css is great.

With this template I have published tons of little crappy site projects. I'll list a few below:

Start with one file

It is really easy to get distracted while building out a software project. A lot times we think we need a lot more than we actually do to get started.

I want to remind you that a website with all the JavaScript and CSS in <script> and <style> tags in the html is still a website. Don't get caught up with trying to productionize your scratch pad code before you've even solved the problem or idea you came up with. It is very easy to burn yourself out with steps you perceive as important, but are really just procrastinating from what you initially set your goal at!

Make your life easier and keep things simple until you're ready to tidy everything up.

Always publish your work

I get it. Putting things out on the Internet is stressful and daunting! BUT it is not that bad. Once you've published a few things and get comfortable showing others your little snippets it gets a lot easier. The point is as you make things, put them on the Internet.

On the same thread as creating a project template, you want to find a hosting provider that makes it as seamless as possible to publish new sites. I'll list some of the big ones, but find a service that makes you feel comfortable and enables you to get things out quickly.

... A 50%-good solution that people actually have solves more problems and survives longer than a 99% solution that nobody has because it’s in your lab where you’re endlessly polishing the damn thing. Shipping is a feature. A really important feature. Your product must have it.

^{The Duct Tape Programmer - Joel Spolsky}

Hosting Providers:

Surge.sh - Static Sites
Github Pages - Static Sites
Netlify - Static Sites & Serverless f(x)
Glitch <3 - Static Sites & Web Servers
Vercel - Static Sites & Serverless f(x)
Heroku - More robust hosting solution

I personally use Surge, Glitch, and GitHub pages. For scratch work Surge is a one command tool that publishes your current working directory into a site. I use Glitch for anything that requires a NodeJS web server. Lastly for any static site I polish and want to put on my domain, I use GitHub Pages.

Buy a domain

Having a domain means owning your own little piece of space on the Internet. I think everyone should have one, and it is a great skill to know how to navigate the workings of a domain/website.

I won't go into too much detail on these, but having a personal domain tied to your side projects add's a nice touch when sharing the URLs.

I personally use Google Domains, but I'm sure you'll be fine with any provider.

Just don't use GoDaddy.

Online Code Editors

Online editors are great for combining a lot of the previous steps into one "cloud" friendly solution. They play an important role in scratch pad coding. One way to think of these tools is like a notebook, where you have all your resources at your fingertips and all you have to do is put the pen to the paper, and then with one click you can share it out to friends & coworkers.

Some notable sites:

Styling that works for you

CSS is a very personal topic for people, and rightfully so.

We have the full fledged Bootstrap/Tailwind folks, the opt-in Bulma/Tachyons style, the "I don't want to write any CSS" classless folks (new.css), and then my fellow masochist's who prefer to write css from scratch.

The point is, find the CSS toolkit that gives you the look and feel you're striving for, and gives you the confidence that you can style and be proud of that sites that you create.

I urge anyone interested or working in this space to take some of the tips above and find a flow that works for you. Being able to prototype through code, and share visual thoughts with others is a valuable skill.

Comment below with the tools that you use to prototype and build things, and feel free to let me know of any links and resources you'd like me to add to this post.