1. 60

Someone recently commented that my homepage was one of the worst sites they have ever seen. I was suprised by this, because I actually like it. That got me thinking, that I might be missing things other people notice… But that’s not what this thread is about!

So that’s why I wanted to suggest a threat to help people find these kinds of annoyances in their homepages. The idea would be that if you have a personal web page, you can post a top-level comment here asking for comments and maybe explaining what your ideas were behind this, and others can then reply to this comment on what they like or think that could be improved. Ideally, they should also specify what platform/device/browser they are using.

I hope this can be a productive thread to improve the look and feel, but also the accesibility and behaviour of our web pages.

1.

2. 32

My site is at https://bernsteinbear.com. I get very polarized responses :)

1. 12

I think your site’s chill and classic!

1. 2

Thanks ^_^

2. 6

I love this! Its theme is very similar to the Oil shell site. Super clean.

1. 3

There’s a little comment in the CSS that says that the navbar was heavily “inspired” by oilshell :)

2. 3

Linux/Desktop (1920x1080, 16:9)/Chromium with uBlock

I really like this one. After reading a few of the “Compiling a Lisp” articles, I also copied a few design cues to my personal site. I’m sorry I cannot say more, it’s just easy to read and easy to navigate. If I had to try to say something it would be that the entire site is a bit too narrow, and that it might be better to use more semantic HTML5 tags instead of custom div classes?

1. 1

Is your current website the one everyone is complaining about? I think it’s great.

1. 2

Everybody is exaggerated, it was just one comment that caught my attention. But other than that, I don’t think it’s to surprising considering it’s inspiration ^^.

2. 1

Hm, interesting. Do you have any reading on this that you recommend? My HTML knowledge is at least 10, if not more, years out of date.

1. 2

I’m not expert either, I just check if I can use a semantic tag, when applicable. AFAIK the main advantage is that web readers /scrapers can properly parse what’s the site and what’s is just the header/footer (if you enable lobste.rs “article preview” feature, you’ll notice the difference).

1. 1

Oh, neat – thank you. I have some open graph data and some other metadata, but this might help.

3. 3

Your site has no bells or whistles. It is a site. It has text. The text is the main focus. There is no fluff. It loads instantly. It is glorious.

1. 1

2. 2

I like the nav bar, the contrast, and the no-frills aesthetic, and the style choice of serif font works.

Despite broadly agreeing with high-contrast text, I think the background could be a touch lighter (maybe just going from lobste.rs to your site is hard, especially since I’m in a light environment right now).

Mostly, though, some breathing room would really help, especially with the bullet points; the line spacing between one single-line bullet point to the next is identical to the line-spacing between lines in a single multi-line bullet point. Everything just blurs together and only a small dot on the side helps me distinguish between bullets.

Increasing the font size could also be a big help for people with impaired vision.

1. 2

I added some list item spacing. Thanks for the tip off.

I also reduced the text contrast a little bit with some not-quite-black and not-quite-white.

1. 2

Nice one. The bullet points are a lot easier to read now.

The lightening of the background does help, too, but I’m also in a dark environment now (albeit with the same bright screen).

I wasn’t even saying about darkening the text, but the muting there does help as well. I think overall you’ve struck a good balance between high contrast (light clashing with dark) and low contrast (words blending into the background).

2. 2

I love it! Looks great on both my desktop and phone, and it isn’t weighed down by big images or fonts.

1. 1

Oh, that is good to hear. I do not regularly check up on how it looks on a phone, despite half my visitors using phones.

2. 2

For me it’s missing only one thing, which is to support dark mode via a CSS media query. I’d love to see just how brief a dark mode implementation can be, and your site is the perfect test subject.

1. 2

I brought back dark mode, new and improved. Can you let me know what you think?

Re: brevity: the longest part is the syntax highlighting.

1. 2

Functionally it looks nice and readable, and should be pleasant in a dark room. Warm fireplace colors were a good choice for syntax.

You could stop there; it’s a nice upgrade! If you want more critique:

If any of the colors are off, it’s the links in dark mode. In light mode visited links stand out a little less than unvisited, which is desirable. In dark mode, the unvisited links are diminished against black and the visited stand out. I might try brightening the blue and dimming the purple a bit.

Finally, check the link colors on the same dark screen as the syntax colors. The syntax colors give a cozy character to the site, but the link colors establish a different kind of environment, such that when you first reach a syntax block, the warmth is a surprise. I think the link colors would need more saturation to fit in.

1. 1

Thanks for the in depth reply! When I next find the energy to CSS I’ll take a look.

2. 1

Someone made one but there was something slightly wrong about pre tags in headers that weren’t legible (?), so I reverted it. It was pretty simple so if you’re interested you’re welcome to revive that patch.

3. 2

Academic style - I like it. Loads in 106ms from Frankfurt which is pretty nice :)

1. 1

Grüße aus den Staaten!

1. 2

I don’t really live in Germany (or understand german for that matter), but when I run https://tools.pingdom.com/ , I use Frankfurt since it has the best ping to Norway :)

1. 1

Oh, lol. That’s “greetings from the US”

1. 2

Greetings from Norway :D Or rather; Beste hilsener fra Norge :)

2. 2

Nothing wrong with your site. It is a perfect example of what the web was originally created for: Sharing information.

1. 2

I really like it. Text-heavy instead of the modern white peace overload with big images that everything leans towards now.

1. 1

Kinda like your website, eh? And you are a cyclist too! :D

2. 2

Clean, elegant styling, simple design, focus on the content (text). Clear links to different parts and an rss feed. Couldn’t make me happier.

1. 1

2. 2

The way you separated the series on the /blog is something I want to steal.

1. 2

Oh man the implementation is such a hack. If you use Jekyll, please don’t look! :P

1. 2

I am in Python land, so I could not get it even if I looked. :)

1. 1

What do you use to generate your blog? I am considering moving off Jekyll.

1. 2

I use Lektor. It is based on python, so slower to generate the pages locally, but my reasons are listed in this post - why I chose Lektor. See the Why Lektor section.

2. 2
1. 2

The bulleted list under “I like making things” is a little crowded, but otherwise, I love it!

1. 2

And to think I just removed some things :P Do you mean the length? Or the density of links? Or…?

1. 2

I should have mentioned that I’m on mobile. The density of the links is part of it. I think inserting an empty line between list entries would make a world of difference. You could take it further by increasing font size and line spacing. The bullets also make it look like the text is being physically squished into the right side of the screen so it may help to replace them with faux bullets (e.g. asterisks)?

I don’t know, this feels like such a small point, and it’s all about highly personal preferences. Your site is great!

2. 2

I really like this one; it’s clean and simple, and it works great with me.

1. 1

3. 26

My site’s at https://jacky.wtf - definitely curious.

1. 7

Linux/Desktop (1920x1080, 16:9)/Chromium with uBlock

When I first open the site, I find it a bit hard to orient myself. Parts of the site fill the entire screen (“I stand in solidarity with …”), others are centerd (the header, the second and third paragraph), while the bottom is right-aligned. And the footer is a bit hard to identify. The varying font-sizes is hard to follow.

Also, at least on my screen, the picture of you (I assume) is cut in the middle, but that’s unavoidable.

The Blog and Posts pages are easer to grasp, but appear a bit too narrow on my screen. Maybe just using 1/4-1/5 of the horizontal screen space.

1. 21

I dislike political stuff so I closed the tab right after the font loaded, which took about five seconds (4g, Netherlands).

1. 37

Since you brought it up, this seems appropriate.

1. 3

In the context of user-generated online content like comments sections, forums, or social media, “politics” is a euphemism for unproductive arguments about controversial subjects. In communities dedicated to a specific topic or purpose, political discussion tends to distract, disrupt, and divide the community. Which is why any healthy online community typically has rules against off-topic content.

I completely understand the desire to get one’s own beliefs across to a larger audience but no one has ever been swayed by a flame war, which is what 99% of all political discussions devolve into. Politics are usually a waste of everyone’s time–the participants, the readers, and the community moderators.

I would posit that those who seem to be the most passionate about their chosen political cause online are being the least effective at making whatever change they wish to see in society. Whatever time you spend proselytizing your beliefs online is time not being spent taking real-world action. (And no, “spreading awareness” is not taking real-world action. And neither does retweeting, while we’re at it.) This may include volunteering for (or starting) a non-profit, donating your money to organizations supporting your cause, writing a book with good science and well-reasoned points, or speaking directly with political leaders who have the power to change whatever it is you want to change.

It is fine to have strong personal beliefs. But habitually arguing against others is very bad for mental health in a variety of ways. The more time you spend espousing and defending your personal views, the less receptive you become to any potential evidence that your beliefs may not have as much merit as you thought. You become less in tune to the subtleties of reality–nearly all social problems are shades of gray, we only see them in black and white because it feels cleaner that way, even though it creates a useless mental model of the world. Even worse, you start to categorize others around you as either with you or against you and your relationships with friends and family who may (or even may not) agree with your beliefs will suffer. Ask me how I know.

Source: I have been a member of varied and numerous Internet communities since 1996.

1. 2

Nah.

1. 1

That’s his site, it’s not like he’s got it as a kind of forum signature below each of his posts here. You’re completely overblowing the “aggressiveness” (for lack of a better word) with which Jacky presents his opinions, and at the same time incite a flamewar yourself with your “there’s always two sides to the story” like seeing everything in one color (gray) is any saner of a mental model than seeing it in two colors (black/white). And if you feel like correcting my words from “gray” to “shades of gray” reconsider whether it really does make any difference at all for the things you do, and also if you’re perhaps a bit too proud of your analysis paralysis. Not that I’d disagree that arguing on the internet is a waste of time, but you and me end up doing it anyway regardless of our ideological differences, and your argument goes way beyond that too.

2. 3

I can think of plenty of valid reasons besides this to avoid politics, from it being a trigger to just unpleasant for other reasons, and assuming this of the commenter is just uncharitable.

1. 15

just unpleasant

That’s pretty much the same reason as called out by the tweet, it’s “just” unpleasant and not something that affects your life.

assuming this of the commenter is just uncharitable

It’s fine to not get involved in things (because it eats away at your attention span or distracts you from the good you could actually do over doomscrolling, something about mental/personal health, or a million other reasons) but what I usually found missing in people who invoke this “I don’t try to get involved” phrase is earnest reflection over the why (Is it protection or just laziness?) and the consequences of them not getting involved (what if the majority of people try to stay away from politics?)

1. 12

The first blog-post of the person is “I enforced the AGPL on my code, here’s how it went”. So it’s more of a “I don’t care about your politics, but F/OSS politics is completely fine!”. I think it’s a completely charitable interpretation of the comment.

3. 4

I like the simplicity of the design.

I like the call to action items at the bottom.

In mobile Firefox Android there is a left/right scroll which seems unintentional.

1. 2

I like yours a lot. I think on mobile the blog posts page looks a little bit funny because of relative font sizing though.

1. 2

Yeah, I definitely need to fix that - thank you!

2. 2

