JSK Weekly - February 6, 2019

This week we recommend "Diving Deeper in JavaScripts Objects" with Arfat Salman. This great article will help clarify some aspects of JavaScript that are very often not clear enough.

"Understanding Callbacks and Promises" is a must for modern JavaScipt development, especially server-side. This week Fernando Hernandez is helping us to understand these core concepts from a different perspective.

People that love TypeScript will definitely enjoy learning about "When to use `never` and `unknown` in TypeScript" by Jesse Hallett.

As usual, we have plenty of great React articles. Our top pick for this week is "Understanding Render Props in React" by Chidume Nnamdi.


Currying in JS: Answering the traditional question, Add(2)(3), which gives sum of both numbers.

Understanding concept of currying and in depth analysis of most frequent interview questions around it

Authored by: Anubhav Srivastava

An Overview of the Most Exciting Proposals for the Web Platform Related to Web Components

As much as I like frameworks, I'm also a big fan of the native web platform, especially web components. I look forward to the times when the implementation will be powerful enough to solve the common problems in web development. And we're getting closer.

Authored by: Scotch Development

Brewfather - Progressive App Review

In my spare time I enjoy a little bit of homebrewing. What first started out as an experiment with a beer kit, soon turned into a geeky fascination with the science behind brewing beer. I am one of those annoying people that sniffs the beer and comments on the aroma

Authored by: Dean Hume


Diving Deeper in JavaScripts Objects

JavaScript objects pack more things than their terse and concise syntax would naturally exhibit. Creating and using objects in JavaScript is so easy, effortless, and so flexible that a lot of developers never realize that there is more to it. We are going to uncover some of the hidden layers and understand the intricacies of JavaScript objects.

Authored by: Arfat Salman

Understanding Callbacks and Promises

These two concepts are basic things of the Javascript programming language. Because this language works under the paradigm of asynchronous programming. So, I decided to share this article to give a sense to what callback and promises are. Two characteristics to carry out asynchronous operations.

Authored by: The Practical Dev

Map, Filter, Reduce, forEach -The Four Horsemen of Modern JavaScript

In the ancient times, there was this messiah called for loop . Just like every other programming languages, JavaScript too had it's own for loop function. The loop's job was to iterate over data. As you know the internet is all about a series of data.

Authored by: Tamal Anwar

The JavaScript Prototypal Inheritance Pattern

JavaScript does not contain classes and but it's an still strongly object oriented language. The object-to-object relation in JavaScript is implemented with the prototype and the resulting prototypal pattern is very unique to JavaScript. Before the ES6 class syntax, the topic of inheritance has been mostly confusing for developers who came from other languages.

Authored by: Alligator


When to use `never` and `unknown` in Typescript

The never and unknown primitive types were introduced in Typescript v2.0 and v3.0 respectively. These two types represent fundamental and complementary aspects of type theory. Typescript is carefully designed according to principles of type theory, but it is also a practical language, and its features all have practical uses - including never and unknown.

Authored by: Jesse Hallett

Type Level Tricks in TypeScript

TypeScript has a Turing complete type system. This means there are all sorts of compile time invariants that we can enforce with the type system that we couldn't otherwise. I haven't seen some of these patterns explicitly outlined elsewhere so I'm going to outline one trick that I've discovered while trying to encode various properties with TypeScript's type system.

Authored by: The Practical Dev

Why TypeScript is a better option than JavaScript when it comes to functional programming?

In this post, I would like to discuss the importance of static types in functional programming languages and why TypeScript is a better option than JavaScript when it comes to functional programming due to the lack of a static type system in...

Authored by: Wolk Software Ltd.

Pattern matching and type safety in TypeScript

I think it's fair to say that most programmers understand type safety as a feature of the programming language which eliminates the type errors. TypeScript as a statically typed superset of JavaScript addresses this issue, especially in the strict mode which is more rigorous and performs additional checks.

Authored by: Michał Załęcki


How to Use Drag and Drop with the Angular 7 CDK + Kendo UI

Through my travels to many different Angular conferences this past year, I've been asked about using Kendo UI alongside things like Angular Material or the CDK. With the latest updates in Angular 7, I thought this would be a wonderful time to show the Angular CDK peacefully working side-by-side with Kendo UI in an Angular app.

Authored by: Alyssa Nicoll

Hacking Scoped CSS Modules Into A Brownfield AngularJS 1.2.22 Application

Ben Nadel experiments with ways to hack scoped CSS modules into an old, brownfield AngularJS 1.2.22 application. It's obviously not as seamless as it would be in the latest Angular framework; but, given his constraints, it's a very fun (and welcome) solution!

Authored by: Ben Nadel

Using Angular Custom Decorators in an Ionic application (Final Part)

