<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Thomas Lincoln</title>
    <description>The latest articles on DEV Community by Thomas Lincoln (@samoht).</description>
    <link>https://dev.to/samoht</link>
    <image>
      <url>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%2F584443%2F80b5ae0b-7a6e-4e4c-a4b4-d339985dd66b.jpg</url>
      <title>DEV Community: Thomas Lincoln</title>
      <link>https://dev.to/samoht</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/samoht"/>
    <language>en</language>
    <item>
      <title>Bar Programming #03 — Clean Code Chapter 1</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Tue, 02 Jul 2024 13:41:22 +0000</pubDate>
      <link>https://dev.to/samoht/bar-programming-03-clean-code-chapter-1-39d6</link>
      <guid>https://dev.to/samoht/bar-programming-03-clean-code-chapter-1-39d6</guid>
      <description>&lt;p&gt;In the today post, I will write a resume of what I learn and understood about the first chapter of “Clean Code”, probably I will write more texts like this about the other chapters. So, if you have interest in Clean Code or want to understand a little about, you are more than welcome to continue reading this possible series.&lt;/p&gt;

&lt;p&gt;The Clean Code book was written by Robert Cecil Martin, aka Uncle Bob, in this book he covers technics, rules, and ideas. Which aim to improve the readability of codes and to improve the efficiency of the development.&lt;/p&gt;

&lt;p&gt;In the first chapter, the following topics are covered:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What is a Bad Code?&lt;/li&gt;
&lt;li&gt;Which is the cost of have a bad code?&lt;/li&gt;
&lt;li&gt;What is Clean Code?&lt;/li&gt;
&lt;li&gt;Recommendations&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What is a Bad Code?
&lt;/h2&gt;

&lt;p&gt;To explain the importance of a good code, the Uncle Bob quotes an example of an application developed in the 80s, that became some popular. But, interval between the updates start to increase, the bugs were not fixed, and the time of loading and crashes start to increase so much. Until it reaches a point, it was unusable.&lt;/p&gt;

&lt;p&gt;After a time, he meet one of the workers, and found that the reason behind this chaos, it was as expected. The code start to became incomprehensible, more and more makeshift, so that it was not possible to update or do maintenance.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why we write a bad code?
&lt;/h2&gt;

&lt;p&gt;But, why? Why we write a bad code? The bad code has power to retard us, a good possible reason can be the hurry, because, we have deadlines to finish our tasks, the demands need to be completed, we can't lose our time cleaning the code.&lt;/p&gt;

&lt;p&gt;Or same, the wear and tear of working in that project is turning big, to the point what we want just end this once and for all, and throw it aside.&lt;/p&gt;

&lt;h2&gt;
  
  
  The cost of having a bad code
&lt;/h2&gt;

&lt;p&gt;We can see the cost of having a bad code, when we read someone else's code, and the fact that it is confusing, makes us work more slowly, or same, our own code can produce the same effect. Even when we start fast, we can suddenly to perceive that we are more and more delaying to achieve progress.&lt;/p&gt;

&lt;p&gt;This happens, because these errors are like a snowball, the more we leave aside, the more we postpone the cleaning time, the slower it will our progress. According to the author, these bugs make the team productivity get closer to zero.&lt;/p&gt;

&lt;p&gt;Therewith in mind, the author says that even if we think “I need to fulfill the demand, if not I will be fired”, we need to communicate to our superiors, and to warn that such a demand need more time. We need to protect our code, we need to defend that it requires more attention, so that so, don't happen the same thing that happen with the press before mentioned.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Clean Code?
&lt;/h2&gt;

&lt;p&gt;Let's say you believed in me, that a bad code is an obstacle for the creation of a software, and think you want to develop a good code, so, how to write a clean code?&lt;/p&gt;

&lt;p&gt;It should be noted that write a clean code, is not as simple as flipping a switch in our heads, is necessary to have a sensitivity in relation to the code. Understand which are the things that are turning our code in a bad code, and which technics can be applied to resolve.&lt;/p&gt;

&lt;p&gt;Write a clean code is like to draw, be able to evaluate if a drawing is good or not, don't make you able to draw, so, is necessary to have knowledge of technics and strategies.&lt;/p&gt;

&lt;p&gt;So, going to the main question, we can summarize a clean code in a code that follows that four rules:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Without duplication&lt;/strong&gt;, do not exist any repeated features.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;One task&lt;/strong&gt;, the code must have only one function, and your functions too, everything must do only one thing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Expressiveness&lt;/strong&gt;, the code must be very clear in relation with the name of the things.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Little abstractions&lt;/strong&gt;, this rule involves the creation of methods and classes that encapsulate specific features in a clear way, without becoming excessively complex or multifunctional.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In general, we can describe a clean code, paraphrasing Ward Cunningham:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A clean code, he makes exactly what you think, is like if the language was be made for make that thing, nothing surprise you, everything is how you expected.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Recommendations
&lt;/h2&gt;

&lt;p&gt;Of course, the rules to make a clean code can vary too much, don't exist only the rules mentioned in the “Clean Code” book, because, this is the author vision. Of course, his vision is supported and used for many people, but still, not all will think that this is the better way to make a clean code. But the author recommends, that we read it, learn with him and decide for ourselves.&lt;/p&gt;

&lt;p&gt;So, he says that for him and your colleagues, these rules are the best, but, don't recommend that we think in this way, because it is possible that we can reject one or other rule.&lt;/p&gt;

&lt;p&gt;Uncle Bob also says to us, that we have the responsibility to write a code that is easy to read, in the end, while we write a code, a good part of the job is read another codes. When we are reading, we want this reading to be easy to understand. So, we need to write a code thinks that someone will read it, aiming to write something that is easy for other people to read.&lt;/p&gt;

&lt;p&gt;Finally, the Uncle Bob also say, to us follow boy scout rule:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Make the area of camp better that when you find it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The idea behind this recommendation, is that instead of we only write a clean code, we must do maintenance. In other words, we must constantly think in clean improvements to our code, and this doesn't need to be a big thing, change a name of a variable is enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;With this, we can understand the need and importance to have a clean code, besides understanding what is a clean code. In the next chapter, we will understand how we can give better names to our children (variables and functions).&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>learning</category>
    </item>
    <item>
      <title>Bar Programming #02 - How to use GitHub Actions to provide an environment with CI</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Wed, 06 Mar 2024 15:00:00 +0000</pubDate>
      <link>https://dev.to/samoht/bar-programming-02-how-to-use-github-actions-to-provide-an-environment-with-ci-10cg</link>
      <guid>https://dev.to/samoht/bar-programming-02-how-to-use-github-actions-to-provide-an-environment-with-ci-10cg</guid>
      <description>&lt;p&gt;Today, I will write a basic guide to understand and use GitHub Actions.&lt;/p&gt;

&lt;p&gt;First, we have a YAML file, in this file we have all the configurations about our automation. This file specifies, Events, Jobs, Runners, Steps and Actions.&lt;/p&gt;




&lt;p&gt;But, before we go to GitHub actions, we need to understand when this code will run. In GitHub actions, we have "&lt;strong&gt;triggers&lt;/strong&gt;".&lt;/p&gt;

&lt;p&gt;An event is a trigger in our workflow, with this, we can understand when something to happened, an example is a “push”. &lt;/p&gt;




&lt;p&gt;For use the GitHub Actions, you have to create a YAML file in a folder name &lt;code&gt;.github/workflow&lt;/code&gt;, in this folder you create something like myWorkflow.YAML&lt;/p&gt;

&lt;p&gt;An example of a YAML file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Lint&lt;/span&gt;

