{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: nikhilmwarrier","description":"The latest articles on DEV Community by nikhilmwarrier (@nikhilmwarrier).","link":"https:\/\/dev.to\/nikhilmwarrier","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F474411%2F56e9fd95-179e-4be2-b723-d989e091912f.png","title":"DEV Community: nikhilmwarrier","link":"https:\/\/dev.to\/nikhilmwarrier"},"language":"en","item":[{"title":"Quick Tips: String Padding in JS","pubDate":"Thu, 27 May 2021 00:00:00 +0000","link":"https:\/\/dev.to\/nikhilmwarrier\/quick-tips-string-padding-in-js-3583","guid":"https:\/\/dev.to\/nikhilmwarrier\/quick-tips-string-padding-in-js-3583","description":"

\n \n \n Quick Tip #1: String Padding in JavaScript\n<\/h1>\n\n

\"An<\/a>

\nUse the padStart()<\/code> string method with the string length and the string to fill the padding with.<\/p>\n\n

Example:
\n<\/p>\n\n

\n
const text = \"Party\"\ntext.padStart(7, \"\ud83c\udf89 \") \/\/\"\ud83c\udf89 Party\"\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
\n  \n  \n  Actual Use Case\n<\/h2>\n\n
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.<\/p>\n\n
Here is how to do it:
\n<\/p>\n\n
\n
const binaryNums = [0, 1101, 011010, 1010]\nconst paddedBinary = []\n\nbinaryNums.forEach(num => {\n  const str = num.toString(); \/\/ convert to string\n  const paddedStr = str.padStart(8, \"0\") \/\/ fix the length of string at 8, and add padding with \"0\"\n  paddedBinary.push(Number(paddedStr)\n})\n\n\/\/ paddedBinary = [00000000, 00001101, 00011010, 00001010]\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
See the MDN Docs<\/a> for more info.<\/p>\n\n","category":["javascript","webdev","tips","todayilearned"]},{"title":"FluidCSS v0.5 released!","pubDate":"Wed, 25 Nov 2020 08:34:16 +0000","link":"https:\/\/dev.to\/nikhilmwarrier\/fluidcss-v0-5-released-57j5","guid":"https:\/\/dev.to\/nikhilmwarrier\/fluidcss-v0-5-released-57j5","description":"
Hey!
\nI have been working on a CSS library called FluidCSS, and after a fortnight of hard-coding, v0.5 is here!<\/p>\n
\n  \n  \n  Ideals behind FluidCSS\n<\/h2>\n\n
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. <\/p>\n\n
Which means, it has all the stuff you might need, like toggle switches, custom not-ugly checkboxes, radio buttons, modals, etc.<\/p>\n\n
Another highlight is full customisability with css variables without any preprocessors [like sass, less, etc.]<\/p>\n\n
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.<\/p>\n\n
If you are asking why FluidCSS exists when there are viable alternatives like Bootstrap or Bulma, there are two reasons:<\/p>\n\n
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?<\/p>\n\n
B. The second reason is rather personal: I was dead bored, thanks to COVID-19. <\/p>\n\n
Here is the GitHub repo:<\/p>\n\n\n
\n  
\n    
\n      \"GitHub\n      \n        nikhilmwarrier\n      <\/a> \/ \n        fluidcss\n      <\/a>\n    <\/h2>\n    
\n      A minimal, hackable css library with responsive design in mind.\n    <\/h3>\n  <\/div>\n  
\n    \n
\n
\nFluidCSS v0.7<\/h1>\n
Welcome to FluidCSS v0.7!<\/p>\n
\"FluidCSS<\/a><\/p>\n
\nChangelog<\/h1>\n
This is a complete rewrite and overhaul. Some key changes are underlined below:<\/p>\n