JSK Weekly - July 10, 2019

While understanding the theory behind the code we work with, learning by doing is also a vital part of any developers toolkit, making guides and tutorials invaluable resources. This week Hasura takes us from the basics of GraphQL to building a real-time application in just 2 hours with their new course "Learn GraphQL by Doing: The 2 hour GraphQL Tutorial for React Native Developers" while Stackify clears up the confusion many people feel around how the AWS Lamba service works with "AWS Lambda with Node.js: A Complete Getting Started Guide" and Krissanawat Kaewsanmuang continues with his ongoing tutorial series in "Building a React Native Chat App — Part Two: Message History | PubNub" on gitconnected.

Staying with React for a moment longer, React Advanced is calling for speakers so if that's an area of interest and you're able to travel to London, check out "Become a speaker at React Advanced Conference (Oct 25, London)", submissions close at month end. If learning is more your thing, check out "How React Hooks can replace React Router Blog" by Peter Ekene Eze and Egwuenu Gift's "An overview of the top 10 React UI kits in 2019", both on LogRocket's blog.

Going back to the beginning, Will Swan takes us through the second part of his two-part series of learning everything you need to know to start programming using Javascript in "A Complete Beginners Guide To Javascript - Part 2", Tim Robards helps us master the core building blocks of our JavaScript programs in "JavaScript Fundamentals: Mastering Functions" and Axel Rauschmayer examines how JavaScript's global variables work in "How do JavaScript's global variables really work?" Not to be outdone, the Bits and Pieces blog was littered with a treasure trove of useful content this week from Ankita Masand's "New Intl APIs in JavaScript" and Rupesh Mishra's "Understanding Web Share APIs" to Shaumik Daityari covering common processes involved in contributing to open source projects tracked by Git in "Contributing To Open Source Through Git Workflows" as well as Jonathan Saring making an introduction with "Meet Bit’s Atomic Component Cloud."


Flamegraph: How to Visualize Stack Traces and Performance

So you want a faster application? If you've not heard of a flamegraph, it can be a great way to improve and gain insight into your application performance. Today, we'll explain what a flamegraph is. We'll cover the stack trace and its origin, the call stack.

Authored by: Stackify

How To Build A Sketch Plugin With JavaScript, HTML And CSS (Part 2)

In this second part of our tutorial on building Sketch plugins, we'll pick up where we left off with the building of our user interface, and then we'll move on to the key feature of actually generating our layer mosaics and optimizing the final plugin code.

Authored by: Smashing Magazine

Markdown Syntax Highlighting with PrismJS using Unified, Remark, and Rehype

We'll explore how to use Unified, Remark, Rehype, and PrismJS to create markdown code that is capable of being syntax highlighted. The generated code will be React elements instead of a string of HTML. This adds in the security benefits of React when it comes to rendering untrusted markdown content.

Authored by: Code Daily

Meet Bit's Atomic Component Cloud

What if all the code you've ever written was always available one click away, to build your latest application? Imagine a component-cloud that contains all your team's atomic code. Each unit is an encapsulated component (i.e. module) that can be used off the cloud to build applications.

Authored by: Bit

Exploring Sapper + Svelte: A quick tutorial Blog

A while back, we explored Svelte.js and saw how it helps you write truly reactive apps while shipping far less code than many other frontend frameworks out there. While you could very well build a more complex app with Svelte alone, it might get messy real quick. Enter Sapper!

Authored by: LogRocket

How To Master Async/Await With This Real World Example

Table of Contents: 1. Introduction (callbacks, promises, async/await) 2. Real world example - Currency Converter that is receiving asynchronous data from two API's. Just a note... Along with writing this article, I have also created a YouTube video! You can follow along and code while watching.

Authored by: freeCodeCamp.org


JavaScript Fundamentals: Mastering Functions

Functions can be thought of as one of the core building blocks of our JavaScript programs. A function is simply a set of statements designed to perform a particular task - which is executed whenever it is invoked (or "called").

Authored by: Tim Robards

How do JavaScript's global variables really work?

In this blog post, we examine how JavaScript's global variables work. Several interesting phenomena play a role: the scope of scripts, the so-called global object, and more.

Authored by: Axel Rauschmayer

Parsing Expressions in JavaScript

