Tutorials on Javascript

Here is Part 3/4 of our tutorial series on building a JavaScript micro-library for creating your apps with Web Components. As I pointed out in previous lessons, the micro-library eases the path to development with Web Components, automating a lot of the work so developers can build their apps faster. Here's what we covered so far: Now in this tutorial, Part 3, we will automate another piece of functionality for classes that use our decorator. In this case, we'll automatically attach a Shadow DOM to those classes so that the user of the library does not have to manually create a Shadow DOM for their custom elements.

In this capstone tutorial, we're going to actually use the micro-library in app code so you can see how the micro-library makes things easier for developers in real world development. In the previous steps of this 4-part tutorial, this is what we accomplished: In this final tutorial, we will now refactor an example component to use the @Component decorator and the attachShadow function from our micro-library.

In this comprehensive guide, we will demystify a fascinating aspect of JavaScript, one of the most widely-used programming languages today. The key question we will grapple with is: "Is JavaScript a compiled or interpreted language?" We'll probe into the complex depths of JavaScript code execution and the functioning of modern JavaScript engines. This understanding will equip you to grasp the finer dynamics of JavaScript, empowering you to evolve into a more proficient JavaScript developer. JavaScript is frequently labeled as an 'interpreted' language, a tag attributed to its execution style. However, this description isn't wholly accurate. While it doesn't generate an executable file like conventional compiled languages, JavaScript does undergo a compilation phase. This guide aims to shed light on this intriguing facet of JavaScript, thereby dispelling any prevailing misconceptions. Conventionally, 'compiled' languages such as C++ convert the source code into a binary executable file. This file can then be disseminated and executed. 'Interpreted' languages, on the contrary, don't yield an executable file. They rely on interpreters to read and execute the code in real-time.

This article embarks on a journey into the captivating world of JavaScript custom iterable objects. It's an important topic when there is a need to iterate over related objects or define specific iteration behaviors for certain objects. Iterables and iterators are frequently used in JavaScript coding. An iterable is an object that determines its iteration behavior, like the values looped over in a for...of construct, while an iterator is an object that maintains its current position in an iterable. Understanding these two principles, we can create custom iterable objects in JavaScript by implementing the Symbol.iterator method, which returns the iterator object that includes the next method.

In this comprehensive guide, we will traverse through the complexities of memory management in JavaScript. There are numerous myths regarding memory allocation in JavaScript; a prevalent one being primitive values are stored on the stack , while objects are housed on the heap . However, the reality is far more nuanced. We will debunk these misconceptions about memory allocation, explore the role of the JavaScript engine, and shed light on the concept of automatic garbage collection . Memory allocation in JavaScript extends beyond the simplistic dichotomy of stack and heap storage. The ECMAScript specification , which forms the framework for scripting languages including JavaScript, does not dictate specific rules for memory allocation or deallocation. Consequently, decision-making about memory management is left to the individual JavaScript engines. Distinct JavaScript engines may implement diverse strategies for memory management. For instance, in the V8 engine , utilized by Chrome and Node.js, virtually all values, including objects, arrays, numbers, and strings, are stored on the heap.

JavaScript, a crucial language in the field of web development, is renowned for its asynchronous capabilities. A pivotal feature of JavaScript is the "callbacks" - functions that are carried out following the completion of an operation. However, using callbacks can pose certain challenges. This educational article dives into the issues related to JavaScript callbacks and offers insights into handling these complications more effectively. The primary issue while working with JavaScript callbacks correlates to a situation where numerous asynchronous operations need to be executed sequentially. This complication arises as each operation depends on the outcome of the preceding one. The traditional solution has been to nest callbacks, but this method can lead to a complex structure that is difficult to read and manage, especially when the operations increase. This situation, referred to as "JavaScript Callback Hell" or the "Pyramid of Doom," is demonstrated in the code snippet below: The pyramid-like structure in the JavaScript code is evident, creating challenges in reading, managing, and refactoring the code. The complexity escalates when error handling is incorporated into this JavaScript code.

Inheritance is a key concept in Object-Oriented Programming (OOP) that allows objects to adopt properties and methods from other objects, promoting code reuse and minimizing redundancy. JavaScript's implementation of inheritance, known as "prototypal inheritance," offers a unique approach compared to languages such as Java or C#. In this article, we'll dive into the intricacies of prototypal inheritance in JavaScript, including the "prototype chain," prototype properties, and accessing the prototype of an object. JavaScript's programming paradigm allows objects to be linked with other objects, enabling an object to utilize the functionality of another connected object. This connection between objects is referred to as the "prototype chain". This is akin to the scope chain, where each scope is connected to another until reaching the global scope. Prototypal inheritance in JavaScript implies that an object can adopt properties from its prototype object. For example, when creating an object literal in JavaScript, it is automatically linked to the default Object.prototype object. Here's a demonstration:

