JSK Weekly - May 30, 2018

This week there are a ton of new things for React.js users to learn. Rajat S released an excellent series of articles including how to "Build Awesome Forms In React Using Redux-Form" and "Build Your Own Blog Using Gatsby and React."

If you are interested in some Vanilla JavaScript core concepts, and you should be we recommend that you check out "Javascript: What Is The Execution Context? What Is The Call Stack?" by Valentino Gagliardi.

We enjoyed reading about "Useful Javascript Array and Object Methods" by Robert Cooper, we are sure that you will enjoy it too.

Finally if you are interested in "Building a Shared UI Component Library" that people will love and use, you should definitely check out Jonathan Saring's article.


Javascript: What Is The Execution Context? What Is The Call Stack?

What is the Execution Context in Javascript? I bet you don't know the answer. What are the most basic components of a programming language? Variables and functions right? Everybody can learn these building blocks. But what lies beyond the basics? What are the pillars of Javascript that you should master before calling yourself intermediate (or even senior) Javascript developer?

Authored by: Valentino Gagliardi

Progressive Web Games

With the recent release of the Progressive Web Apps core guides on MDN, it's easier than ever to make your website look and feel as responsive as native on mobile devices. But how about games?

Authored by: Andrzej Mazur

Algorithmic problems with JavaScript

YoYo. This article is for people who are bored doing trivial tasks every day. This might cheer you up a bit. You might also encounter these kind of questions in some interviews. .Soooo, here is the first one  - Imagine we have a string which is a math expression (e.g. (1+(2*3-2))+3).

Authored by: codeburst.io

Binary data in the browser: Untangling an encoding mess with JavaScript Typed Arrays

The jsmidgen library seemed like it did exactly what we needed. It was a pure JavaScript implementation & it took the musical notes as inputs and created a MIDI file. The problem was that all the examples they had were running in Nodejs.

Authored by: Omar Shehata

JavaScript, What Are You?

originally published in codeburst.io by Raji Ayinla, who know develops content for howtocodejs.com. Want to learn JavaScript the fun way? Then come on down to howtocodejs.com. You're at a job interview, sitting in the HR office of WECode.js. The hiring manager clears her throat after glancing at your exquisitely detailed resume and asks, "What is JavaScript, Mr/s.

Authored by: Howtocodejs

for in loop vs for of loop

In JavaScript, We are using for loops to iterate the values/elements from arrays and helps to run some code inside the block until the given condition fails. for in loop works over the enumerable...

Authored by: Sai gowtham


Useful Javascript Array and Object Methods

I listened to a great Syntax FM podcast that summarized useful JavaScript array and object methods. These methods help developers write clean and readable code. A lot of these methods reduce the need to reach for utility libraries like Lodash.

Authored by: Robert Cooper

Destructuring in JavaScript🥄🍴🍽

Have you seen in object Destructuring we are accessing the same property in an easy way instead of writing dot notation? Now we can access the same elements using Array Destructing instead of using...

Authored by: Sai gowtham

JavaScript Variables: The Beginner's Guide

you can access this lesson at howtocodejs.com If you've ever had the pleasure(or displeasure) of sitting through an Algebra 1 class, you've probably heard about variables. You know, x + 4 = 6 and all that good stuff. Don't worry. JavaScript variables are much less scarier.

Authored by: Howtocodejs

Regular Expression Additions in ES 2018

Javascript has really come a long way in the past couple of years. With the now yearly updates of the language, there is always a lot of new things to learn. Something that is being added in 2018 is major improvements to regular expressions in JavaScript.

Authored by: Andrew Usher

Using Async in ES2017

I know that sounds like an awful boy band from the 90's, but the truth is that it's one of the most anticipated new features of ES2017. As a reminder, one can already use it with Babel. It's quite new, so much so that it's not even in Node 8-and we won't mention browser support.

Authored by: DiscoverSDK


TypeScript's new import() types feature explained

I've said this before, but for real, I'm starting a newsletter! One-topic covered in-depth each week, plus a bunch of links on the latest in frontend development topics. Sign up here! TypeScript 2.9 introduces the import() types feature. Don't confuse it with the dynamic import() syntax. This new feature doesn't async import modules.

