Introduction, want advice for first project idea

Hey all! My name is Dana and I am a nontraditional student in California looking to start a second career in programming. I’m very interested in Rust and need to set up a personal website, so I thought using seed for the website would be a good first Rust project. I’m also interested in contributing to an open source project and Seed looks like it might be a good option. So far I’ve just been emailing back and forth a bit with Martin while I procrastinate on actually getting started. :slight_smile:

I know enough html/js/css to put together a site that’s just static files, but I’m pretty ignorant about all the frameworks, js transpiling tools, css templating tools, and most everything else that professionals use in making websites. I was thinking of making a “slowstart” guide to getting a seed site up on netlify that assumes the reader’s skill level is more like mine. I plan to set up a very bare-bones site on github, set it up so that netlify is serving it, port that site to Seed, add some sort of functionality to it to make using Seed not seem like overkill, and then write it up as a guide. The quickstart guide uses a few tools from the node.js ecosystem and it’s clear I’ll need to do the same, but I want to be absolutely sure I’m making the simplest and/or most standard choices and only using them when necessary.

Does anyone have advice, particularly if there are any choices I should be making differently from what the quickstart does? I’m happy to figure out things for myself, but I’d hate to put out a guide that is full of strange newbie hacks and bad advice in the 0.1 version.

1 Like

Your position being new to web dev will allow you to write this in a way that will help others who are new; a perspective people used to it can no longer see. The main quickstart is designed to be a simple way to get up a site in Seed. The webpack-quickstart is more robust, and uses more tools - I think that’ll be a more versatile way to start from your perspective

If you come up with newbie hacks you think are weird, post them here, and we’ll QC them. The guide and quickstart repos are designed in a way that’s easy for people new to rust , but are already familiar with web dev. It leaves out fundamentals for someone new to web dev, like how you should structure your app, how declarative UI code works etc.

So my first impulse to use as few tools as possible may be backwards? I’ll certainly want to be able to justify choices like that in the guide. “We could do without tool x, but we’re using because in the real world nobody does its job by hand. There are other popular choices, but I chose tool x because the webpack-quickstart did.”

Perhaps it’s best to start with the normal quickstart; it’s easy, and doesn’t require extra tools. Or try both, and see what you think. I use the normal quickstart myself for most projects, or one similar to the server_integration example if I’m also using Rust on the server.

Tooling in Javascript is messy, and difficult to configure; one of the goals of Seed was to avoid this by providing a simple way to set up and configure projects.

1 Like

Hi!

First, I think the most straightforward way to design and develop a website is:

  1. Choose your target audience - do you want to get a job? Write a blog? Sell something?
  2. Write text content and divide it into pages. A pen & paper or something like Notepad is enough.
  3. Design pages for mobile (width 320px) and desktop screen - but use only text and try to use appropriate and readable fonts. Figma, Affinity Designer or Word if you are brave enough…
  4. Design other elements and create some other screen versions - it should help you during the development, but you don’t want to kill too much time with it. You’ll probably need a vector editor for svg pictures / logos (I’m using Affinity Designer, but there are free apps or maybe apps like Figma has some tools for it, too).
  5. Choose appropriate technology.
  6. Setup your project / workflow - to test the chosen technology. You should be able to make changes and deploy them quickly and without errors or too much thinking.
  7. Write simple docs / readme - how to setup project, how to use it, how to deploy it - because you forget it very soon.
  8. Write your website & enjoy.

For design tips look at: https://refactoringui.com/


Ad “5. Choose appropriate technology.” - let’s assume you are writing personal website with static content (information about you), basic menu, contact form and some blog articles. You want to find a job as a frontend developer.
So we have these options:

  1. Only static HTML/JS/CSS:

    • It’s simple, performance and SEO are the best, deploy is super simple.
    • No types, no SASS/LESS - it’s very error-prone to write it and manage it.
    • You would use probably some library / a component for contact form, because you don’t want to write it by yourself in vanilla JS (form validations, communication with server, handling errors, etc.).
    • No Markdown, so blog articles would be copy & pasted mess. And what about tags, categories, etc.?? You can download them from a server, but then the SEO is broken, it becomes slower and you should rather write your website in a backend framework instead.
  2. Backend framework

    • Very good SEO.
    • What framework? What hosting? How many users? Should I use CDN / caching? How I’ll write frontend logic? How to setup zero downtime deployment? Should I write administration for articles? What database? How to eliminate a single point of failure? How to setup monitoring? …
  3. “Pure” static site generator (e.g. not framework) - e.g. Zola (https://www.getzola.org/)

    • Very good for SEO, blogs, static content.
    • How can I add search? (https://www.getzola.org/documentation/content/search/ - write a custom one in JS!)
    • How can I add a contact form? Write a custom one in JS (or maybe Rust?).
    • You’ll need to learn generator’s template engine (https://tera.netlify.com/).
    • You’ll need to learn SASS and generator’s theme system to create a custom design / change the look.
    • If you don’t like something, for instance, routing, template engine or SASS and want to use your favorite tools - good luck!
  4. “Pure” frontend framework (Seed, React, …)

    • Bad SEO, you need compiler / bundler in the most cases, slow first render, very opinionated (it can be good or bad), bigger files to download.
    • Universal - you can create personal website or a new Gmail (i.e. you can add features / changing scope during the development). Less bugs thanks to better languages (Typescript, Rust, Elm…). Better performance for logic when you use WebAssembly.
  5. Prerendered frontend framework (GatsbyJS, elm-pages, Seed Quickstart with Webpack, Gridsome, …)

    • It improves the 4. point above - good SEO and fast initial render. Content can be downloaded before app building and “baked” into the static files.
    • You have to wait for framework initialization even if you already see a website - so things like menus don’t work immediately after the start and you have to handle it somehow (hide elements / add spinner, …).

So if you want to learn as much as possible and create a usable website and show your skills I recommend to try Quickstart with Webpack.
There are reasons why I chose Webpack. I’ll write Rust-only equivalent in the future, but I think it’s a good opportunity for you to learn something about Webpack and other JS tools because you can’t escape it in the frontend world.
And this quickstart has a guide for the whole process from developing to deploying, it’s proven (seed-rs.org, kavik.cz and probably other websites use it) and we can help you once you get stuck.

I agree. The existence of many tools in the JavaScript world is justified by “necessary to get JavaScript right”. To say it more clearly: they solve problems the world wouldn’t face if JavaScript would have been designed differently. Anyway the web would be a colourless place without JavaScript today.

That’s why I like Rust and its concept of Crates. It supports modern development, code sharing and so on and still its fully under control.

1 Like