dev.lawyer

Creating a simple HTML, CSS project, with a pinch of Javascript

2022-03-10T12:49:00.001-03:00

Today we are going to talk about HTML and CSS, showing some fundamentals that they offer and how we use these markups in our pages and, for that, we are going to build a simple page that generates sharing links to various web tools.

As always, the used and commented examples are in our GitHub repository and also on our CodePen that we use to show the real-time versions here.

Hello, if this is your first time here, our content is geared towards INNOVATION (and for those who like technology/programming and are just starting out or are from other fields) and, in particular, this series is aimed at PROGRAMMING FOR BEGINNERS.

I will also post a video on this topic on my YouTube channel, which is where I share some thoughts, tips and projects I am currently working on with other tech-fanatics, whether you are a developer or enthusiast. Please also consider subscribing to my channel to not miss future videos and to join our live "coding sessions" and a nice, relaxing tech-related chat -- I promise to keep things interesting. The content is in Portuguese, but you can watch my videos with subtitles (maybe I will switch to English in the future, if this makes sense).

Once I publish the video, I will update this post to reflect the content.

All set? Then tag along!

What is HTML and CSS?

Even if you're new to the web development world, you've probably heard of HTML (Hypertext Markup Language). What about CSS (Cascading Style Sheets), heard of it?

There's a ton of discussions if knowing HTML is knowing programming (spoiler, it's not!) but the fact is that everyone dedicated to web development needs to know how HTML and CSS works to build applications that run in the browser. In a way it is possible to say that HTML and CSS are the "backbone" of web development.

For beginners, learning the basics of HTML and CSS is a must and will certainly be useful in any web application you need to develop.

How does HTML work?

When you access a website through an Internet browser (Chrome, Firefox, Internet Explorer), that browser will look for a file that contains code and will be interpreted before being displayed to you.

This file that contains code can have several possible extensions, depending on the technology used on the site (such as asp, php) but, in the end, even if there are other possible technologies, the browser will receive an HTML code.

In the simplest case and without other technologies involved, you can have a page with a .htm or .html extension that contains the HTML code and your browser will render it.

HTML Tags

Browsers are not very "picky" to render HTML code, as it is a markup syntax and not a programming language itself.

For example, if you create files on your computer called "Test_1.html", "Test_2.html" and "Test_3.html", and place the following contents one at a time, they will all open in the browser in the same way:

Test_1.html

See the Pen Test_1.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Test_2.html

See the Pen Test_2.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Test_3.html

See the Pen Teste_3.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

As you can see, the content of these three files is different, but the result will be the same.

See these words inside the greater of and lesser of signs? These are HTML tags and they indicate where some item of your code starts and where it ends (those that end with "/"). For example, when we type <p> we want to indicate that there is a paragraph there, and that it goes as far as the </p> appears.

And this is more or less the principle for the other HTML tags.

Some tags like "<img>" (to insert an image) don't have the closing tag (it doesn't have the "</img>") and in these cases you can "close" the tag itself. putting the "/" at the end of the tag, like this:

<img src="imageurl" />

Basic HTML Tags

To assemble an HTML document you can use the most common HTML tags that will possibly meet most of your needs -- see the example below that contains these most common tags:

See the Pen example_basichtmlpage.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

In this simple HTML document we have the following (these comments are also in the document inside our repo):

  <!DOCTYPE html> Tells the browser we are dealing with an HTML file
  <html>  Indicates that the HTML document starts here
  <head>  Brings information that is needed by the document but that
          do not represent elements on the rendered page. We can
          include here, for example, scripts, CSS styles, information
          about the title, links and meta-tags.
  <title> It is the title of the page and that appears in the browser tab
  <body>  Here begins the "body" of the document, and this is where 
          all the elements that should appear on the rendered page should be.
  <div>   One of the most used elements mainly for organization of elements 
          on the screen, the div is like a "division" of the page. By placing 
          a <div> your page will have that element that represents a division 
          in the document that has some content that should be displayed.
  <h1>    It is a header in the document (header), with h1 being the largest 
          and h6 the smallest.
  <em>    Makes the text highlighted (usually italics and could be <i> too,
          but <em> is better for accessibility as it can be interpreted
          in reading softwares)
  <strong>Make the text bold (could be <b> too, but strong is better
          for accessibility)
  <br />  Skip a line
  <p>     One paragraph
  <span>  It is also a division, but this one occurs on the line itself. It 
          segments the text.
  <a>     Represents a link
  <img /> Represents an image
  <input /> Input data field (form)
  <ul> Unordered list (bullet points)
  <ol> Ordered (numbered) list
  <li> List Item
  <table> table
  <tr> Table row
  <td> Table column
  <!-- -->Comment tags: everything inside this tags will not be rendered

Other HTML Tags: "Advanced HTML"

When talking about HTML, it is common for developers to end up simplifying everything and throwing only the most common elements. For example, on any page you come across you will likely find a series of <div> elements as they are used to create divisions on the page.

This is not wrong in itself and stems from the way HTML worked before HTML5, but there are advantages in using specific tags for different parts of the document, especially when it comes to user accessibility (visually impaired users, for example) and even on the reading of your document by search engines.

But did you know that HTML, and especially HTML5, has many interesting functions "up" your page? We're going to list some of them here in an "Advanced HTML" mode, if I may say so 🤣

HTML5 Tags

With HTML5, the so-called Semantic Tags were introduced, which aim to describe some code blocks that have specific functions on the page and that are quite common. Before HTML5 everything was done in <div> but it is good practice to use semantic tags when possible.

When placing these tags without any other styling, you will only see lines one below the other. To make the correct use of these tags, you must complement them with the rest of the page's visuals for a correct layout (read CSS, which we will cover later).

See the Pen example_html5page.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

And in this document with the semantic tags we have the following:

  <header>      Header of the page, where you can place a banner
                for example
  <nav>         Navigation: usually a navigation menu
  <aside>       Side menu
  <main>        Location of the main content of the page
  <section>     If there are no more specific semantic tags, you can
                can use a <section> to indicate a section on the page.
  <footer>      Footer of the page

More interesting HTML Tags and Attributes

Today we have much more possibilities with HTML than you could have imagined years ago. And this is very positive because it eliminates the need to use Javascript, for example, in a lot of cases.

Let's see some interesting HTML tags and attributes:

See the Pen example_unusualhtml.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Need more? I've found a very interesting site that has a lot of references and HTML examples that you can use: https://htmlcheatsheet.com/

HOW DOES CSS WORK?

The HTML + CSS combo is what will bring your web page closer to the final result.

When you assemble the HTML, you are actually putting together the structure and content of your page. There you define the elements that make up the page, text and images that it should load. But still, this is "raw" text, like a skeleton. To make your page look more refined, you will need to use CSS.

CSS allows you to style each of the HTML elements on your page, giving it visual properties that HTML alone cannot provide.

To use CSS in your HTML you have three options:

- Inline CSS

- Internal CSS

- External CSS

Inline CSS

In Inline CSS you use the styles you want inside the HTML element with a style attribute, as follows:

<p style="font-weight:bold">Sample text</p>

Internal CSS

In Internal CSS we can add a <style> tag inside the <head> tag in HTML, defining the desired styles there.

<style>
  p{
    font-weight: bold;
  }
</style>
<p>Sample text</p>

External CSS

Finally, we can include an External CSS file that contains the desired styles by placing a <link> tag inside the <head> tag.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel='stylesheet' type='text/css' href='main.css'>
</head>
<body>
  <p>Sample text</p>
</body>
</html>

main.css

p{
  font-weight: bold;
}

Regardless of the way you decide to use CSS on your page, just know that basically you need to indicate the element, element type or class of an element that will be visually changed and, after that, indicate which properties will be changed. Basically:

See the Pen example_basiccss.html by Octavio Ietsugu | Dev.Lawyer (@devlawyer) on CodePen.

Working with CSS allows you to do a LOT of things, taking your HTML to the next level. In some upcoming content we'll talk a little more about CSS and I'll show you how it's possible to do very extreme things with CSS that you can't even imagine!

If you want a CSS reference you can use the same HTML site we mentioned above as it has a section for CSS too: https://htmlcheatsheet.com/css/

CREATING A SIMPLE HTML AND CSS PROJECT

And now that we've finally covered the basics of how HTML and CSS work, let's get down to business and put together a simple project that uses mostly HTML and CSS, bringing something useful, however small it may be.

For our project, we are going to create a website that receives a text and prepares the HTML code so that the user can create a link to share that text on different social media: WhatsApp, Facebook, Twitter, etc. The program itself is very simple, but it is a good opportunity to show the application of HTML and CSS concepts in practice.

The final result you can find here: https://octaviosi.github.io/link-share-generator/

And you can check all the source code used here in our GitHub repository: https://github.com/OctavioSI/link-share-generator

What does this project do?

I thought about doing this project after finding this list of social sharing links put together by @markodenic in this GitHub gist: https://gist.github.com/markodenic/592f4196623690caf83379f2b33a4c9f

In fact, if you already have this list, your problem is solved, but I took advantage of the idea to build a very simple program showing how we can use HTML to build a simple software structure, CSS to give it a better aesthetic layer and finally a little bit of Javascript to give some functionality. As always, the code is all commented with some points that I thought were relevant so that you can follow what was done.

When accessing this project's repo (https://github.com/OctavioSI/link-share-generator) you will see three files in the main folder: index.html, main.js and main.css.

Analyze the index.html file to find all the elements that make up our page, such as buttons, texts and input fields.

In the main.css file you will find the styles used in the text and icons present on the screen.

Finally, in the main.js file you will find some functions that make our program useful, allowing the program to be more interactive with what is provided on the screen.

I recommend that you read the comments I left in the files and interpret the code as well. Analyzing other people's code is a great way to learn more about programming. Suggestions are always welcome. 😀

/* End of post, see you next time! */

Docker Tutorial for Dummies

2021-10-24T17:05:00.001-03:00

Today we're going to talk about what Docker is, how you can configure it, and how we'll use it to run some future projects.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on PROGRAMMING FOR BEGINNERS.

I also present to you guys and girls the video I made on this topic from my YouTube channel, which is where I share some thoughts, tips and projects I am currently working on with other tech-fanatics, whether you are a developer, lawyer or enthusiast. Please also consider subscribing to my channel to not miss future videos and to join our live "coding sessions" and a nice, relaxing tech-related chat -- I promise to keep things interesting. The content is in Portuguese, but you can watch my videos with subtitles (maybe I will switch to English in the future, if this makes sense).

All set? Then tag along!

What is Docker?¶

Imagine that you programmed beautiful code, everything working, without bugs. You finally upload your code to the final environment (production) and, to your dismay, nothing works!

"But it works on my machine"
- every dev ever

This is something more common than you might think. The problem with an apparently perfect program when it is sent to the final environment can have a number of reasons: different server configurations, different versions of auxiliary programs or the environment itself, operating system, package updates... It is not possible to know exactly how your program will behave on another machine.

Docker was born to solve this (among other things). Imagine taking your local development machine and packaging absolutely all of its programs and settings, then running exactly this "package" in the final environment. Docker does this. With Docker you can be sure that if your local machine and the remote machine (server) use the same image (that is, the same "package" of settings) they must run your program in the same way. It's like you're uploading your machine to the server.

ILLUSTRATING DOCKER WITH AN ANALOGY

There are many analogies on the Internet to explain what Docker is and how it works and each of its particularities. The Docker symbol itself (the whale that carries a bunch of containers) is an analogy on how it works.

So let's create an analogy for what Docker is and each of its main features: LET'S BAKE A CAKE!

1. Docker: the Kitchen

Imagine you want to bake a CAKE. And to make your cake, you obviously need the entire structure to make that cake: oven, countertop, cutlery. You need a KITCHEN.

To bake a cake, we have to have the structure!

Having a kitchen with minimal tools is the equivalent of having the Docker platform installed on your machine. Docker provides the basic features needed to run a system. If we want to make the cake viable we must first ensure that the house has a kitchen, just as if we want to run "machines" through the Docker system, we need to have Docker installed. And so let's install Docker first.

🐳 Installing Docker

Originally, Docker is a platform released for the Linux operating system and, for that reason, there are many great tutorials to install it in the most different distributions. You can, for example, follow this great tutorial from Digital Ocean that teaches you step-by-step how to install the docker on Ubuntu.

By the way, don't have a Digital Ocean account yet? It's a great service if you want to have a cloud server, with a full linux (or windows) machine. You can upload your code and have an online service 100% of the time at a very affordable cost. If you want to create an account there and try out the service, I highly recommend it -- use my referral link and get a $100 credit to get started: https://m.do.co/c/629292485ee8

However, considering that many possibly use Windows or MacOS, there is now a very practical solution for installing Docker which is Docker Desktop.

Docker Desktop

Docker Desktop installation was very simple and I had to restart the computer after it was finished. When the program was restarted, an error message alerted me to the need to update the WSL2Kernel (the "Windows Subsystem for Linux") which is nothing more than an application that allows Windows to execute a series of Linux commands directly.

WSL2 alert message

And the link to download the WSL2 Linux Kernel package

Following the link indicated in the alert message, I downloaded the WSL2 package and installed it. After that, when restarting Docker Desktop everything was fine, like this:

Let's test Docker now. In VSCode (or in Powershell itself), we run the command that Docker mentions there on its home page. You will see that Docker will download the informed image, will run the container (we will explain all this later) and will make the container available on port 80 of our machine.

Running Docker in our terminal, everything working fine 🥳

And when running the command, Docker Desktop already recognizes the running container

Finally, by accessing the localhost address, we were able to view this page that was generated by the container we've set up.

For those who are lost, what have we done here? We install the Docker platform on our machine and run a command that fetches a "picture" of a complete machine from the Internet and replicates it on our local machine. The machine we "replicate" here is an identical copy of the machine that the person who created this image made available. If we run the same command from another computer, the machine created will be identical too. And that's the power of Docker.

2. Docker Image: the cake tray

Since we've already ensured that we have the kitchen to prepare the cake / Docker installed, let's decide which CAKE TRAY we will use. After all, there's no way to bake a cake without having a way to bake it.

Our Docker Image

With the cake tray we can create as many cakes as we want, and they will always come out the same: in this case, round and short. The Docker image has the same rationale: with an image you can generate numerous "containers", which are produced based on this "cake shape". The image (tray) works as a stamp for each container (each cake).

3. Docker Container: the CAKE itself

As we mentioned above, each CAKE produced with the tray is a CONTAINER. The cake itself has all the properties of a cake, it works like a cake and can be eaten like a cake. You can bake a cake in your home's kitchen, and by using the same image (tray) to bake a cake in your mother's house, you can create a cake with the same characteristics (round and short).

In other words, if you want to bake a cake just like the previous one, just use the same tray: you don't need to buy (or worse, make) another tray. Containers will always follow what is defined in the image

4. Docker Registry: the Kitchen Shelf

Imagine that you have several cake trays. You can keep them on a SHELF IN THE KITCHEN, where they'll be stored for easy access whenever you want a round cake, a square or a triangle cake.

The Docker Registry works the same way: you can store your Docker images there and when you need to use them, just take them.

Creating a Docker Registry

To create your Docker Registry, or the shelf that will hold the cake trays, you can create a DockerHub account, and we can choose the Personal plan (free) for now.

Create your DockerHub account

We can choose the Personal account for now4

With the registration on DockerHub we can also log into the account on Docker Desktop, leaving the application then connected to the cloud.

5. Dockerfile: the cake recipe

Although our image always comes out with the same shape, round and short, we can have a different cake batter depending on the case. So, even if the base is the same and the cake looks more or less the same at the end, the CAKE RECIPE brings important and detailed instructions so that the contents of the tray (the cake batter) are successfully prepared and the cakes come out of the way we hope.

The recipes for our cake are there

This cake recipe is the file called Dockerfile: it contains instructions about fundamental aspects that must be observed in our image (in the dough that goes into the mold) so that the result is as expected (the cake comes out tasty).

In the Dockerfile you have information about the base that will be used (for example, if we will use as a base a ubuntu linux image, linux mini distribution with node, etc.) and about the application that will be launched (files that compose it, volumes, database).

If you follow the recipe correctly, you will be able to successfully bake a cake every time.

The developer's job is, in large part, to write this cake recipe, making sure that with the well-written recipe the cake will be prepared accurately. Who prepares the cake is a robot -- after all, this kitchen is very futuristic and with the Dockerfile the cakes are prepared in a few seconds, always identical!

6. docker-compose: the party!

Imagine now that we can bake a cake as we want, always in the same way. But at a party, we don't just have cake.

We have soda, sweets, snacks and everything else. Imagine that just like the cake, each of these treats has its own "tray", its own "recipe" and can also be created over and over again.

Let's partyyyyy!!!

We can then set up a "party", linking the "cake" with the other items. To set up this party, we passed the instructions to a program called docker-compose. docker-compose is a program that reads a file with these instructions, and creates all the containers we need (cake, candy, snacks...) to set up our party.

docker-compose example

docker-compose then assembles all the elements and links them together in a way that makes sense for a "system" to work. In other words, he organizes the party.

Docker benefits¶

In an era without Docker it was common that before starting to work a developer (or someone specialized in it) would spend a few hours (or days) configuring the machine and the whole system so that it was working 100%.

Also, uploading a new version of the system to production was a task that took a long time, it was something very tense and often didn't work! (the famous "hey, it worked on my machine"). Differences in the system, some configuration or version of incompatible programs, in short, everything could be a reason to crash the system...

Cake is always the same!

With Docker you can raise the same "cake" in a test environment and once tested and sure it works, you can raise an identical "cake" in production with the peace of mind that it will be up and running.

USING DOCKER IN REAL LIFE

