DEV Community: Paul Bosorogan

And I OOP (Object-oriented Programming)

Paul Bosorogan — Sat, 13 Apr 2024 22:43:34 +0000

Hi there! Welcome back to my blog!

If you have been following along you already know the drill, but if you are new, hi! My name is Paul and I am a former student with Flatiron School who is on a journey of discovery and.. job hunting.

As the title suggests we will be talking about OOP or object-oriented programming. What is OOP? How can we use it? Is it useful? To find the answers to these questions, read along.

Disclaimer

I wanted to give a node to the 2019 Meme winner 'And I oop' Jasmine Masters.
Source

What is OOP?

Object-oriented programming aka OOP is a fundamental programming model for other programming languages such as C++ and Java.
The OOP is divided in 3 strong concepts: classes and instances, inheritance, and encapsulation.

These concepts are pretty familiar with other subjects we've tackled on this blog such as Ruby. The model behind object-oriented programming is a collection of objects. Each object representing a particular aspect of a system. Objects are a combination of functions (or as we remember them from Ruby: methods) and data. Because the object maintains its own private internal state, the system doesn't have to care what might happen inside the object.

Classes and instances

When we think about the types of objects we want to include in our system, we create abstract definitions. For example, if you are modeling a university, the professors will represent some objects. Every object is represented by some properties in common: having a name and teaching a subject. Furthermore, a professor can grade papers/projects and can introduce themselves at the beginning of every year.

That would make the Professor a class in our system. The pseudocode would look like this:
class Professor properties name teaches methods grade(paper) introduceSelf()
Source

We defined the Professor class with 2 properties (name and teaches) and 2 methods( grade() to grade papers and introduceSelf() to introduce themselves)

Solely by itself, a class won't do much. It will act as a blueprint for creating other objects from the same type. Each professor is created is an instance of the Professor class. The function responsible for creating instances it's called constructor. The values passed to the constructor represent the internal state we want to initialize in the new instance. Example:

class Professor properties name teaches constructor Professor(name, teaches) methods grade(paper) introduceSelf()
Source

With the constructor in place, let's create some professors!
P.S programming languages mark the signal for calling a constructor with new.


stephenie = new Professor("Stephenie", "Biology")
adam = new Professor("Adam", "History")

stephenie.teaches; // 'Biology'
stephenie.introduceSelf(); //'My name is prof. Stephenie and I will be your Biology professor.' 

adam.teaches; // 'History'
adam.introduceSelf(); //'My name is prof. Adam and I will be your History professor.'

Source
The command above creates 2 new objects representing instances of the Professor class! How fun is that?!

Inheritance

Who else goes to university? Oh yes! Students. What separates students from professors, is that they can't grade (officially) papers, they don't teach any particular subject and they are usually part of a graduation year.
But, there are some aspects that are common. They also have a name and want to introduce themselves. So the class would look something like this:
class Student properties name year constructor Student(name, year) //to be able to create instances methods introduceSelf()

