Forem: Elizabeth Villalejos

Upgrade your React game with TypeScript: Routes

Elizabeth Villalejos — Tue, 18 Aug 2020 01:29:42 +0000

Hello there! This is the part of the tutorial where we make navigation magic ✨ happen.

In order to start, we first need to add some dependencies to our project with npm i react-router-dom @types/react-router-dom.

If you remember, in our Menubar component we have everything set up so we could navigate between two links: / for Home and /dates for Tour Dates.

Let's create those.

In your src folder, create a Pages folder and inside create two files: Home.tsx and TourDates.tsx. We're using the .tsx extension instead of the .ts because the first one will allow us to use JSX.

For now, I'll leave both components really simple but you can go and add whatever you want on them.

Great, now we have our two components all typed up and pretty. Now, we have to create a Routes.tsx where we place all of our preferred routes.

In this case, our Routes.tsx would look something like this.

And finally, we have to make sure we add our Router component to make everything happen in App.tsx.

And ✨ that's it! You can now go back and forth between \ and \dates in your Menubar.

Dulce, my local PM, checking out your cool routing

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Upgrade your React game with TypeScript: More on Types

Elizabeth Villalejos — Thu, 13 Aug 2020 01:23:50 +0000

Types are essentially, defining the data type of our variables.

interface Eli {
  name: string;
  age: number;
  likes: string[];
  coffeesDrankToday?: number[]
}

For declaring arrays, we state the type of data the array has to contain and then use the brackets. Another way to declare them can be this way likes: Array<string>.

Also, remember that you can make a variable optional within an interface writing a ? before the data type.

But sometimes, we need something a bit more complex.

Dulce, contemplating her type choices

Maybe we need to load an interface as an empty object, which we can do like this daily: <YourInterfaceHere>{}.

Sometimes we don't know what kind of data we're dealing with when using an API or maybe we want to opt-out of type checking for a particular variable. In this case, we can use any. The downside of using it is that we're not taking advantage of what TypeScript has to offer us so it's highly discouraged to use.

The opposite of any is using void, which is the absence of all types at all. This is common in functions that don't return a value.

You can even create your own types from an interface!

export interface LoadDayAction {
    type: string;
    payload: Day;
}

export interface ErrorLoadAction {
    type: string[];
    payload: Error;
}

export type DailyTypes = LoadDayAction | ErrorLoadAction;

Now you could use LoadDayAction or ErrorLoadAction to define another variable.

You can read up further on types here.
_

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Show off with Github's README

Elizabeth Villalejos — Fri, 07 Aug 2020 22:16:28 +0000

Github now allow us to create a README file for our profile to display whatever fancies us. How about taking advantage of this feature to show off a little? Here are a few very cool tools I found to take your README to the next level.

Creating your README ⚒️

In case you don't have a personal README, it's as easy as creating a new repository that’s the same name as your username.

Now off to the code 🧰

Github Readme Stats

Show all of your numbers in a cool personalizable image. It lists the total of your commits, stars, PR's, issues.
You can look at the repo with instructions here.

Waka time updates

Waka time is a plugin for your editor that can help you track how much time you're spending coding. It's important to notice that it won't track the time your editor is open, but the actual time you spend writing on it.
You can look at the Github Action here.

Show off your languages

I also found a really cool Github Action that automatically groups your projects by language in a nifty table that gets loaded into your README.
You can look at the Github Action here.

Even more stats!

I have a thing with stats and tables, sorry. This Github Action shows you cool things like your most productive time of day, whether you are an early bird or a night owl, favorite languages you code in and more.You can look at it here.

Hook up your blog posts too!

There's this great Github Action that allows you to update dynamically your README each time you write a new blog post. It works with Dev.To, Medium, Wordpress, StackOverflow and many more. You can look at it here.

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Upgrade your React game with TypeScript: Interfaces, types and components

Elizabeth Villalejos — Fri, 07 Aug 2020 00:55:06 +0000

Now it's time to put some flavor on our app and create a few components for our app. To do so, we need to understand some TypeScript concepts.

Types

Types are for letting TS know what kind of data for a specific property should expect.

interface CandyBar{
  name: string;
  okToSell: boolean;
  inventory: number;
  categories?: string[];
  howManyinTheFreezer: (bars: number)=> number,
}

