DEV Community: Shakhor Smith

Understanding hoisting in JavaScript

Shakhor Smith — Wed, 15 May 2019 01:13:01 +0000

One problem new JavaScript developers face is understanding that variables and functions are “hoisted”. While some developers intend for hoisting to happen, others are faced with unexpected results and don’t understand why.

First, what is hoisting?

// Outputs: undefined
console.log(car);
var car = 'Audi';

Hoisting by definition is to “raise or lift” and that’s exactly what JavaScript does when it runs our code. For example, JavaScript would have read our code snippet above as:

var car;

// Outputs: undefined
console.log(car);

// JavaScript sets our car variable afterwards
car = 'Audi';

As you can see our variable car is declared at the top of our file with a value set to “undefined”. Then once JavaScript gets to our variable it will reassign that variable to what we passed it.

You might be asking yourself, what about functions? Functions are hoisted as well, but with a catch. Unlike variables, functions actually hoist the whole function definition, but only if it’s a function declaration. For function expressions, the variable itself is hoisted, but the actual function definition is not.

// Outputs: 'slyderz.co'
someFunc() 

function someFunc() {
    return 'slyderz.co'
}


// Outputs: site is undefined
site();

var site = function someFunc() {
    return 'slyderz.co'
}

That's all for now 😄.
You can find me on Twitter/IG: @smithmanny

Landing Your First Developer Job

Shakhor Smith — Mon, 29 Apr 2019 06:21:42 +0000

With technology taking over and creating thousands of jobs, a lot of people still need help landing their first developer job. While none of this will guarantee you a job in 4 months, it will help push you in the right direction to finally transitioning into tech.

Study

Ok, so the first one might be a little obvious, but I still see this happening a lot. Some people are trying to land their first developer job straight out of school or a boot camp, while others are trying to transition from one field to another. While you might have 10 years of customer service experience looks good on a resume, it’s not going to be enough by itself.

Depending on what job title you’ll like to have inside of coding (It’s more than making websites) you will have to have some sort of coding experience. For me being a Full Stack Web Developer I chose to study with Team Treehouse. Team Treehouse covers multiple topics from data analytics to web developer and has even helped me land my first developer job in 4 months. Of course, that will not happen for everybody, but it is going to put you above other candidates along with your own personal brand.

Branding

I can’t stress enough how my brand and my online presence has helped me in my career. I’m going to break this topic into smaller sections because there is so much you can do to help your personal brand.

• Portfolio

A portfolio is one of the easiest things someone can put up to show off their skills. Whether you design websites, build OSS, or even a security expert, employers love being able to land on your site and see who you are and your projects. Here are some things I personally think everyone should include in their portfolio:
• Your name and desired job title
• A short introduction and an about me section
• Projects (Your best 3 projects)
• Contact section

• Projects

Having a section on your portfolio website or even a YouTube channel for your projects is a great way to let your skills speak for themselves. Instead of jumping from one course to another, try expanding the project you’ve just built.

Networking

My last advice for landing your first developer job is networking. There are plenty of ways you can network. If you haven’t guessed already social media is a great place to network and meet new people. Being that I’m a POC who works in technology, I myself have joined #BlackTechTwitter and have been able to connect and meet with a lot of great individuals. I also have joined many meetups on the app Meetups which include plenty of free workshops available to the public.

Website Redesign V2

Shakhor Smith — Fri, 23 Nov 2018 06:35:34 +0000

With 2018 coming to an end soon I was able to release V2 of my website over Thanksgiving holiday. Coincidentally this is also my second year as a developer so I'll be able to keep these releases in sync with my years of experience. What’s new? Everything! V2 was completely redesigned from the ground up with a little design inspiration from Tania Rascia. I switched from using create-react-app to Gatsby. The reason for this switch was to keep my blog on Github via Markdown files and also take advantage of Gatsby blazing fast speed with SSR. As you can see from the results below I was able to increase each area on the lighthouse test.

