DEV Community: Eduardo Ribeiro

What tech/programming communities are you in?

Eduardo Ribeiro — Sun, 18 Apr 2021 10:25:37 +0000

If you plan on following a career in software engineering, and if you want to learn more and get better every day, it is essential to not go at it alone. Having a group of people with the same interests, ambitions, and goals as you, will not only help you progress a lot faster by interacting and learning with people above your level, but it will also provide you an opportunity to give back to the community. That is why I started blogging and being active on dev.to ;)

I am interested in knowing more about some online communities related to tech blogging, and also programming in general: Discord servers, Facebook groups, etc.

Are you active in any community? Please let me know in the comments!

Have a nice day! :)

How to get updates from a server in real-time?

Eduardo Ribeiro — Sun, 11 Apr 2021 17:29:31 +0000

With the increase of complexity and the overall evolution of new systems and applications, communication between entities is no longer just the client making requests to a server. There are many situations that require the server to inform the clients of certain events, and in some cases that information might even be needed in real-time, with little to no delay.

Here are some examples of use cases that need real-time communication of updates, from the server to the client:

Messaging Apps. Messaging applications let the user send messages to other users, and receive messages in real-time.
Stock Charting Platforms. Applications that keep track of stock prices need to send events to the client-side in real-time, so the latest stock updates can be displayed in a web application, for example.
Multiplayer Games. Online game servers need a way of sending to each user information about other users that are playing.

This process is not always easy, especially when the system needs to manage a large number of clients, which increases the importance of some concepts like scalability. Let's check out some ways of implementing real-time communication from a server to clients.

HTTP Polling

Nowadays, the standard for client-server communication on the web is through the HTTP protocol. The process is simple: the client starts the request, initiates the communication with the server, and asks it to either return some information or perform a certain action. When the server receives the request, it parses its content and returns a response to the client.

This process is appropriate for communication between systems, when that communication is started by the client. What if the communication needs to be started by the server, to give an update to the client?

It turns out we can in fact use HTTP requests to get updates from a server, using HTTP Polling. HTTP Polling consists of the client issuing an HTTP request to the server, asking if the server has any updates for it. If it doesn't, the server returns an empty response. If the server does in fact have something to give to the client, the client receives it as the response from its HTTP request. The client will continue to issue HTTP requests periodically, following a time interval, with the intent of collecting the most up-to-date information the server might have for it.

This approach is not very efficient, and has some heavy disadvantages:

Wastes resources. Especially if the server updates are sparse, it can happen that the majority of requests made by the client are returned empty. Therefore, there is a large number of requests that are essentially useless and are just wasting resources.
Can have a large delay. Depending on the time interval used by the client to make requests, the information received from the server might not be the most up-to-date, and messages might be received with a delay basically as big as the time interval.

HTTP Long Polling

Another solution that also uses HTTP requests and that solves some downsides of HTTP Polling is HTTP Long Polling.
The difference in this approach is that after an HTTP request from the client, the server saves and holds that request until there is an update to be transmitted to the client. When that happens, the response is sent back to the client, and the client issues another request to the server, that will only return when the server generates the next update.

The disadvantages of HTTP Polling are somewhat mitigated. The overhead of issuing periodic HTTP requests is reduced by the server holding the requests and only returning if there are new updates. The message delays are also taken care of, because as soon as an update is generated, the server will respond to the currently stored request. So HTTP Long Polling can be used to implement real-time communication.

However, it still has some downsides, mainly when it comes to scalability. The server needs to store connections for every client that wishes to receive real-time updates, and if the number of users is large, that can be a problem. If the server events occur very frequently, then the number of HTTP requests from clients increases a lot.
Another problem is the need for a mechanism that prevents requests to be stored in the server indefinitely. It must be configured in a way so that connections do not stay alive permanently. This can be done with the use of connection timeouts, for example: after a certain amount of time, the server stops holding the request and sends back an empty response. It is then up to the client to issue a new request.

WebSockets

WebSocket is a standardized communication protocol that provides full-duplex communication (meaning that data can go both ways) over a single TCP connection. It enables 2-way communication between a web browser and a web server with lower latency than polling, by setting up a permanent connection between both and allowing information to be sent in both directions. Both are capable of sending messages anytime. The connection stays open until any of the two explicitly finishes it.

Unlike HTTP Polling or Long Polling, by having a WebSocket connection between a client and a server we can have the server issue updates to the client without it being first requested by the latter.

WebSocket is distinct from HTTP, however it uses HTTP initially to setup the connection between the client and the server. That HTTP connection is then upgraded to a full-duplex permanent WebSocket connection.

A lot of applications that need real-time communication are using WebSockets, from online games like agar.io to messaging apps like Slack.

The main advantages of using WebSockets are:

It is part of the HTML5 specification. Basically all modern browsers support the use of WebSockets.
It is full-duplex, so not only the server can send messages to the client, but the other way around can happen too. In contrast, the other solutions that we saw until now are only half-duplex, because the process needed to be started by the client.
WebSockets are not blocked by firewalls and traverse proxies.
It allows the implementation of other protocols and technologies on top of it, like Publish & Subscribe (which we will see next).
It eliminates latency problems that may arise from Long Polling, especially if the server generates a lot of updates. There is only one permanent connection between each client and the server, with no need to issue requests and responses back and forth.

However, some downsides may still be visible in some systems:

It may still be hard to scale on the server-side, because it will need to handle one open connection for each client.
Now the client will also have an open connection at all times, and in less powerful devices that can be a problem (example: battery management on phones or IoT devices).

Publish & Subscribe (Server-Sent Events)

Publish-Subscribe is a messaging pattern in which the entities involved can be classified as either publishers or subscribers. Subscribers show interest in certain types of messages. Publishers produce updates and events and, when a certain message needs to be sent, they will send it to everyone who subscribed to that type of message.
Using this pattern, the publishers do not send the message explicitly to each subscriber, but instead classify the messages according to their type and send it to one or more data streams called channels or topics. This way, each publisher has no information about who are the subscribers (if any) that will receive the published message. Similarly, each subscriber is not aware of which publishers (if any) there are; they subscribe to channels/topics of interest, so they can be notified when a new message has been published by a publisher.

By using this pattern, publishers and subscribers are decoupled and do not communicate directly, only through channels. This way, each publisher does not need to maintain a connection with all the subscribers, and only needs to care about sending messages to the channel. Similarly, each subscriber only needs to listen to the channels of interest in order to get the latest updates.

In practice, there is often an intermediary layer called a message broker, that handles the distribution and filtering of the messages. Some popular message broker technologies are RabbitMQ, Apache Kafka, and the AWS Amazon MQ. However, not every message broker is designed for real-time communication; some of them focus more on reliability and ordering of messages, for example.

So, how can we use the PubSub pattern to implement real-time communication from the server to the client?

The server will be the publisher: each event that is generated and that needs to be communicated will be encapsulated in a message and sent to the message broker. Every client is a subscriber and will be listening for events through the message broker, receiving them with little to no delay.

An advantage of using this approach for real-time communication is that it is very scalable. The server does not need to have a connection to every client, it only needs to send the events to the message broker. However, the message broker also adds more complexity, as it is another service that needs to be managed.
If we need full-duplex messaging, even though this can work the other way around if the server is a subscriber and the client is a publisher, an approach using WebSockets may be more advantageous.

Honorable Mention: Webhooks

A Webhook is a method of implementing a custom callback to some event. A server might provide a Webhook for a certain type of event, meaning that when that event happens, the custom callback is triggered. This custom callback comes in the form of an HTTP Request to some URL provided to that server, meaning that when the event occurs, the server will issue a request to the given URL, providing information about it.
While this can be used for client-server communication (browsers have a hacky way to have a JavaScript server running), it is most commonly used for server-server messaging.

