![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
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!
General
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
JavaScript
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
TypeScript
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
React
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
Node.js
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
Testing
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