To give you an idea of the power of Docker, let's use it in practice. Be aware that many of the major projects on the Internet today are "dockerized" and you can use them effortlessly.

To exemplify what we can do, let's run a container with a Wordpress image.

If you don't know, Wordpress is a popular platform to create online content, allowing you to create blogs, online stores (e-commerce), portfolios, professional websites and much more. It is a "more complete" alternative than existing platforms today such as Blogger, Tumblr, Wix and others, allowing a high degree of customization and having many plugins available.

We've already talked about how you can build a professional website in the article: How to create a professional website step by step, but we didn't go into using Wordpress. We'll do that in future content.

For this content, just know that installing Wordpress depends on your machine having a web server installed (such as Apache or Nginx) with PHP programming language support and a database such as MySQL or MariaDB. See here on the official website:

Para este conteúdo, basta você saber que a instalação do Wordpress depende que a sua máquina tenha um servidor web instalado (como Apache ou Nginx) com suporte à linguagem de programação PHP e um banco da dados como MySQL ou MariaDB. Veja aqui no site oficial:

Therefore, if you want to use Wordpress you must have these services installed on the machine where you will run it. But let's see now what we can do with Docker. Accessing the official image on DockerHub for Wordpress, we found the following:

Instead of setting up an entire machine with PHP, Apache and MySQL, let's create a file to run with docker-compose that:

Loads Wordpress;
Create a MySQL Database (we're going to pass the database access password in the docker-compose file itself);
Links Wordpress and Database to work together.

Our docker-compose assembling database and Wordpress

I will also leave this docker-compose file on GitHub, in the repository I created for this content, which you can access here: https://github.com/Dev-Lawyer/docker-for-beginners. I leave here the recommendation that you analyze the file because I left several comments that can be useful for understanding what I'm talking about here (sorry, they are in Portuguese for now but you can use Google Translate if needed).

Now, to have a Wordpress working, just open the terminal and run the following command from the same folder as the docker-compose.yml file.

docker-compose up

From there, just access http://localhost:8000 from the browser and you will have access to Wordpress, being able to configure it the same way you would if you had installed everything.

Wordpress setup as in its default installation

Sucess!

And voilá, we got Wordpress!

We were then able to get Wordpress upright simply by running a simple command. And the best part: if we need to run this configuration again on a new machine, just run the docker-compose command.

DOCKER MAKES YOUR LIFE EASY

As you can see, Docker makes your life easier and can be very beneficial for your routine as a developer. After working with Docker, you probably won't want to go back to setting up infrastructure "from scratch" anymore.

It is also possible to create more complex structures to work with Docker, with the construction of multiple stage containers and interesting installations that leverage the automation of the "deploying" of the system to production (CD/CI). We will talk about this in the future, in specific content.

That's it, keep studying and exploring what these amazing tools have to offer.

Happy coding!

/* End of the post, see you next time */

[PART 2] 7+ ways to customize your GitHub Profile (README)

2021-10-15T11:05:00.001-03:00

Did you know that you can customize your profile on GitHub, giving it a lot more personality and increasing your chances of standing out among the thousands of profiles out there? We've already covered this topic here, but today I'm going to explore more possibilities to take your profile to the next level! 😜

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on PROGRAMMING FOR BEGINNERS.

All set? Then tag along! And please bear with me because this post is longer, more technical and heavy worded in some parts. But it was a lot of work, so read everything if you can 🤪

GitHub allows you to create a custom profile via a special repository with the same name as your username. You can thus use the Markdown syntax to customize text, place pictures and add other functionalities, making it much more interesting than just the standard screen with the list of repositories and contributions you made throughout the year.

My GitHub profile. Follow me! 😊

In my previous post on the subject, I showed you a step by step on how you can customize your GitHub profile putting a header, custom text, images and statistics. Also, we used a very interesting repository that allowed us to post the latest blog posts here and the latest videos posted on our YouTube channel.

This information is automatically updated using a GitHub automation feature called GitHub Actions, and this greatly expands the possibilities we have. We're going to use that a lot here in this second guide.

Didn't see our previous video about customizing GitHub? Check here:

Also, if you want to see our post on the subject, check here: How to customize your GitHub profile

In today's content I'm going to show you some more interesting things you can put on your profile, making it unique! 😉

If you want to see the final result, as well as have a reference to all the customizations mentioned here, you can visit the repository I created for this content here: https://github.com/Dev-Lawyer/customize-github-profile-part- two

ONE STEP FURTHER: CUSTOMIZING YOUR GITHUB EVEN MORE

If you've followed our previous guide, you'll see that we've already left our profile in a way much more interesting than the default one. What we've done so far:

We've created the repo with the same name as our username, unlocking the custom page on GitHub;
We've put a header image;
We've inserted custom text, telling people a little more about what we do;
We've put up a listing of blog posts and videos from our YouTube channel which updates automatically; and
We've put some custom images (badges) with programming languages and links, like this: - this one I forgot to explain in the last content so I'll cover it here.

By doing these steps above, your GitHub profile will certainly stand out much more than a lot of profiles out there, but we can still explore this a little further. Today we are going to customize our GitHub profile with a few more options, to make it even more complete.

👉 "MANUAL" CUSTOMIZATIONS

First let's talk about some "manual" customizations, which are simply elements in Markdown and HTML that can be used to give our profile a more sophisticated look.

1. Badges

Let's start with something I did before but forgot to comment: how to put "badges", which are these images to highlight social networks, programming languages, statuses and everything else you want, like this one:

You could generate these images manually in an image editor like Gimp. However, the Shields.io website allows you to generate these images in a very practical way, just by passing some information in an internet address.

The site has many interesting options worth exploring, and you can even create your own custom badges. To create your badges, you can go to the Shields.io website directly and click on the link you want to create: for example, you can create a views badge for your GitHub profile by clicking the "social" link on the homepage and then on the corresponding badge. A screen for you to fill in the required data will open:

And so you will have a badge with these parameters:

There are other possible options in Shields.io, so just explore the possibilities a bit. To create a custom badge, just create an image with the following syntax:

The "label" being the message on the left, the "message" the message that follows on the right and the "color" the highlight color for your badge. For example:

To include these badges in your GitHub profile you will need to edit the repository's README file with the same name as your username, in Markdown format. To do this, you can use the following format:

The markdown code: you can see the full Markdown in the GitHub gist below by clicking on "View Raw"

That way you can create badges for every social network link you want, or even create custom badges for programming languages you master, like the one I used to show that I use Angular here:

And the final result:

If you want to see how I organized my profile with these generated Shields.io images, look at the Markdown code I used -- you'll see that labels, custom messages, badge colors and styles are used: https://github.com/OctavioSI/OctavioSI/blob/main/README.md

You can still find some more badge examples in this repository: https://github.com/Naereen/badges

2. "Above the Fold" and CTA

Unlike a README of a project (in which you would do well to follow some layout patterns to not leave your visitor lost), in the README of your GitHub profile there is not much of a rule: there are people who put photos, GIFs, games of chess, snake animation and more. You're kind of free to do what your imagination (and Markdown's GitHub restrictions) allow.

Looking at it this way, we can even look at the GitHub profile as a personal page, where WE CALL THE VISITOR'S (and perhaps a recruiter's) ATTENTION to our skills, experiences, tastes and projects. So it makes sense to treat our GitHub profile page as a sort of "landing page" or "professional website" but with the focus on our developer skills.

With that in mind, let's customize our profile page to incorporate the basic web design concepts we've covered in our past content: short important information above the fold, with a clear CTA, separating the rest of the topics into their own, well-illustrated and self-explanatory sections.

Adjusting our header

Our current header isn't as far from what I think is enough for above-the-fold content: it has few words but it describes well who I am and what do I do: my name and the fact that I'm a developer/lawyer/startup founder. In your case, I recommend taking a similar approach: make a brief introduction and put your "value proposition" or, in other words, why your profile should draw attention. In principle we could do everything through images, editing our header in an image editor like Gimp or Canva.

My current header: come on, it's not that bad...

However, I want to change this header slightly to make a clear Call to Action (CTA). I want to put a button that when the visitor clicks they will be taken to this blog.

Normally this would be an easy task: in the HTML of the page we would just put a <div> element that contains the header image as the background style, and the content would have the phrase we defined and the button for the Call to Action.

Obviously, I want our button to be really flashy, stylized, so that it looks "pretty". But I did some research on the subject and Houston. we have a problem here: For security reasons GitHub removes any existing scripts and style tags in the code. In other words, we are limited to using "pure" HTML. Or is it?

The simplest way, therefore, would be to simply create a clickable header image and, if you need some animation, you could do that with a GIF and post it there instead of the page. But let's see if we really can't use CSS on GitHub...

Can I use styles (CSS) in my GitHub README?

After some research, I came across this repository that gives a somewhat "hacky" alternative to using styles in GitHub's README.

Look: GitHub doesn't allow you to use javascript or CSS scripts, automatically removing tags like that before rendering the final result.

However, it does allows you to use images, including SVG files. SVG files are "vectorized" image files, that is, images that contain the necessary information so that they can be assembled. This allows, for example, that an SVG image can be enlarged to infinity without losing quality, as it is not composed of pixels, but of calculations.

You can, for example, have an image like this in your README:

