DEV Community: Jason Harrel

Designing from scratch

Jason Harrel — Sun, 26 Apr 2020 04:01:59 +0000

One thing I started to wonder, and challenge myself with, is to design work from scratch. What I mean by this is if I'm curious on figuring out how to make something with a similar style, how can I design something so close to it?

I started to do this with CSS. I wanted to create layouts from scratch, design them in a way that will resemble something I look at every day. I didn't want to get any templates and build off that, but more just start coding.

Boy was I in for a world of wonder. So much guess work goes into this style. Not saying this is something we should all do, I'm sure some have done it or do it now? Maybe just me?

Basically what I learned so far is that I constantly sit and nitpick it all and try to "fine tune it". However, that just leads to frustration and a "meh oh well" outlook.

But what I do learn about it is patience and to get comfy and that Google is really burned into my browser history. hah.

Does anyone else ever take this approach? Does anyone have any tips or strategies?

How I Got An Interview With My Dream Place

Jason Harrel — Sat, 18 Apr 2020 23:19:59 +0000

I have been powering through this lockdown and COVID-19 trying to keep learning and expanding my knowledge. One thing I have also been trying to obtain is an interview with someone to hopefully grab my first dev role, and get real world experience. I never thought I'd get a call about doing it with my dream company, Major League Baseball.

I worked with MLB last year on their pitchcast team. The team that puts up the little strike zone box above home plate to show where pitches land. Cool huh? While in the office I was lucky enough to be around broadcast developers that work on stuff for teams broadcast as well as stuff for the site as well. I would pick their brains or even just slightly look over their shoulders to try and get some insight into how it was run.

Well towards the end of the bootcamp, I was asked to show the lead developer a project I had been working on in JavaScript. He was impressed. End of discussion basically. I was excited to show, but a little left in the dark as to if he liked it or not?

Well, I recently reached out to him expressing any help if needed. I didn't know if it was going to lead anywhere. Well I got a message asking to submit some more work and he'll get back to me.

Being nervous I sent over my work. I sent more than was asked. I sent the stuff I'm most proud of and stuff that I thought was decent, just to show that I continue to create.

After a few conversations we set up a time to have an initial interview and see where I can be with their requirements!

It's better than I ever thought it could be and I'm excited for the opportunity to get here and hopefully I can hit one out of the park! (little baseball fun there? No? Not funny? shucks)

I may not be able to play in the big leagues, but to me, this is the big leagues.

Has React Native Peaked My Interest?

Jason Harrel — Sat, 11 Apr 2020 22:12:20 +0000

I recently started to research some on React Native. I've always been interested in the way React works and how it gives you an instant satisfaction or defeat of if your code is working right away. (I don't know why that's always been something I've nerded out on, but it makes me feel a certain way.)

One way I've seen to make react native applications is to use expo (https://expo.io/learn). It sets up the project with all your necessary files and structure to get started with. Then there's always the companion app that allows you to see the app right away on your phone, either iOS or Android. And of course, there's way to see it via a virtual emulator as well.

So what have I started to see with my learning process in this? I need to practice my JavaScript some more is the biggest one. There's so much in it that I don't know, struggle to learn or just don't really remember much on.

Also, I need to keep up my CSS skillset. Yes, I know it's a different way to do CSS inside React, but honestly, to me, it really all comes down the same way.

I also need to really crack down and learn something in this library! I always crave to learn something new and this is a great option to do so.

Do you have much experience with this all? Any tips or suggestions you think I should take under my belt?

Can You Really Forget The Simple Things?

Jason Harrel — Sat, 04 Apr 2020 20:32:12 +0000

I'm sure like most of us, we got some kind of power training through a Bootcamp. At least that's what I did. But with the nature and speed they teach you the topics, it's easy to forget them.

Having only a certain amount of time to try to develop skills and master them can put a strain on really knowing everything you need to know to get a job or start a freelance.

But what about when it's all over? What happens to the techs you learned in the early portions? Are you one who wants to keep fresh with the different things learned or are you someone who rather just stick to your favorite?

For someone like myself, when I got into this I wanted to learn it all. But in reality when the bootcamp ends, so does some of the learning grit you have. It's not a bad thing in my mind because it drives me to go back and relearn what I knew. Like riding a bike again years of not.

So all in all, just take time to go back and learn what you might have once knew or been foggy on. Because right now we got all the time we could want with what the world is going through.