Authored by: David East

NgRx Store Reducers Work Using A TypeScript Feature Called A Discriminated Union

Lately, I've been trying to understand how, when, and where to use a store-based state management approach like NgRx Store (or Redux, or MobX, etc). I'm currently 75% of the way through Todd Motto's NgRx Store course; and, I've recently raved about Angular University's article, NgRx Store - An Architecture's Guide.

Authored by: Ben Nadel

10 Essential TypeScript Tips and Tricks for Angular Devs

In this article, we'll dive into a set of tips and tricks that should come in handy in every Angular project and beyond when dealing with TypeScript. In recent years, the need for static typing in JavaScript has increased rapidly.

Authored by: Florian Rappl


Generate a data table library with angular 6+

Sharing is caring!0sharesTwitterFacebook0One of my first post was about creating a library for angular (note the feature image that shows a most recent library 🙂 ) . It was quite tricky as you had to create a couple of script to make everything working correctly.

Authored by: Daniele Zurico

Top Angular Plugins for Sublime Text

Jeff Smith introduces a number of Angular plugins for Sublime Text that help make your Angular development efforts in Sublime a success.

Authored by: Jeff

Using Angular Augury to Debug Your Code

Modern web browsers provide developer consoles to inspect various elements on the page, which is really handy when trying to debug markup, styles, and scripts. However, this console isn't enough to debug Angular applications that usually have lots of components, events, attributes, and a separate routing system.

Authored by: Ilya BodrovKrukowski

How To implement Lazy Loading in Angular 6📯📯

The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To implement the...

Authored by: Sai gowtham

Angular Master detail table

Sharing is caring!0sharesTwitterFacebook0In the previous post we built a material data table, we have packaged as a library and we have learnt how to publish on npm. Today we want to improve it by adding the two functionalities displayed in the featured image above. To make it so, we need to made some adjustments: Expand [...]

Authored by: Daniele Zurico

Focusing on Form Elements The Angular Way

Dynamic frameworks like Angular often call for modern user experiences. There are plenty of scenarios for this but one common question I have seen across forums such as reddit or stack overflow is "How to focus on a form element on click in angular 2+?"

Authored by: Sam


Build Awesome Forms In React Using Redux-Form

There are 2 way that we can use to manage validation in redux-form. They are: Using Validation Function Next, I have listed out a couple of error scenarios, and what I want redux-form to do when such a scenario occurs.

Authored by: Rajat S ⌨️

Build Your Own Blog Using Gatsby and React

When people want to learn something new, especially a new programming language/framework/library, they usually go to these three places: Being a software developer trainee myself, I know firsthand how much time one spends in searching the internet looking for answers to their questions.

Authored by: Rajat S ⌨️

Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native

Instagram has a cool feature when you are looking at the grid view. When you press and hold on any of the images it will show you a quick view. While still holding you can move your finger to multiple actions. These actions include like, share, and comment.

Authored by: Jason Brown

Tips on React for large scale projects

It's been two years time that I've met React and immediately fell in love with it. The way that React works, as a declarative, not-so-large library created exclusively to build rich User Interfaces provides everything as necessary (plus a rich ecosystem with tons of add-ons).

Authored by: zag

Learning React.js by building a Minesweeper game

I used create-react-app starter kit to setup my project and later added the 3 components. I won't be mentioning any style specific codes and some helper functions for the sake of keeping the post as short as possible.

Authored by: codeburst.io

React and separation of concerns

Years ago when Facebook announced their JSX syntax we had a wave of comments how this was against some of the well established good practices. The main point of most people was that it violates the separation of concerns.

Authored by: Krasimir Tsonev


From Vanilla JS to Vue.js: A guide to Vue essentials

Vue.js is a framework for building web applications. It has a reactivity system that allows you to model and manage your application state such that when data changes, it's reflected in the UI, without you having to query the DOM.

Authored by: Codementor


Node.js Backend Development - Working with Responses

In the previous article we learned how to create our own custom Node.js modules and how to use them. The complete code for the previous article can be found on the Github repository Learn Node.js With Sabuj . You will also find all the code in the same repository.

Authored by: DiscoverSDK

All about Core NodeJS - Part 1

