Forem: Talha Aamir

Killer cross platform pdf reader

Talha Aamir — Sat, 24 Sep 2022 15:09:21 +0000

Project links:

project-demo: https://readsyncpdf.web.app/

front-end: https://github.com/sarcXD/read-sync-pdf/

back-end: https://github.com/sarcXD/read-sync-server

Alright, what is this?

readsyncpdf (stupid name, yes) is an app that allows you to read pdf files. You can upload a pdf (I think it has a 20mb limit). It will then keep track of how much you have read. So the next time you want to read something, you just go to the website (on any device), login and it will load the pdf right where you left off.

Okay, why did you make this?

I built this when I was having trouble reading books or papers. I blamed my environment. I had to switch A LOT!! between my laptop, desktop pc and mobile. To make matters worse I was dual booting on my laptop, so goodbye to anything I read and forgot about. I then decided to make something that could fix this pain point.

Did I succeed??

YEAH, I wanted to read a book one day, I started off on my laptop, eventually when I wanted to play some games and stop working, I shifted to my desktop reading it there. Eventually when I got tired I just lay on my bed, opened it on my phone and read it there. AMAZING!!

Why open source

well, several reasons, mainly, none of the people who read books amongst my friends used it, because well they had dedicated devices to read books and they used epub as a format. I realised this was a niche and as much as I would have liked this to be a service, I honestly wanted to do and make other things as well, and I didn't have an indicator of whether this would be successful. THUS, I open sourced it. I also wanted to have some opensource React code that I could show, since I have very little of that even though I've built a ton of NDA stuff.

HAVE FUN. I stopped maintaining this a while ago, and might pick it up based on the interest in it, but for now I guess the repo just remains public and requiring a buncha fixes and updates.

Fixing an annoying Whatsapp "feature"

Talha Aamir — Fri, 16 Sep 2022 22:12:30 +0000

This is a short post. Whatsapp had the archived chat feature for a while, I started finding it annoying at a point since I would keep track of the number:

Well, I thought maybe I could write a script, perhaps an extension to hide it, since well, I was able to do as much with devtools by inspecting and adding display:none.

It's janky but it works, I mean all it needs to do is upon the page load, get the element of the div with the number by classname, and add the style display:none.

Seems pointless, but well it was fun little thing to find I could do.
Here's how it looks after it:

Here's the script,

chrome

firefox

P.S. Haven't documented adding it, probably cause I've been the only one using it.

Cover Letter Generator - Prototype

Talha Aamir — Tue, 06 Sep 2022 21:32:19 +0000

I'm showcasing a cover letter generation tool I prototyped for fun a while back. This doesn't use any deep learning, or anything fancy.

LINK

The idea is simple: you define a set of templates, and when running the tool can specify things like company name, role name, and achievements/things to showcase in the cover letter.

Motivations

Mainly, this was written at a point where I was a bit tired and confused with just how many variants of cover letters I'd need to write.

So, I'm a full stack engineer but I can apply to multiple roles

Front-end
Back-end
Full-stack
software-engineer And since each job and company is different there requirements require tuning the cover a bit every so often to match or highlight achievements that they want to see. That's when I reached this point. I wanted to see if I could make a utility that would simplify that process a bit.

Cool Features

You can specify a template, then generate an cover letter based on your requirements at run-time.
You can choose to either copy the generated cover-letter to your clipboard OR,
Generate a pdf, I do this using Fpdf.
a simple JSON datastore to track if you've already generated a cover letter for this role and company (for...reasons).

It's something I wanted to make, and see if it would be useful, and... it was slightly. What doesn't work is that the sentences seem a bit awkward, as I need to figure out the connectors between each achievement section.

Thats it,
Thanks

destroying git push --set-upstream origin with vim

Talha Aamir — Mon, 10 Jan 2022 13:07:57 +0000

I hate that everytime I need to push a new branch to my origin I need to go through the painful process of
git push --set-upstream origin ${branch-name}.

The problem is worse because I need to type and tab complete the branch name too, just too much hassle.

Now with vim I had the thought to one day just make a remap, which I did, and what that did was basically just type out the statement

:Git push --set-upstream origin and allowed me to just type the branch name.