In programming languages, we have statements and expressions. Statements perform an action but Expressions evaluate to some value - it could be of either type: A statement is an instruction an interpreter can execute. We have the: A small tip before we continue: Use Bit to easily share, reuse and collaborate on your code components.

Authored by: Bit

A Complete Beginners Guide To Javascript - Part 2 (DOM and the Web)

This is the second of two stories where you will learn everything you need to know to start programming using Javascript. Just like in Part 1, I recommend following along with this story using something like PlayCode.io so that you can really get a grasp on everything that we go through.

Authored by: gitconnected

Understanding Web Share APIs - Bits and Pieces

With each passing day, new technologies are bridging the gap between web apps and native apps (apps that are installed on your device like WhatsApp). One such example is Progressive Web Applications that have added many native app-like features to the web like push notifications.

Authored by: Bit

New Intl APIs in JavaScript

The Intl object is available in the global scope and is used for formatting strings, numbers, and date and time in the locale-specific format. It does the work of internationalizing information...

Authored by: Bit


No, Getters and Setters in TypeScript & JavaScript aren't useless

In this blog post, we talk about the utility of getters and setters in modern web development. Are they useless? When does it make sense to use them? Getters and setters (also known as accessors) were introduced to JavaScript when ECMAScript 5 (2009) was released.

Authored by: freeCodeCamp.org

TypeScript Promises Examples

Angular 8 - ES6 - TypeScript Promises tutorial, learn what Promises are, how promise work, when should we use promises, and how to use promises properly.

Authored by: Digamber Singh

Vim for React and TypeScript Oh My!

What follows is my spin on a configuration for the awesome Vim editor; supporting Facebook's React framework, as well as modern Javascript and Microsoft's TypeScript language. As always, Vim gives us...

Authored by: Tim O'Brien


Wrapping Immutable Arrays In Mutable Arrays For Easier Processing In Angular 8.2.0-next.0

Ben Nadel attempts to codify a pattern that he's been starting to use a lot more: wrapping an immutable collection of data inside another collection such that the wrapper collection can be optimized for local consumption (such as when filtering and sorting a result-set).

Authored by: Ben Nadel

Retry failed HTTP requests in Angular

Immediate retry, delayed retry and retry with backoff Accessing data from a backend is the backbone of almost every single page application. All dynamic content is loaded from a server. In most cases, those HTTP requests work well and return the desired result. However, there are scenarios where a request might go wrong.

Authored by: Angular In Depth

All you need to know about Angular parameters

In this article I will share some my experiences on cases regarding getting data from URL on Angular application and a tip to increase the performance for web page. Normally we usually see two kind of URL in Angular application: URL pattern: /heroes/:limit. Example: /heroes/20 URL pattern /heroes.

Authored by: gitconnected


Become a speaker at React Advanced Conference (Oct 25, London)

Are you looking for an awesome conf to present your React (Native) talk? The React Advanced CFP is open until the end of July.

Submit your proposal, and become a part of the star-studded lineup! 🌟

Authored by: React Advanced London

Learn GraphQL by Doing: The 2 hour GraphQL Tutorial for React Native Developers

With these open-source tutorials, you will move from the basics of GraphQL to building a real-time application in 2 hours. Featuring video + code walkthrough.

Authored by: Hasura

How React Hooks can replace React Router Blog

Since the advent of React Hooks, a lot of things have changed. Some things we didn't have issues with before have started causing concern. The features and possibilities that come with Hooks have redefined how we approach certain concepts in React, and routing happens to be one of them.

Authored by: LogRocket

Building a Reusable Firebase Facebook Login Component

Learn how to build a reusable and shareable Firebase Facebook login component In this tutorial, we are following the first chapter of clone Firebaseweb-UI demo and use codes from it as well. Here, we are going to learn how to create a reusable and shareable Facebook login component with React and Bit.

Authored by: Bit

Building a React Native Chat App - Part Two: Message History

In our previous part of our ongoing tutorial series on building a React Native chat app, we set up basic messaging and our chat UI. In this part, we're going to add message history, which will allow you to store and fetch historic messages.

Authored by: TheBestDevlist

An overview of the top 10 React UI kits in 2019 Blog

Looking for a React UI kit that is right for you? In this article, we are going to review 10 React UI kits to use in 2019.

