17 ms·

Mini projects built with VanillaJS. No frameworks or libraries

• antonios 7y ago
  It's interesting that vanilla JS feels like a breath of fresh air nowadays. I guess the JS cycle is now complete (?)
  • quickthrower2 7y ago
    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.
    • rimliu 7y ago
      I have seen projects that were big in scale only because they were overengineered and tried to stuff every fad into the stack.
    • 6510 7y ago
      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.
      • quickthrower2 7y ago
        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.
        • woodrowbarlow 7y ago
          the 6510 was a 6502 with slightly different memory layout to accommodate graphics on the commodore 64.
        • 6510 7y ago
          I ran into a 13 year old master glue coder on irc one time. Since he was 9 he touched/used 3 js/php frameworks/modules/libraries per day. He said he didn't know any programming. (not entirely true ofc) He knew how to ask for something. There was always someone willing to write the data transformation after he broke down the problem properly. He showed a bunch of hilarious things he made. I praised him for keeping all of his projects. He said it was to embarrassing and deleted pretty much everything. I ask him things like, what do you do when things don't work, they stop working or stuff gets really slow. His solution was to delete everything and start from scratch using different modules where possible or just delete the project. I learn from him that the glue-ables are for the most part not high level enough. I wish I had learned to just delete everything and start over, regularly, just like that. ha-ha
  • yroc92 7y ago
    I don’t feel like vanilla js is ever a breath of fresh air.
    • ptx 7y ago
      Try doing VBA for a while.
  • rado 7y ago
    Indeed. The cycle will be complete once Angular meets the fate of its predecessor, Flash.
  • bitL 7y ago
    ES7 with async/await makes plain JS actually usable even with its usual warts.
  • duxup 7y ago
    Depends on what you're doing. It could be full circle, but for something larger ... not yet IMO.
• beardedman 7y ago
  We need more of these!
  • ZiiS 7y ago
    Blatant self-promotion; I just did a asteroids style game: https://github.com/BarnabyShearer/kibblekhaos https://github.com/BarnabyShearer/kibblekhaos WebGL, Web workers, Web Audio but no libraries.
• hilti 7y ago
  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.
  • t0astbread 7y ago
    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
    • olavgg 7y ago
      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.
    • oftenwrong 7y ago
      I prefer to just refresh the page. Throw away the DOM and render a new one from scratch server-side.
      • t0astbread 7y ago
        For simple CRUD apps yes, but this doesn't hold up for more interactive experiences. Also, not everyone wants to maintain a server for everything. Static file serving is just way easier sometimes.
    • austincheney 7y ago
      It’s not that tedious. Learning to do it properly takes less effort than learning a major framework. You would actually have to do it and learn it for this to make any sense though.
      • t0astbread 7y ago
• jasonkester 7y ago
  There’s no need for these projects to be “mini”. Javascript and html is a good choice for big things too. It’s still my go to “frontend stack” for lots of stuff today. Here’s a pretty big “VanillaJS” project I built back in 2006, back when we called these things web apps: https://www.twiddla.com/ https://www.twiddla.com/
  • jay_kyburz 7y ago
    Here is my VanillaJS project from 2010. http://np.ironhelmet.com http://np.ironhelmet.com (OK, there is a bit of jquery in there.)
    • darepublic 7y ago
      this is my humble vanillaJS project from even later (2013 I think?) http://djkramnik.github.io/Kasparov/ http://djkramnik.github.io/Kasparov/
    • robocaptain 7y ago
      Hi! Off topic but I love love love Neptune's Pride. :)
      • jay_kyburz 7y ago
        THanks Robocaptain!
• godmode2019 7y ago
  Many of these did not work on mobile. Samsung S5 for context
  • benbristow 7y ago
    6 year old phone. What Android version are you running?
• bitL 7y ago
  Isn't the whole draw.io written in VanillaJS as well? That looks like a massive project: https://old.reddit.com/r/javascript/comments/9p826q/how_drawio_is_made/e806uf3/ https://old.reddit.com/r/javascript/comments/9p826q/how_draw...
