Forem: Rohan Villoth

How to replicate a PDF template into multiple pages

Rohan Villoth — Mon, 09 Aug 2021 20:27:51 +0000

I've been using poppler for command line operations on PDFs, like split, merge, conversions, etc., as part of my workflow. My usual use-case is merging PDFs generated from SVGs, like described here in my article on creating multipage PDF documents from SVGs. Using commands for stuff like this can improve efficiency and productivity, whereas most GUI based methods would've made this process more time consuming and repetitive. So, when I found my significant other manually duplicating inner pages for her Amazon KDP notebook template, I set out to find a command to automate it.

Surprisingly, I couldn't find a built-in method on any CLI tool to do this directly. So, I used my Google-Fu and got this two liner working:

for i in {1..120}; do cp template.pdf template-$i.pdf; done
pdfunite template-*.pdf merged.pdf

The first command creates 120 copies of the template. Adjust the number as per your need. The second one then merges all these copies as pages into one PDF file. Make sure you have poppler-utils installed for pdfunite command to work. Windows users need to use a bash compatible shell like PowerShell or a Linux distro through WSL.

Credits & Sources

Build an Android app with Ionic, without Android Studio

Rohan Villoth — Fri, 18 Jun 2021 22:22:53 +0000

Ionic 5's official documentation recommends using Android Studio to build the project. However, I can think of a few reasons to sidestep Android Studio in the build process:

Android Studio is relatively resource-intensive
A command-line method could be simpler and faster than opening up a full-blown Android development environment
Using Android Studio just for the build process might break your workflow, if you've gotten comfortable with your existing development chain, say VScode and the CLI tools

Whatever your reasons are, Android apks could be built from your Ionic 5 project with a few extra commands. Before building, you can test if your app runs fine in the browser with this command:

ionic serve

If you don't have an Ionic 5 project ready, create a blank project with this command:

ionic start sample-ionic-angular-app blank --type=angular --capacitor

Refer to Ionic 5's first app docs for more details on how to get started with Ionic app development.

Step 1: Build the Ionic project

ionic build

Step 2: Add support for the Android platform

ionic capacitor add android

Step 3: Sync changes from your Ionic project to the Android part

ionic capacitor sync

Step 4: Build for Android and generate apk

cd android && ./gradlew assembleDebug && cd ..

If the build completes successfully, you'll find your app's apk at android/app/build/outputs/apk/debug/app-debug.apk. From now on, whenever you need to build for Android, you need to repeat only steps 3 and 4.

Credits & Sources

How to build an Android APK file without using Android Studio in a Capacitor project?
Cover image created from logos of Android and Ionic

Why bootstrap utilities makes your Ionic development easier

Rohan Villoth — Thu, 17 Jun 2021 21:34:28 +0000

Ionic makes it easy for web developers to build mobile and web apps with the same codebase. And it's latest iteration, Ionic 5, provides a responsive grid and some basic CSS utilities. However, coming from a background of web development with Bootstrap 4, I missed responsive utility classes based on breakpoints. Things like ml-md-5 for a left margin of 5 units on medium screen sizes and up and px-xl-3 for a horizontal padding of 3 units on extra large screen sizes and above. See the spacing utilities docs of Bootstrap 4 for a better idea. In contrast, Ionic only had basic ion-padding-<direction> classes with no option for choosing padding size or breakpoints.

So, I searched for a way to get these utility classes on my Ionic 5 project and found Bootstrap Utilities, a package providing only the utilities portion of Bootstrap 4.1, without the rest of Bootstrap. As a result, this is a lightweight library, having no conflict with Ionic 5's CSS classes. Can't say the same for other specialized and heavyweight utility libraries like Tailwind (for which, you may refer to "Using TailwindCSS with Ionic 5 and Angular 10"). Another advantage is, the grid breakpoints of both frameworks are compatible as well. See Bootstrap 4's breakpoints and Ionic 5's breakpoints.

How To Use

bootstrap-utilities node package can be added to your project, with the usual steps:

npm install bootstrap-utilities --save

or for yarn:

yarn add bootstrap-utilities

Add then add the following line to global.scss:

@import "~bootstrap-utilities";