Learn all about essential NodeJS in these series of articles. This is part 1 of the article and I will be incrementally updating and adding contents. Your compass to Node.js Prerequisites Basic knowledge of JavaScript Basic HTML/CSS Knowledge Assume you know how to install node I will be referring to Node.js as Node going forward in the article.

Authored by: Codementor

How to Watch for Files Changes in Node.js * thisDaveJ

In this article, we learn how to watch for file changes in Node.js (and take action when those file changes occur) using a real IoT project as a learning context. We explore a few techniques for watching files and ultimately arrive at the best solution.

Authored by: Dave Johnson

Switching from cluster module to PM2 & RabbitMQ in Node.js

If you have been using Node.js for sometime, you should know that it is single threaded. This is why you can't take full advantage of multiple core machines unless you use the cluster module or a process manager like PM2. I'm working on an application that used the cluster module for managing processes.

Authored by: Codementor

Libraries and Tools

Building a Shared UI Component Library - Bits and Pieces

Reusable components are a great way to build a performant and consistent UI for your applications, without having to reinvent the wheel. Components can save time, speed your development, simplify maintenance, help standardize your stack, and keep a consistent UI design system. A common questions is, what's the best way to construct and manage these components.

Authored by: Bit

Boosting Your Workflow with Angular 5 Snippets and VS Code

Michael Wanyoike shows how to create Angular 5 snippets and how to use them in Visual Studio Code to supercharge your Angular project workflow.

Authored by: Michael Wanyoike

Create New Express.js Apps in Minutes with Express Generator

Express.js is a Node.js web framework that has gained immense popularity due to its simplicity. It has easy-to-use routing and simple support for view engines, putting it far ahead of the basic Node HTTP server. However, starting a new Express application requires a certain amount of boilerplate code: starting a new server instance, configuring a view engine, setting up error handling.

Authored by: Paul @ BG


Unit Testing Browser Extensions

In April I became the maintainer of Saka, a browser extension that allows users to search through their tabs, bookmarks and history. The original goal of Saka was to provide an elegant tab search but this soon evolved to include recently closed tabs, bookmarks and history when the original maintainer eejdoowad recognized that users search for tabs the same way they search bookmarks and history.

Authored by: Uzair

Functional Programming

Diving into functions. Passing by reference is a lie!

Functions are one of the most basic features of JavaScript. Have you ever wondered how exactly do they work? After all, they are just a special kind of objects. If you are curious, dig into them with me in this article! The basics of functions Speaking practically, a function is a subprogram that can be called ...

Authored by: Marcin Wanago

Functional Alternative of 'if-else' conditional statement

Functional programming in javascript had me captured since it was popular a few years back. I started to ditch for loops with map/find/filter/reduce, using short-circuit instead of conditional or ternary operator, and many migrations to immutability mindset.

Authored by: codeburst.io


Faster static site builds Part 1- Process only what you need

In this first of two articles on static sites, I will share with you how you can speed up your build process on Netlify with a custom caching layer. The second article will go into the implementation of incremental builds using Nuxt.js.

Authored by: stefan judis

Screen capture in Microsoft Edge

We've looked before at how to capture a user's screen in Chrome and Firefox. Good news, another browser has support now, Microsoft's Edge. Let's see how we can capture the screen with Edge.

Authored by: Phil Nash

Capture and Report JavaScript Errors with window.onerror

onerror is a special browser event that fires whenever an uncaught JavaScript error has been thrown. It's one of the easiest ways to log client-side errors and report them to your servers. It's also one of the major mechanisms by which Sentry's client JavaScript integration (raven-js) works.

Authored by: Scotch Development

Weekly schedule editor concept

I'm writing it because it seems to be rather popular task that has not any well known common solution. Usually it all starts with some surprisingly strange `simple` solution that by the end transforms to the system I'm going to write about.

Authored by: obzor.lt

Optional (null-safe) in javascript

Yesterday I ran into this StackOverflow question and it got me thinking about null/ undefined handling in javascript. What is undefined? undefined is a primitive value that is given to variables that have only been declared, non-existent properties or function arguments What is null? null is another primitive value that represents the absence of value.

Authored by: J. Pichardo