&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;  &lt;span class="c1"&gt;# yamllint disable-line rule:truthy&lt;/span&gt;
  &lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; 
    &lt;span class="na"&gt;branches&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;main&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
  &lt;span class="na"&gt;pull_request&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; 
    &lt;span class="na"&gt;branches&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;main&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Lint&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;

    &lt;span class="na"&gt;permissions&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="na"&gt;contents&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;write&lt;/span&gt;
      &lt;span class="na"&gt;packages&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;write&lt;/span&gt;
      &lt;span class="c1"&gt;# To report GitHub Actions status checks&lt;/span&gt;
      &lt;span class="na"&gt;statuses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;write&lt;/span&gt;

    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Checkout code&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/checkout@v4&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="c1"&gt;# super-linter needs the full git history to get the&lt;/span&gt;
          &lt;span class="c1"&gt;# list of files that changed across commits&lt;/span&gt;
          &lt;span class="na"&gt;fetch-depth&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;

      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Super-linter&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;super-linter/super-linter@v6.2.0&lt;/span&gt;  &lt;span class="c1"&gt;# x-release-please-version&lt;/span&gt;
        &lt;span class="na"&gt;env&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="c1"&gt;# To report GitHub Actions status checks&lt;/span&gt;
          &lt;span class="na"&gt;GITHUB_TOKEN&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.GITHUB_TOKEN }}&lt;/span&gt;
          &lt;span class="na"&gt;VALIDATE_CHECKOV&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;

&lt;span class="nn"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, an explanation of the things you read:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;name&lt;/strong&gt; is the name of your workflow, but, this is optional&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;on&lt;/strong&gt;, is where you select the triggers. In this case, we will listen to the push and pull request. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;branches&lt;/strong&gt;, this is which branch you will listen to&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;jobs&lt;/strong&gt;, this is your task, you will test your code? Verify the style of code?&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;build&lt;/strong&gt;, this is the recipe of your build, the steps. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;permissions&lt;/strong&gt;, this defines how much access the workflow will have.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;steps&lt;/strong&gt;, and finally, this is the steps of your process.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;name (inside of steps)&lt;/strong&gt;, the name of this step.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;uses&lt;/strong&gt;, this is used to add a pre-existing action to your workflow, simplifying and reusing code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;with&lt;/strong&gt;, allows you to pass parameters and settings to the action you are including, customizing its behavior.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;env&lt;/strong&gt;, defines environment variables that can be used at any step in the workflow.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Obs: In your YAML, you have to put more attention to your code indentation.&lt;/p&gt;




&lt;p&gt;With this, when you or a college make a push or a pull request, the GitHub will be tested for you.&lt;/p&gt;

&lt;p&gt;Now, I will show for you where and how to make this. &lt;/p&gt;

&lt;p&gt;I will use this &lt;a href="https://github.com/ThomasLincoln/myGitActions"&gt;repository&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp73p1umo01golckrnaro.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp73p1umo01golckrnaro.png" alt="Repository" width="800" height="590"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, I will add a file without any indentation and bad code style.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx616g9bpp1vcomuote3r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx616g9bpp1vcomuote3r.png" alt="Creating File" width="471" height="282"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And finally, make a pull request: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6m52xcymw79qhozwuye.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6m52xcymw79qhozwuye.png" alt="Pull Request" width="490" height="488"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjzmztmk0bweluh8l7cb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjzmztmk0bweluh8l7cb.png" alt="Test Running" width="800" height="352"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, you can see the test running, and if all run how I expected:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3uy3qi3pjhcx9lyqrbdj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3uy3qi3pjhcx9lyqrbdj.png" alt="Error in pull request" width="800" height="302"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have some errors in our linter workflow, and if you want to know what and where, just click in details: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frt3xvtwni715boehd309.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frt3xvtwni715boehd309.png" alt="Error details" width="800" height="312"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By resolving the error, we received positive feedback, so you can run automated tests before accepting a pull request, or before merging your branches.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6MHGhr0n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://media1.tenor.com/m/xvo8-YQ78P0AAAAC/porky-pig.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6MHGhr0n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://media1.tenor.com/m/xvo8-YQ78P0AAAAC/porky-pig.gif" alt="Bye" width="498" height="298"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>devops</category>
      <category>learning</category>
    </item>
    <item>
      <title>Bar Programming #01 - What is CI/CD and how its works</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Wed, 28 Feb 2024 15:00:00 +0000</pubDate>
      <link>https://dev.to/samoht/bar-programming-01-what-is-cicd-and-how-its-works-38ah</link>
      <guid>https://dev.to/samoht/bar-programming-01-what-is-cicd-and-how-its-works-38ah</guid>
      <description>&lt;p&gt;Today, I will talk about CI/CD, a strategy to create and update as most fast as can. With this tool, you will never need to spend hours merging all branches of your project. &lt;/p&gt;

&lt;p&gt;Obs: For now, I will write in English, because I really focus on devolving my English writing. &lt;/p&gt;

&lt;h2&gt;
  
  
  What is CI/CD?
&lt;/h2&gt;

&lt;p&gt;CI is an acronym to Continuous Integration, with this part, our focus is on to constantly integrate and merge the code. CD Continuous Delivery, and with this, we want constantly to deliver features and updates to our production server. &lt;/p&gt;

&lt;p&gt;For your better understand, I get an infographic from Red Hat website. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm4t27uh7j0miguoi8aia.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm4t27uh7j0miguoi8aia.png" alt="Red Hat infographic" width="800" height="151"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(Is hard to see in dark mode)&lt;/p&gt;

&lt;p&gt;In a more directly way, CI wants to avoid the merge hell day and the CD wants to make the main branch is updated and ready for deploy. &lt;/p&gt;

&lt;h2&gt;
  
  
  Why would you use CI/CD?
&lt;/h2&gt;

&lt;p&gt;The goal of this strategy is to prevent bugs and conflicts by testing code before merging it, and by maintaining a cycle of constant updates. As applications grow in scope, these techniques help to reduce project complexity and make development more efficient.&lt;/p&gt;

&lt;p&gt;Thanks to the automatic tools of CI/CD, human intervention is not necessary when adding a commit to the production area. This means that updates reach the deployment area faster and users receive updates more frequently. This allows their feedback to reach developers sooner.&lt;/p&gt;

&lt;h2&gt;
  
  
  Delving deeper into CI
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is CI?
&lt;/h3&gt;

&lt;p&gt;CI stands for “Continuous Integration”. It is a software development practice that involves frequently merging code changes into a shared repository. This practice helps to prevent bugs and conflicts by identifying and fixing problems early in the development process.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why is CI important?
&lt;/h3&gt;

&lt;p&gt;In modern software development, it is common for multiple developers to work on different parts of the same codebase. This can lead to issues when it comes time to merge the changes together. For example, changes made by one developer may conflict with changes made by another developer.&lt;/p&gt;

&lt;p&gt;CI helps to prevent these issues by automating the process of merging code changes. When a developer makes a change to the code, they commit the change to a local repository. The CI server then automatically pulls the latest changes from the local repository and merges them into the shared repository.&lt;/p&gt;

&lt;h3&gt;
  
  
  How does CI work?
&lt;/h3&gt;

&lt;p&gt;The CI process typically involves the following steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A developer makes a change to the code and commits the change to a local repository.&lt;/li&gt;
&lt;li&gt;CI server pulls the latest changes from the local repository.&lt;/li&gt;
&lt;li&gt;CI server runs a series of tests to ensure that the changes do not break the code.&lt;/li&gt;
&lt;li&gt;the tests pass, the CI server merges the changes into the shared repository.&lt;/li&gt;
&lt;li&gt;the tests fail, the developer is notified and must fix the problem before the changes can be merged.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Delving deeper into Continuous Delivery (CD) and Continuous Deployment (CD)
&lt;/h2&gt;

&lt;p&gt;What is CD?&lt;/p&gt;

