Lock your app down and make it less susceptible to bad actors

Image for post
Image for post
Photo by Philipp Katzenberger on Unsplash

Whether you’re a React.js, Angular, Vue.js, or simply a front-end developer, your code can be an inviting door for hackers.

As a front-end developer, we’re mostly concern about performance, SEO, and UI/UX — security is often overlooked.

You might be surprised to know how big frameworks let you open yourself up to cross-site scripting (XSS) attacks. There are risky operations names like dangerouslySetInnerHTML in React or the bypassSecurityTrust APIs in Angular.

We should keep in mind that the front end now shares equal responsibilities as the back end or DevOps in terms of security. …


The most anticipated chrome release V8, hits its long-awaited v8.0 and will be shipping with chrome 80 release in February.

Image for post
Image for post

The v8.0 release with some new features — optional chaining, Nullish coalescing, faster higher-order builtins and 40% less memory use thanks to pointer compression, these features and changes will improve the performance and code productivity.

Let’s see them one by one —

Optional chaining (?.)

Image for post
Image for post
Photo by Wen Zhu on Unsplash

When accessing the nested object properties we need to do a manual check for properties existence, i.e., if they are nullish (null or undefined) or not.

// Error prone-version, could throw.
const nameLength = db.user.name.length;
TypeError: Cannot read property 'length' of undefined, if user is nullish

If they are nullish and we try to access it, JavaScript would throw an error: TypeError: Cannot read property 'property name' of undefined. …


An in-depth guide to some important console API functions other than console.log

Image for post
Image for post
Console API Functions

The Console API’s most commonly used method is undoubtedly console.log. However, it also comes with several other useful methods that can improve our debugging efficiency.

Let’s dive in 🏊 and understand some of the other methods👇

Note: All methods are available in NodeJS as of version 10.0.0 and in almost every major browser.

console.table(data[, properties])👇

While debugging, if there is a complex nested object or an array of objects of the same type, we face difficulty in reading, understanding, and comparing objects.

console.table() is here to rescue us. It presents the data in a clear tabular format. Hence, improving the readability.

The method takes two…


A cheat sheet

Image for post
Image for post
VS Code shortcuts

This article hopes to help people using VS Code to code even faster.

Not everyone has time to go through every tip and trick to find the ones that help them code faster — there’s just too many.

So I’ll list my favorite shortcuts that make me a fast coder.

Let’s start.

Join Line

Image for post
Image for post
Join line
  • On Mac: Ctrl+J
  • On Ubuntu, Windows: Open keyboard shortcuts from File > Preferences > Keyboard shortcuts, and bind editor.action.joinLines to a shortcut of your choice.

Code Formatting

This shortcut helps to indent the code as already set up in the editor settings.

Image for post
Image for post
Code formatting

Tip: Use this in the end or the start. I prefer using it when I’m done with the code in a file. …


Image for post
Image for post
Face-API.js

In this article, we will learn about face detection (Age/Gender/Face Positions/Mood) using face-api.js and the nearby object detection (Person/Phone etc) using coco-ssd model on the web browser.

face-api.jsis a javascript module, built on top of tensorflow.js core, which implements several CNNs (Convolutional Neural Networks) to solve face detection, face recognition and face landmark detection, optimized for the web and for mobile devices.

Let’s start now,

Prerequisite :

  1. Basic understanding of React.js (You may choose any library or frontend framework of your choice)
  2. Basic understanding of p5.js library.
  3. Installed create-react-app and Node.js version >= 10.15.1

Let’s create a react project,

npx create-react-app object_face_detection
cd object_face_detection

Now, install the below dependencies

npm install @tensorflow-models/coco-ssd
npm install @tensorflow/tfjs-converter
npm install @tensorflow/tfjs-core
npm install face-api.js
npm install p5
npm install…


Javascript reach has increased from just a web browser to all places of programing.

Image for post
Image for post
Private Class Field, String.matchAll(), Numeric Separators BigInt, Local String BigInt, GlobalThis, Promise.allSettled(), Dynamic Import

Javascript reach has increased from a web browser to all places of programming.

  1. Node.js — Used for CLI and Server.
  2. Electron — Used for cross-platform desktop Apps.
  3. React native — Used for cross-platform mobile Apps.
  4. IoT — Low-cost IoT devices, now support javascript.

Recent updates to v8 engine have increased the performance a lot. The javascript parsing is 2x faster, promise on an avg is 11x faster on node version ≥11 from node version 8. The memory consumption as decreased -20%. So there is an improvement in performance and usability.

In this article, we will see some of the presents and purposed features that you can test in chrome browser (version ≥76) or Node.js(version …


Make your experience in the editor colorful, streamlined, and powerful

Image for post
Image for post
Photo by Yancy Min on Unsplash

Before we start, let’s see if you can answer this question: What are the differences between Visual Studio Code and Visual Studio?

For those who don’t already know, Visual Studio is a full-featured and convenient development environment.

VS Code is an open-source, cross-platform source code editor that’s become famous, particularly in the web development community. It’s fast, extensible, customizable, and has tons of features.

I’ve been using VS Code for a long time. Being a full-stack developer, I’ve tried a lot of extensions. …


Image for post
Image for post
Object in Javascript

Nearly everything in JavaScript is an object other than six things that are not objects which are — null,undefined, strings, numbers, boolean, and symbols. These are called primitive values or primitive types.

Anything that is not a primitive value is an Object. That includes arrays, functions, constructors, and objects themselves.

Yes! Functions and arrays are objects too as we shall see later in the article.

Objects

Conceptually, Objects are the same in all programming languages i.e they represent real-world things that we want to represent inside our programs with characteristics/properties and methods.

For example, if your object is a student, it will have properties like name, age, address, id, etc and methods like updateAddress, updateNameetc. …


Image for post
Image for post

Generator (ES6)

Functions that can return multiple values at different time interval, as per the user demands and can manage its internal state are generator functions. A function becomes a GeneratorFunction if it uses the function* syntax.

They are different from normal functions in the sense that normal function run to completion in a single execution whereas generator function can be paused and resumed, so they do run to completion but the trigger remains in the developer’s hand. They allow better execution control for asynchronous functionality but that does not mean they cannot be used as synchronous functionality.

Note: When generator function are executed it returns a new Generator object. …


Image for post
Image for post

This is the fourth post of the image processing series from zero to one.

Here is the list of other posts

  1. Image Processing — OpenCV and Node.js (Part 3)
  2. Image Processing — Making Custom Filters — React.js — Part 2
  3. Image Processing Using Cloundinary (Part 1)

In this post, we will build an image object detection system with Tensorflow-js with the pre-trained model.

To start with, there are lots of ways to deploy TensorFlow in webpage one way is to include ml5js. Visit https://ml5js.org/. Its a wrapper around tf.js a tensor flow and p5.js …

About

Deepak Gupta

I write about everything related to programming in the easiest and simplest way I can. Connect with me via https://bit.ly/2RUN1RW and Do follow me :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store