And as we mentioned before, you can "assemble" this SVG image with code. Let's open any SVG image in the code editor so you can understand what I'm saying (if the code doesn't appear below, click on "View Raw"):

As you can see, SVG is nothing more than a series of instructions for the computer to assemble the images. And this opens up a "hole" for us to put in these instructions some styles to customize our header.

You can use inside your SVG a <foreignObject> tag, and inside that tag you can use HTML, including style tags. Basically, you'll put a <foreignObject> tag inside the SVG tag and inside it you can then define <style> and the other HTML elements:

However, there are many limitations to doing this. We were able to put in our code images that use an SVG that has its own defined styles, but I couldn't do several things that I wanted, and it took some adaptations to make everything work as I needed.

To better understand how this was done, I recommend that you take a look at the code from our SVG image that I made available in the GitHub repository for my profile, and which is commented out step by step (sorry guys, only Portuguese for now, but you can Google Translate it).

It sounds simple, but it wasn't. See the "raw" of the file above to understand how I did it, noticing that the comments of the files always complement what is provided here (even though in Portuguese). And our header is finally ready.

Our header: in the final version it is animated by CSS

3. Multiple Languages

Our third customization will be to create our profile in both English (which is the language most GitHub users use to communicate) and Portuguese (my mother language).

I understand that this customization is important as you want to have a profile accessible to everyone in the English world, but it may happen that many of your potential visitors are local. So a good alternative is to have both options. In my case, I intend to put in both languages only the initial written text that I deem important for those who want to know more about my profile.

To create our profile with multiple languages we will use in our Markdown the tag <details>, which allows us to place content inside a "collapsible" section. This is HTML, and it looks like this:

<details>
  <summary>
    Section Title
  </summary>
  Section Content
</details>

As you can see, you can define the title the section will have using the <summary> tag, and the content always below it.

Important notes: don't skip lines between each section and if you need any elements like links, images and the like, use HTML inside that section: Markdown syntax won't work.

After creating two sections with details (choosing to leave the section in English as default and "open", using <details open> for that) and putting images generated in Shields.io in the summary, my GitHub profile file looks like this:

Multi language profile

You can create other sections in your README, even to make it "cleaner" if you prefer, putting information in separate and hidden blocks so as not to take up as much space on the screen. It all depends on your imagination and patience... 😊

4. Development Metrics

We can also create development metrics, that is, metrics about your dev routine. This opens up some more possibilities and gives the profile a really cool look. Let's use a very good repository here for that, which can be found here: https://github.com/anuraghazra/github-readme-stats#wakatime-week-stats (actually the same used in our previous content).

To do this, let's first create an account and credential on the WakaTime website.

Click Log In and Sign Up to create your account

I've created my account via GitHub login

After creating your account, view and copy your API key by visiting this address: https://wakatime.com/api-key

Install the WakaTime extension on your VSCode as well. After installing and restarting VS Code, it will ask you for the API Key to start tracking your programming.

After installing the extension and restarting VSCode, it will ask you for the API Key

With that, WakaTime will start counting the programming time and languages you used to feed its metrics.

In your profile repository README.md, include the following where you want to see the metrics:

1	<img align="center" src="https://github-readme-stats.vercel.app/api/wakatime?username=OctavioSI&theme=monokai&hide_title=true&layout=default" />

Just change the username to your username there on WakaTime and you're done! You will have new development metrics in your profile, updated as your actual activity is now recorded by VSCode! Note that your WakaTime status can take a long time to update, so if nothing shows up, be patient and soon it will be there.

There are other repositories that use WakaTime data, but this one's implementation is simpler and we've used this same repo before for GitHub statistics in the first GitHub customization tutorial.

5. Showing your latest Tweets

If you are a compulsive Twitter user like me (follow me there: Follow @octavioietsugu), it might be interesting to have your latest posts appear on your profile.

And it's very easy to do that using this very interesting repository: https://github.com/gazf/github-readme-twitter

To put your latest tweets in your README, just insert this in your markdown, changing the one after the id to your username (in my case, ?id=octavioietsugu):

1	![github-readme-twitter](https://github-readme-twitter.gazf.vercel.app/api?id=octavioietsugu)

And that's it, your profile should now show your latest tweets:

6. Showing your Spotify

Maybe your musical taste is something you want to show a potential recruiter (perhaps)? 😂

Anyway, you can put the list of last listened songs on your GitHub profile using this repo: https://github.com/JeffreyCA/spotify-recently-played-readme

To do this, just open the app that JeffreyCA created (you can choose to launch the app in your own Vercel installation if you like, there's a button there in the repo that shows this) and authorize your Spotify account:

Once authorized, just copy the markdown it provides on the page and paste it into your README:

Don't bother with the children's songs, but I have an Alexa and two babies...

With that your Spotify should appear on your profile too:

With Spotify

Anyway, it can be done, but does it make sense to you? After all, it's not because we can do it that we should do it, right?

In my case I took it off, since I can't keep this list of children's songs there lol 😂 I also took the Twitter one off because it seemed to me that it was a little too much. Mind your own taste tough, and if you think you should, go for it, champ!

👉 "AUTOMATED " CUSTOMIZATIONS

Now let's see another customization that uses "automations" on GitHub, through integrations, APIs and GitHub Actions. GitHub Actions allow you to run scripts periodically and thus be able to update metrics and other data dynamically.

We did this in our previous GitHub profile customization tutorial, where we updated the Blog post listing and our YouTube Channel post listing automatically, and for that we used a really cool Gautam krishna R repository called blog-post-workflow: https://github.com/gautamkrishnar/blog-post-workflow. .

We'll use it again today, but with one "twist" I haven't seen around...

7. Enhancing YouTube listing

Based on our previous post, we've already managed to bring up an automatically updated listing of the videos we've released on our YouTube channel. But the customization we've done is still very simple, with just the video title and the link.

It's not bad, but it could be prettier...

Let's rev it up, leaving something more visual and a little reminiscent of the YouTube video interface. For that, we'll have to play with the script that goes in the .github/workflows folder of our repository, and we'll play with the script that runs automatically to update our list of videos on the profile page (in this case, the youtube-workflow- file. yml). If you don't know what I'm talking about, go there in the previous video and check it out, because we used this to create this listing.

In any case, the script that updates this listing is here:

Our current script

To change this view, we will need to create a new template for the video that will be uploaded. In the documentation of the repository of this script the author mentions that without the template option, the script uses the pattern which is a markdown in the following format:

1	[$title]($url)

That is, we have the title received by default with a link to the video address, just like the listing we have now. To change this, we'll need a new template and, for that, we'll explore a little more the possibilities that the documentation brings us.

For our purposes, we're going to use the template option we already mentioned above, custom_tags and max_post_count. What does each of them mean?

template: format the result will be displayed
custom_tags: we can use this to create custom variables, with information we get from the address accessed in the feed_list
max_post_count: how many results will we retrieve

In our GitHub file we have a few comments on each line with what's relevant, but basically we have this:

As you can see, we were able to access a lot of possible information in this script and pass it to the template, and that's what we'll take advantage of to get a more sophisticated result.

If you want to see the listing of what a channel's feed brings, just access the address that we passed as feed_list: https://www.youtube.com/feeds/videos.xml?channel_id=UCPmM6RAkfC0CY2gGudIhWQA

To improve the visualization, you can use a service like Code Beautify.

Beeeem melhor pra visualizar tudo 😀

So let's get the information needed to bring YouTube data to our page: we first need to get the main information needed to build this thumbnail based on the response that the feed_list brought us, as we can see there in Code Beautify mentioned above. At the outset, the information we can use is: video title, video id, publication date and thumbnail.

In the case of the title, videoid and publication date, it's ok, since the information we want is there. For the thumbnail this is a little more complicated since the image address is inside an XML tag tribute and, as far as I've seen, it's not possible to get this information using the script with custom_tags automatically (the same problem happens with the views of the video).

To get around this, notice that the thumbnail address is made up of a default address, with the video id part of the address. Let's use this to get the images. After some tests, I realized that we can get thumbnails with a little lower resolution (and enough for our case) from the following address: https://i.ytimg.com/vi/{video id}/mqdefault.jpg

Our template also accepts HTML (since it will output in Markdown), so we've come up with the following format for the template:

And when I ran this script, the YouTube profile videos section on GitHub looked like this:

Progress! We now have the thumbnail images of the channel's videos and the title of each one.

It's not that bad, but it would be nice if we could have a format closer to what YouTube has. Something like this:

And how can we assemble something like this?

As mentioned before when talking about the header and CTA of the page, we are restricted to what GitHub allows us to insert in our markdown and, in particular, we are restricted from using CSS or javascript. So, the most we could do in this case is to create a table to place the image, resize it and that's it.

But, just like we did before, it would be possible to insert an image with the source (src) pointing to an SVG. In this SVG we could use a whole style, formatted as we need. The question here, however, is how we can pass the information we have to the SVG in order to build a dynamic SVG.

I'll be honest with you, this was not an easy task to do. It took me almost two days to discover the limitations that GitHub offered to include images like this and to finally build a solution. The advantage is that I learned a lot in the process and I'm going here to show you how I did it step by step.

If you are new to the world of programming, you may find the following section too complicated, but I will try to be as didactic as possible. My recommendation is that you try to implement and read the comments I left in the archives. It's all on GitHub, which I link here in this text.

How to create a dynamic SVG to use as an image on GitHub

As we made the header with CSS in item 2 of this article, I imagined it would be something very similar: assemble an SVG that had the operations inside a <foreignObject> tag and that's it. But I was wrong: Markdown is able to use CSS made like this, but for it it doesn't process the Javascript code that we put there. It might sound silly, but I spent a lot of time trying to make it work that way, and you can see the SVG I originally planned to use commented out here (in Portuguese):

The file is all commented out and you can follow what I mentioned in the file as the logic used to build the SVG we want, but basically we have:

a basic SVG structure, which assembles the "frame" that the image has to have to appear as we want: this includes the border, thumbnail size, title and view and date information, which are nothing more than "placeholders" for dynamic information that will be obtained. Styles here are defined inside the <foreignObject> tag, as we did with the header.
Javascript function that takes the ID of the YouTube Channel and Video we are interested in, and makes a new XML request to YouTube (yes, unfortunately we would have to make that request for each image and filter the result given the limitations of the third-party script that we are using to feed the README with this information);
once we have the information, the script would replace the placeholders in the SVG image with the data we are looking for.

That's it, apparently simple. I left the original file here because I believe that following the logic that was used is very illustrative for anyone who wants to learn.

But as I mentioned, it didn't work: GitHub (not even the separate Markdown editor like Typora actually) can't read and process this script in a way that works in the README. You can, however, make this image work right in the browser.

To test it, you won't be able to open the SVG file directly on GitHub (because they block the execution of scripts) and neither will you simply open it in your local browser directly (due to CORS error), check this out:

GitHub blocks scripts from running

Using locally in browser doesn't work either, due to CORS error

To test, you need to download file from GitHub on your local machine and when opening in VSCode, for example, load it with the extension Live Server.

Don't use VS Code or Live Server? Here's our article about it: How to choose a code editor for web programming?

Also see our code editor video, where we talk about this extension:

By right-clicking on the VS Code and choosing "Open with Live Server", you will be able to load the file correctly:

Our layout has already loaded

And to run the script, we need to pass two parameters: the channelId (Channel ID) and the videoId (Video ID), both of which you can get on YouTube. The browser address looked like this: http://127.0.0.1:5500/modules/youtube-thumbnail/teste-de-imagens-svg.svg?channelId=UCPmM6RAkfC0CY2gGudIhWQA&videoId=ibvWdC2mm30

And then:

It works!

As we can see, our SVG works as we want and automatically assembles our layout with the information from the video we've taken. But still, despite opening in browser, if you try to open it in Markdown it won't work. Check it out:

I've inserted the same file with the parameters in a Markdown and nothing

This leads me to believe that Markdown cannot, as a browser does, "run" the scripts that are inside the SVG before rendering it to the screen. This makes a lot of sense if we think that in the header we were able to put the styles in the SVG but it wasn't even possible to use an external background image (everything has to be inside the SVG file and, in that case, we used the base64 image file so we don't need external interaction).

OK, so what's the solution?

TL; DR;

Using HTML:

<img src="https://youtube-thumbnail-retriever-sigma.vercel.app/api/youtube-thumbnail/?channelId=YOUTUBE_CHANNEL_ID&videoId=YOUTUBE_VIDEO_ID">

or Markdown:

![](https://https://youtube-thumbnail-retriever-sigma.vercel.app/api/youtube-thumbnail/?channelId=YOUTUBE_CHANNEL_ID&videoId=YOUTUBE_VIDEO_ID)

where YOUTUBE_CHANNEL_ID is your YouTube Channel ID and YOUTUBE_VIDEO_ID is your video ID.

You can check further details in our repo: https://github.com/Dev-Lawyer/youtube-thumbnail-retriever

The complete solution (for those who want to understand and replicate)

The only way I can think of to solve this problem is to pre-process this SVG on a server separate from GitHub. Let me explain: let's put up a server that runs these scripts when we request it and, in return, return the SVG ready, with all the information we need.

a. Creating a repository for our "server"

The first step is to create a repository on GitHub to store these files that will make up our server, as well as serving as version control for our code.

If you still don't know how to get around Git and GitHub, check out our previous article here: How to use Git and GitHub: a step-by-step dummies' guide

And also check out our video on the subject:

Create your new repository on GitHub and in terminal (or Git Bash if you are on windows), clone the repo locally.

Then, for testing, create an index.html file with whatever content is in it (a "Hello World" should do it) and do a git add -A, git commit -m 'initial commit', and git push. With that, your repository should already have this new file and we are ready for the next step

Our working repo 😉

b. Enabling a "server"

The second step is to create an account with some service that allows us to host our files so that we can run the codes in javascript. A free alternative to our goal is Vercel. Register on Vercel, using your GitHub account as a registration login:

Create a new Project and import our newly created repo.

Click "New Project"

Import your repo

After importing the repo, there is not much to configure for this project. You can simply click "Deploy". Once created, your project will appear on the Dashboard and will automatically be connected to your GitHub. In other words, when you change your code on GitHub and push it, Vercel will automatically "publish" your code, with an updated online address.

By clicking on your project card in Vercel's Dashboard, you can also configure other options. By clicking on "Settings" and "Domains" you can enter your own record there, just set up a CNAME record at your domain provider.

Not sure how to set up a CNAME record? See our past content on domain registration here, where I explain step by step how to do this: How to register a professional internet domain

See our video on this here:

c. Preparing an API

The point of having a service like Vercel hosting our code is to be able to access an Internet address that is able to process an order and return an expected result. This structure that receives a request and returns a result is our API.

We will detail the concept, operation and implementation of an API in future content, but for our content today, just understand that we have to create a structure on our Vercel server so that we can send the Video ID code and our hosted function there process this and return the mounted SVG to us.

What our repository does is install Express.js, which is a web application framework on Node.js servers. In other words, this program provides a framework for us to run a web application on a server that supports another framework called Node.js.

In this repo I created the structure for the web program we mentioned, and you can analyze the structure here: https://github.com/Dev-Lawyer/youtube-thumbnail-retriever

I don't think it makes sense to pass code line by line here (since it's an article about GitHub customization and not API setup) but in general terms, what do we do?

We created an API framework, which allows me to access the address: https://youtube-thumbnail-retriever-sigma.vercel.app/api/youtube-thumbnail/?channedIl=CHANNELID&videoId=VIDEOID
When accessing this address, the route from the routes/youtube-thumbnail.js file that provides a "get" method, that is, it allows requests for information, calls another function getYTThumbnail which is in modules/youtube-thumbnail/main.js
Finally, our function accesses the YouTube server, takes the necessary information and returns a giant text that is nothing more than our already formatted SVG

The above is an oversimplification, obviously, but it's the logic behind what I've done. If you copy all the code there and upload everything to your repo, Vercel will install and make everything available automatically, and you can use that Vercel address as the source of your repo image on your GitHub profile.

For example, if you access this address from your browser: https://youtube-thumbnail-retriever-sigma.vercel.app/api/youtube-thumbnail/?channelId=UCPmM6RAkfC0CY2gGudIhWQA&videoId=ibvWdC2mm30, the image should load correctly.

You can use this same address in your README, and it will work too:

You can use our address as source for your images

ATTENTION: You can use the app I made available, but feel free to host your own app in Vercel. You can find instructions to do so in the repo.

Finally, our GitHub profile with the images of the uploaded videos (using this addresses as image sources in our template of GitHub Actions) looks like this

Wow! That was a LOT of work 😅

We now have a very customized GitHub profile. As I said in our last tutorial on this subject, it's up to you to use common sense and creativity to make your GitHub profile unique and, above all, attractive for the objective you seek.

Happy coding!

/* End of the post, see you next time */

5 FREE Blogger Themes for your firm's website

2021-10-02T15:35:00.002-03:00

So you decided to set up a website for your office and chose Blogger as the "engine" to deliver your content? Today I bring you 5 free themes that can be used on your website, and I'm going to show you step by step how to install one of them.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

All set? Then tag along!

If you followed our previous content, we showed you how can you build a professional website without programming and, among the available options, a platform that I consider very good to build a "portfolio site", that is, a site that brings content that can be ranked and gives you great exposure over time by attracting more internet visitors, is Blogger.

Still don't have your professional website? See our blog post here on how to do this, along with the video we posted teaching you this step-by-step:

In my previous content, I mentioned that the main feature for success is content, and that you can use the default Blogger theme at an early start without any problems. However, I know the default theme is pretty ugly, so I'm going to show you how to set up and install custom themes for free (although there are some paid options for that additional “punch”).

To find free Blogger themes is pretty easy: you can do a Google search for "free blogger templates" and many sites will come up with different templates that can be used on the platform. You'll find theme templates for photo sites, product sales, sports, news, and more.

"Free blogger templates" will bring you a lot of options right away

In this post, I'm going to focus on themes that I found and that I understand are interesting for you to present your content in the form of articles, as that's what I imagine a "portfolio" site should do to get more exposure. So let's go to some suggestions for Blogger themes on your firm's website:

5 FREE BLOGGER THEMES

Below you will find some interesting themes that I found on the Internet that can be used on Blogger to customize your professional portfolio site a little bit. In the name of each theme I made a link to the respective page if you want to read more or find instructions on installing and customizing them on Blogger, or if you want to purchase the paid version of the template (they offer the free version but the paid version gives more benefits, such as removing the credits in the footer).

1. POLAR

A very "clean" theme, with a main featured post, followed by two other minor highlights and finally the post list. It works well for you to have the most recent material you produce right on the cover.

I like this theme because it's basically composed of white and gray lines, which makes the look very focused on the content itself: if you use this theme, take care of the photos in the posts for a better result.

DEMO ONLINE DOWNLOAD

2. KATE

This theme has a very professional feel, with a very eye-catching "above the fold" portion, which allows you to leave your value proposition and a call to action right away. You can, for example, put a catchy title and subtitle for what you offer as services and a call to action, for example, to get in touch with you via WhatsApp.

In addition to the "above the fold" content, this theme is very visual to present the other articles written, which helps a lot to give a nice look if the photos of your content are well produced.

DEMO ONLINE DOWNLOAD

3. TECHY

This theme has a great initial presentation in terms of post highlights: a giant banner crosses the page right at the opening, which is great for capturing the interest of those who visit the page. From the image below, it is possible to associate this type of site more with technology and games pages, for example, but it should serve your content very well.

As with the previous models, a good visual presentation for each of your articles is very important, as they are the call for the reader to access the content.

DEMO ONLINE DOWNLOAD

4. PHOTONIC

What if your portfolio site was almost an Instagram feed? This theme totally focuses on the photos of your posts: if your photo production is excellent, you can leave an article with a sensational photo and, when clicking on the photo, the visitor is directed to your post.

This theme is very visually pleasing, and will make your website look much more relaxed and eye-catching.

DEMO ONLINE DOWNLOAD

5. RIPPLE

Minimalist. With this theme you basically have a nice way to maintain a Blog, which might be what you want for your portfolio site. With a large photo for each article and an opening snippet of what you've written, you can captivate your visitor and lead them to the content page without too many distractions.

DEMO ONLINE DOWNLOAD

INSTALLING A CUSTOMIZED THEME ON BLOGGER

And now let's install one of the themes, to show you in practice how it works. 😁

As a general rule, each theme has its peculiarities and may need specific adjustments to work 100%. In the links I left above, most of them take you to the page with the theme's documentation, where they are explained step by step what should be done inside Blogger and necessary adjustments to make the theme work properly.

Let's take a theme here and apply it to our website made earlier. For this article, we're going to use the last one on our list here, Ripple, for a more minimalist look.

First, download the free theme and unzip it to a folder on your computer. Once unzipped, you will see an XML file in the theme folder -- this file is the Blogger theme.

This XML file is the Blogger theme

To install the theme, you will need to go to your Blogger dashboard, click on Themes, on the arrow under the "Customize" button, and finally on Restore.

Then, just upload the XML file you downloaded, and the theme will be applied. If you access the blog at this point, you will notice that it already has the new theme, but it still gives a clear impression that there is something "missing".

That's because we're not done yet -- we'll need to make the necessary adjustments to get the theme applied correctly. There are usually more detailed instructions on the theme's download page for you to customize your theme. You can follow the instructions on each of the "Online Demo" links that we linked above and you will see that there are installation and configuration instructions.

In our case, we have an instruction file along with the file we downloaded from Ripple, in the "Documentation" folder. When opening the file, however, we notice that it is in a slightly different language (Indonesian?) but it is possible to know what to change.

To change the relevant sections, let's change the HTML in Blogger by clicking the down arrow on the Customize button on the Theme tab, and finally Edit HTML.

What we are going to change based on this documentation, which will need to be looked up in the HTML code:

Top navigation menus, replacing links with Blogger pages that we actually have or other links of interest:

Meta data on the document, which helps in content detection and page ranking, in which we will exchange information to put our details:

Contact information, which highlights our profile and provides an easy way for your visitor to contact you:

To make the theme easier to see, I've also published an post: this allows us to better see what the contents will look like once published.

Now, let's change the layout we came up with via the "Layout" menu: Once on the screen, you can change the title of some sections and configure other important sections, like defining a header image, for example. We can also delete sections and "widgets" that we don't want, to make the page better suited to our needs.

You can customize various sections of your theme here

Finally, we can make some changes to our layout directly in the HTML code, giving some final tweaks to what we want as a page. In this case, I changed the style of the search field a little, which is now above the profile photo and contacts. So our layout became a little more presentable:

It's still not perfect, but it's presentable.

I'll leave the XML code for this layout on GitHub with the adjustments I made, in case you're interested. To see the styles I used in the search field, search the HTML for /* OCTAVIO SEARCHBAR */

And with that, you can now put a custom theme on your Blogger portfolio site and have a more presentable professional website, without spending anything. 😀

Once your site is live, you can gradually refine its details, improve images and add additional widgets. If you still think it's worth it, you can buy a professional theme on the Internet and implement it the same way we've done here (on this site there are some really cool ones to sell and some for free too: https://themeforest.net/category/blogging/blogger)

/* End of the post, see you next time */

How to create a mailing list on your website

2021-09-24T13:05:00.000-03:00

Do you know anyone who doesn't have an email address? Well, even though today the means of communication have surely evolved (a lot!), it is a fact that everyone still has an email address. And email is still an incredible contact channel for making sales, deepening relationships and connecting with your audience. So be sure to create and maintain an email list as soon as possible. And today I'm going to show you how we can create an email list and make it available on our website!

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

All set? Then tag along!

Building an email list can be very helpful in keeping your digital presence active. Regardless of the most used channel by your target audience, email is still a channel that is certainly used by everyone and, without a doubt, it is an excellent channel for contacting your audience, which will allow you to maintain lasting contact.

We're going to include an email list on our professional website, which is something I recommend you do as soon as possible. Even if you don't intend to publish much content at first, start building this list with the emails of those interested in your content, as this data will be very valuable.

Still don't have your professional website? See our blog post here on how to do this, along with the video we posted teaching this step-by-step:

With your website up and running, we will place an action field there so that the visitor can enter the name and e-mail address in which they wish to receive our future communications. The final result will look like this:

Our contact capture form

With this form we can already start to capture the contacts of those interested in our content, opening new and great opportunities for future communication with our audience.

1. ENABLING A MAILING LIST SERVICE

When we talk about a mailing list service, there are very famous and old options on the market.

These mailing list services allow you to not only manage the subscribers to your list, but you can control email sending campaigns with open rate analysis of your messages, testing of different email versions, list segmentation based on a few parameters and more.

Anyway, it's possible to do a lot of cool stuff.

In the past I used the MailChimp service a lot, which is very famous and very intuitive. They have a free plan too and a system that works well. However, over time I felt its limitations as there is a limit of contacts you can enter (2,000) and I decided to look for other alternatives as their paid plan is a bit expensive as far as I know.

For our content today we're going to focus on a service that I recently discovered, which is Sendinblue. On the free plan, they offer unlimited contact registration, but you can only send up to 9,000 emails a month and 300 emails a day, which is more than enough for an initial email list.

Initial settings

After creating your account, let's set up some important initial aspects. In the Sendinblue Dashboard, click on "Campaigns" Menu > "Settings" Tab > "Default Settings".

In this settings screen, set the time zone and change other messages as you like for a more customized email experience.

Changing email templates

Now, let's access the "Templates" tab and change the default text of the emails we will send to our contacts. I'm going to change the "Simple Confirmation" email, which is the email sent when the person joins our email list, and the "Unsubscription Follow Up" email that the person receives when they leave our list . If you wish, you can also create other templates to use in your email flow, but to keep the article simple I'll just change these.

The template can be changed by clicking the "Edit the email content" button, and you have the option to change the HTML code of the email or use the Rich Text editor (which is an "online editor"). They themselves recognize that the Rich Text Editor is not the best option in a warning that appears, and I really realized that using this editor is not the best of experiences, but it should be OK for now (I'll make content to better customize this via HTML in the future).

Creating a Contact Capture Form

And finally let's set up our data capture form that will feed our email list. To do this, click on "Contacts" and then on "Forms" to create a new capture form.

Create a new form by clicking the "Create a new subscription form" button or change a form from the list.

On the next screen, you'll be able to create your form simply by dragging new fields and editing text, in a very interactive screen. Edit the format that your form has until you are satisfied and click on "Next", filling in the corresponding fields.

When you get to the "Lists" section, choose the email list where you want to store contacts who sign up for this form. And when you get to "Settings", choose whether the user who signs up should follow a "double confirmation email", that is, if he will receive another email asking him to actually confirm whether he wants to be part of the list, or a "single confirmation email", which he will already be subscribed to when he clicks the sign up button. This is up to you, but remember to choose the email template for new subscription we created in the previous step.

When you get to the end of form customization, you'll receive a link to directly access the form (for sharing and, as we'll see, for you to embed in pages like Google Sites) and HTML options to embed in your page's code.

2. INSERTING THE CAPTURE FORM ON OUR WEBSITE

As I mentioned before, when you finish configuring your capture form, in the final step Sendinblue will generate a form address and will also provide you with HTML codes that you can place on your page.

Inserting the form into a static Google Sites page

If you followed our previous article to create your static website, you should now have a page created on Google Sites. Let's insert the Sendinblue form there then.

To do this, simply click the "Embed" button and paste the link that Sendinblue provided to share into the URL address. And that's it, your form will be on your page.

Select Embed

And enter the generated form URL

Alternatively you can select "Embed code" and paste the HTML generated in Sendinblue there, but I've seen it works great to put in the direct share address.

Inserting the form via HTML on other websites

If you want to place your form on a website other than Google Sites and/or want to insert this form, for example, on a portfolio site generated in blog tools, you will need to include the corresponding section via HTML. But calm down, it's very easy to do this.

On the page where you generated the form in Sendinblue, it allows you to generate an HTML code to be inserted into your page. Leave this code for now:

You can embed this HTML on any page you have

Let's see how we can insert this into another page by editing its HTML and in our case I'll show you how to do this on Blogger, using the example blog I created in our last post for my law firm services.

The HTML code in Blogger can be found under the "Theme" menu by clicking the down arrow and selecting "Edit HTML".

After selecting the option to edit the HTML, you will have access to the HTML code that your page uses.

To insert our form, we will need to edit the HTML code of our page and that, in the case of platforms like Blogger and Tumblr (and also Wordpress), there are a series of code snippets that would be "internal syntax" of the platform that are replaced before going online. For example, on Blogger you will see excerpts like this:

This <b:if> tag isn't standard HTML, but it's an internal tag that Blogger uses to check for some condition in your template before "rendering" your final page. In this case, it checks if there is copyright information and, if it is not empty, Blogger renders that part which will be visible on your blog.

In our case, we just need to find the place to insert the relevant parts of the HTML code generated by Sendinblue. If you look at the code generated by Sendinblue, there are three parts with splits starting with <!-- START - ... and ending with <!-- END... These lines are comments left by Sendinblue with instructions to implement the code. Let's see:

This first comment says that you must insert the code from that line (that is, the line right after this comment that starts with <!-- START to the line before the comment that starts with <!-- END) inside the part "head" of your code. What does that mean? That you should look inside the Blogger code and insert the code indicated by Sendinblue between the lines that contain <head> and </head>

You can, for example, paste the lines that Sendinblue indicated into the next line of the line containing <head> and that's it!

Following the code generated by Sendinblue, you will see that there are already two more blocks of code: the first one tells you to include the generated code wherever the form should appears on your page, and the last one tells you to include it at the end of the page.

In my case, I put this right after a blog footer tag, on a line that looked like this:

This line indicates where the footer of our blog was, and it came by default. I simply saw where this <b:section tag ended, that is, I went to the immediately following part that had </b:section> and inserted the Sendinblue code there. When trying to save the template with the Sendinblue code, I got some error messages from Blogger, like this:

This is because Blogger is a little more "rigid" about the HTML content you put there. For example, the error noted above says that there is an error on line 5050, as a "required" attribute must be followed by an "=". Let's see what's on that line:

As we can see, the line has a "required" attribute, but Blogger requires that it should be followed by an "=" sign. Here, it is assumed to be true, so let's change the line to make this explicit:

With this, the "error" is fixed. I needed to do the same for other lines that pointed to an error.

Another error pointed out by Blogger was "open" tags. To explain, in HTML every tag has an opening and a closing. So if you want to start a line, you can put something like this:

<p>This line is opened and closed by tags</p>

Always an opening tag like <p> and a closing tag like </p>.

However, some tags do not necessarily need a closing tag, such as the <img> image tag for example, or <input> input fields. You will therefore not find an </input> or an </img>. But still, it's good practice to always "close" an open tag, and that's what Blogger requires. How can we solve this in an easy way? Simple, we can do it this way:

Since the tag doesn't have a closing tag, we put a "/" at the end of this opening tag, leaving a "/>" as in the image above. With that, the error should disappear. I had the same error for an existing <link tag, and just closing it like that solved the problem.

And with that, we already have in our Blogger the form with the list so that people can register.

By testing the form, we see that our contact list is being collected and the email is being sent correctly:

Our list is already working 😁

And the email for the subscription to the list was sent correctly!

3. CONCLUSION

Even if you don't intend to share content at the moment with your website visitors, consider creating a mailing list now so that you have a direct communication channel with your audience.

Email is still a powerful communication, sales and contact channel with people who already like your content and who have trusted you enough to share that address.

In future content, I'll show you how we can customize our outgoing emails and automate a flow of emails to convert those contacts into potential sales.

/* End of the post, see you next time */

How to create a LANDING PAGE without coding

2021-09-18T09:05:00.002-03:00

People have real problems and therefore look on the Internet for solutions that could potentially help them. And when that happens, you will certainly reap rewards if your page specializes in that person's problem, detailing step-by-step what they can do (with your help) to solve that situation. And that's what we're going to do today: a landing page!

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

All set? Then tag along!

We've already shown here how you can create your own website for free, using tools available today to build practically professional websites. As we said before, you will basically have a static page with your presentation and contact details (the "business card" page) or you will have a portfolio page, specially made to create content and show all your knowledge there. What would happen then if we had a "mix" between the "business card" page and the "portfolio" page?

Still don't have your professional website? See our blog post here on how to do this, along with the video we posted teaching you this step-by-step:

Today we are going to talk about the landing page, which can be understood as something between the "business card" page and the "portfolio" page. It has characteristics of both and given its importance, I understood that it would be better to create new content for it.

WHAT IS A LANDING PAGE?

The landing page is a page all thought and designed so that a visitor is attracted by its CONTENT and iterates with a determined CALL TO ACTION, CAPTURING the interest of that contact (called a "lead").

For example, imagine you are a will-focused family lawyer and want to attract more clients. You can, of course, create a series of will articles on your portfolio website.

However, it would also be great if you had an unique page on your site with very specific content detailing the advantages and step by step to make a fail-safe will, with a very clear Call to Action for them to contact you. That page would then be updated from time to time, optimized, analyzed to convert more customers (with the help of analytics tools) and even boosted by paid ads.

You could then create other similar pages for different subjects: one page for adverse possession, one for estate planning, and so on. You can even create a landing page for your visitors to download an exclusive pdf guide on labor rights in exchange for an email address. Anyway, the landing page enables you to fulfill a certain objective, focused on a specific audience.

HOW TO CREATE A FREE LANDING PAGE?

Creating a landing page is not much of a secret. If you've already followed our previous content to create your professional website, you can even use Google Sites to create your landing page. And that's what I'm going to show you now.

To create a landing page on Google Sites, let's create a new page on our site by clicking on the "Pages" tab and the "New Page" button:

Creating a new page for our landing page

In the next tab that opened, select "Advanced" to define our custom landing page path. By default, you'll want a title that's easy to "fetch" on the Internet, and the custom address should try to follow the same pattern. Custom addresses must not have spaces, and you must use the hyphen to separate words (by convention).

This will be important later when we talk more about SEO (Search Engine Optimization) and paid ads in future content.

Choose a title and URL that makes it easy to search on the Internet

Your new page will be the landing page and its construction is very similar to your main page that we have already shown here. Drag and drop images and elements to make it the way you like it.

If you've just created a Blogger porfolio site, you can create a landing page in the same way by clicking on the "Pages" menu and then "New Page":

Blogger's Landing Pages

If you're using Tumblr, you can create a new landing page by going to Edit Appearance > Edit Theme > Add a page and you are done!

Click in Edit Theme

Look for the "Add a page" button

Now you can create your landing page!

Creating a landing page, as we've said, is something in between the business card and the portfolio. So, you should watch out for:

Above the Fold: Put important information, in a brief manner, above the fold of the landing page.
CTA: Use a clear Call to Action above the fold -- direct contact with you, a contact form or to provide an email, download link for a pdf, whatever.
Content: Here things change a bit from the "business card" page. The purpose of the landing page is to draw a visitor's attention to that content and then try to convert them into a customer through the Call to Action. Therefore, you will need to put your content in detail there, below the fold. Using too few words may not rank you up enough in search engines.

And precisely the content is the difference between the capture page and a "business card" page: in addition to encouraging the action of visitors and providing ways to contact them, it needs to bring value. You can post information, video, images and whatever is needed to explain to your visitor the benefits of fulfilling the Call to Action.

Our landing page: Above the Fold, CTA and Content😁

Check our landing page here: https://sites.google.com/view/ietsuguadvocacia/contrato-vesting

CONCLUSION

On your website, you can create as many Landing Pages as you like, and for different purposes. What you should understand, anyway, is that the landing page works like an article: a visitor's gateway to your site, so that they're interested enough to hire you (or take the action you want).

The advantage of the landing page is that you can fully customize it, focusing all your efforts on converting that visitor into a contact. Thus, you can even create landing pages with different writing styles, images more targeted to that audience or even create unique content that generates value for that target audience segment. The sky is the limit.

As we will see in future content, creating landing pages is a great strategy to optimize your marketing campaigns and qualify leads, in other words, capture the contact of people who are really potential customers of yours.

/* End of the post, see you next time */

How to create a website step by step for free

2021-09-10T12:05:00.000-03:00

Today we are going to show you how you can have your personal or professional website step by step, without spending (almost) anything on it and without needing to know programming.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

All set? Then tag along.

When we talk about having a digital presence, one of the first thoughts that comes to mind is having a personal page, a website.

It seems natural since a website represents your business card on the Internet, a place where everyone can see your profile with beautiful photos of your office, in addition to your academic and professional background.

Therefore, today we are going to focus on creating a professional website, which in my opinion should be one of the first things you need to do to establish your digital presence, right after defining your target audience, domain and e- mail.

>> Still haven't thought about your target audience? Read our article on the subject here: Why and How to set your TARGET AUDIENCE | LEGAL MARKETING

>> To learn how to register a professional domain, read here: Como registrar um endereço de internet profissional

>> And if you haven't configured it yet, follow this article here to learn how to use professional email in your Gmail without the need for Google Workspace

** Note: please don't bother the domain I'm using in this article (bbeer.com.br) which is a domain I registered some time ago for a side project and which is currently in hold. It has nothing to do with the subject, but I created it so that I don't need to register another one to show what we'll do.

HOW TO CREATE A PROFESSIONAL WEBSITE ACCORDING TO MOST INTERNET TUTORIALS¶

There are now numerous ways to put a professional website online, including the service of several companies (very good by the way) that for a very viable price offer hosting with website building tools so that you can build your page without having to program, and you've certainly heard of at least one of them: GoDaddy, Hostgator, iPage, Locaweb…

There are many hosting options out there.

Usually, you can get hosting services in these companies for very affordable prices, and sometimes even the domain registration costs are already included.

However, be careful, there are cases where the domain registrar's name is the hosting company itself and not you, so take a good look at the contract before signing it, so that you don't be held hostage after you decide to change providers.

Most of these hosting services provide some type of resource management system that you can use to "step up" your page, such as the famous cPanel, which makes access to resources such as Database, FTP server (which is for you to upload files to your site using other programs) and even installers for programs like WordPress (which is a ready-made system for you to create a blog, website or online store, with many plugins -- we'll talk more about it in future posts ).

cPanel

And many of the tutorials on how to build a professional website out there follow this line: hire a hosting, buy your domain through the hosting service itself and install WordPress.

I don't think this strategy itself is wrong, but if you've never really used a program like WordPress, it might be something a little too complicated to just create your digital presence.

Also, these hosting plans typically offer features that you may not even need (such as PHP programming language support, required for WordPress) and, while affordable, can become a heavier expense over the years. It's a cannon shot to kill mosquitoes, in many cases.

I, on the other hand, understand that there are different, easier and cheaper alternatives depending on what you need for your professional website. And that's what I'm going to show you here.

WHAT TYPE OF WEBSITE DO YOU NEED?¶

A big criticism I have on other contents I found on the Internet on the subject is that few are careful to ask the user what TYPE OF SITE he needs.

When you don't have a digital presence yet, it's hard to know where to start when there are so many options available in the market, with so many jargons, companies and software that you've never heard of: WordPress, Wix, Google Sites, Hostgator, …

Obviously, no solution is perfect for all types of needs and therefore you need to ask yourself first of all, "What is my goal in putting together a professional website?"

Nope. But yeah...

For this article I'm going to focus more on my current target audience: service professionals (especially lawyers) who want to have a digital presence but don't have much knowledge of how to do it yet. Knowing programming is not a requirement to follow what I'm going to post here.

So, I ask: what is your goal when putting a website up?

If you simply answered “to have a digital presence, like a business card”, I believe you want to rethink that opinion. Just as a business card doesn't bring you customers, it just provides those you've already “conquered” an easier way to locate your contact details, having a professional website just to show your address, phone and email seems a bit of a waste.

More than a business card, your website should be seen as a PORTFOLIO. A portfolio of your knowledge, references from other clients and more information about the type of professional you are, all with the concrete goal of converting that visitor into another client.

In this sense, having a well-populated LinkedIn, with good publications and references can be even more important than having a professional website without any information other than your logo. Maybe that's your intention: to have a simple website with just the contact and a link to the social networks where you are really active, and that's fine! But if you want to have a professional website just for the sake of it, you could be throwing away a very good opportunity to build reputation and attract new customers.

You might want a professional website for a number of reasons, but generally speaking, your website will likely lean towards the following:

Business Card, so that my client has my contact details;
Portfolio, with content and information that can attract new customers and retain old customers; and
Showcase of products, in cases where you work with goods and need to have a place to sell them (usually not your case, Mr. Lawyer who just wants to set up a website).

So, we will cover the first and second options here, leaving out the third option as in principle it will not be used by our target audience.

WHY SHOULD I DEFINE WHAT TYPE OF PROFESSIONAL WEBSITE I NEED?¶

In the past, putting a personal website online was not such a simple task for a beginner. At the very least, you would need to know the basics of HTML and still have a hard time putting together something that doesn't look like a poorly edited word document or poorly done schoolwork.

Ah, a Internet 😌

Today, fortunately, reality is different. It is now possible to build professional websites without programming and with a really professional look. In fact, it's even possible to launch relatively complex mobile apps without programming anything.

The trend of building solutions without programming is on the rise, and if you are interested in innovation, be sure to follow the news that arise in this “no code” area. Doing my #ads here, my startup Mevio does exactly that: workflow automation using “no code” technology.

Therefore, since there are many different technologies and solutions out there, it makes sense to analyze what your professional website is for before venturing into any of them, paying for hosting or even hiring a web designer.

That said, let's get to the step by step on how to create your professional website (almost) for free.

REGISTERING A PROFESSIONAL DOMAIN¶

Having your own professional domain is something you should consider, and I personally believe you MUST do.

The value for a “.com” domain is very small, in the order of $12.00 PER YEAR, being such value even cheaper if you register it for more than a year. Honestly, if you believe that this amount is too expensive to have a professional domain (and, above all, a professional email), you might even be better off not putting a professional website up and focusing your efforts on creating good, engaging profiles on the social networks where your customers are present.

So register your domain as soon as possible.

Have never registered a domain? See our content on the topic here: How to register a professional internet domain

Take the opportunity to also see how to create your professional email address

HOW TO CREATE A PROFESSIONAL WEBSITE¶

Now that you've read about the importance of securing a domain with a good, short, and easy-to-remember name, let's get our hands dirty and really create a professional website.

As we mentioned above, one of the ways is simply to hire a hosting company that has the WordPress installation available and try to configure it to look good, although it is a fact that numerous tweaks will be needed before leaving it to your liking .

Now let's choose which route we'll follow in building your professional website and, for that, let's understand what your goal is: to have only an online business card, a portfolio or an e-commerce.

0. BEFORE CREATING YOUR WEBSITE: VERIFYING YOUR DOMAIN ON GOOGLE¶

Before I show you how you can create your website for the purpose you need, since I'll show you two options below to create your website using Google tools, I'll show you first how to verify your domain on Google for all purposes.

This is important because without verifying your domain you cannot use that internet address that was purchased.

To verify your domain on Google, go to Google Search Console.

Input your domain in Google Search Console

Enter your domain (without www) in the first option box. It will ask you to make some changes to your registrar records to add a new TXT entry.

Copy the Verification Code of the Google-generated TXT record

And create a new TXT entry in the DNS setting of your registrar, putting the provided value

If you can't verify it at first, wait a few minutes

Afterwards, everything should be OK.

I've tried to verify domain ownership directly from other Google services like Google Sites and Blogger when I tried to add a custom address, but even waiting a long time it just wouldn't verify. So I decided to do it directly through Search Console and everything worked.

Anyway, now we can finally create our page.

1. CREATING A PROFESSIONAL WEBSITE TO DISPLAY MY PROFILE (BUSINESS CARD ONLY)¶

If you just want to have a simple website on the Internet to put your contact details, some photos of the office, section on partners and associates, areas of expertise and everything else, the path is quite smooth. For this you can use online website creation tools, such as the Wix platform, for example.

Your static website is a place where you will provide your "business card"

SOME BASIC CONCEPTS WHEN CREATING A PROFESSIONAL WEBSITE THAT YOU MUST OBSERVE

Have you ever thought about what elements a web page should have?

When I look at law firms' pages, I always see the same thing: a huge picture (banner) right on the cover, with some links to "The Firm", "Partners", "Areas of Practice" and that's it. In fact, this pattern seems so common that doing anything other than that could be considered wrong.

However, there are ways to create a page that converts more views into customers and I'm going to show you some important concepts here that you should consider. 😎

Above the Fold

When you visit a page on the Internet, there are a series of actions that take place: you go to the homepage, scan the page to see what it is about, and you can click on links, read more text or simply leave the site.

Therefore, making it clear what value you bring to your page is essential: you have less than 3 seconds before the visitor loses interest and clicks the back button.

In this sense, there is the concept of "Above the Fold" content, which states that you must be able to convey your value proposition in a short content (a title and maybe a subtitle, very brief) as well as a call to action (more about this) in the initial space of your page, the one that loads first and that the user will see.

The idea is that if your visitor stays on your page for less than 3 seconds, you have to present all your value in that time and, if successful, convince your user to visit other content and finally get in touch to find out about your services.

Information about what we are offering is above the fold

Most law firm websites I've seen in my life (including large firms) only have a few images of the office, usually in a "slider" format in which the images change, but without any information that allows the visitor immediately identify the differential of the service provided there.

So, when creating your website (and here, both static and portfolio), be sure to briefly highlight your value proposition just above the fold.

Call to Action or CTA

An important element beyond the value proposition that you will place above the fold is the Call to Action.

A Call to Action or CTA is a button, text field or something that invites your visitor to do something: sign up, subscribe to a newsletter, send an email, call you.

It is important that in addition to the value proposition you use, you have clear on your homepage, visible and easily accessible what you expect that customer to do.

For example, you can place a call to action for a customer to download a free PDF about some specific topic that led them to that page. You can alternatively leave a call to action for that visitor to talk to you right on WhatsApp. Or send you an email.

What is essential is that you make clear what action you expect from him and how he should act. In the case of HubJur mentioned above, I used as a Call to Action a button with the text "Submit your problem for free" which when clicked takes the visitor straight to the app.

Not too much text on the home page

Pages with a lot of text, few pictures and that resemble a Word document should have been left there in 1995. Today, a website asks for concise information, pictures and elements that explain well what is being offered. It's no use clogging up your homepage with text and hoping that an unsuspecting visitor will like the result.

It is possible, indeed, to create pages with specific purposes to reach certain audiences (landing pages) in addition to your homepage, and we will see that later.

As a general rule, therefore, keep everything organized and with as little information as possible.

The above concepts, however, do not imply that you should not contain the other sections of your website (such as information about the firm, partners and practice areas) as they are important to identify your business. You should just organize this information in such a way that navigation on your page is intuitive and retains the visitor long enough for them to understand the type of work you offer.

CREATING YOUR PROFESSIONAL WEBSITE WITH GOOGLE SITES

In my case, when I need to create a static site, simpler and faster, I end up choosing Google Sites, which has drag-n-drop tools and allows me to build a site in a few minutes.

Assembling a basic website

When accessing the Google Sites page, you have access to a Templates Gallery that allows you from the beginning to have a structure set up for what you need and that you can modify according to your needs. See for example the "Team" template from this gallery.

"Team" Template

As you can see, this model already has an image that marks the "above the fold" and a title. You can put your value proposition there, with a simple phrase and subhead, and also a Call to Action to encourage your visitor to do something. Something like that:

Google Sites is very intuitive, and you basically need to drag the elements on the left side and snap them to the canvas. Define some texts about what you do in the language you want to reach your customer and BAM! Ready!

Far from perfect, but good enough and made in under 20 min

For those thinking of creating a professional website just to have something to show when their domain is accessed, a static page like this may be the best solution: little work, zero cost and allows you to make available the main ways of contacting you.

In my case I simplified it and removed all the additional pages that came with the template (I left everything in one page), but feel free to create as many pages as you think necessary. Just remember to have a homepage with enough information to make customers want to find you.

Note that you can (and I recommend) creating additional pages on your page by clicking the "Pages" tab on the right side of Google Sites and adding a new page, and they will appear in your links menu.

When adding a new page you can put a custom title and path, and this is very good: you can create specific pages targeted at your segment, bringing information about a topic relevant to your target audience, and can be used as a direct access to your services without the visitor having to access your home page.

This type of page with the specific purpose of targeting a certain subject and becoming a gateway to your services is also called a "landing page", and can be a great strategy to leverage your future ads or content boosts. We'll talk more about landing pages in future content in this series.

If you want to see what my simple page prototype looks like, click here: https://sites.google.com/view/ietsuguadvocacia/

For the purposes of this article, however, we'll just keep the home page. This is what I put on this simple page:

a. Above the Fold:

Concise title bringing the main service I offer, in this case "Corporate Law", but you can obviously be more creative;

Subtitle with more information in two lines, detailing a little more what a person can expect when hiring my service;

A background image to give some context and it could be a photo of your office for example. I used an image that I got from pexels.com and that I treated in Gimp to darken it;

A CTA, which is a button with a link that in this case opens whatsapp for the person to talk to me. The Call to Action is clear: "Talk to me now" and asks the visitor to get in touch.

B. Below the fold

On the rest of the site, you can put whatever you think you need: details about your office, team, areas of expertise, awards, whatever.

If the above-the-fold content is to immediately get the customer's attention and explain in 3 seconds what you do, the rest of the page is where you're going to convert that visitor into a customer.

In my case, I have included some information about my areas of expertise, a photo with a short presentation and an email list so that visitors receive communications when I post something that interests them.

Adding a custom domain to your website

Once your website has been set up, we will link our professional domain to it. If you try to publish your site, you will have the option to link a "Custom Domain", which is nothing more than the professional internet address you have previously registered.

You will be able to use your internet address registered here

Alternatively, you can manage this custom domain by clicking the Settings button and going to the "Custom Domains" tab:

Click the Setting button

And select Custom Domains

You must select "Start Configuration" and then "Use a third-party domain" to choose your domain that was registered in a registrar other than Google Domains.

After entering your address, you will see an "approved" sign next to it. If it shows an image that you need to verify your domain, go back to step 0 above and do the property verification via Google Search Console.

I tried to do it directly here on Google Sites but it just didn't verify (probably some change that happened in Google and they didn't update the service properly), so verify your domain first through Google Search Console.

If your domain ownership was verified in the previous step, it should look like this with the "check"

Google will still ask you to create one more record in your registrar, this time a CNAME record:

Google still asks for another CNAME record in your registrar

And in your registrar service, you should have something like this:

All set now

Publish the site through Google Sites and wait some time. Afterwards, your website must be accessible from the registered address.

Site made on Google Sites with your professional domain. Simple.

And that's it. If you want to build a website like you did in step 1, go ahead -- having an institutional page with your contact details to act as a "virtual business card" is super common, valid and sometimes necessary. However, even if you choose this path, I recommend that you also follow step 2, which sees your website as a professional portfolio.

2. CREATING A PROFESSIONAL WEBSITE AS A PORTFOLIO (RECOMMENDED)¶

Regardless of whether you chose to create an institutional website to serve as a business card, it is important that you have something clear: a visitor who comes to your site just to get your contact is possibly already someone you had some previous contact with and just need a reminder on how to find you.

However, someone who has never had contact with you is probably on your site for another reason: they are looking for information about a specific issue and stumbled across your internet address.

So, it's your job to make that visitor with a problem find a solution and get a lead with the content you make available and, if interested, get in touch for a potential hire. And the more relevant content you make available on your site, the more visitors you will have and, ultimately, the more chances you will have to effectively convert them into customers.

Thus, I believe that a good professional website should have content aimed at its target audience, bringing value so that visitors are attracted and become customers in the future. In other words, you should create quality content, and in good volume, thus building a virtual "portfolio" of subjects that you are expert in and that people can access for information purposes. This builds the authority you need to convert those contacts into customers.

If you haven't defined your target audience yet, I recommend that you check out our content here: Why and How to set your TARGET AUDIENCE | LEGAL MARKETING

There are several ways to create a virtual portfolio (social media, for example) but we will focus here on how to give a portfolio purpose to your professional website.

The simplest way to set up a professional website to work as your virtual portfolio is to create a BLOG, which will work as a REPOSITORY OF ARTICLES.

Note that you can, in theory, simply use the pages I mentioned in item 1 above to write your own content, but when we talk about continuously producing articles and content, always up-to-date, creating only landing pages becomes inefficient, because you'll want a simpler way to post content whenever you need it, and have post-organizing and article-search tools.

And what are the options for setting up an article repository?

To set up an article repository, you can install tools like WordPress on an Internet hosting service without major problems, or even buy a domain and hosting directly from WordPress.com.

But today we are going to show you how you can use some free blogging services to make your website look professional.

BLOGGER

Blogger is a very old Google service and has been around since the early days of blogging. It is a simple tool for blog posts and has a very intuitive text editor. It has good integration with other Google services and allows you to change its theme and layout to look like whatever you want.

This blog, dev.lawyer, is currently powered by Blogger.

You can use your own domain with Blogger too by setting it in the "Settings" and "Custom Domain" tab. If your domain is not verified with Google (as shown above), you will need to verify it as we did in step 0 and then enter the remaining records at your registrar.

You can add a custom domain in Blogger

Using a subdomain for our blog

In this case, we define a subdomain as a custom address (to be "articles.customaddress.com"). As we already have our address verified, we now need to create a new CNAME record there in our registrar, putting the prefix we want as a subdomain and the value with "ghs.google.com." (leave the final dot). It will look something like this:

How your registrar DNS service will look like

After a few minutes, your subdomain portfolio will be live:

Page is online, with the default theme so far

You can change the theme in the "Theme" tab of Blogger. All very simple. We'll cover ways to customize your Blogger theme and put some additional features in future content.

TUMBLR

Similarly, you can use Tumblr to create your blog, and also put your own address on it. I particularly like Tumblr as it has a very nice editor and it is very easy to configure.

To create your professional website on it, you will basically use the same steps and thoughts as we used for Blogger above, setting the custom address inside Tumblr. To do this, within Tumblr go to the menu "Edit Appearance" > "Tumblr URL" and click on the pencil to edit the section. There you can select the address you want to use.

You will need to add a CNAME record on your registrar

As with Blogger, you'll need to make adjustments to your DNS at Registro.br, just create a CNAME record that points the subdomain you want to "domains.tumblr.com".

And your registrar DNS records, if it is for a subdomain, will be like this

This process may take some time to update on the registrar side and on the Tumblr side. Afterwards, your blog will be online at the new url.

In this step, any of the two services above (Blogger or Tumblr) should serve you well. Both have themes to customize your site and can make your website/blog look more professional.

We'll better cover how to customize a theme for your Blogger and Tumblr in future content, but I recommend right away that you focus mainly on the content you're going to produce, as that's the most important thing and it's what will attract customers.

CONCLUSION¶

Having a professional website is something you can do today, without effort or programming. Do not avoid to set up your space to produce content and leave a contact channel with your potential customers under the pretext that you don't have the necessary knowledge to put a website online.

Today, tools like Google Sites and Blogger/Tumblr allow you to have your own website up and running in minutes, free of charge, and you should take advantage of that. Your only cost to get a website up and running today is a little time and a few bucks with your domain registration. It is worth it.

From the options I discussed here today, I actually believe that you don't even need to have your institutional static website. You can create your entire website in a blog format, putting a lot of interesting content designed for your target audience and using a clear CTA, so that anyone interested can send you an email, whatsapp or call you.

If you have chosen to create a static website (option 1 above), you can obviously put up a link to your blog. The important thing is to be clear, however, that your goal when setting up a website is to convert the visitor into a customer. Therefore, I would focus more on treating the blog as a visitor's entrypoint and instead of highlighting other content, highlight a very clear CTA: contact me!

In our next content, we'll show you how you can further customize your professional website, using themes and other tools that enhance its functionality. To not miss it, subscribe to our YouTube channel as well.

/* End of the post, see you next time */

How to have a professional email address with Gmail?

2021-09-04T12:05:00.000-03:00

Do you already have a professional email, that is, an email with its own "domain"? Because today I'm going to show you how, step by step, you can also have a professional e-mail, spending as little as possible.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

All set? Then tag along.

If you intend to have or to consolidate your digital presence, a very important step is to have a professional email address. And when I mention professional email, I don't mean a new email that is just used for work, but really a "professional" email.

Imagine that your client will look up your contact details to find out more about your work and possibly hire you. Which email do you think "sounds best"?

josephmanninglaw@hotmail.com
ou
info@josephmanninglaw.com

Certainly, the second format gives a more "professional" air by using your own domain, even though it has nothing to do with the quality of work or professionalism of our lawyer Joseph (if you own the email above, Joseph, I am sorry - - any resemblance to reality is pure coincidence).

A beautiful card but an ugly email...

Well then, I'll show you how to create a professional email while spending as little as possible.

REGISTERING AN INTERNET DOMAIN¶

Okay, so this is the "paid" part of this guide.

To have a "professional" domain, that is, a domain other than hotmail.com, gmail.com and the like, you will need to register a domain in your name, preferably something .com or .net, which are the most common domain endings you'll see on the internet and that most people will remember. There are other options (like this blog itself which has ".lawyer" at the end) but choosing a different domain is something you should only do if you have a good choice.

Want to see step by step how to buy a domain on the Internet? See our content: How to register a Professional Internet domain

SETTING UP YOUR DOMAIN TO USE A PROFESSION EMAIL IN GMAIL¶

Now that you already have a registered domain, I'll show you how to use it to get an email account right in your Gmail.

When looking for what other pages and channels that deal with the subject raise as possibilities, many say that you need a hosting service (or at least an email server) to have a professional email with your new domain.

Today I'm going to show you how I setup my domains to use them professionally together with Gmail, without having to subscribe to another service such as web hosting.

A. Email Forwarding¶

1. If your domain is registered with Google Domains¶

If you've registered your domain on Google Domains, it's all simpler since Google itself already provides this email forwarding service.

To set the forwarding, you just have to access your domain's settings in Google Domains, click on the "Email" menu and create an email alias: the intended address and where to redirect the emails.

Access your domain by clicking its name

Create an email Alias setting up the address you want and where to forward it

If I email now my example alias, falecomigo@dev.lawyer, I should receive it in my Gmail inbox.

And voilá, it is working!

2. If your domain is registered elsewhere¶

If your domain is registered elsewhere and does not have an email forwarding service, we will need to use a different approach, such as in my case with Registro.br for my .com.br domains (not supported by Google Domains).

My Brazilian registration service does not provide email forwarding

Email Server¶

To set up our professional email we will need an email server. An email server basically receives all emails forwarded to a certain address and redirects it according to the established settings.

In the case of Google Domains, they already offer an email redirection service as we have seen, but as the service does not support .com.br addresses at the moment, we will need some other service to fulfill this role.

We are going to use a free service called Forward Email. Make your free registration on the site informing your purchased domain (you can uncheck the option for additional protection) and create the new entries it indicates in your domain registration service. You must add 2 MX entries and a TXT record as instructed on the Forward Email page after you create the account:

Creating your account and adding a new domain

The service provides instructions on new entries to be created in your registration service

After creating the necessary records, your registration service will look somewhat like this:

Records in regsitration service

Click Save and wait a few minutes. In Forward Email click on the "Verify records" button or the refresh logs sign in the main panel:

Update your records

If everything is correct, you will see this message:

Registros OK

From now on, emails sent to our registered address will be forwarded to our Gmail account.

However, we are still unable to respond to this email received with our professional email, as both Google Domains and Registro.br only set up incoming emails. Let's settle this now.

A. Sending emails from your new professional email¶

Enabling Two-Step Authentication and Creating an App Password¶

First, you must go to your Google profile page, click on the "Security" menu, and finally search for the portion dealing with 2-step verification and activate it by linking your phone.

First enable 2-step verification

Verification set

Now, let's create an app password for our Gmail: just go back to the Google security section and click on the corresponding option:

Vamos criar uma senha de app

Choose a custom name for our app

And write down the generated password

Setting up your Gmail account¶

Now let's set up ours in Gmail: click the gear and "Show all settings" in your Gmail.

Acesse as configurações do seu Gmail

Then click on the "Accounts and Import" tab and in the "Send emails as:" section click on "Add another email address".

Add a new sending email

A new window will open, and you need to enter the email alias you created in Google Domains (or your registrar) there, leaving the "Treat as an alias" option checked. Then use Google's servers as the address for SMTP and enter in the password that password generated in the password for apps we made earlier:

Set the name, fill in the email alias we created in Google Domains and leave the "Treat as an alias" box checked

For SMTP Server use smtp.gmail.com and for credentials, use your Gmail email even with the password generated in the apps password we made

Now just enter the code of the email that Gmail will send you to finish the process

And finally we can answer our emails with our professional address as well 😁

CONCLUSION¶

Having a professional e-mail with your own domain is something super important for you to establish your digital presence.

In this content we've covered how you can create your professional email without the need to pay additional hosting (that is, no fixed monthly cost) which, in the long run, can become a significant expense.

And that's it. Good sending of emails, for sure you will have a much greater credibility now!

/* End of the post, see you next time */

Why programming should be for everyone?

2021-09-01T12:05:00.002-03:00

Have you ever heard that programming is a skill everyone should have today? Well, with a world immersed in technology, it seems that programming is here to stay, and interest is growing even among people who don't want to become career programmers. And, as we'll see, knowing programming is something that will help you a lot regardless of your field of expertise.

Watch here: https://youtu.be/rF9vEPBNva0

All set? Then tag along.

Have you seen this video, which went viral some time ago on YouTube?

The father asks his children to teach him how to make a peanut butter and jelly sandwich, with written instructions. An easy task? As seen in the video, if you act like a machine, it's not easy.

It almost sounds like bullying with children, but that's exactly what programming is all about: giving clear instructions to do something you want. The computer doesn't think for itself, so it needs the instructions to be unambiguous and to be followed correctly.

We need clear instructions

It is a fact that today we carry out a series of activities (like putting together a sandwich) without even thinking, but every action necessary for this is already "recorded" in our subconscious. Even so, each step needs conscious instructions so that the end result is achieved: pick up the knife, spread the butter and spread the bread, all in the right order.

The same can be said for any other activity or work in your life. And that's why knowing programming can change your life.

Steve Jobs once said:

“Everybody in this country should learn how to program a computer, because it teaches you how to think.”

And this is the absolute truth! Learning to program will change your mind and allow you to see problems differently -- and not just in the area of programming, but in any field.

I'll use my example, since I'm a lawyer: when drafting a contract, you can even sit in the chair and start writing from scratch on a blank paper, and after you have a "basis" of contract, you can then start adjusting clauses and check for inconsistencies.

However, it can be much more productive if it is clear from the start the logic your contract should follow: what essential elements you should have, how you can bind clauses and obligations together to ensure the purpose of that contract, and how the entire document should follow a specific order to make sense.

This mental preparation for the work to have an efficient result is nothing more than applying a programming logic to a document. It's the same process.

PROGRAMMING LOGIC?

As we mentioned, the act of thinking logically, outlining a strategy so that your goal is efficiently achieved is what we call LOGIC.

In programming, programming logic can be considered as the reasoning you will adopt to accomplish a certain task, and this is independent of the programming language you use. You can use programming logic for a spreadsheet in Excel, for all that matters.

You don't pass the programming logic to the computer: logic is something that is in you, which allows you, based on this reasoning, to transmit to the computer what you want based on a series of clear and linked instructions that will fulfill that objective in the form of a computer code.

ALGORITHM

If programming logic is the reasoning we will use to solve a problem, what is an algorithm?

Well, the algorithm is the programming logic applied in a determined sequence, such as a "cake recipe" for that task to be accomplished.

For example, have you ever tried to solve a Rubik's Cube? For those who have never played with the Rubik's Cube, it is a 9x9 cube in which each face has a color. Each side has a center square that doesn't move, which contains the color that face should have when complete.

To solve a Rubik's Cube you can rely on an algorithm: solve one side of the cube first, lining up a cross shape and then the ends, and repeat the process for the other sides. There is a right order for you to be able to solve the entire cube without destroying what was done before. And this "cake recipe" for solving the cube can be considered an algorithm. In reality, there are computer programs that solve a Rubik's Cube today in seconds, relying on visual computing.

Check out this really cool video from a friend of mine, Jão, in which he tries to solve a Rubik's Cube -- it would certainly be easier using an algorithm (subscribe to his channel, it's a lot of fun):

Programming is, therefore, nothing more than applying programming logic to find a solution and apply/develop an algorithm, in code form, that will solve that problem. It's just that, a repeating process between thinking, putting algorithms into code, and thinking about the next problem. "Rinse & repeat".

AND HOW CAN I LEARN PROGRAMMING LOGIC IN A PRACTICAL WAY?

To learn programming logic, everyone would say that the only way is to program. But this seems impractical to me, since you are here exactly to learn this, considering that you are someone who is just starting and/or has never programmed in life.

Learning to program is learning to think like a programmer, in steps, assembling a peanut butter and jelly sandwich step-by-step with no mistakes.

You can, of course, start one of the many great online courses like Codecademy or KhanAcademy (which I really like 😀). Actually, you should try to seek as much knowledge as possible to become a complete professional.

But I'm going to give you a slightly different suggestion today: how about learning programming logic (that is, thinking like a programmer) through games?

In fact, I've seen some games aimed at teaching programming and I was sure I would never play them. Games that look like apps from the 90s, that is... Until I bought a game from Ubisoft called Rabbids Coding.

I played it on the computer, but I saw that it already has free mobile versions:

https://play.google.com/store/apps/details?id=com.Ubisoft.Rabbids.Coding&hl=en_US&gl=US

https://apps.apple.com/us/app/rabbids-coding/id1504420897

https://register.ubisoft.com/rabbids-coding/en-US

In my video on this subject here on the Dev.Lawyer channel, I did a little tour of the game's concept, with my debut as a gamer channel (lol, not really).

This game is very interesting: you must pass commands in a specific order to the bunny (?) on the screen, and he will follow your directions. And as your algorithms work, you clear stages. Simple but effective if you want to learn how to think logically without coding yet.

CONCLUSION

Programming is a skill of the future, and everyone should learn it, especially the logic involved. Thinking logically helps you in all fields of work, bringing a rationality that doesn't always exist.

In today's content we've brought you some concepts about what programming logic and algorithms are, as well as a fun way you can learn how programming logic works.

In our next content, we'll show you how you can use logic by actually programming something.

/* End of the post, see you next time */

How to register a profissional Internet Domain

2021-08-27T23:46:00.002-03:00

An important part of your digital presence starts with your own Internet domain, which gives a more professional look to your business. And today I'm going to show you how you can register a unique domain for your business.com 😉

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

Watch here: https://youtu.be/iAUYyazHXeQ

All set? Then tag along.

Have you ever heard of the term "domain"? Domain is nothing more than the "address" of a website that you visit, easy to remember and that you probably alreaady know several by heart.

In reality, a domain is a series of letters that are registered on the Internet and act as a "shortcut" to the real address of that website, which is represented by an IP address and port of the machine where it is hosted.

For example, it's much better if I advertise my site here as www.hubjur.com.br than ask people to access the address 151.101.1.195, right?

With a proper address, you can even link to your website page, blog or articles that are on other services, such as Medium, Google Sites, Blogger and Tumblr.

After all, it's much better for you to access a dev.lawyer than a devlawyer.blogspot.com, isn't it?

So let's learn how to register a new internet domain.

BUYING AN INTERNET DOMAIN¶

To have a "professional" domain you will need to register a domain in your name. Give preference to .com or .net domains, which are the most common domain endings you see on the internet and that most people will remember. There are other options (like this blog itself which has ".lawyer" at the end) but choosing a different domain is something you should only do if you have a good choice.

OK BUT I DON'T WANT TO PAY ANYTHING. DON'T WE HAVE ANY "FREE" CHOICES?

When you register a domain, you are required to pay an annual fee to the company that registers it. In the case of .com and .net domains, for example, it is Verisign. And my economics teacher already said: "There is no free lunch".

If to register a domain it is necessary to pay, it means that in the end any "free" alternative has something more to it. Let's first see what free alternatives exist to register a domain:

1. Free domains on hosting services:

It is quite common that when looking for free domains you come across hosting services that offer hosting services, usually at discounted prices with the free domain.

A print of Hostinger landing page (in Brazil), offering free domain

This other Portuguese website (amen.pt) also offers .pt domains for free

I believe that the value that these services bring is real, offering many tools for domain, website and e-mail configuration, for example, very easy especially for those who have no intimacy with technology. However, it is important to emphasize that the "free" part is not free indeed: the domain registration ends up being free but in general you end up being tied to the service, as it ends up being renewed the following year for a price that often exceeds the price that the domain alone would cost.

Some services still offer domain registration for free, but they do it under the company name, not yours. This means that if the following year you do not want to renew your domain registration with the company, you may find yourself in a situation where you will not be able to renew it on your own, as it will not be under your name.

2. Free domains with Freenom

A company called Freenom offers free registration for a few different endings, but they are all "top level", meaning they allow you to have that a "short" address that professional domains have.

As you can see, using this service you can register a .tk, .ml, .ga, .cf and .gq domains for free. If you have creativity and luck, you might even be able to put together a really cool domain name. This is really a service that allows you to register the domain free of charge.

What is the "catch"? It turns out that when you use this service, the registration actually stays with Freenom, and they give you a "use license". You are not the owner. This means that if you need to transfer that domain to another service later or, if that's the case, negotiate and sell it, you won't be able to. In the end, you get a free service that works, but for use only. See the excerpt in their "knowledge base" saying this:

Você é usuário, não licenciado

OK, I GOT IT. AND HOW CAN I PAY AND REGISTER A DOMAIN? IS IT EXPENSIVE?

As a general rule of thumb, you shouldn't spend a lot to register your own domain.

For .com domains you can normally get registration for around $12.00 a year. As you can see, it's low cost and, if you intend to use a professional domain to improve your digital presence and, consequently, your customer conversions, it should be an easy expense to bear because it's really worth it.

Note, however, that some domains can be more expensive if they are considered "Premium", meaning they are considered more disputed and therefore more valuable. His price will also be displayed on the purchase screen, don't worry.

As I mentioned earlier, you can use various services on the internet to register your domain (such as with website hosting services) but I will show you the way I do it and prefer it.

First, some recommendations for your domain:

try as much as possible to use the "default" domains .com or .net;
use a short, easy-to-remember domain name if possible. It's no use putting your German surname if no one can write 😝
in some cases it may be interesting to register a domain with an alternative ending, creatively using your desired one with the ending (as I did here on dev.lawyer).

Registering your domain (.com, .net or others)

Although it's possible to do this in a number of ways (buying, for example, from domain.com) for very reasonable prices, I'm now buying only from Google Domains. I've used other services before, and I like the way they handle domain registration: it's all very intuitive, hassle-free auto-renewal and it has domain privacy as an option at no extra cost and SSL certificate for your website to have secure HTTPS protocol.

Google Domains home screen, just type what you want to register

They also offer you many domain options.

The registration process is really easy: choose, pay and go.

Regarding domain privacy, all domains are required to inform a series of data about the registrant, which leaves you exposed to the general public. You can consult any website, for example, by entering its domain in Whois. If you use linux (and mac, I think) you can access this data by typing "whois site.com.br" in the terminal.

With privacy enabled, at least you can prevent snoopers from accessing the data (see the dev.lawyer example here):

Whois from dev.lawyer, all "redacted" by Google Domains

Other services offer this functionality as well, but in my experience this was something paid for.

CONCLUSION¶

Registering a domain on the Internet is relatively simple and inexpensive. Having your own internet address will open many doors for you in terms of digital presence: you can build your personal or professional website, have a personalized e-mail and thus give a much more solid image of your profile.

It's a worthwhile investment and I personally consider that saving those few bucks per year while not being sure you can keep your address in the future (when your site ramps up and all the time, effort and money invested is flourishing) doesn't seem like the correct path.

My sugestion? Register your domain TODAY, just in case. It could be with the name of your office. It could be your first and last name. It doesn't matter. Just do it.

In our next content, we'll show you how to have your professional email with this domain you just bought, now without additional costs 😁

/* End of the post. See you next time */

Why and How to set your TARGET AUDIENCE | LEGAL MARKETING

2021-08-20T11:39:00.004-03:00

Let's focus on the initial aspect you should look at when deciding to promote your services: WHO IS YOUR CUSTOMER. In this article, we will discuss how and why to set your TARGET AUDIENCE before investing time, effort and money in promoting your services.

Hi, if this is your first time here, our content is focused on INNOVATION FOR LAWYERS and, in particular, this series is focused on LEGAL MARKETING.

Watch here: https://youtu.be/VV5PY0V4CwA

All set? Then tag along.

TARGET AUDIENCE AND ITS IMPORTANCE¶

After all, what is the target audience?

Imagine that you, a lawyer, want to write a series of legal content to promote yourself, build your reputation and, consequently, get some clients interested in your services.

As a lawyer who works on several fronts, you start writing texts on some issues you've faced in the past, in different fields of law, hoping to get potential different cases. After a few days, nothing happens. No return. Weeks pass, nothing. Months, few contacts. Is your content bad? Probably not.

POSITIONING YOUR PERSONAL BRAND IN FRONT OF THE TARGET AUDIENCE¶

"Trying to please everyone is to make sure not to please anyone"

This sentence carries a great deal of truth. It's hard to build authority on any subject when you choose to talk about everything. And for the publicity of your work, this can be a relevant factor. By writing a little bit of everything, you don't build authority on anything. And that's why defining your target audience should be yout top priority before starting any efforts in legal marketing.

When it comes to boosting the publication or placement of paid advertising, or even when we talk about the production of texts optimized for a better ranking in search engines, what we try to attract in the end is the attention to the authority that you, as producer of legal content, has on a certain subject.

The content you produce is something that will go around on the Internet for a long time. Months. Years. And people looking for information for a real issue can access your content long after it's posted. And when they find your article, they will possibly also look at other articles and content you've produced.

And once they see that you're an expert on that topic, they'll recognize your authority to address that topic and your chances of being hired will go up. If your profile has no "line of action," it can be more difficult to establish the authority a more demanding customer needs.

By focusing your content and actions on a specific target audience, your actions, content and production end up specializing and leveraging your authority on the subject, which is essential for greater future conversion and the very personal brand you want ramp up.

SO, WHAT IS A TARGET AUDIENCE?

The Target Audience is nothing more than that portion of the population that you see as potential ideal customers for your business, and on which you should focus all your efforts to dazzle, conquer and convert. And for your efforts to be effective, it is important that you have clear characteristics that allow you to separate them from the rest of the population.

Defining a target audience means knowing what your age group, gender, income, location, personality, interests and habits make you unique. With this information, you will be able to adopt a better marketing strategy and define the type of content, the dissemination channel, the form and the most appropriate language to establish a relationship with it.

If you intend to reach companies as customers, you can also define the traits that this target audience must have (size, revenue, segment, culture).

The definition of the target audience, although apparently simple, is very important because it can affect the entire content production and marketing strategy that you will use, saving a lot of time and money.

TARGET AUDIENCE AND PERSONA¶

Have you ever heard of "Persona"?

Persona is a tool used by companies to define some "fictitious characters" that represent a portion of their customers, and, as a rule, even has a name, personal and professional characteristics, interests, behaviors and, mainly, the objective that they want to achieve by use a service or product.

The concept seems strange, but over time it can prove very useful when we realize that "João Tavares, 35 years old, single and without children, a project manager who lives in Jardins, with an income of $8,000.00 and who likes to go out every weekend for a beer with his friends, who use only LinkedIn as a professional social network and Instagram for personal matters, and who are currently suffering from the pressure for innovation in the company but with a low budget for hiring automation solutions" would probably not buy a product from your company but would buy it from a competitor in face of the intended price adjustment.

The Persona gives a "face" to its customer, something closer and more real, and allows for the building of the product and communications to meet the expectations of this imaginary customer who, in the end, is representative of a part of our customer base. A Persona can evolve over time, becoming more complete and in a way that better represents who we are serving.

As you can see, Persona and the Target Audience are different concepts: while a Persona is a tool to better understand our customers, direct efforts that please them and avoid problems that might cause them, the Target Audience is more "depersonalized" -- it is a section of the population that has some common traits and that we want to understand and attract.

Of course, we can use these two concepts together to have a better understanding of who we are targeting, but only by defining your target audience will it be possible to have a more accurate prediction of our Personas.

HOW TO DEFINE YOUR TARGET AUDIENCE?¶

And how can I define my target audience?

The target audience can be defined by two aspects: "demographic" factors and "psychological" factors:

Demographics: personal traits such as gender, age, income, marital status and profession; and
Psychological: personal interests, their fears, values and attitudes (such as their consumption habits or use of social networks).

The use of just one of the factors, such as demographics, can end up being very generic and does not provide us with such a good definition of target audience: if we define, for example, "men or women between 30 and 40 years in a management position and that earn between R$10,000.00 to R$15,000.00 monthly", although this definition represents a portion of the population that we want to attract, we will still have a very opened analysis with too varied profiles for lining up an efficient strategy.

However, by combining psychological factors such as "interested in technology, takes part in startup events and uses LinkedIn and Instagram", we have a more interesting filter to target content and marketing in order to attract them to our customer base.

And where do I get the data to define my Target Audience? Can I make up/predict all this?

Certainly, your own experience in your field of expertise is extremely important to define the profile of your customers, and you can (and should) use your personal gut feeling to draw the ideal profile of the customers you want to reach. However, whenever possible it is important that you align this with real world data that can complement your understanding and bring a more realistic picture of your customers.

If you already work in the area you intend to invest in, why not conduct an interview or send a questionnaire to better understand the profile of your best clients? Your form or interview should address demographic and psychological aspects, taking care to capture information about this customer's preferred means of contact (e-mail, telephone) and the media he usually uses. This is important to define how to approach the next customers in future campaigns.

You can create online surveys for free using tools such as Google Forms or SurveyMonkey.

If you already have a digital presence and a website, for example, you can analyze the profile of your visitors through monitoring tools such as Google Analytics or even analyze the profile of your followers if you have a Facebook or Instagram page with Insight tools. With these tools you can have access to very interesting data such as the location, gender and age of your visitors, which device they access from (such as cell phone, desktop computer) and, if there is enough data, even behavior and interests.

Many options in Google Analytics about your visitors

Facebook/Instagram also has good public analytics tools

Need more info? Look your competition

With more information in hand about the characteristics of your customers, you will probably already have a good idea of which service niche will act to serve this audience. Now it's time to look at the competition and see how the "top 10" perform.

Open an anonymous tab in your browser (so as not to influence search results) and type in Google the terms you understand your potential customers would search for the services you want to offer. This imagination exercise must obviously consider the characteristics that your target audience has and that were raised in the previous topic. It may even happen that your ideal client doesn't use the internet (and to reach him you'll have to look for other advertising channels, but at least you've saved a lot of time in producing paid ad content that would never go through them).

Take notes and access the first sites that appear on the subject without being paid. These are listed there for their ORGANIC relevance, and are automatically brought by the search engine as a function of SEO strategies, which we will be covering in our next content.

Also see the content that is listed there as sponsored (usually with the "Ads" or "Ad" tab). Those results show up there as a function of paid advertising, and they're billed per clicks or views (we'll also cover how to do this in future content).

Paid and Organic results in Google Search

Anyway, research what the competition has done to attract that position in the search, either by paid or organic strategy. See what kind of subject they cover, what kind and format of ad is made, what are the main words that are used to get the attention of your potential target audience.

You can also access Google Trends to search for terms that are hot on the Internet, with active search and related to the topic you intend to cover. Just type in the keywords and Google Trends will show you the search volume by location and related topics that have relevant searches (which becomes a precious source of inspiration for content).

Google Trends: hot topics research source

It may also happen that your target audience doesn't even use Google to search for the service. They might be on Instagram, Twitter, LinkedIn, TikTok! Use the information gathered above to understand their habits and where to find them.

FINALLY DEFINE THE TARGET AUDIENCE!

With more information, you can now define your target audience and, mainly, answer the following questions:
What problems does my target audience have that I can address?
What characteristics (demographic or psychological) does my target audience have that are essential for them to decide to hire my service?
How does your target audience interact with similar services? How do they look for this type of service and how do they make contact?
What is the size and budget of your audience for your service? Is your target audience big enough and has the necessary income to pay you?

This information is essential to predict the type of content you will make, how the advertisement will be made, what is the size of the investment needed and, as a result, what is your return on the investment (we'll talk about CAC - Cost of Acquisition per Customer and ROI - Return on Investment in later content). Is your target audience big enough to justify the time, effort and money required?

As for the last topic (size of target audience), this might seem a little tricky to estimate. In this case, you can use Facebook's Audience Insights tools. To use it, you need to have a Facebook page for your professional services as it is part of the Facebook Business suite (Insights tab > Audience > Potential Audience).

To estimate your potential audience, you can set a Filter with age, interests, language and location. It's a good objective basis for you to do these simulations.

Facebook's Audience Insights

HOW TO SET UP A TARGET AUDIENCE PROFILE?¶

To start with, I've put together a template so you can drill down to your target audience and apply the concepts presented. The file is in our GitHub support repository and can be accessed at this link: https://github.com/OctavioSI/dev.lawyer/blob/main/publico_alvo.pdf

Target Audience Template

CONCLUSION¶

Today, Legal Marketing is a reality and the possibilities available to lawyers are much greater.

However, before creating random content to drive and pay for advertising for your firm, it is worth preparing for an effective Legal Marketing action, and defining your Target Audience is the first step towards that.

Follow this series on our YouTube channel, where we'll cover how to effectively leverage these new express permissions to our professional class. Also, consider subscribe to our channel for new content on Legal Marketing, Innovation, Programming and business aimed at lawyers.

/* End of the post, see you next time */

How to choose a CODE EDITOR for WEB DEVELOPMENT (IDE?)

2021-08-13T11:30:00.002-03:00

Today we will talk about CODE EDITORS for WEB PROGRAMMING, what you should watch out for when choosing this tool which will follow you from now on and some tips on how you can use and configure your editor.

Also, follow me on GitHub and also Dev.Lawyer's profile so that you can have instant access to all the content I am posting here.

Watch here: https://youtu.be/h73ZVeWRsj4

All set? Follow me then.

What is a Code Editor?¶

Se você tem interesse em codar, já deve ter se deparado com muitas recomendações de programas para escrever o seu código. A discussão sobre qual o melhor editor de código costuma ser polêmica, com cada programador indicando a sua preferência como a única alternativa viável, mas vamos ser objetivos: o melhor editor de código é aquele em que você se encontra melhor, sabe os atalhos e consegue, enfim, trabalhar mais rápido.

If you're interested in coding, you've probably already come across many recommendations for programs to write your code. The discussion on which is the best code editor is often controversial, with each programmer indicating their preference as the only viable option, but let's be objective: the best code editor is the one you are best at, know its shortcuts and can, well, work faster.

Depending on the programming language you want to study, there are specific editors with even better features that help you develop your program. For example, if you're developing in Python, you might like PyCharm. If you want to program in Java, you can possibly find advantages when using Netbeans. The possibilities are plenty.

For web programming, however, I recommend that you start programming using a Code Editor that is light and functional, with good integrations that will help you to conduct a more efficient work.

A Code Editor can even be your regular text editor, like Notepad, but it's interesting to look for some program that at least brings you good syntax highlighting functionality. What does that mean? It means that the Code Editor can highlight different parts of the "grammar" of your code, improving its understandability.

Is the Code Editor an IDE?¶

Have you ever heard of IDE? IDE stands for "Integrated Development Environment" and it aims to provide more functions than a Code Editor. As a rule of thumb, an IDE has more features that can help you program (it may contain emulators, compilers, other libraries, etc.) in addition to the existing code editor itself.

The Code Editor, on the other hand, has a simplified approach, being only a text editor with "something extra" -- normally, syntax highlighting and integrations that help you to program.

Our recommendations 😎¶

For Web Programming you will find several options of Code Editors, but find below some very famous and most used code editors today, all with Windows, Linux and Mac versions:

1. Visual Studio Code (free, open source);

2. Atom (free, open sorce); e

3. Sublime (paid, but it has an evaluation version without time constraints).

These editors already have syntax highlighting for most common languages, and if they don't, you can simply install new syntax through plugins in the editor itself. With either option, you will certainly be well taken care of.

To install, simply access the corresponding website, download and follow the installation instructions. For my projects I used Atom for a long time, but given that (i) in a preliminary research I noticed that many developers are using VSCode, and (ii) it is possible to install a plugin to use the same Atom shortcuts in VSCode (Atom Keymap) I'm going to show you here the basic aspects and settings you can do to prepare your machine for development using VSCode.

VSCode: a brief tour¶

So let's go through the main features of one of the most used Code Editors for Web programming today: Visual Studio Code (VSCode). In this brief tour we will show you what is most important features for your starting projects. Below is the splash screen you'll come across when you open the program for the first time:

VSCode

1. Activity bar

You can open a project folder in VSCode by going to File > Open Folder menu and selecting the root folder of the project you want to edit. Once opened, you'll see the options on the Activity Bar, which is the menu bar on the left. The options I want to show you are the following:

What we will see today

a. File Explorer

The first menu is the File Explorer, which will show you the structure of your project in tree view. To open a project file, just click on its name and it will open in the space on the right:

File Explorer

b. Source Control

The second option is the srouce control. Instead of using Git from the terminal to give the necessary commands, you can do that here. You can do git commit, push, pull and everything else.

Version control using Git inside VSCode

It also shows you a record of changes made before your commit took place, with an instant preview of the differences between the file before and after the changes.

Changes and differences between versions

Not sure how Git works? See our past content on the subject here: How to use Git and GitHub: a step-by-step dummies' guide

c. Extensions

The last menu we'll show you is Extensions. It allows you to expand the usefulness of VSCode with interesting features.

You can add support for programming languages that are not pre-configured in the editor, for example, but there are still many other interesting features that are worth exploring. We will suggest some here in this content.

VSCode Extensions

2. Command Bar

The Command Bar contains all existing commands in VSCode and can be very useful in your day to day operations. To access it, just press Ctrl + Shift + P and the bar will open. You can also open it from the View > Command Pallete menu, but the keyboard shortcut is easier to access once you know it.

Some interesting commands you can look for in the command bar (and what to type to find the option quickly):

zen (toggle View: Zen mode) - ZEN mode. It takes distractions off your screen by letting you focus only on the file you're working on. To disable it, just press Ctrl + Shift + P again and type zen to open this option.

theme (Preferences: color theme) - Themes. You can change the VSCode color scheme to any of the available themes as per your preference. But please, unless you are a psychopath, use a dark theme. Your eyes will thank you.

format (Format Document) - Format document. This option allows your code to be "tidy" in terms of spacing, skipped lines and other visual aspects of organization. It is very useful to improve its visibility and keep it well organized.

terminal (View: toggle Terminal) - Open Terminal. Here you have a quick access to the terminal, which can be very useful to run some necessary commands.

3. Status Bar

The status bar brings some important information, like the "branch" you are working on your Git project (we'll talk more about this later), errors and warnings from your program, programming language of the current file and notifications.

Status Bar

4. Terminal

In VSCode, you can access the terminal by clicking the errors and warnings icon in the status bar and clicking TERMINAL, or you can access it from the command bar by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal).

The terminal is something that may seem intimidating at first, but over time you'll see that it's your biggest ally. Commands given at the terminal save a lot of time when used well.

The fact that VSCode has direct access to the terminal in its interface is a big surplus.

VSCode Terminal

VSCode: Some additional settings¶

Now that you know how VSCode is organized, let's make some additional settings that are optional but can help you in your everyday life.

1. Connect your GitHub account

You can connect your GitHub account to VSCode in order to sync your settings across different devices. To do this, go to "File > Preferences > Setttings" (or the gear at the end of the Activity Bar) and click on the "Turn on Setttings Sync" button, leaving all items checked.

VSCode will take you to a GitHub login and authentication screen. Just authorize and you are done.

Synchronizing VSCode on multiple devices

2. Indentation

By default VSCode uses 4 spaces when aligning the code (called indentation). For example, what happens at the beginning of each line in the figure below and that serves to organize the structure of your code and make it more readable. As a rule of thumb, indentation does not follow a specific function, but there are languages that consider it when interpreting syntax, such as Python.

Standard Indentation

If you consider 4 spaces too large for indentation space, you can change it by clicking on "File > Preferences > Setttings" (or on the gear at the end of the Activity Bar) and changing the number in Editor: Tab Size.

Changing indentation spacing

3. Changing the terminal (Windows)

Over time, it will be quite common for you to use the terminal to run some commands directly. I use the terminal on a daily basis to access files, navigate between folders and even run Git commands (I find it easier on the terminal).

As we have seen, in VSCode you can access the terminal by clicking on the errors and warnings icon in the status and clicking TERMINAL, or you can access it from the command bar by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal).

On Windows, the terminal will load PowerShell by default. For our purposes, we're going to change this default terminal to use Git Bash which we've already installed earlier.

If you don't have Git installed on your machine, see the content below: How to use Git and GitHub: a step-by-step dummies' guide

To do this, open "File > Preferences > Setttings" (or in the gear at the end of the Activity Bar), look for "Features > Terminal" and scroll until you find the option "Integrated > Default Profile: Windows". From this selection box, choose Git Bash.

Setting the default terminal profile for Windows

Now open the terminal again by pressing Ctrl + Shift + P and typing "terminal" (View: toggle Terminal). Click the "+" button and select Git Bash. Once opened, you can even delete the existing powershell profile by clicking on the trash icon.

Enabling Git Bash for the Terminal

You can now delete the profile for powershell

VSCode: Some interesting extensions¶

Finally, let's install some extensions that will be useful for development. Start by installing the syntax for languages that don't come by default in VSCode and that you intend to use (Python, and PHP, for example). Installing a language is simple as you just press a button to do so:

Installing Python Language Support

But, more than programming languages, let's also install some other useful extensions:

a. Live Server: Allows you to create a local server with just one click to test your code locally

Live Server

b. CSS Peek: Allows you to quickly access a css class or element directly from the code, and can be very useful when developing your web applications.

CSS Peek

c. Auto Close Tag: This extension automatically closes open HTML and XML tags.

Auto Close Tag

d. JavaScript (ES6) code snippets: This extension contains parts of Javascript syntax to be used in VSCode. This ends up auto-completing your code many times, saving considerable time.

JavaScript (ES6) code snippets

e. ESLint: A linter is a code analysis tool that catches existing programming errors. With ESLint you can, while you are programming, already see potential syntax problems in your source code.

ESLint

f. Prettier: Format your code with Prettier and make it tidier. You can use it along with the "Format Document" command in VSCode.

Prettier

g. Better Comments: Categorize comments in your code, making them easier to read. After installing, just start your comment line with a different character to make it stand out (e.g. important lines start with an asterisk, Exclamation to draw attention, question mark for questions, TODO, etc).

Better Comments

h. Blockman: Highlight blocks of code in your code that are at the same scope (level). Useful when your code starts to get too big and it's hard to find portions of it.

Blockman

Conclusion¶

As you can see, there are countless ways to program, and for sure choosing the right code editor for you will make all the difference in the world, especially when it comes to productivity. We hope that this introduction to code editors, and in particular to VSCode, can provide you with a good starting point so that you can follow the rest of our content here, as well as guide you on this journey as a developer.

/* end of the post, see you next time */

How to customize your GitHub profile?

2021-08-05T14:54:00.006-03:00

Did you know that you can customize your GitHub profile and make it even more appealing? You can insert pictures, personal info, stats and give your personal profile a little touch of personality, rising your portfolio above other devs out there -- and this can make a huge difference when a headhunter looks at it. Curious already? Take a look at a repo that contains a number of examples to inspire yourself.

Also, follow me on GitHub and also Dev.Lawyer's profile so that you can have instant access to all the content I am posting here.

Watch here: https://youtu.be/DyK5oZD612M

All set? Follow me then.

The Markdown¶

Have you ever heard of "Markdown"?

Markdown is a markup text language that lets you insert formatting elements to a simple text file. In other words, when using markdown you can create a document with relatively complex formatting directly on your notepad, which besides being legible for anyone, it will still be easy to see the "different" elements in the text.

Through only a few markups you will be able to indicate which parts of your text will have a proper formatting. For example, if you want to insert a title row, you can put a "#" in the begining of the line. If you want to make a word bold, just put it between double asterisks such as **this**.

See a markdown example below (from online markdown editor Dillinger):

Why should I use Markdown?¶

If we already have a number of text editors such as MS Word, Pages and LibreOffice, what is exactly the upside of using Markdown? This seems more complicated than the traditional WYSIWYG (What You See Is What You Get - text editors in which everything typed and formatted reflects the final result) approach and it would have the same goal.

There are some very interesting applications for Markdown:

you can use Markdown to take quick notes if you don't have access to a text editing software, so that all your markups are easily spotted afterwards. Also, markdown can be used for almost anything, from websites to documentation, books and e-mails.
markdown file format is "universal", which means that you can use the same file in several Markdown applications and it will always have the same format. This also means that markdown compatibility will not be affected by future versions of the software used such as MS Word (.doc and .docx formats);
many websites accept Markdown as valid syntax, as GitHub. We will also use markdown in our future content as well :)

