Live data from Hacker News

Mini projects built with VanillaJS. No frameworks or libraries

github.com

121–130 of 171 posts

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

#121
When I was working for the USGS I was tasked with making a stream tracer to help the national park service fight oil spills at mammoth cave. However I wasn’t allowed to write any server code due to security issues so I wrote the whole algorithm in javascript. It would take about 1 min to parse all the geojson streams into what what I called a node array which contained all the nodes containing the info of where streams connect and which stream they either flow downwards or upwards into. I eventually learned how to use node.js to allow me to run the node processor on the computer and then to just load the output files into the algorithm to allow the website to bypass this processing. I made a big push to try and open source my algorithm (minus all the confidential data the project had), however the website doesn’t have all the fancy controls that I created for the real project as I was hired by another company fairly quickly once I started applying around with this and a d3.js choropleth under my belt as my 2 first professional projects.

Tlbsoftware.github.io/StreamTracer.html

GitHub.com/tlbsoftware/streamtracer

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

#123
post #51
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…

Oooh, thanks very much for this! Will poke around...

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

#124
post #80

Earlier quoted context omitted.

Probably a bit more than 12h, and I have to give it to the company, the project was compensated. This was the only time I've experienced that.

I distrust any interview that includes something like this. It's an arbitrary construct that is not indicative of what form the work will take. Only the first three months of working with someone will give any real indication of what'll be like to work with them for another three+ years.

Yeah we created a test for our interview but we give it onsite I think requiring people to do work even if its compensated is wrong, its not that hard to put together a small exam based on the source for your projects to analyze whether a candidate can handle the work.

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

#125
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…

There's an irony about posting in a topic about simple, vanilla, no-framework scripting and then linking to a repository with the following unnecessary ancillary files:

    .gitignore
    .prettierrc
    README.md
    REQUIREMENTS.md
    manifest.webmanifest
    package.json
    tsconfig.json
    yarn.lock
Plus the actual source code is spread over four TypeScript files, JavaScript, CSS, and HTML.

This isn't meant as criticism of your code specifically but of "modern" web development which hypocritically espouses simplicity but actually increases complexity of development.

My point is your app could have been a single HTML file (or HTML, JavaScript, and CSS if you want to split hairs). Instead there's 15+ files because that's the state of modern development.

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

#126
post #80

Earlier quoted context omitted.

Probably a bit more than 12h, and I have to give it to the company, the project was compensated. This was the only time I've experienced that.

I distrust any interview that includes something like this. It's an arbitrary construct that is not indicative of what form the work will take. Only the first three months of working with someone will give any real indication of what'll be like to work with them for another three+ years.

> It's an arbitrary construct that is not indicative of what form the work will take.

Agreed.

I had a similar code challenge and after joining the company, in the first year of work I did little if any JS work which even approached the level of the challenge I was presented with. To this day, I'm still bitter the company gave me the old "bait and switch" tactic to get me to come work there.

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

#127
post #47

Earlier 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 #…

Too tightly coupled? Fuck me. I'd have given them a single .js file. There's a point where decoupling everything is just a complete waste of time. Sounds like the company was run by idealistic developers who have never had to work under real-world deadlines.

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

#128
post #31

Earlier quoted context omitted.

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…

IE11 is "insane compatibility" now? rants about having to support IE6

Well, I don’t write JS for a living, so I haven’t really needed to support anything other than relatively modern browsers.

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

#129
post #79

Earlier quoted context omitted.

It depends on the scale of your project. Not using a cement mixer is a breath of fresh air if you just need the mortar to fix a single brick.

I feel the analogy is more like: You need to fix a single brick so you buy 72 pallets of bricks, buy a fork lift, 5 cement trucks, buy a garage to park them, try to acquire at least 2 cement factories, hire 4 people to do logistics, someone to do HR, 12 truck drivers and 4 fork lift chauffeurs. Placing the brick is outsourced.

I like that this comment is from “6510”. I loved the old 6502 and did a teeny bit of assembly programming on that back in the day.

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

#130
post #122

Its striking how clean a lot of the js code is for these projects. They do so much with so little

Right now I am working with a React app that is even more striking - how little it does with so much code. Though I am starting to see the trick. Keep making wrappers that only reference other wrappers.
Post reply on HN