DEV Community: Sunny Praksah

Bookplorer

Sunny Praksah — Sun, 03 Jan 2021 18:19:06 +0000

What I built

I have built Bookplorer app, a dedicated book finder. I have used Svelte ecosystem and neumorphic style. It is deployed using DigitialOcean's App platform.

Category Submission:

I would say this falls into the "Program for the people" category. The reason is pretty much clear, It will help users to find books.

App Link

Since the app itself has been deployed to DigitalOcean, live demo can be found over here

Screenshots

Description

Bookplorer is all about finding your favorite books, share them with your friends on social media or you can buy them. It is backed by Google Books API. You can explore books with the help of volume or Author name. Decorated with neumorphic style, this app comes with a lean and clean UI.

Link to Source Code

Github repo link: https://github.com/sprakash57/Bookplorer

Permissive License

Bookplorer is licensed under the MIT license.

Background

Of course, you can google anything and everything. But sometimes results become cluttered with other non-wanted articles and materials. Bookplorer has one goal, that your search results should reflect books by removing other distracting stuff.

In this pandemic, I felt that people should have utilized most of their time by reading books. Books, they thought that they will read someday. This utility will help you search those books, share them with your friends, or buy them.

How I built it

Bookplorer is built using Svelte ecosystem. Yes!! I ditched Vue and React. Why? Because I really wanted to learn this awesome framework by building something. Well, what's better than a hackathon. The icing on the cake was DigitalOcean's app platform that made the deployment process "A Child's play". Most importantly the Autodeploy code changes feature.

Additional Resources/Info

It was not possible to build the app without Google Books API and Svelte tutorial

That's about it

Do checkout my other blogs here. Follow me on Twitter @sunny_pr_ to get updates on the latest blog. Thanks for reading!!

Beyond console.log()

Sunny Praksah — Mon, 02 Nov 2020 06:49:59 +0000

When it comes to debugging JavaScript application, there could be multiple ways such as using browser's devtool or use of the debugger keyword in your code. But the most popular technique is to put console.log() inside your code. I know most of us will complain against the practice of using logs directly in your code. But honestly, everyone does that. You can not deny the fact 😁. What if I tell there are more ways of using Conosle API and its method that you probably wouldn't think of. It will definitely enhance your logging experience. So without further ado, let's do further

console.log()

The most common method of all time. But I won't talk about the boring stuff that you might know already. There are some nifty features that will stand out in your logs in devtool. Like formatting the text with CSS styling and outputting c-like strings. Let's take an example -

const str = "'Sunny Prakash'"
console.log("Hi! I am %s", str)
// Hi! I am 'Sunny Prakash'

You can even go one step further and create your own styled logger function and use it instead of plain old console.log().

If you are wondering what CSS property you can use, I have jotted them down for you.

background
border
border-radius
box-shadow
clear and float
color
cursor
display
font-related properties
line-height
margin
outline
padding
text-* properties such as text-transform
white-space
word-spacing
word-break
writing-mode

console.dir()

Have you ever used console.log() to print HTML elements as object just to verify properties like value, target, style, classes, and innerHTML, etc but you failed miserably? Because all it would print is -

<button>Simple button</button>

Not enough intel, right?! Well, console.dir() solves this problem and opens up that HTML element. It will log them as objects so you can explore every property of it without any hassle.

console.info(), .warn() and .error()

If you are 100% sure that whatever you are logging is info/error/warn then instead of using console.log(), go for these options. Why? Because you can create your own warning/error messages in certain scenarios, that doesn't come with javaScript naturally. It might help a fellow developer to stick to guidelines while developing any story or fixing any bug. Messages will appear in a different format and color that makes them easy to detect.

console.info("Write clean code");
console.warn("Warning!! you better don't think of doing it");
console.error("You just did, and you got the error afterward");

Oh! and did I mention, that you can still apply text formatting and all other good stuff which we learned in console.log()

console.group([label]) and groupEnd()

As the name suggests you can group together a certain number of consoles together. For example, let's say you put consoles inside a method at several places and you are repeating the same thing with another function as well. To make those logs visually distinctive what you can do is to put strings such as console.log('func1', ...) and console.log('func2', ...). But why make logs more verbose when you actually group them together there, wouldn't that be great?

console.group([label]) takes an optional parameter called label that acts as a group name. If you don't provide label the default value would the function name. You can nest a group inside a group as well. grouping will be closed if you call groupEnd() method at the last.

console.group("Group A")
console.log('something')
console.group("Nested inside A")
console.log('something again')
console.groupEnd()
console.groupEnd()

console.assert(assertion, [object, string] )

