JSK Weekly - September 12, 2018

A lot of interesting articles this week but let's first start with the announcements.

Popular library "styled-components" announced the version 4. Read all about it in Evan Jacobs's article "Announcing styled-components v4: Better, Faster, Stronger".

Our favorite framework, Aurelia, announced big releases for the Aurelia-CLI. Make sure to check out Rob Eisenberg's release notes on the official blog.

For everyone that doesn't know what "hoisting" is or not sure about it, we strongly recommend "Hoisting in Modern JavaScript — let, const, and var" by Sukhjinder Arora.

Big libraries and frameworks are great but JavaScript developer should be able to do the job without them. That's why our final recommendation for this week is "Build a Website with Modern Tooling and No Frameworks" by Esau Silva.


Build a Website with Modern Tooling and No Frameworks

In this tutorial we will be building a website without a front-end framework but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules, and Sass.

Authored by: Esau Silva

Solve Traditional Accessibility Problems The Untraditional Way

That's it - two simple contrast equations which work well to determine the best font color for optimal readability. The majority of the time, these two contrast algorithms produce the same result. There are some instances where the results conflict, but generally you can use whichever equation you prefer.

Authored by: codeburst.io

Going International at the Front-End

Simple React i18n I nternationalization (i18n) is as old as the Internet, but in the fast changing world we are moving from the "web pages" generated by the server-side, to "single page applications". This is great in so many ways, but often we find ourselves rediscovering the wheel.

Authored by: Daftcode

JavaScript Promises Explained By Gambling At A Casino

We all love the asynchronous capabilities of JavaScript. In fact, we love them so much that sometimes, we overindulge. And then we get code that looks like this " pyramid of doom ". Image Credit This is commonly known as "callback hell" because you probably don't want to re-read that code and try to understand how everything works, and in what sequence it works.

Authored by: Codementor


My Journey through Javascript: Basic Syntax

In my previous post we have learned about flowcharting and it's structure. Don't forget, before you actually start programming you should ALWAYS start with a flow chart in case you get lost in your code. Think of it as your treasure map to Javascript gold.

Authored by: The Practical Dev

Filter Array Method in Javascript

Get real time updates directly on you device, subscribe now. Filter Array Method in Javascript is today's leading topic. Filter functionality is handy when we need to filter out values from an Array. In CRUD operation, this function is beneficial to remove an element from an array.

Authored by: KrunalDLathiya

Hoisting in Modern JavaScript - let, const, and var

Learn How Hoisting Really Works in JavaScript Many JavaScript programmers explain hoisting as JavaScript's behavior of moving declarations (variable and function) to the top of their current scope (function or global). As if they were physically moved to the top of your code, which is not the case.

Authored by: Sukhjinder Arora


Building VueJS Applications with TypeScript

TypeScript has undoubtedly grown in popularity over recent years. More and more developers within the web industry are looking to use static-type languages and with the release of Angular 2 back in 2016, this has only increased the demand for developers who use TypeScript.

Authored by: George Hanson

How to Mock AWS Services in TypeScript

I've recently been working on a new project to automatically convert blog posts to audio that has a couple different serverless microservices. Each microservice is initialized using the Serverless Framework and typically consists of one or more Lambda functions and either an SNS topic, SQS queue, DynamoDB table, or API Gateway endpoint.

Authored by: Kyle Galbraith


Angular Evolution

Before gonna to start the differences between angular versions. Let us discuss some simple question. It may be useful for New Bees. What is Angular? Angular is a JavaScript open-source front-end web application framework. It is primarily sustained by Google together with an extended community of people and companies, to approach many of the challenges faced when developing a single page, cross-platform, performant applications.

Authored by: codeburst.io

Mechanics of Communication and Custom Events Binding in Angular Components

Event binding with HTMLElements in Angular is quite simple and straightforward. Let's see how event binding in Components works. A component can listen to an event raised by another component by adding the target event within parenthesis () in the target element. Whenever we do this: We are binding the b event to the sub-book Component.

Authored by: Chidume Nnamdi

Angular Material Example Tutorial From Scratch

Angular Material Example Tutorial From Scratch is today's leading topic. We use Angular 6 and Angular Material 6 for this demo. Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktop.

Authored by: KrunalDLathiya

RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom

If you are confused about the differences between forkJoin, zip, combineLatest and withLatestFrom, you are not alone! :) These 4 operators are what we know as combination operators - we use them when we need to join information from multiple observables. That is what this article is for!