I think your main page would benefit from some margins around the center. Activism seems to be a main theme (which is fine, but probably not what tech enthusiasts and prospective employers are interested in – it might be a problem for some but you probably realized this and decided that if it is a problem you probably don’t want them on your site anyway). The ‘posts’ link doesn’t work for me, it links to https://v2.jacky.wtf/stream. High contrast is a bit much.

1. 1

I’m curious, do you usually/often/at all have browsers open in fullscreen?

I often have and while lobste.rs has too much whitespace on the sides on this 27”, it’s fine. But when I open your website, it’s very much flowing across the whole screen - and when the fold goes from black to white background.. that’s a little stark. When I 50/50 split (which I often do, it’s completely fine)

1. 1

I actually never put any Web browser window explicitly in fullscreen (a productivity hack for me). I can def make that color change!

1. 2

I feel it depends a little on which machine I am on, interestingly - but I often have JIRA open in fullscreen and I happened to stumble upon this thread in my lunch break, so the browser was in work mode.

I don’t think it’s a huge thing because most people probably don’t run a website fullscreen on 2560x - but I sometimes do…

2. 1

It’s a bit weird on mobile. Generally looks pretty nice though.

Bit of a style clash between the top half of the page and the bottom half though.

P.S. I just gotta say I appreciate the banner at the top. But it seemed a little odd it required me to enable JS for it to show up.

1. 2

Yeah, I have to switch it up for mobile.

2. 1

The blue on black links at the top (“Streaming Schedule – Blog – Posts – Library”) are rather hard to read for me; actually I missed them first time ‘round. Personally I’d make them a different colour and/or larger.

1. 1

I have useless horizontal screen on safari/iOS 13.

1. 1

s/screen/scroll

2. 1

Scroll is a bit broken on iOS/Safari but a lot of websites are also affected by this minor issue. Users can deal with it.

(In fact the issue comes from the PGP key in the footer: it doesn’t break on narrow displays)

1. 1

I swear I saw your site posted somewhere else within the last week.

1. 1

That’s wild, lol.

2. 1

Too many style shifts?

I opened your link and saw really big font. Then I clicked on “blog” which led to small font and grey background. Then pressed on one of the titles and saw a “medium” style article.

1. 1

I think that it might be more helpful if you explain to visitors who you are first and the things you support second. It will help support your political views and endorsements that way round better too I think.

2. 18

Here’s the aforementioned “worst website ever”: https://ruzkuku.com/

I try to keep the styling minimal, and generate the site using pandoc and a few scripts (was thinking of re-writing it in Scheme some day). My explicit intention is to strike a balance between readability on different platforms (anything from mobile, to desktop over to obsure web browsers), while keeping the code simple enough and respecting web standards. I have experimented with increasing the line-height and changing the default text color, but I usually tend to just let the users browser decide what’s best.

1. 12

I expect they decided it was the “worst website ever” because it didn’t have anything horrible and flashy going on, and was instead as boring, functional and useful as reference book’s table of contents.

I like it.

1. 4

It loads instantly and I can read it on mobile just fine. People are used to modern over-engineered and over-designed websites, so they might find yours odd. But the thing is it does what it’s supposed to do quite well.

1. 2

Definitely not something I would put in a “worst” category.

Font size and line-height could be slightly increased, IMHO

1. 1

Can you recommend any values? I know that it’s small, but I can’t manage to find the right proportion that doesn’t make the site look too empty.

1. 3

In print, the optimal point size for body text is 10–12 point. On the web, the optimal size is 15–25 pixels.

Check out Matthew Butterick’s Practical Typography . Matthew’s writing is super clear and thorough, so your answers around optimal text sizing should be answered from a ~10 minute read.

(It helps that he’s designed an extremely robust screen-first serif typeface, so he knows what he’s talking about.)

1. 2

Consider the values on my site: https://peter.bourgon.org

1. 1

It looks good on your site, but I I can’t manage to get it work for me :/

2. 2

I think your website has excellent design.

My presumption is that whoever said that was just put off because your website doesn’t look like the stereotypical modern website but personal sites never do (and I think shouldn’t). I don’t know that I can think of a way to improve your website except that perhaps the “Index” link the navbar should instead be a link on the name of your site in the top left. This seems to be more intuitive to people and while I know what “Index” probably refers to I also thought it might be a traditional (HTML) sitemap.

1. 1

I used to do that, but then I only had two elements on the right side, which didn’t seem like enough. Maybe if I add another section like “About”, I could re-locate the “Index” link. Then again, I use index.html as my sitemap.

1. 1

An about section might be a nice section to have anyway. I feel like it can help people understand who the website author is (but I’m much too shy to put anything actually personal on my own website’s about page so not one to talk).

1. 1

but I’m much too shy to put anything actually personal on my own website’s about page so not one to talk

I can relate to that, I never know what to write without sounding arogant.

2. 1

The design is fine and works well on this mobile browser (Firefox, android), but you have quite a few grammar mistakes and places where you have picked a word you didn’t mean to (e.g. and Vs an). You could add a grammar and spellchecker to your build scripts or writing flow, perhaps.

1. 1

Can you recommend any good (free/libre) software? I’ve tried looking into Languagetool, but building it seems to be a mess.

1. 1

I wouldn’t bother with languagetool. I just tried that, proselint, diction, and hunspell on a sentence from your site and none of them found the error. They were all fairly easy to install with Nix, tho.

The sample was:

If you want to send my an email, send it to philipk on the mail server posteo.net.

The error is that “my” should be “me”.

It’s not a huge deal but it stuck out to me. Maybe you could just ask a friend to proof-read your stuff?

2. 1

I don’t like the color of the header, but that’s a personal impression. It’s not garish, mismatched, or anything - it’s fine.

It’s basic, maybe a bit bland. But there is nothing “bad” about it, and surely not worst. (Designers might disagree, but I’m just a software developer.)

1. 1

Its not terrible, but for me the white is blinding. I would maybe soften the background color for the Body, and maybe add left and right border to the body in some other color

1. 11

I would suggest you lower your screen’s brightness. No amount of white in your screen should appear blinding.

1. 1

Do you use dark-mode? I’m used to black-on-white software (terminal, editor, this page, etc.), so I it doesn’t irritate me, but I can imagine that if someone is used to a darker color-scheme, that the contrast can be straining.

2. 1

Load time: 127 ms, page size: 5.2 KB, requests: 3, performance grade: A99! Nice ;)

1. 1

It’s brutalist. I like brutalism. 10/10 would website again.

1. 1

That is far from the worst website ever. In fact, I find it to be fantastic.

Reminds me of this.

1. 1

To me it’s definitely not the worst. But some of the text looks a bit messy. In particular (talking about “On our Abusive Relationship with Mozilla’s Firefox”) - I think that too many things are somehow emphasised: 3 different indentation levels, italic text, hyperlinks are both underlined and colored (some are also in italic) yellow box, bold list elements. I would decide on what is really important and pick one style of emphasis. Also a lot of short paragraphs that might be better merged into one.

1. 1

I get what you mean with indentation and italics, but what is the issue with hyperlinks that are both underlined and colored? That’s just how browsers render links, underline to indicate that it’s not regular text and color to indicate if it has been visited yet.

1. 1

Yeah we can cross that one out… I was thinking about the principle of “picking one way to distinguish elements”. I think I read it on “Practical Typography”.

I know it’s the default, but for example here on lobste.rs only underline is used. If you want to separate visited from unvisited - color is enough for both. I also don’t think visited vs unvisited is that meaningful, many people clear cookies and history, use different machines, read things both on desktop and on mobile.

Just an opinion thou.

2. 13

My sites at https://www.offtopica.uk/ - not sure if it’s had any human visitors yet :)

1. 3

That’s really nice.. I like the typographic alignment. On mobile, the scrolling gets a little wild from left to right.. Very clean. .

1. 2

Yeah. At least it happens on this page on a narrow display on iOS/Safari, but maybe one website out of three is affected by this kind of minor annoyance.

2. 2

This is fantastic! I love the simplicity of it.

1. 2

This seems very readable. I’m not sure why some of your code blocks look different than others, but ¯\_(ツ)_/¯

1. 2

I assumed it’s hard to get .uk domain, why else would .co.uk be so popular? How does it work really? The website is clean and minimalistic, I like it.

1. 3

If I remember right, it only became possible to get .uk quite recently (that is, within the last decade). Before that, .co.uk was the go-to and it’s still pretty ingrained.

1. 2

I assumed it’s hard to get .uk domain, why else would .co.uk be so popular? How does it work really?

Before some time in 2014, you couldn’t register a .uk domain at all. Between 2014 and 2019, you could register a .uk domain that matched the .co.uk/.org.uk/… you already owned. After that it’s a free for all :)

1. 2

Didn’t know that, thanks.

2. 2

A c++ article on the frontpage, an about link and a feed. Nice clean style, good content, thumbs up from me. Subscribed to the feed so you’ll get at least one visitor if you publish something new.

1. 1

Thank you very much. I’m not a very confident writer so this means a lot to me :)

2. 2

Maybe that is intentional, but to me inline code font is about 2x smaller compared to normal text font.

Also seems like you justify text without hyphenation.

One more - in “SSH Hidden Service” - some code blocks have grey background, while others don’t have any.

1. 1

The code font being tiny is not intentional, I would like for people to be able to read what I’ve written :) - Which web browser are you using?

One more - in “SSH Hidden Service” - some code blocks have grey background, while others don’t have any.

Not sure what I did to break it like that, hopefully fixing it also fixes the weird horizontal scrolling on mobile too.

1. 2

I am using Brave on macOS. Seems like by default “monospace” is quite tiny. I’ve seen some people declare: font-family: monospace, monospace; and that improves things with the font size for some reason …

1. 1

That’s very weird! It also increased the size on Firefox for Linux too.

2. 1

I can’t find anything wrong with this site. It looks great!

3. 11

Fun thread! I’m at https://icyphox.sh. I spent a lot of time on the typography and colors for maximum readability. Any suggestions are welcome.

1. 5

I think it needs a little bit of contrast on the links, otherwise looks pretty good.

1. 2

The initial load was very fast. I like it.

I like the simplicity of the blog post list.

I would add a little bit of left/right padding on mobile. The text is too close to the curved edge of my screen.

Also the images took forever to load compared to the pages. Maybe use smaller sized images or a lazy-loader.

1. 2

I’d suggest you trim the unicode ranges in the font files (subsetting, I think I used https://rsms.me/fonttools-docs/subset.html on my site) and make sure the images are resized to the dimension they will be viewed in. For reference, loading https://icyphox.sh/blog/pi/ with a clean cache, it can take over to 2s for the fonts to pop up, and part of the blame is on the 2MB image: https://u.teknik.io/TTM9s.png. Still I guess the main problem is how low the download speed seems to be (is the europe-india pipe that small?).

1. 1

I like it, but the right-hand column distracts a bit from the text IMO. Also, the <-- Back link at the top of articles confused me; I thought it was a link to a previous article, as is common in blogs. Instead it led me back to the index. Not what I expected! :-)