Now, all the utility CSS classes from Bootstrap 4.1 are available for use in your Ionic 5 project. To see a detailed list of classes available, refer the utilities section of Bootstrap 4.1 documentation. These classes could make UI development in Ionic 5 easier and faster for developers having experience in Bootstrap, as well as those who want more advanced utilities than what Ionic offers.

Credits & Sources

Cover image created from logos of Bootstrap and Ionic.

How to add Sass support to a Vite React app

Rohan Villoth — Wed, 16 Jun 2021 20:25:49 +0000

After styling React components through CSS-in-JS (JSS) for a while, I came across "Style React Components: 7 Ways Compared" and decided to switch to my favorite preprocessor, Sass. So, I followed "Adding Sass to Create React App Applications" and ran this:

yarn add node-sass

That was supposed to work. However, on importing Login.scss file into Login.jsx with import './Login.scss', I encountered this error:

[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?

Turns out this project was using something called Vite and so I have to find a way to make Sass work with Vite. I googled and found Vite mentioning CSS Pre-processors support on their docs and this article titled "What is Vitejs? An Overview of the New Front-end Build Tool" suggesting npm install sass --save-dev. I referred yarn-install docs and converted it for yarn:

yarn add sass --dev

Now my Sass styles started working! So, I guess Vite needed a different approach than the usual React method. To make sure node-sass isn't used at all, I removed it:

yarn remove node-sass

and everything seems to work so far. In case I find anything breaking later, will update here. Happy sass'ing! 😁

Credits & Sources

Cover image made from logos of Sass, Vite and React

How to initialize a cloned yarn project

Rohan Villoth — Tue, 15 Jun 2021 21:59:56 +0000

Being used to npm based projects for years, I encountered a yarn based one yesterday. I've read about yarn before, but never got the chance to work on it until now. So, I searched around to find the basics to get it working. I found it to be pretty similar to npm so far, with a few changes here and there. If you've cloned a project repo already setup with yarn, these are the general instructions to follow:

For Yarn 1.x

Make sure yarn is installed globally:

npm install -g yarn

Then, move to project folder and upgrade to latest in yarn 1.x branch:

cd ~/path/to/project
yarn set version latest

Install the project dependencies:

yarn install

And the finally, build and/or run the project. Similar to npm based projects, you can check package.json file in the project folder and find the necessary commands listed there. Should be like yarn build, yarn dev, yarn start, yarn serve, etc.

Another interesting thing to keep in mind is, the yarn equivalents of npm install --save and npm install --save-dev are yarn add and yarn add --dev, respectively. I found it mentioned on the documentation page of yarn install command.

For Yarn 2.x

Yarn 2.x is meant to be installed per project. So, follow the same steps as yarn 1.x described above, but just before yarn set version latest, run this:

yarn set version berry

Check if yarn is on version 2.x with:

yarn --version

Now, follow the same steps for 1.x. For more info, refer to Yarn 2 docs.

Downgrade from Yarn 2.x to 1.x

If you're like me and accidentally installed yarn 2.x on a 1.x based project 😅, don't worry! It's nothing a few commands can't fix. Run:

yarn set version classic

And then follow the steps described above for yarn 1.x. The documentation page for yarn set version command describes more ways to set specific versions.

Credits & Sources

Yarn Documentation
Cover image from Get Logo Vector

Why I'm blogging on DEV now

Rohan Villoth — Tue, 01 Jun 2021 09:56:24 +0000

After my previous blogging attempts on GitHub Pages and Medium, I'm giving DEV a try. I've been noting down ideas and content for blogs, but never found time to complete those drafts and publish them. So, this time I'm trying a different approach. I'll be using DEV kinda like a developer journal, to write about interesting technical stuff I find daily. This will be a quick blogging platform for me, where I can note down and share my ideas and experiences. That was the original plan for my (now discontinued) blog on GitHub Pages.

As for my Medium blog, I'll be continuing it parallelly. However, I'll reserve it for more polished content, not necessarily technical or development related. So, I'll be writing here on DEV more frequently, and on Medium only when I have enough time to curate the content. That'll keep the flow of writing blogs, I hope.

Credits & Sources

Cover image from person using laptop by Kaitlyn Baker on Unsplash