How to build a website without frameworks and tons of libraries • Hacker News Board

Re: How to build a website without frameworks and tons of libraries

#221

Post by _mql » Wed, Jul 05, 2023, 5:26 AM UTC

Been dedicating a ton of time to this goal lately. I released a "SvelteKit template for building CMS-free editable websites" earlier this year and the idea has evolved since. I started out with using Postgres + MinIO for storage, but have switched entirely to SQLite. I also added an in-place image cropper, to resize and optimize images on the client side (WebP output) before uploading and storing them in SQLite. I chose Svelte because it's easy to build classic Web pages (with minimal JS overhead), and at same time implement the reactive layer (e.g. editing) on top of it (will be loaded async). However we are also evaluating the possibility to port this to a LAMP stack at some point. Oh and everything is dynamic here, no build steps involved, edits are live immediately.

Just launched my first client project using this approach:

https://trails-shop.at?editable=true (hit the red button in the bottom-right corner)

Project website: https://editable.website

Source Code: https://github.com/michael/editable-website

HN discussion: https://news.ycombinator.com/item?id=35456083

Twitter Thread, that explains how it works under the hood: https://twitter.com/_mql/status/1655553156799922180

Re: How to build a website without frameworks and tons of libraries

#222

Post by nogridbag » Wed, Jul 05, 2023, 5:28 AM UTC

simondotau wrote: post #219

grogenaut wrote: post #217

Earlier quoted context omitted.

hn isn't pure white and it does kill me at night on powerful monitors... just like I can't do dark mode outside on a laptop. Sure we did readable websites in the 90s, on dialup or slow dsl, and they took forever to load on small monitors. We also didn't have USB or SSDs. Dark mode and light mode is a nice tradeoff for varied lighting conditions.

If you have ergonomic issues with mostly white screens, it should be the job of your operating system or web browser to police this. It wouldn’t be difficult to implement a feature that sets a maximum total luminance for each page. Perhaps even automatically inverting the colours if it’s over a certain threshold.

I've been using Chrome's experimental "Dark Theme" feature on Android for months primarily for reading HN at night. It works great for HN, but occasionally it renders other websites completely unusable.

Re: How to build a website without frameworks and tons of libraries

#223

Post by okeuro49 » Wed, Jul 05, 2023, 5:52 AM UTC

Uehreka wrote: post #166

I’m just really tired of this debate about “frameworks” and “complexity”. If your client asks you for a custom CMS with a multi-stage publishing workflow with i18n and regulation-compliant a11y, you’ll need high-powered tools to build it in the time clients expect. Lots of clients in enterprise are like this, which is why the demand for this stuff is so high. If you’re working in B2C this may be surprising, but this…

I agree.

Furthermore if you're trying to do anything complex and you don't use a framework, you just end up creating another framework.

But this time there are no updates or help on Stack overflow for the person who inherits the code.

Re: How to build a website without frameworks and tons of libraries

#224

Post by porridgeraisin » Wed, Jul 05, 2023, 6:23 AM UTC

onion2k wrote: post #62

nickelpro wrote: post #53

Earlier quoted context omitted.

> First, your dark mode is implemented wrong in the lazy corner-cutting way of doing JS post-load ... I agree with your whole comment, but the media query approach is also tricky. You typically still want to offer a toggle while respecting prefers-color-scheme, and you may want to give priority to whatever choice the user has made with that toggle if they've used it on your site before. This still requires JS and loc…

This still requires JS and localstorage. I've been considering this recently for my site and I settled on having prefers-color-scheme on the root domain with dark. and light. subdomains. If the user chooses a color they just get bumped to a subdomain that sets a cookie with their preference. If they come to the site from an external link and they have a preference cookie they get redirected to the subdomain again. Ab…

Wouldn't the following be a better version of the above.

Use css variables everywhere, and have a defs-dark.css and a defs-light.css that define the colors.

Then, on nginx, serve the correct stylesheet based on cookie value.

Better than subdomains for dark and light, no?

Re: How to build a website without frameworks and tons of libraries

#225

