11 Crazy Things You Didn't Know You Could do with JavaScript

Take a look at the Stack Overflow Developer Survey for the last 8 years and you’ll know that JavaScript has had an undisputed dominance over the developers’ hearts as the most preferred language.

It’s also the most widely used programming language in open-source projects housed on the Microsoft-owned code-collaboration site GitHub.

It wasn't immediately clear whether JavaScript would catch on, according to Cory House, a Pluralsight instructor who specializes in JavaScript for developers.

But, thanks to the improvements in browser technology and the shift towards the server side with Node.js, developers can now accomplish considerably more with JavaScript than they could a few years ago.

Now JavaScript has evolved into a vast ecosystem with effects on all facets of software development.

"It was written in a few days, and initially only offered in a single browser. Microsoft's first browser shipped with its own flavor of JavaScript called JScript. Today, JavaScript makes the world go 'round. It runs on every computer. Every phone, TV. Even some appliances. A huge portion of humanity relies on JavaScript every day without realizing it," said House.

Even the inventor of C language, Dennis Ritchie had to say this on the evolution of JavaScript-

“The kind of programming that C provides will probably remain similar absolutely or slowly decline in usage, but relatively, JavaScript or its variants will continue to become more central.”

And today the possibilities are truly endless with JavaScript. It can be used in Express to write the backend or in React and Vue to build stunning dynamic frontend apps. In addition, you can build fantastic websites, VR/AR experiences, games, apps, serverless websites, and much more.

So, let’s discuss a few cool and crazy things you can build with JavaScript in detail:

Website Animation

To give your boring website some life, you can add some crazy animations and transition effects with JavaScript. Slides and other clear animations are also an option.

Now, you can always use straightforward CSS animations to create simple animations, for instance, toggling. But for more advanced and sophisticated animations that include more than one action, JavaScript comes into the picture.

JavaScript animations are created by adding gradual changes to the style of an element. You can include them in other objects or add them directly to your code.

That being said, here are a few JavaScript libraries used to build different types of animation effects:

• Anime.js - To create ripples, directional movements, follow-through, and overlapping effects
• Theatre.js - For high-fidelity motion graphics
• Popmotion- To create animations like keyframes, decay, and timeline for synchronizing multiple instances
• Three.js - One of the most popular JavaScript animation libraries. Helpful in creating scenes, lights, shadows, materials, textures, and more
• ScrollReveal JS- For professional-looking scroll animations on the webpage

You can make the website appear to load faster using loading animations such as spinners. They are typically relatively basic, but they divert users from the typical white screen while the website places material and feels faster.

Machine Learning

Agreed that Python is the king when it comes to machine learning and deep learning. But there’s also a growing community of developers who are using JavaScript to run machine learning models.

And, JavaScript can be used to incorporate amazing machine-learning capabilities into your next app.

You have access to visual and aural inputs because web browsers have webcams and microphones, which can result in some fascinating machine-learning features like face recognition.

Real-time piano performance is just one of the genuinely fantastic projects that can be built with the TensorFlow framework for JavaScript.

Then there is Brain.js which is a javascript library for machine learning, particularly neural networks. It is quite fast because it leverages GPU for computations and can also resort to pure JavaScript when the GPU is not available.

Synaptic is another JavaScript neural network library that includes several helpful built-in structures such as liquid state machines, multilayer long-short-term memory networks (LSTMs), multilayer perceptrons, Hopfield networks, and others, as well as trainers that can accept any network and use any training set with it.

Games development

Since the 1990s, games have been a major factor in the development of web browsers. The first in-browser games, which were made with web browser plugins like Adobe Flash or Shockwaves, were excellent time wasters like some iOS games are now.

The use of web plugins has grown less acceptable as the internet has developed for a variety of reasons, including performance and security issues. And here enters JavaScript!

Many developers have resorted to JavaScript to fill the void left by browser plugins becoming obsolete over time. Frameworks, unique game IDEs, and other new technologies have now been created, allowing us to fully utilize the capabilities of browsers and enabling developers to create some very sophisticated games.

Here are a few excellent JavaScript game examples:

• Rocket Game
• Swoop
• HD Free Rider

There are now browser games that teach you how to program thanks to the enhanced level of control and possibilities for these games.

To make the process of creating JavaScript games easier, other libraries and frameworks have also emerged. Phaser is one such library.

Mobile application development

What would happen if the development team wanted to create apps for iOS and Android devices using JavaScript? The ability to create applications for environments other than the web is one of the most intriguing things JavaScript developers can accomplish today.

Now, there are various JavaScript frameworks to select from when developing a mobile app from scratch. Despite JavaScript being the basic language, these frameworks are vastly different in terms of capabilities, feature set, development cost, learning curve, popularity, and cost factors. Here are a few of them:

• React native- Ensures 85% reusability of the core codebase for faster app development
• Ionic- It can be used to create platform-independent apps without sacrificing app performance or user experience.
• jQuery- By addressing diverse screen sizes and resolutions, jQuery Mobile offers a fully responsive look and experience.
• Apache Cordova- Cordova apps are simple to update as a single change can be reflected across platforms at the same time

Cross-Platform Development

Programming languages used to create native mobile applications for the iOS and Android operating systems are totally different. Two development teams must be involved if you wish to create a native application. Today, it's also feasible to create a single program that functions on both platforms, for instance by utilizing tools like React Native.

Today, cross-platform development using JavaScript has emerged as a major trend, enabling companies to construct mobile apps using JS that can be installed and downloaded directly from the relevant app stores.

JavaScript can be used to create an app's code with React Native, which subsequently transforms the React components into native mobile platform components. React Native can now access hardware functions much more easily because of this; for instance, it gives built-in support for cameras and GPS.

Serverless Websites

Although still a relatively new idea, serverless websites have the potential to change the way websites are hosted. AWS Lambda and other serverless technologies can be used to host webpages in a pretty efficient manner.

Even though the technology is still in its early stages, many developers and engineers are going above and beyond to create interesting solutions for the future of Serverless operations.

The idea behind a serverless website is to provide users with a static, pre-compiled HTML file. By providing a single HTML file, we decrease the time to the first byte (the amount of time it takes for the server to begin sending data) and the time it takes for the user to access the data.

JavaScript enters the picture to render all of the dynamic content and media via APIs and CDNs (Content Delivery Networks) after the browser has displayed the page to the user.

As soon as the dynamic data loads, it may be animated into the page, giving consumers a fluid experience and enabling them to access data while other data is being processed.

Good usage of this idea is the ability to code a website to load data based on where it will appear on the page, indicating that the user will have access to the data as they scroll.

Here are a few JavaScript libraries to create serverless websites:

• AWS Amplify
• Midway.js
• Webiny

In the years to come, I'm sure we'll hear a lot more about serverless websites, which are still in their infancy.

Flying Drones

Recently, drones have become very popular. Drone flying is a popular hobby, and developers can create a ton of unique "hacks" for them. The open source community is constantly growing with new exciting things that can be developed.

When programming drones, most developers prefer using languages like C or Python, however one YouTuber chose JavaScript. If you don't believe us, watch this video for evidence.

Although there is less documentation available for JavaScript, and other languages are frequently faster at runtime, this is to demonstrate how adaptable JavaScript is. (Here’s another article explaining programming the AR Drone 2.0 using JavaScript and Node.js)

P.S. - We don't recommend employing your knowledge of JavaScript to fly drones near the Bengaluru Airport ;)

Smart Watches

In 2020, Gordon Williams, the creator of the Espruino, did something unthinkable. He built a smartwatch called Bangle.js using JavaScript. He took an off-the-shelf smartwatch and reverse-engineered it replacing the onboard firmware with an open stack built around JavaScript. (Here’s Gordon talking about the project)

Pebble.js allows you to create apps for Pebble watches. What’s more?

Utilizing 3rd party applications like APE Pad, you can even run JavaScript programs on the Samsung Gear 2 and Gear S.

It's also not at all complicated!

What if you want to develop for the Apple Watch, though?

The tool Alpha WatchBench enables you to accomplish just that.

Digital Art

Digital art, often known as computer art or new media art, is art created with software, computers, or other electronic equipment. Digital art includes anything created or generated on digital media, such as animations, photography, illustrations, films, digital paintings, and so on.

And guess what! You can create beautiful 3D elements using JavaScript and the HTML5 canvas element. It’s truly fascinating that you can write code to create art.

The canvas element provides a wide variety of approaches that enable creators the opportunity to make complex artworks a reality. It provides APIs to manipulate photos, and tools to create games and animations, and it makes it very easy to create Generative Art.

Drawing pathways, boxes, and circles are techniques that can result in some beautiful digital art.

Here, you'll discover a useful manual curation of materials and equipment for creating generative art.

VR & AR Applications

Since 2016, the Augmented/Mixed/Virtual Reality trio has experienced meteoric growth, rising from a marginal market value of $6 billion to a sales value of $210 billion by 2022.

Future technology is regarded as being based on virtual and augmented reality.

Although the concept of a VR app is not new, most developers might be surprised to learn that JavaScript can be used to construct and integrate VR apps and features.

Today, most of VR and AR app development takes place on the web, where JavaScript reigns supreme. Whether you want to construct a new AR application or add an AR view to an existing online application, JavaScript gives your web application a set of functions and tools.

The Mozilla VR team developed the well-known A-Frame framework to let programmers construct 3D  experiences without using plugins.

And not just that, it is also a robust framework for developing VR content, supporting features such as Windows mixed reality, declarative HTMLGearVR, Cardboard, Oculus Go, and augmented reality.

A-Frame's primary benefit is that it employs simple HTML and it’s a powerful entity-component framework.

Progressive Web Apps

