Improve Your JavaScript Learning with Fun Experiments

This article was peer-reviewed by Mark Brown. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best!

Learning in the field of web development is endless. Our industry is constantly updated and improved, so should we! Unfortunately, keeping up with the trend can be exhausting, but it doesn’t have to be. In this article, I will show you how small experiments can be a fun and effective way to learn new knowledge and make sure that learning and staying up to date is always fun.

Key Points

• Small experiments can be an interesting and effective way to learn new knowledge in web development and JavaScript. Learning can be more enjoyable and less exhausting by setting rules such as preparing for work, scheduling tasks, avoiding deadlines, and giving yourself some time to entertain.
• Reviewing your experiments can help you improve your skills and knowledge. Ask yourself whether problems arise during execution can be avoided with better preparation or how to improve the quality of the work that has been executed can provide valuable insights.
• There are a large number of resources and tools for inspiring and learning. From visual resources such as CodePen, Dribbble or Behance, to JavaScript runtimes such as Node.js, Electron, Cordova and React Native, to APIs, libraries, frameworks, and even physical world tools such as Raspberry Pi, Arduino and LEGO® MINDSTORMS® There are a variety of options to help you enhance your JavaScript skills.

Keep the fun of the experiment

Have you done a side project? If you did, I believe you had a project that was very interesting at first, but it quickly turned into a mess. Being in trouble is not fun and can seriously damage the motivation of the side projects and work. The main reason for this is usually the spread of range or stress, and you should relax in your spare time. By enforcing some rules, we can ensure that we don't encounter unpleasant surprises:

1. Prepare your work. Make sure you know exactly how big the experiment is and what it contains. If there are too many, divide it into easy-to-manage chunks, each with a start and end, or give up.
2. Schedule the task. Don't stay up late every night. Just schedule one to two times a week, one to two hours each time.
3. No deadline. Everyone, including you, needs to relax. It is OK to set goals, and it should be OK to miss them.
4. Give yourself some entertainment time. While you shouldn't procrastinate, life is more than just a ticking on a bunch of to-do lists. Spend time to enjoy the fruits of labor.

Performing small experiments does not mean they cannot be part of a larger project. For example, take the data visualization project as an example. It may take some time, but it is easy to split into smaller tasks:

• Set up the construction workflow
• Find and get interesting data (this is a cool API list that can inspire you)
• Use Node.js to obtain and process data, and use ES2015 features
• Compare and select a technology (canvas, WebGL, DOM/SVG) or library (d3.js, p5.js, THREE.js) to visualize data
• Visualize data with the tool of your choice

I use the Trello board to track all my experiments. There, I will list and plan them and add relevant information before starting the experiment. For larger projects, I tend to create a new board specifically for the project and add cards for each task. Any alternative is sufficient. Recording things can eliminate the noise in my mind!

Review experiment

In addition to learning through practical operationsnew things, experiments are also an excellent opportunity to improve oneself. Review your experiment and ask yourself the following questions:

Can problems arise during execution be avoided by better preparation? If so, what should I do?
What is the quality of the executed work and how can I improve it?
Can I prepare my experiment more effectively?

Reviewing and improving what we do will bring us experience – it is invaluable in our industry. The same goes for communication and recording. Many experimental reviews make up a great blog post.

Although it has little to do with JavaScript, one of my particularly interesting experiments is to create vector graphics in Sass, where I convert the coordinate graph to a path and rasterize it into a single pixel box shadow. Not only did I learn about the Sass function that I was not familiar with before, I also had to study some algorithms.

Looking for inspiration

If you are not sure what to learn next, it is best to keep abreast of some resources for inspiration.

If you like visual effects and art, CodePen is a great place to start. Selected works are often filled with amazing brushstrokes that deserve a closer look at how they work. If you feel more adventurous, try Dribbble or Behance.

SitePoint is powered by many authors from various backgrounds. Therefore, the JavaScript channel is full of all kinds of JavaScript essences.

Running time environment

You may already know that JavaScript can run in the browser, but did you know that JavaScript can also be run outside the browser?

• Node.js is by far the most popular non-browser JavaScript runtime. Using it, you can write scripts, command-line interfaces, desktop applications, and more. It runs on Windows, OS X and Linux.
• Electron allows you to build cross-platform desktop applications using traditional HTML, CSS, and JavaScript.
• Cordova allows you to build mobile applications using HTML, CSS, and JavaScript.
• React Native allows you to build mobile applications using the React framework.

Browser API

In the past few years, many new APIs have been introduced into the browser that allow you to do all kinds of interesting things.

• Service Worker API is a large API that allows us to perform various operations, such as providing offline support.
• WebRTC is an API that allows us to establish a real-time connection with another computer and pass audio and video data.

Some APIs allow us to use device hardware, such as reading sensors or having the device perform certain operations (such as vibration).