• errantspark 7y ago
  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 in the foot in all sorts of strange ways. It's a very expressive language that lends itself to all sorts of fun. I love being able to inline C functions as WASM. I love manually managing memory with typed arrays. I love the filth of it all. It's liberating to give up all your dignity and just fling mud with a big grin on your face because your ridiculous 5 lines are a functional standin for a templating engine. let applyTemplate = template => object => { let keys = Object.keys(object) return new Function('input' , `let {${keys.join(',')}} = input return \`${template}\``)(object) }
  • baxuz 7y ago
    I'm having trouble reasoning about this code, can you show me how it's used?
    • arexxbifs 7y ago
      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"
      • baxuz 7y ago
        How come you haven't used tagged template literals? These would fit this use case: https://codeburst.io/javascript-es6-tagged-template-literals-a45c26e54761 https://codeburst.io/javascript-es6-tagged-template-literals...
• abraxas 7y ago
  Interesting. 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 so little UI.
  • ng12 7y ago
    I always find it interesting that the people who unabashedly admit they have minimal front-end experience usually have the strongest condemnation of the current tools.
    • csande17 7y ago
      It's more understandable if you think about it the other way around: people who don't like the current front-end tools usually try to avoid contact with them. Which these days, mostly means not doing professional front-end development.
    • mosselman 7y ago
      Don’t worry. People with a lot of front-end experience, in this case me, also condemn the current tools.
      • deleted 7y ago
        [deleted]
      • oggadog 7y ago
        Can I ask what sort of front-end frameworks/tools you use that you also condemn?
        • austincheney 7y ago
          Most of them are merely abstraction layers for capabilities the browsers already provide. Rarely do they offer anything more. The big selling point is that they help organize the logic in a declarative way or automate a bunch of tiresome tasks that wouldn’t be there in the first place had you not used a mountain of tooling. There are only 2 APIs in the browser: DOM and the web APIs. As far as writing cohesive logic that does wonderful things that’s on you. Most JS developers would rather it not be on them and instead adopt an Invented Here Syndrome mentality. The fear of writing any original code is very real. https://en.m.wikipedia.org/wiki/Invented_here https://en.m.wikipedia.org/wiki/Invented_here
• cryptozeus 7y ago
  This is good for practice and learning but honestly what is the point of going backwards. Some of these demos don’t even work on safari in mobile. Frameworks are there for a reason. If one must learn in plain ja then sure go for it but no point knocking down frameworka
  • verifex 7y ago
    Most of these didn't work on Firefox either or fail gracefully, so no cross-browser support. I'd say that the more "stuff" you need to do on a web app, the more likely those features will need to be cross-browser compatible, and having done that in the past, I can say that VanillaJS is a fine thing for simple straightforward web apps, but when you start needing more features, it can be a load-off to outsource it to a framework. If you understand what the framework is doing, used sparingly, some frameworks can save you some time. JS libraries have the same deal, there are some features that I would prefer not rewrite every time I write an app. For instance, PDF.js is quite indispensable at reading PDFs in the browser and I think someone would spend quite a bit of time re-writing all the features you need from that library. Anyways, I guess it just all comes down to using the right tool for the job.
• marknadal 7y ago
  I implemented an entire database in VanillaJS: It runs in-production with 10M+ monthly users! https://github.com/amark/gun https://github.com/amark/gun ~13KB I get a lot of hate for not-using-2ton-framework-of-the-month. But I think prioritizing performance is worth the flack. Seeing repos/articles like this deeply warm my heart, maybe us VanillaJS devs are not alone after all! Does anybody have other favorite VanillaJS projects, that they could share?
  • dordoka 7y ago
    Not sure why you are being downvoted. Really interesting project, thousands of stars in gh, nice documentation... Thanks for sharing!
  • catchbepis22 7y ago
    Cool 3 letter names. Reminds me of the commands in Bloomberg Terminal/some old HCI. I really like how you've built a whole stack of custom tech there. That's my aim too. My work is all Vanilla. I hate to use external frameworks and libraries in the browser, but love to use stuff on npm. I prefer to write something I like to use, rather than use something that exists that I don't like working with. You can see portfolio here: https://github.com/cris691/Portfolio https://github.com/cris691/Portfolio. Bepis and Dumbass are vanilla front-end alternatives to frameworks. I'm really interested on what you think the hate for not-using-2ton-framework-of-the-month is about?
    • marknadal 7y ago
      Nice work!
  • ng12 7y ago
    > I get a lot of hate for not-using-2ton-framework-of-the-month. I'm not sure I understand, it doesn't look like there's any DOM code included. What would you be using a framework for?
