DEV Community: CarolinaCobo

Callbacks, Promises & Async/Await

CarolinaCobo — Thu, 08 Sep 2022 19:04:05 +0000

I’m currently diving more deeply into how JS works and I’ve been watching Will Sentance’s JavaScript: The Hard Parts course. One of the sections is about Promises and Async/Await and I have to say it still was a bit of a mystery for me, so after watching the section of the course I decided I’d like to do a bit more reading on it on the MDN docs.

I think to start, callbacks would make sense to see how it’s improved with promises and made our life easier.

Callbacks

Function passed inside another function as an argument, that is then called in that function to perform a task.

console.log('First');
console.log('Second');

setTimeout(()=>{
    console.log('Third');
},2000);

console.log('Last');

This snippet would return this:

First
Second
Last
Third

This is because the setTimeout is set up to wait for 2 seconds so the threat of execution will continue, and then come back to it. This method was good until you needed to make multiple calls, and to do so you’d have to nest the functions to get the desired behaviour. This would cause end up in what was referred to as Callback Hell or Callback Pyramid of Doom.

Promises

The MDN docs define a Promise as an object that represents the eventual completion or failure of an asynchronous operation.

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

Why use them?

Using promises will guarantee you some outcomes that you wouldn’t get from callbacks such as:

If the callback is added with a .then() it will never be invoked before the current event loop run has been completed.
The callbacks will be invoked even if they were added after the asynchronous operation that the promise represents has succeeded or failed.
You can add multiple callbacks just by calling .then() several times. They will be invoked one after another, in the order in which you placed them in the code block.
Chaining, which is worth getting into more detail.

Chaining

Chaining will happen when you need to execute more than one consecutive asynchronous operation and each following operation starts when the previous one succeeds. In the promise chain the then() returns a new promise, different from the original.

Nowadays, we attach our callbacks to the returned promises instead, forming a promise chain.

Keep in mind that you can chain after a catch as well.

new Promise((resolve, reject) => {
  console.log("Start");

  resolve();
})
  .then(() => {
    throw new Error("Something went wrong");

    console.log("This first");
  })
  .catch(() => {
    console.error("This second");
  })
  .then(() => {
    console.log("Do this regardless of what happened");
  });

Important: Always return results, otherwise callbacks won’t catch the result of a previous promise. If the previous handler started a promise but did not return it, there's no way to track it anymore, and the promise is said to be "floating". It could get worse if you have racing conditions as the result that the next then is reading could be incomplete.

While in callbacks we have to track errors multiple times, in promises if there’s an error the browser will go to the .catch() block.

try {
  const result = syncDoSomething();
  const newResult = syncDoSomethingElse(result);
  const finalResult = syncDoThirdThing(newResult);
  console.log(`Got the final result: ${finalResult}`);
} catch (error) {
  failureCallback(error);
}

And this is pretty similar to how synchronous code works, so its similarities to asynchronous build up the async/await syntax.

async function foo() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(`Got the final result: ${finalResult}`);
  } catch (error) {
    failureCallback(error);
  }
}

Async/Await

The purpose of async and await is to simplify working with asynchronous code using promises by making it look like it is synchronous code (see above).

This will make it easier to build an operation from a series of consecutive asynchronous function calls, avoiding the need to create explicit promise chains, and allowing you to write code that looks just like synchronous code.

Even though the return value of an async function behaves as if it’s wrapped in a Promise.resolve, they are not equivalent.

An async function will return a different reference, but thePromise.resolve* returns the same reference if the given value is a promise.

*Promise.resolve resolves a given value to a promise, if that value is a promise, then that promise is returned.

This difference can cause problems when you want to check the equality of a promise and the return value of an async function.

Keep in mind that just like a promise chain, await forces asynchronous operations to be completed in series. This is necessary if the result of the next operation depends on the result of the previous one but if that's not the case, using Promise.all() would be more efficient.

To summarise, promises solve a fundamental problem we faced using the callback structure. They allow us to chain and simplify catching all errors, even thrown exceptions and programming errors.

Async/await simplifies working with asynchronous code by making it look like synchronous code, remember it will return a different reference than a promise which could lead to issues.

Thanks for reading, I appreciate your time. If you need any help or have any questions please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!

React Hooks 3: New Hooks in React 18

CarolinaCobo — Thu, 08 Sep 2022 18:59:28 +0000

I’m still familiarising myself with the new updates in React 18 such as Concurrency, Automatic Batching, and the new Transitions and Suspense features (I might write about it). Still, to finish this section I’m going to go over the new Hooks in React 18.

useId

This new Hook will generate a unique ID on both sides, client and server while avoiding hydration mismatches.

This Hook will be useful mostly in component libraries that are integrated with Accessibility APIs that require unique IDs.

Remember: useId is not for generating keys in a list, the keys should be generated from your data.

For a basic example, pass the id directly to the elements that need it:

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>This is an Example</label>
      <input id={id} type="checkbox" name="react"/>
    </>
  );
};

