
Google has recently announced a way to run the
[Chrome browser in a headless environment](https://developers.google.com/web/updates/2017/04/headless-chrome).
If you're using [Capybara gem](https://github.com/teamcapybara/capybara),
you can easily start using headless Chrome. Without further ado, let's do it:

1) Make sure you have one of the following **Chrome versions**:

* 57+ on **Linux**
* 59+ on **macOS**
* 60+ on **Windows**

2) Add (or update) the gem <code>selenium-webdriver</code>;

3) Make sure you're using **ChromeDriver** version 2.30 or higher.
You can install it by running:

* `brew install chromedriver` on **macOS**;
* `apt-get install chromium-chromedriver` on **Debian/Ubuntu Linux**.

4) Add the following `driver` to your `spec/support/capybara.rb`, `spec/spec_helper.rb`, or `spec/rails_helper.rb`:

```ruby
Capybara.javascript_driver = :selenium_chrome_headless
```

Or, if you need to use some custom options:

```ruby
Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new app, browser: :chrome,
    options: Selenium::WebDriver::Chrome::Options.new(args: %w[headless disable-gpu])
end

Capybara.javascript_driver = :chrome
```

Done, enjoy headless Chrome! ᕕ( ᐛ )ᕗ

---

You might get a warning like the following:

```bash
WARN Selenium [DEPRECATION] :args or :switches is deprecated. Use Selenium::WebDriver::Chrome::Options#add_argument instead.
```

Make sure you don't have another registered driver, I made this mistake myself and had an `iphone` driver, which was passing `args` in the old way and turned out to be the reason why I was getting the warning.


How to run your feature specs using Capybara and Headless Chrome


![heroku](/images/posts/2017/02/heroku.jpg)

