JSK Weekly - July 22, 2020

Some of our top stories this week are "Write Cleaner Code by Using JavaScript Destructuring" and "10 Productivity Tools for React Developers in 2020" on the Live Code Stream blog and "14 JavaScript Code Optimization Tips for Front-End Developers" by Mahdhi Rezvi and "Securely Upload Files Directly from Browser to Amazon S3" by Manoj Fernando on Bits and Pieces.

If you've had a tough week, have a quick look at Elijah Manor's first dev joke comic "How Do You Comfort a JavaScript Bug?".


Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

Defenition: POS - "Point of Sale". At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

Authored by: Soshace for Developers

First UI Kit for the latest Twitter's Bootstrap 5

Last month Twitter's Bootstrap was updated to 5.0.0 Alpha. For many front-end developers it was the most awaited moment in 2020. Mainly because of 2 bold changes in the framework: Removing jQuery and switching to pure Vanilla JS Dropping support for the Internet Explorer I invite you to read the original bootstrap release blog post or the summary of all changes.

Authored by: Bit

Understanding WebGL

As you can see above, we have created our HTML file with a body and a canvas. We have imported the glmatrix.js file as we need it later. Furthermore, you can see that we have included our Vertex Shader and Fragment Shader programs inside script tags in order to retrieve them from the JavaScript file.

Authored by: Bit

Checking for Available Permissions in Deno

The simplest of the three methods currently available under the Deno.permissions path is query . It can also be used to make sure that not only you've been granted a particular permission, but also, that you have access to a particular location (like with the whitelists).

Authored by: Bit

Why Using Tokens and Cookies together is Better for Web Apps

I have met many developers who considered Cookies as a legacy technology. The common misconception happens when we use single-page applications for the frontend and a RESTful API for the Backend. RESTful APIs and Cookies, they don't go along, right?

Authored by: Bit

Is monorepo for you? - 2020

A perspective considering frontend codebase & tooling. Working on a single feature often requires a developer to perform cross-team collaboration and cross-module work, traditionally these repos have their individual build pipelines and release processes. Faster work for each individual repo due to a restricted code.

Authored by: Bit

Securely Upload Files Directly from Browser to Amazon S3

Learn the different techniques any frontend developer should know when uploading files securely to Amazon S3 and build a complete example using React.

Authored by: Bit

Building a Nuxt PWA for Québec City Citizens

One of the best feelings working in tech? Using new tools to solve old problems. When my colleague Gabriel told me how he built a city-wide application with Nuxt.js, I knew I had to write this up. 311 is Québec City's official communication channel between over 530K citizens and city officials.

Authored by: Snipcart

The Access-Control-Allow-Origin Header Explained - With a CORS Example

Often times when calling an API, you may see an error in your console that looks like this: Access to fetch at 'http://somesite.com' from origin 'http://yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin In this post, we are going to learn why this error happens and how you can fix it.

Authored by: shruti kapoor

How To Build An Accessible Front-End Application With Chakra UI And Nuxt.js

In this article, we are going to be looking at how to use Chakra UI and NuxtJS in building accessible front-end applications. In order to follow along, you should be familiar with using the progressive front-end framework Vue.js with Nuxt. If not, see the Vue.js and NuxtJS docs to get started.

Authored by: Smashing Magazine

Frontend Architecture and Best Practices for consuming APIs | Xmartlabs Blog

As a developer, you'll probably have to consume services provided by third-party code. This is true in many aspects of the trade: using a...

Authored by: Xmartlabs


14 JavaScript Code Optimization Tips for Front-End Developers

JavaScript has become one of the most popular programming languages of all time. It is used by almost 96% of websites all over the world according to W3Tech. One key fact you should know about the web is that you have no control over the hardware specifications of the devices your user would access your website on.

Authored by: Bit

How Do You Comfort a JavaScript Bug?

How Do You Comfort a JavaScript Bug? Over the past several years I've been authoring a set of Front-End Web Developer Jokes. Recently I thought it might be fun to take some of the jokes and convert them into comics. So, this is my first attempt at a developer comic.

Authored by: Elijah Manor

Checking if an Array Contains a Value in JavaScript

JavaScript offers a bunch of useful array methods to check whether an array contains a particular value. While searching for primitive value like number or string is relatively easy, searching for objects is slightly more complicated. In this post, you will read about how to determine if an array contains a particular value, being a primitive or object.

Authored by: Dmitri Pavlutin

Write Cleaner Code by Using JavaScript Destructuring

Destructuring is one of my favorite tools in JavaScript, in simple terms, destructuring allows you to break down a complex structure (like an array or an object) into simpler parts, though there's a bit more than just that.

Authored by: livecodestream

A Simple Explanation of Event Delegation in JavaScript

Let's log a message to the console when an HTML button is clicked. To make it work, you need to select the button, then use addEventListener() method to attach an event listener: That's the way to go to listen for events on a single element, particularly a button.

Authored by: Dmitri Pavlutin

Natively Format JavaScript Dates and Times

Front-End Dev Tips, Tricks, and Tools

Authored by: Elijah Manor


TypeScript: The evolution of JavaScript

When you're involved in the development of a large project, programming languages like JavaScript don't seem to be the best... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.