If you have ever written unit test cases then you must be knowing what assertion is. If you don't, well let me brief. Assertion means testing a functionality against a certain scenario. You simply assert a condition and check the output whether it is expected or not. If that is the case then the test case passes otherwise it fails. Console API provides you a way to log errors only if some assertion fails. Eg:-

for (let i=0;i<=5;i++){
    console.log("checking %d...", i);
    console.assert(i%2===0, "%d is not divisible by 2", i)
}

console.table([object, array])

console.table() takes either an object or an array and displays them in tabular format. You heard it right "in a table" without any extra line of code. You won't believe how easy it is to read them.

If you want to display only a few columns, well you can do that as well -

console.table([fooBar, jhonDoe], ["name"])

console.trace([...any, ...data])

This method prints a stack trace to the Web console. It's a miniature version of the browser's call stack that will appear in the console tab on the fly. So now you can check the call stack without even using debug tools 😆.

And with this, we come to wrap this session. I hope you have found this article of some use. Let me know in case I have missed something in the comments or you can visit my website to provide your valuable feedback.

Let's talk about ES2020

Sunny Praksah — Sun, 25 Oct 2020 06:22:07 +0000

As 2020 is about to complete its tenure, most of us do not want to remember this year at all. But good things happened as well. One of them is ES2020, which we will discuss in this post.

ES2020 A.K.A ES11 is the latest set of standards included in EcmaScript. A little background of EcmaScript, they are those who decide the standard way of writing JavaScript code, such that the interoperability of Web pages across different Web browsers must remain intact.

Why are we going through this?

Day by day different projects are opting for ES6+ standards globally. To keep up with the pace, the sooner you will start adopting new features, the better. New features tending more towards TypeScript like features (but without types). Also, it is less confusing, more straight-forward, and feels like other Object-oriented Programming languages.

P.S:- Since this post is quite long. I don't want you to sleep or get rid of it. You can access this GitHub gist here and have a quick look around.

Let's proceed, shall we?

1. BigInt

If I ask, what is the largest number in JavaScript? The Answer should be 2⁵³ - 1. What if you want to represent numbers more than that figure? You have BigInt. A BigInt is a number appended by suffix n. For example 223n is a BigInt. What is this? Looks like a string. But it's not. You see, when you will try to execute typeof 223n it will give you bigint. Boom!!! A new type in JavaScript. So in your next interview, If someone asks what are the types in JS, you know what to tell them first. You welcome!!

Since we are talking about JavaScript, strange things are eminent.

"1" + 10n will give "11". But 1 + 10n will throw an error stating "you can not mix bigint and other types". However, you can compare Number and BigInt with the breeze. More examples are here.
BigInts are loosely equal to Number.
It can not be used with methods built in Math Object.
You can use toString() method, that will return string representation of bigint minus n suffix. So 112n.toString() will result in "112".

One use case, I can think of is in Problem Solving, where you will be given a long integer and you will be told to do some operation on it. the most tempting way would be to convert it to string and proceed. But now you know the other way as well.

2. Promise.allSettled()

You have used Promise.all and you must have thought, why there isn't a way to get the result irrespective of promise status. Well my friend, you are in luck. Because Promise has this new API that will give you all settled(resolved/rejected) every single time. It will return an array of resolved or rejected objects {status: "fulfilled", value: "Just arrived"} or {status: "rejected", reason: "Some popular error"}. Let's look at the example -

Promise.allSettled([
    new Promise(res => setTimeout(() => res(1), 3000)),
    new Promise((res, rej) => setTimeout(() => rej(new Error("Oops")), 5000)),
    new Promise(res => setTimeout(() => resolve(3), 1000))
]).then(data => console.log(data));

Output -

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: Error: oops...},
  { status: 'fulfilled', value: 3 }
]

Promise.all([
    new Promise(res => setTimeout(() => res(1), 3000)),
    new Promise((res, rej) => setTimeout(() => rej(new Error("Oops")), 5000)),
    new Promise(res => setTimeout(() => resolve(3), 1000))
]).then(data => console.log(data));

Output -

UnhandledPromiseRejectionWarning: Error: Oops

3. Nullish Coalescing (??)

If you have ever used TypeScript, you must have come across this operator. It's more like an inbuilt undefined safety feature. Previously we had || to fallback if the first operand results in falsy. ?? is different. It will strictly check whether the first operand is undefined or not. For example -

console.log(undefined || "1"); // "1"
console.log(undefined ?? "1"); // "1"
console.log(0 || "1"); // "1"
console.log(0 ?? "1"); // 0

Just remember this - undefined is always falsy, but not all falsies are undefined.

4. Optional chaining (?)

