Forem: Hozefa

Investing setup for software engineers

Hozefa — Sat, 09 Jan 2021 20:48:53 +0000

Before we get started here, I want to call out that this post applies mostly to software engineers. But the basic principles can be used by anyone earning a salary greater than $75k per year.

As software engineers, we are very adept at writing code. This helps folks earn a good living. In order to secure our family's future, it's important to make sure we invest the excess cash we have. The idea here is a "Set up once and forget".

Below I have outlined some steps that have worked well for me.

Emergency Fund: You should have about 6-9 months of your expenses, which would include your house payment or rent, property tax(if applicable), kids schooling, food, car payments/expenses, etc. The disadvantage with holding liquid cash is that it's a depreciating asset against inflation. You can use a high yielding saving account or any other safe and liquid investment vehicle to balance against inflation.
401k: 401k is an employer-sponsored retirement plan. If your employer offers one, you should contribute to it. If your employer matches a certain percentage of the amount (typically companies do a dollar to dollar match up to a certain % of contributions), you should maximize and take full advantage of the match amount. IRS sets the maximum limit that you can invest every year, try to max it out.
Backdoor Roth IRA: A Roth IRA is a retirement account where you pay taxes on money going into your account, and then all future withdrawals are tax-free. If your employer offers a 401k and depending upon your income, you might NOT be eligible to invest in an IRA. In that case, a backdoor Roth IRA is a great investment vehicle.
529 Plan: If you have kids, opening a 529 account for your kid(s) is definitely something I would recommend.
- Post-tax money is put into the account, however, the withdrawals are tax-free provided they are used for educational purposes.
- Set up regular recurring contributions like bi-weekly or monthly. This also helps to balance out any big changes in the market
Brokerage Account: My advice is not to invest in individual stocks. I have tried it and it's not worth the time and energy. Keep investing in low-cost index funds.
- Delegate this to robo advisors like Wealthfront or Betterment to invest for you. They offer portfolio rebalancing, tax-loss harvesting, diversified portfolio at a very reasonable fee(0.25%). Invest in recurring cadence. Don't try to time the market.
- If you want to get your hands dirty with individual stocks trades, limit yourself to not doing so beyond 10% of your worth.
HSA: HSA is a Health Saving Account offered when you take a high deductible plan for your health insurance. If you are young, in good health, and don't foresee any big medical expenses in near future my recommendation is to take on an HSA.
- You can contribute pre-tax dollars to your HSA account.
- HSA is portable, which means that if an employee changes jobs, they can still keep their HSA. In addition, an HSA plan can be transferred to a surviving spouse tax-free upon the death of the account holder
- Medical expenses can be paid using the HSA account.

This is a high-level overview of the saving/investment side of things. There is another aspect of spending which I will cover in another post.

I am not a Certified Investment Advisor
This is information based on personal research and experience.
Please do your own independent research and / or consult a Financial Advisor as you see fit.
This is focused on US retirement account structures & taxes.

Common Git Alias

Hozefa — Thu, 28 May 2020 05:42:24 +0000

This posts will help you understand what a git alias is and some of the basic ones I use.

What's a `git` alias?

In the computer science domain, alias means an alternative name or label that refers to a file, command, address, or other items, and can be used to locate or access it.

So, basically with git alias, the idea is that you create shorter alias for the most commonly used commands, to reduce the amount of typing that you do.

How to use them?

To use them, add the commands to your .bash_profile, .bashrc or .gitconfig file. Once you add them run the source .bash_profile command.

You can add them by using command line also, but would not recommend it as it would be very verbose and difficult to manage over time.

$ git config --global alias.co checkout

Common commands

alias gc='git checkout'
alias gcm='git commit -m'
alias gs='git status'
alias ga='git add --all'
alias gp='git pull --rebase'
alias gb='git branch -vv'
alias gr='git remote -v'
alias grt='git reset --hard'
alias gpub='git push origin master'
alias grp='git rebase master'
alias gd='git branch -D'
alias gm='git merge'
alias gmx='git merge -X theirs'
alias gk='gitk &'
alias gda='git branch | grep -v "develop" | grep -v "release" | xargs git branch -D'
alias gf='git fetch'
alias gl='git log -3'

