Forem: Tahjg Dixon

What is Babel? The Popular JavaScript Compiler

Tahjg Dixon — Wed, 26 Oct 2022 20:52:49 +0000

In the world of programming, we all know when it comes to producing code, we love to find numerous ways to simplify our job. Over time we've seen many different iterations of JavaScript. All of these iterations, along with old and new features being added constantly, needs a way to combine everything into merit code. This is where Babel comes in.

Babel is a JavaScript compiler. Its a toolchahin mainly used to convert ECMAScript 2015+ into a backwards compatible version of JavaScript in current and older browsers. It's the epitome of declarative code. It transforms code, polyfills features that's missing in your environment, performs source code transformations, offers many plug-ins, and contains many consolidation tools.

Babel is needed because it provides the privilege of letting us apply the newest and latest features JavaScript has to offer without a worry of whether it works in specific browsers or not. Babel also converts JSX syntax into JavaScript. Which also contributes to why babel plays such an important role with React being such a popular frontend entity.

What does babel do?

Below is a example of Babel working its magic..

// React 

function App() {


  return (
 <div>
  <NavBar />
  <Home />
    <h1>Hello World</h1>
      <label>username:</label>
      <input type="text" placeholder="username" />
      <label>password:</label>
      <input type="password" placeholder="password" />
</div>
  )
}

The code block below is what babel does with the code block above while working under the hood. It converts our JSX code into JavaScript

//Babel Compiler

"use strict";

function App() {
  return 

/*#__PURE__*/React.createElement("div", null, 
/*#__PURE__*/React.createElement(NavBar, null),
/*#__PURE__*/React.createElement(Home, null), 
/*#__PURE__*/React.createElement("h1", null, "Hello World"), 
/*#__PURE__*/React.createElement("label", null, "username:"), 
/*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "username"
  }), 
/*#__PURE__*/React.createElement("label", null, "password:"), 
/*#__PURE__*/React.createElement("input", {
    type: "password",
    placeholder: "password"
  }));
}

Some of the syntax above is what you may see or be used to when coding in regular JavaScript. When It comes to React JSX syntax, this is no more of your worries. Babel compiles everything allowing us to do less work and make our code very much Declarative.

Sources: https://babeljs.io/docs/en/ ,
https://www.geeksforgeeks.org/reactjs-introduction-to-babel/

Picking A Software Engineering Bootcamp That Works For You

Tahjg Dixon — Wed, 12 Oct 2022 12:12:23 +0000

What is a Code Bootcamp?

Coding Bootcamps are the new norm when trying to break into the tech industry. These bootcamps are intensive and accelerated programs to help beginners develop the tech skills to gain employment in fields that are sought. These programs consist of Cybersecurity, Data Science, UI/UX, Digital Marketing, Technical Sales, and of course Software Development. The average cost of bootcamps in 2022 is $14,000 and the average starting salary after graduation from bootcamps is $69,000. These bootcamps vary in length from 6 to 28 weeks, although the average bootcamp length is 14 weeks. For Software Engineering programs, bootcamps teach students the modern and widely known programming languages used in current workplace environments so your skills can be immediately implemented. Such as JavaScript, HTML, CSS, React.js, Python, Ruby on Rails, and more.

There are bootcamps in over 85 cities throughout the US/Canada. These can be attended in-person if you live close to a location or even virtually if you don't have that luxury. The number of students with college degrees is starting to decline slowly. Also, self-taught Software Engineers are employable nowadays as well.

Choosing A Bootcamp That Matches You

So, you want to become a Software Engineer, eh? Let's deep dive into what things you have to consider when making your choice in choosing the right one for you. There's plenty of options to choose from. If you haven't done your own research, you might think every bootcamp is the same or something....

That's not the case. There are important aspects to take into consideration even before choosing the bootcamp that works for you as well. Here's an overall list of the things to start with when choosing the one that works for you:

Living Situation

What's your lifestyle? Since bootcamps are pretty high in price, do you have savings to attend a bootcamp while not working? Can you finance or pay bootcamp tuition upfront? Are you willing to take on a ISA to attend a bootcamp?

For more information on ISA's look here:(https://www.computerscience.org/bootcamps/resources/income-share-agreements-deferred-tuition/)

How Much Time Do You Want To Spend In Bootcamp?