Conclusion

Nowadays, web applications and systems in general are becoming more and more complex. In an era governed by data, it is essential to know how to design a system that can present to the user large quantities of information in real-time. In this article, we have covered several ways to do that, using various technologies, protocols and approaches, and discussing their pros and cons.
As always, I hope you have learned something new with this, and that it motivated you to research more about this topic! See you next time 😃

References

Get Started with Scala

Eduardo Ribeiro — Sun, 04 Apr 2021 11:45:39 +0000

This article was originally posted on my blog.

In the last few weeks, I started learning the basics about the Scala programming language. I wanted to learn a language that was popular and effective in concurrent programming and distributed applications. In this article, I will talk about the basics of Scala, some cool aspects and features of the language that separate it from the most common languages like Java and Python, and provide a set of amazing resources to learn Scala and go from beginner to expert.

What is Scala?

Scala is a general-purpose language that combines two programming paradigms: object-oriented programming and functional programming. Scala source-code can be compiled to Java bytecode, so it can run on the Java Virtual Machine (JVM), and is compatible with existing Java programs and libraries.

If you are familiar with more traditional OOP languages like Java, you will find most Scala code as not too difficult to read and understand. In Scala there are classes, methods, fields, and the overall syntax is not too different from Java. However, one difference between these two languages is that in Scala, everything is an object: even Java primitive types like int and float. Every variable is an object and every operator is a method.

As it was mentioned, Scala also combines the OOP paradigm with the advantages of functional programming. Functions are treated like "first-class citizens", as they are also variables (and therefore, objects). You can pass them as an argument to other functions or use them as a return value, for example.

Some other features of Scala that are worth mentioning are:

Type inference. You can, but don't need to explicitly specify the data type of a variable or the return type of a function.
Immutability. In Scala we usually operate with immutable values/objects. Any modification should just return another object. This is a major advantage for multithreaded or distributed environments, as it prevents a lot of race conditions.
Lazy Computation. Lazy computation means evaluating an expression or calculating something not when the expression is declared, but only when the result is needed in another computation. You can declare a lazy variable using the keyword lazy.
Good set of collections. Scala provides various classes and traits to collect and manage data, like List, Seq, Set, Map, etc.
Concurrency support and control. Scala provides in its standard library the Actor class, which gives a higher level of abstraction for writing concurrent and distributed systems because we don't have to directly deal with explicit locking and thread management. There are also tools that support Scala in distributed and concurrent applications, like the Akka toolkit.

While Scala is a general-purpose language that can be used for a lot of things, and can basically be used for anything Java can be used for, its main application seems to be in concurrent programming and distributed applications.

A Simple Example

Here is a very simple example in Scala, where we use a list to calculate the sum of a set of numbers. We then create a new list by appending a new element to the already existing list, and calculating the new sum of elements.

object Example {
    def main(args: Array[String]) = {
        val l = List(1, 2, 3)
        val lsum = l.sum
        println(s"$l - Sum: $lsum")

        val l2 = l :+ 4
        val l2sum = l2.sum
        println(s"$l2 - Sum: $l2sum")
    }
}

Here is a short description of the code:

We define a main function inside the Example object, where all the code is contained.
Declaring an object is like declaring a new class, and creating the singleton instance for it.
We then use the val keyword to declare an immutable variable (constant), and we create a new List with the elements 1, 2 and 3.
We use l.sum to calculate the sum of all the list elements.
The println() function is then invoked to print to the console the contents of the file and the sum of all elements. We use string interpolation to insert in the string the value of the variables, using the $ character.
We use :+ to append an element to the list. Notice that l is not modified, instead we use a new immutable variable l2 to store the result.
We then repeat the same operations for the new list l2.

Let's say this program was stored on a file called FirstExample.scala. We first need to compile the contents of the file to Java bytecode, and then we can execute the generated bytecode.

To compile, we can use scalac like so:

> scalac FirstExample.scala

And to execute the generated bytecode we can do:

> scala FirstExample

Here's what we can see on the console after we execute the program:

List(1, 2, 3) - Sum: 6
List(1, 2, 3, 4) - Sum: 10

Some Other Cool Things about Scala

(Almost) Everything is an expression

For the most part, almost everything in Scala can be classified as an expression, meaning that it evaluates to a certain value. One thing that can be used as an expression in Scala, in contrast to most common languages, is an if-statement. That allows us to do stuff like this:

val value = if (something > 42) 55
    else if (something > 23) 45
    else if (anotherSomething > 84) 1000
    else 0

Another feature of Scala that also can be used as an expression is code blocks. Code blocks are groups of instructions or statements inside curly brackets; the value returned by the code block is the value generated by its last statement. We can then do stuff like this:

val aCodeBlock = {
    val localValue = 67
    localValue + 3 // value returned by the code block
}

The variable that is receiving the value from the code block would be assigned with the value 70.

map, flatMap, filter and for-comprehensions

The 3 methods map, flatMap and filter are some of the most commonly used methods when dealing with data structures of any kind, and if you've done any significant programming in Scala, you likely already used them at some point. These methods allow us to do some powerful things in very little code, removing the need for many loops and iterations when using things like lists.

Let's start by creating a very simple List:

val l = List(1, 2, 3)

We can use the map method like so:

val l2 = l.map(_ + 1)
println(l2) // List(2, 3, 4)

This creates a new list, applying the function passed as an argument to map to every element of the list.

We can use filter to select only some elements from the list:

val l3 = l.filter(_ % 2 != 0)
println(l3) // List(1, 3)

This way, we create a new list l3 containing only the odd elements of the original list.

The flatMap method is similar to the map method, but flattens the result of various lists into just one. Let's say we have the following function in our code, that receives an integer, and outputs a list containing the original value and the square of that value:

val toSquare = (x: Int) => List(x, x*x)

We can then use flatMap like so:

val l4 = l.flatMap(toSquare)
println(l4) // List(1, 1, 2, 4, 3, 9)

However, for more complex things, we might need to use a combination of these 3 methods, and the code might not be as readable as we want. Let's take another example, where we have two lists, one with numbers and the other with names, and we want to create strings representing the combination of all names with only the odd numbers.

val names = List("Bob", "Shirley")
val numbers = List(1, 2, 3)

With the methods shown above, we could do something like this:

val result = names.flatMap(name => numbers.filter(_ % 2 != 0).map(number => "" + name + number))
println(result) // List(Bob1, Bob3, Shirley1, Shirley3)

As you can see, it's not the most readable thing. Another way we can do it is by using for-comprehensions:

val result2 = for {
    name <- names
    number <- numbers if number % 2 != 0
} yield "" + name + number
println(result2) // List(Bob1, Bob3, Shirley1, Shirley3)

Much better!

Pattern Matching

This is something that is present in some other programming languages, like Haskell, for example.

If you are familiar with C++, Java, or other popular languages, switch statements are nothing new to you.

val value = 55
val order = value match {
    case 1 => "first"
    case 2 => "second"
    case 3 => "third"
    case _ => value + "th" // default case
}

However, in Scala we can do what is called pattern matching: instead of trying to match a variable against concrete values, we can match the variable against a certain structure, and then use its inner variables or values in the match expression.

Like this:

val tuple = ("Bob", 23) // creating a tuple
val result = tuple match {
  case (name, age) => s"$name is $age years old"
  case _ => "Default case"
}
println(result) // Bob is 23 years old

or this:

val myList = List(1, 2, 3)
val result = myList match {
    case List(_, 2, _) => "This list contains 3 elements and has a 2 as the 2nd element"
    case _ => "Idk what this is"
}

Some good resources to learn the basics of Scala

