DEV Community: Cat

An Open Letter to Newbies

Cat — Mon, 14 Feb 2022 16:27:59 +0000

Dear Newbie Developer,

This sh*t is hard.

You're not going to like it at first, and by "it" I mean you will not like your first roadblock. In fact, you might not like any blockers, but you will encounter them regardless of experience level.

Honestly, it's okay to cry. It's okay to have a bit of an identity crisis when you encounter these difficulties.

Identity crises are normal, but do not dwell on them for long.

As the lovely Kelly Clarkson sings:

What doesn't kill you makes you stronger

Stand a little taller

...

What doesn't kill you makes a fighter

Footsteps even lighter

Seriously, and I mean this literally:

just walk away.

Get up and out of your coding space.

Give yourself a 10-15 minute breather if you're on a deadline.

Literally leave the room. You don't need to go outside. Heck, I just walk to the kitchen and get more water or a nice snacko to reward myself with for even just the attempt.

Forreal though, solutions usually come to me during breaks, especially after a good night's sleep or a nap.

If there is one thing you need to remember throughout your dev journey in its entirety, it's really to just be kind to yourself.

Sure, there are prodigies that can regurgitate a translation from binary in 0.2 seconds-- but that's them and not you, and that is a good thing .

What you bring to the table is valid and will always matter. There are ~7 billion people in the world, and maybe one of those 7 billion will find your way of writing or coding or whatever you do helpful/useful. Maybe what you say and how you convey it will resonate with someone, thereby making their journey a lot easier.

Do you know how many tutorials, StackOverflow posts, and pages of our choice search engine we go through just to find a solution that makes sense to us?

Do you know how many of those sources we have to cut and piece together just for our code to do the thing we want it to do?

Newbie, I hear you. I was there before: tired, frustrated, ever-wondering what this means. Do not give up, but also, do not strive for excellence-- especially at this stage.

Right now, you're wondering why it's not working, even though you followed the instructions to the T.
The best path to go at that point is to figure out a way to get it to work. If that means writing 50 lines of 'if else' and 'else if', so be it. But as long as you're learning, as long as you know what it does you are making progress.

...and after you understand that, THEN you can work on refinement and optimization.

But for now, please, just remember to be kind to yourself and get yourself a little snacko.

Thanks for reading!

Let's keep in touch on Twitter !

The Difference Between React State vs Props

Cat — Mon, 07 Feb 2022 16:39:21 +0000

You may have heard the terms "stateful" and "lifting props" thrown around in the community for a while.

Here's a TL;DR for you:

Props cannot change, but State can.

But wait-- what does that even mean?

Think of working with polymer clay: the type of clay you can bake to set its shape.

Brands you may recognize are Sculpey, Fimo, or Premo.

Think of the clay as information; let's say you want to create a figure of your D&D character. You mold the clay to your vision, bake it, and paint it. You know how your character looks like: their mannerisms, style-- you don't need anyone else's input on how to create your figure. You finish your character piece with confidence.

This would be an example of a prop: no one else but you influences the look of the figure.

However, if a friend commissions you for a custom D&D character piece, you need to mold and meld it to their vision; therefore, you need their input which could be changed in the middle of creation: "Pointy ears! Wait, no-- oh! Make them blonde--NO bald--NO! Covered in horns!"

This is an example of state: the state of the figure is constantly changing because your friend keeps changing their input.

I keep highlighting input because, when dealing with React states, a common element that you will find yourself using state for are text fields. That's because you will need input from the user to set the information the state will hold!

