![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
And just like that, we're only a few days away from December! If you love React and are checking out new tools for use in 2020, have a look at Fernando Doglio's story about react developer tools you should add to your toolbox in "11 Top React Developer Tools for 2020" on the Bits and Pieces blog. Reactime v3 is also out, so check out their latest improvements in "Reactime v3 is here! New support for concurrent react, more hooks, more react router use cases."
If you're strapped for time (who isn't) then check out Marko Anastasov's story titled "In Continuous Integration, Run Fast and Fundamental Tests First" on Semaphore's blog on how to use pipelines to run fast tests first and Laurin Quast's tutorial, "Handling GraphQL errors like a champ with unions and interfaces" on LogRocket's blog.
General
How to Approach State Management in React, Vue and Angular
The Same Good Architecture Applies Everywhere Although there are significant differences between React, Angular and Vue, they share architectural fundamentals. We could look at this unity like so: This high-level applies equally to the big three, React, Angular and Vue (and probably emerging things like lit-html).
Authored by: Matt Tyson
I created the exact same app in Vue and Svelte. Here are the differences.
Vue vs Svelte. Finally, a side-by-side code comparison! Because you've heard the fuss about Svelte, and now you want to know what the hype is all about. Having used Vue at work, I had a fairly solid understanding of it.
Authored by: Sunil Sandhu
You need to try NextJS for your next web app.
NextJS is an awesome framework built by Zeit to create Web Applications. It has many great features and advantages, which can make NextJS...
Authored by: ᐸAndrewRymaruk/ᐳ🇺🇦😉
JSONP demystified: What it is and why it exists Blog
JSONP remains one of the most poorly explained concepts in all of web development. This is likely due to its confusing name and overall sketchy background.
Authored by: LogRocket
6 Patterns for Microfrontends
Microfrontends are not a new thing, but certainly a recent trend. Coined in 2016, the pattern slowly gained popularity as problems started to appear when developing large scale web apps. In this article, we'll go over the different patterns for creating microfrontends, their advantages and drawbacks, as well as implementation details and examples for each of the presented methods.
Authored by: Bit
Handling GraphQL errors like a champ with unions and interfaces Blog
Without a doubt, one of the best features of GraphQL is its awesome type system. Together with tools like the GraphQL Code Generator and typed Javascript subsets like TypeScript or Flow, you can generate fully typed data fetching code within seconds.
Authored by: LogRocket
JavaScript
Using the URL Object in JavaScript
Learn everything there is to know about the URL object Manipulating and extracting parts from a URL is a pain if we have to write all the code ourselves. Fortunately, most browsers have the URL object built into their standard library.
Authored by: Bit
Inheritance with JavaScript prototypes Blog
TL;DR: In this post, we will look at prototypes and how to use them for inheritance in JavaScript. We will also see how the prototypical approach is different from class-based inheritance. Inheritance, a prominent feature of a programming language, emerged with the introduction of object-oriented programming languages.
Authored by: LogRocket
Everything you wanted to know about JavaScript scope
The JavaScript language has a few concepts of "scope", none of which are straightforward or easy to understand as a new JavaScript developer (and even some experienced JavaScript developers). This post is aimed at those wanting to learn about the many depths of JavaScript after hearing words such as scope, closure, this, namespace, function scope, global scope, lexical scope and public/private scope.
Authored by: Mahendra Choudhary
Closures, Private Data, and Inheritance in JavaScript
Almost no one likes the word parasitic. When one utters the word, ticks, tapeworms, and a whole host of other nasty organisms come to mind. In the context of programming, however, parasitic behavior can be extremely efficient. What makes a parasite successful? A parasite is very resourceful.
Authored by: gitconnected
Algorithms 101: Find the Difference between Two Arrays in JavaScript
Noob. v. Algorithms #23, a custom, speedy method for finding the difference in two arrays Today's challenge from LeetCode is Find All Disappeared Numbers in Array. Our inputs include an actual array with missing numbers. We want to compare that array to an array of the same length, where there are no missing numbers.
Authored by: Joan Indiana Lyness
JavaScript Fundamentals: Understanding ES6
ES6 (or ECMAScript 2015) is the 6th version of the ECMAScript programming language. ECMAScript is the standardization of JavaScript which was released in 2015, hence the name: ECMAScript 2015! A great advantage of ES6, is that it allows us to write code in a more modern & readable way.
Authored by: Tim Robards
TypeScript
Benefits of transferring TypeScript types to DefinitelyTyped
We had 32 custom typings for JavaScript libraries in our repository. At first, it started as a small pull request to a Webpack plugin package. After realizing that this process could save us time in the future, I proposed we move typings from our repository and use them from NPM.
Authored by: Max Boguslavsky
Learn Dart (for Flutter) by comparing it to TypeScript
Learning something new like the Dart language (used by Flutter) can be hard. This guide provides examples that are intended for people learning Dart/Flutter that are coming from a TypeScript background, but the other way around should also work. Going through this should make it easier for you to dive into Dart/Flutter.
Authored by: Jeroenouw
TypeScript And .parentNode vs .parentElement
Ben Nadel discovers the Element.parentElement property of the DOM (Document Object Model), and is excited to start using it in TypeScript. This way, we can push more "truth" into the compiler and make his code just a little-bit safer to run.
Authored by: Ben Nadel
Angular
How to Mock a Backend in Angular using HttpInterceptor
Learn how to mock a backend using HttpIntercetor to make your testings simpler and easier. Like the name implies HttpInterceptor is used to intercept HTTP calls (requests and responses) from our Angular app. There are many things we can do with HttpInterceptors: Authentication Caching Fake backend URL transformation Modifying headers and so on...
Authored by: Bit
How to execute a function with a web worker on a different thread in Angular Blog
With web workers, we are able to execute a script in a background thread and leave the main thread free for UI work. By default, Web Workers accept the file URL as an argument, but in our case, that is not acceptable because we are using TypeScript as the main language and we don't want to mix it with JavaScript.
Authored by: LogRocket
Creating a Sketchpad with Angular and P5JS
There are a lot of great frameworks that provide animation and drawing capabilities with software today. I was recently working with P5JS and wanted to share some cool things I learned a long the...
Authored by: Angular In Depth
React
Reactime v3 is here! New support for concurrent react, more hooks, more react router use cases.
Reactime is an open-source Chrome developer tool — inspired by Redux DevTools — which allows developers to visually inspect the state of their app at any given moment, step forwards or backwards through time, import and export a snapshot of their current state, persist state across refreshes, among other things. The real magic happens when you introducing scaling. Because Reactime runs a realtime D3 visualizer, which visually grows a tree displaying all of your state “branches”, you can easily figure out where a bug is halting your processes and how best to move forward. Not to mention, it now has added support for experimental React features like Concurrent Mode and Suspense, as well as expanded support for hooks like useContext, useReducer, useEffect, and more, and more integrated support for React Router, visually persisting state changes across different pages.
Authored by: reactime
11 Top React Developer Tools for 2020
React developer tools you should add to your toolbox JavaScript is famous for the number of frameworks and tools that are created around it every week, and React, being one of the most popular of those frameworks as of late, "suffers" a similar fate, causing new developers to get overwhelmed when they attempt to start delving into the technology.
Authored by: Bit
15 performance tips which you need to know when building React.js application
Building applications sometimes can be a bit challenging, especially when we need to build a fast and good-quality application. These times it can be necessary, especially when search engines can give bonus SEO points for faster working apps, and it can help us to reduce our bouncing rate very strongly.
Authored by: Radoslaw Fabisiak
React Utility Components: Building 4 React Components that Improve Any App
How to build 4 React add-on components you can immediately integrate to solve common problems in your apps React is one if not the most popular JavaScript libraries, but it doesn't come with helpers out of the box like other frameworks do (i.e. directives in Vue.js).
Authored by: Mahmoud Elmahdi
Use Hooks + Context, not React + Redux Blog
Redux introduces a lot of complexity to our codebase with the excessive amount of code it requires. At best, this makes it an imperfect solution for state management in React applications. And yet, far too many React developers default to Redux for state management without considering other alternatives.
Authored by: LogRocket
How is getSnapshotBeforeUpdate implemented with Hooks? Blog
TL;DR: The short answer is getSnapshotBeforeUpdate can't be implemented with Hooks. However, the more interesting question is why not? And what can we learn from implementing this ourselves? It's been over a year since the introduction of Hooks and it's no surprise they have been widely adopted by the React community.
Authored by: LogRocket
Vue
How to Create a Progressive Web App with Vue.js
Progressive web app (PWAs) is a web app that does somethings that a native app does. It can work offline and you can install it from a browser with one click. PWAs should run well on any device. They should be responsive. Performance should be good in any device.
Authored by: John Au-Yeung
Fix "[Vue warn]: You are using the runtime-only build of Vue" · Code with Hugo
This post explains how to fix "[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.". This error happens when using the Vue CLI and attempting to use a component that has its template defined as a string.
Authored by: Hugo Di Francesco
How to Add Geolocation to a Vue.js App
Use the geolocation browser API with Vue to get user location in your app Many apps want provide an experience based on the user's location. This is where the HTML Geolocation API comes in. You can use it easily to get the location of the current device.
Authored by: John Au-Yeung
Node.js
How to securely deploy your Node.js App
Either you should have AWS or droplet → these are standard → deploying is another thing we should be able to do well. (since this is...
Authored by: Jae Duk Seo
Create a Free Serverless Email Bot Using Gmail, Node, and AWS Lambda
Before you deploy your local email bot on AWS Lambda, you will need an AWS account and create an 'IAM' user with related permissions. We will use the Serverless Framework, a third-party framework, to help us deploy our app. It will do configuration under the hood and keep us away from tedious and complicated AWS configurations.
Authored by: gitconnected
Libraries and Tools
Exploring Netlify Split Testing Blog
Netlify is a tool I have personally come to love and appreciate, mostly because it is super easy to deploy applications, and also because of the company's involvement with the JAMstack. Netlify does a lot of cool things, ranging from instant deployment to continuous integration.
Authored by: LogRocket
Webpack Code Splitting for your Library
Just recently I had to apply Webpack's Code Splitting, because the bundle size of a single file for my JavaScript library got too big when installing and importing it in another JavaScript project.
Authored by: Robin Wieruch
Building a UI Component Library for Your Startup
How to build a component library that suits your startup's needs. Component libraries make perfect sense as tools for large corporations but may seem redundant for smaller businesses, like startups. In this post, I argue that by following the right principles, aided by the right tools, you can create a UI component library that would boost your startup in ways that go way beyond a consistent UI.
Authored by: Bit
Testing
In Continuous Integration, Run Fast and Fundamental Tests First
You don’t need CI to run all tests to get feedback on work-in-progress. Here's how you run CI as a pipeline that starts from fast and fundamental tests. That way you get feedback on errors in a fraction of the time and resources that the full build would require.
Authored by: Marko Anastasov
Automation testing is not working Blog
Before I start, I want to point out that I am not referring to one particular project or any particular individual. I believe these problems are industry-wide having spoken to others. Nearly all the automation testers I have worked with have busted a gut to make this faulty machine work.
Authored by: LogRocket
Writing end-to-end tests for GraphQL servers using Jest Blog
Writing end-to-end tests for applications helps to ensure applications behave as expected. It also comes in handy when we add new features to existing applications because it ensures the newly introduced features integrate well with our already existing features.
Authored by: LogRocket
Functional Programming
Build a Moving Box with Purescript - An Introduction to Purescript Tutorial
Learn the basics of Purescript for web development by building a simple moving box using vanilla Purescript technologies for DOM manipulations. For those who want to delve into the Functional Programming world, Purescript is a very interesting option. It lets you bring the pure functional joy into the web land since it compiles down to Javascript.
Authored by: Gabriel Crispino
Other
Introducing Native Order Refunds in the Merchant Dashboard - Snipcart
Last week, our content guy, Francois, wrote a post about how we use UserVoice](https://snipcart.com/blog/how-we-leverage-uservoice-to-build-a-better-startup) to help with our product development, support and content. In it, he explained how we try our best to prioritize feature suggestions that keep popping up in our support tickets and on our public UserVoice site.
Authored by: Snipcart
