![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Some weeks just test us more than others. This week though, React was thoroughly put through its paces! Gleb Bahmutov uses Cypress to write effective React tests in "Effective React Tests" by closely following Shadid Haque's "How to write effective tests for React apps with react testing library", while Kelvin goes all out in "Supercharge Testing React Applications With Wallaby.js" and Aditya Agarwal gets a little more complex in "Testing a Redux Hooked App" on Bits and Pieces.
If you're after something a little more fun and happened to have missed it, the ninth annual js13kGames competition has wrapped up with over 220 games submitted! Check out "Top 10 games from the JS13K 2020 competition" for more.
General
CSV Data Sources in Blazor Pivot Table: A Groundbreaking Feature
In our 2020 Volume 2 release, the Blazor Pivot Table component has added support for comma-separated value (CSV) data sources. CSV is one of the most popular data sharing formats, primarily used in business and science applications.
Authored by: Syncfusion
Top 10 games from the JS13K 2020 competition š¹ - The GitHub Blog
The ninth annual js13kGames competition wrapped up last weekend with over 220 games submitted. All created in a month and in less than 13kB of JavaScript. For anyone not in the know, js13kGames is a
Authored by: GitHub
Getting Started with Malina.js
Expressions are written in Malina.js in between curly braces: {}. These expressions are pieces of Malina language statements that are embedded in HTML and are executed when the app runs. Example: We have two expressions here {getMyName()} and {20 + 8}. These expressions are evaluated and the results are injected into the HTML.
Authored by: Bit
How to Conditionally Add Attributes to Objects
JavaScript is full of tricks that you don't know you want until you ... want ... them. Or maybe just until you see them. One trick I recently realized was conditionally adding attributes to React elements. Of course this trick essentially boils down to conditionally adding properties to an Object, but let's not dive too ...
Authored by: David Walsh
Setup Emotion to use Tailwind classes in Next.js
Rather than utilizing class names and handling the optimization of which Tailwind classes to include we can leverage the style attributes but render those values with Emotion. We can also integrate dynamic and existing styling with Emotion. Further more because the styles are dynamically assessed we can check that the style actually exists from Tailwind.
Authored by: Jason Brown
GitHub CLI is Now Available: Here's Why You Should Be Excited
As of January 2020, GitHub reports having over 40 million users and more than 100 million repositories(including at least 28 million public repositories), making it the largest host of source code in the world. ( Wikipedia) As with any successful modern tool, Github is extremely extensible.
Authored by: Bit
Decorators: JavaScript and TypeScript Hidden Gems
Since this is an experimental feature, you'll have to either provide a special flag for the CLI in order to be able to use this feature of the language or add a new key the tsconfig.json file.
Authored by: Bit
JavaScript
Binary Search in JavaScript
Introduction Searching is one of the most commonly performed tasks in the domain of Computer Science. Many algorithms and data structures exist to make searching more efficient. In this article, we'll look at the idea behind Binary Search and how to implement it in JavaScript.
Authored by: StackAbuse
Important Javascript Array Methods You Should Know - JS Startup
Javascript array method is a broad topic to cover as there is a lot of methods that help to modify the array based on the project or task requirement. So, in this tutorial, you'll be going to learn some important javascript array method. JavaScript array is a non-primitive data type and they are also called reference types.
Authored by: Javascript Startup
Javascript Date Method That You Must Know - JS Startup
In this javascript tutorial, you'll learn some important javascript date method that you mush know because playing with date manipulation required knowledge of the date method to fetch the required detail from javascript date object or set the detail in the date object. JavaScript Date object represents a single moment in time.
Authored by: Javascript Startup
JavaScript Destructuring Basics
Destructuring was introduced in ES2015/ES6. It's really helpful if you know all the ins and outs. There are many articles but they don't cover all the different ways to use Destructuring with one single example. The following things can be done on an object/array: Let's go with the following data and see 6 examples .
Authored by: Mehul Lakhanpal
Debouncing and Throttling in JavaScript
Throttling essentially let's you execute a function only once in a given period of time. If the time duration given is 500 milliseconds, no matter how many times the event is emitted in those 500 milliseconds, the event will only execute once.
Authored by: JavaScript In Plain English
Why Should You Use Top-level Await in JavaScript?
Before the introduction of top-level await, if you ever try to use the await keyword outside of an async function, you would receive a Syntax error. To avoid this, developers used Immediately Invoked Function Expressions(IIFEs). When you work with ES6 modules, there will be ample instances where you will be exporting values and importing them.
Authored by: Bit
Introduction to Local Storage With JavaScript
The JavaScript Local Storage Web API with Practical Examples
Authored by: Mehdi Aoussiad
TypeScript
Svelte with TypeScript and Jest (Starter Project)
In the summer of 2020, Svelte added TypeScript support. Turning it on is as simple as running a single script! But the default starter project doesn't have Jest testing set up.
Authored by: Dave Ceddia
Documenting Your TypeScript Projects: There Are Options
Whether you're a TypeScript developer, a JavaScript developer or any type of developer really, you most likely hate writing documentation. We all tend to hate it, even those of us who like to write. Can you imagine having to go through thousands of lines of code, review their logic, and document what it does in a format that is then easy to browse and understand?
Authored by: Bit
Angular
Angular Deprecationsā-āThe Maze
Software version upgrade - Something that every developer looks forward too. They may be stuck with outdated software or lack of features that they have painstakingly written the workaround for, or may even be a status thing for some to be on the latest version. ( Trust me, these folks do exist ).
Authored by: JavaScript In Plain English
Angular Cheat Sheet
Angular is a TypeScript based open-source web application framework used in building both web and mobile based applications. In this article, we will go through some of the angular features by explaining some of its core API. You can follow this angular cheat sheet to build your project.
Authored by: Sunil Joshi
Using A Progressive-Search Optimization When Filtering Arrays In Angular 10.1.6
The other day, I looked at a search optimization in Angular 10 in which I use a single, pre-compiled keyword value as my search target. That optimization allows me to search across an aggregation of values with a single operation.
Authored by: Ben Nadel
React
Wouter: A Minimalist Alternative to React Router
To start using Wouter, you just need to install the package using your favorite package manager: npm install wouter # or yarn add wouter Then, you could immediately start implementing the router.
Authored by: Bit
Building an Offline-First Web App with create-react-app
Progressive Web Apps (PWA) has become the new norm in building web apps. In contrast to traditional web apps, PWA provides a unique set of features for the mobile web, providing a naive-like experience. One of the core features of PWA is offline-first capability.
Authored by: Bit
Building an Animated Counter with React and CSS
I'll show you how I went about it, but I would love feedback. Is there a better way to do this? Leave a comment or shoot me an email at [email protected].
Authored by: jason
The Little React Quirk I Wish I'd Known Sooner
I started working with React about 6 years ago and started advocating its superiority in terms of Developer Experience (DX) ever since. However, an important thing to consider is that React is by no means a one size fits all solution and if you've tried to build a simple static website with React, you might have realized you've complicated yourself into unnecessarily convoluted concepts.
Authored by: Satya Sampathirao
Vue
WTF is Vuex? A Beginner's Guide To Vuex 4
Vuex is one of the most useful tools in the Vue.js ecosystem, but it can be confusing at first. I've written this primer on Vuex that I wish I'd had.
Authored by: Vue.js Developers
Easy Method to Add Bootstrap 4 to Vue CLI 4/3 Project - positronX.io
This quick tutorial reveals the most straightforward method to add Bootstrap 4 to the Vue.js application using the BootstrapVue package. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Authored by: Digamber Singh
How to Check Current Vue Js Application Version? - positronX.io
Bear with me because I'm going to show you how to check the existing Vue.js application version number quickly. Before we go any further, i want to tell you that we have three methods through which we can identify the Vue version. All three ways are exorbitantly convenient.
Authored by: Digamber Singh
Node.js
Let's Create Our Own Authentication API with Nodejs and GraphQL
Authentication is one of the most challenging tasks for developers just starting with GraphQL. There are a lot of technical considerations, including what ORM would be easy to set up, how to generate secure tokens and hash passwords, and even what HTTP library to use and how to use it.
Authored by: CSS-Tricks
The Proper Way To Connect Redis and Node.js
Are your clients seeing loading screens for long time? You did everything right but are you still getting high response times and even timeouts? Do you want your app 10x, 100x, 10000x faster? Redis is here to solve all your problems. This reminds me 90s tv ads.
Authored by: JavaScript In Plain English
8 NodeJS Projects Worth Checking
8 NodeJS projects I found on GitHub which are very promising and super interesting..
Authored by: Juan Cruz Martinez
Libraries and Tools
Top 10 React Native Chart Libraries in 2020 - Kriss
Representing statistical data in plain text or paragraphs, tables are pretty boring in my opinion. What about you? They become pretty difficult to understand and contrast. But, what makes them interesting and quite beautiful is the visual representation such as charts and diagrams. The knowledge of representing data in visual diagrams has become a requirement for many design and development projects and jobs today.
Authored by: kris
Testing
Testing a Redux Hooked App
All the integration tests discussed are available on GitHub. For testing UIs we have three options - End to End tests, Integration tests, Unit tests. So which strategy should we use? I like this ideology from Kent Dodds. The more your tests resemble the way your software is used, the more confidence they can give you.
Authored by: Bit
How to write tests for XState - CodeWithSwiz 12 | Swizec Teller
Once you know how to refactor a useReducer to XState, you gotta prove you did it right. CodeWithSwiz is a twice-a-week live show. Like a podcast with video and fun hacking. Focused on experiments. Join live Wednesdays and Sundays useAuth had existing tests for its core reducer and that makes refactoring easier.
Authored by: Swizec
How to write effective tests for React apps with react testing library?
This tutorial demonstrates how to write effective tests for your React application with react testing library and jest. We will cover How to write effective tests for your react components Mocking API calls How to test Redux connected component Testing custom hooks The main reason we write tests is to prevent bugs, keep code clean and maintainable.
Authored by: Soshace for Developers
Supercharge Testing React Applications With Wallaby.js
Ever had to switch your focus from your editor and to your terminal to see the results of your tests? This article will introduce you to Wallaby.js - a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file.
Authored by: Smashing Magazine
Effective React Tests
How to write effective React tests using Cypress Note: this blog posts closely follows How to write effective tests for React apps with react testing library? but uses Cypress and cypress-react-unit-test to write tests that work in the real browser. š You can find the source code for this post in the bahmutov/effective-react-tests repo.
Authored by: Gleb Bahmutov
Functional Programming
ES6 - Higher-Order Functions
Introduction In this article, we will first understand what a higher-order function is and then look at a few code examples of the popular higher-order functions such as forEach, map, filter, reduce, etc. What are Higher Order Functions? It is import...
Authored by: Skay
What is Functional Inheritance?
Functional inheritance is the process of inheriting features by applying an augmenting function to an object instance. The function supplies a closure scope which you can use to keep some data private. The augmenting function uses dynamic object extension to extend the object instance with new properties and methods.
Authored by: loveraJoel
What is a currying function?
A currying function is a function that takes multiple arguments and turns it into a sequence of functions having only one argument at a time. In this way, an n-ary function becomes a unary function, and the last function returns the result of all the arguments together in a function.
Authored by: loveraJoel
