Mario Blog Feed

Hire me

Wed, 13 Mar 2024 22:12:03 GMT

Right now, tech is having a rough time in the job market. Maybe it was your turn to be laid off, or maybe the company rescinded the offer after you accepted it. Either way, many people are having a tough time now.

The main takeaway from this is to ensure at a glance, the reviewer can see why hiring you would benefit the company. Making it easy to visualize this for the reviewer would make it easier for you.

Keep in mind that the reviewer might not be a technical person or a person at all. So, use clear and simple language with lots of keywords.

Why hire you

Assuming you get past the AI stage, how do you grab the attention of the reviewer?

You need to state what you did and, importantly, how that helped the company. For example:

Made the homepage faster

That's bad on purpose. A much better example would be:

Significantly improved homepage speed by 2 seconds, amplifying user satisfaction and retention rates

The main reason why this is better is because it makes clear what you did and why it helped the company. Having a snappier experience on the homepage is something most companies would want. Another reason is the retention rates and user satisfaction, depending on the position and how frontend-focused it is.

While it is recommended to redo your resume for every job you want, in practice, make a good one or a few that they alternate depending on the job you're looking for. For example, a full-stack developer would have three: one for the backend skills, one for the frontend skills, and one that covers both.

Sadly, it is a numbers game

Sadly, it is a numbers game. Apply to enough jobs, and you should land one in time. Yes, you do need to be prepared. Have a nice resume, do some LeetCode questions, and handle the culture interviews well. The market is tough right now, so we just need to ride it out.

Don't forget about soft skills

Sat, 25 Nov 2023 22:12:03 GMT

Don't be weird

Recently I landed a new job at Molecular testing labs as a developer. I landed this role mainly do my people skills, we even skipped the technical interviews. While this sounds weird, keep in mind the hiring team is just looking for someone the development team can work with for 40 hours a week. If you can pass the vibe test, then they are more likely to hire you. When I began my career in tech I initially focused too much on the technical side of the field. How do I reverse a linked-list, should I use a recursion or dynamic programming for this problem? Sadly my people skills are not as strong as they soon be, so I just down played their importance for landing jobs.

Small talk matters

We all had those talks with recruiters, they need a moment to get ready for the interview. They pull up your resume, send off some quick email, get a notepad ready. All the while they are asking you about your day. These moments matter, it's the first impression you are giving them. You need to answer these questions and ask some back. Bonus points if you can ask about something you really care about. So stalk them on social media and talk about something you have in common. Ask follow up questions about the things they say.

We have all talked to people and gotten the vibe that they are only waiting to say the thing they have in mind, being a good conservationist doesn't mean you need to say a lot. Keep it simple and listen to the other person and ask questions about what they said.

Answer the questions

All interviews are different, this is why you need to answer the question asked. If asked about your work history just say the minimum. For example, "I began my career at Company A as a intern web dev, then I moved on to Company B as Entry level Engineer, and finally when to Company C as a Software Engineer. Would you me to go more in detail any anything specifically." The recruiter might be reading your resume and this question might just be there to give them time. Maybe they want to know about why you left Company A or what tools you used at each company. So keep your answers brief when the questions are more ambiguous and give more details when the questions ask for it.

Ask questions too

Remember companies want to get the feel that you want to work for them too. Whether or nor you're looking for the perfect job or any job to pay your bills, companies want to get the impression that you are not just getting the job till you land a better offer and leave the first chance you got. So you need to ask question that show that you want the job and did your homework. For example "What does growth and development look at Company A" or "What attracted you to this company and was it what you expected?". If possible you can ask the person interviewing you what they are looking for in the perfect candidate. You can use this information to help you answer future questions.

Know your audience

Keep in mind all interviews are different. Some interviewers have a list of questions they need to get thru so the higher ups can review your answers. Some interviewers want a two-way conversation where you and the interviewer are working thru a problem so they can see how you work with others. Sometimes it's just a technical timed question or a vibe check. So whenever possible ask how you can prepare for the interview and what you should expect.

Recap

Don't be weird
Small talk if possible
Listen and answer what they asked
Ask questions, if possible ask questions about they said
Do your homework

Lastly be relaxed, remember you are applying because you are the solution to the problems they are facing. Remember to show this and that it would be a pleasure to work with you. Also if they ask a tough question, pretend to take a sip of coffee or ask them to repeat themselves on zoom to give you more time to think of a answer.

Big O for beginners

Fri, 21 Jul 2023 22:12:03 GMT

This blog is meant for people who are new to Big-O Notation or people who need a refresher on what Big-O Notation is. If you don't need this this bigo cheatsheet, might be more up your alley. It covers common data structure operations and array sorting algorithms.

What is Big O Notation

Big O notation is a method to tell how fast a algorithm is, this is done my tracking the operations or steps it takes to get to the solution. This lets us to account for different clock speeds on CPUs. A algorithm is not measured in seconds, but in terms of growth of the algorithm.

Algorithms?