If you are interested in exploring what Scala has to offer, you can check out the following resources that I found useful for myself:

Scala at Light Speed - Fast-paced Scala course on YouTube, that covers the absolute basics. A good place to start 🙂
Scala Online Resources - The official Scala website and documentation has a curated list of free (!) resources that allow you to master Scala and go from beginner to expert.
ScalaFiddle - Lets you write Scala in your browser. If you want to explore and play with Scala before taking the time to install things locally, or if you just want to do quick experiments and tests, ScalaFiddle might be useful to you.

As with all programming languages, learning Scala is not just about watching content. Nothing replaces practice and actually writing code, so you can try to implement some basic algorithms in Scala, or solve some problems on Leetcode 🙂

Conclusion

Scala is a language that I definitely want to learn more about in the future. Most importantly it's a door into a new paradigm that I never explored before, which is functional programming.
In the future, I will be doing more Scala posts, when I learn new stuff about the language, and hopefully also share some projects that use it 🙂

As always, thank you for reading, and until next time!

References

Where should I learn system design & architecture?

Eduardo Ribeiro — Sun, 28 Mar 2021 11:31:43 +0000

Hello!

I've been wanting, for some time, to get better at and increase my knowledge in the field of system design and software architecture, covering topics like microservices, design patterns, etc.

What are some good resources that I can learn from? It can be online courses, books, blogs, YouTube channels...

Thank you! :)

What are your favorite tech blogs/websites?

Eduardo Ribeiro — Sun, 28 Mar 2021 11:26:59 +0000

Hello!

I've been interested in following some tech blogs for a while. Recently I've discovered apps like Feedly, which aggregates posts from various blogs and websites that you can "subscribe to", giving you a curated feed with the content from those sources.

Now I'm looking for some blogs/websites related to programming, software engineering, and tech in general. What are your favorite tech blogs/websites? :)

How to Start Contributing to Open Source Projects

Eduardo Ribeiro — Mon, 22 Mar 2021 10:57:42 +0000

This article was originally posted on my blog.

The concept of open source software was introduced to me at the beginning of my software engineering journey, in my first year of university. In fact, my first ever college assignment was related to open source: I had to research about it and briefly present what it was all about. Unfortunately, first-year me didn't pay too much attention to it, but over time I started rediscovering this idea and began getting more interested in it. Lately, I've been doing some research, hoping to find some interesting open source projects to start contributing to, and I figured I might as well share my experience with you 😄

What is Open Source?

Open source software is software whose source code is publicly available and accessible for everyone to inspect, modify, and contribute.

In contrast, software that is private and that is only accessible to the people or organization who created it can be described as "closed source" software. Skype is an example of closed source software. It is completely owned by Microsoft and no other organization or person can access its source code, neither to view it nor to modify it.

But open source is different. Its authors use certain platforms, like GitHub, to make the code publicly available, inviting others to not only use the code as they like (to view it, copy it, learn from it, etc), but to also propose changes and enhancements and introduce new functionalities. An example of open source software is the Mozilla Firefox browser. In most cases, open source software is free or at least provides a free version, however they often rival their closed source equivalents, which can cost hundreds of dollars or more.

As explained in this article, just like with closed source software, in order to use open source software the user must accept the terms of a license. However, open source licenses grant permission to use the software for any purpose or context.

By placing an open source license on a project, a person or organization agrees to:

Make the entire source code available to anyone
Allow anyone to modify and enhance the source code and the product
Allow the creation of derivative works or other projects that build on top of it
Allow the project to be utilized by anyone, for (pretty much) anything.

Why is Open Source so important?

"Open source licensing encourages innovation through collaboration. Without it, many of the technologies we take for granted today would never have developed, or would be locked away behind patent law. The open source movement is the reason that technology has developed at such a breakneck pace for the past few decades." - from What is open source, and why is it important?

The concept of open source allows collaboration and partnerships that would otherwise not be possible. For example, a programmer in San Francisco might open a Pull Request, that would later be reviewed by someone in France, and commented by someone in Japan, while a solution is being proposed by someone in Finland... it lets knowledge and experience easily be shared among a community that can be comprised of people from all over the world. This movement is key for the overall advance of technology, and helps keep the world moving forward.

Also, like it was previously mentioned, most of the time the software is completely free to use, however in terms of features and performance it can rival some other products in the same market, that are private and owned by a company and that can cost a lot of money. Open Source products sometimes are a cheap alternative for people who don't have the means.

What are the advantages of contributing to Open Source projects?

Now let's think from a developer's perspective. As a software engineer or someone who is studying software engineering, why should you contribute to open source projects? Here is a list of topics that showcase the advantages that you can get from doing so:

If you are new to software engineering or programming or just want to start a new project, this is an excellent way to gain (early) experience, and it looks pretty nice on your CV. It can be challenging at first, but remember you are not doing this alone, most project communities are active and have a lot of experienced users who already contributed a lot of times, who are ready to help newcomers if they have any questions.
It provides you what you can't get with small individual projects: you can get experience with large codebases by contributing to real-life, big, production projects that are used by millions of people around the world.
No prior experience is needed in order to start contributing to these projects. There are a lot of big, important projects, that label some of their issues as "Good First Issue" or "Beginner", etc, to attract new contributors and people who may not have a lot of experience. Open Source is for everyone!
You collaborate with people who may have more experience than you. It is a good way to learn more and increase your networking. At the same time, you are able to increase your recognition on platforms like GitHub, for example.
You feel more accomplished and feel like you are doing something useful, because once again you can be contributing to big projects that are actually used in real-life.
You feel part of a movement, and of something bigger? Open Source software drives the world forward, it's innovation through collaboration. It is also a way to give back to the community. It's fun and gives you personal satisfaction.

How can I contribute to an Open Source project?

If you have never contributed to an open source project, and don't know how to, fear not! The process is standardized over pretty much every project, so if you found an interesting one that you would like to be involved in, here is what you should do:

Read the contribution guidelines. Most of the time, open source projects have in their repository what is called the contribution or coding guidelines. This is normally a document written in Markdown, or a web page, that describes what you should do to familiarize yourself with the codebase and to contribute to the project. Normally it has information about how to do a local setup of all the necessary technologies, the description of methodologies or workflows that are being used (e.g. Git Flow), the coding style or any constraints that you need to have into account while coding, etc. So you should definitely check this out in the beginning.
Choose the issue you want to take care of. In the project's repository, there is probably an Issues section that lists all of the currently open issues and tasks that one can choose to do in order to contribute to it. Pick one that you find interesting or that you feel like you can take care of. For beginners, look for issues that have labels like "Good First Issue" or "Beginner" or similar. Almost every medium/large project has issues for newcomers, so don't worry if it's your first time 🙂

Fork the repository. Now that you have read the guidelines and found an interesting issue, you must fork the repository, in order to have a copy of the codebase that belongs to you and that you can directly change.

Create a branch to work on your issue. In your fork, create a new branch; this is where you will write your code. The naming of the branch should take into account the project's guidelines, and the issue that you are focusing on.
Code away! You will then write the best code of your life. Maybe.
Make a Pull Request. Once you're done coding, you must make a Pull Request, with the source branch being the new branch that you created in your fork, and the destination branch being the master branch or develop branch on the original repository (it may depend on the guidelines, so if you are unsure you should take a look at it once again). Here is an example PR from the Visual Studio Code repository:

Get feedback. Maybe your PR wasn't perfect and you made some mistakes, but that's okay! If there are things you should change or improve, other contributors and maintainers of the project will comment on your Pull Request and give indications on what you should change. Gather this feedback and make the necessary changes to your code.
Approvals! Once your code is good enough and you have solved the issue you chose, other contributors will approve your Pull Request, so it can be merged into the main codebase. In the majority of open source projects, you need at least 2 approvals in order to make the merge into the destination branch.
Profit! Congrats! You have just made your first contribution to an open source project! 🎉🎉🎉