Last update on Sunday, February 3rd 2019 In the previous tutorial, we learned how to create our own Angular Decorators.Now that we have more experience, we can attack more complex cases.

Authored by: Matthieu Drula

NgRx - Best Practices for Enterprise Angular Applications

The following represents a pattern that I've developed at my day job after building several enterprise Angular applications using the NgRx library. I have found that most online tutorials do a great job of helping you to get your store up and running, but often fall short of illustrating best practices for clean separation of concerns between your store feature slices, root store, and user interface.

Authored by: Wes Grimes


Understanding Render Props in React

Here comes another technique to avoid the popular D.R.Y problem in software development. In this post, we will be looking into another design pattern in React to avoid a case of logic repetition. Tip: When working with components use Bit (GitHub). It will help you organize, share and reuse components across apps.

Authored by: Chidume Nnamdi

Build Progressive Web Apps with React - Part 1

Create-React-App's default service worker is good for caching static assets, but we want to do much more than that. For that, we need to disregard the default service worker and create one of our own. The simplest way to do that is to go to the public folder in our app's directory and create a new service worker file.

Authored by: Rajat S ⌨️

11 React Application Boilerplates for 2019

Set up your react app with these boilerplates and Kickstarter templates without configurations. Discover create react app, react slingshot, react starter kit, react boilerplate, rekit, redux and more

Authored by: Bit

React Component Composition

A guide that explains React Component Composition step by step. Learn the React Composition Pattern by example which helps you to render components within each other ...

Authored by: Robin Wieruch

React's Experimental Suspense API Will Rock for Fallback UI During Data Fetches

Most web applications built today receive data from an API. When fetching that data, we have to take certain situations into consideration where the data might not have been received. Perhaps it was a lost connection. Maybe it was the endpoint was changed. Who knows.

Authored by: CSS-Tricks

Introduction to React state and stateless components

Short screencasts for React, Javascript and frontend development . Videos and tutorials to help you learn web development.

Authored by: JS Craft Academy


What is the difference between Controllers and Services in Node REST API's?

If you've built out a REST API in Node (or other languages, for that matter), you've likely used the concept of "controllers" to help organize your application. Maybe you put your calls to your database or models there, called some other endpoints, and added some business logic to process the returns.

Authored by: Corey Cleary

Libraries and Tools

How To Setup Webpack Config 📦

How to setup your Webpack? Find out how easy it is to create your very own Webpack config from scratch! #javascript #code #programming #webdevelopment #webpack #configuration

Authored by: areknawo

Combining APIs using GraphQL schema stitching: Part 2

You can stitch APIs together thanks to GraphQL. It's an incredibly useful approach that let's you have unified, transparent access to multiple GraphQL APIs. This can make it easier to access data that is split across multiple APIs without understanding where exactly it's located.

Authored by: Contentful

Buildings Wave Animation with Three.js

A tutorial on how to create a 3D building wave animation with three.js and TweenMax. This tutorial is going to demonstrate how to build a wave animation effect for a grid of building models using three.js and TweenMax (GSAP). Attention: This tutorial assumes you already have a some understanding of how three.js works.

Authored by: Codrops

Tools and modern workflow for front-end developers

Recently different tools and workflows have emerged in order to make the front-end development process easier - I call one of these tools a build tool. In this tutorial, we will explore what build tools are and how to use them. We'll look at NPM scripts, grunt, gulp and also webpack.

Authored by: Ogundipe Samuel Ayo


Testing React and Redux Apps with Jest

React is a popular library for building user interfaces created by Facebook. Redux on the other hand is a wonderful state management library for JavaScript apps. Put together they offer the ability to build complex React projects. Jest is a zero configuration JavaScript testing framework developed by Facebook.

Authored by: Scotch Development

Testing Express application - TypeScript Express #10

An essential part of developing a fully functional software is testing. In this article, we focus on making our application more testable and implementing unit and integration tests using Jest and a library called SuperTest.

Authored by: Marcin Wanago


Codemods: Effective, Automated Refactoring

Maintaining software is challenging. Stagnant software quickly becomes obsolete and this couldn't be truer than in the JavaScript ecosystem. JavaScript firmly holds the reigns as the language of the web and with that comes a unique opportunity for the language and ecosystem to learn and adopt best...

Authored by: SitePen

Custom Cursor Effects

A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels. Custom cursors certainly were a big trend in web development in 2018. In the following tutorial we'll take a look at how to create a magnetic noisy circle cursor for navigation elements as shown in Demo 4.

Authored by: Stefan Kaltenegger

Palindromes ― The Ultimate Guide to JavaScript Algorithms

In this challenge we further strengthen our string manipulation skills by implementing simple algorithms to test if a string of text is a palindrome. What is a palindrome? A palindrome is a word, number, or other sequence of characters which reads the s

Authored by: Scotch Development