&lt;p&gt;CD stands for "Continuous Delivery" and/or "Continuous Deployment." These are two related concepts that deal with the final stages of the software development process.&lt;/p&gt;

&lt;p&gt;Continuous Delivery&lt;/p&gt;

&lt;p&gt;The goal of continuous delivery is to ensure that a software application can be released to production at any time. This is achieved by using automated tests to verify that the code is working as expected. If the tests pass, the code is automatically deployed to a staging environment. In this environment, the code can be further tested and evaluated before it is released to production.&lt;/p&gt;

&lt;p&gt;Continuous Deployment&lt;/p&gt;

&lt;p&gt;Continuous deployment is a step beyond continuous delivery. It involves automatically deploying the code to production whenever a change is made to the codebase. This means that new features and bug fixes can be released to users as soon as they are ready.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>learning</category>
      <category>github</category>
      <category>docker</category>
    </item>
    <item>
      <title>Bar Programming #00 - ThreeJS, como criar cenas 3D na web</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Wed, 20 Dec 2023 19:16:12 +0000</pubDate>
      <link>https://dev.to/samoht/bar-programming-00-threejs-como-criar-cenas-3d-na-web-2cnh</link>
      <guid>https://dev.to/samoht/bar-programming-00-threejs-como-criar-cenas-3d-na-web-2cnh</guid>
      <description>&lt;p&gt;Hoje, como teste dessa possível série de posts, tudo dependerá da minha disponibilidade de tempo, e de ter um bom assunto para falar. Mas, aqueles que estão aqui, bem vindos ao beta da minha programação de bar, onde falarei um pouco sobre algum assunto de programação, alguma tecnologia, tentando sempre falar de forma descontraída e leve, abstraindo um pouco, para o texto ser tranquilo de ler.&lt;/p&gt;

&lt;p&gt;Ps: Todos os links, que usei de referência, irão estar &lt;/p&gt;

&lt;p&gt;No post dessa vez, planejo explicar um pouco sobre como funciona a biblioteca threejs, mas antes, daremos um breve contexto sobre o que é o threejs. &lt;/p&gt;

&lt;h2&gt;
  
  
  O que é ThreeJS?
&lt;/h2&gt;

&lt;p&gt;Three.js é uma biblioteca JavaScript que permite criar e renderizar gráficos 3D na web. Com ela, você pode criar cenas, objetos, luzes, materiais, texturas, animações, efeitos e muito mais, usando apenas o seu navegador.&lt;/p&gt;

&lt;p&gt;Um exemplo de projeto usando three.js: &lt;a href="https://www.lamborghini.com/en-en/3d"&gt;Projeto&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;O Three.js é uma ferramenta poderosa e divertida para criar gráficos 3D na web, mas também tem suas limitações e desafios. Por exemplo, você precisa se preocupar com a compatibilidade dos navegadores, o desempenho, a otimização, a interação, a física, a iluminação, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hora de programar!
&lt;/h2&gt;

&lt;p&gt;Agora com esse conhecimento em mãos, vamos tentar, fazer algo simples, como um quadrado girando no cenário, será nosso primeiro de muitos mergulhos, pois, gostaria que você volte para outros, agora chega de conversa, e vamos por a mão na massa. &lt;/p&gt;

&lt;p&gt;Primeiramente, o html você pode copiar e colar sem dó, apenas prestando atenção que eu linkei um script da própria biblioteca e também um src para o app.js, o qual precisa ser do tipo “module”:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"pt-br"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;link&lt;/span&gt; &lt;span class="na"&gt;rel=&lt;/span&gt;&lt;span class="s"&gt;"stylesheet"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"style.css"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;A Square&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"importmap"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;imports&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;three&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://unpkg.com/three@0.139.2/build/three.module.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;three/addons/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://unpkg.com/three@0.139.2/examples/jsm/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"app.js"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"module"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;O css também:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;body&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;19&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;19&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora, vamos por parte no javascript, primeiro, precisamos criar a nossa cena, que será, basicamente, o ambiente em que trabalharemos. Também precisamos criar uma câmera, pois sem ela não veremos nada e por fim, criar um renderer, que irá renderizar a nossa cena. &lt;/p&gt;

&lt;p&gt;Ps: Também adicionaremos os imports iniciais que usaremos.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;three&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;OrbitControls&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;three/addons/controls/OrbitControls.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;scene&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Scene&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;camera&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;PerspectiveCamera&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;75&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerWidth&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHeight&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;renderer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;WebGLRenderer&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setSize&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerWidth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHeight&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shadowMap&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enabled&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;domElement&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Essa variável scene será extremamente usada, sempre que quisermos adicionar algo na cena, seja um objeto, uma luz, um chão, ect. Tudo será adicionado nela com um método scene.add(o que você quiser adicionar).&lt;/p&gt;

&lt;p&gt;Agora, num primeiro momento, criemos um cubo, a explicação para cada item será dada a seguir.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;geometry&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;BoxGeometry&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;material&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;MeshBasicMaterial&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mh"&gt;0x00ff00&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;cube&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Mesh&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;geometry&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;material&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cube&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bom, primeiro, o objeto precisa ter uma geometria, sendo basicamente um formato, como se fosse o esqueleto dele, depois disso, temos o material, que seria a pele do nosso cubo. Assim, nós juntamos tanto esqueleto e pele, na construção do cubo usando um &lt;code&gt;new THREE.Mesh(geometry, material)&lt;/code&gt;, e por fim, usando a variável anteriormente criada, nós adicionamos na cena. &lt;/p&gt;

&lt;p&gt;Mas no momento, tanto a câmera quanto o cubo, nasceram no mesmo lugar, no 0,0,0. Então, temos algo assim: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fmt-fZke--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm6er3buzp0qcn6zqgn0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fmt-fZke--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm6er3buzp0qcn6zqgn0.png" alt="Exemplo da situação" width="496" height="255"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Para isso, afastemos um pouco usando o eixo z (caso não entenda direto, pense apenas que estamos andando um pouco para trás ou para frente com a câmera), e também, renderizemos na tela o cubo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;z&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Tá, mas esse cubo ta meio chato e parado não é? Façamos o seguinte, vamos rotacionar ele no eixo x e no y.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cube.rotation.x += 1;
cube.rotation.y += 2;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com todas essas mudanças, no momento nosso projeto se encontra assim:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2HcXodyS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dstegtgp4huu4elf4ucm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2HcXodyS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dstegtgp4huu4elf4ucm.png" alt="Nosso Projeto No Momento" width="574" height="369"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Agora, com nosso cubinho em mão, proponho tentar melhorar a cena, talvez com um pouco de luz e sombra e com alguma animação para finalizar. &lt;/p&gt;

&lt;p&gt;Primeiro a animação, que acaba sendo bem simples, lembra que movemos o objeto, chamando um &lt;code&gt;.position.eixo&lt;/code&gt;? Então, nós apenas precisamos fazer isso repetidas vezes, para isso, precisamos criar uma função &lt;code&gt;animate()&lt;/code&gt; e chamar uma função chamada &lt;code&gt;requestAnimattionFrame&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;animate&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;animate&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;cube&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rotation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="mf"&gt;0.01&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;cube&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rotation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="mf"&gt;0.01&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;animate&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora, adicionemos um plano e rotacionar, para ele ser um chão da nossa cena, apenas para melhorar a visualização.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;planeGeometry&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;PlaneGeometry&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;planeMaterial&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;MeshStandardMaterial&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mh"&gt;0xbcbcbc&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;plane&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Mesh&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;planeGeometry&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;planeMaterial&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;plane&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rotation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;span class="nx"&gt;plane&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;-=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="nx"&gt;plane&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;receiveShadow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;plane&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Aqui segue o mesmo esquema do cubo, com apenas a adicção de uma rotação, para ele virar um chão mesmo.&lt;/p&gt;