These are just a few examples of the types. By adding the ? to a type we make it optional. For functions we have to make sure to specify the type for its parameters and for what it will return.

Interfaces

An interface is what allows us to create the syntax for a class. Interfaces can be extended dynamically, so we can do something like this:

interface Dog{
  name: string,
  age: number,
}
interface Breed extends Dog{
  breed: string,
}
interface Dog{
  isFriendly: boolean,
}

Here we're extending Dog's interface with Breed and then we're adding types to it.

Ok, got it 📝.

There's one extra thing to add before going hard into our first component, though.

Prop-types

React has a very useful way to check for types too, prop-types and if we mix it with TypeScript, we can make sure to check from compiler to runtime. Isn't it great?

We can take advantage of it by doing the following:

npm i --save-dev @types/prop-types prop-types

And making sure in our component we add import PropTypes from 'prop-types';

Creating our first component

Ok, now we're good to go. I decided to go slow and start with a component that won't require a lot since we're just starting: a Navbar.

When we do stateless components like this, practically the only change our code has is the Menubar: React.FC part right at the very beginning. In that part, we're specifying that Menubar's type as a React Functional Component. The rest of the code is the usual HTML with Tailwind classes.

Now, how about something that requires us to use Props? We're doing a Banner component. The prop is going to be an image we're going to give it since we want to be able to change it up easily.

Now in React.FC<Props> we're letting TypeScript now this component will need props, destructuring we're letting it know it specifically needs bannerImg and an altImg prop.

Now all we need to do it's call it in App.tsx, give it the props we defined and we're good to go.

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Upgrade your React game with TypeScript: Setup.

Elizabeth Villalejos — Wed, 15 Jul 2020 23:12:05 +0000

Lately, I've been working on polishing my JS skills, specifically, React and TypeScript has been on my radar for a while so I thought it'd be a great idea to work on an app to incorporate both.

Let's go through a quick recap of React and touch base on what TypeScript.

React and TypeScript walk into a bar...

React is a front-end JavaScript developed by Facebook. It follows a component-based approach which helps us to build reusable UI components. It also uses a virtual DOM instead of the real DOM, this helps us re-render just certain parts of the app instead of the whole thing.

TypeScript essentially is a strict, typed superset of JS. TypeScript compiles to readable, standards-based JS. The main thing about TypeScript is that it allows us to add static types to our JS code and doing so helps us catch errors earlier in the debugging process.

Less time debugging AND clearer code? Sign 👏 me 👏 up 👏.

Setup

Thankfully, there's a Create-React-App template that already does the heavy lifting for us that includes TypeScript.

npx create-react-app my-app-name --template typescript

Next stop, setting up our linters because we're all about that clean code.

We're going to be using ESLint and Prettier. Let's set up our local env running:

npm install --save-dev eslint@6.8.x @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier --dev

We're also going to need to set up their configuration files. On the root of your project, create .eslintrc.js and use this configuration:

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  },
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
};

For Prettier we need to create also in the root, a file called .prettierc.js with the following code:

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

And to tie it all together and make it even easier for us, add the following line to your package.json:

"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"

That way we can simply run ´npm run lint´ and have everything working for us.

We're also going to be including Github Actions to make sure that even if we forget to run the interest, our code is going to be checked.

At root level, add .github/workflows and in it, create a file called linters.yml with the following:

name: Linters

on: pull_request

env:
  FORCE_COLOR: 1

jobs:
  eslint:
    name: ESLint
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - name: Setup ESLint
        run: |
          npm install --save-dev eslint@6.8.x @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
          [ -f .eslintrc.js ] 
      - name: ESLint Report
        run: npx eslint .

When you open a PR, you should see the linters working.

Optional

Since we're setting up everything, I want to make time to also set up our styling dependencies. I usually use Semantic UI, but this time I'm going to be using Tailwind CSS.

Tailwind is a utility-first CSS framework for custom interfaces. It gives us a lot of functionality out of the box.

Depending on what you need, there are two types of setup: the basic one and the production one. I used this great resource by Dave Ceddia.

That's it for our setup process. In our next installment, we'll talk about writing our first TypeScript component.

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

