Forem: Biagio J Mendolia

CSS Grid Layout

Biagio J Mendolia — Thu, 18 Mar 2021 02:53:39 +0000

CSS Grid Layout (Grid) is defined as a two-dimensional layout system that was designed to completely change the way we design grid-based user interfaces. Grid is the very first CSS module! Basically, Grid is a grid-based layout system, with rows and columns, making web page design easier than traditional ways.

Terminology for Grid can get a bit confusing at first but after working with it a few times you can pick it up pretty quickly.

Below is some basic terminology for Grid:

Grid Container:
The Grid container is an element on which display: grid is applied. The Grid Container is the parent of Grid Items.

Grid Item:
Grid Items are children of the grid container.

Grid Line:
Grid Lines are separating lines that make up the structure of the Grid. Grid Lines can be vertical or horizontal. Vertical lines are called “column grid lines”, and horizontal lines are called “row grid lines”.

Grid Cell:
A Grid Cell is the space between four intersecting grid lines and conceptually much like a table cell.

Grid Track:
A Grid track is a space between two adjacent grid lines. You can think of them as the columns or rows of the Grid.

Grid Area:
The Grid Area is the space created/surrounded by four grid lines. A grid area may be composed of any number of grid cells.

The difference from Flexbox:
As you may remember in the beginning of this blog post I had mentioned that Grid was designed for a two-dimensional layout - rows, and columns at the same time. The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Flexbox and Grid share some common features but each have different use cases.

All of these terms together make up a high level overview of the CSS Grid Layout! I hope you learned a little, I’d recommend doing a small project using Grid in order to get a full grasp of how powerful it is. Thanks for stopping by!

CSS Flexbox

Biagio J Mendolia — Fri, 12 Mar 2021 03:35:23 +0000

While scrolling through my blog posts from the past few months, I realized that I never talked about Flexbox! Here is a brief intro on it, enjoy!

The CSS Flexbox is a CSS module that gives amazing flexibility when creating layouts. CSS Flexbox is an elegant and lightweight approach to layouts in our CSS! Some pros of using Flexbox are:

No floats
Responsive and Mobile friendly
Simple to position child elements
Flex Container’s margins do not collapse with the margins of its contents
Order of elements can be easily changed without editing the source HTML

Flexbox was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface with powerful alignment capabilities. Flexbox deals with layout in one dimension at a time whether it be a column or a row.

Flexbox utilizes a parent-child relationship so when you declare a flex container, the direct children of this container will automatically turn into flex items. Flexbox is designed as an axis grid.Each one of the flexbox properties works either on the container or defining how items are displayed inside the container. Flex items can be laid out in all directions across one of the two axes. Flexbox allows us to change the order of the flex items without the need of altering the source order of our code. Flex items are responsive, meaning they shrink and grow to the fill the page no matter the size!

As mentioned above, the flexbox container has two axes: the main axis and the cross axis. The main axis is determined by the value of the flex-direction property. The cross axis on the other side will be always perpendicular to the main axis.

Thanks for stopping by!

Prop Drilling in React

Biagio J Mendolia — Thu, 04 Mar 2021 14:05:41 +0000

I was working on my GitHub Finder project when I noticed an issue. I had fallen victim to prop drilling. In short, prop-drilling is where your application is passing props up and down the component tree. This can cause components to re-render when it is not necessary to, also in large applications, this can have significant performance issues.

However, prop drilling is not always an issue. If we are passing data between 2 or 3 levels of component, it is completely acceptable and will most likely not cause any headaches. It will be easy to trace the flow of data. Once we hit the 5+ levels of components is when to start thinking about a better way to handle this!

Here are a few different ways to handle accessing data without prop drilling:

I think the React Docs has the best one liner when it comes to what the Context API does. “Context provides a way to pass data through the component tree without having to pass props down manually at every level”. Basically, when you use Context in your application, you avoid passing data down the component tree through props while still being able to access the data. Context is mainly used when certain data needs to be accessible by many components at various nested levels.

It is difficult to talk about the Context API without bringing up Redux. Redux labels itself a predictable state container. Redux lets you create a data store and connect any component to the store, no matter where the component is positioned in the Component Tree it can access the store!

Passing props down from one component to another is not a bad thing, however if we over use it, it can have negative effects on our application. I hope you enjoyed this break down, thanks for stopping by!

JSX and Babel In React

Biagio J Mendolia — Fri, 26 Feb 2021 03:23:44 +0000

I started diving into React and trying to get a deep understanding of everything and how it works. When using JSX it made me want to learn more about it and how the browser is able to understand it, so I started researching. Here is what I’ve learned!

JSX is short for JavaScript XML. We use HTML to write HTML in a React app. JSX provides us with an efficient way to utilize HTML in React with its syntactic sugar. Just to be clear, it is not required to write JSX in React but it is a common practice because of how much time and code it saves!

JSX lets us write crisp HTML/XML-like structures in the same file our JavaScript code lives. Babel’s job is to transform these expressions into actual JavaScript code so the browser can understand our code. Basically, JSX allows us to put HTML into JavaScript.
Now you might be wondering, what is Babel?

