so happy to see brad and traversy media get some attention on hacker news. been watching his youtube channel for a long time and learned so much from him.
Mini projects built with VanillaJS. No frameworks or libraries
41–50 of 171 posts
Re: Mini projects built with VanillaJS. No frameworks or libraries
#42Quick / 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 ?
Physics and game logic should always run at fixed intervals and not depend on the time available. Otherwise you may run into oscillations that can be observed e.g. in games with ragdoll physics where bodies suddenly start to twitch due to such glitches. Thus, physics and logic should run at a fixed rate (e.g. 120 Hz) while graphics can run at whatever speed the machine can manage.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#43Quick / 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/Web/API/window/requ...
[3] https://github.com/bradtraversy/vanillawebprojects/blob/mast...
Re: Mini projects built with VanillaJS. No frameworks or libraries
#44Cool! 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 actually built using the stage)
Re: Mini projects built with VanillaJS. No frameworks or libraries
#45Here'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 a nice, clean, simple approach - I learned about `createContextualFragment()`, so thanks!
I wanted to ask, did the company you were interviewing for tell you what they wanted to get out of the assignment on their end - specifically what they were assessing you on?
Re: Mini projects built with VanillaJS. No frameworks or libraries
#46Soundslice (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.youtube.com/watch?v=VvOsegaN9Wk ("A framework author's case against frameworks") and here: https://www.youtube.com/watch?v=XH5EtQge_Bg ("How I optimized my JavaScript sheetmusic rendering engine")
Re: Mini projects built with VanillaJS. No frameworks or libraries
#47Here'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 a nice, clean, simple approach - I learned about `createContextualFragment()`, so thanks! I wanted to ask, did the company you were interviewing for tell you what they wanted to get out of the assignment on their end - specifically what they were assessing you on?
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 #1 and #3. As for #2, they found it too tightly coupled and hard to read.
I thought that the app is simple enough to not warrant extracting modules in the main app logic. The coupling was also there for performance / filesize reasons.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#48I'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…
I'm having trouble reasoning about this code, can you show me how it's used?
It creates a function returning a function, where the argument to the first (which is a template) is used as a closure in the second (which takes a dict of values).
The last function called in turn creates a function using the Function constructor, which, since it takes a string argument as the function body, allows the expansion of the values dict into variables and thus the population of the template string:
applyTemplate("aaa ${v}")({"v":"yo"}) --> "aaa yo"
Re: Mini projects built with VanillaJS. No frameworks or libraries
#49Earlier quoted context omitted.
I'm having trouble reasoning about this code, can you show me how it's used?
It creates a function returning a function, where the argument to the first (which is a template) is used as a closure in the second (which takes a dict of values). The last function called in turn creates a function using the Function constructor, which, since it takes a string argument as the function body, allows the expansion of the values dict into variables and thus the population of the template string: applyT…
How come you haven't used tagged template literals? These would fit this use case:
https://codeburst.io/javascript-es6-tagged-template-literals...
Re: Mini projects built with VanillaJS. No frameworks or libraries
#50Earlier quoted context omitted.
That's a nice, clean, simple approach - I learned about `createContextualFragment()`, so thanks! I wanted to ask, did the company you were interviewing for tell you what they wanted to get out of the assignment on their end - specifically what they were assessing you on?
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 have thought that people would be typing code into a web page in real time as part of a job interview process?