Tips for writing short, concise, and clean JavaScript code

You must have seen the guy in the picture above. He simplifies everyday things — and that’s exactly what we are going to do with JavaScript in this article.

JavaScript has a lot of cool features that most beginner and intermediate developers don’t know. I’ve picked out 10 hacks that I use in my everyday JavaScript projects.

1. Conditionally Add Properties to Object

We can use the spread operator, ..., to quickly add properties to a JavaScript object conditionally.

const condition = true;const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};

The && operator returns the last evaluated…


Find out how the most widely-used protocols for authentication and authorization really work

Cover Image
Photo by James Pond on Unsplash

We’ve all seen the “sign in with Google” and “connect to Facebook” buttons on websites and mobile apps. Click the button and a screen opens that says, “This app wants to access your public profile, contacts…” and asks you whether you want to give access. This is OAuth at a high level. Understanding these protocols is crucial for every software engineer, security expert, and even hacker.

TL;DR

A complete guide to OAuth 2.0 and OpenID Connect, the two most widely used protocols on the internet today for authorization and authentication. OAuth 2.0 is used for authorization and OpenID Connect is used…


And things I wish all the developers follow

Image Source: Freepik

Do you also hate code that is not written well? Well, I really do. I’ve worked with many junior and senior developers who just write code to get things done. They don’t have any passion for writing clean, readable, and properly structured code.

Well-written code becomes more important when you’re writing it for an organization. If you work on a project and later leave the organization for some reason then the bad code you wrote can become a pain in the neck for the developer who joins the project later.

I am currently experiencing a similar situation. The organization asked…


Write less and do more with JavaScript

Image by author

With JavaScript, you can do one thing in many different ways. Also, JavaScript is evolving with the release of every new ECMAScript specification, adding new useful methods and operators to make the code shorter, and somewhere more readable.

After offering ten JavaScript tricks, I’ve decided to share five more tricks that you can do with JavaScript.

1. Object.entries

Most developers use Object.keys method to iterate over an object. This method only returns an array of the object keys, not values. We can use Object.entries to get both key and value.

const person = {
name: 'John',
age: 20
};
Object.keys(person); // ['name'…


Useful hooks for extracting and reusing react code and JS logic

Hooks are great for extracting logic into reusable functions. There are a lot of npm packages offering built-in custom hooks. I personally don’t like to install some npm modules just to get the functionality that I can write myself with barely ten lines of code.

I’ve compiled a list of seven useful common hooks that I’ve made for use in my projects.

1. useToggle

This hook is pretty common, and it is used for toggling a boolean value between true and false. It is useful when we want to show/hide modal or open/close side menu. …


Structure your react application with bootstrap or react-bootstrap

Structuring your app with sass, bootstrap, and react is kind of tricky when you want to do theming, use bootstrap’s defined Sass mixins or want to define and use your own extensions with sass. This is a complete guide to structure your react app with sass and bootstrap.

Initial Setup

Create a React App

It is easy to use sass with create-react-app as it is already configured for processing sass files, you just need to install node-sass like:

$ npm install -D node-sass

And bootstrap itself

$ npm install bootstrap

Users other than create-react-app

For those who are not using create-react-app, you may need to install the following modules

$…


Perks of being a programmer

Photo by Aziz Acharki on Unsplash

People belonging to different industries may have different perspectives to see the world. However, being a programmer helps you a lot in performing daily life tasks smoothly.

Sharing few things that I really enjoy being a programmer. Programmers can do some tasks more efficiently than people from other professions.

#1 Logical thinking

Thinking logically or finding logic in everything is what makes a programmer a real programmer. Writing code is all about thinking, you can’t just write a few lines of code without thinking that what these lines would do.

Making important decisions in your life or being creative is necessary for developing…


New features for customizing your profile & stories

Ever thought of changing the font styles of headings or body of your Medium articles? Or changing the layout of your profile? Setting background-color of your profile page? Medium added a new Design feature that allows you to customize your profile, set font styles for your stories, change accent colors of buttons, and add a logo to your profile name instead of plain text.


Make a custom build pipeline for minifying and compressing your assets

An important factor that affects the performance of a website is the size of resources requested by the browser. CSS and JavaScript source files are among the top of these resources. If you do not handle them efficiently, they can considerably increase page load time. Get the app repo here.

What you will get from this piece?

In this article, we’re going to build a server-rendered application in Nodejs by implementing:

  • Asset minification and compression using Gulp and Brotli.
  • A development environment where assets are minified and compressed in real-time.
  • A build process that can make distributable assets for deployment.

Also, you will get some familiarity with…


A VS Code extension for working with Mongo right in your IDE

Photo by Danielle MacInnes on Unsplash.

Visual Studio Code has become the favorite editor of developers. MongoDB has introduced a new extension for VS Code that makes it super easy to work with Mongo.

What’s in the Pack?

VS Code is struggling to make developers more productive. Meanwhile, MongoDB has built an extension called MongoDB for VS Code that allows you to connect to MongoDB Shell and MongoDB Atlas right away from your editor. Now you don’t have to navigate to your terminal to connect to Mongo Shell or use GUI tools like MongoDB Compass, Robomongo, etc. to perform basic Mongo operations.

With the extension, you can:

  • Connect to MongoDB…

Haseeb Anwar

I write about JavaScript and personal experiences. Subscribe to get a story delivered to your inbox every week — haseebanwar.net

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