1. 1

I see. I shall rework that, thanks!

2. 1

It certainly is readable, and the contrasts are nice, but it takes a bit to load at first. I’m not sure, but I think that might be because the fonts delay the rendering?

1. 1

Yeah, I think it’s slow because I’m serving this off my RPi at home, through a tunnel to a VPS. I should probably use some kind of static hosting again, just for the sake of performance. Thanks.

2. 1

I like the minimal, serif approach. Reading on my iPhone X, I would prefer slightly more words per line, implying a smaller font size. Unlike some other commenters, I like that the margins are narrow (on mobile).

1. 1

Smaller font seems to be a common suggestion; I’ll knock it down a few pts, thanks!

2. 1

I’m currently almost done with a redesign on my site and it looks pretty similar to your’s. I’m definitely a big fan :)

1. 1

Thanks! Do you mind sharing yours?

1. 2

Just finished it! https://3fx.ch

2. 1

The only thing I don’t like here is the look of code blocks. All of them have the scroll bar at the bottom because they don’t fit the width.

1. 1

Hmm, there’s nothing much I can do about that. Wrapping code is uglier, IMO.

3. 8

andrewvos.com - though I mostly deleted all the content and it’s pretty empty right now

1. 2

Nifty! One note: on mobile safari, the bubbles break the swipe right to go back gesture.

1. 2

Damn. Didn’t think of that. Thanks.

I copied the animations from somewhere online, and didn’t really spend much time thinking about it. The goal is to replace it with something I’ve made myself, some time soon.

2. 2

!! I love the bubbles. This sparks joy. Does it work on mobile?

I also like the formatting of the bio page.

1. 4

It does work on mobile Firefox. I like it too, it’s pretty without being oppressive. 12 kb of compressed JS is pretty acceptable eye-candy for me.

1. 1

Thanks :)

I did spend time making it as small as possible.

While building it I was contemplating how all my professional work I try to keep as small as possible, but then Marketing comes along and installs Google Tag Manager and dumps 10mb of JavaScript onto my masterpiece.

2. 3

Safari / iOS 14.1 / iP11ProMax

It definitely sparks a lot, but I can’t call it a “joy” right after I found the canvas breaking the “back” swipe gesture so I had to pull up the bottom bar and reach to back button. Also, it quite breaks the standard UX habit as I tried to scroll down through it and found bubbles instead, but this one is particularly not your fault, more like the standard issue of scrollbars absence in modern UIs.

1. 2

Wow that’s really nice to hear thank you so much! Yeah it does work on mobile.

2. 1

Love the way you wrote your bio.

1. 1

Thanks I was really anxious about the way I wrote it, so that’s great to hear.

2. 1

Doesn’t seem to have a blog? Looks nice to me, as a portfolio site.

In the list of “Why would you want to work with me” (first item) the word “own” is on a new line. The visual impression would be nicer if all the list elements fit in a line.

1. 1

Yeah it used to have a blog then I redesigned it recently and haven’t brought all that stuff back yet.

Thanks for the feedback I’ll take a look at that :)

3. 7

My site is at https://christine.website. Do your worst.

1. 3

You‘re kind of a local celebrity here I guess, I’ve seen your posts multiple times. I like the „hacky“ design. Bonus points for Mara!

1. 3

Yeah, I wanted to go for that “fresh out of emacs” vibe. My site colors are almost a 1:1 match to my emacs config: https://cdn.discordapp.com/attachments/219956696859017216/770091694455783474/2020-10-25-210916_1920x1061_scrot.png

2. 3

FWIW not sure if it’s just my machine (Ubuntu), but the font is hard for me to read. Somehow it seems to lack anti-aliasing? Not sure if that’s on purpose.

1. 2

I think it’s your system because this website asks for vector fonts.

1. 1

Odd, it’s using the system monospace fonts. Screenshot?

1. 2

Ah OK yeah it’s just my machine… the site looks fine on my iPad.

I think it’s because it requests Monaco, and a long time ago I copied Monaco from a Mac because I like it as my coding font. Somehow it looks great in my terminal, but bad in Firefox and Ubuntu. Maybe a weird size, or different engine. Oh well

1. 1

Makes sense, I have Monaco high on the list because I liked how it looked on my iPad.

2. 2

Few nitpicks: the separating (dashed) line at the end is shorter than the text below it; the headers start with four hashes “####” and some have five “#####”, and it doesn’t seem like this difference signifies something.

1. 1

Yeah I’ve never been able to fix that. I don’t know what’s up with the <hr /> implementation in the CSS i’m using. It might be font and viewport specific.

1. 2

It seems like the way it’s implemented is that hr:after has ‘content: "----------------------------------------------------------------------------------------------------"’. That works when there are too many dashes to fit; the extra dashes are just hidden. But if the hr is wide enough to display all the dashes, there will be nothing after the last dash. One fix is to just add a whole lot more dashes ;)

2. 2

The faux Markdown is cute, and I like the colour scheme, but I am not a fan of fixed-width fonts for reading text.

(PS: How are you getting on with Colemak, now that it’s been a few weeks?)

1. 2

I am now at a typing speed fast enough that I don’t really have any major difficulties anymore. I cannot type in qwerty without looking at the keycaps to save my life though lol.

1. 3

Off-topic: your Colemak post prompted me to switch to Workman, and I’m loving it. And same, re: typing on QWERTY, haha.

1. 1

I’ve been looking at workman too, I’m gonna be a lot more adventurous when i get my split keeb. Hopefully tomorrow is the day!

1. 1

I now have to try it :)

2. 2

1. 2

I’m actually getting close to a minimum viable project with the wasm thing. Stay tuned :)

2. 2

I like the straight forward organization of blog entries.

I like the colors, but the theme is a popular and I would confused as to who’s site I am actually on. I suggest changing the colors to be unique to your specific site.

1. 1

It’s a modified version of gruvbox dark and hack.css. I’ve been considering updating the colors (and getting automatic light mode in the process), but I’m not sure what colors to pick. I will look into this though.

2. 1

Love the content. On my monochrome phone, the links are very low contrast.

1. 1

I’ll try and do some UX testing with my Kindle. Thanks! Do you have any suggestions for shades of pink that stand out more in monochrome?

1. 1

Not that I happen to know, sorry. My website just uses the default hotpink, but that’s for a tiny feature and still a bit difficult to read (as well as the pink being the background). I’ve just turned up the brightness and the links are more visible, but that makes my eyes ache more in general. I don’t think I have skills or experience to be more helpful than that :)

2. 1

I remember complaining about the contrast being hard to read in the past, but you’ve fixed that, or my eyes work better now. The theme style seems populair, but I like your site for the stuff you write.

1. 1

I’m not sure I changed anything, if anything my next change was going to be making the contrast a little softer so that it has a higher contrast ratio. Think gruvbox-dark-soft.

3. 7

My site is at https://leonardschuetz.ch

I rebuilt it a couple weeks ago because my old one got roasted on here :)

1. 4

Your site has a personality. I don’t know how else to put it. It is quite pleasing.

Post design has a few things I could steal. ;)

1. 3

Thank you!

Feel free to steal as much as you want :P The source is at: https://github.com/KCreate/leonardschuetz.ch

2. 2

It’s nice, the design leaves a “soft” feeling.

However, I don’t think you will be getting a lot of messages with a sentence like this:

You can send me an email if that makes you happy.

1. 2

Thanks! I tried to go for a simplistic yet modern look.

Not a native speaker, does it come across as rude? If so that wasn’t the intent.

1. 2

It comes across as very passive, and possibly saying you will notice emails randomly possibly years after they arrive.

Or that you are saying “I don’t really want to get any email” but that interpretation comes more from the reader’s current mental state.

2. 2

I love the colors, reminds me of Textpattern (and its old admin backend)

3. 6

Awesome initiative; feel free to share your thoughts on the latest iteration of my website.

1. 2

The font choice gives me LaTeX vibes. Very clean.

1. 2

I like it VERY much. I like how the code is colored, how smooth it is, like the concept of “News” section.

If it were up to me I would maybe just remove, or improve, the “Revisions” expandable - it doesn’t seem to contain anything useful for the reader. Also the bit where you introduce yourself is posted at the end of everything. I would probably move it to a separate section or leave it in home only.

And maybe, since Projects is currently empty, it should not be displayed.

1. 1

Reviewed on iPhone X

• the items in the nav bar are squished together for me
• some of the article summaries on the home page could use more vertical margin.
1. 1

Woww, your site is really great!!

2. 6

interested in people’s thoughts - http://calpaterson.com (also interested in any feedback on how I could make the article pages better)

1. 1

This is great. Articles are maybe a little on the wide side, but honestly that’s me struggling to come up with something to change.

1. 2

I think so too but I am rubbish at CSS and the whole page width is tied together and when I narrowed it it made various images a bit small. I should probably just allow the images to be wider.

2. 1

I would /somehow/ change the appearance of the links under Contact, they don’t really match the “list” pattern of the rest. Some ideas: different color, all in one row, prefix with icons, move to top nav, etc.pp

1. 1

Thanks - that’s a good idea. I will investigate this.

2. 1

I did a lot of research on typography and I learned a lot about content width, gaps between paragraphs etc. It’s interesting and definitely works - I think your article typography could use a little bit of that. I won’t post a link to the typography post on my blog here, as I don’t want to be seen to hijack this thread. If you’re interested, there’s a link to my blog in my bio, you can then use the search form. :)

1. 1

Viewed on an iPhone X. Very simple design, almost brutalist. Effective. Some notes on the design:

• Not sure the <hr> underneath the article header is worth it
• I’d center the article date as well; it seems out of place and makes the eye jump about because it’s usually between two paragraphs of centered text.
1. 1

Regarding articles: I think this one: http://calpaterson.com/non-relational-beartraps.html and this one: http://calpaterson.com/bookmarking.html are close to perfect. But then others like this one: http://calpaterson.com/mypy-hints.html are too messy. IMO - too many headers, too many short paragraphs, mixed in with lists and code. I noticed that articles become a bit noisy when lists and code blocks appear. If you can make them look cleaner somehow (maybe by removing indentation from lists, and simplifying the code blocks) - I think it would be for the better.

1. 1

I have no complaints. I love how the site puts the content first and foremost. It’s refreshing to see something that loads so instantly.

1. 1

Works great on a larger mobile. Shared your threat modeling piece.

2. 5

My site is very basic, but the colors seem to be very polarizing. I like ’em though. https://nickjurista.com

1. 2

I feel the content is too wide and the complete change in theme between your homepage and blog is jarring. I like bold colours though, so didn’t mind the ones your had chosen.

The background colour on links makes them difficult to identify too. I personally stick with different colour text, or the old favourite - underline.

1. 1

Oh yeah I don’t really use the blog and haven’t updated it in forever. There is also barely any content on the page so I get the wideness being annoying for sure.

2. 2

I also like this kind of unusual colors. Moreover yours don’t compromise contrast and legibility.

1. 1

