JSK Weekly - January 16, 2019

This week we have something special for node.js beginners. So if you are a beginner and want to start learning node.js, go right ahead and start your journey with "A Beginner’s Guide to Server-Side Web Development with Node.js" by Chen Hui Jing.

If you want to find out what GraphQL is all about and "Why Does Everyone Love GraphQL?", make sure to read a very informative article by Rajat S.

Redux is a great tool. But this week Shalvah tries to find an answer to a question "Can Redux be Used on the Server?" Don't miss out this interesting reading.

Finally, something for Angular developers. Matt Raible is exploring Angular 7 in " Build an App with Everything New & Noteworthy in Angular 7". We are sure that you will enjoy it.


Faster Page-Loads by Prefetching Links During Idle Time

The first time I encountered prefetching (or so I thought) was in my UCBrowser for Nokia Symbian E71. Whenever I browsed to a site that has next>> link. Clicking the next>> kinda loads very fast!! Like it has been there all the while.

Authored by: Chidume Nnamdi

Toggling Animations On and Off

Not everybody loves animations. To make them happy, give them the ability to easily turn animations on and off.

Authored by: Kirupa 🍊

From classes to plain objects and pure functions

This is the first in a series of posts about core concepts of the hybrids - a library for creating Web Components with simple and functional API. ES2015 has introduced classes that are now widely used in UI libraries and frameworks. However, are they the best way for creating component-based logic in JavaScript?

Authored by: Dominik Lubański

How to navigate the maze of JavaScript code

In this article I want to highlight the problem of navigating a big codebase and to show a little demo of codecrumbs - visual tool which helps you to learn a codebase faster. You can see standalone version online here. Appreciate your early feedback!

Authored by: ITNEXT


Javascript Context - this keyword

Context is one of those topics that always create a lot of confusion when starting learning javascript and a topic that interviewer ask a lot. Let's start... What is context? Context is always the value of the this keyword which is a reference to the object that "owns" the currently executing code or the function where its looked at.

Authored by: codeburst.io

Async! Await! JavaScript.

JavaScript is like the faceless men of the programming world. Source:google. It can be A synchronous /F unctional /O bject-oriented /C lient-side/ S erver-side and the list goes on... This article will about the former- Asynchronous JavaScript. JavaScript is a Synchronous Language! 😱😱😱 But I thought that this article was about Asynchronous JavaScript.

Authored by: Codementor

I Hate JavaScript's for loops. Let Me Tell You Why

JavaScript doesn't have just one for loop. JavaScript actually has three different for loops. You can use a "for/in" loop to iterate over the keys of an array. You have to be careful with this one because it iterates over the keys and not the values.

Authored by: joelnet

Lazy Loading with the IntersectionObserver API

Hi. In this post, I'll give some information about IntersectionObserver API. Before we start, I should say this IE11 doesn't support this API. You can check which browsers support on the CanIUse. There are many libraries that helping lazy loading operations. I know, but this API native.

Authored by: Bug Skywalker


TypeScript 2.8: Conditional Types

TypeScript 2.8 introduced conditional types, a powerful and exciting addition to the type system. Conditional types let us express non-uniform type mappings, that is, type transformations that differ depending on a condition. A conditional type describes a type relationship test and selects one of two possible types, depending on the outcome of that test.

Authored by: Marius Schulz


Build an App with Everything New & Noteworthy in Angular 7

Angular 7 was released earlier this quarter and I'm pumped about a few of its features. If you've been following Angular since Angular 2, you know that upgrading can sometimes be a pain. There was no Angular 3, but upgrading to Angular 4 wasn't too bad, aside from a bunch of changes in Angular's testing infrastructure.

Authored by: Matt Raible

Using Embedded Data To Provide Request-Specific Application Configuration In Angular 7.2.0

Ben Nadel looks at how to embed page-specific configuration data in the HTTP response that services up your Single-Page Application (SPA); and then, how to consume that embedded configuration data, using Dependency-Injection (DI) and Type safety, in the bootstrapping process of your Angular 7.2.0 app.

Authored by: Ben Nadel


Can Redux be Used on the Server?

Why would I need Redux? Redux bills itself on its landing page as "a predictable state container for JavaScript apps". Redux is commonly described as a state management tool, and while it's mostly used with React, it can be used anywhere JavaScript is used. We've said Redux is for managing state.

Authored by: some guy

Pure Components, Interfaces and Logic Hooks

Available on Medium This architecture is divisible into three components, Pure Components, Interfaces and Logic Hooks. It is a variant on the Presentational and Container Components pattern described by Dan Abramov, now considering the existence of Hooks. Interfaces are mainly concerned with how information should be shared between Logic Hooks and with Pure Components.

Authored by: Charbel Rami

Create a Snapping Image Swiper like Instagram with React

Instagram has a really cool swiping image experience. As you scroll over a set of images it'll move left/right and then snap to whatever image you've partially settled on. It looks a little something like this. We're going to tackle making a version of this.

Authored by: Jason Brown

React - useReducer the new amazing Hook Redux style

Is almost 1 month that I'm using hooks and I can say that they're really cool and they reduce the amount of code without loosing any functionality. My code now is only based on functional component and no class (at the moment) are required.

Authored by: JavaScript Kicks