It's A Scary Time Right Now.

Jason Harrel — Sun, 29 Mar 2020 01:18:40 +0000

We're all in a weird time right now with COVID-19. We don't know when we will return to work, be able to leave the house or see friends. There's so much uncertainty that it's quite scary.

One thing to keep in mind is to find yourself to keep learning. To keep trying to learn new things and see where you can take yourself. One way to do this is to ramp up some of those old tutorials on how build fun things. You know, things that will keep you moving and shaking in this crazy world of code!

In the past few days I've build a YouTube clone, a book app that pulls information from Google Books and kept myself learning from new areas that always give me trouble.

It's a scary time for sure, but have some fun and find something new that can keep you moving to keep your knowledge sharp and ready.

NPM Start Problems

Jason Harrel — Sat, 21 Mar 2020 22:48:45 +0000

Lately there's been a lot of weird things going on when I go to create a new React App using create-react-app . This is either done through npm start not activating, yarn not being initiated with Yarn Start or whatever else the problems list may give me.

I would do everything the terminal said like "delete package-lock.json" "delete NPM folder" and whatever else might be going on.

One solution I found for this is inside your NPM folder in your main computer directory is to delete the webpack folder. It's not the most ideal solution, but it seems to work for me. Until today.

Today was a whole whirlwind of issues. Not only did those issues continue to come up, but deleting my webpacks folder as I mentioned from NPM didn't help either. Now as far as I know, deleting NPM extensions from the root of your computer isn't going to hurt anything as it'll be rewritten when you run yarn or npm i or npm install. Good thing huh?

Anyways something I learned to fix this problem was to give the computer a good ol' restart. Shocker huh? Then follow along the steps it gives you again and it should work.

Another work around can be to run yarn install then yarn update. That can give your project a new life. I'm not sure why this is a solution as it should update at times for you, but giving it a kick in the butt seems to help too.

This is a new one

Jason Harrel — Sat, 14 Mar 2020 18:21:09 +0000

So this is a weird situation with so much going on in the world. Being a new Bootcamp grad, I'm still in the process of finding my first coding job. I've looked at so many different areas including web design, graphic design and more multimedia focused jobs.

But with the scare of how things are continuing to grow, what is this new struggle going to present itself with? For me, constant interview reschedules or even worse yet, cancellations.

But this makes me wonder, why cancel when video conferences are such a advantage for people. Is it that people don't want to continue their work on this time?

It's a struggle for sure, on top of that, they ask for professional projects done, when they feel bootcamp projects aren't good enough.

I guess the two week quarantine they're asking people to have is going to really take its toll on everyone.

Stay safe and wash your hands everyone!

Let's talk messaging

Jason Harrel — Sun, 08 Mar 2020 07:42:40 +0000

Okay, lately I've been growing frustrated with the way my phone displays videos sent via messaging app. They come pixelated, small, gross. Because we'll, I admit, I have an Android.

So really I want to talk about what you use to help solve this if you're on an Android as well?

One thing I thought was to use Google Voice/Hangouts. But you have to get a new number and set it up that way. So it makes it a bit confusing for others on the other line. I also see GV can't send videos nor can they receive them!

I thought of WhatsApp but not everyone I know uses it.

Then comes out friend Facebook messenger. They allow you to use it as a SMS app, however what they don't tell you is it's just another app that does the texting at that point. It's not really any better.

So, I'm kind of at a loss here. Please don't tell me to get an iphone, that ship has sailed.

I currently use a OnePlus 7t Pro McLaren. It's a great phone except for the sms/mms messaging.

Custom Domains for GitHub Pages

Jason Harrel — Sun, 01 Mar 2020 03:43:54 +0000

Having finished a bootcamp, you get the chance to create a space for all your projects to shine. That's all done through a portfolio. One thing you may not realize is that GitHub gives you own single-page site. Cool huh? But one downside is that you have to use the ending of github.io. This is all fine and dandy, but what if you want to use a custom domain? Well, you can do that too!

To do this, just follow these easy steps:

Go to your repository you're wanting to use for your site. Maybe this is done through a portfolio repo, a custom built site, etc.
When the repo page loads, click on the setting tab. This will load all the different setting options you have for your chosen repo.
Scroll down until you see GitHub Pages option. Inside this section you'll see a box for Custom Domain. This is where you can enter the custom domain option you have purchased.

Click save and you're all set!

