191–200 of 270 posts
- static. markdown rendered to html using github’s api[1].
- dynamic. a go binary and an html file with inlined js zipped together and shipped somewhere[2].
it’s nice to never consider the machinery of either of these anymore. instead i think about building interesting things.
cf workers + r2 are a great addition to this when heavy egress is needed.
1.
https://github.com/nathants/render
2.
Earlier quoted context omitted.
You add a simple tag to the top of the body that does the right thing for them
Too bad that visibility:hidden will hide this noscript tag. Disabled JS != disabled CSS.
body {visibility: visible; opacity: 1;}
Earlier quoted context omitted.
Too bad that visibility:hidden will hide this noscript tag. Disabled JS != disabled CSS.
The only purpose of the noscript tag is turn the visibility back on and maybe setup some other noscript-specific styling. body {visibility: visible; opacity: 1;}
Earlier quoted context omitted.
I find it very hard to design. And then design consistently. So, I love some CSS that has that pre-defined. Otherwise my looks like heck.
I see your point. My recommendation if you wish to improve your designs is to do them outside of CSS if you don't already. With something like figma or Penpot you will have your fonts, palette, spacing and layout all predefined. Then once all your views are created using these common elements, you only need to transcribe them as classes in your CSS and use those few classes where needed in your HTML. I'm not a design…
> Mind you, Hetzner webhosting starts at 2 EUR! How crazy is that? Oh yeah? and netlify is totally free for an infinite amount of sites! how crazy is that? > We use a short Python script with exactly 45 lines of code. Including comments and blank lines. > > In summary, this is the simple toolchain for building our web: > > Developer updates index.src.html > Watchdog.py detects the file change and ... > ... renders Ji…
> they don't even show the step by step code or link to any repository that shows how it's done They describe the steps and provide the clue that it's a 45 line script including blank lines and comments. I think they expect you would be able to quickly replicate their work in a language of your choice and calling out to libraries of your choice. > no description of what the heck "Watchdog.py" is, no description of wh…
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…
The nuts-and-bolts implementation of inlined-CSS to avoid flash-of-white is separate from the UX toggle question, which is why I listed them as separate criticisms. The former is just wrong of OP: no user wants the FOUC flash-of-white, end of story; similarly for some of the other solutions proposed here (block the entire page, really? talk about burning down the village to save it). The latter has more leeway for de…
I'm curious for what the other approach is. Users find it annoying to refresh the page and have their dark-mode setting change, or have their dark-mode setting change while navigating the site.
So I have to block paint until I can query local storage in order to avoid flashing, what's the alternative? Below someone suggested using cookies and only serving CSS that does the desired styling, which I guess is doable but requires a non-trivial infrastructural change.
h("div", { class: "container" }, [
h("p", {}, "oh hi!"),
]) // -> "oh hi!
"
You don't need any of those tools. You can build a fast website and even a complex reactive web app with plain HTML, JavaScript and CSS and you don't need any transpilation step.
These days browsers have native features that we couldn't even dream about 10 years ago like HTMLElement (Web Components) which you can use to isolate components (each with their own dependencies) and build reactive front ends with very little boilerplate required. You don't even need a bundler these days because now there is HTTP2 which allows servers to preemptively push resources to the front end before they were requested by the browser so the round-trip latency argument for using a bundler is gone. Not to mention the script tag now has async and defer attributes to give you fine-grained control over the execution order of scripts on a page or within a component.
Also, caching controls are on another level nowadays. It's probably even less efficient to bundle everything into a single file as the whole thing has to be downloaded again each time any change is made to any tiny script...
I feel like there are all these amazing native features that are being ignored completely in favor of heavily-marketed over-engineered bloatware.
It boggles the mind... From where I'm standing, it feels like there is a psyop in this industry to make everything as complex as possible. Even the narratives around keeping things simple are over-complicated.
Junior developers these days are accustomed to a level of complexity that I find unfathomable and they are incapable of seeing through the abstractions. There is all this stuff available in the layers below which is less complicated and provides a more elegant solution than all the abstractions you learned, yet you are discouraged from peeking under the hood.
All these layers of abstraction offer nothing substantial aside from lock-in factor for certain large tech companies which benefit from people thinking that building software end-to-end is more complicated than it really is.
How many junior devs were discouraged from building a new website or app because they thought they didn't have what it takes. They could have done it if they knew: It's OK, you don't need to know React or Next.js or NestJS or TypeScript or Tailwind or WebPack or Lambda/serverless or ORMs... There are better technologies and techniques to learn with your time which will make you a better developer much faster and with less pain and unlearning required later...
As someone who was around when people still wrote apps in plain HTML and .js files without a build step, I'm surprised to read stuff like 'the simple toolchain for building our web: Watchdog.py detects the file change and ... renders Jinja template into index.html and ... calls Tailwind CSS CLI to generate styles.min.css...' You don't need any of those tools. You can build a fast website and even a complex reactive w…
I wouldn't have a clue how to start with Web Components and all the other things, to build a I don't think I have the energy to move off from Sveltekit to a new thing, without having to re-learn everything and make a ton of mistakes