The latest articles on DEV Community by Gabriel Rocha (@gabrielrocha). https://dev.to/gabrielrocha https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F308671%2F878e3423-72e4-4df7-b59a-8c4b52a8ba89.jpg https://dev.to/gabrielrocha en Gabriel Rocha Tue, 23 Jul 2024 13:27:06 +0000 https://dev.to/gabrielrocha/building-a-pomodoro-app-1p91 https://dev.to/gabrielrocha/building-a-pomodoro-app-1p91 <h2> Intro </h2> <p>A while ago, as a React web developer and currently React Native and Java developer, I decided to return to my roots and code some native Android app. So, to practice, I started working on a Pomodoro app, but I wanted it to be different from the others.</p> <h2> Idea </h2> <p>I decided, then, to build the app in a way to be as lightweight and performant as possible and be compatible with the most devices as possible, in counterpart to most of today apps.</p> <p>Last week, I launched the second alpha version on Google Play Store, it's also my first app ever. It works, but with some bugs, deprecated code, unimplemented functionality... 😅</p> <h2> Open-Source </h2> <p>The code of this app is open-sourced, so if you're interested to take a look, contribute or get some inspiration, please visit the <a href="https://github.com/gabrielrochamd/Pomodoro" rel="noopener noreferrer">Github repo</a>.</p> <h2> Conclusion </h2> <p>It has been quite a journey. I'm liking it and excited for more. If you're interested, you can <a href="https://play.google.com/store/apps/details?id=br.dev.gabrielrocha.pomodoro" rel="noopener noreferrer">download the app</a>. If you do so, tell me what you think of it in the comments. Cheers!</p> mobile android opensource Gabriel Rocha Mon, 06 Sep 2021 23:57:06 +0000 https://dev.to/gabrielrocha/frontend-roadmap-id5 https://dev.to/gabrielrocha/frontend-roadmap-id5 <h1> Internet </h1> <p>Learn about how Internet and browsers work, client and server and the main communication protocols between them. </p> <p>What you should learn: </p> <ul> <li>What the Internet is</li> <li>What is HTTP</li> <li>HTTP/3</li> <li>How browsers work</li> <li>How DNS work </li> </ul> <h1> Learn HTML </h1> <p>HTML serves to build the skeleton of a web page. Learn about each tag functionality, learn about semantic HTML and learn the basics of SEO. </p> <h1> Learn CSS </h1> <p>CSS serves to style your web page. Following the human body analogy, CSS would be the page skin. </p> <h1> Learn Javascript </h1> <p>Javascript is what allows you to define your page behavior. With Javascript, you can, for example, execute actions in response to events, like a click event. </p> <h1> Learn Git </h1> <p>Git is a code version manager that serves to maintain control of changes made in your code, as well as the date and author of those changes. </p> <p>Git is even more efficient in a situation where many people need to teamwork in the same code base. </p> <h1> Learn Package Management </h1> <p>Learn to use a package managing tool like NPM is important because those packages supply ready code to repeating tasks.</p> <h1> Conclusion </h1> <p>This post was inspired by the website Developer Roadmaps. See the complete Frontend roadmap <a href="https://roadmap.sh/frontend" rel="noopener noreferrer">here</a>. In that page, you will find the continuation of that flowchart and links to where you can learn every described concepts.</p> brazil english webdev frontend Gabriel Rocha Mon, 17 May 2021 17:14:41 +0000 https://dev.to/gabrielrocha/frontend-x-backend-552d https://dev.to/gabrielrocha/frontend-x-backend-552d <h1> O que são? </h1> <p>Esses dois termos se referem às diferentes partes de uma aplicação. São mais usados em desenvolvimento web, mas também podem ser usados no desenvolvimento de aplicações para outras plataformas. Neste artigo, eu vou falar sobre frontend e backend na perspectiva do desenvolvimento web.</p> <h1> Frontend </h1> <p>Toda a parte da aplicação com a qual o usuário interage. A estrutura e o comportamento do que é visto na tela são responsabilidade do desenvolvedor que atua nessa parte.</p> <h2> Linguagens de programação </h2> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> <p>Cada uma dessas linguagens tem a sua função e você precisará das três para se tornar um desenvolvedor front-end.</p> <h3> HTML </h3> <p>O HTML é responsável pela estrutura da página. É usando-o que você define quais elementos vão aparecer na tela.</p> <h3> CSS </h3> <p>O CSS é responsável pela estilização da página. Desde cores, bordas e margens até animações são criadas com essa linguagem.</p> <h3> Javascript </h3> <p>O Javascript é responsável pelo comportamento da página. Você precisará usar essa linguagem para realizar ações em cliques de botão ou para enviar formulários, entre outras coisas.</p> <h2> Frameworks </h2> <p>Os frameworks ajudam facilitar e agilizar o desenvolvimento. Eles contém código pronto de coisas que precisamos usar em vários projetos (ex: barra de menu) ou de tarefas trabalhosas (ex: receber dados de uma base e mostrar em uma tabela).</p> <h3> CSS </h3> <ul> <li>Bootstrap</li> <li>Materialize</li> </ul> <h3> Javascript </h3> <ul> <li>Angular</li> <li>React</li> <li>Vue.js</li> </ul> <h1> Backend </h1> <p>A parte que lida com os dados e a lógica de negócio da aplicação. O usuário não tem contato direto com essa parte da aplicação. Geralmente, o backend trata de tarefas que exigem um certo nível de segurança, ex: autenticação.</p> <h2> Linguagens de programação </h2> <ul> <li>Java</li> <li>Javascript</li> <li>PHP</li> <li>Python</li> <li>Ruby</li> </ul> <p>Os frameworks de backend seguem o mesmo conceito dos frameworks de frontend mas desempenham funções diferentes. O Express, por exemplo, é um framework do ambiente em tempo de execução (JRE) Node.js que auxilia em funções como o tratamento de rotas.</p> <h2> Frameworks </h2> <ul> <li>Django</li> <li>Laravel</li> <li>Ruby on Rails</li> <li>Spring Boot</li> </ul> Gabriel Rocha Mon, 17 May 2021 17:14:28 +0000 https://dev.to/gabrielrocha/frontend-x-backend-mc2 https://dev.to/gabrielrocha/frontend-x-backend-mc2 <h1> What they are? </h1> <p>These two terms refer to different parts of an application. They are more used in web development, but can be used in development of applications in another platforms. In this article I will talk about frontend and backend in the perspective of web development.</p> <h1> Frontend </h1> <p>The whole part of the application with which the user interacts. The structure and the behavior of what appears on the screen are responsibility of the developer that works at this part.</p> <h2> Programming languages </h2> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> <h2> HTML </h2> <p>HTML is responsible for the structure of the page. It's using it that you define which element are going to appear on the screen.</p> <h3> CSS </h3> <p>CSS is responsible for styling the page. From colors, borders and margins to animations are created with this language.</p> <h3> Javascript </h3> <p>Javascript is responsible for the behavior of the page. You will need to use this language to perform actions on button clicks or to submit forms, among other things.</p> <h2> Frameworks </h2> <p>Frameworks help facilitate and streamline development. They contain ready-made code for things we need to use in various projects (eg, menu bar) or laborious tasks (eg, receiving data from a database and displaying it in a table).</p> <h3> CSS </h3> <ul> <li>Bootstrap</li> <li>Materialize</li> </ul> <h3> Javascript </h3> <ul> <li>Angular</li> <li>React</li> <li>Vue.js</li> </ul> <h1> Backend </h1> <p>The part that handle data and business logic of the application. The user does not have direct contact with that part of the application. Usually, the backend of an application deals with tasks that require a certain level of security, i.e.: authentication.</p> <h2> Programming languages </h2> <ul> <li>Java</li> <li>Javascript</li> <li>PHP</li> <li>Python</li> <li>Ruby</li> </ul> <p>Backend frameworks follow the same concept as frontend frameworks but perform different functions. Express, for example, is a framework for the runtime environment (JRE) Node.js that assists in functions such as handling routes.</p> <h2> Frameworks </h2> <ul> <li>Django</li> <li>Laravel</li> <li>Ruby on Rails</li> <li>Spring Boot</li> </ul> brazil english webdev beginners Gabriel Rocha Thu, 13 May 2021 00:44:43 +0000 https://dev.to/gabrielrocha/como-comecar-em-programacao-3ad3 https://dev.to/gabrielrocha/como-comecar-em-programacao-3ad3 <h1> Entenda o conceito de algoritmos </h1> <p>Algoritmo é uma sequência finita de instruções claramente definidas, que tem como objetivo executar uma tarefa. Esse conceito vai te acompanhar durante toda a sua jornada em programação.</p> <p>Esse, por exemplo, é um algoritmo para estudos:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Abrir livro Ler capítulo 5 Resolver exercícios Tirar dúvidas </code></pre> </div> <h1> Aprenda Lógica e Estrutura de Dados </h1> <p>Esses são mais dois dos conceitos mais básicos e importantes no universo da programação. Dominando esses conceitos, você terá muito mais facilidade em aprender qualquer linguagem de programação.</p> <h2> Lógica de Programação </h2> <p>É como os computadores tomam decisões, testando se dados combinados a operadores lógicos geram o resultado esperado.</p> <h2> Estrutura de Dados </h2> <p>Esse conceito representa as várias formas nas quais um programa pode organizar dados, como filas e pilhas.</p> <h1> Escolha uma linguagem de programação </h1> <p>Se eu posso recomendar duas boas linguagens para iniciantes, são Javascript e Python. Essas duas linguagens são relativamente fáceis e contam com comunidades gigantescas, além de vários cursos.</p> <h1> Respeite o processo </h1> <p>Programação é um tema muito abrangente e as tecnologias estão mudando a todo momento. O aprendizado é demorado, mas vai te trazer ótimos resultados.</p> <h1> Não se subestime </h1> <p>Se você tiver dificuldades em algum momento, não desista. Isso acontece com todos. Até mesmo com programadores experientes.</p> Gabriel Rocha Thu, 13 May 2021 00:44:05 +0000 https://dev.to/gabrielrocha/how-to-start-at-programming-13nn https://dev.to/gabrielrocha/how-to-start-at-programming-13nn <h1> Understand the concept of algorithms </h1> <p>Algorithm is a finite sequence of clearly defined instructions, which has as goal to execute a task. This concept will carry you during all your journey in programming.</p> <p>This, for example, is an algorithm for studying:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Open book Read chapter 5 Solve exercises Ask questions </code></pre> </div> <h1> Learn Logic and Data Structure </h1> <p>Those are two more of the most basic and important concepts in the universe of programming. Mastering those concepts, you will have much more ease learning any programming language.</p> <h2> Programming Logic </h2> <p>This is how the computers make decisions, testing if data combined to logical operators generate the wanted result.</p> <h2> Data Structure </h2> <p>This concept represents the many ways that a program can organize data, like queues or stacks.</p> <h1> Choose a programming language </h1> <p>If I may recommend two good languages for beginners, those are Javascript and Python. Those two languages are relatively easy and have huge communities, besides a variety of courses.</p> <h1> Respect the process </h1> <p>Programming is a very broad subject and technologies are changing all the time. Learning is a lengthy process, but it will give you great results.</p> <h1> Don't underestimate yourself </h1> <p>If you have difficulties at any moment, don't give up. That happens to everybody. Even with experienced programmers.</p> brazil english programming beginners