According to the official Babel docs, Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. React uses JSX syntax. Babel is a JavaScript compiler, it converts JSX code into vanilla JavaScript. You can think of babel as the connector between your JSX code and "executable" JavaScript code that browsers can understand. React also uses ES6, which is not supported by a lot of browsers. Fortunately, Babel converts the ES6 code to a code which is compatible with the browsers.

So that's how JSX and Babel work in React! At first just seemed like magic but once I dove into how everything works, it started making sense. Thanks for stopping by!

Intro to Rendering in React

Biagio J Mendolia — Thu, 18 Feb 2021 14:26:05 +0000

This past weekend I’ve decided on my next project and the technologies I plan to use to create it! React is one of them because of how much I’ve missed developing with it. I decided before I tackle a larger full stack project to start with something small to brush up on the fundamentals. When I ran “ create-react-app” in the terminal, I was greeted by a familiar boilerplate React app that I missed! When browsing through the App.js and Index.js files I noticed the render method and couldn’t help but google how rendering in React worked. Here's what I found!

The Initial Render

Every React application has a root DOM node that identifies the portion of the DOM that will be controlled by React. Adding components (known as child components) to this node allows you to make your application look and behave the way you want it to!
Once React is called to initially render, it has to convert the JSX you’ve written into pure JavaScript first. It does this by utilizing Babel. Babel is primarily known for its transpiling capabilities, however it is also used to convert JSX into JavaScript.

Rendering

When a change of state happens in a component, it triggers the rendering process for that component. Once triggered, React starts to collect all the components that triggered the re-render from the root of your App. However, even though the process's name is technically rendering, at this point, the DOM has not been modified.
Since we normally use JSX, the code will be transformed to React.createElement(...). The output of the createElement will describe how the application should look like in the next version of the render through the next stage called reconciliation.
In a short, reconciliation calculates the changes that need to be made in the application tree which makes the changes. Synchronously, React gets rid of past layout effects, runs the new layout effects. The browser then paints the DOM!

Thanks for stopping by, I hope you learned a bit. Talk to you next week!

Tree - Data Structure

Biagio J Mendolia — Fri, 12 Feb 2021 03:39:58 +0000

Trees are a type of non-linear data structure, they store and organize data hierarchically.
The Tree Data Structure connects nodes in a parent - child relationship. A great way to think about this data structure is to think of as a family tree.

