Brutalist Hacker News

Introduction

Brutalist Hacker News is a Hacker News reader built on the ideas of Brutalist Web Design, the open web, Cyberpunk Aesthetics, and glitch art.

Inspired by the raw and functional architecture from which it draws its name, Brutalist Web Design advocates for simplicity, efficiency, and removing all but the essential. This project aims to embody those principles, offering an alternative to the increasingly bloated sites dominating the web today. The aesthetics of cyberpunk and glitch art are a natural fit, as brutalist web sites tend to need to re-imagine common UX patterns in different and more simple ways.

This project is in alpha and user feedback, testing, and bug reports are welcome! There are a few known issues on mobile devices right now and the site generally functions better on desktop.

Inspiration

The inspiration of Brutalist Hacker News is a desire to challenge the status quo of web design and JavaScript development. In a landscape filled with heavy JavaScript frameworks, tool bloat, and increasing abstraction there's beauty and efficiency in returning to vanilla JavaScript and embracing the simplicity it offers, as well as it's performance. Modern JavaScript has also improved drastically over the past few years and has become much more pleasant to work with.

Brutalism can yield much better UI/UX. Modern web apps often have individual features optimized and A/B tested to the point the overall experience suffers, and Dark patterns create experiences that are often complicated and confusing, if not malicious to end users.

For much of the world, an element of comparative brutalism is exigent, where ~200 USD Android phones and slow 3G are the norm. Brutalism also lends itself to better accessibility for the visually impaired and users with screen readers.

This project is built to see what is possible with only bare web technologies to an extreme: There is only 1 index.html file, with no other files, libraries, or dependencies. Linters are configured in the repo as a courtesy but are not needed to run the application. The build server to run the application for testing is a simple node.js script. The file for the site is served without minification or removal of comments so that users can inspect the document, and easily change it's behavior if they so desire. As such, this site is also a good playground for students learning Javascript.

Themes

Themes can be added to the site in the settings menu of the page, or users can create their own themes with the built in tools.

In themes.md one can browse external themes to add, or follow the instructions to add one's own theme with a Pull Request.

Contribution Guide

Contributions are welcome, such as new features, themes, or bug fixes.

Running the Project Locally

Clone the repository:

git clonehttps://github.com/wkyleg/brutalist-hacker-news.git

Navigate to the project directory:

cd brutalist-hacker-news

You can install the dependencies for linting, but this isn't strictly needed

npm i

To lint

npm run lint:js
npm run lint:js:fix
npm run lint:css
npm run lint:css:fix

To run the local development server

npm run dev

Reflections on process

CSS incompatibilities were probably the most painful part of building this, which could vary substantially across browsers still, especially when dealing with mobile scrolling behavior. Ionic Framework has some good reset properties that I used for inspiration.
I'm not really a fan of the emojis in the UI, but they were the only option that didn't involve adding a icon library. They look weird, but at least in a way that might seem intentional. I think I will add SVG based icons at some point.
There were almost no issues with cross browser JavaScript compatibility. Modern JS works well across browsers and something like jQuery is basically obsolete.
The Hacker News API posed it's own benefits as well as difficulties to work with. The endpoints for various lists of stories only return an 500 element array of IDs, so the client needs to load these itself. To avoid overloading the browser with 500 HTTP requests I use the loading animation you see while the list of IDs is loading, then load the stories themselves asynchronously with the Intersection Observer API.
LLMs like ChatGPT and Github Copilot could be were useful when building this. Maybe they even make frameworks less needed. Sometimes they would think of edge cases that I could not. They would also hallucinate elements on the DOM that didn't exist though. I would say they were mostly useful as autocomplete feature and generally didn't understand complex or convoluted logic as well.
This was a very different from typical modern development with TypeScript. It was nice to be able to use JavaScript console as a REPL for debugging though. Plain JavaScript is really much better than it is given credit for, but you need to think much more like a LISP programmer.
When you use Vanilla JavaScript this way it where all functions are global and extend on browser behavior it feels a lot more like developing your application as a DSL from the bottom up. It's messy but it's kind of fun to build with a browser the way it was originally indented, which is really more like Self, Smalltalk, LISP, although this aproach doesn't scale very well
I'm not opposed to forking this project and creating a more workable codebase that isn't one file, but I would like to do so with care. It's easy to add one tool such as a build system for minification, but then the number of tools tends to cascade and one is better off using a normal framework. I think Vanilla JS is not more widely adopted because the defaults of frameworks are too convenient and allow scaling users of a codebase so much better with sensible defaults.

cracdev / brutalist-hacker-news Goto Github PK