JSK Weekly - February 20, 2019

Let us start this week's issue with React.js. All of you React lovers out there, now you have a chance to learn how to "Achieving Accessibility in React Applications" with Nwose Lotanna.

Next, for Vue.js developers, we can recommend "Better Tooling with the New Vue CLI" by Christian Nwamba. You can learn about new features and improvements in the latest Vue CLI.

Finally, we have something for newcomers to Front-End development. A very interesting article "A Timeboxed, Day-by-Day #100DaysOfCode Front-End Development Curriculum" by Nick Scialli. He lays out a path for mastering a Front-End development that might help you in achieving this goal.


The Vanilla and Flavouring Pattern

This pattern tries to tackle a difficult problem in coding: how do you make code that is generic and stable, but at the same time replaceable and specific? In a top-down approach, one starts with a result in mind, and quickly iterate over the code until it produces the desired result.

Authored by: Bit

Front and Rear Camera Access with JavaScript's getUserMedia()

It seems like not so long ago every browser had the Flash plugin to get access to the devices media hardware to capture audio and video, with the help of these plugins, developers were able to get access to the audio and videos devices to stream and display live video feed on the browser.

Authored by: Scotch Development

5 ways to build real-time apps with JavaScript

There was a point in time where we didn't expect too much from web pages. Which reminds me, the Space Jam movie website is still on the internet in its original form. And it uses a frameset. Not iFrames. FRAMES. Warner Bros has some gently used copies of Dreamweaver MX.

Authored by: Burke H✪lland

Dear Javascript

this isn't working. When we first met, I was so excited. You were fun and easy to get along with. I told all my friends you were Java. We hit it off. Slowly at first... actually, really slowly. You may not have had class, but at least you had standards.

Authored by: Hacker Noon


4 different techniques for copying objects in JavaScript

When working with functional programming a good rule of thumb is to always create new objects instead of changing old ones. In doing so we can be sure that our meddling with the object's structure won't affect some seemingly unrelated part of the application, which in turn makes the entire code more predictable.

Authored by: Maciej Cieślar

8 NEW FEATURES in JavaScript ES2019

I personally love how JavaScript keeps improving and adding more features. TC39 has finished and approved this 8 features for ES2019 which has 4 stages and those stages are. Here are the links for you can see all the proposals on Stage 0, Stage 1 - 3 and Final Stage.

Authored by: Codedam

JavaScript: Variables & Scope. A Visual Guide

JavaScript: Variables & Scope. A Visual Guide. We often speak of discrepancies betweenvar, let and constBut more often than not, we still see developers struggling to fully... - Web design and web development news, website design and online marketing. Portal offering web design, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.

Authored by: MA-NO WebDesign&Dev


React Hooks in TypeScript

useImperativeHandle useImperativeHandle is by far the most involved Hook to set types for, but also likely the least used as it is not a common (or recommended) practice to expose imperative functions (handles) on components. The above example wraps an HTML input component and exposes a focus function in order to allow the input to be focussed.

Authored by: James Ravenscroft


Using A Wild Card Shortcuts Route To Hide The Internal Routing Implementation In Angular 7.2.5

Ben Nadel looks at one way to use wild card "shortcut" URLs in an Angular 7.2.5 application in order to hide the internal implementation details for the routing configuration. This can provide more consistent long-term linking for external documentation and Support Team correspondence.

Authored by: Ben Nadel

Using A Wild Card Route (**) To Traverse Arbitrarily Nested Data In Angular 7.2.4

Ben Nadel explores wild card (**) routes in the Angular 7.2.4 Router; and, demonstrates how to use a wild card route as a means to traverse arbitrarily nested data. This allows for more application state to be pushed into the URL, which ultimately makes every view more shareable and the application more usable.

Authored by: Ben Nadel

How To Display Data In Angular

Get real time updates directly on you device, subscribe now. How To Display Data In Angular | Angular 7 Display Data is today's topic. We can display the data in whatever format we want. The general use case is to display the data in tabular format means in table format.

Authored by: KrunalDLathiya


Achieving Accessibility in React Applications

Web Accessibility is the design of pages, tools and technologies on the web that can be used by everyone. Everyone here includes people with auditory, cognitive, neurological, physical, speech and...

Authored by: Viclotana™

Everything You Need to Know to Create Custom React Hooks

Let's learn what it takes to create a custom React Hook as well all of the rules we must keep in mind about using Hooks. Hooks are just functions! Anything that is a function can become a hook.

Authored by: Eric Bishard

How to set up user authentication using React, Redux, and Redux Saga