Whereas props (fun fact: it's short for "properties") are usually set pieces of information that the dev or client knows about and doesn't need user input to display.

So, TL;DR:

props === your character that you designed. No one else but you can change it.
state === your friend's character that you offered to design (and now probably regret because they keep changing their mind). It is mutable by the public.

Thanks for reading!!

I hope that wasn't confusing for you! If you have any questions or feedback, feel free to leave a comment below (and I will answer within 24-48 hours) or DM me on Twitter- @catballar!

How to Center a Div with CSS in 3 Steps!

Cat — Mon, 31 Jan 2022 17:37:55 +0000

Every dev's challenge: center a div.
Nightmare mode: center it vertically AND horizontally.

Well, you don't have to fret any longer! Here's a foolproof, short way to do it. All you need are two elements: a container and your content.

Step 1: Set up your HTML.

This is very short and sweet: you just need two divs! I like to declare the class semantically so we'll call them container and content.

<div class="container">
  <div class="content">
    <p>This is some centered content</p>
  </div>
</div>

Step 2: Set up your container's CSS.

We'll give container a width of 100% and a height of 100vh. This ensures that your canvas is covered.

Then, we take care of what's inside by declaring display: flex, justify-content: center, and align-items: center. This ensures your content is centered.

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Step 3: CSS - Set up your content.

For the content itself, you're free to style this how ever you'd like. Since we don't have much content, I set the width to 300px. You can also apply it as a percentage width to keep it responsive!

.content {
  width: 300px;
}

And that's it! That's all you need to set your content at the absolute center. Here's a codepen for your convenience to copy out of:

Thanks for reading!!

If you like my content, please give me a follow on Twitter!

UX Case Study: Killer Kao

Cat — Thu, 16 Dec 2021 19:29:32 +0000

Live Demo

GitHub Repo

Initial Design

I wanted to create a different take on the classic "Rock-Paper-Scissors" JavaScript project by using Kaomojis (the predecessor to our current, beloved emojis!)

Here are some wireframes I initially created via Sketch:

(I was very much inspired by fighting games: Street Fighter, Tekken, King of Fighters, etc.)

Feedback

After I created the first iteration, I had friends and family test it out-- especially on mobile-- and was open to any and all feedback!

This is from my older brother:

One of my close friends' friend had feedback for me!

Even Shen (Shen Comix) took the time to try out my app!

I was even sent screenshots of when the Kaomoji would break:

So I adjusted the Kaomoji structure accordingly, as well as came up with the logic to prevent block or strike "spamming" (hitting repeatedly with no consequences).

Postmortem lessons

This was definitely a fun project, not just created by me, but by those in my community. I think I should have opened up feedback to a wider set of people, especially those who are fighting game enthusiasts.
If I had the time, I would have implemented the choice to play as either a human or bear and made the kaomoji SVGs instead of the traditional text-made artistry to make it more accessible.

If I had the tech savvy, I would have made it a two-player game instead of one-player against a random number generator.

Here are the links again if you want to try out this project!
Live Demo

GitHub Repo

Thanks for reading!

If you want to keep in touch, reach out to me via Twitter!

npm start Fatal Error Workaround

Cat — Tue, 14 Dec 2021 03:43:57 +0000

I was trying out Udacity's React Nanodegree and found out (the hard way) that there are some things that Apple M1 users may run into.

In short, there is this error you'll keep running into when you try to run npm start:

FATAL ERROR: wasm code commit Allocation failed - process out of memory

First thing: make sure Node is updated on your machine. You can check that by simply running node in Terminal. Make sure it's higher than version 12.

Next, cd into your project folder, and then run

nvm install node

This will ensure you have the latest version of Node specifically for your project, especially if you git clone'd the project straight from the linked Udacity repo.

If all goes to plan, npm start should compile successfully!

Let me know in the comments if this worked (or not) for you!

What I've Learned From Close-call Interviews

Cat — Mon, 09 Nov 2020 17:58:52 +0000

You did great!! But...

You did so well and the team loves you! However...

You were SO CLOSE--

I could tell from the sound of the recruiter's voice that, after a month of fretting, questioning my worth, building up my hope for a bright future for me, my fiancé, friends, and family-- everything has, once again, been pushed further out of my reach.

This one hurt pretty bad, not gonna lie. I kept hearing positive feedback! I mean, we were talking compensation and when they would get started on drafting an offer.

I really thought I had it.

Then the rug gets pulled out from under me, of course.

The most important thing I learned from this experience is:

Never, ever believe anything anyone says until the offer is in front of your face with your name on it.

Remember: you always have control over your own actions, reactions, and decisions.

And if they didn't pick you, it's their loss. Don't waste time fretting about why it wasn't you or singing the hymn of the impostor on repeat.

It's fine to ask for feedback, just as long as you act on it and show improvement.

Move on from the rejection as quickly as possible; time waits for no one.

What is one way you recover from--yet another--rejection?

Thanks for reading!

If you enjoyed this post or found it helpful, please share it on social media and/or check out my buymeacoffee page!!

How to Create Reusable Buttons to Trigger GSAP Animations in React!

Cat — Wed, 30 Sep 2020 21:53:53 +0000

I was determined to learn how to implement GreenSock animations into my shiny new portfolio/blog, and I discovered how to make this nifty component.

Step 0: npm i/yarn add the required dependencies:

* React
* gsap

I am assuming you already have your base file/page you would be importing your ScrollBtn component into.

Step 1: Create your button component

Make a ScrollBtn.js file in your Components folder.

Step 2: Import GSAP and the ScrollToPlugin

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

Step 3: Register the ScrollToPlugin

This is an important step in the process. If you do not register the plugin, your app will fall over and you will be left wondering why.

(Totally not speaking from experience.)

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

gsap.registerPlugin(ScrollToPlugin);

Step 4: Create your button!

This component will call upon the use of props! This is the key to having it be reusable. All you need to do is give your target components/sections an id.

Here is the base of the component:

const ScrollBtn = (props) => {
    return(
        <div onClick={handleClick}>
            <p>Click to scroll</p>
        </div>
    );
};

export default ScrollBtn

You will notice there is an onClick attribute to our div/button.

Let's create that function now!

Step 5: Create trigger functionality

This is where our ScrollToPlugin comes in.

Above the return statement, create a function called handleClick and pass in e for "event" since this is an event listener.

Don't forget to add e.stopPropagation() so that if your user -- for some odd reason or another -- hits the button repeatedly, the events won't bubble up/pile up on top of each other, which would really hurt your flow and experience.

const ScrollBtn = (props) =>{
    const handleClick = (e) =>{
        e.stopPropagation()
    })
 }
 return( ...)

