JSK Weekly - November 28, 2018

JavaScript is a great and fun programming language. It's very important to find a way to learn new things about language itself as well as general programming concepts. This week we are very lucky since we have many great articles that will help us with this task.

We highly recommend a great article "Understanding Memoization in JavaScript to Improve Performance" by Chidume Nnamdi. You will learn what memoization is and how you can use it to improve application performance.

A bit more JavaScript specific topic is covered in the excellent article  "Understanding Javascript Mutation and Pure Functions" by Chidume Nnamdi. You shouldn't miss this one.

One more article that's a must read this week is "Transducers: Efficient Data Processing Pipelines in JavaScript" by Eric Elliott. As a part of the series on learning functional JavaScript programming, you have great opportunity to learn some great programming techniques.

Developers interested in redux will surely enjoy "An Unforgettable Way to Learn Redux — The Visual Guide" by Ohans Emmanuel.

Finally, Vue.js developers would want to check out "Build a Vue App with Firebase Authentication and Database" by Rajat S.


General

Understanding Memoization in JavaScript to Improve Performance

How to improve your application performance through better Javascript memoization Cranking up the performance rate of our apps is what we crave. Memoization is one of the techniques in JavaScript to speed up the lookup of expensive operations by caching the results and re-using the cache in the next operation.

Authored by: Chidume Nnamdi

Tech Stack 2019: Frontend Global State

Adding frontend global state to the core of a technology stack for 2019. This is one of a number of articles that add incremental functionality to the frontend and backend applications developed in the article Tech Stack 2019: Core . The final result of this article is available from the frontend-global-state branch of the tech-stack-2019-frontend (frontend-global-state ) repository.

Authored by: codeburst.io

How to remove duplicate elements from array javascript

In the above code, on each iteration, we check if an element is not present in the finalarray then we are pushing that element to the finalarray. On each iteration, we are using the Array.indexOf...

Authored by: Sai gowtham

Design Patterns in Web Development - #2 Memento

As some of you may remember, in the pilot episode I said I was about to explain with three examples: a UI kit, a CQRS application and an undo/redo implementation in Electron. In the Command episode though I didn't provide the latter and the reason is extremely simple: I am a jerk.

Authored by: Manuel Spagnolo

Using recursion to traverse data structures. Execution context and the call stack

Hello! Today we tackle a very interesting topic, which is recursion. The article describes its main principles and dives deeper to uncover how does it work under the hood of the language, covering execution context and the call stack. Let's go! JavaScript recursion Recursion An act of a function calling itself.

Authored by: Marcin Wanago


JavaScript

Understanding Javascript Mutation and Pure Functions

Boost your app performance by better understanding Mutation and Pure Functions in JS Immutability, Pure Functions, Side Effects, State Mutation are words we come across almost every day, but little do we know how they work or what they are or what goodies they bring to software development.

Authored by: Chidume Nnamdi

Tree Data structure in Javascript

In this tutorial, we are going to learn Binary search trees and its implementation in javascript. A tree is nonlinear data structure compared to stacks and queues, linked lists and arrays which are the linear data structure. Root: The top node in a tree.

Authored by: Sai gowtham

Map, Filter, Reduce vs For Loops (syntax)

The intention of this post is not to say one paradigm is better than the other. It is just to show common imperative patterns you run into and their functional equivalents. Sometimes things are easier to learn if you can relate it to something you are already familiar with and be given a map on how to transition back and forth.

Authored by: joelnet


TypeScript

Essential TypeScript Types | Get Started with TypeScript

TypeScript provides the ability to add typed variables to your JavaScript code. This article will cover the core types that are essential for any TypeScript developer and provide a starting point to begin using the language. To begin using TypeScript, you must have the compiler installed which can be done through npm.

Authored by: Trey Huffine


Angular

Angular Validators With Conditional Validation In Reactive Forms

Form is an essential part of building a robust and scalable Angular application. Validating your application form before reaching out to the server enhances security and performance.

Authored by: Codementor

Restoring And Resetting The Scroll Position Using The NavigationStart Event In Angular 7.0.4

Ben Nadel revisits his scroll storage and restoration polyfill in Angular 7.0.4 now that Angular 6 has added the ability for the Router to differentiate between imperative navigation and popstate navigation using the NavigationStart event.

Authored by: Ben Nadel

How to Protect Angular Code Against Theft and Reverse-Engineering

Angular is one of the most popular JavaScript frameworks. Since the Angular 2 release in 2016, Google has released yet 5 new major versions in just 2 years. This TypeScript-based framework enables developing front-end applications with ease for web and mobile.

Authored by: Jscrambler


React

An Unforgettable way to Learn Redux - This Visual Guide

The following is a visual guide to learning Redux. One focused on the core Redux principles explained with memorable associations and custom illustrations. Ready? Here we go! Consider an event you're likely conversant with - going to the bank to withdraw cash. Even if you don't do this often, you're likely aware of what the process looks like.

Authored by: JavaScript Kicks

What's new in Create React App 2

Create React App 2 adds more options to ease the creation and configuration of React applications. Personally, the three new features I find most helpful are TypeScript, Saas and Babel macros.

Authored by: LogRocket

GraphQL API with AWS and Use with React

GraphQL has become a go-to API implementation for developers looking to take advantage of features liketype safety, network efficiency, real-time data with subscriptions & more.

Authored by: Scotch Development

Higher Order Components in 3 minutes

