JSK Weekly - April 1, 2021

It's April Fools! Have you backed up your data? Talking about storage and saving space, even if only online, check out Matheswaaran's "Image Compression in ReactJs".

Other favourites this week; "Using Next.js with FaunaDB: How to Query the Database from Your App" on Snipcart and Rahul's "Object Creation Patterns in JavaScript".


A Long Time Coming: The MediaRecorder API Is Widely Adopted

Being a creative developer on the web means you need to be patient. The web is the most incredible and accessible platform for creative programming but its evolution is subject to the adoption of new...

Authored by: Bit

Next.js & FaunaDB: Querying Database from Your App - Snipcart

One of the things distinguishing Jamstack sites from plain static sites is their use of data from APIs. While a traditional static site might use file-based data like Markdown and YAML, a Jamstack site frequently uses things like a headless CMS, headless ecommerce or third-party APIs.

Authored by: Snipcart

Create a browser-agnostic PWA install button

One of Google's best resources about PWA development is How to provide your own in-app install experience. Among other things, it explains in great detail how to create an install button and how to detect when a PWA has been installed. It works great... on Chrome.

Authored by: JavaScript In Plain English

Build a Video Chat App with Socket.io, PeerJS, and Codesphere

The Coronavirus pandemic has made video chat the primary method of communication that we rely on. Whether it's for school, work, or just talking to friends and family, we end up video chatting almost every day in the age of Coronavirus. Contrary to popular belief, building your own video chat app is not too difficult.

Authored by: JavaScript In Plain English

Getting Started with Blog using MDX in Next.js

MDX is known as MarkDown Extension, an extension to embed JSX and simple text on a page. MDX is another form of file like .js, .ts which comes with extended functionality like fast compilation as compilation occurs on build time, default export as a whole component, writing long-form as a simple component and so on.

Authored by: shreyvijayvargiya

What is monorepo? (and should you use it?)

Monorepo can foster rapid development workflows when your project is composed of multiple modules or microservices. In this post, we’ll examine if monorepo is the right fit for you and your company.

Authored by: Semaphore

Top 4 Tailwind CSS alternatives for 2021

I've got a "love-hate" relationship with Tailwind CSS . On the mindset front, I like the utility-first approach, but I can't seem to get by with long class strings or adding additional complexity to my build setup. As for the actual experience - it's great!

Authored by: areknawo


How to Avoid JavaScript Type Conversions

If you need to use a mathematical operation on user input or any other value, it is safer to do an explicit conversion yourself before doing the operation. This way, you can avoid any unexpected behavior. Especially with the + operator. This is a special kind of operator which is used for additions as well as string concentrations.

Authored by: Bit

What is JavaScript? A Definition of the JS Programming Language

JavaScript is a dynamic programming language that's used for web development, in web applications, for game development, and lots more. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS. Many browsers use JavaScript as a scripting language for doing dynamic

Authored by: Dillion Megida 🚀

Reverse a String with a Stack in JavaScript

In this article, we will learn how to reverse a string using a stack in JavaScript. A stack is a linear data structure that follows a particular order in which the operations are performed. The order is Last In First Out (LIFO). Stacks use push() and pop() for adding and removing elements respectively.

Authored by: Megh Agarwal

JavaScript: Get Number of Days Between Dates

Introduction We oftentimes find ourselves counting the number of days from and to a date. Be it calculating when someone's due to return a book, when a subscription should be renewed, how many days have passed since a notification or when a new event is coming up.

Authored by: StackAbuse

Object Creation Patterns in JavaScript

Object creation mechanisms increase the flexibility and reuse of existing code. Here in this post, we will see the Object Creation Pattern in JavaScript. Some patterns to create an object are: Factory pattern Constructor pattern Prototype pattern Constructor / Prototype pattern The factory pattern uses a function to abstract away the process of creating specific objects and returning their reference.

Authored by: RAHUL

How to Split an Array Into Even Chunks in JavaScript

Introduction Arrays are one the most used structures in JavaScript programming, which is why it's important to know its built-in methods like the back of your pocket. In this tutorial, we'll take a look at how to split an array into chunks of n size in JavaScript.

Authored by: StackAbuse

Hoisting in JavaScript

I have been attending a scholarship program for quite some time now and I recently came across this magical concept of Hoisting! In this article, I will be giving you a detailed explanation of Hoisting under different circumstances in the simplest manner possible.

Authored by: JavaScript In Plain English

Apply, Call, Bind in JavaScript

Using them, we can set what 'this' should refer to, irrespective of how or where the function gets called. Let's see what would happen in case of an object. showName method is being called through its owner object student, as shown below...