&lt;p&gt;Agora, adicionemos luzes e sombras, para isso usamos o seguinte código:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ambientLight&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;AmbientLight&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="mh"&gt;0xffffff&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;ambientLight&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;spotLight&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;SpotLight&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="mh"&gt;0xffffff&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.7&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;angle&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PI&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;penumbra&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;decay&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;distance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;castShadow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shadow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mapSize&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shadow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mapSize&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1024&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shadow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;near&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;shadow&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;far&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;60&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;spotLight&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;spotLight&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Coloquei algumas muitas propriedades rs, mas apenas copie elas, você pode ir modificando cada uma delas, mas são bem descritivas, então, teste a vontade. &lt;/p&gt;

&lt;p&gt;E por fim, vou apenas adicionar um controle orbital, para podermos visualizar melhor a cena.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;controls&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;OrbitControls&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;camera&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;renderer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;domElement&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Com isso, você poderá rotacionar sua cena, dar zoom, tirar zoom, o que quiser livremente. &lt;/p&gt;

&lt;p&gt;Resultado: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NWic3B4V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9m05hgx3c5233op27a4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NWic3B4V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9m05hgx3c5233op27a4.png" alt="Resultado do Projeto" width="800" height="335"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Muito obrigado pela atenção caso tenha chegado até aqui, espero que meu artigo tenha ajudado, qualquer ideia de post ou sugestão, por favor, me informe nos comentários. &lt;/p&gt;

&lt;h2&gt;
  
  
  Referências
&lt;/h2&gt;

&lt;p&gt;Link do GitHub: &lt;a href="https://github.com/ThomasLincoln/ThreejsTests"&gt;https://github.com/ThomasLincoln/ThreejsTests&lt;/a&gt;&lt;br&gt;
Link de referência para as luzes: &lt;a href="https://sbcode.net/threejs/directional-light-shadow/"&gt;https://sbcode.net/threejs/directional-light-shadow/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
      <category>beginners</category>
      <category>learning</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #5</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Fri, 02 Sep 2022 11:23:36 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-5-16o8</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-5-16o8</guid>
      <description>&lt;p&gt;Hoje irei falar um pouco sobre as divisões anteriormente mencionadas, os tipos de sistemas multitarefa e tudo mais. &lt;/p&gt;

&lt;h2&gt;
  
  
  Sistema Batch
&lt;/h2&gt;

&lt;p&gt;O sistema batch foi um dos primeiros sistemas, ele funcionava a partir de cartões furados. Que mais para frente começou a usar discos ou fitas e tudo mais. &lt;/p&gt;

&lt;p&gt;Seu funcionamento era feito da seguinte forma: os programadores inseriam cartões que passavam por um leitor e enviava para o processador, enquanto ele estava processando, a parte responsável pela leitura já estava lendo o próximo programa. Assim, o problema de ter um processador ocioso era facilmente resolvido. &lt;/p&gt;

&lt;p&gt;A principal característica desse sistema é a de não exigir interação do usuário com a aplicação. Todas as entradas e saídas de dados são implementadas por uma memória secundária. Os programas que eram executados nesse tipo de sistema eram os de cálculo numérico, compilações, ordenações, backups e tudo mais que o usuário não precisa interagir. &lt;/p&gt;

&lt;p&gt;Atualmente os Sistemas Operacionais, simulam o processo batch. &lt;/p&gt;

&lt;h2&gt;
  
  
  Sistemas de Tempo Compartilhado
&lt;/h2&gt;

&lt;p&gt;Os sistemas de tempo compartilhado, faziam com que o processamento fosse dividido em tempos, assim, cada processo pegava uma fatia do tempo livre, caso não houvesse uma fatia de tamanho suficiente para ele ou caso a que ele esteja usando não seja o suficiente, ele vai entrar em "stand by" até que liberem espaço de tempo para ele. &lt;/p&gt;

&lt;p&gt;Esses sistemas geralmente permitem que o usuário interaja com ele através de terminais que incluem vídeo, teclado e mouse. Esses sistemas permitem que você se comunique com o processador usando comandos, assim sendo possível ver os arquivos armazenados no disco ou cancelar a execução de um programa. &lt;/p&gt;

&lt;p&gt;Como é um sistema que geralmente responde em poucos segundos a maioria dos comandos e a todas as outras requisições, esses sistemas são conhecidos como sistema "on-line".&lt;/p&gt;

&lt;p&gt;A maioria das aplicações comerciais usam esse tipo de sistema por conta do tempo de resposta razoável e custo baixo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sistemas de Tempo Real
&lt;/h2&gt;

&lt;p&gt;Esses sistemas funcionam de forma semelhante aos de tempo compartilhado, com uma principal diferença que é a de que o tempo exigido pelos processos, nesse sistema é rígido e não pode variar, ao contrário dos sistemas de tempo compartilhado. &lt;/p&gt;

&lt;p&gt;Nesses sistemas não existe o conceito de fatia de tempo, o processo vai usar o processador o tempo que for, ou até a aplicação definir que existe outra aplicação com maior prioridade, assim trocando de processo no processador. &lt;/p&gt;

&lt;p&gt;Esses sistemas são geralmente aplicados em coisas como controle de processos, monitoramento de refinarias, controle de tráfego aéreo, etc. Em resumo, sistemas em que o tempo de processamento é um fator crucial para o bom funcionamento. &lt;/p&gt;

&lt;p&gt;No próximo post irei falar um pouco sobre os sistemas com múltiplos processadores. &lt;/p&gt;

</description>
      <category>architecture</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #4</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Thu, 01 Sep 2022 12:16:38 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-4-1mp7</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-4-1mp7</guid>
      <description>&lt;p&gt;Hoje iremos começar a falar dos tipos de sistemas operacionais. Vamos primeiro ver uma arvorezinha mostrando as versões do sistema. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h6eYbEC5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3feqbkq25mjs518r96ww.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h6eYbEC5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3feqbkq25mjs518r96ww.png" alt="Mapa mental dos tipos de sistema" width="800" height="292"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Alguns desses sistemas tem divisões, então vamos com calma, vou primeiro explicar a diferença entre os sistemas monotarefa e multitarefa.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sistemas Monoprogramáveis ou Monotarefa
&lt;/h2&gt;

&lt;p&gt;Esses eram os primeiros sistemas operacionais, eles surgiram entre 1960 e 1970, eram feitos para executarem apenas um processo por vez (o que deu origem ao seu nome), não era possível pedir para o programa executar outro processo enquanto o atual não fosse finalizado totalmente. &lt;/p&gt;

&lt;p&gt;Assim, o processador ficava ocioso enquanto aguardava alguma entrada ou saída finalizar, ocasionando num problema de mau uso de processamento. &lt;/p&gt;

&lt;h2&gt;
  
  
  Sistemas Multiprogramáveis ou Multitarefa.
&lt;/h2&gt;

&lt;p&gt;Nesse tipo de sistema, os recursos são compartilhados, não sendo mais um sistema que fica ocioso enquanto um processo não é finalizado. Várias aplicações podem compartilhar o processador e a memória. Assim o SO se preocupa além de fazer o contato entre os componentes, se preocupa agora a gerir os recursos para controlar quem tem acesso ao que e quando do hardware. &lt;/p&gt;

&lt;p&gt;A principal vantagem desse tipo de sistema é a redução de custos, visto que a é possível compartilhar recursos. Além disso, eles reduzem totalmente o tempo de execução das aplicações. Porém, uma desvantagem é que a sua implementação se torna muito mais complexa do que os sistemas monotarefa. &lt;/p&gt;

