DEV Community: Pedro Furquim

The bootstrap framework for newbies Part 01

Pedro Furquim — Mon, 26 Jun 2023 13:17:23 +0000

What is bootstrap anyway?

Bootstrap is a powerful open-source front-end framework created to facilitate the responsive development of websites and web apps through a set of templates that can be found in the framework's documentation.

Before I begin to explain more about Bootstrap, I'd like to clarify what the term "responsivity" really means.

Responsivity

Responsive web design, a term originally defined by Ethan Marcotte in his article in 2010, is also emerging in the field of architecture. "Responsive architecture" studies how physical spaces can respond to the presence of people passing through them. Some architects are experimenting with art installations and wall structures that bend, flex, and expand themselves as the crowd approaches them.

That's exactly what responsiveness in web development is. With so many inconsistent window widths, different screen resolutions, and even user preferences, websites must be responsive and work perfectly with all those variables. Responsive website layouts adapt themselves based on the size and capabilities of the user's devices, whether it's a phone, tablet, desktop, TV, or even a game console.

Now that you know more about responsiveness, let's talk about the importance of the Bootstrap framework.

Web developers using Bootstrap can build responsive websites much faster, without spending time worrying about basic commands and functions.

Let's install bootstrap

It can be installed via CDN, which, in my opinion, is the easiest way to start using it.

Create a new index.html file in your project root and include the Bootstrap CSS and JS tags in it. Always remember that the CSS tag must be placed inside the <head> tag, and the JavaScript tag must always be placed at the bottom of the <body> tag. Just like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Include the Popper scripts along with the Bootstrap JS script, so you can use dropdowns, popovers, and tooltips in your project. Here's an updated example:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

Now, let's use Bootstrap for the first time. Open your index.html file, and it should look like this:

To make the text centered on the page, simply give the <h1> element a class of text-center, like this:

 <h1 class="text-center">Hello, world!</h1>

Now it should look like this:

Note that we didn't even open a CSS file. That's the "magic" of Bootstrap. To finish this first tutorial, let's style it a bit more. Now, I want the background to be black, add some margin to the <h1>element so that it doesn't touch the top of the page, and change the color of the <h1> element to white so that it's visible on the black background.

To achieve this, we'll make the following changes:

Give the <body> element a class of bg-black to set the background color to black.
Add the class my-3 to the <h1> element to add top and bottom margin.
Add the class text-white to the <h1> element to set the text color to white.

<body class="bg-black">                                                    
  <h1 class="text-center my-5 text-white">Hello, world!</h1>

And, without using any css file, the result:

That's correct! Bootstrap is a powerful and versatile framework with extensive capabilities. Many big companies, such as Mastercard, Spotify, and Twitter, utilize Bootstrap in complex and innovative ways. Here are some websites made with Bootstrap that I admire:

Forbes India

Fox News

Made Together

All those websites are incredibly well-crafted projects. Bootstrap truly shines in the hands of skilled developers. Now, let's explore how these skilled developers harness the power of the Bootstrap framework.

Layout

Containers

Containers are fundamental building blocks in Bootstrap that can contain, pad, and align other elements within a given device or view-port. When structuring the HTML of a Bootstrap project, containers must be parent elements and cannot be nested. In other words, it is important not to place one container inside another container.

Just like in real life, containers must be separate elements that contain other elements. Let's fix our previous website and wrap the <h1> element inside a container with a white background. Our code will look like this:

<body class="bg-black">
   <div class="container bg-white">                                                                       
      <h1 class="text-center my-5">Hello, world!</h1>
    </div>                
</body>

As a result, we can explicitly see the space that the container is occupying. The added container with the white background provides a clear visual separation and delineates the area where the <h1> element is placed.

There are two types of containers: container, which we just used, and container-fluid. The container-fluid class can be used if you want a full-width container, spanning the entire width of the view-port. Let's update our code to use container-fluid:

The use of containers will be extremely frequent during the development of your Bootstrap projects. There are other essential building blocks you need to be aware of before you continue experimenting with Bootstrap. I will now discuss them in detail.

Grid system: rows and columns

Bootstrap offers a powerful mobile-first grid system that allows us to quickly build layouts of various sizes and shapes, as I've mentioned before. This grid system is constructed using two fundamental building blocks: rows and columns.

Rows

In Bootstrap, we have containers and rows. Rows are child elements of containers, meaning they are designed to reside inside containers. It's important to adhere to this rule to ensure clean code structure. By following this guideline, you can maintain a well-organized and structured code base.

