JSK Weekly - October 2, 2019

We make choices everyday based on our preferences. What we wear and what we eat, the route we take to work and even who we speak to or avoid. Then there's the obvious choice of what framework or frameworks we develop on. Every now and then we like to try something new or like Sunil Sandhu says, get curious to know what the grass is like on the other side of the fence. Well he did just that by creating a side-by-side code comparison between Vue and React and sharing the differences with us in "I created the exact same app in React and Vue."

By now you've probably heard of Svelte, one of the newer modern component-based frameworks around. Saroj Subedi tells us why SvelteJS is not just another JS library or framework but a modern Javascript compiler in "A Basic Introduction to Svelte by Building a TodoApp App" on gitconnected and Obinna Ekwuno looks at how Svelte builds on the basic knowledge of HTML, CSS, and JavaScript, to give a unique and understandable approach to building for the web in "How to build a simple Svelte JS app" on LogRocket's blog.


Filtering Data Client-Side: Comparing CSS, jQuery, and React

Say you have a list of 100 names: Randy Hilpert Peggie Jacobi Ethelyn Nolan Sr. ...or file names, or phone numbers, or whatever. And you want to filter them client-side, meaning you aren't making a server-side request to search through data and return results.

Authored by: Chris Coyier

How to build a simple Svelte JS app Blog

In the world of JavaScript, a new framework comes out every day and the idea behind such advancements are almost always the same but with a few very significant improvements. Modern component-based frameworks include ReactJS, VueJS, emberJS, Angular, and many more. In this article, we will be looking at one of these new frameworks, known as SvelteJS.

Authored by: LogRocket

I created the exact same app in React and Vue. Here are the differences.

React vs Vue. Finally, a side-by-side code comparison between Vue and React! 🎉 [Updated and rewritten for 2019: Now with React Hooks] Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence - the grass in this scenario being React.

Authored by: Sunil Sandhu

Creating a full-stack MERN application using JWT authentication: Part 3 Blog

This is a continuation of part two in our series on creating a full-stack MERN app using JWT authentication. If you haven't read th e second part, please do so for extra context so you can better understand this post. You can also read the first part here.

Authored by: LogRocket

A Basic Introduction to Svelte by Building a TodoApp App

SvelteJS is not just another JS library or framework - it is a modern Javascript compiler. Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code that is then compiled to highly efficient code that runs in the browser.

Authored by: gitconnected


Freeze and Seal in JavaScript

Freeze and Seal in JavaScript - DiscoverSDK Blog

Authored by: DiscoverSDK

Examples of closures in JavaScript

The word closures make it sound complicated. You almost certainly understand closures already - let's take a look at some examples. // The `inner` function is said to have closure over the variable `a` In the above example, the inner function has access to the variable a, and hence inner is said to have closure over the variable a.

Authored by: Nikhil Vijayan

Algorithms 101: House Robber in JavaScript

Noob v. LeetCode, episode 7, array manipulation. There's a robber on the loose! He's done his homework, so he knows the street worth of the valuables for each house on the block. Here's the description on LeetCode. And here's the link. This definitely in the easy category, but this Noob did not find it easy.

Authored by: Joan Indiana Lyness

Methods for defining functions in JavaScript Blog

Generally, a function is a sequence of instructions or a "subprogram" that can be invoked by the code that is external (or internal) to that function. In essence, functions "encapsulate" a particular task. Functions are one of the fundamental building blocks in JavaScript, and really understanding functions can help tackle some of JavaScript's oddities.

Authored by: LogRocket

Understanding Null and Undefined in JavaScript

Before diving deeper, let's first cover the basics: undefined is returned if a variable was only declared but not assigned a value. For example: This will log undefined: undefined variables are variables that are with no values.

Authored by: Bit

Quick-Sort Algorithm in JavaScript

If you're interviewing for Software Engineering position, one of the more intimidating questions to deal with is explaining how the Quicksort algorithm works. The simplest algorithmic steps for Quicksort is: Pick a pivot element that divides the list into two sublists. We can select a random element as the pivot.

Authored by: rohan paul

Algorithms 101: best time to buy and sell stock in JavaScript

Algorithms 101: best time to buy and sell stock in JavaScript

Authored by: Joan Indiana Lyness

Algorithms in JavaScript: Linked Lists