&lt;p&gt;Também podemos dividir esse tipo de SO em dois grupos dependendo da quantidade de pessoas que o acessam, os dois grupos são: os sistemas monousuário e multiusuário. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Monousário&lt;/strong&gt; são os sistemas em que o computador é acessado por apenas um usuário, geralmente é o caso de computadores pessoais e estações de trabalho, onde apenas um usuário interage com o sistema.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiusuário&lt;/strong&gt; são os sistemas em que existem vários terminais e vários computadores podem compartilhar entre si os recursos de um mesmo computador central.&lt;/p&gt;

&lt;p&gt;Além disso, há outra divisão entre os sistemas multitarefa que diz respeito a como suas aplicações são gerenciadas, sendo essas divisões o sistema batch, de tempo compartilhado ou tempo&lt;br&gt;
real. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XQlSgok5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8mzjdsy34l5nacm8mfi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XQlSgok5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8mzjdsy34l5nacm8mfi.png" alt="Mapa mental dos tipos de sistema Multitarefa" width="419" height="134"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Os quais irei falar em um post futuro&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #3</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Sat, 27 Aug 2022 16:59:36 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-3-1gne</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-3-1gne</guid>
      <description>&lt;p&gt;E agora para finalizar a história dos Sistemas Operacionais do livro, vamos para os anos 1980 e 1990, depois disso o livro apenas faz especulações, mesmo que algumas tenha realmente acontecido, eu prefiro falar apenas sobre os assuntos que o livro dá uma afirmação.&lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1980
&lt;/h2&gt;

&lt;p&gt;Nos anos 80 foi dada a largada para os PC's, graças a IBM, que criou a filosofia de computadores pessoais. O primeiro computador usava o processador da Intel e um sistema operacional da Microsoft. &lt;/p&gt;

&lt;p&gt;Os sistemas que dominavam os mini e superminicomputadores, eram os sistemas multiusuários, com destaque para os baseados em Unix. Nessa época foram feitas várias melhores, com destaque para o protocolo de rede TCP/IP que é usado até hoje.  &lt;/p&gt;

&lt;p&gt;Com a evolução dos microprocessadores, principalmente os da Intel. Surgem os primeiros SO's comerciais com interface gráfica, como o Microsoft Windows e OS/2. &lt;/p&gt;

&lt;p&gt;Os softwares de redes passam a ser fortemente ligados aos sistemas operacionais, dando origem ao SO de rede, com destaque para o Novell Netware e o Microsoft LAN Manager. &lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1990
&lt;/h2&gt;

&lt;p&gt;Nessa época tivemos uma evolução enorme nas áreas de hardware, software e telecomunicação. O que gerou uma abertura para as aplicações evoluírem, que cada vez mais precisavam de mais armazenamento e processamento, o que ocorre até nos dias atuais.&lt;/p&gt;

&lt;p&gt;Por conta das evoluções da internet, o TCP/IP criado na década passada passou a ser um padrão de mercado. E como a internet cresceu de forma exponencial, fez com que coisas como segurança e problema de gerenciamento/desempenho se tornassem fatores relevantes e preocupantes na hora de se desenvolver um SO integrado a rede. &lt;/p&gt;

&lt;p&gt;A arquitetura de cliente/servidor, que antes só era aplicada em redes locais, teve um aumento de escala e passou a ser usada na internet e é assim que você consegue acessar qualquer informação independente do lugar que você esteja. E com isso surgiram várias coisas que temos hoje em dia, como: servidores web, correio e servidores de banco de dados. &lt;/p&gt;

&lt;p&gt;Foi nessa década que os SO's baseados em interfaces gráficas pegaram de verdade e se tornaram consolidados. Em 1991 o Linux surge, o SO que é atualmente usado em diversas áreas comerciais e acadêmicos. &lt;/p&gt;

&lt;p&gt;E nessa década ocorreu a popularização dos softwares de uso livre. Como SO's que é o caso do LINUX, banco de dados como (MySQL), servidores web (Apache), etc.&lt;/p&gt;

</description>
      <category>hardware</category>
      <category>architecture</category>
      <category>todayilearned</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #2</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Wed, 24 Aug 2022 13:40:24 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-2-37ec</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-2-37ec</guid>
      <description>&lt;p&gt;Hoje continuemos com o conteúdo do post passado, o da história dos sistemas operacionais seguindo o livro Arquitetura de Sistemas Operacionais. Sem mais delongas, vamos lá.&lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1960
&lt;/h2&gt;

&lt;p&gt;O elemento de mais destaque dessa época, foi sem dúvida o &lt;strong&gt;multiprocessamento&lt;/strong&gt;, pois, antes da sua criação, o computador quando estava em processo de leitura ou impressão, ele não podia executar mais nenhum programa, assim, ficando ocioso. &lt;/p&gt;

&lt;p&gt;Porém, para resolver esse problema surgiu a multiprogramação, que permitiu que vários programas compartilhassem a memória, assim, quando um programa estava na etapa de leitura/gravação, o processador começava a executar o próximo programa. &lt;/p&gt;

&lt;p&gt;Agora vamos para a nossa linha temporal: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/dzinXfTdzh6M0/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/dzinXfTdzh6M0/giphy.gif" alt="dancing" width="500" height="341"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1963&lt;/strong&gt;, o computador &lt;strong&gt;B-5000&lt;/strong&gt; é lançado, com o SO “Master Control Program”, o que oferecia multiprogramação, memória virtual com segmentação e multiprocessamento. E nesse mesmo ano, foi criado o primeiro supercomputador, o &lt;strong&gt;CDC 6000&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1964&lt;/strong&gt;, a IBM lança o &lt;strong&gt;System/360&lt;/strong&gt;, que era um conceito de máquinas que podiam ter portes diferentes, mas a arquitetura era a mesma. Assim o usuário não precisava se preocupar com seus programas, ele podia comprar uma máquina mais econômica em uma primeira instância, e caso necessário comprar uma mais potente depois e ainda ter seus programas funcionando em ambas. O SO dessa máquina era o &lt;strong&gt;OS/360&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Até esse momento, nós já tínhamos evoluído bastante. Porém, para os programadores, programar ainda era muito custoso, imagine, que se você compilar o código com um erro você pode parar ele facilmente, os programadores antes não podiam fazer isso. Caso, eles cometessem um erro, eles iriam ter que esperar horas e horas para o computador terminar de compilar aquele programa com erro. &lt;/p&gt;

&lt;p&gt;A solução para isso foi oferecer tempo de resposta menores e uma interface para interagir melhor com o sistema. Assim cada processo estaria limitado, poderia apenas usar o processador em alguns intervalos de tempo, para isso foi dado o nome de tempo compartilhado (time-sharing). Além de adicionarem um terminal de vídeo (o precursor do monitor) e um teclado.&lt;/p&gt;

&lt;p&gt;Um dos primeiros sistemas a usar o Time-Sharing foi o CTSS, foi feito pelo MIT em 1962, e logo após o seu lançamento, o MIT já estava se preparando para desenvolver o MULTICS.&lt;/p&gt;

&lt;p&gt;O qual implementava várias inovações como a &lt;strong&gt;memória Virtual com segmentação e paginação&lt;/strong&gt;, &lt;strong&gt;multiprogramação&lt;/strong&gt; e suportava vários usuários e processadores. Porém, ele não pode ser finalizado, contudo, muitas das ideias desenvolvidas nele foram importantes para o desenvolvimento dos SO's que temos atualmente. &lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1965&lt;/strong&gt;, graças a “Digital Equipment Corp.”, surgiram os primeiros computadores de pequeno porte e baixo custo, eram os minicomputadores. &lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1969&lt;/strong&gt;, Ken Thompson, que havia trabalhado no MULTICS, começou a desenvolver seu próprio SO, que seria futuramente conhecido como Unix. &lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1970
&lt;/h2&gt;