• Ndymium 7y ago
  Lately I've really enjoyed writing small apps in vanilla TypeScript. Since the TS compiler generates JavaScript that works in modern browsers and those also support the module syntax natively, you can get away without using NPM and a bundler like Webpack at all. Of course this starts to fall down when you get over a certain size but it works well and is quick to get going with for simple things like this lunch menu I built: https://gitlab.com/Nicd/sodexo-menu https://gitlab.com/Nicd/sodexo-menu The only gripe I have there is that you need to write imports with a JS extension as the TS compiler won't change them. So to import `foo.ts`, you need to write `"./foo.js"`. The compiler understands it and it also allows the browser to understand it too.
  • EGreg 7y ago
    Too bad we can’t have php style autoloading in JS. Actually what I really want is to lazy-load modules on demand! So if something is concatenated into a giant file then I don’t need to load modules anymore. Like maybe this: function load(module) { if (load.loaded[module]) return; import(module) .then(() => load.loaded[module] = true); }
    • Ndymium 7y ago
      You could probably write such a thing using the dynamic `import()` that is quite supported: https://caniuse.com/#feat=es6-module-dynamic-import https://caniuse.com/#feat=es6-module-dynamic-import In fact it's most likely someone has already done that.
    • 6510 7y ago
      http://neanderthal.go-here.nl http://neanderthal.go-here.nl
    • Can_Not 7y ago
      I actually don't see why someone couldn't write a PHP style autoloader for JS, there is already a lot of cool hacks around require. I think a simple autoloader would just do something like (almost pseudocode): find src/**/*.{js,ts} -exec cat {} | typescript >> build.js
    • 7y ago
• baxuz 7y ago
  Here's one I did as an assignment for a job interview: https://github.com/ivancuric/hn-scroll https://github.com/ivancuric/hn-scroll You can see it in action here: https://hn-scroll.netlify.com/ 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 up being 1.4kb in total, with support for practically streaming in the items, batching them by network response times and render frames, while keeping the order. You can see the batched items in this version: https://codesandbox.io/s/hardcore-stonebraker-8m8fx https://codesandbox.io/s/hardcore-stonebraker-8m8fx
  • mjfisher 7y ago
    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?
    • baxuz 7y ago
      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.
      • abraae 7y ago
        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?
• dep_b 7y ago
  I did a project around 2018 if I remember correctly where I did all of the code in inlined vanilla JS. It was simply firing off timed API calls for a pop quiz but it was resilient up to the point where a page reload would simply continue where the last question left off. Maybe 300 lines of code, max. Literally anybody that had to work on it kept asking why I didn't at least use jQuery or another flavor of the month framework. "Can you point out in this code where using a framework is necessary?" Never got an answer to that, still people were so nervous about the lack of JS frameworks.
