JSK Weekly - February 26, 2020

Single Page Application Example using Essential JS 2 Components

In this article, I'll walk you through some fundamental concepts for building single-page applications (SPA) and some single-page application examples created using Syncfusion Essential JS 2 components. What is single-page application (SPA)? A single-page application (SPA) is a web application in

Authored by: Syncfusion

10 Useful Web APIs for 2020

Awesome Web APIs you might have missed - with examples. You probably already know and use the more popular Web APIs available out there (Web Worker, Fetch, etc.) but there are a few others, less popular, that I personally enjoy using and would recommend you try as well.

Authored by: Bit

Learn Alpine JS in this free interactive tutorial

Alpine.js is a rugged, minimal framework for composing Javascript behavior in your markup. That's right, in your markup! It allows you to write most of your JS inline in your HTML, making it easier to write declarative code (as opposed to procedural code).

Authored by: freeCodeCamp.org

Managing image uploads in your Browser: Base64 vs ObjectURLs

Images rule the internet with over two billion pics making their way to the web every day. Because images are such an integral part of the web experience, browsers and HTML have a few "built in" tools to handle and process images efficiently.

Authored by: gitconnected

10 FullStack Engineering Mistakes to Avoid

The way to pick good mentors is to always look for people who have successfully been through the same path you are about to embark on. Ask what they did, why and how? This was the advice I got as a...

Authored by: Bit

5 Ways To Use "Console" Object

The console object gives you access to the browser's console. It lets you output strings, arrays, and objects that help debug your code. The consoleis a part of the window object, and is supplied by the Browser Object Model (BOM). It works both at the front-end and the back-end sides.

Authored by: Prateek Kumar Singh

4 Ways To Swap Variables in JavaScript

A lot of algorithms require swapping 2 variables. During a coding interview, you could be asked "How to swap 2 variables without a temporary variable?". It's good to know multiple ways to perform swapping of variables. In this post, you will read about 4 ways to swap (2 that use additional memory and 2 that don't).

Authored by: Dmitri Pavlutin

7 ways to remove duplicates from an array in JavaScript

It's a common use case in many projects to need to remove duplicates from array in JavaScript. For interviews, it's a common coding challenge to practice for everyone. Here are seven ways to filter out duplicates from an array and return only the unique values.

Authored by: gitconnected

JavaScript Throttle and Debounce | Concept and Comparision

Throttling and debouncing are two popular and widely performed coding techniques which will help to improve the performance of JavaScript code that undergoes execution repeatedly within a certain period of time. In this tutorial, we’ll learn about the JavaScript Throttle and Debounce and how to implement them in our code to boost our code’s performance and write better and faster code in JavaScript.

Throttling and debouncing enable coders with control over the rate at which a method is called. They are especially useful when dealing with event handler assignments. We can take examples of scroll handlers, keyboard events, or even just clicking a button rapidly.

Authored by: kris

5 JavaScript Books you should read: A Coding Teacher's Perspective

Generally speaking, I wouldn't recommend coding books or coding textbooks because by the time they are published they are already out of date or will be within a few years. That being said, when I was teaching coding I spent a lot of time reading/watching content from various avenues to make sure my students would have relevant content, practical exercises and knowledge for entry-level jobs.

Authored by: Hans McMurdy

Ultimate Guide to Tips, Tricks, and JavaScript Features You Should Know!

My main coding language is JavaScript, and I want to talk about some of the really cool features that JavaScript supports. JavaScript often abbreviated as JS, is a programming language that conforms...

Authored by: gitconnected

Setting Up a New MacBook for JavaScript Development

I just got a new MacBook, and I need to prep it for JavaScript software development. This happens all the time when you get hired for a new job, or when you just need to upgrade your personal machine for side projects.

Authored by: Eric Elliott

A detailed review of variables in JavaScript

