JSK Weekly - August 22, 2018

"Destructuring" and "Spreading" should be a quite familiar term for most JavaScript developers. If not you have to read Brandon Morelli's article "A Simple Guide to Destructuring and ES6 Spread Operator". Even if you do it wouldn't hurt to refresh your knowledge with this concise and clear article.

Debugging is a must if you want to code anything. Angular developers have a very nice opportunity to learn all about "Debugging Angular CLI Applications in Visual Studio Code" by James Quick.

We also recommend an interesting article "Building a Resilient Web with WebTorrent" by Feross Aboukhadijeh.


Leaving the Old Ways - jQuery vs React

Contrary to popular belief, React's biggest use cases are not SPAs, it's the hybrid apps that are most common, and the best fit in my opinion, in this post I will cover how and why I went from a React hater to a React fanboy, and why React is a perfect replacement for jQuery.

Authored by: Sasa Blagojevic

Building a Simple URL Shortener With Just HTML and Javascript

URL Shortener, you might have used one of them in your life such as bit.ly, goo.gl and much more. They are useful for shortening long URLs so that you can easily share them with your friends, family or co-workers. You might be wondering how these things work?

Authored by: Palash Bauri

Shipping PWAs as Chrome Extensions

Progressive Web Apps, or PWAs, are basically a type of website that works offline and may include native app-like features. But realistically, the PWA moniker is something you tell your boss, your investor, whoever, so they can conceptualize this web thing that you're building.

Authored by: Sam Thorogood

How To Parse JSON in Javascript

In this example, we will see How To Parse JSON in Javascript. The primary use of JSON is to exchange data between client and server. When we receive the data from a web server, the data is always a string, so we need to parse the data with JSON.parse(), and the data becomes a JavaScript object.

Authored by: KrunalDLathiya

Zero to 15 - Building a Nothing PWA in 15 minutes

Learn how I build a "Nothing" Progressive Web App in 15 minutes

Authored by: Henry Lim 👨‍💻👨🏼‍🏫🦕


A Simple Guide to Destructuring and ES6 Spread Operator

The evolution of JavaScript to ES6 version has brought a whole array of new tools and utilities. These tools allow us to perform some common operation in a more concise and elegant way. One such new feature is the spread operator. The operator's shape is three consecutive dots and is written as: ....

Authored by: Brandon Morelli

Deep copying an object in JavaScript

Using the spread syntax or Object.assign() is a standard way of copying an object in JavaScript. Both methdologies can be equivalently used to copy the enumerable properties of an object to another object, with the spread syntax being the shorter of the two.

Authored by: Codementor

Javascript Fetch API Example Tutorial From Scratch

Javascript Fetch API Example Tutorial From Scratch is today's main topic. The Fetch API provides an interface for fetching resources. We all remember the dreaded XMLHttpRequest we used back in the day to make requests; it involved some messy code, it didn't give us promises and let's be honest, it wasn't pretty JavaScript, right?

Authored by: KrunalDLathiya

Sorting An Array of Objects

This post has been on my mind for a while. Today, I would like to talk about sorting an array of objects. This exercise assumes your array is uniform, meaning all elements in the array are of the same type.

Authored by: Codementor


Debugging Angular CLI Applications in Visual Studio Code

Debugging Angular CLI Applications in Visual Studio Code In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code. Watch on YouTube TLDR - For an Angular CLI applic

Authored by: Scotch Development

Build a Reusable Component with Angular Elements

Code reuse can be significant in any software project. By reusing code, developers can drastically cut development and maintenance time for software projects. This is the reason that every framework for developing software has a way to encapsulate functionality and reuse it. Whether it's classes

Authored by: Scotch Development

Using CSS Host-Context To Theme Components In Angular 6.1.3

Ben Nadel starts to explore the concept of theming in an Angular application, starting with :host-context() bindings which are a way to apply dynamic CSS styles based on conditions that exist outside of the current component. In this instance, he's using a CSS theme class on the root component in order to provide the "condition" for the :host-context() selector.

Authored by: Ben Nadel


Reusing Higher Order Components in React applications with Bit

Higher order components (HOC) are a great pattern to pull-up reusable code across components to a higher level and reuse it wherever needed. Quoting the purpose of HOC from the React official docs: A higher-order component (HOC) is an advanced technique in React for reusing component logic.

Authored by: RC

Quick guide to React compound components

Compound components is an advanced pattern so it might be overwhelming to use. This guide aims to help you understand the pattern so that you can use it effectively with confidence and clarity. Note - In this article, we'll use the new context API introduced in React v16.3.

Authored by: LogRocket

How to build a React.js chat app in 10 minutes

In this article, I'll show you the easiest way possible to create a chat application using React.js. It'll be done entirely without server-side code, as we'll let the Chatkit API handle the back-end. I'm assuming that you know basic JavaScript and that you've encountered a little bit of React.js before.

Authored by: Per Harald Borgen

Introduction to React

What is React? Glad you asked-React is an open source library from Facebook that allows for the fast and easy development of internet sites and applications. When I use React, I can develop sophisticated, modern, and very complex applications with great speed and ease.

Authored by: DiscoverSDK