Authored by: LogRocket


Lazy loading in Vue JS Blog

This is an introduction to how Vue JS handles lazy loading at the route level of abstraction with the help of Webpack code splitting.

Authored by: LogRocket

Using Slots In Vue.js

Slots are a powerful tool for creating reusable components in Vue.js, though they aren't the simplest feature to understand. Let's take a look at how to use slots and some examples of how they can be used in your Vue applications.

Authored by: Smashing Magazine

How to split Vuex Store into modules

If youve been following along in this series of Vue tutorials on how to make use of Vuex and Vue-Router in a Vue Project and how we can implement Firebase authentication in a Vue Project . Even in such a simple project our Vuex Store and our Router files are growing starting to grow in size.

Authored by: Gary Woodfine


Comparing the Stream API and (async) generators in Node.js

A The Node.js stream is an abstraction of data in programming. Stream API has been around for a long time and as a uniform API for reading and writing asynchronous data . The Stream API is mostly used internally with other APIs like and .

Authored by: LogRocket

AWS Lambda with Node.js: A Complete Getting Started Guide

AWS Lambda is a service that confuses many people. For that reason, you may be wondering just how it works, and how you'd use it to build a highly scalable event-driven application. As someone who's presumably no stranger to the internet, you must have seen the terms serverless, function-as-a-service, or AWS Lambda thrown across your screen a few times.

Authored by: Stackify

How to create a tracker like the GitHub contribution graph with Node.js and Google Sheets

This year, I decided to focus on personal growth, with two main challenges: learning how to code, and getting in better shape. Both involve creating daily habits. Since January, I've been using a spreadsheet as a tracker to keep myself accountable on both fronts.

Authored by: Anne-Laure Le Cunff

Switching between Node versions during development Blog

Sometimes it seems like there are new versions of Node.js released almost weekly - minor versions every few weeks, major versions every few months. If you are a developer that needs to switch between different applications and projects on a regular basis, you may find you need to run different versions of Node.

Authored by: LogRocket

Libraries and Tools

How to make HTTP requests like a pro with Axios Blog

Axios has become undeniably popular among frontend developers. We'll examine the key reasons that have contributed to its rapid rise.

Authored by: LogRocket

Sharing Components is Caring

A real-life story of one component and two applications A story of two applications Here is a scenario which may look very familiar: SOSA company has two code repositories: is an online shopping e-commerce application, and  - an inventory management application. Jane is a developer in the Shoppy team and her colleague, John, is working in the Stocky team.

Authored by: Bit

Functional Programming

Deeply Understand Currying in 7 Minutes

Eric Elliott's exceptional Composing Software series is initially what got me excited about functional programming. It's a must-read. At one point in the series, he mentioned currying. Both computer science and mathematics agree on the definition: Currying turns multi-argument functions into unary (single argument) functions. Curried functions take many arguments one at a time.

Authored by: Yazeed Bzadough

Why I'm so jazzed about the Optional Chaining proposal in JavaScript 🎷

Last month, the TC39 committee finally moved the Optional Chaining proposal to stage-2 🎉 While most of these proposals are boring or too crazy or are way above my head, I am actually pretty jazzed about the optional chaining proposal because it's something that could actually see myself using on a regular basis.

Authored by: Dave Lunny


Parsing HTML Natively With htmlParse() In Lucee

Parsing HTML isn't a task that I often have to perform during the "normal operation" of a ColdFusion application. However, parsing HTML can be a helpful feature when it comes to data migration. For example, when migrating from an old, HTML-based content management system (CMS) to a Markdown-based content management system.

Authored by: Ben Nadel

Contributing To Open Source Through Git Workflows

You have probably heard of version control if you have worked as a programmer in a team environment. Version control systems allow a geographically distributed team to contribute to the same code repository. Open source projects typically have one thing in common - the use of some form of version control, given the distribution of contributors.

Authored by: Bit

Building an Internet of Things dashboard

You just can't contain the Internet. We've moved into a brand-new age where our computers, smartphones, and old-style routers are being pushed aside so we can join the Internet of Things (IoT) period. That's because just about all things these days can connect online, whether it's a watch, your car, the TV or your refrigerator.

Authored by: Bit