&lt;p&gt;Finalmente anos 70.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/l4EoNNaPCH4hzLK92/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/l4EoNNaPCH4hzLK92/giphy.gif" alt="Dancing" width="480" height="368"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nessa época, a LSI e a VLSI, foram os fatores que levaram adiante o processo de diminuir o tamanho e preço dos equipamentos eletrônicos.  Assim, a Digital lança a sua nova linha de microcomputadores, o PDP-11 em &lt;strong&gt;1970&lt;/strong&gt; e mais adiante o sistema VAX/VMS (Virtual Memory System) de 32 bits.&lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1971&lt;/strong&gt;, a Intel lança sue primeiro microprocessador, o “Intel 4004” e logo após o “Intel 8080”. &lt;/p&gt;

&lt;p&gt;Em &lt;strong&gt;1976&lt;/strong&gt;, Steve Jobs e Steve Wozniak produzem o “Apple II” de 8 bits, que se tornou uma febre em todos os lugares. Assim consolidando a marca. E neste mesmo ano, a Apple e a Microsoft são fundadas. &lt;/p&gt;

&lt;p&gt;Um problema que ainda tínhamos era a velocidade do processamento, assim a estratégia adotada foi a de criar máquinas com vários processadores, criando assim o &lt;strong&gt;multiprocessamento&lt;/strong&gt;. E também foram criados processadores vetoriais e técnicas de paralelismo. &lt;/p&gt;

