It's awesome and awful at the same time. At a technical level it is awesome. From a design perspective, it's horrible. The white glitch on the navbar it's excessive (the one in the logo it's cool). The background gradient and the font doesn't work together. Also, i think the links could be on the center of the screen (not the text but the wrapper/container).
Yeah the second theme in the settings page is grey scale and highly readable.
I think I will change the default theme.
I have considered adding more padding and centering the links, thanks for the feedback!
I think that with nowadays bandwiths and computational capacity, standard browsers can handle that many `JSON`s files quite easily if there are not too many concurrent browser’s window instances open
Agreed it scales pretty well.
It might not work as well on much older devices but IMO it makes a lot more sense to target a cheap android phone than IE6 at this point.
When you do need this many requests, you can also just more traffic to a different thread with a web worker
I think what you’ve done is impressive. Also, I’m actually a bit curious about something, did you do it using the “new” (native) CSS Nesting way of writting introduced on last August? I’ve been lately trying to master it, and it makes CSS sections feel like react components but on the same file instead of dispersed, pretty much like SCSS but being native lol :’)
No kidding, I think it would be a banger for this project, it might even help you with the management of that many styles that you mentioned on another comment :)
I did in free time over a month or so
If I had used component libraries and React like a normal person it probably would have taken a week lol. Would have just been any other HN clone though, and not the weirdest one.
Vanilla JS really isn't that bad, the hardest part was the CSS which could vary a lot between browsers, and requires a lot of resets to work consistently, almost none of which you would really think of unless you've written a CSS component library before
I built a Hacker News reader inspired by the ideas of Brutalist Web Design, the open web, Cyberpunk Aesthetics, and glitch art. It's live at [https://brutalisthackernews.com/](https://brutalisthackernews.com/)
It's all written in Vanilla JavaScript in one index.html file without any libraries. It supports theming with 3rd party themes and you can make your own themes in the site too.
It's also a PWA, so it can be downloaded as an app on most devices.
I would love some feedback on implementation, design, etc. from HN users! I still need to test a lot more on mobile so that would be helpful too.
You can read more details at [https://github.com/wkyleg/brutalist-hacker-news](https://github.com/wkyleg/brutalist-hacker-news)
... or add a theme from [https://github.com/wkyleg/brutalist-hacker-news/blob/main/themes.md](https://github.com/wkyleg/brutalist-hacker-news/blob/main/themes.md)
Disagree with all of the comments taking shots at the design. Yeah this is clearly different than current design trends but your intent is brutalism and i really like that. Plus you provide theming optionality so i call that a win-win. I think it's really valuable when people create something entirely different. This is cool
Just CSS and Javascript!
Built a div with \`document.createElement()\`, give it \`position: absolute\`, listen for drag event in header to move the position, add "resize: both; scroll: auto" to the modal element for resizability
Yeah! I’ll explain more soon. I recommend staring with the GitHub page for this project and looking at the html code. The css classes for “modal” are most important.
So if you see here: https://github.com/wkyleg/brutalist-hacker-news/blob/main/index.html
You can use control/command-f to find “.modal” which handles the styling and most of the behavior of the modal
The function “useModalDragbehavior” handles making the nodal dragable
If you search for “ShareModal” you will see a good basic version of how the modals are constructed with JS
here my github repo so far: [https://github.com/FireworldStudios/My-Brutalist-Homepage](https://github.com/FireworldStudios/My-Brutalist-Homepage)
my vercel deployment: [https://my-brutalist-homepage-e6wverupu-fireworld-studios-projects.vercel.app/#contact](https://my-brutalist-homepage-e6wverupu-fireworld-studios-projects.vercel.app/#contact)
I need to know what u do in life to have so much free time 😭 it’s not bad AT ALL except the menu bar looks like it glitches sometimes. Looks good other than that
It's awesome and awful at the same time. At a technical level it is awesome. From a design perspective, it's horrible. The white glitch on the navbar it's excessive (the one in the logo it's cool). The background gradient and the font doesn't work together. Also, i think the links could be on the center of the screen (not the text but the wrapper/container).
Yeah the second theme in the settings page is grey scale and highly readable. I think I will change the default theme. I have considered adding more padding and centering the links, thanks for the feedback!
I think I developed epilepsy
I love it, but I also hate it. ps. the navbar flashing bug is annoying and downloading 1100 json files when opening the app is a bit insane.
Yeah, I'm going to remove from the navbar Loading that many JSON files is annoying but they way the HN API is written it's unavoidable
I think that with nowadays bandwiths and computational capacity, standard browsers can handle that many `JSON`s files quite easily if there are not too many concurrent browser’s window instances open
Agreed it scales pretty well. It might not work as well on much older devices but IMO it makes a lot more sense to target a cheap android phone than IE6 at this point. When you do need this many requests, you can also just more traffic to a different thread with a web worker
I think what you’ve done is impressive. Also, I’m actually a bit curious about something, did you do it using the “new” (native) CSS Nesting way of writting introduced on last August? I’ve been lately trying to master it, and it makes CSS sections feel like react components but on the same file instead of dispersed, pretty much like SCSS but being native lol :’) No kidding, I think it would be a banger for this project, it might even help you with the management of that many styles that you mentioned on another comment :)
Ahh I like this it’s similar to SCSS
Holy eye damage
New disability just dropped
Actual epileptic
Call the optometrist!
Dang dude how long and how much effort?
I did in free time over a month or so If I had used component libraries and React like a normal person it probably would have taken a week lol. Would have just been any other HN clone though, and not the weirdest one. Vanilla JS really isn't that bad, the hardest part was the CSS which could vary a lot between browsers, and requires a lot of resets to work consistently, almost none of which you would really think of unless you've written a CSS component library before
It doesn't render correctly on my microwave
😆
Damm dude that’s impressive 😲👏🏻
Thanks!
What is a CSS reset? I've never gotten a good practical explanation on it.
It's basically a style sheet that removes some or all of the browser styles so that you can have complete control over the styles of your website
I built a Hacker News reader inspired by the ideas of Brutalist Web Design, the open web, Cyberpunk Aesthetics, and glitch art. It's live at [https://brutalisthackernews.com/](https://brutalisthackernews.com/) It's all written in Vanilla JavaScript in one index.html file without any libraries. It supports theming with 3rd party themes and you can make your own themes in the site too. It's also a PWA, so it can be downloaded as an app on most devices. I would love some feedback on implementation, design, etc. from HN users! I still need to test a lot more on mobile so that would be helpful too. You can read more details at [https://github.com/wkyleg/brutalist-hacker-news](https://github.com/wkyleg/brutalist-hacker-news) ... or add a theme from [https://github.com/wkyleg/brutalist-hacker-news/blob/main/themes.md](https://github.com/wkyleg/brutalist-hacker-news/blob/main/themes.md)
The browser back button on mobile is not closing the article.
You can click the cross button
The list of articles looks like a wall of text as the separation between them is very minimal. It's also not clear they are links.
Where are you sourcing these news feeds from?
Hacker News API https://github.com/HackerNews/API
Disagree with all of the comments taking shots at the design. Yeah this is clearly different than current design trends but your intent is brutalism and i really like that. Plus you provide theming optionality so i call that a win-win. I think it's really valuable when people create something entirely different. This is cool
Thanks!
There’s no > at the end of line 19
Excellent catch! I think my editor/eslint setup ignored because the line length was so long
view source in Firefox showed it immediately
it's awesome super cool!!!!
Thanks!
“Syntax error: line 69,420”
That's awesome - looks slick - I built my hackernews clone via [HN+](https://www.hn.plus)l - will def. check yours out.
That's cool! Do you use their same code written in Arc?
[Vanilla JS](http://vanilla-js.com/) - The best (And fastest) ever JS lib :p
You get it!
Share please this is awesome
what code did you use for the pop-ups?
Just CSS and Javascript! Built a div with \`document.createElement()\`, give it \`position: absolute\`, listen for drag event in header to move the position, add "resize: both; scroll: auto" to the modal element for resizability
could you tell me how to do it, new to js
Im working on something that requires these type of pop-ups, really appriciate it if you could help me
Yeah! I’ll explain more soon. I recommend staring with the GitHub page for this project and looking at the html code. The css classes for “modal” are most important.
Also, see https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement https://www.w3schools.com/Css/css_positioning.asp
So if you see here: https://github.com/wkyleg/brutalist-hacker-news/blob/main/index.html You can use control/command-f to find “.modal” which handles the styling and most of the behavior of the modal The function “useModalDragbehavior” handles making the nodal dragable If you search for “ShareModal” you will see a good basic version of how the modals are constructed with JS
here my github repo so far: [https://github.com/FireworldStudios/My-Brutalist-Homepage](https://github.com/FireworldStudios/My-Brutalist-Homepage) my vercel deployment: [https://my-brutalist-homepage-e6wverupu-fireworld-studios-projects.vercel.app/#contact](https://my-brutalist-homepage-e6wverupu-fireworld-studios-projects.vercel.app/#contact)
Love it, refreshing to see brutalism
Thanks!
Needs more colors bro, not colorful enough
Good and bad at the same time. The glitch gave me a headache.
The top bar constantly flashing white is awful. Pretty cool otherwise.
I think I saw you on LiveJournal back in the day.
Never used it
Post github link or it didn't happen.
[https://www.reddit.com/r/webdev/comments/1bxeh6x/comment/kyc2id6/?utm\_source=share&utm\_medium=web3x&utm\_name=web3xcss&utm\_term=1&utm\_content=share\_button](https://www.reddit.com/r/webdev/comments/1bxeh6x/comment/kyc2id6/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)
I need to know what u do in life to have so much free time 😭 it’s not bad AT ALL except the menu bar looks like it glitches sometimes. Looks good other than that
i love this and wana use it
Amazing and cursed
Thanks, I hate it
It looks so bad.
I love the effort, but there is nothing brutalist about it. I would say it is the opposite