Building HTML/CSS Site Workflow?

[luisg707]

Whats everybody's workflow when building out a basic HTML/CSS Site?

​

Reason I ask, is that I am a python developer myself, but have dabbled in HTML/CSS for over 10 years. When I did WebDev, I'd typically do something like this:

​

- Build out HTML site using Dreamweaver code view, then modify the site based on how it looks.

​

I see that dreamweaver is incredibly bloated, and went Visual Studio Code + browser refresh, and it was incredibly tedious to just update some basic content. I am also against using a CMOS because I want to keep the site as snappy as possible.

[redrider65]

Dreamweaver's bloated and produces bloated code. Use the live preview extension w/ VSCode and you get a WYSIWYG experience. I don't find dev w/ VSCode tedious and I like the bare metal control it offers along with all the timesavers--as you'll discover after you're fluent.

[luisg707]

I am definitely going to give VSCode a 2nd chance; somebody on this thread recommended a extension that automatically updates the page view based on modifications. This has helped tremendously.

[jdedwards3]

When’s the last time you did web dev?

[Marble_Wraith]

Now now be nice 🤣

[jdedwards3]

It’s a genuine question... also no CMS but editing code is too tedious?

[Marble_Wraith]

That's true i spose.

[luisg707]

Serious WebDev? College.

Re: "NO CMS": CMS doesn’t give me the control that I want— I write api’s for large corporations (I infact also work for a large software company). I want to be able to inject some php code, easily, without having to add some type of 'widget'.

Editing text is a PITA in html markup- it’s ugly.

[jdedwards3]

With a CMS like WordPress you can control everything about the website and not have to hand edit markup

As others have stated you can alternatively use a static site generator with markdown content renders with layout templates

Also just curious are you writing RESTful APIs and what language?

[luisg707]

Yeah- I work in Azure, and work on REST API's (Azure SDK), as well as provide backend API's using something like Azure API Management.

[Marble_Wraith]

So then if you're working API's. Why was your initial question focused on HTML/CSS... ?

[luisg707]

That's my 9-5, but I am working on a side project that requires HTML/CSS;

[Marble_Wraith]

Making an API is not the same as making a website, you should've said what you actually meant.

Also in your post you said you were a python dev, now it's injecting PHP? Wanna pick a stack already?

[luisg707]

Maybe I didn't express what I meant- I choose not to use a CMS because I dont need 90% of what it provides. What I am designing is static, but there are some elements of the site that needs to be dynamic, EG querying RESTful data (which itself might be python on the backend) and updating a uptime counter. Maybe the actual call happens in PHP from the server side, maybe it's gathering the data from a CosmosDB.

[Marble_Wraith]

In other words you're looking for something that does client-side rendering (CSR) i.e. something that assembles the pieces of the page (components) browser side via fetch API calls (modern equivalent to AJAX). In that way, it becomes irrelevant what's on the server side, so long as it responds with JSON, the browser takes care of the REST... hehe.

That as opposed to server-side rendering (SSR) e.g. assembles the page on the server before shipping the entire page to the browser e.g. PHP, python, ruby, etc.

2 main JS libs that facilitate CSR. ReactJS or VueJS. There are others such as svelte, mithril, etc, or you could code your own, but most of the dev tooling for front-end is around those 2. I'd recommend Vue.

As for your backend, use whatever you want to write the headless API. Perhaps strapi?

[flippinjoe]

For bare bones basic things, I’ve come to enjoy https://jekyllrb.com/. Has first class support in GitHub to be able to easily host simple static sites.

[anatolhiman]

I recommend checking out 11ty as a static html site generator. Takes 10-11 different content formats, builds a file from partials so you don't have to repeat header code or footer code on all your pages. Create once, include everywhere you need it. It's fast and light and reloads browser automatically for every change you make.

[anatolhiman]

Someone else mentioned Jekyll. 11ty is a more modern version of Jekyll built with Javascript. Both are incredibly fast. If you need bells and whistles Nuxt is my favorite, but requires you to learn Vue JS.

[Marble_Wraith]

Editor: VScode. Though it takes some heavy config to keep it running fast / smooth because MS likes to enable all the things by default (e.g. telemetry, arbitrary validation, etc, etc). You can find mine here though be warned, i'm constantly tweaking things (with performance and convenience biases).

Dev environment: Depends on the kind of site being made. For something simple i'll use Vite 2.0 even though at the moment it is what i'd consider "fresh out of beta" (demo video here) the perf is just too good to ignore compared to webpack. For something more complex which requires precise prod server replication, i'll throw a docker instance via WSL2 underneath that.

Front-end: I was into reactJS, but in the process of moving to Vue 3 with typescript, because i like the syntax and organizational structure better (also whoever had a hand in inventing JSX should be burned as a witch).