&lt;p&gt;Nessa época surgiram as redes distribuídas (WAN's) e foram fortemente difundidas, com isso vários domínios foram criados, além de que surgiram também as primeiras LAN's. Assim, os SO's, se tornaram fortemente ligados aos softwares de rede. &lt;/p&gt;

&lt;p&gt;E como uma última informação desta época, foi nela onde as linguagens que já devem ser conhecidas por você foram criadas. A Pascal e a C.&lt;/p&gt;

</description>
      <category>todayilearned</category>
      <category>hardware</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #1</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Tue, 23 Aug 2022 13:58:06 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-1-4i6f</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-1-4i6f</guid>
      <description>&lt;p&gt;Hoje iremos ver a evolução dos sistemas operacionais, desde um pouco antes do seu surgimento até quase os tempos atuais. &lt;/p&gt;

&lt;p&gt;Capítulo 1.4 do Livro Arquitetura de Sistemas Operacionais.&lt;/p&gt;

&lt;p&gt;Então sem muita enrolação vamos lá (se ficar muito extenso irei dividir em dois posts).&lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1940
&lt;/h2&gt;

&lt;p&gt;Infelizmente a nossa história começa em períodos de guerra, pois, caso você não saiba, muitos dos investimentos tecnológicos que foram o ponta pé inicial para os computadores, foram feitos por conta da guerra. &lt;/p&gt;

&lt;p&gt;Com isso, criaram computadores, os primeiros, que eram máquinas gigantes com válvulas. Eram os computadores eletromecânicos. Sua função era a de fazer cálculos, assim como uma calculadora. Mas o que eles tinham de tamanho eles não tinham de velocidade. &lt;/p&gt;

&lt;p&gt;Então simbora ver como eles surgiram.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IX5iLj_o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://umblogqualquer.com.br/wp-content/uploads/2020/07/200708_hardware_02.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IX5iLj_o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://umblogqualquer.com.br/wp-content/uploads/2020/07/200708_hardware_02.png" alt="image" width="720" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Como já disse, o mundo se encontrava em guerra, e todas as máquinas eram feitas para ajudar na guerra. Assim, Alan Turing (que se você nunca ouviu falar, recomendo pesquisar sobre ele) desenvolveu o &lt;strong&gt;Enigma&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MEsrzaYY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.monomaniacos.com.br/wp-content/uploads/2015/05/enigma1.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MEsrzaYY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://www.monomaniacos.com.br/wp-content/uploads/2015/05/enigma1.jpg" alt="enigma" width="800" height="508"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Essa coisinha fofa aqui em cima, foi a responsável por descriptografar mensagens alemãs. Assim sendo de excelente ajuda para os aliados. Além de ser o responsável por descriptografar a mensagem do dia D.&lt;/p&gt;

&lt;p&gt;Em 1944, o primeiro computador eletromecânico foi criado (aquele das válvulas), o nome dele é &lt;strong&gt;Mark 1&lt;/strong&gt;, ele foi muito utilizado para realizar cálculos matemáticos para a marinha. Um fato curioso é que as armaduras do homem de ferro são nomeadas com Mark (número da versão). &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/3oriNZN3vh5XFSr8Gc/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/3oriNZN3vh5XFSr8Gc/giphy.gif" alt="iron man" width="480" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Logo após o Mark 1, em 1946 surge o &lt;strong&gt;ENIAC&lt;/strong&gt;, foi o primeiro computador digital e eletrônico. Sua estrutura possuía 17 mil válvulas, 10 mil capacitores, 70 mil resistores e pesava em torno de 30 toneladas. Quando estava em funcionamento ele podia fazer cerca de 5 mil adições por segundo.&lt;/p&gt;

&lt;p&gt;Um problema é que para operar ele os programadores precisavam de um profundo conhecimento do hardware dele, por conta de ser um computador que funciona a partir de hardware sem nenhum software. Além de que, para programar ele era preciso usar um painel com 6 mil conectores, usando linguagem de máquina. &lt;/p&gt;

&lt;p&gt;A programação dele poderia levar dias, porém, se bem programado, cálculos antes feitos em 1 dia, poderiam ser feitos em segundos. E com esse avanço, o foco de melhoria não era mais no de velocidade de processamento, mas sim na velocidade de programação. Pois programar no ENIAC era custoso demais.  &lt;/p&gt;

&lt;p&gt;Nessa época, uma das pessoas responsáveis pelo desenvolvimento do ENIAC imaginou uma máquina onde os dados seriam armazenados em uma memória, tornando o processo de programação muito mais rápido, o que foi chamado de "programa armazenado" e essa é a base da arquitetura de computadores que temos hoje em dia.&lt;/p&gt;

&lt;p&gt;O primeiro computador a utilizar esse sistema surgiu em 1949 seu nome era &lt;strong&gt;EDSAC&lt;/strong&gt;, e logo após todas as máquinas criadas adotaram esse sistema. Nessa época ainda não tínhamos teclados, mouses ou telas, o uso do computador era voltado para área acadêmica e militar, e ainda não havia sinais do surgimento do primeiro SO.&lt;/p&gt;

&lt;h2&gt;
  
  
  Década de 1950
&lt;/h2&gt;

&lt;p&gt;Com a chegada de uma nova década, os computadores com transistores e memórias magnéticas surgiram. Assim dando uma guinada na área tecnológica. Mesmo que computadores com transistores tenham sido criados no final da década passada, eles só foram lançados comercialmente apenas no final dos anos 50. &lt;/p&gt;

&lt;p&gt;O transistor foi uma ferramenta que permitiu um aumento de velocidade no processamento e as fitas magnéticas permitiam um acesso mais rápidos aos dados e uma capacidade maior de armazenamento. Com isso os computadores se tornaram muito menores. &lt;/p&gt;

&lt;p&gt;Nessa época, as grandes empresas da área surgiram. Sejam por serem criadas exclusivamente para computadores ou investindo na tecnologia. Entre elas estão: Raytheon, RCA, Burroughs e IBM, com o surgimento delas os computadores passaram a serem usados comercialmente.&lt;/p&gt;

&lt;p&gt;Vamos lá ver como tudo isso aconteceu. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/SOqjY66dEdljq/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/SOqjY66dEdljq/giphy.gif" alt="ibm" width="320" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Em 1946, Eckert e Mauchly deixaram a universidade que estava, para formar a primeira empresa de computadores, seu nome era Eckert-Mauchly Computer Corp., o objetivo deles era criar o UNIVAC (Universal Automatic Computer). Porém, no caminho do desenvolvimento eles tiveram problemas financeiros, assim a emprea deles foi comprada pela Remington Rand Corp.,o que permitiu que eles pudessem terminar o projeto em 1951.&lt;/p&gt;

&lt;p&gt;Assim o primeiro computador para fins comerciais nasceu, seu nome era &lt;strong&gt;UNIVAC I&lt;/strong&gt;. Nessa mesma época o MIT colocou em cena o primeiro computador com processamento em tempo real. &lt;/p&gt;

&lt;p&gt;Seu nome era &lt;strong&gt;Whirlwind I&lt;/strong&gt;, o computador feito pelo MIT inovou em várias coisas, porém, a parte mais interessante era o uso de fitas magnéticas. Onde os programas (ou jobs), passaram a ser perfurados em cartões, que eram colocados em um equipamento de leitura e nesse equipamento os dados eram gravados em uma fita magnética. &lt;/p&gt;

&lt;p&gt;Essa fita magnética era lida pelo processador, assim ele faria o cálculo, que executava o programa todo de uma vez e iria gravar o resultado em uma fita magnética para depois imprimir o resultado.&lt;/p&gt;

&lt;p&gt;Porém ele executava apenas um programa por vez. Ou seja, o computador apenas lia, executava ou imprimia. Nomearam esse tipo de processamento de batch. &lt;/p&gt;

&lt;p&gt;Pode parecer pouco, mas agora era possível adicionar vários programas na lista de espera, pois, anteriormente quando o computador estava executando um programa, não era possível fazer mais nada. &lt;/p&gt;

&lt;p&gt;E nessa mesma época surgiram as linguagens de mais alto nível, o COBOL sendo uma delas. Assim, ter que lidar totalmente com a máquina deixou de ser uma necessidade, agora era possível começar a pensar na camada 1 do SO. &lt;/p&gt;

&lt;p&gt;Nessa época também surgiu os SO's, que eram os responsáveis por agilizar processos custosos para o programador, que eram o de entrada e saída (Input/Output Control System - IOCS). Assim não era mais preciso desenvolver o seu código para leitura ou saída de dados.&lt;/p&gt;

&lt;p&gt;Como um último evento desta época, a universidade de Manchester, desenvolveu o sistema ATLAS, que foi o precursor do sistema de memórias que temos hoje, com a sua memória hierarquizada. O que é extremamente essencial para a memória virtual, que eu já expliquei anteriormente.&lt;/p&gt;

&lt;p&gt;E por hoje é isso, amanhã teremos os anos 60 e 70. &lt;/p&gt;

</description>
      <category>beginners</category>
      <category>architecture</category>
      <category>devjournal</category>
      <category>todayilearned</category>
    </item>
    <item>
      <title>Arquitetura de Sistemas Operacionais #0</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Sat, 20 Aug 2022 17:16:35 +0000</pubDate>
      <link>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-0-e1h</link>
      <guid>https://dev.to/samoht/arquitetura-de-sistemas-operacionais-0-e1h</guid>
      <description>&lt;p&gt;A partir deste post, eu irei destrinchar e explicar o que eu entendo do livro Arquitetura de Sistemas Operacionais do "Francies Berenger Machado" e o "Luiz de Paulo Maia". Desde o primeiro capítulo de uma forma mais geral. Resumindo de uma forma mais fácil de entender, porém, os posts seguirão o mesmo padrão dos meus posts anteriores. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/WoWm8YzFQJg5i/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/WoWm8YzFQJg5i/giphy.gif" alt="reading" width="499" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Neste post, irei abordar do capítulo 1.1 até o 1.3.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que é um SO?
&lt;/h2&gt;

&lt;p&gt;Um Sistema Operacional, é nada mais nada menos que várias rotinas, que são executadas pelo processador da mesma forma que os programas. Porém, ele tem algumas diferenças, uma delas é que o SO é o responsável por possibilitar que o usuário possa usar seu computador sem ter que saber coisas como o computador e seus componentes físicos funcionem de maneira aprofundada. Assim, você pode jogar seu LoLzinho sem ter que programar a memória RAM rsrs. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/jvGRCV7wOiO38GYzea/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/jvGRCV7wOiO38GYzea/giphy.gif" alt="DRAAAVEN" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mas a grande diferença entre o SO e os demais programas, está em como ele é executado, não é como um programa que começa e termina. As rotinas do SO são constantemente chamadas, sempre que o usuário decide fazer algo que precisa de alguma rotina do SO, ela é chamada. &lt;/p&gt;

&lt;p&gt;Com isso explicado, hora de ver as principais funções de um SO. &lt;/p&gt;

&lt;h2&gt;
  
  
  Funções de um SO
&lt;/h2&gt;

&lt;p&gt;As funções do SO são resumidas em dois tópicos, a facilidade de acesso aos recursos do sistema e o compartilhamento de recursos de forma organizada e protegida.&lt;/p&gt;

&lt;h3&gt;
  
  
  Facilidade de Acesso aos Recursos do Sistema
&lt;/h3&gt;

&lt;p&gt;Sempre que você usa o mouse, ou digita algo no seu teclado, ou vê algo na sua tela. Você faz isso sem se preocupar em como estabelecer uma conexão entre a CPU e cada um desses componentes, certo?&lt;/p&gt;

&lt;p&gt;Pois bem, isso tudo é graças ao SO que faz essa conexão pra você, mas não se engane, isso não é nem um pouco simples, são inúmeras rotinas, só para o movimento do seu mouse modificar o movimento de uma setinha e mais rotinas ainda para que essa setinha aparece na tela e mais rotinas ainda para que essa seta se movimente na tela. &lt;/p&gt;

&lt;p&gt;Funciona da Seguinte forma: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SexpNCoj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxvdkdtibfweemxe82gt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SexpNCoj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxvdkdtibfweemxe82gt.png" alt="Image description" width="437" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Compartilhamento de Recursos de Forma Organizada
&lt;/h3&gt;

&lt;p&gt;E por último, mas não menos importante, o compartilhamento de recursos. Pense comigo, se o seu computador e o de outra pessoa estiverem conectados, o que aconteceria se no caminho o conteúdo da sua tela vá para a tela do seu amigo? Pois é, essa é a utilidade dessa função. &lt;/p&gt;

&lt;p&gt;Porém, não é só para que não haja conflito em questões de computadores conectados. Pois, essa função também permite que seu computador seja multitarefa, assim você pode curtir sua música enquanto lê esse post. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/jpbnoe3UIa8TU8LM13/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/jpbnoe3UIa8TU8LM13/giphy.gif" alt="vibing" width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Máquinas de Camadas
&lt;/h2&gt;

&lt;p&gt;Antes da criação do SO, era necessário que qualquer programador tivesse aprofundados conhecimentos de hardware, assim tornando custoso e demorado se tornar um bom programador. Porém, assim que o SO surgiu, todo esforço se tornou muito menor, não sendo mais necessário ter um conhecimento da linguagem de máquina. &lt;/p&gt;

&lt;p&gt;Com isso o computador começou a ter camadas ou níveis. As mais conhecidas são a do hardware (nível 0) a camada mais baixa e a que vem logo acima, a camada do software (nível 1). Porém, o número de camadas varia de acordo com as necessidades de cada usuário. Uma das vantagens disso, é que quando o usuário está trabalhando em uma camada, ele não precisa se preocupar com as demais camadas. &lt;/p&gt;

&lt;p&gt;Atualmente as camadas dos computadores são feitas da seguinte forma: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0cZoS_TZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w6e50lg9sw2253n81kc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0cZoS_TZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w6e50lg9sw2253n81kc.png" alt="Image description" width="215" height="310"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>architecture</category>
      <category>devjournal</category>
      <category>todayilearned</category>
    </item>
    <item>
      <title>Memória Real x Memória Virtual e Fragmentação</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Wed, 17 Aug 2022 14:57:15 +0000</pubDate>
      <link>https://dev.to/samoht/memoria-real-x-memoria-virtual-e-fragmentacao-23la</link>
      <guid>https://dev.to/samoht/memoria-real-x-memoria-virtual-e-fragmentacao-23la</guid>
      <description>&lt;p&gt;Assim como já vimos em posts anteriores, a memória vê uma lista de endereços que apontam para páginas e não necessariamente temos o número máximo de endereços que a CPU nos fornece, onde o barramento nos limita e o SO reserva um pouco para ele. &lt;/p&gt;

&lt;p&gt;Porém, temos um outro detalhe que é importante saber e entender. Que é a memória virtual. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mas o que é isso Thomas?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/iQjYMWlP1Qwq4JlWfQ/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/iQjYMWlP1Qwq4JlWfQ/giphy.gif" alt="pensando" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Então, na memória real, nós realmente tínhamos uma lista de endereços que iam por exemplo de 000 até FFF (desconsiderando todas as diminuições apenas para que seja mais fácil de entender). Porém isso causava um problema onde os programas podiam acessar os dados um dos outros e outros problemas. Com isso, a partir dos anos 90, surgiram processadores capazes de usar memória virtual.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que acontece?
&lt;/h2&gt;

&lt;p&gt;Bem, a memória virtual funciona da seguinte forma, ela pega uma parte da memória local e cria endereços virtuais, assim o programa vai ver uma memória de 000 até FFF, mas na vdd vai estar acessando por exemplo A43. E conforme for precisando de mais ele vai alocando. &lt;/p&gt;

&lt;p&gt;E com isso os programas começa a se tornar isolados. Impedindo que eles comecem a acessar dados um dos outros. &lt;/p&gt;

&lt;h2&gt;
  
  
  Fragmentação
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/Rpc7RLegctKms/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/Rpc7RLegctKms/giphy.gif" alt="fragment" width="400" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Como um último assunto desse post vou falar sobre fragmentação. Vamos supor que você tenha 5 caixinhas, e sempre que você quiser armazenar coisas nela tenha que ser em caixas seguidas. &lt;/p&gt;

&lt;p&gt;(Você vai precisar de bastante imaginação)&lt;/p&gt;

&lt;p&gt;Suponha que você guarde 3 tênis nas primeiras caixas. E agora decida guardar 2 camisetas nas duas últimas. Mas agora decide esvaziar a segunda e a quarta caixa. &lt;/p&gt;

&lt;p&gt;E agora vc tem duas caixas vazias, mas separadas. E como você só pode salvar coisas contínuas, mesmo que possa guardar duas coisas, você só pode guardar coisas diferentes. E esse é o problema da fragmentação. &lt;/p&gt;

</description>
      <category>architecture</category>
      <category>devjournal</category>
      <category>todayilearned</category>
    </item>
    <item>
      <title>Como a memória funciona?</title>
      <dc:creator>Thomas Lincoln</dc:creator>
      <pubDate>Tue, 16 Aug 2022 14:57:38 +0000</pubDate>
      <link>https://dev.to/samoht/como-a-memoria-funciona-3d42</link>
      <guid>https://dev.to/samoht/como-a-memoria-funciona-3d42</guid>
      <description>&lt;p&gt;Como já vimos anteriormente, o computador funciona com vários tipos de memória, algumas voláteis e outras não. Como a memória secundária, a principal ou a cache. O sistema Operacional é o responsável por organizar essa bagunça toda de memórias, dizendo onde cada dado ou operação vai. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/PjTSEQy85NKOlZ7b19/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/PjTSEQy85NKOlZ7b19/giphy.gif" alt="organize" width="480" height="292"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mas antes de entender como o computador organiza a memória, nós precisamos entender como o programa vê a memória, quando é executado ou quando ele está armazenado, ele não identifica "ah, olha só uma memória RAM que daora" ou "ah, aquele lá é o HD, gente fina ele". &lt;/p&gt;

&lt;p&gt;Ele apenas vê memória, a CPU é a responsável por dizer onde vai o que, e é nela que fica a memória cache, com os barramentos que conectam ela as memórias RAM, HDs, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como o computador vê a memória?
&lt;/h2&gt;

&lt;p&gt;Vamos lá, seria uma enrolação sem fim explicar a fundo, falar dos Flip-Flops e tudo mais. Então vou usar a analogia que o nosso querido "Fábio Akita" usou no seu vídeo sobre gerenciamento de memória, créditos para ele e fica o link para o vídeo dele (&lt;a href="https://www.youtube.com/watch?v=9AK_1gqEfkQ"&gt;https://www.youtube.com/watch?v=9AK_1gqEfkQ&lt;/a&gt;)&lt;/p&gt;

&lt;p&gt;Enfim, créditos dados, vamos lá para a explicação. &lt;/p&gt;

&lt;p&gt;Podemos entender a memória RAM como um livro com um índice, com várias linhas de "endereços", onde cada uma aponta para uma página de informações(dados). &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/il1yesdofGlZ6/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/il1yesdofGlZ6/giphy.gif" alt="books gif" width="500" height="281"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Essas linhas, são os nossos endereços (ponteiros pra quem já estudou estrutura de dados). O tamanho desses endereços depende da arquitetura da máquina, máquinas de 64 bits suportam 2^64 bits, assim o tamanho seria: 18.446.744.073.709.551.616.  Porém, o computador lê em binário, então o maior seria 1111111111111111111111111111111111111111111111111111111111111111. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/JWiPeGrr8Ms92/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/JWiPeGrr8Ms92/giphy.gif" alt="help" width="266" height="198"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Calma, ainda fica melhor, mas primeiro, você não precisa decorar esses valores. Agora vamos descobrir uma forma de melhorar mais ainda isso dai. &lt;/p&gt;

&lt;p&gt;Como você deve ter percebido, ficou um valor monstruoso, porém, uma coisa que frequentemente faziam era dividir esses dados em grupos, as vezes em grupos de 8, ou as vezes em grupos de 16. E é ai que entra o nosso sistema novo, pois queríamos representar esses 16 valores, mas só com o sistema arábico não era possível, pois só ia do 0 ao 9, então acrescentamos mais 6 letras, A até F.&lt;/p&gt;

&lt;p&gt;Assim, aquele numero gigante, virou FFFF FFFF FFFF FFFF&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/ieREaX3VTHsqc/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/ieREaX3VTHsqc/giphy.gif" alt="magic" width="250" height="196"&gt;&lt;/a&gt;&lt;br&gt;
Tcharam. &lt;/p&gt;

&lt;p&gt;Assim, o nosso índice é visto com endereços de 0000... até FFFF...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Fica a curiosidade, em sistemas 32 bits, nós tínhamos 2^32, o que resultava em 4gb de endereços, o que fazia com que sistemas 32 bits não suportassem mais do que 4gb. E por isso muitos dos seus jogos antigos precisam de um patch&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Temos acesso aos 64 bits de endereço?
&lt;/h2&gt;

&lt;p&gt;Uma coisa que você precisa saber sobre esse assunto, antes que você vá embora ver outro post, é preciso você saber que mesmo que seu computador seja 64 bits, você não terá acesso a esses 64, pois, o barramento que conecta o CPU às memórias, limita isso. &lt;/p&gt;

&lt;p&gt;Então saiba, você pode ter um computador 64 bits, mas dependendo do seu CPU, você terá menos que isso. &lt;/p&gt;

</description>
      <category>datascience</category>
      <category>todayilearned</category>
      <category>architecture</category>
    </item>
  </channel>
</rss>
