DEV Community: Mario Saul

7 Tips to build your Personal Website 👨🏽‍💻👩🏽‍💻

Mario Saul — Mon, 02 May 2022 16:26:59 +0000

Having a personal website can be a great way to showcase your portfolio, write a blog or just make your CV more interesting and stand out among the crowd.

If you're reading this post, you probably already have your personal website, or are thinking about building it. In any case, I want to share with you 7 things I wish someone had told me when I first started building my personal website.

T I P S
Add analytics
Don't forget SEO
Open source your code
Ask for feedback
Don't re-invent the wheel
Get creative
Learn and have fun

📈 Add analytics

Setting up an analytics tool (like Google Analytics) will allow you to track your website's performance and understand how visitors interact with it.

Although this doesn't seem like a very interesting thing for the case of a personal website, there's a couple of great features that can help you gain very helpful insights.

For example, you can set custom events to track important actions on your site (e.g. every time your CV gets downloaded).
Another cool feature I like is the session source. Whenever you apply to a position and send your website to a company, you can append a query param ?utm_source=<COMPANY_NAME> to know if and when they opened it 🕵️‍♂️.

🔍 Don't forget SEO

Whenever I get a candidate to interview, I google their names to learn more about them. This is the case for many, if not most recruiters out there, so you want to plan on being googled.

This doesn't mean you need to spend countless hours trying comply with every single SEO rule and best practice, but it is important to be SEO friendly so your website appears when googling your name.

Here's a few small but important things you can do:

Pre-render pages at build time (SSG) or request time (SSR). Depending on your prefered language, there are many great frameworks you can use like Next.js, Nuxt.js, Gatsby, Jekyll, and many more
Make sure you are delivering a good user experience by measuring your Core Web Vitals
Make sure your styles are responsive and mobile friendly
Add alt tags to your images
Run a Lighthouse SEO report to get improvement recommendations

📖 Open source your code

Making you code public can be a great way to show your coding skills. Since you probably won't be building impressive features that you can show off in your personal website, what you can do is present good quality code.

Here's a few simple tools and principles you can use:

