7 Cool Things to Do with JavaScript

7 Cool Things to Do with JavaScript

The programming language JavaScript, first released as 'LiveScript' in September 1995 and renamed 'JavaScript' in December 1995, has evolved dramatically over the years.

JavaScript was created by Netscape and Sun Microsystems to allow web designers to go beyond static HTML/CSS pages and add simple animations, user interactions, and form capabilities.

While Netscape/Sun Microsystems' dream was to advance the web through JavaScript, they also wanted to ensure that the code was simple to use so that designers and developers could take advantage of JavaScript's benefits without having to go through any steep learning curves.

Because of the popularity of Netscape/Sun Microsystems' Javascript, other browsers began to develop their own JavaScript engines with their own standards. This made it more difficult for web developers at the time to make websites behave consistently.

Sun Microsystems launched a board in 1997 to help bring browsers together and make engines run consistently. This allowed websites to be more consistent across browsers and improve user experience.

This board is still active today and is constantly contributing to the advancement of the web.

JavaScript's capabilities are incredible in 2021. In vanilla JavaScript, you can create a VR/AR experience, games, run JavaScript as server-side code, apps, and, of course, awesome websites!

The internet truly is your oyster.

Let's take a look at all of the amazing things we can do with JavaScript:

Website Animation

1. Website Animation

Have you ever visited a website and been astounded by the number of interactive elements that whizz around the page and react to your interactions? Or is that just me being a nerd?

For those of you who don't understand what I mean, here are two examples:

Green Chameleon Year In Review and Baunfire.

Simple animations can add a lot to a website. They engage you and make you want to keep going to see what else it has to offer.

Using animations to make websites look cool and engaging is a great way to use them, but they can also have more practical benefits, such as:

Making a website appear to load faster

When a web page has a lot of content to load, the page load time naturally increases, potentially frustrating a user to the point of losing a sale.

As a result, many high-volume content sites use loading animations for users, such as spinners. Spinners are often quite simple, but they provide a distraction for the user from the normal white screen while the website moves content into place and feels faster.

Making navigation in an app more fluid and easier to understand

When using a web application with lots of links it can be hard to understand how you navigated to the webpage that you are on.

Adding simple animations such as page swipes and elements that highlight the transition from one page to another can be enough to help improve the user journey.

Driving attention

Static content can be boring to look at and makes it easy for something in the background to draw a user’s attention away from the important content.

Just having some simple animations on your page will drive attention to small bite size information such as a call to action, helping to drive the user through your business funnel.

Phone Apps

2. Phone Apps

Thanks to companies like Apple and Google, apps have become a household name. Whatever you are doing I am sure someone could walk past and say “There is an app for that”.

With the rise of smartphones, developers and businesses have quickly been able to capitalise on the success of the app marketplace. Just look at Facebook, Twitter, Tinder, Angry Birds and many other apps that have made millions in this industry.

Developing two apps for each platform takes experience and requires a team with multiple skillsets, plus a project manager to make sure that both apps behave consistently.

Some companies even have more than one team to deal with this job. This is where good old JavaScript has found its calling in the app industry.

Using JavaScript frameworks such as React Native, a company can develop apps to a high-quality standard for a range of app operating systems (including Android, iOS, Apple TV, Chromecast and even Windows Phone).

Not only does the company save time and money, but they also get a high-quality app that works the same across both platforms, and works well at that. Just look at the Facebook app, arguably the most-used app which is built from React Native.

This is a big deal. Now even small businesses can develop apps and compete in the same space as the big companies. New features can also be developed into apps as companies are not having to split resources across two different operating systems.

Open-Source Community

As the JavaScript app scene has grown and proven that it is viable, there has been a great effort from the JavaScript community to share code to accomplish some awesome things and speed up development time.

Such examples of community efforts:

Expo App/Build tools

Expo allows you to run your code in real time as you are coding, streaming your code to a device over a wireless network and therefore reducing the headache of compiling and adding the ability to test in a native environment over a virtual emulator.

npm

npm is a package manager built for JavaScript to help developers install and manage open-source packages into their project.

With thousands of developers that add and maintain these packages across the world, there is near enough always a package that you can use to add a feature to your app or website.

Websites that do not require a server

3. Websites that do not require a server

Serverless websites, while still a relatively new concept, have the potential to be a new direction for website hosting. Serverless websites, which make use of services such as AWS Lambda, can be a relatively efficient way to host a site.

The theory

A Serverless website's concept is to serve users a static pre-compiled HTML file. We reduce the time to first byte (the time it takes for the server to start sending data) and the time it takes for the user to access the data by serving a single HTML file.

After the browser has rendered the page to the user, JavaScript enters the picture to render all of the dynamic content and media via APIs and CDNs (Content Delivery Network).