Above is my family tree. Benny, Pat, Lena and Joseph are my grandparents. Biagio A and Carmela are my parents. Angelina is my sister ( my parents' children). A tree is a collection of Nodes, each node contains data.

The beginning of the tree, or the first node, is called the root node. Tree nodes connect to each other by links( more commonly called edges). Edges manages the relationship between nodes. The last nodes on the tree without any children are called Leaves. A Parent is a node that has a link to a child node. Another thing to note about trees is the height of a tree is the length of the longest path to a leaf. Also, the depth of a node is the length of the path to its root!

I found that Trees are easier to understand compared to other data structures because the ability to compare it to family tree or an actual tree! I hope you enjoyed this high level view of Tree Data Structures!

Big O Notation - What is it?

Biagio J Mendolia — Thu, 04 Feb 2021 11:24:25 +0000

In plain English, Big O is a way to describe how complex and algorithm is using algebraic terms. It is a fundamental tool for software engineers and computer scientists to analyze the cost of an algorithm. When using Big O, we express the runtime of an algorithm in terms of - how quickly it grows in correlation to the input, as the input gets larger. When calculating Big O, we default to assuming the worst case scenario of the algorithm. We do this because the worst case is when it matters the most.

Constant time:
An algorithm that runs in constant time( or O(1) ), relative to its input. Simply, no matter the size of the input, this function will always require 1 step.

Linear time:
An algorithm that runs in linear time ( or O(n) ), grows at a steady pace, in direct proportion to the size of the input data set. N is the number of items that are given to us in the array. Simply, the number of items in the array is the number of times the array will print or the number of steps the function will have to take.

Quadratic time:
An algorithm that runs in quadratic time ( or O(n²) ), usually involves nested iteration over the data set. Simply, the performance of this algorithm is proportional to the square of the size of the input data set.

There may be times when we want to optimize an algorithm to use less memory instead of (or in addition to) using less time. Talking about memory cost is similar to talking about time cost. We look at the total size (relative to the size of the input) of any new variables we are allocating. Most of the time when we talk about memory cost, we’re talking about additional space, so there is no need to include space taken up by the inputs. There are always trade-offs when deciding to save memory or time, it’s up to the creator to choose which is more important in each scenario.

Big O is a complex topic, I tried my best in explaining the basic fundamentals of it. I hope you learned a little and enjoy the read. Thanks for stopping by!

What are Algorithms?

Biagio J Mendolia — Thu, 28 Jan 2021 23:24:34 +0000

In basic terms, an algorithm is a series of instructions that are followed to do something. In computing, algorithms provide computers with a guide to complete an action or multiple actions.

A computer program is an algorithm, written in a programming language, that a computer can understand and execute. Computer algorithms need to be precise, you’ll usually “if”, “then” or “else” inside a computer algorithm. If the algorithm isn’t specific, the algorithm usually fails meaning the output of the algorithm will not be what it is supposed to be!

There are different types of algorithms that are meant to handle different tasks. Here are a few different types of computing algorithms:

Sort Algorithms - this type of algorithm is used to rearrange a given array or list elements using a comparison operator on the given elements.

Search Algorithms - this type of algorithm is used to locate specific data inside a collection of data.

Hashing Algorithm - This type of algorithm is used to encrypt data. It inserts random characters into a given input and outputs the hashed input.

I hope you have learned a little from this high level overview of algorithms! Thanks for stopping by!

Data Structures - The Basics

Biagio J Mendolia — Fri, 22 Jan 2021 03:50:04 +0000

Simply put, a data structure in computer science, is a system used to store data, organize it, to allow easy modification and access. Data structures are being used in almost every program or software system that has been developed or is currently being developed. Data structures are a part of the fundamentals of Computer Science and Software Engineering.

Data structures are foundational to any computer program. Computer programs are reliant on data of course. To have a well running program, it is crucial to have your data structure right! The right data structures organize many data types logically and in a way where the data can easily be accessed, modified, and configured.

Data structures can be categorized in two ways:

Non-linear Data Structure - Elements of non-linear data structures are stored and accessed in non-linear order. Examples of non-linear data structure are: Tree and Graph.
Linear Data Structure - Elements of Linear data structure are accessed sequentially, although, elements can be stored in any order. Examples of linear data structure are: LinkedList, Stack, Queue and Array.

Data structures can become incredibly complicated. In this short write up, I haven’t even scratched the surface. However, having a basic understanding of data structures is a great way to dive into the rabbit hole of data structures!

What is Object Relational Mapping?

Biagio J Mendolia — Fri, 15 Jan 2021 02:05:47 +0000

This week I decided to shed a glimmer of light on Object Relational Mapping. After having some work exposure with SQL queries, I wondered if there was another way to talk with databases besides SQL. After a little bit of googling, here's what I learned!

Object-Relational Mapping (ORM) is a technique that lets you query and manipulate data from a database using an object-oriented programming language(OOP). Basically, it allows us to interact with our database using an OOP language instead of SQL. This is great because it gives us the flexibility of talking to our database in the language we are already programming in rather than writing SQL queries! ORMS can be helpful to those who aren’t proficient in writing SQL.

However, individuals who have the experience and knowledge of working with SQL might prefer to stick with it over an ORM. Just like everything in life there are pros and cons to each way depending on which route you choose. What would you rather use, SQL or an ORM?

Thanks for stopping by, I hope you enjoyed this short write up!

Different Types of SQL JOINs

Biagio J Mendolia — Fri, 08 Jan 2021 02:39:02 +0000

A SQL Join statement is used to connect rows from two or more tables, based on a related column between them. There are four types of JOINs, an Inner Join, Left Outer Join, Right Outer Join and Full Outer Join.

An Inner Join selects all rows from both the tables as long as the data matches. The Inner Join will combine all rows from both the tables where the columns match.

A Left Outer Join returns all the rows of the table on the left side of the join and matching rows for the table on the right side of the join. The rows for which there is no matching row on the right side.

A Right Outer Join is the opposite of a Left Outer Join. This join returns all the rows of the table on the right side of the join and matching rows for the table on the left side of the join.

Finally, a Full Outer Join returns all the rows from both tables. This Join creates the result-set by combining the result of both Left Outer Join and Right Outer Join.

When working on SSRS reports involving stored procedures, I found myself having to reteach myself the different types of JOINs in SQL. They are pretty simple once understood but can help with SQL queries quite a bit! I hope you enjoyed this post, thanks for stopping by!

Iteration and Loops in Computer Programming - The Basics

Biagio J Mendolia — Thu, 31 Dec 2020 23:59:15 +0000

Iteration is a common practice amongst programmers, this is something that is utilized quite frequently and worth having a deep understanding about it! No matter what language you are programming in or what you are building, iteration will probably be needed!

Iteration is a process where a set of instructions are repeated in a sequence, a certain number of times or until a condition is met. When the first set of instructions is executed more than once, it is called an iteration. When a sequence of instructions is executed in a repeated manner, it is then called a loop. Iteration and loops can be extremely powerful when used in the right context!

For example, let's say you have a database of 500 customers and you need to get the information on each customer so that you may mail each one a holiday card. This would be a great scenario to utilize iteration and a loop to print out each customer. Personally, I would use the common “for loop” similar to this:

for (int i=0;i<500;i++)
{
\\Print customerName and customerAddress
}

The way this for loop works is that i is an iterator starting from the customer record, every time the loop is run, it prints the customer information. After printing the information, 1 is added to i and the process is repeated until i = 500!

I hope you enjoyed this quick blog post, thanks for stopping by!!