Now we can notice that we are repeating ourselves and as respected software engineers we have to keep it D-R-Y! (Don't Repeat Yourself). If only we could find a way to write a code that represents both students and professors on the same kind of level.. Hmm. What about creating a new class called Person where we set the common properties:

`class Person
properties
name
constructor
Person(name)
methods
introduceSelf()

class Professor: extends Person
properties
teaches
constructor
Professor(name, teaches)
methods
grade(paper)
introduceSelf()

class Student : extends Person
properties
year
constructor
Student(name, year)
methods
introduceSelf()`

The Person became a superclass or parent class for both Professor and Student. The same way around, Student and Professor are subclasses or child classes of Person.

The introduceSelf() method is repeating itself in all classes as we need to differentiate the type. For example

susan = new Professor("Susan", "Drama")
susan.introduceSelf(); // 'My name is prof. Susan and I will be your Drama professor.'

john = new Student("John",2)
john.introduceSelf(); // "My name is John and I'm in my 2nd year.'

dan = new Person("Dan")
dan.introduceSelf(); // "My name is Dan."

Source

Encapsulation

Due to its private internal state, the object's internal methods cannot be accessed by other objects. Keeping the internal state of an object private and the clear division from the public interface and private state is called encapsulation.

Let's say the students can study a certain subject only in their 2rd year or above, how can we make sure we have a system that checks the student's year?

We can pass a method in the Student objects with the logic:
class Student : extends Person properties year constructor Student(name, year) methods introduceSelf() canStudyLiterature() {return this.year > 1 }

if (student.canStudyLiterature()){
  //allow the student into the class

Source

Tip!
To be sure other code can't access the object's internal state, we can use the property called private. This will throw an error if some code outside the object tries to access it.

`class Student : extends Person
properties
private year
constructor
Student(name, year)
methods
introduceSelf()
canStudyLiterature() {return this.year > 1 }

student = new Student('Dana', 1)
student.year // error: 'year' is a private property of Student
`

How fun is that?!

Summary

In this blog, we went over the basics of object-oriented programming. I hope you enjoyed this and found some parts useful. It's a learning experience for us all and if you want to learn more go ahead to mdn web docs and get more details.

Till next time, happy coding!

Action Mailer ✉️- The Saga

Paul Bosorogan — Sun, 26 Nov 2023 23:33:15 +0000

Hi there! Welcome back to my channel!

If you've been following along you already know the drill, but if you're new, hello! My name is Paul and I am a future former student with Flatiron School who was on a journey to learn the basics of software engineering.

And what a journey! We learned together the pillars of web development (see blog no. 1), we later found ways to improve the functionality (responsive single page application) and visuals of simple HTML, CSS and vanilla JavaScript with React and the magic of the components (see blog no. 2).
After we managed to understand the frontend side, we dug deeper wink-wink and we entered the world of Ruby (see blog no. 3). Going forward we learned how to "tame" this beast with Rails (see blog no. 4) and how we can put it to good use by either building a full-stack application or just the backend.

For the current blog post, I have chosen to talk about a new subject that was not included in the Flatiron School curriculum.

Action Mailer ✉️

What is Action Mailer? Ruby's little gem that helps us to send emails from within the application using the mailers classes and views. If you've been juggling with Ruby and Rails for a while, then you must be very familiar with models and controllers. Well, the mailers are very similar to controllers!

Mailers inherit from the class ActionMailer::Base and can be found in the app/mailers folder.

Ready? Set! Mail!

One very easy way to generate a mailer is by running the following command:

Source

Now of course there are plenty of other materials on this platform and others that take you step by step with instructions on how to use it. But, this blog is intended to give my personal experiences following them.

The official documentation can be found here: Action Mailer Basics.

Writing the email template

Alrighty, lets get going! Now that we have the application, we might want to send an email after a new user has registered (as most websites and applications do).

How do we do that?

Inside the class UserMailer we add the following code:

class UserMailer < ApplicationMailer
  default from: 'example@gmail.com'

  def welcome_email
    @user = params[:user]
    mail(to: @user.email, subject: 'Welcome to My Awesome Site')
  end
end

Legend:

default - is a method that sets the default value for all emails sent from this mailer.
mail - is the actual method that creates the email message.

Disclaimer
After looking over many materials, blogs and google search - it is very indicated to use a valid email address for this! Otherwise we won't be able to use it.

Further, we have to create the mailer view a.k.a the mail template. Inside the app/views/user_mailer* we will create a file welcome_email.html.erb. It should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1>Welcome to example.com, <%= @user.name %></h1>
    <p>
      You have successfully signed up to example.com,
      your username is: <%= @user.login %>.<br>
    </p>
    <p>
      To login to the site, just follow this link: <%= @url %>.
    </p>
    <p>Thanks for joining and have a great day!</p>
  </body>
</html>

Source

Attention
The file name must match the method name inside the UserMailer.
P.S Feel free to change text as required.

Another best practice is to create a mirrored template but as a text. Not all clients like HTML emails so sending both can save us some headaches.

For that we will go ahead and create a new file welcome_email.text.erb in the same folder app/views/user_mailer with the following text:

You have successfully signed up to example.com,
your username is: <%= @user.login %>.

To login to the site, just follow this link: <%= @url %>.

Thanks for joining and have a great day!

Now, let's take a look at the folder app/views/layouts. We will be adding 2 files: ** mailer.html.erb** and mailer.text.erb.

Inside the html type add:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      /* Email styles need to be inline */
    </style>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

..and inside the text:

<%= yield %>

Perfect!

Paging Mailer

We will call the mailer from inside the UserController by having the following code:

class UsersController < ApplicationController

  # POST /users or /users.json
  def create
    @user = User.new(user_params)
    if @user.save
        # Tell the UserMailer to send a welcome email after save
        UserMailer.with(user: @user).welcome_email.deliver_now
         session[:user_id] = @user.id
         render json: @user, status: created
      else
         render json: {errors: @user.errors.full_messages}, status: :unprocessable_entity
      end
   end
end

Source

Preview the email

It's really helpful (and highly advised) to use console in your coding process. For frontend we use console.log and for the backend we use rail c. But it would be nice to see the email as well, right?

Good news! We can.

If we use the generator for the mailer (and we don't add --no-test-framework) we will notice we have an additional folder test/mailers/previews/user_mailer_preview.rb.

Inside this file we will be adding this block of code:

class UserMailerPreview < ActionMailer::Preview
  def welcome_email
    UserMailer.with(user: User.first).welcome_email
  end
end

Now comes the fun part! And by fun I mean my own experience to try and make it work..

Inside the config/application.rb folder make sure to uncomment or add the line require "action_mailer/railtie", then a few scrolls below inside the Application class add the line: config.action_mailer.preview_paths << "#{Rails.root}/lib/mailer_previews".

Jumping from the application.rb folder into the config/environments/development.rb we will have the following addition:

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
address:              'smtp.gmail.com',
port:                 587,
domain:               'example.com',
user_name:            'example@gmail.com',
password:             '**App Password**',
authentication:       'plain',
enable_starttls_auto: true }

Disclaimer

To configure your Mailer with GMAIL I suggest reading more from Tuyen Ha's blog .
Be sure to have a working email address (don't forget the @gmail.com and paste the password as given from the Google Account security setting - see below for details).
Absolutely follow this tutorial on how to keep your information safe in the development environment: Gmail Deployment + Safety instructions

Now. Hoping we have everything set and in place we can go to http://localhost:3000/rails/mailers and we should be able to see the following:

As HTML

..and as text

Ta-daa!

Conclusion

I really hope this works out and has the Action Mailer up and running! As with every other subject, these posts barely scratch the surface. There are so many ways to use it and as many ways to play around with them.

P.S. if you find yourself in a sticky situation and find a solution, share your experience with your fellow coders because sharing is caring!

Until next time, Happy coding!

“Rails of the unexpected”

Paul Bosorogan — Sat, 19 Aug 2023 16:45:26 +0000

Hello and welcome (back) to my coding journey!

For those of you who just happen to stumble upon this post.. Hi! My name is Paul and I am currently a student with Flatiron School on a journey to learn the basics of software engineering.

On my last blog post, I opened the conversation with Ruby and it's gems. For this blog topic, I will go ahed to add to the subject and show you the magic of.. as you could guess by the title - Rails!

Source

What is Rails?

Rails or as you'll commonly find it in your searches, Ruby on Rails is a popular open-source web framework that provides the web developers with everything they need in order to build a functional application!

As a little history behind this programming language - Ruby on Rails was created in 2003 by David Heinemeier Hansson.

The purpose of this creation was every developer's dream for their code: to be DRY (a.k.a Don't-Repeat-Yourself). David noticed that as he was building applications with Ruby, he was copying and pasting a lot of code blocks. So by using Rails, we don't have to worry about the small details, a forgotten file or a typo in your folders, we just focus on the 'harder' parts.

Why do we need a framework?

I heard this analogy in school and I find it very compelling: why do we use frameworks? Imagine you're interested in a surround sound in your home. What's the first step you would take?

Spend time researching how to build a speaker, learn how to transfer the sounds through wires and create all the components in order to put together a surround sound?? I would think not. You will probably save yourself the time and effort and will go with the option to purchase a system from an organization that already had done the previous steps and had put in the time and energy into researching and developing the system for others to enjoy.

The pillars of Ruby on Rails

As previously mentioned, Ruby on Rails is a web framework. Taken any application out there is unique in its own way, there are certain parts that can be found in every application (ex: database links, routes etc.). If you use a good web framework you have the resources to build new applications without having to write the base functionality over and over for each project.

Ruby on Rails is an open-source library, therefore you can always check the work that goes 'under the hood'. If we were to 'dissect' this programming language, we'd come to realize that Ruby on Rails is in fact a Ruby gem 💎, as it uses Ruby code libraries.

Rails is using the MVC (Model-View-Controller) architecture pattern. MVC has a specific set of conventions for building the logic for the application managing the code flow as presented in the image below:

Source

If you are interested in how this design pattern works and the importance of MVC, you can read more here.

The Rails 'philosophy' - an opinionated software.
What does that mean? Rails gives us the benefit of skipping the decision-making step of how to organize our folder structure, how to name the files and in what order to position them. Also, Rails provides abstraction code that helps us speed up the coding process.

Applications built using Ruby on Rails

Source

Let's get to coding!

Now that we've seen a brief description on what Ruby on Rails is and what websites are built using this language, let's try to run some code of our own!

So, let's begin by typing the magic words in the terminal:

gem install rails

This will install Rails globally on your computer and after this you'll be ready to use it from the terminal. Now that the gem is installed, you can start building Rails applications!

Naming conventions
When building a Rails application the name of the app should be written in lowercase letters that are separated by a "-" (the same way as it applies with Ruby for naming methods, variable, classes etc.). Best practice advise: keep it nice and simple!

Creating a Rails application

To start the application you will type the following in the terminal:
rails new antique-shop --skip-javascript

‼️ Disclaimer ‼️
The --skip-javascript part just tells Rails that we won't be using JavaScript in our application.

After typing in the magic formula, in a few moments everything you need in order to create your backend application will be installed.
Once the installation is completed, you'll change into your Rails directory and open your text editor.
cd antique-shop code .

After your text editor will open, you should be able to see the following structure:

There are a lot of folders and files in there! But don't be scared! Today you'll be working with the app and the config folders.

To be able to open the Rails server you'll need to type the command rails s and your terminal should display the following message:

Now you can verify if the server is working by navigating to your browser and entering: http://localhost:3000/

⚠️ Disclaimer ⚠️
Now, if you're as lucky as I am, you'll run into some errors with the msgpack.

Here's how to fix it
Open a new terminal, make sure running arch outputs arm64

Comment all the lines of your Gemfile ( command ⌘ + '/' )
Run bundle clean --force
Revert commenting the lines of your Gemfile
Install your gems: bundle install

After this, your rails s command should work just fine and show the message above.
Source

Moving forward
Let's check our antiques in our shop! You can type in http://localhost:3000/antiques in our browser and.. uh oh. An error!

Oh no! No worries tho! You can fix it. The program is nice enough to let you know you've missed some steps and instead of giving back nothing, it suggests what steps you can take to solve the issue.

In order to fix this, you need to define a route in your Rails app. Add the following in the config/routes.rb file:

Now, you're going to go in the app/controllers.rb folder and create an antiques_controller.rb file with the following code:

This tells our app that when there is a GET request, in the /antiques path it should run the #index method in the AntiquesController leading to this response in your browser:

Yay! You've just completed a full request-response cycle in Rails!
P.S To turn off the server, simply press the Control + C combo.

Shortcuts in Rails

There are a lot of gems, shortcuts and macros that you could use in Rails. Like remember when I said there are some shortcuts that can help you speed things up? Well, let me show you what I meant.

Above you had to go and manually create a new file in the controllers folder.

Boo!

Why go through all that when you could simply just type the following in your terminal...

rails g controller Antiques --no-test-framework

...and get this!

‼️ Disclaimer ‼️
The --no-test-framework part just tells Rails to not add any spec files for testing and g is a shortcut for generate.

I know, right?! And this is just the tip of the iceberg!

Final thoughts

As always, I am happy to take you along the way on my coding journey and I sure hope this subject has sparked some interest in your backend programming quest as it did for me.

Until next time, happy coding!

Shine bright like a.. Ruby 💎

Paul Bosorogan — Mon, 29 May 2023 18:05:54 +0000

Hello and welcome to my coding journey!

For those of you who have seen my previous posts, welcome back! I hope you enjoy and find this one useful. For those of you who just happen to stumble upon this post, hi! My name is Paul and I am currently a student with Flatiron School on a journey to learn the basics of software engineering.

As you can tell by the title, this post will touch subjects as Ruby, gems and a ✨sprinkle✨ of SQLite.

Source

If you've followed along you know I have tapped into the basics of vanilla JavaScript and React. What are those useful for? They allow us to create the 'visuals' or the client-side of a web application. What does Ruby bring to the table? It helps us build the backend part of our application or the server-side.

You may ask 'But Paul, how many languages are you supposed to learn in order to build websites?'. And that is a valid question! If it feels like a lot to learn, it's probably because it is. No lie. But, a good lesson we are thought is that a good developer knows how to use Google to his advantage. Learning a new language may sound scary at first, but it shouldn't be the first thought. If you did it once, you can do it again.

What is Ruby? 💎

Ruby is a programming language that was created by Yukihiro “Matz” Matsumoto in 1995. We can think of Ruby and mix of Perl, Smalltalk, Eiffel, Ada, and Lisp. His goal was trying to make Ruby feel natural, not simple.

At its core, Ruby is a dynamic object-oriented programming language and due to it's flexibility, we can build different programs (not just web applications) such as:

Command line interfaces
Web servers
Games
Web scrapers

How to write and run Ruby

A different aspect of Ruby is that we won't be able to run the code in the browser as we used to with JS and React. We will be using our terminal.

To get started we need to a create a new file and add the .rb extension.
For example:

That's right. Both work! It is up to us to choose if you want to use the parentheses or not.
However, as an unwritten rule, most Ruby developers prefer the first syntax as it's more pleasant to look at 😊.

Now to run this code, we need to type ruby test.rb (or the directory you're in, for example, my file is in lib so therefor the command is ruby lib/test.rb)

And voila! We just ran our first Ruby application!

Data types in Ruby

Just like in JavaScript, we have the same types of data we work with:

strings
numbers
booleans
nil (aka null in JS)
arrays
hashes (aka objects in JS)

Functions aka methods

In JavaScript we learned about functions: lowercase for vanilla Javascript and PascalCase for React. In Ruby we call them methods. And yes, we can either write our own or we can use the built in methods! (simply add .methods at the end of your method and see the full list of available methods you can use for your instance.
How cool is that?!

Example:

And the results we're getting is -->

In order to write a method, we will be writing the following:

Classes and instances

In order to create a class, we simply type:

class Test end

What is a class? It's a the blueprint, template or 'a small factory' that creates more objects with the same characteristics. What method create more individual objects? .new

By using .new we create new instances (with it's own unique ID).

_For this example we will be using a Ruby built in REPL called 'pry'. Add require 'pry' at the top of your file and then binding.pry at the end of your code. _

Example:

How amazing is that?

Gems

As we discussed with React, we are not the first developers therefor there is no need to reinvent the wheel. Programmers before us have been kind enough to save code that we can use to make our lives easier in libraries. Ruby is no exception. We can use templates of code called gems.

SQL

When we are trying to develop a web application, we usually use data to present it or we take the user's input and store that data.

How can we store data? Well, if the answer begins with data and ends with bases, then you got that right! Databases!

One aid we have in storing data is SQL. This won't be the tool we use to write a big complex application, but we can use it to interact with that database.

SQL (Structured Query Language) - pronounced 'sequel' or 'S-Q-L' - is the language responsible for managing data in databases. The con is for that we use it for only talking to the database.

PRO TIP: If your laptop is on OSX version 10.4 or above, chances are you already have SQLite installed. To double check, run the command which sqlite3 and if you get positive response, you are good to go! Thanks Apple!

The database files are ending in .db extension and you can open them in your terminal by running filename.db sqlite3.

A few of the SQL commands are:

CREATE TABLE
ALTER TABLE
DROP TABLE

For example, if we want to create a table we would do the following:

run sqlite 3 filename.db
CREATE TABLE table_name ( id INTEGER **PRIMARY KEY***, name STRING, age INTEGER);

And voila! We have created a SQLite table.

*****Every table we create must include a primary key to be indexed, just like an Excel Spreadsheet.

Final thoughts

There is so much more to read and learn about this! In this post, I am barely scratching the surface, but I hope it will spark your interest to dive deeper into it and discover the wonders of Ruby, gems and SQLite!

Until next time, happy coding!

Would you REACT? 👨‍💻

Paul Bosorogan — Sat, 04 Mar 2023 22:09:52 +0000

Hi and, if you have followed along, welcome back! to my journey of babyStepsIntoCoding! If you're new here... Hi there! My name is Paul and I am currently a student with Flatiron School on my way to become a software engineer.

In this blog post, we will cover some information regarding React. I know what you may be thinking: "but Paul, there are so many informational blogs and YouTube tutorials out there.. what can you bring new to the table??". You would be correct. The internet has plenty of useful information for a new web developer to grasp on. But, I hope by taking the time to explain this to you, I will feel more confident in my knowledge and you will learn something new by the end of it. A win-win situation!

Source

What is React?

React has become of one the most popular frameworks in the front end community these past years, but other popular frameworks worth mentioning are: Next.js, Angular, Vue.js, Gatsby.

Some sources mention that React is not a framework, technically, but more of a library. While the debate goes on, one thing is sure: React will allow you to build large applications fast and without too much sweat! How fun is that!

Here are some fun facts about React

React was first released in 2013 and it was created by Jordan Walke.
Is maintained by Facebook
You can find updates and new information about React here
React has over 100k stars on GitHub.
It is used for thousands of enterprise apps and mobile apps

Source

Why is React popular? Where is it used?

A few examples of websites that use React:

How to think in React

You will be amazed to realize that React is in fact a happy combination of HTML and JavaScript called JSX. So, all you learned from vanilla JavaScript can be very useful while learning React!

Arrays
Objects
Destructuring
Iteration methods (.filter(), .map())
Fetch (C.R.U.D - methods)
Event listeners
Callbacks

The main advantage of React is that you will be able to divide your code into separate components, similar to building blocks! Why is this an advantage? Because the components give us the opportunity to read the code easier, each component is independent and we can reuse them along the application how many times we wish for! Now that's a great way to stay D-R-Y! aka Don't-Repeat-Yourself

Another difference of React is the way we use expressions: declarative and imperative (DOM).

An imperative expression will describe every action in a very specific way and how the program should go step by step. When a declarative expression will describe how the process should look like or what the end result should be, but how to get there? It's up the program.

Let's create a DOM element to observe the difference between these 2 expressions.

const greeting = document.createElement('h1') greeting.textContent="Hello World!" greeting.className="main" const header = document.querySelector('header') header.append(greeting)

That code takes a lot of lines to write for a simple result. Let's see how React can help us by using JSX syntax.

const greeting = <h1 className="main">Hello World!</h1> ReactDOM.render(greeting, document.querySelector("header"))

Less code for the same result?? Pretty awesome!

How can I use React?

React is basically a JavaScript library for creating front end applications, UI's (user interfaces).
To be able to use React, go on your terminal and create your directory mkdir my-project and change directory cd my-project. Now to run React you need to type npx create-react-app my-react-app and wait for the package to install. This will offer the preconfigured, default project. To run, type in npm start and you should see the react application page in your browser.

npm is a package manager for JavaScript.
What does that mean?
It means it allows you to install preexisting blocks of code to help in your projects. Thanks to the hard work of web developers before us, we can make sure to skip duplicate code and make our lives easier!

If you want to learn more about npm I suggest reading more here.

You mentioned components, how do they look like?

React let's you define components as classes or functions.

Note: In order to differentiate between a vanilla JavaScript function and a React function, you need to use capital letters.

The React functions always return JSX and tells our program how everything should look like.

Let's see an example for a simple blog application with a title and a content.

First you need to create the title component.

function Title() {
 return (
  <div>
    <h1>A Cooking Blog</h1>
  </div>
 );
}

Now you go ahead and create the content component.

function Content(){
 return (
 <div>
  <p> Welcome to my cooking blog! Here you may find some of my
      favorite recipes that I hope will inspire you to start cooking today! </p>
 </div>
);
}

After this, you can go ahead and put everything together:

function Blog() {
  return (
    <div>
      <Title />
      <Content />
    </div>
  );
}

In this example the Blog component is at the top level and wraps both Title and Content which makes it the parent component of those two.

This is important because we need to know which component is the parent when we want to pass information or data to the inner components ~ also known as children.

If you are interested in learning more about components, I recommend reading about them here.

Final thoughts

In this post I barely scratched the surface of React. There are more to add for sure (props, hooks, state etc.), but I will try to keep it nice and simple for now.

I hope this opens your eyes and horizons and makes you realize that you too can develop website like Reddit, WhatsApp or OkCupid by starting to learn a bit more about React.

Until next time, happy coding!

Ready? Set. Code! 👨‍💻

Paul Bosorogan — Sat, 03 Dec 2022 22:25:14 +0000

Hello and welcome! If you are reading this blog post on the huge World Wide Web, then it means you are thinking about it or you are ready to make a change in your professional career path.

My name is Paul and I am currently enrolled in the Software Engineering course with Flatiron School and this blog is meant to explain the coding experience through my eyes and perhaps it will make it easier for you to get started. babyStepsIntoCoding!

On this post I will focus more on the Front-End Web Programming.

source: https://i0.wp.com/tekraze.com/wp-content/uploads/2018/02/html-css-js-768x427.png?resize=768%2C427&ssl=1

What is Front-End Web Programming?

If you ask this question to 10 people in one room you might end up with 10 different ways of describing it, but it will always be the same notion at its core. For me what makes sense are these 4 steps:

Creating documents with HTML.
Styling and arranging the content of documents using CSS.
Using JavaScript to add interaction with documents.
Communicating with remote servers on changes that happen on documents.

HTML: What is HTML?

HTML is an abbreviation from Hyper Text Markup Language and is the standard markup language for the creation of Web pages.
HTML has the role of shaping and structuring the Web page. How does it do that? By using a series of elements it directs the browser how to display the content ("this is the title/heading", "this is the paragraph", "this is the link to.." etc)

Here is how a basic HTML structure looks like:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Source: https://www.w3schools.com/html/html_intro.asp

And this is the outcome:

Source: https://www.w3schools.com/html/img_chrome.png

CSS:What is CSS?

CSS stands for Cascading Style Sheets and it is the language to style the HTML document. CSS will describe how the elements should be displayed. That includes: adding colors, choosing fonts, changing the size of the font, adding a background image or a background color, and so much more!

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Source: https://www.w3schools.com/html/html_css.asp
The possibilities to add elements and design a Web page are endless!

See below a few W3schools.com templates:

A band Website: https://www.w3schools.com/w3css/tryw3css_templates_band.htm
Coming soon Website: https://www.w3schools.com/w3css/tryw3css_templates_coming_soon.htm
A wedding Website: https://www.w3schools.com/w3css/tryw3css_templates_wedding.htm
Food blog Website: https://www.w3schools.com/w3css/tryw3css_templates_food_blog.htm

JavaScript: What is JavaScript?

JavaScript or JS is one of the most popular programming languages. It is a simple language to learn and it is required along HTML and CSS in order to become a Web Developer.

What can JavaScript do? I am so glad you asked!

Initializing variables.

By using variables you can store information (numbers, strings (words or phrases), arrays, objects etc.) then hand it over to the JavaScript engine which stores this in its memory! If you're wondering how you can access the information once it's stored, it is very simple. You label the variable a.k.a you give it a name.
In order to not mix the variables, you need to follow the rules:

Always start with a lowercase letter (numbers are not allowed)
Refrain from using spaces. The name is too long? No worries. We use the camelCase, for example: camelCaseTheVariableNames (like a camel humps).
JavaScript reserved words or future reserved words are also not valid.

So far so good! In order to initialize a variable, you need to first declare it and then to assign a value to it.

In order to declare a variable you'll use the following: var, let and const.

var - is the ancestor of let and const and was the only one used until 2015.
It is not as used anymore due to its high bugging risk - it will allow you to redeclare the variable and reassign the value.

let - unlike var, it will notify if you used the variable before. This is helpful if you have a lengthy code and wish to avoid errors. However, it is possible to reassign a value to the variable.

const - recommended to be used if possible. By declaring a variable with const you are not able to redeclare nor reassign.

Now that we know how to declare a variable we will learn how to assign a value to it. How? Using '=' which is the assignment operator.

let x = 0 we declared the variable x and we assigned 0 as its value.

Special types of variables: array, object.

An array is a variable that can store in more than one value. The notation for an array is [] to determine the content.
For example:

const fruit = ["apple", "pear", "grapes"] or

const fruit = [ "lemon", "strawberry", "peach" ]

Why would you want to use an array? Because you want to be able to iterate or modify values fast and easy. If you have 10 variables, it would be a piece of cake to modify one or a few of them. But what happens when you have 400 variables? Not that simple.

An object is also a type of variable that allows multiple values to be stored. The difference between these two is the fact that an object has properties (key and value) and the notation {}.

const cheese = {name: "cheddar"; type: "hard"; color:"orange"}

const cheese = { name: "mozarella"; type: "gooey"; color: "white"; }

How are objects useful? It makes it easy to store date with multiple properties.

Conclusion.

You can see all these things during your day to day activities, and become so familiar with the processes that you don't even realize!

source: https://computermash.com/wp-content/uploads/2022/01/what-is-computer-programming.png

I hope you found this helpful and my post sparked an interest in this topic for you. Follow along for more information as I navigate through this course.

Happy coding!