Algorithms are just steps to change your current situation into a desired outcome. It can be anything from a instructions for a sandwich to ChatGPT. Algorithms are something integral to software development. Big O notation came along so people can discuss Algorithms and the differences between them.

For example

#include <stdio.h>

int search(int arr[], int arrSize, int value){

    // loop thru everyElement to find the index value
    //  if it exists in the array
    for(int i = 0; i < arrSize; i++){
        if(arr[i] == value){
            return i;
        }
    }

    // return -1 if not found
    return -1;
}


int main() {
    int arr[10] = {0,1,2,3,4,5,6,7,8,9};
    int found = search(arr,10, 9);

    printf("Found at %d",found);

    return 0;
}

The Big O runtime for the code above would be O(n). The search function is a linear algorithm. It checks the array one by one until it finds the value it's looking for or until it searches the entire array. While the best case for this function is when it finds the value right way, this is not how we get the Big O runtime of a function. We must calculate it when looking at the worst possible runtime.

Does performance matters?

With a small enough input or fast enough CPU then you many not need a better algorithm for your use-case, whats 50ms or 7ms to a person. Anything under 100ms is instantaneous to most people, if this blog is to be believed: How Fast is Real-Time? Human Perception and Technology.

So when do you need to bother with better algorithms?

When performance matters

Algorithms	Elements	Steps	runtime
Linear Search	100 steps	100 steps	100ms
Linear Search	10000 steps	10000 steps	11 days
Binary Search	100 steps	7 steps	7ms
Binary Search	10000 steps	14 steps	14ms

For small enough inputs any algorithm can be ad good as any other, but when inputs begin to grow things can change rapidly. From the table above we can see two algorithms solving the same problem, one can take days while the other can be instantaneous.

What is a binary search

#include <stdio.h>

int binarySearch(int arr[], int arrSize, int value){

    // eliminate half the elements each iteration
    int lower = 0;
    int upper = arrSize;
    int mid;
    while(lower <= upper){
        mid = lower + (upper - lower)/2;
        if(arr[mid] == value){
            return mid;
        }else if(arr[mid] < value){
            lower = mid + 1;
        }else{
            upper = mid - 1;
        }
    }

    // return -1 if not found
    return -1;
}


int main() {
    int arr[10] = {0,1,2,3,4,5,6,7,8,9};
    int found = binarySearch(arr,10, 9);

    printf("Found at %d",found);

    return 0;
}

A binary search as Big O runtime of O(Log(n)). It works by dividing the array into in half until you find narrow down the location of the value you are searching for. To be able to use this algorithm then the array needs to be sorted. This lets the algorithm know which half of the array could have the number it is looking for. Looking at the above example, if you are looking for the number 9. If you check the middle of the array and see 5. Then you know you just need to look at the right half of the array since all values to the left of 5 are less than it.

Time Complexity vs Space Complexity

Big O notation is not justed used when discussing how fast a algorithms is, it can also be used when discussing how memory efficient algorithms are. For example if you are tasked with sorting an array of numbers do you create a new array or sort the elements in the original array. If you make a copy of the array then your algorithm would have a space complexity of O(n). If you sorted the array in place without making a copy then your algorithm would have a space complexity of O(1) also known as constant space complexity.

Inconsistent naming

Depending on what part of the internet you are one, then Big O runtime more commonly referred by time complexity. Some people also say Big O space instead of Big O space. This is kinda like the tab vs space thing between programmers. Do with this information what you will.

Trade offs with time and space

Sometimes when making algorithm you will need to consider whats more important, the runtime or how much memory your algorithm can use.

For example

#include <stdio.h>


int getSum(unsigned int value){
    int sum = 0;

    while(value !== 0){
       sum += value;
       value--;
    }

    // return -1 if not found
    return sum;
}


int main() {
    int result = getSum(10);

    printf("result %d:",result);

    return 0;
}

The function getSum has a time complexity of O(n) and a space complexity of O(1). There is a way do this in constant time, since the number must be a positive number then we can make a array with all the possible solutions as elements and use the input as the index to get the right value. This method would have a Time complexity of O(1) and a space complexity of O(n) since we build an array to size N. Each solution could be good depending if space is costly than time is in your use-case.

Anytime a function as a int as a input, then you could use this method.

By the way, this problem does have a formula for constant time and space complexity. It's called Sum of Integers Formula

S = n(a + l)/2

S = sum of the consecutive integers
n = number of integers
a = first term
l = last term

Recap

Algorithms are not measured in speed
Algorithms are measured in growth
Algorithms times are written in Big O notation
Big O runtime is always the worst-case

Gastby: Need some anchors

Thu, 13 Jul 2023 22:12:03 GMT

TLDR: You just need to run the following:

    npm install gatsby-remark-autolink-headers

Then just follow Gatsby Documtaion here: gatsby-remark-autolink-headers

Why should you do this

Making this change is only good if you think the user will want to share a section of blog. Beyond this, there are no other real reason why would should add this it your site.

Simple change