If there’s a hidden toothpaste joke I didn’t find it ;)

It’s a bit colorful for me, but it’s not “argh, I need to leave”.

1. 1

The specific colors are too aggressive for my eyes to handle more than a few seconds.

1. 1

You might want to pick pastels that are close to the colors you’re currently using.

1. 1

Some nitpicks: selected text and links look the same; based on color cues it would seem that the title itself is a link, but it’s not; the links at the bottom have unequal margins on the left and right side.

2. 4

https://rubenvannieuwpoort.nl is my site – or maybe more a collection of articles. I tried to keep the styling minimalistic, use no javascript (math is statically rendered).

• What do you think of the layout on mobile? I like the style but feel that the text is maybe too tiny to read comfortably. I have spend some time trying to fix this but haven’t succeeded so far (it can’t be very hard, but web dev is not my niche).
• Would you prefer dynamically rendered math?

It is made with a static site generator I wrote myself (the source can be found on https://github.com/rubenvannieuwpoort/static-site-generator). Ironically, it uses node.js (and bash) and renders markdown to html.

I deliberately removed the dates from the blog posts since I tend to make large numbers of minor adjustments.

1. 4

Looks very simple, loads fast and pleasing to the eye. The equations look really cool and well rendered on my machine.

Few things:

1. It doesn’t seem responsive on the mobile. Needs the meta content viewport tag.

<meta content="width=device-width, initial-scale=1.0" name="viewport"/>

to turn it into this: https://i.ibb.co/Cbn90jC/Screen-Shot-2020-10-26-at-01-16-34.png

1. The blog post layout led me to believe that it is a PDF file because of the article being inside a box surrounded by a sea of gray. It could be a deliberate design decision, but that’s what it felt.
1. 1
1. Thank you, this is exactly what I wanted but didn’t know how to!
2. Indeed the design is based on how PDF’s are displayed. However, it’s not meant to be confusing. Maybe I’ll just get rid of the gray background.
2. 3

Out of the ones I saw so far I like yours the most.

One question - I noticed that you do not link back to your home from within the articles. Curious if you simply didn’t find an elegant way of doing it, or is there another reason?

1. 1

Thanks for the kind words. I basically wanted the layout to match that of a printed article as close as possible. This also inspired the PDF-viewer-like look.

2. 3

This I’m struggling to read. The font is too thin, and even scaling up a lot it stays too thin for me to read. I had switch to Safari and activate Reader mode to read this. (I normally use Firefox but for some reason I can’t activate reader mode on Firefox for this website!)

1. 1

I’ve got the same issue, iPhone se 2020, with large letters (accessibility) turned on, when I zoom in, I have to scroll right and left, no word breaks. Except for that, cool minimal style and interesting content!

1. 1

Thanks for mentioning the problem and the kind words!

2. 3

I really like the layout and style of the blog as it is, looks similar to the aethetic of Tufte’s work. My opinion is kind of the opposite to that of animesh in that I think the color surrounding the article works well.

The statically rendered math is amazing, I would love a solution like that for myself. Without any experience in web development I’ve not had success with it, but your blog works really well!

1. 3

You could consider putting a “published date” and a “last updated date”. I use that approach personally.

1. 2

The thin font and low contrast colour (?) make this quite hard for me to read on my phone (Firefox, android).

1. 1

I assume that this is just for the overview page, not for the articles themselves?

1. 1

Yes. I didn’t click on the articles at the time. Trying now, the text is very small on mobile. It might be that you can’t fix that while maintaining the mathematical article presentation style.

2. 2

I like the design and the content. I’d subscribe if there was an Atom/RSS feed.

1. 1

Thank you! Your words make me really enthusiastic to write something :) I might consider making a feed, but I don’t feel like I will have time for it anytime soon.

2. 2

It’s absolutely beautiful but there’s something wrong in the CSS. On my phone (Safari on iOS) it’s all “zoomed in” (I can’t see the full width of the page even) at certain zoom levels (for instance when I set 115% at the left of the address bar with the “aA” button).

Edit: I think one of the main issues comes from here:

	article {
…
width: 715px;
…
}


I would use max-width instead of width. max-width makes the width flexible for small displays.

1. 1

Thank you! I will look into this :)

2. 2

Like the simple layout, and overall clean feel. Saw someone already suggested adding the meta tag to make it responsive. Also, I feel the contrast of the articles description text on the homepage is low: light gray + light font = hard to read

3. 4

Okay here goes: https://raymii.org - including gopher and plain text for every article. Post here often, often okay received.

1. 2

Seems like both “home” and “about” have some duplicated purpose. You say “Hi I am Remy” in both. Also not a fan of that green, seems a bit too light for me.

Congradz on having THAT much content.

1. 1

I’ve got the site since 2006 (different domain back then) so 420 articles in 14 years, I think level out at one a month. And most of the earlier content isn’t that great, but not so bad that I want to remove it.

2. 2

The green is hard to read for me, specially as fonts get smaller. They look OK on the item title links, but text links and particularly the header links are hard for me.

1. 1

What would help? Different colour, background color, bolder text?

1. 1

I’d probably use a darker green, it’s the easiest solution and guarantees that you keep a good contrast regardless of font size and weight. I wouldn’t set a background color, I think it’d cause too much noise.

2. 1

On macos/firefox I usually get a text cursor when hovering over text. That seems to be missing on your site, so I think there’s something wrong with the CSS. I found that jarring.

Otherwise the site does look very pretty.

1. 1

I love your blog - been an RSS subscriber for a while. The only thing I’d say is the green could do with more contrast against the white bg. Everything else is really good.

1. 1

Thank you! I’ll try to experiment a bit with the green, everyone in this thread notices it.

2. 1

I like this simple effective design. As others have noted, I too found the green to be too bright. I would also suggest removing the “author” bit from your post header unless you actually have multiple authors

1. 1

There are two or three articles by different authors (one by Sven Slootweg, @joepie91 here) but the last few years it’s been just me. I also used to have all the articles of a Linux magazine that went bust up, with their authors.

2. 1

May be its a combination of Night Light and my monitor calibration, but the green URLs are a bit hard to view for me.

Doesn’t seem like it is a responsive design yet. Noticed on /all

Love the ingsoc name!

1. 1

Thank you! The site should be responsive, but I notice the scroll issue on the “all” page as well. Thanks for noticing!

3. 3

Mine is at http://space.af, most people just talk about how clean it is.

1. 2

“Most people “ are right! This is really clean. I honestly really like it.

2. 3

My website is at https://hugopeixoto.net/. The about me / contact pages clearly need some work.

1. 2

I like this quite a lot. Love the colors and how neat the article list looks.

Some things I noticed that I would change: the contact page leaves you with no navigation; Additional background when hovering over navigation links, but not other links; I would merge “Hugo Peixoto” and “About” pages into one; would get rid of blue squares in front of navigation items; content-wise I would aim for bigger paragraphs, seems like you like paragraphs composed of a few sentences, but IMO this has a negative impact on both readability and visual presentation.

1. 1

Thanks for the feedback :)

Not sure what happened to the contact page; I think I accidentally broke the markup. I agree that the “About” page is empty enough that it doesn’t warrant existing as its own thing. I’ll review those pages.

On paragraph size, you’re spot on, it’s something that I’ve thought about and struggled a bit. I don’t elaborate much, and I like to keep different ideas on different paragraphs so that readers don’t accidentally read diagonally through those ideas.

Some posts, more text heavy, have a decent enough paragraph size, imo: https://hugopeixoto.net/articles/2020-07-11.html. Posts that are mainly focused on code… are not that great. I guess that’s something I’ll keep experimenting with.

2. 1

I like it. For some reason I might have chosen a sans-serif font in the header navigation, but nowhere else.

1. 1

Thanks :) I used to have sans serif for the navigation and post headers as well, until someone complained about the post headers, so I ended up normalizing it. I don’t like the navigation much, I’ll probably change it a bit.

3. 3

https://kayode.co/

I’m just starting out as an author and occasionally write articles on mental health. Ideally, my homepage will give people a snapshot of who I am and what I do. When I have more stories published, it would also advertise those stories.

1. 2

I like it a lot, the only nitpick is that on a big monitor the whitespace around the header is a bit too big (above and below the search field, dark bg). If i split the browser 50:50 on my 27” it’s fine.

1. 1

Really nice, love how the colors fit together, even with images.

Maybe one thing I am missing is a convenient list of all the written article titles. I can only go through them by clicking on all the months on the right, it seems.

1. 2

Added an “All Posts” page to the blog sidebar: https://kayode.co/blog/all/ :)

2. 1

Site looks very nice. Noticed that on mobile this page is overflowing because you have a long work without breaks in it:

com.apple.SpeechRecognitionCore.speechrecognitiond


You can solve this by setting css word-break: break-all

3. 3

Mine is at http://jackkelly.name/blog . Self-imposed constraints:

1. No JS
2. “Not too much” CSS
3. Monospace font
4. Use the EGA colour palette
1. 2

I get the style you were going for but I find the lack of visual feedback when hovering over interactive elements (link) to be unexpected for a website.

I was gonna say that this might become an accessibility issue, but tabbing through links actually still works so it’s possibly not.

1. 1

Thanks for the feedback. Normal links are underlined blue text, which is pretty much the original way of indicating a link. If hovering over a link doesn’t change your mouse pointer, that’s probably your user-agent’s fault? Code-quoted links currently render as black text with a blue underline, which might be too hard to notice. Is that possibly what’s confusing you?

1. 2

Nevermind, you’re right that default styles dont do any hover styles either.

2. 2

I really like this! Love the retro vibe

3. 3

Hey! My site, which was originally based on @icy’s excellent page, is here. Web development isn’t my strong point, but I do like to think I my site is at least passable :)

1. 1

The content is too narrow: on a desktop browser, I’m having to horizontally scroll to view your code.

1. 1

It looks really nice. I like narrow content, it’s easier for me to read without having to rely on reader view, but it does become a challenge when you have code snippets. Fortunately, your posts are not very code heavy, so I don’t think that’s a problem.

2. 3

Well… here’s mine: https://hacdias.com/ Pretty sure it will trigger some people, some negatively, some positively 😅

1. 1

It’s really good and fun to browse. Very personalised. Cannot find anything bad to say about it.

1. 1

That’s really nice of you! Thank you so much :D I’m really into personalization. I think it’s a great way to show personality!

2. 3

Appreciate any suggestions or criticism: http://karolis.koncevicius.lt/

1. 2

I really like the look of it. Very nice and clean blog post headings, though it wasn’t immediately obvious to me that the title was a link back to the index. Nicely done.

My main criticism is a big too much vertical whitespace, especially before headings. I initially thought one of the articles ended a bit abruptly, but when scrolling down it was just a large vertial whitespace before the rest of the content.

1. 1

though it wasn’t immediately obvious to me that the title was a link back to the index.

Yup that’s the main thing I cannot decide on - find a nice and minimal way to link back to the index, without having a separate “nav bar”. I considered a lot of options, from the current one, to the “X” on the corner, to the back arrow at the bottom of the page. Any suggestions are very welcome!