Use a linter (e.g. ESLint)
Use a code formatter (e.g. Prettier)
DRY (Don't Repeat Yourself)
Favor readability (choose descriptive and unambiguous names for variables and functions)
Keep configurable data at high levels

Making your code available as open source also incentivizes collaboration and transparency, which can be useful for other developers.

It goes without saying that if you're not going to worry about how your code looks, making it public can be counterproductive.

🗣 Ask for feedback

Out of all the points I presented in this post, I think asking for feedback has the highest ROI of them all (i.e. It's super easy to do and its benefits can be huge).

Asking your friends and colleagues for feedback can provide extremely valuable insight and give you an understanding of how your site is perceived by other people than yourself. When you do, try to do it with people with different professional backgrounds (engineering, design, UX).

There’s a lot to be gained from getting other people's feedback and absolutely nothing to lose. All you have to do is ask!

In the mood to give me feedback? Check out www.mariosaul.com and let me know what you think in the comments 🙂

🏗 Don't re-invent the wheel

The first mistake I made when started building my personal website, was not doing proper research on the available tools and resources. Instead, I found myself wasting valuable time building stuff that was already built.

Here's a good example of me trying to build a simple 8-bit retro CSS component vs. using a library built for that exact purpose (NES.css)

It not only took one minute to add to my project, but also looks much better than building it myself with my not-so-great CSS skills.

👨‍🎨 Get creative

One of the main reasons to have a personal website is to get away from the plain old PDF file and show yourself in a more fun and interactive way. There's no point in just copy/pasting your CV into a website if it's not going to be any different than the CV itself.

The goal should be to present yourself in a different and exciting way. If possible, try to find something that you love or something that represents you in some unique way, and style your site around it.

If you struggle finding inspiration, you can check out other people's personal websites (there are hundreds of amazing ones you can find online) for getting ideas.

🙇‍♂️ Learn and have fun

If you're an experienced web developer, it might be challenging to find a new skill to learn from such small and simple project. So what you could do is pick a different technology than the one you're used to, e.g. if you're experienced in AngularJS, you can build your site using Svelte (or whatever JS framework the cool kids are using by the time you're reading this).

And last but not least, have fun building it! No matter how big or small, simple or complicated your website will be, you're gonna spend hours working on it. So if you don't find it fun or exciting in any way, you'll most likely end up dropping it unfinished and move on to your next side project.

So there it is, my 7 tips to build an exceptional personal website. Thanks for reading and I hope this post was useful to you.

Feel free to reach out to me in the comments or in my social media 😊! | 🐦 [Twitter](https://twitter.com/mario_saul) | 👨🏽‍💻 [Github](https://github.com/mariiio) | 💼 [LinkedIn](https://www.linkedin.com/in/mario-saul) | 📸 [Instagram](https://www.instagram.com/mario_saul) | |----------- |------------ |------------ |------------- |

Use this LinkedIn bot to land your dream job in 3 easy steps 🤖

Mario Saul — Wed, 06 May 2020 14:45:29 +0000

🥱 TL;DR

Follow the instructions and start connecting!

mariiio / linkedin_connect

Configurable and easy to use LinkedIn tool to automate connections with personalized messages.

⛔ Getting rejected?

Did you see the post of your dream job on LinkedIn and decided to apply?
Then Hold on and don't click that Easy Apply button!

You should know that if you do it means your job application will end up in a pile of hundreds of other job applications. This doesn't necessarily mean you won't get noticed and get the interview. But if you want to significantly increase your chances and have recruiters spend more than 10 seconds on your resume, I'm here to tell you there's a better way!

👁️‍🗨️ Get referred

The best way to get the interview is to get referred or recommended by an influential employee within the company. It will push your resume further up the line, or lead straight to an interview.

The good news is that even if you don't have insider connections to your organization of interest, it is possible to get a referral. Many companies have a referral compensation program and even if the company you're applying to doesn't, most people are willing to help a fellow collegue.

So there you have it, instead of blindly submiting your application, go to the company's LinkedIn page and start sending personalized messages to as many employees in relevant positions as possible.

Easy peasy, right? Well.. as simple as it may sound, it takes time, a lot of time! That's why after long hours of doing this cumbersome job with many companies manually I decided to build a simple bot to automate it.

🤖 Let the bot do the work

Step 1️⃣

Go to the People section of the company you're interested in (make sure your LinkedIn is in english)

Step 2️⃣

Copy the content of the script and modify the constants at the top to your liking:

╔═══════════════════╦═════════════════════════════════════════════╗
║     Constant      ║                Description                  ║
╠═══════════════════╬═════════════════════════════════════════════╣
║ MAX_CONNECTIONS   ║ Maximum amount of connection requests       ║
║ WAIT_TO_CONNECT   ║ Time in ms to wait before requesting to     ║
║                   ║ connect                                     ║
║ WAIT_AFTER_SCROLL ║ Time in ms to wait before new employees     ║
║                   ║ load after scroll                           ║
║ MESSAGE           ║ Message to connect (%EMPLOYEE% and %COMPANY%║
║                   ║ will be replaced with the real values, 300  ║
║                   ║ characters max.)                            ║
║ POSITION_KEYWORDS ║ Keywords to filter employees in specific    ║
║                   ║ positions                                   ║
╚═══════════════════╩═════════════════════════════════════════════╝

Example:

const MAX_CONNECTIONS = 30;
const WAIT_TO_CONNECT = 3000;
const WAIT_AFTER_SCROLL = 3000;
const MESSAGE = `Hi %EMPLOYEE%, I'm a Software Engineer with 4 years of experience in full-stack web development. 
I see you're currently working at %COMPANY% where I saw a Full Stack job post and was interested to hear more about it. 
Would you (or a colleague) have time to chat about the position?
Thanks!`;
const POSITION_KEYWORDS = ["software", "developer", "r&d", "hr", "recruiting"];

Step 3️⃣

Open the Console panel (Press Command+Option+J for Mac or Control+Shift+J for Windows), paste the script and hit enter to run the script (or add it as a snippet)

That's it! Get ready to receive lots of messages of people who want to help you land your dream job.

📝 Conclusion

I built the bot for myself, I ran into a problem and solved it the best way I knew how, coding. It saved me hours of work, helped me get several interviews and expand my network with relevant connections.

Despite it's simplicity and many limitations (e.g. only works for LinkedIn in english, might not work for other browser than Chrome, highly dependant on LinkedIn current structure) I decided to share it with the world to help those in the same situation as me.

Finally, I want to mention that I've read of people online who got temporarily banned from connecting on LinkedIn for abusing the use of automations tools. Although I haven't had any issues so far (after sending hundreds of messages), I advise you use it with caution and at your own risk :)

Feel free to reach out to me in the comments or in my social media 😊!

🐦 Twitter	👨🏽‍💻 Github	💼 LinkedIn	📸 Instagram

Why have engineers run interviews

Mario Saul — Fri, 07 Jun 2019 14:13:55 +0000

Recruiting and hiring can be a time consuming, frustrating and hard process. Particularly for tech companies where employees are in much higher demand than in any other area. So much so that most companies tend to outsource the job to HR consulting firms or even hire a professional themselves. It seems to be clear that it's not something to take lightly, selecting the right people is critical and one you just can’t afford to get wrong.

So if it's such a big deal, why is it that we choose to have our engineers take care of it rather than specialized professionals? I mean, it does seem contradictory since we are far from experts on the subject. Even more if we see it from a practical perspective, it is way more expensive to take engineers away from working billable hours with the clients than to have it outsourced.

Before I answer the question I would like to clarify that we don't have anything against the way HR run interviews, quite the contrary I would say. We understand that a professionally driven interview can be of great significance when evaluating a candidate, and that's why we often send them to meet with a pro in order to get an external opinion subsequent to getting our approval.

So without further ado, let's dive right into the answer.

They know what is like to be on the other side of the table

Interviews can be pretty stressful, even for someone who's gone through many of them. Just think about it, walking into a strange room to meet strange people and try to make a good impression, while at the same time collecting enough information to decide whether the job is right for you or not.

It's easy to understand why some people just don't do well in interviews, it can be so overwhelming that they let their nerves get the best of them. And although good communication skills are paramount for the job, an awkward interview doesn't necessarily mean a candidate doesn't possess them.

“You can only understand people if you feel them in yourself.” – John Steinbeck

Many of our engineers know this firsthand, since not so long ago they were going through the same themselves. Having been in the other person's shoes is key to truly make sense of their situation, and what's more, this empathy naturally results in making the interviewer seem more human and therefore less daunting during the interview.

Cut from the same cloth

I've always thought of job interviews kind of like going on a first date, the picture does look pretty similar to the one I painted in the previous section: Feelings of excitement and nervousness are all over the place, while trying to look like a catch at the same time. After all, they both boil down to similar questions such as whether they can both picture themselves spending a whole lot of time with each other.

The success or failure of a first date can be determined by the ability of finding something in common and moving away from the weather small talk all night long. Same goes for a job interview, and being able to hold deep meaningful conversations require both parties to share some common experiences and of course be able to speak the same language. Sounds like a no-brainer to me: Who can meet these requirements better than someone who has the same educational background, faced the same challenges and is already doing the job?

This first date analogy also helped me understand how important it is to know that an interview is a two way street. You're not only selecting from among several candidates, the best candidates are also selecting from among several options. Therefore if you want to properly give the right impression, you need the best representatives. You are marketing your organization at all times, and it's equally important to paint the right picture to candidates who don't end up getting the job as well.

Personal development

At WyeWorks we understand that having great technical skills is just the first step to becoming a great software engineer, like my friend Sebastián explained in his post What makes a great software engineer great
, which is why we are constantly searching for opportunities that enable people to take the next step and develop a more diverse skill set.

Many people may think that interviewing isn't that hard of a job and believe they can become experts by simply conducting a few interviews. I know this firsthand since I was one of those people myself, and let me tell you I couldn't have been more wrong. Immediately after my first experience as an interviewer I realized how challenging the job can be. You don't want to have awkward silences during the interview, you have to know how to direct the show, be well prepared and be as good of a listener as you are a speaker. Not to mention all the small stuff such as being aware of body language and detecting the interaction's subtleties.

I've been conducting interviews for only about a year and a half now, and with each new one I become more aware of how much I still have to learn. But also as I look back to my early interviewing days, I can see how much I've grown since then and how it has helped me develop skills that I can use in many different areas of my life, even beyond work.

Closing thoughts

So if the benefits are so clear, why aren't all companies taking this approach? Well, it's not all rainbows and unicorns. First of all you need engineers who are willing to get out of their confort zones and are motivated enough to invest a significant amount of time and effort into it. Then, it's worth mentioning that when compared to its alternatives, taking this approach means an investment for the company.

Is it worth it then? Absolutely, we truly believe that a company is only as good as its people, which is why we put our best efforts into building the best company we can.

Originally published in WyeWorks blog.

Testing Vue.js in Rails with Webpacker and Jest

Mario Saul — Tue, 16 Jan 2018 18:02:49 +0000

Originally published in WyeWorks blog.

In the project I'm working on, I was given the task of investigating how to integrate Vue.js with our existing Rails app. So I started reading the official guide, watching tutorials and reading various posts until I finally got a fully working Vue component.

Finally it was time to write some tests, but unfortunately, the Webpacker gem doesn't include testing configuration, so I had to do it on my own.

To my surprise, I found that there wasn't much documentation on how to do the setup. So I figured I'd make this post to share with you how I managed to eventually get it working.

1. Install Jest

I decided to go with Jest for no personal preference, I just noticed that vue-cli ships with it and went for it.

To install Jest all you have to do is run yarn add --dev jest from the root of your project.
Then, add a test script to your package.json:

{
  "scripts": {
    "test": "jest",
    ...
  },
  ...
}

Now you can run your tests with yarn test.

2. Define the location of your tests

If you try to run yarn test at this point, you'll see that config/webpack/test.js failed. This is because of the way Jest looks for test files in the project. It basically executes all files matching .spec.js or .test.js in the whole project. In this case, the file matched *.test.js so it tried to run it as a test.

Since we don't want the Webpack config file as well as other files in the project that meet this criteria to run with our tests, we need to tell Jest where to look for them.

In my case since I'm using Rspec, I decided to point it to the spec/javascripts directory. But you can feel free to choose whichever directory fits your project the best.

To do this you just have to add roots to your package.json:

"jest": {
  "roots": [
    "spec/javascript"
  ]
},

Note: If your package.json is quite big and you don't want to keep adding more stuff to it, you can define the jest configuration through the --config <path/to/js|json>; option. If you choose to do so, your package.json should now be like:

  {
    "scripts": {
      “test”: “jest --config spec/javascript/jest.conf.js”,
      ...
    },
    ...
  }

To verify it worked, you can create a spec/javascript/team.spec.js file with a simple test like:

test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

Now run yarn test again and you should see a green "PASS" in the output meaning that it worked 🎉.

3. Babel to the rescue

Now that we got our first test working, let's take it one step further and try to test a Vue component.

The first thing you'd probably try is to create a file under the spec/javascript/ directory and name it something like my_component.spec.js. Then try to import your component from within your spec with the import statement like:

  import MyComponent from '../../app/javascript/my_component.vue';

If you did try this, go ahead and run your tests. You'll see a SyntaxError: Unexpected token import in the output.

The problem here is that import is part of ECMAScript 6, so we need the help of a transpiler such as Babel.

To get it working you need to install two packages by running yarn add --dev babel-jest babel-preset-es2015 and add the "es2015" preset to your .babelrc file:

{
  "presets": ["es2015",
    ["env", {
            ...

If you want to take it one step further, you can add moduleDirectories to your .package.json so you don't have to type out the full path to your modules:

"jest": {
    ...
  "moduleDirectories": [
    "node_modules",
    "app/javascript"
    ]
}

So what we had before as

  import MyComponent from '../../app/javascript/my_component.vue';

can now be written as

  import MyComponent from 'my_component.vue';

4. Where's Vue?

If you followed every step, you should be getting a SyntaxError when trying to run your tests. This means that it successfully imported your component, but it can't yet understand .vue file's format.

Fortunately, we have a package that will take care of it for us, vue-jest.
So go ahead and run yarn add --dev vue-jest along with adding "moduleFileExtensions", "transform" and "mapCoverage" as explained in the README.
Your package.json should look something like this:

"jest": {
  ...
    "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "mapCoverage": true
}

With moduleFileExtensions we no longer need the .vue when importing Single File Components. So what we had before as

  import MyComponent from 'my_component.vue';

can now be written as

  import MyComponent from 'my_component';.

You should now be able to use import seamlessly.

The rules in the transform section indicate which package is responsible for the transformation of testing files. In our case, we want vue-jest to handle all our .vue files, so they are converted to plain javascript before being handled by Jest.

mapCoverage is set in order to use source maps that the transformer emits. Jest will use them to try and map code coverage against the original source code when writing reports and checking thresholds.

Lastly, let's add the official unit testing utility library for Vue, vue-test-utils. Just run yarn add --dev @vue/test-utils and you are good to go.

You can now start writing tests for your Vue components 🎉