How to use Markdown? Basic Syntax¶

You will find many Markdown editors on the Internet, such as StackEdit and Dillinger, which will bring you a side-by-side screen with the markdown and the rendered final result. You can find markdown's basic syntax HERE but, in general, the markups I use the most are the following:

Basic syntax that I use in my texts

Also, note that you can even directly insert HTML code into the markdown file -- many markdown editors work with HTML codes (such as GitHub's).

After creating your document, you can save your it as a .md file and you are done! You can use it anywhere now.

How to create a custom GitHub profile page?¶

Now that we know how to use Markdown syntax, let's finally create our custom GitHub profile page. For that, simply login into GitHub and create a new repository with a name exactly the same as your username. Check the "Add a README file" option and let's make it public.

Creating a new repo with your username. The alert above happens because I have already created mine.

You are yet to create your GitHub profile or do not know how to create a repo? Read here our content on this topic.

Check our video out too:

With your newly created repo, change the README.md file using the markdown syntax and customize it for your needs. See below some ideas on what to do:

Talk a little bit more about you, your past and current projects and your goals in GitHub and general programming;

Show stats which can be obtained using other repos such as https://github.com/anuraghazra/github-readme-stats#customization;

You can also insert dynamic data such as blog posts and your latest YouTube videos using GitHub Actions (automated scripts), as shown in this very interesting repo: https://github.com/gautamkrishnar/blog-post-workflow;

Let your personallity show up with images, making your profile visually appealing. You can even upload your images in the repository itself, by clicking on "Add file" and"Upload files" (see image below). After that, you can right-click on the uploaded file name to get its url:

Click Add file and Upload files to send your images to your repo

Now that you have your image url, you can insert the image in your README.md file:

![Imagem Header](https://github.com/OctavioSI/OctavioSI/blob/main/header.png)

In case you have any doubts about the steps above (even for the statistics portion), check my profile repo and see what I did there. You can find my profile repo HERE. (EDIT: This repo was backed up to be consistent with this article. If you access my current profile page, there will be many changes due to post changes made).

Well, just get creative and pump your profile beyond all others :)

/* End of the post, see you next time */

How to use Git and GitHub: a step-by-step dummies' guide

2021-07-27T22:46:00.004-03:00

Have you ever heard about Git? And GitHub?

Today we will present you a simplified step-by-step guide of this two amazing tools, my dear tech-enthusiast friend. We will go through the main concepts, how to use Git to manage your source code and how to create a GitHub profile so that you can publish your online coding portfolio.

Even if you are not a programmer, this is a great opportunity to learn how does Git and GitHub work, internalize some key concepts and become familiarized with this incredible tool which will contain all our later codes and snippets here, so that you can keep following our content in the future.

Watch here: https://youtu.be/cnIYisCYlzM

All set? Follow me then.

Git: a code version-control software¶

In the development world it is good practice your project to be version-controlled, that is, that you can "archive" all changes made to your code throughout its life in separate versions.

That way, any developer can quickly spot any changes made, receive contributions in other parts of the code from third parties and have a backup of the code in a convenient and detailed manner without the need to locally save a number of folders and files with names such as "v1.0.0.1", "Jul272921.zip" or "initial version", as I used to do back in the day. Before meeting Git, it was common place to search in external HDs the version I was using before and sending some backups to my e-mail from time to time. A real mess.

As such, meet Git, a computer software designed for version-control and used to manage code all around the world.

Git was born in 2005 by the hands of Linus Torvalds ("father" of Linux) to be used in the development of Kernel Linux (Linux "core"), being later adopted by other projects. [Veja aqui mais informações sobre o Git]

At my first job at in the tech field (around 2003), confusion was very common when more than one co-worker tried to edit the same file, sometimes compromising other parts of the system in the process. Using Git, this problem is no more.

Git makes possible to centralize all of the project's code and track changes made by one or several people. Thus, whole teams could work at the same time in the code without bumping heads with one another, also enabling huge projects to evolve at an amazing pace. Even you can contribute today with any open source project creating a functionality not yet made and suggesting ("pull requesting") your changes to the project owner through Git. We will see how to do this in details.

What about GitHub?¶

GitHub is a platform which enables you to use Git in the "cloud". In other words, it is a website that grants you the power to create and store code, which will be available and that can be updated online. There are alternatives to GitHub such as BitBucket (which was always my choice for private projects) and GitLab, both excellent, but we will talk about GitHub here, since it is the most used one.

You may (and should) create your GitHub profile for free, accessing github.com and clicking in the "SignUp" button.

GitHub

Once registered, you can create your first repository clicking in your profile photo and in the "Your Repositories" link. Finally, click on "New" and choose you repo's name, set if it will have public or private access and that should do it!

A repo works like a "folder" for your files. Once you create ir, you can send files and updates through Git and it will track your changes.

You will find a huge number of public repositories in GitHub (such as dev.lawyer's ones) which you can access, copy, use and contribute code whenever you deem convenient.

Apart from a backup and versioning platform, GitHub allows you to find collaborators for your project, help others in projects that interest you and use GitHub as your development "portfolio", since anyone can check your public profile to know more about you as a programmer. I dare to say that for programmers, a solid GitHub profile might be more important than a good LinkedIn one. Many recruiters out there ask for your GitHub public profile link as a mean of knowing you better code-wise.

Have you created your public profile? Follow me on GitHub then so that we can share some pointers.

My GitHub profile: https://github.com/OctavioSI

Dev.Lawyer's in GitHub: https://github.com/Dev-Lawyer

Link for this content's repo: https://github.com/Dev-Lawyer/GitEGitHub

How does Git and GitHub work in fact and how to use them?¶

The best way to learn is doing it. First, download and install the latest Git version in your machine, which can be found here: https://git-scm.com/downloads

After installation, you will have access to a Git terminal (usually it is pre-installed in most Linux distros and, if you are a Windows user, it will be found under the "Git Bash" program). So, we will use the terminal for commands -- don't be intimidated by it though, since once you are used to the basic commands, everything will be clearer.

Now we will create a new GitHub repo. I will create my repo in Dev.Lawyer's profile, and you should make the necessary adjustments here. Our first repo will be called "GitEGitHub", and we will only have a README.md file (file that contains our repo's info).

Creating a new repo

Once you repo is created, you can then locally "clone" it in your machine. Keep reading, since we will better explain its mechanics and repos' flow but, in sum, this means that we will make a local copy of our remote repo that is hosted by GitHub, in the cloud. You will find in the repo main page a "Code" green button, which will present the "clone" option.

Cloning a repo

You can directly clone a repo using Git, using the following command (replace this address with the address of the repo you created, which is in the "clone" HTTPS bar in the picture above):

git clone https://github.com/Dev-Lawyer/GitEGitHub.git

Since our repo is public accessible, we can clone it without any authentication issues. Should your repo be set to private, you will need to enter your credentials when asked.

Cloning a repo locally

After cloning our repo, we can now access our local files and modify their contents. You will realize that there is ".git" folder which contains some info on our repo (this indicates that we are accessing a "Git managed" folder), a "LICENSE" file (which contains the license we set for our repo) and finally a README.md, all created by GitHub.

Our repo locally cloned

Let's change the content of the README.md file so that we will include the permalink for this content. We can do that in any text editor we want.

After changing and saving the file, we will follow this steps:

Using the terminal (or Git Bash) we will access our local repo's folder (you can navigate to our folder using the "cd" command);

Once at the appropriate folder, let's add all modifications to our track changes using the command "git add -A"

Now we will "commit" this changes which actually means that we will inform Git that we are creating a sort of "checkpoint" in our code, a new version of it. We also include a -m '<message>' command, so that we can set the message our commit will present.

We will not need it in our example, but should we need to download any changes made by others in the existing code hosted at GitHub before submitting our changes, we would need to use "git pull";

If there are any conflicts between our changes and the remote version (that is, changes in files that overlap and are incompatible), we would then solve such conflicts indicated by Git and then commiting a new merged version, in which the remote code would be then "fused" into our local changed copy. After everything is set, we would then push our code to the remote GitHub repo, using "git push origin" (we will push to "origin" which is the remote repo set, which will then have the same commits we locally have).

Commiting our local changes to GitHub's remote repo

We used the following commands in our code above:

cd ~/Projects/devlawyer/GitEGitHub/
git add -A
git commit -m 'Atualizando o link do artigo'
git pull
git push origin

If we access our GitHub's repo now, we will see that the README.md file was indeed changed and now reflects the updated link we have provided.

It worked :)

