Passionate and creative full-stack software engineer from Colombia 🇨🇴.
Find information about me, my skills and my projects.

suggestion

Blog Suggestions

Suggestion

Redesigning my website


## Intro

Sometimes, when I feel overwhelmed over certain things (could be work, university or just life in general), I tend to
look up for things I can get my head busy into, just so I get focused on more important and meaningful things rather
than the overwhelming stuff.

I've been looking into multiple personal websites recently and have also had this thought that my website was slightly
kinda boring, and it deserved to be looking better to make it more attractive.

I thought it would be great to re-do everything from scratch. I was thinking of using
this [portfolio starter](https://github.com/vercel-solutions/nextjs-portfolio-starter) project but after looking into
it, I decided not to do so because I find RSS unnecessary as I don't really blog too much, learning and then using MDX
and Nextra would require quite some time, plus getting the base project to look as my current website, plus adding all
sections and stuff, would require another big amount of time.

At the end, I realized my website wasn't really looking bad or anything, it just needed a few things to make it more
vivid and whatnot.

## Design Changes

#### Toolbar links and section titles

While exploring [Brian Lovin's bookmarks](https://brianlovin.com/bookmarks/website) I came accross with
[Julie Chabin's website](https://www.julie.design/) and thought the gradient in links and dividers looked pretty cool 🤩

So I wanted to implement them in my website. At first, I thought of showing the gradient only when the link was
highlighted in the toolbar, but it felt weird when being around items without the gradient, so I ended up applying it to
all the links. I decided to do it subtly so the gradient looks like it goes all the way through the toolbar.

Then I started working on the gradient for titles. I did it while using the dark theme of my website, and when I
switched to the light theme, I noticed the titles had a text shadow. 😮
*How long had I not been working on my website that I forgot about that? idk* 😬

Anyways, I still liked that, and thought it was fine to keep, but then I also wanted the gradients, so my solution was
to keep gradients in titles while using the dark theme only. They look better with a dark background anyways.

Here's a quick comparison:

*Before*
![Toolbar before](/assets/images/posts/website-redesign/toolbar-before.png)

*After*
![Toolbar now](/assets/images/posts/website-redesign/toolbar-after.png)

If you're wondering how to apply a gradient to text, you can do so like this:

```css
.text-gradient {
  --gradient-start-color: #2d52ab;
  --gradient-end-color: #247aae;
  background: var(--gradient-start-color);
  background: -moz-linear-gradient(90deg, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
  background: -webkit-linear-gradient(90deg, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
  background: linear-gradient(90deg, var(--gradient-start-color) 0%, var(--gradient-end-color) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(0 0 0 0);
  color: rgba(0 0 0 0);
} 
```

You can also generate the gradient background using [cssgradient.io](https://cssgradient.io/)

#### Less bloated introduction

Previously, the first section of my website included a bunch of text that I was thinking wasn't really necessary to be
there and didn't really say much about me. So I removed a couple paragraphs to make it more straight to the point.

Now it just shows:

* a pretty short description of me
* the place I'm currently working at and my position
* a slightly longer description

#### Less social links

Also, it used to show like 8 different social networks, including a contact button. I decided to just leave the ones I'm
most active in, and for contacting, you can already access that from toolbar 😅

#### Projects section

Just a couple of months ago I changed the projects section in my website, also inspired
by  [Julie Chabin's website](https://www.julie.design/)
where the projects card had a gradient background and a preview of the project.

The design was ok, but also slightly boring, also the cards occupied too much vertical space that probably wasn't
needed. So I decided to put the text above the image, inside the card, and also make the card slightly smaller in
height. Then the text was covering part of the project preview, and it was getting slightly hard to read, so I moved the
image a bit.

Comparison:

*Before*
![Projects cards Before](/assets/images/posts/website-redesign/projects-before.png)

*After*
![Projects cards now](/assets/images/posts/website-redesign/projects-after.png)

Finally, I added a link to my resume in the projects section, because even though I'm not actively looking for new job
opportunities, I like to know of any available positions which might take my career to the next step.

#### Blog page

My blog page had a similar issue as the projects section: cards where too big and took too much vertical space. Also, I
probably was making the hero images more important than the post title or description. That's why I decided to make them
way smaller and the content now goes horizontally.

Based on [Lee Robinson's website](https://leerob.io/) I added reading time info for every post that lives in my
website (does not apply to external ones) and also a search bar.

Reading time is done using the [reading-time](https://www.npmjs.com/package/reading-time) package, which works with
plain text, markdown and html.

Based on [Brian Lovin's website](https://brianlovin.com/) I updated the post date to make it easier to read and added a
quick form for people to share ideas of things they think I should blog about, that way, it also becomes more
interactive than before and they don't need to go to the contact site and fill unnecessary fields.

Here's the comparison:

*Before*
![Blog before](/assets/images/posts/website-redesign/blog-before.png)
![Blog footer before](/assets/images/posts/website-redesign/blog-footer-before.png)

*After*
![Blog now](/assets/images/posts/website-redesign/blog-after.png)
![Blog footer now](/assets/images/posts/website-redesign/blog-footer-after.png)

#### Footer

I went from simple to useful with the footer. [Lee Robinson's website](https://leerob.io/)'s footer includes links for
the main sections of the site, but also some extra "hidden" ones.

I also applied text gradients here, and now it helps people navigate more easily through the different sections of my
website.

Comparison:

*Before*
![Footer before](/assets/images/posts/website-redesign/footer-before.png)

*After*
![Footer now](/assets/images/posts/website-redesign/footer-after.png)

## New Features

### Table of contents

While viewing some blog posts in Lee Rob's website, I noticed many of them included a table of contents, which I think
might be useful when going through long blog posts just like this one 😅

I started checking how he did it and found [a snippet](https://leerob.io/snippets/mdx-table-of-contents) to do it with
MDX. The problem was: I don't use MDX in my website. Therefore, decided to code it myself, and here it is.

```typescript
export const getTableOfContents = (body?: string): string | null => {
  if (!body || !body.length) return null;
  // Split markdown body line by line
  const lines = body.split(/\r\n|\n\r|\n|\r/)
    // Get only the lines that start with # aka the titles
    .filter((it) => it.trim().startsWith('#'));
  let mainTitle = '';
  // Find the title with the less amount of #
  for (const line of lines) {
    const titleHashtags = line.trim().substring(0, line.lastIndexOf('#') + 1);
    if (titleHashtags.length < mainTitle.length || mainTitle.length <= 0) {
      mainTitle = titleHashtags;
    }
  }
  let titleIndex = 0;
  const tableOfContents = lines
    .map((line) => {
      // Remove the main title part
      let title = line.substring(mainTitle.length).trim();
      let indent = '';
      // If the title does not start with #, then it's one of the main ones, so it's numbered
      if (!title.startsWith('#')) {
        titleIndex += 1;
        // The indent isn't really an indent but rather an item numeration
        indent = `${titleIndex}. `;
      } else {
        // Otherwise, indentation is needed, so I add two spaces per every # in the title,
        // plus 2 extra ones at the beginning because these are nested items
        const split = title.split('#');
        title = split.pop()?.trim() ?? '';
        indent = `   ${split.join('  ')}* `;
      }
      if (!title || !title.length) return null;
      // Generate the link slug, where the title will point to, by replacing non word 
      // characters with a dash
      const slug = title.toLowerCase().replace(/\W/g, '-');
      return `${indent}[${title}](#${slug})`;
    })
    .filter((it) => it && it.length > 0);
  return tableOfContents.join('\n');
};
```

### Code Syntax Highlighting

Lee Rob's posts also included pretty code snippets. I didn't really consider this before, because I was thinking of
using dev.to to publish blog posts, but then I also thought it would be nice to have them right on my own website, and I
started looking into how to implement that.

I used [React Syntax Highligther](https://github.com/react-syntax-highlighter/react-syntax-highlighter) along
with [React Markdown](https://github.com/remarkjs/react-markdown/) and a custom syntax theme to achieve that, although
is based on [Lee Robinson's one](https://github.com/leerob/leerob.io/blob/main/styles/global.css).

### Security headers

I just followed [Lee Robinson's guide](https://twitter.com/leeerob/status/1381605537742254082) in Twitter.

### Self-hosted fonts

Following [Lee Robinson's guide and suggestions](https://leerob.io/blog/fonts) I have now set my website to host the
fonts files itself, aiming to improve their performance.

I used this [Google WebFonts Helper](https://google-webfonts-helper.herokuapp.com/) tool to download only the font files
and config I needed.

### Music dashboard

The [music dashboard](/music) is a new place in my website, where you can know a little more about me by seeing what I'm
currently listening to and also the most recent top tracks.

To achieve this I used [Lee Robinson's snippets](https://leerob.io/snippets) to [get the song I'm currently listening to](https://leerob.io/snippets/spotify), and also the [top tracks](https://leerob.io/snippets/spotify-top-tracks). And additionally used [react-palette](https://www.npmjs.com/package/react-palette) to get colors from the song's album and show a more vivid interface.

### Inspiration links

Based on [Brian Lovin's bookmarks](https://brianlovin.com/bookmarks/website) I wanted to share
some [links](/inspiration) to websites or tools that have been inspiring my work and even some of my
projects. Probably not enough to recognize their work and quality and creativity in what they do.

I'm using the [WebMaster API](https://www.webmasterapi.com/get-favicons) to get the sites favicons.

## Closing up

Well, this has become a really long blog post. I just wanted to explain the process I went through, the decisions I
took, and also mention the parts I took most inspiration from to do this.

I hope you enjoyed this post. See ya 👋


Publishing a React component package on npm


Recently at work I had to create and publish a React component on npm, which is planned to be used in multiple projects with little functionality or styles changes.

Due to being a company project, I can't share the source code, but I will share some important snippets as needed.

### It isn't as easy as expected 😕

When I was asked to do such task, we already had the component built and working as a `create-react-app` project, which was also a website and stuff.

I thought it would be as simple as running `npm publish` and that I was going to be able to import it in the other project right away.

Unfortunately it wasn't like that and I ran into compilation issues in the project that implemented it. So I started looking for the _right_ way to do it.

### Meet `create-react-library` 🤓

While searching how to achieve that, I came across with [`create-react-library`](https://github.com/transitive-bullshit/create-react-library).

I was looking for the simplest approach to do what I needed, and didn't want to deal with `webpack` or `babel` stuff and whatnot, so that project definitely came in handy because it was easy to use and pretty straight forward.

### Using `create-react-library` 👨🏼‍💻

Creating a library project is as easy as running
```bash
npx create-react-library project-name
```

You will be prompted for some config, similar to `create-react-app`, but once done, you get the project and everything setup to work right away.

I liked it because I didn't have to do much else, and it also comes with an example project inside, that uses your library, so you can test everything will be working properly after you've "published" the package.

Next thing for me was just migrating the component from the previous project to the library project. It was pretty much a copy-paste process with some little refactoring, but nothing significant else.

### The challenges 😬

Despite requiring no configuration, I encountered a couple problems during the process...

##### 1. React Fragments 🖼

I was getting compilation errors for using React Fragments like this `<>{...}</>`, so I changed that to `<React.Fragment>{...}</React.Fragment>` and they stopped... well, kinda.

Then I started getting `ReferenceError: Fragment is not defined` errors. It wasn't easy to solve so I asked for help in the [Unicorn Utterances](https://discord.gg/FMcvc6T) discord server, and [Corbin](http://crutchcorn.dev/) found [an issue](https://github.com/transitive-bullshit/create-react-library/issues/243#issuecomment-653525598) in the `create-react-library` repo that mentioned adding `--jsxFragment React.Fragment` to the `build` and `start` scripts.

And then it was all working again.

##### 2. Included SVGs 📐

The component included an SVG (the company logo), imported and used something like this:
```jsx
import CompanyLogo from './company-logo.svg'
...
return (
  ...
  <img src={CompanyLogo} alt={'Company Logo'} />
  ...
);
```

It worked fine locally, even with the local project that imported the component library, but after published in npm and imported in the other project, compilation failed, because the svg file was "compiled" with a different name, similar to `company-logo~aBcDe.svg`. Notice the `~` character. That was the issue, because it can't be used in JS var names.

The quick solution, was to make it a prop and allow passing it to the component, so it wasn't compiled by the library but the other project. Again, I didn't want to deal with `webpack` or `babel` or any extra config, so this was the easiest for me.

##### 3. CSS 🎨

I was using css modules for the library components, but I also needed a little of normal css, because the component used other components from [`rmwc`](rmwc.io), and they use that and I needed to override a few styles.

From what I understood `create-react-library` the normal css and the module css files would coexist and work along normally, but for some reason, it wasn't like that, and the normal css was still compiled as a module, i.e. the compiled classes names would have some random suffix to make them unique, and therefore none of the overriden styles were applied.

At the end, I ended up changing the css modules to normal css, so no suffix was added during compilation, and then it all worked as expected.

### Closing up 👋🏼

So, after struggling with those few things, I was able to use the component from the library without any other issues, and everything was working as expected, including react hooks like `useContext` and `useReducer`.

Also, `create-react-library` definitely allowed publishing the package by just running `npm publish` as I wanted it to be.

There are probably other approaches to build a react component(s) package, but this one worked for me and was easy to use, so I liked it and wanted to share my experience.

If you have further questions, I'll try to answer.
Find more about me @ [jahir.dev](https://jahir.dev)

Special thanks to [Corbin Crutchley](http://crutchcorn.dev/), [Alex Dueppen](https://ajd.sh/) and Robert Mennell from the [Unicorn Utterances](https://discord.gg/FMcvc6T) discord server, who helped me solve the issues and get the library working.

Cover image is from [unsplash.com](https://unsplash.com/photos/FkjaN-7gWC0)


Get to know the software and hardware I use

Which tools do I use?


This site is inspired and featured on [uses.tech](https://uses.tech)

### 🌐  Website

This website is built using TypeScript, custom CSS (no frameworks/libraries), [Next.js](https://nextjs.org/) and deployed on [Vercel](https://vercel.com/)


### 📑  Terminal + Editors

I use the default macOS terminal with a slightly modified `~/.bash_profile` for it to [show emoji](https://dev.to/anthonydelgado/adding-emoji-to-your-terminal-on-osx-9oj) and the git branch and status in the prompt

* [WebStorm](https://www.jetbrains.com/webstorm/), [IntelliJ IDEA](https://www.jetbrains.com/idea/), [PyCharm](https://www.jetbrains.com/pycharm/) and [Android Studio](https://developer.android.com/studio)
* [Material Theme UI](https://plugins.jetbrains.com/plugin/8006-material-theme-ui/) plugin
* [Fira Code](https://github.com/tonsky/FiraCode) font

### 📌  Browser Extensions (Brave)

* [Auto Tab Discard](https://add0n.com/tab-discard.html)
* [Distraction Free YouTube](https://chrome.google.com/webstore/detail/df-tube-distraction-free/mjdepdfccjgcndkmemponafgioodelna)
* [HTTPS Everywhere](https://chrome.google.com/webstore/detail/https-everywhere/gcbommkclmclpchllfjekcdonpmejbdp)
* [Ink for Google](https://chrome.google.com/webstore/detail/ink-for-google/hmanckoiohnlgdommlcckcflkmllobgj)
* [JSON Viewer](https://chrome.google.com/webstore/detail/ink-for-google/hmanckoiohnlgdommlcckcflkmllobgj)
* [Refined GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf)
* [Minimal Twitter](https://chrome.google.com/webstore/detail/minimal-twitter/pobhoodpcipjmedfenaigbeloiidbflp)
* [Simplify Gmail](https://chrome.google.com/webstore/detail/simplify-gmail/pbmlfaiicoikhdbjagjbglnbfcbcojpj)
* [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm)
* [User CSS](https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb)

### 💡  Apps

* [Craft](https://craft.do/)
* [Notion](https://notion.so/)
* [GoodNotes](https://www.goodnotes.com/)
* [1Password](https://1password.com/)
* [AirBuddy](https://v2.airbuddy.app/)
* [CleanShot X](https://cleanshot.com/)
* [Contraste](https://contrasteapp.com/)
* [Haptic Touch Bar](https://www.haptictouchbar.com/)
* [Clean My Mac X](https://cleanmymac.com/)
* [Postman](https://www.getpostman.com/)
* [Magnet](https://apps.apple.com/co/app/magnet/id441258766)
* [Swish](https://highlyopinionated.co/swish/)
* [Bartender](https://www.macbartender.com/)
* [Lungo](https://sindresorhus.com/lungo)
* [Battery Indicator](https://sindresorhus.com/battery-indicator)
* [Rocket Pro](http://matthewpalmer.net/rocket/)
* [SoundSource](https://rogueamoeba.com/soundsource/)

### 💻  Hardware

* [2019 16" MacBook Pro](https://support.apple.com/kb/SP809) (Work) _2.6 GHz Six-Core Intel Core i7, 512GB SSD and 16GB RAM_
* [2020 13" MacBook Pro](https://support.apple.com/kb/SP819) (Personal) _2.0 GHz Quad-Core Intel Core i5, 512GB SSD and 16GB RAM_
* [LG 27UK850-W 27" 4K Monitor](https://amzn.to/33anjOW) that's on a [Stand Riser](https://amzn.to/3a7zEaj)
* [DeltaHub Carpio](https://deltahub.io/)
* [HyperDrive Duo 7 in 2 USB C Hub](https://amzn.to/3kTYahM)
* [Anker 7 in 1 USB C Hub](https://amzn.to/3nSY1wZ)
* [Keychron K3 with Brown Mechanical Switches](https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?variant=32220198699097)
* [Logitech MX Master 2S](https://amzn.to/3kO2or6)
* [Logitech HD Pro C920 WebCam](https://amzn.to/372apDI)
* [Pacific Blue iPhone 12 Pro](https://amzn.to/396rFun)
* [AirPods Pro](https://amzn.to/3nRtdwx)
* [iPad Air 4th Gen](https://amzn.to/396fwpp)

### 👾  Gaming PC
* MotherBoard: [Aorus B450 Pro WiFi](https://amzn.to/3g6mRsu)
* Processor: [AMD Ryzen 7 3700X](https://amzn.to/32tuHEF)
* Graphics Card: AMD RX 5600XT
* Storage: [Western Digital 480GB SSD](https://amzn.to/3v4KAO7)
* RAM: [ThermalTake Toughram RGB 16GB (2x8)](https://amzn.to/2Q4kJ9Z)
* Case: [Black Corsair iCue 465X](https://amzn.to/3ssBrgB)
* Power Supply: [Cooler Master 750W 80+ Gold](https://amzn.to/3dhi7yo)
* Keyboard: [Logitech G915 TKL](https://amzn.to/3mLmK70)
* Mouse: [Black Logitech G203](https://amzn.to/3e7stzU)

> **Disclaimer:**
> 
> Some of the links above are affiliate links. I understand if you don’t want to click them but any affiliate income 
> earned goes straight back into powering this website and my other side projects.


Direct download any Xcode


Downloading Xcode from the App Store, or even the **.xip** file while using a browser, regardless of which one it is, can be a pain when your connection is not as stable and fast as others' and when the download can be interrupted at any time and you're most likely going to have to restart the whole download.

This just happened to me and I'm writing this as a note-to-self but also to share this with others who might be facing a similar situation.

Here's what I did to download it…

### Install Xcode Command Line Tools

It is a small package of ~183Mb which I think it's enough to be downloaded via your browser.

* Go to [Developer Downloads site](https://developer.apple.com/download/more/)
* Sign in with your Apple ID if you need to
* Search for the command line package you want to download (I'm going to use the latest stable Command Line tools for Xcode 10 and macOS Mojave).
  ![Command Line Tools download option](https://cdn-images-1.medium.com/max/800/1*02xceApwno4CEcjBcSh4Fw.png)
* Press the link on the right side and wait for download to complete
* Once downloaded, install it as any other .dmg package.

### Install Homebrew and wget
I used [Homebrew](https://brew.sh/) to install **_wget_**. There might be another way, but this is how I did it. 😅
* Open Terminal
* Run
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
* Follow the prompted steps
* Once done, run
```
brew install wget
```

### Install and get cookies.txt from your browser
* [Download for Google Chrome](https://chrome.google.com/webstore/detail/cookiestxt/njabckikapfpffapmjgojcnbfjonfjfg) (Don't have a link for other browsers, sorry)
* Visit the [Developer Downloads site](https://developer.apple.com/download/more/) again.
* Click the cookies.txt icon
* In the top part you will see a link that says **_'click here'_**. Click it to download the **_cookies.txt_** file
* Save it wherever you want

### Get Xcode direct download link
* Visit the [Developer Downloads site](https://developer.apple.com/download/more/) once more.
* Select the Xcode version you want to download (I'm going to download Xcode 10).
  ![Xcode 10 download option](https://cdn-images-1.medium.com/max/800/1*ZEreSqDV2NsHbYtNe29zwQ.png)
* Right-click the link on the right side an select "Copy link address"
* Alternatively, visit this [StackOverflow answer](https://stackoverflow.com/a/10335943) for links to all Xcode versions.

### Start download
* Open Terminal and go to the location of your **_cookies.txt_** file.
* Now run
```
wget --load-cookies=cookies.txt -c https://download.developer.apple.com/Developer_Tools/Xcode_10/Xcode_10.xip
```
* Replace the link at the end with the one you want for the file you want to download which you got in last step.
* Wait for the download to finish.

**Notes:**
* Add **_-b_** to the download command to run it in the background, although it is easier to check progress and state without it.
* The **_-c_** option in the command allows you to **c**ontinue with the download even if you close your terminal, or cancel the process, or restart your laptop, etc.

### Install Xcode
* Open the downloaded file so it starts uncompressing.
* Move the uncompressed file to the **_Applications folder_** and you're done!

Hope you find this useful and please don't forget to share it with others!

Cover image is from [unsplash.com](https://unsplash.com/photos/xNKy-Cu20d4)


Taking a priori care of your future job

Details that go beyond the official guidelines to create proper Material Design iconography.

📝 Blog

Redesigning my website

Publishing a React component package on npm

Which tools do I use?

Direct download any Xcode

Taking a priori care of your future job

What Google missed in their guidelines for Material Design iconography