• Ambient light sensor provides information about the brightness of ambient light that we can use to adjust our website or application.
• The battery status is quite self-evident; we can request the battery status. Heavier applications can use it to enable power saving mode.
• Geographical location provides us with information about the user's location.
• We can use network information to provide smaller files to clients.
• Notifications are very useful for many applications, such as chat applications.
• Are you building a game that uses the mouse to input? Pointer lock is your friend.
• The proximity sensor allows you to understand the distance between the user and the device. Maybe this can be used to detect hugs?
• The device direction allows us to detect changes in direction.
• Vibration allows us to vibrate the device, which is great for gaming.

Libraries and Frameworks

Most libraries are designed to accomplish tasks easily, so it is always beneficial to have experience using them. More popular libraries and frameworks such as Angular and React may even be a must-have for work. One or two experiments can also be a great way to prepare for an interview.

Know that libraries and frameworks have limited lifetimes. While they are useful, you should be able to understand the problems they solve and be able to solve them without them.

Structure

• Angular is an MVC framework that many teams are still using.
• React is a library for rendering views.
• Polymer is a library for creating web components.
• Lodash.js, Underscore.js and Ramda.js are all functional programming libraries. Some teams like to use them, but many don't. Either way, a good understanding of functional programming is a very popular skill.

Visual

• D3.js is a graphics and DOM operation library that works very well if you want to render graphics using SVG or HTML.
• p5.js is a Processing-inspired library (a flexible software sketchbook and a language for ">Learn how to code in the context of visual arts"). It has a rich series of functions to draw shapes and perform calculations.
• Three.js is a high-level 3D API for abstracting the difficult parts of WebGL.

Physical World

Personally, I was really excited when I could write software to do things in the physical world. If so, consider buying any of the following sets:

• Raspberry Pi is a single-board computer that is credit card-sized and perfect for teaching or learning.
• The Arduino is similar to the Raspberry Pi, but focuses more on the electronics aspect.
• LEGO® MINDSTORMS® is a microcomputer that can control LEGO hardware. What do you don't like?
• Johhny-Five is a JavaScript framework for robotics and the Internet of Things that can be installed on an Arduino or similar device.

All of the above can be programmed in JavaScript, or can run JavaScript.

Conclusion

Small experiments are an excellent practice to learn new things. Another benefit is that they can help you improve the way you work, which is invaluable in our industry. By enforcing some rules, we can keep the experiments interesting and motivate ourselves to learn more and become better.

For those in trouble, I hope this article inspires you to start a new, interesting experiment. For those who are unsure what to deal with next, I hope this article gives you some inspiration. Or maybe you have some good ideas about experimenting? Or maybe I'm missing something? Either way, I'd love to hear you in the comments below.

Frequently Asked Questions about JavaScript Learning Experiments

What practical projects can I do to improve my JavaScript skills?

There are many practical projects you can do to improve your JavaScript skills. For example, you can create a simple calculator, a digital clock, or a weather application. These projects will help you understand how JavaScript interacts with HTML and CSS to create functional web applications. You can also try creating a to-do list application, which will help you understand how to manipulate document object models (DOMs) using JavaScript.

How do I use JavaScript in Google experiments?

Google Experiment is a platform that allows you to test and demonstrate your JavaScript skills. You can create interactive experiments using JavaScript and share them with the world. To use JavaScript in Google experiments, you need a basic understanding of how JavaScript works and how to use it to manipulate web elements.

What is JavaScript's role in creating interactive web pages?

JavaScript plays a crucial role in creating interactive web pages. It allows you to manipulate elements on web pages based on user actions. For example, you can use JavaScript to change the content of a webpage when a user clicks a button, or to animate elements on the webpage.

How do I create animations using JavaScript?

JavaScript provides a variety of ways to create animations on web pages. You can create smooth animations using the requestAnimationFrame method. This method tells the browser to execute the animation and requests the browser to call the specified function to update the animation before the next redraw.

What is the importance of JavaScript in web development?

JavaScript is a basic component of web development. It allows you to create interactive and dynamic web pages by manipulating elements on a web page. Without JavaScript, the web page will be static and will not respond to user operations.

How do I improve my JavaScript coding skills?

The best way to improve JavaScript coding skills is practice. You can practice your skills by doing various projects, such as creating a calculator or to-do list application. You can also take part in coding challenges on platforms like CodePen to test your skills.

What are the resources for learning JavaScript?

There are many resources available for learning JavaScript. Websites such as Codecademy, freeCodeCamp, and Mozilla Developer Network provide free tutorials and guides on JavaScript. You can also find many video tutorials on YouTube.

How do I debug my JavaScript code?

You can use the console in the browser developer tools to debug JavaScript code. The console allows you to log messages, display errors, and run JavaScript code in real time.

What is the role of JavaScript in front-end development?

JavaScript is a key part of front-end development. It allows you to create interactive and dynamic web pages, verify user input and communicate with the web server.

How do I interact with a web server using JavaScript?

You can use JavaScript to send requests to the web server and receive responses. This is done using the fetch API or XMLHttpRequest object. This allows you to update parts of the page without reloading the entire page.

The above is the detailed content of Improve Your JavaScript Learning with Fun Experiments. For more information, please follow other related articles on the PHP Chinese website!