Clicking in our past commits, we can also see the content of each file at that moment.

This is Git's basics, but we can surely make a lot more than that (and I can make more content on this in the future, if there is enough interested readers), such as:

creating sub-divisions of our repo to deal with a funcionality, bug or isolate feature (creating a "branch" of it);

creating separate test and productions environments, so that the code can be tested before reaching the final user;

defining workflows for teams to simultaneous work together, using approvals and revisions pipelines;

structuring automated routines to validate the code, avoiding errors before the code reaches the production environment; e

"pushing" code to other repos, collaborating in third parties' code.

Does it sound too complicated?

Does Git only work for code, or can I version-control any document?¶

Yes, Git is not limited to code! In fact,Git can be used to track the whole history of changes in any kind of document.

Note that there are a number of tools that use the version-control concept for files such as excel and word documents, such as GitPitch and Simul, even though there are limitations to work with "closed source" files such as .xlsx ou .docx, which make this solutions less functional than the version-controle we use with bare code.

Even so, it is possible to list a number of advantages when using Git to version-control documents: you can use it to have a more reliable backup of your documents when comparing to storing them in your hard-drive, and you can also track who changed the file at some point in time. This is debatable since Dropbox and Google Docs, for example, can track versions of your documents today, but we still second that Git could be used for something more as regards documentation.