For multiple IDs in the same component, append a suffix using the same id:

function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}

useTransition and startTransition

They will allow you to mark some state updates as not urgent, some updates might be considered urgent by default (updating a text input) and these ones will be allowed to interrupt the non-urgent ones.

const [isPending, startTransition] = useTransition();
//startTransition lets you mark updates in the provided callback as transitions:
startTransition(() => {
  setCount(count + 1);
})
//isPending indicates when a transition is active to show a pending state:
function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    })
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

useDeferredValue

Accepts a value and returns a new copy of the value that will defer to more urgent updates. In case the current render is the result of an urgent update, such as user input, React will return the previous value and then render the new value after the urgent render has been completed.

This one is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits of using it are that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and deferred values can be suspended without triggering an unexpected fallback for existing content.

It also only defers the value that you pass to it. In case you want to prevent a child component from re-rendering during an urgent update, you must also memoize that component with React Memo or React useMemo

function Typeahead() {
  const query = useSearchQuery('');
  const deferredQuery = useDeferredValue(query);

  // Memoizing tells React to only re-render when deferredQuery changes,
  // not when query changes.
  const suggestions = useMemo(() =>
    <SearchSuggestions query={deferredQuery} />,
    [deferredQuery]
  );

  return (
    <>
      <SearchInput query={query} />
      <Suspense fallback="Loading results...">
        {suggestions}
      </Suspense>
    </>
  );
}

useInsertionEffect (intended to be used in Libraries,)

useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library it’s not likely you’ll ever use this.

As the source of all this information and or further reference, you should review the React Hooks Documentation.

Thanks for reading, I appreciate your time. If you need any help or have any questions please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!

React Hooks 2: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue & Custom Hooks

CarolinaCobo — Thu, 08 Sep 2022 18:56:40 +0000

In this second part of the series, I covered the rest of Hooks just as an FYI as it might not be likely you’ll encounter this unless you’re building a library or you have a complex edge case.

What you’ll come across more often are Custom Hooks, so if you are not too interested in the other ones, skip to the end to see an example that I’m using in one of my projects.

Both 6. useCallback and 7. useMemo are similar as they both optimize performance. They should be used when a performance problem arises and not before or your application will have unnecessary complexity.

useMemo

Memoizes expensive function calls so they will be only calculated when needed. useMemo will return a memoized value.

UseCallBack

As mentioned, it’s quite similar to useMemo but useCallback returns a memoized function.

useLayoutEffect

This one is really similar to useEffect, nearly the same, being the only difference it is synchronous to render instead of scheduled as they are with useEffect. For example, if you are migrating from class components to hooks this can be very useful as it runs at the same time as componentDidMount and componentDidUpdate, useEffect will come after. Remember this should be a temporary fix and the only time it should be used is to measure DOM nodes, for example for animations.

useImperativeHandle

This one you might not ever use this one, but it might be in some libraries you use or to cover really rare scenarios.

useImperativeHandle is very similar to useRef, when you use it you are given the instance value of the component the ref is attached to, which lets you interact with the DOM element directly.

useImperativeHandle is very similar but also allows you to control the value that is returned instead of the instance element and you will explicitly state what return value it will be. And also lets you replace native functions such as blur or focus with your own.

useDebugValue

This hook extends the visualization of data about custom Hooks inside the component inspector of the React DevTools, here is the Chrome Extension to it and here is the npm package installation.

Bonus: Custom Hooks

You can also build your own hooks extracting the logic into reusable functions.

If you want to extract the logic and put it into a hook remember that it’s a JS function which name starts with the word “use” as you’ve seen above and the previous post.

Here’s a custom Hook I created in one of my projects and that I used for a Testimonial Carousel to show the different cards after 7 seconds

