JSK Weekly - September 09, 2020

Happy International Sudoku Day to those who love to unwind with this 9x9 puzzle. In true Sudoku style, let's find, search and filter with Joel Thoms in "8 Methods to Find, Search, and Filter JavaScript Arrays" and then level up with Viduni Wickramarachchi in "5 Key Concepts to Level Up Your JavaScript Skills", both on Bits and Pieces.

Keeping with the 5's, Nikhil Vijayan takes us through the "5 things that happen every time you require a file in Node.js", Dmitri Pavlutin helps in "Understanding Arrow Functions in 5 Easy Steps" and Arek Nawo shares the "Top 5 JavaScript secrets" with us.


General

Promise.all() and map() with Async/Await by Example

In this quick example, we'll learn how to use Promise.all() and map() with Async/Await in JavaScript to impelemt certain scenarios that can't be implemented with for loops with async/await. More often than not when making asynchronous operations, in real-world apps.

Authored by: Ahmed Bouchefra

12 Tips to Make Your Charts More Aesthetically Pleasing

This is the last blog in our series on design tips.

Authored by: Syncfusion

Edit and Replay your network requests, direct from the browser

You know how it goes; you build your shiny new feature using Blazor, React, Vue, . You test locally; everything works as it should. Then you push to production and… … everything is broken! Any number of things can break your app in prod but one of the biggies is data coming back (or being posted) via your network calls which doesn't match what you expected.

Authored by: Jon Hilton

Introduction to Moon.js

Moon can be used directly from the browser or through NPM. To use Moon via NPM, we will install its CLI tool: moon-cli. $ npm i moon-cli -g moon-cli is installed globally in our system and can be used from any directory.

Authored by: Bit

Getting Started with SvelteJs: Building a Shopping Cart with Code Snippets

The component architecture of Svelte is robust and thereby allows us to import and reuse components quite quickly and efficiently. NavBar.svelte App.svelte We can first define the template and its nuances in the Navbar.svelte child component file. Then import it by referencing it in the script section inside App.svelte and reference it in the template section as .

Authored by: Bit

API with NestJS #12. Introduction to Elasticsearch

We can find some searching functionalities in a lot of web applications. While we might be fine when iterating through a small data set, the performance for more extensive databases can become an issue. Relational databases might prove to be relatively slow when searching through a lot of data.

Authored by: Marcin Wanago

Build a shopping cart in Node.js and React

You might need to install the react CLI first on your local machine if you haven't before. The code . command opens the project in visual studio code. We can now discard the things we don't need in App.js, and also get rid of the files (App.css and index.css).

Authored by: Sunil Joshi

Bootstrap 5 Close Button by Example

Bootstrap 5 comes with a new component that can be used to add a close button for dismissing other dismissable components such as popovers, modals and alerts. You need to include the bootstrap.js file for this component to work. Note: In our previous Bootstrap 5 tutorial, we've set up an environment for Bootstrap 5 development using Gulp 4 and Sass.

Authored by: Ahmed Bouchefra


JavaScript

JavaScript Date Methods as Simple as Possible

JavaScript is not what it used to be when it first came out. It is so much better. So it makes sense that there is so much to learn. JavaScript is a crucial part of front end development. And if you...

Authored by: Frontend Weekly

Top 5 JavaScript secrets

JavaScript is a very... a very special language. Even when you think you know all its secrets, it can still surprise you. Like most things in this World, not all of JS' secrets are really useful. In fact most of them aren't, as everything not well-known by others only leads to confusion.

Authored by: areknawo

8 Methods to Search JavaScript Arrays

JavaScript has a handful of methods to help search and filter Arrays. The methods vary depending upon if you would like to search using an item or a predicate as well as whether you need to return the item(s), index, or a Boolean.

Authored by: Bit

Comparing Data Structures in JavaScript (Arrays vs Objects)

So you have learned the basics of JavaScript and want to move on to learning Data Structures. The motivation for learning/understanding Data Structures can vary since few of us, want to learn to improve our skills, few of us want to learn to get a developer job, and few of us want to learn because well, it seems exciting.

Authored by: Soshace for Developers

How to find a similar colour in your colour guidelines with JavaScript?

Have you ever struggled with finding a correct color definition in your project based on a color taken from designs? I've explained how to do it automatically and introduced a library that will do it for you in an almost automated way. ...

Authored by: Piotr Nalepa

5 Key Concepts to Level Up Your JavaScript Skills

In simple terms, the spread operator is used on an iterable (e.g.: arrays, strings) and it helps to expand an iterable into individual elements. The syntax of the spread operator is three dots ( ... ). For example, let's consider a function which expects three arguments and we have an array of three elements.

Authored by: Bit

JavaScript Fake API

In this tutorial we will implement a JavaScript fake API. Often this helps whenever there is no backend yet and you need to implement your frontend against some kind of realistic data. Fake it till you make it! Let's get started.

Authored by: Robin Wieruch

JavaScript Finally Has Support for Native Private Fields and Methods

There are some criticisms put forth by Warren Parad against the above proposal. Let's have a look at some of these criticisms. Jamie mentions that this behaviour is intentional. The reason is that they want to keep the variables as "hard private".

Authored by: Bit


TypeScript

TypeScript 4.0: What I'm most excited about

The tooltip will show all three overloads, and thanks to the labels, they will make a lot more sense than something that says param_0: string, param_1: number . A few considerations about labeled tuples: If you use labels for one item in the tuple, you have to use them for all elements.