The dynamic data can be animated into the page as soon as it is loaded, providing a smooth experience and allowing users to access data while other data is being processed.

A good application for this concept is that a website can be coded to load data based on where it will appear on the page, implying that data will be available to the user as they scroll.

Serverless websites are still in their infancy, and I'm sure we'll hear a lot more about them in the coming years.

Progressive Web Applications

4. Progressive Web Applications

Progressive Web Apps (PWAs) are a fantastic new technology thanks to companies like Google and Mozilla.

For those of you who are unfamiliar with PWAs, they are a technology that allows users to install a website on their phone or laptop in the same way that apps do, to provide a variety of benefits such as:

Easy access from the app tray or home screen

When PWAs are installed on a device, an icon is added to the app tray and/or home screen. This allows users to load the PWA without having to navigate through a web browser.

Loading times are faster when compared to websites

Because the user installed the website locally, a developer can store static content on a device and use JavaScript Service Workers to retrieve new data.

This means that your device only needs to load data when new data is available, and that the website can potentially work without an internet connection (depending on your use case).

PWAs are great for businesses because they can benefit from a variety of different features, such as:

Less expensive to construct

Because the PWA is based on the company website, developers can reuse the majority of the code from the website and only add new features as needed. As opposed to an app, where developers must frequently start from scratch.

As you might expect, this can save businesses a significant amount of time and money.

Reduced server traffic

Users have to pull less data from the company's servers thanks to PWA caching. This means that businesses can have smaller servers, resulting in lower costs.

Increased user participation

Because the app is easily accessible from the user's home screen, it is always visible and requires less marketing to get users to download it.

Video games

5. Video games

Since the 1990s, games have played a significant role in the evolution of web browsers. The original in-browser games, which were created with web browser plugins such as Adobe Flash or Shockwaves, were great time wasters, much like some app-games are today.

Websites dedicated to hosting games, such as Miniclip, would have a large library of games available.

Because of security concerns, poor performance, and a variety of other factors, the use of web plugins has become increasingly frowned upon as the web has evolved.

JavaScript to the rescue!

Because browser plugins have been deprecated over time, many developers have turned to JavaScript to fill the void.

Frameworks, custom game IDEs (Integrated Development Environments), and other new technologies have now been developed, allowing us to fully exploit what the browser can do, allowing developers to create some pretty advanced games.

Web Design

Recently, a new technology known as Web Assembly was born. This allows browsers to use traditional programming languages such as C++ via a browser API.

Web Assembly and JavaScript, when combined, now provide the best of native development and website development, allowing businesses to create applications and games that use your computer's native hardware while running in a web browser.

With companies like Google developing browser-based gaming services like Stadia, the future of web gaming looks bright.

Drones

6. Drones

Recently, there has been a lot of buzz about drones. Hobbyists enjoy flying drones, film crews can get unique, cinematic shots, and developers can go wild with custom "hacks".

The open source community is constantly expanding with new cool stuff that can be coded.

When it comes to coding drones, most developers prefer languages like C or Python,

ozMwRq-IT2w
.

However, I would not recommend using JavaScript to program your drones over other languages because there is less documentation and other languages are often faster at runtime.

Having said that, this demonstrates how versatile JavaScript can be.

Attend A JavaScript Conference

7. Attend A JavaScript Conference

With so many developers and designers enamoured with the JavaScript programming language, it's only natural that they'd want to learn more while also passing on their knowledge to other developers.

We programmers are involved in community service.

Many JavaScript events have sprung up around the world, bringing together developers from all walks of life to learn about upcoming trends in the language. These groups are very important to the community because they help to advance new technologies and give developers a voice in the language's future.

Smaller JavaScript events are also becoming more popular, with new ones popping up in cities across the country thanks to sites like Meetup and Eventbrite.

These can greatly assist new developers in gaining a foothold in the programming language, as well as senior developers in mastering the language.

If you're interested in JavaScript, I'd recommend attending a JavaScript event in your area.

JavaScript has come a long way since its inception, and I am confident that this trend will continue for many years to come.

At the moment, browsers are allowing web pages to use more and more of a computer's power (particularly with the new Web Assembly API), which could lead to browsers and native apps merging.

Keeping this in mind, JavaScript will need to evolve in order to keep up, which will undoubtedly lead to more cool things to do with JavaScript in the future.

About the Author
Author: Daniel Luke
Daniel is a WordPress web designer with vast experience working with various WordPress themes that allows him to compare and contrast different themes, understand the strengths and weaknesses to develop factual, real-world reviews.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
 

 

Best Rated Caching Plugin

Make your website faster 

Step-by-step - free email course, how to make your website load in less than 1 second  

 

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

 

 

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...