Forem: BigCityC

Learning ReactJs...again

BigCityC — Wed, 15 May 2024 22:37:31 +0000

This is the introduction to a short series I plan on doing. I have now been in the software development industry for two years.

I began learning how to code in 2017 and failed miserably until finding an online tutor/mentor to help me in 2019. I began learning ReactJS in 2019 to help build my coding skillset. I worked with React for about a year and a half before finding my first software job with a robotics company.

After getting my first software job, my personal coding pursuits took a backseat. With a full-time job, I found little inclination to code in my spare time, feeling that forty hours a week was ample time spent in the world of programming.

At my current job, we do not use frameworks, we use vanilla Javascript. Nonetheless, these past two years have been a continuous learning curve, allowing me to gain valuable insights.

With all that being said, I am on a quest to learning ReactJS again. And I thought it would be good to document the differences in my experience from the first time I learned React.

CodeSignal - Best coding challenge website

BigCityC — Fri, 21 Jan 2022 16:50:21 +0000

Throughout my journey learning front end web development I have been through a lot of different coding challenge websites.

A few months ago, I was introduced to CodeSignal, and have been using it ever since.

First Impressions

I recently took an hour coding test on CodeSignal. After enjoying the experience, I signed up. I found the UI to be really fun and engaging. I’ve tried using other code challenge websites in the past, and always found them unnecessarily confusing, and lacking character. Meanwhile, I found CodeSignal to be full of color, with an easy layout to understand.

The basic version has two options.. Arcade or Interview Practice.

Interview Practice

I find this feature to be really useful, and I appreciate the organization of the topics at hand. For example, the first topic is Data Structures, and it covers Arrays, Linked Lists, Hash Tables, Trees, Heaps, Stacks and Queues.

Plus! The challenges tell you which companies have asked them in the past.

The Arcade

What a fun name for a place to drill no-context coding challenges day in and day out. The UI is an exciting place to be as well, making you feel like you are digging your well of knowledge deeper and deeper by taking advantage of the “endless scroll” that so many other websites take advantage of… but this time for good instead of evil!

My Approach

I use CodeSignal to practice for technical interviews.
I do one challenge per day, that consists of two 15 minute sessions.

In the first 15 minutes, I attempt to solve the challenge by myself, with no help from the internet. I make sure to document my thought process using comments.

In the second 15 minutes, I compare my answer and thought process to other correct answers. This is a feature I like about CodeSignal, once you solve the question, you unlock all of the other correct answers. It isn’t this easy on other code challenge websites. In some cases you have to spend coins to unlock the solutions.

Once the initial 15 minutes is up, if I haven’t solved the challenge… I google the answer. Although, instead of simply copy/pasting the answer and moving on, I compare the thought process of the answer I found to mine.

Overall, I think CodeSignal is the most useful code challenge website. I find it’s user experience to be really ergonomic and I plan on continuing to use it on a daily basis to improve my coding.

How to scale an image inside of a div

BigCityC — Wed, 03 Nov 2021 20:04:07 +0000

Here is a basic react app, using styled components.
I have set up an example of a div with an image inside of it.

If you open the codesandbox and try using the slider to resize the browser, you can see two things.

The image remains the same size.
The image “leaks” out of the div that it is a child of.

import styled from "styled-components";
import Laptop from "./laptop.png";

const Container = styled.div`
  border: 1px solid red;
`;

const Img = styled.img.attrs({
  src: `${Laptop}`
})``;

export default function App() {
  return (
    <Container>
      <Img />
    </Container>
  );
}

codesandbox: https://codesandbox.io/s/scaling-images-1-kc05z

There are two things we need to add to the image if we want it to scale with its parent.

height: auto
max-width: 100%;

height: auto
This allows the image to automatically adjust its height to allow the content to be displayed correctly.

max-width: 100%
This sets the width of the image so that the image will scale down if it has to, but never scale up to be larger than its original size.

NOTE: Using width: 100% instead will allow the image to be scaled up larger than its original size, in order to fit the full width of the div it is inside of. Most cases, it is better to use max-width.

Below is the same code with the solution. You can see from the demo that the image has resized correctly.

import styled from "styled-components";
import Laptop from "./laptop.png";

const Container = styled.div`
  border: 1px solid red;
`;

const Img = styled.img.attrs({
  src: `${Laptop}`
})`
  height: auto;
  max-width: 100%;
`;

export default function App() {
  return (
    <Container>
      <Img />
    </Container>
  );
}

codesandbox: https://codesandbox.io/s/scaling-images-2-rxyx2

Learning to code with mindfulness

BigCityC — Wed, 03 Nov 2021 15:03:41 +0000

I have recently noticed a peculiar habit in my day to day coding. I often find myself feeling frustration when I can’t solve a problem right away. This creates an urgency to complete the project, and results in unorganized code and half thought out solutions.

When I have felt frustration in the past with a problem, my go to habit was to just start coding the first solution that pops into my head, and hope that it works. More times than not, it doesn’t.

Last week I started to become more aware of when I am feeling frustrated. Recently I have been practicing different techniques to help put my mindset in a better, more calm, place when setting out to solve a problem.

Technique 1: Turn off distractions
Now, when I prepare to code, I turn my phone all the way off, close my email, and disable anything else that may distract me during the time I choose to focus on a problem. This technique helps me retain focus on one thing at a time and helps keep my mind clear on what needs to be solved in the code.

Technique 2: Map it out
This technique has changed the way I approach coding. Now, when I feel hints of frustration, I know it’s because I need to step back from the keyboard, and create the space I need to really understand the problem at hand.
This is the two step process I use to more mindfully solve problems:

Write out HOW the code currently works, and how I want the code to work.
Brainstorm all the possible solutions to the problem and choose the best one.

I bolded the how in step one because that is the key to solving problems. When I let frustration get ahold of me, I try to solve the problem by asking WHAT I need to do to make it work, and not HOW to make the code work. Asking “what” is a surface level question, and often does not address the underlying problem, while asking “how” forces you look at the problem from its most basic level, and work your way up to the specific problem.

In conclusion, I have been using the combination of removing distractions and creating space to think more carefully on how a problem can be solved. These two techniques have helped me code more mindfully and be more focused while solving problems.