Authored by: Bit

Native TypeScript Support In The Web Browser - I Like Kill Nerds

I've had this thought one and off over the last few years since I started using TypeScript back in 2015 actually. What if Web browsers natively supported TypeScript? If Web browsers could natively support TypeScript without needing a build step first, would it be possible and secondly, would it be performant?

Authored by: Dwayne Charrington

Kea 2.2: The TypeScript Release | Kea 2.2

Kea 2.2 adds support for TypeScript via `kea-typegen` and fixes a few bugs.

Authored by: Marius Andra


React

The Missing Introduction to React

React is the world's most popular JavaScript framework, but it's not cool because it's popular. It's popular because it's cool. Most React introductions jump right into showing you examples of how to use React, and skip the "why". That's cool.

Authored by: Eric Elliott

React State Management Today

The rapid rise of ReactJS was a result of its simplicity combined with its performance benefits. The rendering efficiencies from the virtual DOM, reusable components, and intuitive learning process brought many developers to choose React.

Authored by: JavaScript Kicks


Aurelia

I Upgraded My Aurelia 2 Projects To Yarn v2 and It Worked - I Like Kill Nerds

When I last tried Yarn v2, it was a nightmare. Besides the fact it was a completely new major version that fundamentally changed how Yarn worked (from its architecture to how dependencies were handled). After seeing news about the latest release for Yarn v2, I got to thinking and the idea I would migrate one [...]

Authored by: Dwayne Charrington


Vue

Differences Between Vue 2 And Vue 3

The official version of Vue 3 will release in Q3 2020. It is currently in the release candidate stage that means that the APIs, core, structures are stable and able to become a production release unless significant bugs emerge. Therefore, it's an appropriate time to figure out which programming differences between Vue 3 and Vue 2 and make the necessary adaptation.

Authored by: JavaScript in Plain English


Node.js

5 things that happen every time you require a file in Node.js

Every time you require a file in node, these are the 5 things that take place: Node will attempt to map the string given to require() into a path on the file system. This path could be local to node, under nodule_modules folder, or node modules under a parent directory or any other path.

Authored by: Nikhil Vijayan

How does 'Require' and 'Module' work in Node.js?

Resolving: get the absolute path of the module. Loading: load the module Wrapping: give a separate scope to your variables. Evaluating: is what the VM(usually V8)eventually does with the code Caching: cache the module in case we use it again. To find out how requiring a module works, we can use or we type module in REPL mode.

Authored by: JavaScript in Plain English

Node.js Lesson 2: Modules and Exports

This lesson will dive deeper with the module, understand what properties it carries, and then talk about export in detail. Let's start.

Authored by: Soshace for Developers


Libraries and Tools

How To Careate a React Ccomponent Library - Using a Modal Example

React component libraries exports various reusable components for our react projects. In this article, we'll learn how to create our own library using a Modal example.

Authored by: Soshace for Developers

How to Keep NPM Library Versions Up to Date

Automating Minor and Patch versions also come with several challenges. The most devastating effect of this is that it could break the build. You might wonder how come that's possible since we only are allowing the update of either Major or Minor versions that are supposed to be backward compatible.

Authored by: Bit

Solid - The best JavaScript UI library?

When it seems like JS UI library landscape couldn't get much crowded, something truly innovative comes out - meet Solid! #SolidJS #React #JavaScript #TypeScript #WebDevelopment #JS #TS #WebDev #UI #Framework

Authored by: areknawo

Building A Component Library With React And Emotion

A component library helps to keep a design consistent across multiple projects. It ensures consistency because any changes made will propagate across the projects that make use of it. In this tutorial, we'll learn how to build a component library, using Emotion in React to resolve inconsistencies.

Authored by: Smashing Magazine

Learn How to Build CLI Automation Tools with NodeJS

Learn by building a weight tracking CLI tool with Oclif in NodeJS.

Authored by: livecodestream

Here Are 6 Useful React Native Libraries That You Should Know

Nowadays, React Native is the most popular open-source mobile application framework. React Native is developing very fast, we have to develop applications also quickly. Because of this, the best components must be used. After working on and reviewing React Native libraries I want to share with you my experience that will help you save time and build your applications faster.

Authored by: Gapur Kassym


Testing

Things to Consider when Frontend Unit Testing

Unit Testing is one of the essential tools every developer should use. However, I have seen many projects making it difficult to carry out this as a practice. There are many reasons for this. For example, some might say they need to focus on feature development, and writing Unit Tests is quite an additional effort.

Authored by: Bit

React Testing Library: The Modern Way to Test React Components

Unit testing, and in our case, testing components, is a key element of any scalable and maintainable project. That truism is even more obvious now in the age of independent and shareable components.

Authored by: Bit


Functional Programming

Proxying Amazon AWS S3 Pre-Signed-URL Uploads Using Netlify Functions

A couple of months ago, I looked at proxying Amazon S3 pre-signed URL uploads using Lucee CFML 5.3.6.61. This was a topic of interest because InVision has enterprise customers that block all direct access to Amazon AWS (for security purposes); and, the only way we can upload files to S3 is by "hiding" the AWS URLs behind a proxy.

Authored by: Ben Nadel

Understanding Arrow Functions in 5 Easy Steps

The usual way to define JavaScript functions is using the function declaration or function expression: But functions can be further improved. Making the syntax shorter (useful for writing short callbacks) and ease the resolving of this created a new type of functions named arrow functions.

Authored by: Dmitri Pavlutin





0 comments