In this comprehensive guide, we'll be exploring the intriguing world of asynchronous programming in JavaScript, including its unique advantages and the challenges it presents. We'll be delving into the traditional approach of handling JavaScript asynchronous programming and the transformative changes ushered in by the introduction of Promises in ES2015. Additionally, we'll shed light on the revolutionary async-await syntax that simplifies the implementation of promises in JavaScript. Asynchronous programming signifies that a JavaScript program has the ability to initiate a potentially time-consuming operation and proceed with other tasks without waiting for the long-duration task to complete. Upon completion of the task, the program is notified and can access the resultant data. Asynchronous programming in JavaScript provides solutions to common issues encountered with traditional synchronous programming. Synchronous programming executes instructions sequentially, one following another, in the exact order they appear in the JavaScript program. While sequential execution makes synchronous programs relatively easier to comprehend, it also poses certain problems that asynchronous programming is designed to resolve.

JavaScript, known for its versatility and power, can pose significant challenges, especially when it comes to comprehending its fundamental concepts like closures . This article aims to debunk misconceptions about JavaScript closures, dive into the details, and highlight the importance of understanding closures in JavaScript programming. A common misunderstanding about JavaScript closures is related to their formation, and that is when a function yields a nested function. This misconception is due to numerous online resources showcasing JavaScript closures through code snippets containing a function that returns a nested function.

In the journey of becoming a proficient software developer, understanding and mastering key language features is crucial. JavaScript, a popular programming language, is no exception. One of its most intriguing yet often misunderstood aspects is 'hoisting'. This integral JavaScript feature can be both a boon and a bane. Therefore, every JavaScript developer must comprehend hoisting thoroughly. This blog aims to bring clarity to the concept of JavaScript hoisting, transforming confusion into understanding. JavaScript hoisting is a unique mechanism where variables and function declarations are placed at the top of their containing scope during the compile stage. This fascinating feature empowers developers to invoke functions before they make an appearance in the code.

JavaScript is often misconstrued due to its complex concepts. One such concept that makes developers scratch their heads is Coercion . This article aims to clarify the concept of JavaScript coercion, to equip readers with the knowledge to conquer JavaScript's coercion mystery. The topic of coercion is frequently highlighted as a challenging area within JavaScript. Here are some typical sentences you will hear from developers regarding coercion:

JavaScript is often misunderstood due to its complex concepts. One such concept that makes developers scratch their heads is Coercion . This article aims to clarify the concept of JavaScript coercion, to equip readers with the knowledge to conquer JavaScript's coercion mystery. The topic of coercion is frequently highlighted as a challenging area within JavaScript. Here are some typical sentences you will hear from developers regarding coercion:

As a seasoned JavaScript developer, you must have encountered Symbols in your coding journey already. These unique identifiers, often used as a replacement for UUID, offer more than meets the eye. They're instrumental in preventing collisions with keys in objects, as they're inherently unique each time they're created. Many developers tend to overlook the complexity and benefits of using Symbols in the JavaScript landscape. This guide offers an insight into the usage of JavaScript Symbols, both well-known and custom, and how to leverage them effectively. In JavaScript, Symbols are distinct from other data types since they can't be constructed using the new keyword. Instead, you invoke the Symbol() function to create a Symbol.

JavaScript, a powerful and widely-used web programming language, is packed with unique features and aspects that can sometimes seem scary to both beginners and seasoned developers alike. One such concept is this , a notorious JavaScript keyword known for its seemingly inconsistent behavior. Grasping this , along with some other crucial JavaScript concepts like the Event Loop and Promises, can significantly improve your coding ability and problem-solving skills. This article aims to simplify this , and several other misunderstood JavaScript fundamentals.

JavaScript, known as a versatile and dynamic programming language, plays a significant role in the current web development landscape. However, gaining mastery in JavaScript requires understanding complex concepts like Event Loops and Promises and many more. This article tries to demystify these topics, equipping readers with the essential tools and knowledge to enhance their JavaScript proficiency. JavaScript, a single-threaded, non-blocking, and asynchronous concurrent language (phew, those were a lot of big words), uses Event Loops as the core of its asynchronous behavior. Event Loops manage the execution of multiple code blocks over time, allowing JavaScript to appear multi-threaded on the front while remaining single-threaded on the back.

In this article, we will learn how to build an XY line chart with custom annotations using visx and React.