Working with refs in React

Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let's say you want to change the value of an element, but without using props or re-rendering the whole component.

Authored by: CSS-Tricks


CoinMesh brings Litecoin and Bitcoin dApp development to Aurelia developers

CoinMesh is a JavaScript-based platform for building applications on top of the Litecoin and Bitcoin blockchains. We look to be the standard way for integrating some of the complex processes needed in a typical application like this and foster a community of building best practices and security in to all aspects of your software.

Authored by: Aurelia


7 Vue.js Backends Compared

Which backend are you planning to use for your next Vue.js project? Often developers choose what they're familiar with. If you're primarily a Laravel developer, for example, I'll bet Laravel will be first to your mind when planning a new project. It makes sense to work with what you already know and enjoy.

Authored by: Codementor

Access State from Another Module in Nuxt

No doubt, Vue.js is a great framework for building amazing User Interface on the web. Currently ahead of React in numbers of GitHub stars. I have been basking in the euphoria of working with Vue, but having tinkered with Nuxt lately, that has taken the experience to a whole new level.

Authored by: Codementor

Vue-cli 3 : Game-changer or barely useful? - Sourcerer Blog

Vue was in the limelight recently with their last improvements, specifically the work of the Vue core team on vue-cli 3. Vue-cli is a tool that help people to scaffold their Vue projects. It consists of a tool to create new projects using "templates", which are git repositories containing preconfigured front-end stacks.

Authored by: sourcerer.io


TypeScript Node Starter Simplified

I was settling down to write an article on GraphQL pagination with JavaScript / Node.js and found it disconcerting to not have a type system (been writing in TypeScript sufficiently long now to have...

Authored by: codeburst.io

Building CLI Applications with NodeJS

Build a CLI application with NodeJS

Authored by: Scotch Development

Build a Handy Slack App that Connects Sales and Marketing to Atlassian using Node.js and Code.xyz

Next we need to create a Standard Library service to host your Slack app. Head over to https://code.xyz/and create a free account. Code.xyz is an online API editor built by the team at Standard Library  - an embeddable development environment for easily building APIs, web-hooks, and workflow automation tasks.

Authored by: Janeth

An Introduction To Node Package Manager(NPM)

An Introduction To Node Package Manager(NPM). Today NPM is the biggest repository for any programming language, and it has almost every package that you need in a web or mobile development project. npm means the node package manager. If you have previous work with any front-end development stuff, then this package manager is familiar to you.

Authored by: KrunalDLathiya

Libraries and Tools

Dweb: Building a Resilient Web with WebTorrent

The web is healthy when the financial cost of self-expression isn't a barrier. This installment of the Dweb series describes WebTorrent - an implementation of the BitTorrent protocol that runs ...

Authored by: Mozilla Hacks

Inside a framework - How the Cycle.js DOM driver works

Often, we use a framework without really knowing how it works internally. Sometimes we contribute to that framework without having any clue about the inner workings. For me, this was the case with Cycle.js. I was even invited to be a Core Team Member without having any clue how the DOM part of it worked besides "it uses virtual DOM under the hood".

Authored by: Jan van Brügge


Testing Angular with Jasmine and Karma (Part 1)

In this tutorial we will be building and testing an employee directory for a fictional company. This directory will have a view to show all of our users along with another view to serve as a profile page for individual users.

Authored by: Scotch Development

Functional Programming

Functional JavaScript app from scratch

I've been writing a lot about specific functional concepts and their implementation in JavaScript and TypeScript. In this article, I'd like to show you how to put some of these ideas together and create a working application based on functional programming principles. The application we're about to

Authored by: Milosz Piechocki


Fairytale about performance in web application

Once upon a time, in a very far-off land, there lived front end developers who had been so fortunate to develop web UI on their powerful laptops all the time that they became completely careless about performance implications of their code.

Authored by: ITNEXT

Building a Portfolio Carousel with Synchronized Sliders

Undoubtedly, one of the fundamental sections that every personal or business website must have is a Portfolio. In this section the most outstanding works are generally shown, becoming a showcase of our potential. As well as having a Portfolio full of good works that endorse our performance, the design and functionality of it helps a lot to impress a potential client.

Authored by: Scotch Development

Creating a REST API: Manual Pagination, Sorting, and Filtering

At this point in the series, the REST API supports basic CRUD capabilities on the employees endpoint. However, clients often need some control over how multiple records are fetched from the database. In this post, you'll make the API more flexible by adding pagination, sorting, and filtering capabilities.

Authored by: Dan McGhan

A Web Design Crash Course: From one non-designer to another

I will preface this by saying that I'm not professionally a designer. That being said, I like building pretty things and have had some success with that. A lot of developers seem overwhelmed by design, so I wanted to do a quick write-up with visual examples with quick tips on how to improve the visuals of your site.

Authored by: Ali Spittel 💁

Getting Started with Service Workers

A Service Worker is a relatively new API that's been introduced in modern web browsers in the last few years. It's a really important technology. It's a special kind of web worker that can be installed in your browser to provide special features that were previously unavailable to ordinary web pages like allowing for offline access of website content.

Authored by: Alligator