Authored by: Jecelyn Yeen

JavaScript Demos Using Webpack 4 With Angular 6.1.7 And Ahead Of Time (AoT) Compiling

Ben Nadel updates his JavaScript demos project to start using Webpack 4. This will allow his Angular 6+ demos to be compiled using the Ahead of Time (AoT) compiler which will, in turn, significantly reduce his bundle files and time to first interaction.

Authored by: Ben Nadel


React For Beginners (Part 1)

There are a ton of resources for learning React. The community is extremely helpful and there are a multitude of free online resources to help you get started. You can easily integrate React components into legacy code. This makes it much easier to update legacy code bases.

Authored by: Emma Wedekind

Render Caching for React

Server Side Rendering (SSR) is a very useful technique that makes web apps appear faster. The initial HTML is displayed before the JavaScript is parsed and, while the user is deciding what to tap on, our handlers are ready. Server side rendering in React requires additional work to setup and has server costs.

Authored by: CSS-Tricks

Intersection Observer API in React

This tutorial is part 2 of 2 in this series. The Intersection Observer API is a browser API which can be used to track the position of HTML elements in context to the actual viewport of the browser.

Authored by: Robin Wieruch

Why you should consider the new Context API in React? - A deep dive

Many years ago the Context API was introduced as an experimental feature with a warning " in the future this API can break". As the Context API was experimental, most React developers were not confident enough to use it.

Authored by: Mahesh Haldar

React-Redux connect(): when and how to use it

Learn how to create container components in React that are connected to the Redux state. React provides two major mechanisms for providing data to components namely: props and state. While props are read-only and allow a parent component to pass attributes to a child component, state is local and encapsulated within the component and can change at any time in the component's lifecycle.

Authored by: Glad Chinda

Announcing styled-components v4: Better, Faster, Stronger 💅

The highlights of this release: Smaller and much faster, going from 16.1kB to less than 15kB (depending on your bundler and usage of the babel plugin) and speeding up mounting by ~25% and re-rendering by ~7.5% A brand new createGlobalStyle API, the hot-reloadable and themable replacement for the old injectGlobal

Authored by: Evan Jacobs


Aurelia Release Notes - Early September 2018

We're excited to share that the CLI can now setup Protractor and Jest when choosing to use the Aurelia-CLI internal bundler. This option was already available for Webpack, but can now be used with the Aurelia-CLI bundler as well. New Webpack projects now use the mini-css-extract-plugin instead of the extract-text-webpack-plugin.

Authored by: Rob Eisenberg


How To Create An RPG Adventure Game using Vue.JS and Cosmic JS

Start writing here...Cosmic JS is a great content management tool which gives you the ability to upload, access, and edit your data and media files easily. These properties make it a prime candidate to use when building web-based video games as they heavily incorporate a large combination of media images, files, and data objects.

Authored by: Codementor

A New Vue On JavaScript30 - 03 CSS Variables

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the third of Wes Bos's (@wesbos) #JavaScript30 projects titled: 03 - CSS Variables. This project uses an HTML inputs to control CSS variables to change an image's blur, padding, and background color.

Authored by: Dave Follett

A Sneak Peek of NativeScript-Vue 2.0!

In February, I was busting my buttons with pride, announcing the launch of NativeScript-Vue 1.0 on the big stage in Amsterdam at Vue.Amsterdam Conference. Together with its creator, community guru and Vue-Master Igor Randjelovic, we unleashed onto the world a beautiful new way of building downloadable mobile apps for iOS and Android using a single codebase, pairing the power of NativeScript with the pleasure of development with Vue.js.

Authored by: Jen Looper


JavaScript GraphQL client requests in Node and the browser using `graphql.js`

An example consuming a GraphQL API in JavaScript from Node and the browser using graphql.js See the example live: https://codewithhugo.com/js-graphql-client-example/. Full repo: https://github.com/HugoDF/js-graphql-client-example. Fetching from Node Fetching from the browser GraphQL documentation tools This was sent out on the Code with Hugo newsletter last Monday.

Authored by: The Practical Dev

How To Create Express HTTPS Server With A Self-Signed Certificate

Get real time updates directly on you device, subscribe now. How To Create Express HTTPS Server With A Self-Signed Certificate is today's leading topic. If we need start our node.js server on node.js then to be able to serve a site on HTTPS from localhost you need to create a self-signed certificate.