How do I pick an Open Source project to contribute to?

So, now you know what is Open Source, why it's beneficial for you to contribute to OS, and you also know step by step how you can do that. One big question remains: how to find that perfect product/repository to contribute to? I mean, there are tons of projects out there, but how can you find the right one to focus on, especially if it's your first time?

Firstly, it's important to mention that just because an open source project is big, does not mean someone with little experience cannot contribute to it! As I've said before, if you never contributed to open source before, try to find issues that are tagged with "Good First Issue", "Beginner", "Newcomer" and similar. It can also happen that the contribution guidelines of the project indicate what are the issue labels you should be looking for, if you are a beginner.

There are open source projects of all types, that use all types of languages: JavaScript, Java, C++, Python, Scala... there are web projects that use frontend frameworks like React, there's databases, widely used libraries, etc. Choose an area that interests you and that you want to get better at. In order to make a better contribution, My advice is to choose a project that uses languages or frameworks that you are already familiar with, but nothing is stopping you from getting out of your comfort zone and picking something you never used before! 👀

Despite all this, my main tip for choosing a project to contribute to is: find a project that resonates with you, that speaks to you personally, and that you find useful. Maybe you might even use it already. This way, not only you might already be familiarized with the concept of the project, but more importantly you will be more motivated to actually do the work and finish your contribution. It isn't uncommon for someone to decide to make a contribution to a project, only to lose interest later on and never submitting a Pull Request. So this part is really important! 😄

Some good Open Source projects to contribute to

If you need some inspiration to pick a project, is a curated list of projects that you might find interesting:

Elasticsearch

According to their website, "Elasticsearch is a free, open and distributed data search and analysis engine for all types of data, including textual, numeric, geospatial, structured and unstructured. [...]Known for its simple REST APIs, distributed nature, speed and scalability, Elasticsearch is the central component of Elastic Stack, a set of free and open tools for ingesting, enriching, storing, analyzing and visualizing data."

Link to website
Link to GitHub repository
Primary languages/technologies: Java
Issue labels for beginners: "good first issue"
Number of contributors: 1595
Number of repository stars: 54.2k

Habitica

Habitica is a productivity app like no other. It's a habit tracker app that treats your goals like a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor.

Link to website
Link to GitHub repository
Primary languages/technologies: JavaScript, Vue, HTML, CSS, Node, Express, MongoDB
Issue labels for beginners: "good first issue"
Number of contributors: 607
Number of repository stars: 8.2k

Visual Studio Code

If you are a programmer, chances are you already know what VSCode is, and you may even use it. VSCode is one of the most widely used IDEs, that was made by Microsoft but is now also one of the biggest open source projects.

Link to website
Link to GitHub repository
Primary languages/technologies: TypeScript
Issue labels for beginners: "first timers only"
Number of contributors: 1385
Number of repository stars: 113k

freeCodeCamp

"freeCodeCamp.org is a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) nonprofit to help millions of busy adults transition into tech. Our community has already helped more than 10,000 people get their first developer job. Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills."

Link to website
Link to GitHub repository
Primary languages/technologies: JavaScript, React, CSS, Node, D3.js
Issue labels for beginners: "first timers only"
Number of contributors: 4222
Number of repository stars: 322k

React.js

A declarative, efficient, and flexible JavaScript library for building user interfaces. Probably the most popular frontend framework today.

Link to website
Link to GitHub repository
Primary languages/technologies: JavaScript
Issue labels for beginners: "good first issue"
Number of contributors: 1539
Number of repository stars: 166k

Node.js

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser.

Link to website
Link to GitHub repository
Primary languages/technologies: JavaScript
Issue labels for beginners: "good first issue"
Number of contributors: 2950
Number of repository stars: 77.8k

Jarvis

"Jarvis is a simple personal assistant for Linux, MacOS and Windows which works on the command line. He can talk to you if you enable his voice. He can tell you the weather, he can find restaurants and other places near you. He can do some great stuff for you."

YouTube video showing Jarvis
Link to GitHub repository
Primary languages/technologies: Python
Issue labels for beginners: "difficulty/newcomer"
Number of contributors: 149
Number of repository stars: 1.9k

Brave Browser

Desktop browser for macOS, Windows, and Linux.

Link to website
Link to GitHub repository
Primary languages/technologies: JavaScript
Issue labels for beginners: "good first bug"
Number of contributors: 67
Number of repository stars: 8.7k

Tensorflow

TensorFlow is an end-to-end open source platform for machine learning. It has a comprehensive, flexible ecosystem of tools, libraries, and community resources that lets researchers push the state-of-the-art in ML and developers easily build and deploy ML-powered applications.

Link to website
Link to GitHub repository
Primary languages/technologies: C++
Issue labels for beginners: "stat:contributions welcome"
Number of contributors: 2934
Number of repository stars: 154k

Godot Engine

Godot Engine is a feature-packed, cross-platform game engine to create 2D and 3D games from a unified interface. It provides a comprehensive set of common tools, so that users can focus on making games without having to reinvent the wheel.

Link to website
Link to GitHub repository
Primary languages/technologies: C++
Issue labels for beginners: "junior job"
Number of contributors: 1383
Number of repository stars: 37.3k

Kubernetes

Kubernetes, also known as K8s, is an open source system for managing containerized applications across multiple hosts. It provides basic mechanisms for deployment, maintenance, and scaling of applications.

Link to website
Link to GitHub repository
Primary languages/technologies: Go
Issue labels for beginners: "good first issue"
Number of contributors: 3044
Number of repository stars: 75.5k

Conclusion

Open Source projects are important not only for people who use them, as some of them can be a great cheap/free alternative to some paid products, but they are also very valuable for programmers and software engineers that want to gain experience and get their hands dirty on real-life, big, production projects. They are an easy way to gain experience, and I think more developers should be contributing to them.

Besides the projects that I mentioned above, I will leave you with two good resources that I found useful for me, so you can find even more open source projects that may interest you!

Awesome First PR Opportunities: this repository contains a (pretty large) list of beginner-friendly open source projects, separated in different languages. You should definitely check it out!
First Timers Only: website that guides newbies and beginners on how to make their first open source contribution.

As always, I hope you learned something from this article, and until next time!

References

Understand Blockchain and Smart Contracts (2/2)

Eduardo Ribeiro — Sun, 14 Mar 2021 11:07:56 +0000

This article was originally posted in my blog.

This is the second post of a 2-part series in which we talk about the concepts of blockchain and smart contracts, clarifying what they are, how they work, what they are for, and how they can shape the future.

The first part of the series talks about blockchain; it is important to be familiarized with the concept of blockchain in order to fully understand how smart contracts work, so it would be fantastic if you could go back and take a look at the first post of the series 😉 Don't worry, I'll wait.

Oh? You're back? Did you read the blockchain article? Are you sure? Hm... 🧐

Okay, I trust you. Let's get started then 😄

What is a Smart Contract?

Smart Contracts are actually not that recent: in 1994, cryptographer Nick Szabo came up with the idea of being able to record contracts in the form of computer code. The main advantage of his idea and this approach was that the contract would be activated automatically when certain conditions are met. It seemed promising, however, it was a new concept that was difficult to execute and put in practice, due to the technology that existed back then.

The idea of smart contracts was finally able to be properly put into practice with the introduction of blockchain in 2009, and the creation of the first blockchain-based smart contracts came in 2015, after Vitalik Buterin created Ethereum. Besides currently being the second-largest cryptocurrency on the planet, it is also a platform that allows other blockchain applications to be built on top of it, providing you the ability to create your own smart contracts using Ether, their currency.

