JSK Weekly - May 16, 2018

We have many great articles on Vannila JavaScript this week. Amongst them, we recommend one as a must read. "A Simple Guide to ES6 Promises" by Brandon Morelli.

For Angular developers, we recommend a little glimpse into the future. You will enjoy this "spoiler" article named "Bazel, an experimental and unofficial feature of Angular 6" brought to us by Fanny-Elise Patrikainen.

State management is often a highly opinionated topic amongst React folks. In order to get a better understanding and introduction in new React Context API, we recommend that you check out "React Context API — A Replacement for Redux?" by Rajat S.

Finally, we have something for Vue.js fans. "The easiest way to improve your Vue.js application." will help you to improve SEO and UX of your applications.


A Simple Guide to ES6 Promises

Promises are one of the most exciting additions to JavaScript ES6. For supporting asynchronous programming, JavaScript uses callbacks, among other things. However, callbacks suffer from problems like...

Authored by: Brandon Morelli

AJAX Basics Explained By Working At A Fast Food Restaurant

AJAX (Asynchronous JavaScript And XML) can be pretty confusing if you do not have a firm understanding of server-side code. When I started with web development, I first learned HTML, CSS, JavaScript and jQuery before I ventured into Node.js and Ruby on Rails.

Authored by: Codementor

Using ES6 classes for Sequelize 4 models

The ES2015 or ES6 specification introduced class to JavaScript. Libraries like ...

Authored by: Hugo Di Francesco

Using trampolines to manage large recursive loops in JavaScript

I vividly remember my entrance into the world of functional programming. Ironically, I was learning about class-based JavaScript in ES5. I was assigned some homework meant to reinforce the OOP concepts taught. However, a full-blown class-based OOP implementation was overkill for the type of problem that was assigned as homework, so I decided to do the whole thing in pure functions.

Authored by: LogRocket

Regex course - part three. Grouping and using ES6 features. - wanago.io - Marcin Wanago Blog

We covered quite a few features of regex so far. There is a lot more, though. Today we will deal with more advanced concepts, like groping and cover more of the RegExp object features in JavaScript. We will also learn how to use some of the features that ES6 brought us.

Authored by: Marcin Wanago


Es6 Awesomeness (Part I)

The sixth edition of ECMAScript standards, known as Es6 adds significant new syntax for writing complex applications, including classes and modules. Some of this new syntax and concepts we would discuss in a 3 part documentation of my learning, making them as possibly simple as i can.

Authored by: Codementor

Implementing Reduce in javascript (Part 1)

I've spent a lot of time trying to learn the map/reduce functions, and more after that trying to use it in a daily basis. For this reason i've decided to write this tutorial, but i don't want to simply explain how/when to use this function, we are going to implement the reduce function together, and using ONLY this function we are going to implement map, filter, flatMap and some other function to work with iterable objects.

Authored by: Erich Oliveira

Understanding the Spread Operator in JavaScript

Newer versions of JavaScript have brought vast improvements to the language in terms of expressiveness and ease of development, but the rapid pace of change has left many developers feeling like they're struggling to keep up.

Authored by: Kevin Ball

.forEach(), .map(), .filter() .... What's the difference?

forEach(), is used to execute the same code on every element in an array but does not change the array and it returns undefined. Example: In the example below we would use.forEach() to iterate over an array of food and log that we would want to eat each of them.

Authored by: Codementor

JavaScript ES6 - write less, do more

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules... and more. Let's take a look.

Authored by: Codementor

Getters And Setters used in JavaScript Objects....How?

A common object paradigm is to include getter and setter method as attributes. Getter and Setter methods get and set the properties of an object. Advantages: You can check if new data is valid before setting a property You can perform an action on the data which you are getting or setting on a property.

Authored by: Ogwuru Johnson


Static Methods Can Access Private Class Constructors In TypeScript

Ben Nadel looks at the access rights of Static methods in TypeScript; and, demonstrates that static factory methods can access private constructors on the same class definition.

Authored by: Ben Nadel


Bazel, an experimental and unofficial feature of Angular 6

Angular 6 has been released few days ago, bringing plenty of great new features, such as Angular Elements or the Angular CDK. But today I would like to talk about an other feature called Bazel, which...

