Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Mini projects built with VanillaJS. No frameworks or libraries

github.com

Post reply on HN
Print view View original

81–90 of 171 posts

Re: Mini projects built with VanillaJS. No frameworks or libraries

#81

Post by 6510 »

applecrazy wrote: post #10
hilti wrote: post #6

I love these type of showcases. It‘s been a wonderful time when simply upload files via SFTP and had a running application. No need of webpack bundles, vendor libraries to achieve a simple functionality that could be solved in a few lines of code ... I really do hope this kind of developer attitude (writing pure VanillaJS) is coming back.

There's a reason why a lot of those libraries and tools are used though. Webpack bundles are used to strip down multiple JS files and libraries into a single bundle that contains only what is needed to run a particular application. Libraries like React serve a purpose too, particularly when you're building large applications that need to be maintained by many people all at once, or when you need insane compatibility…

Right, its so funny! This is why I cant/wont/refuse to find a job of this type. I can write JS just fine. In employment I would have to glue bloated libraries (which takes me forever!) and then wait for tools to purge the unwanted garbage from the creation. The end result is slow and I feel clueless what is actually going on. Of course this also means I'm impossible to work with which only adds to the joke.

I do have a sense of humor about it. https://jsfiddle.net/gaby_de_wilde/c8bhcatj/

Re: Mini projects built with VanillaJS. No frameworks or libraries

#83

Post by mromanuk »

adrianh wrote: post #46