This again hails from the world of TypeScript. If you are fetching some multi-level nested JSON object, and want to access any deep properties inside that JSON, two things might happen. Either you will get it or not. That might break your application due to the infamous "Reference Error". Let's take an example -

const response = {
    first: {
        second: { 
            fourth: "this you want to access"
        }
    }
}

What will happen if I access "third", which is not there?

console.log(first.third.fourth); //Reference error for third
console.log(first?.third?.fourth); //undefined

5. globalThis

this was a nightmare for all JS veterans already, what's up with globalThis. Well, it has nothing to do with this, not directly. You see, the global object in javaScript was not standardized. You have window in browsers, global in node.js, and self in web workers. Imagine your production code has all of these components, how could you count on your global "this" without writing messy checks in all places. With ES2020, there are less confusion and more standards. You can use globalThis, that's all!! No need to worry about the environment.

6. Dynamic Imports

In the new ES2020 you can use dynamic imports. How? imports are no longer bound to be imported first and use later. Now you can import your methods, object, etc dynamically. It will return a promise that you need to handle.

print.js

const print = (value) => `Hi ${value}`

export { print };

greet.js

const greet = value => import('./print.js).then(func => func(value));
greet("sunny"); //Hi sunny

7. String.prototype.matchAll()

Unlike match() it will return an iterator. The results can also be achieved with regexp.exec() however below example will show you how the number of lines can reduce drastically.

const regexp = RegExp('[a-z]*ame','g');
const str = 'rame suot name vjaoi game';
let match;
while ((match = regexp.exec(str)) !== null) {
  console.log(match)
}
// Same as
console.log(...str.matchAll(regexp));

Integrate express-validator to your express API

Sunny Praksah — Tue, 29 Sep 2020 14:47:23 +0000

The original post can be found over here.

Why do I need express-validator?

Short and simple if your UI is using forms or multiple input fields and in the backend express application you want to validate those data against database schema, then you need to validate them first before you actually process it. Sure, you can do all the validation manually by writing all sorts of logics and regexes. But why reinvent the wheel if something is doing that for you already. This is where the express-validator library comes in.

I hate too much dependent libraries. what about it?

express-validator is a wrapper around validator.js and uses lodash for its data manipulation, that's it. So basically you have two dependencies. I am sure you must have using lodash already, so no extra packages and libraries to take care of.

Ok genius, but I can write my own middleware to achieve it? how this library of yours better than that?

Man, you are a tough nut to crack. Of course, you can do everything in this world by yourselfff. But think about how easy it will be to validate your express routes. You can do that out of the box by using express-validator in your express application. Ohh and Did I mention you can also sanitize your data? Plus you have all the freedom to customize your error messages. Keep reading and I will show you how.

To explain things I will be taking reference from one of my Github repo https://github.com/sprakash57/Contrivocial.

Prerequisite

node.js v6+

Installation

npm i -S express-validator

P.S: At the time I am writing this blog, express-validator has version 6.6.1. It may not be the same for you.

Usage

Step 1 - middleware/validation.js (Just to keep every validation at a single place).

Here I am taking an example of user registration with 3 fields namely name, email, & password.

const { check } = require('express-validator');

exports.signupValidation = [
    check('name', 'Name is requied').not().isEmpty(),
    check('email', 'Please include a valid email').isEmail().normalizeEmail({ gmail_remove_dots: true }),
    check('password', 'Password must be 6 or more characters').isLength({ min: 6 })
]

You need to import check first. It takes two parameters. The first one is the field and the second is the error message that you want to send in the response.

You can chain methods on the check to carry out the validations like isEmail or isEmpty. Want some sanitization, you can append sanitization methods as well. A Useful list can be found over here. My favorite is normalizeEmail({ gmail_remove_dots: true }). It will treat sunnyprakash@gmail.com and sunny.prakash@gmail.com as equal.

const { signupValidation } = require('../../middleware/validation');

router.post('/register', signupValidation, userController.register);

The second step is all about tweaking your routes. Inside the user registration route, I have introduced signupValidation middleware that was created in step 1.

Step 3 - controllers/user.js

Now Its time to change our user registration controller a little bit. To catch all the validation messages inside this controller I have imported validationResult from express-validator.

const { validationResult } = require('express-validator');

exports.register = async (req, res) => {

  const errors = validationResult(req);

  if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

  ......

  ......

}

To get the messages out of the signupValidation method present inside validation.js, you need to pass the request object to it. Once that is done, you can access all error messages in an array format by using errors.array().

And that's all folks, you don't need to touch your app.js. I have just scratched the surface. There is a lot you can achieve. But I think This would be sufficient for a beginner getting started with express. To dig in more you can read their official doc https://express-validator.github.io/docs.

Check out the complete implementation of the above in my Github repo over here. See if it helps to set things up for you. A star to the repo would be highly appreciated.

5 less common array methods in JavaScript

Sunny Praksah — Mon, 25 May 2020 03:30:53 +0000

The title "Less common" holds since I haven't seen them getting used very frequently. Because there are popular data structure libraries (lodash, underscore, etc) present out there to do the heavy lifting. I won't be talking about those methods. Let's cover what vanilla JavaScript has to offer -

copyWithin(target[, start[, end]])

As the name suggests it copies part of an array to other locations in the same array. Here copying process is shallow, which mutates the original array. It takes three parameters.

target - Index at which copy the sequence to. The negative index will be counted from the end. If the target is equal or greater than arr.length then nothing will be copied
start - Index at which to start copying elements from. The same negative indexing concept applies here as well. If omitted then copying will start from index 0.
end - Same usage as start. The only difference is copyWithin() does not include this index. Lets take an example to understand them -

const arr = ['john', 'doe', 'foo', 'bar', 'egg'];
console.log(arr.copyWithin(0,1,3)); //Answer - ["doe", "foo", "foo", "bar", "egg"]

flatMap(function callback(currentValue[, index[, array]])

It maps every element of an array using the callback function and returns a new flatten array. So basically its a fusion between flat and map methods (like Goku + Vegita = Gogita 😁 - DBZ fans). Lets observe its super powers -

const arr = ["Hi I am", "", "Sunny Prakash"];
console.log(arr.flatMap(x => x.split(" ")));
//[ 'Hi', 'I', 'am', '', 'Sunny', 'Prakash' ]

Tokenization achieved!! Pretty cool right.

every(callback(element[, index[, array]])[, thisArg])

Let say you have an array of objects. And you want to return true/false based on some condition that has been satisfied by every object present in the array. Huh!! what's the big deal you can achieve it with find. In a way yes, you can. But I mentioned you should specifically return booleans. every should be your first weapon in your arsenal to tackle this situation. every takes two parameters. First is the callback and the second can be used as 'this' for the callback. The callback itself takes three parameters namely array element, index of the element, and the array itself. For example -

function isBelowTotal(current, i, originalArray){
return current < this.total * this.tax
}
const arr = [1, 30, 39, 29, 10, 130];
console.log(arr.every(isBelowTotal, {tax: 0.4, total: 100}));
// false

some(callback(element[, index[, array]])[, thisArg])

some is same as every method. Except one condition but most important one. It tests whether at least one element in the array passes the condition implemented in the callback. So if every works like an && operator then some works like || operator.

const employee = [
{name: 'sunny', gender: 'male'},
{name: 'Rakesh', gender: 'male'},
{name: 'Indrani', gender: 'female'}
]
cons hasFemaleEmployee = employee(emp => emp.gender === 'female');
//hasFemaleEmployee = true

slice([begin[, end]])

I won't say it is used rarely, but people often get confused between slice and splice. So I have included in my list. slice takes two indices of which the second one is excluded and it will return a new array containing a sliced portion of the original array. Note here that the original array will not be mutated.

const alpha = ['A', 'B', 'C', 'D', 'E'];
const sliced = alpha.slice(2);
console.log(sliced); // ['C', 'D', 'E']
console.log(alpha); // ['A', 'B', 'C', 'D', 'E']

splice, on the other hand, changes the content of the original array by replacing or removing elements. Its first parameter is the start index and the second is deleteCount. However, there is a third parameter that exists as well which distinguishes whether splice will remove or replace elements. splice also returns the removed element, but it will modify the original array as well.

const alpha = ['A', 'B', 'C', 'D', 'E'];
const spliced = alpha.splice(0,1);
console.log(spliced); // ['A']
console.log(alpha); // ['B', 'C', 'D', 'E']

For further reading, you can refer to MDN Docs. You can find the original post here.

Let me know your feedbacks in the comment.

Add Eat Repeat

Sunny Praksah — Sat, 18 Apr 2020 14:05:30 +0000

This lockdown has given us opportunity to invest time in ourselves, explore, learn and create things. Well this app is on of those good things. Take a look here
https://play.google.com/store/apps/details?id=com.insu.sunny.addeatrepeat

Last time i created an app with react-native-cli. Apart from code writing i had to take care of several other things. Well this time things changed. I tried my hands on Expo and its managed work flow. I was pretty impressed the way Expo hold your hands from development environment till app store bundle generation with via their extensive doc. Only downside was the size of the app.

Do you think Expo is worth exploring? Would you prefer it over vanilla react-native-cli?