Now, let's follow the proper approach and fix our website by creating a row inside the container component. To create a row, we need to add a <div> element with a class of row. Here's the updated code:

<body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <h1 class="text-center my-5">Hello, world!</h1>
      </div>

Indeed, at this point, there may not be any visible changes on the client side of our website. However, as we continue to make adjustments and apply Bootstrap's structure, the pieces will come together, and the website will start to take shape. Stay patient, and soon things will begin to make sense.

Columns

Just like containers and rows, columns are also fundamental building blocks of Bootstrap. With these components alone, we can create many interesting layouts and structures. Let's dive into understanding columns in more detail.

Let's imagine the scenario where you're moving to another country. Logically, you'll need a container to ship all your stuff. However, you won't just throw your stuff into the container because if you did, everything would break. Instead, you put a lot of boxes inside that container to keep everything organized. That's the spirit of the Bootstrap grid system. Containers are equivalent to containers, and boxes are equivalent to rows. But now we also have columns, right? Of course! Let's imagine you have a lot of old porcelain among your belongings. Would you just throw this beautiful and expensive porcelain inside the boxes? Don't even think of that! Instead, use small compartments to organize the interior of your boxes. In the Bootstrap world, these small compartments are what we call columns.

Now, let's work on our website again and finally add a column to contain the <h1> element. Remember, columns are child elements of rows, which are child elements of a container. To fix our code, we simply need to add a <div> element and give it a class of col. Here's the updated code:

 <body class="bg-black">
    <div class="container bg-white">
      <div class="row">
        <div class="col">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
      </div>
    </div>

The cool thing about rows and columns is that within each row, you can fit up to 12 columns. The reason why nothing changed in our code is that we have only one column inside our row. Therefore, this single column naturally occupies the space of 12 columns.

To better understand this concept, let's make a subtle change to our code. Instead of using the class col for our column, let's use col-12, which means that our column should occupy the space of 12 columns. Here's the updated code:

<div class="col-12">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

No changes, right? That's because in Bootstrap, the classes col and col-12 have the same meaning. Both of them occupy the entire available space of a row. However, let's consider a scenario where we need three columns on the same row, aligned vertically. If we want equal division, we can use the col-4 class for each column. This class will make each column occupy the space of 4 columns, which is one-third of the row's width. To differentiate the columns visually, let's add the bg-primary class for a background color and text-white class for a white text color.

<div class="col-4 bg-primary text-white">
   <h1 class="text-center my-5">Hello, world!</h1>
</div>

Now here's our result:

Things are starting to get interesting, right? Now let's add two more columns to this row with the same classes. I've made some visual changes to the second column to help us better visualize our grid. Here's the updated code:

<div class="row">
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
        <div class="col-4 bg-primary text-white">
          <h1 class="text-center my-5">Hello, world!</h1>
        </div>
</div>

Here's what we have on our website now:

Note that now we have a font-size of 40px

Pretty cool, right? Everything is perfectly aligned and centered on our screen. But what if we test our website on other screen sizes, like a tablet? Let's see how it looks:

Our layout still looks great, even the font-size was automatically adjusted to fit the new screen size. This is one of the benefits of using Bootstrap's responsive grid system. It ensures that our website maintains its structure and readability across various devices and screen sizes.

To test our layout on the screen size of an iPhone 5/SE, here's how it would look:

I'm not satisfied with this result as the columns appear squeezed within the row. However, this is the point I wanted to reach in order to move on to the next topic: Responsiveness.

See you all in the next blog about Bootstrap Responsiveness! Thank you for reading through the entire article, and please let me know if you find any mistakes.

The history of the JavaScript Language

Pedro Furquim — Mon, 20 Mar 2023 23:23:06 +0000

From Nerd to Vice President: The man who helped create the Internet.

Our story begins with a man by the name of Albert Arnold Gore Jr, more commonly known as Al Gore. He was an American businessman and politician who served as the 45th Vice President of the United States from 1993 to 2001 under President Bill Clinton. However, what many people don't know is that he was also instrumental in the development of the internet. Al Gore had a passion for computers dating back to the late 1970s, and was described in an article as a "genuine nerd, with a geek reputation." He was the epitome of an Atari Democrat*, with his interests in Artificial Intelligence, fiber-optic networks and the desire to make network access more readily available to ordinary Americans.

Vint Cerf and Bob Kahn, who are widely regarded as the fathers of the internet, have made the following statement regarding Al Gore.