Similarly to many other programming languages, JavaScript also has variables. An easy way to think about variables is to think about them as storage containers. Each of these containers has a name, a variable name. You can use these containers to store various types of data, such as numbers, strings, objects, arrays, etc.

Authored by: Alex Devero

Comparing Callbacks, Promises and Async Await in TypeScript

How do callbacks, promises and async/await compare to each other? This article shows the same scenario using each of these three techniques so you can see the differences and choose which appeals most to you. The code uses TypeScript, but can easily be adapted to JavaScript.

Authored by: John Papa

Typing Arrays in TypeScript

In this blog post, we examine how Arrays can be typed in TypeScript. Table of contents: Arrays are used in the following two roles in JavaScript (and sometimes a mix of the two): Lists: All elements have the same type. The length of the Array varies. Tuple: The length of the Array is fixed.

Authored by: Axel Rauschmayer

More TypeScript Types you need to know better

Having static types in JavaScript is enormously valuable, but knowing how to use them appropriately can also be difficult. I think you might be surprised by some of the details of these types. Null and Undefined Types Are More Than You Think In JavaScript running typeof on null returns 'object'.

Authored by: David Choi

Jasmine Unit Testing Angular 9 Tutorial

Jasmine is the most popular JavaScript library for unit testing web apps. It's used by default as the default testing framework in Angular projects generated using Angular CLI. In this tutorial, designed for beginners we'll help you to easily get started with unit testing using Jasmine in Angular 9.

Authored by: Ahmed Bouchefra

Debug Angular 9 in 60 Seconds

The Angular 9 Ivy runtime offers a new ng object for debugging Angular apps, when you run in Dev mode. Let's get an idea of what you can do. This GIF shows the following steps: Run your Angular 9 app Open the Chrome developer tools Select the component's element Type the following code in your console Note that my angular app has a component with an array of heroes.

Authored by: John Papa

Angular : Scroll Click On ngx-perfect-scrollbar Closes the Dropdown - Code Handbook

Drop down getting closed on clicking the ngx-perfect-scrollbar scroll in your Angular application ? Here is the solution. In this Angular tutorial, I'll talk about an issue that I encountered while using ngx-perfect-scrollbar on a drop down. While clicking on ...

Authored by: codehandbook

Maximizing Code Reuse in React

Reusing code speeds up development and makes our codebase more maintainable and scalable (but you already know that).

Authored by: Bit

Easily Improve the Performance of your React App

Understand what PureComponents are and how to use them to improve your React apps In this article, we will see how we can easily improve the performance of our React app. So Let's get started. We will take a simple example, where we add an item to the list and then render all the added items to the screen.

Authored by: JavaScript in Plain English

React Native Firebase - Firebase Integration in React Native - positronX.io

This is a step by step tutorial on learning how to integrate Firebase's Firestore package in React Native application to access the full features of Real-time NoSQL database. Firebase is a well-known Backend-as-a-Service (Baas). It offers top-notch mobile application development experience to web developers. Firebase is Google's mobile app development platform that empowers you to ...

Authored by: Digamber Singh

Our first component - Let's learn Vue.js (Part 1)

And here is how this series works: In each article, we'll cover an important topic on Vue.js. To learn Vue.js, you should at least have a basic knowledge of HTML & JavaScript. You will always find...

Authored by: JavaScript in Plain English

Building the Same Component in Vue2 vs. Vue3

With the release of Vue3 coming soon, many people are wondering "What's different in Vue2 vs. Vue3?" Although we've written articles before about the biggest changes coming, we haven't really taken a deep look at exactly how our code will change. So to show these changes, we're going to build a simple form component in both Vue2 and Vue3.

Authored by: matt maribojoc 🇵🇭

Introduction to Vue.js Templates

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we'll look at how to create and use templates to display data and handle events. Vue templates let us bind data to the DOM.

Authored by: John Au-Yeung

Create an Online Multiplayer Tic-Tac-Toe Game with Vue and Firebase