Remove the n-th node - LeetCode Challenge A super popular Algorithmic problem of removing the n-th node from a linked-list faced in a Leetcode challenge . Here's the Original Challenge - Given a linked list, remove the nth node from the end of list and return its head.

Authored by: rohan paul

New ES2019 JavaScript features every developer should be excited about Blog

JavaScript has come a long way since its early days, with many new additions and features designed specifically to make the language more user-friendly and less verbose. Below are some recent additions to JavaScript that I find fascinating. Some of these features are already available in Node, Chrome, Firefox, and Safari, while others are still in the proposal stage.

Authored by: LogRocket


The future of standalone components in the post-Ivy release days

Angular Ivy is almost here, and this a great opportunity for us to start exploring what's new in Angular, learn about the new APIs and start thinking about the concept behind standalone components. This post will not explain what Angular Ivy is.

Authored by: Eliran Eliassy

Game Development: Tetris in Angular

The board in Tetris consists of cells, which are either occupied or not. My first thought was to represent a cell with boolean values. But, we can do better by using numbers. We can represent an empty cell with 0, and the colors with numbers 1-7.

Authored by: Michael Karén

Demystifying RxJS for Angular Developers

RxJS is undoubtedly a big shift compared to how we used to write code in Angular.js. At first, it is scary for new people to digest and developers mostly hate things they don't know. On top of that, at the time of writing, RxJS provides 125 operators - that's quite a lot!

Authored by: Bit


Create React Modal Popup with Material UI

Build a simple and animated modal popup in React using Material UI. Modals are a widely used component in React-based web and mobile applications.

Authored by: Digamber Singh

How to Solve Render Props Callback Hell

A good design of React components is the key to a maintainable and easy to change codebase. In this sense, React offers a lot of design techniques like composition, hooks, higher-order components, render props, and more. There are no good or bad techniques. Rather there are only inappropriate usages.

Authored by: Dmitri Pavlutin

How to Create and Test React Custom Hooks

A quick React Custom Hooks tutorial - with examples! React introduced hooks in the v16.8 release and they're just plain fantastic! They've enabled developers to extract business logic out from components that weren't otherwise possible with class-based components.

Authored by: Bit

How to build a progress bar with React Native Blog

A progress bar (sometimes referred to as a progress indicator) is a visual indicator or representation of the progress of a particular task. This can be an operation such as download, file transfer/upload, installation, program execution or even completed steps in profile setup.

Authored by: LogRocket


5 Vue DevTools hacks you should be using Blog

Developers have an impressive list to choose from when it comes to selecting a JavaScript framework for developing web applications. Each of these frameworks has unique strengths and weaknesses. For Vue, one of its strengths lies in the robustness of its DevTools.

Authored by: LogRocket


Handling NodeJS CPU Intensive Tasks

NodeJS is frequently referred to as single-threaded. This is true - but there's a catch. Node has single " main" thread to handle all synchronous code execution from your scripts, and in the case of a Node API, all client requests.

Authored by: gitconnected

How to use event-driven programming in Node.js Blog

The most used approach for building software today is the request / response mechanism with layered architecture (n-tier) beneath, where the calls propagate vertically through layers. Patterns like MVC, have become very popular and, in a way, standard when people learn and write software.

Authored by: LogRocket

Build a Command-Line Progress Bar in Node.JS

We are done setting up our project. Let's talk about the progress bar and how we are going to implement it. The terminal or cmd or bash is divided into cells where texts, numbers or symbols are displayed. The cells ar place into a 2-D matrix.

Authored by: Bit

How I Learned to Stop Worrying and Love Git Hooks

The merits of Git as a version control system are difficult to contest, but while Git will do a superb job in keeping track of the commits you and your teammates have made to a repository, it will not, in itself, guarantee the quality of those commits.

Authored by: CSS-Tricks


Performance Testing React With Anonymous Functions

Over the past couple of years, anonymous functions have really taken off the React community. There have been a lot of claims of "this might affect performance." Up until now I haven't seen any real numbers, so I decided to get them on my own.

Authored by: Matthew Gerstman (Slytherin)

3 Mistakes You're Probably Making When Unit Testing

Unit testing is one of those things that developers either love or hate, there is no middle ground with it. And it's also one of those tasks that in many teams, gets delegated to the "new guy", the Jr. developer or essentially anyone who's not working on anything relevant enough.

Authored by: Bit