JSK Weekly - September 19, 2018

Making your web applications work well and look good at the same time is not easy. Check a list of "11 Javascript Data Visualization Libraries for 2018" by Jonathan Saring to make your life easier.

This week we also have a lot of great vanilla JavaScript articles. Two that stand out are "Learning JavaScript: Call By Sharing, Parameter Passing" by Chidume Nnamdi and Understanding JavaScript’s Prototypal Inheritance by Rajat S.

React developers will certainly enjoy learning about "How To Implement Better Drag and Drop in your React App" in one more article by Rajat S.


Three Steps For Increasing The Security of Your Web Apps

I recently shared the following QR code with my work's Slack group: Pro tip: never just scan a random QR code without checking it with a service like this first This QR code isn't malicious, it simply links to the site for my new podcast (https://dotnetcore.show/ ), and I'm happy to say that everyone at work passed.

Authored by: Jamie

5 Tips to Write Better Conditionals in JavaScript

When working with JavaScript, we deal a lot with conditionals, here are the 5 tips for you to write better / cleaner conditionals. Let's take a look at the example below: At first glance, the above example looks good. However, what if we get more red fruits, say cherry and cranberries?

Authored by: Jecelyn Yeen

'Parallelizing' JavaScript for fun and Profit.

Parallel programming in JavaScript is not as straightforward as it is in languages such as C/C++ and Java or even Python due to its event based paradigm. In this post I will focussing on parallel computation in JavaScript through Web Workers API.

Authored by: Codementor

Does JS really do that?!

Getting acquainted with some of the curve balls javascript is capable of throwing at you. After going through the amazing book series called You-Dont-Know-JS, I was baffled at how much weirdness javascript was capable of. Gradually though, I started seeing a method to the madness.

Authored by: codeburst.io

Limit concurrent asynchronous calls

Although Javascript is designed to be single threaded, you could still do things concurrently. For example, we can read multiple files concurrently. However, reading files could be quite computationally expensive; if there are more than 10k paths, you will probably hear the fans on your machine speed up as your machine struggles.

Authored by: Jason Yu


Master JavaScript: Call By Sharing, Parameter Passing

Code Area: This is the area the JS code to be executed is stored. Call Stack: This area keeps track of currently executing functions, perform computation and store local variables. The variables are stored in the stack in a LIFO method. The last one in is the first out.

Authored by: Chidume Nnamdi

Understanding JavaScript's Prototypal Inheritance

Inheritance is the process by which one object can be based on another. This lets the objects to share each other's properties. I have created the Hero prototype and used it to create a new object named superman. But we are not doing anything with this object.

Authored by: Rajat S ⌨️

10 JavaScript string methods you should know

In this post I will summarize 10 javascript string methods you should at least known according to me. If interested read here 10 javascript array methods you should know . String is anything inside single or double quotes. Here are 10 javascript string methods you should know. 1.

Authored by: Codementor

Intro to Linked Lists in JS

"A linked list is an ordered collection of data. The collection contains a number of different nodes. Each node contains some amount of data along with a reference to the next node. When we put a handful of these nodes together we refer to it as a linked list as it literally is a list of nodes linked together.

Authored by: Ryan Farney

Three dots ( ... ) in JavaScript

Hey! I'm Sagar. I love to write tutorials and articles to help developers better understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter @sagar_dev44.

Authored by: Sagar


Displaying Places on a HERE Map in an Angular Web Application

If you've been following along, I had previously written a tutorial that demonstrated including a visual map in your Angular web application using the HERE Maps API for JavaScript. In that tutorial we saw several methods towards using a map, leading up to creating a custom component for the job.

Authored by: HERE Developers at Disrupt 🌉

Angular Datepicker Example Tutorial

Angular Datepicker Example Tutorial is today's leading topic. The Datepicker allows us to enter a date either through the text input or by choosing the date from a calendar. It is made up of various components and directives that work together. Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktop.

Authored by: KrunalDLathiya


Implement Better Drag and Drop in your React App

With the react-beautiful-dnd package. Learn more. The phrase drag-and-drop is used to describe the action of selecting an object, dragging it to wherever you desire, and then letting go or dropping it at that place on your screen. We use drag-and-drop everyday on our device. We use it to select text in our documents.

Authored by: Rajat S ⌨️

Async Rendering in React with Suspense

Why Suspense? There's a good chance you've come across SPAs that make use of a loading icon as an indicator that data is being fetched. This is a common method used to ensure good UX for apps that are fetching data from external sources.

Authored by: YE

Control Your Frontend Data Before It Controls You: When To Implement Redux in Your React App

React is great at rendering out components and boosting performance, but it lacks any formal pattern around state and data retrieval. Redux can help address some of the issues that arise as your web application grows in size. So, you've started a new project and built some React components.

Authored by: Telerik

React Image Upload (with Kittens!)

At the coding bootcamp where I teach, "How do I upload images with React?" is a question that comes up repeatedly. As with any programming problem there are a million ways to achieve this outcome with various tradeoffs. Below is a way that I feel accounts for as many possible scenarios you might encounter while maintaining a streamlined codebase.

Authored by: codeburst.io

An imperative guide to setState in React

States in React, like props, are objects that are used to store data and affect how the component renders or behaves. Unlike props, states are managed completely within the component and can be changed over time. The change in state for React components can be a result of triggers from user actions, network activity, API requests or specific application behavior.

Authored by: Nosakhare Obaseki

Immutability in React and Redux: The Complete Guide

Immutability can be a confusing topic, and it pops up all over the place in React, Redux, and JavaScript in general. You might've run into bugs where your React components don't re-render, even though you know you've changed the props, and someone said, "You should be doing immutable state updates."

Authored by: Dave Ceddia


Can A Vue Template Have Multiple Root Nodes (Fragments)?

If you try to create a Vue template without a root node, such as this: You'll get a compilation and/or runtime error, as templates must have a single root element. Typically, you'll fix this problem by adding a "wrapper" div as a parent.

Authored by: Anthony Gore

Building a Desktop App with Vue: Electron

In my previous article I was building a desktop application with Vue using Vuido and native GUI components. Now it's time to try Electron!

Authored by: Natalia Tepluhina

Create a Custom Vue.js Plugin in < 1 Hour [Code Included]

We're very excited to sponsor **VueConf TO 2018** https://vuetoronto.com Come hang out and learn some Vue.js with world-class developers (Nov. 15-16). In a rush? Skip to tutorial or live demo. It's no secret that we <3 Vue.js. So much so that it's a key part of our own product's rewriting.

Authored by: Snipcart

How to Deploy Your Secure Vue.js App to AWS

This article was originally published on the Okta developer blog. Thank you for supporting the partners who make SitePoint possible. Writing a Vue app is intuitive, straightforward, and fast. With low barriers to entry, a component-based approach, and built-in features like hot reloading and webpack, Vue allows you to focus on developing your application rather than worrying about your dev environment and build processes.

Authored by: SitePoint


Why should your Node.js application not handle log routing?

It is not the responsibility of the application to route logs. 12 Factor says that logs should go to STDOUT. WAT? WHY? I just configured my whole application code to write logs to custom log files. What's wrong with that? Logging is one of those things that can sometimes be a black box for developers.

Authored by: Corey Cleary

Understanding the NodeJS cluster module (1/4)

NodeJS processes runs on a single process, which means it does not take advantage from multi-core systems by default. If you have an 8 core CPU and run a NodeJS program via $ node app.js it will run in a single process, wasting the rest of CPUs.

Authored by: Antonio Santiago

Express Error Handling Example Tutorial

One of the most crucial things in a building web applications are error handling. The system will depend on many services, databases, as well as consumers of those services, Express Error Handling Example Tutorial is today's leading topic. the unexpected becomes expected. Databases will fail, services become unavailable, server timeout.

Authored by: KrunalDLathiya

Bundle your Node app to a single executable for Windows, Linux and OsX

A question I get asked so many times by so many people is how to compile a Node app to a single executable. I am surprised because this is actually pretty simple.

Authored by: Jochem Stoel

Libraries and Tools

11 Javascript Data Visualization Libraries for 2018

Best dData visualization and charting in Javascript. Create charts and graphs in web or mobile: D3js, threejs, chartjs, Echarts, metrics-graphics, React-vis, Metabase, NVD3, Chartist, Highcharts & mor

Authored by: Bit

Component Libraries with Stencil.js

This is the second in a series of posts about creating a web component library using Stencil.js - Check out the first post Now that we've talked about the reasoning for choosing Stencil to build our web component library, let's jump right in. First things first, we need to get our base project structure set up.

Authored by: John Woodruff


JavaScript testing tutorial - part four. Mocking API calls and simulating React components interactions

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.4. JavaScript testing tutorial - part four.

Authored by: Marcin Wanago

Functional Programming

Functional programming basics part 2: Higher order function

In order to be called a Higher order function, one must either take an other function as a parameter or return a function. Take function as a parameter??? what? no way!! Let's start by writing a simple function that is not from the highest order: Now lets try to pass this function to an other function: Woah that worked!!

Authored by: ysael


Have you tried CSS Snap Scrolling in Chrome 69?

The author of Switching sides, not tabs , who earlier used to love Firefox, has now changed its default browser back to Chrome. Yes, it's me. And I'm no longer using Firefox...Well, this story is not about this topic as to why I changed back to Chrome, it's because of a few great features in the latest Chrome 69.

Authored by: Vaibhav Khulbe

New in Chrome 69: building doughnut charts with conical gradients

With the recent release of Chrome 69, we finally have support for the conical gradients. Now we can create both pie and doughnut charts in an extremely simple and semantic way.

Authored by: LogRocket

How browser rendering works - behind the scenes

This is not supposed to be a computer science networks class, but you may remember that data is sent over the internet as "packets" sized in bytes. The point I'm trying to make is that when you write some HTML, CSS and JS, and attempt to open the HTML file in your browser, the browser reads the raw bytes of HTML from your hard disk (or network).

Authored by: LogRocket

Solving JS equality game with Cypress test runner

Using Cypress end-to-end test runner to automate solving JavaScript equality game. Today a game has appeared that shows how tricky JavaScript == operator can be. You can check out the game yourself at https://slikts.github.io/js-equality-game/. You have to fill the field by clicking every cell where the row and column labels are equal when using == operator.

Authored by: Gleb Bahmutov