![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
We are officially into the second half of 2020, the most bizarre year to date for many of us. While the world is testing humans, we're testing systems! This week, Alen Vlahovljak shows us how to make less error-prone software in "10 Testing Tips for Developers."
If you're looking for a little awesome in your life, check out Ashutosh Singh's "10 Awesome JavaScript Libraries You Should Try Out in 2020" and Nathan Sebhastian is revolutionizing micro frontends on Bits and Pieces in "Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit."
General
Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit
The upcoming Webpack 5 will bring lots of goodies to improve both developer experience and build time, but none of them is as ground-breaking as the new Module Federation. Up until today, the implementation of micro front-end strategy seems to only bring increased complexity and inconsistent performance where the bad outweighs the good.
Authored by: Bit
Syncfusion Blazor Components are Blazor WebAssembly 3.2.0 Compatible!
A feast for all Blazor developers in the world! It's time to play with the highly anticipated, production-ready Blazor WebAssembly 3.2.0! Blazor WebAssembly is officially production-ready after several preview releases. In this blog, we are going to discuss: The highlights of Blazor WebAssembly. S
Authored by: Syncfusion
Why Cypress?
Doing E2E tests is hard. What's the point of even using CypressYes, writing end-to-end tests is hard ... because the existing tools were built for testing static sites and could not deal well with
Authored by: Gleb Bahmutov
5 Service Worker Caching Strategies for Your Next PWA App
There are ways or strategies we can use in Service Workers to respond to "fetch" events. These strategies determine how the Service worker will resp ond with a response to a fetch event based on the type of event request. This strategy checks for the response in the cache.
Authored by: Bit
Improving google page-speed score using code-splitting
Now there are 2 techniques to do code-splitting:-1. At component level: To split your component's code into multiple bundles. Sometimes your entire page/view's code is quite big and complex to be delivered in 1 big chunk so you could cut it short into multiple bundles.Though using this technique is a bit risky in itself as we have to take care of the number of network requests we are making to fetch bundles.
Authored by: Bit
JavaScript
What does the `new` keyword do "under the hood" in JavaScript?
A tweet that I stumbled upon on my Twitter feed recently that made me smile, and got me excited to test my recent learnings in JavaScript. For the past couple of months I have been pushing hard to master JavaScript as much as possible.
Authored by: qasim
Understanding Variables, Scope, and Hoisting in JavaScript
Variables are one of the fundamental blocks of any programming language, the way each language defines how we declare and interact with variables can make or break a programming language. Thus any developer needs to understand how to effectively work with variables, their rules, and particularities.
Authored by: livecodestream
The addEventListener() Method - JavaScript Event Listener Example Code
The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement addEventListener() in your code. Events are actions that happen when the user or browser manipulates a page.
Authored by: Joe Liang
3 Ways to Shallow Clone Objects in JavaScript (w/ bonuses)
In this post, you'll find 3 easy ways to perform shallow clone (aka copy) of objects in JavaScript. As a bonus, I'm going to show how you can also update, add, or remove properties in place on the clone. That's useful when you want to perform an update on the object in an immutable manner.
Authored by: Dmitri Pavlutin
Data Structures You Should Know as a JavaScript Developer
If you need to handle a list of tasks that need to be executed in order of creation, you can take advantage of the inner workings of Queues. These are very basic structures in which you can insert elements into and take them out following the FIFO approach: First In First Out.
Authored by: Bit
TypeScript
Javascript/Typescript Web Application Generator
ScaffoldHub is a web app generator that enables you to generate React, Angular, or Vue + NodeJS + SQL, MongoDB apps. You model the entities, relationships, fields, and validations, and ScaffoldHub generates the source code for you.
Authored by: Felipe Lima
Angular
Looking At Different Click-To-Edit Implementations In Angular 9.1.12
At InVision, one of the user experience (UX) patterns that we employ from time-to-time is the "click-to-edit" interaction. This is where the user clicks on a piece of plain-text and, by doing so, enables an "edit form" for said text in the same screen location.
Authored by: Ben Nadel
React
Ways to optimize React applications
Developing applications that are fast and efficient has always been the goal of every developer out there. Most of the job when working towards achieving the goals above gets done by frameworks and libraries like React, Angular, etc.
Authored by: Soshace for Developers
React: 50 shades of state
React: 50 shades of state / We all know that one of the most challenging task in software development is state management. This is especially true for the JavaScript world. There are thousands of articles on this topic and so I decided to write another one 😁.
Authored by: Krasimir Tsonev
React UI tutorial - Building Instagram video player using HTML and CSS Flex
React tutorial - Build Instagram video player using ReactJS and Flex system of CSS. The main intention of this video is to show how to build video functionality like the Instagram website's video player without any external libraries. You will also learn the best practices in HTML, CSS, flex system, and organizing a react project.
Authored by: Coding is Love
A Web Developer's Roadmap to Learning React Native
While I was working as a web developer and using Javascript, Jquery and making a lot of Ajax calls using get and post methods from frontend I came to learn about React Native (or RN)and how it helps in building iOS and Android apps with the single code base and how developers from the web who use javascript on daily basis can easily start working on React Native.
Authored by: Bit
Vue
Building Desktop Apps With Electron And Vue
In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the Vue CLI Plugin Electron Builder.
Authored by: Smashing Magazine
Build a Bootstrap 4 & Vue App
Bootstrap 4 continues to be the most popular framework for creating web apps. It's a shame that the jQuery dependency makes it less powerful than it could be! Fortunately, it's fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.
Authored by: Vue.js Developers
Node.js
A Hands on Guide to Event Loops, Child Processes, and Worker Threads in Node.Js
What makes Node.js so performant and scalable? Why is Node the technology of choice for so many companies? In this article, we will answer these questions and look at some of the advanced concepts that make Node.js unique. We will discuss: 1. Event Loops ➰ 2. Concurrency Models 🚈 3.
Authored by: freeCodeCamp.org
10 Tips for Building a Node.js RESTful API
Building an API is a rewarding way to allow data to flow between apps and create compelling functionality in your latest project without having to start from scratch. Newcomers to the world of APIs will definitely need a little advice and guidance to make sure that their fledgling efforts are a success.
Authored by: Bit
Libraries and Tools
10 Awesome JavaScript Libraries You Should Try Out in 2020
JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades. Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT.
Authored by: ASHUTOSH SINGH
Publish Your First Node Library Using NPM
If you are a Node.js developer, using npm packages won't be a new concept to you. From complex npm packages like express to simple packages, npm hosts a large number of Node.js libraries that simplify the workload of Node developers. But have you ever thought about publishing a Node library of your own to help fellow developers?
Authored by: livecodestream
Best React-like JSX UI libraries in 2020
Discovering some of unique and amazing, React-inspired and JSX-driven UI libraries! 🥰 #ReactJS #PreactJS #HyperappJS #CrankJS #SolidJS #JavaScript #TypeScript #WebDevelopment #TS #JS #HTML #JSX
Authored by: areknawo
Top 5 React Table Libraries
GitHub: https://github.com/mbrn/material-table This is one of the most used React Table libraries with more than 2,300 stars on GitHub. One of the reasons for its popularity is its Material styled UI. It provides many individual components that allow it to be customized and used in any complex application.
Authored by: Bit
8 Performance Analysis Tools for Front-End Development
You can have the most beautiful and engaging website in the world, if it does not load quickly on the browser, people would tend to skip it. Although there are many performance rules out there, at the end of the day, it all comes down to load time.
Authored by: Bit
Testing
Why doesn't Webpacker use my test config when I run Rails tests?
When running Rails system or integration tests, you might be surprised to learn that Webpacker will load your development webpack config. What's the deal?
Authored by: Ross Kaffenberger
10 Testing Tips for Developers
I have seen once an unusual way of code commenting. At first, it looks silly, but it can make sense. The only guy was maintaining that whole system... He separated code comments from code. He moved all his code comments into a separated folder called docs.
Authored by: JavaScript in Plain English
Functional Programming
JavaScript: Arrow Functions and Destructuring for Object Transformation
Arrow functions and destructuring are two powerful features of JavaScript. When used in combination, they present a cool pattern that I like to call object transformation. The point is to write a simple function to change the structure of a given object, while keeping (some of) the attribute values.
Authored by: Sergei