Authored by: RAHUL

40 JavaScript Projects for Beginners - Easy Ideas to Get Started Coding JS

The best way to learn a new programming language is to build projects. I have created a list of 40 beginner friendly project tutorials in Vanilla JavaScript, React, and TypeScript. My advice for tutorials would be to watch the video, build the project, break it apart and rebuild it your

Authored by: Jessica Wilkins

Top JS rich text editor frameworks for 2021

Rich content editors are everywhere - from comment sections to document editors. ✍ Let's explore the best tooling to make them! 🚀 #webdev #javascript #typescript #FrontEnd #React #VueJS

Authored by: areknawo

Create Pixel Effects with JavaScript and HTML Canvas

JavaScript can be used to create some amazing pixel effects. We've released a course that will teach you how to use JavaScript to create really cool effects with images and text. You will learn multiple different particle effects with vanilla JavaScript and HTML canvas. This course was developed by Frank

Authored by: Beau Carnes

How to Use Supercharged Sorts in JavaScript

I was asked a great question recently about filtering and sorting arrays. At first, it seemed trivial: If I have an array of objects, and I want to be able to filter() by multiple properties, can I do that?And the answer is, of course, sure. Absolutely. The way Array.

Authored by: freeCodeCamp.org


Duck Typing in JavaScript and TypeScript

JavaScript has come a long way since its birth in the 90s. Major improvements have been incorporated with it along its journey. It should be noted JavaScript started out and is still not an OOP-based...

Authored by: Bit


Angular 11 Image Upload, Preview, Crop, Zoom and Scale Example - positronX.io

Throughout this comprehensive tutorial, we will explain how to upload an angular image, show image preview by creating a Base64 url in angular, how to crop an image in angular, how to zoom the image, and how to scale the image in Angular. Adding image uploading, previewing, cropping, scaling, and zooming in Angular is easy; [...]

Authored by: Digamber Singh


Adding React Native App to App Store Connect

Hello everyone! Let's try to add a React Native Project to the App Store. Make sure you have a Developer Account in Apple and a React Native Project. Head over to App Store Connect. Let us now add our first app.

Authored by: Karthik_B

Image Compression in ReactJs

While uploading the images to the block storage (or) S3 storage, the full images when captured through the phone (Pixel 3 or others) camera, has a size up to 3 MB. This consumes most of our time while uploading. So, I started looking into lossless compression techniques for images on the client-side.

Authored by: Matheswaaran

Create a Tabbed Carousel in React Native

To understand what I am trying to build, first, let's see the demo: As you can see from the gifs, we have two parts to build out this component: The tabs (which you can see at the top) Carousel We need to make sure the tabs and the carousel items are in sync.

Authored by: Saad Khan

Generate API Driven Forms in React

I recently worked on a project that requires SuperAdmin users to inspect registration errors made by customers during the onboarding process. The affected fields are flagged by an internal system and returned to the frontend application as a JSON payload. We had more than 100 form input fields that can possibly be affected.

Authored by: JavaScript In Plain English

React, Redux, TypeScript Starter Kit using Redux Toolkit

You are starting a new project? You want to use all the latest tech simultaneously to a production level standard. By the end of this article you will have a production ready react app, which uses redux, redux-thunk and TypeScript.

Authored by: JavaScript Kicks


Creating a Chrome extension with Vue.js and Node.js

Penumbra is a new tab replacement for chrome in the form of an extension. It overrides the existing new tab to give some very minimal add-ons or features. The main problem that I have with default new tab is that it is little too simple.

Authored by: JavaScript In Plain English

Reactivity In Vue

Reactivity is the ability for a variable (array, string, number, object, etc) to update when its value or any other variable that it makes reference to is changed after declaration.

Authored by: Smashing Magazine


What is Node.js?

Node.js is a backend JavaScript runtime environment that runs on the V8 engine and executes code outside of a web browser. This article talks about the theoretical concepts that would help understand the architecture and workflow of Node.js.

Authored by: Rahil Sarvaiya

Functional Programming

Functional Programming in JavaScript for Beginners

Functional programming is not a new approach to coding, but it has grown in popularity in recent years. This is because, once programmers understand the basics behind the technique (and are able to write clean and reliable code using it), applications written using a functional approach are much easier to

Authored by: Nahla Davies

Serverless Function in Next JS

Next.js is a solid react framework that comes with a lot of inbuilt functionality like Server-Side rendering, SEO optimization, dynamic routing etc. I have already covered an article on building...

Authored by: shreyvijayvargiya