There's cohorts that range from 14 to 28 weeks. Some are self-paced over a course of months that allow you to still work your regular job. Most will require you to commit and tune out everything during a 14 week intensive period. Consider these things if you have kids and family as well.

Are you a Self-starter/Self-Learner?

Yes, bootcamps provide the structure you may need, but don't misconstrue this structure by assuming you will be handheld all the way through. Fast-paced bootcamps are definitely swim or drown situations. You will need to spend long days and long nights consuming knowledge and getting things done on your own outside class hours. Being able to research and google is a needed skill in bootcamp.

Cirriculum

Make sure the curriculum of your desired bootcamp has modern programming languages. Look at job postings and see the languages that are in demand from employers on LinkedIn and other job boards. I suggest Full-Stack Javascript, Python, and Django as the main ones to look for when choosing a bootcamp. These language stacks are good for beginners that can build the fundamentals needed to gain employment.

Networking/Credibility

When choosing a proper bootcamp, you want to make sure that your choice has some sort of network development or career services to increase chances of employment once you graduate. Also, try reaching out to previous alumni if you can. Check and see employment statistics of previous graduates that attended the bootcamp you are leaning towards.

Choosing a bootcamp is a very important process. It's not only an investment in yourself, but an investment into the school you trust to lead you in the right direction. So don't take your decision lightly. Weigh out every factor and align everything correctly so you have no reason to not succeed.

Wishing you luck on your journey ahead!

Associations: Rails Many-to-Many Relationships

Tahjg Dixon — Wed, 05 Oct 2022 17:23:24 +0000

When programming in Rails, there is numerous relationships to learn. One of the most common is the Many-To-Many relationship. There's no question if you program in Rails, this is a association you must know. A Many-to-Many relationship consist of utilizing the has_many :through macro. For this to work correctly, you will need two models and a join model. In our example models, we will use Student, House, and Sorting_hat as our join.

Yes, today we're going to be using the world of Harry Potter as our example!

#For less confusion involving our model classes
#The Syntax for inheriting Application Record is:

class Class_name_here < ApplicationRecord 

end

Our Many-to-Many relationship goes something like this BELOW:

class Student < ApplicationRecord
  has_many :sorting_hats
  has_many :houses, through: :sorting_hats
end

class Sorting_hat < ApplicationRecord #JOIN MODEL
  belongs_to :house
  belongs_to :student
end

class House < ApplicationRecord
  has_many :sorting_hats
  has_many :students, through: :sorting_hats
end

Although there's only one sorting hat in the world of Harry Potter. For our example today, there's a sorting hat for each individual student. Our join table will always belong_to our other models individually (singular).

You can think of our join table as the bridge between the other two models. The only way for our House and Student models to interact is through the sorting_hats join model. Without our join model, there's no connection between our House and Student associations. In other words, Each Student(singular) goes through the Sorting Hats and is assigned a House. Once each Students travel through the sorting hats, you are then assigned to be apart one the amazing Hogwart Houses! Gryffindor, Hufflepuff, Ravenclaw, and.... Slytherin.

The Sorting_hat model is the join model in this instance. Lets establish each relationship here below more clearly.

The Student has many sorting_hats and many houses through sorting_hats.
The House has many sorting_hats and many students through sorting_hats.
The Sorting_hat belongs_to student (each individual student) and belongs_to House (each individual house).

Associations in ruby on rails can be very confusing. Next time you come across a bump in the road, think of a real life scenario associations can be compared to. I promise It will shed light on how simple associations can really be. For example, If you are given a set of models. These models are Doctor, Patient, and Appointments. The Doctor and Patients cannot interact without any Appointments. Which means Appointments will be our JOIN model. The JOIN model creates the Many-to-Many relationship. That is one example to think of Many-to-Many relationships. Come up with examples yourself to make things a bit more clear. Draw these relationships down on paper or create diagrams.

I hope this helped you get a better understanding about Many-To-Many Associations in rails. Happy Coding Everyone!

What Are Props & How To Pass Them in React

Tahjg Dixon — Wed, 14 Sep 2022 13:07:57 +0000

If you're becoming familiar with React, you know that coding in React breaks all of your code down into different components.
All of these different components have their own data that contributes to your application. A question of yours may be, how do you pass information from one component to another? That's when React props come into play. Often, props need to be rendered into different components to capture the functionality you need in web applications or to simply pass information through variables if needed. Props are short for properties, which are properties of an object.

