Forem: Oreste Abizera

The Web of Life: Understanding the Architecture of the World Wide Web

Oreste Abizera — Tue, 20 Jun 2023 16:21:30 +0000

Welcome to the intricate world of the World Wide Web, where a complex architecture connects individuals, organizations, and information across the globe. In this article, we will explore the foundational components and mechanisms that make the web function seamlessly, enabling collaboration, communication, and the dissemination of knowledge on a massive scale.

1. The Client-Server Model: Facilitating Communication

At the core of the web's architecture lies the client-server model. When you interact with the web, your web browser acts as the client, while web servers store and deliver the requested information. This model facilitates communication between your device and the server, allowing you to access web pages, multimedia content, and other resources.

2. Hypertext Transfer Protocol (HTTP): The Language of the Web

The Hypertext Transfer Protocol (HTTP) serves as the language that enables communication between your web browser and the server. When you request a web page, your browser sends an HTTP request, and the server responds with an HTTP response, providing the necessary data. This standardized protocol ensures seamless exchange of information on the web.

3. URLs: Navigating the Web

Uniform Resource Locators (URLs) act as addresses for resources on the web. They consist of different components, including the protocol (HTTP/HTTPS), the domain name (such as "example.com"), and the path (specific location within the website). URLs allow you to navigate the web, directing your browser to the desired web pages, documents, images, or other online resources.

4. Hyperlinks: Interconnecting the Web

Hyperlinks are the fundamental building blocks of the interconnected web. They serve as clickable links embedded within web pages, connecting you to related content, external sources, or different sections within a website. Hyperlinks make navigation effortless, enabling you to explore a vast network of information with a simple click.

5. Markup Languages: Structuring Web Content

Markup languages like HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript play pivotal roles in shaping the structure, design, and interactivity of web content. HTML provides the backbone, defining the structure of a web page, while CSS enhances its visual presentation. JavaScript adds dynamic features, enabling interactive elements and functionality.

6. Web Servers and Web Hosting: Storing and Serving Content

Web servers are the backbone of the web, storing web pages and delivering them upon request. They ensure the availability and accessibility of websites and their associated resources. Web hosting services provide the infrastructure to host websites, making them accessible to users worldwide. Together, web servers and hosting services make the web content accessible to anyone with an internet connection.

7. The Distributed Nature of the Web: Ensuring Reliability and Scalability

The web operates on a distributed network architecture, comprising numerous interconnected servers, data centers, and networks spread across the globe. This decentralized approach ensures reliability, scalability, and resilience. Content Delivery Networks (CDNs) further enhance performance by caching and delivering web content from servers located closer to the user, reducing latency and improving loading times.

Conclusion

The architecture of the World Wide Web encompasses a dynamic ecosystem of components and protocols that seamlessly connect users to information, services, and each other. By understanding the client-server model, HTTP, URLs, hyperlinks, markup languages, and the distributed nature of the web, we gain a deeper appreciation for the intricate framework supporting the web's vast landscape. Embrace this knowledge and continue to explore the boundless possibilities that the Web of Life offers.

Learning by books or videos?

Oreste Abizera — Tue, 27 Apr 2021 06:42:32 +0000

Self-taught developer, this is a term which is mostly used in the programming field to refer to someone who has taken programming skills in any way apart from college. They use any kind of means like attending training, reading books, watching videos, etc. Here the question arises, what to choose between learning by reading books and learning by watching videos? Let's tackle it in this article.

Quick note: This article is not only for self-taught developers but also for college students who are learning new things after studies or revising their courses.

From the Twitter poll I made, many like studying by watching videos than reading books
// Detect dark theme var iframe = document.getElementById('tweet-1384112999003164672-638'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1384112999003164672&theme=dark" }

I'm going to pass through some merits and demerits of both techniques and this will help you to decide which one can work for you.

Merits of Learning By Videos

1. Engages more senses (audio) and adds motion
Learning by videos engages more sense than learning by books. When you want to learn by hearing the sound, that's okay go ahead and if you want to read the words the instructor is saying in the video, no worries turn on subtitles. This flexibility of learning by videos is a great advantage.

