JSK Weekly - January 2, 2019

First of all, we wish you all the best in the year 2019. If one of your New Year resolutions is to learn and get better in JavaScript, you are in the right place. Let's go and see all the goodies we have in the first newsletter of the year 2019.

Oftentimes we are not using Vanilla JavaScript to its full potential. Many developers still have a misunderstanding about the "this" keyword, what it actually is and how to handle it. To shed some light on this topic, we highly recommend the great article "Understanding Call, Bind and Apply Methods in JavaScript" by Sukhjinder Arora.

Test Driven Development, or TDD for short, can greatly increase the quality of your code. If you haven't tried it already we highly recommend doing so. If you lack motivation, make sure to check out Mario Hoyos's story "A Guide to Test-Driven Development (TDD): Shorter Feedback Loop, Faster Workflow".

Did you ever wonder "How to Perform Web-Scraping using Node.js"? If the answer is yes, you'll find Ankit Jain's article very interesting and enlightening.


A Guide To Sorting Algorithms in JavaScript

Learn who to write Bubble, Insertion, Merge, and Quick Sort Algorithms in JavaScript Sorting is considered to be an important concept in many programming languages as it helps us locate elements in a faster and easier manner. In this post, we will use sorting algorithms to sort an array.

Authored by: Rajat S ⌨️

Page Object pattern in JavaScript

The Page Object pattern is certainly the most utilized pattern when it comes to web application test automation. It is a powerful method for reducing code maintenance costs and code duplication which leads to increase of the re-usability and robustness.

Authored by: Vladimir Gorej

A comprehensive look back at Frontend in 2018

By now you've seen all manner of annual reviews. But in all probability you haven't seen one as thorough as this. It's worth your time. We promise you'll learn something.

Authored by: LogRocket

Design Patterns Series: The Template Method

In our last article in the series, we discussed in-depthγ€½ about the Strategy Method. In this articleπŸ“„, we will look at the Template Method. One of the many design patterns that help developers writeπŸ“ well-structured apps. Tip: Build software faster as a team with Bit .

Authored by: Chidume Nnamdi


Understanding Call, Bind and Apply Methods in JavaScript

If you are learning JavaScript, you might have seen the this keyword. The this keyword in JavaScript behaves differently compared to other programming languages. This causes a lot of confusion for programmers. In other object-oriented programming languages, the this keyword always refers to the current instance of the class.

Authored by: Sukhjinder Arora

Let's Build Prototypal Inheritance in JS

Can't find money in the wallet? Try in that smaller wallet. The idea for this post is pretty simple. I want to some extent build and with that, illustrate how prototypes work in Javascript. We have to make a statement.

Authored by: Codementor


Decorate your code with TypeScript decorators

Decorators introduces programmers to write the metadata annotation which will help you to introspect your code. Best use-case you find for decorators, will be the cross cutting concerns β€Š-β€ŠAspect Oriented Programming. In computing, aspect-oriented programming (AOP) is a programming paradigm that aims to increase modularity by allowing the separation of cross-cutting concerns.

Authored by: codeburst.io


Angular Material Icon Tutorial With Example

Angular Material Icon Tutorial With Example is today's topic. The Angular Material library has a wide variety of components that we can use. One such component is . The component makes it easier to use vector-based icons in your angular app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats.

Authored by: KrunalDLathiya

Creating A Vue.js Inspired Event-Modifier DOM Plug-In In Angular 7.1.4

Ben Nadel uses Angular's Event Manager plug-in system to add Vue.js inspired event-modifiers (like .stop, .prevent, .once, and .self) to an Angular 7.1.4 application. This allows Angular to mimic the Vue.js event-handling logic.

Authored by: Ben Nadel


Declarative Programming & React

Declarative programming is something popularized by React in the JavaScript community. It is not a new thing but just got popularized in recent days. According to Wikipedia: declarative programming is a programming paradigm - a style of building the structure and elements of computer programs-that expresses the logic of a computation without describing its control flow.

Authored by: Saurabh Sharma

Conditional Field With React

Sometimes we need to render a form based on what information the user has decided to share with our website. As an example, should we have two payment methods between using a card or paypal, we can render between a card number fields and a paypal form, which usually consist of an email address.

Authored by: Codementor

From scratch to Create React App on Windows 10

Photo by Luana De Marco on Unsplash I have been a professional web developer for 10 months now and used both MacOs and Windows in that time. My preferred OS to use is Windows, for no other reason than I prefer the keyboard layout.