A pattern for when we find ourselves repeating logic across components. They are not part of the React API. They are functions that take components and return new components! When you find that you are repeating patterns/logic across components. Examples; hooking into/subscribing to a data source adding interactivity to UI (also achieved with wrapper/render props) modifying/adjusting input data (sorting, filtering etc.)

Authored by: codeburst.io

React Firebase Authorization with Roles

A tutorial on how to use authorization with roles and permissions when using Firebase in React. You will learn how to protect your routes and pages with authorization rules ...

Authored by: Robin Wieruch


Vue

Build a Vue App with Firebase Authentication and Database

Comics Let's start with the component that users will get to see once they are successfully authenticated. I have named this file as Comics.vue and placed it inside the components folder. The .vue file is divided into three parts: the template, script, and style.

Authored by: Rajat S ⌨️

Vue for jQuery Developers

In this post you'll learn the fundamental components of Vue.js for developers already familiar with jQuery. Get started faster with this introduction to Vue. Vue.js, a framework for building web applications, has a reactivity system that allows you to model and manage your application state such that when data changes, it's reflected in the UI, without you having to query the DOM.

Authored by: Peter Mbanugo

Swipeable card stack using Vue.js and interact.js

I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: "Wordguru") was to create a card game that anyone can play with their friends. You can see the outcome here. One element of the development process was to create an interactive card stack.

Authored by: CSS-Tricks

MEVN Stack Tutorial With Example From Scratch

MEVN Stack Tutorial With Example From Scratch is the topic, we will discuss today. We will generate FullStack Single Page Application(SPA) using MongoDB, Express, Vue, and Node.js CRUD Example Tutorial with step by step. For this example, we will not use Vuex for state management because this app will be simple and not complicated.

Authored by: KrunalDLathiya


Node.js

Building a Stable Node JS Project Architecture: Best Practices

Often product development process which involves JavaScript, is accompanied by the use of Node JS, a JavaScript runtime environment. The birth of this technology has certainly turned the use of JS upside-down. Today, JavaScript is in the category of the most preferred languages to build apps thanks to Node JS.

Authored by: JavaScript Kicks

Simple, but not too simple: how using Zeit's `micro` improves your Node applications

Leave the Express comfort zone to expand how you think about Node application architecture. tl;dr using a function composition model for building HTTP servers

Authored by: Hugo Di Francesco


Libraries and Tools

The Power of Redux and React.lazy

This article proposes a solution for dynamically changing Redux containers on the fly to reuse, not only of the UI components, but the data-layer too by switching the mapped action-creators on runtime

Authored by: Rubens Pinheiro

10 Javascript Compression Tools and Libraries for 2019

Top Javascript code compression and minifying tools and libraries for 2019. Try Closure compiler, Packer, Uglify, YUI Compressor, Terser, Minify, JS Minifier, Node-Minify, Ajaxmin, Producify, Snappy.

Authored by: Viclotana™

jQuery setTimeout() Function Examples

James Hibbard explains how the jQuery and JavaScript function setTimeout() works, and gives examples and links to further reading.

Authored by: James Hibbard


Testing

Real world testing recipes: Node service that calls an external API

This is the next post in my series on knowing what to test in your Node applications by applying recipes to real-world scenarios. In the first one, we went over scenarios you should cover in your tests when calling a database from a Node service.

Authored by: Corey Cleary


Functional Programming

Transducers: Efficient Data Processing Pipelines in JavaScript

Note: This is part of the "Composing Software" series on learning functional programming and compositional software techniques in JavaScript ES6+ from the ground up. Stay tuned. There's a lot more of this to come!

Authored by: Eric Elliott

Functional Programming Principles in Javascript

After a long time learning and working with object-oriented programming, I took a step back to think about system complexity. "Complexity is anything that makes software hard to understand or to modify." - John Outerhout Doing some research, I found functional programming concepts like immutability and pure function.

Authored by: TK


Other

Quick Tip: Get URL Parameters with JavaScript

So you want to get a parameter from a URL? URL parameters (also called query string parameters or URL variables) can have lots of useful data including product info, user preferences, link referrals, and more. Let's get started!

Authored by: SitePoint

NodeJS vs Django - Is JavaScript better than Python?

Node JS ( 55 432 ★) and Django ( 37 614 ★) are two powerful tools for building web applications. Node JS has a "JavaScript everywhere" motive to ensure JavaScript is used on the server side and client side of web applications and Django has a "framework for perfectionists with deadlines" motive to help developers build applications in quick time.

Authored by: Shaleynikov

Build a Login/Auth App with MERN Stack- Part 1

i. Initializing our project Set the current directory to wherever you want your project to live and initialize the project using npm. ➜ ~ mkdir mern-auth➜ ~ cd mern-auth➜ mern-auth npm init After running the command, a utility will walk you through creating a package.json file.

Authored by: Bit

5️ Techniques to Lazy-Load Website Content for Better 📈 SEO & User Experience

Developers love large JavaScript frameworks and libraries to build websites, but are they good for SEO and Customer engagement? Google says no. Learn why and what you need to know about JavaScript, SPAs & SEO.

Authored by: Chris Love

How to make any website faster

Web performance is such a big deal. In fact, the performance of your site can be the difference between remaining in business or losing money. So, how do you build web applications that remain consistently fast? There's an answer for that! In this article, I'll offer tips you can use right away to make any website faster.

Authored by: Ohans Emmanuel





0 comments