import React, { useState, useEffect, useRef } from "react";
export default function useInterval(callback, delay) {
  const savedCallback = useRef();
// Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
// Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Thanks for reading, I appreciate your time. If you need any help please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!

React Hooks 1: useState, useEffect, useContext, useRef & useReducer

CarolinaCobo — Thu, 08 Sep 2022 18:51:44 +0000

I have been working in React for about nine months, and after finishing Brian’s Holt Complete Intro to React and Intermediate React and digging into the React Docs, I thought I would put together a summary of React Hooks and also my personal experience using some of them.

In this first part, I’ll cover useState, useEffect, useContext, useRef and useReducer, being the two first ones the ones use mostly at the moment.

Reusing state between components in React is hard. With Hooks, it’s possible to extract stateful logic from a component, this makes it possible to be tested independently and reused.

In conclusion, Hooks allow you to reuse stateful logic without changing your component hierarchy.

I’m going to list them all but first, I’ll go into more detail about the ones I use every day at work, useState and useEffect.

useState

useState allows you to make components stateful. In older React to do so, it required using a class component. Hooks give the ability to write it using just functions.

This allows us to have more flexible components. In the example component below, every time the user clicks on the h1, it’ll change colours. It’s doing this by keeping that bit of state in a hook which is being passed that new value every render, so it always has and displays the latest state.

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

useEffect

Compared to old React, Effects are how you recreate componentDidMount, componentDidUpdate, and componentDidUnmount.

Inside useEffect, you can do any sort of side effect action that you would have previously done in one of React's lifecycle methods. With it, you can fire API requests, integrate with third-party libraries (like jQuery), or do anything else that you need to happen on the side for your component.

A good example I’m going to use is a clock. We want our component to continually update to show the time so we use setTimeout inside our effect. After the timeout calls the callback, it updates the state. After that render happens, it schedules another effect to happen, and that’s why it continues to update.

You could also provide a second parameter of [] to useEffect (after the function) which would make it only update once. This second array is a list of dependencies and it will only re-run this effect if one of these parameters changes. In our case, we want to run after every render so we don't give it this second parameter.

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

useContext

A problem you might encounter while building a React app is thee called “prop drilling”. This will happen when you have a parent component and a child component way down let’s say level four which also needs that data available.

We could pass the data to the children in levels one, two and three but that will mean that they will know about this data even when it’s not relevant to them as the one that needs it is a child of theirs. This would be prop drilling, having unnecessary intermediaries.

There is when context comes in, it would create a passage for the data from the parent component to the child component, so the components in the middle don’t know about it.

Also, you don’t need to use useState and useContext together (data can have different shapes, not just useState) but you might find it convenient when child components need to also update the context as well.

Often using Context adds complexity to an application, and also a bit of drilling is usually fine. Try to only put things that are truly application-wide state in context, such as user information or keys and then use the local state for the rest.

As mentioned above those two are the ones that I use pretty much every day at work. I use useEffect to get all the data I need from the APIs and display and then useEffect to work on what should render depending on the state or let the user modify the state through inputs.

useRef

Refs aver are useful for different things, but before you understand why it’s needed to understand how closure works.useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

A common use case is to access a child imperatively:

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

You can think of useRef as a “box” that can hold a mutable value in its .current property.

You probably have seen refs used primarily as a way to access the DOM. If you pass a ref object to React with

, its.current property will be set to the corresponding DOM node whenever that node changes.

But this hook is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

This works because useRef() creates a plain JavaScript object. The only difference between useRef() creating an {current: ...} object yourself is that useRef will give you the same ref object on every render.

Also useRef won’t notify when its content has changed. Mutating the .current property doesn’t cause a re-render.

I recently had to use it in a Popup component, that would be rendered when clicking a button, would close if clicking out of it and had edit and delete options linked to the ID of the selected element.

useReducer

useReducer is an alternative to useState. It accepts a reducer of type (state, action) => newStateand returns the current state paired with a dispatch method.

It’s preferable touseState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. It also allows you to optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Thanks for reading! As I mentioned above this is a summary for reference after completing Brian Holt courses and going over the official React Docs, so if you want to extend the information here I’d advise you to go check them out!

Thanks for reading, I appreciate your time. If you need any help please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!

36 Useful Terminal Commands

CarolinaCobo — Thu, 08 Sep 2022 18:46:57 +0000

Here is a little list of terminal commands that you can find useful, I use some of them a lot and others from time to time.

Print Current Working Directory. It will print the full path.

pwd

List of current directory contents

ls

Change the directory

cd DirectoryName

To change to zsh shell.

chsh -s /bin/zsh

Clear the terminal logs

clear or cls

Copy files from the current directory to a different directory

cp source_file target_directory

Move files from the current directory to a different directory

mv

Make a new directory

mkdir NameNewDirectory

Delete empty directories

rmdir

Delete directories and contents within them (*be careful when using it)

rm DirectoryName

Create a new blank file

touch

Find a file

locate

Search for files and directories within a given directory

find

Search through all the text in a file

grep FileName

Perform tasks that need admin or root permissions

sudo

Get a report on the systems disk space usage (% and KBs)

df

Check how much space a file or a directory take

du

View the first few lines of a text file

head

Display the last ten lines of a text file

tail

Compare the contents of two different files, line by line

diff

Archive multiple files into a group of files collected together as one

tar

Change the read, write and execute permissions of files and directories

chmod

Transfer the ownership of a file to the specified username

chown

Display all current jobs along with their status

jobs

Terminate a program manually

kill

Check the connectivity status to a server

ping

Download files from the internet

wget

Display a list of running processes and how much CPU each process uses

top

Get information about a Linux command

man

Move data into a file

echo

Compress files into a zip file

zip

Extract a zip file

unzip

Display the name of the host or network

hostname

Create a new user

useradd

Delete a user

userdel

After creating a user, it can be used to set a password for that user

passed

Thanks for reading, I appreciate your time! 🎉 If you need any help please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!

Best projects to start coding

CarolinaCobo — Thu, 08 Sep 2022 18:40:21 +0000

Looking back I wish I knew about this when I started coding.
Starting anything in life seems really complicated and even more if it's deciding what you want to have as part of your portfolio.
I've been talking to other people like me who decided to change careers and some of them picked to do a CS degree and feel they might not have any work to show. And that has been proved to be the best way to get the first job in tech. Said that I think there's no harm in learning CS fundamentals and a lot of the topics that people learn while doing a college degree.

Portfolio

It seems odd starting here, but if you have no ideas it's a great start. It might seem odd if you don't have much but it's the perfect thing to build on plain HTML and CSS. It's also you can keep working on and will be a good exercise to practice new skills once you acquire them.
As always FreeCodeCamp for the win. In that link, you can see examples of portfolios using HTML, CSS and Bootstrap.
W3Schools has also a good few ideas on how to start and build a basic portfolio and also the theory you should learn about HTML syntax and structures.

Games

Games are probably one of the hardest programming challenges you could face, but as with all challenges it comes with plenty of learning.
The second biggest project I built was a game in JavaScript and I don't think there's anyone better than Ania Kubow, here's a video on how to build Tetris on JS. If you are more into Python, this website has great resources as well.

To-do list App

This is good practice but also handy to use in your day to day! You can do a shopping list or a tasks list, anything that could suit you.
Again, W3Schools has their own tutorial, also I found this one interesting. But there are millions of them out there.
If you want to take it to the next level then you could try to build a Flask and MongoDB one, this tutorial will help you to achieve that. For me getting started with Flask and MongoDB was a big learning curve.
I enjoyed building this one using Python and Google Sheets, getting exposure to Google APIs is always a good idea to familiarise yourself with how they work.

API Project

This is something I didn't realise when I started but learning how to get data from APIs, and how to reshape it or use it will be a big part of your day to day job as a developer. The sooner you start the better.
For my current job, the technical challenge I had to complete was using HackerNews Api data, making it look better and filtering by Top, New and Best Stories and adding pagination. Here's the result, if you are curious.
To give you some ideas, here you have 10 Fun Api Ideas to play with.

E-Commerce

Those kinds of projects are probably the most complex but also learning how to work with payment platforms such as Stripe, to pull a lot of data for the different products, personal areas, emails confirming the payments, etc. Will teach you a lot! Also, you could sell it to someone looking to have their own online business.
Here's a great tutorial you can follow to build a Python Django E-Commerce site.

Thanks for reading, I really appreciate your time! 🎉 If you need any help please reach out!
If you have any questions feel free to drop me a message on https://medium.com/r/?url=https%3A%2F%2Fwww.linkedin.com%2Fin%2Fcarolina-cobo%2F or send me an email. 😊
Have a nice day!

Getting a job in tech part 4: Make every Hiring Manager want to hire you

CarolinaCobo — Tue, 19 Apr 2022 08:03:04 +0000

After recruiting for several engineering companies including MongoDB, there’s something every hiring manager looked for when interviewing and that helped a lot of candidates to get hired even if they didn’t do great in all the interviews.
Cultural fit is one of the most important deal-breakers when interviewing, if the team feels that someone won’t fit well even though technically they can be the perfect fit they might not hire that person. The technical part can be learnt, the personal one, not as much.
Getting ready for cultural fit questions is key to success in an interview process on both sides, yours and the company you might be interviewing for.
I wanted to put together some information I always gave to my candidates when interviewing and it is applicable for anyone you might be meeting with. But remember that, usually, Hiring Managers are the ones who would make the final decision.

Check their LinkedIn profile

Yes, that’s the recruiter in me talking, but after checking how long they’ve been in the company for, if they have been promoted in that company, or anything else you can relate with, like maybe projects they’ve worked on or volunteered, it won’t be as scary to talk to them. It’s also easier to build rapport when having things in common.

In my opinion, having also knowing the face of the person you are talking to will ease your nerves a little bit and will put you in a more similar position as they know things about you before your meeting.

This would also give you the chance of coming up with questions that will help you to figure out if the team and the company is a good fit for you.

Find opinions of the company online

This might not be always possible, but I believe that if you search hard enough you’ll always find information about a company. Also, sometimes no information might be a good sign because people are more willing to share information on bad experiences.

Glassdoor is the most popular place to look for information. It’s a bit of work because to have full access to the information you will have to register and give information in a previous company you’ve worked for.

Regardless of the work that requires it provides a lot of info like opinions, salary bands, benefits, but more importantly, questions asked to other people on their interviews. In my experience, they usually are similar so there’s no harm going in there and taking a look.

Another really interesting site is Blind, here you can find information but also ask questions blindly about the compensation you’ve been offered or even if you want to know what to choose if you have a few offers.

There you could find a lot of cultural related questions and answers as well as technical, but this will help you to set up your expectations.

Company values

Quite honestly, I didn’t think about this myself but after working as a recruiter I can tell you that’s the key to knowing what to expect about the company and potential competency-based questions.

Being aligned with the company values will be also evaluated as part of the process, and most likely is how your performance will be evaluated (or at least part of it). Reading them and finding experiences that might resonate with them would be good for two reasons:

You will know early on if the company is a good fit for you as those values is what they will be seeking for people who join the company.
You can be prepared for competency-based questions where you’ve shown those values.

Some examples here such as Amazon’s, Google’s or MongoDB’s.

Competency-based questions

As well as a technical part in the interview process there will be more soft-skills/competency-based related questions.
To prepare for this kind of interview I think it’s good to look at the old (and probably overused) STAR Technique, which stands for Situation, Task, Action and Result.

Even if questions are not as straightforward as Tell me of a time when you… But any question can be answered using the star technique. What I would do is think about more general situations that can be applied to different scenarios. Then I would go step by step with every step of the STAR.

You can think about how to answer those questions by looking into the values of the company, so you should tweak your answers a little bit depending on what areas you are interested in making shine.

Try to think of times where you were a team player, mentored someone or make an impact in your work by implementing changes or new approaches in how things are done.

Questions to ask

Something that will happen over and over is the “Do you have any questions?” part. Making different questions will also make them remember you. So some of the ones I ask:

**What do you like the most and the least about working here? **This might startle them a little bit but they will answer quite honestly so whatever they say it will be good to know.
What does a successful employee look like in the company? This might tell you how they help with the growth of their employees. -** What are the long term plan for this role and the team?** Show how keen you are in the role and in your personal growth.

If they haven’t given you some information about the role, the team or the day to day role you should as well, but if you can come up with something different they’ll appreciate it and it’s your time to take more control of the interview.

Conclusion

I can guarantee you, it will be very hard the first few interviews you have, but it will get easier with practice and you will polish your answers in every interview you do.
More importantly, don't be scared of asking something that you might not have understood or that is not clear, so if you get hired you’ll know everything beforehand and in case you need to compare offers you can make a decision easily.
Hiring managers always appreciate when candidates praise the company and have done their homework about how the company is doing, any news, new releases or anything that people who work for the company are proud of. Lookup for information and make sure you mention it during the process to show how keen you are on getting hired.

Thanks for reading, I really appreciate your time! 🎉 If you need any help please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊
Have a nice day!

Getting a job in tech part 3: GitHub and articles

CarolinaCobo — Mon, 07 Mar 2022 21:33:39 +0000

Having a well-rounded profile will take you a long way. Today I wanted to cover the new option for a personalised Readme file.

Bringing attention to your code is important as well if some potential employers might be looking at your work, but you will definitely leave an impression if your profile is more personalised.

I think there’s no one better to explain how to do it than GitHub themselves, so here’s the documentation on how to change your home Readme file.

Said that there are other tweaks you can add that will make it stand out.

GIFs

That’s right, you can add GIFs. Here’s my little cute one greeting whoever visits my page, the code for how to use it is below.

<img src=”https://media.giphy.com/media/Wj7lNjMNDxSmc/giphy.gif" width=”90px”>

Badges

There are badges for s lot of things, languages, frameworks, editors, etc. and also in different styles. Here some links to different sources where you can find them:

Shields.io
Badgen
Ileryayo
This a great article with some good resources too.

Icons

If for your social media instead of using badges you prefer to use icons, you can create them adding them to a folder, here you have one to make things easy for you.
The code to include this in your Readme:
<a href=”https://www.linkedin.com/in/USERNAME/"><img align=”left” src=”https://raw.githubusercontent.com/username/reponame/branch/foldername/icon.svg" alt=”icon | LinkedIn” width=”21px”/></a>

Stats card

It’s a good way to summarise all the contributions you’ve done in a really visual way, you can change colors and personalise it as well.

To add it use the code below:
![YOUR-USERNAME’s GitHub stats](https://github-readme-stats.vercel.app/api?username=YOUR-USERNAME&theme=omni&show_icons=true)

Make sure to change the GitHub username to your GitHub username.
You can change the themes to any other you like.Here’s the documentation so you can pick any other style you might like.

Body

For the rest of the body you can use normal markdown. Here’s the guide from the official site in case you want it handy as well.

*Here’s mine as usual if you want to take a look:
*

Bonus: start writing

This is something that not everyone enjoy and it’s really not necessary to do but I really enjoy being able to share some of my knowledge or experiences with other people that might be helpful.

Writing is probably the best way to do it (I’m also always available on LinkedIn or my email if you need any help). But clearly writing it’s easier to have a bigger reach.

How to start?

You might feel as I felt thinking I had no idea of what to write about, so for me to start it’s been either problems I faced such as understanding what was the difference between em and rem or how I learnt not to use -f in my commits on Git.

But also things I knew for my previous role as recruiter, such as how exactly recruiters use LinkedIn to find people and how to improve your profile.

And I can tell you that have and endless list of other things I didn’t know and had to learn that I want to write about. But I wanted to start sharing my journey to *become a software developer and how my first month as one was. *

So I’m sure you have a lot of interesting ideas, problems or experiences you that you could share with other people, and writing about them is probably the best way to get a better reach.

Thanks for reading, I really appreciate your time! 🎉 If you need any help please reach out!
Next week I’ll be sharing another post about how to prepare for interviews, so please subscribe so you will receive it on your email when it’s out!
If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊
Have a nice day!

2022, my first year as a professional Software Developer

CarolinaCobo — Mon, 07 Mar 2022 20:57:44 +0000

It still amazes me I'm writing this as a Software Engineer. 2022 is going to be my first year as a professional developer and funny enough, I'll be turning 30 as well.

For a bit of context, I'm a career switcher. Until October last year, I was a Recruiter. But I wasn't happy with that path.

Bias on myself

Unfortunately, I've always been biased towards myself as well, as I think a lot of people are. I was for various reasons:

I studied HR, both my degree and my master's. Yes, about 6 years studying so it felt like I had to work on that to get that time back somewhat.
I'm from Spain, and there, if you have a job you are lucky if you get one in what you have studied it's like you won the lotto. So even though you might be unhappy you are lucky so you would never quit or change careers.
Also, even if my English is good enough it always feel like being an outsider when living and working in a foreign country where you speak a different language. But those experiences, that different way or working make me good at working, adaptable and ready to face any challenge.
I was really bad at maths, but really, really bad. I never thought I could be doing software development for that reason.
I didn't think I could be able to pull it off and be a Developer, me? Never. I thought I wasn't that smart to do it, but there's the other way, work hard.
I'm too emotional and empathetic. Development is always pictured as analytical, solitary and complex. But it's quite the opposite. It's creative, the more empathetic and communicative you are the better. So it turned out that the things that worried me were some of my best traits to be successful as a Developer. Understanding what other people think and feel while using software is actually really powerful.

Conclusion: All the things I thought were not good traits for being a good engineer are actually the opposite.
Keep that in mind, just being aware of it will help you to get better with time.

How did I get here?

If you are not happy in your current career and development feels like the right path, my first recommendation is, to go to the community, talk to people and they'll help you to avoid mistakes they've made.

Think what's your ultimate goal to get there, plan ahead and with a plan in place you'll get there. Also be aware that plan will and has to change until you reach that point you are looking for.

I joined a Bootcamp where I met a lot of great people, and had a more defined path, but the more I've been part of this world, the more I realise people want to genuinely help other people to succeed all over the internet.

I'm not going to say you won't find people who say that being a woman or being different won't fit in this environment, but it's very rare, and also that's not the kind of environment where you'd belong, anyway.

Seeing yourself changing careers feels like an impossible at first, I didn't think I could. But having worked for years will give you valuable experience that could be applied to anything you want.

The biggest challenges I faced

Technically speaking, I think anyone who is learning development will face the same days when nothing works, you feel like it will ever do and when it does it feels like magic, but with patience you'll get there.

I almost quit (a few times), I struggled so much to keep my spirits up when I was being rejected, or not getting any calls after applying for jobs. But what did I do when I was ready to quit, and give up all the work? I shared this thoughts with people around me to get support and help to keep me going. It has paid off and now I know I would have regretted it forever.

I'm am also an insecure person, I'll always think I'm not right and the other person is. So I've had to be conscious of that and keep reminding myself that I'm hard working and strong and I'll get there.

What have I learnt through this process?

I'm not perfect, I will never be, but neither is. Honest work and effort will be rewarded in the long term.
I should always apply for any job I like, even I might not be a perfect fit, I can learn anything in the appropriate environment.
Putting a job over my mental health. I tried this when I was a recruiter and it only burnt me out, but it also propelled me to change careers. Even tough the outcome was positive, I will never do it again and I'll prioritise myself.
To not compare myself with other people, this is hard when you see people who are doing similar things to you do better, but remember everyone has a different situation and the only person you should be competing with is yourself.

"Remember you are great" tricks

Sometimes it's easier to remember the bad things that happened, the negative feedback you've received or how something took you a week to solve. But we forget the successes pretty quickly. To avoid that I've been:

I got One Line a Day. You can have some lines of your days for 5 years. I write down anything positive someone tells me, like positive feedback on my work, finishing tasks or learning something new.
I ask for feedback and I embrace it! It's great to hear good things but I think also negative points, those help you grow.
Share your work, write, talk to other people who are starting. That will help you to see what you give back, and it's a great feeling!

I pledge to support women, non-binary, and other minorities in tech by…

Being here for anyone who needs help. Anything, CV tips, interview preparation, or just a chat to share the struggles of changing careers in tech.
Write, get content out to show people that is possible and there are others like them that will be happy to help.
Advocate for having more diversity in the teams and companies I work for.

And remember

Everyone deserves to do better, so if you are not happy just keep going, there will be bad and good days but eventually you'll get there.
Don't be scared of asking for help. Worst case scenario someone might not get back to you but I can promise you, most people will.
Apply for that job even if you don't qualify on everything, you have the no already, what if you get a yes? Being different is hard sometimes, but the value you'll add to any team will be much bigger than from people who think alike.
If you get there, help other people to succeed!

Thanks for reading, and as I said, I'm always happy to help with whatever it might be, so please send me a message and I'd love to connect!

Getting a job in tech part 2: Portfolio

CarolinaCobo — Thu, 24 Feb 2022 08:07:05 +0000

As important as having a good CV is, having a place showing the work you are doing, or you have done might be more important. If you only have it on a repo on Github or saved on your laptop, it’s no good if you don’t show it.

It might be scary at first, and you might feel unsure what you have is worth sharing but it’s for different reasons:

You can keep track of your progress and really compare what you could achieve months or years ago and appreciate all the progress you’ve made.
It will force you to practice more.
It will show what you are capable of.
Also, recruiters prefer to see something pretty or interesting (or both) in the middle of reviewing CVs.

My first portfolio

Inspiration

Where to start and how to organise all the ideas might be tough and overwhelming. A habit I’ve got is to check Dribbble. I’m still training my eye so definitely this helps massively to see what is a trend or a good way to organise your site.

Tech stack

Checking on Github it’s been nearly a year I’ve built my first portfolio which you can find here.
I built this portfolio using mostly Tailwind CSS and plain HTML. I decided to pick Tailwind over other options such as Bootstrap or Materialize, just to learn something new. I think that’s one of the wonders of tech, you can pick something new and give it a go.

Even though I used mostly Bootstrap in my Bootcamp projects I decided I wanted to try Tailwind as everyone I follow on Twitter was talking wonders about it, and now I know why.
Tailwind is way more flexible and not as opinionated as Boostrap (you might end up having to use !important way too often on your CSS) and it often behaves in unexpected ways. With Tailwind you’ll have all the control over your classes and your CSS will be really small or even inexistent.

Deployment

If your site is static and your budget is tight you can always deploy it on Github Pages your URL will include your username and the name of your repo:

https://carolinacobo.github.io/portfolio/Once you push to it it will automatically deploy or redeploy, easy right?

But if you are willing to pay for a domain you can always get a more personal one with your name or something that you feel represents your brand. I used my name for my portfolio so if someone searches my name they’ll get to my portfolio.
To do the deployment and get the domain I used Vercel. I found the domain I wanted and bought it for $20 a year, which for me has paid off. But there are great options that are free.

You only need to go to the site, register, and in the Dashboard, you will find different options on the dashboard to buy the domain, then link your repo and configure the deployment.
You can also have free domains on Github, and once it’s linked to your Github account it will be really similar to using Github Pages.

My new portfolio

A few days ago I finished my new portfolio, which you can see here. You may notice that the structure is really similar to my first one, but there are major changes in what’s built on. The tech stack I used was:

React
Tailwind CSS
Next.js

Why did I use these technologies?

React is one of the most used frameworks worldwide and also in my current role, I’m working with both React and Tailwind. Any opportunity I might have to work with them I’ll take it, as I know it will benefit me in both my professional and personal work.

Next.js is an open-source development framework that is built on top of Node.js. This allows React-based web applications functionalities such as server-side rendering and generating static websites, which for blogs or portfolios is great. This wasn’t entirely impossible to do before having Next.js, and it required a lot of tweaking with issues related to caching, server load, etc.

On the technical side, Next.js will only load the Javascript that is needed on every page, which makes for much faster page loading times as it won’t load for anything the user is not asking for.

It can also help you with incremental static regeneration and static site generation. Another way of building more SEO friendly websites and applications, and that means that the site can be easily found.

Other options

There are other tools that can be used as I mentioned above:

Bootstrap might be easier if you are using it already in other projects. In my opinion, Tailwind is better and the documentation is easier to follow than in Bootstrap.
Wix or WordPress are easy, and you can personalise them but you may have to pay to have a better layout that will look different to the free ones. Here you can find a tutorial on how to build on Wix and Portfolio Themes on WordPress if you want somewhere to start.

Conclusion

If it’s your first attempt, start with something easy and simple, you can always improve it or just make it brand new! I think having a showcase of your work will take you a long way.

You can also ask for help from other people, I did when I needed some support as it can be frustrating feeling stuck or not knowing how to solve some problems you might come across.

Also, I know writing or working on side projects while working full time might be difficult, but it’s also really rewarding having it all together and showing the world what you are capable of!

Thanks for reading, I really appreciate your time! 🎉 If you need any help please reach out!

Next week I’ll be sharing another post about personalising the Readme file on Github and how I’m starting to get into the habit of writing, so please subscribe so you will receive it on your email when it’s out!
If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Getting a job in tech part 1: CV

CarolinaCobo — Mon, 14 Feb 2022 21:50:26 +0000

I’ll be sharing a few resources on what I did to switch careers. I’ll share my CV, Portfolio and GitHub.
In my opinion, writing a CV that shows your skillset and opens the door to getting an interview is one of the hardest tasks while looking for a job. When starting you will probably get automated rejection emails, and therefore no room to ask for feedback (and remember all feedback is good feedback). But, it’s probably even harder if you are a career switcher or you don’t have much experience yet.

Mistakes I made

I made a few more but probably the most important ones (jump to the last one if you want to see the one that after working on it helped to me get a lot of interviews):

1. Focusing too much on my previous experience

Or if you haven’t worked at all, you might feel you need to fill your CV with information that is not relevant but takes space.
You might think “I’ve worked/studied really hard to achieve all I did”, but when you are changing or starting your career, you need to change your mindset and value the skills you’ve developed along the way, and not only the experience you have.

2. Thinking years of experience were more important than skills

It sounds like a cliché, but it’s absolutely not. I can’t deny that working teaches you really valuable lessons and help with skills such as communication, working as part of a team and time management. But that doesn’t mean you can’t bring valuable skills to a company if you don’t have related experience or any at all.

3. Not giving importance to things I do out of work/study

I love reading, I love drawing on Procreate (even if I’m really bad at it) and I’m sure you do love things that might seem not related. But I can assure you they are also teaching you valuable skills. So don’t be shy and bring it to the table! Give a full picture of who you are and what makes you you and I’m sure, that will help you to find a company that is a good fit for your skillset and personality.

4. Trying to fit everything on one page

If you can, great! You’ll see my approach to this below, but don’t feel you have to do that. If you have relevant information don’t cut it out unless it’s not adding anything valuable.

5. Using a template

This is a tricky one, let’s not forget it’s a CV and that we shouldn’t re-invent the wheel. So keeping a traditional layout, not using weird fonts or structures is worth remembering while doing it.
Said that your goal is also to get the hiring team to look at it for more than 5 seconds, read it and most importantly remember it. Including other details or some examples of your work might be a game-changer.

6. Not having a portfolio

I think it’s hard to envision this when you are starting, but this is what makes the real difference. Anything you are working on is worth sharing, maybe a project you built, completing 30 days of coding challenge, if you are writing a post, anything you are doing, share it! It will build up over time.
Also, there are great tools like Wix or WordPress, or if you are into software development like myself, I used Tailwind to have something to share.
Honestly, this is what made the real difference for me to start lining up interviews, so don’t be scared and share all the cool things you’ve done!
Here, you have the last version of my CV that helped me to get my first Software Development job! You can absolutely use it as a template but give your personal touch or it will end up being another one on the pile.

My CV

Please, take a minute to see my reasoning behind the final result so you can tweak it and make something even better.

Key things I think made it stand out:

The colour palette, it’s the same one I had on my portfolio so both matched and used it to include links to all the relevant sites.
Direct links to my Portfolio, Github and LinkedIn to show all the work I’ve been doing.
The summary about where I was coming from, and what is what I was looking for.
Education related to this new career I was pursuing.
My technical skillset and other related stuff I was doing like reading coding books or participating in Hackathons.
And then, the key part, I made a screenshot of my projects and linked them. You can add links to your images, and then if you submit them in PDF format it will be really easy for people to click and open them. Bear in mind that this might be detrimental sometimes. If the software that is receiving the CV is not parsing it correctly for not being a .doc. Said that I was happy to assume that risk. On the second page below you can see all my professional experience, I also left some room for the education I completed in the past as well as my interest and hobbies. I kept this part as lean as possible but I wanted to show also all the other skills I acquired in my previous roles.

Conclusion

While writing a CV is always scary, just focus on what you can bring to a team, what you’ve worked on and how driven you are even outside of work or study.
Ask your friends, classmates or even the people in the community what they think about it or any potential changes they’d make.
And mostly, consider it as always a work in progress and keep changing it and tweaking it until people tell you that they really liked your CV when you are having an interview.

Thanks for reading, I really appreciate your time! 🎉

Next week I’ll be sharing another post about my first and my new portfolio, so please subscribe so you will receive it on your email when it’s out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Difference between em and rem - CSS

CarolinaCobo — Sun, 13 Feb 2022 20:40:41 +0000

What are they?

Both of them are CSS relative measurement units. Unlike for example, Pixels, which are fixed measurement.
What is the main difference between them?
ems will take the rems, that unlike ems, are consistent. They don’t depend on the values set by the parents of the current element. They set the size relative to the root element of the page, HTML in this case.

How do you use them?

An ems unit is equal to the computed font-size for the element to which the em is applied. If no font size is defined anywhere in the CSS, the em unit will be equal to the browser’s default font size for the document, which is usually 16px.

1em = 16px
em size = pixel size/16

We can calculate rems by the following formula if the font-size of the body element is 16px:

rem = pixels/16

On pxtoem.com you can convert Pixels to em easily, even customising your em needs.

Conclusion:

Using either of them would be better than pixel units because using it prevents the browser settings to make any size adjustments.
Both of them give us flexibility in our design working similarly. Still, it’s important to be able to differentiate them because it is how the browser will determine the px value they translate into. Use one of the other will depend on what your needs are.