We will certainly explore a lot more on this topic, since our "legal" audience.

This seems a lot for version-control alone. Is it worth it?¶

When we look at GitHub it is clear that its value is far above code storage and version control. The platform has become, in fact, a huge collaborators community. When making available code so that one or more individuals can learn, use and share/improve/amend/complement it, GitHub has become a great space for shared economy.

One way or another, reading about Git will be great for you -- I am constantly thinking on how to integrate technology and Law, and this is the first step if want to follow our content here (since I will make code available in GitHub).

/* End of this post, see you next time */

Is it possible to have a collaborative environment in Law?

2020-06-17T00:41:00.004-03:00

As a lawyer and developer, I can constantly see myself reflecting on how those two careers - lawyer and developer - are so different, not only as per their content, but also as on how each of these professionals deals with the intellectual property of their work.

The dev world is, in essence, collaborative. ¶

In particular, the effort on sharing knowledge by the dev community is something that draws my attention very much, mainly as regards open source projects, in which the work created by one programmer is constantly modified, completed and improved several times by other developers, sometimes giving birth to complex and unique software which their own creators could not possibly foresee. Many huge existing projects today would not see the light of the day if not by the joint effort of this community of developers.

Today there are many knowledge sharing platforms used practically by all devs in the world (such as Stackoverflow) in which coding doubts about each and any existing programming language out there are daily discussed, solved and further explored, free of charge, in a quick and clean way, in an (almost) altruistic joint effort.

