DEV Community: Immaculate Njoroge

Introduction to React.js

Immaculate Njoroge — Sun, 06 Mar 2022 19:50:02 +0000

This article covers a brief introduction to the React library as I dive more into it in the coming weeks.
This is part of my #100DaysofCode challenge

React is a JavaScript library which builds user interfaces. Mostly used and run by Facebook.

Features of React

JSX
This is JavaScript XML. It is JavaScript syntax extension which combines JavaScript and XML language.

Virtual Document Object Model (DOM)
React library generates an in-memory data structure cache which computes changes then updates the browser. Any corrections made, are compared it to its previous state and only updates objects in the real DOM instead of updating all of the objects.

Components
React is made up of several building blocks with their own distinct functions.

One-way Data Binding
The data flow is in one direction, done by Flux. The callback of components is done after they are edited. This is as the data in the components is immutable (cannot be changed).

Advantages of React?

It is straightforward making it easy to learn and use
It utilizes Native approach-reusable code supported throughout Android, IOS and Web applications

Disadvantages of React

It is a library and not a complete framework-makes it less useful as it depends on external libraries
It is relatively new and is constantly changing and updating which maybe a hassle to some.

Going past the finish line

Immaculate Njoroge — Wed, 19 Jan 2022 16:34:00 +0000

Been contemplating about writing this for a while. Seeing that I have committed myself to starting over my tech career and to myself here goes...

I am a student who starts tasks and projects with so much enthusiasm and zeal then somewhere close to the goal I panic and give up altogether. Done this far too many times and I go back to the cycle again.

As I write this, I am making myself accountable and going past the finish line. No matter what.

There are many things which I need to do and code to run despite the lack of time at the present due to procrastination. I have realized I work well under pressure-maybe a way of putting my ADHD to the test (not a pretty sight) . In addition, I am quite a resourceful person and ensure that I make things happen-I am proud of this as it is one of my character traits.

So I am making this happen and journaling my progress here counts as my accountability space? Partner maybe?

No bitching around and making excuses-cross the finish line. Remember it's a marathon as long as you are on the other side and see how far you've come, that feeling is priceless.

Hope you can cheer me along as I do this and finish my final year project and get my degree.

Or maybe you need some inspiration and encouragement-you've got this and I am rooting for you.

Introduction to HTML and CSS

Immaculate Njoroge — Mon, 29 Nov 2021 20:50:55 +0000

Hyper Text Markup Language (HTML) is the standard markup language for creating Web pages. It describes the structure of a Web page

HTML is made up of a series of elements. These help in informing the browser on how the content is displayed.

An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>

An example of HTML Webpage Document

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

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

</body>
</html>

Elements explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

CSS
CSS is called Cascading Style Sheet. This is what aids in the styling and formatting of the web pages.

There are three methods of including CSS in an HTML document:

Inline styles — This is done by using the style attribute in the HTML start tag.
Embedded styles — This is done by using the <style> element in the head section of a document.
External style sheets — This is done by using the <link> element, pointing to an external CSS file.

Inline styles
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a semicolon (;), just as you would write into an embedded or external style sheets.
All need to be in one line i.e. no line break after the semicolon, as shown here:

<h1 style="color:purple; font-size:18px;">This is a heading</h1>
<p style="color:red; font-size:42px;">This is a paragraph.</p>

Embedded Style Sheets
They only affect the document they are embedded in.

Embedded style sheets are defined in the <head> section of an HTML document using the <style> element.

You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head>tags. Let's take a look at an example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External Style Sheets

This is used when the style is applied to many pages of the website.
Holds all the style rules in a separate document that you can link from any HTML file on your site.

You can attach external style sheets in two ways — linking and importing.

style.css

body {
    background: lightblue;
    font: 20px Tahoma, sans-serif;
}
h1 {
    color: yellow;
}

Linking External Style Sheets

This is done by the <link> tag goes inside the <head> section, as you can see in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Importing External Style Sheets

This is done by the @import statement instructs the browser to load an external style sheet and use its styles.

You can use it in two ways. The simplest is within the header of your document.

<style>
    @import url("css/style.css");
    p {
        color: green;
        font-size: 24px;
    }
</style>

The other way is by the @import rule to import a style sheet within another style sheet.

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

These are some of the aspects of CSS I would love to share.

Introduction to Version Control Systems

Immaculate Njoroge — Mon, 29 Nov 2021 19:42:43 +0000

A Version Control software provides a mechanism to track changes in files over a period of time ensuring that one recalls specific versions later.

It helps developers in teams as one developer may be working on a new feature while another developer fixes an unrelated bug by changing code ensuring each developer may make their changes in several parts of the file tree. The source code for a project, app or software component is typically organized in a folder structure or "file tree".

Primary benefits from version control are as follows:

Long term change or history: Having the complete history enables going back to previous versions to help in root cause analysis for errors. Also important when fixing problems in older versions of software.
Branching and merging. Creating a "branch" in VCS tools keeps multiple streams of work independent from each other while also providing the facility to merge that work back together, enabling developers to verify that the changes on each branch do not conflict.
Traceability. This is done through Issues and Pull Requests.
Each work item can be planned as an Issue, with tags. When you commit code relevant to that Issue, referencing it in the commit message by the Issue number (eg #123) will link that commit on the Issue page.
It helps one in not referencing the Issue in every commit and one can create a Pull Request for a long-running branch. The Pull Request stays up to date as you push changes to the branch, and you can reference the Issue from the Pull Request description in the same way (#123) to tie the two together. Pull Requests are GitHub's solution to code reviews,

In this article I am focusing on Git as a Version Control System.

It was created in 2005 by Linus Torvalds. In addition, is a free open source software with a distributed architecture. Distributed Architecture means that each person contributing to the repository has a copy of the repository on his own machine. This makes the operations really fast.

One can download Git here:(https://git-scm.com/downloads)

Basic Git Commands and Functions:
Once you have installed Git, the very first task can be to create a new repository so that Git can start tracking your files. To start this, you need to provide basic configuration information to GIT like who you are. This can be achieved in Git as below:

Configuring commands
git config --global user.email "jane_imma@gmail.com"

The “— global" command is user-specific, meaning it is applied to an operating system user. Global configuration values are stored in a file that is located in a user's home directory.

The "--system" command is a system-level configuration is applied across an entire machine. This covers all users on an operating system and all repos

Creating a new repository
A repository is the place where we will keep all the files that we want Git to track.

We use the “git init” command.

The folder first_repo is where we have created a new repository. Remember that the repository is the place where we will keep all the files that we want GIT to track.
The init command creates an empty git repository under the folder “first_repo”. If we check the contents of the first_repo folder, we will see a directory “.git

Cloning to a specific folder
git clone <repo> <directory>

Clone the repository located at ＜repo＞ into the folder called ~＜directory＞! on the local machine.

Cloning a specific tag
git clone --branch <tag> <repo>
Clone the repository located at ＜repo＞ and only clone the ref for ＜tag＞.

These are some of the commands which I have learnt and will keep updating as I progress.