2. Video how-to’s stronger than photos or illustrations – great for physical skills
When it comes to learning how to do something, I prefer the usage of videos. Let's take an example that I'm learning to code (I'm a beginner) and I want to write a program that will sum up two numbers. If I choose a book I can just go there and copy the code and paste it in my IDE and I'm not sure that I will get well what the code means. I prefer taking a video and seeing the instructor coding from the start to the end of the program. I will see the most common errors he/she will face and how they will be solved. I will realise every change of the program after every change in code instead of just going and grabbing the final working code without knowing what every line does. Simply that's why I will go for videos on this scenario.

3. Feels more conversational
When watching videos while learning, you feel like you are having a conversation with your instructor. This helps you to not get bored by the course although you may also get bored like if the course is very big or not properly understood.

Merits of Learning By Books

1. Not tied to a computer or electronic device
This is one of the most important points about learning by books, "you are not tied to an electronic device". This is the fact that when you don't have access to computers or other electronic devices at a moment, you can still sharpen your skills while learning by reading the books. I know many people are not good fans of reading but it's just something that you have to practice because it might help you one time.

2. We can search e-book
One of the great advantages of e-books is that you can make a search in the book and jump right to the point you want. Let's take an example that someone sent me a book called "Introduction to Javascript volume 1" and I have some experience with Javascript, maybe what I want to learn right now are Callback functions. I can search for that keyword and if it is available in the book, I will jump right away to the topic of Callback functions and I will be able to study what I want with no much struggles.

3. Smaller storage
Storing 1000+ eBooks/GB compared to 23 minutes of HD video/GB is favourable to people who don't have devices with large storage. Books take small space on the memory. When you will need to store a lot of information and have a small space, I would recommend using books.

Learning By Books drawbacks

1. Color Illustrations/pictures are usually limited
In many hard books, you will find only black and white pictures and Illustrations. This can lead to bad transaction of message from the book to the readers. This may even discourage someone from continuing to read the book's content even if it may contain useful information.

2. Harder to learn a practical course
While learning by books, this issue is one of the most issues faced by many people. When learning a practical course using books it is not easy to identify how the book writer wanted something to be done. You can see the result but you will not realize the steps where he/she reached and stop a bit before continuing. You won't know the errors he faced when making practice and how he solved them and when you meet them it will give you much headache. This occurs because mainly in the books, they show only the working part.

3. Consume a lot of time
There are millions of books in the libraries and online stores like Amazon. A lot of them contains above 150 pages. It is too hard to read more than 4 or 5 books. This is hard because it takes a lot of time to read a book and finish it. When you will have to read a lot of them, you will be forced to read them fast hence losing some important key points in the book.

Learning By Videos drawbacks

1. Voice or manner of speaking can be distracting
It always occurs that the voice or manner of teaching of an instructor can distract you. For example, if you are watching a course and the instructor's voice is very low then learning that course becomes more difficult. Another example is when an instructor is saying many ehm,um,... This may also distract you and discourage you to learn the course.

2. Can’t jump right to the area you need
Here I don't mean to say that you can't skip some parts of the video or jump to a given minute and seconds. What I mean is that if I know the topic I want to study in that video, there is no way I can force the video to jump to the topic I want. Considering the example I talked about above on the merits of Learning by books, when I have a Callback functions topic and I have a video, there is no way I can jump to my topic when I don't know the minute where it is. This is a big drawback of learning by videos.

3. Large storage requirements
As technology is increasing, videos are also being developed and qualities are developing. Improvement of qualities goes with an increase in storage. Videos with high qualities like 1080p, 4k,... takes more space on the memory which may be a big hindrance to some people who can't afford to buy devices with large storage. This will limit them to keep a lot of videos on their devices.

Conclusion
In recent years, videos are developing at a high rate whereby now we have technologies like video conferencing where people can talk to each other live. Books also remain as one of the major ways to store information and learn whether you have an electronic device or not.

When deciding a way of learning between these two, I recommend that you must try them and choose the one that works best for you.

opinions of Twitter users:
// Detect dark theme var iframe = document.getElementById('tweet-1383723977575604227-344'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1383723977575604227&theme=dark" }

Thanks for reading this article until this line. If you prefer, you can let me know what you think about this topic and which one you like among those two learning techniques. I hope you liked it, feel free to share it. You can find me anytime on Twitter and Instagram. See you in the next article!😍😍

How to use Dev.to article API's in react js your project.

Oreste Abizera — Sun, 17 Jan 2021 13:36:48 +0000

In recent days, I started writing articles on Dev.to. I found it more interesting (thanks to Dev.to developers team). After that, I wanted to add my articles on my personal site as long as I post them on Dev. I found an interesting API which we are going to explore and see how to use in react. Welcome:

Let's get started:
First of all, we are going to use this endpoint: https://dev.to/api/articles?username=oreste. Feel free to change username to fetch articles from another user. mine is oreste.

Initialize your project
Create a react project by using create-react-app or any other approach you prefer.

Edit App.css
Edit App.css and add the following code:

At this point, we are fetching articles and keep them in our state. No output on the screen yet, but since we have consoled articles, when we look at the console we should see something like this:

You can expand the arrays to see the content of them.

Display articles in the browser
Now after accessing our data in the console, we need to display them within the browser. Replace {/* content goes here */} comments with this code:

<div className="articles">
        {articles.map((article) => {
          return (
            <div key={article.id} className="article">
              <a href={article.url} className="title">
                {article.title}
              </a>
              <img src={article.social_image} alt={article.title}></img>
              <p>
                {article.description} <a href={article.url}>Read More.</a>
              </p>
              <p>
                {article.readable_publish_date} | {article.tags}{" "}
              </p>
              <p> {article.public_reactions_count} reactions</p>
            </div>
          );
        })}
      </div>

Add Some css in App.css

.articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.article {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  color: white;
  border: 2px solid #000000;
  margin-top: 2rem;
  padding: 0 0.7rem;
}
.article a.title {
  text-decoration: none;
  color: white;
  font-size: 20px;
  margin: 1rem;
}

@media screen and (min-width: 768px) {
  .articles {
    flex-direction: row;
    justify-content: space-around;
  }
  .article {
    max-width: 45%;
  }
}

Our App is now finished:

Thanks For reading this article. I hope you enjoyed it. If you want the code of the app, find it here. You can also test it here. To read more about FileReader visit this site.

You can find me anytime on Twitter and Instagram. Have a nice day😍😍

Image Live Preview app with React.js

Oreste Abizera — Mon, 28 Dec 2020 15:25:23 +0000

In the beginning, the web was only text. And it was somehow boring. It didn't take too long for the introduction of images (one of the best types of content) on the web. Today we are not going to talk about how to upload images. We are going to look at how to preview an image on the frontend before uploading it to the server. Hope you don't get bored.

I'm using React js in this article.

Let's get started:

Firstly create a react js project by using create-react-app or another approach you want.

Edit App.js and insert this code.

The result will be:

Update handleFile function with these codes:

let tempFile = e.target.files[0];
const reader = new FileReader();
reader.addEventListener(
"load",
function () {
  setfile(reader.result);
},false);

if (tempFile) {
   reader.readAsDataURL(tempFile);
}

I added a few CSS in App.css

form {
  width: 60%;
  margin: 5rem auto;
}

form div.output {
  border: 1px solid rgb(218, 213, 213);
  margin-top: 20px;
  padding: 10px;
  max-width: 50%;
}

.output img {
  max-width: 100%;
}

Finally, our app has a new look.

Thanks for reading this article until this line. If you want the code of the app, find it here. You can also test it here. To read more about FileReader visit this site.

You can find me anytime on Twitter and Instagram. Have a nice day😍😍

Basic javascript string methods and properties you should know

Oreste Abizera — Thu, 24 Dec 2020 08:15:10 +0000

Strings are one of the essential features found in programming. Simply they are pieces of text. I am sure that you will come across it in every programming language you might be using(if you didn't). In this article, let's look at basic javascript string methods you should know.

Let's get started:

1. String length
length property is one of the properties you will probably use in strings. It returns the length of the string.

2. Convert to Lowercase
toLowerCase method returns the lowercase version of the string.

3. Convert to Uppercase
toUpperCase method returns the uppercase version of the string.

4. startsWith method
startsWith method returns whether the string starts with the provided string.

5. endsWith method
endsWith method returns whether the string ends with the provided string.

6. includes method
includes method checks whether a string contains the specified string/characters.

7. charAt method
charAt method Returns the character at the specified index (position).

8. concat method
concat method joins two or more strings and returns a new joined strings.

9. repeat method
repeat method Returns a new string with a specified number of copies of an existing string.

10. slice method
slice method extracts a part of a string and returns a new string.

11. replace method
replace method searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced.

12. split method
The split method is used to split a string into an array of substrings and return the new array. If an empty string is used as the separator, the string is split between each character.

13. trim method
trim method removes whitespaces from both ends of the string. It does not change the original string.

14. substr method
substr method gets a substring beginning at the specified location and having the specified length.

15. substring method
substring method extracts the characters from a string, between two specified indices, and returns the new substring. It does not include the end index.

These are some basic string methods you should know. I promise you will need them sometime.

Did you find it helpful? You can find me on Twitter. Have a nice day!😍😍