![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
We're half way through the first month of 2021 and the reaction from the community this week seems to be quite literally, to React! Bookmark this newsletter if you're a React fan because it's jam packed with useful info from Reed Burger's "The React Cheatsheet for 2021" to Kush Tran's "The most complete guide to React State you’ll ever read" and even Alicia Jones gives us a glimpse into features currently still under development in "Design Systems with React’s Server, Shared and Client Components" on Bits and Pieces.
General
What's Wrong with Web Assembly?
Modern browsers are capable of so much more than rendering a web page. That's one of the reasons why WebAssembly was born. In an attempt to take the performance of heavy-duty tasks to the next level...
Authored by: Bit
Top 5 Programming Languages to learn in 2021
If you are new to programming and don't know where to start this article is just for you. Today there are more than a hundred programming languages ( Google says more than 700 ), So many options to...
Authored by: JavaScript In Plain English
Inversion of Control - A simple & effective design principle
If you have heard of dependency injection you have been using inversion of control but maybe not knowingly.IoC is often seems used interchangeably with DI but IoC as a concept is much more than that.
Authored by: Gaurav Behere
Looping over Arrays: `for` vs. `for-in` vs. `.forEach()` vs. `for-of`
This blog post compares four ways of looping over Arrays: for-of is often the best choice. We'll see why. The plain for loop in JavaScript is old. It already existed in ECMAScript 1. This for loop logs the index and value of each element of arr: What are the pros and cons of this loop?
Authored by: Axel Rauschmayer
73 Awesome NPM Packages for Productivity 🚀🌱
Nowadays in our busy schedules and tight deadlines, it's critical to choose tools that increase productivity. Here I have compiled a list of some of my favorite NPM packages. I've also sorted them...
Authored by: Madza
Chrome Canary: Nightly Build for Web Developers
Chrome Canary is Google's cutting edge web browser that is mainly targeted at developers, seasoned techies, and browser enthusiasts. In other words, it is the bleeding edge version of the Chrome browser ~ Google. After hearing about it, I was so curious to try it out.
Authored by: Bit
The Play, the points, and the biggest lie in software
" We delivered twenty points this week! " one of the Zoom squares declared in a proud voice. The rest of the grid in the virtual standup (zoomup?) nodded approvingly. This was apparently a big win for the team. Handing out virtual pats on the back would be a killer feature for videoconferences like this one.
Authored by: Gojko Adzic
The New Array Method You'll Enjoy: array.at(index)
Alongside the plain object, the array is a widely used data structure in JavaScript. And a widely used operation on arrays is accessing elements by index. In this post, I'm going to present the new array method array.at(index).
Authored by: Dmitri Pavlutin
JavaScript
What's Wrong with Classes in JavaScript?
It's not that there is something wrong with JavaScript's classes, but if you've been working with the language for a while, especially if you've worked with ES5 before, you've probably seen the evolution from Prototypal inheritance into the current class model. Why though? What was wrong with the prototype chain?
Authored by: Bit
What is the Double bang (!!) operator in JavaScript?
Every value has or values in JavaScript. For example, a `null` value has an associated boolean value of . Similarly `34` has an associated value of . We can use this to cast a variable to or using the double bang operator. Let's dive deep into what it is and how it works.
Authored by: Sanchitha Sr
Date Manipulation in JavaScript - A Complete Guide
In theory, handling dates as a developer is as simple as creating, storing, and, if necessary, manipulating dates. But as a Javascript developer, you would know this theory doesn't hold long after you start working with dates for real. On top of different date-time formats, you have to consider timezone and locale differences.
Authored by: livecodestream
The benefit of the Thenable object in JavaScript
I guess till here you got the idea of what we are talking about and you might find out that how mongoose, knex and some other libraries work with some tweaking the code. In the following we are intending to walk through a simple example of a chainable object that would be ran by await keyword and/or then method.
Authored by: Babak Gholamzadeh
JavaScript Dynamic Programming with Ugly Numbers
Finding ugly numbers is a common problem that can be solved efficiently with dynamic programming. These are numbers that have prime factors consisting only of 2, 3, or 5. The number 1 is included as an ugly number by convention. The number sequence goes as 1, 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, ...
Authored by: Bit
A Beginner's Guide to Memoization with JavaScript
When our applications become complex, the need for speed becomes a major deal-breaker. Performance optimization becomes a necessity when our application code grows in scale...
Authored by: Bit
TypeScript
Never write TypeScript types for GraphQL schema by hand
Modern software development best practices require programmers to write tons of code: Business logic Tests. Unit/Integrational/E2E and even types.
Authored by: JavaScript In Plain English
Angular
Integrate Stripe Card Checkout Payment Gateway in Angular 11 - positronX.io
Throughout this comprehensive Angular 11 Stripe checkout payment gateway example tutorial, you will find out the simple and easy method of integrating stripe card payment gateway in angular application. Implementing a stripe card checkout payment gateway in the angular application is exorbitantly effortless. Through this immaculate tutorial, we would like to share two ways to [...]
Authored by: Digamber Singh
Having Fun With The Horizontal Usage Of Position: Sticky In Angular 11.0.5
The CSS property of position: sticky is one of those new(ish) CSS features that can dramatically reduce the amount of JavaScript that you have to include in your application. position: sticky takes an element and "glues it" to the edge of the viewport as the user scrolls-across said element's container.
Authored by: Ben Nadel
Packaging A Password-Strength Module In Angular 11.0.5
I write a lot of Angular and AngularJS code. But, in the vast, vast majority of cases, I just extend the existing "application module", adding components, directives, and services to the same bag of uniquely-named dependency-injection (DI) tokens. This year, however, I really want to start thinking more deeply about packaging cohesive sets of functionality into their own modules.
Authored by: Ben Nadel
React
A Story about React and Input Ranges
People often talk about ideas as something that happens in an instant. Like they're Eureka moments. In marketing, people reduce them to single events in time. It makes, of course, for a better story. In reality, the best ideas are almost always the product of a longer thought process.
Authored by: Bit
Setting Up Auth Guards with React Router
Rendering certain routes or pages based on a user's authentication is important and that's why I was surprised to see that my googling lead to less than satisfactory results when it comes to authentication guards in React. Sometimes you just need a better understanding (or vocabulary) to harness the powers of the google and React.
Authored by: JavaScript In Plain English
CI/CD with React
Continuous Integration (CI) is a development practice that helps ensure that software components work together. Continuous delivery (CD) is the ability to deploy your integrated code into production without the need for human intervention.
Authored by: Frontend Weekly
Design Systems with React's Server, Shared and Client Components
A few weeks ago the React team has revealed an exciting feature that's currently still under development: React Server Components. This "feature" will not only introduce a new type of components for the server but rather a completely new "taxonomy" of React components.
Authored by: Bit
Using forwardRef with React hooks
The forwardRef hooks allows React users to pass refs to child components. The ref can be created and referenced with useRef or createRef and then passed in a parent component. Using forwardRef instead of useRef is useful when a ref needs to be accessed in a parent component.
Authored by: JavaScript In Plain English
React Server Components
The year 2020 has been a crazy ride for all of us. For this end of the year holiday season, the React Team has recently announced exciting research into a new way to build React apps with React...
Authored by: Bit
React useEffect only Once
If you are wondering how to run React's useEffect Hook only on update , you may be surprised that you need React's useRef Hook as helper to create an instance variable for tracking the component's...
Authored by: Robin Wieruch
The React Cheatsheet for 2021 (+ Real-World Examples)
I have put together a comprehensive visual cheatsheet to help you master all the major concepts and features of the React library in 2021. It includes tons of practical examples to illustrate every feature of the library using patterns you can apply within your own projects.
Authored by: freeCodeCamp.org
The most complete guide to React State you'll ever read
When i first learned about State, it is so friendly and simply just "data that is going to change + mutating it triggers a component rendering". That's what people told me. After years working with it, i started perceiving the gap in my knowledge.
Authored by: Kush Tran
Intro to React Server Side Rendering
This is the first in (hopefully) a series of articles to document the lessons I learned building and maintaining SSR apps. This article does not cover the pros/cons of SSR, or the pros/cons of not...
Authored by: Suhan Wijaya
Aurelia
Inferred bindable properties in Aurelia 2 - I Like Kill Nerds
About a year or so ago in the internal Aurelia core team chat, I raised an idea for inferred bindings. A lot of the time I find myself binding to values that have the same name as the bindable property. The idea is simple, say I have a custom element that has a bindable property [...]
Authored by: Dwayne Charrington
Vue
Build a Vue app with Firebase and Cloud Run
Building a rich and powerful web application has never been so easy and so complicated at the same time. The web expanded really fast, and with it, the need to build more and more advanced...
Authored by: Thibault Ruaro
Functional Programming
Advanced Asynchronous Programming in JavaScript
Let's start simple by supposing we have some ubiquitous operation called doSomething(): async function doSomething () { // we don't care what's in here} We don't really care about what it does. It might be querying a REST API, waiting for the user to perform an operation, whatever.
Authored by: Nicolas Vanhoren