I think today even that was too much repetition for me, so I had the idea to see how more could I reduce this. I mean I wanted to learn vimscript anyhow, so was a nice thing to do.

The Vim Magic

" For new branch
" gets branch name
" sets upstream origin automatically
function! GitPushUpsOrgBranch()
  let branch = system("git branch --show-current")
  let push_str = "git push --set-upstream origin ".branch
  let conf_msg = "Do you want to execute\n".push_str
  let conf_res = ConfirmBox(conf_msg)
  if conf_res == 1
    let push_str_out = system(push_str)
    echo push_str_out
  endif
  return 1
endfunction

" git push set upstream remap
nnoremap<silent> <Leader>gpsu :call GitPushUpsOrgBranch()<CR>

What this beautiful set of commands does is that upon hitting gpsu it makes vim call the function GitPushUpsOrgsBranch().

GitPushUpsOrgsBranch

This does 3 things:

Gets my current branch which git 6.6+ allows (I think, don't remember) via git branch --show-current
Appends it to a string and forms the actual bland repetitive command I so hate git push --set-upstream origin ${branch_name}
Before pushing it actually prompts me and then allows me to push. (see image below)

Conclusion

This was a comfortable way to get into vimscript, but also was a nice personalization I deeply enjoyed. Pretty cool stuff.

A unique text jumbling animation using css

Talha Aamir — Mon, 27 Dec 2021 06:42:12 +0000

Introduction

I made a minimalistic yet clean (as much as I could) portfolio using only html and css a while back, and wanted to highlight two of the animation/designs that I really liked and designed myself (even if they weren't completely unique). I had been thinking of updating my portfolio so before I proceeded with that I wanted to create a few posts highlighting each of the things that I liked the most in the entire project.

This is part 1, the text jumbling animation I stumbled across by pure chance, and some trial and error.

NOTE

portfolio site - If you are interested or just want to see my portfolio site (more posts coming, hopefully)
The animation the post concerns, (in case you did not view it in the cover, is this)

Animation Description

I will first mention, that I initially intended this to be a sort of a typewriter effect but because of some styling I made, it came out abit wrong, giving me the idea of trying something new.

Let's go through it, step by step
The code of interest in my index.html is my intro, where I apply the style intro-txt to the entire div

Let's now look at the styling where I will try to explain what I did.

.intro-txt {
  font-family: emberly;
  font-size: 2em;
  color: #d2b48c;
  letter-spacing: 1px;

  /* The sauce */
  animation: textJumble 1.5s ease-in 0s 1 normal forwards;
  /* 
    This gives us the cut off effect as if, text is appearing on 
    the screen in a jumbled manner. 
  */
  overflow-x: hidden;
  overflow-y: hidden;
}

The actual animation is extremely simple, which even going back to it now, does surprise me. (yes, I have in fact forgotten a lot of what I did)

@keyframes textJumble {
  0% {
    width: 0;
    height: 109px;
  }

  100% {
    width: 100%;
    height: 109px;
    white-space: normal;
  }
}

Basically, it starts off with a width of 0, till a width of 100%, which I have defined in the parent container of my text box as 500px. This allows the text to be populated from the bottom up, as the height never changes. It also makes the text incomprehensible during the animation adding to the jumbling effect that it comes off as.

Conclusion

You can view the code here Spoilers! The styling file is well, it might be a bit confusing so I expect a lot of you might not be big fans of it.

Conditional Debugging - Faster debugging for complicated cases

Talha Aamir — Mon, 13 Dec 2021 04:50:24 +0000

Introduction

My main goal with this small post is to just point out that if you're someone who doesn't use conditional breakpoints, when:

you're investigating a bug
know a case (some id or some value) you want to verify
are continually hitting the continue or step next button

NOTE For the TLDR of this post in a short gif, skip to conditional debugging

Well, you should (be using conditional breakpoints). Its a pretty simple feature which most (if not all) debug tools support. I have no idea how I skipped past this, probably because I never realized I could do this in the first place.

Caveat

At the time of writing, I have been using this for python debugging using pycharm, c++ debugging using visual studio and javascript debugging in chrome devtools, and it seems to be atrociously slow in devtools at my work atleast, even for an array with a few 100 entries, not a complicated process at all, but a bug I imagine. Either way, it's worth testing out yourself

Process

Setup

I'll take chrome dev tools as an example here, I have created a very simple project, with an html file that has a button with a function printEvenTillN. This as you might image prints all even numbers till N.
I have another js file, what this has is the function itself.
I have used the Live Server extension to launch a server so I can debug this in chrome devtools.

Conditional Debugging

The Case I am presenting is that for our simple function printEvenTillN I want to see if 32 is amongst the numbers it prints. I am choosing a specific number because it translates well to complicated debugging cases where we want to see if say a particular element with some known unique id exists.

Conclusion

I hope you get some value out of it. If you did not know about this already I encourage you to try it. Whilst console logs and looping through each debug instance is well, easy, and we are sometimes lazy, this makes the process so much easier.

SqlAlchemy: simplify complex joins

Talha Aamir — Wed, 05 May 2021 19:13:19 +0000

I am writing this article after coming across the same issue a second time and having to spend a good chunk of time figuring my issue out. I found this to be a super sweet feature that sqlAlchemy allows us to do, and since I can abstract away the sqlAlchemy calls, making the code and my thinking a bit simpler than if I were to do it using simple sql.

The problem

I have two tables, and for my case, I need to join the results of an sql query in one table with the results of an sql query in another table.
While I cant show the exact endpoint, I will give a lay of the land, and setup 2 sample tables and a usecase that I hope will demonstrate the problem well.

The DB Setup

Books Table

id	location_in_library	price	author

Bookmarks Table

id	page_number	book_id	bookmark_date

In the case of these tables, suppose we have a case:

Simple Query

fetch bookmark_date, for existing books. If a book does not have any bookmarks, we would like to show it (using some processing in the endpoint, does not concern us how that happens).

How to go about doing that? well here it is simple, just do a join on the basis of Books.id == Bookmarks.book_id.

Complicated Query

How do we proceed in the case of a more complicated query though? Say, For books having a location like X in the bookshop, we want to fetch their price, author information, as well as the number of bookmarks they have.
What I find to be a really intuitive approach here is to utilize what sqlalchemy calls subqueries. Sql also has subqueries, but instead of being written in the same line of code, these feel like more of an isolation. I really like how simple an operation like this can be made in sqlalchemy, greatly improving readability and the time I spend figuring out the query.

Using SqlAlchemy

Lets split this complex query, rather easily into different parts.

For books having a location like X, return price, author information
Fetch number of bookmarks for the book

In sqlalchemy this will be:

# Book and BookMark are the sqlalchemy classes corresponding
# to each table
books = Book.query.filter(Book.location == X) \
        .with_entities(Book.id.label('book_id'), \
        Book.location.label('location'), \
        Book.price.label('price'), \
        Book.author.label('author')).subquery()
bookmarks = BookMark.query.with_entities( \
            BookMark.book_id.label('book_id') \
            func.count(BookMark.id).label(bookmark_count)) \
            .group_by(BookMark.id).subquery()

Now here we have separated out books, and bookmarks into 2 individual subqueries, and can just think about them in terms of what each contains. All we need to do is join them, and we can do that as follows:

# The reason we do books.c.book_id is to index the column of
# a particular subquery
res = db.session.query(books.c.book_id, \
      books.c.location, books.c.price, \
      books.c.author, bookmarks.c.bookmark_count) \ 
      .join(books, books.c.book_id == bookmarks.c.book_id)

And, that is it. That is all we need to do to get this and even more complicated queries, maybe something requiring more operations from each or a single table.

Conclusion

This was an example I replicated from something I was working on at work, of course, I cant show exactly that, but my problem was similar to that of the example shown. I had tried looking around a bunch of blogs and stack exchange posts failing to find a good way of implementing this in SQL. I later realized that I would have had to port that SQL to sqlAlchemy code. This in my opinion works better just development-wise, because we are able to abstract out the two complicated queries, thinking just in terms of data we need, and not getting too involved in the syntax or ordering.

Anyways, hope this helps.

Postman: how to send api requests w/t json objects

Talha Aamir — Wed, 05 May 2021 08:57:29 +0000

Postman is, at this point probably, the tool used to run and test application endpoints. As you might imagine, especially for working on in-progress or already developed feature even, it is faster and convenient to quickly test your endpoints instead of manually running a flow and waiting to see if an endpoint returns fine.

I needed to go back to using postman for an in-progress feature and thought it would be nice to have this article for future reference for myself and for anyone else. Especially, since this took me a few mins to properly set up.

Installation

I'm using Ubuntu, so I just used the snap store to install:
sudo snap install postman

Objectives

The request I want to test

is a POST request
uses authentication
uses a json object, to pass data

Usage

This section will have a few screens for clarity and so its easier, and maybe faster to skim through

Set your request type and fill in your endpoint url
Since the endpoint has authentication, you can navigate to the authorization section, and select and set your corresponding authorization token/credentials. For me its a basic authentication token.
Finally, since we have a json object, it is supposed to be passed in the body tab. I am using test data to demonstrate how to go about doing it. Since we are sending json data, I switched the input type to raw, which allows us to write raw text, and changed the type from text to json, just so postman gives us some nice highlighting Once done we can save, and run the endpoint, and it will return data, or an error in case it fails.

Document your Typescript Project in 5 mins - typedoc

Talha Aamir — Thu, 18 Mar 2021 07:10:22 +0000

Introduction

typedoc is a fairly simple and easy library to setup, and its benefits are in how you document your codebase. The library itself is also really popular, and commands for adding comments are pretty straightforward. Most of the type inference is done by typescript itself, which gives you fewer things to worry about.

Official Documentation

If instead or in addition to this article, you wanted to go to the offical website (which is highly recommended) click here

Installation

To install the typedoc package:

npm install typedoc --save-dev

You can verify if it works by:

$ npx typedoc --version

TypeDoc 0.20.0
Using TypeScript 4.1.2 from /home/gerrit/typedoc/node_modules/typescript/lib

Usage

Now that we have installed the library, we can generate a documentation to get the gist of how it works.

To keep things simple, this is what you need to care about:

Where the generated documentation should be outputted
Which source files should be used

We specify the output directory using the --out parameter followed by the path to output directory.
Anything declared without a flag 'eg, --out' will be treated as a source file and will be parsed for generating documentation
We can run this command to generate a documentation:

$ typedoc --out docs/ src/app/

Instead of the src/app/ folder you can also point to your applications entry point, which for a react project would be your src/index.ts file. Typedoc treats file and folder locations differently. If you point to a folder it will treat all files inside that folder as individual entry points. If you point to a file, which typedoc says should be your applications entry point, it will generate documentation for the module that file exports.

Heres how the generated document looked for my project

When you open the index.html file for your documentation, this is what is displayed, if your project has a readme.md, you'll be greeted to a preview of it. The explorer menu on the right lists all the modules typedoc found and generated documentation for in your project.

I was running into issues generating a documentation when pointing to what is supposed to be my projects entry point. I think this might be due to the fact that the project I am generating this for, is an Angular project, I am using a source folder instead of an entry point file, because in Angular entry points are treated differently. Angular instead provides a compilation of files, instead of a fixed entry point. see here.

How the documentation is displayed

This part is fairly straightforward, and ill illustrate using an example component.

This is a preview of the documentation typedoc will generate for just 1 component, which in this case is an example-component I created with some basic properties and methods.

I havent commented anything, but luckily for us, typedoc generates a barebones documentation for our functions as well.

All of this has been generated by typedoc automatically!

Adding documentation comments

Now that we have an idea of how it works, we will move on to the final section, adding comments, and utilizing some basic typedoc tags namely @param and @return.
I'll add some nice little descriptions to my greetings function

I run the command to generate the documentation again:

$ npx typedoc --out docs src/app/

And if we navigate to our example component again we can see the updated documentation

Isn't this great? that's all it took to generate a pretty-ish but useful documentation.

typedoc uses markdown for generating its documentation, so I guess if you wanted to you could even add a heading tag in a comment and get this

Conclusion

You should now have some idea about how typedoc works, how to generate a basic documentation and how to add your own code comments. More than that however, I hope this makes you more willing to add documentation your codebase.