Like the documetion says here: gatsby-remark-autolink-headers

You just need to make the following change:

// In your gatsby-config.js
module.exports = {
  plugins: [
    // ...some other imports
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-mermaid`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              offsetY: `100`,
              icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" fill="#359279" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
              className: `custom-class`,
              maintainCase: true,
              removeAccents: true,
              isIconAfterHeader: true,
              elements: [`h1`, `h2`, `h3`, `h4`], // place the elements you want to anchor here
            },
          },
          `gatsby-remark-prismjs`,
        ],
      },
        // ...some other imports
  ]

Note order does matter

If you are making using of gatsby-remark-prismjs then gatsby-remark-autolink-headers must come before it. Else you can just huck it in your options for gatsby-transformer-remark.

// In your gatsby-config.js
module.exports = {
  plugins: [
    // ...some other imports
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-autolink-headers`],
      },
    },
    // ...some other imports
  ],
}

Some "Gotchas"

For thoses new to gatsby, any time you edit the gatsby-config.js file then you need to build the site again. Then the anchor should pop up only on blogs genertaed from markdown files any time you hover over anything defined in elements.

If you used a custom css on your site, the anchor could just blend into your background. To address this just change fill="#359279" in the svg to any color. Not gonna lie, I was stuck do to this for longer than I want admit.

If you want to me my full implementation of this site, then just click here: Mario's website repo

Done

A nice simple change to your site to help users share blogs. I find gatsby plugins a bit finicky from time to time, so stay tuned for more blogs about my misadventures with gatsby.

Why and How: Markdowns

Mon, 10 Jul 2023 22:12:03 GMT

This is my first post on my new blog!

I'm sure I'll write a lot more interesting things in the future, but for now I'll explain markdown files(.md).

Why use markdown files

Markdown is a markup language for creating simple formatted documents without the need for a GUI to make bullets, bold text. and anything else you might need to write a blog. It's meant to help you keep your hands on the keyboard and not on the mouse. Markdown files are often used on github for making docs. So it's good to know the basics for making READMEs and blogs if you are like me.

History and use-Case on markdown Files

Markdown was made for writers not for coders. The main purpose of this technology to be easy to read, easy to write, and easy to convert to HTML. Markdown files help make all the blogs you skim possible, non-technical writers do not need to worry about h1 tags where they write a blog instead they just need to write # Title.

These files have simple formatting rules and are plain-text allowing them it to work with git. This is they work with vim and emacs and all other IDEs work with it out the box. Programmers love it because they can use markdown files for websites, documents, notes, emails, and readmes.

Downsides to markdown files

First of all Markdown is a super set of HTML. It's susceptible to Cross-Site Scripting attacks(XSS) because its unescaped. For more information why click here to learn more.

TLDR Avoid taking user information all together if you are using Markdown files. If you are do need to, then handle user info by using of HTML XSS filtering libraries, handle this on the server side not the client side, lastly you need to filter the output not the input.

But if you are using it for Docs or Blogs only, then you don't need to worry.

Why does my markdown look different from site to site

Markdown is just like JS, since it used everywhere. Everyone has an option of how it should be handled. Wordpress, Reddit, and many more have site-specific versions of Markdown. Generally speaking the generated HTML do not use any modern elements like nav and picture. The parser from site to site can be different too, leading to some interesting edge cases.

[Click here for some general rules.](# Cheat Sheet)

Cool things you can do

Since everyone has an option on Markdown, some useful libraries have been made. Using Mermaid.JS you can make some diagrams with markdown.

graph TD;
      Socks-->???;
      Luck-->???
      ???-->Profit;

graph TD;
      Socks-->???;
      Luck-->???
      ???-->Profit;

You can be as complex as you want

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

But this these case I would just import some image, save time where you can.

Cheat Sheet

Add a image or gif like this

![Time is Money](./timeIsMoney.png)

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header.

This is the first list item.

This is the second list item.

Here's some example code:
Markdown.generate();

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

Red
Green
Blue

Red
Green
Blue

Red
Green
Blue

- Red
- Green
- Blue

* Red
* Green
* Blue

- Red
- Green
- Blue

code goes here in this line
bold goes here

- `code goes` here in this line
- **bold** goes here

Buy flour and salt
Mix together with water
Bake

1. Buy flour and salt
1. Mix together with water
1. Bake

code goes here in this line
bold goes here

1. `code goes` here in this line
1. **bold** goes here

Paragraph:

Code

Paragraph:

    Code

* * *

***

*****

- - -

yarn install

    ```bash
    yarn install
    ```

var http = require("http")

http
  .createServer(function (req, res) {
    res.writeHead(200, { "Content-Type": "text/plain" })
    res.end("Hello World!")
  })
  .listen(8080)

    ```js
        var http = require('http');

        http.createServer(function (req, res) {
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.end('Hello World!');
        }).listen(8080);
    ```

This is an example link.

This link has no title attr.

This is an example reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

![Alt Text](https://via.placeholder.com/200x50 "Image Title")