Finally, add gsap and scrollTo functionality:

const handleClick = (e) =>{
    e.stopPropagation()
    gsap.to(window, {
        duration: 1,
        scrollTo: {
            y: `${props.target}`,
            offsetY: 70,
        }
    })
}

There's quite a bit to explain here.

First, according to the gsap syntax, we declare our overall target element that will be animated– in this case it's the entire window.

"window" is a reserved keyword in JavaScript by default, that targets the user's viewport.

Next, we declare our actions:

We want this to run fairly fast. By setting the duration to 1, it will take about 1 second for the animation to complete.
I would recommend using a number between 0.5 and 2: you don't want the scroll to go so fast it gives the user a bit of vertigo just by glancing at your site, nor would you want it to take for. eh. ver. to get to your target section.
*scrollTo is our main action, and it has its own set of keys.
For this we'll keep it simple and only declare our y -axis target and the offsetY so that the scroll doesn't stick the target section to the very top of our browser, but rather, off about 70 pixels to put it in a good space between the address bar and itself.
(Spacing– padding and margin-- are very important elements to consider in UX/UI design.)

Our y value is encased in a string literal since we will be tying this component to the base page via the React prop method. This is how components in React can communicate with each other throughout the app.

Now, it's showtime!

Step 6: import your ScrollBtn component into your base file/page

In this case, I created a "Components" directory beforehand, within the src directory, where my base file is located.

import ScrollBtn from './Components/ScrollBtn';

Note that you do not need to import gsap again– unless, of course, you're using a different animation for this page.

Step 7: Make sure you confirm the id of the target section

Let's say the section id is "section-1". This is how I would tie our ScrollBtn to this page:

Remember y: ${props.target} ?
Here's how it works:

<ScrollBtn target="#section-1" />
    (...)
<div id="section-1">...</div>

I added the "#" because we are targeting an id.

If all goes well, your button from wherever it is will trigger a scroll down or up to where "#section-1" is.