For those of you who are unfamiliar with PWAs, they are a technology that enables users to download websites to their laptop or phone in a manner akin to installing apps. They provide an app-like experience by utilizing contemporary web features. In the end, they're just standard websites with some upgrades that run in a browser.

PWAs offer a number of advantages, including:

Quick Access from the app tray or home screen

When PWAs are installed on a user's smartphone, an icon is placed on their app tray and/or home screen, enabling them to load the PWA without using a web browser.

Quicker loading times than on websites

A developer can keep static content on a device and use JavaScript Service Workers to fetch new data because a user installed the website locally. As a result, the website may be able to function without an internet connection and only load data when fresh data becomes available on your device (depending on your use case)

Here are a few JavaScript frameworks to build progressive web applications:

• Angular
• React
• Vue.js
• Preact

Numerous developers register each December for Advent of Code, a 25-day series of programming challenges. Although developers are free to use any language to complete these daily challenges, JavaScript is a common option.

CyberSecurity

JavaScript is one of the best programming languages for cyber security. If you know JavaScript well, you can ensure that XSS attacks are minimized or completely avoided on the website.

Here are a few reasons to use JavaScript in implementing web security:

• Enables you to create secure user interfaces and websites.
• Reduces other technical hazards and possible cross-site scripting attacks in web forms.
• JavaScript is used in numerous web-based application assaults, such as cross-site scripting, malicious code, Man-in-the-middle attacks, etc. If you want to work as an intrusion analyst, you'll surely need some JavaScript experience.

Generate Music: The harmony of code and music comes alive with JavaScript. Libraries like Tone.js offer a playground for musicians and composers within the browser. Through JavaScript, you can compose intricate melodies, orchestrate dynamic compositions, and even synthesize unique sounds. This interactive approach to music creation opens doors for experimentation, enabling artists to explore uncharted auditory landscapes.

Augmented Reality (AR): JavaScript is at the forefront of the AR revolution. Frameworks like AR.js empower web developers to merge the virtual and physical worlds seamlessly. With AR.js, you can create captivating augmented reality experiences accessible through web browsers. Users can interact with virtual objects superimposed onto their surroundings, all through their device's camera. This technology opens up possibilities for education, entertainment, and practical applications across industries.

Control Hardware: JavaScript's versatility extends beyond the virtual realm. It can communicate with physical hardware devices such as Arduino and Raspberry Pi, forming the backbone of IoT applications. This capability enables developers to build solutions that control and monitor real-world objects, revolutionizing industries from home automation to agriculture.

Text-to-Speech: The  TTS feature in JavaScript is a significant advancement, expanding its reach beyond the confines of code and technology. it is a driving force in promoting inclusion and improving the entire user experience of the web.

By implementing this feature, websites gain the capability to dismantle obstacles, guaranteeing a warm and comprehensible environment for a wider range of users, with a particular focus on those with visual impairments.

Imagine navigating a website without the ability to see its content. For those with visual disabilities, this is a daily reality. However, when JavaScript-based TTS is integrated, a transformation occurs. Text that was once static and invisible springs to life, as the computerized voice brings it into the auditory realm. This auditory representation of text bridges the gap, enabling users to "hear" the content of the website, including text articles, menus, buttons, and more.

The impact of TTS extends far beyond the individual components of a webpage. It empowers users to navigate through complex content seamlessly. For example, they can explore educational materials, read news articles, shop online, or access vital information independently and without reliance on sighted assistance.

Moreover, JavaScript-driven TTS doesn't merely provide access; it enhances the user experience. It ensures that information is not just conveyed but is also comprehensible, thanks to the advancements in natural language processing and voice synthesis technologies. These technologies have matured to a point where computerized voices can convey nuance, emotion, and context, making the listening experience more engaging and informative.

Real-Time Collaboration: JavaScript powers real-time collaboration tools that redefine the way we work together. Technologies like ShareDB and Socket.io facilitate the development of collaborative applications, from text editors to virtual whiteboards. These tools enable seamless teamwork, fostering creativity and productivity across distances.

Blockchain and Cryptocurrency: JavaScript's role extends to the world of blockchain and cryptocurrency. Developers leverage JavaScript libraries like web3.js to build decentralized applications (DApps) on platforms like Ethereum. With JavaScript, you can create and interact with smart contracts, enabling trustless and secure transactions on blockchain networks.

Final Thoughts

So, here were a few things you can do with JavaScript, and note, they were only a few.  It's simply mind-boggling that a language that is highly beginner-friendly and intuitive can be used to build mobile and desktop apps, as well as for games and VR development.

Automation, building professional presentations, and controlling IoT devices are a few other functions you can achieve with JavaScript, which are enough reasons why it is considered one of the languages for the future.

We can truly say that you’re only limited by your imagination when it comes to JavaScript.

Learn more about JavaScript frameworks in this article:

Beginner's Guide to JavaScript Frameworks