Back in the 1970s Al Gore promoted the idea of high-speed telecommunications as an engine for both economic growth and the improvement of our educational system. He was the first elected official to grasp the potential of computer communications to have a broader impact than just improving the conduct of science and scholarship ... the Internet, as we know it today, was not deployed until 1983. When the Internet was still in the early stages of its deployment, Congressman Gore provided intellectual leadership by helping create the vision of the potential benefits of high speed computing and communication. As an example, he sponsored hearings on how advanced technologies might be put to use in areas like coordinating the response of government agencies to natural disasters and other crises.

In 1986, Al Gore initiated the development of the High Performance Computing and Communication Act of 1991, which became known as "The Gore Bill". The bill, signed into law by President George H.W Bush on December 9, 1991, provided $600 million in funding for high performance computing and the establishment of the National Research and Education Network. President Bush anticipated that the bill would facilitate discoveries in the field of DNA research, enhance free trade with foreign markets, and promote collaboration between government, academia, and industry.

The development of Mosaic in 1993 is widely considered to be one of the most significant outcomes of the Al Gore Bill. This web browser for the World Wide Web is credited by many experts as the catalyst for the Internet Boom that took place in the 1990s.

The creation of the Mosaic Web browser took place at the University of Illinois, where a group of programmers, including Marc Andreessen, who later founded Netscape, collaborated on the project. According to Andreessen, "If it had been left up to private industry, it wouldn't have happened," highlighting the significance of Al Gore's Bill in enabling the development of the browser.

Following his departure from the White House in 2001, Al Gore remained active in the technology industry and continued to engage with emerging technologies. He currently serves as a member of the Board of Directors for Apple Inc. and holds a senior advisory role at Google.

*Atari Democrat: During 1980s and 1990s the term Atari Democrat referred to Democratic Legislators who believed that the support and development of high tech related businesses would stimulate the economy and created jobs.

The Browser That Changed Everything: Mosaic and Netscape's Impact on the Internet

Following the funding from Al Gore's Bill, the development of the Mosaic project began in December 1992 at the University of Illinois. Marc Andreessen announced the release of Mosaic's first version, version 0.5, in January 1993. While there were other browsers available during this time, none had the same impact on public usage of the Internet as Mosaic.

Marc Andreessen, along with James H. Clark and four other former students and staff from the University of Illinois, led the team that developed Mosaic. They went on to establish Mosaic Communications Corporation, which later evolved into Netscape Communications Corporation and developed the popular browser Netscape Navigator. Mosaic is generally recognized as the beginning of the web as we know it. In October 1994, an article about Mosaic made the following observation:

Mosaic is the celebrated graphical "browser" that allows users to travel
through the world of electronic information using a point-and-click
interface. Mosaic's charming appearance encourages users to load their
own documents onto the Net, including color photos, sound bites, video
clips, and hypertext "links" to other documents. By following the links –
click, and the linked document appears – you can travel through the
online world along paths of whim and intuition. Mosaic is not the most
direct way to find online information. Nor is it the most powerful. It
is merely the most pleasurable way, and in the 18 months since it was
released, Mosaic has incited a rush of excitement and commercial energy
unprecedented in the history of the Net.

Web browsers like Mosaic emerged as the killer applications of the 1990s. Joseph Hardin, who was the director of the NCSA group responsible for developing Mosaic, revealed that by mid-1994, downloads of the browser were reaching up to 50,000 per month.

As of November 1992, there were only twenty-six websites in the world. However, in 1993, the release year of Mosaic, the browser's "What's New" page indicated that nearly one new website was being added every day. The availability of Mosaic and its graphical derivatives was the driving force behind the explosive growth of the Web, which grew to over 10,000 websites by August 1995 and millions by 1998. Bob Metcalfe summed up the pivotal role of Mosaic in the following words:

In the Web's first generation, Tim Berners-Lee launched the Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and HTML standards with prototype Unix-based servers and browsers. A few people noticed that the Web might be better than Gopher. In the second generation, Marc Andreessen and Eric BIna
developed NCSA Mosaic at the University of Illinois. Several million
then suddenly noticed that the Web might be better than sex. In the third generation, Andreessen and Bina left NCSA to found Netscape…

The origin of Netscape Navigator

After graduating in 1993, the main creators of the Mosaic web browser, Marc Andreessen and Bina, went on to establish Netscape, and its inaugural press release was issued on October 13, 1994. They decided to offer their new browser, Navigator, free of charge to all non-commercial users, with beta versions available for free download in November 1994 and the full version 1.0 becoming available in December 1994.

After the release of Navigator in 1994, Mosaic's popularity as a standalone browser started to decline as Navigator offered significant improvements over the original Mosaic browser.