# cleans all branches locally that have already been merged.
alias gcmb="git branch --merged | grep -Ev '(^\*|develop)' | xargs git branch -d"

Another good resource here to enable a quicker workflow I also use the git-extras. It allows an abstraction on more complicated git workflows.

My Home Office setup

Hozefa — Mon, 18 May 2020 20:30:05 +0000

With the current situation for COVID-19, we all working from home there is now a need to set up proper workstations. It is not possible to have a makeshift place anymore. Not only it helps with productivity but it also will prevent any ergonomic issues.

For my workstation, along with utility I have tried to keep it economical as well.

Table

I am using SHW Electric Height Adjustable Computer Desk that I got from Amazon. It has a good range of motion and feels sturdy. As I am trying to keep costs down, this is a basic model I went with. Plus it had good reviews also.

Another way of creating a standing desk is using a wooden counter table top(IKEA one is popular) and then either placing it on cabinet unit or you can get a desk frame.

Chair

It's an ergonomic chair with variety of adjustments for personal preference. Have used the same chair at my office also, so petty comfortable with it. It's great value for money.

Monitor

Its a HP Pavilion 27-inch LED monitor. It has a resolution of 1920 x 1080p @ 60 Hz. For day to day usage it works well for things like email, coding and watching Youtube or Netflix.

With monitors there are tons of choices, but I recommend buying at a minimum a 27".

USB Hub

Anker 5-1 USB-C hub. It adds 2 USB-A ports, 1 HDMI port, a micro SD card slot, and an SD card slot to your MacBook — all from a single USB-C port.

Laptop Stand

This allows the laptop and monitor to be at the same height. I use the laptop for meetings where I need video.

Keyboard

Standard Apple Magic keyboard. Much better typing experience than with the magic keyboard on the macbook pro.

Trackpad

I love Apple Trackpad over their mouse.

Airpods

Given I am on the Apple eco-system(iPhone, macbook) it made sense to get them. Like how well they are integrated into the iCloud eco-system.

Footrest

A textured surface massages the soles of your feet for stress reduction. Two-position height adjustment with tilting platform allows for optimum comfort.

iPhone Stand

I also use an iPhone to house the phone while working. Added benefit is that it gets charged(its not wireless though 😉).

Pegboard + container

I also added a pegboard & container to store cables and other random things around.

Printer

With WFH for an extended period of time, I went ahead and bought a printer also. I use it for printing any official documents. Another use I am getting out it is printing worksheets for my kids.

Other things I keep handy are a notepad and stickes to take quick notes.

Fully Accessible Accordion with HTML & CSS(no JS)

Hozefa — Sat, 24 Aug 2019 17:31:49 +0000

Recently I came across details and summary HTML tags. Their basic use is to create an accordion-type UX out of the box.

I have previously worked on creating an accordion-like structure using div and span and JS to handle opening and closing. On the JS there is logic to keep track which element is open if the user clicks on another one close all and open clicked one. Over time this can get complicated.

Having discovered these tags, I worked a prototype to achieve the functionality with plain HTML & CSS

Let's go over the steps for that

