Blog on Hakeem Almidan

lsdir - A Shell Alias for Only Listing Directories

Fri, 13 Sep 2024 01:01:01 -0700

The Problem

When working in the terminal, you sometimes need to list only the directories in the current location. The standard ls command shows both files and directories, which can be overwhelming in cluttered directories.

The command for listing only directories in the current location is ls -d */ (source) which is not simple to remember, especially if it’s not something that you do often.

The Solution: lsdir

lsdir, an alias for only listing directories, which hopefully is easier to remember.

1. Open your `.zshrc` or `.bashrc` file:

For Zsh:

vim ~/.zshrc

For Bash:

vim ~/.bashrc

2. Click `i` on your keyboard to go into editing mode in `vim`

3. Add the following line:

alias lsdir='ls -d */'

4. Save the file and reload your shell configuration:

For Zsh:

source ~/.zshrc

For Bash:

source ~/.bashrc

5. Try it

Directories listed using ls and lsdir commands

You’re done; Happy coding! 👾

Stop Arrowing Up So Much In Terminal; Search Instead! (Linux/Unix)

Thu, 31 Dec 2020 19:01:40 +0300

Problem

Do you ever NOT feel like re-writing a command that you wrote some N commands ago? I do!

Arrowing up and focusing until you reach what you want can be annoying for an efficient programmer. Although it usually only takes a couple of seconds, it still adds up. Plus, you don’t want to waste your brainpower on such a task (unless you like doing it).

One of the best pieces of advice I heard when I first started programming is:

“Always improve/automate tasks that you know you’re going to continuously repeat in the future”

So let’s do that. Let’s improve this situation.

Solution

Ctrl+r

This does a ‘reverse-i-search’ or ‘bck-i-search’, which finds the most recent closest match.

Ctrl+r again to go to next match (further back in history).

Ctrl+r keyboard shortcut example use

It searches through an environment variable called $HISTFILE. The number of commands that this file remembers depends on your $HISTSIZE.

I believe the default $HISTSIZE in Unix/Linux is around 500. You can check yours by running:

$ echo $HISTSIZE

Alternative approach

$ history 0
0 echo 'example command 0'
1 echo 'example command 1'
2 echo 'example command 2'
3 echo 'example command 3'
...

This displays your history from 0 to $HISTSIZE.

You can either scroll or Cmd+f to find your command. To execute the command, run:

$ !<command-number>

… where command-number is the number displayed leftmost to your selected command.

‘history 0’ command example use

Happy coding!

Useful Tools that Helped in Building a Custom Promotion-Code CLI (built in Ruby)

Tue, 24 Nov 2020 21:13:02 +0300

What
Why
The Tools
Show me the code

What

This is post is going to be referring to this custom promotion-code generating CLI’s code, and about useful tools that helped in building it. All the tools mentioned are native to Ruby (no external gems were used)

The data generated is going to be stored in a JSON object, and has the following format:

"<FirstName LastName>": {
"code": "String: Generated code",
"activated": "Boolean"
}

You may think “Wait a minute there, that’s not a scalable solution, isn’t it?”

Well, yes, ideally, the promotion codes should be directly connected to your database. But if you want a quick solution, this should be fine

Also, keep in mind that this is not storing your main data. It’s just storing the promotion codes and checking whether they’re activated or not. It has a constant (O(1)) lookup and write time-complexity, and can hold an awful lot of data. Approximately, a JSON file can hold about 18 quintillion characters. For context: “Harry Potter and the Deathly Hallows” has about 1 million characters. So, in total, a JSON file would hold about 13 trillion copies of that book. That’s a lot!

Screenshot of promotional code generator CLI

Why

“Why should I bother with creating a custom promotion-code generator?”

As you may know, promotional codes are typically used in stores, offline and online, to drive traffic. Generally speaking, general promotion codes (ones not mapped to a specific person), don’t need to be unique. In fact, you want them to be generic to drive as much traffic to your store as possible. They should be easy to guess and could be safely made up by humans

Customized promotion codes, on the other hand, though intended to also drive traffic, have another sole purpose. The main purpose of them should be to get specific people onto your platform

Understanding that these codes are made for specific people, you want them to be harder to guess. That is because we don’t want some imposter claiming our invitees' rewards

Hope that makes sense. If not, feel free to drop a comment

The Tools

1. Kernel#puts

