DEV Community: nikhilmwarrier

Quick Tips: String Padding in JS

nikhilmwarrier — Thu, 27 May 2021 00:00:00 +0000

Quick Tip #1: String Padding in JavaScript

Use the padStart() string method with the string length and the string to fill the padding with.

Example:

const text = "Party"
text.padStart(7, "🎉 ") //"🎉 Party"

Actual Use Case

Suppose you have an array of binary numbers which need not necessarily be in the standard 8-digit format. We want to add "padding" to it so it looks like the 8-digit eyecandy we all know and love.

Here is how to do it:

const binaryNums = [0, 1101, 011010, 1010]
const paddedBinary = []

binaryNums.forEach(num => {
  const str = num.toString(); // convert to string
  const paddedStr = str.padStart(8, "0") // fix the length of string at 8, and add padding with "0"
  paddedBinary.push(Number(paddedStr)
})

// paddedBinary = [00000000, 00001101, 00011010, 00001010]

See the MDN Docs for more info.

FluidCSS v0.5 released!

nikhilmwarrier — Wed, 25 Nov 2020 08:34:16 +0000

Hey!
I have been working on a CSS library called FluidCSS, and after a fortnight of hard-coding, v0.5 is here!

Ideals behind FluidCSS

FluidCSS is a CSS library designed for customisability, and is especially aimed at designers/developers who want to quickly make a working prototype of their design.

Which means, it has all the stuff you might need, like toggle switches, custom not-ugly checkboxes, radio buttons, modals, etc.

Another highlight is full customisability with css variables without any preprocessors [like sass, less, etc.]

What is doesn't have is a solid layout system. And it was on purpose. This removes memorising of unnecessary class names and stuff that would require a steep learning curve.

If you are asking why FluidCSS exists when there are viable alternatives like Bootstrap or Bulma, there are two reasons:

A. It's like comparing Photoshop to MS Paint. Photoshop is an advanced tool with a really steep learning curve, but Paint is a simple and intuitive tool. If you want to quickly crop a photo, which one would you rather choose?

B. The second reason is rather personal: I was dead bored, thanks to COVID-19.

Here is the GitHub repo:

nikhilmwarrier / fluidcss

A minimal, hackable css library with responsive design in mind.

FluidCSS v0.7

Welcome to FluidCSS v0.7!

Changelog

This is a complete rewrite and overhaul. Some key changes are underlined below:

New Build System

FluidCSS is now written in Sass! [More specifically SCSS] (This was mainly due to maintainability issues while writing a big library in vanilla CSS.)
We now have a Responsive Grid system!
Added a better button ripple animation [as seen in Material Design]

Shoutout to all stargazers and contributors!

View on GitHub

The project is live at https://nikhilmwarrier.github.io/fluidcss

Contributions very wholehartedlly welcome!

PS: Also, be sure to check out the animated gradient on the Homepage!

Some Screenshots:

Inviting frontend devs to FluidCSS!

nikhilmwarrier — Thu, 12 Nov 2020 09:27:08 +0000

Hey there!

I used to use stuff like Bootstrap and other CSS libraries, but I noticed that there were a lot of stuff that actually wasn't used, but negatively contributed on file size and loading speeds.

Check out this video from Gary Simon at Design Course. This video goes more in-depth on this particular topic, and is one of my sources for inspiration.

Due to these reasons, I decided to create a frontend CSS framework that was focused on customisability and speed, and removing stuff that won't be used.

After a lot of abstract thoughts, I created FluidCSS.

FluidCSS is designed to be easy to customize, and has all the basic stuff you will need, but you must code everything else yourself.

For example, there is a class to create a toggle switch, but there is no grid layout system.

This drastically changes everything.

For one, the file size is a lot less.
Also, beginner developers will not be overwhelmed by the CSS and it will encourage them to tweak the styles.

It will also help more experienced developers to rapidly prototype their designs without worrying about re-creating the same old components or adding a new color scheme.