Show HN: Brutalist Hacker News – A HN reader inspired by brutalist web design (brutalisthackernews.com)
The entire project is crafted in Vanilla JavaScript, contained within a single index.html file, eschewing any external libraries. It features support for theming, including the use of third-party themes. Additionally, users have the capability to create and apply their own themes directly within the site.
Moreover, the application is designed as a Progressive Web App (PWA), enabling it to be downloaded and used as an app on most devices.
I'm eager to receive feedback on both the implementation and design aspects, particularly from the Hacker News community. Mobile device testing remains a priority for further refinement, so insights in this area would be particularly valuable.
For more detailed information and to explore further:
- Project details are available at https://github.com/wkyleg/brutalist-hacker-news
- To add or experiment with themes, please visit https://github.com/wkyleg/brutalist-hacker-news/blob/main/th...
234 comments
[ 3.5 ms ] story [ 71.7 ms ] thread"Brutalist buildings are characterised by minimalist constructions that showcase the bare building materials and structural elements over decorative design." says Wikipedia. The closest thing to this definition is the original https://motherfuckingwebsite.com/ and not one of its later variations.
One day I did some contract work at Giorgio Armani's offices in Milan, and, ignorant of brutalism, I thought it was the ugliest building I've ever been in. The entire interior was naked grey concrete. The floor, walls, ceiling. Everything was grey concrete. Now I know that it was brutalist in design, and as an art style it usually is pretty ugly, bare and quite gray.
https://en.wiktionary.org/wiki/Brutalism
e: ah, in this very thread https://secretgeek.github.io/html_wysiwyg/html.html
Umm...the French word you're looking for is "beton". The rest of the thread has plenty of (correct) definitions of "brut" for reference.
> incorporate elements of glitch, retro, video-game saturated colors
This doesn't seem related to the ethos of "real" brutalism, nor Neo-brutalism.
> modernslick web design, these creations invoke something similar to the spirit of brutalist.
How? Because people generally find them unappealing?
Brutalism is a minimalist movement characterized by showing the raw construction and function over superfluous elements and design flourishes.
Neo-brutalism is a similarly minimalist design style that focuses more on color and layout, but caries with it the simple and clear construction, with simple shapes and typography.
Adding "glitch" and retro video game references seems directly opposed to the core intent of both movements, both the minimalist nature, and the shying away from superfluous decorations. Even the user of Emoji iconography instead of plain text is non-brutalist. Neo-brutalism the re-imaginated design movement carries the original ethos with its focus on the raw elements that make up the design (eg. typography) over decoration. The classic gumroad example is a perfect demonstration - clear, focused typography, boxes with simple, stark borders to delimit various UI elements, etc.
I feel like I can say this because I'm Gen-Z, and not some old man yelling at the clouds, but let's not use the name of random styles to reference new and unrelated styles.
Can it not be more than what you imagine it to be? Can it not grow with the times? Can its forms not adapt? Its definition not encompass more than what was previously imagined?
Or do you believe it be like "the static dictionary" of art history? where everything, once established, remains unaltered forever? To me, that seems kind of ahistorical, things change and grow. Isn't that what's going on here? Hahaha! :) I think it is!
Things can grow and change, and language especially can change too. But even as things change, language is still used to convey meaning, and if words can be used to mean anything at any time, it no longer becomes a tool to convey meaning. Maybe one day we’ll say the color of the sky is “green”. But the first guy to point to the sky and call it “green” should expect a lot of people telling him that actually it’s “blue”. Isn't that what's going on here? Hahaha! :) I think it is!
On a more serious and academic note, things change, and styles and movements and definitions change. This is known and accepted, and not really the goal of this debate. But styles and movements are defined by a collective, they’re contemporary to a time and place and group of people. One guy self-labeling his work on HN is not the evolution of a movement. Movements are defined by a group of people working together (or at least interacting) to define their movement. There is a social discourse amongst them, and collective understanding - even if it changes over time.
Neo-brutalism is a movement that is happening now, across the internet, by a lot of people. It is distinct from the 1950s brutalism (hence the new name). Most of those people have clear and overlapping idea of what they’re creating - many literally publish goals and definitions of what it means to them. Those people are the ones engaging in a contemporary discourse around design and style, and defining their movement… while a lone HN post is using their name but not their discourse.
gumroad is one of the most popular examples: https://gumroad.com/
Neobrutalism adds color and bold design to brutalism, but maintains the simple focus on structure and function. NB features prominent and simple shapes to delimit UI elements and buttons, and bold and prominent typography.
NB is not "Retro" nor "cyberpunk", and it doesn't add in superfluous details and decorative elements. You wouldn't use Emoji in NB when a simple bit of plaintext would do.
Good for the OP for working hard to create something very fun and unique, but it is not Brutalism nor NeoBrutalism.
Otherwise, I was more concerned with the approach to software development and bloat
My hometown, Toronto, is rather infamous for its fondness of brutalism: https://www.instagram.com/torontobrutalist/ I personally used to always hate it but some of it has grown on me.
But if you change the theme to grayscale I can kind of see the connection to brutalism. The visible div borders around every comment are bare structural elements, and the huge skeuomorphic buttons are certainly closer to brutalism than HN's UI. HN is about the UI being minimalistic and muted, out of the way to the point of being nearly invisible. Brutalism on the other hand is about a kind of in-your-face minimalism, which this version does capture in a way.
1 https://aesthetics.fandom.com/wiki/Frutiger_Aero
Thank you for making this. So cool. I would love to throw a browser in there. I have a retro page for a browser, but it's not quite done: https://browse.cloudtabs.net/roses/macintosh_system.index.ht...
I just checkout out your live demo at https://brutalisthackernews.com/top?storyModalIdList=3995282...
It's even nice and useable. I love how stuff just opens. It's crazy, it's really cool. I love how you just like "abundant windows". So cool. This is like perfect desktop. The way it works, takes me back. So cool to see HN through the prism of this ancient technology with a modern/glitchy color aesthetic twist. Love it.
I hope you keep working on this :)
It has more Javascript and the back button doesn't work. So, compared to this, the original Hacker News is actually Brutalist.
Maybe I don't get it.
You can be generous with your interpretation by understanding, compared to modern bland slick web design, this stuff can be viewed as invoking a brutalist experience for the viewer/participant, which while differing in the letter of the previous usage, aligns in many ways with the spirit of it.
Of course, art is subjective experience and perception as well. I get if you feel differently and that's interesting! I'm sure you "get it" from where you stand. And that's perfectly valid I think. :)
Now, a color must be picked when you make a website, and it doesn't have to look grey, as pixels do not have an inherent color, unlike real world materials, such as concrete, wood or metals. But if you add useless animations (that glitchy thing at the top is obnoxious) that exist solely for the purpose of looking cool and not aid with understanding the UI, you are doing the absolute opposite of brutalism: form over function. This HN 'app' is several times worse to actually use over plain HN. It's not more legible, it's distracting, it breaks the back button etc.
I wouldn't call this "appropriation of brutalism" but "misunderstanding of brutalism".
It is definitely not ""antiquated"" to care about usability and removing distractions.
Browser defaults are the inherent form of a website. Picking a color yourself is adding ornamentation.
But you cannot distinguish between an artist appropriating and misunderstanding unless you know their level of understanding, that's your limit of understanding.
So I think you need to be generous and say, "Well it could cut either way, but they're probably reappropriating it"
There's also the idea that an individual artist could be unconscious of the historic perspective -- which is okay -- but part of a movement that is conscious of that, and are, together, reappropriating that historic perspectives.
I think all of these things are happening here, but with this artist I think they're aware of this stuff - not that i care, because I'm not judging their ability to participate in art/creation or the history of brutalism based on my grading of their knowledge of art history - haha! :)
But whatever you want to lock that definition of brutalism into -- and I appreciate your perspective -- it seems that a 'brutalist' definition of brutalism would be very pared back, rather than decorative with elaborately overly specific and burdensome definitions - ha! :) not that I'm saying yours is that -- what I'm saying is brutalism's brutalist definition would be practical and incorporate the realities of how artists' work and incorporate and reinterpret historical experience over time. Would it not? Wouldn't that be in the spirit of brutalism? Or do you hope brutalism dies in a particular invocation in the past, and is always stuck there, locked to its historical forms?
I think the best way to honor it is to let it grow with the times. And I think that's what's going on here. In fact the tension created by this work, speaks I think to how much it does reference the historical territory of brutalism, and the experience invoked by that -- because were it not operating within that territory, it's unlikely so many would-be brutalists on this thread, would feel so threatened by it as to become territorial. In other words, if all it was doing was throwing the word on there lightly, with no substance, there'd be barely a whimper. It would have no impact. The fact that it's resonated indicates it's doing much more than that. Would you not say so?
It has to have, for it to have caused this lively debate about the nature of brutalism itself. This is a good thing! Hahaha! :)
To me there's no "brutalist experience" involved here, and what you describe doesn't seem to align in any way at all to the spirit of the original use.
I guess...is it impossible for you to look through the lens that perhaps there is something brutalist about it?
I would also bet it uses JavaScript for the "hyperlinks" but haven't checked.
When this happens you can click the up arrow to A) open in new tab if in browser or B) open in in browser window if browsing as mobile or desktop app from PWA
https://secretgeek.github.io/html_wysiwyg/html.html
Would love to see a terminal/TUI version of this
This would be a bit hard to render in a terminal but a terminal browser like Lynx (https://en.wikipedia.org/wiki/Lynx_(web_browser)) might work for this site
Usability and readability first!
Arguably HN is already pretty brutalist. As a second exemplar, I consider https://brutaldon.org pretty brutalist.
It seems plausible that you can't be brutalist and be inaccessible without javascript enabled.
It seems plausible that themes are the antithesis of brutalism. The point is to show the underlying structure. Not to add pretend structure.
... Which in a weird way describes some rather snazzy websites with inconsistent content policies and Kafkaesque appeals.
Since it's hidden, it's a kind of cryptobrutalism, to (perhaps unnecessarily) coin a new term.
This specific website we’re discussing is actually quite full of flourishes, and so not brutalist in the architectural sense.
I don’t really see that site as really brutalism even in this sense. If anything, it hews a lot closer to the Small Web, such as what one might find in Gemini space.
But this is a bit of a charicature of brutalism. In reality it does consider human experience, but it perhaps values different aspects of it. Brutalist paces are built to facilitate flows of people, to make it easy to get done what you need to. But it is also a reaction to traditional architecture styles which carries with them a lot of baggage: often certain social structures such as stratification, empire, patriarchy, racial inequality, etc. When we consider brutalism as an act of opposition to these, the humanistic intent behind it shines through, even though it make the building no more appealing.
Brutalist spaces can in my opinion be welcoming and inviting if furnished correctly. To me they have a nostalgic and hopeful connotation because I walked through them growing up. Nowadays they're a refreshing change from the kind of corporate glass and plastered concrete spaces of today.
So kind of like the positive-spin version of "this entity doesn't care who you are", in that it has no particular bias or judgement.
The mastodon client was OK.
“The Shortcut
$100 PlayStation gift card deal, Disney+ password crackdown, New Matrix movie, Budget AirPods, Samsung TVs [10h]”
(Hn saving you from all the emoji in that headline too…)
Sure, RSS readers do still exist, but they are anything other than brutalist. Janky UI/UX combined with rent-seeking subscription models, ultimately doing little or nothing that your native client couldn't have done.
Don't get me started on the fact that apps like Feedly are now trying to add AI/ML to the mix, entirely missing the point that if I'm using an RSS reader it's because I want to be the one to choose what I read and how.
Then even if all of that wasn't an issue, most publications wouldn't want to make it any easier to avoid their advertising and tracking interactions.
Not to say I don't like the work here but it's definitely more about esthetic in my opinion
A German hackers blog, he wrote the webserver behind it himself. The styling is as brutalist as it gets. And it just works.
This is my goto "do I have access to the internet"-website because it is so damn fast.
What's that? Why yes, I do browse without Javascript. HN original works fine without it.
I wasn’t really interested in catering to the 0.00001% of users who disable Javascript. I like the standards of the open web and think they’re worth building on.
While imperfect, there’s nothing comparable in building cross platform applications that are also secure, easy to develop for, easy to release, easily capable of being audited
* It's cross platform and doesn't need to be installed on any device.
* It doesn't need to be “audited”. It's secure. It's easy to develop for. It's laughably easy to release.
* You weren't interested in accessibility, or people with bandwidth restrictions or connection problems, or who are just tired of the relentless firehose of shit that comes in on the “javascript” channel.
https://klikkentheke.com is a great directory of minimalist brutalist typographically driven websites.
Yours feels a little like a retro hacker UI.
By not being minimal, it's it's more "minimal" than they intended.