Authored by: MA-NO WebDesign&Dev

A Mental Model to think in Typescript

One day I came across a tweet [https://twitter.com/larimaza/status/1275747670989176833] from Lari Mazza that says "Can I make a suggestion? Types are hard to understand when you've only worked with JS in your life and suddenly have to learn TypeScript" As a software engineer that learned Python, Ruby, Javascript, and Clojure first, when I tried C++, it was a horror movie.

Authored by: TK


Angular 10 Popup Notification with SweetAlert2 Example - positronX.io

This tutorial explains to you how to show an alert or popup notification in Angular 10 with SweetAlert2 npm package. We will learn how to use sweetalert2 in angular altogether, and learn how to display the alert boxes with user-centric information. We will follow all the process gradually and steadily to install sweetalert2 in angular.

Authored by: Digamber Singh

Ivy: The Game Changer in Angular 9

Even though Angular 9 has some extraordinary updates like improved ng update, support for TypeScript, and inline rendering support for YouTube and Google Maps, the default Ivy compiler has grabbed the attention of developers worldwide with its unbeatable features. In this blog, we'll dive into som

Authored by: Syncfusion

Copying Slack's Brilliant Virtual Scrollbar And Overflow Container In Angular 9.1.12

Ben Nadel attempts to reimplement Slack's brilliant virtual scrollbar and overflow container In Angular 9.1.12. What makes this approach so exciting is that it uses the browser's native scrolling behavior for the most critical interactions; and, only implements a small subset of scrolling interactivity.

Authored by: Ben Nadel


Design Systems: React Buttons with the Base + Variant Pattern

To learn more about it, read here: In the base + variant pattern the core parts of a component that are not subject to change are isolated from the parts that are open to customization. Things like core behavior are implemented inside the Base component. The Base is private i.e.

Authored by: Bit

React Hook to Run Code After Render

Need to run some code after a React component renders? Maybe you're familiar with componentDidUpdate and you're looking for the equivalent hook... Well look no further... the answer is the useEffect hook. The useEffect hook is used like this: This will run the effect after every render - the same as componentDidUpdate in class components.

Authored by: Dave Ceddia

8 ways to optimize React native FlatList performance

FlatList is the component in React native that is used to render a list of items. It works great for basic lists but FlatList will have some performance issues if not optimized properly causing laggy scroll and slow performance. Let's see how to optimize react native flatlist performance.

Authored by: Coding is Love

Fetch the current weather with `weather-js` and display in `react-blessed`

Fetch the current weather with `weather-js` and display in `react-blessed` This is the 5th post in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib. For more information about the series and to take a sneak peak at what we're building, go to the 1st post in the series for more context.

Authored by: Elijah Manor


Vue 3 UX Wins with Async Components & Suspense

Lazy loading components is a easy way to improve the user experience of your app especially if your code bundle is big or if users are on slow connections. Vue 3 has introduced several new features to help you achieve this easily and with great UX through the improvements to the async component API and the new Suspense component.

Authored by: Vue.js Developers

Where the Prolog version of Vue died (JS Party #135)

An amalgam of interest on this week's episode starting with a peek at what's finally coming in Vue 3. We talk about the process of change in the Vue ecosystem and what interesting features are coming either very soon or not for a while depending on how you view time right now.

Authored by: JS Party

Code Coverage for Vue Applications

Let's take a Vue application scaffolded with Vue CLI like this bahmutov/vue-calculator app. In this blog post, I will show how to instrument the application's source code to collect the code coverage information. We then will use the code coverage reports to guide the end-to-end test writing.

Authored by: Vue.js Developers


Protecting Your API from Brute Forcing By Rate Limiting in NodeJS

Brute forcing is one of the oldest tricks in the black hat hacker's handbook. The most predominant way of performing a brute force attack is configuring a set of predetermined values, making requests to a server (in this case, your API) and analysing the response.

Authored by: Soshace for Developers

Libraries and Tools

Packaging a UI Library for Distribution

The JavaScript world has a unique feature: it has multiple runtime environments all running the same code. On one side we have the browsers, provided by different manufacturers and in different...

Authored by: Bit

10 Productivity Tools for React Developers in 2020

Today we are going to discuss some great and promising tools to improve React developers` productivity and enhance the overall development workflow. Usually when I need to start working on a new project (at least for personal projects, at work is a bit different) I use my own template which comes with the tools that I love, some of which made it to this list, but also with tools that I'm just ok with, like Material UI.

Authored by: livecodestream


The React Testing Masterclass - Free course 🔥

Learn the best practices and strategies to effectively test your react components and applications.

Authored by: Kati Frantz

How to test react-hook-form with react-native-testing-library

I use react-hook-form for both web and react native without a single problem. Great library. When using react-hook-form v6. I encountered an issue where the validation works perfectly in code, but in test, the errors object is always empty even for wrong value. Let's see how to solve it.

Authored by: Albert Gao

Functional Programming

Thoughts on Railway Oriented Programming - JavaScript

As I've said before, functions are my favorite building blocks. We can treat them as blackbox abstractions. We don't have to care about what's inside, only about what it receives as argument and what returns as output. When a function is pure it will always return the same output if we always provide the same input.

Authored by: gitconnected