My main criticism is a big too much vertical whitespace, especially before headings.

That’s a good point. But when I tried to reduce the vertical space for new headers they seem to stand out less. Maybe I can reduce them just a little bit….

2. 2

I said it the last time I came across your website, but I really like it! Perhaps another line with the date posted/updated below the title could work for your layout, as others have mentioned that it is missing from the blog posts.

Also, I have actually used redo for something quite similar to you, as preparing graphics for a paper/thesis recently, what an interesting coincidence!

1. 2

Nice! My critique would be that there’s too much padding on all sides of a code block. I would cut these paddings in half or more - try viewing a code block heavy post mobile, where a larger share of the line ends up as padding than as text.

1. 1

Thanks for the comments. Padding on the code blocks are intentional - there is as much space between text and border as there is between border and code. But you are second person saying that there is too much space vertically. Will see if I can do something about it.

2. 1

I think it can help readers to at least know when a page was last updated - that way they can know instantly whether it is likely to be current information or not which matters for technical articles.

Other than that a simple “about me” page might help give some context on who you are and what you’re about.

1. 1

Yup good comments - dates can be useful. They are included in the HTML meta tags actually (both the date of creation and the date of last update). I will probably add them somewhere one day. Currently trying to be as minimalist as possible, so no tags, no dates, no RSS, and no “About me”… Want to wait and see which of these things I cannot live without.

3. 2

Here’s mine. As the years went by I kept making it more and more simpler, and faster. I think I can get it a little bit faster by getting rid of the web font, but system fonts are a bit too inconsistent for my liking.

1. 1

Enjoy everything minimal, so I like the design. But style-wise - not sure I like the decision to make inline code elements bold.

1. 1

It’s something I’m still on the fence about as well, so I might change it to something a little less present.

2. 2

My site is at: https://josm.site

I do need to re-do the whole thing to be honest, but there we are. It’s basically a bunch of links.

1. 2

Not responsive or mobile friendly. On iPhone X, initial page load looked empty, with just a bit of the centered image at the right edge of the screen. I scrolled a bit to bring it into view.

You should consider trying to make your widths, etc max-width.

1. 1

Yeaaah, it’s really not optimized for anything tbh, I’m going to re-do everything.

Thanks for the feedback!

2. 1

Yea, gotta use some of that “above the fold” space. Not so good on mobile either.

1. 2

Indeed, definitely gonna have to sort that out. Especially mobile because I haven’t even done anything on that front.

3. 2

https://jake.tl/

I spent more time porting the site between static site generators than I do adding content. I’ve built the same site with a BSD make + sh stack in my Berkeley days, a Python stack, and now React + Next.js

Let me know what you think.

1. 1

I like it, but maybe a few nitpicks still: 1) would shift the content a bit to the left side, so that the main reading space is in the center; 2) bit unclear what the dates at the top say. i.e. for “goto” February 2011 - February 2018, but the update at the very end says 2019; 3) Inline code seems to be distinguished by adding padding around it? A bit jarring when reading. For example - the very first sentence in “goto” article, the cd has a lot of space around it. Probably that’s intentional, but it catches attention when reading for the first time; 4) Also the navbar on the left works for now, but add 10 more projects and 50 more articles and, to borrow a modern term, it will not “scale”.

2. 2

https://ukiahsmith.com/

I’m pretty happy with what I’ve built. I’d love to hear your thoughts.

It is built on Hugo and basic html/css

1. 1

The text is very pleasant to read. But the code maybe might be better. Inline code has: pink color, grey background, thin border. Seems a bit too much, and doesn’t flow with the text. Not a fan of how full code blocks look too. I think I would want a gentler background for those, and a bit more padding on top and bottom.

Also in the article “Bash: Check for Duplicates” - there is a section “Related Posts”, but it’s empty. Maybe deleting it in this case would be a good idea.

1. 1

Love the way /blog is built and organized - most recent posts and then grouped by year. This is something I wanted to do with Lektor, but couldn’t without a lot of tweaking.

Even with some amount of JS, the site manages to be quite fast.

Excellent typography. Ex 1, Ex 2. This is the kind of typography I aspired to go for, but failed due to analysis paralysis, and eventually text heavy design ;)

1. 2

Thank you your kind words. I’ve put in a lot of time working and re-working the layout, and I’m really pleased with how it turned out.

When you tweak your typography let me know and I will help you get it looking the way you want.

1. 1

Definitely, will reach out. Thank you for the time and effort you put.

2. 2

https://scorpil.com - I’m probably late to the party but here is mine. It’s a blog, I post some of the articles here.

1. 2

I like that it loads fast, but I’m not a fan of the all caps or the boxy header on the home page.

The QUIC logo on the first article doesn’t appear centered either, and is maybe too big.

Firefox for Android.

1. 1

Thanks for the feedback!

2. 2

My homepage is at https://webb.page.

1. 2

My website is at https://susam.in/. Feedback is welcome. :-)

It is a static website with a blog. The entire website is generated using a customized version of makesite.py. Disclosure: The makesite.py project has been developed by my wife.

1. 2

I think your site is wonderful. It loads very fast and the typography is well structured which makes it easier to read.

I suggest customizing the header with a photo of yourself or some colors. Something to help create a identifiable brand. That would make it easier for repeat visitors to recognize that they’ve been to your site before.

1. 1

I like the sublte “3D” effect for keyboard keys in “Lisp in Vim”.

For a nitpick - visually there is little difference between h2 and h3 elements. Also the things on the very bottom (Home, About, links to GitHub, Twitter, RSS) could be somehow more organised. One more - there a two different views to your blog (one is on “home” and another is on “all articles”), which is hard to find and slightly disorienting.

1. 1

I remember your blog now from the posts on MNCs from many years back. I can still see those posts on your site, but they don’t seem to appear on all posts now.

I am one of the many who realized the truth and found so much to relate due to your posts. Thanks!

1. 2

Thank you. You must be referring to this post: Infosys, TCS, or Wipro?. I wrote this 9 years ago when I felt that the poor work culture of these IT companies was not very well known to fresh engineering graduates. I thought a discussion on this topic was necessary. The blog post was widely circulated and debated several times back then.

Now I have chosen to hide it from the list of all posts but it is still accessible via the direct URL. The primary reason for doing this is that often new people I meet go look me up on the web, come across my blog, then come across this post, and then talk to me about this post. While I still stand by what I have written there, I would much rather talk about other topics such as technology or mathematics which I enjoy talking about much more.

1. 1

would much rather talk about other topics

Fully understandable and I suspected the reason to be something of this sort. Cheers.

2. 2

Known bugs: Dark mode looks off on Firefox desktop Navigation/Hamburger menu on mobile is a bit meh

1. 1

Visually, font for code and code blocks are too small. A bit of unusual placement of the title (neither left-justified nor centered). Not sure why the title is clickable, since it links to the exact same page. Don’t like the big list of “other posts” at the end of the articles - you have a link to the blog already. Plus the article itself is also included among the “other posts”.

1. 1

Code font increased, title placement fixed & not clickable anymore. Thanks!

2. 1

Overall solid typography with my preferred size and spacing.

On iPhone X, I found the “hamburger” nav menu icon quite small.

You should consider max-width: 100% on your images; currently they break layout awkwardly on mobile.

1. 1

Thanks! Just updated images to max-width: 100%, the hamburger icon improvement will need a bit of longer rework.

2. 1

Looks great to me on desktop. Maybe consider putting your blog articles on the front page - they look like interesting “next click”s.

1. 1

Ooh, I’ll consider it. Thanks!

3. 2

https://artagnon.com

The SSG that powers it is over 7 years old, and some of the content is even older, and ported from another hand-written SSG; preserving backward compatibility while extending it is a big pain. The SSG doesn’t process markdown: it’s a custom syntax, that has evolved with time. The design is essentially hand-written CSS. Fighting with CSS is a real pain, and I wish there were an easier way to design webpages.

1. 2

I would do more organisation. It’s hard to understand the different indexes at the top. Some of them are abbreviations, others are cryptic. The pages themselves do not have that many entries within them, why not put all of them under one page, and separate your categories with headers?

1. 2

I really enjoy the personality of this site; the background gives it a warmth and friendliness. I found the top nav mysterious (less charitably: confusing). I think the loading progress / MathJax rendering thing is cute.

1. 2

There are a few things to fix in your design, but the first things I would look at IMHO in no particular order

1. Max width for articles will affect the readability
2. Nav links could use some reorganization to improve discoverability
3. Articles from different links (ex: HOTT, at, etc.) need to reorganized with the use of tags if possible with your SSG

It takes a lot of time to do these kinds of changes, but is a great pleasure (read: sweet sweet torture) to do so. I would recommend doing this step with a new SSG (jekyll, hugo zola) and go for some minimal brutalistic design. Regarding design I couldn’t say as I suck at design myself, so I would say to start with a themes for these SSGs. Your site and articles seem very math and compsci oriented and IMHO deserve some thought into this.

2. 2

http://www.shitmyself.com/

1. 2

https://hakibenita.com

I recently made some changes to how I display code blocks on desktop (from full bleed to a box), and I used to keep changing fonts until I decided to go with system fonts.

Would love some feedback 😉

1. 3

I recently read some of your articles and, content aside (great), I really liked the color scheme of the code snippets and the drawings were good.

2. 2

It feels abandoned, but I’m planning to add some backlog content to it soon. Next item is to showcase the photos in a nice gallery. Looking at other sites now, I feel like I have to add a half-paragraph about myself :S

1. 2

It’s clean, but a little “about me” like you say certainly wouldn’t hurt. It makes a personal site feel more “human”. For the photo gallery, I agree a custom page displaying them that fit more with the rest of the site would be welcome.

1. 1

Thanks <3

2. 2

Such a simple thing but those border bottoms on headers are a good idea! Represents clear separation.

3. 2

https://theinternate.com

Looks more or less exactly how it’s made: Markdown on a Solarized Light background

1. 1

I like it! I’d put “overflow: auto” on “figure.highlight pre” to make the scrollbars only appear when required on code snippets. Otherwise cool idea :)

2. 2

Mine is at https://neros.dev. I’d appreciate any feedback!

1. 2

I love it! The text is a little low contrast, especially the blue, but otherwise, this is a fantastic site.

2. 2

https://nikhiljha.com

I recently rewrote the homepage to tie everything I’ve done together via a weak common purpose. It might be too wordy/heavy though, thoughts?

1. 2

The lines are a bit long for me to read comfortably. In post pages I can use readability mode, but not on the index (the boxes on the project page are easier for me to read, for example).

The grey background in links definitely stands out, but the contrast it a bit low, and using white there would probably be easier on the eyes. I checked the accessibility pane in firefox and it agrees with me, it doesn’t meet WCAG standards.

1. 1

Thanks! Just out of curiosity, did you view the page with dark theme or light theme? Looks like I need to go back and validate accessibility on both themes.

1. 2

White background, so I’d say it’s the light theme.

