How is code syntax highlighting achieved in this context ?
Browser -> show source -> inspect element You then see that it uses highlight.js
Thank you.
Rewriting my website in plain HTML and CSS
141–150 of 218 posts
Re: Rewriting my website in plain HTML and CSS
#142Did he reinvent a static-site generator? Markdown, pandoc, makefile... Sounds like a job for hugo/eleventy/jekyll/whatever.
Yeah, obviously this is literally what something like Jekyll or Hugo does. It's just (at least to me) a simpler version of that where you can fully see what's happening. Also I didn't want all the theme-ing overhead that comes with those - just something I could inject into my existing site.
>Also I didn't want all the theme-ing overhead that comes with those - just something I could inject into my existing site.
I didn't like how complex that stuff is with Nikola - I didn't have an obvious entry point for making the kinds of customizations I really wanted, and yet there was still so much to look at in order to understand the system. But at the same time I really didn't want to spend hours re-learning CSS more or less from scratch, when I could actually use the examples already in the existing themes.
I did something really awful: instead of trying to make yet another layer of theme "extension", I copied everything locally and have been condensing it as I go.
This had the benefit that I didn't have to decide on a bunch of CSS classes up front in order to have anything look passable. There may be tons of unused stuff, but I'm cleaning that up as I implement my own things - and bit by bit, I get something smaller and more comprehensible that fits my mental models. This conversion process might not be any faster, but I'm certainly enjoying myself more.
At some point in the future I'm considering doing a simple templating engine and converting these templates (originally Mako) to it. It just irritates me that I still have to deal with close tags - both in HTML and in template directives - when I'm doing everything in Python. I have a vague memory of a 2010-era JavaScript templating system - I think it was called Express or something like that? - which used indent-based syntax without closing tags. So I'm inspired by my recollection of that.
Re: Rewriting my website in plain HTML and CSS
#143I started a portfolio website with Netlify (iirc), then I moved to Vue + Gridsome (on GitHub pages), then Next.js with Tailwind CSS, and was about to move to Vite.js over winter break. That's 4 stacks over the course of 5-6 years. Not worth it. Decided to do the sensible thing and use GitHub's README functionality. I prefer this approach and wish more folks in the tech community adopted it: https://github.com/Subopti…
This is an interesting idea! Honestly I didn't even know Github had a per-user readme until you mentioned it
IMO there's quite a surprising amount of stuff you can do on GitHub that's highly undiscoverable. You only think of it when you see someone else on the site doing it, and then you don't necessarily know what it's called so you don't know how to research it.
Re: Rewriting my website in plain HTML and CSS
#144I'm using PHP includes and don't think I have any JS besides Matomo tracking. I just read that I can use for those includes now, so I can drop another layer of complexity.
The only thing I have is a blog post navigator, that shows you all blog posts besides the current one.
Re: Rewriting my website in plain HTML and CSS
#145I started a portfolio website with Netlify (iirc), then I moved to Vue + Gridsome (on GitHub pages), then Next.js with Tailwind CSS, and was about to move to Vite.js over winter break. That's 4 stacks over the course of 5-6 years. Not worth it. Decided to do the sensible thing and use GitHub's README functionality. I prefer this approach and wish more folks in the tech community adopted it: https://github.com/Subopti…
GitHub was just down the other day. Why would you want your personal website/portfolio to be tied to GitHub? Crazy "modern web dev" stacks are likely overkill, but that's not an argument against self-hosting.
How is it "tied"? You still have a local repo that you could deploy somewhere else.
Re: Rewriting my website in plain HTML and CSS
#146> My project tree got a lot simpler and the only Javascript on the site now is to highlight code.
You can do away with the JS with something like Pandoc Highlight Filter: https://gitlab.com/danbarry16/pandoc-highlight-filter
Just take the Python file, make it executable and add it to the filter arguments. It's very basic, but all done during build time. It was originally started to build out HTML documentation for a system that was very particular about what types of files could be used.
It can also do other stuff like build your site with Python blocks that are run: https://gitlab.com/danbarry16/pandoc-highlight-filter/-/blob...
Re: Rewriting my website in plain HTML and CSS
#147When I used to do interviews to frontend developers I often had them write a form with validation...in plain HTML and a sprinkle of js for some of the final validation touches. Was kinda surprised at how many senior leetcode blackbelts didn't know HTML had built in validation :) JS was required for some of the more complex validation logic and mounting few dom nodes (and again, surprisingly, many didn't know how to c…
>Was kinda surprised at how many senior leetcode blackbelts didn't know HTML had built in validation :)
Judging by the websites I've had to deal with in the last few years, a lot of web devs don't know that HTML has built in form submission. Or that it's possible to, say, display images without JavaScript (looking squarely at you, Imgur).
Re: Rewriting my website in plain HTML and CSS
#148A few years ago, me and a coworker redid our company's website in straight-up HTML, JS, and CSS without a framework. It was quite refreshing but it certainly took longer to complete it all. It had 3D models and some scroll-based masking on videos and such.
It has sadly been replaced by a website made in Framer due to time constraints, but the old version is on the Wayback Machine:
https://web.archive.org/web/20211008131609/https://tonari.no...
Unfortunately it kinda turned into a flickery mess, not sure if that's an old bug of ours or something failing to load properly from the archive. Oh well!
Re: Rewriting my website in plain HTML and CSS
#149In 1995, I started with a personal website based on HTML. Since then, I have added a little bit of CSS to the home page, but all the other files are in plain HTML. For that reason it looks very old school, but that is okay with me.
I have been adding some JavaScript through the years. Some for generating content, some for graphics and animations. I also have written a C program for checking the HTML and all the internal links and the use of tags. The program places all updated files into a folder ready for upload with FTP.
To edit the HTML, I use an editor (based on Crystal Edit) that also can navigate HTML files: when pressing F5 on a link, it opens the file in the editor (or in the default browser when it is an external link), and if there a tag in the link, positions the cursor at that line.
See for more details: https://www.iwriteiam.nl/SiteMain.html
Re: Rewriting my website in plain HTML and CSS
#150I'm surprised to not see Astro mentioned, its whole schtick is providing very similar DX to frameworks like SvelteKit except in a way that's geared towards generating plain HTML/CSS with zero JS by default. You get things like components with scoped styles but they are compiled down to nothing. It's really a breath of fresh air.
Yeah I really like Astro too, I often just start with the minimal template [1] that is just a couple of files. I used to do many experiments with custom SSG some time ago but since Astro came out I can't change back anymore.
If you don't want js on the frontend you can just use it as a nice html templating engine. It also renders markdown automatically for you as it recognizes different formats by the file extension.
[1]: https://github.com/withastro/astro/tree/main/examples/minima...