[HN Gopher] How to build a website without frameworks and tons o...
___________________________________________________________________
How to build a website without frameworks and tons of libraries
Author : KodingKitty
Score : 268 points
Date : 2023-07-04 18:47 UTC (4 hours ago)
(HTM) web link (www.kodingkitty.com)
(TXT) w3m dump (www.kodingkitty.com)
| michaelteter wrote:
| "as simple as possible but no simpler" - (not Albert Einstein,
| probably)
|
| Pure HTML + CSS, with the CSS in the <head> or inline in each
| html tag... this is a fine way to get something going. And then
| when you have two pages, you pull the CSS out to a separate file.
|
| But once you start making any site which has multiple pages of
| the same format, you want some kind of template system with
| includes and a (static page) generator.
|
| If your pages are data-driven, then you might want a programmable
| site generator which can ingest the data and spit out pages.
|
| But if your data is "live", you end up needing per-view page
| creation, which is at minimum PHP realm (and certainly leaning
| into modern web framework with running servers realm).
|
| I recently built a pro-bono website for a hobby of mine. The site
| is a dance promotion and event site, and the owner is a very non-
| technical dance teacher. It uses Eleventy (https://www.11ty.dev/)
| to generate a static site on Netlify (free tier), and it has some
| custom build code which pulls data from a Google Sheet which I
| have setup for the teacher to use to define upcoming events. It
| took a good dozen hours to build, but now it works like a charm
| while costing nothing to operate or manage. Now having built
| this, I have discovered a great and powerful sweet spot between
| absolute bare minimum and Rails/Phoenix/Django level.
| divbzero wrote:
| Yes, even OP ends up using two libraries: Jinja for templating
| and Tailwind for styling. It's the happy medium, as you say,
| between bare HTML + CSS and full-blown Django/Phoenix/Rails +
| Angular/React/Vue.
| [deleted]
| lionkor wrote:
| I've found a combination of picocss (or similar), a webserver
| with some templating (like handlebars) and as much server side
| rendering as possible pretty simple, and pretty easy to use, so
| far.
|
| For example, one could use rust with some webserver and
| handlebars-rs to do this. You can add databases to this, and
| whatever else you need, and it works nicely. If you want to
| change anything, its very vanilla html, css, javascript, or
| rust/c++/nodejs/whatever else.
|
| No new frameworks to learn, and you decide the structure.
| fimdomeio wrote:
| I believe the most minimalistic and productive way is to just use
| php. The language was specifically just created for that. If it's
| a simple site then you don't need composer you don't need router
| logic. just create separate files for header footer navigation
| and include them on each page.
| michaelteter wrote:
| I agree with your sentiment, but with just 5-20 hours of effort
| one can make an effective Eleventy-based custom site generator
| which is then deployed on Netlify for free (and edge-available
| globally).
|
| Edit something, git commit/push, and within 30 seconds your
| changes are live everywhere. It's pretty awesome, and it
| requires no "server" hosting.
| asddubs wrote:
| if you want simple, you can't beat PHP + HTML. I wouldn't
| actually go that simple for anything that's more than a single
| purpose script, usually I would at least have a separate
| templating library, but it's really nice that you can do it.
| SoftTalker wrote:
| Yeah the advantage of PHP is that it is its own templating
| language. You don't need anything else.
| bluGill wrote:
| There are a number of simple frameworks, but soon you are back
| to the common bloat from adding too many frameworks.
| pickingdinner wrote:
| Ya, or any server side scripting language. You just want the
| ability to refactor your site, as in, name, save, and load data
| and code blocks.
|
| And if html allowed inserting html as it does css or js from
| external files, even that would be mostly be redundant. If only
| it let you use <html src="" /> at will.
| sseagull wrote:
| If the http server supports it and it is enabled, you can do
| Server Side Includes
|
| https://en.m.wikipedia.org/wiki/Server_Side_Includes
| mobilio wrote:
| Even better - Edge Side Includes:
|
| https://blog.cloudflare.com/edge-side-includes-with-
| cloudfla...
| 8n4vidtmkvmk wrote:
| You can build a router and layout in about 100 lines with no
| libs. If the router just checks the existence of the file and
| the layout just includes header.php, pagename.php and
| footer.php. I do that for simple sites. Very easy and fast.
| jaza wrote:
| Not sure about other Static Site Generators, but Eleventy lets
| you write your content in straight HTML, or whatever else you
| want, doesn't have to be in Markdown. Do that, plus don't use
| anything much else except simple template includes, and you've
| basically got the author's build script, without having to write
| or maintain any code yourself. Just sayin'.
| michaelteter wrote:
| There may be other equal or better options, but I also recently
| discovered and built something with Eleventy. I'm a big fan
| now.
| albertgoeswoof wrote:
| I took a similar approach building mailpace.com's
| marketing/landing site: https://blog.mailpace.com/blog/using-
| html-modules/
|
| basically you just write in HTML, CSS and a wee bit of JS
| wherever you want it, and have a couple of tiny npm scripts that
| glue it together.
|
| Put it on netlify, cloudflare, github, or wherever and it scales
| right up.
|
| In comparison our blog is in Gatsby, and boy does that framework
| never seem to work right away when we start it up for adding a
| new post.
| dimmke wrote:
| I genuinely believe Gatsby is the epitome of everything wrong
| with front-end development. It's such a bad framework. So
| complex and confusing and fragile just to generate static
| pages.
| ukuina wrote:
| Agree, when did simple template expansion go out of style?
| mildred593 wrote:
| The article says "Unfortunately, Jamstack tools require an
| initial setup and an initial (and continuous) learning" but with
| the bare minimum, static website generators are nothing more than
| glorified template engines.
|
| I'm using Hugo and for my purposes, I always start without any
| theme. Basically, I start to write a markdown file for each page,
| and an HTML template, then if I need more complexity I have the
| power available underneath.
|
| Static website generators are not necessarily complex to use, and
| they generally stay compatible from version to version so you
| only need to learn the new features and only if you want to use
| them.
| hugozap wrote:
| Most framework devs don't have any incentive to stop adding
| features. What was a simple and elegant tool ends up trying to do
| much more and the additional complexity negates a lot of the
| benefits.
| spondylosaurus wrote:
| Maybe I'm misunderstanding, but this doesn't sound all that
| different from your average static site generator--Python-based
| Jinja templating for HTML files versus Ruby-based Liquid
| templating for HTML/Markdown files (i.e., Jekyll).
| nickstinemates wrote:
| Instead of using an off the shelf framework, they made their
| own.
|
| And that's cool. Making stuff is fun.
| spondylosaurus wrote:
| For sure! I'm all in favor of bespoke new tools. If anything
| I'm just confused about the way they describe this in
| contrast to SSGs (and why a SSG wasn't a good option for
| them), and then go on to create a tool that literally
| generates a static site. :P
|
| Maybe I'm being obtuse, but the reasons they gave for _not_
| using an established SSG primed me to expect a radically new
| solution. Versus "we didn't like any existing SSGs so we
| built our own," which was my takeaway from the whole thing.
| Terretta wrote:
| I'm with you. Jinja and watchdog.py taking
| somefile.src.html -> somefile.html feels a bit static-site-
| gen-ish.
| fullstackchris wrote:
| nooooooo!!! its totally without a framework though!!!! /s
| FpUser wrote:
| For me the question has been solved for ages.
|
| If it is a website - then it is plain HTML with some CSS. The
| exception is - there will be some JS if we want saucer flying
| across screen.
|
| If it is an application - the logic will be coded in plain JS
| that talks to backend using JSON based RPC. No frameworks bar
| some domain specific libs. Minifying / building step can be
| included for production.
|
| Works well for me.
| [deleted]
| pacifika wrote:
| Nice, it's always interesting to discover blogging stacks.
|
| Historically a blog requires a feed, this is typically where
| super minimal stacks stop, although I guess you could scrape your
| index.
|
| I wonder how many web devs can still build a blogging app, a
| webshop, etc from first principles when mostly it's all npm
| create packages and template languages.
|
| I started a php / SQLite blogging stack with basic web based
| editing and a feed (ah and tagging, a search), hope to add more
| indie web features to it.
| masfuerte wrote:
| I use pandoc (and a makefile) as an SSG. It has stuff like syntax
| highlighting and TeX equations built-in and the install is one
| exe, not a pile of node or python cruft. It's simple and
| reliable.
| [deleted]
| NKosmatos wrote:
| Back in the old days (90s), I remember seeing the "made with
| notepad" icon on the footer of many pages :-)
|
| I used it myself on many websites. Heck, we were still using the
| <blink> tag back then. Here's an Easter egg for young HN readers,
| search for "blink tag" on Google and see the results ;-)
| ahmedfromtunis wrote:
| Frameworks and libraries should not be limited by ideology. The
| primary objective should be to utilize whatever is necessary to
| achieve the task at hand. And no more!
|
| When creating websites, the focus should not be on competing to
| use the fewest (or most) number of tools, but rather on
| effectively serving users and ensuring their satisfaction.
|
| *User experience should be the guiding principle.*
|
| What concerns me about this article is their simplistic view that
| using a minimalist stack is solely a matter of choice, without
| acknowledging the nuances involved. It comes across as arrogant.
|
| Furthermore, their demonstration of "building a website without
| frameworks and numerous libraries" is based on their own website,
| which is nothing more than a static landing page with links to
| blog posts.
|
| Could anyone realistically build an Uber or an Airbnb using the
| same approach, even if they wanted to?
| ad404b8a372f2b9 wrote:
| Fancy that! HTML and CSS? To make a Website? They must be mad!
|
| All joking aside, I use the same stack save for the templating.
| Unless you are a web developer I don't see the point of a CSS
| framework, it's much easier to roll your own. Nor of a site
| generator, I tried Hugo it saved no time at all. Nor of
| JavaScript, a few months ago I tried replicating the websites of
| a few companies to improve my css skills, HTML and CSS were
| enough to reproduce the appearance of all of them, yet none of
| their website would even appear without JavaScript enabled.
|
| We stack on framework after framework, new languages, new tools,
| all for nothing but increased complexity and busy work for a new
| generation. (Save for the 5% of websites that actually need that
| stuff.)
|
| Also interesting to see they actually sell a service, would have
| been curious to know what their prices are like.
| mteam88 wrote:
| Agre except have used astro with good success
| djbusby wrote:
| 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.
| ad404b8a372f2b9 wrote:
| 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 expert, so take it with a grain of salt, but
| I used to be terrible and following that workflow allowed me
| to get decent.
| 72736379 wrote:
| For static pages I'm a huge fan of using SSG's (static site
| generators) like Hugo
| pier25 wrote:
| I'd go with Astro.
|
| Super easy to get started and has lots of goodies to generate
| static HTML. You can scale it up later if you need more than just
| a static website.
| n3storm wrote:
| This is the thing with digital stuff, nor simple nor simplistic
| stays enough.
| Xenoamorphous wrote:
| A tiny mostly static website written by one person certainly
| doesn't need anything special.
|
| A website/webapp with millions of visits per day and a ton of
| stakeholders requesting features every week, on the other hand...
|
| It all depends on the use case, like most stuff.
| oneeyedpigeon wrote:
| Agreed. I wonder what the ratio is between the former and the
| latter...
| Dah00n wrote:
| Crazy. I wonder how cars would look if stakeholders had a say.
| revskill wrote:
| It's a chicken-egg problem.
|
| In order to build a website without frameworks, you should master
| the frameworks first, in order to understand their shortcomings
| ;)
| klysm wrote:
| Using tailwind and jinja...
| suddenclarity wrote:
| Reminds me a bit about the minimalism trend where people
| boasted about getting rid of all their belongings, only to
| mention at the end that they borrow everything they need from
| their parents or roommates.
| wizofaus wrote:
| Did anyone else notice the fact that on the home page, for any
| window width >= 1280px, the text "Your design. Our HTML and CSS"
| (in the body) overlaps the text in the footer (and is strangely
| hard to select for copying to the clipboard). In fact the footer
| tends to overlap the body at various window sizes. Can't help but
| think that you'd wanna at least get a simple thing like that
| right on such a page...
|
| Edit: I noticed it's using "rem" for specifying the font size,
| and I've actually seen quite a few sites where the font sizes
| look wrong using that unit, I'm wondering if it's something
| specific to my system (but happens both with Chrome and Edge).
| djbusby wrote:
| On my Chrome/Android I have the default font size larger. And
| sometimes HN loads with my preference - and others it loads
| tiny. No rhyme/reason.
| andai wrote:
| On iOS Safari, sometimes the same element type on the same
| page will be different sizes (e.g. the navigation buttons on
| xkcd).
| MaxLeiter wrote:
| I think you and the parent comment are running into a
| mobile feature that attempts to ensure text is legible:
| https://maxleiter.com/blog/mobile-browsers-resizing-font
| jamiedumont wrote:
| I've landed on the same approach for my photography portfolio.
| Benefit of jumping ship from development to photography is that I
| don't have to rely on Squarespace like most other photographers!
|
| After trying a few server-based options like Ghost, Statamic and
| self-built ones with Phoenix or Vapor (I've covered some ground
| as a dev) and the usual SSG options I ended up just writing
| everything as straight HTML without any templates and upload to a
| Hetzner server using rsync.
|
| The lack of templating for shared UI like navigation is a touch
| irritating, but with some RegEx magic I haven't found a change I
| want to make that takes more than a few minutes. I got caught out
| early on with some greedy RegEx that nuked some content, but git
| to the rescue.
|
| Image generation with all the sizes and format variants is
| laborious, but it prompts me to try new layouts rather than
| relying on cookie-cutter ones like Ghost. Plus I've noticed a
| slight improvement in image quality generating my web variants
| out of my RAW editor (Capture One) vs using the libraries and CLI
| tools used in most SSGs.
|
| It's slower, but my thinking is that it's more akin to putting
| together a photo book. It take more effort up front, but once
| it's done, it's done for good, and won't need mangling in and out
| of various CMS over the next 20 years!
| michaelteter wrote:
| How was your experience with Vapor?...
|
| Also, you might find some value in an approach that I used
| recently (https://news.ycombinator.com/item?id=36592641). Using
| a Google Sheet as the data driver was easy, but it could have
| just as well been a filesystem of photos.
| jamiedumont wrote:
| I really want to like Vapor because it's just a simple
| stripped back server-side framework; but I always get
| frustrated building with it. I've loved learning SwiftUI, but
| Vapor - even with Leaf swapped out for Plot - just isn't as
| ergonomic.
|
| Plus I have the lingering memory of working with Elixir and
| Phoenix LiveView which is kind of the gold standard for web
| frameworks at the moment in my opinion.
| projektfu wrote:
| You could use server-side includes to get the basic prev-next
| navigation and consistent menus, headers and footers.
| jamiedumont wrote:
| It's something I've considered with both nginx and caddy
| because I've got the server so I may as well use it! I prefer
| a server over services like Netlify because I can deploy with
| rsync rather than git (or the web-based UI). Plus it lets me
| log the many 404s I get after so many site migrations, and
| then create 301s. Most services like Cloudflare and Netlify
| just swallow details like that unless you pay for upgraded
| analytics.
|
| I keep it as vanilla HTML though because I like the fact that
| I can open any page as a standalone file with no server and
| almost any browser can render it. I'm not saying this won't
| change, but for now I'm happy without SSI.
|
| Plus, I'm using Nova for some Panic-based nostalgia (Coda was
| big when I started), so I like having the code and rendered
| HTML side by side in Nova's preview.
| grilledchickenw wrote:
| I've been meaning to do this and move away from Smugmug. Would
| you be okay to share your portfolio and/or source?
| natpalmer1776 wrote:
| On their profile they have their website linked
| (https://jamiedumont.com/)
| jamiedumont wrote:
| Someone beat me to the punch and added the URL (thanks!).
|
| The site is what's left over after trying a few different
| options, most notably Ghost and later Zola.
|
| Most of the current layout mimics what can be created within
| Ghost's editor. I then migrated to Zola which shares the bulk
| of the layout. Currently most of my images are coming from
| Zola's "/processed_images" directory. You can view the Zola
| codebase here[1] if you like.
|
| The layouts I'm currently working on (not yet published) are
| heavily influenced by Andrew Clarke's work [2] and his book
| "Art Direction for the Web" [3] which I highly recommend if
| you want to explore less generic layouts online. I hope that
| on day my site can be example that web design can be as
| varied and interesting as print!
|
| 1: https://github.com/jamiedumont/zola_jamiedumont.com
|
| 2: https://www.smashingmagazine.com/author/andy-clarke/
|
| 3: https://www.smashingmagazine.com/2019/03/art-direction-
| relea...
| grilledchickenw wrote:
| The detailed response is much appreciated!
| pknerd wrote:
| Slightly off-topic: His single "index.php" with jQuery is helping
| him to earn thousands per month.
|
| https://twitter.com/levelsio/status/1675829733668319233/phot...
| graypegg wrote:
| I'm all for jquery to handle sending and event and updating
| some dom elements, that's simple and pretty easy to debug
| actually.
|
| Not using any modern CSS layout though, ehhh I would never want
| to return to the age of .clearfix, that feels like the opposite
| of simple.
| mgbmtl wrote:
| Are there ways to view tweets without an account? Kind of like
| archive.is? For now, I could enter it in Google and view cache,
| but I assume that will go away soon.
|
| And if I understand correctly, it's not the index.php, but the
| actual service behind it, that earns thousands per month. Looks
| nice :)
| aeyes wrote:
| Google cache works for me: https://webcache.googleusercontent
| .com/search?q=cache:JHqAqv...
| [deleted]
| oneeyedpigeon wrote:
| There used to be, but Elon nuked it. I think, as commenters,
| we should start embedding the content of a tweet right after
| we link to it.
| viraptor wrote:
| Nitter.net was that thing, but the rate limits killed it for
| now. We'll see if it gets back online.
| Given_47 wrote:
| So sad. And even if one didn't care about privacy, the
| speed of Nitter relative to the official Twitter client was
| amazing
| ricardo81 wrote:
| Probably doesn't need jquery either as most of its
| functionality is now native to browsers.
|
| Also fwiw, another one here without a logged in Twitter acc
| Klonoar wrote:
| His business ideas and the fact that he just ships is what
| earns him thousands per month.
|
| End users don't give a shit what you build it with, but none of
| it matters unless you're willing to shit products out.
| keen_poincare wrote:
| Congratulations to him, but 14,000 lines in a single script? I
| would pay to not give maintenance to that.
| AndroTux wrote:
| Just because you can doesn't mean you should. Just because it's
| one file doesn't mean it's better. It'll be shit to maintain,
| it'll make working with multiple developers a pain (merge
| conflicts much) and having one file means having minimal
| structure at best. There's a reason why we split things up into
| multiple files.
|
| I could also write his cool startup in just one line if I just
| remove all newlines. Does that make it even better than 14.000
| lines? Obviously not.
| noobdev9000 wrote:
| Why? Most companies require skills in frameworks and libraries.
| The fact you can glue them together shows a different skill, that
| you'll most likely use in job daily.
|
| This feels so forced. Make a joke CV, strip it of any mentions of
| these "bad" things, try applying. Good luck.
| kaesve wrote:
| There's a ton of value in building stuff without tools. It's
| somewhat similar to learning two frameworks; seeing React's
| philosophy makes me a better Vue programmer. In a similar vain,
| building stuff without tools teaches me a lot about what those
| tools actually offer me. What stuff is really hard? What stuff
| is really easy to abstract out? How do Vue/React/Whatever do
| these things?
|
| It also teaches you more about your platform. In the end, all
| these web tools and frameworks are running in that same
| browser. I find especially with newer web developers, it's hard
| to solve something in React/Vue/.. because they don't know how
| to break up the problem. If you'd roughly know how to solve the
| problem without those frameworks, it becomes much easier to
| figure out how to solve it with them too.
|
| Finally, I also just get toolchain fatigue. If I want to build
| a simple landing page, I don't want to learn new stuff, I don't
| want to read what changed in the latest versions, what the
| correct way of the day is to set up a project. Honestly, I
| don't even want to have a build pipeline and module swapping
| dev server, that inevitably needs to be configured. Just some
| static html/css/js is often good enough. And as I said, you
| also learn which problems frameworks solve well, so you'll know
| when some static files isn't the right choice.
| nkozyra wrote:
| To be fair, they're still using frameworks and libraries. A
| static site generator is probably not going to be an entry on a
| CV anyway.
| [deleted]
| cassepipe wrote:
| tldr; the author is using jinja templates + tailwind + a python
| script
|
| It all feels a bit moot because most frameworks exist to create
| website that tend to be web _apps_ If you just want static
| website well it 's pretty easy to use any kind of simple
| templating system that will give you some html + css +
| optionnally js.
|
| Hell you don't even have to generate the file, you can use CGI to
| generate your page on the fly with CGI (I like haserl)
|
| If you like or are competent in dealing with quirks, you can do
| it all by hand instead.
|
| I just got into webdev and I _really_ like Svelte and SvelteKit
| so far.
|
| Svelte works well if all you want is to colocate a bit of html,
| css and js. You can really start simple and iterate when you have
| bigger needs. Now, if I want to make a webapp I'll use SvelteKit
| even if only for the baked in client side routing based of the
| structure of the project.
| vogre wrote:
| > Frameworks bad Yeah cool!
|
| >We use html and css sooo hip!
|
| >We use jinja wait.. what?
|
| >and self-made file-watching static generator that uses python
| and css-generator
|
| Are you kidding me? That's the real good case of NIH syndrome.
| jonquest wrote:
| Simple static sites are great ideas. Writing HTML/CSS and not
| relying on a WYSIWYG back-end editor is an awesome way to work,
| especially if you're using a templating engine to generate the
| static content as mentioned here. However, in my experience the
| people paying to have websites built or your in-house marketing
| team maintaining and updating the company website, making sure
| the SEO is up-to-snuff, etc. can't do these things. They don't
| want to learn how to do these things. The unfortunate truth is
| that more times than not they require Wordpress or something like
| it to do their job.
| theflyingelvis wrote:
| Whatever happened to html?
| [deleted]
| toddmorey wrote:
| I don't get it. They didn't want a static site generator so they
| wrote a static site generator.
| alin23 wrote:
| I use something very similar on https://lunar.fyi and
| https://lowtechguys.com but I wouldn't call this "simple"
| anymore.
|
| They use Jinja templating, I prefer Slim
| (https://github.com/slim-template/slim#syntax-example) which has
| a more Pythonic syntax (there is plim [0] in Python for that)
|
| I use Tailwind as well for terse styling and fast experimentation
| _(allows me to write a darkMode-aware and responsive 100 line CSS
| in a single line with about 10 classes)_
|
| For interaction I can write CoffeeScript directly in the page [1]
| and have it compiled by plim.
|
| I run a Caddy static server [2] and use Syncthing [3] to have
| every file save deployed instantly to my Hetzner server.
|
| I use entr [4] and livereloadx [5] to rebuild the pages and do
| hot reload on file save. All the commands are managed in a simple
| Makefile [6]
|
| ------
|
| You can already see how the footnotes take up a large chunk of
| this comment, this is not my idea of simple. Sure, the end result
| is readable static HTML and I never have to fight obscure React
| errors, but it's a high effort setup for starters.
|
| Simple for me would be: write markdown files for pages, a simple
| CSS for general styling (should be optional), click to deploy on
| my domain. Images should automatically be resized to multiple
| sizes and optimized, videos re-encoded for smaller filesize etc.
|
| I have mostly implemented that for myself
| (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...)
| but it feels fragile. I'd rather pay for a professional solution.
|
| [0] https://plim.readthedocs.io/en/latest/
|
| [1]
| https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
|
| [2] https://caddyserver.com/docs/command-line#caddy-file-server
|
| [3] https://syncthing.net
|
| [4] https://github.com/eradman/entr
|
| [5] https://nitoyon.github.io/livereloadx/
|
| [6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile
| streamcode9 wrote:
| github pages
| simultsop wrote:
| And here is you getting nagged by someone for a suggestion
| which will nag me too.
| oneeyedpigeon wrote:
| I was quite surprised that was missing from their list of
| options.
| Animats wrote:
| I'm still using Dreamweaver 8. I have to run it under Wine on
| Linux, but I have a permanent license, and it works fine. That
| does most of the drudge work. Sometimes I'll hand code some
| Javascript.
|
| I wish there was a modern version of Dreamweaver that didn't
| phone home, didn't use "cloud", and didn't require endless
| payments.
| vereis wrote:
| I've not tried this for any adobe products, but you could try
| running them in a locked down environment (container, vm,
| whatever) and don't allow network access.
| CodeWriter23 wrote:
| Thank you, no
| hugozap wrote:
| You can get far with htmx and any server template language.
| Common patterns are already encoded as html attributes.
| 0xEF wrote:
| This is the same approach I took when trying to set up a small
| project site at SDF.org. It was a great way to build a site, and
| learn some new things while having a bit of fun. Sadly, I just
| don't have the time to generate the content I wanted to do, so
| the site sits.
| fullstackchris wrote:
| > 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 Jinja template into index.html and ... > ... calls
| Tailwind CSS CLI to generate styles.min.css.
|
| love posts like these that insult literally any other way of
| doing things except their way, claiming it's "simple" when in the
| end they don't even show the step by step code or link to any
| repository that shows how it's done. regardless of "without
| frameworks or tons of libraries", its esoteric and definitely not
| an average or common way of doing things (to the rest of us), and
| clearly DOES use codes (and/or?) a framework!!!
|
| no description of what the heck "Watchdog.py" is, no description
| of what Jinja - I for one don't know what either of those are,
| sorry if i'm an "ignorant normie"
|
| simply put, it's quite clear you ARE using frameworks, just in
| your mind, perhaps, you "aren't"
|
| this whole framework vs no framework vs BS vs BS vs BS has gotten
| really out of hand, and 99% of devs cant see the forest from the
| trees
|
| what in the world did i just read
| skiptracer wrote:
| Take a deep breath and go for a walk, there's no reason an
| inconsequential blog post should make you this angry.
| spicybright wrote:
| Go for a walk yourself if you can't handle reading criticism
| without you belittling the writer.
| Eldt wrote:
| The writer was belittling the OP so maybe direct that
| elsewhere
| echelon wrote:
| > and netlify is totally free for an infinite amount of sites!
| how crazy is that?
|
| Netlify is hot garbage and you should avoid them like the
| plague.
|
| I built a startup on a second account, invited a team, and then
| it started charging me for my personal websites on my first
| account.
|
| I didn't know about this and they cumulatively billed me
| hundreds of dollars. When my card info changed, they took my
| websites hard down. I had no idea either of these things was
| going to happen.
|
| When I told them their support was 100% unhelpful. No refund,
| not even a restoration of my websites that they completely
| deleted.
|
| Do not use Netlify.
| szasdasdasda wrote:
| [flagged]
| VWWHFSfQ wrote:
| They don't want to use a framework so they wrote their own
| framework that is most likely shittier and more impossible to
| debug. Also, now they have to train all their new engineers on
| their own home-grown shitty/impossible-to-debug framework.
| DLA wrote:
| How is a 45 line python script that runs templates hard to
| debug? You're calling something "most likely" shitty, but
| have you seen it? Used it? I find this post and the method
| they use to produce their site utterly refreshing. What is
| "shitty" is many dozens (being kind) of JS libraries, complex
| configurations, and learning multiple tools to produce the
| same result!
| balder1991 wrote:
| Also many frameworks get over bloated and complicated
| because they're trying to solve problems for everybody and
| edge cases that might not interest you. A lot of times you
| can get some ideas from it and build something simpler.
| rcme wrote:
| There's a certain irony in calling this approach "hard to
| debug" vs. a library like React with its hooks
| implementation.
| tacker2000 wrote:
| Jinja is a templating framework. You can use it with ansible
| for example, to replace config values or secrets in a
| configuration file for different servers, etc
| fullstackchris wrote:
| after some research i now know that, but there was no clear
| link or description of what the heck was going on
| chefandy wrote:
| Well, it is a decade-and-a-half old and fairly common in
| the Python web world. I don't think there's any shame in
| not knowing what it is if you haven't encountered it, but I
| also don't think there's any shame in assuming a developer
| audience reading about web development would at least know
| how to figure out what it is.
| tetromino_ wrote:
| > 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 what Jinja
|
| The authors expect that their readers know how to google (or
| ask chatgpt) for simple coding terminology.
| caboteria wrote:
| > Meet Jinja templates, which make our life much easier. Jinja
| allows us to use loops, include files (navigation bar, footer,
| etc.) and much more.
|
| > no description of what Jinja - I for one don't know what
| either of those are, sorry if i'm an "ignorant normie"
|
| The first mention of Jinja had both a description of what it
| does for them, and a link that you could have clicked to get
| more information about it. Guess it's easier to post snarky
| comments on HN.
| calvinmorrison wrote:
| 99% of developers are out her building with php, .net or Java
| and its fine
| teej wrote:
| In 2005 maybe
| chefandy wrote:
| Perhaps not 99%, and perhaps not _new_ sites, but I 'll bet
| those three environments combined run more than 80% of
| sites right now.
| ad404b8a372f2b9 wrote:
| It is simple, both templating and hot-reloading are fairly
| common programing concepts, neither are uncommon or esoteric
| when it comes to web development.
|
| The specific implementation is irrelevant, you could use any
| other piece of software to achieve it.
| shtolcers wrote:
| Remove "fullstack" from your nickname! You have to earn it.
| collaborative wrote:
| I recently built AI Search with 0 frameworks and dependencies
| (please don't hate because of the word AI)
|
| For comparison, similar sites are a lot heavier (not criticizing
| anyone here)
|
| phind.com = 1.09MB
|
| you.com = 1.3MB
|
| aisearch.vip = 0.035MB
|
| I still find the ~1MB of other sites to be ok, but 35kB is the
| smallest I've ever made a full SPA and that's simply because
| every single letter in the code is specifically made for this one
| and only site (and uses vanilla everything)
| Kuinox wrote:
| FYI I went on your site and it took 5 full seconds to load.
| collaborative wrote:
| Thanks for letting me know. Oh yeah, I can see in the logs
| that someone was summarizing a 100-page PDF. It slowed things
| down for a few seconds. All should be well now (I need to
| tweak the PDF function to prevent this, it seems to cause
| issues)
| [deleted]
| zh3 wrote:
| It may not have a zillion libraries, but surprised that a site
| trying to be zippy uses low-contrast text (obviously, I am not a
| fan of the "increases engagement time" school of thought).
| lelanthran wrote:
| 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.
| zh3 wrote:
| Could be but most sites render fine. Pretty stock setup, Dell
| monitors on Nvidia graphics, no tweaking.
| CharlesW wrote:
| It passes minimum (AA) contrast recommendations but fails
| enhanced (AAA) contrast recommendations. I also wouldn't settle
| for it on a site I'm responsible for.
| iskander wrote:
| It's pretty readable at their large font size
| Aachen wrote:
| Agreed. I feel like I'm always the first in my company to
| complain when someone proposes a too-thin or too-light font
| style or color, but this read fine for me. I'd move away from
| monospace if anything, but I take that as a stylistic choice
| they made even if it hurts readability a little (not like
| thin gray that's used without even noticing: the dev already
| knows what's written there, or doesn't care if it's lorem
| ipsum, and checks the font only for _form_ instead of also
| for _function_ ).
| zh3 wrote:
| Is that a condemnation by faint praise? :)
|
| Could be because I'm reading on desktop and it works better
| on mobile.
| iskander wrote:
| I'm on a laptop and it looks totally fine to me.
| fullstackchris wrote:
| "don't build sites a complex way with FRAMEWORKS or LIBRARIES!"
|
| "instead, here's our way with a DIFFERENT set of frameworks and
| libraries!"
|
| ...you're kidding me right?
| iamdamian wrote:
| I adopted this mentality a few years ago and it's served me very
| well.
|
| Pro tip to anyone looking to do the same without losing the
| benefits of SquareSpace's WYSIWYG editor: try out Bootstrap
| Studio [0], which gives you a visual editor but also full control
| over the CSS and the ability to create reusable components. The
| licensing is also user-friendly (doesn't require a subscription).
|
| [0]: http://bootstrapstudio.io
| akudha wrote:
| Bootstrap Studio looks good. Is there anything like that for
| Tailwind?
| gwern wrote:
| This seems to fall into the 'simplistic, not simple' school of
| thought. You can have a relatively simple website if it doesn't
| _do_ anything and if it cuts corners.
|
| Take your dark mode, which is just about the only nontrivial
| feature I see on this page. (One could also criticize the low
| contrast of the appearance and other problems, but that's less
| relevant to the simplicity thesis you're claiming.)
|
| First, your dark mode is implemented wrong in the lazy corner-
| cutting way of doing JS post-load instead of the correct way of
| CSS body classes; so you get the 'flash of white' unavoidably on
| every page load - just what every dark mode user with their phone
| to their face at midnight wants to see! (If your solution doesn't
| work, it doesn't matter if it's 'simple' or 'complex'.)
|
| Second, you implement what is like 3 lines of JS (setting
| localstorage & dark-mode) by pulling in what looks like an entire
| interpreter for a custom 'hyperscript' https://hyperscript.org/
| language which seems to mostly just offer some sugar over JS;
| now, maybe you use 'hyperscript' elsewhere for reasonable
| purposes, but surely pulling in a 96kb (uncached) library solely
| to run
|
| def saveMode() if first classList.value of <html/> contains
| 'dark' set localStorage.kkColorMode to 'dark' else set
| localStorage.kkColorMode to 'light' end end init
| if localStorage.kkColorMode is empty set localStorage.kkColorMode
| to 'light' end if localStorage.kkColorMode is 'dark' add .dark to
| <html/> end
|
| is a bit against the spirit of this "simplicity is the ultimate
| perfection" enterprise...? Personally, I feel like I see some
| easy perfection to add right there. (And is this hyperscript
| stuff also why the HTML doesn't validate?)
|
| Third, this binary toggle is a bad way to implement dark mode
| because it ignores system/browser settings, so if a user has,
| say, enabled dark-mode on their smartphone OS, they still get
| served light-mode until they manually enable it; note that some
| systems change it based on local time/ambient light too, which is
| quite nice... if websites & apps respect it instead of overriding
| it. And since localstorage expires and users switch devices, they
| would have to do so repeatedly. Is this a good thing? A user
| probably would disagree with the developer who is touting how
| 'simple' the dark-mode implementation is because they cut corners
| in handling system settings/auto-dark-mode...
| nickelpro wrote:
| > 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
| localstorage.
|
| So what to do? My preferred choice is having an inline style
| element of:
|
| body {visibility: hidden; opacity: 0;}
|
| This will maintain the previous page until DOMContentLoaded, at
| which point you can query prefers-color-element and
| localstorage, set the body class correctly, and let the page
| paint.
| djbusby wrote:
| Prometheus Modern UI has a pretty good system/dark/light
| toggle - and picks the system one first.
| jeroenhd wrote:
| You can also swap out the CSS file for one that explicitly
| sets/unsets light/dark mode. This allows for a website that
| works in any browser even if your Javascript breaks or
| doesn't load.
|
| Or you could use cookies. No need to mess with localStorage.
| Just set a cookie "prefersDarkMode" to true or false and have
| the backend send the right file. No need for an interactive
| backend, nginx can handle serving files based on cookie
| contents. No need for cookie popups/walls either.
| nickelpro wrote:
| > This allows for a website that works in any browser even
| if your Javascript breaks or doesn't load.
|
| I just use <noscript> for this. If you don't have
| Javascript you're just going to get whatever your prefers-
| color-scheme is set to. Users without JS don't expect
| things like a dark-mode toggle to work anyway.
| onion2k wrote:
| _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. Absolutely no clientside JS is needed
| anywhere, no FOUC issues, and it's trivially simple to code
| because it's literally just a redirect in the server config
| based on a cookie value.
|
| I really should spend the time to actually build it, but
| Diablo 4 came along and I got sidetracked.
| gwern wrote:
| I don't know whether to be fascinated or horrified by this
| proposal, but I admire the novelty - I can definitely say
| that in all the dark-mode proposals/implementations I've
| looked at over the years we've been fiddling with ours,
| I've never seen _that_ suggested.
| gwern wrote:
| 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 design: we settled on a tri-toggle to use the
| media-query but allow users to override and hardwire light
| /dark mode, and that seems to work most naturally. But there
| may be other contexts where something else would be better.
|
| Indeed, for toggles, you could even try not having a toggle
| at all and relying on the system setting through the media-
| query. (However, as appealing as this is - why have separate
| controls when the user _already_ has a global control and can
| enable /disable it? - we found this confused & angered users:
| https://gwern.net/design-graveyard#automatic-dark-mode So,
| gotta have a toggle. At least for now; maybe as dark-mode
| becomes universal, at some point users will become educated
| enough that you can afford to use only the system setting?)
| theallan wrote:
| Doesn't that make the page completely unreadable for those
| few who have Javascript disabled though?
| nickelpro wrote:
| You add a simple <noscript> tag to the top of the body that
| does the right thing for them
| sneak wrote:
| Yes, this breaks the fundamental web concept of graceful
| degradation.
| INTPenis wrote:
| For information, static sites are unchallenged imho.
|
| Even for a certain level of collaboration, I think one could get
| away with using static sites. I haven't tried this in practice
| but imagine having a git-based CI/CD flow for a static site,
| where non-technical end users could use the web-based Markdown
| editors of github.com or gitlab.com to make small changes, save
| and push via a pull request.
|
| Each merge is of course approved by a more technical user.
|
| I would love to hear if anyone has tried this model.
| spondylosaurus wrote:
| I'm a technical writer and this is how I'm running docs at my
| company. You'd be shocked at how easy it was to get one of our
| content marketers comfortable enough to start opening pull
| requests for an internal-only docs site. (It helped that I
| assured them that, thanks to how branches and approval
| workflows function, absolutely no changes they made could ever
| wreck the live site.)
| bonzini wrote:
| I am trying it now for some volunteers that I am building a web
| site for. Building the web site and responsive theme almost
| from scratch took about 10 hours of work, and further changes
| will only be the addition of news items ("posts" in Jekyll
| slang).
|
| The theme is HTML and CSS plus about 20 lines of jQuery
| JavaScript to handle simple toggle effects such as the
| hamburger menu on mobile. Probably could be done without jQuery
| but I am not a web developer and that's what I know. Posts are
| written in markdown and the idea is that the others will either
| send me an email or later will open a merge request on GitLab.
| wonger_ wrote:
| I've thought of something similar! A git-based flow for a
| friend's static portfolio site, where he can make text edits
| and upload images, and the site builds that content with HTML
| templates.
|
| Not sure how the GitHub markdown editor would feel for the
| user. It might be really great, even for uploading images.
|
| I was imagining a static admin page, WYSIWYG, that makes git
| pushes on submit. These were the headless CMSs that seem to be
| able to accomplish that:
|
| https://www.siteleaf.com/
|
| https://decapcms.org/
|
| And not git based, but similar idea of static content editing:
| https://editable.website/
|
| And this is what the admin edit page usually looks like:
| https://quick-edit-demo.vercel.app/admin/index.html#/collect...
|
| But it was taking a bit of work to configure.
| INTPenis wrote:
| Github.com and Gitlab.com have after all put a lot of effort
| into their WYSIWYG editors, but they're not very useful for
| image uploads.
|
| That part should probably be handled separately just to avoid
| slowing down the git repo with huge binary files. For example
| upload an image to S3, note the path, enter it into a
| markdown syntax image url.
|
| There are many ways to skin that cat, depending on the
| technical skill level of your client. They could even e-mail
| the images to a script, or message them to a bot on an IM
| service, that then returns the URL for them to use in
| Markdown.
| plainOldText wrote:
| I was reading just today about this project using
| "almost 14,000 lines of raw PHP mixed with inline HTML, CSS in
| <style> and raw JS in <script> tags"
|
| and making $60,000/month. [1] Talk about non-pretentious stacks.
|
| [1] https://twitter.com/levelsio/status/1675829733668319233
| z3t4 wrote:
| 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.
| oneeyedpigeon wrote:
| 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.
| roblh wrote:
| 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 a dozen different things in the last few
| months, ranging from Astro to Lit to NextJs to using the built in
| golang templating system, pug, eleventy, and more I'm forgetting.
| So far this is my favourite in just about every way.
| zztop44 wrote:
| I agree. Yes, it's a "framework" but it easily outputs static
| sites that work fine without JS enabled, you don't need to know
| any Svelte to use it (but it's there if you want it), Tailwind
| works out of the box, and deploying it to eg Netlify is dead
| simple (much easier than FTP).
|
| If you ask me, it's the best static site builder right now, and
| a lot simpler than what's described in this article.
| andersrs wrote:
| SvelteKit is amazing. I disagree about Skeleton though.
| Skeleton makes you feel productive and safe at first but it has
| a lot of foot-guns. It leads you down a happy path until you
| don't like something and then it's difficult to customize.
| You're much better off using DaisyUI or something headless like
| MeltUI when it's ready.
|
| Take a look at Skeleton's own site
| https://www.skeleton.dev/docs/get-started Press page down - no
| scrolling happens. Hover your mouse over the navbar - no
| scrolling. Print the page - the content is cropped to only
| what's shown on the screen. I've raised this with them and it
| hasn't been a huge priority yet tones of sites are using this
| pattern from the <AppShell> component. Skeleton thinks you can
| just take your dark theme, invert the colours and end up with a
| decent looking light theme which just isn't the case.
|
| With DaisyUI you get a more mature/performant/popular framework
| that takes accessibility seriously. It's amazing what they can
| achieve with just CSS animations and no JS. It solves the hard
| part (HTML, CSS) and let's you write the easy part (Svelte).
| You're also less locked into Svelte - you can much easily pull
| your DaisyUI html into a different framework.
| Sammi wrote:
| My wife does UX. I showed her Skeleton and she launched into
| listing all their UX mistakes on their website...
| roblh wrote:
| This is good to know! I'll try out DaisyUI next! My favourite
| part about skeleton has been having mostly functional, pre-
| existing component classes. The svelte material ui (smui?)
| library left a lot to be desired there, and I like how easy
| it is the modify the skeleton ones, since they aren't a
| horrible jumbled mess of tags like all of the Vuetify
| components are below the surface.
|
| My least favourite part of tailwind is needing a stock button
| and having to add 80 characters worth of class stuff just to
| get a generic looking button, which is what skeleton solves
| for me.
| tornato7 wrote:
| This is a great recommendation. I'm interested in hearing more
| of your experiences trying different web frameworks. Did you
| try Flutter as well?
| roblh wrote:
| I haven't tried flutter! It looks interesting, but I don't
| have much interest in learning Dart so it's pretty low on the
| list of things to try, for me. I have experience with
| Capacitor and Vue, which kind of accomplishes the same cross
| platform thing, although I wouldn't really recommend it.
|
| Another one I tried was Hugo, but I also didn't bond with it.
| I found Go makes it so tough to have your templates be
| properly reusable if you stick to only the standard library
| template engine.
| varispeed wrote:
| I miss these simple days.
|
| Now to make a website, first start to design a cluster, what
| services it will run, the CICD pipeline and after a week of
| battle forget what was the site you wanted to make.
| [deleted]
| ploum wrote:
| Sounds already too complex for me.
|
| I wrote my post as Gemtext (the Gemini markdown) and wrote a
| python script that convert it to HTML and generate an index page.
|
| Also, I put the CSS in each page because I've 42 lines of CSS and
| I did the math to show that having 42 more lines in each file
| would never cost more than having a second http request.
|
| Honestly, it was a lot simpler than expected, without using any
| python library or any template. The hardest part was generating
| the email to send to the list. I spent month analysing different
| frameworks, different static site generators. I spent week trying
| to find a good CSS.
|
| According to the git history, it took me 2 weeks of hacking to
| get it done including importing 18 years of Wordpress history.
| And without having to learn anything because it was straight
| python. And the best of all is that I can easily change/correct
| if I've a bug. It's my code.
|
| We, computer scientists, forgot completely that we could simply
| code adhoc solutions instead of trying to reuse everything. We
| take more time to learn and adapt than to do.
|
| https://git.sr.ht/~lioploum/ploum.net for the code
|
| (the site itself is https://ploum.net)
| idlewords wrote:
| Email? Python script? Git?? Okay, Rube Goldberg.
|
| I serve my site from a 6502 processor I carved out of balsa
| wood back in 2003 and epoxied to an ethernet cable. When I want
| to make changes, I heat the EPROM with a hair dryer until the
| right bits flip. No templating, no code, no bloat.
| ad404b8a372f2b9 wrote:
| Gotta say, that's a great blog. I opened it only to check the
| design and ended up reading 4 articles back to back.
|
| It feels nostalgic scrolling down and back through our
| technological history.
| hcarvalhoalves wrote:
| You can create a pretty decent static website with templating,
| sitemap, etc. just with Emacs' built-in Org Mode. Here's my
| minimal setup:
|
| https://github.com/hcarvalhoalves/org-mode-site-template
| keyle wrote:
| That this is at the top of hn boggles my mind. It's a new
| generation I guess.
| [deleted]
| mindwork wrote:
| https://10kbclub.com/
|
| https://250kb.club/
|
| https://1mb.club/
___________________________________________________________________
(page generated 2023-07-04 23:00 UTC)