With this version release of my website, I wanted to switch the focus from learning more about me to more about programming by putting the blog posts front and center. With this change, people would immediately be focused on my new blog posts and are able to learn something new within the first few seconds of visiting my website.

Another slight change I made was the color scheme. I still am not completely satisfied with my color scheme, but I wanted to go for a Miami Dolphins theme. I originally planned on releasing this site with the option of choosing between a light and dark theme, but because of a bug with styled-components and Gatsby, I postponed this feature until further notice. Curious as to what else I used to build this site? Well let’s see:

Gatsby
Hosting & DNS: Netlify
CSS: styled-components
Analytics: Google Analytics (looking for free alternatives 🤔)
Blog: Markdown files hosted on Github
Icons: Font Awesome

Deploy Your React App To Heroku

Shakhor Smith — Fri, 23 Mar 2018 19:27:22 +0000

Before you jump into this tutorial you do need to have a few things installed first before you can start.

🚨If your goal is to combine React UI + API (Node, Ruby, Python…) into a single app, then this tutorial is not the answer.

Requirements:

Node / NPM — Click the link and download the installer
Git — Click the link and download the installer
Heroku CLI — Click the link and download the installer

Steps:

Sign up for Heroku
Setup our React App for deployment
Create Heroku git repository

Step 1 — Sign up For Heroku

Visit Heroku for free hosting

This step explains itself, we need to sign up for Heroku before we can do any deployment. So head over to Heroku and sign up. Once you signed up make sure you head over to your email and confirm your account.

Step 2 — Setup React App

Open up your React app (I’m using create-react-app) and open up your package.json file. If your using create-react-app we’re going to add a new object called engines. Inside of our engines object, we need to specify the versions for npm and node. To do this open up your terminal and type in:

npm -v

Press enter

node -v

Press enter

Your versions may be different than mine, but that's fine. Once you specified your engine versions save your file.

Step 3 — Create Heroku Git Repository

With your terminal still open navigate to your React app folder and change directory into it. Now we need to connect our project to Heroku. If you haven’t already installed the Heroku CLI. To make sure it’s installed correctly run this command:

heroku --version

You should see your Heroku CLI version. Once that is installed we need to setup up Heroku git repository by running these commands:

heroku login (Enter your Heroku credentials)
git init
git add .
git commit -m “initial commit”
heroku create (You should see two links after running this command. Copy the second one)
git remote add heroku PASTE THE LINK YOU JUST COPIED
git push heroku master

Once you run the last command Heroku will start to run some tests on your app. If everything goes right you should see a successful deploy message. Now you’re able to navigate to your app by running:

heroku open

Anytime you make changes to your app and want to re-deploy the only commands you need to run are:

git add .
git commit -m “any message goes here”
git push heroku master

Easier Method 😁

Now that I made you go through all of that process, there is an easier method if you use Github. All you have to do is log into your Heroku account; click “new” then “create new app” and give your app a name. After clicking create you should be greeted with a dashboard for the app you just created. Navigate to the deploy tab and sync your Github account with Heroku. After syncing your Github account and can search for the repository you want to sync with Heroku by scrolling down to “App connected to Github” section and searching for the repository you want to sync. You can also set up automatic deployment, so every time you push to the master branch Heroku will rebuild your app for you.

Enjoy your free hosting!

Follow me on social media:

Twitter
Instagram | Personal
Instagram | Developer
Linkedin
Youtube

How To Make A Blog With React & GraphQL

Shakhor Smith — Mon, 19 Mar 2018 01:26:43 +0000

After hearing all the hype about GraphQL and why developers should start learning it, I finally decided to do some research. I’m not going to go into to much detail, but GraphQL is a query language for your API. If you want to read more about it visit the official link here. So after reading, I came across a headless-cms that uses GraphQL instead of Rest and thought this would be the best chance for me to really try it out. We’re going to build a blog with GrapgQL!

Requirements:

create-react-app
GraphCMS account (Free)