Here's a working example in CodeSandbox:

I hope that this tutorial was helpful to you!

Let me know if it was by sharing this post on social media!

Don't forget to tag me: @catvscode!

My First Hackathon as a Developer

Cat — Fri, 04 Sep 2020 23:53:21 +0000

Once upon a time, there was a 4-day hackathon.

I signed up as a Frontend developer.

Little did I know, at about the midpoint, half of my team dropped off the face of the Earth.

Well, our PM fell ill and I have no idea where our growth marketer or our other UX designer went.

I'm grateful that all the Software Engineers and one UX Designer stayed, but I had to essentially take over as PM (in addition to being the frontend dev) for my team.

It's how this tweet happened:
// Detect dark theme var iframe = document.getElementById('tweet-1301359921938624512-155'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1301359921938624512&theme=dark" }

Honestly, though, I thought it was one of the most amazing experiences I've ever had as an engineer so far.

Now about the project...

We decided to create a delivery app that caters to listing local businesses-- so you won't see McD's or Target at the top of the app--or at all.
We saw store after store closing in our hometowns due to COVID-19, and now we see how much of a necessity an online/digital presence is today.

Presenting: Us to You

Essentially, we are the Ub*r E*ts for local businesses. The leads recommended that we at least use React and AWS Lambda (which we did use). We also decided to use Django as our backend. We had a fun collective rant about how "Serverless" isn't exactly serverless.

I spear-headed the React frontend by establishing a generic landing with a sign-up/sign-in form. The growth marketer gave me a palette to work with as we were waiting for our UX designers to get back to us with wireframes. I deployed the first iteration prototype up to Vercel so that we can for sure at least have something to show, should we fall short of completion. (Spoilers: we did, sadly.)

To my surprise, I had to guide a couple of my university-based/CS major engineers on how to install git, how to navigate git, troubleshoot their Python dev environment-- it felt like I was already a senior dev. (It also felt very validating.)

We established the backend, and another fullstack dev (and a fellow GA grad) got it to connect to AWS.
We did receive a hi-fi mockup from our designer, but he had a VERY different color palette than what I was given. Thankfully, I used TailwindCSS and VSCode so making palette changes was easy-peasy.

I enjoyed pair-programming with my teammates. I absolutely appreciated how fullstack dev Gavi explained every step he was taking out loud -- something I really should do more (as opposed to constantly verbally threatening my code to work "OR ELSE").

We had to record ourselves via Zoom pitching our idea. Our growth marketer at least left us with a mostly done powerpoint presentation. We just had to re-arrange it. I setup our meeting, did a couple of rehearsal pitches, and then we were done.

4 days--done.

I'll have another post describing my mental process on how to structure a TailwindCSS/React application!! I feel like I discovered part of myself while working on this project.

Despite not winning or making it to top 3, this hackathon solidified my desire to stay in the tech industry and keep to keep applying to places as a full-time frontend engineer.

Thanks for reading!

Check out my other posts on dev.to, and follow me on twitter!
Here's my portfolio if you're curious: https://catcarbonell.dev

Interview Qs Decoded - # 2

Cat — Thu, 11 Jun 2020 23:40:29 +0000

I wanted to share with you all an actual challenge I was given during an interview!

The interviewer said, "Alright, let's do some string reversals!"

I responded with this exact face:

The Q: Write a function that accepts a string as a single argument, and when called, reverses the string.

Restrictions:

You cannot use .reverse() or .reduce()!

Edge Cases:

Punctuation does not matter
Disregard numbers, we are only looking at strings

Given Argument:

const string="Reverse me!";

Setup:

function revFunction(str){
};

I asked the interviewer if I could use .split(), and he said, "sure, go ahead."

Protip: Always ask questions!!

function revFunction(str){
   const splitString =  str.split('');
};

What .split() does is separate each character into individual indexes, making it into an array. I set it as a const variable splitString so I could call on it later.

Next, I thought of iterating through this new array, and so I utilized a classic for-loop

function revFunction(str){
   const splitString =  str.split('');
   for(let i = 0; i <= str.length; i++){}
};