So, to put it concisely:

A smart contract is a computer program or a transaction protocol, which represents an agreement between two people or entities. They run entirely on the blockchain, and all transactions are processed there, without the need of a third party. The transactions only occur after the conditions in the agreement are met, and when that happens, they are performed automatically.

It can be seen as a kind of if-then statement: if and only if a certain condition is met, then the transaction or payment is executed. When that "if" condition is validated, the "then" statement is automatically executed, and there is no chance for changing or tampering with these contracts. That "if" statement can be, for example, an expiration date.

How exactly do smart contracts work?

Hopefully that gave you a better idea of what smart contracts are actually about, but let's try to understand exactly how they work. And for that, nothing better than a simple example 🙂

Let's say that Alice, who's been saving up for months, wants to buy Bob's car. Once they agree on a reasonable price, this agreement between both entities can be formed and saved in the Ethereum blockchain, for example, using a smart contract.

Bob has agreed with Alice that she needs to pay him 30 Ether in order for her to have the car.

The smart contract can then be described, in a very simple fashion, as:

"IF Alice pays Bob 30 Ether, THEN Alice will receive full ownership of the car."

Alice and Bob then create the smart contract using the Ethereum platform.

Once this smart contract has been registered and put into place, it cannot be changed: there is no way that Alice can modify the contract and lower the price, and the same also applies to Bob, who cannot raise the price or change the benefits given to Alice after the payment.

Because of that, Alice can feel safe paying the 30 Ether to Bob, because she knows that she will for sure receive ownership of the car. Bob should be pretty relaxed too: he knows that Alice will only get the benefits if she pays the agreed fee of 30 Ether.

Now, let's think about what would need to happen if Alice and Bob did not decide to use a smart contract, and rather opted for the old-fashioned way.

Without the use of a smart contract, they would need to pay lots of fees to third-party companies, including the bank, a lawyer and a vehicle broker. The whole process would also take fairly longer to conclude, as opposed to using smart contracts: in that case, after Alice completes the payment, the transition of ownership would be automatic and immediate.

What is happening behind the scenes?

It all revolves around blockchain technology. The main advantages and characteristics of the blockchain are the keys to putting the idea of smart contracts in practice.

As mentioned in my previous post, blockchain platforms are decentralized, so they can be used to decentralize smart contracts and make them trustless, removing control from any central party (like banks, government, etc).

