{"id":4938,"date":"2020-10-02T16:45:52","date_gmt":"2020-10-02T15:45:52","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=4938"},"modified":"2026-04-16T10:18:34","modified_gmt":"2026-04-16T09:18:34","slug":"i-love-javascript","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/i-love-javascript\/","title":{"rendered":"I \u2764\ufe0f JavaScript"},"content":{"rendered":"\n

So, continuing with my I \u2764\ufe0f \u2026 series of posts, I thought I\u2019d like to bring a technology into focus that I myself don\u2019t directly develop with at 20i*. <\/strong><\/p>\n\n\n\n

Rather, it’s a technology that is absolutely the reason we have the incredible web as we know it to be in 2020. Please enter JavaScript.<\/p>\n\n\n\n

At 20i we use JavaScript in our control panel<\/a> primarily – Vue being our main technology, but what else can it do?<\/p>\n\n\n\n

Now before any hardcore purists out there tell me off for incorrectly referring to JavaScript, ECMAScript or ES6, please know – I love them all. <\/p>\n\n\n\n

They all contribute to making the web browser the truly incredible platform it is. So, let\u2019s have a look at some examples!<\/p>\n\n\n\n

Drops<\/h2>\n\n\n\n

First up is my flat-out favourite: this is a wicked 12 channel mixing demo, with fade, balance, stop, rewind and other fancy mixing desk coolness. Check it out! kevvv.in\/mix<\/a><\/p>\n\n\n\n

\"Mixing<\/a><\/figure>\n\n\n\n

Next up is a console only (yes, that\u2019s right) game. <\/p>\n\n\n\n

Click the link, open your dev console, and start playing! http:\/\/rikukissa.github.io\/falling\/<\/a><\/p>\n\n\n\n

Adventures<\/h2>\n\n\n\n

In keeping in the console vibe, do remember those text adventure games?<\/p>\n\n\n\n

Well, there\u2019s one right here. JavaScript may be able to impress us sonically and visually, but it\u2019s also has standard text output too of course (PS: I love the use of errors and the iconic\/ironic \u201cthis page best viewed with” mantra…). <\/p>\n\n\n\n

https:\/\/github.com\/secretGeek\/console-adventure<\/a><\/p>\n\n\n\n

\"Text<\/figure>\n\n\n\n

And then found myself thinking\u2026what about 3D?<\/p>\n\n\n\n

Obviously web browsers have OpenGL, so are there any libraries to make 3D composition easier? Well, enter three.js – basic XML (almost SVG like) syntax for creating 3d scenes. This is superb: <\/p>\n\n\n\n

https:\/\/threejs.org\/docs\/index.html#manual\/en\/introduction\/Creating-a-scene<\/a><\/p>\n\n\n\n

Of course, that uses the web browser’s (and therefore the OS\u2019s) rendering architecture, and doesn\u2019t really showcase JavaScript itself there truly.<\/p>\n\n\n\n

Whereas, this bad boy is real raytracing engine programmed in JavaScript. <\/p>\n\n\n\n

http:\/\/www.slimeland.com\/raytrace\/<\/a><\/p>\n\n\n\n

It isn\u2019t very fast but it is a raytracer\u2026go get the kettle on. \u2615<\/p>\n\n\n\n

\"JavaScript<\/a><\/figure>\n\n\n\n

Simulation and emulation<\/h2>\n\n\n\n

Now, if like me, you\u2019ve always found physical world simulations modelled on screen fascinating, then you\u2019ll love this. <\/p>\n\n\n\n

It\u2019s a real time 2D soft and rigid body simulator. If anyone has used big 3D apps like 3D Studio Max or Maya, then you\u2019ll just love how simple these are to get started with.<\/p>\n\n\n\n

https:\/\/brm.io\/matter-js\/<\/a><\/p>\n\n\n\n

\"Physics<\/a><\/figure>\n\n\n\n

Now stepping away from the virtual world nearly into the physical world, this is a very nice library for getting started on robotics without the robots! <\/p>\n\n\n\n

You can test your ideas and logic before \u201ccommitting\u201d to buying some hardware. <\/p>\n\n\n\n

I’m building an RC car and this is going to get me started:<\/p>\n\n\n\n

http:\/\/johnny-five.io\/<\/a><\/p>\n\n\n\n

\"An<\/figure>\n\n\n\n

And finally, let\u2019s use our ultra-modern devices to take a nostalgia trip. Here is Windows 95. Enjoy!<\/p>\n\n\n\n

https:\/\/archive.org\/details\/win95_in_dosbox<\/a> (Press the Xbox styled power button at the top to begin) <\/p>\n\n\n\n

\"Windows<\/a><\/figure>\n\n\n\n

What unusual applications of JS have you seen? Let us know.<\/p>\n\n\n\n

*I did create the 20i Sitemap<\/a> Generator in Node tho!<\/p>\n","protected":false},"excerpt":{"rendered":"So, continuing with my I \u2764\ufe0f \u2026 series of posts, I thought I\u2019d like to bring a technology…","protected":false},"author":4,"featured_media":4973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[51,60],"tags":[81],"class_list":{"0":"post-4938","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-technology","8":"category-web-design-dev","9":"tag-internet","10":"cs-entry"},"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2020\/10\/I-love-JavaScript.png","author_info":{"display_name":"rh20i","author_link":"https:\/\/www.20i.com\/blog\/author\/rh20i\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/4938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=4938"}],"version-history":[{"count":27,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/4938\/revisions"}],"predecessor-version":[{"id":19175,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/4938\/revisions\/19175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/4973"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=4938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=4938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=4938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}