#remotelife 101

Elizabeth Villalejos — Tue, 17 Mar 2020 20:56:19 +0000

Given the recent state of the world, a lot of people have been asked to start working from home if possible. We're privileged that most of us in this industry are able to.

While this is great, not a lot of our industry is already remote. So being thrown into this, on top of everything that is going on, can be challenging.

I'm enrolled in Microverse, a software development program that's fully remote, so I have some experience that could be useful to you if you're just treading water on remote life.

Routines are what makes the world go round

I know it's hectic since you might have a lot going on at home, but try to outline a routine. Set up a calendar with your work hours and let everyone home that, while you are physically present, you are busy.

Make time for things that matter (and block it on your calendar)

Schedule your lunch break, seriously. It's easier than you think to skip breaks and lunches now.

Remember to take breaks

We can get very absorbed into what we're doing that we completely lost track of time and since we're not going out for lunch, it's easy to stay put for hours. To tackle this I personally use Posture Minder, a chrome extension that lets you know when its time to take a small break and when to check your posture.

Resist the urge to be in your PJs all-day

This comes along with the routine point. It's very tempting but in order to get your mindset into 'work mode', it's better to change up into something else that's equally comfortable. (Slippers allowed though, we're not going all business attire like)

Take a few minutes a day to clean up clutter in your new workspace

A cluttered area will not help you out. You will probably make video calls too, so while we all get that we're dealing with what we have, make a bit of effort to keep it clean and lean.

Video calls are your friends

Slack is good but now that we're being more isolated, it doesn't hurt to schedule a call or two. Do you have a question about something? Ask to jump on a quick call. It might get you clearer answers than a slack message plus you get social interaction.

Keep an eye on your mental health

Productivity is cool but give yourself a break. If you need to take a longer lunch break on some days, it's okay. Try to get yourself by a window to get some sun, pet your dog, make yourself some tea. Everything works out great when you are good and great. Take a minute.

Dulce, my local Project Manager, making sure things are in check

Mind your noise

Houses are crowded now, but make sure to let people at home know that you're on call. Your standup doesn't need to know someone forgot to do the dishes. Also, it's perfectly okay to mute yourself if you're not talking, just be present and don't forget unmute yourself when talking.

Write a list

What are your top 3 things that you want to get done today? Write them down. Schedule them, label them if it helps you out. (I use Todoist for this and it has worked wonders).
Our headspace can be a bit of scattered right now, so help yourself stay on track.

Communication is key

If you need to take some time to help out a family member, do some errands or are just having a hard time, it is completely understandable. Reach out to your team. It will be generally okay and adjustments can be made as long as you don't leave them in the dark. We're in this together.

I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Easy as a pie Big O notation: A note about Objects

Elizabeth Villalejos — Thu, 12 Mar 2020 20:47:26 +0000

An object is an unordered data structure where everything is stored in key-value pairs.

Let superDog = {
Name: “Dulce”,
Breed: “Chihuahua”,
Weight: “2 pounds” }

Objects are great when storing in order is not a concern and we need to be fast at inserting and removing data.

But exactly, how fast?

Insertion: O(1)
Removal: O(1)
Access: O(1)
Searching: O(N)

It works in constant time because since we have no order in our data, we technically don’t have a beginning or end so it doesn’t really matter in which order data is added.

Got something to add? Please feel free to reach out for any question, comment or meme.

A note about OpenSSL error on Rails.

Elizabeth Villalejos — Sat, 07 Mar 2020 00:00:34 +0000

Last week, everything was fine and dandy. It was a brand new day with lots of code to look forward to when I decided it was time to upgrade my rails version and build an API idea I had been toying with.

It all went down A-OK until it was time to actually create the project and I got the following error:

Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError)

Our reaction to the error was less than amused

After browsing and diving in the interwebs for answers, I boiled it down to two probable issues:

You need to upgrade your OpenSSL.
This one is pretty straightforward, type the following into console:
brew install --upgrade openssl
It's not you, it's me: PostgreSQL edition.
At some point, your configs got a bit tangled up and the PostgreSQL gem is right there in the middle of it all. To make it all better you'll need to reinstall the gem, simply type brew reinstall postgresql
and you're good to go.