2. 2

Not a fan of grey background for links. Specifically at your home page. It looks as if I dragged the mouse by accident and mass-selected all the entries. Also - the footer is not being used now it has “Sample text”.

3. 2

My site is at https://goel.io/. My friends love how simple it is. But I just can’t fathom taking all the (minimal) styling away.

Here’s my principles for the design and architecture: https://goel.io/blog-2020

1. 1

I think your site looks great, too! I love simple sites that still present the text in a beautiful way. It’s also a cool effect how your twitter handle collapses into the Twitter icon when the view-width becomes too small.

1. 1

Thanks, I wanted it to not do that but I couldn’t make the width work without a hamburger menu which I very much dislike.

2. 1

I would maybe decrease the font at the index, so more posts are visible without needing to scroll.

1. 1

That’s fair.

3. 1

I’m at https://rjp.is/ (got some CSP tweaks to sort out later.)

1. 1

Love the style fo blog articles. But I cannot understand the difference between “tags” and “categories” there.

1. 1

I treat them both the same for the moment - I’m not entirely sure what Hugo considers the difference. I might just drop one of them, to be honest.

2. 1

My website is built with Hugo, and uses a modified theme I liked that needed to have a few changes made for security and speed.

Issues I’m aware of: images are large and unoptimised, long articles could probably be truncated on the front page on mobile, content is old.

the.geekorium.com.au

1. 1

My personal blog is https://jlelse.blog - I try to keep things minimal and currently develop my custom CMS to make things like posting more simple for myself. But I plan to keep most of the theme with the new CMS too.

1. 1

My site is at brautaset.org.

It serves a light or dark mode depending on what your browser requests. I try to make it easy to read, on desktops and on phone, and I like big fonts.

1. 2

A bit surprising how many sites have the same thing: duplicated information between “Home” and “About”. I would merge “Home” with either “About” or “Publications”. In Publications - first two are 404.

1. 1

Thank you for the feedback! I merged Publications into the index, and fixed the two dead links. (WayBackMachine had one, and I found my old slides to use in place of the missing video.)

2. 2

The links in the menu are almost impossible to read. For me (iOS on dark theme) shows 2 very similar shades of orange. The general orange colour is also difficult to read with the dark background.

1. 1

Thank you for the feedback! I’ve tried to fix this, by changing the colours around. (And not using an orange background behind the menu.) I don’t use the dark mode much myself, but it was a fun expriment to make the auto-switching style. I’m thinking about removing the dark mode, as I am find it difficult to maintain/extend the light/dark colour scheme and maintain readability. (And I have only so much time to tweak the colour scheme on my blog.) As a dark-mode user, would you prefer a second-citizen dark mode, or forced to use a first-citizen light mode?

1. 2

I’m not a dark mode user actually, it just so happened that my iPad was still in dark mode for, testing my own site. :)

To answer your question though - it’s your site, do whatever you want. If you’re struggling to maintain both colour variants, just stick to the one and make that right, people can always use reader mode if they want a dark experience.

3. 1

Plain and simple and hasn’t really changed since I put it up around 2008 in this format. http://caius.name (Yes, I can’t even be bothered to put it on https.)

1. 2

Could use a mobile-responsive version, as the padding makes the initial scale quite small on my iPhone X.

2. 1

My blog is https://robertheaton.com , any feedback much appreciated.

1. 1
1. 1

That plane game reminds me of “Triplane Turmoil” a lot. Wish it was multiplayer….

2. 1

Here’s my site, if anyone cares to critique or not.

https://jkirchartz.com/

1. [Comment removed by author]

1. 1

Seems like link is not working properly.

1. 1

Sorry, looks like the https in front is required…

New try: soc.me

2. 1

My website is here: https://mort.coffee

I don’t think it’s too bad, but always up for constructive criticism.

1. 1

Don’t like one thing - darker background for inline code elements. I think having them orange would be enough.

2. 1

Here we go, https://f5n.org/ - and 2020 was a bad year for blogging technical topics for me.

1. 1

Really nice, I like smaller font size. Style-wise I think line-height might be decreased a bit.

2. 1

I’ve been meaning to re-do mine (and add more content), but I’m fairly happy with the current implementation.

https://coded.io

1. 3

I like that it is a table.

1. 1

I like the table view. Like how the colors work together (even if I don’t like dark themes myself). Not sure what is the benefit of having two ways of listing the articles thou. Also inline code seems to be quite smaller than text.

1. 1

If you have light mode on your system (and your browser supports media queries for that), that should toggle the theme. Alternatively if you have JS, there should be a toggle at the bottom of the page.

The two ways to list the articles is a good point - I forgot about the other list pages and have no idea why they’re laid out differently.

And the inline code might be a font thing - what OS are you on? I’ve tested with macOS, iOS and Linux but maybe there’s a Windows issue?

2. 1

Ok, I’ll bite: https://p1k3.com/

I’m aware it could use a bit of work on mobile (sizing on the header image introduces an unintended horizontal scroll that I should fix sooner or later). The basic layout dates to about 2001, and the navigation probably predates a lot of conventions that are now sort of default expectations for blogs, but I’m curious if people still find it more-or-less navigable.

1. [Comment removed by author]

1. 1

The look is very pleasant, and I agree about Disqus, it ruins your style. But I am not sure what’s the need for “Recent posts”, when “Archive” gives the same view, except with more entries when scrolled. Also nit-pick: you have email and twitter links at the top, always visible, so they can be removed from “About”.

1. 1

It came from a time when I thought I’d post a lot more and I wanted the homepage to load fairly quickly.

2. 1

Here’s mine: https://zakaria.org
It’s pretty bare, I welcome any advice. I should probably list some of my projects there for a start.

1. 2

Isn’t your main page very simular to the “about” page? Personally, I think the “Around the Web” section doesn’t have to be a list, but could just as well be regular prose (“I host my projects on GitHub, and am also to be found on Lobsters and the Fediverse”, or something like that).

1. 1

The main page is exactly the same as the about page besides the h1, yes. I think I’ll maybe leave the about page as it is for the most part and revamp the index completely.
Also good call, I think I will change that to a regular prose.

Thanks for the feedback!

2. 1

Mine is https://spacetime.dev/. I focused mostly on making it simple and lightweight so I get mixed feedback. Usually programmers like it but others assume I’m bad at front-end :)

1. 1

I honestly don’t see anything wrong with your site. I think it looks good.

And here’s my site: https://Phate6660.codeberg.page

Though note that most of the site was redesigned by a good fellow on Mastodon.

Here’s what the page originally (that I fully made myself) looked like: https://Phate6660.codeberg.page/index-old.html

1. 1

I love the straight forward organization of information.

It’s not mobile friendly. The page width does not size to a phone. It would make reading on a phone difficult.

1. 1

Really? I tested the redesign on my phone, and despite a little word wrapping it seemed fine.

That’s actually the reason why my site was redesigned in the first place, because the previous version was not mobile friendly at all.

1. 1

https://ibb.co/rQjyLhh

This is Firefox on Android.

1. 1

That looks exactly how it does on mine, using Fennec from F-Droid.

Despite a little word wrapping, I don’t see the issue. I guess I could different font sizes for mobile and desktop, making the mobile version smaller.

1. 2

It’s not a bad design, but I would need a larger font if I were to read any long form content.

I’m glad it’s really not so different than what you intended.

2. 1

My site is at https://kevq.uk always interested to hear constructive criticism.

Side note - this is a great thread. I’m really enjoying seeing the various personal website designs! Great idea, OP.

1. 2

Reviewed on iPhone X.

My suggestion would be to reduce the line-height on your article headings - the line height, as a percentage of em-width, seems appropriate for smaller body text, but isn’t making this headings better.

1. 1

That’s something I’d never considered before actually - it’s a good point, looking at the line height on headings, they do look wonky. Thanks for the feedback.

2. 1

I love how much interaction you get in the comments. How do you do that, both technical (not disquss I think) and social ( I never have that much user interaction)?

I also like the diverse content, pleasant theme and it loads quickly.

1. 1

I pay people! :)

Joking aside, they’re just plain old Wordpress comments, I’ve just tried to theme them a little nicer in my theme. I get a lot of interaction on Mastodon, so I use the Brid.gy service to bring them over (need to add webmention support first). I also get a healthy number of standard comments on my posts too though.

Thank you for the kind words, I’m glad you like the site. :)

3. 1

Mine is at https://yakubin.com.

I made it ~1.5 years ago and didn’t update it much since then. I was (and still am) going to add a “notes” section where I share my notes on several things. One of those things was solving puzzles in Assassin’s Creed with module theory. Other things are some code snippets for working with libvirt, systemd, something about compilers (as I’ve been reading about this topic for some time and am planning on starting my own C compiler from scratch (no LLVM or anything like that) in December).

The page is generated from a couple XSLT templates and markdown (with pandoc) and organized as a directory hierarchy. Each directory has an associated Atom feed.

1. 1

Mine is at https://secluded.site. I’d love to get some suggestions for improvements!

I recently started with Emacs and fell in love with Org mode; I’m seriously considering ditching Hugo and going much more minimal with a small, handwritten stylesheet and HTML pages generated from Org.

1. 2

Just as a heads up, you can also write your blog posts in orgmode and have hugo render it (if you weren’t aware).

1. 2

On Firefox android, the pages always start in dark mode and then pop to light mode after remembering my preference (set by tapping the icon once on the home page).

Seems too low contrast in dark mode.

I also read Butterick and like the circle links and gradients, I think they’re fun though I don’t know how many people would miss them.

1. 2

A few nitpicks not liking the gradients when the circle links expand; seems like “home” and “about” could be merged into one page - nothing much is going on at “home”. Also not a fan of how code blocks look in both light and dark themes.

1. 1

Also not a fan of how code blocks look in both light and dark themes.

You don’t like the colours of the highlighting or something else?

1. 1

I think they are too dark. The background is black and the text itself is quite dark within. For me it stands out too much from your otherwise light theme. They do look considerably better in darkmode, now that I took a second look at it.

2. 2

Clean, and loads quickly, but the contrats seem a bit too low for my taste. I’m not sure if this even qualifies as an oppinion, but I was expecting more on the front-page, and tried to scroll. The blinking cursor animation is actually calming!

I’m seriously considering ditching Hugo and going much more minimal with a small, handwritten stylesheet and HTML pages generated from Org.

On that topic, there is ox-hugo that can convert a org-document into a hugo-compatible site, and then render it.

1. 1

the contrats seem a bit too low for my taste

Yeah, I’ve been meaning to increase it a bit haha. Thank you for reminding me!

there is ox-hugo that can convert a org-document into a hugo-compatible site

I’m actually working on a blog post that will be exported with ox-hugo but there’s still the whole “Hugo workflow” as well as dependency on Hugo itself. Simply using Emacs and nothing else is pretty attractive.

2. 2

I enjoy your theme. The site is fast, which is really good.

I really like the way your blog posts are organized on the blog page. I like the tags at the top.

Overall the content is well formatted, with good margins.