Using React Portals to Render Children Outside the DOM Hierarchy

Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result. render() { return ( // Child to render inside of the div ); } But!

Authored by: CSS-Tricks


Vue.js is omakase

I'm borrowing from David Heinemeier Hansson here. Six years ago, he wrote Rails is omakase to capture his notion of what makes a delicious software framework: it is heavily curated and borne of experience. I think of Vue.js the same way. Here's an excerpt from DHH's post: There are lots of à la carte software environments in this world...

Authored by: Ross Kaffenberger

30 Days of Vue - Methods and Computed Properties

Methods in a Vue instance behave like normal JavaScript functions and are evaluated only when explicitly called. Instead of using methods we could always write our intended functionality change inline in the template. Let's see an example of this. We'll reuse an example seen in the Vue documentation that involves reversing a series of characters from a string.

Authored by: Hassan Djirdeh

Accessible routing with vue.js

Routing is an integral part of a Single Page Application, and therefore for my side-project accessible-app.com. Since it's so central for Single Page App inclusiveness it is the first of the committed features for version 1 of Accessible App I decided to tackle.

Authored by: Marcus Herrmann

Building a Desktop App with Vue: NW.js

This article describes ho to build a desktop application with Vue.js framework and NW.js library

Authored by: Natalia Tepluhina


A Beginner's Guide to Server-Side Web Development with Node.js

When I was starting out in the web industry a couple years back, I stumbled upon a Computer Networks course by Professor David Wetherall on Coursera. Unfortunately, it is no longer available but the lectures are still available on the Pearson website.

Authored by: HJ Chen

Build a Personal Facebook Messenger Bot in 10 minutes with Nodejs and Standard Library

Wouldn't it be awesome to have a personal chatbot that will send you cool stuff throughout the day? Maybe update you on the status of your home devices or send cute cat pics from Reddit? Let's build one that sends you the top posts from your favourite subreddits .

Authored by: Hacker Noon

Super Simple GraphQL with Node

GraphQL is a specification and therefore language agnostic. When it comes GraphQL development with node, there are various options available ranging from graphql-js, express-graphql to apollo-server. In this tutorial, I'll be showing you how simple it is to get a fully featured GraphQL server up and running in Node.js with Apollo Server.

Authored by: Scotch Development

How to setup Express.js in Node.js

A Node.js with Express tutorial to learn how to setup a Node.js application step by step from scratch ...

Authored by: Robin Wieruch

How to create a REST API with Express.js in Node.js

A Node.js with Express tutorial to learn how to create a REST API for CRUD operations which can be consumed by a client application ...

Authored by: Robin Wieruch

Libraries and Tools

Why Does Everyone Love GraphQL?

In 2015, Facebook (that big social network company that also gave us React) released a new open-source data query language (QL) named GraphQL. GraphQL became so popular that by the end of 2018 it detached from Facebook into its own foundation that is maintained by the Linux Foundation - a non-profit technology consortium founded in 2000.

Authored by: Rajat S ⌨️

Designing the Flexbox Inspector - Mozilla Hacks - the Web developer blog

The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements. You can try it out now in Firefox DevEdition or join us for its official launch in Firefox 65 on January 29th. The UX challenges of this tool have been both frustrating and a lot of fun for our team.

Authored by: Mozilla Hacks

DoneJS 3

DoneJS 3.0 is out! 🎆 If you're unfamiliar with DoneJS you should definitely check out our homepage and run through the (it doesn't take very long). Let me give you the quick spiel: DoneJS is a JavaScript framework that provides you everything you need to build performant real-time applications.

Authored by: Bitovi

6 Hottest VS Code Themes To Use in 2019

Visual Studio Code is incredibly easy to customize, including adding some awesome looking themes. Themes can give your editor a lot of personality and make it more fun to work with. Let's take a look at some of the hottest themes to use in 2019!

Authored by: Scotch Development

Let the computer do the formatting

When I was first introduced to Prettier by my friend Mr. Ishan 'Fishy' I couldn't understand what the big deal was. We already had linters that would catch errors and do some automated formatting...

Authored by: Nipuna Gunathilake

Using Storybook with React & Redux

Storybook allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. Along with these developer experience (DX) benefits, Storybook works nicely with traditional component development and doesn't require changes to core functionality to display, test, and document your component library.

Authored by: Alligator


Things I learned after writing tests for JS and HTML page

In these weeks, I always want to learn about writing tests using Jest, Mocha or other stuffs. Unfortunately, I don't have any React apps that want to test these days but I have chances to figure out how to test HTML page with pure JavaScript.

Authored by: The Practical Dev

Node.js Performance Tuning and Testing

We know Node.js for its lightning-fast performance. Yet, as with any language, you can write Node.js code that performs worse for your users than you'd like. To combat this, we need adequate performance testing. Today, we will cover just that with an in-depth look at how to set up and run a performance test and analyze the results so you can make lightning-fast Node.js applications.

Authored by: Stackify


Benchmarking Angular, React and Vue for small web applications

We'll compare these application on below criteria JS bundle size: Javacript bundle size is the only resource that differs for the application in each framework. Images, CSS, and other resources are same.

Authored by: Bit

Build a Blog Using Express.js and React in 30 Minutes

Building a web server sounds complicated, but it doesn't have to be! What if I told you that you can create a web server with just a couple lines of code? Yes! You can do things like this using Express.js (the most popular web framework for Node developers).

Authored by: Scotch Development

Setting A React Project From Scratch Using Babel And Webpack

The webpacks are an extremely configurable piece of software we can pass arguments to cli command or create a configuration file named webpack.config.js . We should export an object with configuration property. The entry specify the root of the source code of the project.

Authored by: Anshul Goyal

9 UI Components for Every Project

For the past 2 years, I have been playing with a lot of side projects and one pain point that I always encounter when the projects get larger and more complicated is when I had to rewrite a lot of...

Authored by: siriwatknp

Web Page Usability Matters

Users appreciate pages being usable and interactive soon after they're visually ready. UI interactions (scrolls, taps, clicks) can be delayed by script and other browser work so minimizing their impact can really help your users. You may have heard there isn't a single metric that fully captures the "loading experience" of a web page.

Authored by: Addy Osmani