If you've ever wondered how libraries like React , Preact , or Svelte work under the hood, this is a great exploration of what you need to know. Using Web Components means that your own micro-library, which we build in this series, will work easily with any JavaScript codebase. This achieves greater levels of code reuse. Let's dive in. When building with Web Components, you will rely heavily on the set of specifications that make up Web Components: The main benefits Web Components bring to the table: reuse, interoperable, accessible, having a long lifespan, are due to their reliance on browser specifications. Had we adopted a library or framework, we might have lost some or all of these characteristics in the user interfaces built with it. UI components coded with some libraries aren't interoperable with other JavaScript libraries or frameworks, which puts a hard limit on reuse.

Web Components are a standard JavaScript technology whose adoption has soared in recent years. Since it enables your components to work in any JavaScript code base , whether you are using frameworks/libraries like React, Angular, Vue, or vanilla JavaScript, you can use Web Components everywhere. Author Stephen Belovarich , Principal Software Development Engineer at Workday, unpacks practical ways to build real world apps using the latest evolution of the web spec. In Part 1 of the book , you learn the basics of Web Components and build some standard component building blocks.

When I am working on personal projects, I often find the need to setup an API that serves up data to my app or webpages. I get frustrated when I end up spending too much time on hosting and environment issues. These days what I end up doing is hosting the API using Cloud Functions for Firebase . It hits all my requirements: The official name is Cloud Functions for Firebase. In this article, I am going to call it Firebase Functions. This is mostly to distinguish it from Google's other serverless functions-as-a-service: Cloud Functions. You can read more about the differences here . From that page:

Testing is basically a requirement for modern software today, not a nice-to-have. In the past, end-to-end testing was hard to set up, flaky, and generally a pain to deal with, but it's the best automated testing option to confirm software works. Cypress.io continues to improve the e2e testing experience and its new feature Cypress Studio takes it a step further to make writing tests quicker and easier too.

Web development is tough enough as it is, something as mundane as mismatched versions of Node in development versus production shouldn't be another thing you have to keep in mind. Volta can prevent this sort of issue and so much more for you and your dev team automatically, and it's easy to set up to boot. Read on to get started using it yourself.

Code dependencies are like Lego's . We're able to pull in other people's code; combining and stacking different packages together to fulfill our goals. Using dependencies greatly reduces the complexity of developing software. We can take advantage of the hard work someone has already done to solve a problem so we can continue to build the projects we want. A development pipeline can have multiple kinds of code dependencies: In JavaScript, we have a package.json file that holds metadata about our project. package.json can store things like our project name, the version of our project, and any dependencies our project has. Dependencies, devDependencies, and peerDependencies are properties that can be included in a package.json file. Depending on the instance where code will be used changes the type of dependency a package is. There are packages that our users will need to run our code. A user is someone not directly working in our code-base. This could mean a person interacting with an application we wrote, or a developer writing a completely separate library. In other words, this is a production environment. Alternatively, there are packages that a developer or system only needs while working in our code. For example linters, testing frameworks, build tools, etc. Packages that a user won't need, but a developer or build system will need.

React Native is a platform for developing apps that can be deployed to multiple platforms, including Android and iOS, providing a native experience. In other words, write once, deploy multiple times . This tenet holds true across most aspects of app development. Take, for example, usability testing. In native development, teams would need to test business logic separately on each platform. With React Native, it only needs to be tested once. The code we write using React Native is good to go on both platforms and, in most cases, covers more than 90% of the entire code base. The React Native platform offers a plethora of options. However, knowing which to use and when comes from understanding how those pieces fit together. For example, do you even need a database, or is AsyncStorage sufficient for your use case? Once you get the hang of the ecosystem around React Native, building apps will become the easy part. The tricky parts are knowing how to set up a strong foundation that helps you build a scalable and maintainable app and using React Native the right way. If we look at the app as a product that our end users will use, we will be able to build a great experience , not just an app. Should that not be the principal aim of using a cross-platform tool?

To get a better understanding of what Svelte brings us, it helps to step back and look at how we got here: Back in the 90s, in the original version of the web, there was only HTML. Browsers displayed static documents without any interactivity. The only way to get updated information, was by reloading the page, or navigating to a new page. In 1995, Netscape released JavaScript , making it possible to execute code on the end-user's machine.

In this article, we will learn how to implement Firebase authentication in a React app.

In this article, we will learn how to render a simple React app using an express server.

In this article, we will learn how to handle file uploads using react-hook-form.

An in-depth look at the Node HTTP module, and how to use it to scale up!

In this article, you'll learn how to create a Node CLI tool to convert a JSON file into a valid CSV file.

Working with dates in a Node app can be tricky as there are so many ways to format and display them. The APIs available in native JavaScript are way too tedious to use directly, so your best option is to use a date/time library. The best known and most flexible option is Moment.js . For this article, I'll presume you understand the basics of JavaScript and Node.js.