Now, what do I do when iterating through str? Yes, I need to go through them individually, but I need to iterate the other way. I asked if I could use .pop() since pop removes the last item in an array. He gave me the go-ahead.

function revFunction(str){
   const splitString =  str.split('');
   for(let i = 0; i <= str.length; i++){
      // --------
      splitString.pop();
      // --------
   }
};

But we need that last letter! We can't just send it into the abyss! My solution to hold the popped item was to .push() it into a new, empty array.

function revFunction(str){
   const splitString =  str.split('');
   // --------
   const reversedString = [];
   // --------
   for(let i = 0; i <= str.length; i++){
      // --------
       reversedString.push(splitString.pop());
      // --------
   }
};

At this point, if we console.log the revFunction, it will return as an array.

// [!,e,m, ,e,s,r,e,v,e,R]

Success!

But, the interviewer wanted the function to return a solid string. I asked if I could use .join(). He approved.

function revFunction(str){
   const splitString =  str.split('');
   const reversedString = [];
   for(let i = 0; i <= str.length; i++){
       reversedString.push(splitString.pop());
   }
   // ---- //
   return reversedString.join('');
   // ---- //
};

This should return:

//!em esreveR

We did it! There are many ways to reverse a string without the .reverse() method. What I covered was the iterative way (iterating with a for-loop).

I challenge you to solve this challenge (in your language of choice) in the comments!

Try it out on my Repl!

Thanks for reading!!

Got a beginner-level interview question for me? DM me on Twitter! I'm always up for challenges!

Interview Qs Decoded - # 1

Cat — Tue, 02 Jun 2020 20:30:22 +0000

Hello everyone! Welcome to the first in a series! I'm going to try to explain a common software engineering interview question to better understand it and hopefully remember it when the time comes!

These problems will primarily be solved in JavaScript, as that is my language of choice when testing (and I just want to become a good front-end dev. 🥺)

Q: Find the second largest number in a given array.

Params: We are given an array of whole, positive integers (no negative numbers or floats). We are to write a function and return the second largest integer.

Let's start!

We'll write the skeleton of our function, setting the input/argument as "arr" for array:

function secondLargest(arr){};

Then, we'll need to set two empty variables: largest and second.

Why? We will need placeholders for both our prospective largest and second largest numbers as we loop through our array.
We want to keep track of each integer that is in the array and measure the value against the others

function secondLargest(arr){ 
    let largest = '';
    let second = '';
}

...Which brings us to our next step: create a for-loop!
As we iterate through the array, we will measure each value against each other, comparing the variable "largest" to the current iteration value (arr[i]).

function secondLargest(arr){
    let largest = '';
    let second = '';
    //
    for(let i=0; i < arr.length; i++){};
    //
};

To compare, we will create an if-statement comparing largest to arr[i].

If arr[i] is greater than largest, then replace it with the current value of arr[i] by redeclaring largest and setting it equal to arr[i]

function secondLargest(arr){
    let largest = '';
    let second = '';
    for(let i=0; i < arr.length; i++){
        //
        if(arr[i] > largest){
           largest = arr[i]
        };
       //
    };
};

We found the largest number! But how do we get the second largest?
We did find it already (kind of): we'll just set the former "largest" number to the "second" variable.

HOWEVER, we must declare the second variable BEFORE we declare the new largest number, simply because order matters-- JavaScript executes code from the top-down.

function secondLargest(arr){
    let largest = '';
    let second = '';
    for(let i=0; i < arr.length; i++){
        if(arr[i] > largest){
           //
           second = largest;
           //
           largest = arr[i];
        }; 
    };
};

Speaking of order and specificity, it's time we find the "true" second-largest number in the array.

Let's create another if-statement with more specific parameters:

If the arr[i] is GREATER THAN second AND LESS THAN largest, then set arr[i] as second

function secondLargest(arr){
    let largest = '';
    let second = '';
    for(let i=0; i < arr.length; i++){
        if(arr[i] > largest){
           second = largest;
           largest = arr[i];
        };
        //
        if(arr[i] > second && arr[i]< largest){
           second = arr[i];
        };
        // 
    };
};