details tag is the parent, where the below 2 tags are enclosed.
summary tag is where the headline users see by default(like a question for FAQ's) is held.
p or div can be the response(answer for FAQ's) or more details around the headline.

Every browser supports the accordion-style arrow out of the box. The good part here is that using CSS we can style it however we choose.

Now, let try to style it how we choose. I decided to do see if I can replicate the pattern we have at PayPal.

To do this, we first need to hide the browser's default marker

summary::-webkit-details-marker {
  display: none;
}

Next step, in my case, add styles for open & close arrows.

// creates the close arrow
summary:after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  transition: all 0.3s ease-out;
  border-bottom: 1px solid #cbd2d6;
  border-right: 1px solid #cbd2d6;
  float: right;
}

// creates the open(inverted) arrow.
details[open] summary:after {
  content: "";
  transform: rotate(-135deg);
  margin-top: 8px;
}

On the details tag, there is also an option to have it open by default. Use the open attribute to do that. Goes like <details open>.

Other than Edge & IE(of course) all other browsers support these tags.

This is basic(getting starter) guide. For more detailed and advanced examples I recommend this article on CSS Tricks.

JS 2019 features I am excited about

Hozefa — Fri, 09 Aug 2019 23:23:59 +0000

TC39 over the past few years have been giving yearly updates to the JS. This works much better than throwing a ton of updates very years. This gives developers an opportunity to learn in a better and even from the browser point of view making the features available.

From the 2019 feature set, below are a few that I am most excited about.

1. `trimStart()` and `trimEnd()`

Added on the String prototype

This allows trimming of whitespace at the start and end of a string. We already have the trim() function but this does it at both ends. There can be a use case where you might keep the whitespace at either end.

const paddedStr = ' How new trim functions work '
paddedStr.trimStart() // prints 'How new trim functions work '
paddedStr.trimEnd() // prints ' How new trim functions work'
paddedStr.trim() // prints 'How new trim functions work'

2. `flat()`

Added on the Array prototype

This helps with flattening of multi-dimensional arrays. It takes an optional parameter that tells the function how many levels deep we want to flatten. The default value is 1.

const oneLevelNesting = ['bread', ['peanut butter', 'jelly'], 'bread'];
oneLevelNesting.flat() // ['bread', 'peanut butter', 'jelly', 'bread']

const twoLevelNesting = ['bread', [['peanuts', 'oil'], ['strawberries', 'sugar']], 'bread'];
twoLevelNesting.flat() //  ['bread', ['peanuts', 'oil'], ['strawberries', 'sugar'], 'bread']
twoLevelNesting.flat(2) // ['bread', 'peanuts', 'oil', 'strawberries', 'sugar', 'bread']

3. Optional `catch` binding

Optional catch binding allows you to write a try/catch without having to use the error parameter with catch.

//before
try {
   doSomething()
} catch(error) {
   console.log("Not using the error parameter here but have to include it")
}
// after
try {
   doSomethingElse()
} catch {
   console.log("No param? No Problem!")
}

There are other features other than these like flapMap(), Object.fromEntries, another one is adding a description to Symbol property. Personally, I have not found the need for these in my experience.

For a deeper understanding of all these features I recommend watching javascript-es2019-in-practice on egghead.io.

Would love to hear thoughts of others on what features are they most excited about.

Obscure, but useful git commands

Hozefa — Fri, 22 Mar 2019 05:07:19 +0000

git is pretty much the defacto source tool used across the industry. Most engineers either use the git CLI or GUI based tools like git-kraken or sourcetree. Most editors like VSCode have git functionality out of the box.

For folks like me who prefer using the CLI for git, most know the common git commands like git add, git checkout, git status etc...

Over the years have come across a few git commands that not widely known but have proven to be useful.

Pretty Git Log

Most folks used git log to see the recent commit history. But by default, it's not in the most useful format to consume.

However, tweaking the .gitconfig* file to set up an alias and pretty format it.

# setup alias in the .gitconfig file
lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --branches

Formatted text after the alias is setup

Force Push to Remote

When working on a feature branch, generally one will rebase from master branch. This rewrites the commit history of the feature branch. If the feature branch is already pushed to a remote, we have to use the git push --force to push changes to a remote.

However in this case, if someone else from the team has also pushed any change to the branch it will be lost. Instead of using --force rather use --force-with-lease. This will check with someone else pushed commits to the same branch and prevent overwriting of commits.

Squash Commits

When working on a feature branch there would be multiple commits before its ready for a PR. However, for the sake of keeping things clean, you do not want these multiple commits to be in the PR.

Best way to do this is squash the commits into a single one. Use the command git rebase -i <sha-id of master>

This will open an interactive editor where one can pick which commits to keep and which to squash. Also, the messages for commits can be edited.

Stashing

When you need to move to a different while work on the current branch is not complete, git stash is a good command to use.

Another time this feature is also very useful when let's say the master branch has some updates you need on the feature branch. In this case, using git pull master --rebase --autostash is to be used. This command automatically stashed the code, pulls down latest from master, rebase aganist it and pop's the stash out.

Cleanup

With time you could end up multiple feature branches on the repo. Most of the braches are merged with master. This can cause the local .git file to become large causing some slow up.

To prevent aganist this and do some home cleaning use git branch | grep -v "master" | xargs git branch -D. This command cleans all branches expect the master.

Github has also released a feature where you can squash the commits while merging a PR. But if using something like Bitbucket or another tool they might not this feature.

.gitconfig is located in the root directory(~/.gitconfig) for Mac.

Another set of useful utilities to checkout are git-extras. It has utilites for a bunch of git workflows.

CSS/JS coverage in Chrome

Hozefa — Thu, 14 Mar 2019 05:13:57 +0000

From Chrome version 59 onwards, the developer tools expose a new Coverage tab(next to Console). This basically shows that given all the JS/CSS that gets loaded on the how much of it is actually used.

You will be surprised to see the percent of unused code that gets shipped over the wire. In big projects/teams over time code keeps getting added and no one takes the time to actually check if all what's getting skipped to the user is actually needed. This causes performance bottlenecks and in many cases loss of potential business.

The great part of the tool is that does not only give a percent of unused code but actually also shows what code it is. Using this information it becomes easy to identify code that can be removed.

Each line of code is color-coded:

Solid green means that line of code executed.
Solid red means it did not execute.

Off course not everything in red can be removed. There will be code that runs on user actions.

One simple way to get to it, is shift + cmd + p(on a mac) and then type coverage.

The command palette has a bunch of pretty useful utilities.

We use this tool pretty often in our development as well as performance tuning. Performance should not be taken as an afterthought, but rather tackled during the development cycle itself.

A fellow coworker rights puts its Performance is the new Accessibility

Reefath Rajali

@rajali

"Performance Is the New Accessibility" ~ Reefath Rajali
Kick starting a new talk series at @PayPalEng to discuss about the importance of performance and making the web accessible to everyone in the world.

20:43 PM - 12 Mar 2019

Let's all chip in to make the web accessible to everyone.

My team's git workflow

Hozefa — Tue, 12 Mar 2019 05:59:19 +0000

Most teams will have a git(or any source control) workflow that they follow. Detailing the workflow that we follow in my team at PayPal. We have a team of 8 engineers working on multiple apps at the same. Over time we have created this process detailed below:

Development Process

We have 3 main branches develop, release and master. All of them are protected such that no one can directly push commits to these branches. The code has to be added only through PR's.

develop is our working branch and everyone creates a new branch from develop and then creates a PR to it once they are done. On a side note, we follow the commitizen of writing commit messages. This helps to automate changelogs.
We have a CI pipeline that runs the code against tests, eslint etc. Every PR is reviewed by a couple of engineers.
Once PR is approved and passed the CI its merged. We use the Squash and Merge option. We then delete the feature branch.
Once the PR is merged we build and deploy the code to a staging environment to be tested. This is where we can do manual testing and end to end testing.

Release Process

We generally release at the end of every sprint(bi-weekly).

When testing is done, we will create a PR from the develop branch to the release branch. We also tag this PR with a release-candidate tag. This helps to in case we need to go back and see what was exactly released in case of an issue.
On this PR, since we are using commitizen we generate the changelog using standard-version. We keep all the changes over time within the CHANGELOG.md.
We then create a build and deploy. Sanity testing is one last time here.
Then we use the build to deploy to production.

Patch Fixes

Development happens from the develop branch, in case we need to fix an issue a new branch is cut from release.
Changes are made, reviewed and tested. Then the PR is merged to release.
Then the build and deploy process takes place.
As a follow-up, we also merge the same code into develop to keep both branches in sync.

One thing to add here, everyone in the team has to write access to the main repo. They are free to fork the repo if they choose to. We prefer that all branches be pushed to the main repo so it's easy for anyone to contribute to an existing branch. Once any feature branch is merged, we delete it.

Hope this helps any other team looking to get a git workflow going. Curious to see what other teams/companies follow. 👍