Dulce, ready to keep working on her code reviews

I hope you found this helpful, happy coding!

Got something to add? Please feel free to reach out for any question, comment, meme or dog photos swap.

Easy as a pie Big O notation. Part 2: Space.

Elizabeth Villalejos — Tue, 25 Feb 2020 23:30:10 +0000

What?

When talking about space complexity, it's common that we hear the term 'Auxiliary space complexity'. This refers to the space required by the algorithm (not the space taken by inputs).

Why?

While it might be more pressing at some cases to look at time complexity, there will be times when you need to consider the environment in which your code will be executed and whether you will have the resources to do so.

Important tips to look out for

Primitives are constant space (booleans, numbers, undefined, null)
Strings require O(n) space (where n is the string length)
Reference types are usually O(n) too, where n is either the length for arrays or number of keys for objects

In space complexity, we also use logarithms to express performance. So whenever you see O(log n) it's safe to say we're talking about space, not time complexity.

About logarithms

A logarithm is the inverse of exponentiation. The logarithm of a number roughly measures the number of times you can divide that number by 2 before you get a value that’s less than or equal to one.

Where can we expect to see logarithms?

Certain searching algorithms have logarithmic time complexity.
Efficient sorting algorithms involve logarithms.
Recursion sometimes might involve logarithmic space complexity.

So, where does this leave us?

To sum it up,
-Big O notation is used to analyze algorithm performance.
-It can give us a high level of understanding of the time or space complexity of it.
-It cares about general trends, not details.
-Time or space complexity depends only on the algorithm, not the hardware where it’s running.

Got something to add? Please feel free to reach out for any question, comment or meme.

Easy as a pie Big O notation. Part 1: Time.

Elizabeth Villalejos — Tue, 25 Feb 2020 01:24:06 +0000

In coding, as in life, there's always more than one way to approach problems as long as you're creative enough. But how would you know which one of the bunch is the best?

Note: Also, keep in mind that the best is a relative term. You define this according to what your needs are. Faster? Less memory use? More readable?

That's when "the Big O notation talk" comes into the picture.

What?

Basically, it’s a way of generalizing our code and comparing it and its performance to other pieces of code. With big-O we can talk formally about the runtime of an algorithm as the inputs grow.
It's important to note, that we care about the trends and not details.

Why?

Knowing the big-O of our code allows us to:

Have a more precise way to talk about performance
Lets us identify parts of the solution that might be inefficient
Help us discuss trade-off of several approaches

How?

We count the number of operations that our functions need to be executed.

More formally, we can say that algorithm is O(f(n)) if the number of simple operations that we have to do is eventually less than a constant time f(n) as n increases.
f(n) means it could be linear, f((n)=n^2 ) means it could be quadratic, or f(n) =1) means it is constant.
An O(1) would mean that as n grows, it has no change reflected in runtime.
An O(n) operation inside of an O(n) operation equals O(n^2 ). (Nested loops are a great example of this).

Regardless of the exact number of operations, they tend to grow roughly proportionally with n. So if n doubles, the number of operations will also roughly double.

Can we make it simpler?

There's something important to take into consideration to simplify a big O. At the end of the day, as we said before, we're looking to spot trends and not details. This means we're interested in the big picture, which translates to:

We can take out the constants. We’re looking at the big picture so O(2n) can be translated into O(n) and 0(500) can be O(1)
Small terms are not important either. Again, think of the big picture. If we have O(n+10) we can forget about 10 and translate it into O(n).

Important tips to look out for

Arithmetic operations are constant
Variable assignment is constant
Accessing elements in an array by index or object is also constant
In a loop, complexity is the length of the loop times the complexity of what’s inside of it

Which one is best?

Ideally, we should be striving to get O(1), O(log n) or O(n).

O(log n) refers to space complexity, which will be addressed in the second part of this article series.

Got something to add? Please feel free to reach out for any question, comment or meme.

Get hooked on Hooks.

Elizabeth Villalejos — Mon, 24 Feb 2020 20:41:52 +0000

When I was just entering the React-Redux world, the concept of hooks seemed daunting. so I have to learn React AND Hooks to know React?