Authored by: codeburst.io

Angular.js Guide for Seasoned Developers - part 2

The blog of Seva Zaikov

Authored by: bloomca

Angular 2 (Introduction to a web development platform)

In this post, we would be writing a simple Angular 2 app. This will give us a first idea of the framework and provide us with the understanding of the concepts behind. Install the Angular cli First you need to install the angular-cli, if you haven't already done so.

Authored by: Codementor

Upgrade AngularJS Sorting Filters to Angular

In the early days of AngularJS, one of the most celebrated features was the ability to filter and sort data on the page using only template variables and filters. The magic of two-way data binding won over many converts to AngularJS and helped it spread like wildfire.

Authored by: Scotch Development

Learn how to create your first Angular app in 20 minutes

Photo by Kelly Sikkema on Unsplash Angular is a JavaScript framework, created my Misko Hevery and maintained by Google. It's a MVC (Module view controller). You can visit the official page to learn more about it. Right now, the latest version of Angular is 5.2.10.

Authored by: Codementor


React Context API - A Replacement for Redux?

Redux version: https://bitsrc.io/geekrajat/dcsuperhero/src/preview React Context API version: https://github.com/rajatgeekyants/superhero Getting started with redux requires a certain learning curve, but here's the gist of what you should know when suing Redux. The state of the entire app is store in a single object tree within a single store.

Authored by: Rajat S ⌨️

React 16 - What can it do for you? - Part 1

Should you be using React 16? A detailed post about React 16's powerful new features React 16, a.k.a React Fiber has brought a new level of simplicity to the development game. With features like Error Boundaries, Portals, and Context API, React Developers can build their apps with a kind of ease never seen before.

Authored by: Rajat S ⌨️

Styling React Components Using glamorous

💄 glamorous is a lightweight library for CSS-in-JS with a simple API that's similar to styled-components' and that makes use of glamor under the hood. Two of the main differences compared to styled-components is the use of JavaScript object literals and an additional API that allows to use DOM elements directly without creating additional named components.

Authored by: Alligator

How-to Build Your Own React Boilerplate

So you've learned some React and built a few things. You've probably used create-react-app or react-slingshot to get off the ground quickly with minimal configuration. However, now you're ready to venture out on your own with your very own React boilerplate. I recently faced this same dilemma.

Authored by: Seth Alexander

How to Get a React Component's Element

JSX is an amazing pseudo-language for React, and if I'm honest, it's what brought me to love React so much. Using React without JSX is cumbersome and frustrating, while using JSX is such an easier way to express your code. One drawback of JSX, however, is that it makes accessing component elements indirect, if not ...

Authored by: David Walsh

React Native - Platform specific code

With React Native we are writing the code for both, iOS and Android. And it won't pass long to notice that we need to differ one from another. Right: Android Emulator Nexus 5 API 23 1080x1920: xxhdpi x86_64 As we can see, our Header component, that has the simple task of displaying text behaves differently on Android and iOS.

Authored by: The Practical Dev


The easiest way to improve your Vue.js application. Part 1

Vue.js is a great framework for developing different kinds of web applications, however, it has a problem with SEO: the asynchronous content of an application can't be optimally crawled by search engine bots, so it could be a huge problem for your business.

Authored by: ADCI Solutions

Intro to the Vuejs🐎🐎🐎

Today I'm here to explain about Vuejs in a simple way and its uses. Let's start learning by writing code instead of reading long paragraphs. For these, I'm using the codepen. first, I started with writing div tag with id app.

Authored by: Sai gowtham

The Ultimate Vue.js & Laravel CRUD Tutorial

In this tutorial, I'll show you how to set up a full-stack VueJS/Laravel app and demo each of the CRUD operations. We'll use Axios for AJAX, and I'll also show you strategies for dealing with the tricky UX of this architecture.

Authored by: Codementor

Bootstrap vs Semantic UI vs Bulma for VueJS

Comparing 3 different front end CSS based frameworks for web and mobile development - Bootstrap, Semantic UI and Bulma

Authored by: Sam Benskin

Creating Multi-root Vue.js Components

A common constraint in component-based frameworks like Vue.js is that each component has to have a single root element. This means that everything in a particular component has to descend from a...