Authored by: KrunalDLathiya

Sending an email using NodeMailer & Gmail

Sending an email in nodejs is a breeze thanks to NodeMailer. Let me walk you through the process of sending an email using NodeMailer. firstly install nodemailer in your node application. npm install --save nodemailer after installing the nodemailer, in your main node.js file require the nodemailer var nodemailer = require('nodemailer'); nodemailer needs a transport service using which it can send emails.

Authored by: Manoj Singh Negi

Handling File Uploads On Node Server Using Multer (Part A - Backend)

According to me, the best way of learning new technologies is to get a hands on experience simultaneously, and here in this coding tutorial article you will be learning how to make a drag and drop file upload form with node server. Please note that this is a two part tutorial article.

Authored by: Madhav Bahl

Libraries and Tools

Introduction to Glitch for Node.js Apps in the Cloud

Glitch is a platform on which you can build Node.js applications in the cloud, public or private, and collaborate with other people on them. At a first glance, you might be tempted to think it's not that much serious, right? What's all this images and colors, it's not for serious programmers!

Authored by: Flavio Copes

Custom builds with Webpack

In my previous article, I explained how to l azy load modules using the dynamic import syntax and all the customisation involved when using along Webpack.

Authored by: Rubens Pinheiro

Chrome DevTools - Debugging Node.js Application Using ndb

Google Chrome Labs have improved our debugging experience by releasing a new debugger for Node.js. In this post, we'll cover the capabilities of ndb as a debugging tool. As some of you might remember, a headless native debugging tool was supported in Node.js for a long time: It used a deprecated protocol, which was called V8 debugger protocol.

Authored by: Nitay Neeman

Removing Babel's Stage Presets · Babel

Moving forward with v7, we've decided it's best to stop publishing the Stage presets in Babel (e.g. `@babel/preset-stage-0`).

Authored by: Babel

How to Use a jQuery ComboBox UI Component in Your Web App

The ComboBox is both a text field and a dropdown list, perfect for giving users choices while also allowing for their input. Learn how to add one to your app.

Authored by: Telerik


Set flag to start tests

How to wait for a slow-starting application to bootstrap before running end-to-end Cypress tests. Imagine your web application (especially in development mode) is slow to start. Maybe it is loading a lot of code, or asking an under-powered server for data. But it does not start working right away.

Authored by: Gleb Bahmutov

JavaScript testing tutorial - part three. Testing props, the mount function and snapshot tests

1. JavaScript testing tutorial - part one. Explaining types of tests. Basics of unit testing with Jest2. JavaScript testing tutorial - part two. Introducing Enzyme and testing React components3. JavaScript testing tutorial - part three. Testing props, the mount function and snapshot tests.Hello! In the previous part of the tutorial, we've covered the very basics ...

Authored by: Marcin Wanago

Building a Visual Unit Test for React

Building a simple app for teaching concepts around scoring a hand of poker using functional programming. This project uses visual elements and unit testing as a way to "gamify" the learning process. A few simple components combined with the powerful and easy to use Kendo UI grid create an meaningful display of tests with data.

Authored by: Ed Charbeneau


Comparing the React and Vue Ecosystems with a Real-World SPA

React vs Vue - a favorite talking point among developers. Many people pick a framework and stick to it, never really getting to know the library they left behind. That's mainly due to time; the only way to really get to know the ins and outs of a system is to use it, struggle with it, grow with it.

Authored by: John Datserakis

Using DataLoader with GraphQL: A Concrete Example

A fairly technical example ( TypeScript) on using the DataLoader library to ( magically) solve a very specific problem that comes up in implementations using GraphQL. First, this gets at a very specific problem that comes up in implementations using GraphQL; so in order to understand the problem you have to have a decent understanding of GraphQL.

Authored by: codeburst.io

Is front-end development having an identity crisis?

Does front-end development as a we know it still exist; or has the role evolved into something we no longer recognise? As with evolution in nature, the evolution of "front-end" has resulted in several distinct flavours --- and in my opinion --- an identity crisis.

Authored by: Vernon Joyce

Converting a WebGL application to WebVR - Mozilla Hacks - the Web developer blog

A couple months ago I ported the Pathfinder demo app to WebVR. It was an interesting experience, and I feel like I learned a bunch of things about porting WebGL applications to WebVR that would be generally useful to folks, especially folks coming to WebVR from non-web programming backgrounds.

Authored by: Mozilla Hacks