Smart contracts on the blockchain also take advantage of immutability and security, making them near impossible to hack for the same reasons explained in my blockchain post (it's still a good time to check it out! 👀). It is also a transparent and traceable process, meaning that all the information about the contract is easily accessible by the participants.

What are the main advantages and disadvantages of smart contracts?

To summarize...

Autonomy – You are the one who makes and controls the agreement, and as it was said, it executes automatically and immediately on the blockchain, eliminating the need for third parties as intermediaries.
Reduced cost – Speaking of third parties, since they are not necessary when using smart contracts, you save all the money that would otherwise be used on lawyers, brokers, etc.
Safety/Trust – All the safety and security mechanisms of the blockchain play in the favor of smart contacts, to make an unmodifiable and immutable solution.
Speed – Smart contracts on the blockchain are automated, shaving a lot of time when compared to a more traditional process with lots of paperwork involved.
Transparency – The conditions on the contract are visible and easily accessible by the participants.
Reliability – Since the smart contract is saved on various nodes on the blockchain, your documents are never lost.
Accuracy – Smart contracts are not only faster and cheaper, but they are also a good way to avoid any human mistakes that could've happened during the process.

However, they are not a perfect solution. Here are some challenges that come with the use of smart contracts:

Difficult to change - The unmodifiable aspect of the blockchain and of smart contracts can be both a blessing and a curse. While it does provide security and safety, if for example there is an error on the code of the contract, the process of fixing that error can be time-consuming and expensive.
Translation into code - Contracts can include terms that are not always fully understood. Smart contracts are not always able to handle terms and conditions that are vague.
Third parties - This one may seem contradictory, since one of the main benefits of smart contracts is the elimination of third parties. However, the issue is more complicated than it seems. It may get rid of the need for brokers or other intermediaries to confirm the agreement, but sometimes, for example, layers may still be needed by developers to understand the terms in order to create the code for smart contracts. Third parties may assume different roles from the ones they take in traditional contracts.

Other problems may also arise, like legal issues related to how governments should regulate these contracts, how would they tax them, etc.

How are smart contracts being currently used?

The scenario of buying/selling goods, like the example that was given earlier, when Alice bought Bob's car, can be a common use for smart contracts but it is far from being their only application. Smart contracts can be used for any type of transaction; it does not have to be financial.

Let's see how some industries can benefit from the use of smart contracts, and some cases where it's already being used:

Insurance Companies - Some companies have already started using smart contracts as a way to implement insurance policies. For example, let's say take the example of guarantee insurance, that covers the loss that can arise from dishonesty, disappearance, etc. Essentially, it compensates customers if they do not receive a desired service or product. In this case, let's say that the insurance company creates a smart contract and sends $250 to it, and the customer sends $50, making a total of $300. If the customer does end up receiving the service or product, the smart contract sends the insurance company the $300, otherwise it would be sent to the customer in order to compensate for their loss. This approach saves time and money, and both parties can be 100% sure that if their condition is met, they will get the money automatically.
Supply Chain - Supply chain is an area that suffers a lot from paper-based systems that slow down the process and introduce the risk of loss and fraud. Smart contracts can be used as a way to mitigate these issues. By providing a secure, digital version to all parties involved, and by automating tasks and payments, then we can do things like triggering the creation/order of a product in the supply chain after a delivery of some finished product at the end of the chain.
Business Management - One way that businesses can use smart contracts is to automate the payment of their employees. Examples can be as simple as "WHEN we reach the end of October, THEN send John 2 Ether". John will always be paid on time, no more no less, and the business does not need to worry about anything.
Healthcare - Health systems can use smart contracts to safely store and transfer patient records, allowing no access to third parties. The patients are therefore given full control of their data: if, for example, researchers want to use their data, not only do they have to pay for it, but even then the final decision would be up to the patient, according to if they want to sell it or not.
Governments - Smart contracts constitute a way to make voting systems less susceptible to manipulation. Moreover, it could increase the actual number of voters, because it contributes to eliminate or at least improve the slow process that is required in some countries for someone to vote.

"Can I make a smart contract??"

If you liked the concept of smart contracts and want to get your hands dirty right away, fear not! Because getting started and creating your first smart contracts can be very simple.

Regarding the platform, unless you have any good reason not to, you should use the Ethereum blockchain. It is the most popular and the go-to option for building smart contracts and any application that relies on them. Smart contracts on the Ethereum blockchain can be written using their special programming language for smart contracts, named Solidity. Solidity is an object-oriented, high-level language, that is influenced by the likes of C++, Python and JavaScript, so if you already know some of these languages and are familiar with OOP concepts, learning Solidity shouldn't be too hard!

A great tool to get started with making smart contracts on Ethereum is REMIX IDE. REMIX IDE is a browser-based IDE that allows you to write Ethereum smart contracts without having to install anything on your computer.

After introducing the concept of smart contracts, Ethereum and Solidity, and the REMIX IDE, I now leave you a very simple tutorial on how to build your first smart contract using these tools and technologies, that I found useful for myself.

Conclusion

So that's it! That concludes the 2-part series that I have regarding blockchain and smart contracts, which I started working with recently and found very fascinating. They both have a lot of potential but there are some issues and challenges that need to be tackled before their mass adoption starts.

Hopefully you learned something with this, having given you the curiosity to take a deeper dive and explore more about these topics. Until next time!

References

Understand Blockchain and Smart Contracts (1/2)

Eduardo Ribeiro — Mon, 08 Mar 2021 09:58:31 +0000

This article was originally posted on my blog.

Blockchain feels like a term that many people have heard about, but some of them don't actually know what it is. There is a lot of misinformation about it.

I myself have had curiosity to learn what blockchain is for a long time, but never actually did so until recently, when I started working on a project that will use blockchain technology with smart contracts.

Blockchain has various applications, but the main one, and the one most people are familiarized with, is cryptocurrency. Now that cryptocurrencies are getting more popular, with Bitcoin hitting the 50k dollar mark, Ethereum 2.0 being developed and newcomers like Dogecoin on the rise, it is increasingly important to understand how the underlying technologies work.

So... What is the Blockchain?

To put it concisely...

Blockchain is a technology and architecture based on a distributed ledger, that allows various users to save information (data, transactions, contracts, etc) in blocks that are linked together, achieving a high degree of security and integrity.

The structure of a blockchain is essentially append-only, meaning that once you write data to the blockchain, it is extremely difficult to change it or delete it, whether if it's done with good or bad intentions. This is achieved by using cryptographic hash functions (among other things); they are used to calculate a unique hash or identifier for each block. But more on that later.

To understand why, we need to take a closer look at what each block contains: it contains its hash, the data inside it, and the hash of the previous block in the blockchain (they can contain more information depending on the application where the blockchain is actually being used, but essentially it is this). The fact that each block contains the hash of the previous one is actually what links the blocks together and makes the chain of block exist (thus the name blockchain).

The data that each block stores depends on the type of blockchain and application that is being considered. For example, in the case of a cryptocurrency, the blockchain would store in each block a set of transactions, each one containing information like the sender account, the receiver account, and the amount of coins transferred.

Why is Blockchain so secure?

Hash Calculation

As mentioned before, one of the aspects and characteristics of blockchain that makes it secure is its use of hashing.

"Hashing is the process of converting a given key into another value. A hash function is used to generate the new value according to a mathematical algorithm. The result of a hash function is known as a hash value or simply, a hash. A good hash function uses a one-way hashing algorithm, or in other words, the hash cannot be converted back into the original key." - taken from What is hashing?

But how exactly is it used?

When a block is created, its hash is calculated based on the content of the block. If anything on the block changes, its hash is recalculated.

So let's think about what would happen if someone tried to hack the contents of a block. If someone tries to, for example, change the value of a transaction in a block, its hash would change, since its content changed. Because of that, the next block in the blockchain, that had stored the hash of the previous block, now contains an invalid hash. This also applies to any change that the blockchain might suffer, including switching the order of blocks, deleting them, etc.

So essentially, the chain is broken, and all the blocks that follow the tampered block would actually need to get their hashes recalculated in order to restore the blockchain and make it valid again.

The problem is... that's not that hard to do. Machines nowadays have enough computational power to calculate millions of hashes per second, so an attacker could just compute the hashes for all the blocks and make the chain valid again... How to prevent this?

Proof of Work

Proof of Work is a blockchain protocol for verifying transactions on a decentralized network and maintaining consensus across the system. Proof of Work is costly and time-consuming to produce, but easily verifiable by others.

Proof of Work, or PoW for short, is a mechanism/protocol that purposely slows down the creation of new blocks in order to prevent tampering from an attacker. It also avoids things like DDOS and spam.

The computing power necessary to do the PoW depends on various factors and is configurable though what is called the difficulty of the PoW. This could be, for example, imposing that the calculated hash of the new block needs to start with 10 zeros. For each block, there is a random number (the nonce) that influences the result of the block hash. If the calculated hash for a block does not have 10 zeros, the nonce is incremented and a new hash is calculated for the block. The process is repeated until the hash does in fact have 10 zeros. This PoW may demand a lot of computing power because the number of hashes thats needs to be computed may be quite big, but at the same time it is easily verifiable by others: when someone wants to know if a block is valid, they simply take the block values, including the final nonce value, and compute the hash for the block. If the hash does start with 10 zeros, they can be extremely confident that whoever calculated the hash actually did the PoW correctly and that the block is valid.

In this case, the difficulty of the PoW can be modified by changing the number of desired leading zeroes; the more zeroes the hash needs to have at the start, the more difficult and laborious it is to compute a valid hash. In Bitcoins case, the difficulty of the PoW is managed so that it takes about 10 minutes to calculate the required PoW and to add that block to the blockchain. This makes the blockchain more secure because if you tamper with a block, you will need to redo the Proof of Work for all the following blocks.

Distributed property of the blockchain

Apart from hashing and PoW, this is another aspect that makes blockchain so secure.

Let's take into account a blockchain system that has a set of participants or nodes, that perform transactions and create blocks to expand the blockchain. Instead of using a central entity to manage the blockchain, each participant will instead keep a local copy of the blockchain. When someone creates a block, they will broadcast it into the network so that other participants are aware of its existence. Each one will then check if the block is valid and if it has not been tampered with, and if it is in fact valid it is added to that participant's local copy of the blockchain. Therefore, nodes reach consensus about the node added and the new blockchain state.

This decentralized property of the blockchain could bring some additional challenges. Let's say you are a participant, and your local copy of the blockchain ends in block A. You receive a new block B, that connects to block A, thus extending the blockchain. However, some time later, you receive a block C, that also connects to block A. So know you have a fork, a separation that resulted in two different blockchains. What happens when you have a conflict and you have two distinct blockchains with conflicting transactions or data, like what happened in this case?

The rule to solve this situation is to trust the longest blockchain, the one with the most work put into it. Going back to the previous example, eventually we would receive some other blocks that would connect to block B, and maybe some blocks that connect to block C, thus extending both chains. After some time, these chains would probably have different lengths, and we would only keep the longest one, thus resolving the conflict and reaching consensus.

That is why it is almost impossible to tamper and hack a blockchain, specially if the number of participants and nodes is high: after tampering with a block, we would need to redo the PoW for all following blocks, and because of this consensus algorithm we would also need to have at least somewhere close to 50% of the computing power of the whole network, in order to continue computing PoW for new blocks, to maintain the blockchain with the tampered block the blockchain that everyone agrees on. If we do not have that computational power, eventually our tampered blockchain will not be the longest one and it will be discarded.

The process of mining

Now that we have understood, from a high-level perspective, how a blockchain works and what are the main characteristics that make it so secure and reliable, let's discuss how new blocks actually get generated and added.

It can be the case that some users only want to make transactions or use the blockchain without the need of doing the PoW and computing a valid hash for a block. In the case of cryptocurrencies, if someone makes a transaction, they're not necessarily the one who create the block containing that transaction. So who actually does the PoW and generates new blocks?

Still on the cryptocurrency example, there is another problem related to it: where does the money come from? Seriously, how do I actually get my hands on some Bitcoins and how are new coins generated into the system?

To answer both of these questions, we need to understand the concept of mining.

Let's take Bitcoin as an example. Each time a new transaction is created, it gets added to the network. Some participants will be "listening" for transactions on the network, and they will group them together in a block, calculate the PoW necessary for the block to be considered valid, and broadcast it so other nodes can add it to their blockchain. This process has the name of mining and the participants who do it are called miners.

As a reward for completing this process, miners get a small quantity in Bitcoin, thus introducing new bits of currency into the economy.

This mining process might be compared to some kind of mini lottery: when a block is created, various miners will compete at the same time in order to perform the PoW and compute a valid hash for the block. Whichever miner completes the PoW first will get the reward for it.

What are the main advantages that blockchain offers?

Immutability: As said before, the structure in a blockchain is append-only, meaning that you cannot alter or delete data or blocks.
Security: It is extremely secure due to the use of cryptographic hash functions, the PoW protocol and the consensus algorithm.
Decentralization: It does not have a centralized architecture; each participant keeps a copy of the blockchain. Because of that, data that is lost in a node is easily recoverable.
Trustless: The blockchain technology allows for verification without having to be dependent on third-parties.
Transparency: The data present in the blocks is observable. The individuals who are provided authority can view the block's information.
Traceability: Each block can be tracked along the chain to its point of origin. Usually, the blocks are time stamped and recorded in chronological order.

What can blockchain be used for?

Some examples are:

Cryptocurrencies and payment processing: The main use case for blockchain is the one you probably already know of, that is cryptocurrencies. Currencies like Bitcoin, Ethereum, Ripple, Litecoin, etc, all use the blockchain technology to function. But that is far from being the only application that blockchain has.
Data sharing: Cryptocurrency IOTA launched, a few years ago, their Data Marketplace, demonstrating that blockchain could be used as a marketplace to share or sell data.
Supply chain and logistics monitoring: By using blockchain, businesses should be able to quickly detect inefficiencies within their supply chains, as well as locate items in real time. Furthermore, it would allow businesses, and possibly even consumers, to view how products performed from a quality-control perspective.
Voting mechanism: A blockchain solution would combine the best of both worlds, providing not only the transparency necessary to see all the votes and to detect if something has changed on the network, but also immutability (i.e. unchanging nature of the blockchain).
Medical recordkeeping: In addition to storing patient records, the patient, who possesses the key to access these digital records, would be in control of who gains access to that data, thus strengthening patient privacy.
Property title transfers: In order to buy or sell land, a house, a car, etc, you will need to transfer or receive a title. Blockchain can store titles on its network, providing a transparent view of this transfer and presenting a clear picture of legal ownership.

Among many others!

Challenges that blockchain faces

Even though blockchain is a very promising technology with a lot of potential and various applications, it is far from perfect. It still has several flaws and bottlenecks that prevent its widespread adoption. Some of them are:

Energy consumption and computational power: The computational power required for a blockchain to operate can be quite expensive. According to this article, "the Bitcoin blockchain harnesses anywhere between 10 and 100 times as much computing power as all of Google's serving farms put together".
Scalability: Big issue. Because of this, Bitcoin payments still take somewhere around 10 minutes to 1 hour. In order for blockchain to compete with payment networks and achieve adoption by FinTech companies, it must find a way to boost scalability and throughput, and address latency problems. For example, Bitcoin can only process 3.3 to 7 transactions per second, whereas Visa's VisaNet on average processes 1,700 transactions per second.
Limited interoperability: Another challenge is the lack of interoperability between the large number of blockchain networks. Various projects are using blockchain platforms with different protocols and algorithms, and the lack of universal standards makes it difficult to communicate between networks.

Conclusion

In this article we went over the very basics of blockchain, how it works, how it can be used, and what are its main advantages and problems. There are a lot of topics that this article did not cover, as blockchain is a very extensive topic. But hopefully it was enough to give you an idea of this technology.

You have probably noticed that the title of this article says "1 out of 2". That's because there will be a follow-up post to this one, that will cover another application of blockchain networks: smart contracts. Stay tuned for that 😉

Thank you for reading and until next time!

References

Why and How You Can Build Your Personal Website/Blog

Eduardo Ribeiro — Mon, 01 Mar 2021 13:25:15 +0000

This article was originally posted on my blog.

Soon after my exams, in late January, I was brainstorming various project ideas in order to pick one to do in my free time before the 2nd semester started. I wanted something simple, interesting, that could be useful in the future and that would help me expose myself to the world.

Then I came across this post, and this quote:

As a software developer, one of the best mediums you can use to market yourself is a blog. It’s my firm belief that every software developer who cares about their career should invest in creating a blog.

These words are from John Sonmez, software developer and author of two best selling books on tech and career development.

I had already come across the idea of building a personal blog, but this reminded me the importance of it, and made me realize that it ticked out all the requirements that I had for a side project. So I decided to do it.

In this article I will talk about why you may want to build your own personal website or blog, and how you can do it easily using Gatsby.

Why would you build a personal website?

John Sonmez, alongside a lot of other people, talks a lot about blogging and how it is important.
Writing articles on various topics like tech, career, self-improvement or your favorite hobbies (anything really) can help you better understand a certain concept and also help you be a better communicator, as there is a lot of researching and learning behind a blog post.

It can serve as a way to understand and learn about a certain topic; a good way of making sure you understand or know something is to explain it to other people. At the same time, it also serves as a way to pass the knowledge that you have to others and give back to the community.

If you are a freelancer or an independent consultant, it can also be helpful, as it can bring a lot of clients and customers your way instead of letting them simply find you by themselves. It pushes you to expose yourself to others, increase your networking skills and meet new people.

But you may ask yourself, "Why should I waste time on having my own blog when I can simply post on already established platforms like Medium or DEV?"

There are several reasons for having your own platform:

You will not be dependent on any other platform. You own it and you have the freedom to do what you want;
The website is yours: you can customize it and make it look and function according to your needs and likes;
You can monetize your blog in the future, if you want, with ads for example;
You can still publish on platforms like Medium or DEV, and redirect readers to your personal blog!

For me, besides all the reasons stated above, I took this as an opportunity to start a new Web project, so for those of you who are interested in having a small side project in Web Development, this can help you with that 😁

If that convinced you to maybe try to build your own personal site or blog, I will explain how I did it in the next sections, and how you can too.

The technologies/tools I used

Gatsby

To put it concisely, "GatsbyJS is a React-based, GraphQL powered, static site generator" (taken from this post). It uses powerful pre-configuration to build a website that uses only static files (meaning it delivers the same files for all users/visitors) for incredibly fast page loads.

What makes Gatsby special?

There were some aspects that made me choose Gatsby for developing my personal blog, as opposed to something like Jekyll or just using React or any other web technology.

The first thing to mention is its use of GraphQL. Gatsby uses GraphQL to collect your data from wherever it may be: Markdown, JSON, third party APIs, anywhere! At build time, it creates an internal GraphQL server of all of this data. So, in your React components, all of your data is queried at build time from there.

Secondly, despite not being around for too long (release in 2017), it has great documentation to help you get acquainted quickly. It also has a lot of different plugins that add functionality and help you customize your site.

And last but not least, is its dedication to performance, as I've mentioned earlier. Gatsby loads only the critical HTML, CSS, JavaScript and data so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels really fast.

Do I need to know React and GraphQL to use Gatsby?

One of the things I should mention here is that you do not need to know React and GraphQL beforehand in order to use Gatsby. Yes, having some React knowledge won't hurt you, but due to the great documentation and tutorials that Gatsby has available, I'm sure you will be just fine 😁

In my case, I had previous React experience but had never touched GraphQL before; I still got the hang of things pretty quickly after going through some of the tutorials.

You can also use this project to your advantage if you want to learn these technologies but don't know where to start. I consider Gatsby a great point of entry to learn both React and GraphQL.

If you really can't wait any longer and want to get started right away, you can follow this tutorial and let your creativity fly.

React and GraphQL are both crucial for Gatsby, but if you don’t know them, Gatsby is an excellent tool to learn them, and not an excuse not to.

Some useful plugins that I use

Gatsby provides a lot of plugins that can massively extend the functionalities of your website; you should definitely look into this and use them to your advantage in order to create a unique product more easily. There are plugins for almost anything you can think of, from integrating Google Analytics to letting you use emojis in your blog posts 😉

Here is a collection of some plugins that I have on my blog, that can also be of use to you.

gatsby-plugin-typography - plugin for utilizing the Typography library with minimal configuration.
gatsby-transformer-remark - Parses Markdown files using Remark, allowing you to display them in your website.
gatsby-remark-images - Processes images in Markdown so they can be used in the production build.
gatsby-remark-embed-video - Embed a video from Youtube, Vimeo, etc for the ultimate Markdown experience.
gatsby-plugin-react-helmet - Component which lets you control your document head using their React component. With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds. This is important for SEO, which I will go over later on in this article.

Tailwind CSS

In order to build this blog, I wanted to explore some frameworks and libraries that could aid me in the CSS department. I had heard about TailwindCSS before, but never used it and didn't know what it was about. So I decided to try it.

Since then, it has become my favorite CSS framework, and I will definitely use it in many other web projects.

TailwindCSS is a low-level, customizable CSS framework that gives building blocks and common utility classes like flex, pt-4 and text-center, as opposed to providing pre-designed components like Bootstrap does, for example.

To be fair, you don't really need a CSS framework for building your website/blog, since it is a fairly simple project, but if you want to, here are a couple of reasons why you may want to consider TailwindCSS:

It is a utility-first CSS framework meaning that, instead of giving you pre-designed components like card or carousel, it provides you with low-level classes like font-medium, rotate-90 and rounded-full. It gives you the opportunity to fully customize your site and make sure that it is unique and doesn't look like something that was "pre-defined" or "pre-built", which can happen if you use, for example, Bootstrap headers or cards.
It's really easy to use, and you basically never have to leave your HTML. Here is a code snippet of one of the React components from this website:

It helps you build a responsive website. It has special classes for defining different layouts and components at specific breakpoints, so you never have to write media queries. Example: using the classes w-16, md:w-32 and lg:w-48 on a specific component helps you define different widths for different screen sizes. It also provides other prefixes like hover: and focus:. Simple.
Although Tailwind generates a lot of classes, it's build size is small in production, because it has the ability to purge and delete unused classes.
It also has great documentation. Take a look.

Netlify

Netlify is, to put it simply, a platform that offers cloud hosting and serverless backend services. I used it to deploy and host my blog. It's free, easy to use, and has many useful features.

It enables Continuous Deployment, so anytime you push a new commit to your GitHub repository, Netlify automatically deploys the new version of your site.

It also allows you to add security to your site with its Free SSL option with Let’s Encrypt. With one click install, HTTPS will instantly be available for your site.

Namecheap

If you use Netlify, your site will be deployed with a domain name like mywebsite.netlify.com. To change it to something like a .com extension, like I did, you can use Namecheap to easily search and buy domains.

Some things I had in mind

There were some things I had in mind and some decisions I made before and while building this project.

Developing from Scratch

One thing that I decided to do from the beginning was to develop my website from scratch. I made this decision because I wanted to make my website unique and also use it as an opportunity to work on a web development side project, and I felt like using a template was kind of cheating.

However, if you want to spend less time coding and more time writing, Gatsby has a good collection of templates that you can use to speed up the process 😃

Optimize SEO

Another thing that I had in mind was that I needed to optimize the website's SEO before I made it public.

SEO stands for Search Engine Optimization and it involves the process of improving your site to increase its visibility for relevant searches. The better you optimize your blog for SEO, the higher your website will be listed on search engine result pages, so more people can find it.

Gatsby is SEO-friendly, because all pages are server side rendered and all content is available to search engine crawlers. However, to improve my blog's SEO even further, I used the gatsby-plugin-react-helmet plugin to build an SEO component that I added to all pages. You can do the same by following this tutorial.

The topic of SEO is quite an extensive one, and there are a lot of things that you can do to improve it and make sure your site is fully optimized for search engines, so I advice you to research a little more into it 🧐

Things I want to do in the future

Even though I am currently happy with my blog, there are still some features on the backlog that I plan to eventually add. They could also be useful for your personal blog, or at least inspire you to think about other features that could be useful.

PWA

PWAs, or Progressive Web Applications, are (among other things) web apps that behave like native apps. They have a defined set of pre-requisites like being responsive, have app-like interactions and being installable.

Gatsby already helps you with the majority of these things. You can use the gatsby-plugin-manifest to build a web manifest so users can add your site to their home screen on most mobile browsers.

Adding Offline Support

One thing that would be useful and would go in hand with making your blog installable is to have an offline mode where users can navigate and read blog posts without being connected to the Internet. As you can imagine, there is also a plugin for that (Gatsby really is amazing). You can use the gatsby-plugin-offline plugin to do just that.

RSS Feed

Finally, the last main feature that I have in mind for the future is to create an RSS feed for my blog posts and articles. An RSS Feed is a standard XML file listing a website’s content in a subscribable format, allowing readers to consume your content in news aggregators, also called feed reader apps.

Subscribing to a website's RSS removes the need for the user to manually check the website for new content. Instead, their browser constantly monitors the site and informs the user of any updates.

You can do this with, you guessed it, a Gatsby plugin. This Gatsby tutorial helps you create an RSS feed using the gatsby-plugin-feed plugin, so your users never miss a blog post.

Conclusion

This was quite a long post, but I wanted to cover several topics. I wanted to explain why I think having a personal site and/or blog is beneficial for everyone, specially for software engineers and students, and that you can use it as a tool to expose yourself to the world and boost your career. We also went over how to get started building it using Gatsby and its incredible amount of plugins, how to create a unique design customized for your needs using TailwindCSS, and how to deploy and host your website in the end. We also went over some more advanced topics like SEO, RSS feeds and PWAs.

I hope this article was useful to you and that you learned something with it. Hopefully it inspired you to create your own website or blog, if you don't already have one. Thank you for reading and until next time 🤩

DEV Community: Eduardo Ribeiro

What tech/programming communities are you in?

How to get updates from a server in real-time?

HTTP Polling

HTTP Long Polling

WebSockets

Publish & Subscribe (Server-Sent Events)

Honorable Mention: Webhooks

Conclusion

References

Get Started with Scala

What is Scala?

A Simple Example

Some Other Cool Things about Scala

(Almost) Everything is an expression

map, flatMap, filter and for-comprehensions

Pattern Matching

Some good resources to learn the basics of Scala

Conclusion

References

Where should I learn system design & architecture?

What are your favorite tech blogs/websites?

How to Start Contributing to Open Source Projects

What is Open Source?

Why is Open Source so important?

What are the advantages of contributing to Open Source projects?

How can I contribute to an Open Source project?

How do I pick an Open Source project to contribute to?

Some good Open Source projects to contribute to

Elasticsearch

Habitica

Visual Studio Code

freeCodeCamp

React.js

Node.js

Jarvis

Brave Browser

Tensorflow

Godot Engine

Kubernetes

Conclusion

References

Understand Blockchain and Smart Contracts (2/2)

What is a Smart Contract?

How exactly do smart contracts work?

What is happening behind the scenes?

What are the main advantages and disadvantages of smart contracts?

How are smart contracts being currently used?

"Can I make a smart contract??"

Conclusion

References

Understand Blockchain and Smart Contracts (1/2)

So... What is the Blockchain?

Why is Blockchain so secure?

Hash Calculation

Proof of Work

Distributed property of the blockchain

The process of mining

What are the main advantages that blockchain offers?

What can blockchain be used for?

Challenges that blockchain faces

Conclusion

References

Why and How You Can Build Your Personal Website/Blog

Why would you build a personal website?

The technologies/tools I used

Gatsby

What makes Gatsby special?

Do I need to know React and GraphQL to use Gatsby?

Some useful plugins that I use

Tailwind CSS

Netlify

Namecheap

Some things I had in mind

Developing from Scratch

Optimize SEO

Things I want to do in the future

PWA

Adding Offline Support

Tags