In 1994, Netscape introduced a groundbreaking innovation: on-the-fly display of web pages, where text and graphics would appear on the screen while the web page was still downloading. Previous web browsers would not display a page until all graphics had been loaded over the network connection, leading to users staring at a white loading page for several minutes. With Netscape, users with dial-up connections could start reading the text of a web page within seconds of entering a web address, even before the rest of the page had finished downloading. This made the web much more user-friendly and accessible to the average user.

In the late 1990s, Netscape continued to enhance Navigator's features to remain the technical leader among all web browsers. Netscape's engineers introduced several new features to Navigator, such as cookies, frames, proxy auto-config, and most notably, JavaScript. The introduction of JavaScript to Navigator enabled web developers to create more dynamic and interactive web pages. This innovation revolutionized the way websites were designed and laid the foundation for modern web development.

JavaScript: Netscape's Quest for Interactive Web Pages

Around a decade ago, Jeff Atwood, the founder of Stack Overflow, argued that JavaScript was poised to become the future of programming and boldly proclaimed that "Any application that can be written in JavaScript will eventually be written in JavaScript." As we approach 2023, it's clear that his prediction has come to fruition. JavaScript has maintained its status as one of the most popular programming languages, dominating both front-end and back-end web development, and has even extended its reach to unconventional devices like refrigerators, solidifying its ubiquitous presence in the digital age.

NetScape's ambitious project to create a programming language that would run directly on web browsers began with the idea of using Java, but it was soon determined that this approach would not work. NetScape then hired Brendan Eich to lead the project. In just ten days, the first version of JavaScript was born, initially named Mocha. This first version of JavaScript already contained many of the features that are now familiar in modern JavaScript, such as first-class functions, dynamic typing, and prototypal inheritance, which were inspired by the Java language.

In September 1995, Mocha was given a new name, Livescript, and it was included in the initial beta releases of Netscape Navigator 2.0. However, a few months later, the name was changed once again to JavaScript. That same year, Netscape submitted the language to ECMA International, a nonprofit standards organization for computer and communication systems. The first edition of the standard specification was released in 1997, standardizing the language. The development of ECMAScript, the official name for JavaScript, continued, and two more versions were released shortly after: ECMAScript 2 in 1998 and ECMAScript 3 in 1999 (ES2 and ES3).

After the release of ES3 in 1999, there was a decade-long period of silence where no changes were made to the official standard version. During the initial days of this period, some work was happening on the ES4 version and discussions were underway regarding the inclusion of features such as classes, modules, static typings, destructuring, and more. These features were slated for release in 2008, but due to political differences concerning language complexity between Google, Microsoft, Yahoo, and others, the project was abandoned for a significant period of time.

In 2009, ECMAScript 5 (ES5) was released with a main focus on fixing compatibility and security issues. However, it took a long time for developers to adopt the new standards, and many continued to use ES3 without realizing the benefits of ES5.

In 2015, a new version of ECMAScript was released with significant updates and new features, called ES6. This version was designed to make writing complex applications easier and more efficient with features such as Classes, Modules, Arrow Functions, Enhanced Object Literals, Template Strings, Destructuring, Default Parameter Values, Let and Const, Iterators, Generators, Maps, Sets, Proxies, Symbols, Promises, Math, Object APIs and more. The 6th standards version of ECMAScript was initially named as ES2015, but it was later renamed to ES6. It was released in June of that year and marked a major milestone in JavaScript's development. From that point on, new versions of ECMAScript have been scheduled to be released annually in June.

In June 2016, the ECMAScript 2016 (ES7) was released. This version did not introduce many changes, and only two features were added: the exponentiation operator and Array.prototype.includes.

In June 2017, ECMAScript (ES8) was released, with the addition of a major new feature: async functions. Other notable features included Object.values() and Object.entries(), String padding, Object.getOwnPropertyDescriptors, trailing commas in function parameter lists and calls.

The latest version of ECMAScript, released in June 2022, is ECMAScript 2022 (ES13), which brought several new features to the language. Some of the key additions include:

Await
New class elements: public and private instance fields, public and private static fields, private instance methods and accessors, and static blocks inside classes
The #x in obj syntax for private fields
The cause property on Error objects, which can be used to record a causation chain in errors
The at method for Strings, Arrays, and TypedArrays
Object.has0wn, a convenient alternative to Object.prototype.hasOwnProperty.

The conclusion of this chapter should not intimidate you!
Keep working hard! Keep studying and you'll never regret it! And remember, Rome wasn't built in a day!

@pedro_furquim