• IMTDb 7y ago
  Quick / dumb question : in the breakout game example (https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-game/script.js 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 ?
  • phormy 7y ago
    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.
  • bArray 7y ago
    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/master/breakout-game/script.js#L191 https://github.com/bradtraversy/vanillawebprojects/blob/mast... [2] https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requ... [3] https://github.com/bradtraversy/vanillawebprojects/blob/master/breakout-game/script.js#L184 https://github.com/bradtraversy/vanillawebprojects/blob/mast...
    • rypskar 7y ago
      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.
• thrownaway954 7y ago
  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. https://traversymedia.com/ https://traversymedia.com/
  • Timpy 7y ago
    I agree, I'm glad to see him on HN. Brad is great for beginners, and I still use him for my "how to I get some boilerplate up and running" type things for languages and frameworks I'm not familiar with.
• naikus 7y ago
  Cool! I've build a couple of vanilla js projects, a widget and a framework. https://github.com/naikus/svg-gauge 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/ https://naikus.github.io/stage/ (This site is actually built using the stage)
  • layoutIfNeeded 7y ago
    A framework by definition cannot be vanilla JS...
• adrianh 7y ago
  Soundslice (https://www.soundslice.com/ 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 https://www.youtube.com/watch?v=VvOsegaN9Wk ("A framework author's case against frameworks") and here: https://www.youtube.com/watch?v=XH5EtQge_Bg https://www.youtube.com/watch?v=XH5EtQge_Bg ("How I optimized my JavaScript sheetmusic rendering engine")
  • baxuz 7y ago
    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&hidenavigation=1&module=%2Fsrc%2Fstyles.css&theme=dark https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hide...
    • PudgePacket 7y ago
      The bars are identical for me. 4k monitor with firefox on windows. Could it be something to do with resolution?
      • baxuz 7y ago
        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 https://i.imgur.com/A8btxpu.png
    • adrianh 7y ago
      Oooh, thanks very much for this! Will poke around...
• evolveyourmind 7y ago
  Here is my 120 lines vanillajs neuroevolution flappy bird https://evolveyourmind.github.io/flappyai/ https://evolveyourmind.github.io/flappyai/
• rikroots 7y ago
  Some Javascript frameworks I like; some I tolerate. Some (<cough>angular</cough>) I learned to despise. I reserve my love only for VanillaJS. My library for playing with the canvas element[1] is entirely VanillaJS. 0% dependencies. 1000% a learning experience for me, having to seek into the darkest corners of the language to find solutions to problems I didn't even know existed! [1] Scrawl-canvas - https://github.com/KaliedaRik/Scrawl-canvas/tree/v8-alpha https://github.com/KaliedaRik/Scrawl-canvas/tree/v8-alpha
  • b3kart 7y ago
    > 1000% learning experience for me, having to seek into the darkest corners of the language to find solutions to problems I didn't even know existed. Sounds like the experience has been beneficial for you, but this excerpt reads like a cautionary tale for using "ValillaJS" for real projects. :-)
• mariocesar 7y ago
  It's not VanillaJS but it feels like it https://github.com/alpinejs/alpine/ https://github.com/alpinejs/alpine/ I have been using alpinejs and is really easy to start and complete! something that is difficult to have together.
• erikbye 7y ago
  Very simple new tab replacement with todos for Firefox using vanilla js. https://addons.mozilla.org/en-US/firefox/addon/newtabtodo/ https://addons.mozilla.org/en-US/firefox/addon/newtabtodo/
• maggit 7y ago
  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/ https://magnushoff.com/blog/dependency-free-javascript/
• limaho 7y ago
  Here’s a simple game I wrote in vanilla js (client side) two summers ago https://www.mouse-movement.liammahoney.dev https://www.mouse-movement.liammahoney.dev Heads up it doesn’t work on mobile. Also there some bugs at the end of the game I never got around to ironing out. Code: https://github.com/LiamMahoney/mouse-movement https://github.com/LiamMahoney/mouse-movement
• jypepin 7y ago
  A few years ago my work environment became so complex that I felt like I was spending more time trying to code, than actually coding. So I started that thing where on Sunday mornings, I would give myself a couple hours, in bed, to code something simple in vanilla js. It was super fun, and here's the result: http://jypepin.com/lolz http://jypepin.com/lolz A few of those were harder than others and forced me to re-learn some basic maths. I really recommend doing such a thing sometimes!
• deleted 7y ago
  [deleted]
• rishav_sharan 7y ago
  Great to see Vanillajs get more attention. I also wrote an article on this topic a while ago; using VanillaJS to create a basic spa https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng https://dev.to/rishavs/making-a-single-page-app-in-ye-good-o...
• wffurr 7y ago
  I wish more NPM modules were vanilla JS; then it wouldn't be quite so hellish to audit your dependencies or vendor them. I needed a lib to measure text for layout recently, and ran across https://github.com/soulwire/FontMetrics https://github.com/soulwire/FontMetrics which is nice and clean and completely self contained. It's a perfect library.
  • moojd 7y ago
    Yep, I wish either nmpjs.com or npms.io would list the total number of transitive dependencies in their search so I could sort by it. npmjs.com shows the number of dependencies at the top but doesn't total in dev-dependencies unless you dive in further. At first glance, npmjs.com leads you to believe webpack has only 24 dependencies when they have 52 additional dev dependencies leading to ~300 transitive deps with ~200 maintainers I now have to either constantly audit or implicitly trust[0] [0] http://npm.broofa.com/?q=webpack http://npm.broofa.com/?q=webpack
• tasogare 7y ago
  I just finished coding a few functions in pure Javascript I need for a project (parsing turtle files I have ownership one). After searching for libraries and having read their Github project's Readme, I choose to implement them by myself because making them working in browser (most target Node) and understanding their API would have take longer than doing it myself anyway. The front-end tooling has became a huge mess of tools (none of which I have experience with) so I always keep it to vanilla JS (or TS) to progress on my project instead of learning a tool that might not exists in 3 or 5 years.
• klundqist 7y ago
  I like the approach, but it breaks as soon as you have to support IE11.
• mLuby 7y ago
  Love these! Here's Emoji Tetris in 240 lines. Live demo: https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed890a#gistcomment-3075305 https://gist.github.com/mLuby/73316b08c31015e1da813e1fbbed89... Can also run in NodeJS like so: $ node tetris.html
• sstangl 7y ago
  Here's a simple no-framework points calculator for the sport of Powerlifting: https://www.ipfpointscalculator.com/ https://www.ipfpointscalculator.com/ The page is 11KB, loads in 96ms, and makes three requests to one network, two of which are favicon-related. This turns out to actually matter in practice because many of our users are from countries with extremely slow connections.
  • SahAssar 7y ago
    I love vanilla/minimal js frontends, but I don't think this is a prime example. The basic function of it could basically be a math function, and it does not not include any accessibility features, and if smallness is what you prioritize it could be smaller by using the form API's more, especially for things like radiobuttons (for example, a selected radio value for `units` can be found with `form.units.value`, the same can be done for other inputs). My point is mostly: do vanillajs but also understand what api's are actually available for you from the start. There is a lot built into the browser, use it. Usually it already has better performance and accessibility than whatever you would write yourself.
• EGreg 7y ago
  We built a lot of things with Vanilla JS. You can find them all here: https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js https://github.com/Qbix/Platform/blob/master/platform/plugin... And the documentation: https://qbix.com/platform/guide/javascript https://qbix.com/platform/guide/javascript It's open source so feel free to rip the code from there, or just use the full Q.js ! For loading code, a long time ago we just implemented two methods: Q.exports(a, b, c) Q.require(src, callback) Following node but just async. It’s simple and it works. We were able to know the name of the latest loaded js file in exports() by a trick of throwing an exception and catching it to see what script was on the top of the stack. All browsers seem to support this. Since it worked back then, we didn’t need anything else. It is super simple to just keep using those things and replace the middleware underneath to whatever is the standard du jour. It's super short and simple, you can implement similar things in your projects: https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7842 https://github.com/Qbix/Platform/blob/master/platform/plugin... https://github.com/Qbix/Platform/blob/master/platform/plugins/Q/web/js/Q.js#L7826 https://github.com/Qbix/Platform/blob/master/platform/plugin...
• tlbsofware 7y ago
  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
• fergie 7y ago
  Its striking how clean a lot of the js code is for these projects. They do so much with so little
  • protonfish 7y ago
    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.
• Aperocky 7y ago
  A ‘mini’ simulation that I have in pure JavaScript: http://aperocky.com/prehistoric http://aperocky.com/prehistoric (Mobile not fully supported) Did use Pixi for sprites and display, but that’s kind of unavoidable.
• allenu 7y ago
  I 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/ https://www.ussherpress.com/synthiejs/ for a simple synth player using web audio or my request-a-drawing site https://www.drommysommy.com https://www.drommysommy.com
• tomaspollak 7y ago
  I'm not sure if this qualifies as "mini", but mi chiptune/MIDI player [1] was written without the use of any big frameworks, even though it relies heavily on Javascript, both for navigation, visuals, and of course audio synthesis (via Emscripten). [1] https://muki.io https://muki.io
• carlmungz 7y ago
  I love seeing vanilla JS projects getting some love. I started one last year (https://github.com/CarlMungazi/aprender-js https://github.com/CarlMungazi/aprender-js) and I feel it has made me a better programmer. If anyone wants to learn more vanilla JS stuff, you should check out https://gomakethings.com https://gomakethings.com by Chris Ferdinandi.
• aliswe 7y ago
  I'm making an open source .NET Core CMS where the UI is written in non-transpiled ES6 run natively in the browser - including imports through Javascript modules