Authored by: πš‚πšŒπš˜πšπš πš‚πš™πšŽπš—πšŒπšŽβ—πŸ¦„πŸ‘¨β€πŸ’»

Event Propagation: React Synthetic Events vs Native Events

Recently, I came across an interesting problem involving Event Propagation in React. I want to share my discovery around React's synthetic event system, in the hope that you won't spend several hours, like I did, questioning your existing understanding of JavaScript events.

Authored by: Gideon

Unofficial React Native TypeScript

Over this past year, I have adopted TypeScript for React web development projects; feeling especially good about that decision as Create React App now (as of this Fall) officially supports it. Wrote...

Authored by: codeburst.io


5 Most-Requested Features For Vue.js in 2018

Vue has a small and focused API, but users and maintainers are always thinking about potentially useful new features. Here's a breakdown of five of the most popular feature requests from Vue's GitHub issue board.

Authored by: Codementor

Vue.js Up And Running By Callum Macrae

Ben Nadel reviews Vue.js Up And Running: Building Accessible and Performant Web Apps by Callum Macrae. This book is a gentle but thorough introduction to Vue.js, especially for people with an Angular or Angular.js background. It gave Ben the confidence to start building Vue.js applications, which is exactly what he tried to do!

Authored by: Ben Nadel


How to perform web-scraping using Node.js

In this post, we'll learn how to use Node.js and friends to perform a quick and effective web-scraping for single-page applications. This can help us gather and use valuable data which isn't always available via APIs. Let's dive in. Web scraping is a technique used to extract data from websites using a script.

Authored by: Ankit Jain

Node.js Module Exports - Demystified

Understand Node.js Module Exports and get comfortable using the syntax. Get best practices for using module exporting to give your app a better structure.

Authored by: Stackify

Libraries and Tools

The State of JavaScript Frameworks 2019

Quick SITREP (If you just want the meat of the tech, skip to the "Framework Cookoff" or "Summary and Victor" section.) I'm on vacation, so of course I'm writing and reviewing frameworks to write some code! πŸ€“ An Aside: Hey, if you're on vacation and not writing code, more power to you.

Authored by: Adron Hall

Odi - server-side framework

Hi guys! I am currently working on the server-side TypeScript framework. My team already widely use this framework in various e-commerce and ERP projects. Structure and semantic were inspired by other popular frameworks like Spring and ASP.NET .

Authored by: The Practical Dev

9 Tips and Tricks for Chrome Dev Tools

Chrome is increasingly not just a browser of choice, but also a powerful development tool in its own right. New features are regularly introduced, some of which fall more naturally into (my) development cycles than others.

Authored by: Laura Weatherhead


A Guide to Test-Driven Development (TDD): Shorter Feedback Loop, Faster Workflow

Trust me, I used to hate testing too. A short story Like many before me, I was hesitant to try my hand at test driven development. I always cited reasons such as having twice the code to maintain and/or spending time shipping instead of writing extra code, which was my way of justifying being lazy.

Authored by: Bit

Explore a more complete front-end testing strategy

The assumption in this article is that we are continuously developing a relatively large front-end project, and we have adopted a domain-driven design, as well as an object-oriented programming model. The front-end business logic is split into domain modules / UI components .

Authored by: unadlib

Revisiting React Testing in 2019

Seems that today, everyone is using a different React testing library and even when they are using the same one, their philosophy varies widely. The example from this article is available for download. The Libraries In reading an article, Testing Apollo's Query Component , I was reminded that there are currently (going into 2019) several popular and competing React testing libraries.

Authored by: codeburst.io

Using API first and TDD for your next library

I used this technique to help me create more relevant unit tests, and I wanted to share it with you. If TDD does not sound familiar to you, check this quick but straight to the point post : Let us imagine we are building a node module to check if a date is between two dates.

Authored by: The Practical Dev


How Service Workerβš™ Cache Works - Does It Make Your Site Faster?

Progressive web applications are sold as fast thanks to service worker caching. How does it work and does it make your site faster?

Authored by: Chris Love

How to Learn Web Development

So you want to learn web development? This post attempts to go through the best way to learn web development as a complete beginner. It gives you guidelines on how to learn web development, what topics to learn in which order and why, and general principles on learning.

Authored by: The Practical Dev

Checking if an input is empty with JavaScript

Last week, I shared how to check if an input is empty with CSS. Today, let's talk about the same thing, but with JavaScript. It's much simpler. Here's what we're building: If you want to validate the input when a user types into the field, you can use the input event.

Authored by: Zell Liew