JSK Weekly - April 8, 2020

While the world tests people, we'll talk about testing all things programming. Puneet Punj walks us through why MSSQL testing is not that difficult in "Testing Microsoft SQL Server with JavaScript" and introduces a simple and efficient approach to automation testing using Mocha Framework in "Introduction to Programmatic Approach for Testing with Mocha" while David Dal Busco shows us how to test Angular Components and Services with the help of mocked HTTP requests in "Test Angular Components and Services With HTTP Mocks."

Shaumik Daityari helps to simplify Git with awesome GUI tools and IDEs extensions in "Top Git GUI Tools and Extensions for 2020" and Ashan Fernando talks us through the best serverless solutions for different categories in "13 Top Serverless Solutions for 2020" both on the Bits and Pieces blog.


How to Easily Select and Delete Multiple Items in the EJ 2 Scheduler Control

Selecting multiple items and deleting them all is an easy job compared to deleting individual items separately. The former saves a lot of time and effort. The Syncfusion Essential JS 2 Scheduler control has built-in support to select multiple items. This blog serves as a guide to implement this supp

Authored by: Syncfusion

Why E-Commerce and CMS Should Be Separated

The original version of this post dates back to 2015. It felt like a necessary (and fun) exercise for us to go back to it today, 5 years later. At the time, we presented the statement that e-commerce and CMS should be separated as a contrarian one.

Authored by: Snipcart

13 Top Serverless Solutions for 2020

Best serverless solutions for different categories. Serverless is no longer a novel technology to the software industry. Besides, its nearly six years, since Amazon Web Services (AWS) introduced Lambda, known to be the birth of Serverless computing. Since then, different Serverless solutions emerged with diversity, ranging from computing, databases, and streaming data, to name just a few.

Authored by: Bit

Releasing Different Web App Features for Different Users

If you look at the reference architecture diagram, there are three sections highlighted. Here, AWS CloudFront service acts as the main entry point for the application, where we utilize its proxy and routing capabilities.

Authored by: Bit


JS VidCon - Virtual Conference for Developers

JS VidCon is a virtual conference, taking place on May 7th, where developers from all over the world can share and gain knowledge from the comfort of their own home/office, featuring 4 tracks: Angular, React.js, Vue.js, and Node.js. Simply click to sponsor, speak or participate. Powered by: EventHandler (@eventhandlerPro)

Authored by: JS VidCon

Top JavaScript GitHub Repos

In this article, we'll look at the top libraries and frameworks on Github we can potentially use now or later. Vue.js is a great front end framework that's known to be easy to use. It features...

Authored by: John Au-Yeung

Why JavaScript is going to be the language of the future

JavaScript was the first programming language I picked up. Well, I started with HTML and CSS, so just like so many other web developers, JavaScript was a no-brainer for me to go with, simply because it blends so well with HTML and CSS that it actually enhances your HTML/CSS skills as well.

Authored by: freeCodeCamp.org

30 Helpful Javascript Snippet that you should know - Kriss

JavaScript is a very simple and useful language, it doesn't require much configuration to set up, and JavaScript is one of the most popular languages you can learn. As many people say: "If you're going to learn just one programming language, go for JavaScript." If this sounds convincing to you, here is a list of [...]

Authored by: kris

Introduction to Regular Expressions in JavaScript

In this tutorial, you will learn all you need to get started with regular expressions in JavaScript. You will learn how to create new expressions, how to use them and how to test them. You will also learn how to create simple and complex patterns and about special symbols and characters.

Authored by: Alex Devero


TypeScript For Beginners

TypeScript is becoming more popular than ever. It was no love at first sight for me and TypeScript, but we've got to know each other. Currently, I don't start a project without using it! In this...

Authored by: Dev By RayRay

Optional Chaining with JavaScript and TypeScript

We have probably all come across the following problem before - an optional property in an object, that if it is present, needs to be used and if not present, then do something else or break.

Authored by: Alex Pickering


Angular 9 Material Progress Bar Tutorial Example - positronX.io

This is a step by step tutorial about how to create eye-catching progress bars in Angular 9 using Angular Material 9+ library. We are going to use mat-progress-bar directive to create various types of progress bars. A progress bar is a user interface element. It is used to show the progression for various operation performed ...

Authored by: Digamber Singh

Angular State Management Using NgRx

A Simple Introduction to the Redux Pattern with Angular's Most Popular State Management Library In the modern age of front end development, it's common to separate the concerns of your application into components. While this introduces many benefits and creates a degree of simplicity, it can also introduce complexity when several components all depend on the same data.

Authored by: Jamie Morris

Angular 9 - Create an interactive map with OpenLayers (Part I)

As a newbie in Angular, i was struggling to figure out how to add an interactive map to my Angular project. The easiest way to integrate a map on Angular is using Google Maps.

Authored by: Frontend Weekly

Creating Web Components with Angular

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps. We can transform Angular components to Web...

Authored by: John Au-Yeung

Experimenting With Chained Keyboard Events Using Event Plug-ins In Angular 9.1.0

Ben Nadel looks at how one might implement an Event Manager plug-in in Angular such that chained keyboard sequences can be seamlessly bound directly within the Angular template syntax.