If I had to suggest anything it would be to do something with the homepage. Use it as an opportunity to shepherd the user to relevant content, and or give them roads to walk down.

1. 2

Others have mentioned the all-but-blank homepage as well so I will very likely make some changes there.

I appreciate the suggestion and kind words!

2. 2

Reviewed on iPhone X.

To me, the low contrast and short line-length makes reading uncomfortable. I suggest a slightly smaller font so more words fit on a line on portrait mobile, and increasing the line-height and text contrast to compensate for the smaller size.

The link treatment was surprising, but delightful. A great touch for a personal site.

1. 2

Beautiful. I like the theme and the fonts. There is one annoyance though: the system fonts are displayed momentarily, before it’s swapped out to use your fonts, but I think that’s an unsolved problem today.

1. 2

I came back to this thread specially to say I love the pipe section on your site. I hope you get around to reviewing the pipes and tobacco, I’m now reading your pipe origin articles.

I see you do rss feeds per category, I like that a lot. I do it myself on my site for each and every tag, but had never seen it elsewhere.

1. 1

Hugo is what I currently generate the site with and it actually has feeds for every taxonomy, not just categories

I hope you get around to reviewing the pipes and tobacco

Once I’m finished documenting my email setup, I’ll get to work on some of those!

2. 1

Here’s mine: https://utsavshah.com/

1. 1

Reviewed on iPhone X.

Your site leads straight into the most recent blog post. A few lines of introduction or navigation might help me feel more situated before I (decide to) start reading a post.

1. 1

Thanks, that’s really useful feedback.

2. 1

i recently redesigned my website https://bkkaggle.github.io to be a lot more minimal. lmk what you think!

1. 2

I like it because it has a very distinctive design language, that reminds me of the Pebble Time smartwatch, and the duck is a nice touch! I was just disapointed to see that the blog didn’t share the same style.

2. 1

It’s on https://pta2002.com, I haven’t posted in (quite) a while but I’m planning on adding some stuff soonish.

1. 1

Ok, https://justinblank.com, though I think none of your comments can possibly be as bad as my knowledge of the terrible way I publish it.

1. 2

I think it looks very clean, but I am not sure what exactly achieves this cleanliness effect.

One thing - your footnotes distort the line height. ie.e visible on the first paragraph in “Java Concurrency”. Cosinder adding “line-height: 0;”, maybe to both footnote and sup elements.

1. 1

Thanks! I’ll look at the footnotes.

2. 1

Now you’ve spiked my curiosity, how do you publish?

1. 1

I have a project I’ve mentioned before on lobste.rs that’s a weird hybrid of a static-site generator and a bookmarking/note-taking tool. I collect notebooks in there (collected volume is now a reasonably large novel worth of links, quotations and my comments on them). When it’s time to publish, I load that page in the browser, save it to my local machine, perform a little bit of wrangling, then SFTP it to my current site, then manually add it to the index.

I know that’s bonkers, so I have a v2 that’s almost ready, but it requires a lot of changes, and I’ve never quite gotten it ready to deploy, and while I recognize that I should just do it, getting over the inertia is really hard. The v2 would support push-button publishing, along-side a lot of improvements, and I’d probably publish a good bit more if I could just get it done.

3. 1

Mine sorely needs an update, as I last redid it in 2011. It was a bit ahead of its time for that epoch of the web, as I experimented with some novel layout stuff that is now just common and how things are done.

I used lifestream.js to pull in feeds from a variety of sites to show my latest activity: GitHub, GitLab, Twitter, reddit, etc. It relied almost solely on Yahoo’s YQL service. When that died a few years ago, all of the feeds died except reddit.

I’ve been really liking the layouts of some personal sites and blogs frequently posted on Lobste.rs, such as https://kevq.uk, https://christine.website, https://chriskrycho.com, https://joshwcomeau.com, and some others, and will probably keep my new layout – whenever it happens – similarly lightweight. I come from a newspaper layout background and understand the vital importance of readability.

Now, I just need to set aside the time.

1. 2

It seems fine, for the most part. The only things I find wierd are the outdates icons for facebook, twitter, github, etc. and the gradient in the title.

1. 1

Thanks! The icons are really outdated: they’re from the 2007 design, last captured by Wayback Machine in 2010. I’ve always really liked Mac OS X dock’s magnification effect, so I cloned it.

I could probably slide some SVG or FA icons in there now for a quick visual upgrade.

1. 1

The icons with dock effect are a nice throwback.

2. 2

I miss that 2011-esque vibe. Your site looks nice.

1. 2

Thank you so much!

3. 1

I currently have three different designs for my site; the domain level, my personal webpage and my blog. The designs haven’t changed at all from when they were first put online (over twenty years ago).

1. 1

I like how light and subtle the colors and text are. And the full width works very nicely on the site.

One thing I am missing is maybe a page that lists all the blog entries. The archive makes me search them by date.

1. 1

I have over 5,000 entries in my blog, so it would be one long page …

And speaking of long pages, you can specify just the year (say, http://boston.conman.org/1999) and read all the entries for that year. I never did figure out a good way to list an overview of my blog.

2. 1

Recently did a design overhaul. Almost afraid to share it, but here it goes: https://animesh.blog

1. 4

Two points that strike me:

1. The proportions between various elements of the page seem off. There’s almost no space between the top of the page and it’s first line, while further down (and towards the left and right edge) there seems to be more blank space.
2. “Posts” is renderd too lighly, at least on my machine. Removing the “font-weight” property made it look better.
1. 1
1. Agree about the spacing and sizing of the various elements. Spacing, I can see how to fix it. Sizing is where I am struggling, but I will spend some time on it in the next milestone.
2. Posts heading was definitely supposed to resized to be a bit smaller, but I couldn’t reach a conclusion during the redesign and left it. Will think about it too in the next milestone. The font-weight I have deliberately made it to be this way. I am now understanding that it might be bad on different browsers and devices. Will fix.

Thanks for the honest feedback.

1. 2

For the sake of compleness, this is how the light text renders on my end: https://0x0.st/ikBD.png

1. 1

Wow, that’s indeed bad. Is this on a Mac/Chrome or Mac/Safari?

The other thing that stands out is the post dates and post titles don’t align, while they do for me. Firefox on Windows/Linux here.

1. 1

No, Fedora and Chrome. Apparently the font is Cantarell.

1. 1

Cantarell

Yeah, Cantarell is a font in my system fonts list. I will remove it and evaluate more Linux system fonts. Thanks for the feedback.

2. 2

I like it.

But a few nit picks: I would try to make the spaces between dates and links consistent, and, if it were up to me, would remove the “next article” and “previous article” links, as your articles doesn’t seem to go in parts.

1. 1

Could you please clarify what exactly you mean by doesn’t seem to go in parts? Do you mean in sub posts or something else?

2. 2

What @zge said, but otherwise, really nice and clean!

1. 1

Thank you very much, it means a lot. Tried a bunch to come up with design design, then I decided the minimalistic route and worked on it.

2. 2

It loads very fast. I love this.

I suggest working on typography and spacing.

Varying type size and style can help emphasize importance and guide the eye across the page.

I would add more left/right margin to the content body to help make it easier to read.

1. 1

Agree on all points, thanks for the feedback. I planned to implement a lightweight TOC widget, that stays fixed and expands sub headings as we scroll on posts. Just to make it easier to navigate posts, especially long ones. It is a long pending and in-progress feature.

Also, I experimented a lot with putting post meta information on the left column, but somehow remained with a single column layout. Again good points. Thank you.

1. 2

I’ve toyed with where to put post Metadata.

I settled on putting in below the main post content. I figure if someone makes it through the post then they are more likely to surf to other pages. And it moves the clutter from before the content that might distract them.

1. 1

I have just gone through your blog and your comment now makes lot of sense to me. Will try to think of it in this way about metadata.

1. 1

I really struggled with what to do with the metadata. I wanted it to be useful but also not distracting. I’m mostly happy with the way it is, but the footer still feels a little cluttered to me.

3. 1

https://www.dalanmiller.com/

Pretty chill 🧘🏻‍♂️

1. 1

You can feel the surf dude smiling at you.

1. 1

It’s quite professional. Articles themselves resemble Medium style, but since it has no annoying popup things it feels cleaner than Medium. Well done.

2. 1

It’s in PT-BR so the content might not be readable to the majority, but here it is: https://crdpa.net

I use markdown + pandoc + a shell script i made to convert everything and create the blog index.

1. 1

My site is at https://www.gibney.de

1. 2

Looks good and loads fast. Very good.

Some images in post entries overflowed the browser width forcing lef/right scroll. This on Firefox on Android.

One change I suggest is put the word “blog” in with the second menu it. “Sometimes I write about things.” isn’t bad but could be overlooked by a visitor.

1. 1

Looks very nice to me. But all the posts are so short. i.e.: https://www.gibney.de/urldiff_-_simple_visual_regression_testi . I don’t see what’s the point of having a separate page for this.

1. 1

I like it better than Twitter or a non self hosted micro blog,

1. 1

Yeah, I could delete that one.

But isn’t it the only short one?

2. 1

my website’s https://superbaud.org/ and i’m curious what people have to say and/or offer as suggestions since i’m new to doing this sort of thing

1. 2

Nice simple and clean. Maybe “Home” is a bit empty. I would make either “About” or “Blog” the landing page instead.

2. 1

My homepage is https://fponzi.me . I need to find some time to refactor it, as it was designed for freelancing.

1. 1

I’m at https://www.acdw.net/. I’m thinking about changing it completely though.

1. 1

There is an issue on this page on narrow displays (cell phone in portrait orientation). Text is overlapping text.

1. 1

Oh yea, you’re right. Thanks for pointing it out! I’m thinking about redesigning the whole thing.

2. 1

I don’t have a dedicated homepage as such, but most of my stuff is across two sites:

1. 1

Not my homepage but I built this : http://productioncompilers.com/

I know it doesn’t have https and the CSS is just basic. But it works.

1. 1

Here’s mine: https://hugo.md/

It’s gone through a few iterations. I’m using Hugo with the Hello Friend theme, with a few modifications to add support for webmentions, and handle system theme changes.

I typically take existing themes and tweak them because I feel like I don’t have the free time to rebuild it entirely, but maybe this thread is good inspiration to make some time.

It’s hosted on DigitalOcean Kubernetes, despite being a static site, I still like to make curl -L hugo.md available, although someone did mention that Netlify can handle routing based on user agent as well.

Be gentle! 😅

1. 1

How do you host a static site on k8s? Do you self host the k8s?

1. 1

How do you host a static site on k8s?

I’m not sure what the typical workflow is, but at the moment I just run nginx in a Docker container serving the static site. If I were running more, I’d probably have a dedicated nginx container with storage backing for each site, or just proxy traffic to a storage service (some S3-compatible API).

Here’s the Dockerfile if you want to take a look: https://github.com/hugomd/blog/blob/develop/Dockerfile

Unfortunately, this means the request path has an extra hop: Internet -> DigitalOcean load balancer -> nginx ingress -> nginx

Do you self host the k8s?

I run Kubernetes at home on an Intel NUC, just a single node at the moment but I’ve been meaning to add more nodes to the cluster. I typically use it as a testing ground for new deployments, and use DigitalOcean Kubernetes as “production”, for my blog and other services.

2. 1

Not sure where it’s hosted, but it’s kinda slow? (I’m in Germany). Definitely feels more like “underperforming CMS with database” than static site. But when it’s done loading, no complaints :)