Soundslice ( https://www.soundslice.com/ ) — a website built around interactive/responsive sheet music, rendering the music entirely in client-side JS — doesn't use JavaScript frameworks or libraries. I'm the developer of Soundslice and continue to be happy with the vanilla JS decision, 8+ years into the company. It means better performance, clearer code, smaller JS filesizes. I gave a talk about it here: https://www…

I checked out the rendering of those scales, beautifully done!

Re: Mini projects built with VanillaJS. No frameworks or libraries

#84

Post by erikbye »

baxuz wrote: post #34

Here's one I did as an assignment for a job interview: https://github.com/ivancuric/hn-scroll You can see it in action here: https://hn-scroll.netlify.com/ The task was to build an offline capable site which displayed the latest Hacker News posts, and loaded more lazily when scrolling. I had to use the official HN API, and I couldn't have any middleware or caching. Everything had to be done client-side. The app ended…

Heads up: I'm using Firefox, and the posts do not appear until I move the mouse cursor.

Re: Mini projects built with VanillaJS. No frameworks or libraries

#85

Post by baxuz »

PudgePacket wrote: post #65
baxuz wrote: post #51

Earlier quoted context omitted.

Amazing site. I noticed one thing that could easily improve the feel of the site — the sheet music playhead which is outside of the canvas. You are using fractional units to position it, but you're also using left/top/height properties which can't be fractional. If you convert these to GPU translated layers via translate, you'll get a smoother playhead since these can be positioned fractionally, plus you'll cut down…

The bars are identical for me. 4k monitor with firefox on windows. Could it be something to do with resolution?

It's a firefox bug. I needed to add a very fine rotation for it to render subpixel, so you can try again. You can also see the repaints if you open up the dev tools: https://i.imgur.com/A8btxpu.png

Re: Mini projects built with VanillaJS. No frameworks or libraries

#86

Post by baxuz »

erikbye wrote: post #84
baxuz wrote: post #34

Here's one I did as an assignment for a job interview: https://github.com/ivancuric/hn-scroll You can see it in action here: https://hn-scroll.netlify.com/ The task was to build an offline capable site which displayed the latest Hacker News posts, and loaded more lazily when scrolling. I had to use the official HN API, and I couldn't have any middleware or caching. Everything had to be done client-side. The app ended…

Heads up: I'm using Firefox, and the posts do not appear until I move the mouse cursor.

Works here on Firefox Dev. Try refreshing, there was a bug I missed with the api returning 200 for a post, but the content was `null`. Fixed it, but you still might have the old cached JS due to the service workers.

Re: Mini projects built with VanillaJS. No frameworks or libraries

#87

Post by tekkk »

baxuz wrote: post #34

Here's one I did as an assignment for a job interview: https://github.com/ivancuric/hn-scroll You can see it in action here: https://hn-scroll.netlify.com/ The task was to build an offline capable site which displayed the latest Hacker News posts, and loaded more lazily when scrolling. I had to use the official HN API, and I couldn't have any middleware or caching. Everything had to be done client-side. The app ended…

That's nice. I myself did try out one too, as a hobby project to serve as an alternative frontend for a local gym https://varjosport.net/ There's a small flicker as the app generates the HTML which still annoys me but I couldn't bother to write a Lambda to server-side render the HTML every time the data is refreshed.

One thing I noticed though was that creating HTML fragments is a major pain in the ass, which I see you've solved with .createContextualFragment Interesting, I might have to try that one out too.

I myself quite immediately after starting to parse my JSON payload and turning it into dynamic HTML elements turned to Preact, which I guess as a lesser version of React is an acceptable choice. One thing which still was left to irk me were the CSS classes. I'm not a big fan of writing them anymore, with BEM syntax or not. Styled Components in my opinion is the future of writing modular React/web components. But since I vowed to myself to keep this simple, I stuck with CSS.

But it's indeed an interesting project to create a minimal modern website without the massive toolings/libraries you normally take for granted with React etc. There's a lesson there to be learnt in how sometimes that complexity is unnecessary, but sadly it's often not in the scope of a project to start optimizing such things. And I can't blame them, since when things get complicated you much rather have your app already written in React than having to rewrite it from custom JS/TS mess.

Re: Mini projects built with VanillaJS. No frameworks or libraries

#88

Post by mjfisher »

baxuz wrote: post #52
beachy wrote: post #50

Earlier quoted context omitted.

Your comment makes me imagine a more nuanced technical interview process - i.e you get to provide feedback to criticisms from the interviewer, you get to escalate/request review from someone else at the employer if you disagree with the interviewer. A platform ensures that the protocols are abided by by both employer and candidate. These sorts of interactions sound pretty far out now, but a few years ago who would ha…

It wasn't real time, but a home assingment. Sadly, I didn't get a chance to provide feedback to the criticisms. At least not in an impactful way — the decision has been made.

> Sadly, I didn't get a chance to provide feedback to the criticisms

That's a shame. It sounds like the criteria were fairly well defined, but it would be nice if your assignment was used as a starting point for good in person discussion. E.g. "we think the code in index.js was too coupled - what could we do to break that out?"

Re: Mini projects built with VanillaJS. No frameworks or libraries

#89

Post by maggit »

I have recently experimented with writing dependency-free JS. I ended up using Webpack and Babel, but no frameworks or libraries, and I find it quite nice to work with. These are my tips for making the best of it: https://magnushoff.com/blog/dependency-free-javascript/

Re: Mini projects built with VanillaJS. No frameworks or libraries

#90

Post by brlewis »

hilti wrote: post #6

I love these type of showcases. It‘s been a wonderful time when simply upload files via SFTP and had a running application. No need of webpack bundles, vendor libraries to achieve a simple functionality that could be solved in a few lines of code ... I really do hope this kind of developer attitude (writing pure VanillaJS) is coming back.

> I really do hope this kind of developer attitude (writing pure VanillaJS) is coming back.

If it's coming, it's coming for the first time.

Way back in the first decade of this century, when JavaScript was first transitioning from a language you wanted to learn as little of as possible to a language you might actually want to learn, jQuery sprang up as a way to deal with browser incompatibilities. I went to a jQuery conference where people were advised to really learn JavaScript and use it where possible, not always relying on jQuery. I don't think that advice was widely heeded.

React took over from jQuery and has the same problem. People learn the library first and slowly pick up the language, hopefully, as time goes on.

Post reply on HN