Finally, we'll return our second variable to complete the requirement.

function secondLargest(arr){
    let largest = '';
    let second = '';
    for(let i=0; i < arr.length; i++){
        if(arr[i] > largest){
           second = largest;
           largest = arr[i];
        };
        if(arr[i] > second && arr[i]< largest){
           second = arr[i];
        };
    };
    //
    return second;
    //
};

And there you have it! It's a fairly simple solution, a bit long since we're using a traditional for-loop, but it works!

Feel free to post your own solutions in your programming language of choice in the comments!

Thanks for reading!

If you'd like to keep in touch, please reach out to me on Twitter!

Function Composition Explained Using Pokémon Evolution

Cat — Thu, 28 May 2020 22:35:56 +0000

Yo, (scarf) dog. I heard you like functions, so I put a function in ur function so that you can function while it functions. < / oldMemes >< / badJoke >

ANYWAY, so my friend was starting to learn how to code and she needed help with understanding what the teacher was asking her to do.

This is what she sent me:

/*
Create a function that takes in two inputs.
One should be a function and the other should be
the argument to call the input function with.

Then in the function you define call the passed in function
with the input argument. 
*/

...excuse me, but lolwut?

Here's the example function she sent:

function sayHi(b,c){
c=prompt("Greet me!");
b(c);

Okay, that's a bit more clear, I guess.

So, here we go:

From what I understand, we're looking to build a function that runs another function. I used the concept of Pokémon evolution with stones to illustrate this.

Evolution is the overall universal function.

function evolutionFn(pokemon, stone){
  stone = prompt('Which stone will you use?');
  return pokemon(stone);
}

Pokémon themselves are separate functions, but still universally utilize the same evolution function. The best example to use would be Eevee because the possibilities of their evolution are vast. (But for now, we're referencing their basic gen 1 evolutions).

const eevee = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'fire' ){
    return 'Congrats! You now have a Flareon!'
  }else if( userInput ==='thunder' ){
    return 'Congrats! You now have a Jolteon!'
  } else if( userInput === 'water' ){
    return 'Congrats! You now have a Vaporeon!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

I also created Pikachu to illustrate that a completely different Pokemon can utilize this method of evolution as well.

const pikachu = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'thunder'){
    return 'Congrats! You now have a Raichu!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

Put it all together and we get the following:

function evolutionFn(pokemon, stone){
  stone = prompt('Which stone will you use?');
  return pokemon(stone);
}

const eevee = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'fire' ){
    return 'Congrats! You now have a Flareon!'
  }else if( userInput ==='thunder' ){
    return 'Congrats! You now have a Jolteon!'
  } else if( userInput === 'water' ){
    return 'Congrats! You now have a Vaporeon!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

const pikachu = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'thunder'){
    return 'Congrats! You now have a Raichu!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

console.log(evolutionFn(eevee));
// example: if prompt => 'fire or FIRE or even FiRe', 
// it will say "Congrats! You now have a Flareon!"
// if it's anything else, the console will return "Huh. It didn't work."


console.log(evolutionFn(pikachu));
// Should return "Congrats you now have a Raichu"! etc. etc.

Play with it live on Repl.it!

And there you have it-- Function composition: when you want to use a big function to execute little functions that essentially will output the same basic thing.

Also, fun fact-- you've been bamboozled! If you've ever used .map(), .split(), .join(), .reverse(), you have already experienced Function Composition! We see this in action when we use JavaScript methods ALL. THE. TIME.

Thanks for reading!

If you'd like to keep in touch with me, follow me on Twitter! DMs are open.

Also, sign up for my newsletter where I give you tips/tricks on how to survive coding bootcamp and post-bootcamp/learning on your own by sharing some personal (sometimes embarassing) stories!

Explain Microsoft Azure Like I'm 5!

Cat — Wed, 20 May 2020 18:09:31 +0000

I'm getting curious about DevOps, and Azure came up in conversation.

Without technical jargon, I pose this challenge to you!

Winner receives a sticker pack from me!