![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
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".
General
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
JavaScript
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
TypeScript
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
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
React
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
Vue
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
Node.js
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
