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

51–60 of 171 posts

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

#51

Post by baxuz »

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…

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 on the repaints!

Here's an example: https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hide...

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

#52

Post by baxuz »

beachy wrote: post #50
baxuz wrote: post #47

Earlier quoted context omitted.

Thanks! I really appreciate that! I think I can post the evaluation criteria: 1) App performance. We will be looking at the wait times for reader to see the content — the shorter, the better. 2) We will evaluate your code’s quality. Does your code have good modular design and testability? Is it easy to read? 3) We prefer the project to be lightweight, and all dependencies should be well justified. I was focusing on #…

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.

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

#53

Post by madeofpalk »

errantspark wrote: post #15

I'm so glad to see this and projects like this getting attention. I'm responsible for several tools at my current job using nothing but straight JS, including a couple which have had a significant (positive) impact on the special projects team here. I love JS. I love it's ubiquity (F12 in any browser and you've got a REPL). I love the freedom I have when I write in it to do whatever the fuck I want and shoot myself i…

love to use eval!

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

#54

Post by roebk »

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…

I just wanted to say I learned a few things reading through the source. Great work :)

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

#55

Post by dgb23 »

skrebbel wrote: post #39
errantspark wrote: post #15

I'm so glad to see this and projects like this getting attention. I'm responsible for several tools at my current job using nothing but straight JS, including a couple which have had a significant (positive) impact on the special projects team here. I love JS. I love it's ubiquity (F12 in any browser and you've got a REPL). I love the freedom I have when I write in it to do whatever the fuck I want and shoot myself i…

Woa there! Why would JavaScript have `with` if you weren't intended to use it‽ How about: let applyTemplate = template => object => { with(object) { return eval("`"+template+"`"); } }

From the MDN docs:

> Use of the with statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Contra" paragraph in the "Description" section below for details.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

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

#56

Post by rypskar »

bArray wrote: post #43
IMTDb wrote: post #40

Quick / dumb question : in the breakout game example ( https://github.com/bradtraversy/vanillawebprojects/blob/mast... ) wouldn't the game feel fast/slow depending on the power of your computer since the physics loop does not make use of the elapsed time between updates ?

The function `requestAnimationFrame(update)` on line 191 [1], typically updates at 60 frames per second [2]. When it fires, it re-calls the `update()` function starting on line 184 [3]. As you say though, it's not 100% reliable in terms of speed, but I imagine 90%+ who play the game get a good experience. [1] https://github.com/bradtraversy/vanillawebprojects/blob/mast... [2] https://developer.mozilla.org/en-US/docs/…

True when using a normal monitor, but could be a problem if using a 120Hz monitor or if the previous call didn't finish fast enough. The best is to use the timestamp requestAnimationFrame sends in to the callback to find time-delta since last call

>> The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

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

#57

Post by Blaiz0r »

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…

This runs nice and fast.

Out of interest, why did you use display: flex; on the li's and add the list number inside div's?

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

#58

Post by layoutIfNeeded »

naikus wrote: post #44

Cool! I've build a couple of vanilla js projects, a widget and a framework. https://github.com/naikus/svg-gauge This one is all in one widget completely in vanilla js. Zero deps. An interesting thing is there is an angular-js wrapper that someone else built on top of this. This one is actually a view lifecycle management framework for simple SPAs and mobile web apps https://naikus.github.io/stage/ (This site is actua…

A framework by definition cannot be vanilla JS...

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

#59

Post by olavgg »

t0astbread wrote: post #9
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.

Until we rediscover that manually keeping the DOM up-to-date is tedious and error prone for almost any project and switch to a good middle ground such as Preact or React without a build step

There are design patterns that mitigate this, take a look on how you can use the observer pattern to update dom elements or html fragments.

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

#60

Post by baxuz »

roebk wrote: post #54
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…

I just wanted to say I learned a few things reading through the source. Great work :)

Thanks! Really means a lot to me.
Post reply on HN