JSK Weekly - January 30, 2019

Developers that love TypeScript will love this week's newsletter issue. We have several great TypeScript articles but one is standing out, "The TypeScript Tax" by Eric Elliott. It's a great article that you will definitely enjoy reading.

Promises are always an interesting topic in the JavaScript world. It's always good to refresh and expand your knowledge and understanding about it. This week Sukhjinder Arora is helping you "Understanding Promises in JavaScript".

While Sukhjinder is helping you with the promises, Chidume Nnamdi is focusing on "Understanding Fragments in React". All React developers will have a great time and a lot of fun with this one.


Web APIs exploration

This post is taken from my blog so be sure to check it out for more up-to-date ...

Authored by: areknawo

HTTPS In Development: A Practical Guide

Why and how to setup HTTPS certificates, with or without reverse proxy, in a JavaScript development environment

Authored by: Kmaschta

Why do I have to use Dependency Injection in JS?

Anytime we go into a project, existent or newly created, we always think about how what we'll build can be more manageable, scalable and and easy to test. This is where using Dependency Injection can come in handy for us. But first, what do we mean by Dependency Injection?

Authored by: Vyzaldy Sanchez

Javascript DOM Manipulation to improve performance

I wrote this article to show you with examples, how avoid performance issues when develop Web Applications with Vanilla Javascript. If you have some tips, please leave your comment. Keep calm and code! dev.to is where software developers read, write, and level up. (open source and free forever ❤️)

Authored by: The Practical Dev


Understanding Promises in JavaScript

JavaScript is a single-threaded programming language, that means only one thing can happen at a time. Before ES6, we used callbacks to handle asynchronous tasks such as network requests. Using promises, we can avoid the infamous 'callback hell' and make our code cleaner, easier to read, and easier to understand.

Authored by: Sukhjinder Arora

Async JavaScript basics revise

JavaScript may seem like an easy language to start with at the beginning. This might seem to be true when looking at it without going deeper into the subject, in reality, JS is far from the easiest programming language to learn. Only full dive in can lead to a discovery of JS complexity.

Authored by: areknawo

Javascript Template Literals Example

Get real time updates directly on you device, subscribe now. In this tutorial, we will see the Javascript Template Literals Example. Template literals are the string literals allowing embedded expressions. You can use the multi-line strings and string interpolation features with them.

Authored by: KrunalDLathiya

Future JavaScript: what is still missing?

In recent years, JavaScript has grown considerably in size. This blog post explores what's still missing.

Authored by: Axel Rauschmayer

Eradicating Memory Leaks In JavaScript

If you are wondering why your JavaScript application might be suffering from severe slowdowns, poor performance, high latency or frequent crashes and all your painstaking attempts to figure out the problem were to no avail, there is a pretty good chance that your code is plagued by 'Memory Leaks'.

Authored by: The Practical Dev


The TypeScript Tax

TypeScript grew a great deal between 2017 and 2019, and in many ways, for good reason. There's a lot to love about TypeScript. In the 2018 State of JavaScript survey, almost half the respondents said they'd tried TypeScript and would use it again. But should you use it for your large scale app development project?

Authored by: Eric Elliott

How TypeScript breaks referential transparency

Suppose we have a function, purchase, which buys a product for us: We'll call this "inline form." In JavaScript, you can factor the inline parameter out into a variable and pass a reference without changing the behavior of your code: This is sometimes called referential transparency or the Substitution Principle.

Authored by: Dan Vanderkam

A Toe in TypeScript

I was watching a short video recently where the author was using TypeScript, except the only TS'ing thing about their code was the file extension. Otherwise it looked identical to the JavaScript I've come to love.

Authored by: Remy Sharp

TypeORM Migrations with Postgres. TypeScript Express

In this article, we go through migrations, which is a significant thing when working with Postgres. We learn what they are and the basics of how to write them. Although the knowledge of SQL is useful here, we also learn how to have them auto-generated for us with the help of TypeORM CLI and how to use the TypeORM migrations API to avoid writing SQL queries.

Authored by: Marcin Wanago


Building an AOT Friendly Dynamic Content Outlet in Angular