Both [Heroku](https://heroku.com/) and [its CLI](https://devcenter.heroku.com/articles/heroku-cli) are great. However, there's no way to access multiple accounts via terminal out of the box. If you have a personal and a work account and need an easy way to switch between them, I have good news for you! :)

Heroku's team has created a plugin called [heroku-accounts](https://github.com/heroku/heroku-accounts). You can find [how to install](https://github.com/heroku/heroku-accounts#installation) and [how to use](https://github.com/heroku/heroku-accounts#usage) in its project page on Github.

To make it even easier, I've added the following aliases to my <code>~/.zshrc</code> (or <code>~/.bashrc</code>):

```bash
# Heroku
alias hp='heroku accounts:set personal'
alias hw='heroku accounts:set work'
```

Happy hacking!


How to setup multiple Heroku accounts (for heroku-cli)


I was about to run a rake task which would make important changes in my database.
My code was similar to this:

```ruby
def migrate_active_accounts
  accounts = Account.active
  # Code to migrate accounts here...
end

def migrate_inactive_accounts
  accounts = Account.inactive
  # Code to migrate accounts here...
end
```

This migration was very critical. Thus, I decided to log everything to make sure it would run as expected.
So I wrote a separate method to log what accounts were going to run by which method.

In order to do that, I'd need to know which method was calling my logger method.

I ended up [finding the answer on StackOverflow](http://stackoverflow.com/a/15098459/1445184) (where else would I? :p).

## Solution

As usual, Ruby has a neat solution for it: `Kernel` module has a [`caller_locations`](https://ruby-doc.org/core-2.3.1/Kernel.html#method-i-caller_locations) method, which returns an array with the current execution stack. So all we need to do is to use `caller_locations.first.label` to get the first element from the stack and then get its label.

My final code was looking like the following:

```ruby
def migrate_active_accounts
  accounts = Account.active
  log_migration_info(accounts)

  # Code to migrate accounts here...
end

def migrate_inactive_accounts
  accounts = Account.inactive
  log_migration_info(accounts)

  # Code to migrate accounts here...
end

private

def log_migration_info(accounts)
  caller_method = caller_locations.first.label

  Rails.logger.info "Running [MyClass##{caller_method}]
    for the following accounts: #{accounts.map(&:id).to_sentence}"
end
```

## Ruby prior to 2.0

If you're using an old version of Ruby ([even though you shouldn't](/2014/02/28/have-a-rails-2-app-you-can-run-it-on-the-newest-ruby)),
you'll need to use `caller` method along with a regular expression:

```ruby
caller.first[/`(.*)'/, 1]
```

Happy hacking!


[Ruby] How to get the name of the calling method?


Last time [I updated this blog's theme](/2012/10/02/new-blog-layout/) was in 2012! 😮

It was about time to have a fresh new look and there you have it! \o/

![new-theme](/images/posts/2016/11/new-theme.png)


New blog theme


I can't remember the last time I needed to open/read `log/development.log` or `log/test.log`.
These files usualy just consume disk space unnecessarily (some `test.log` files can easily reach more than 1 GB).

After talking to some other developers, all of them agreed they don't use it as well.
So what I've been doing in my projects is adding the following code (note that it'll still display logs through the `STDOUT` though):

## Rails 4+

`config/environments/development.rb`:

```ruby
# Prevents from writing logs on `log/development.log`
logger           = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger    = ActiveSupport::TaggedLogging.new(logger)
```

`config/environments/test.rb`:

```ruby
# Prevents from writing logs on `log/test.log`
config.log_level = :warn
logger           = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger    = ActiveSupport::TaggedLogging.new(logger)
```

## Rails 3

`config/environments/development.rb`:

```ruby
# Prevents from writing logs on `log/development.log`
logger        = ::Logger.new(STDOUT)
config.logger = ActiveSupport::TaggedLogging.new(logger)

# Replace `config.active_support.deprecation = :log` with:
config.active_support.deprecation = :stderr
```

`config/environments/test.rb`:

```ruby
# Prevents from writing logs on `log/test.log`
config.log_level = :warn
logger           = ::Logger.new(STDOUT)
config.logger    = ActiveSupport::TaggedLogging.new(logger)
```

Ps.: I've sent a suggestion to [rubyonrails-core mailing list](https://groups.google.com/forum/?fromgroups#!searchin/rubyonrails-core/lucascaton%7Csort:relevance/rubyonrails-core/MGwMVsQPjzw/ubL8-54wAwAJ) to make it default from next Rails versions, let's see their thoughts.


Prevent Rails from writing development/test log files


> **TL; DR** - Just use [Puma](http://puma.io/).

Rails has [changed its default server from Webrick to Puma](https://github.com/rails/rails/pull/23906/files) in Rails 5!

It also supports **Action Cable** (one of the new features from Rails 5) and Basecamp said [they're using Puma in production](http://weblog.rubyonrails.org/2015/12/18/Rails-5-0-beta1/).

I was wondering if **Puma** has been in fact better than **Unicorn** so I've read some blog posts about it:

* [Codeship's](http://blog.codeship.com/puma-vs-unicorn/)
* [Heroku's](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server)
* [EngineYard's](https://www.engineyard.com/articles/rails-server)

Basically, the answer is **yes - it is a bit better**, but don't wait for a huge improvement.

It'd be a good idea if you're either about to start a new project and migrating your current project to Rails 5 or newer.


Puma vs. Unicorn


Every now and then I need to write a script (rake task) to import a production database dump.

This is code I usually use:

```ruby
require 'yaml'

namespace :db do
  desc 'Downloads and imports a production DB dump'
  task :import_production_dump do
    puts '➙ Generating production DB dump...'
    execute_on_server %(
      PGPASSWORD="`cat /var/www/project/current/config/database.yml | \
        grep password | awk '{ print $2 }'`" \
        pg_dump database_name -h custom_url.rds.amazonaws.com -U user_name \
        --column-inserts --no-owner --no-privileges > backup.sql
    )

    puts '➙ Downloading production DB dump...'
    system "scp #{server_user_and_host}:#{backup_file_name} ."

    puts '➙ Deleting production DB dump...'
    execute_on_server "rm #{backup_file_name}"

    puts '➙ Cleaning your local DB...'
    %w[drop create].each { |task| Rake::Task["db:#{task}"].invoke }

    puts '➙ Importing production DB dump...'
    system "bin/rails db development < #{backup_file_name} > /dev/null"

    puts '➙ Removing local dump...'
    system "rm #{backup_file_name}"

    puts '➙ Done!'
  end

  def execute_on_server(commands)
    system %(ssh -T #{server_user_and_host} << 'SSH'
      #{commands}
    SSH).split("\n").map(&:strip).join("\n")
  end

  def server_user_and_host
    'username@example.com'
  end

  def backup_file_name
    'backup.sql'
  end
end
```

Let me know in the comments if you have a better solution! Perhaps a small gem? :)


Rake task to import a production DB dump


![security](/images/posts/2016/02/security.jpg)

I think we all agree it's a good practice to regenerate your SSH key from time to time. Not sure about you, but the first thing that comes to my mind when I think about that is: it'd take forever to replace my key in all servers I need to access, all online services that use my key, etc.

Overcoming my laziness, I decided at least to list those place it turned out it was a small list:

* Servers
* Github
* BitBucket

Although now it looks more reasonable, I was still lazy to do it. But then I noticed that [Github recommends](https://help.github.com/articles/which-remote-url-should-i-use/) the use of **HTTPS** instead of **SSH** for Git repositories syncs:

![1](/images/posts/2016/02/1.jpg)

What does one thing have to do with another? Well, by using `HTTPS`, you don't need to upload your SSH key to **Github** (check this out: [mine isn't longer at Github](https://github.com/lucascaton.keys)).

**BitBucket** also supports it, which means I'd be able to regenerate my SSH key without having to upload it again to these services.

## Servers

What's left? Servers! From now on, every time I realise it's time to regenerate my SSH key, all I need to update are the servers.
I ended up making a list of servers that I'd need to update and found out in the end it wasn't a big list and it'd be way easier than I thought it would.

Let's face the truth: I had been using the same SSH key in the last 5 years or so and it'd be totally worth it to ensure my security as well as the security of the projects from the company I work for.

## Becoming safer

There's more! This is the interesting part of this post: I've changed other things that made everything even safer:

* My new SSH key uses **4096 bits** - [recommended by Github](https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/) - instead of the default (**2048 bits**).
* As I mentioned before, I've changed all my local repositories to use <code>HTTPS</code> instead of <code>SSH</code> (see how in the end of this post).
* I'm now using a [personal access token](https://help.github.com/articles/creating-an-access-token-for-command-line-use/) rather than my Github password (you can [create it here](https://github.com/settings/tokens)), along with [two-factor authentication](https://help.github.com/articles/about-two-factor-authentication/), which I was already using.
* Cool, but would I need to type this token every time? Nope. There's a nifty tool called <code>ssh-agent</code> that can save your token. If you're using macOS, it's even easier: [Keychain](https://help.github.com/articles/working-with-ssh-key-passphrases/#os-x-keychain) can save and encrypt your token for you.
* My SSH key now has a [passphrase](https://help.github.com/articles/working-with-ssh-key-passphrases/), also saved encrypted on macOS's Keychain, which means I don't need to type it every time either.

## HTTPS is faster!

According to some tests I made here, <code>HTTPS</code> is faster than <code>SSH</code>:

```bash
# SSH
$ time git clone git@github.com:rails/rails.git
# 24.28s user 9.56s system 49% cpu 1:08.20 total
```

```bash
# HTTPS
$ time git clone https://github.com/rails/rails.git
# 13.52s user 6.41s system 39% cpu 50.730 total
```

## In order to use HTTPS in my Git repos, do I need to re-clone every project?

Nope. Just open `.git/config` file and replace:

```bash
url = git@github.com:username/repo.git
```

with:

```bash
url = https://github.com/username/repo.git
```

## Conclusion

Regenerating your SSH key every now and then isn't as painful as you might think.
I'd recommend doing it every 3 years or even less if you're paranoic or you work on something critic.


Why I regenerated my SSH key and maybe you should too


![ruby3](/images/posts/2016/01/ruby3.jpg)

**Freezing Strings** feature improves apps performance by freezing Strings. So, [Matz](https://twitter.com/yukihiro_matz) - Ruby's creator - decided to make all String literals frozen (immutable) [by default in Ruby 3.0](https://bugs.ruby-lang.org/issues/11473).

In order to have a transition path to this coming big change, it was decided to have a magic comment at the beginning of files, so you can use in **Ruby 2.x**.
To do so, just add this comment in the first line of your files:

```ruby
# frozen_string_literal: true
class YourClass
  # ...
end
```

Try adding it to your `spec_helper` or `rails_helper` file and let me know in the comments if your performance gets any better.

---

More info: [Ruby issue #8976](https://bugs.ruby-lang.org/issues/8976).


What is "frozen_string_literal" in Ruby?


![Top-5-Ruby-IDE-Solutions-for-Web-Developers](/images/posts/2015/12/Top-5-Ruby-IDE-Solutions-for-Web-Developers.png)

Sometimes we need to create a monkey patch for a gem or external lib. In these cases, it's good to force it to fail if the gem has been bumped up. Let's use Paperclip as an example:

```ruby
if Paperclip::VERSION != '1.2.3'
  # If you see this message, please test removing this file
  # If it's still required, please bump up the version above
  fail 'Please remove me, Paperclip version has changed'
end
```

If the gem doesn't provide you the version through a method, you can solve it with:

```ruby
if Bundler.load.specs.find { |gem| gem.name == 'paperclip' }.version.to_s != '1.2.3'
  # If you see this message, please test removing this file
  # If it's still required, please bump up the version above
  fail 'Please remove me, Paperclip version has changed'
end
```

Or even when you're waiting for a new Rails version, e.g.:

```ruby
fail 'Remove this file' if Rails::VERSION::MAJOR >= 5
```


If you really need to create a monkey patch, do it properly


A few days ago I was in CampJS, the best geek event I ever attended.

![campjs](/images/posts/2014/11/campjs.png)

This is the official website (which is pretty cool by the way): [http://campjs.com/](http://campjs.com/).

Why it was the best in my opinion:

* It happened at an amazing place - close to the nature and changing the usual environment is renewable. I'd definitely recommend it!
* I had the chance to talk to a lot of other Javascript developers
* Awesome talks and workshops
* Good food and beers
* A live podcast was recorded in there

A friend of mine ([@erikEcoologic](https://twitter.com/erikEcoologic)) has written an [awesome blog post](http://netengine.com.au/blog/campjs_2014/) about the event, so check it out! ;)

A special thanks to [@brucestronge](https://twitter.com/brucestronge) and to [NetEngine](http://netengine.com.au/) for the tickets!

# Video & some pictures

:YouTube{id=xVFY5VzJavQ}

![IMG_0](/images/posts/2014/11/IMG_0.jpg)

![IMG_1067](/images/posts/2014/11/IMG_1067.jpg)

![IMG_1099](/images/posts/2014/11/IMG_1099.jpg)

![IMG_1199](/images/posts/2014/11/IMG_1199.jpg)

![IMG_1202](/images/posts/2014/11/IMG_1202.jpg)

![IMG_1206](/images/posts/2014/11/IMG_1206.jpg)

![IMG_1267](/images/posts/2014/11/IMG_1267.jpg)


CampJS 2014 - the best geek event I ever attended


A friend of mine (who used to use Windows) has bought a Mac recently and he asked me how to use the command line on macOS:

My answer was:

* 99% of commands are identical in Linux. This is good news as there are a lot of material about it available on the Internet;
* `Terminal.app` from macOS is cool, but it's not perfect. I (and 90% of developers I know) use `iTerm2` ([http://iterm2.com/](http://iterm2.com/)). It's light (3mb), free, open-source, has a better interface than the native one and it rocks! Best terminal I've ever used.
* This is the most useful topic in my answer: [an awesome cheat-sheet with command line commands](http://www.git-tower.com/blog/command-line-cheat-sheet-detail/) made by the Git-tower team;
* To finish: I've recorded a screencast (in Portuguese) explaining how to create scripts on macOS and Linux (similar to BAT files on Windows).:

:YouTube{id=W84Ok6XGnow}


How to use command line on macOS


![menubar](/images/posts/2014/08/menubar.png)

<table>
  <thead>
    <tr>
      <th>Application</th>
      <th>Description</th>
      <th>Type</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><a target='_blank' href='https://itunes.apple.com/au/app/caffeine/id411246225'>Caffeine</a></td>
      <td>Prevent your Mac from automatically going to sleep, dimming the screen or starting screen savers</td>
      <td>Free</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://itunes.apple.com/app/colorsnapper/id418176775'> ColorSnapper </a></td>
      <td>Color picker</td>
      <td>Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://itunes.apple.com/au/app/1password-password-manager/id443987910'>1Password</a></td>
      <td>Password manager</td>
      <td>Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://www.dropbox.com/'>Dropbox</a></td>
      <td>File hosting service</td>
      <td>Free / Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='http://www.code42.com/crashplan/'>CrashPlan</a></td>
      <td>Online data backup in real time</td>
      <td>Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='http://spectacleapp.com/'>Spectacle</a></td>
      <td>Window control</td>
      <td>Free / Open source</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://itunes.apple.com/au/app/evernote/id406056744'>Evernote</a></td>
      <td>Although Evernote is great, I don't use this icon at all.When I close it, it returns automatically &macr;\_(ツ)_/&macr;</td>
      <td>Free / Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://www.google.com/intl/en-AU/chrome/browser/'>Chrome notifications</a></td>
      <td>I never really use it, but I guess there's no way to remove it though</td>
      <td>Free</td>
    </tr>
    <tr>
      <td><a target='_blank' href='http://smilesoftware.com/TextExpander/index.html'>Text Expander</a></td>
      <td>Custom keyboard shortcuts into frequently-used texts</td>
      <td>Paid</td>
    </tr>
    <tr>
      <td><a target='_blank' href='http://www.apple.com/airplay/'>AirPlay</a></td>
      <td>Play content on your TV via Apple TV</td>
      <td>Free</td>
    </tr>
    <tr>
      <td><a target='_blank' href='https://www.apple.com/au/support/timemachine/'>Time Machine</a></td>
      <td>Built-in backup feature of macOS that works with an external HD or Time Capsule</td>
      <td>Free</td>
    </tr>
  </tbody>
</table>


What's on my macOS menu bar


I've been worked on a small open-source project.
I'm talking about [ruby_wiki](https://github.com/lucascaton/ruby_wiki), a simple wiki built with Ruby on Rails:

If you're interested, feel free to fork and contribute to the project.

![1](/images/posts/2014/04/1.png)

![2](/images/posts/2014/04/2.png)

![3](/images/posts/2014/04/3.png)

![4](/images/posts/2014/04/4.png)

![5](/images/posts/2014/04/5.png)

![6](/images/posts/2014/04/6.png)


An awesome Wiki built with Ruby and Rails! 


![old_rails_with_new_ruby-1024x641](/images/posts/2014/02/old_rails_with_new_ruby.png)

Do you have a legacy Rails application which is still running on Rails 2?

There are several reasons to migrate your application to new Rails versions, like to improve the security, to be able to use a better syntax, to take advantage of new features and also because most of current gems will only work on Rails 3 or higher. However, sometimes it's hard to do that, especially for big projects. And certainly today there're many project still running on Rails 2.

But there's one good thing you can (and should) do! I'm talking about to use the newest Ruby version. Yes, I'm serious. When I wrote this post, the current Ruby version was [2.1.1](https://www.ruby-lang.org/en/news/2014/02/24/ruby-2-1-1-is-released/) - and it's not so hard to get it working fine with Rails 2.

Obviously, would be better if you have a good test coverage.

That said, let's do it in a few steps:

## Replacements

* `Gemfile`

Rails 2 apps don't use Bundler by default, so if you don't have Bundler managing your gems yet, you should [check here](http://bundler.io/v1.3/rails23.html) how to do that.

```ruby
## There's no way to ensure that the next Ruby versions will work,
## but so far the current one works fine:
ruby '2.1.1'
## The same for rake:
rake '10.1.1'
## You might need the iconv gem:
gem 'iconv'
```

* `Rakefile`

```ruby
## Replace:
## require 'rake/rdoctask'
## with:
require 'rake/task'
```

* `config.ru`

```ruby
## Replace:
## require 'config/environment'
## with:
require File.dirname(__FILE__) + '/config/environment'
```

* `FasterCSV` ➙ `CSV`

Replace all `FasterCSV` constants with `CSV`.
Also, include `require 'csv'` to relevant files (or include the `require` to your `config/environment.rb` file).

## Inclusions

* `config/environment.rb`

```ruby
## Include this before the `Rails::Initializer.run` line:
if RUBY_VERSION >= '2.0.0'
  module Gem
    def self.source_index
      sources
    end
    def self.cache
      sources
    end
    SourceIndex = Specification
    class SourceList
      # If you want vendor gems, this is where to start writing code.
      def search(*args); []; end
      def each(&block); end
      include Enumerable
    end
  end
end
```

* `config/initializers/paperclip.rb`

```ruby
## The patches below are needed when using an old version of PaperClip + Ruby 2.x
## https://github.com/thoughtbot/paperclip/issues/262
## https://github.com/thoughtbot/paperclip/commit/1bcfc14388d0651c5fc70ab9ca3511144c698903

module Paperclip
  class Tempfile < ::Tempfile
    def make_tmpname(basename, n)
      extension = File.extname(basename)
      sprintf('%s,%d,%d%s', File.basename(basename, extension), $$, n.to_i, extension)
    end
  end
end

module IOStream
  def to_tempfile
    name = respond_to?(:original_filename) ? original_filename : (respond_to?(:path) ? path : 'stream')
    tempfile = Tempfile.new(['stream', File.extname(name)])
    tempfile.binmode
    self.stream_to(tempfile)
  end
end
```

## New files

* `config/initializers/ruby2.rb`

```ruby
## This is a very important monkey patch to make Rails 2.3.18 to work with Ruby 2+
## If you're thinking to remove it, really, don't, unless you know what you're doing.

if Rails::VERSION::MAJOR == 2 && RUBY_VERSION >= '2.0.0'
  module ActiveRecord
    module Associations
      class AssociationProxy
        def send(method, *args)
          if proxy_respond_to?(method, true)
            super
          else
            load_target
            @target.send(method, *args)
          end
        end
      end
    end
  end
end
```

* `config/initializers/rails_generators.rb`

It'll prevent Rails migration generator from stop working, otherwise you'll receive the following error message:

```ruby
undefined local variable or method `vars' for # Rails::Generator::Commands::Create
```

(Thanks to [Mr. S](https://disqus.com/by/disqus_J5madOMsmT/) and [jnwheeler44](https://disqus.com/by/jnwheeler44/) for helping me to fix this one)

```ruby
## This is a very important monkey patch to make Rails 2.3.18 to work with Ruby 2+
## If you're thinking to remove it, really, don't, unless you know what you're doing.

if Rails::VERSION::MAJOR == 2 && RUBY_VERSION >= '2.0.0'
  require 'rails_generator'
  require 'rails_generator/scripts/generate'

  Rails::Generator::Commands::Create.class_eval do
    def template(relative_source, relative_destination, template_options = {})
      file(relative_source, relative_destination, template_options) do |file|
        # Evaluate any assignments in a temporary, throwaway binding
        vars = template_options[:assigns] || {}
        b = template_options[:binding] || binding

        # this no longer works, eval throws "undefined local variable or method `vars'"
        # vars.each { |k, v| eval "#{k} = vars[:#{k}] || vars['#{k}']", b }
        vars.each { |k, v| b.local_variable_set(:"#{k}", v) }

        # Render the source file with the temporary binding
        ERB.new(file.read, nil, '-').result(b)
      end
    end
  end
end

```

## RSpec

* Make sure you're using the last compatible version with `Rails 2.3.18`:

```ruby
gem 'rspec', '1.3.2'
gem 'rspec-rails', '1.3.4'
```

* Remove the file `script/spec`

* Remove the following lines from the `lib/tasks/rspec.rake` file:

```ruby
gem 'test-unit', '1.2.3' if RUBY_VERSION.to_f >= 1.9

rspec_gem_dir = nil

Dir["#{Rails.root}/vendor/gems/*"].each do |subdir|
  rspec_gem_dir = subdir if subdir.gsub("#{Rails.root}/vendor/gems/","") =~ /^(\w+-)?rspec-(\d+)/ && File.exist?("#{subdir}/lib/spec/rake/spectask.rb")
end

rspec_plugin_dir = File.expand_path(File.dirname(__FILE__) + '/../../vendor/plugins/rspec')

if rspec_gem_dir && (test ?d, rspec_plugin_dir)
  raise "\n#{'*'*50}\nYou have rspec installed in both vendor/gems and vendor/plugins\nPlease pick one and dispose of the other.\n#{'*'*50}\n\n"
end

if rspec_gem_dir
  $LOAD_PATH.unshift("#{rspec_gem_dir}/lib")
elsif File.exist?(rspec_plugin_dir)
  $LOAD_PATH.unshift("#{rspec_plugin_dir}/lib")
end
```

## Ruby syntax

* Ruby syntax has changed a bit, especially from `1.8.x` to `1.9.x`.

```ruby
# Replace:
when 'foo': bar

# with:
when 'foo' then bar
```

---

The behaviour for `protected` methods in new Ruby versions is a little bit different.
See more in [this post](http://tenderlovemaking.com/2012/09/07/protected-methods-and-ruby-2-0.html).

```ruby
# In some cases, you might need to replace:
respond_to?(:foobar)

# with:
respond_to?(:foobar, true)
```

---

```ruby
# Replace:
order: [ :day, :month, :year ]

# with:
order:
  - :year
  - :month
  - :day
```

## Ruby changes

* The default encoding for `Ruby 2.0` (or higher) is `UTF-8`

Remove all the code similar to:

```ruby
# encoding: utf-8
```

Or:

```ruby
$KCODE = 'UTF-8'
```

## Update from July 27th, 2014

Check out the below comments from Gabriel Sobrinho, Kyle Ries and Greg - all very useful.

## Conclusion

Different project might have different issues, but I hope this little guide helps you to use new Ruby versions on your legacy Rails applications!


Have a Rails 2 app? You can run it on the newest Ruby!


![The Globe](/images/posts/2013/04/the-globe.gif)

I've just found this amazing Ruby script!

In order to run it yourself, just create a Ruby file called `a.rb` with the following content:

```ruby
v=0000;eval$s=%q~d=%!^Lcf<LK8,                  _@7gj*LJ=c5nM)Tp1g0%Xv.,S[<>YoP
4ZojjV)O>qIH1/n[|2yE[>:ieC       "%.#%  :::##"       97N-A&Kj_K_><wS5rtWk@*a+Y5
yH?b[F^e7C/56j|pmRe+:)B     "##%      ::##########"     O98(Zh)'Iof*nm.,$C5Nyt=
PPu01Avw^<IiQ=5$'D-y?    "##:         ###############"    g6`YT+qLw9k^ch|K'),tc
6ygIL8xI#LNz3v}T=4W    "#            #.   .####:#######"    lL27FZ0ij)7TQCI)P7u
}RT5-iJbbG5P-DHB<.   "              ##### # :############"   R,YvZ_rnv6ky-G+4U'
$*are@b4U351Q-ug5   "              #######################"   00x8RR%`Om7VDp4M5
PFixrPvl&<p[]1IJ   "              ############:####  %#####"   EGgDt8Lm#;bc4zS^
y]0`_PstfUxOC(q   "              .#############:##%   .##  ."   /,}.YOIFj(k&q_V
zcaAi?]^lCVYp!;  " %%            .################.     #.   "  ;s="v=%04o;ev"%
(;v=(v-($*+[45,  ":####:          :##############%       :   "  ])[n=0].to_i;)%
360)+"al$s=%q#{  "%######.              #########            "  ;;"%c"%126+$s<<
126}";d.gsub!(/  "##########.           #######%             "  |\s|".*"/,"");;
require"zlib"||  "###########           :######.             "  ;d=d.unpack"C*"
d.map{|c|n=(n||  ":#########:           .######: .           "  )*90+(c-2)%91};
e=["%x"%n].pack   " :#######%           :###### #:          "   &&"H*";e=Zlib::
Inflate.inflate(   "  ######%           .####% ::          "   &&e).unpack("b*"
)[0];22.times{|y|   "  ####%             %###             "   ;w=(Math.sqrt(1-(
(y*2.0-21)/22)**(;   " .###:             .#%             "   ;2))*23).floor;(w*
2-1).times{|x|u=(e+    " %##                           "    )[y*z=360,z]*2;u=u[
90*x/w+v+90,90/w];s[(    " #.                        "    ;y*80)+120-w+x]=(""<<
32<<".:%#")[4*u.count((     " .                   "     ;"0"))/u.size]}};;puts\
s+";_ The Qlobe#{" "*18+ (       "#  :#######"       ;"Copyright(C).Yusuke End\
oh, 2010")}";exit~;_ The Qlobe                  Copyright(C).Yusuke Endoh, 2010
```

Then, run the following line on your terminal:

```bash
while true; do clear; ruby a.rb | tee b.rb; sleep 0.2; mv -f b.rb a.rb; done
```

---

Via [d.hatena.ne.jp](http://d.hatena.ne.jp/ku-ma-me/20100905/p1)


Interesting script written in Ruby: "The Globe"


![robot](/images/posts/2013/02/robot.jpg)

I've found the following text [here](http://stackoverflow.com/questions/2684364/why-arent-programs-written-in-assembly-more-often/2685541#2685541)
and thought it'd be nice to share it with you. Hope you enjoy it as much as I did :)

> Hellо, I am a compiler.
>
> I just scanned thousands of lines of code while you were reading this sentence. I browsed through millions of possibilities of optimizing a single line of yours using hundreds of different optimization techniques based on a vast amount of academic research that you would spend years getting at. I won't feel any embarrassment, not even a slight ick, when I convert a three-line loop to thousands of instructions just to make it faster. I have no shame to go to great lengths of optimization or to do the dirtiest tricks. And if you don't want me to, maybe for a day or two, I'll behave and do it the way you like. I can transform the methods I'm using whenever you want, without even changing a single line of your code. I can even show you how your code would look in assembly, on different processor architectures and different operating systems and in different assembly conventions if you'd like. Yes, all in seconds. Because, you know, I can; and you know, you can't.
>
> P.S. Oh, by the way you weren't using half of the code you wrote. I did you a favor and threw it away.


Hellо, I am a compiler


You know when you open a file on **Vim** and after some changes you realise you'd need `root` permission to save the changes?

I used to think that there isn't other way other than:

* Copy the content of the file
* Close Vim
* Re-open it with `sudo`
* And finally paste it again

It might be a bit harder if you're using Vim on a remote SSH session.

Well, it will no longer be a problem. Today I learned a neat way to achive the same thing:

```viml
:w !sudo tee %
```

Thanks my friend [Diogo Lisboa](https://twitter.com/dlisboa) for the tip.


Getting root permission to change a file without leaving Vim


When I have a very simple Rails app, I avoid adding [Capistrano](https://github.com/capistrano/capistrano) or any other complex tool to deploy it.

Instead, I use a simple shell script, which access the server via SHH and do what needs to be done:

```bash
#! /bin/bash
# script/deploy.sh

TAG=deployed_at_$(date +"%F_%H-%M")

git tag -m '' -a $TAG
git push --tags

ssh user@your_domain.com << 'SSH'
  cd /var/rails_apps/my_app
  rm -rf public/assets
  git pull
  bundle install --without development test
  bundle exec rake db:migrate db:seed assets:clean assets:precompile
  touch tmp/restart.txt
  git describe > public/version
SSH
```

After that, a tag will be created in the git repository.
Now, you know exactly the date and time when it was deployed.

Also, you can find out which version (tag from git) is in production by accessing the URL http://your_domain.com/version.

![your_domain](/images/posts/2013/01/your_domain.png)

---

### Update from March 8, 2013:

I've created another script which accepts a `-q` (quick) flag:

```bash
#! /bin/bash
# script/deploy.sh

create_tag(){
  TAG=deployed_at_$(date +"%F_%H-%M")

  git tag -m '' -a $TAG
  git push --tags
}

quick_deploy(){
  echo 'Starting quick deploy...'

  create_tag

  ssh yourserver.com << 'SSH'
    cd /var/rails_apps/app_name
    git pull
    bundle install --without development test
    touch tmp/restart.txt
    git describe > public/version
SSH
}

complete_deploy(){
  echo 'Starting complete deploy...'

  create_tag

  ssh yourserver.com << 'SSH'
    cd /var/rails_apps/app_name
    rm -rf public/assets
    git pull
    bundle install --without development test
    bundle exec rake db:migrate db:seed assets:clean assets:precompile
    touch tmp/restart.txt
    git describe > public/version
SSH
}

if [ $1 ]; then
  if [ "$1" == '-q' ] || [ "$1" == '--quick' ]; then
    quick_deploy
  else
    echo -e 'Usage: script/deploy [OPTIONS]\n\nOptions:\n-q --quick: Deploy without running migrations nor re-precompiling assets.\n'
  fi
else
  complete_deploy
fi
```


A simple way to deploy your Rails applications


There are several ways to split windows in **Vim**.

This one is now my favorite:

![cell-division](/images/posts/2013/01/cell-division.png)


An easy way to split windows in Vim


I've finally changed my blog theme.

This one is cleaner, I hope y'all enjoy it :)

![Screen-Shot-2012-10-02-at-1.57.23-PM](/images/posts/2012/10/Screen-Shot-2012-10-02-at-1.57.23-PM.png)


New blog layout


When I started using ElasticSearch in my Rails applications, I had a problem to create separate indexes for the automated tests.

The problem was: there is no way to create more than one database in ElasticSearch.
You can create different indexes, but no different databases.

Even creating indexes with different names won't solve the problem:
it's necessary to configure our Rails models in order to work with a different index name when the tests are running.

I'm using both [tire](https://github.com/karmi/tire) and [RSpec](http://relishapp.com/rspec) gems.
In this post, I'll explain how to separate indexes for `development` and `test` environments.

First of all, I've included the code below in file `config/initializers/tire.rb`:

```ruby
if Rails.env.test?
  prefix = "#{Rails.application.class.parent_name.downcase}_#{Rails.env.to_s.downcase}_"
  Tire::Model::Search.index_prefix(prefix)
end
```

And I've manually set the index name in the model (assuming there is a `Movie` model):

```ruby
index_name "#{Tire::Model::Search.index_prefix}movies"
```

Done! With that, the index name will be `movies` in `development` environment and  `appname_test_movies` in `test` environment.

## Deleting test indexes

In order to delete the test indexes after the suite has finished running, just add the following code to file `spec/integration_helper.rb` (or similar):

```ruby
RSpec.configure do |config|
  config.after(:all, type: :request) { delete_movie_index }
end
```

And create a custom macro, which will delete the indexes:

```ruby
def delete_movie_index
  Movie.index.delete
end
```

## Demo app

I created a small application to demonstrate the technique explained in this post:

[https://github.com/lucascaton/elasticsearch_app_example](https://github.com/lucascaton/elasticsearch_app_example)

I hope it helps!


How to test ElasticSearch in a Rails application


Server:

```bash
tmux -2 -S /tmp/pair new-session -s PairProgramming
chmod 777 /tmp/pair
```

Client:

```bash
tmux -2 -S /tmp/pair attach-session -t PairProgramming
```


Pair programming with tmux


![Poltergeist](/images/posts/2012/06/Poltergeist.jpg)

My friend [@pellegrino](https://twitter.com/pellegrino) gave me an awesome tip: to replace ["Selenium"](http://seleniumhq.org/) with ["Poltergeist"](https://github.com/jonleighton/poltergeist). For those who don't know, **Poltergeist** is a [PhantomJS](http://phantomjs.org/) driver for Capybara. I've done it in some projects and it works very well!

In order to do it, include the gem to your `Gemfile`:

```ruby
gem 'poltergeist'
```

Update your Capybara configuration:

```ruby
Capybara.configure do |config|
  # config.javascript_driver = :selenium
  config.javascript_driver = :poltergeist
end
```

Run the specs!

If you are testing some `confirm()` JavaScript method and you have a code similar to `page.driver.browser.switch_to.alert.accept`, you'll get this error:

```ruby
undefined method `switch_to'
```

While I was trying to fix it, I [found out](https://github.com/jonleighton/poltergeist/issues/80#issuecomment-6237980) that Poltergeist always returns `true` from `window.confirm`.
There's no way (at the moment) to make it return `false`, but at least it won't prevent your test from passing: all I had to do was to remove that particular line and it solved the issue.

This is the results from the first project I've migrated:

* Before: `Finished in 1 minute 35.45 seconds`
* After: `Finished in 41.03 seconds`

Hope you find it helpful as I did!


Replacing "Selenium" with "Poltergeist"


I've finally created a repository with my dotfiles.
**Dotfiles** are configurations files, usually with their names beginning with a dot (hidden files) and located on your home folder (`~/`).

You can check it out here:
[github.com/lucascaton/dotfiles](https://github.com/lucascaton/dotfiles)


My dotfiles


I've created a regular expression in order to match Youtube URLs.
As Youtube URLs starts with `https://youtube.com` and `https://youtu.be`, the following regex solves the problem:

```ruby
/^(?:https?:\/\/)?(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=)?([\w-]{10,})/
```

This regex will match:

* `http://youtube.com/watch?v=1234567890`
* `https://youtube.com/watch?v=1234567890`
* `http://www.youtube.com/watch?v=1234567890`
* `http://www.youtube.com/watch?v=12345-67890`
* `https://www.youtube.com/watch?v=1234567890`
* `http://youtu.be/1234567890`
* `https://youtu.be/1234567890`
* `http://www.youtu.be/1234567890`
* `https://www.youtu.be/1234567890`
* `http://www.youtube.com/watch?v=1234567890&feature=context&context=G2de15aaFAAAAAAAAAAA`
* `www.youtube.com/watch?v=1234567890`
* `youtube.com/watch?v=1234567890`
* `youtu.be/1234567890`

But it won't match:

* `youtube.com`
* `youtube.com/`
* `youtube.com/watch`
* `youtube.com/watch/`
* `youtu.be`
* `youtu.be/`


Regex to match Youtube URLs (using Ruby)


A quick tip for those who use Vim: if you need to remove several lines that match your regular expression, you can achive that by running

```viml
:g /pattern/d
```

Let's say you want to remove the commented lines from the following file:

```ruby
# This is a comment
def foo
end

# This is another comment
def bar
end
```

Run `:g /^#.*/d` and your code will become:

```ruby
def foo
end

def bar
end
```

Simple, hey? :)


How to remove several lines in the Vim editor using Regex


I've created a gem called [**code2pdf**](https://github.com/lucascaton/code2pdf),
which is a simple and open-source tool to convert your codebase to a PDF file.
It might be especially useful in case you need to register you software.

In order to install it, just run:

```bash
gem install code2pdf
```

Then, open a terminal and run:

```bash
code2pdf [project path] [blacklist file]
```

The blacklist file is optional and must be a YML file, similar to the following:

```yaml
:directories:
  - .git
  - log
  - public/system
  - spec
  - tmp
  - vendor

:files:
  - .DS_Store
  - .gitignore
  - database.yml
  - favicon.ico
```

You can find more information (including a [PDF output example](https://github.com/lucascaton/code2pdf/raw/master/examples/example.pdf) in the repository:

[github.com/lucascaton/code2pdf](https://github.com/lucascaton/code2pdf)

Please, let me know in the comments if you like it :)


My new gem "code2pdf"


**Vimfiles** are configuration files for the **Vim** editor.
It includes the **editor preferences**, **theme** (color scheme), **fonts**, **plugins**, **custom functions**, and more.

I've finally created my own from scrach, which you can find here:

[github.com/lucascaton/vimfiles](https://github.com/lucascaton/vimfiles)


My Vimfiles


**ActionMailer** module has been reconstructed in **Rails 3** and mailers have their own subdirectory (**app/mailers**) since then.

This blog post will demostrate how to test them in **Rails** using **RSpec**. Assuming that we have a mailer like the following:

```ruby
class Notifier < ActionMailer::Base
  default from: 'noreply@company.com'

  def instructions(user)
    @name = user.name
    @confirmation_url = confirmation_url(user)

    mail to: user.email, subject: 'Instructions'
  end
end
```

To send an email through a method from `User` model:

```ruby
class User
  def send_instructions
    Notifier.instructions(self).deliver_now
  end
end
```

Before testing it, make sure the **config/environments/test.rb** file has the following configuration:

```ruby
Rails.application.configure do
  config.action_mailer.delivery_method = :test
end
```

It ensures that emails won't be sent, but instead be stored on **ActionMailer::Base.deliveries** array.

So, in order to create the tests:

```ruby
# spec/models/user_spec.rb

RSpec.describe User, type: :model do
  subject { create :user }

  it 'sends an email' do
    expect { subject.send_instructions }
      .to change { ActionMailer::Base.deliveries.count }.by(1)
  end
end
```

```ruby
# spec/mailers/notifier_spec.rb

RSpec.describe Notifier, type: :mailer do
  describe 'instructions' do
    let(:user) { mock_model User, name: 'Lucas', email: 'lucas@email.com' }
    let(:mail) { described_class.instructions(user).deliver_now }

    it 'renders the subject' do
      expect(mail.subject).to eq('Instructions')
    end

    it 'renders the receiver email' do
      expect(mail.to).to eq([user.email])
    end

    it 'renders the sender email' do
      expect(mail.from).to eq(['noreply@company.com'])
    end

    it 'assigns @name' do
      expect(mail.body.encoded).to match(user.name)
    end

    it 'assigns @confirmation_url' do
      expect(mail.body.encoded)
        .to match("http://aplication_url/#{user.id}/confirmation")
    end
  end
end
```

Rails allows you to create very comprehensive tests for mailers.

Happy coding!


How to test Rails mailers using RSpec


[Next.js](https://nextjs.org/) é tão sensacional que meio que virou meu _framework_ padrão para
novos projetos. Além disso, eu também migrei vários outros projetos, include esse site/blog que você
está lendo nesse exato momento, conforme
[documentei aqui](/2021/07/18/migrei-meu-site-para-nextjs).

Nesse tutorial, vamos desenvolver um blog com [**Next.js**](https://nextjs.org/),
[**React**](https://reactjs.org/) e [**Tailwind CSS**](https://tailwindcss.com/).
Os posts serão escritos em **Markdown** e convertidos para **HTML** no final.

E aí, bora codar? 😉

## Criando e configurando o projeto

Antes de continuar, você precisa ter o
[Node.js e o Yarn instalados](/tags/nodejs).

Abra o terminal e rode o seguinte comando para criar o projeto:

```bash
yarn create next-app -e with-tailwindcss blog
```

Agora, acesse o diretório do projeto e adicione as bibliotecas que vamos precisar:

```bash
cd blog
yarn add react-markdown gray-matter @tailwindcss/typography
```

Essas bibliotecas servem para:

- **React Markdown**: converter Markdown para HTML.
- **Gray Matter**: interpretar _front matters_ (veremos mais sobre isso a seguir).
- **Plugin "typography" do Tailwind CSS**: estilização básica decente para artigos/posts.

## Escrevendo o post inicial

Crie um diretório `posts` na raiz do projeto e dentro, crie um arquivo chamado `hello-world.md` com
o conteúdo que você desejar:

```markdown
---
title: "Hello World"
date: "07/12/2021"
---

Olá mundo!

**Texto em negrito** e _texto em itálico_.

- Lista
- com
- vários
- items
```

## O que é "Front Matter"?

O bloco no começo de arquivos markdowns, entre os traços (`---`) é o que chamamos de
_"Front Matter"_ e é onde geralmente definimos metadados do post. Esse bloco precisa necessariamente
estar no começo do arquivo e precisa usar uma sintaxe YAML válida.

```yml
title: "Hello World"
date: "07/12/2021"
```

## Preparando a página inicial

Vamos mover o componente `<Head>` do arquivo `pages/index.js` para `pages/_app.js` e renomear o
conteúdo da tag `<title>`:

### `pages/_app.js`

```jsx
import Head from "next/head";
import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Meu blog</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Component {...pageProps} />
    </>
  );
}

export default MyApp
```

Depois vamos deixar apenas um título `Posts` na página inicial:

### `pages/index.js`

```jsx
const Blog = () => {
  return <h1>Posts</h1>;
};

export default Blog;
```

## Conferindo se está tudo bem até aqui

Vamos rodar o servidor para ver se está tudo certo até agora. No terminal, rode:

```bash
yarn dev
```

Abra o navegador e acesse [localhost:3000](http://localhost:3000/). Você deve ver algo assim:

:Figure{src="/images/posts/2021/12/blog1.png" alt="Versão inicial do blog" width="1200" height="814"}

## Criando e estilizando o cabeçalho

Vamos adicionar as tags `<header>` e `<main>` ao arquivo `pages/_app.js` com algumas classes do
Tailwind CSS:

```diff
 import Head from "next/head";
+import Link from "next/link";
+
 import "tailwindcss/tailwind.css";

 function MyApp({ Component, pageProps }) {
@@ -9,7 +11,17 @@ function MyApp({ Component, pageProps }) {
         <link rel="icon" href="/favicon.ico" />
       </Head>

-      <Component {...pageProps} />
+      <header className="py-10 bg-gradient-to-r from-green-400 to-blue-500 text-center">
+        <Link href="/">
+          <a>
+            <h2 className="text-5xl font-bold text-white">Meu blog</h2>
+          </a>
+        </Link>
+      </header>
+
+      <main className="my-6 mx-auto p-6 bg-white sm:shadow-lg rounded prose lg:prose-xl">
+        <Component {...pageProps} />
+      </main>
     </>
   );
 }
```

## Personalizando a tipografia do Tailwind CSS

Vamos extender alguns comportamentos padrões de tipografia do Tailwind CSS e carregar o plugin
oficial `@tailwindcss/typography`.

Para isso, abra o arquivo `tailwind.config.js` e adicione isso:

```diff
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            a: {
+              color: "#3182ce",
+              "&:hover": {
+                color: "#2c5282",
+              },
+            },
+          },
+        },
+      },
+    },
   },
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };
 ```

 ## Adicionando classes CSS na tag `<body>`

 Para fazer isso, precisamos criar um arquivo `pages/_document.js` com o seguinte conteúdo:

 ```jsx
 import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body className="bg-white sm:bg-gray-50">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
```

Repare que eu adicionei as classes `bg-white` e `sm:bg-gray-50` na tag `<body>`.

:Notice[Veja mais detalhes sobre `pages/_document.js` na [documentação oficial](https://nextjs.org/docs/advanced-features/custom-document).]{type=tip}

## Lendo o conteúdo dos posts

Crie um arquivo `lib/posts.js` que será responsável por ler os arquivos Markdown e retornar uma
lista de posts:

```js
import { promises as fs } from "fs";
import path from "path";
import matter from "gray-matter";

const getPosts = async () => {
  const postsDirectory = path.join(process.cwd(), "posts");
  const filenames = await fs.readdir(postsDirectory);

  return await Promise.all(
    filenames.map(async (filename) => {
      const filePath = path.join(postsDirectory, filename);
      const fileContents = await fs.readFile(filePath, "utf8");
      const document = matter(fileContents);

      return {
        slug: filename.replace(/\.md$/, ""),
        title: document.data.title,
        date: document.data.date,
        markdown: document.content,
      };
    })
  );
};

export default getPosts;
```

Cada post é representado por um objeto com as seguintes chaves:

- **slug**: Representação do post que pode ser usada na URL. Para isso, vamos usar o nome do arquivo
  sem sua extensão (`.md`).
- **title**: Metadado definido no _front matter_
- **date**: Metadado definido no _front matter_
- **markdown**: Conteúdo principal do arquivo Markdown

Repare que estamos usando a biblioteca `gray-matter` para ler os metadados definidos no
_front matter_ de cada post.

## Adicionando os posts à página inicial

Vamos importar a função `getPosts` do arquivo que acabamos de criar na página inicial, ou seja, no
arquivo `pages/index.js` e fazer um _loop_ para exibir links e títulos de cada um dos posts:

```jsx
import Link from "next/link";

import getPosts from "../lib/posts";

const Blog = ({ posts }) => {
  return (
    <>
      <h1>Posts</h1>
      <ul>
        {posts.map(({ slug, title }) => (
          <li key={slug}>
            <Link href={`/${slug}`}>
              <a>{title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};

export async function getStaticProps() {
  return {
    props: {
      posts: await getPosts(),
    },
  };
}

export default Blog;
```

Vamos ver no navegador como nosso blog está ficando:

:Figure{src="/images/posts/2021/12/blog2.png" alt="Lista de posts" width="1300" height="875"}

Massa!

## Criando as páginas dos posts com rotas dinâmicas

Ao tentar clicar no link do post _Hello World_ que vemos da página acima, um erro 404 (página não
encontrada) será mostrada. Isso é esperado, afinal, ainda não criamos essa página 🙃

Bora criá-la, então. Como queremos um mesmo _template_ para os posts, mas com **rotas dinâmicas**
(baseadas no nome de seus arquivos), vamos criar e nomear o arquivo dos posts com colchetes:
`pages/[slug].js`.

Seu conteúdo pode ser algo mais ou menos assim:

```jsx
import getPosts from "../lib/posts";

const Post = ({ title, date, markdown }) => (
  <article>
    <h1>{title}</h1>
    <time className="font-extralight tracking-wider text-gray-500">{date}</time>
    {markdown}
  </article>
);

export const getStaticPaths = async () => {
  const posts = await getPosts();

  return {
    paths: posts.map((post) => `/${post.slug}`),
    fallback: false,
  };
};

export const getStaticProps = async ({ params: { slug } }) => {
  const posts = await getPosts();
  const post = posts.find((post) => post.slug === slug);

  return { props: post };
};

export default Post;
```

Agora vamos verificar como ficou no navegador...

:Figure{src="/images/posts/2021/12/blog3.png" alt="Página do post" width="1300" height="886"}

Ok, está ficando legal, mas ainda falta converter o Markdown.

## Convertendo o Markdown para HTML

Vamos usar a bilioteca `ReactMarkdown` para fazer isso. Atualize o arquivo `pages/[slug].js` para:

```diff
+import ReactMarkdown from "react-markdown";
+
 import getPosts from "../lib/posts";

 const Post = ({ title, date, markdown }) => (
   <article>
     <h1>{title}</h1>
     <time className="font-extralight tracking-wider text-gray-500">{date}</time>
-    {markdown}
+    <ReactMarkdown>{markdown}</ReactMarkdown>
   </article>
 );
```

Vamos testar novamente:

:Figure{src="/images/posts/2021/12/blog4.png" alt="Página do post com Markdown convertido" width="1300" height="1176"}

Ah, bem melhor!

## Adicionando um favicon

Para finalizar, substitua o _favicon_ da pasta `public/`.

Se você não tiver um, pode usar esse:

:Figure{src="/images/posts/2021/12/favicon.ico" width="48" height="48"}

Fique a vontade também para remover o arquivo `public/vercel.svg`, que atualmente não tem utilidade nenhuma.

## Resultado final 🎉

:Figure{src="/images/posts/2021/12/blog-com-nextjs.jpg" alt="Blog - versão final" width="1920" height="1080"}

:Notice[Se quiser aprender tudo sobre React e Next.js, dê uma olhada no meu curso de React: [www.reactdiretoaoponto.com.br](https://www.reactdiretoaoponto.com.br/) 😉]{type=tip}

---

## Vídeo que originou esse post

:YouTube{id=PiWvZX9eLw8}

## Repositório no GitHub

O código do blog desenvolvido nesse tutorial está
[publicado integralmente no GitHub](https://github.com/lucascaton/blog-em-1-minuto), caso você
precise por qualquer motivo! 😉

## O que achou?

Me conte nos comentários abaixo!


Tutorial: Criando um blog com Next.js


![RubyConf Brasil 2021](/images/posts/2021/07/ruby-conf-brasil-2021.jpg)

Nos dias 29 e 30 de julho acontecerá a
[RubyConf Brasil 2021 - Online](https://online.rubyconf.com.br/?utm_source=lucascaton.com.br).
Serão dois dias para você imergir no mundo da tecnologia que vai muito além da linguagem de
programação Ruby.

Estamos empenhados junto com a nossa parceira
[NewRiide.com](https://newriide.com/?utm_source=lucascaton.com.br) em trazer as melhores
oportunidades para você ingressar e evoluir no mundo da tecnologia e desenvolvimento de software.

A **NewRiide** apoia o evento e negociou com a Locaweb um **desconto de 25%** na aquisição dos
ingressos para RubyConf, basta acessar o link abaixo para adquirir o seu ingresso já com desconto:

### 👉 [INGRESSO COM 25% DESCONTO](/rubyconf)

Aproveite mais esta oportunidade para ingressar no mundo do desenvolvimento de software e ter
contato com desenvolvedores de diversas empresas renomadas que estão fazendo a diferença no mercado
de tecnologia!


RubyConf Brasil 2021 (online) com desconto de 25%


Criei esse [site/blog em 2009 usando Wordpress](/2009/07/14/primeiro-post). Depois migrei para
[Enki mas acabei voltando para o Wordpress](/2011/05/19/porque-voltei-a-usar-o-wordpress).
Parece que foi ontem que [refiz tudo do zero](/2017/10/04/refiz-meu-blog-do-zero), mas na
realidade foi em 2017, quando comecei a usar Jekyll para gerar um site estático pela primeira vez.

## Por que mudar novamente?

**Jekyll** me serviu bem, mas desde o ano passado eu notei que precisava de algo ainda mais
flexível e com melhor performance já que gerar o site (aka. processo de _build_) e também
renderizar páginas em ambiente de desenvolvimento estava deixando a desejar. Aproveitei
que estava estudando **Next.js** e decidi usá-lo no site novo para ganhar experiência na prática. A
migração foi bastante lenta, pois eu não tinha pressa e queria experimentar combinações de
bibliotecas e soluções diferentes, que vou detalhar mais na sessão "Stack" abaixo.

## Processo

Em vez de reusar o mesmo repositório, criei um novinho em folha. Eis o primeiro commit, que
aconteceu há mais de um ano:

```
commit 7fdcbe4
Author: Lucas Caton
Date:   Thu Jun 11 17:21:21 2020 +1000

    Initial commit from Create Next App
```

Depois de alguns meses, o site estava longe de estar finalizado, porém estava bom o suficiente.
Como eu sempre sigo a idéia de que
[feito é melhor que perfeito](https://www.youtube.com/watch?v=LgejjWsu8MU), decidi colocar no ar,
sem muito alarde. Só agora porém, meses depois, parei para escrever um post e contar essa história.

## O quanto "pronto" eu esperei para colocar no ar?

Só nesse repositório novo, já foram 441 commits:

```
❯ git shortlog -sn
   441  Lucas Caton
```

Mas ainda tem muitas coisas para arrumar. Você provavelmente vai encontrar algumas partes meio
feias, inacabadas ou até mesmo inexistes no site novo (não tem mais uma busca, por exemplo). Aos
poucos, eu farei melhorias incrementais para re-adicionar o que falta e/ou corrigir o que precisa.

## Valeu a pena?

Tudo saiu melhor que o planejado e talvez eu escreva posts separados no futuro para contar os vários
motivos. De forma resumida, a flexibilidade e performance que o Next.js e o React têm, mudaram o
jogo para mim. Falando nisso, deixa eu contar quais bibliotecas e ferramentas exatamente que o site
novo está usando:

## Stack

- **React.js** (https://reactjs.org/) & **Next.js** (https://nextjs.org/).
  - Aproveite para conhecer [meu curso](https://www.reactdiretoaoponto.com.br/)! 😉
- **Posts em Markdown** - um dos pré-requisitos que eu mesmo defini é que eu não queria mudar
  absolutamente nada nos arquivos dos posts. Até mesmo o
  [_front matter_](https://jekyllrb.com/docs/front-matter/) eu mantive o mesmo que usava com Jekyll.
  Só que agora são as bibliotecas [`react-markdown`](https://github.com/remarkjs/react-markdown) e
  [`gray-matter`](https://github.com/jonschlinkert/gray-matter) que convertem tudo.
- **TailwindCSS** (https://tailwindcss.com/) - eu tenho usado esse framework CSS na maioria dos meus
  projetos e continuo achando ele sensacional. Se você não conhece, vale a pena dar uma olhada no
  [canal deles no YouTube](https://www.youtube.com/c/TailwindLabs). Veja mais detalhes na sessão
  "Layout próprio" abaixo.
- **Styled components** - https://styled-components.com/.
- **TypeScript** (https://www.typescriptlang.org/) &
  TypeScript Coverage Report (https://github.com/alexcanessa/typescript-coverage-report).
- **React Highlight** (https://react-highlight.neostack.com/) - suporte para _syntax highlighting_
  em aplicações React.
- **Disqus** (https://disqus.com/) - já usava antes e continuo usando esse serviço para permitir
  comentários nos posts.
- **ES Lint** (https://eslint.org/) & **Prettier** (https://prettier.io/) - para manter os estilos
  e qualidade do código.
- **Jest** - https://jestjs.io/.

## Mudei do GitHub Pages para a Vercel

Migrei para a [Vercel](https://vercel.com/) por 3 motivos:

- Melhor integração com o Next.js
- Deploys mais simples
- Plano gratuito bastante generoso

## O que eu NÃO estou usando

- Biblioteca com componentes prontos, exemplo: Bootstrap, Bulma, etc.
- Pré-processador CSS, exemplo: SASS, SCSS, Slim, nem nenhum outro. Apenas Tailwind e CSS puro.

## Layout próprio

Eu criei a _UI_ de todas as páginas, menus, componentes, etc. Em todas as versões anteriores, eu
usava _templates_ prontos, mas resolvi eu mesmo criar um dessa vez. Ainda estou
atualizando/melhorando várias partes que precisam de um pouco mais de amor :)

![Screenshot do site novo criado em 2021](/images/posts/2021/07/site-2021.jpg)

## Feedback

Para concluir, eu adoraria saber o que você achou do site novo. Me conte nos comentários abaixo! 😉


Migrei meu site para Next.js


Webinário apresentado em **30/01/2019**.

:YouTube{id=DSfdEFZ6Fwo}

---

:Notice[Aproveite para se inscrever para se inscrever no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}


Webinário: Por que aprender a programar?


Webinário apresentado em **06/07/2018**.

:YouTube{id=TqIlK4pyX20}

---

:Notice[Aproveite para se inscrever para se inscrever no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}


Webinário: 10 lições para ser um excelente desenvolvedor


Webinário apresentado em **20/12/2017**.

:YouTube{id=xnydQGlpO9M}

---

:Notice[Aproveite para se inscrever para se inscrever no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}


Webinário: Como trabalhar como programador no exterior


Seguindo com a
[2ª temporada do meu podcast](/2020/02/19/segunda-temporada-do-podcast), dessa
vez o entrevistado foi o **Cássio Marques**, que é programador, amante de música, mora na Inglaterra e
foi o meu mentor técnico, a pessoa que me apresentou boas práticas de programação e quem me mostrou
o "caminho das pedras" de uma carreira de sucesso na área.

Assista a entrevista completa no YouTube:

:YouTube{id=t7wA6Jx7ScE}

Você também pode escutar a entrevista através do seu player de podcast
preferido; é só buscar por `Lucas Caton` no app de podcast ou conferir o link direto
[nessa página](/podcast/).


Podcast: entrevistando Cássio Marques


Seguindo com a
[2ª temporada do meu podcast](/2020/02/19/segunda-temporada-do-podcast), dessa
vez o entrevistado foi **Tiago Menegaz**, que é programador Ruby, curte/manja de Docker e Kubernetes,
morou e estudou na Austrália e atualmente trabalha para uma startup americana!

Assista a entrevista completa no YouTube:

:YouTube{id=I5MMlaEpRQU}

Você também pode escutar a entrevista através do seu player de podcast
preferido; é só buscar por `Lucas Caton` no app de podcast ou conferir o link direto
[nessa página](/podcast/).


Podcast: entrevistando Tiago Menegaz


:YouTube{id=cXNyQDDDXbg}

---

Abaixo você encontra os comandos executados no vídeo:

Site do Homebrew: [https://brew.sh/](https://brew.sh/)

```bash
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Site do ASDF: [https://asdf-vm.com/](https://asdf-vm.com/)

```bash
brew install asdf
echo -e "\n. $(brew --prefix asdf)/asdf.sh" >> ~/.zshrc
source ~/.zshrc
asdf --version
```

Site do Ruby: [https://www.ruby-lang.org/pt/](https://www.ruby-lang.org/pt/)

```bash
asdf plugin-add ruby
asdf install ruby 2.7.2
asdf global ruby 2.7.2
ruby -v
```

Site do NodeJS: [https://nodejs.org/pt-br/](https://nodejs.org/pt-br/)

```bash
asdf plugin-add nodejs
brew install gpg
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
asdf install nodejs 12.19.0
asdf global nodejs 12.19.0
node -v
```

Site do Rails: [https://rubyonrails.org/](https://rubyonrails.org/)

```bash
gem install rails
rails -v
```

Site do Yarn: [https://yarnpkg.com/](https://yarnpkg.com/)

```bash
npm install --global yarn
yarn -v
```

### Criando um projeto Rails para garantir que tudo está funcionando:

```bash
rails new todo
cd todo
rails s
```

Abra o navegador e acesse a página [localhost:3000](http://localhost:3000).


Instalação do Ruby & do NodeJS no macOS, usando ASDF


![Fabio Akita](/images/posts/2020/02/fabio-akita.jpg)

Seguindo com a
[2ª temporada do meu podcast](/2020/02/19/segunda-temporada-do-podcast), dessa
vez o entrevistado foi **Fabio Akita**, um amigo de longa data e um profissional que adimiro muito.

Assista a entrevista completa no YouTube:

:YouTube{id=ZhrN6BDI9QQ}

Você também pode escutar a entrevista através do seu player de podcast
preferido; é só buscar por `Lucas Caton` no app de podcast ou conferir o link direto
[nessa página](/podcast/).


Podcast: entrevistando Fabio Akita


Fala meus caros! 👋

No começo desse ano (também conhecido como "mês passado"), eu estreei a 2ª temporada do
[meu podcast](/podcast/), no qual estou entrevistando profissionais que
trabalham com tecnologia (a maioria programadores) que eu admiro.

Toda quinta-feira tem um episódio novo, com insights de quem está no "campo de batalha", trabalhando
na área.

Os 5 primeiros episódios já estão no ar e você pode escutar através do seu player de podcast
preferido; é só buscar por `Lucas Caton` no app de podcast ou conferir o link direto
[nessa página](/podcast/).

Se preferir, você também pode assistir pelo YouTube:

### Episódio 01 - WILL ROSA

> CURIOSO, AUTODIDATA, COMPARTILHADOR DE CONTEÚDO E LEITOR DE MANUAIS

:YouTube{id=zUgCtc71hEA}

### Episódio 02 - THIAGO ALESSIO

> PROGRAMADOR (INCLUSIVE DE ATARI), SYSADMIN E QUASE ALEMÃO

:YouTube{id=7fiL8g0GKpU}

### Episódio 03 - VAL SILVA

> ANALISTA DE SISTEMAS, GUITARRISTA, DOUTORANDO EM COMPUTAÇÃO E HUMILDÃO

:YouTube{id=0p_4PdDMmDA}

### Episódio 04 - FERNANDO SOUSA

> EMPREENDEDOR, RANGER E DESENVOLVEDOR DESDE OS 10 ANOS

:YouTube{id=8BhTe_zAoE4}

### Episódio 05 - MAURICIO DE AMORIM

> ESTAGIÁRIO AOS 36, CORREDOR, EMPATIA MAN, O CARA DOS BASTIDORES

:YouTube{id=nGouhyeNMTo}

E é só o começo, toda semana tem episódio novo! 😉


Segunda temporada do Podcast!


:YouTube{id=xGINzo4iQdE}

---

Abaixo você encontra os comandos executados no vídeo:

```bash
sudo apt update
sudo apt install build-essential git automake autoconf libreadline-dev libncurses-dev libssl-dev libyaml-dev libxslt-dev libffi-dev libtool unixodbc-dev unzip curl zlib1g-dev sqlite3 libsqlite3-dev
```

Site do ASDF: [https://asdf-vm.com/](https://asdf-vm.com/)

```bash
git clone https://github.com/asdf-vm/asdf.git ~/.asdf
cd ~/.asdf
git checkout "$(git describe --abbrev=0 --tags)"

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bashrc
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
source ~/.bashrc
asdf --version
```

Site do Ruby: [https://www.ruby-lang.org/pt/](https://www.ruby-lang.org/pt/)

```bash
asdf plugin-add ruby
asdf install ruby 2.7.2
asdf global ruby 2.7.2
ruby -v
```

Site do NodeJS: [https://nodejs.org/pt-br/](https://nodejs.org/pt-br/)

```bash
asdf plugin-add nodejs
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
asdf install nodejs 12.19.0
asdf global nodejs 12.19.0
node -v
```

Site do Rails: [https://rubyonrails.org/](https://rubyonrails.org/)

```bash
gem install rails
rails -v
```

Site do Yarn: [https://yarnpkg.com/](https://yarnpkg.com/)

```bash
npm install --global yarn
yarn -v
```

### Criando um projeto Rails para garantir que tudo está funcionando:

```bash
rails new todo
cd todo
rails s
```

Abra o navegador e acesse a página [localhost:3000](http://localhost:3000).


Instalação do Ruby & do NodeJS no Ubuntu Linux, usando ASDF


Nesse vídeo, eu vou destrinchar a teoria por traz dos frameworks/componentes
do Rails na prática, com exemplos e tudo mais! 😉

Entenda o que é e como funciona o `Active Record`, `Action View`,
`Action Controller`, `Active Support`, `Action Mailer`, `Action Mailbox`,
`Action Text`, `Active Job`, `Active Storage`, `Action Cable`, etc.

Com esses conceitos fica mais fácil compreender como as coisas se encaixam para
explorar novas soluções para suas aplicações.

:YouTube{id=AUTpTFp11Io}

Se curtir, não deixe de
[se inscrever no canal](https://www.youtube.com/lucascaton?sub_confirmation=1)! 😉


Frameworks do Rails


:YouTube{id=2zw2VkJFaN4}

Abaixo você encontra os comandos executados no vídeo:

### No PowerShell:

```powershell
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
```

### No terminal do Ubuntu (WSL):

```bash
sudo apt update
sudo apt install build-essential git automake autoconf libreadline-dev libncurses-dev libssl-dev libyaml-dev libxslt-dev libffi-dev libtool unixodbc-dev unzip curl zlib1g-dev sqlite3 libsqlite3-dev
```

```bash
git clone https://github.com/asdf-vm/asdf.git ~/.asdf
cd ~/.asdf
git checkout "$(git describe --abbrev=0 --tags)"

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bashrc
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc
source ~/.bashrc
asdf --version
```

```bash
asdf plugin-add ruby
asdf install ruby 2.7.2
asdf global ruby 2.7.2
ruby -v
```

```bash
asdf plugin-add nodejs
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
asdf install nodejs 12.19.0
asdf global nodejs 12.19.0
node -v
```

```bash
gem install rails
rails -v
```

```bash
npm install --global yarn
yarn -v
```

### Criando um projeto Rails para garantir que tudo está funcionando:

```bash
rails new todo
cd todo
rails s
```

Abra o navegador e acesse a página [localhost:3000](http://localhost:3000).


Instalação do Ruby & do NodeJS no Windows, usando WSL e ASDF


Esta é uma das perguntas que mais recebo. Para criar um contexto e responder da
melhor forma, gravei e publiquei um vídeo no meu
[canal do YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1):

:YouTube{id=4UGCkUV2zCc}

Se curtir, não deixe de
[se inscrever no canal](https://www.youtube.com/lucascaton?sub_confirmation=1)! 😉


Vale a pena aprender Ruby on Rails em 2020?


Aprenda o básico de JavaScript (JS) através do mais recente vídeo que publiquei no meu
[canal do YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1):

:YouTube{id=wUA5mkosxmU}

---

Abaixo você encontra os arquivos criados/utilizados no vídeo:

### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Introdução à JS</title>

    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <main>
      <nav>
        [Alterar tema](#" id="theme-toggle)
      </nav>

      <article>
        <h1>The Matrix</h1>

        <h2>Cast</h2>

        <ul class='cast'></ul>

        <p>
          The Matrix is a 1999 science fiction action film[3][4] written and directed by the Wachowskis.[a] It stars Keanu Reeves, Laurence Fishburne, Carrie-Anne Moss, Hugo Weaving, and Joe Pantoliano and is the first installment in the Matrix franchise. It depicts a dystopian future in which humanity is unknowingly trapped inside a simulated reality, the Matrix, created by intelligent machines to distract humans while using their bodies as an energy source.[5] When computer programmer Thomas Anderson, under the hacker alias "Neo", uncovers the truth, he "is drawn into a rebellion against the machines"[5] along with other people who have been freed from the Matrix.
        </p>

        <p>
          The Matrix is an example of the cyberpunk subgenre of science fiction.[6] The Wachowskis' approach to action scenes was influenced by Japanese animation[7] and martial arts films, and the film's use of fight choreographers and wire fu techniques from Hong Kong action cinema influenced subsequent Hollywood action film productions. The film is known for popularizing a visual effect known as "bullet time", where the heightened perception of certain characters is represented by allowing the action within a shot to progress in slow-motion while the camera appears to move through the scene at normal speed, allowing the sped-up movements of certain characters to be perceived normally. While some critics have praised the film for its handling of difficult subjects, others have said the deeper themes are largely overshadowed by its action scenes.
        </p>
      </article>
    </main>

    <script src="js/app.js"></script>
  </body>
</html>
```

### `css/style.css`

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

main {
  max-width: 500px;
  min-height: 100vh;
  margin: auto;
  padding: 1rem 2rem;
  font-family: sans-serif;
  background-color: white;
  color: #333;
}

article h1 {
  margin: 1rem 0;
  font-size: 3rem;
}

article p {
  font-size: 1.4rem;
  margin: 2rem 0;
}

nav {
  display: flex;
  flex-direction: row-reverse;
}

#theme-toggle {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;

  background-color: #eee;
  color: #333;
}

ul {
  margin: 1rem 0 0 3rem;
}

/* Dark theme */

body.dark {
  background-color: #222;
}

body.dark main {
  background-color: #444;
  color: #eee;
}

body.dark #theme-toggle {
  background-color: #777;
  color: #ddd;
}
```

### `js/app.js`

```javascript
document.querySelector('#theme-toggle').addEventListener('click', (event) => {
  event.preventDefault();

  toggleTheme();
});

function toggleTheme() {
  document.body.classList.toggle('dark');
}
```

```javascript
const cast = [
  'Keanu Reeves',
  'Carrie-Anne Moss',
  'Laurence Fishburne',
  'Hugo Weaving'
];

const castList = document.querySelector('.cast');

cast.forEach(person => {
  const item = document.createElement("li");
  const personName = document.createTextNode(person);
  item.appendChild(personName);
  castList.appendChild(item);

  // P.S. Existem formas melhores de fazer ↑ isso,
  // usando um framework tipo React por exemplo :)
});
```

```javascript
document.querySelector('main').innerHTML = '';

fetch('https://api.github.com/users/lucascaton/repos?per_page=100')
  .then(response => response.json())
  .then(repos => repos.forEach(repo => {
    let item = document.createElement("li");
    var repoName = document.createTextNode(repo.name);
    item.appendChild(repoName);
    document.querySelector('main').appendChild(item);
  }));
```

:Notice[Se curtiu o vídeo, não deixe de [se inscrever no canal](https://www.youtube.com/lucascaton?sub_confirmation=1)! 😉]{type=tip}


Vídeo: Introdução à JavaScript (JS) em 30 minutos


![Pessoa pensativa usando um laptop](/images/posts/2020/01/conselhos-para-2020.jpg)

Escrevi abaixo alguns conselhos para te fazer pensar em como você quer levar sua vida profissional
nesse ano que acabou de começar.
Em vários trechos, eu "linkei" artigos, vídeos ou referências relevantes.

Se te incomodar o tom "tapa na cara" do post, fique tranquilo, não é nada pessoal.
Mas é para te ajudar a acordar se você estiver precisando :)

## 1. Faça o seu perfil do GitHub ficar animal

**Crie projetos** e os deixe públicos. Contribua com projetos open-source, nem que seja
[só atualizando a documentação](https://github.com/zilverline/sequent/pull/213).
Empresas gostam de perfis interessantes e atualmente isso conta mais que CV.
[Escrever sobre tecnologia](/2017/10/21/por-que-voce-deveria-ter-um-blog)
também ajuda!

## 2. Defina o seu propósito maior

[Reflita sua motivação](https://www.youtube.com/watch?v=-Q-Y-4a2QNo)
para quer chegar onde você planeja chegar. E não deixe de
[ser consistente](https://www.youtube.com/watch?v=xZcwB_cVtrI)!

## 3. Pare de jogar ou assistir coisas inúteis

PS4, Netflix e Porta dos Fundos são ótimos, mas estão cagando para o seu futuro.
**A única pessoa que realmente se importa contigo é você mesmo**.

## 4. Crie um projeto pessoal para ser o seu playground

Não pense em ganhar dinheiro com ele. Comece com
[algo básico](/2018/02/11/criando-sua-primeira-pagina-web-em-30-minutos-basico-sobre-html-e-css)
se você for iniciante, mas saiba
[dar o próximo passo](/2019/02/03/guia-desenvolvedor-web-2019)
para não ficar parado no tempo. Teste tecnologias diferentes.
Envolva back-end e front-end. Crie uma API e um app mobile (ou uma PWA) para consumi-la.
**Identifique no que você é bom e no que precisa melhorar**!

## 5. Pare de reclamar que não tem tempo

O tempo é igual para todos. A diferença é a prioridade que damos para as coisas.
Manter-se ocupado não é ser produtivo.
[Aprenda a dizer **não**](https://pca.st/p2643nwe)!
**Libere sua agenda**, em vez de lotar com coisas que não são importantes.
Algo que também pode ajudar com isso é começar a
[trabalhar remotamente](/2018/03/27/os-desafios-de-trabalhar-remotamente)!

## 6. Faça entrevistas de emprego

Só assim você conseguirá o seu
[primeiro emprego na área de tecnologia](https://www.youtube.com/watch?v=LwbVFhaRuXw).
Corra atrás de [trabalhar com o que você quer](https://www.youtube.com/watch?v=2GaDY7W0U2c).
Não espere uma empresa te convidar para trabalhar lá, isso não vai acontecer do nada.
[Você **não** é iniciante demais](https://www.youtube.com/watch?v=JqFIqEK3G1c).
Você **não** é velho demais. Você **não** é diferente de ninguém. **Chega de desculpas!**

> O melhor dia para fazer isso é um ano atrás. O segundo melhor é hoje.

Depois que conseguir,
[dê o seu melhor](/2018/05/17/3-atitudes-para-ser-feliz-no-trabalho)!

## 7. Saia do Facebook

Não precisa deletar sua conta ou o app, só **pare de abrir a cada 30 minutos**,
porque quase nada que está lá vai te levar para o seu próximo nível.

Dica: troque o tempo gasto lá por
[podcasts](/2015/05/02/por-que-escutar-podcasts).
Já conhece [o meu](/podcast/)?

## 8. Aprenda algo novo

Aprenda a [colocar um servidor e o seu projeto no ar](/2020/01/06/video-heroku-open-source-conheca-o-dokku).
Aprenda [CSS Grid](/2019/05/25/aprenda-css-grid-em-60-minutos).
Aprenda [React](/2019/11/22/video-criando-um-jogo-da-velha-com-react).
Aprenda GraphQL. Aprenda Rust. Aprenda Flutter.

Mas faça de [forma consciente](https://www.thoughtworks.com/pt/radar),
escolha **o que vai agregar ou te trazer benefícios no curto/médio prazo**.
É importante [sair da sua zona de conforto](/2013/09/28/ha-um-mes-eu-troquei-o-ios-pelo-android),
mas com os "pés no chão".

## 9. Você é a média das 5 pessoas que mais convive

Sendo assim, nada melhor que escolher bem os amigos que quer por perto.
Não tenha medo de **trocar seus amigos** ou de
[começar uma vida nova](/2013/08/25/iniciando-uma-vida-completamente-nova).
Daqui a alguns anos (ou em até menos tempo) você vai me agradecer.

## 10. Faça um projeto de graça antes de fazer seu primeiro freela

Mas **sem desistir** no meio, hein?
[Terminativa](/2018/12/18/off-topic-feito-e-melhor-que-perfeito)
é tão importante quanto iniciativa.

## 11. Aprenda inglês

Esse talvez seja o item mais óbvio e se você não está estudando, **já está ficando para trás**.
Você é programador e está codando em português?
[Você está fazendo errado](/2015/05/22/8-motivos-pra-programar-em-ingles).
Simples assim.
Tem
[sacadas que a gente demora para aprender](/2018/05/05/video-sacadas-para-estudar-ingles-que-demorei-para-aprender),
mas é melhor tarde do que nunca!

---

Excelente 2020 para você! 😉


Conselhos para 2020


:YouTube{id=1OUDPbvnBxs}

* [Documentação oficial do Dokku](http://dokku.viewdocs.io/dokku/)
* [Dokku - Guia de instalação](http://dokku.viewdocs.io/dokku/#install-curl)

### Lista de todos os comandos utilizados no vídeo:

```bash
# Criar uma aplicação no Dokku
dokku apps:create bookaton

# Criar e "linkar" um banco de dados PostgreSQL
dokku plugin:install https://github.com/dokku/dokku-postgres.git postgres
dokku postgres:create bookaton_production
dokku postgres:link bookaton_production bookaton
dokku postgres:list

# Criar e "linkar" uma instância do Redis (Não rodei esses comandos no vídeo)
# dokku plugin:install https://github.com/dokku/dokku-redis.git redis
# dokku redis:create bookaton_production
# dokku redis:link bookaton_production bookaton
# dokku redis:list

# Definiar variáveis de ambiente
# (você pode passar várias de uma vez)
dokku config:set bookaton RAILS_MASTER_KEY=123456789

# Listar variáveis de ambiente
dokku config bookaton

# Adicionar buildpacks
dokku buildpacks:add bookaton https://github.com/heroku/heroku-buildpack-ruby.git
dokku buildpacks:add bookaton https://github.com/heroku/heroku-buildpack-nodejs.git
# dokku buildpacks:add bookaton \
#   https://github.com/heroku/heroku-buildpack-activestorage-preview.git

# Ver quais buildpacks foram adicionados
dokku buildpacks:list bookaton

# Associar nossa aplicação à um domínio
dokku domains:add bookaton bookaton.lucascaton.com.br

# Ver todos os domínios
dokku domains:report
```

---

Na sua aplicação, não esqueça de criar os seguintes arquivos:

### `Procfile`

```bash
web: bundle exec puma -C config/puma.rb
worker: bundle exec sidekiq -c 3
release: bin/rails db:migrate
```

### `DOKKU_SCALE`

```bash
web=1
worker=1
```

---

Aí basta configurar o repositório remoto do Git (rode esse comando uma única vez):

```bash
git remote add dokku dokku@200.0.0.0:bookaton
```

E toda vez que você quiser fazer deploy, rode:

```bash
git push dokku
```

---

No servidor, vamos instalar o Let's Encrypt e criar nosso certificado SSL:

```bash
dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git
dokku config:set --no-restart bookaton DOKKU_LETSENCRYPT_EMAIL=fulano@exemplo.com
dokku letsencrypt bookaton

# [Não mostrei isso no vídeo]
# Criar um cronjob para renovar o certificado a cada 2 meses
dokku letsencrypt:auto-renew bookaton
dokku letsencrypt:cron-job --add bookaton
```

Para rodar o console do Rails e/ou do PostgreSQL no servidor:

```bash
dokku run bookaton rails c
dokku run bookaton rails db
```

[Não mostrei isso no vídeo] Para acessar o container dentro do servidor:

```bash
dokku run bookaton sh
````

Por fim, para visualizar/acompanhar os logs, basta rodar:

```bash
dokku logs bookaton -t
```

---

Clientes do Dokku, para rodar os comandos diretamente da sua máquina em vez de ter que acessar o servidor:

[http://dokku.viewdocs.io/dokku/community/clients/](http://dokku.viewdocs.io/dokku/community/clients/)


Vídeo: Heroku Open-Source? Conheça o Dokku


:YouTube{id=adO0QhF8mBU}

* [Site oficial do ASDF](https://asdf-vm.com/)


Vídeo: Como usar o ASDF para gerenciar versões do NodeJS, Ruby, etc


Há um tempo atrás eu fiz uma pesquisa no meu
[canal do Telegram](/telegram/),
perguntando que tipo de conteúdo queríam que eu produzisse.
De longe, o que foi mais pedido foi **JavaScript** e específicamente **React**.
De lá pra cá, eu venho estudando e também usando React,
tanto em projetos pessoais como na empresa onde eu trabalho.

Por estes motivos, vou começar a produzir mais conteúdos sobre esse assunto!
Eis abaixo o primeiro resultado dessa mudança: eu gravei um _screencast_ mostrando como criar
um jogo da velha usando **React** e **React Hooks**! 😃

Honestando falando, foi um dos vídeos mais divertidos que já fiz e que, ao mesmo tempo,
também contém _insights_ valiosos caso você queira trabalhar com essas tecnologias!

:YouTube{id=kFXDcaUcOto}

---

Abaixo você encontra o CSS utilizado no vídeo:

### `src/TicTacToe.css`

```css
:root {
  --O-color: #2196f3;
  --X-color: #f44336;
  --E-color: #777;

  --green: #4caf50;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: center;
  justify-content: center;

  font-family: sans-serif;
  height: 100vh;
  background-color: #eee;
}

.title {
  text-align: center;
  font-size: 3rem;
  color: #555;
  margin-bottom: 2rem;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  grid-template-rows: repeat(3, 200px);
  gap: 1rem;
}

.board.game-over {
  opacity: 0.8;
}

.cell {
  display: grid;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-radius: 5px;
  font-size: 3rem;
  font-weight: bold;
  color: #00000066;

  cursor: pointer;
}

.cell:not(.O):not(.X):hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cell.O, .cell.X, .game-over .cell {
  cursor: not-allowed;
}

.cell.O {
  background-color: var(--O-color);
}

.cell.X {
  background-color: var(--X-color);
}

footer {
  text-align: center;
}

.winner-message {
  margin: 2rem;
}

.winner-message span.O {
  color: var(--O-color);
}

.winner-message span.X {
  color: var(--X-color);
}

.winner-message span.E {
  color: var(--E-color);
}

button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--green);
  color: white;
  font-size: 1.2rem;
}
```

Me conte nos comentários o que achou do vídeo! 😃


Vídeo: criando um Jogo da Velha com React


**CSS Grid** é o sistema de layouts mais poderoso disponível para CSS.

Eu apresentei uma introdução ao assunto em uma LIVE no formato de _tech-talk_:

:YouTube{id=B4GOQ0VJ36I}

---

## Arquivos demonstrados no vídeo acima:

### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <main>
      <nav>
        <h3>Your Account</h3>
      </nav>

      <form class="sign-in-form">
        <h3>Sign in form</h3>
        <button>Sign in</button>
      </form>

      <article class="welcome-message">
        <h1>Welcome to the Account Center</h1>

        <p>
          Your Account gives you access to any of the Market sites,
          where you can buy or sell digital goods like WordPress themes,
          background music, After Effects project files, photography and much, much more.
        </p>

        <p>
          If you already have an account on one of the Market sites,
          sign in with those details.
        </p>
      </article>

      <section class='market-sites'>
        <h3>Market sites</h3>
      </section>

      <footer>
        <ul>
          <li>Help Center</li>
          <li>About</li>
          <li>Privacy Policy</li>
        </ul>
      </footer>
    </main>
  </body>
</html>
```

### `style.css`

```css
* {
  margin: 0;
  padding: 1rem;
  border-radius: 5px;
}

body {
  font-family: sans-serif;
  background: whitesmoke;
  padding: 0;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

nav {
  background-color: black;
  color: white;
  grid-area: navbar;
}

.sign-in-form {
  background-color: white;
  color: #333;
  grid-area: sign-in-form;
}

.sign-in-form button {
  background-color: #85B54A;
  width: 100%;
  color: white;
  font-size: 1rem;
}

.welcome-message {
  grid-area: welcome;
}

.market-sites {
  background-color: #673ab7;
  color: white;
  grid-area: market-sites;
}

footer {
  border-top: 0.1rem solid #ccc;
  margin-top: 1rem;
  padding-top: 0;
  color: grey;
  text-align: center;
  grid-area: footer;
}

footer li {
  display: inline;
}

@media screen and (min-width: 700px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-gap: 10px;

    grid-template-areas:
      'navbar       navbar'
      'welcome      sign-in-form'
      'market-sites sign-in-form'
      'footer       footer';
  }
}
```

:Notice[Assista outras lives [aqui](/lives)!]{type=tip}


Aprenda CSS Grid em 60 minutos


1º episódio da série ["Programe Seu Futuro"](/tags/programeseufuturo/).

* Com [Thiago Aléssio (aka. Xis)](https://twitter.com/thiagoalessio)
* Co-host: [Willian Molinari (aka. PotHix)](https://twitter.com/pothix)

:YouTube{id=Q80PoxkiHuo}

:Notice[🔊 Escute a versão em [podcast](/podcast) se preferir (episódio #22).]{type=info}

:Notice[📘 Leia também o artigo [Li e recomendo o livro Desconstruindo a Web](/2017/02/09/li-e-recomendo-o-livro-desconstruindo-a-web).]{type=tip}


Como ler um livro rendeu uma vaga na RedHat


Há algumas semanas comecei a gravar **lives de programação** no meu
[canal do Youtube](https://www.youtube.com/lucascaton?sub_confirmation=1)!

[![Live thumb](https://img.youtube.com/vi/o6DJ3Rgrcok/maxresdefault.jpg)](/lives)

### Todas as sextas-feiras às 20h

:Notice[Você também pode assistir às [primeiras lives](/lives) **por enquanto**, pois em breve as lives antigas ficarão disponíveis apenas para [meus alunos](/curso) :)]{type=warning}

Se inscreva no meu
[canal do Youtube](https://www.youtube.com/lucascaton?sub_confirmation=1)
ou deixe o seu email no [formulário desta página](/lives)
para ser lembrado sobre as próximas lives!

Te vejo lá!


Quer me ver programando? Venha acompanhar minhas LIVES!


Eu 2018, eu [traduzi](/2018/01/18/desenvolvimento-web-em-2018) um guia chamado
[Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap).
Agora em 2019, fiz algo parecido, porém **em vídeo**, comentando cada um dos itens do guia:

## Parte 1 (Introdução)

:YouTube{id=8zZo_H3SevA}

## Parte 2 (Front-end)

:YouTube{id=lSxMMLEcNIA}

## Parte 3 (Back-end)

:YouTube{id=kChYaF-SweI}

## Parte 4 (Dev Ops)

:YouTube{id=W0zK1b_srXU}

:Notice[Se inscreva no meu canal do YouTube para **assistir mais vídeos como esses**: [www.youtube.com/lucascaton](https://www.youtube.com/lucascaton?sub_confirmation=1)]{type=warning}


Guia: Desenvolvedor Web 2019


Desde 2013, os desenvolvedores do Ruby mantém uma tradição de lançar uma nova versão da linguagem
na época do Natal e nesse ano não foi diferente.

![Ruby 2.6](/images/posts/2018/12/ruby2.6.jpg)

## Como instalar/atualizar?

Antes de mais nada: **sim, já é possível instalar e usar a nova versão!**

Para instalar usando os gerenciadores mais populares:

#### [RVM](https://rvm.io/):

```bash
# Atualize o RVM:
$ rvm get stable

# Instale o Ruby 2.6:
$ rvm install 2.6.0
```

#### [rbenv](https://github.com/rbenv/rbenv):

```bash
# Atualize a lista de versões do Ruby:
$ cd "$(rbenv root)"/plugins/ruby-build && git pull

# Instale o Ruby 2.6:
$ rbenv install 2.6.0
```

\* * *

Vamos então dar uma olhada no que há de novo nessa nova versão!

## Melhorias de performance

Essa versão tem algumas melhorias de performance, como:

* O método `Proc#call` está aproximadamente 1.4x mais rápido.
* _Hashes_ de vida-útil curta consomem 7% menos memória.

Na RubyConf de 2015, Matz (criador do Ruby) [anunciou o **Ruby 3x3**](https://youtu.be/LE0g2TUsJ4U?t=3358),
que são os planos para fazer o **Ruby 3.0** ficar 3x mais rápido.
Essa versão provavelmente será [lançada em 2020](https://www.quora.com/When-will-Ruby-3-0-release).

Uma das estratégias que viabilizará essa grande melhoria de performance é o JIT/MJIT,
que está sendo incluída (como recurso experimental) na versão 2.6, conforme você confere na sessão abaixo:

## JIT (Just-in-time)

Uma das funcionalidades mais notáveis da versão 2.6 do Ruby
é que ela vem com uma implementação (experimental) de um **compilador JIT (Just-in-time)**.

Segundo esse [artigo do Guy Maliar](https://medium.com/tailor-tech/whats-new-in-ruby-2-6-a4774f3631c1)
(em uma tradução livre):

> A idéia por trás de um compilador JIT é "inspencionar" o código em tempo de execução
> e tentar otimizar de forma mais inteligente o código atualmente em execução,
> que é o oposto do que acontece em um compilador AOT (Ahead Of Time compiler).

Essa é apenas a implementação inicial e ainda está um pouco instável.

Entretando, _benchmarks_ iniciais mostram resultados muito bons.
O emulador de NES "Optcarrot" rodou ~ 77% mais rápido, se comparado com o Ruby 2.5.3:

| Ruby (versão) | FPS (frames por segundo) |
| :------------ | :----------------------- |
| 2.5.3         | 48.3                     |
| 2.6.0         | 54.5                     |
| 2.6.0 + JIT   | 85.7                     |

([Fonte](https://gist.github.com/k0kubun/d7f54d96f8e501bbbc78b927640f4208))
{: .text-right}

Outros _benchmarks_ mostram resultados ainda mais significativos:

| Benchmark        | Quanto mais rápido? | Código                                                                                                                    |
| :--------------- | :------------------ | :------------------------------------------------------------------------------------------------------------------------ |
| Mandlebrot       | 1.27x               | [Ver código](https://github.com/benchmark-driver/mjit-benchmarks/blob/master/benchmarks/mandelbrot.yml) |
| Fibonacci        | 3.19x               | [Ver código](https://github.com/benchmark-driver/mjit-benchmarks/blob/master/benchmarks/fib.yml)        |
| `const`/`const2` | Quase 4x            | [Ver código](https://github.com/benchmark-driver/mjit-benchmarks/blob/master/benchmarks/const2.yml)     |

:Notice[Leia mais sobre JIT (e MJIT) [neste artigo](https://www.rubyguides.com/2018/11/ruby-mjit/).]{type=warning}

## Bundler agora vem com o Ruby

![Bundler](/images/posts/2018/12/bundler.png)

Já faz um tempo que essa [discussão começou](https://bugs.ruby-lang.org/issues/12733) e agora é oficial:
**a gem `bundler` vem por padrão com o Ruby!**

Quem tiver curiosidade, [esse é o _Pull Request_](https://github.com/ruby/ruby/pull/1536/files)
com tudo que foi alterado.

Essa mudança é especialmente bem-vinda pelo fato de ajudar iniciantes, já que elimina um passo na instalação do Ruby
(e é com prazer que eu ~~vou ter que regravar~~ já regravei essa aula do [meu curso](/cursos/cplc/) 🙂).

:Notice[Você pode ler mais sobre essa integração no [blog de engenharia da Appfolio](http://engineering.appfolio.com/appfolio-engineering/2018/11/26/bundler-is-built-into-ruby-260preview3).]{type=warning}

## O método `#then`

O método `yield_self` foi adicionado no Ruby 2.5.
A novidade agora é que ele ganhou um alias: `then`.

Considere o seguinte exemplo de código de _controller_ do **Rails**:

```ruby
events = Event.upcoming
events = events.limit(params[:limit])          if params[:limit]
events = events.where(status: params[:status]) if params[:status]
events
```

Podemos reescrever o código acima usando `yield_self` ou `then`
(já que o segundo é apenas um _alias_ do primeiro):

```ruby
Event.upcoming
  .yield_self { |events| params[:limit]  ? events.limit(params[:limit])          : events }
  .yield_self { |events| params[:status] ? events.where(status: params[:status]) : events }
```

Agora com `then`, que faz o código ficar um pouco mais legível:

```ruby
Event.upcoming
  .then { |events| params[:limit]  ? events.limit(params[:limit])          : events }
  .then { |events| params[:status] ? events.where(status: params[:status]) : events }
```

## Ranges infinitos

Agora podemos criar _ranges_ sem especificar um valor final.
Isso significa que podemos escrever códigos como:

```ruby
array[1..]
# O código acima é identico à `array[1..-1]`
```

```ruby
# Loop infinito que começa com índice 1
(1..).each { |index| ... }
```

```ruby
array.zip(1..) { |elem, index| ... }
# O código acima é identico à `array.each.with_index(1) { }`
```

## Novo método `#filter` para arrays (_alias_ para o método `#select`)

Nós conhecemos bem o método `select`, mas em outras linguagens
(como JavaScript, Java e PHP), ele é mais conhecido como `filter`.
Se você, assim como eu, sempre quis que um _alias_ fosse criado, esse momento chegou:

```ruby
[:foo, :bar].filter { |x| x == :foo }
# => [:foo]
```

## Métodos `#union` e `#difference` para arrays

Para quem lembra das [aulas de matemática da escola](https://www.todamateria.com.br/operacoes-com-conjuntos/)
ou para quem precisa trabalhar com **união e diferença entre _arrays_**, tenho uma boa notícia:

Dois métodos (`#union` e `#difference`) foram adicionados aos _arrays_.

Eis um exemplo:

```ruby
[1, 1, 2, 2, 3, 3, 4, 5].difference([1, 2, 4])
# => [3, 3, 5]
```

```ruby
['a', 'b', 'c'].union(['c', 'd', 'a'])
# => ['a', 'b', 'c', 'd']
```

```ruby
['a'].union([['e', 'b'], ['a', 'c', 'b']])
# => ['a', 'e', 'b', 'c']
```

---

Veja também
[post oficial](https://www.ruby-lang.org/en/news/2018/12/25/ruby-2-6-0-released/)
sobre o lançamento da versão 2.6.


Ruby 2.6 acaba de ser lançado!


![image_description](/images/posts/2018/12/design-desk-display-313690.jpg)

Vou escrever sobre uma técnica relativamente simples para alcançar seus objetivos, seja conseguir
um [novo] emprego, emagrecer, terminar um curso de programação, ou qualquer outra coisa.

Em 2012, eu fui com a minha noiva (atualmente esposa) visitar o meu pai e levamos um grande amigo meu.
Na viagem de volta pra casa, viemos falando sobre casamento e comentamos que não tínhamos uma data
para casar ainda. Afinal, por que a pressa para casar?
Tanto eu quanto minha noiva estávamos tranquilos em relação à isso.
Não é o tipo de situação na qual existe pressão por parte de um chefe, de um cliente, da família, etc.

Eram muitas coisas para planejar: documentação para o cartório, agendar o dia na igreja
(além de preparar os enfeites), alugar o salão, comprar os comes e bebes da festa, fazer lista de
convidados, escolher os padrinhos, planejar a lua de mel (que tem que coincidir com férias de
trabalho) e muito mais - só que já casou sabe do que eu estou falando!

Sei que muitos casais enrolam justamente por isso :)

Nesse momento, ele nos deu um conselho caso a gente realmente quisesse casar:
escolher uma data e não mudar por motivo algum.
Essa seria a forma mais eficiente para conseguirmos preparar tudo.
Ele ainda sugeriu 6 meses a contar daquele dia.
Após um pouco de conversa, caiu a ficha de que ele tinha razão!
Mesmo sabendo que era bastante coisa para fazer, 6 meses parecida um prazo razoável.

Começamos a ligar para nossa família e amigos mais chegados e perguntar se eles tinham compromisso
naquela data.  Depois de confirmar que todos poderiam, pedimos para que todos reservassem o dia 8 de
dezembro de 2012 em seus calendários, pois iriamos nos casar! Nesse momento, não havia como fugir:
**teríamos que fazer o melhor possível durante aqueles 6 meses**. No final deu tudo certo!

\* * *

Venho utilizando essa técnica desde aquela época, para várias outras coisas da minha vida.

O mais importante é **escolher uma data e mantê-la**,
principalmente quando somos perfeccionistas, pois naturalmente tendemos a enrolar o máximo que der.
Isso vale para um casamento,
para [criar um blog](/2017/10/21/por-que-voce-deveria-ter-um-blog),
para projetos pessoais, para um trabalho de conclusão de faculdade/pós-graduação, enfim, para qualquer coisa!

Dependendo do seu foco e da sua disciplina, é capaz de você acabar desistindo de finalizar se você
**não tiver um prazo e não for avançando aos poucos**.

> Não basta ter a *iniciativa* é importante ter a *"terminativa"*!

Existe a chance, inclusive, de você criar inconscientemente uma desculpa para justificar o porquê
você não chegou lá. Digamos que você queira começar a correr, mas no primeiro dia estava chovendo e
você deixa para o dia seguinte. Aí no dia seguinte não vai porque não tinha o tênis apropriado. No
terceiro, não vai porque a perna estava doendo um pouquinho. Tem até aquele ditado:

> "Quem quer, arruma um jeito; quem não quer, arruma uma desculpa."

**Inventar desculpas é uma das coisas mais eficiente que o ser humano é capaz**;
somos realmente muito bons nisso.

\* * *

Suponhamos que você esteja criando um aplicativo/site ou ainda esteja abrindo uma empresa.
Você obviamente vai precisar de um nome. Pode parecer uma tarefa simples, mas eu vejo pessoas
demorando vários dias e muitas vezes até desistindo somente pelo fato de não terem conseguido o
"nome ideal" (algo utópico, considerando que um nome é muito subjetivo).

A solução para esses casos é estabelecer um prazo e dar o melhor de si até tal prazo chegar.
Faça uma lista de opções. Talvez você não goste de nenhum, mas vá anotando todos os que surgirem.

**Quando a data chegar, escolha o melhor nome da lista e pronto!**

Lembre-se que você fez o melhor que pôde, então não postergue essa decisão,
mesmo que nenhum nome te agrade 100%. Mesmo que talvez você precise mudar no futuro,
esse é o momento de seguir em frente com o que você conseguiu até agora.

Se você não fizer isso, você nunca vai entender que **"feito é melhor que perfeito"**.


[Off-topic] Feito é melhor que perfeito


Quando estamos nos preparando para começar a programar um novo projeto,
nem sempre é claro o que precisamos estudar primeiro.

É como preparar um bolo: tem que saber os ingredientes, a quantidade de cada coisa
e também a ordem de preparo, ou seja, em que momento colocar cada item.

É sobre isso que eu falo nesse episódio, respondendo a dúvida enviada pelo **Tharlles Té**:

:YouTube{id=xXNwzqRyci8}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

* Vídeo comentado nesse episódio: [Como testar seu site ou app em diversos dispositivos](/2018/01/28/como-testar-seu-site-ou-app-em-diversos-dispositivos).

* Se preferir, você também pode **escutar** esse episódio através do meu [podcast](/podcast).

* Ver outros episódios da série [Café com Caton](/tags/cafe-com-caton/).

* Escreva sua opinião nos comentários abaixo, a discussão fica mais interessante com mais pessoas :)


Café com Caton 008: Devo estudar criação de APIs ou cliente mobile primeiro?


Digamos que você esteja prestes a começar o desenvolvimento de um novo projeto.
Enquanto que banco de dados como **PostgreSQL** e **MySQL** são escolhas tradicionais,
quais são os casos que valem a pena considerar bancos **NoSQL**, como **MongoDB**?

É sobre isso que eu falo nesse episódio, respondendo a dúvida enviada pelo **Ramakanta Dasa**:

:YouTube{id=X858FxpKTSE}

:Notice[Se preferir, você também pode **escutar** esse episódio através do meu podcast: [podcast](/podcast)]{type=info}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

:Notice[Ver outros episódios da série [Café com Caton](/tags/cafe-com-caton/)]{type=tip}

Escreva sua opinião nos comentários abaixo, a discussão fica mais interessante com mais pessoas! 🙂


Café com Caton 007: SQL ou NoSQL?


**Action Text** é o mais novo _framework_ do **Rails** e será adicionado oficialmente na versão 6.

Para entender as razões que levaram o **Rails Core Team** (e a equipe do **Basecamp** também, diga-se de passagem)
a criá-lo e também aprender a utilizá-lo, assista ao vídeo abaixo:

:YouTube{id=ZlN1iPbuP-A}

* [Action Text](https://github.com/rails/actiontext)
* [Trix](https://trix-editor.org/) (editor de texto rico JS criado pelo [Basecamp](https://basecamp.com))

Vídeos comentados no _screencast_ acima:

* [Aprenda Active Storage](/2018/04/14/video-aprenda-active-storage-parte-1)
* [Live: o que já sabemos sobre o Rails 6](/2018/07/14/live-o-que-ja-sabemos-sobre-o-rails-6)

:Notice[**Atenção**: não é recomendado usar versões `alpha`, `beta`, `rc`, etc. em produção.]{type=danger}

---

Comandos executados e arquivos alterados no vídeo:

### Terminal

```bash
$ rails6 new action-text-demo --edge
$ cd action-text-demo
$ atom .
```

### `Gemfile`

```ruby
gem 'actiontext', github: 'rails/actiontext', require: 'action_text'
gem 'image_processing', '~> 1.2'
```

### Terminal

```bash
$ rails action_text:install
$ rails db:migrate

$ rails g scaffold post title
$ rails db:migrate
$ rails s
```

### `config/routes.rb`

```ruby
root 'posts#index'
```

### `app/models/post.rb`

```ruby
class Post < ApplicationRecord
  has_rich_text :content
end
```

### `app/views/posts/_form.html.erb`

```erb
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>
```

### `app/controllers/posts_controller.rb`

```ruby
params.require(:post).permit(:title, :content)
```

### `app/views/posts/show.html.erb`

```erb
<p><%= @post.content %></p>
```

Coloquem nos comentários abaixo o que vocês acharam da novidade e quem está ansioso pelo **Rails 6**! 😁


Action Text: o novo framework que virá no Rails 6


:YouTube{id=BYt28WGd3JQ}

Busque por `Lucas Caton` no seu app de podcast favorito! 🙂

Ou [clique aqui](/podcast) para acessar os links diretamente!


Meu podcast está no ar!


Existem situações nas quais não valem a pena desenvolver um software e nesse episódio eu vou falar sobre uma delas:

:YouTube{id=y2LfzdC2kzQ}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

* Solução open-source (gem) de ecommerce feita em Ruby on Rails: [Spree](https://github.com/spree/spree)

* Plataforma de ecommerce (SAAS): [Shopify](https://www.shopify.com/)

* Artigo ["Desenvolvimento web em 2018"](/2018/01/18/desenvolvimento-web-em-2018)

* Assista o episódio anterior, no qual eu falo quais
[podcasts que eu escuto](/2018/09/26/cafe-com-caton-005-podcasts-que-eu-escuto)


Café com Caton 006: Por que não desenvolver um ecommerce?


Aqueles que leram e gostaram do meu artigo
["Por que escutar Podcasts?"](/2015/05/02/por-que-escutar-podcasts),
provavelmente também curtirão esse episódio da série **"Café com Caton"**,
no qual eu falo rapidamente sobre todos os podcasts que escuto atualmente (nacionais e gringos):

:YouTube{id=KNFVrTYqr5U}

:Notice[Aproveite para conhecer o [**meu podcast**](/podcast)!]{type=tip}

Assista o episódio anterior, no qual eu mostro
[como é meu estúdio e meu escritório](/2018/09/23/cafe-com-caton-004-como-e-meu-estudio-escritorio).


Café com Caton 005: Podcasts que eu escuto


O quarto episódio da série **"Café com Caton"** está no ar:

:YouTube{id=yDf5ae3Zldw}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

Artigo comentado no vídeo:
[Os desafios de trabalhar remotamente](/2018/03/27/os-desafios-de-trabalhar-remotamente).

Assista o episódio anterior sobre
[Como construir uma carreira de referência](/2018/09/22/cafe-com-caton-003-como-construir-uma-carreira-de-referencia).


Café com Caton 004: Como é meu estúdio / escritório


O terceiro episódio da série **"Café com Caton"** está no ar:

:YouTube{id=umOG4Y1j0fQ}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

Assista o episódio anterior sobre
[Como trabalhar com a linguagem que você ama](/2018/09/21/cafe-com-caton-002-como-trabalhar-com-a-linguagem-que-voce-ama).


Café com Caton 003: Como construir uma carreira de referência


O segundo episódio da série **"Café com Caton"** está no ar:

:YouTube{id=2GaDY7W0U2c}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

Assista o episódio anterior sobre
[Freelancer](/2018/09/19/cafe-com-caton-001-freelancer).


Café com Caton 002: Como trabalhar com a linguagem que você ama


Olá meus caros!

O vídeo abaixo inaugura uma nova série chamada **"Café com Caton"**.
Seria impossível encontrar um nome mais clichê, eu sei! 😆

Espero que gostem:

:YouTube{id=LmKKaN71wX0}

:Notice[Se inscreva no [meu canal no YouTube](https://www.youtube.com/lucascaton?sub_confirmation=1)!]{type=tip}

Artigo comentado no vídeo:
[Os desafios de trabalhar remotamente](/2018/03/27/os-desafios-de-trabalhar-remotamente).


Café com Caton 001: Freelancer


Redescobri uma funcionalidade antiga, mas muito poderosa!

:YouTube{id=WvjzmBz3mFU}

Já conhecia? Já usa? Comente abaixo :)


Como editar e reordenar seus commits no Git


Olá meus caros!

Eu fui convidado pelo [Fernando Sousa](https://souforce.cloud) para gravar um podcast sobre _refactoring_.
Esse é o primeiro episódio do podcast [SouforceCast](https://souforce.cloud/podcast/) e ele já confirmou que vem mais por aí.

<div>
<iframe width="400px" height="102px" src="https://anchor.fm/souforcecloud/embed/episodes/Episdio-1---Refactoring-e1pd97" frameborder="0" scrolling="no"></iframe>
</div>

---

Escute também pelo:

* [iTunes](https://itunes.apple.com/br/podcast/souforce-cloud/id1410225197?l=en)
* [PocketCasts](https://pca.st/HOOP)

[![souforce-cast-logo](/images/posts/2018/07/souforce-cast.png)](https://souforce.cloud/podcast/)

:Notice[Aproveite para conhecer o [**meu podcast**](/podcast) também!]{type=tip}


Participei de um podcast sobre refatoração


Gravamos uma _live_ analisando as alterações recentes no código-fonte com o objetivo de descobrir o que vem por aí no **Rails 6**:

:YouTube{id=5p07TQATjjI}

### Links comentados no vídeo:

* [RailsConf 2018 - The Future of Rails 6](https://www.youtube.com/watch?v=8evXWvM4oXM)
* [Milestone "Rails 6"](https://github.com/rails/rails/milestone/63)
* [PR "Make Webpacker the default JavaScript compiler"](https://github.com/rails/rails/pull/33079/files)


Live: O que já sabemos sobre o Rails 6?


Abri meu coração e honestamente contei todos os meus planos:

:YouTube{id=-Q-Y-4a2QNo}


Eu não faço isso aqui para ganhar dinheiro... eu ganho dinheiro para fazer isso aqui!


Abaixo você encontrará um mini-curso que foi originalmente gravado para os alunos
do [meu curso](/cursos/cplc/)). O objetivo é aprender o
básico do **Git** (ferramenta) e do **GitHub** (plataforma).

## Parte 1

:YouTube{id=hwDRjlCj4Po}

## Parte 2

:YouTube{id=7hDUkR830_I}

## Parte 3

:YouTube{id=7FgUQ_AKaEg}

## Parte 4

:YouTube{id=WxSmPnbkO8w}

## Parte 5

:YouTube{id=kj5JMvLOdaU}

## Parte 6

:YouTube{id=qF7hue4Ef4E}

---

## Como instalar o Git

O processo de instalação do Git é simples, basta seguir as instruções do site oficial:

* **Windows**: [git-scm.com/download/win](https://git-scm.com/download/win)
* **Linux/Unix**: [git-scm.com/download/linux](https://git-scm.com/download/linux)
* **macOS** (se você tiver [Homebrew](https://brew.sh/) instalado): `$ brew install git`
* **macOS** (sem usar o Homebrew): [git-scm.com/download/mac](https://git-scm.com/download/mac)

## Criar uma conta no GitHub:

[https://github.com/join](https://github.com/join)

## Configurar seu nome de usuário no Git:

[https://help.github.com/articles/setting-your-username-in-git/](https://help.github.com/articles/setting-your-username-in-git/)

## Autenticar no GitHub:

[https://help.github.com/articles/set-up-git/](https://help.github.com/articles/set-up-git/)

## Comandos usados nas videoaulas:

* `git init`
* `git add README.md`
* `git status`
* `git commit -m "Create README.md"`
* `git log`
* `git diff README.md`
* `git revert [hash]`
* `git show`
* `git push`
* `git checkout -b nova_funcionalidade`
* `git branch`
* `git branch -a`
* `git checkout nova_funcionalidade`
* `git checkout master`

## Artigos relacionados:

* [Como escrever mensagens de commits no Git](/2017/10/16/como-escrever-mensagens-de-commits-no-git)
* [Como eu migrei de chaves SSH para HTTPS no Git/GitHub](/2016/02/23/why-i-regenerated-my-ssh-key-and-maybe-you-should-too) (em inglês)


Mini-curso sobre Git & GitHub


![3 colegas tomando café e usando um laptop](/images/posts/2018/05/3-atitudes-para-ser-feliz-no-trabalho.jpg)

Você provavelmente conhece alguém que não consegue trabalhar na mesma empresa por mais de um ano.
Eu conheço pessoas que, em menos tempo que isso, já estão doidas para procurar outro trabalho.

Comecei a trabalhar aos 16 anos, em 2004, como estagiário em uma secretaria da universidade onde eu estudava.
Nessa época eu só programava na faculdade, por hobby e eventualmente fazendo um _"freela"_ (trabalho _freelance_).
Em 2007, comecei a finalmente trabalhar profissionalmente com programação, passando por várias empresas, grandes e pequenas.

Desde então, minha meta pessoal é não ficar menos que um ano trabalhando em uma empresa; meu tempo recorde foi 3 anos e meio.
**O fato é que não existe um tempo ideal para deixar o que já é certo para se aventurar em algo novo.**
São muitas variáveis em jogo e cada um sabe onde o calo aperta.

Se você ficar muito tempo na mesma empresa, pode ficar acomodado (a famigerada "zona de conforto"),
pode se desapegar (às vezes inconscientemente) da sua carreira, deixar de aprender coisas novas e deixar de fazer novos colegas/amigos.
Por outro lado, conquista estabilidade, autoridade, pode ser promovido e eventualmente tem um aumento de salário.

Já ficando pouco tempo em uma empresa, lhe dá a oportunidade de experimentar diferentes ambientes/culturas em diferentes companhias.
Esta também poderia ser uma boa hora para negociar um salário melhor, caso você julgue justo.
Mas também tem seus pontos negativos, por exemplo ganhar uma má reputação, ou mesmo não conseguir ter disciplina.

![ser-feliz-no-trabalho](/images/posts/2018/05/mulher-no-escritorio.jpg)

Trocar de empresa, ingenuamente, apenas para resolver um determinado problema,
é **negligenciar o fato de que a nova empresa terá problemas que a atual não tem.**

Na minha perspectiva, a regra de ouro é: se você tem um problema,
**use bons argumentos para defender o que você acredita,
mas também saiba ser humilde e admitir quando você estiver errado.**

Mas o ponto principal desse artigo é: durante um emprego, você vai procurar dar o melhor de si
e torcer para receber o melhor da empresa, certo?
Abaixo você encontrará uma compilação de 3 atitudes que eu aprendi (e me policio para continuar tendo)
para manter meu emprego atual de forma saudável.

## 1. Seja responsável

Esteja alinhado com os objetivos da empresa.
Se você não concorda com o caminho que a empresa está seguindo, **talvez fosse melhor nem ter começado lá**.

Coisas pequenas contam: não se atrase para reuniões, mantenha pessoas atualizadas sobre problemas
que estão acontecendo, não falte a toa com desculpas esfarrapadas, etc.

## 2. Seja amigável/respeitoso com colegas

> “Todas as pessoas que você conhece estão enfrentando batalhas que você não sabe nada a respeito. Seja gentil. Sempre.”

Acho sensacional a frase acima (sem autor conhecido, pelo que eu pesquisei).
Não julgue aquele colega que não está produtivo hoje,
pois você não sabe se ele perdeu um ente querido, se ele está com dor ou problema de saúde,
com problemas financeiros, ou tantas outras coisas possíveis.
**Seja empático; jamais desrespeite alguém.**

Inevitavelmente, uma hora acontece algum desentendimento. Dependendo da gravidade, esfrie a cabeça,
talvez seja melhor deixar pra tentar se entender mais tarde ou até no dia seguinte.
Certos desentendimentos se resolvem simplesmente ao esperar a poeira baixar.
Pode ser que nem era algo tão grave e no calor do momento você/ele/ela acabou exagerando.

## 3. Busque um emprego recompensador

Realisticamente falando, não adianta você fazer a sua parte e não ser recompensado.
Esse provavelmente seria o cenário no qual você logo estaria procurando por outro emprego.

Busque um salário e uma posição justa para o momento presente de sua carreira.
Peça _feedback_ caso não receba, só assim você alinha suas expectativas com as da empresa.
Seu trabalho deve ser saudável, em todos os aspectos, e nunca consumir toda sua energia física ou mental.

**Trabalhar com o que você ama, faz com que você não gaste sua vida apenas
trocando seu tempo/esforço pelo dinheiro no final do mês.**

![ser-feliz-no-trabalho](/images/posts/2018/05/ser-feliz-no-trabalho.jpg)

## Tem como ser 100% feliz no seu emprego?

Mesmo que você encontre o trabalho perfeito, tudo sempre vai poder mudar.
Colegas que você gosta pedem demissões, os diretores/gerentes mudam,
seu salário aumenta menos do que o esperado, um novo funcionário é contratado e você não o suporta.
Qualquer uma dessas mudanças contribuem para o desequilibro de um suposto emprego perfeito.

**Empresa perfeita é utopia. Assim como você também não é um funcionário perfeito, nem nunca será.**

Além disso, que graça teria uma vida sem desafios? 🙂


3 atitudes para ser feliz no trabalho


Algumas técnicas que uso até hoje para estudar inglês.
Queria que alguém tivesse me ensinado isso 10 anos atrás! 🙂

:YouTube{id=XCrb3dgoYGM}

:Notice[[Clique aqui](https://www.youtube.com/lucascaton?sub_confirmation=1) para se inscrever no meu canal no YouTube!]{type=tip}

Outros vídeos comentados no vídeo acima:

* [5 formas de aprender inglês de graça](https://www.youtube.com/watch?v=rDacKeqsvNM)
* [8 motivos para programar em inglês](https://www.youtube.com/watch?v=5d5bkbWybqc)


Vídeo: sacadas para estudar inglês que demorei para aprender

Há 3 dias, publiquei [o primeiro vídeo desta série](/2018/04/14/video-aprenda-active-storage-parte-1)
sobre **Active Storage**, o grande destaque do **Rails 5.2**; recomendo que você o veja antes de assistir este.

Nesse segundo vídeo, vou mostrar como configurar o **Active Storage** para:

* Fazer _upload_ de arquivos para o **AWS S3** (serviço de armazenamento de arquivos da **Amazon**);
* Usar o **_direct upload_** (envio de arquivos do navegador diretamente para o **S3**, sem passar pelo seu servidor);
* Fazer _upload_ de **vários arquivos** de uma só vez.

:YouTube{id=ZwkAqZ5lty4}

---

* [Assista a **parte 1** dessa série](/2018/04/14/video-aprenda-active-storage-parte-1)
* [Guia oficial do **Active Storage**](http://guides.rubyonrails.org/active_storage_overview.html)

---

Arquivos alterados no vídeo:

### `config/storage.yml`

```yaml
# ...

amazon:
  service: S3
  access_key_id: xxxxxxxxxxxxxxxxxxxx
  secret_access_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  region: xxxxxxxxxxxxxx
  bucket: xxxxxxx

# ...
```

### `config/environments/development.rb`

```ruby
# ...

config.active_storage.service = :amazon

# ...
```

### `app/assets/javascripts/application.js`

```javascript
// ...

//= require activestorage

// ...
```

### `app/models/post.rb`

```ruby
class Post < ApplicationRecord
  has_many_attached :images
end
```

### `app/controllers/posts_controller.rb`

```ruby
class PostsController < ApplicationController
  # ...

  def post_params
    params.require(:post).permit(:title, :body, images: [])
  end
end
```

### `app/views/posts/_form.html.erb`

```erb


<div class="field">
  <%= form.label :images %>
  <%= form.file_field :images, direct_upload: true, multiple: true %>
</div>


```

### `app/views/posts/show.html.erb`

```erb


<% @post.images.each do |image| %>
  <%= image_tag image, style: 'width: 25%' %>
<% end %>


```

### `app/assets/javascripts/direct_uploads.js`

```javascript
addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin", `
    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
      <span class="direct-upload__filename">${file.name}</span>
    </div>
  `)
})

addEventListener("direct-upload:start", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.remove("direct-upload--pending")
})

addEventListener("direct-upload:progress", event => {
  const { id, progress } = event.detail
  const progressElement = document.getElementById(`direct-upload-progress-${id}`)
  progressElement.style.width = `${progress}%`
})

addEventListener("direct-upload:error", event => {
  event.preventDefault()
  const { id, error } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--error")
  element.setAttribute("title", error)
})

addEventListener("direct-upload:end", event => {
  const { id } = event.detail
  const element = document.getElementById(`direct-upload-${id}`)
  element.classList.add("direct-upload--complete")
})
```

### `app/assets/stylesheets/direct_uploads.css`

```css
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}

.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}

.direct-upload--error {
  border-color: red;
}

input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
```

Qualquer dúvida, mande nos comentários!

Vídeo: Aprenda Active Storage - parte 2

Há poucos dias, escrevi um
[artigo falando sobre as novidades do Rails 5.2](/2018/04/10/rails-5-2-acaba-de-ser-lancado-confira-o-que-ha-de-novo),
lançado recentemente.

Hoje gravei o primeiro vídeo de [uma série](/tags/active-storage/)
demostrando o funcionamento do **Active Storage**, o grande destaque do **Rails 5.2**:

:YouTube{id=RE0V3SqRIYM}

:Notice[[Assista a parte 2](/2018/04/17/video-aprenda-active-storage-parte-2): upload de arquivos para o AWS S3, _direct upload_ sem passar pelo seu servidor e enviar múltiplos arquivos de uma vez.]{type=info}

---

Comandos executados no vídeo:

```bash
$ rails new active_storage_demo -d postgresql
$ cd active_storage_demo
$ atom .
```

```bash
$ rails generate scaffold post title body:text
$ rails db:create db:migrate
```

```bash
$ rails active_storage:install
$ rails db:migrate
```

```bash
$ rails s
```

---

Arquivos alterados no vídeo:

### `app/models/post.rb`

```ruby
class Post < ApplicationRecord
  has_one_attached :image
end
```

### `app/controllers/posts_controller.rb`

```ruby
class PostsController < ApplicationController
  # ...

  def post_params
    params.require(:post).permit(:title, :body, :image)
  end
end
```

### `app/views/posts/_form.html.erb`

```erb
<%= form_with(model: post, local: true, multipart: true) do |form| %>



<div class="field">
  <%= form.label :image %>
  <%= form.file_field :image %>
</div>


```

### `app/views/posts/show.html.erb`

```erb


<%= image_tag @post.image %>


```

:Notice[[Assista a parte 2](/2018/04/17/video-aprenda-active-storage-parte-2): upload de arquivos para o AWS S3, _direct upload_ sem passar pelo seu servidor e enviar múltiplos arquivos de uma vez.]{type=info}

Vídeo: Aprenda Active Storage - parte 1


![Uma ferrovia atravessando o mar](/images/posts/2018/04/rails-5.2.jpg)

A nova versão do Rails estava em beta (e rc[^1]) desde novembro do ano passado
e agora está finalmente disponível para todos!

Foram [quase 5000 commits](https://github.com/rails/rails/compare/v5.1.6...v5.2.0) (!)
de [440 desenvolvedores](http://contributors.rubyonrails.org/releases/5-2-0/contributors),
incluindo uma pequena [contribuição deste que vos escreve](https://github.com/rails/rails/pull/29340).

Algumas novidades presentes nesta nova versão:

## Active Storage

Sem dúvidas, o destaque da vez.

Desde quando foi lançado, o **Ruby on Rails** tem a premissa de ser um [framework completo](https://www.youtube.com/watch?v=SsYKd37r26s).
O **Active Storage** foi adicionado ao Rails justamente para suprir uma funcionalidade a qual antes dependia de ferramentas de terceiros: _upload_ de arquivos.

O _framework_ traz suporte nativo aos serviços **Amazon S3**, **Google Cloud Storage** e **Microsoft Azure Storage**.
A [abordagem](https://github.com/rails/rails/blob/5-2-stable/activestorage/README.md#compared-to-other-storage-solutions)
utilizada simplifica a tarefa e vem com recursos bacanas, como
[_uploads_ direto para a nuvem](https://github.com/rails/rails/blob/5-2-stable/activestorage/README.md#direct-uploads)
(sem passar pelo seu servidor antes) e criação de
[_thumbnails_](https://github.com/rails/rails/blob/5-2-stable/activestorage/README.md#examples)
(miniaturas) de imagens, PDFs e até mesmo vídeos.

:Notice[Ah, eu gravei uma [série de vídeos sobre Active Storage](/tags/active-storage/)! 😉]{type=tip}

:Notice[Curiosidade: **Active Storage** é mais um caso de código que foi extraído do [Basecamp](https://basecamp.com/), da empresa fundada por [DHH](https://twitter.com/dhh), criador do Rails.]{type=info}

## HTTP/2 Early Hints

Rails agora suporta uma das coisas mais legais do **HTTP/2**:
poder instruir o servidor (como o **Puma**, que já [suporta isso](https://github.com/puma/puma/pull/1403))
para enviar antecipadamente arquivos JS e CSS. Isso se traduz em uma entrega mais rápida das páginas.

## Boot 50% mais rápido

A gem [**Bootsnap**](https://github.com/Shopify/bootsnap) reduz o tempo para subir um servidor em 50%
e a partir do **Rails 5.2**, ela é adicionada por padrão em novos projetos.
Você também pode usá-la em projetos usando versões antigas do Rails, basta adicioná-la ao seu `Gemfile`.

## CSP (Content Security Policy)

Uma nova DSL[^2] foi adicionada para configurar _headers_ `Content-Security-Policy`,
através da qual você poderá melhorar a segurança da sua aplicação.

## Credentials

O arquivo de configuração `secrets.yml` foi criado no Rails 4.1
e transformado em um arquivo criptografado no Rails 5.1.
Só que isso sempre foi meio confuso e alguns desenvolvedores não sabiam exatamente
como (ou por qual motivo) usar, já que _envvars_[^3] resolviam o problema.

Para ~~tentar~~ resolver a confusão, agora foi criado o conceito de **Credentials**,
descontinuando o suporte ao `secret.yml` (e sua versão criptografada).

Se isso resolverá mesmo o problema e cairá no gosto dos desenvolvedores, só o tempo dirá!

## Suporte à gem Webpacker 3.0

Rails vem adotando soluções modernas para uso de **JavaScript** e manter uma boa integração
com a gem [**Webpacker**](https://github.com/rails/webpacker) prova isso mais uma vez.

## Redis Cache Store

Suporte nativo à cache usando **Redis**. Você encontra mais informações no
[_pull request_ em que esta funcionalidade foi adicionada](https://github.com/rails/rails/pull/31134/files).

## O que mais?

Obviamente, existe mais coisas que mudaram/evoluíram além dos destaques que listei acima.
As [notas de liberação](http://edgeguides.rubyonrails.org/5_2_release_notes.html)
contém algumas dessas mudanças menos relevantes, caso você esteja interessado.

## Como atualizar?

Atualmente, atualizar um projeto para uma nova versão do Rails é uma tarefa relativamente tranquila
(principalmente se comparada com as transições da versão 2 para a 3).

Eis o [guia oficial para atualizar](http://edgeguides.rubyonrails.org/upgrading_ruby_on_rails.html#upgrading-from-rails-5-1-to-rails-5-2).

:Notice[Uma boa cobertura de testes automatizados é altamente recomendada!]{type=warning}

## Rails 6?

Seguindo a tradição, essa será a última versão da série `5.*`.
O branch `master` do repositório do Rails já contém mudanças que só virão no **Rails 6**,
o qual provavelmente veremos daqui a aproximadamente 1 ano e meio, se o histórico de lançamentos for similar aos que tivemos até hoje.

---

[^1]: _Release Candidates_: versões beta com potencial para serem a versão final
[^2]: _Domain-specific language_ (Linguagem de domínio específico): métodos ou códigos específicos dedicados à um domínio de problema particular
[^3]: _Environment Variables_ (variáveis de ambiente): configurações disponíveis "globalmente" em um computador ou servidor


Rails 5.2 acaba de ser lançado; confira o que há de novo!


Desde o começo de 2017, eu venho trabalhando remotamente 100% do tempo.
Atualmente isso é algo [muito comum](https://open.buffer.com/state-remote-work-2018/),
não apenas em empresas de tecnologia.
Quem mora em cidade grande e enfrenta trânsito ou corre risco de ser assaltado,
sabe o quanto é vantajoso não precisar de sair de casa para trabalhar.

![home-office](/images/posts/2018/03/home-office.jpg)

{: .img-description }
Meu escritório atual (aka. _home office_)
<br>
<br>

As vantagens são muitas. Uma das que eu mais aprecio é poder ver cada progresso do meu filho (que está com 1 ano e meio).
**É uma forma de trocar o tempo gasto se locomovendo por tempo com sua família e/ou fazendo o que você gosta**.

Outro ponto positivo é que a empresa nunca contratará alguém que more perto apenas por esse fato isolado;
você trabalhará com as melhores pessoas que sua empresa encontrou sem ter a localização como fator limitante, como o _tweet_ abaixo assertivamente ilustra:

<blockquote class="twitter-tweet"><p lang="und" dir="ltr">[pic.twitter.com/DO3xDPBmIE](https://t.co/DO3xDPBmIE)</p>&mdash; Mark Dalgleish (@markdalgleish) [March 16, 2018](https://twitter.com/markdalgleish/status/974447526282539008?ref_src=twsrc%5Etfw)</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br>
<br>

Porém nem tudo são flores.

## Desafios (e soluções)

Depois de 15 meses trabalhando em casa, identifiquei os desafios mais comuns
e vou listá-los abaixo, junto com as soluções que encontrei.
Caso eu tenha esquecido de algum, fique a vontade para mandar comentários no final deste artigo.

### Comunicação

Existem várias ferramentas de chat como [Slack](https://slack.com/) e [Rocket Chat](https://rocket.chat/)
(as quais podemos chamar de versões modernas do [IRC](https://pt.wikipedia.org/wiki/Internet_Relay_Chat)),
que ajudam a **manter a equipe toda atualizada com o que está acontecendo na empresa**, em projetos, etc.

Dizer no chat "bom dia" ou "vou ficar ausente por 15 minutos",
não apenas mostra que você é educado, como também permite que todo mundo fique sabendo se você está ou não disponível.
Também é útil ativar notificações para saber quando alguém precisa da sua atenção.
Só cuidado para não deixá-las ligadas fora do horário de trabalho e
[virar um escravo](https://medium.com/o-novo-mercado/o-que-diabos-aconteceu-com-gera%C3%A7%C3%A3o-y-73cd16ccc5c9).

Os bons e velhos [Hangouts](https://hangouts.google.com/) e [Skype](https://www.skype.com/pt-br/)
continuam excelentes para comunicação por voz/vídeo, incluindo compartilhamento de tela para demonstrar algum trabalho.
Eu também gosto de [gravar screencasts em formato GIF](/2018/02/04/como-gravar-screencasts-em-formato-gif-no-macos)
para compartilhar com o time.

### Lugar privado para trabalhar

Quando eu me mudei para a casa onde moro hoje, procurei um lugar com um quarto extra,
pois já estava trabalhando remotamente e sabia que seria importante.

Você até pode trabalhar da sala, cozinha ou do seu próprio quarto por um tempo
(talvez pra fazer um teste e ver se trabalhar dessa forma funciona pra você?).
Porém, se trabalhar remoto é algo que você planeja fazer por mais tempo,
é importante **ter um espaço privado para fazer reuniões, evitar distrações
e se manter focado no trabalho** (sem seu filho gritando do seu lado).

### Disciplina

Chances são que a Netflix e o Playstation serão (discutivelmente) mais atrativos do que seu trabalho.
Aqui a solução é **ser maduro o suficiente pra entender que a empresa confia em você**, portanto faça o que é esperado.

<blockquote class="twitter-tweet" data-lang="pt" data-theme="light"><p lang="en" dir="ltr">Top Traits of Successful Remote Workers<br>* Strong communicators 💬<br>* Motivated self-starters 💪<br>* Results-oriented 📈<br>* Collaborative 🙎🏽👨🏻‍💼<br>* Trustworthy 🤝<br>* Disciplined ✅<br>* Organized 🗂</p>&mdash; Doist (@doist) [26 de fevereiro de 2018](https://twitter.com/doist/status/968191855228850176?ref_src=twsrc%5Etfw)</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### Conexão boa/confiável com a internet

Isso provavelmente é essencial para a maioria das profissões.
Apesar de eu nunca ter tido problemas com o meu provedor,
**eu sempre tenho uma conexão 4G de backup, caso algum problema aconteça**.

### Fuso-horário diferente

Trabalhar remoto significa que você (e seus colegas de trabalho) podem estar em qualquer parte do mundo.
Se for o caso, nem todo mundo irá necessariamente trabalhar no mesmo horário.
Consequentemente, **é importante ter uma forma de deixar as pessoas saberem no que você está trabalhando e qual o _status_ da sua tarefa atual**.
Ferramentas de gerenciamento de projetos como o [KanbanFlow](https://kanbanflow.com/),
[Pivotal Tracker](https://www.pivotaltracker.com/) e [Trello](https://trello.com/) são ótimas para isso.

### Você vê colegas/amigos menos frequentemente

Eu pensava que essa seria a pior parte.
Mas o fato é que usando ferramentas de _chat_ mencionadas acima, isso nunca foi um problema pra mim.
Porém sair com amigos de vez em quando, mesmo que apenas para um café, ajuda a manter sua sanidade mental.

### Ferramentas de trabalho

É importante ter um _home office_ com tudo que você precisa para trabalhar:
uma mesa/escrivaninha, uma cadeira e um notebook são essenciais (no meu caso; tudo depende do tipo de trabalho que você faz).

Outras coisas podem não ser essenciais, mas melhoram a qualidade do trabalho: ar condicionado, monitor externo, máquina de café
e **tudo que fizer a experiência de trabalhar de casa ser tão boa quanto a experiência de trabalhar em um escritório**.
Você não precisa comprar tudo de uma vez, principalmente se for sua primeira vez trabalhando de casa.

### Saúde

Ao ficar em casa o dia todo, você pode desenvolver problemas de saúde. Evitar isso não é tão difícil:

* Faça exercícios (uma caminhada diária já é melhor que nada)
* Se alimente de forma saudável
* Tenha uma cadeira confortável
* Vá ao ~~Google~~ médico se notar que tem algo errado

## Conclusão

Trabalhar de casa pode não ser pra todo mundo.
Experimente alguns dias por semana primeiro, caso a empresa que você trabalhe permita isso.

Mas definitivamente vale a pena experimentar, as vantagens são muitas!


Os desafios de trabalhar remotamente


Resumo de como foi o evento através de [stories do Instagram](https://www.instagram.com/lucascaton.com.br/):

:YouTube{id=jQrhOVn0q5A}

* Meu instagram: [@lucascaton.com.br](https://www.instagram.com/lucascaton.com.br/)
* Site oficial do evento: [www.rubyconf.org.au/2018](https://www.rubyconf.org.au/2018)
* Twitter oficial do evento: [@rubyconf_au](https://twitter.com/rubyconf_au)


Vídeo: RubyConf Austrália 2018


![image_description](/images/posts/2018/02/olu-eletu-13086-unsplash.jpg)

Há um dito popular que diz: "números não mentem, mas mentirosos inventam números".
O livro de 1954 de Darrell Huff "[Como Mentir com Estatística](https://www.amazon.com.br/dp/858057952X/)"
ensina truques simples para manipular a percepção das pessoas usando números.
Em tempos de [notícias falsas](http://www.bbc.com/portuguese/internacional-41843695),
a obra é um guia útil para identificar valores distorcidos.
É uma das leituras favoritas de [Bill Gates](https://www.gatesnotes.com/Books/How-to-Lie-with-Statistics).

A [estatística é importante](http://www.ipardes.pr.gov.br/ojs/index.php/revistaparanaense/article/view/89)
para sintetizar de forma quantitativa o grande volume de dados produzido pelo mundo.
Empresas de tecnologia [medem tudo](https://codeascraft.com/2011/02/15/measure-anything-measure-everything/);
o modelo de cobrança "_pay as you go_" adotado por provedores de serviço de computação em nuvem
depende da coleta de métricas de uso de recursos de processamento, armazenamento e rede, por exemplo.

Se você está começando um projeto de tecnologia e precisa entender o ambiente onde ele está inserido
para justificar certas escolhas, onde encontrar números confiáveis então?

Durante a faculdade, os professores sempre exigiam as fontes de informação em que baseavamos nossos trabalhos.
Mesmo sendo um setor de mudanças rápidas, é possível obter pesquisas e relatórios relevantes para observar
tendências baseadas em fatos na tecnologia.

"[_Technology Radar_](https://www.thoughtworks.com/pt/radar)" da ThoughtWorks analisa técnicas, plataformas,
ferramentas e linguagens & _frameworks_, indicando se vale a pena adotar ou não determinado item analisado.

O relatório "[_Internet Trends_](http://www.kpcb.com/internet-trends)" da KPCB,
umas das maiores firmas de capital de risco para tecnologia, oferece uma visão da adoção da Internet no mundo.
Na [apresentação de 2017](http://www.kpcb.com/file/2017-internet-trends-report), por exemplo,
verifica-se que 68% dos usuários pesquisados reagem de forma positiva a anúncios em formato de vídeo
que oferecem alguma recompensa (slide nº 26). Que tal usar essa estratégia no seu aplicativo?

As [publicações do Cetic.br](http://cetic.br/) fornecem um panorâma da Internet no Brasil.
A [edição de 2016](http://cetic.br/tics/domicilios/2016/individuos/C16A/) da pesquisa TIC Domicílios
destaca que mais de 40% dos usuários entrevistados acessam à Internet exclusivamente pelo celular.
Tá aí uma boa razão para tornar seu site responsivo, não?

O portal "[_Think with Google_](https://www.thinkwithgoogle.com/)" está cheio de dados e _insights_
para marcas e agências. Em 2017, por exemplo, as buscas usando o termo
"[perto de mim](https://www.thinkwithgoogle.com/intl/pt-br/tendencias-de-consumo/alerta-de-tendencia-buscas-por-perto-de-mim/)"
cresceram 75%, indicando que os usuários estão incorporando a geolocalização em seu comportamento de busca.
Por que não [enriquecer com metadados](https://developers.google.com/search/docs/data-types/local-business)
a página do seu negócio?

A [série de estudos com executivos](https://www.ibm.com/services/insights/c-suite-study/) conduzida pela IBM
e o [site da consultoria McKinsey](https://www.mckinsey.com/)
têm bastante conteúdo sobre gestão e estratégia para negócios digitais.
A 19ª edição do estudo da IBM mostra que
[34% das organizações pesquisadas estão investindo em inteligência artificial](https://www-01.ibm.com/common/ssi/cgi-bin/ssialias?htmlfid=GBE03877USEN)
para resolver problemas complexos ou remodelar partes de seus negócios.
Uma pesquisa da McKinsey revela que 80% das empresas consultadas planejam
ter 10% ou mais de sua carga de trabalho rodando na nuvem pública ou
[dobrar seu uso da nuvem pública](https://www.mckinsey.com/business-functions/digital-mckinsey/our-insights/making-a-secure-transition-to-the-public-cloud)
nos próximos 3 anos. Parece promissor estudar sobre IA e _cloud computing_, hein?

Por fim, um contraponto é necessário: "[você não é o Google](https://blog.bradfieldcs.com/you-are-not-google-84912cf44afb)".
O professor de ciência da computação Ozan Onay chama a atenção daqueles que seguem cegamente as práticas
anunciadas por grandes empresas de tecnologia: a escala dos problemas enfrentados pelo Facebook, Amazon
ou LinkedIn é bem maior que aquela dos problemas enfrentados pelas empresas onde trabalhamos.
Por isso, entender o problema que precisamos resolver antes de usar uma solução de terceiro é crucial.
"[O que as estatísticas revelam é sugestivo, mas o que escondem é essencial](https://www.safaribooksonline.com/library/view/the-little-book/9781292148458/html/chapter-109.html)".

Quais são as fontes de informação que você recomenda?


Estatísticas sobre tecnologia


Gravei essa videoaula com o objetivo de ajudar quem quer **aprender a criar uma página web do zero**,
sem ter conhecimentos prévios.

[Clique aqui](/assets/html/criando-sua-primeira-pagina-web-em-30-minutos-basico-sobre-html-e-css/index.html)
para ver a página que vamos criar.

É uma aula bem básica, porém com vários conceitos novos para quem está começando.
Se você tiver qualquer dúvida, me mande através dos comentários, eu vou responder **todos**! :)

:YouTube{id=KcPszmtF8cI}

:Notice[Para aprofundar seus conhecimentos, conheça o meu [curso completo](https://dwdp.lucascaton.com.br/)!]{type=info}

:Notice[Dica extra: [clique aqui](/2018/01/28/como-testar-seu-site-ou-app-em-diversos-dispositivos) para ver a técnica que eu uso para garantir que o layout fique bom independentemente da resolução e tamanho da tela do dispositivo!]{type=tip}

## Arquivos criados no vídeo:

Você pode usar qualquer nome de arquivo que quiser, isso não interfere em nada.
Apenas lembre-se de referenciar o nome dos arquivos corretamente no HTML ;)

### `index.html`

```html
<!DOCTYPE html>
<html lang='pt'>
  <head>
    <title>Super banda!</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="application.css">
  </head>

  <body>
    <main>
      <div class="logo">
        <img src="ruby.png" alt="Logo da banda">
      </div>

      <h1 class="band-name">Super banda!</h1>
      <h2 class="headline">A melhor banda do mundo</h2>

      <p>História da banda...  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <hr>

      <div class="concerts">
        <h2>Shows</h2>

        <table>
          <thead>
            <tr>
              <th>Cidade</th>
              <th>Data</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>São Paulo-SP</td>
              <td>01/10/2018</td>
            </tr>

            <tr>
              <td>Rio de Janeiro-RJ</td>
              <td>01/11/2018</td>
            </tr>

            <tr>
              <td>Belo Horizonte-MG</td>
              <td>01/12/2018</td>
            </tr>

            <tr>
              <td>Refice-PE</td>
              <td>01/01/2019</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </body>
</html>
```

### `application.css`

```css
body {
  width: 95%;
  max-width: 800px;
  margin: auto;
  background: url(bg.jpg) center;

  font-family: 'Lato';
  line-height: 1.5;
  color: white;
}

main {
  background: #00000054;
  padding: 5px 40px;
  margin-top: 20px;
  border-radius: 10px;
}

.logo, .band-name, .headline {
  margin: 0;
  text-align: center;
}

.concerts {
  margin: 30px 0;
  text-align: center;
  width: 100%;
}

.concerts table {
  background: #cb3a3ab3;
  border-radius: 10px;
  padding: 10px;
  margin: 0 auto;
}
```

### Imagens:

* [bg.jpg](/assets/html/criando-sua-primeira-pagina-web-em-30-minutos-basico-sobre-html-e-css/bg.jpg)
* [ruby.png](/assets/html/criando-sua-primeira-pagina-web-em-30-minutos-basico-sobre-html-e-css/ruby.png)


Vídeo: Criando sua primeira página web em 30 minutos (básico sobre HTML + CSS)


:YouTube{id=nNdMn0MHi8I}

Nesse vídeo, eu mostro como eu gravo screencasts (gravar a tela do meu computador),
converto para o formato GIF, subo para a nuvem e compartilho a URL em **menos de 30 segundos**!

Ferramentas mostradas no vídeo:

* [Droplr](https://droplr.com/)
* [GIPHY Capture](https://itunes.apple.com/au/app/giphy-capture-the-gif-maker/id668208984?mt=12)


Vídeo: Como gravar screencasts em formato GIF no macOS


![Um elefante e um tubarão se enfrentando](/images/posts/2018/01/postgresql-vs-mysql.jpg)

Muitos alunos do [meu curso](/cursos/cplc) me perguntam
porque eu recomendo o **PostgreSQL** em vez do **MySQL**.

O **PostgreSQL** vem se provando cada vez mais uma solução melhor
(não sou apenas eu quem está dizendo, boa parte da comunidade de desenvolvedores concorda com isso).
Mas eu gostaria de listar aqui alguns dos motivos pelos quais eu particularmente prefiro ele.

## 1) Transações a nível de tabela

[Transações](https://pt.wikipedia.org/wiki/Transa%C3%A7%C3%A3o_em_base_de_dados)
são extremamente úteis para uma série de tarefas, como por exemplo executar _queries_ perigosas
(apagando registros por exemplo) diretamente no console do
[SGBD](https://pt.wikipedia.org/wiki/Sistema_de_gerenciamento_de_banco_de_dados).

Ao programar um software, uma boa hora de usar transações é ao
[migrar o _schema_](http://mergulhao.info/2007/6/3/um-pouco-de-migracoes/) do seu banco, ou seja,
criar, modificar, apagar tabelas, colunas, índices, etc.

O **MySQL** no entanto **não** oferece transações a nível de tabela. Por exemplo:

```sql
BEGIN;
CREATE TABLE `users` (`name` varchar(255));
ROLLBACK;
```

Ao rodar as _queries_ acima, seria esperado que a tabela `users` fosse criada e então apagada,
no entanto ela permanece.

:Notice[Execute o comando `SHOW TABLES;` para verificar.]{type=info}

Já no **PostgreSQL**:

```sql
BEGIN;
CREATE TABLE "users" ("name" character varying);
ROLLBACK;
```

Tudo funciona conforme o esperado e a tabela `users` é completamente removida.

:Notice[Execute o comando `\d` para verificar.]{type=info}

## 2) Funcionalidades

* **Full-text search** - O suporte à busca _full-text_ do **PostgreSQL** não é só melhor que a do **MySQL**
como foi incluída muito tempo antes.
* **UUID** - Geração nativa de campos [UUID](https://pt.wikipedia.org/wiki/Identificador_%C3%BAnico_universal)
é uma funcionalidade (até o momento) exclusiva do **PostgreSQL**, a qual pode inclusive ser usada como chave-primária.
Mais informações na [documentação oficial](https://www.postgresql.org/docs/current/static/datatype-uuid.html).

## 3) Encoding padrão

O tipo de codificação padrão do **PostgreSQL** é o
[UTF-8](https://pt.wikipedia.org/wiki/UTF-8).
Simples assim!

~~Já o padrão do **MySQL** é `latin1`, o qual simplesmente não é preparado para
funcionar em qualquer canto do mundo (enquanto que o `UTF-8` é) e também não
aceita _emojis_. Além disso, você pode ter tabelas com diferentes _encodings_, o
que na minha opinião é um tanto confuso.~~

:Notice[**Atualização**: em abril/2018, a [versão 8.0 do MySQL foi liberada](https://mysqlserverteam.com/whats-new-in-mysql-8-0-generally-available) e o _character set_ padrão passou a finalmente ser o `UTF-8`! Obrigado por avisar, [Fernando](/2018/01/31/6-motivos-para-usar-o-postgresql-em-vez-do-mysql/#comment-4385635482)!]{type=warning}

## 4) Tipos de dados (colunas)

A maioria dos tipos de colunas são mais amigáveis e consistentes no **PostgreSQL** que no **MySQL**.
Exemplo: um dado [booleano](https://pt.wikipedia.org/wiki/Booleano)
é guardado como `boolean` no **PostgreSQL** e - por falta de algo mais apropriado -
guardado como `tinyint(1)` no **MySQL**.

O tipo `tinyint`, a princípio, guarda um valor inteiro de 1 dígito.
Para guardar um boleano nesse tipo de campo, usamos `1` ou `0`,
o que é popularmente conhecido como "gambiarra" :)

### Outros exemplos bacanas de tipos do **PostgreSQL** são:

* [jsonb](https://www.postgresql.org/docs/current/static/datatype-json.html) - no qual você guarda dados em
[formato JSON](https://pt.wikipedia.org/wiki/JSON) de forma bastante flexível, com direito à
[indices GIN](https://www.postgresql.org/docs/current/static/gin.html) e tudo mais.
Quem usava um [banco de dados NoSQL](https://pt.wikipedia.org/wiki/NoSQL) só para ter dados sem
_schema_ definido, pode usar esse tipo de dado para potencialmente resolver esse problema.
* [array](https://www.postgresql.org/docs/current/static/arrays.html) - permite definir _arrays_
multidimensionais de tamanhos variáveis.
* Além de [enumerations](https://www.postgresql.org/docs/current/static/datatype-enum.html),
[tipos geométricos](https://www.postgresql.org/docs/current/static/datatype-geometric.html),
[endereços de rede](https://www.postgresql.org/docs/current/static/datatype-net-types.html)
e [vários outros](https://www.postgresql.org/docs/current/static/datatype.html).

## 5) Comunidade e licenças

Depois que o **MySQL** foi comprado pela Oracle, foi criado um
[_fork_](https://pt.wikipedia.org/wiki/Bifurca%C3%A7%C3%A3o) do projeto, chamado
[MariaDB](https://mariadb.org/about/), o qual no começo se comprometia a ser compatível com o
**MySQL**, porém totalmente livre em termos de licença.
Infelizmente ele já não é 100% compatível com o **MySQL**,
o que talvez seja um problema para algumas empresas ou desenvolvedores (ou não).

Já o **PostgreSQL** sempre foi [open-source](https://github.com/postgres/postgres)
e apesar de ter uma [licença própria](https://opensource.org/licenses/postgresql),
ela é muito parecida com as licenças **BSD** e **MIT**.

## 6) Preços

Muita gente não sabe, mas a versão completa do **MySQL**
[não é gratuita](https://www.mysql.com/products/).

O **PostgreSQL** por sua vez oferece todas as suas funcionalidades pelo mesmo preço: **zero**!

## Conclusão

Do jeito que eu listei as comparações aqui, pode parecer que o **MySQL** é o pior banco de dados
do mundo, mas de fato ele está longe disso.
O fato de ser tão popular e de tantas empresas usarem e apostarem nele provam isso.

Entretanto, pelos motivos citados acima, **PostgreSQL** é minha escolha pessoal.
Deixe nos comentários abaixo se você concorda ou discorda,
discussões (saudáveis) são sempre bem-vindas! 😉


6 motivos para usar o PostgreSQL em vez do MySQL


:YouTube{id=T2irIAXHyl8}

Nesse vídeo eu vou mostrar como testar o comportamento do seu **site** ou **web app** em diferentes dispositivos, para que você possa garantir que o layout fique bom independentemente da resolução e tamanho da tela do dispositivo.

Essa técnica é conhecida como **design responsívo** e as ferramentas que você vai precisar para testar vão te surpreender :)


Vídeo: Como testar seu site ou app em diversos dispositivos


:Notice[**Atualização:** a [versão 2019](/2019/02/03/guia-desenvolvedor-web-2019) já está disponível!]{type=warning}

---

Todos os dias, milhares de pessoas começam a programar.
Mas a decisão de qual caminho escolher, o que estudar, no que se especializar fica cada vez mais difícil, pois há cada vez mais opções.

Além disso, uma parte do mercado espera que você saiba o máximo de coisas possíveis (também conhecido como desenvolvedor "_full stack_"),
enquanto que a outra parte prefere profissionais que se especializam em uma determinada área.

Seja como for, o _roadmap_ abaixo (criado por [Kamran Ahmed](https://github.com/kamranahmedse/developer-roadmap)
e traduzido/adaptado por mim) pode ajudar a filtrar o mar de tecnologias disponíveis para profissionais da área.
Bons estudos! 😉

## 🚀 Introdução

[![introdução](/images/posts/2018/01/mapa-introducao.png)](/images/posts/2018/01/mapa-introducao.png)

## 🎨 Front-end

Novos frameworks não param de aparecer.
Saber bem o básico de JavaScript e CSS ainda é mais importante que frameworks.

[![front-end](/images/posts/2018/01/mapa-frontend.png)](/images/posts/2018/01/mapa-frontend.png)

## 🎛 Back-end

Para o _back-end_, eu continuo recomendando a linguagem **Ruby**.

[![back-end](/images/posts/2018/01/mapa-backend.png)](/images/posts/2018/01/mapa-backend.png)

## 👷 DevOps

**Docker** (e _containers_ em geral) estão cada vez mais relevantes.

[![dev-ops](/images/posts/2018/01/mapa-devops.png)](/images/posts/2018/01/mapa-devops.png)


Desenvolvimento web em 2018


![image_description](/images/posts/2017/12/terminal.png)

Há alguns dias, escrevi um artigo explicando [a diferença entre **Terminal**, **IDE** e
**Editor de Textos**](/2017/12/30/qual-a-diferenca-entre-terminal-ide-e-editor-de-textos).

Basicamente, **terminal** é um programa que usamos para gerenciar recursos mais avançados do
sistema. É geralmente uma tela preta, sem botões e sem elementos gráficos, a qual você interage
digitando linhas de comandos.

Como você deve imaginar, existem vários comandos que já vem por padrão em cada sistema operacional.
Esses comandos executam tarefas distintas e resolvem diferentes tipos de problemas, muitos dos quais
são relevantes para programadores.

Entretanto, para quem está começando no mundo da programação, pode ser um pouco assustador ver a
quantidade de comandos disponíveis. Na prática, essa quantidade é infinita, já que programas e
pacotes instalados também podem disponibilizar comandos próprios para serem executados, também
conhecidos como **CLI**s (_Command-line interface_, ou Interface de Linha de Comando).

Vou listar abaixo alguns comandos úteis (os mais básicos) que os sistemas operacionais já trazem
por padrão, mas antes vamos entender como executá-los e o que podemos esperar após cada execução.

### Como executar os comandos

O processo é bem simples: você digita algum comando e pressiona `enter`.
O resultado do comando, na maioria das vezes, será exibido na tela.
Nesse momento, várias coisas podem acontecer:

* O comando é executado **corretamente** e uma mensagem de sucesso aparece.
* O comando é executado **corretamente** porém nada é exibido (raro de acontecer).
* O comando é executado e um **erro** é exibido.
* O comando é executado, um **erro** acontece, porém nada é exibido na tela (muito raro de acontecer).

### Case-sensitive

Lembre-se que os comandos são _case-sensitive_ (sensíveis à caixa), ou seja,
há diferença entre digitar um comando em **maiúsculas** e **minúsculas**.
Na grande maioria das vezes, tudo deve ser digitado com **minúsculas**.

---

## Comandos para Windows

![image_description](/images/posts/2018/01/terminal-windows.png)

:Notice[Todos os comandos foram testados no **Windows 10**.]{type=warning}

O terminal no **Windows** é conhecido como **"Prompt de Comando"**
(apesar de existirem outros como o **PowerShell** e o novo **Windows Terminal**).

Para abri-lo, clique no **Menu Iniciar**, digite `cmd` e pressione `enter`.

:Notice[Se você estiver usando o **PowerShell**, alguns comandos podem ser ligeiramente diferentes (eles podem se parecer mais com os comandos do Linux/macOS).]{type=warning}

### ➡ `date`

Exibir a data atual.

```
C:\> date
A data atual é: Qui 23/10/2019
```

### ➡ `time`

Exibir a hora atual.

```
C:\> time
A hora atual é:  1:42:29.68
```

### ➡ `echo %cd%`

Exibir qual é o diretório atual.

```bash
C:\> echo %cd%
C:\
```

### ➡ `dir`

Exibir arquivos/diretórios do diretório atual.

```
C:\> dir
Volume in drive C has no label.
Volume Serial Number is 82C2-03F2

Directory of C:\

10/21/2019  09:34 PM    <DIR>          PerfLogs
10/22/2019  10:52 PM    <DIR>          Program Files
10/21/2019  11:08 PM    <DIR>          Program Files (x86)
10/21/2019  10:07 PM    <DIR>          samples
10/21/2019  09:45 PM    <DIR>          Scripts
10/21/2019  09:30 PM    <DIR>          Users
10/22/2019  10:50 PM    <DIR>          Windows
              0 File(s)              0 bytes
              7 Dir(s)  99,198,668,800 bytes free
```

### ➡ `cd`

Mudar o diretório atual.

```
C:\> cd Documentos

C:\Documentos>
```

Voltar para o diretório acima.

```
C:\Documentos> cd ..

C:\>
```

### ➡ `mkdir`

Criar uma pasta.

```
C:\> mkdir meus_projetos

C:\> dir
(...)
23/10/2019  07:34  <DIR>  meus_projetos
```

Criar pasta e subdiretórios (de uma só vez).

```
C:\> mkdir meus_projetos\repositorios\ruby

C:\> cd meus_projetos
C:\meus_projetos> cd repositorios
C:\meus_projetos\repositorios> cd ruby
C:\meus_projetos\repositorios\ruby>
```

### ➡ `copy`

Copiar (duplicar) um arquivo.

```
C:\Documentos> copy arquivo1.txt arquivo2.txt
        1 arquivo(s) copiado(s).
```

### ➡ `move`

Mover (ou renomear) um arquivo ou pasta.

```
C:/> move nome_antigo.txt nome_novo.txt
(O arquivo será renomeado)
```

```
C:/Documentos> move telefones.txt meus_projetos
(O arquivo será movido para a pasta `meus_projetos`)
```

### ➡ `del`

Deletar um arquivo.

:Notice[**Cuidado:** o terminal não pede confirmação antes de deletar; tome muito cuidado para não deletar o arquivo errado!]{type=danger}

```
C:/Documentos> del telefones.txt
```

### ➡ `rmdir`

Deletar uma pasta vazia.

:Notice[**Cuidado:** o terminal não pede confirmação antes de deletar; tome muito cuidado para não deletar a pasta errada!]{type=danger}

```
C:/Documentos> rmdir meus_projetos
```

### ➡ `rmdir /s`

Deletar uma pasta que não esteja vazia.

```
C:/Documentos> rmdir /s meus_projetos
```

### ➡ `type`

Exibir o conteúdo de um arquivo.

```
C:/Documentos> type telefones.txt
(11) 1111-1111
(22) 2222-2222
(33) 3333-3333
```

### ➡ `cls`

Limpar o terminal.

```
C:\> cls
```

---

## Comandos para macOS e Linux

Para abrir o terminal no **macOS**, abra a pasta de **Aplicativos** (_Applications_)
e em seguida a pasta **Utilitários** (_Utilities_). Agora basta abrir o aplicativo **Terminal**.

Duas alternativas bastante interessantes (e populares entre programadores) são o
[iTerm2](https://www.iterm2.com/) (_screenshot_ abaixo) e o
[Hyper](https://hyper.is/).

![image_description](/images/posts/2017/12/terminal.png)

Já para abrir o terminal no **Ubuntu Linux**, clique no ícone do **Ubuntu** no canto superior-esquerdo,
digite `terminal` e selecione o aplicativo **Terminal** na lista de resultados que vai aparecer:

![image_description](/images/posts/2018/01/terminal-ubuntu.png)

### ➡ `date`

Exibir a data e hora atuais.

```bash
$ date
# Wed 23 Oct 2019 07:36:36 AEST
```

### ➡ `cal`

Exibir um calendário.

```bash
$ cal
#     October 2019
# Su Mo Tu We Th Fr Sa
#        1  2  3  4  5
#  6  7  8  9 10 11 12
# 13 14 15 16 17 18 19
# 20 21 22 23 24 25 26
# 27 28 29 30 31
```

### ➡ `uptime`

Exibir há quanto tempo você não desliga/reinicia seu computador.

```bash
$ uptime
# 18:58:47 up 34 days, 9:20, 1 user, load average: 0.00, 0.01, 0.05
```

### ➡ `pwd`

Exibir qual é o diretório atual.

```bash
$ pwd
# /Users/usuario/Documents
```

### ➡ `ls`

Exibir arquivos/diretórios do diretório atual.

```bash
$ ls
# foto.png      telefones.txt
```

Exibir arquivos/diretórios do diretório atual em formato de lista.

```bash
$ ls -l
# -rw-r--r--@ 1 usuario  staff  4787  6 Mar 17:55 foto.png
# -rw-r--r--  1 usuario  staff  8186  6 Mar 17:54 telefones.txt
```

Exibir arquivos/diretórios do diretório atual incluindo arquivos ocultos.

```bash
$ ls -la
# drwx------+  7 usuario  staff   238  6 Mar 17:57 .
# drwxr-xr-x+ 80 usuario  staff  2720  6 Mar 17:57 ..
# -rw-r--r--   1 usuario  staff     0  6 Mar 17:56 .arquivo_oculto.txt
# -rw-r--r--@  1 usuario  staff  4787  6 Mar 17:55 foto.png
# -rw-r--r--   1 usuario  staff     0  6 Mar 17:54 telefones.txt
```

### ➡ `cd`

Mudar o diretório atual.

```bash
$ pwd
# /Users/usuario

$ cd Documents

$ pwd
# /Users/usuario/Documents
```

Voltar para o diretório acima.

```bash
$ pwd
# /Users/usuario/Documents

$ cd ..

$ pwd
# /Users/usuario
```

Voltar para o diretório do seu usuário (conhecido como pasta **"home"**).

```bash
$ cd ~

$ pwd
# macOS: /Users/usuario
# Linux: /home/usuario
```

### ➡ `mkdir`

Criar uma pasta.

```bash
$ mkdir meus_projetos

$ ls
# meus_projetos
```

Criar pasta e subdiretórios.

```bash
$ mkdir -p meus_projetos/repositorios/ruby

$ ls
# meus_projetos

$ cd meus_projetos

$ ls
# repositorios

$ cd ruby

$ ls
# Diretório vazio
```

### ➡ `cp`

Copiar (duplicar) um arquivo.

```bash
cp arquivo1.txt arquivo2.txt
```

### ➡ `mv`

Mover (ou renomear) um arquivo ou pasta.

```bash
mv nome_antigo.txt nome_novo.txt
# O arquivo será renomeado
```

```bash
mv telefones.txt ~/Documents/
# O arquivo será movido para a pasta ~/Documents/
```

### ➡ `rm`

Deletar um arquivo.

:Notice[**Cuidado:** o terminal não pede confirmação antes de deletar; tome muito cuidado para não deletar o arquivo errado!]{type=danger}

```bash
rm telefones.txt
```

### ➡ `rm -rf`

Deletar uma pasta.

:Notice[**Cuidado:** o terminal não pede confirmação antes de deletar; tome muito cuidado para não deletar a pasta errada!]{type=danger}

```bash
$ rm -rf meus_projetos
```

### ➡ `touch`

Criar um arquivo em branco (vazio).

```bash
$ touch emails.txt
```

### ➡ `cat`

Exibir o conteúdo de um arquivo.

```bash
$ cat telefones.txt
# (11) 1111-1111
# (22) 2222-2222
# (33) 3333-3333
```

### ➡ `clear`

Limpar o terminal (o atalho `Ctrl+l` também funciona na maioria dos terminais).

```bash
$ clear
```

---

## Como conseguir ajuda com um determinado comando?

Digite o comando acompanhado de `-h` ou `--help` no final,
ou ainda utilize o comando `man <comando>`.
Exemplos:

```bash
$ rails -h
```

```bash
$ vim --help
```

```bash
$ man cat
```


Comandos para o terminal (Windows, macOS e Linux)


## Terminal

### O que é?

É um programa disponível em todos os sistemas operacionais para gerenciamento de recursos mais avançados do sistema.
É geralmente uma tela preta, sem botões e sem elementos gráficos, onde você utiliza apenas comandos para interagir.

![image_description](/images/posts/2017/12/terminal.png)

<small>Exemplo: **iTerm2**</small>

Pode ser um pouco assustador ver a quantidade de comandos disponíveis,
para quem está começando no mundo da programação, por isso escrevi
[um pequeno guia com uma lista de comandos](/2018/01/07/comandos-para-o-terminal-windows-macos-e-linux).

### Windows

No **Windows**, temos diferentes terminais, como o **Prompt de Comando** e o **PowerShell**.

### Linux

No **Linux**, ele é chamado de **Terminal** mesmo.

### macOS

No **macOS**, ele também é chamado de **Terminal**.

Apesar de o sistema trazer um terminal instalado, eu recomendo um outro terminal chamado **iTerm2**,
mais poderoso, o qual pode ser baixado através do site [iterm2.com](https://www.iterm2.com/).

---

## IDE

### O que é?

É um programa que não vem instalado por padrão e é utilizado para o desenvolvimento de softwares.
É geralmente uma janela com muitos botões, muitos elementos gráficos e uma área para digitar os códigos.

![image_description](/images/posts/2017/12/ide.png)

<small>Exemplo: **Xcode**, para programar apps para iOS (iPhone e iPad), macOS, watchOS e tvOS</small>

### Exemplos de IDEs:

* [Xcode](https://developer.apple.com/xcode/)
* [Android Studio](https://developer.android.com/studio/)
* [Visual Studio](https://www.visualstudio.com/vs/)
* [IntelliJ IDEA](https://www.jetbrains.com/idea/)
* [Eclipse](https://eclipse.org/)

---

## Editor de Textos

### O que é?

Para programar em algumas linguagens ([Ruby](/tags/ruby/) por exemplo),
não é necessário uma **IDE**, podemos utilizar apenas um **editor de texto**, que é mais simples e mais rápido.

Editores servem para editar textos e também códigos.
Os editores que vem instalado por padrão (**Bloco de Notas**, por exemplo) são simples demais,
portanto não são recomendados para desenvolver programas.
No geral, eles são apenas uma janela com poucos botões (às vezes nenhum) e uma grande área para digitar os códigos.

![image_description](/images/posts/2017/12/editor.png)

<small>Exemplo: **Atom**</small>

### Exemplos de editores de texto:

* [VS Code](https://code.visualstudio.com/)
* [Atom](https://atom.io/)
* [Sublime Text](https://www.sublimetext.com/)
* [Vim](http://www.vim.org/), [gVim](https://gvim.en.softonic.com/) e [MacVim](http://macvim-dev.github.io/macvim/)


Qual a diferença entre Terminal, IDE e Editor de Textos?


:YouTube{id=DpzYqg-jBtI}

Dia desses uma pessoa me perguntou algumas coisas sobre diploma/faculdade de computação e após responder percebi que poderia ser um tema interessante para um vídeo.

O resultado você vê no vídeo acima, espero que goste e não deixe de comentar sua opinião aqui em baixo :)


Vídeo: Fazer ou não faculdade para trabalhar com computação?


:YouTube{id=Ts5ZeOsvJ9s}

Nesse novo screencast, vou ensinar como adicionar uma interessante funcionalidade ao seu app: **autenticação usando o Facebook**.

Para ficar mais interessante, usei um projeto real: o [Easy Bills](https://www.easybills.io/?locale=pt-BR).
O projeto usa **Ruby** e **Ruby on Rails** e adicionalmente, eu incluí a gem [omniauth-facebook](https://github.com/mkdynamic/omniauth-facebook).

---

Abaixo, você encontra os arquivos que eu criei ou alterei no vídeo:

`Gemfile`:

```ruby
gem 'omniauth-facebook'
```

`app/assets/images/social-sign-in/facebook.svg`:

```xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="35px" height="35px" viewBox="0 0 300 300" enable-background="new 0 0 266.893 266.895"
   xml:space="preserve">
<path id="f" fill="#FFFFFF" d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935
  l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585
  v99.803H182.409z"/>
</svg>
```

`app/assets/stylesheets/authentication.sass` (ou `app/assets/stylesheets/application.sass`):

```sass
@import 'modules/social-buttons'
```

`app/assets/stylesheets/modules/social-buttons.sass`:

```sass
// https://github.com/vagnervjs/social-signin-btns

$services: google #DD4B39, facebook #3B5998, twitter #00ACED, microsoft #e3b30d, github #2a2a2a, foursquare #95c330, instagram #906248, linkedin #0b5ea3, evernote #5ca629, dropbox #1b73d1

.btn-si
  background-position: 1em
  background-repeat: no-repeat
  background-size: 2em
  border-radius: .5em
  border: none
  color: #fff
  cursor: pointer
  font-size: 1em
  line-height: 1em
  padding: 0 2em 0 4em
  text-decoration: none
  transition: all .5s

@each $service in $services
  .btn-#{nth($service, 1)}
    background-color: #{nth($service, 2)}

    &, &:hover, &:active
      background-image: image-url("social-sign-in/#{nth($service, 1)}.svg")
      color: #fff

    &:hover
      background-color: lighten(nth($service, 2), 10%)

    &:active
      background-color: darken(nth($service, 2), 10%)

.btn-si-a
  padding: 15px 15px 15px 65px !important
  font-family: arial

.smaller .btn-si-a
  padding-left: 40px !important
  font-size: 12px
```

`app/controllers/users/omniauth_callbacks_controller.rb`:

```ruby
module Users
  class OmniauthCallbacksController < Devise::OmniauthCallbacksController
    def facebook
      @user = User.from_omniauth(request.env['omniauth.auth'])

      if @user.persisted?
        sign_in_and_redirect @user, event: :authentication # Throws if @user is not activated
        set_flash_message(:notice, :success, kind: 'Facebook') if is_navigational_format?
      else
        session['devise.facebook_data'] = request.env['omniauth.auth']
        redirect_to new_user_registration_url
      end
    end

    def failure
      redirect_to new_user_session_path
    end
  end
end
```

`app/models/concerns/omniauthenticable.rb`:

```ruby
module Omniauthenticable
  extend ActiveSupport::Concern

  included do
    def self.from_omniauth(auth)
      existing_user = User.find_by(email: auth['info']['email'])

      if existing_user
        existing_user.update!(provider: auth.provider, uid: auth.uid)
        existing_user
      else
        where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
          user.email                 = auth.info.email
          user.password              = Devise.friendly_token[0, 20]
          user.password_confirmation = user.password
          user.name                  = auth.info.name
          user.photo                 = auth.info.image
          user.skip_confirmation!
        end
      end
    end

    def self.new_with_session(params, session)
      super.tap do |user|
        data = session['devise.facebook_data'] &&
          session['devise.facebook_data']['extra']['raw_info']

        user.email = data['email'] if data && user.email.blank?
      end
    end
  end
end
```

`app/models/user.rb`:

```ruby
class User < ApplicationRecord
  include Omniauthenticable

  devise :omniauthable, omniauth_providers: %i[facebook]

  # etc
end
```

`app/views/devise/sessions/new.html.haml`:

```haml
%hr.m-t-25
.m-b-10 or

.fg-line.m-b-10
  = link_to 'Sign in with Facebook', user_facebook_omniauth_authorize_path,
    class: 'btn btn-si btn-si-a btn-facebook'
```

`config/initializers/devise.rb`:

```ruby
config.omniauth :facebook, 'FACEBOOK_APP_ID', 'FACEBOOK_APP_SECRET'
```

`config/routes.rb`:

```ruby
devise_for :users, controllers: {
  omniauth_callbacks: 'users/omniauth_callbacks',
  # etc
}
```

`db/migrate/20171204023306_add_omniauth_to_users.rb`:

```ruby
class AddOmniauthToUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :provider, :string
    add_column :users, :uid,      :string
  end
end
```


Vídeo: Permita que usuários façam login no seu app Rails usando o Facebook


Quem nunca passou por isso?!

:YouTube{id=dpZMciLOBFU}


Trocar de ferramenta não vai ajudar você a resolver seu problema


Eis os motivos que me fizeram começar e os que até hoje me fazem continuar!

:YouTube{id=pomeohwS9rw}

Artigo mencionado no vídeo: [Refiz meu blog do zero](/2017/10/04/refiz-meu-blog-do-zero)

---

### Como começar?

Uma das maneiras mais práticas de começar é usando o [Wordpress](https://br.wordpress.com/). É uma plataforma gigante, de graça e tem muitos temas e plugins. Sem contar a comunidade que é gigante, então é muito fácil encontrar no Google soluções para qualquer problema que você eventualmente tenha.

Se você quiser algo um pouco mais avançado (gerando páginas que tem muitos benefícios), você pode usar o
[Jekyll ou o Hugo](/2017/10/04/refiz-meu-blog-do-zero#jekyll-vs-hugo).


Por que você deveria ter um blog?


[![Mensagens de commits do Git](/images/posts/2017/10/git-commits-messages.jpg)](https://xkcd.com/1296/)

Se você nunca viu/escreveu mensagens de _commits_ como estas acima, parabéns.

Apesar de a maioria dos desenvolvedores escrever boas mensagens, não podemos generalizar:
sempre tem alguém para ~~provar que a zueira não tem limites~~ estragar a estatística.

## Como escrever boas mensagens

Devemos escrever a mensagem no presente? No futuro? Em português? Em inglês?
São infinitas as formas as quais uma mensagem de _commit_ pode ser escrita.

Antes de mais nada, você deveria escrever as mensagens de _commits_ em **inglês**. Eu escrevi um
artigo com [8 motivos para programar em inglês](/2015/05/22/8-motivos-pra-programar-em-ingles), e os
mesmos motivos se aplicam aqui.

O correto é escrever na **forma imperativa**.
Ou seja, você precisa sempre estar apto a completar a seguinte frase:

> If applied, this commit will `your subject line here`

Tradução livre: "Se aplicado, esse commit vai `seu resumo aqui`"

## Exemplos:

Encontrei exemplos bacanas [nesse artigo (em inglês)](https://chris.beams.io/posts/git-commit/)
e vou listá-los abaixo:

* ✅ If applied, this commit will `Refactor subsystem X for readability`
* ✅ If applied, this commit will `Update getting started documentation`
* ✅ If applied, this commit will `Remove deprecated methods`
* ✅ If applied, this commit will `Release version 1.0.0`
* ✅ If applied, this commit will `Merge pull request #123 from user/branch`

Note como isso **não** fica legal escrevendo de forma não-imperativa:

* ❌ If applied, this commit will `Fixed bug with Y`
* ❌ If applied, this commit will `Changing behavior of X`
* ❌ If applied, this commit will `More fixes for broken stuff`
* ❌ If applied, this commit will `Sweet new API methods`

Nota: não é preciso adicionar um ponto no final da mensagem.

## Resumo e corpo da mensagem do commit

Encontrei nesse [artigo](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
um modelo (em inglês) de mensagem para commits:

```
Capitalized, short (50 chars or less) summary

More detailed explanatory text, if necessary.  Wrap it to about 72
characters or so.  In some contexts, the first line is treated as the
subject of an email and the rest of the text as the body.  The blank
line separating the summary from the body is critical (unless you omit
the body entirely); tools like rebase can get confused if you run the
two together.

Write your commit message in the imperative: "Fix bug" and not "Fixed bug"
or "Fixes bug."  This convention matches up with commit messages generated
by commands like git merge and git revert.

Further paragraphs come after blank lines.

- Bullet points are okay, too

- Typically a hyphen or asterisk is used for the bullet, followed by a
  single space, with blank lines in between, but conventions vary here

- Use a hanging indent
```

Basicamente a primeira linha - conhecida como _summary_ (resumo) - deve conter 50 ou menos caracteres,
enquanto que as linhas seguintes - conhecidas como _body_ (corpo) - pode conter quantas linhas forem necessárias, limitadas a 72 caracteres por linha.

No corpo, eu costumo incluir explicações detalhadas, links, listas e qualquer outra coisa relevante quando necessário.

## Por que uma boa mensagem importa?

Alguns motivos:

- Caso um bug seja introduzido, uma boa mensagem de _commit_ facilita a identificação de onde/quando isso aconteceu;
- Se você [reverter um commit](https://git-scm.com/docs/git-revert), a mensagem será `Revert "mensagem original"`, deixando claro o que está sendo revertido;
- Boas mensagens se tornam útias ao exibir listas de commits através de comandos como `git blame`, `git log`, `git shortlog`, etc.

Para finalizar, a regra principal é o **bom senso**.
Se você usar como desculpa que não teve 10 segundos pra pensar em uma boa mensagem, eu vou certamente duvidar :)


Como escrever mensagens de commits no Git


![ruby](/images/posts/2017/10/ruby.jpg)

A versão `2.5.0-preview1` da linguagem Ruby acaba de ser liberada.
Por não se tratar de uma versão estável, seu uso ainda **não é recomendado**.

## Novas funcionalidades

### Backtrace invertido

O **backtrace** (lista de métodos que foram executados antes de um erro acontecer) vai começar a ser exibida em ordem inversa.
Usando o seguinte código como exemplo:

```ruby
# Arquivo `teste.rb`

def a
  b
end

def b
  c
end

def c
  raise 'error'
end

a
```

**Executando com Ruby 2.4:**

```bash
$ ruby teste.rb
teste.rb:10:in `c': error (RuntimeError)
    from teste.rb:6:in `b'
    from teste.rb:2:in `a'
    from teste.rb:13:in `<main>'
```

**Executando com Ruby 2.5:**

```bash
Traceback (most recent call last):
    3: from teste.rb:13:in `<main>'
    2: from teste.rb:2:in `a'
    1: from teste.rb:6:in `b'
```

### Rescue/else/ensure serão permitidos dentro de blocos do/end

**Executando com Ruby 2.4:**

Atualmente nós só conseguimos capturar `exceptions` dentro de métodos ou blocos `begin`/`end`, ou seja:

```ruby
begin
  raise 'boom'
rescue Exception => e
  puts "Erro capturado: #{e.message}"
end
```

Saída: `Erro capturado: boom`.

```ruby
def meu_metodo
  raise 'boom'
rescue Exception => e
  puts "Erro capturado: #{e.message}"
end

meu_metodo
```

Saída: `Erro capturado: boom`.

Porém o código abaixo não funciona:

```ruby
[1, 2, 3].map do |i|
  raise 'boom'
rescue Exception => e
  puts "Erro capturado: #{e.message}"
end
```

    syntax error, unexpected keyword_rescue, expecting keyword_end
    rescue Exception => e

**Executando com Ruby 2.5:**

Na versão que está para ser lançada, isso é possível. A saída do código acima será:

    Erro capturado: boom
    Erro capturado: boom
    Erro capturado: boom

### Novo método yield_self

De acordo com a [documentação oficial](https://docs.ruby-lang.org/en/trunk/Object.html#method-i-yield_self):

> Yields self to the block and returns the result of the block.

Apesar de ser muito parecido com o método `tap` da classe `Object` (que é muito útil, diga-se de passagem), seus **retornos** são diferentes.

Enquanto que com o método `tap` você abre um bloco e no final o próprio objeto é retornado, com o `yield_self`, o resultado do bloco é retornado.

Exemplo:

```ruby
objeto.tap { |obj| obj.save } # => objeto
# O método `save` foi chamado,
# mas `objeto` é que é retornado
```

```ruby
objeto.yield_self { |obj| obj.save } # => true
# A última execução do bloco será retornada.
# Ou seja, se supormos que o método `save` retorna `true`,
# o retorno dessa linha toda será `true` também
```

Não consegui pensar em um caso prático pra usá-lo, mas com certeza teve uma razão para ter sido adicionado :)

## Outras mudanças

A nova versão também trará outras novidades, como suporte ao Unicode versão 10, que inclui
[56 emojis criados esse ano](https://emojipedia.org/emoji-5.0/).
Você pode ver uma lista completa com todas as novidades
[nesse documento](https://github.com/ruby/ruby/blob/v2_5_0_preview1/NEWS).

---

Para instalar o **Ruby 2.5** (apesar de ainda não recomendado por não ser uma versão estável) através do RVM, basta rodar:

    rvm install 2.5.0-preview1

_Happy hacking!_


O que haverá de novo no Ruby 2.5?


[Começei esse blog](/2009/07/14/primeiro-post) usando **WordPress**.
Alguns anos depois [migrei para Enki](/2011/05/19/porque-voltei-a-usar-o-wordpress) (uma _engine open-source_ baseada em Ruby on Rails), mas acabei voltando tudo como era antes depois de apenas 2 semanas e relatando o motivo [nesse artigo](/2011/05/19/porque-voltei-a-usar-o-wordpress).
Tudo estava relativamente bem desde então; WordPress continua sendo sensacional na minha opinião.

Mas eu queria mudar algumas coisas e abandonar o WordPress é sempre um _trade-off_.
A migração acabou dando mais trabalho do que eu previ, no entanto fiquei muito satisfeito com o resultado.
Vou contar um pouco o que foi alterado e porquê:

## Nova fase do blog/site

Talvez o motivo mais relevante para eu ter feito todas essas mudanças, é porque pretendo publicar mais conteúdo aqui.
Alunos do [meu curso](/cursos/cplc) me pedem explicações fora do contexto do curso e que eu acho que também seria interessante para quem já me segue aqui.

## Páginas estáticas

A maior alteração foi começar usar uma ferramenta que gere arquivos estáticos.
Isso significa que nesse exato momento você **não** está lendo um artigo gerado dinamicamente, são apenas arquivos HTML, CSS e JS pré-compilados (e recompilados quando eu escrevo um novo artigo ou altero um antigo).

Isso tem uma série de vantagens, sendo **performance** uma das mais importantes. Como o arquivo HTML já está gerado e pronto para ser lido, as páginas abrem muito rápido!

Eu considerei duas ferramentas para isso:

## Jekyll vs Hugo

Como já fiz bastante coisa usando o [Jekyll](https://jekyllrb.com/), essa seria a escolha mais óbvia.
Porém, eu dei uma chance à uma outra ferramenta bastante similar chamada [Hugo](https://gohugo.io/), principalmente por influência de dois amigos que o usam:
[Pothix](https://pothix.com/post/hugo-github-pages-and-https/) e
[Diego Eis](https://tableless.com.br/site-tableless-estatico/).

A instalação foi tranquila (apesar dele não vir com um tema padrão), mas acabei tendo alguns problemas e não quis perder mais tempo do que eu já tinha perdido com isso.
No final das contas, eu não vi uma real vantagem em relação ao Jekyll: os procedimentos e resultados de ambos são muito parecidos (me avise nos comentários se eu estiver perdendo algo grandioso que eu não sei).

Acho que o Jekyll tem uma comunidade maior (e consequentemente um maior número de gems/plugins) enquanto que o Hugo é absurdamente mais rápido. Fiquei com o Jekyll e estou bastante satisfeito :)

### Artigos em Markdown

Muitas pessoas que escrevem frequentemente gostam da sintaxe [Markdown](https://daringfireball.net/projects/markdown/) e não é a toa:
é muito prático formatar texto e usar o editor de textos de sua preferência.

Utilizei o [jekyll-import](https://github.com/jekyll/jekyll-import), ferramenta oficial do Jekyll para importar conteúdo de outros gerenciadores de blogs. Fiquei surpreso de quão bem tudo funcionou!

Agora, 90% dos posts estão devidamente migrados para MarkDown, mas a parte bacana é que códigos HTML podem ser inseridos em arquivos MarkDown sem nenhum efeito colateral: tudo funcionará conforme o esperado.

### URL

Era hora de eu finalmente mudar a URL também; juntar o blog com outras coisas que eu publicava no domínio principal (`www.lucascaton.com.br`), o que possivelmente irá melhorar um pouco o **SEO**.

O subdomínio `blog.lucascaton.com.br` agora redireciona para o novo endereço `www.lucascaton.com.br`.
O restante do endereço continua exatamente o mesmo, o que facilitou nos redirecionamentos que adicionei ao **nginx**.

### Único repositório

Por causa da mudança da URL, acabei juntando os dois repositórios (blog e meu site) em um só, facilitando as alterações e _deployments_.

### Faxina

Aproveitei para apagar muitos (35 para ser exato) artigos antigos que ou não fazem mais sentido ou não eram tão bons:

![35-posts-deleted](/images/posts/2017/10/35-posts-deleted.jpg)

Se por qualquer motivo você precisar de um artigo antigo que foi deletado, me avise nos comentários.

### Comentários

Utilizo o [Disqus](https://disqus.com/) para gerenciamento dos comentários e como mudei o domínio, foi necessário uma migração.
A boa notícia é que o site oferece uma [ótima ferramenta para isso](https://disqus.com/admin/discussions/migrate/), apesar de ser um pouco confusa:

<blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr">[@disqus](https://twitter.com/disqus?ref_src=twsrc%5Etfw) hi there. All comments from my website are no longer showing up, could you please shed some light?[https://t.co/O0AhxhnQcX](https://t.co/O0AhxhnQcX)</p>&mdash; Lucas Caton (@lucascaton) [3 October 2017](https://twitter.com/lucascaton/status/915353715783041024?ref_src=twsrc%5Etfw)</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Por fim, resolvi o problema seguindo [esses passos](https://disqus.com/home/channel/discussdisqus/discussion/channel-discussdisqus/bug_reports_feedback_comments_are_on_disqus_admin_but_not_on_my_website/#comment-3556230045).

### Hospedagem

Uma das vantagens de gerar arquivos 100% estáticos é a facilidade para hospedá-los.
Seria bastante simples (e barato) armazená-los no [S3](https://aws.amazon.com/s3/), que é como eu faço no [blog do Easy Bills](http://blog.easybills.io/br/).
Mas o [GitHub Pages](https://pages.github.com/) é tão simples quanto e ainda é gratuito, o que me fez escolher essa opção.

~~No momento, os arquivos ainda estão no servidor antigo - no qual eu rodava o WordPress - por um simples motivo: analisar os logs e ver se eu esqueci algum _redirect_ importante.~~ Tudo devidamente migrado e rodando no **GitHub Pages** agora! \o/

### SSL

Eu usava [Let's Encrypt](https://letsencrypt.org/) para gerar certificados SSL, mas como pretendo mover os arquivos para o GitHub Pages em breve, comecei a usar o
[**Cloudflare**](https://www.cloudflare.com/), que também é ótimo!

## Novo layout

![new-layout](/images/posts/2017/10/new-layout.png)

---

É isso! Se tiver qualquer dúvida, me mande nos comentários :)


Refiz meu blog do zero


[![cover](/images/posts/2017/03/cover.jpg)](/cursos/cplc/)

É com muito prazer que venho contar a vocês que finalmente publiquei meu **Curso de Programação**.

Caso você não me conheça, meu nome é Lucas, sou desenvolvedor desde 2004, fundador da startup
[Easy Bills](https://www.easybills.io/?locale=pt-BR), escrevo nesse blog desde 2009 e dei o meu
melhor para criar um curso para quem quer **aprender a programar começando do zero, através de
videoaulas 100% online**.

Com esse curso, você aprenderá a criar páginas web dinâmicas, criar aplicações onde o usuário
precisa se autenticar (login e senha), enviar emails através da sua aplicação, criar layouts para
páginas mesmo sem ter experiência em design, negociar a venda de projetos (incluindo preços), qual
salário é justo para o seu nível e muito mais.

E você vai desenvolver dois aplicativos durante o curso, um **gerenciador de tarefas** e um
**clone do Instagram**.

:Notice[[Clique aqui](/cursos/cplc) para mais informações.]{type=tip}

Visite a página do curso ou marque nos comentários abaixo aquele amigo que quer aprender programação :)

---

Abaixo você encontra um vídeo com mais detalhes sobre o curso:

:YouTube{id=N94o9ox6ZdY}


Meu Curso de Programação


![daw](/images/posts/2017/02/daw.jpg)

Acabei de ler o livro **"Desconstruindo a Web: As tecnologias por trás de uma requisição"**, escrito
pelo meu amigo [PotHix](https://twitter.com/PotHix) (Willian Molinari).

Se você é programador ou está de alguma forma envolvido com aplicações web, servidores, redes ou
simplesmente tem curiosidade de entender como a web funciona "por baixo dos panos", nos mínimos
detalhes, você deveria ler esse livro.

Esse não é um daqueles livros chatos que você lê na faculdade. Para você ter uma idéia, o
certificado `HTTPS` é explicado através de uma metáfora com o _Senhor dos Anéis_!
Tem como ficar mais legal que isso? 😁

O único detalhe é que alguns capítulos se focam bastante na área de redes e como eu vejo isso no
dia-a-dia, vou provavelmente acabar esquecendo vários conceitos explicados :)

Você encontra todos os detalhes do livro (inclusive como comprar) aqui:

https://desconstruindoaweb.com.br/

Você também pode ver
[a página do livro no GoodReads](https://www.goodreads.com/book/show/31686001-desconstruindo-a-web)!

O PotHix também conta como foi o
[processo de escrita do livro](https://pothix.com/post/escrevendo-o-desconstruindo-a-web/),
o que eu também achei muito interessante.

Tenho [escutado muito mais podcasts](https://www.youtube.com/watch?v=3XDLfXc3zFg) que livros
ultimamente, mas esse definitivamente me chamou a atenção e decidi comprar e ler.
Resultado: valeu a pena, recomendo!


Li e recomendo o livro "Desconstruindo a Web"


![Cidade de Sydney](/images/posts/2016/03/sydney.jpg)

Muitas pessoas me perguntam como é o sotaque australiano.

A primeira coisa notável é que o inglês australiano segue a gramática britânica.
Exemplo: escreve-se "colour" e "behaviour" em vez de "color" e "behavior".

O melhor jeito de demonstrar como é o sotaque australiano é através de vídeos, por isso selecionei alguns:

:YouTube{id=lUiBOzzdDbo}

_Versão australiana do programa de TV "Family Feud"_

:YouTube{id=dG0v9tZStAk}

:YouTube{id=QVgiG7_Ey9k}

:YouTube{id=C9cazQj3Y2k}

:YouTube{id=xuRrp83jCuQ}

:YouTube{id=ZH4ZQH_3_pE}

:YouTube{id=DWbYEJC4j4U}

---

Pra finalizar: um vídeo do canal "De dentro para fora", que explica as vantagens e desvantagens de estudar inglês australiano:

:YouTube{id=dYxVAbb0vq0}

:Notice[Se você quiser saber mais sobre Austrália, se inscreva no meu outro [canal no Youtube](https://www.youtube.com/RezaaLenda?sub_confirmation=1) e entre no grupo do Facebook [Brasileiros que querem ir para a Austrália](https://www.facebook.com/groups/comoirparaaaustralia/)! 🙂]{type=tip}


[Off-topic] Como é o sotaque australiano?


Faz tempo que penso em escrever sobre as ferramentas e estratégias que utilizo para backups.
Ao escutar [esse episódio do Tecnocast sobre o assunto](https://tecnoblog.net/181260/tecnocast-024-quem-tem-um-nao-tem-nenhum/), decidi que era hora de documentar o que eu faço.

## Meus arquivos pessoais (pasta ~/)

![Screen-Shot-2015-08-23-at-2.08.16-pm](/images/posts/2015/08/Screen-Shot-2015-08-23-at-2.08.16-pm.png)

A pasta do meu usuário possui 3 cópias extras:

1. Assino o plano familiar (U$ 12,50/mês) do [**CrashPlan**](https://www.code42.com/crashplan/), o qual realiza backup automatico e em tempo real do meu computador, da minha esposa e ainda do da minha mãe. Todos os dados ficam na nuvem e eu consigo recuperá-los a qualquer momento, a partir de qualquer lugar, de qualquer computador.

2. A segunda cópia extra dos meus arquivos ficam no meu [**TimeCapsule**](http://www.apple.com/br/airport-time-capsule/), que rodam diariamente de forma automática através do [**Time Machine**](http://www.apple.com/br/airport-time-capsule/#time-machine).

3. Por fim, faço uma **cópia mensal num HD externo** (que é bem rápido graças à sua conexão USB 3) utilizando o rsync pra realizar um backup diferencial. O comando / parametros que utilizo para isso é:

```bash
rsync -a --progress \
  --delete --delete-excluded --exclude "*.DS_Store" \
  /Users/lucascaton/ /Volumes/Backups/lucascaton/
```

> **Importante:** não esqueça do `/` no final de cada `path` do comando acima.

## Arquivos importantes

![important-files](/images/posts/2015/08/important-files.jpg)

Ficam dentro da pasta do [**Dropbox**](https://www.dropbox.com/). Ou seja, uma cópia extra além do CrashPlan, Time Machine e HD externo mencionados acima.

## Arquivos encriptografados

![20-seguranca](/images/posts/2015/08/20-seguranca.jpg)

Se você utiliza ~~OS X~~ macOS, é fácil criar uma pasta protegida com senha (tecnicamente é uma imagem de disco, mas você pode encarar como se fosse uma pasta). Veja como fazer isso nesse [artigo de suporte da Apple](https://support.apple.com/en-us/HT201599).

Nessa pasta, eu guardo:

* Códigos de recuperação de servicos com [autenticação de 2 fatores](https://en.wikipedia.org/wiki/Two-factor_authentication);
* Screenshots dos QR codes de autenticação de 2 fatores. É extremamente útil se você precisar resetar seu celular, já que o Google Authenticator (e outras apps) não salvam esses dados na nuvem (por motivos de segurança);
* Chaves privadas SSH (pra acessar servidores);
* Algumas poucas senhas que prefiro manter nessa pasta do que em gerenciadores de senha como o 1Password, o qual eu uso para todo o resto (veja mais informações sobre o 1Password no tópico "Senhas" no final desse artigo.

## Arquivos que não ficam no meu computador

![61XThv-M2rL._SL1300_](/images/posts/2015/08/61XThv-M2rL._SL1300_.jpg)

Alguns arquivos eu não mantenho no meu computador por serem muitos grandes ou simplesmente por não fazer sentido tê-los comigo o tempo todo. Um exemplo são os [vídeos do Reza a Lenda](https://www.youtube.com/RezaaLenda?sub_confirmation=1).

Eu os mantenho no **Time Capsule** e mensalmente faço um backup destes para o mesmo HD que mencionei no começo do artigo, também utilizando o **rsync**.

## VPS

![vps-hosting](/images/posts/2015/08/vps-hosting.png)

Faço backup das minhas [VPSs](https://en.wikipedia.org/wiki/Virtual_private_server) através de scripts que realizam backups mensais (os quais rodam diretamente no servidor) e mandam esses arquivos para o meu computador (de novo através de um **rsync**).

## Documentos (RG, CPF, passaporte, etc)

![passport](/images/posts/2015/08/passport.jpg)

Tenho foto de todos os meus documentos e estes ficam em uma pasta específica dentro do meu Dropbox, a qual é sincronizada automaticamente com o meu celular (através do iTunes), tornando-se disponível no meu celular mesmo quando não há internet disponível.

## Fotos

![pictures-folder](/images/posts/2015/08/pictures-folder.png)

Não ficam na nuvem (por enquanto). Também não utilizo nenhum software para gerenciá-las, apenas pastas organizadas por datas. E não chega a ser um problema: consigo ser disciplinado e manter tudo organizado. Nunca deixo nada no celular, quando o conecto ao computador eu já copio as fotos pro lugar apropriado.

Apesar disso, o novo [**Google Photos**](https://photos.google.com/) parece um bom lugar pra mantê-las de forma segura.

## Músicas

![spotify](/images/posts/2015/08/spotify.jpg)

100% das minhas músicas estão no [**Spotify**](https://www.spotify.com/). Assino o plano premium, então elas também ficam disponíveis off-line no meu celular.

## Emails e calendário

![gmail-and-google-calendar](/images/posts/2015/08/gmail-and-google-calendar.jpg)

Versões web do **<del>Gmail</del> [Inbox](https://inbox.google.com/)** e [**Google Calendar**](https://www.google.com/calendar). Simples assim.

## Senhas

![1P5-Mac-icon](/images/posts/2015/08/1P5-Mac-icon.png)

Gerencio todas as minhas senhas através do [**1Password**](https://agilebits.com/onepassword), mas tem uma regra de ouro pra evitar problemas se a segurança do 1Password um dia falhar: a senha do meu Inbox / Gmail não está salva em lugar algum, está apenas na minha cabeça - assim eu consigo recuperar a senha de qualquer serviço caso necessário, utilizando o recurso "Esqueci minha senha", que a maioria dos serviços oferece.

## Filmes e séries

![itunes-and-netflix](/images/posts/2015/08/itunes-and-netflix.jpg)

Eu costumava alugar filmes e séries na locadora suéca (também conhecida como locadora do Paulo Coelho), mas comecei a fazer as contas: eu assisto uma média de 12 séries por ano, cada uma custa em média $25 por temporada no [**iTunes**](https://www.apple.com/au/itunes/), ou seja, $25 por mês. Às vezes tem no [**Netflix**](https://www.netflix.com/) e acabo gastando menos. Já alugar um filme recém-lancado em HD no iTunes custa em média $4. Moral da história: decidi parar completamente de fazer pirataria e comprar / alugar tudo da [forma correta](https://www.youtube.com/watch?v=Vine0O9TNwI) :)

## Conclusão

Ok, eu sei que sou um pouco (muito?) paranóico, mas pelo menos nunca perdi nada :D

Me conte nos comentários abaixo como você faz seus backups e o que você achou desse post!


Como eu faço backups


Vejo muitos brasileiros escrevendo código em português. Na faculdade até pode fazer um pouco de sentido por ser mais didático, mas vou apresentar alguns motivos pelos quais isso deve ser evitado no mundo real:

1. O motivo mais importante: inglês é o idioma internacional para código (e para documentações). Mais especificamente, o inglês americano é o padrão. Eu trabalho em uma empresa australiana e embora a Austrália siga a gramática britânica, o código que escrevemos segue a gramática americana (exemplo: "color" e não "colour"). Então se esse é o padrão mundial, por que não segui-lo?

2. Se você pretende um dia trabalhar fora do Brasil, potenciais empresas querendo te contratar vão querer ver seu código, mas não irão entender se estes estiverem em português. Então procure deixar seus repositórios no Github com código e documentação em inglês.

3. Os comandos e palavras-chave de linguagens em programação são em inglês, então mesmo que você queria escrever em português, vai acabar ficando inevitavelmente uma mistura.

4. Algumas linguagens e frameworks estão preparados para entender o inglês em termos de semântica. Exemplo: o Ruby on Rails sabe que a tabela no banco de dados para um determinado model deve ser sempre o nome do model no plural. Ou seja, ao ter um model `Person`, ele vai procurar uma tabela `people`.

5. Contribuições para projetos _open-source_ devem ser em inglês. Eu sinceramente não conheço um projeto _open-source_ famoso que não esteja em inglês.

6. Muitas empresas no Brasil já escrevem códigos em inglês. Então se eventualmente você começar a trabalhar em um dessas empresas, você terá que se adaptar de qualquer forma.

7. Acentos, "ç" e caracteres especiais não funcionam bem em todas as linguagens, fazendo que você tenha palavras escritas de forma incorreta se você as escrever em português.

8. Você treina e melhora seu inglês :)

---

Gravei também um vídeo (que faz parte do [meu curso](/cursos/cplc/)), comentando os items dessa lista:

:YouTube{id=5d5bkbWybqc}


8 motivos pra programar em inglês


![Microfone](/images/posts/2015/05/mic.jpg)

Ao escutar o episódio [“O impacto da internet no jornalismo” do
Braincast](http://www.b9.com.br/57386/podcasts/braincast/braincast-146-o-impacto-da-internet-no-jornalismo/),
refleti sobre algo que escreverei nesse artigo. Se você não escutou ou não
conhece o podcast, eu o recomendo fortemente.

Desde criança, sempre gostei muito de ir à bancas de jornais. Conforme você
cresce, o interesse muda um pouco: você substitui os gibis da Turma da Mônica
por revista de games e álbuns de Pokémon por revistas como Super interessante e
Galileu. Eu gastava boa parta de minha mesada com isso e era recompensador.

![super-interessante](/images/posts/2015/05/super-interessante.jpg)

De repente — em casa — tínhamos internet. E eu acreditei que era só uma questão
de tempo até todo aquele excelente conteúdo das bancas chegar ao mundo online.
Mas o fato é que isso até hoje isso não aconteceu por completo. Apesar de
portais de notícias (incluindo BuzzFeed, Facebook, etc), onde a mídia digital
substituiu com competência a mídia física, acho que foi um pouco diferente com
conteúdos que não necessariamente tem urgência em serem publicados.

Lembro-me de capas da revista Super Interessante trazendo temas como Matrix (o
filme) e viagem no tempo por exemplo, onde a leitura era completa ao ponto de
satisfazer desde o leigo ao estudante das teorias da relatividade de Einstein.

:Notice[Aproveite para conhecer o [meu podcast](/podcast)!]{type=tip}

E sinceramente não vejo isso acontecer da mesma maneira online até hoje. Essas
revistas eram o meio-termo de quem queria algo mais rápido que um livro, porém
não tão superficial quanto um artigo, já que incluíam várias páginas com fotos,
infográficos, diagramas, etc.

![macbook](/images/posts/2015/05/macbook.jpg)

O mundo online tem essa pressa toda — onde ninguém mais assiste um vídeo com
mais de 5 minutos ou lê um artigo com mais de uma página. Preferem no entanto,
ler dezenas de posts por minuto no Facebook. Não quero ser hipócrita — eu também
faço isso. Também não quero pagar de velho, dizendo que “no meu tempo, tudo era
melhor”. Mas eu realmente sinto falta de conteúdos mais profundos que os memes
do Instagram e mais confiáveis que a Wikipedia.

E aqui eu chego na parte interessante desse post: talvez os podcasts tenham
ocupado esse lugar. Eu atualmente escuto vários podcasts sobre os mais variados
temas, como programação, design, tecnologia, publicidade, empreendedorismo,
games, entre outros. Então se você — assim como eu — sente falta desse tipo de
conteúdo no mundo digital, talvez você possa encontrá-los em **podcasts** :-)

![podcast](/images/posts/2015/05/podcast.png)

Para finalizar, segue uma lista dos Podcasts que eu escuto atualmente:

#### Em português:

* Braincast
* Nerdcast
* MacMagazine no Ar
* Tecnocast
* 99 vidas
* Grok Podcast
* ZOFE — Zone of Front-Enders
* Hack ‘n’ Cast
* CBN — Max Gehringer
* English Experts

#### Em inglês:

* ATP — Accidental Tech Podcast
* HI — Hello Internet
* Security Now
* Debug
* Stuff You Should Know
* The English We Speak (BBC)


Por que escutar Podcasts?


Cerca de 2 meses atrás, eu criei um novo canal no Youtube, com o propósito de
mostrar e contar sobre coisas relacionadas à viagens, tecnologia, vídeo games,
como é a vida na Austrália, inglês, entre outros assuntos.

O canal se chama **"Reza a Lenda"**:
[youtube.com/RezaALenda](https://www.youtube.com/RezaALenda?sub_confirmation=1)

Já tem
[vários vídeos publicados](https://www.youtube.com/channel/UCtfeqX1atfOfi3dD9segYCg/videos),
confere lá e me conta depois se gostou :)


Meu novo canal no Youtube


![image_description](/images/posts/2015/02/you-should-be-respectful.jpg)

My manager has shared an article with me called
["Getting lost in translation in Brazil"](http://www.bbc.com/news/magazine-31018302) from BBC News.

This was what I reply to him and I though it'd be nice to make it public:

> That's a very interesting article, thanks for sharing. I agree with most of the points, although
> Brazil doesn't have as many immigrants as Australia (or other countries) so it's rare to see
> people speaking other languages than Portuguese.
>
> If you are living on a country where you weren't born, you should be respectful.
> With the language, the culture, the people, everything actually.
>
> My personal experience has been great: Australians haveare always nice to me. I try my best to do
> the same. Living in another country has been one of the most amazing experiences I've had in my
> life. Sometimes it's hard, but it's definitely rewarding.