It's easy to get overwhelmed when you're not quite sure if your knowledge of vanilla JS will be enough to understand React and Redux, but Hooks are easier than they seem at first glance.

According to the official documentation,

React's new "hooks" APIs give function components the ability to use local component state, execute side effects, and more.

What this means is that you can now favor using Hooks instead of functions like connect() or mapDispatchToProps(). We are able to do this because we are accessing the state directly, we no longer need aids to do so.

Quick start on hooks

We'll be talking about useSelector() and useDispatch() in order to replace connect(), mapDispatchToProps() and mapStateToProps().

useSelector()

This is the equivalent of mapStateToProps. It takes a pure function as an argument that lets it know which part of the state you want to access.

It's also important to note that we're passing a second argument called shallowEqual. By doing this, we are letting it know that it has to use a shallow equality comparison.

You could also opt-out of adding it but rendering is always going to be more expensive than a quick selector check and returning new references will cause unnecessary re-renders whenever we dispatch any actions.

useDispatch()

This is the better version of mapDispatchToProps. To use it, we first need to invoke useDispatch into a variable and store it. After that, we're free to manually dispatch any redux action we have defined.

Using both of these hooks will discard the need for Redux's connect since we are pulling and dispatching directly.

But how does it look like?

Given this quick snippet of a bookList component, we will transform from the traditional connect into hooks.

Using connect

Refactoring using hooks

What did you learn today?

Got something to add? Please feel free to reach out for any question, comment or meme.

Your quick #a11y cheat sheet

Elizabeth Villalejos — Wed, 17 Jul 2019 20:44:20 +0000

Recently, in one of those Youtube dives everyone gets in every now and then, I stumbled upon an old Apple comercial about accessibility and it struck a chord in ways I hadn't even considered before.

“Get over it — accessibility is not optional”.- Jenny Lay-Flurrie, Chief Accessibility Officer at Microsoft.

When starting your coding path and diving into basic website making, there's not a lot of content about how to make your website a11y friendly in these stages when you're not really sure what to look for, what to learn first and you're mainly worrying about why your css is not linking correctly. (Guilty as charged)

So, what does web accessibility even means?

W3C defines Web accessibility as websites, tools, and technologies are designed and developed so that people with disabilities can use them.

What kind of conditions do you need to take in consideration?

Visual: partial or total inability to see or perceive colors.
Motor skills: making precise movements is hard (using a mouse)
Hearing: reduced or non-existing ability to hear.
Photosensitive seizures: Flashing lights in animations can trigger epilepsy episodes.

Why is it important?

By doing some small tweaks on your code, you'll be able to make the user experience as equally as possible so every person will be able to interact, understand, navigate, contribute to the web no matter their circumstances or abilities.

You can help someone feel welcome and included, wouldn't that be great?

Not only people with disabilities would be benefitted from this. Web accessibility is used by people using mobile devices or slow network connections. Also, this overlaps with good code practices (yay!)

Tips you can implement now

Add Alt text to images
Captions are great but in case your image were not to be loaded, how would the user know what it's looking at?

Screen readers also benefit from it.
Bonus: alt text can also improve your SEO! Make sure to write descriptively and use keywords that make sense.
Be smart with your colors
Red background and green text isn't the greatest choice out there. The contrast you use are important to how much of your page can actually be seen and understood. You can do a quick check up for your color scheme here
Use headers in your favor
Give your website a correct flow and structure with the right header tag. As a recommendation, only your main title should go with H1 and then use your subheaders accordingly to their importance or relevance.
Use title tag
It's very helpful for screen readers and helps structure your content. Use a short title that tells what your site is about.

Labels can still be cool
While placeholders look very good on forms instead of labels, in some screen readers they're ignored so the user reaches a text field that has no description. I'm not telling you to stop using them (I have a soft spot for them) but to include a label even if it's hidden for this purpose. Make sure the label and placeholder have the same text.
Be friends with Aria-label attribute
Accessible Rich Internet Applications (ARIA) is a set of HTML attributes that define ways to make Web content and Web applications more accessible to people with disabilities. You can look into more info on how to use it here.

Is my website a11y friendly?

You can check how your website rates in accessibility (speed, security and more) over here.

Got anymore to add? Please feel free to reach out for any question, comment or meme.