The legal world is, in essence, exclusive.¶

The legal community, however, places itself in the exact opposite position.

Traditionally, lawyer use all the knowledge they painstakingly acquired thorough hours and hours of study, directly drinking from the knowledge fountain represented by well-know indoctrinators, combined with their own past experiences in many cases to then draft a document or thesis that is supposed to almost be a piece of art, Law in form of poetry and reason, so that their unique, exclusive and differentiated work make all the difference in the world to captivate a satisfied client in another success case.

Obviously, lawyers frequently share their knowledge through online videos, articles and by taking part on discussion forums, but always in moderation and not always due to actual altruism (remember, my video or article may be great, but ask a lawyer better! *wink*)

As a general thumb rule, however, thesis, templates and documents all become intellectual property of the respective lawyers and their firms, competitive leverage over their peers, and the sole idea of sharing all this without proper compensation may make our legal fellows shout for ethical violations - indeed, outrageous!

There is a global movement for collaboration. ¶

As of now, you have certainly heard about sharing economy, a model defined as a peer-to-peer activity of acquiring, providing and sharing access to goods and

services in every imaginable field.

Sharing economy bruoght deep impacts on how we buy and consume assets and services today (such as services like Uber, in which you don't even need to buy a car anymore or AirBnb, in which buying a trip house only to stay a few days may see a waste of money). Also, even if the effects of sharing economy are somewhat common to us now, this reality is in fact relatively new, since the boom of companies providing such services date from not many years ago.

The development world, however, has older roots as regards the collaborative aspect of coding, being worth mentioning the most relevant example of Linux, the open source operating system developed by Linus Torvalds in the early 90s. To think that a open source code single-handedly developed would be one of the main platforms available in the world today is amazing. Today, more than never, the open source development world is vast and strong, with an active community that constantly creates unparalled software using joint efforts.

Is there room for collaboration in the legal world? ¶

Does the collaborative spirit have room in the legal community? I believe so. Even if the legal field is traditional and somewhat loath to accept technology and joint efforts, I can clearly see a new generation of fresh minded lawyers coming to the work space, willing to face the Law as a green field apt to experimentation and improvement.

Those new minds want to push for the broader access of knowledge and even to better professionals by means of tecnology, and startups in the legal area (legaltechs) pop up everyday with interesting new proposals for such a traditional field, opening up the minds of lawyers for something different.

This new generation of lawyers, all connected, informed and curious, those who put aside the expensive suits and ties to seek more efficient, quicker and cheaper technological solutions for their clients. Those new lawyers embrace innovation as an opportunity to professionally grow instead of hiding behind absurd restrictions to new solutions designed to protect an illusory marked share.

The legal field is changing, and quick. If today many have an aversion to the mere thought of sharing knowledge, in a few years the lawyer who does not public show the world how much he (or she) knows and can contribute, will suffer.

Sharing is caring.

/* End of the post, see you next time */

Should Lawyers code?

2020-03-08T17:16:00.002-03:00

Can you code? No? Well, I am sorry to inform you but you are way behind in the current tech race. As it seems, learning to code is the new gold rush today and it doesn't matter whether you are a lawyer, a doctor, engineer, a valet parking operator, a telemarketer or otherwise. Robots will take your job and in less than a couple decades no profession will remain. (#irony)

At least, this is what is being announce. But will it?

Will robots take over lawyers? ¶

So, are lawyers' jobs in risk of being replaced by tech solutions? Of course! But don't worry, lawyers' future is not as dark as it seems.

Bit by bit, we can see the rise of new technologies that make lawyers' lives easier: mass advocacy systems, artificial intelligence for processes' data analysis, lawyer-client online marketplaces (have you seen HubJur yet?), technologies that assemble perfect legal documents in minutes and even "robot lawyers" that are equivalent to a 3-thousand lawyer force.

In face of this doomed scenario, many lawyers race to learn this wizardry that is programming. Intensive programming logic courses (beginner level?) teach that Law professionals should "code" and therefore become up-to-date to the tech revolution legaltechs bring.

Well, I am sorry to tell you this, but 99% of this so-called new-programmer-lawyers will not become programmers.

Don't get me wrong: I do believe that is important that everyone (lawyer or not) should develop logic thinking and systematic inherent to programming skills, being true that this rational approach brought by software development is beneficial to event structure a lawyers' thinking upon the drafting of a document and improving the overall quality of such lawyers' work.

What technology brings to the lawyer is the possibility to, by using good software and a solid logic-thinking foundation (not necessarily code), perform higher quality work in less time and at a more affordable price. It enables the lawyer to achieve, at last, the impossible triade of good, quick and cheap work.

Then I shouldn't learn to "code"?¶

Therefore, fellow lawyer, do not feel pressured to "code". Focus, instead, in following new tech solutions which improve your work and keep an open mind for innovations.

Support those who create new software which lessen the burden on your routine and can increase your productivity. Try it out. Do not rely in the false assumption of a market protection policy to refrain from using more efficient solutions, event if in a first glance such technology may seem to be "stealing" your clientele. Instead, fight and condemn such obstacles.

In Brazil, for example, there is a recent case of our Bar trying to criminalize startups that act in the aviation market, even though our aviation sector is far from efficient (links in Portuguese only, sorry about that, but I have linked a Google Translate URL):

OAB (Brazil's Bar) will propose Congress to criminalize legaltechs acting in the aviation sector

OAB investigates startups on client acquisition

Technology is not going anywhere, and it is a matter of time until everyone is using it. Be an "early adopter" instead of a baseless critic, and you will be ahead of your competition.

So, It isn't possible to be a lawyer-developer? ¶

Of course it is! Our critics made here are merely a pondering of this current image that dictates that those who cannot "code" are doomed to be left behind in this modern gold rush. It is indeed possible to follow technology evolution without coding, provided that you experiment and support new solutions without fear of losing market share.

This blog, as you may know, specifically aims at an unique point of view: not only a lawyer's view neither a developers' one, but both.

If you are a lawyer and you are interested in technology, follow our next posts with an opened mind and heart, since I will be discussing some ideas and thoughts on how to use technology to change your life.

/* End of this post, see you next time */

dev.lawyer

Creating a simple HTML, CSS project, with a pinch of Javascript

What is HTML and CSS?

How does HTML work?

HTML Tags

Basic HTML Tags

Other HTML Tags: "Advanced HTML"

HTML5 Tags

More interesting HTML Tags and Attributes

HOW DOES CSS WORK?

Inline CSS

Internal CSS

External CSS

CREATING A SIMPLE HTML AND CSS PROJECT

What does this project do?

Docker Tutorial for Dummies

What is Docker?¶

ILLUSTRATING DOCKER WITH AN ANALOGY

1. Docker: the Kitchen

🐳 Installing Docker

2. Docker Image: the cake tray

3. Docker Container: the CAKE itself

4. Docker Registry: the Kitchen Shelf

Creating a Docker Registry

5. Dockerfile: the cake recipe

6. docker-compose: the party!

USING DOCKER IN REAL LIFE

DOCKER MAKES YOUR LIFE EASY

[PART 2] 7+ ways to customize your GitHub Profile (README)

ONE STEP FURTHER: CUSTOMIZING YOUR GITHUB EVEN MORE

👉 "MANUAL" CUSTOMIZATIONS

1. Badges

2. "Above the Fold" and CTA

Adjusting our header

Can I use styles (CSS) in my GitHub README?

Our header: in the final version it is animated by CSS

Other README.md sections

3. Multiple Languages

4. Development Metrics

5. Showing your latest Tweets

6. Showing your Spotify

👉 "AUTOMATED " CUSTOMIZATIONS

7. Enhancing YouTube listing

How to create a dynamic SVG to use as an image on GitHub

OK, so what's the solution?

TL; DR;

The complete solution (for those who want to understand and replicate)

a. Creating a repository for our "server"

b. Enabling a "server"

c. Preparing an API

5 FREE Blogger Themes for your firm's website

5 FREE BLOGGER THEMES

1. POLAR

2. KATE

3. TECHY

4. PHOTONIC

5. RIPPLE

INSTALLING A CUSTOMIZED THEME ON BLOGGER

How to create a mailing list on your website

1. ENABLING A MAILING LIST SERVICE

Initial settings

Changing email templates

Creating a Contact Capture Form

2. INSERTING THE CAPTURE FORM ON OUR WEBSITE

Inserting the form into a static Google Sites page

Inserting the form via HTML on other websites

3. CONCLUSION

How to create a LANDING PAGE without coding

WHAT IS A LANDING PAGE?

HOW TO CREATE A FREE LANDING PAGE?

CONCLUSION

How to create a website step by step for free

HOW TO CREATE A PROFESSIONAL WEBSITE ACCORDING TO MOST INTERNET TUTORIALS¶

WHAT TYPE OF WEBSITE DO YOU NEED?¶

So, I ask: what is your goal when putting a website up?

WHY SHOULD I DEFINE WHAT TYPE OF PROFESSIONAL WEBSITE I NEED?¶

REGISTERING A PROFESSIONAL DOMAIN¶

HOW TO CREATE A PROFESSIONAL WEBSITE¶

0. BEFORE CREATING YOUR WEBSITE: VERIFYING YOUR DOMAIN ON GOOGLE¶

1. CREATING A PROFESSIONAL WEBSITE TO DISPLAY MY PROFILE (BUSINESS CARD ONLY)¶