Step 1 — Setup GraphCMS:

Before we start doing any coding, you need to sign up for a free GraphCMS account. We will be using GraphCMS to handle our backend for us. After signing up we’re going to make a new project. Click on that project and you’ll be greeted with the dashboard page. Don’t worry about everything right now, the first thing we need to do is setup a new model. Click “Models” on the side nav bar, then click “Add Content Model” at the top of the page. The only field we need to worry about is display name. Enter “Post” as the display name and the API ID should autofill itself; once your done click save.

Adding Fields:

You should now see a new button that says “Add Field” under your Post Model. We’re going to add four fields to make a basic blog: Image, Title, Description, and Slug.

Adding Image:

Click “Add Field”
Click “Asset” then “Asset Grid”
Give it the name “Image”
Click next then save

Adding Title:

Click “Add Field”
Click “Text” then “Single Line”
Give it the name “Title”
Click next then save

Adding Description:

Click “Add Field”
Click “Text” then “Rich Text”
Give it the name “Description”
Click next then save

Adding Slug:

Click “Add Field”
Click “Text” then “Slug”
Give it the name “Slug”
Click next then save

Giving API access:

Once we’re finished with our model, we need to give our API access to read our fields. Still, inside your Models view go to Post and click on “R”. Make sure “R” is clicked for every field and that “connect” is selected for Image. Make sure to do the same for Asset as well.

Creating Dummy Data:

The last step for us inside of our GraphQL is to create some dummy data to show on our front-end. Click on Content then Post on the left side nav bar. You should see a plus icon on the top left. Click it and fill in the data. For the Slug field you can just put in the Title name with dashes instead of spaces (This is a test = This-is-a-test).

Step 2 — Create New React Project:

If you do not have creact-react-app installed run this command

npm i -g create-react-app

Now we can finally code our blog. I did not design this blog to be amazing, so the design is bad, but it gets the job done.

Navigate to where you want to store this project and create a new react project. I’m using create-react-app and I like to keep my projects inside a folder called projects(makes sense). I’m going to call this project “blog”.

Open up your terminal and type:

create-react-app blog

then press enter and let create-react-app create our project for us.

Once it’s finished you need to change directory into your project.

cd blog

Before we can run our App we need to install a few packages.

npm i react-router-dom react-apollo graphql-tag apollo-client apollo-link-http apollo-cache-inmemory

Now we can finally start our App!

npm start

Step 3 — Start Coding

Now it’s time for the fun part, coding our React project! I’m trying to keep this project as simple as possible, so I’m just going to throw all of my files inside the root of my src folder. Usually, I’ll create a new folder for components, and etc, but we’re not doing that today because it’s a very small App.

So with our project running, let's start creating our components.

Index.js

Open up your Index.js file inside your src folder and change it to this:

For the const variable API we need to get your GraphCMS API key. Head over back to GraphCMS website and login. Once logged in scroll down to settings. Inside your settings tab scroll down until you see Endpoints and copy your Simple Endpoint API.

Header Component

Inside your src folder create a new file called Header.js and paste this code:

Landing Component

Make a new file in src folder called Landing.js and paste this code, I’ll explain it later.

That was a lot of code so let me explain it a little. We created a new component called Landing and imported a few packages.

react-router-dom (To use the Link to switch between our component views)
react-apollo (Used to get our data from GraphCMS API)
graphql-tag (Used to get our data from GraphCMS API)

The const variable allPosts is were we are calling to our database to get all of our posts and its fields (id, title, description, and slug) in the form of an array, then we’re passing that to our Landing.js data object. The if statement for loading is something that Apollo looks for. If the query is not finished “loading” is set to true and we return

Once Apollo finishes with the query loading is set to false and then we render all of our blog posts.

Post Component

Our Post Component is going to be the same thing just a little different since we only want the post that we clicked on. How we handle this is from the Landing Component when we click on the “read more” button:

If our slug was “first-post” the Link tag would navigate the user to localhost/post/first-post. This is important because later inside of out Post component we’re going to get the slug from the URL.

Create a new file called Post.js and paste this code in:

Like I said before you can see that we are getting the slug params from the variables object. This code is basically saying we are only looking for a post that matches slug param from the URL.

App Component

Open up our App.js file and delete everything and paste this code. Don’t worry if you don’t know what this code is doing, it’s just setting up our routes for us. You can learn more here.

Step 4 — Styling our App (Sort of)

This is something hopefully everybody knows if you’re reading this tutorial, if not stop and go learn the basics first…for real. Again to keep this tutorial simple I just posted everything inside my App.css file.

Enjoy your React and GraphQL blog!

You can view the full code here. (I probably will be updating this App later to make it look more appealing and structuring the code)

Follow me on social media:
Twitter
Instagram | Personal
Instagram | Developer
Linkedin
Youtube

How I Became A Web Developer in 4 Months

Shakhor Smith — Sat, 17 Mar 2018 06:17:38 +0000

Just like the title says, I was able to land my first web developer position in only 4 months of studying. Well to be honest maybe a little more than 4 months. It all started back in my junior year of high school. I took my first computer class which was “HTML/CSS Introduction”. This was back in 2010 so I’m not sure if responsive design was already out, but I do know that we didn’t learn it. This class was just going over the basics of web development, we never built anything “amazing” just some plain simple websites with a little of styling. I loved the class, but unfortunately, I stopped programming after I completed the class.

Fast forward to 2016 I was working at Publix warehouse as an order selector. Life was good, I was making decent money and had full benefits (This was my first serious job). Until they announced that they were relocating to Alabama. I didn’t see myself retiring as a warehouse worker anyway, so I let my managers know that I wouldn’t be relocating with them. We had until the end of December before the location transfer. Well fortunately for me I left in November and signed up Team Treehouse. It was actually awkward because when I left my job, I just randomly seen an ad for Front-End Web Development, so I signed up for the free 7-day trial.

After completing my 7-day trial, I was hooked on web development again. So upgraded from the trial to the actual program. It was like I had an addiction, I couldn’t stop learning. Every day I was spending 3+ hours studying. Sometimes I would stay up all night completing courses, go to sleep for a few hours, wake up and do it all again.

So from November 2016 to February 2017, I was able to complete Team Treehouse Front-End Developer Stack. Once I completed it, I felt confident enough to start working on some projects and my portfolio. I wish that I still have my first portfolio design to remind myself how far I came, but I didn’t know git at the time 🤦🏾‍. It was nothing special though, it was a basic portfolio page built with HTML5, CSS3, Bootstrap, and a single line of jQuery. And to be honest I was proud af for my accomplishment that I started applying for jobs. After sending multiple applications to companies through indeed, luckily I was able to land an interview for a small company.

I still remember the day I got a call back for my first developer interview. I couldn’t believe it. Just three months ago I was a warehouse worker trying to figure out what I’m going to do with my life. Walking into the interview I was nervous. I couldn’t stop sweating, I started getting chills through my body, and I was sweating so much I felt like I starting smelling. I finally sat down with the manager of the office and we start the conversation about me. She wanted to get to know me better and what I knew and didn’t know. So I was honest with her, I mean she already knew because she viewed my resume. After telling her I was self-taught and just started, she ended up telling me more about the company and what my role would be. When we got through talking she introduced me to the IT manager and the CEO…did I just get the job?

Well, come to find out the already had their mind set on hiring me because of my portfolio. They knew that I had just started and wanted someone that knew PHP, but because of my determination and how quickly I learned that offered me the position on the spot!

So my advice to new developers out their who feel lost and think they are wasting their time, you’re not. Keep on studying and perfecting your craft, build some projects, setup a portfolio, and network. Just don’t give up because it will all be worth it in the end.

Follow me on social media:
Twitter
Personal Instagram
Developer Instagram
Linkedin
Youtube