Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to build a website without frameworks and tons of libraries

kodingkitty.com

Post reply on HN
Print view View original

61–70 of 270 posts

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

#61

Post by jamiedumont »

grilledchickenw wrote: post #51
jamiedumont wrote: post #42

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 a…

I've been meaning to do this and move away from Smugmug. Would you be okay to share your portfolio and/or source?

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...

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

#62

Post by onion2k »

nickelpro wrote: post #53
gwern wrote: post #10

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 mo…

> 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. 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.

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

#63

Post by INTPenis »

wonger_ wrote: post #48
INTPenis wrote: post #12

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 cours…

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 th…

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.

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

#65

Post by jamiedumont »

projektfu wrote: post #59
jamiedumont wrote: post #42

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 a…

You could use server-side includes to get the basic prev-next navigation and consistent menus, headers and footers.

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.

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

#66

Post by iamdamian »

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

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

#68

Post by vereis »

Animats wrote: post #47

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.

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.

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

#69

Post by theallan »

nickelpro wrote: post #53
gwern wrote: post #10

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 mo…

> 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…

Doesn't that make the page completely unreadable for those few who have Javascript disabled though?

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

#70

Post by zh3 »

lelanthran wrote: post #46
zh3 wrote: post #2

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).

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.
Post reply on HN