Have you ever needed to dynamically load content or components in your Angular applications? How about in a way that the built-in structural directives - *ngIf and *ngSwitch -  just don't provide? Are you also in need of the optimization benefits of using Ahead-of-Time compilation? Well, I have good news for you...(And no you don't have to be Chuck Norris!)

Authored by: Wes Grimes

Renderless Components In Angular 7.2.0

Ben Nadel draws inspiration from a post by Adam Wathan on "Renderless Components" in Vue.js; and, translates the concept into Angular 7.2.0 context. However, instead of trying to jam all the code into one component, Ben uses a Super class and a Sub class to create focused components, each with a specific set of responsibilities.

Authored by: Ben Nadel

Building an AOT Friendly Dynamic Content Outlet in Angular

Phew! Take a deep breath and grab a cup of coffee (french press fair trade organic dark roast). The hard work is behind you. Next we will go through the process of actually putting this new module into play!

Authored by: Wes Grimes

Data Visualization and Web Reporting in Angular Project

Overview of JavaScript libraries for visualization and reporting in the Angular app.

Authored by: The Practical Dev

Manage State in Angular with NGXS

As front-end applications become increasingly complex, with the potential of multiple actors affecting the global state of the application in different ways, it becomes easy to lose control of what's going on with your state. If you've never had to worry about managing global state in your JavaScript application, congratulations!

Authored by: Alligator


Understanding Fragments in React

This is another post in our React Series, we have learned many React concepts in our past posts in our React series: In this post, we will look at another common issue in React. Read on. As always, when working with your React components, I'd advise making them reusable with tools like Bit so that you won't have to rewrite them every time.

Authored by: Chidume Nnamdi

Understanding React Default Props

In this post, we'll learn all about default props in React. It will help us not only become better developers but to provide a better experience for our users. Let's get started, and feel free to skip the intro if you feel like it!

Authored by: Chidume Nnamdi

React 16.6.0 Goodies

React 16.6.0 was released October 2018 and with it came goodies that spice up the way we can develop with React. We're going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work.

Authored by: CSS-Tricks

How to Use Basic React Hooks for Reducers

In the next post in our series on React Hooks, we'll learn how to use reducers by walking through a sample todo app. Get "hooked" as we take a look at the useReducer React Hook! In the past few articles, we have become familiar with React Hooks.

Authored by: Eric Bishard

The (new) React lifecycle methods - in plain approachable language

Knowing the phases the component goes through is one part of the equation. The other part is understanding the methods react makes available at each phase. These methods made available to the component at each phase is what's popularly known as the component lifecycle methods.

Authored by: Ohans Emmanuel


What the Tick is Vue.nextTick?

You start reading Vue's documentation, and everything seems under control. Props, components, events. Okay. So far so good. This is easier than expected. I'm a pro, now. But then, as if it were a wild Pokémon, something unexpected appears. nextTick(). Damn. Just when I started to understand Vue... Anyway, you don't panic.

Authored by: Anthony Gore

How to Tell If Vue.js Is the Right Framework for Your Next Project

Karolina Gawron digs into the pros and cons of Vue.js, and whether it's the right choice for your next project, exploring the possibilities and limitations to give you a high-level look at the framework and make your decision a little easier.

Authored by: Karolina Gawron

Building Documentations with Vue Using Vuepress

In this tutorial, learn how you can build your documentation with VuePress, which offers a flexible, configurable and easy to deploy option for creating static sites. As a developer, trustworthy documentation is a must. Presenting a clear guide of the different aspects of an application helps make information accessible not just to consumers of your application but also to yourself as the need arises.

Authored by: Telerik

Securing a Vue.js app using OpenID Connect Code Flow with PKCE and IdentityServer4

This article shows how to setup a Vue.js SPA application to authenticate and authorize using OpenID Connect Code flow with PKCE. This is good solution when implementing SPA apps requesting data from APIs on separate domains. The oidc-client-js npm package is used to implement the client side authentication logic and validation logic.

Authored by: damienbod


How to Perform Web-Scraping using Node.js- Part 2

Scrape dynamic websites using nightmare and cheerio. In the previous post, we learned how to scrape static data using Node.js. In previous years, we have seen exponential growth in javascript...

Authored by: Ankit Jain

