JSK Weekly - July 09, 2020

It's been a testing kind of week it seems! Jonathan Creamer shows us the awesome of Cypress in "Running Cypress tests in a monorepo", Gleb Bahmutov introduces cypress-vue-unit-test for a better Vue component testing experience in "Write Your First Vue Component Test" and Smashing Magazine discusses why it's important to to write automated tests for software projects in "How To Test Your React Apps With The React Testing Library".

Keeping with React, but this time learning to share, Nathan Sebhastian shows us "How to Share React Components Between NextJS Projects" while Eden Ella details how and why you should share React data-fetching components in "Sharing React Widgets Between Apps", both on Bits and Pieces!


Easiest Way to Create a Multicolumn ComboBox in Blazor

In this blog post, we will look at the creation of a multicolumn combo box component in Blazor. You will learn how to configure and bind the data in the Syncfusion Blazor ComboBox component to make it display multiple columns of data. What is a multicolumn combo box?

Authored by: Syncfusion

10 Top Visual Code Extensions in 2020

In the development process, you may often find yourself adding dependencies to your project. While modular development is a crucial part of software development today, it is a good idea to ensure that you are prudent with your imports. The Import Cost plugin for JavaScript and TypeScript allows you to be wary of any dependencies in real-time.

Authored by: Bit

I created the same app in Svelte.js and Malina.js. Here are the differences.

You can notice that code for Malina.js is more compact, it detects mutations, so you can use any approach in Malina.js. And the most interesting case, when we choose one item on:click={() => active=todo}, after this a todo-object presents in 2 places - in array todos and variable active, and rendered in 2 places.

Authored by: JavaScript in Plain English

How We Achieved Smooth Navigation Across Micro Frontends

As the first step of splitting the Frontend monolith, we copied the frontend code into multiple repositories (repository for the functional area). Then we removed the irrelevant code. We handled the shared components separately. Ultimately we settled with the BFF pattern for Microfrontends and their backends.

Authored by: Bit

10 Top GatsbyJS Plugins For 2020

gatsby-plugin-sharp is created to make use of the Sharp image processing library. Sharp is a Nodejs module that is used to convert large images into web-friendly formats like PNG or WebP. Gatsby-plugin-sharp is a low-level plugin that is helpful if you do custom image processing.

Authored by: Bit


4 Ground-breaking JavaScript features of the future

Ever since the release of ECMAScript 6 (ES6), JavaScript has been enjoying a very lively and vibrant development. Thanks to the now-yearly release cycle of the ECMA-262 standard and hard work of all browser vendors, JS rose to become one of the most popular programming languages in the world!

Authored by: areknawo

6 JavaScript Code Snippets For Solving Common Problems

Like many programming languages, JavaScript has its flaws and quirks. Built-in functions or syntax you think should be there just isn't. Output from even the most basic input can border on insanity (what's true + true ?). Even basic things like loops behave differently than one might expect.

Authored by: Tate Galbraith

How to Create an Air Blowing Effect with JavaScript

Have you ever wondered how you can create a realistic air blowing effect with JavaScript? Like the one shown on the evening TV shows, where multiple balls are being mixed up in a sphere-like object by leveraging air pressure? If you want to find out how it's done, read on.

Authored by: Šœihail Gaberov

How to Parse URL in JavaScript: hostname, pathname, query, hash

A Uniform Resource Locator, abbreviated URL, is a reference to a web resource (web page, image, file). The URL specifies the resource location and a mechanism to retrieve the resource (http, ftp, mailto). For example, here's the URL of this blog post: https://dmitripavlutin.com/parse-url-javascript Often you need to access specific components of an URL.

Authored by: Dmitri Pavlutin

JavaScript forEach - How to Loop Through an Array in JS

The JavaScript forEach method is one of the various ways to loop through arrays. Each method has different features and it is up to you or your task to decide which one to use. In this post, we are going to take a closer look at the JavaScript forEach method.

Authored by: Cem Eygi


Modern Web Extension Development with TypeScript

I don't think any in-depth explanation of what browser extensions are is necessary. Many of you reading this have most likely a boat-load of them already installed on your desktop (and maybe even mobile) browsers. However, with this browser extension development series, we're going to go far beyond just a simple client-side understanding of browser extensions.

Authored by: areknawo


Sharing React Widgets Between Apps

To make things clear- this blog post is not about the react-widgets library. What do I mean by "widgets", then? Widgets are reusable components that handle both logic/data-fetching and presentation. Before you accuse me of blasphemy for suggesting not to separate UI and logic, let me give you a few examples the may convince you there's a place for nuance in the all-mighty rule/pattern of 'smart-dumb', 'presentational-container', etc.

Authored by: Bit

13 React DatePickers and TimePickers for 2020

Reusing components helps to speed up development, ensure a consistent experience for users, and reduce bugs when building your apps. Thankfully, many useful components on GitHub are published as solo OSS libraries that we can choose and use in our own applications.

Authored by: Bit

How to useCallback in React

React's useCallback Hook can be used to optimize the rendering behavior of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's useCallback Hook. Keep in mind that most of the performance optimizations in React are premature.

Authored by: Robin Wieruch

Styled-JSX for React: How and Why

" Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects."

Authored by: Bit

How to share React components between NextJS Projects

Next.js is the most popular React framework for developing React server-side rendering apps. This tutorial will help you to develop reusable React components that can be shared across different projects and repositories by using Bit platform. Bit is a component collaboration platform that enables you to share components between different projects and repositories.

Authored by: Bit


Async vs Sync NodeJs: A Simple Benchmark

Async and sync are probably two of the most heard words among JavaScript developers, they refer to asynchronous and synchronous programming respectively. Asynchronous programming in JavaScript can be done using callbacks, Promise, and async and await. JavaScript handles asynchronous tasks with the help of event loop.

Authored by: Jino Antony

Libraries and Tools

WordPress Static Site: Benefits, Limits & Tools

In a rush? Skip to our list of Wordpress static site generators. You've heard the saying: "opposites attract." It certainly is true of the two concepts explored in this post. On one side, WordPress. On the other, static sites. The first represents the old guard of monolithic CMS; the second, the new frontend wave.

Authored by: Snipcart


Running Cypress tests in a monorepo

Cypress is a fantastic testing tool for running your applications in a browser like environment. It's reminiscent of Selenium, but runs quicker, and has a much nicer developer experience. It can be used for full on acceptance or integration testing, or even at a feature test level with mocking in

Authored by: Jonathan Creamer

Write Your First Vue Component Test

Introducing cypress-vue-unit-test for better Vue component testing experience inside Cypress test runner. Let's create a new Vue application and write a component test using Cypress + cypress-vue-unit-test combo. We will use Vue CLI v3 to scaffold our application and you can find the complete application in bahmutov/vue-component-test-example repository.

Authored by: Gleb Bahmutov

How To Test Your React Apps With The React Testing Library

Testing gives confidence in written code. In the context of this article, 'testing' means 'automated testing'. Without automated testing, it is significantly harder to ensure the quality of a web application of significant complexity. Fails caused by automated testing may lead to more bugs in production.

Authored by: Smashing Magazine