1. 1

Thanks for the feedback! That’s probably because it’s hosted in Singapore, but this is probably a good reason to move to Netlify, or host it on a CDN.

3. 1

My HTTP homepage is at http://phroxy.z3bra.org, the proxied version of my gopher hole (gopher://z3bra.org).

I am trying to eventually replace my original homepage (https://z3bra.org) by my gopher hole. For better visibility, I host a gopher/HTTP proxy that I wrote: phroxy.

So how do you like my gopher hole, and its HTTP version ?

1. 1

Mine is https://hauleth.dev. Not everyone is liking my choice of monospace font as default, but I like it. In. future I want to update colours a little and make it more passive (for example colouring is now done in the JS and I would like to make it static as well).

1. 1

I like the colors. They are clear and there is not too many of them. Nitpick: it’s not obvious that “Hauleth” at the top is clickable. I don’t think you need background for inline code, it’s pretty clear that orange is code anyway. Also, I knot it’s standard practice, but I think those “Read other posts: previous/next” can be replaced by a link to all posts instead.

1. 1

Looks fine to me but hard to find out the basics about you from this page: things you’re into, vaguely who you are. An “about me” page might be good.

1. 1

Yes, I am working on that one.

2. 1

I’m at https://www.dannyguo.com. Happy to get any feedback.

I should probably flesh out my about page. Also, I don’t know if people find the home page message pretentious or annoying. My thinking is that if my content isn’t interesting to a visitor, I should try to point them to somewhere more promising. Perhaps I should update the links with more specific suggestions.

1. 1

My site returns only the text string “404” wrapped in a 200 response.

I win!

1. 1

This is mine! Keen for feedback :)

1. 1

Google Drive’s trash is changing. Starting October 13, items will be automatically deleted forever after they’ve been in your trash for 30 days.Learn more

I guess that’s what you get if you’re hosting it like that. Also I don’t like the missing mouseover for links and I think I can sum it up as: not a fan of Google Docs. But definitely a creative solution.

1. 1

The black text on a dark blue background was difficult to read on my iPhone.

2. 1

I’m at https://morrisbrodersen.de/ - I like the minimalism but I get mixed responses regarding the structure. Maybe switch to lists/add headlines/…

1. 1

I use WordPress because I have established a relatively sane workflow around it, even for minimal sites such as my home page https://www.sebastianopilla.com/ , though in the rare occasions I want to write something I do it on https://www.datafaber.com/ .

1. 2

I like the look of comments at “datafaber”. Very clean, no icons, no noise.

2. 1

https://ane.github.io

Actually few of the sites already mentioned in this thread have been an inspiration, but can you guess which?

1. 1

Clean, I like it. Maybe I just don’t see the need for both “about” and “home”, they seem to have the same purpose.

2. 1

I’ve tried the nuxt & nuxt content with tailwind, it’s pretty cool. philidor.dev

1. 1

My website is https://keegan.page. I need more content, but as far as design goes this is what it’s been for a while (besides messing with some colors).

1. 2

Font size of inline code is a lot smaller compared with normal text. But probably that’s on the users to select fitting default monospace fonts.

1. 1

It is smaller on purpose for now since I can’t figure out how to make the increased size not affect the height between lines.

1. 2

Hmm did you try line-height: 0; ?

1. 1

Thank you, that fixed it.

2. 2

I think it’s perfect mate. Hard to think of any ways to make it better.

1. 1

Thank you very much. I did my best to keep it clean and simple to use on desktop and mobile.

3. 1

My main website for personal/professional use is basically just there so the site associated with my email address isn’t void of content, and it runs a pretty standard template that I won’t link.

My “technical” site, which is basically empty right now, is https://jslp.xyz, which I intentionally keep very minimal.

1. 1

Mine is very out of date and in the middle of a (to be soon published) revamp. Thoughts are welcome though! https://www.ashishuppala.com/

1. 1

My site is at https://abhinavsarkar.net. I’d love some reviews.

1. 1

I quite like the simplicity and the prominently-displayed feed icons for notes & posts.

I did find the distinction between note/post a little confusing at first glance. Maybe it would be worth describing what each is at the top of the /posts and /notes pages?

1. 2

Great suggestion, thanks! I added short descriptions to clarify things.

2. 1

https://sgolem.com

It’s minimal. I have plans to put a few more things in there. Thinking also about making it completely static with https://getblades.org, no JS. 🤷‍♂️

1. 2

It’s quite good.

Few nitpicks: not clear where “follow me” leads to; the code background seems too dark to me (both inline and block code). In “Halite III Bot Development Kit in Rust” table of contents has big margins between different entries. Some code blocks have horizontal scroll bars. IMO if you are planning to display lots of code in the posts, a slightly wider width would be better.

1. 1

Thanks! There are some good points there. I haven’t styled the TOC at all, after plugging it in I didn’t have time, now I’m lazy.

That protocol code snippet in the post has a reaaally long line in it, that’s why it’s a mile wide. I’ve come across considerable evidence that the things are much more readable when the lines are short (here limited to ~50ch).

Also, scrolling horizontally is very ergonomic on trackpads, but you’ve now made me think about mouse users. I’ll reconsider.

Btw I like your site, a little bit too wide for my taste, but very nice and clean! I’m a fan of those simple charts.

2. 2

Your site is like my site, but better :)

no JS

Do it, you will thank yourself.

1. 1

Thank you! Your site is also very pleasing to the eye! I’m investigating my options atm, not really happy with any solution. I’m amusing myself with the idea of writing yet another SSG.

3. 1

My site’s https://lonami.dev, definitely got a lot simpler. Dropped the gradients I made as a child a long time ago :P

1. 3

It’s nice.

But content-wise seems like everything there would be better presented on a single page.

1. 1

That’s a good point! I’ve reduced the content enough that this would actually make sense. Maybe I should give it a go and update it a tiny bit while I’m at it, but I will lose the subtle hover animations in the menu that I like.

2. 1

I like the style of your blog entries (eg. https://lonami.dev/blog/breaking-ror/index.html). The blog index could use some work though :)

1. 1

Thanks! I used to write the blogs in HTML and often would end up rolling a custom CSS for each. This got annoying but didn’t want to use generators like Jekyll (felt complex, couldn’t bother to check), so I rolled my own with a friend so I could generate static HTML from markdown. Alas, work stalled a bit, heh.

2. 1

Looks nice.

The index page looks a bit empty. I didn’t know that there was a blog until I saw another comment in this thread. Maybe it should be displayed more prominently?

1. 1

Thanks! As karolisk points, perhaps it’s worth to have it become a single page now, and display the blog more prominently too.

2. 1

„More links“ wraps somewhat awkwardly to the new line on Safari/iOS13 iPhone XR.

Blog justification on mobile crates uneven spacing. I would rather not justify text when that’s the case.

1. 1

The menu wrapping to a new line is intended, because if it doesn’t fit I still want it to show (instead of how some mobile sites actually allow scrolling sideways). I guess because the blog is another link but to my own page, it makes sense for it to be “special” unlike the links to other social media.

Justification is tricky, it makes sense for some kind of texts but it looks very off for others (which may use a lot of technical long words). So it’s hard to find when that would be appropriated, but maybe disbling it on mobile and not desktop is enough?

Thanks for the feedback!

1. 1

You’re welcome. Yes, I think disabling it on mobile would make the content a little more convenient to read.

2. 1

1. 2

Heh, it was hideous with dark blue and yellow, large fonts, a lot of borders and whatnot.

3. 1

https://www.moll.dev/

It took me the better part of a year to get my own theme ironed out, I usually work on the very backend of the stack, but it was fun! I’m open to all criticism, hopefully I’m not to late to this thread ^-^

1. 1

My very rarely updated site is here.

1. 1

I have no idea how I’m going to incorporate my blog once I finally get around to publishing some of the posts: https://cosmo.red/

Would love some tips.

1. 1

Mine is at https://eldrid.ge withe the blog at https://blog.eldrid.ge.

I write mostly about IT/infosec, but also whatever else I’m interested in at the time. I’m fairly pleased with the homepage overall, and I like the blog design-wise but it could definitely load faster I think.

1. 1

My site is at https://miguelmota.com and it’s optimized for speed and readability ;)

1. 2

it’s optimized for speed and readability

It certainly seems like it achieves those goals.

An RSS/Atom feed would be nice.

2. 1

My site is https://hojberg.xyz — Still really much need to get some blog posts on there — Really sparse in terms of content overall really. I only got it up a few months back after having gone years without a website. It feels good to have one again :)

1. 2

Nice spacing, font and colors. Followed you on Twitter - waiting for that content :)

2. 1

The problem with my site at RichardMinerich.com is that I built it 10 years ago on wordpress and don’t have a lot of free time. I’m not sure at all if I can take it forward without breaking everything.

1. 1

I’m in, dropping my site just in case there’s feedback about it. https://www.betoissues.com

Just a static blog using Zola.

1. 1

People always complain about my colours no matter what i make them :P People are just used to startimg at white-on-blue all day and real webpages hurt their eyes I think

1. 1
1. 1

Nit: bashrc.sh feels like a weird name for that file.

1. 1

Thanks. Generally, I’m aiming to have a dark solarized Tron theme/palette that works with or without Javascript. I’ve got some blog-style writings that I’ll eventually publish that exemplify the palette better than my homepage does.

I actually don’t like that the button boxes are different sizes, so that’s on the docket for things to fix. I want them to be the same size such that if any box needs to text wrap due to zoom or text length, all the boxes grow to that larger minimum size that accomodates the fit change…but I don’t know how to do that yet

Why does bashrc.sh seem like a weird name?

1. 1

Why does bashrc.sh seem like a weird name?

I think just that it’s (well, by default) .bashrc in the wild, and I usually see it as just plain bashrc if somebody leaves the leading dot off? That is, it’s the right extension if it’s going to have one, I just don’t usually see it that way.

2. 1

Hi all! My site’s at https://apas.gr and the blog at https://apas.gr/posts - would love to get some feedback. Thanks!

1. 2

It looks quite nice, I guess it’s heavily inspired by the tufte layout? For the posts I would suggest only showing a summary of it in order to give a better overview of the single articles. Currently it is a page that displays all your articles in its full-length.

1. 2

Thanks. Yes, indeed it’s based on Tufte layout. In fact, I built a minimalist static blog generator based on Tufte and this is a pertinent Wordpress theme. Will look into the posts layout - thanks!

2. 1

Cool idea! Curious to see what folks think: http://cdaniels.net/

1. 2

Nice and simple.