![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
Welcome December! The last month of 2020 and hopefully a step into a much better year for 2021. If you're not quite in the festive spirit just yet, why not check out Per Harald Borgen's "JavaScript Advent Calendar – Learn JavaScript Interactively by Christmas Eve"? Could be a fun way to count down to Christmas!
Some other highlights this week are Juan Cruz Martinez's "What, Why, and How of Typescript for JavaScript Developers" and Viduni Wickramarachchi's "Deep Dive into Page Lifecycle API" on Bits and Pieces.
General
Page Lifecycle API: A Browser API Every Frontend Developer Should Know
As users, we always like to multi-task while browsing web pages. So it's common to have several browser tabs open as it helps to get things done in parallel. However, at the same time, each of these tabs consumes system resources like memory and CPU.
Authored by: Bit
Making a PWA with literally 1 line of code
Right before 2020 turned into a global shitshow, I gathered a couple of friends and together we came up with an idea for a simple little app we thought would be helpful. Humbly called The Coronavirus App, our app ended up being used by more than 15 million people, making it - I believe - one of the most widely used PWAs ever.
Authored by: JavaScript In Plain English
Let's Build Micro Frontends with NextJS and Module Federation!
That headline is a mouth-full, I know! In the past several years I have been working on distributed and multiple teams as well as being a pretty early adopter of NextJS (since around V2.0!) in production. I've worked on micro frontends with shared npm packages while trying to orchestrate one cohesive user experience.
Authored by: Yoav Ganbar
The Hidden Case of the Shadow DOM
This article speaks to how shadow DOMs were used for the front-end web app development by my team, later bewildering the QA engineers who tested the application. It also speaks to the journey wherein...
Authored by: Bit
JavaScript
JavaScript Algorithms: Find All Duplicates in an Array (LeetCode)
Given an array of integers, 1 ≤ a[i] ≤ n ( n = size of array), some elements appear twice and others appear once. Find all the elements that appear twice in this array. Could you do it without extra space and in O( n) runtime?
Authored by: JavaScript In Plain English
Lots of Ways to Use Math.random() in JavaScript
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it's possible for an actual 0 to be returned) and 1 (exclusive, as in, it's not possible for an actual 1 to be returned).
Authored by: CSS-Tricks
5 Best Practices to Write Quality JavaScript Variables
Variables are everywhere. Even if you're writing a small function, or writing an application: you always declare, assign, and read variables. Writing quality variables brings increased readability and easier maintainability of your code. In this post, you'll read 5 best practices of how to declare and use variables in JavaScript.
Authored by: Dmitri Pavlutin
A free advent calendar to help you master JavaScript by Christmas Eve 🎅🏻
The year of 2020 has been a rough one for aspiring software developers. In addition to the health costs that has affected so many of us, junior developers have faced an increasingly difficult job market. Many experienced developers were laid off this year, and therefore applied for the same jobs junior developers were hoping to get.
Authored by: Per Harald Borgen
How to Master JavaScript Promises and Async/Await in 20 Minutes
On the web, many things tend to be time-consuming - if you query an API, it can take a while to receive a response. Therefore, asynchronous programming is an essential skill for developers. When working with asynchronous operations in JavaScript, we often hear the term Promise.
Authored by: Thu Nghiem
TypeScript
If It Isn't Already, Your Startup's React Project Should Be Written in TypeScript
I used to object to the idea of TypeScript. To me, it didn't seem to make sense to add static typing to a language that was designed not to have it. I started my career as a C++ Graphics Engineer...
Authored by: JavaScript Kicks
What, Why, and How of Typescript for JavaScript Developers
If you are a Javascript developer, you must have heard about Typescript at one point or another. If you have been reluctant about giving Typescript a try because you are not sure how it could serve you better than Javascript, you have come to the right place.
Authored by: livecodestream
Understanding typescript generics by example
Typescript generics are a built in language feature using the same principles of generics in other languages like C#, Java, etc. To understand generics, let's talk about functions. Functions take parameters... const getUser = async (id: number) => { const resp = await fetch(`/api/users/${id}`); const user = await resp.json(); return user; } In this case, the id is a function parameter.
Authored by: Jonathan Creamer
Angular
Organizing My Reaction GIFs Using Node.js, Sharp, And Angular 11.0.2
At InVision, we use GIFs all the time in our Slack chat to add color and nuance to our text-based conversations.
Authored by: Ben Nadel
Package Font Files on NPM for Angular Usage
While working on my company's shared component system, I got a request from our design team. They wanted to keep our branding consistent with internal documents and other assets. As such, they requested we use a font called "Stirling Foundry".
Authored by: Unicorn Utterances
How to Integrate Dialogflow CX and ES Chatbot with Angular JS
There are numerous posts about developing a chatbot using Dialogflow. But creating chatbot isn't enough. Connecting Dialogflow CX and ES to the web interface is even more interesting and challenging. With Angular being a popular and emerging platform, here is our guide to integrate Dialogflow chatbot with Angular.
Authored by: Devashish Mamgain
React
React Redux Deep Dive: State Management in React with Redux
In the world of React, efficient State Management is one of the most important things a developer has to perform in order to produce a solid website and Redux is one of the best ways of achieving this.
Authored by: JavaScript In Plain English
How to useEffect in React
In this tutorial you will learn everything about React's useEffect Hook. Let's say we have these two components whereas the parent component manages state with React's useState Hook and its child component consumes the state and modifies the state with a callback event handler: Based on the stateful boolean flag coming from the parent component, the child component renders "Hello React" conditionally.
Authored by: Robin Wieruch
Sticky Table Header with React Hooks
Using a element instead of flexbox for data presentation is a good thing. How to turn the table header sticky with the help of React in that case? How to apply the solution into a production code? This blog post is all about that.
Authored by: Miroslav Nikolov ⚛️
Why do we need to use bind for events in class based components?, Exploring React
You might be wondering why you need to use bind() for calling class methods from events in React. Maybe you've just chucked the binds in and it works, so move on: if it ain't broke don't fix it.
Authored by: Martin Capodici
React Native Custom Stepper
Let us build a custom stepper component from Scratch. Tools used : Design of Stepper Component : It's very simple. It has two icons (Minus & Plus) with a value placed in between. ( Skip to next section, if already done..) Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.
Authored by: Karthik_B
Vue
Best Static Site Generators for Vue.js
Over the past few years, Vue.js has become a popular choice for web application development. With its popularity, the framework has expanded its reach to static site generation, an area once dominated by React. Like Gatsby and NextJS that uses React, you can find several frameworks using Vue.js that supports static site generation.
Authored by: Bit
4 Best Static Site Generators for Vue.js 2020 - Kriss
Your project may not need a micro-service or a serverless API. In fact, it's far more likely that all you really need is a simple, scalable, and performant static site generator. Rather than using heavy, bloated frameworks like WordPress or Drupal, a static site generator lets you write your content as static HTML files and handle dynamic components (variables, content blocks, etc.)
Authored by: kris
Node.js
Reproducible Node Builds With npm ci
How and when to use `npm ci` to make your CI/CD process more robust.
Authored by: Semaphore
Beginner's Guide to Redis and Caching with NodeJS
In recent years, Redis has become a common occurrence in a Node.js application stack. Though its most popular use case is caching, Redis has many other use cases where you can take advantage of its blazing-fast in-memory database. In this tutorial, we are going to give you a quick introduction to Redis.
Authored by: livecodestream
Libraries and Tools
React Native Libraries for "Native Features"
When creating mobile applications, you require access to some potentially sensitive information of the device, through your app. These may include location service, contacts, settings, gallery, camera, etc. To access them, you have to ask for the user's permissions first.
Authored by: Bit
16 Designer Developer Handoff Collaboration Tools For 2021
A successful handshake between developers and designers is a fundamental key to successful, timely, and high-quality product delivery. A successful handshake, unlike just a handoff, means a mutual process where designers, and other stakeholders, can be included in the development process itself. This is the holy grail for a product team's building workflow.
Authored by: Bit
Testing
Testing Vue Applications With The Vue Testing Library
The Vue Testing library can help you to test your applications by mirroring the way that a user would interact with them. Here's everything you need to know if you want to get started right away.
Authored by: Smashing Magazine
Your Front End Code Needs To Be Unit Tested
Front End testing can be done in multiple ways, like unit testing, integration testing, system testing, and acceptance testing. Today, we are going to explore the importance of unit testing and the tips to test our frontend code.
Authored by: Anuradha Kumari