In order to properly pass a prop, you need a certain syntax in which to pass it. For this, you will need a key-value pair. For every key, you need a value that holds the data that you are passing.

Look at the example below.

import react from 'react'
import Names from './Names'

function LandingPage() {

const nameOne = "Teejay"

return (

<div>
  <Names name={nameOne} />
</div>

{/* In these examples the format will be key={value} */}
{/* The key can be any name of choice */} 
{/* The value must hold the same name as the function or variable you are passing */}


)

}

The Example below is the receiving component.


export default function Names(props) {



  return (  
    <h1>Hello Everyone, My Name is {props.name}</h1>

)

}

As you see above, you are passing 'props' as an argument and using dot notation to target the key, which is 'name.' When you pass props, the component you are passing them to has to receive them as an argument first. This is the only way it can be accessed when you pass it. For example, think of it like basketball. Let's say you want a certain component to shoot the basketball. In order for this component to shoot, the basketball must be passed to it. That's how props work.

Props also have a certain flow of data. They can only be passed downward. You can pass them children and sibling components only. There are ways to send data upwards, but that is a bit of a complex concept at the moment. Once you figure out how props properly work, it's another step closer to realizing what React can unlock as far as creativity goes. I hope this helped a bit with how props are passed from component to component. Enjoy, and keep coding!

What is Imperative vs. Declarative programming?

Tahjg Dixon — Wed, 31 Aug 2022 10:28:24 +0000

Let's Decipher The Two
What is imperative programming in comparison to declarative? There are plenty of logical examples of how this works. The most popular explanation of these two is imperative is how you do something, and declarative is what you want to do. These examples can be unclear if you are new to programming or even an experienced engineer. So I would like to dive deep into the distinction between the two. Most professional engineers explain imperative programming when you think like your computer. Where declarative is making programming syntax more user-friendly. A prime example is a difference between Vanilla JavaScript and ReactJS. Let us take a look below.

This example would be how we will create a list in JavaScript and append it to the DOM. Which is looked at as
an imperative way of execution. It's made step-by-step in a specific order. Once every step is done, THEN you get your result.


// Vanilla JavaScript

addButton.addEventListener(“click”, function() {

 const input = document.getElementById(“item-input”);

 console.log(input.value);

 const list = document.getElementById(“ingredient-list”);

 const createList = document.createElement(“li”);

 const textNode = document.createTextNode(input.value);

 createList.appendChild(textNode);

 list.appendChild(listNode);

});

Now take a look at this example below. It's essentially the same way but React takes care of most of the dirty work under the hood. Here we are using useState, which is a method that returns a stateful value, and a function to update it. This syntax cuts out all of the extra steps. Compared to Vanilla JavaScript, React is the declarative syntax between the two.

//ReactJS

/*In ReactJS, the UI is already 
set to keep the entire state 
of your listed items in a JS variable.*/

const [items, setItems] = useState([“cilantro”, “beef”, “Onions”]);

/*Which will then be displayed in 
JSX by mapping (looping) over each item, 
and returning a list element for each one:*/

<ul>

   {items.map(item => (

       <li key={item}>{item}</li>

   ))}

</ul>

As you see, the same results with different steps. You now have an idea of what imperative and declarative programming are... Hopefully. So before you think this read is over, let me go on a different side of things. Let us backtrack to the title of this blog. What EXACTLY is imperative vs. declarative programming? The biggest argument is that declarative syntax is "User-Friendly." Is it? I want to argue that opinion. For example, Vanilla JS might take more initiative steps to execute a task. Although that may be true, Reacts syntax contains a fair amount of actions to perform an event listener, mapping over arrays, or whatever component you decide to make and manipulate.
Simple, in my opinion, isn't always better. Both JS and React can be utilized for specific situations. This topic can account for any other programming language as well. In some ways, you can also determine some parts of JavaScript to be declarative. Is looping through an array or using forEach to cycle through an object not being declarative? You are telling exactly what you want your program to do. I can even argue that declarative languages might disadvantage you since you can't peak under the hood like you can with imperatives. In my research, determining what imperative and declarative programming can be an open discussion. So let me know what's your opinion on the two. How would you decipher the two in your own words?