VueJS is a technology gaining popularity amongst web developers. It takes some of the best aspects of Angular & React and integrates them into a lightweight and performant framework. Because of this, there are many things you can do faster in Vue than in Angular or React.

Authored by: Lee McGowan - Writing

Node.js Testing with Jest

This tutorial demonstrates how to setup testing with Jest in Node.js. Whereas the previous tutorial has already shown you how to setup your Node.js application, this tutorial sets up a testing environment for your Node.js project. Let's dive into it by setting up Jest as testing framework.

Authored by: Robin Wieruch

How to Read a CSV File in Node.js

And Use Classes with Object.assign() to Store The Data In a prior article I showed how easy it is to read Excel workbook data. In this article we will expand on this concept of reading data from a file. In this case a structured comma separated values file.

Authored by: Gravity Well

How To Build A Simple Cryptocurrency Blockchain In Node.js

This tutorial demonstrates how to create a simple cryptocurrency, called smashingCoin, using the concepts of JavaScript classes and Node.js. Give it a try - it's simpler than you think! The unprecedented rise of cryptocurrencies, and their underpinning blockchain technology, have taken the world by storm - from the humble beginnings of being an academic concept over a decade ago to current increased adoption in various industries.

Authored by: Smashing Magazine

How to Docker with Node.js

Just recently I had to use Docker for my Node.js web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a Node.js application. Either take your own Node.js application, or take this minimal Node.js application or this minimal Node.js with Express application.

Authored by: Robin Wieruch

10 Top Chrome Extensions for Front-End Developers

10 Useful Chrome DevTools extensions you should know in 2020. "Progress isn't made by early risers. It's made by lazy men trying to find easier ways to do something." Bit is not a chrome extension but it's definitely a tool in the spirit of "making your dev life easier".

Authored by: Bit

Improve your Redux skills by writing custom middleware

Redux is a state-management library, often used with React. In this article, I will teach you to write custom middleware to extend the capabilities of Redux and gain an in-depth understanding of how global state is managed. If you know what Redux is, feel free to skip to the next section.

Authored by: JavaScript in Plain English

Testing Event Listeners In Jest (Without Using A Library) - I Like Kill Nerds

I love using Jest to unit test my Aurelia applications. Sadly, one of the most popular options for mocking event listeners and simulating events called Enzyme is targeted at React applications and to my knowledge, does not work with Aurelia or any other framework like Angular.

Authored by: Dwayne Charrington

Running Repetitive Test Code with Jest

In our unit tests, we often have to write test code that runs before and after each test. We've to write them often to run code to set up fixtures before tests and run code to clean up everything after tests. We can easily do this with Jest since it comes with a few hooks to do this.

Authored by: John Au-Yeung

JavaScript Math Functions Explained

Math Math is a standard built-in object to JavaScript that contains mathematical constants and functions as properties and methods. Most notably it contains the constants π and Euler's constant and functions such as floor(), round(), ceil() and many more. In this article, we'll look at examples of many of those functions.

Authored by: freeCodeCamp.org

JavaScript Clean Code - Functions

Functions are important parts of JavaScript programs. They're used for dividing code up into reusable chunks that do one thing. Therefore in order to have clean JavaScript code, we have to have easy to understand functions. In this article, we'll look at how to write functions that are clean and easy to read and change.

Authored by: John Au-Yeung

Using React Functional Components with Hooks in TypeScript

Using TypeScript with React's class components comes naturally as you simply extend the React.Component and immediately benefit from typing. When using React functional components however, some confusion may arise. Reacts functional components are simply JavaScript functions, but this doesn't mean that they don't follow any constraints.

Authored by: Lagily

Type Signatures - Functional Programming for JavaScript Developers

Wouldn't it be nice if there was a way to reason about each other's code, without having to understand every single line? What if there where a system that was common for all Functional Programmers? It seems too good to be true? In this article, we will expore the Hindley-Milner type system.

Authored by: Jan-Vidar Bakke