How to Build a Meetup Slack App with Standard Library

Click Create New App. You'll be presented with a modal to enter your App Name and the Development Slack Workspace you'd like to add it to. From here, click Create App, you'll find yourself on a Basic Information page. Scroll down to Display Information.

Authored by: Janeth

Start Contributing to Node.js in the New Year

The Node.js project is a sprawling community effort that spans 162 repositories in the Node.js GitHub organization, excluding the Express and libuv GitHub organizations (which are both projects under the Node.js Foundation). The Node.js project itself has a variety of needs around everything from build infrastructure to automation tooling, to localization of its documentation.

Authored by: bitandbang

Libraries and Tools

New to JAMstack? Everything You Need to Know to Get Started

When we first wrote this post, the JAMstack ecosystem was still in its infancy. That was +/- 4 years ago. I remember talking with the Netlify founders back then. They had just come up with the term "JAMstack" to work around the negative connotation of "static web" and were asking if we would help to promote it.

Authored by: Snipcart

VS Code extensions you may not have heard of before

One of the best features of VS Code is its large marketplace of extensions. With nearly 10,000 extensions now available, VS Code can be tweaked and customized to supercharge your workflow. I'm always keeping an eye out for new and underrated extensions.

Authored by: The Practical Dev

Combining APIs using GraphQL schema stitching: Part 1

APIs and the services behind them have changed how we build software. I like to explain APIs as Lego blocks for developers. They're little building blocks that you can put together to build something bigger. You might have to glue to build a really big model but the individual pieces are necessary for the end-result.

Authored by: Rouven Wessling

11 Awesome JavaScript Extensions for Visual Studio Code

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript. Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development!

Authored by: Scotch Development

What is a Mutation in GraphQL and how to use it

Part of "GraphQL Series" series This post was originally published in adityasridhar.com This Blog post is a continuation to my previous blog post on GraphQL Basics. Click Here to checkout the GraphQL Basics post. It is necessary to read the GraphQL Basics post to make the best use of this article.

Authored by: Aditya Sridhar


Need to Test API Endpoints? Two Quick Ways to Do It.

Here's a possibility! Perhaps you are testing your JavaScript with a framework like Jasmine. That's nice because you can write lots of tests to cover your application, get a nice little UI to see the output, and even integrate it with build and deploy tools to make your ongoing development work safer.

Authored by: Chris Coyier

Functional Programming

Improving Javascript functional programming with Polyethylene

Polyethylene lets you use array functional utilities in every iterable, sync or async, and can help make your life easier

Authored by: Daniel Escoz


How I made The Periodic Table with CSS Grid and React

I was looking into the periodic table and trying to memorize all the elements in order. One afternoon I thought, hey can I make the periodic table with my current CSS skills? The periodic table is a bunch of elements arranged in a funny way.

Authored by: Tamal Anwar

From React to Vue: Re-Vue-sable Components

Vue.js approaches to advanced componentization from a React Developer's perspective

Authored by: Big Nerd Ranch

Prefetching Links using Service Workers

Build faster, more efficient apps with a better user expirience In our last series about prefetching we looked at what prefetching is, and also we kind of rebuilt the quicklink library, a data considerate, idle time prefetching library developed by Addy Osmani to demonstrate how prefetching works.

Authored by: Chidume Nnamdi

Creating a content calendar for your Contentful content

Content calendars are an essential part of any content management toolkit. They display your content in a familiar calendar view, making it easy to see when content is being published.

Authored by: Contentful

Nearley.js: When Regex Isn't Enough

Isaac Lee Jan 25 ・8 min readOriginally posted on crunchingnumbers.live In the past 2 weeks, I tasked myself with helping users create and visualize LDAP filters. An LDAP filter allows users to make a search in a powerful manner, and can take any of these forms: LDAP filters can take various forms. We can parse the easy examples above with regex (regular expression).

Authored by: The Practical Dev

Creating Your Own Gravity and Space Simulator

Space is vast. Space is awesome. Space is difficult to understand - or so people tend to think. But in this tutorial I am going to show you that this is not the case. Quite the contrary; the laws that govern the motion of the stars, planets, asteroids and even entire galaxies are incredibly simple.

Authored by: CSS-Tricks