Authored by: Kevin Ball


Web Scraping Scotch: The Node Way

Learn how to apply web scraping techniques in a Node application to extract data from any website using Scotch as a case study.

Authored by: Scotch Development

Node.js Backend Development - Creating Custom Modules

In the previous article we learned how to serve HTML files from the disk or file systems. In doing so we started to make our code larger. It started getting overlapped with callbacks and we may fall into the callback hell really soon. We need to separate code really soon before we mess up the whole system.

Authored by: DiscoverSDK

A Quick Look at Nest

Nest is a scalable framework for building server-side applications. It is authored in TypeScript and relies on the Express framework. It leans heavily on modern language features such as async/await and decorators to reduce cruft and place the focus cleanly on route-handling business logic.

Authored by: SitePen

Building a chat bot using Nest.js and Telegram

In this tutorial, I will be showing you how to build a basic chat bot for Telegram using Nest.js. This will, amongst other things, give you an overview of how Telegram bots works and what you can do with them. Telegram bot are simply accounts that do not require an additional phone number to setup.

Authored by: olususi k oluyemi

Libraries and Tools

An overview of Visual Studio Code for front-end developers

No matter whether you are a code newbie or a seasoned developer, code editor is an imperative part of your work. The problem, especially if you are a beginner, is that there are tons of choices for IDEs. And many of them share similar features, functionalities, and even UI.

Authored by: Codementor

Git Integration in Visual Studio Code

Visual Studio Code has easily become one of the most popular editors out there for Web Development. It has gained such popularity thanks to its many built in features, including source control integration, namely with Git. With Git being one of the most popular and powerful Source Control providers, harnessing its power from within VS Code is just icing on the cake.

Authored by: Scotch Development

Teardown: Visual Studio Code VS Sublime (JavaScript Focus)

Visual Studio Code and Sublime are two of the most popular code editors out there. In this post, I'll compare both tools' performance, customization, and extensions. For frontend developers out there, this will also answer the question: which one is better for JavaScript development?

Authored by: Snipcart

Turn Sublime Text 3 into a JavaScript IDE

Sublime Text is one of the most popular editors for web development and software development in general. It's very smooth and fast compared to other editors (being written in C++ helps that speed). Sublime also has tons of plugins you can find through Package Control. But it's only a text editor and not an IDE.

Authored by: CSS-Tricks


End-to-end testing React apps with Puppeteer and Jest

In this tutorial, we'll see how to write tests for a React app using Jest and Puppeteer. Testing is an important part of modern web application development, it helps to check if the code you wrote is acceptable and works as accepted. It's a way of catching bugs in your code before you go "live".

Authored by: LogRocket

Setting up Jest with React and Webpacker

Webpacker is a great library that was introduced in Rails 5.1. It gives an easy...

Authored by: if let Some(Chris) = aergonaut

Functional Programming

I ❤ Ramda - Partial Application with Curry

The I ❤ Ramda series will differ slightly from others you may have seen. Instead of using the typical foo, bar, baz examples, or articles demonstrating isolated functions, this series aims to showcase real world applications of Ramda.js. This is the first article and will focus Partial Application with Curry.

Authored by: joelnet


Math and front-end: Context is so much more important than degree of difficulty

If you were one of those kids that wondered why you had to attend all those math classes and learn about angles and algebra, well, so was I. I'll admit, I was too restless and easily bored to be a good student in a classroom setting.

Authored by: LogRocket

Learn Bulma CSS in 5 minutes

Bulma is a simple, elegant, and modern CSS framework that a lot of developers prefer over Bootstrap. Personally, I think Bulma has a better design by default, and it also feels more light-weight. In this tutorial, I'll give you a super quick introduction to the library.

Authored by: Per Harald Borgen

How to Use the berforeinstallprompt Event to Create a Custom PWA Add to Homescreen Experience

Google recently announced as of May 2018 Chrome will no longer automatically prompt Progressive Web App users to add the PWA to their homescreen. It is now up to the site to manage the prompt. This tutorial will help you create your own workflow.

Authored by: Chris Love

Elementary Element Queries

When Media Queries just aren't enough

Authored by: Serena