Authored by: Ben Nadel


Understanding Ref Forwarding in React

Tip: Use cloud component hubs like Bit.dev to share, organize and reuse your React component. It's a great way for you and your team to maximize code reuse, speed up development and build maintainable and scalable projects. React.forwardRef takes a function with props and ref arguments. This function returns a JSX Element.

Authored by: Bit

Server-Side Rendering in React - react-router

In my "Server-Side Rendering in React" series, I have described so far, how to configure an application to be rendered on both server and client. I have also shown how to add Redux to the server-rendered app. Today we will enrich our example with routing.

Authored by: Bartek Dybowski

React On Page Scroll Progress Bar with Web API Tutorial - positronX.io

Do you want to display a progress bar on page scroll in React application? Well, then you are at the right place. We are going to build a progress bar only using pure JavaScript and CSS in a React 16+ application. Today, In this tutorial i am going to show you how you can create ...

Authored by: Digamber Singh

15 Things to Consider When Setting Up a React Native App

React native has revolutionized the mobile app development process, especially after hybrid mobile app development like Phone-gap, Ionic or other web-based mobile app development. React Native is not...

Authored by: Bit

Theming React Components with CSS Variables

Using CSS custom properties for React theming This post shows my own personal way of making use of CSS variables for theming. I do not claim it to be the best in any way. There are other ways to implement theming with CSS vars, some of them may be more preferable to you (and that's ok).

Authored by: Bit

My Top 5 Custom React Hooks for your Web App

Many times, you would have faced the clutter of unrelated logic inside your React component if you have built the react apps earlier using class components. In many cases, you might not be able to break the component into smaller pieces due to state logic spread all over the component.

Authored by: Frontend Weekly


Vue.js Transition Effects - Enter and Leave

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 basic transition effects and animations. Vue provides us with a variety of ways to apply transition effects when elements are added, updated or removed from the DOM.

Authored by: John Au-Yeung

Building Vue Enterprise Application: Part 2. Services

Applying Principles of Clean Architecture to Enterprise Frontend Application Intro Requirements Analysis Tests first (TDD) Service, at your service! Provider Conclusion Last time we built a strong foundation for our Blog based on the concepts of Clean Architecture. We set up rules and data structures of Article and Comment: primary building blocks of our app.

Authored by: Greg Solo

A First Look at Vue Router in Vue3

Managing routes is an essential feature for most single page applications. With the new version of Vue Router in alpha stages, we can already start checking out how it works in the next version of Vue. A lot of the changes in Vue3 will slightly modify the way we access plugins and libraries, and this includes Vue Router.

Authored by: matt maribojoc 🇵🇭


How to Implement a Stack in Node.js

Stack is one of the most important data structures in programming, but how we can implement a stack in javascript? Let's dig in. The stack is a fundamental abstract data structure for computer science that serves a collection of elements with the LIFO method and two main operations: push (add a new element to stack) pop (remove the top element) Stacks are used mainly by algorithms(Backtracking,depth-first search,...), OS(operational systems), programming languages(memory management, call stack,...

Authored by: petros koulianos

Libraries and Tools

How UI Components Libraries Saved The World

At the beginning of this year, I switched company. And as you can imagine that means changing your daily duties, practices and roles. My new role involves working in React 80% of the time. So now, more than ever, I find myself having to deal with certain aspects strictly related to building the front-end of an application.

Authored by: Piero Borrelli

Best Git GUI Tools and Extensions in 2020

Simplifying Git with awesome GUI tools and IDEs extensions. Beginners generally start with Git terminal commands to understand the basics of Git. While it a good idea to learn Git's terminal commands, you may feel tedious when going back to the terminal for a fairly simple task as a commit or a push.

Authored by: Bit


Introduction to Programmatic Testing with Mocha

Simple and Efficient Approach to automation testing using Mocha Framework Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

Authored by: Puneet Punj

Testing Microsoft SQL Server with JavaScript

MSSQL testing is not that difficult When I started testing Microsoft SQL Server database in my previous role, there was not much documentation available in general. So I had to spend extra hours to understand and build an end to end test.

Authored by: Puneet Punj

Test Angular Components and Services With HTTP Mocks

How to test Angular Components and Services with the help of mocked HTTP requests I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Eighteen days left until hopefully better days.

Authored by: David Dal Busco

Functional Programming

JavaScript Interview Questions - Functional Programming

Functional programming is a programming paradigm that dictates the way we build apps. Functional programming treats functions in programs like mathematical functions. This means that we avoid...

Authored by: John Au-Yeung

The Reducer Function in JavaScript

The reducer function in JavaScript is hardly advanced material-it's quite basic. But I was surprised recently to discover that there are many JavaScript programmers, even experienced ones, who aren't really familiar with it. In general, this method is found in arrays and allows us to convert an array to string, number, or object.

Authored by: DiscoverSDK

JavaScript Algorithm: Hydration Count

We are going to write a function that will return how many liters of water a young man named Archie should drink to stay hydrated We are going to write a function called liters that will take a number ( time) as an argument. We have a young man named Archie.

Authored by: JavaScript in Plain English