A ‘mini’ simulation that I have in pure JavaScript:
http://aperocky.com/prehistoric
(Mobile not fully supported)
Did use Pixi for sprites and display, but that’s kind of unavoidable.
Mini projects built with VanillaJS. No frameworks or libraries
131–140 of 171 posts
Re: Mini projects built with VanillaJS. No frameworks or libraries
#132Here'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 specific…
A lot of people think a README file is important.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#133I normally do iOS development and have been building a few fun sites in the last few years and because I'm not familiar with web front-end frameworks and tooling, all the stuff I've done[1] is done in vanilla javascript. I've found it pretty easy to build things just using it alone, although my apps are just mini projects.
[1] See https://www.ussherpress.com/synthiejs/ for a simple synth player using web audio or my request-a-drawing site https://www.drommysommy.com
Re: Mini projects built with VanillaJS. No frameworks or libraries
#134Here'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 specific…
Right, OP totally should have included the interview question requirements as a commented block at the top of index.html instead of separating it out. It's way too complex as is.
And definitely, .gitignore is well known to be responsible for the "complexity of web development." Maybe we should include .gitignore in index.html too?
Re: Mini projects built with VanillaJS. No frameworks or libraries
#135Here'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 specific…
These files are supposed to be in every single folder nowadays.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#136Here'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 want to understand how this works completely client-side without any server side support. Normally, I would expect that when I am visiting hn-scroll.netlify.com, any API calls to hacker-news.firebaseio.com would get blocked by the browser to prevent cross-origin request. But your app does work fine and the source code at https://github.com/ivancuric/hn-scroll/blob/master/src/sw.js also seems to be working fine.
How is this app able to make cross-origin request? Can someone explain the security principles behind this to me?
Re: Mini projects built with VanillaJS. No frameworks or libraries
#137I 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.
Why sftp? If you can ssh you can also vim :)
Re: Mini projects built with VanillaJS. No frameworks or libraries
#138Interesting. As a developer who's done no front end work since the nineties and has had little appetite for getting back into it (after having seen what modern front end devs seem to contend with) I surmise that all those crap.js frameworks of the month don't do a whole lot of useful stuf after all. I suspected as much but was always too timid to speak up when I observed how much noise and fury in the office produced…
It depends. You can do quite a fair bit with vanilla JS, HTML, and CSS. Things get a little tricky when you start having to maintain a lot of state that multiple elements need to be aware of. It's not impossible to do this with vanilla JS, but the mental model can be a bit difficult and this gets amplified across teams. What crap.js frameworks do well is provide a contract for how state can be organized and how compo…
Thanks for stating this so succinctly. This is a vanilla JS thread, but the "frameworks are crap" groupthink is also getting a bit out of hand. If you are building complex dashboards where multiple components are sharing and updating state, using a declarative framework like React or Vue and state management like Redux keeps things manageable as requirements change.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#139Here'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 specific…
>.prettierrc
Just to take that example. Prettier made the state of modern web development so much better.
Re: Mini projects built with VanillaJS. No frameworks or libraries
#140I'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've been doing something very similar for templating static HTML sites amongst other things - you can interpret any string as a JS template string: function jstsEngine(string = '', environment = {}) { return new Function( ...Object.keys(environment), 'output={}', 'return [`' + string + '`, output]' )(...Object.values(environment)) } Link with examples: https://github.com/tomhodgins/jsts-engine
That's what I'm using it for as well! I believe our functions here are isomorphic, though I'm a couple lines shorter ;)
You've got an excellent username btw. <3