Prints string on single line (doesn’t allow other stuff to get printed on same line)

Example:

puts 'Hello'
puts 'world'

Output:

Hello
World

2. Kernel#gets and String#chomp

gets: Takes input from shell

chomp: Takes off newline character ("\n") off from end of string. This character gets generated when user hits the enter key

Put together because they are often used together. Just having Kernel#gets will leave you with a string with "\n" at the end of it

The following example uses both to avoid that

Example:

puts 'Please say something: '
answer = gets.chomp
puts answer

Output:

$ Please say something: Hello
Hello

Note: The project referred to in this post doesn’t use gets.chomp and uses Readline (#3) instead. That is since Readline provides autocompletion, history reference, and other useful functionalities. But gets.chomp could be useful for getting simple input in some instances. So it’s worth the mention

3. Readline::readline(<file name>, <refer to history bool>)

Takes input from shell. Takes off newline character ("\n") automatically

Second argument takes boolean to flag whether to remember history or not. If you set to true, it will remember previous answers from same file-run session

Example:

require 'readline'
answer = Readline.readline('Please say something: ', true)
puts answer
answer = Readline.readline('Please say something: ', true)
puts answer

Output:

$ Please say something: Hello
Hello
$ Please say something: [*click up-arrow*]
$ Please say something: Hello
Hello

4. Readline::completion_proc = <proc>

Adds autocompletion functionality based on given proc

Example:

require 'readline'
LIST = ['action', 'bear', 'computer']
comp = proc { |s| LIST.grep(/^#{Regexp.escape(s)}/) }
Readline.completion_proc = comp
Readline.readline('', true)

Output:

$ co[*click on tab*]
$ computer

5. String#downcase

Lower-cases a string

Useful for keeping data format consistent

Example:

puts 'HELLO WORLD'.downcase

Output:

hello world

6.String#strip

Takes off whitespace from beginning and end of string

Useful for keeping data format consistent

Example:

puts ' hi there '.strip

Output:

hi there

(I know it doesn’t show up there, but there should be no white spaces at the ends of the string)

7. IO.read(<file name>)

Reads file content and returns it as string

Example:

file_content = IO.read('data.json')
puts file_content

Output:

"{\"some key\": \"some value\"}"

8. JSON#parse(<json string>)

Converts JSON string to JSON object

Example:

require 'json'
puts JSON.parse("{\"some key\": \"some value\"}")

Output:

{"some key": "some value"}

9. JSON#dump(<json string>)

Converts JSON object to JSON string

Example:

require 'json'
puts JSON.dump({"some key": "some value"})

Output:

"{\"some key\": \"some value\"}"

10. File::Open(<file name>, ‘w’) {|file| <changes to file>}

Opens and writes data to file (writing automatically gets it saved)

Example:

require 'json'
file_name = 'data.json'
new_data = {"some new key": "some new value"}
File.open(file_name,'w'){ |file| JSON.dump(new_data, file) }
json = JSON.parse(IO.read(file_name))
puts json

Output:

{"some key": "some value", "some new key": "some new value"}

Bonus:

11. "\e[#{<color number>}m#{<some string>}\e[0m"

Changes color of string in shell based on ANSI escape code FG Code number

Example:

str = 'Hello world'
color_num = 36 # cyan
puts "\e[#{color_num}m#{str}\e[0m"

Output:


Hello world

Show me the code

Here’s the link to the repo

If you plan to create a similar tool, I suggest scanning around the repo (same link). It’s basically 4 files of Ruby code, and none of them exceed 100 lines. Hope that helps

Happy coding!

Why do puffins often have mutliple fish in their beaks at once?

Fri, 24 Jul 2020 21:07:40 +0300

Have you ever noticed that puffins often simultaneously carry multiple fish in their beaks at once?

It’d be something like this:

Puffin with multiple fish in beak (Source)

I thought this was interesting, and I had so many questions, including:

Do they catch them all in one scoop?
How come the fish are so organized?
Do they hide their food while catching other fish?
Is this a ‘flex’?
What type of fish do they mostly catch?
The why
Conclusion

Below, I attempt to answer each question (for Atlantic Puffins specifically).

Do they catch them all in one scoop?

According to this Oxford University study, the answer is no. Puffins make multiple dives per hunt (a.k.a. bout), catching about 1 fish in each dive. They average about 25 dives per hunt.

How come the fish are so organized?

According to BBC, in this article, puffins stack fish in their beaks using a combination of their tongue and beaks.

Their beaks contain ‘tentacles’, which are like small teeth that keep the fish in place. And they use their tongues to push up existing fish while opening their mouths to catch new ones.

Do they hide their food while catching other fish?

No, they mostly just keep it in their beaks.

Is this a ‘flex’?

It doesn’t seem like it. Their mating/courtship protocol doesn’t usually involve fish. But since I haven’t found too much evidence of that, I’d say that’s up for investigation!

What type of fish do they mostly catch?

According to this Oxford University study, they mostly feed on sand eel.

The why

According to this study in Iceland and this BBC article, other birds, such as Skuas and Gulls (aka Seagulls) would literally try to steal the fish off of the Puffins' mouths. And if some fish fall, these two birds, or other birds, would get it.

So the short answer is: They keep it in their mouths to keep it safe for their children.

Interestingly, Puffins only lay one egg a year. So they have to be extra careful with that food.

It’s kind of heroic; they’re fighting for their baby’s (singular) life. They could just eat the fish and abandon their baby/chick, but they choose not to. It’s also worth mentioning that puffins are tiny, they’re smaller than a Subway sandwich (11 inches tall), and weigh less than a soda can (380 g). So other birds can really mess them up. Which makes this whole thing even more heroic.

I understand that this is a childlike view, if you look at it from a scientific view, they’re just keeping their species from going extinct. But I guess we could still learn a thing or two from them.

Conclusion

Puffins feed on Sea Eels (fish) and carry a bunch of them around either for themselves or for their chick (they lay one egg a year). Because it would be too dangerous to leave it on the ground otherwise.

They sound like great parents and deserve a round of Ululation. Kolololoooosh

Side note:

While looking into this, I found out that there’s another type of bird that stacks fish in their beak! The bird’s name is the Razorbill (a.k.a. Alca torda). Here is a picture of it carrying fish like a puffin:

Razorbill with multiple fish in beak (Source)

But according to this study (the same Oxford study mentioned above) puffins do tend to carry more fish overall. Razorbills can carry 2 to 10 fish, whereas puffins can carry up to 50!

SCSS Animation Mixin

Tue, 05 May 2020 17:15:02 -0700

Problem

The slightest change in CSS animations (@keyframes) requires a creation of a new animation.

Problem Example

@keyframes to-yellow {
50% { background-color: yellow; }
}
@keyframes to-skyblue {
50% { background-color: skyblue; }
}

Both of the animations pretty much do the same thing, but we had to create two of them. We had to create two of them because their property (background-color) had different values (i.e. yellow and skyblue).

This doesn’t follow the DRY software development principle.

To fix this, we’re going to use an SCSS mixin.

Solution

Looking at the problem example above, we’d replace it with something like this:

@mixin animation-mixin($name, $color-var) {
@keyframes #{$name} {
50% { background-color: $color-var; }
}
}
@include animation-mixin(to-yellow, yellow);
@include animation-mixin(to-skyblue, skyblue);

Then you could call the to-yellow and to-skyblue animations in your selectors as needed:

div {
height: 100px;
width: 100px;
background-color: whitesmoke;
animation: to-yellow 4s ease infinite;
}

Live example:

See the Pen SCSS Animation Mixin by Abdulhakeem Almidan (@Hakeemmidan) on CodePen.

How to Prevent CSS Hover State From Getting stuck on Mobile Browsers

Thu, 16 Apr 2020 21:58:27 -0700

Problem

The CSS hover state often gets stuck on mobile (touch screen) browsers. It would be something like this:

Hover state getting stuck on-click on mobile

Solution

Using the ‘hover’ CSS media query, which could be applied either through SCSS or CSS. In the case of SCSS, we’re going to use a mixin.

Here is each solution respectively:

Option 1: SCSS Mixin

The mixin:

@mixin hover-supported {
@media (hover: hover) {
@content;
}
}

Example use:

 .example {
@include hover-supported() {
&:hover {
background-color: black;
}
}
}

Option 2: CSS

Example use:

 @media (hover: hover) {
.example:hover {
background-color: black;
}
}

Explanation

Both examples change the background-color of HTML elements with class example only when they’re hovered-over on non-touch screen devices (or any hover supported device). In short, this applies hover styling on only non-touch screen devices.

PS: I’m not sure how this would act on touch-screen laptops.

Choosing a Static Website Generator: Hugo vs. Jekyll

Mon, 23 Mar 2020 23:37:28 -0700

What are static websites?

In simple terms, static websites are a collection of webpages that have fixed content. They are the most basic type of website and are typically considered the easiest to create.

These websites are considered the easiest to create because they have a low barrier of entry. They usually are not connected to a backend or a database, so the only thing that you need to manage is the frontend.

Given that information, static websites look essentially the same for all users (because you wouldn’t have user data to customize their experience). User data, like emails and password digests, need a database for storage and are considered unsafe to store in the frontend.

Why pick a static website over a ‘regular’, dynamic website?

Although static websites are cool and all, why should one choose them over dynamic (a.k.a. full-stack) websites? Here are the advantages that a static website holds over a dynamic one (generally speaking):

Faster: Since static websites don’t have a backend or a database, all the web hosting server has to do is serve the needed file. There will be no API calls to retrieve data from the database, so you’re less likely to see any loading signs.
Cheaper: Hosting static websites is mostly free. They can be hosted on free web hosting services such as GitHub Pages, Netlify, and others. The only cost that you’re likely to face is for a custom domain name, and that’s optional.
Safer: Since there’s no backend or database, your site is less likely to be breached for private data. There’s no opportunity to perform SQL injection and similar database attacks. I think it’s good practice to assume that anything stored in your static website will be available to the public.

When should I choose a static website over a dynamic one?

You should pick to choose a static website if your website doesn’t allow users to make POST, PUT, PATCH, CONNECT or DELETE HTTP requests. In other words, you should probably choose to use a static website if your users are not going to modify any of your website’s data.

What are static website generators?

Static website generators are exactly what they sound like. They’re automated processes that help you produce static websites. These technologies differentiate themselves in different ways. But the main two differentiating themes are typically speed and customization.

Picking a static website generator

Here’s a list of the most popular static site generators. Currently, the top three are Next.js, Hugo, and Nuxt.js. Gatsby.js is a pretty popular one too.

Today, we’re going to be talking about Jekyll and Hugo, how they differ, and why you may choose one over the other. But before we go on, you may be wondering: why are we not looking at something like Next or Nuxt since they’re so popular? Well, although these technologies are great, I’ve decided to avoid writing about them due to a few reasons, including the following:

They’re built on top of frameworks: Next is built on React.js, and Nuxt is built on Vue.js. So learning them would also mean that you’re going to eventually learn the framework behind them. Hugo and Jekyll, on the other hand, are built on Go and Ruby (programming languages) respectively. So their barrier to entry is a bit lower.
They’re often used as a part of full-stack applications: Next and Nuxt are typically used to optimize the frontend of full-stack applications (and are kind of built for that purpose). So browsing questions about them and reading their documentation may confuse you if you plan to use them to build pure static websites [that aren’t connected to a backend or database in any way]. Hugo and Jekyll, in contrast, are mostly designed to create and maintain stand-alone static websites. So getting help for them may be easier.

Hugo vs. Jekyll: Style (themes)

You can pick a theme to build your website (rather than building it from scratch). Most themes are free and open-sourced. There are plenty of themes to choose from in both technologies.

Popular themes are sometimes available under both technologies. So if you see a theme that you like with one technology, I would suggest searching for it in the other. Here are links to theme pages for each:

Jekyll themes (under “Pick up a theme”)
Hugo themes

Hugo vs. Jekyll: Speed

One of the main differences between Hugo and Jekyll is their speed. Looking at this benchmarking test, it is said that Hugo is “… between 23 and 63 times faster than Jekyll” (Macrae, 2018) in terms of build time. This becomes more apparent as the number of pages grows. Here’s a graph demonstrating the difference:

Build time difference on page number increase (Source)

Hugo vs. Jekyll: The learning curve

Hugo’s docs are harder to follow: As pointed out by Ben Congdon in his blog, Hugo follows a top-down engineering approach, where it tries to provide everything a user may need. While Jekyll, on the other hand, follows a bottom-up approach where it provides minimal tools and lets you build the rest. This makes Hugo a little harder to learn. I personally found its documentation to be a little overwhelming. Jekyll’s documentation was much easier to read, navigate, and follow.
Great communities with both: Although Jekyll (est. 2008) has been around longer than Hugo (est. 2013), I found both to have great communities. I didn’t have trouble finding answers for either of them.
Programming language familiarity: Depending on the programming languages you currently know, you may choose one technology over the other. As discussed, Jekyll is built on Ruby and Hugo is built on Go. If you’re a beginner programmer, choosing Jekyll may be the easier route since Ruby is considered easier to learn than Go. If you’re familiar with statically typed programming languages, then Hugo may be the better option for you, as Go is statically typed.

It may be important to note that according to this report by Hired.com, programmers experienced with Go had the most interview requests on their platform (in 2019). Here’s a graph demonstrating this further:

Most in demand programming languages of 2019 (Source)

So if you are currently looking for a job (like I am), it may be worth it to look into Go, and how it may help you grow as a programmer. In case you do want to check it out, I think going through this interactive tutorial provided by the language’s official website may be a good way to start.

Hugo vs. Jekyll: When to use what

Jekyll: I would recommend using Jekyll for building websites that don’t exceed 500 pages in size (to avoid long build time). Look at Spotify for Developers, TwitchCon’s website, and Sketch App’s website for Jekyll generated examples. More can be found on Jekyll’s showcase page.
Hugo: I would recommend Hugo for blogs, and for websites that you know are going to continue to grow in page count over time. Look at Ben Congdon’s website, Anna Dodson’s website, and Pharmaseal’s website for Hugo generated examples. More can be found on Hugo’s showcase page.

If you want to look at an even deeper comparison of the two technologies, I recommend this article by Forestry.io.

About

Mon, 01 Jan 0001 00:00:00 +0000

Hi, I’m Abdulhakeem. You can call me Hakeem. I have experience building full-stack applications in many languages and frameworks. What I’ve learned over time is that the main mental challenge often lies in the logic behind what you’re building, and not in the language/framework itself.

Outside of work, I enjoy painting, playing volleyball, soccer, scuba diving, and hanging out with friends. I also enjoy reading about business and finance.

Resume

link

Contact

Hakeemmidan@gmail.com

About website

Like what you’re seeing? Subscribe below to recieve notifications of new posts ⬇️

Promise not to send more than 1 email per month (not counting subscription confirmation email) 👨‍💻

Blog on Hakeem Almidan

lsdir - A Shell Alias for Only Listing Directories

The Problem

The Solution: lsdir

1. Open your .zshrc or .bashrc file:

2. Click i on your keyboard to go into editing mode in vim

3. Add the following line:

4. Save the file and reload your shell configuration:

5. Try it

Stop Arrowing Up So Much In Terminal; Search Instead! (Linux/Unix)

Problem

Solution

Ctrl+r

Alternative approach

Useful Tools that Helped in Building a Custom Promotion-Code CLI (built in Ruby)

Table of contents

What

Why

The Tools

1. Kernel#puts

2. Kernel#gets and String#chomp

3. Readline::readline(<file name>, <refer to history bool>)

4. Readline::completion_proc = <proc>

5. String#downcase

6.String#strip

7. IO.read(<file name>)

8. JSON#parse(<json string>)

9. JSON#dump(<json string>)

10. File::Open(<file name>, ‘w’) {|file| <changes to file>}

Bonus:

11. "\e[#{<color number>}m#{<some string>}\e[0m"

Show me the code

Why do puffins often have mutliple fish in their beaks at once?

Do they catch them all in one scoop?

How come the fish are so organized?

Do they hide their food while catching other fish?

Is this a ‘flex’?

What type of fish do they mostly catch?

The why

Conclusion

Side note:

SCSS Animation Mixin

Problem

Problem Example

Solution

How to Prevent CSS Hover State From Getting stuck on Mobile Browsers

Problem

Solution

Option 1: SCSS Mixin

Option 2: CSS

Explanation

Choosing a Static Website Generator: Hugo vs. Jekyll

What are static websites?

Why pick a static website over a ‘regular’, dynamic website?

When should I choose a static website over a dynamic one?

What are static website generators?

Picking a static website generator

Hugo vs. Jekyll: Style (themes)

Hugo vs. Jekyll: Speed

Hugo vs. Jekyll: The learning curve

Hugo vs. Jekyll: When to use what

About

Resume

Contact

About website

1. Open your `.zshrc` or `.bashrc` file:

2. Click `i` on your keyboard to go into editing mode in `vim`