Post by wg0 » Wed, Jul 05, 2023, 6:28 AM UTC

roblh wrote: post #103

Alright, I’m gonna be that guy. Right now, sveltekit + skeleton has absolutely blown my mind at how fast you can make a usable prototype. It’s honestly insane. You don’t even need to know svelte, really. As long as you can understand the file based routing thing, the rest is just html unless you really need more. Especially with the tailwind stuff built right in and a mostly vanilla looking theme. I’ve tried probably…

I'm a minimalist fanatic myself. I've tried astro and Sveltkit. IMHO - Sveltkit is really very minimal on top of an already very minimal component library, Svelte.

With +page.ts and appropriate setting, you can even generate static website or can go MPA or SPA .

Re: How to build a website without frameworks and tons of libraries

#226

Post by wg0 » Wed, Jul 05, 2023, 6:42 AM UTC

oneeyedpigeon wrote: post #81

z3t4 wrote: post #29

I think everyone writing content for the web should learn HTML and maybe some CSS - although the design part should be done by someone good with CSS, so that you only need to use semantic HTML, or you will end up with div's all over.

I think CSS is an order of magnitude more complicated than html, so I'd leave that to the professionals. But pretty much everyone should learn html, I agree with that.

It has gotten better. There are three major algorithms for layout - flex, grid and the positioning types along with display type behaviours.

Cross Browser compatibility has also gotten better.

Re: How to build a website without frameworks and tons of libraries

#227

Post by wg0 » Wed, Jul 05, 2023, 6:45 AM UTC

Hetzner is the hands down best cloud/infrastructure provider for the quality and price both but for a static website, spinning up a cloud VM is far from minimal.

You need lots of setup, a web server and web server configuration.

That too when far minimal options like Cloudflare Pages exists that are dirt cheap as well and is somewhat "serverless".

Re: How to build a website without frameworks and tons of libraries

#228

Post by pjbrunet » Wed, Jul 05, 2023, 6:52 AM UTC

WordPress was very simple back when it started. You needed just a few files: header.php, home.php, single.php, footer.php, and I wrongly assumed "Code is poetry" was about the brevity of poetry.

More recently, for simple websites I created a Golang template that reads a PSV config file. (PSV throwback to my Perl days.) Uses very little memory, no database, and I can reuse the same Go code for multiple websites. I think about sharing the code, but I'm not sure if it's worth the trouble.

I'm encouraged to see people here using their noggin, following their bliss, keeping things simple, and I hope this trend catches on.

Re: How to build a website without frameworks and tons of libraries

#229

Post by lelanthran » Wed, Jul 05, 2023, 7:02 AM UTC

zh3 wrote: post #70

lelanthran wrote: post #46

Earlier quoted context omitted.

There might be something wrong with your display setup. He is using, as far as I can tell, the solarised theme colours. They are very readable.

Could be but most sites render fine. Pretty stock setup, Dell monitors on Nvidia graphics, no tweaking.

Does this site look the same to you?

[EDITED] https://www.rundata.co.za

It's my site, also using solarised (although, it respects the clients dark/light mode, so you will see either solirsed dark or solarised light)

Re: How to build a website without frameworks and tons of libraries

#230

Post by onion2k » Wed, Jul 05, 2023, 7:28 AM UTC

porridgeraisin wrote: post #224

onion2k wrote: post #62

Earlier quoted context omitted.

This still requires JS and localstorage. I've been considering this recently for my site and I settled on having prefers-color-scheme on the root domain with dark. and light. subdomains. If the user chooses a color they just get bumped to a subdomain that sets a cookie with their preference. If they come to the site from an external link and they have a preference cookie they get redirected to the subdomain again. Ab…

Wouldn't the following be a better version of the above. Use css variables everywhere, and have a defs-dark.css and a defs-light.css that define the colors. Then, on nginx, serve the correct stylesheet based on cookie value. Better than subdomains for dark and light, no?

My idea has the benefit that users can block the cookie if they want to and still use whatever mode they want, although they'd lose the redirection 'functionality' if they do that.