UPDATE(12.02.2019): I recently updated this project with most recent react routers i.e. version 4.3.1 which is react-router-dom. Please head to its repository to view the changes. In my previous blog I wrote how to write a scalable architecture in Node.js.

Authored by: freeCodeCamp.org


Saved By The Aurelia Portal Attribute

Recently at my day job, I encountered a very specific scenario that I wrestled with for quite a bit. I had a routed set of views, which were using a layout view template because it needed a very specific markup for positioning using CSS Grid.

Authored by: Dwayne Charrington


Better Tooling with the New Vue CLI

Multi pages, build targets and instant prototyping - these are the new exciting features that shipped with version 3 of the CLI.

Authored by: Telerik

Projecting Content Into The Root Application Component Using Slots In Vue.js 2.6.6

Ben Nadel briefly explores the various ways in which the root Vue() instance can be defined. And demonstrates that there is one way in which you can enable content projection directly from the root HTML page using standard Slot syntax in Vue.js 2.6.6.

Authored by: Ben Nadel

Creating a Vue.js SPA for E-commerce [tutorial included]

In a rush? Skip to Vuejs SPA tutorial Stereotypes can be a funny thing. Some are nice like Swedes are gorgeous; some are mean like Americans are fat and Italians are "passionate;" and some seem downright true like all Canadians are polite.

Authored by: Snipcart


Node Express Image Upload and Resize Tutorial Example

Node Express Image Upload and Resize Tutorial Example is today's topic. Node.js as a platform and express as a lightweight framework is the best choice for backend development. We can build Web APIs through this framework very quickly, and it has tremendous support for the NoSQL databases like MongoDB.

Authored by: KrunalDLathiya

Node.js & Express with HTTPS in Docker

In our last article on Docker, I showed and demonstrated for you how to run Docker containers with WordPress. Today, I'll show you how to set up a Node.js/Express machine and get it ready to go with HTTPS in order to fully clone a Node.js server.

Authored by: DiscoverSDK

Libraries and Tools

Demonstration on how to use GraphQL with Node and Vue in bits

As I was surfing the internet, I came across this tweet. It seems that front-end devs are tired of requesting for APIs every now and then. 😄 The first time I interacted with GraphQL, I fell in love with it. Why?

Authored by: meshileya

Static website using NextJS and Markdown

Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with NextJS: add a new page, use CSS modules to style, navigate between pages, create a custom layout, process markdown files, create dynamic pages and export the app as a static website.

Authored by: Vijay T

Working with TypeScript in Visual Studio Code

TypeScript and Visual Studio Code are two amazing products created by Microsoft, and - surprise surprise- they work amazing together! Let's take a look at how Visual Studio Code makes it a breeze to work with and configure TypeScript! Install the TypeScript package globally and create a ".ts" file to get started.

Authored by: Scotch Development

7 JavaScript Libraries You Don't Want to Miss in 2019

Now that we've hit 2019 in stride, let's take a look at some of the most interesting, trending JavaScript libraries for the new year. The JavaScript libraries we'll be looking at cover a pretty wide range of functionalities and uses. Here are 7 you don't want to miss!

Authored by: DiscoverSDK


Cross Browser Testing your Stencil Web Component like a boss

Stencil is a really great piece of software. For those who are not familiar with it, it is a " Compiler for Web Components ". Stencil comes by default with tools for testing your Web Component : Jest for the testing framework, and Puppeteer for " End-to-end "(e2e) tests.

Authored by: Vincent Ogloblinsky


A #100DaysOfCode Timeboxed Front-End Development Curriculum

Note: I know front-end development means a lot of different things to a lot of people! If you're a front-end developer and you think this guide could be improved, please let me know by raising an issue as described in the associated Github repository Contributing section. Thank you!

Authored by: Nick Scialli

Using Wordpress with React js

In this article, we will cover how to use WordPress as a headless CMS by leveraging the WordPress API and React js when building a project. If you've ever wondered whether or not you can use React with Wordpress, the answer is yes.

Authored by: Tim Smith

​​Avoiding those dang "cannot read property of undefined" errors

​​​​ Uncaught TypeError: Cannot read property 'foo' of undefined. ​ The dreaded error we all hit at some point in JavaScript development. Could be an empty state from an API that returns differently than you expected. Could be something else. We don't know because the error itself is so general and broad.

Authored by: Adam Giese

How not to lint your code?

As a programmer, I think you have high expectation for the code you write. It should be easily readable and understandable by those you'll interact with it in the near future. That includes the writer himself, e.g. 1 year later.

Authored by: areknawo