Forem: Mirko

Code Like a Human: Empathy is the Most Underrated Skill in Your Dev Toolkit

Mirko — Sat, 11 May 2024 17:11:21 +0000

Alright, code warriors, let's talk truth bombs. You debug problems faster than a hummingbird hopped up on Red Bull and Pixy Stix. But here's a harsh reality that might sting worse than a syntax error on line 1: being a jerk is the ultimate bug in your otherwise impressive system.

Yes, your algorithms are tighter than a dragon's hoard, and your debugging skills would make Sherlock Holmes cry with envy. But coding isn't a solo rampage through the digital wilderness – it's a team lovefest, building the next big thing together. And guess what throws a monkey wrench into that lovefest faster than a banana peel on a server rack? You, the code curmudgeon, spewing negativity like a malfunctioning spam filter.

Look, HR folks, technical skills are a given. Here's why you SHOULD be grilling candidates on their emotional intelligence:

From Lone Wolf to Empathy Empath: Imagine explaining a complex concept to a teammate who looks like they just ate a keyboard. Not exactly a recipe for innovation, is it? But with a sprinkle of empathy and the communication skills of a motivational speaker on a sugar rush, you can turn frowns upside down and confusion into "Aha!" moments. Remember, happy teammates are teammates who stick around (and don't mysteriously "forget" to attend your code reviews...or worse, passive-aggressively hide your favorite debugging unicorn mug).

Bug Squashing Becomes a Group Therapy Session (Okay, Maybe Not Therapy, But Close): Coding is a team sport, gladiators. There's a reason why "there's no I in team" isn't written in binary. When that inevitable bug rears its ugly head, you need a squad that has your back, not one cowering in fear of your withering sarcasm. Being a supportive teammate fosters a positive environment, and hey, it also means someone's there to catch you when you accidentally delete the entire database (because let's be honest, even coding gods have moments of weakness).

Love in the Air, Quality Code on the Screen: Projects fueled by negativity are like a grumpy troll guarding a bridge – they might get by for a while, but they won't win any awards. On the other hand, a team that works together with mutual respect and understanding can create magic. Suddenly, those late-night coding sessions turn into brainstorming bonanzas, and complex problems melt away like metaphorical snowflakes on a coder's warm keyboard.

Engineers, listen up! Coding with a side of kindness is your ultimate power move:

Even Junior Developers with Smiles Can Outshine Jerk Geniuses: Let's face it, a positive attitude is contagious, and it can make even the most complex project feel a little less like pulling teeth. A team that gels is a team that innovates, and that's the kind of team everyone wants to be on (and the kind of team that gets things done).

The moral of the story? Code with kindness, communicate with clarity, and remember: a happy team is a productive team (and a much less likely source of office pranks involving disappearing keyboards and questionable cafeteria lunches). Now go forth and conquer the coding realm, but do it with the heart of a hero, not the temperament of a troll.

Juggling Your Git Personalities: A Guide to Mastering Multiple GitHub Accounts

Mirko — Fri, 03 May 2024 13:11:30 +0000

Ever feel like you're living a double life? By day, you're a mild-mannered coder, by night... a swashbuckling Git master with a secret lair (your basement) and multiple GitHub accounts! But juggling those accounts can be a pain, like trying to wrangle kittens while wearing oven mitts. Fear not, fellow hero, for this guide will show you how to manage your GitHub personas with the grace of a seasoned spy 🕵️.

The Scenario:
Let's say you have two GitHub identities: "WeekendWarriorRick" (because that's when all the coding magic happens) and "ProfessionalPete" (the responsible one who pays the bills). You want to seamlessly switch between them without causing any multidimensional paradoxes (or at least minimize them).

Step 1: Forge Your Secret Weapons (SSH Keys)

First things first, we need some digital secret weapons: SSH keys. Imagine them as your Batarangs, but for secure communication with GitHub. Navigate to your .ssh folder (like a digital Batcave) using this handy command:

cd ~/.ssh

Now, whip up some unique SSH keys for each account with this fancy code (replace the email addresses with your own, unless you want Rick to be fixing bugs for your boss):

ssh-keygen -t rsa -C "weekendwarriorrick@yahoo.com" -f "WeekendWarriorRick"
ssh-keygen -t rsa -C "professionalpete@boringcorp.com" -f "ProfessionalPete"

Important Note: When prompted for a passphrase (like a password for your secret lair), you can leave it blank for convenience, but remember, with great power comes great responsibility (and the risk of anyone accessing your accounts).

Step 2: Train Your Digital Butler (SSH Agent)

The SSH Agent is like your Alfred – it keeps track of your SSH keys so you don't have to juggle them yourself. To add your spanking new keys, use these commands:

ssh-add -K ~/.ssh/WeekendWarriorRick
ssh-add -K ~/.ssh/ProfessionalPete

Step 3: Plant Your Flag on GitHub (Public Keys)

Now, head over to your GitHub accounts and add the public keys (the shiny counterparts of your private keys) like planting flags on conquered territories. You can find instructions on how to do this in GitHub's deepest, darkest secrets... I mean, documentation (it's probably under "SSH and GPG keys").

pbcopy < ~/.ssh/WeekendWarriorRick.pub
pbcopy < ~/.ssh/ProfessionalPete.pub

Sign in to Github Account
Go to Settings > SSH and GPG keys > New SSH Key
Paste your copied public key and give it a Title of your choice.

Step 4: Craft Your Master Control Panel (SSH Config File)

The SSH config file is your mission control. Here, you'll set up aliases for each GitHub account so you can switch between them with ease. Create the file (if it doesn't exist) with a touch of your fingers (or this command):

touch config

Then, open it in your preferred code editor (I use VSCode):

code config

Now, paste this code snippet into the file, replacing the usernames with your actual ones:

# WeekendWarriorRick to the rescue!
Host github.com-WeekendWarriorRick
  HostName github.com
  User git
  IdentityFile ~/.ssh/WeekendWarriorRick

# ProfessionalPete swoops in!
Host github.com-ProfessionalPete
  HostName github.com
  User git
  IdentityFile ~/.ssh/ProfessionalPete

Step 5: Deploy Your Skills (Cloning Repositories)

Finally, the moment of truth! Let's clone a repository using your newfound power. Navigate to your desired directory and unleash this command, replacing the username and repository name with your target:

git clone git@github.com-WeekendWarriorRick:WeekendWarriorRick/MyWeekendProject.git

Remember:

For existing repositories, you might need to set the correct user email and name:

git config user.email "weekendwarriorrick@yahoo.com"
git config user.name "Weekend Warrior Rick"

# Repeat for ProfessionalPete with his info

Bonus Tip:

Add remotes with aliases to your repositories so you can push and pull with ease:

# git remote add origin git@{mySSHHostUser}:{githubUser}/{repositoryName}.git
git remote add origin git@github.com-WeekendWarriorRick:WeekendWarriorRick/MyWeekendProject.git

# Repeat for ProfessionalPete's remote

Now you can push and pull like a pro using:

git push
git pull

Congratulations 🥳, code warrior! You can now seamlessly switch between your GitHub accounts and conquer the digital world, one commit at a time.

Astro? Let's try it

Mirko — Thu, 05 Jan 2023 14:51:53 +0000

DEMO: https://astro-rickandmorty.netlify.app/
CODE: https://github.com/mirkosaugo/Astro-RAM

Why this project

As a developer I think it's important to jump in new challenges sometimes, not only because I have fun to try new technologies, but also because is a great opportunity to update my skills and have a full panoramic on what's going on out there.
Today I want to share with you my feedback about a new framework called Astro.
I'm not a good writer and the goal of this article is not to generate content, so I'll be very brief focusing on some framework principles, explaining my demo and at the end outline pros and cons.

What is Astro?

As the payoff in homepage says Astro is a "web framework for building fast, content-focused websites".
It's pretty new in this market, but I saw a lot of enthusiasm around it.
Astro is a new kind of static site builder that renders your entire page to static HTML, removing all JavaScript from your final build by default. You can compose your website using differents UI components from your favorite JavaScript framework (React, Svelte, Vue, etc) extending your vite configuration with these plugins.

Main Concept: Islands

"Astro Islands represent a leading paradigm shift for frontend web architecture."
This principles allows Astro to deliver less javascript in the page, because it loads a small piece of code of a specific component only when become interactive (for example when react components enter in the viewport). So, there isn't a huge bundle size of unused javascript.

And, as the figure shows sometimes a lot of components in a website are pure static content, and in that case you don't want to ship unused javascript to the user right? (think about a blog post page, maybe the user click on google link and he/she visit only that page. So, why load all the entire JS bundle?).
Read more about Astro Islands.

The project

Okay, now let's jump in a real case.
I developed this project using the RickAndMortyAPI (I'm a big fan of it), typescript and tailwind.
You can find the code in my Github repo and the demo at this link.

In Astro components you can write js code in 2 different ways. On top of the page that is compiled at build time (server side) or inside a normal script tag for client actions:

---
// Server Side (compiled on build process)
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Markup -->
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<button id="interactivity">Click Me</button>

<!-- JS Client Side -->
<script>
  const button = document.getElementById('interactivity');
  button.addEventListener('click', () => {
    alert('Hello World!');
  });
</script>

In the first case, that part is used to fetch and display content when the page is rendered and/or to read props passed from another component.
These components are oriented to be static, so you don't have access to states in page (like detect outside the component when a menu is open or closed) or custom events handling like onClick in react, but you can use the classic querySelector to trigger events and knows the status of the DOM.

Examples

Astro components and Framework components (in my case, react)

Astro components are very easy to use, BUT you can't use it inside a framework components (like react).
In my case I ran into this when i created a static component <CharacterCard /> where i could use also a useful astro plugin to generate blurred images on lazy images in the character card.
I used those cards in HomePage where the data comes from a fetch at build time and the content is static.
But, let's say that i want to create a search component in react (you can see it in HomePage) and loop all the items after the response. Well, in this case I can't reuse the same component to render the list because you can't use astro static components inside framework components. Or better, you can use the <slot /> property to render html inside of it, but you can't pass props to another astro component or loop it, so it's pretty useless in my opinion.
Read more about Astro and UI Frameworks.

Do you ship less for real?

The performance are unbeatable if compared with NextJS for example, but actually Astro always import js code in the document, when is written in the script tag inside an Astro component, even if the component is not in the viewport or called (like for framework components).
So it isn't like Qwik where js is loaded only when a specific element in the dom becomes interactive and is awake by the user.

Conclusion

PROS

Easy to understand and use
Better performance compared for example with NextJS
You can use your favorite framework (react, vue, svelte, etc) with Astro
Good community: There are a lot of useful plugins to use in Astro (like the plugin to generate blurred images for lazy images)

CONS

You cant combine SSR pages and SSG pages in Astro (for example if you want to read params from a search form you need to transform your entire project in SSR: this causes a big issue for SEO because you lose the power of the static content)
Framework components (like react) cant use Astro (static) components
Astro components aren't reactive, so you cannot manage states when they change
if Framework components are in client:idle or client:load mode, they import the entire code when the page is loaded (I would like to have the client:load mode in the build process and then serve it as client:visible mode)

At the end, in my opinion and in poor words, Astro is good for small blogs and static/creative websites, but not for web applications where, for example, interactivity is the main focus (like: searching, filtering, ordering, shared states ecc...) because in that case you lost the real power of Astro.