It can take up to 24 hours for everything to show up, but in my case it came up pretty quickly.

Hope this helped!

CSS Animations Round Two

Jason Harrel — Sun, 16 Feb 2020 07:22:31 +0000

Hi everyone. Last post I did I started to discuss some easy CSS animations. Well guess what! I'm back with a few more fun ones!

Shall we begin?

Let's start with Fade In

Fade in effects are coded in two steps: 1. you set the initial state and then you set the change.

The next one we'll look at is Change Color

With changing a color with a hover effect, We just need to set the div's class to "color" and specify the color we want.

This will be a fun one. We're going to let it grow!

To accomplish this, you want to use CSS's transform to enlarge it. You'll want to add

-webkit-transform: scale(number);
-ms-transform: scale(number);
transform: scale(number);

The final one I'm going to cover in this is changing the block to another shape...So square to circle!

Really, this one is simpler than you may think. You mainly just want to change the objects border-radius. So in this example we'd use:

.circle:hover
{
   border-radius: 50%; // Or whatever you'd like to change the percentage.
}

That is all for this one. I hope you all enjoyed learning some easy animation effects that you could use on your sites.

CSS Animations

Jason Harrel — Sat, 08 Feb 2020 19:51:01 +0000

Let's talk about CSS animations!

A little background, I've been in the sports Creative Services world for the last eight years. Doing everything from motion graphics, graphic design, video production. You know, the fun stuff! With going into Software Development, I've tried to look at building my foundations in many different areas. One area has been CSS, especially CSS animations. Anyways, enough about that, lets get to the fun.

This is going to be a simple blog on how to do some very easy animations, including manipulations, movement and maybe some more fun!

Let's get started!

First, a little background:

What are animations? What are CSS animations? Well, with an animation, you are looking to make something animate a certain way on the screen. It can be to change its shape, color, property, location, or just go away all together. But how do we do that? We use what's is known as @keyframes.

A keyframe is a moment in time from 0-100 that you mark on the timeline to key up when something is going to change. Will it change once or over time? That's all determined by you, the creator, to when you want it to start and end.

Let's take a look at a simple animation.

Simple animation

In the first Codepen example we are binding the animation to the

element and it will last for six seconds, it will change the background-color from green to blue.

We told the @keyframes to change by using the keywords "from" and "to" which represents 0s to however many seconds we tell it to last for. In our case, six seconds (6s).

Using percentages for time

You can also break down time even more with percentages.

As you can see here, we used 0% orange, 25% aqua, 50% blue, 100% green. you can also get more intense and figure out different percentage values. However, they all have to equal to 100%.

Changing color over time and location

The final point I'm going to cover in this simple example is that you can also change the animations color and position. Exciting, huh!?

Inside this animation we see the brick is now longer and starts out black. But what's interesting is now we tell it where on the page to move to and where to keep moving to with each keyframe percentage.

Of course we could change the positions all we want. One thing to keep in mind is if you look in the @keyframes, you'll notice a piece that says left. This is the left side of the object. If we were to change that to right, we would see that the right part of the object would reach its destination and the animation would change for that instance only.

That's all for this simple CSS animation piece. I'll be looking at moving into more advanced CSS animations soon.

The Never Ending Learning Cycle

Jason Harrel — Sun, 19 Jan 2020 01:41:09 +0000

I wanted to take a moment and just talk about how I continue to push myself in this crazy development world. Between job searching, keeping up with design trends through front-end looks, or even keeping my head above the code to keep a straight face. There is so much that can happen in a week.

I'm sure as those who are looking for a new role, their first role, or just exploring what's out there, we continue to run into the endless cycle of looking for jobs, applying for that job, reaching out to those who could be involved with that role, meeting others at meetups; it just gets tiring at times. So how do we keep our spirits up, especially when we don't hear any responses?

For myself, it's really just to continue to learn something new or continuing to push myself to keep fresh with the sites, apps or whatever I'm interested in making.

Every Friday, I tell myself to step away from the world of job hunting, and build something new. If it's something big, small, whatever it may be. I have to open VSC and make something.

I find this helps me just get the frustrations and feeling crummy about no responses out of my head and have fun. Because that's what we all got into this world for, was to have fun and create cool stuff!

So really this is for others who may be in my situation, or others who may see this and have more tips and tricks. (if you do, please leave them in the comments below) If you have cool things you want to show off, then let me see them, maybe we can work on something together!