Condicional Zero para verdades gerais (if + presente simples, presente simples)

Se você ferve água a 100º C, ela ferve.

temperatura = 100

if temperatura == 100
  puts "Água fervida"
end

Condicional Primeiro para possibilidades futuras reais (if + presente simples, will + verbo base)

Condicional Segundo para situações hipotéticas presentes/futuras (if + passado simples, would + verbo base)

Condicional Terceiro para situações passadas irreais (if + passado perfeito, would have + particípio passado).

Como melhorar a visualização do DevTools?

Se você trabalha em com uma tela pequena, principalmente uma tela de baixa resolução, talvez seja difícil para você dividir a porção de tela do site com o devTools sem ter que fazer o site entrar em modo mobile, ou deixá-lo com uma resolução muito baixa.

Vejamos, se você tem uma tela FHD com 1920 pixels de largura e reserva 1280 pixels para o site, talvez os 640 pixes que sobrem seja pouco para o devTools.

Como resolver?

Na parte do website, encurte a porção até apenas 960px, depois diminua o zoom da tela para 75%. Agora você consegue ver seu site por inteiro sem quebras desnecessárias, e tem mais espaço para o DevTools!

Ver somente as mensagens no console provenientes do programador.

Quer ver somente as mensagens no console enviados pelo programador? ou seja aquelas que não são provenientes do próprio Chrome?
Clique no pequeno botão à esquerda, “Show Console Sidebar” e filtre por “user message”.

Preserve log

No Windows sempre quando você baixa arquivos da internet ou recebe arquivos como anexos de e-mail, ou quando copia arquivos de outras fontes para um sistema de arquivos NTFS, o Windows cria para cada arquivo original um outro arquivo com o mesmo nome e o sufixo :Zone.Identifier.

E isso é um saco!

Agora imagina, baixar um projeto inteiro em uma máquina Windows, e de repente perceber que ele está cheio desses arquivos com final Zone.Identifier…!

Como apagar arquivos Zone.Identifier no meio de outros?

Bem, uma solução fácil para resolver isso no Windows, é via linha de comando.

Se copiar os arquivos para uma máquina WSL, no shell do Linux, execute na raíz do projeto o comando abaixo, que vai apagar de todo o projeto qualquer arquivo que contenha Zone.Identifier no nome.

find . -type f -name 'Zone.Identifier' -delete

Se preferir usar o PowerShell, o comando é:

Remove-Item -Path "arquivo.zip:Zone.Identifier"

Como evitar que arquivos Zone.Identifier sejam criados?

Modo 1: Se você copiar o arquivo usando o Windows Explorer de uma pasta local ou de um disco removível,(não baixado da internet), ele não terá o Zone.Identifier.

mODO Se você baixar o arquivo tanto em partição NTFS quando em uma partição Linux, via linha de comando, ele também não terá o Zone.Identifier.

No Linux:

wget https://exemplo.com/arquivo.zip

No PowerShell:

Invoke-WebRequest -Uri "https://exemplo.com/arquivo.zip" -OutFile "arquivo.zip"

Neste artigo vou apresentar 10 dicas de construção para layouts que eu como desenvolvedor back-end gostaria de ter aprendido logo quando comecei a me aventurar no front-end!

Porém, vou deixar tudo aqui, resgistrado para você não sofrer com o que eu sofri.

Dicas para a construção de um layout web que não quebra:

Algura e largura com vh e vw

Para acomodar blocos de layout de forma que ocupem a totalidade da página, ao invés de %, use as unidades de medida vh (viewport height) e vw (viewport width).

Um elemento HTML <div> com width de 25vw, vai ocupar 25% da largura da área disponível no navegador.

A questão com a unidade % é que ela é relativa, e ajusta as dimenões dos elementos filhos com base em seu elemento pai, o que nos obriga muitas vezes a ter de definir um tamanho explicito ao elemento pai.

Já trabalhar com vw e vh vai ajustar sempre seus itens de layout com base no tamanho do viewport, bastante você calcular quando da altura e largura disponíveis na tela do navegador quer dar aos seus objetos, sem se preocupar com hierarquias para isso.

Largura de colunas com ch

Eu simplesmente adoro usar a unidade ch (character unit) para definir a largura das colunas de uma tabela, especialmente as colunas estreitas e de tamanho máximo previsível, como as de id numérico.

Então suponhamos que você sabe que sua tabela vai retornar no máximo 4 dígitos de registros (1 – 9999), você pode usar 4ch na coluna id, para delimitar a largura desta coluna exatamente a quatro caracteres.

Ou melhor ainda, você pode ajustar com js o css width desta coluna para a largura do maior registro retornado. Ou seja, se seu maior registro retorna do foi o id 57 que tem dois digitos, defina dinamicamente 2ch, se for 500 que tem três dígitos defina 3ch, e assim por diante.

Já no caso de colunas mais largas, como as de nome e endereço, as quais faria menos sentido prever um tamanho de largura ideal, você pode dividir a porcentagem de 100% entre elas. Ou seja, divida 100% de largura entre todas as outras colunas que não usem ch.

A melhor forma de sobrescrever estilos css

Muitas vezes precisamos sobrescrever estilos CSS. A melhor forma de fazer isso é inserir um arquivo de estilos como custom.css após a chamada do arquivo principal de CSS.

Porém se você não puder fazer essa chamada no local correto, que seria dentro da seção <head>, prefira então usar ccs inline direto no HTML.

De forma alguma abra tags <style> no <body>, isso funciona mas é incorreto, por isso não há garantias de que os navegadores vão tolerar isso em futuras versões, além de é claro deixar o código estrutural feio e confuso.

Por fim, você também pode usar JS para alterar o estilo desejado. Só recomendo sempre, evitar misturar todas as técnicas disponíveis, procure escolher um padrão.

Como organizar seu arquivo CSS

Não é raro começar a adicionar código ao seu arquivo CSS e de repente se perder em sua organização. Por isso abaixo deixa uma ordem para manter as coisas:

• Reset ou normalize (margin, padding, etc)
• Variáveis / root
• Layout geral (header, footer, main)
• Componentes reutilizáveis (menus, botões, cards, formulários)
• Helpers/utilitários (classes prontas para diversos usos)
• Media queries (repita tudo o que fez para a versão desktop, para o mobile)

A abordagem básica para usar temas no w2ui é vincular o w2ui.css e então vincular algum tipo de w2ui-custom.css, onde você pode substituir os estilos básicos com base em suas necessidades.

Tal abordagem brutamente simples é a indicada pelo criador do w2ui.

Isso nos mostra que as vezes defender soluções complexas como as mais corretas, é puramente questão de gosto, e não necessariamente um fato.

Sejamos simples!

No WordPress pode ser útil restringir quais menus um usuário pode ter acesso. Não é difícil encontrarmos uma situação onde um usuário de um site deve ter acesso aos plugins WooCommerce, para gerenciar suas vendas e Easy Appoinments para gerenciar os agendamentos de seus clientes, mas não pode ter acesso aos menus Tools ou Settings, por exemplo.

A questão é que o WordPress por padrão não faz esse tipo de gerenciamento de permissões, e assim sendo, nós temos duas formas de resolver isso, a primeira é usando algum plugin de terceiros, a segunda é criando nosso próprio plugin para gerenciar as permissões.

Neste tutorial vamos desenvolver a segunda opção, eu a considero mais estável e segura, levando em conta que você terá total controle e conhecimento do que foi feito e do que está rodando no seu site.

Mãos a massa!

Antes de começarmos de fato, um alerta! É comum encontrar na internet instruções para pôr código personalizado no arquivo functions.php do seu tema ativo, porém isso é um equívoco, uma vez que o arquivo functions.php pode ser sobrescrito em uma atualização do seu tema, apagando assim qualquer código personalizado inserido nele.

Mais uma vez então concluímos que uma melhor solução para inserir código personalizado em um site WordPress é criar seu próprio plugin, vamos fazer isso a seguir. E o melhor, é que isso é fácil de fazer!

Dentro da pasta de plugins crie um diretório e um arquivo com o mesmo nome menu-filter/menu-filter.php

Este diretório e arquivos não precisam ter o mesmo nome, porém para um plugin muito simples com somente um arquivo, como é neste caso, isso deixa as coisas mais claras.

Adicione o código abaixo ao arquivo:

<?php
/**
 * Plugin Name: My Website Admin Menu Filter
 * Description: Show only Appointments, WooCommerce e Products menus
 * Version: 1.0
 * Author: Fellipe Sanches
 */

function ocultar_menus_para_secovi_colaborador() {
  if (!is_user_logged_in()) return;

    $user = wp_get_current_user();
    $email = $user->user_email;

    $admins = array(
        "email1@provider.com", 
        "email2@provider.com"
        );

    if (!in_array($email, $admins, true)) {
       remove_menu_page('index.php');
       remove_menu_page('edit.php'); // Posts
       remove_menu_page('upload.php'); // Media
       remove_menu_page('link-manager.php'); // Links
       remove_menu_page('edit-comments.php'); // Comenetários
       remove_menu_page('edit.php?post_type=page'); // Pages
       remove_menu_page('plugins.php'); // Plugins
       remove_menu_page('themes.php'); // Appearance
       remove_menu_page('users.php'); // Users
       remove_menu_page('tools.php'); // Tools
       remove_menu_page('edit.php?post_type=project'); //Projetos
       remove_menu_page('options-general.php'); // Settings
       remove_menu_page('et_divi_options'); // Divi
    }
}

function ocultar_menu_novo_para_secovi_colaborador() {
  if (!is_user_logged_in()) return;

    $user = wp_get_current_user();
    $email = $user->user_email;

    if (!in_array($email, $admins, true)) {
        global $wp_admin_bar;
        $wp_admin_bar->remove_node( 'new-content' );
        $wp_admin_bar->remove_node( 'comments' );
        $wp_admin_bar->remove_node( 'woocommerce-site-visibility-badge' );
        $wp_admin_bar->remove_node( 'updates' );
        
    }
}

add_action( 'wp_before_admin_bar_render', 'ocultar_menu_novo_para_secovi_colaborador' );
add_action( 'admin_init', 'ocultar_menus_para_secovi_colaborador' );

O plugin irá aparecer no seu menu de plugins:

Olá, hoje vamos ver aqui como confirgurar o servidor web Nginx, partindo de alguns conceitos básicos para o seu funcionamento, até sua configuração para produção.

Neste exemplo vamos fazer a instalação do Nginx versão Open Source no Ubuntu Server (ver outras opções).

Instalando o NGNIX

No Linux:

sudo apt-get update (para atualizar o repositório do Linux)

sudo apt-get install nginx (para instalar o Ngnix)

sudo nginx -v (para verificar a instalação)

curl -I 127.0.0.1 (para verificar se o Ngnix está rodando e acessível na loopback)

# Default server configuration

#

server {

        listen 80 default_server;

        listen [::]:80 default_server;

        # SSL configuration

        #

        # Note: You should disable gzip for SSL traffic.

        # See: https://bugs.debian.org/773332

        #

        # Read up on ssl_ciphers to ensure a secure configuration.

        # See: https://bugs.debian.org/765782

        #

        # Self signed certs generated by the ssl-cert package

        # Don't use them in a production server!

        #

        # include snippets/snakeoil.conf;

        listen 443 ssl default_server;

        listen [::]:443 ssl default_server;

        ssl_certificate /etc/ssl/mywebsite.com.crt;

        ssl_certificate_key /etc/ssl/mywebsite.com.key;

        root /var/www/company_website;

        # Add index.php to the list if you are using PHP

        index index.php index.html;

        server_name *.amazonaws.com;

        #redirects para inscricoes nos formularios de eventos do site antigo

        rewrite ^(/events/internal/.*) https://old.mywebsite.com$1 permanent;

        rewrite ^(/events/commercial/.*) https://old.mywebsite.com$1 permanent;

        rewrite ^(/specific/report-july/.*) https://old.mywebsite.com$1 permanent;

        location / {

                # First attempt to serve request as file, then

                # as directory, then fall back to displaying a 404.

                try_files $uri $uri/ /index.php$is_args$args;

                add_header Access-Control-Allow-Origin 'https://checkout.mywebsite.com';

        }

        # pass PHP scripts to FastCGI server

        #

        location ~ \.php$ {

                include snippets/fastcgi-php.conf;

        #

        #       # With php-fpm (or other unix sockets):

                fastcgi_pass unix:/run/php/php8.1-fpm.sock;

        #       # With php-cgi (or other tcp sockets):

        #       fastcgi_pass 127.0.0.1:9000;

        }

        # deny access to .htaccess files, if Apache's document root

        # concurs with nginx's one

        #

        location ~ /\.ht {

                deny all;

        }

        location ~ ^/wp-admin {

                allow 1.2.3.4; # INTERNAL LINK COMPANY

                allow 2.3.4.5; # FELLIPE'S HOME OFFICE

                deny all;

        }

        location ~ ^/wp-login.php {

                allow 1.2.3.4; # INTERNAL LINK COMPANY

                allow 2.3.4.5; # FELLIPE'S HOME OFFICE

                deny all;

        }

        location ~ ^/login {

                allow 1.2.3.4; # INTERNAL LINK COMPANY

                allow 2.3.4.5; # FELLIPE'S HOME OFFICE

                deny all;

        }

        location ~ /?author=([0-9]*) {

                deny all;

        }

        location = /xmlrpc.php {

                deny all;
                
        }

}

Olá, hoje vamos ver aqui como construir uma API customizada no WordPresss, de forma simples e correta, evitando os erros mais comuns ao se fazer tal trabalho.

Introdução com uma história triste

Um vez fiz uma API customizada no WordPress para que meu frontend feito com DIVI Theme, para que ele pudesse ler os dados enviados por esta API, que por sua vez consultava diversos outros recursos externos, tais como outras APIs externas.

Normalmente todos os temas WordPress têm um arquivo functions.php, no caso do DIVI o functions.php fica em /wp-content/themes/Divi/functions.php. Este arquivo é fundamental para adicionar funcionalidade personalizada ao tema, e foi lá que coloquei minhas customizações, acrescidas nas últimas linhas.

O problema é que este arquivo é todo sobreescrito a cada nova versão lançada daquele tema pelo desenvolvedor do tema, apagando assim também qualquer customização feita por você ali. 

Foi isso que aconteceu comigo, e a dica para que isso não ocorra contigo, eu vou deixar aqui neste artigo, que é colocar o seu código em um plugin personalizado, o que inclusive vai deixar a solucão mais segura e elegante!

Mãos à massa

Vamos começar criando um plugin personalizado. Para isso adicione um arquivo em: 

/wp-content/plugins/custom-api/custom-api.php

Você pode renomear o nome do diretório e arquivo para ficar de acordo com sua criação.

Feito isso, insira este código no arquivo:

<?php

/*

Plugin Name: Custom API Modifications

Description: Custom APIs and endpoints

Author: Name

Version: 1.0

*/

add_action('rest_api_init', function () {

    register_rest_route('minhaapi/v1', '/teste/', [

        'methods'  => 'GET',

        'callback' => 'minha_funcao_personalizada',

    ]);

});

function minha_funcao_personalizada() {

    return ['mensagem' => 'Funcionando!'];

}

Mais opções de valores para o header estão aqui

Agora, quando você for a área de plugins do seu WordPress verá o seu plugin lá, ative-o, e faça uma chamada no browser para https://seusite.com/wp-json/minhaapi/v1/teste

O retorno será: Funcionando!
Pronto, você já tem um ponto em seu WordPress, pronto para se comunicar com o frontend e com recursos externos, de forma segura e organizada.
Abaixo um exemplo completo de uma requisição usando o método POST, ele faz uma requisição a uma API externa, entregando os dados no backend do WordPress. Isso é útil para interligar o backend do seu WordPress a um serviço externo, e então ter os dados de retorno disponíveis para trabalhar no backend ou frontend do seu website.

/*--------------------------------------

 Registra o endpoint consulta cliente 

--------------------------------------*/

function consulta_cliente(WP_REST_Request $request)

{

  $api_url = 'https://api.exemplo.com';

  $required_params = ['valor', 'tipo'];

  // Verifica se algum parâmetro obrigatório está ausente

  foreach ($required_params as $param) {

    if (!isset($request[$param])) {

      return new WP_REST_Response([

        'message' => 'parâmetro [' . $param . '] não fornecido.'

      ], 400);

    }

  }

  $valor = $request->get_param('valor');

  $tipo = $request->get_param('tipo');

  // Faz a requisição para a API externa

  $response = wp_remote_post($api_url, [

    'headers' => [

      'Content-Type' => 'application/json',

    ],

    'sslverify' => false,

    'body' => json_encode([

      'valor' => $valor,

      'tipo' => $tipo

    ]),

  ]);

  if (is_wp_error($response)) {

    return new WP_REST_Response([

      'message' => 'Erro ao se conectar com a API externa.',

      'error' => $response->get_error_message(),

    ], 500);

  }

  $http_code = wp_remote_retrieve_response_code($response);

  $body = wp_remote_retrieve_body($response);

  $data = json_decode($body, true);

  return new WP_REST_Response($data, $http_code);

}

// Registra o endpoint na API REST

add_action('rest_api_init', function () {

  register_rest_route('minhaapi/v1', '/cliente', [

    'methods' => 'POST',

    'callback' => 'consulta_cliente',

    'permission_callback' => '__return_true', // Permitir requisição sem autenticação

  ]);

});

Aqui estão alguns termos como siglas e gírias usados no mundo dev no Brasil:

PR – Pull Request

Exemplo de uso: Fala sério! Aquele cara não cansa de fazer PR sem explicação…

Update sem where

20 Gírias, Frases e Siglas Usadas por Devs BR

1. Commitar código
   Significado:Vem do uso do comando Commit, usado para enviar ou registrar no Git / GitHub alterações no código do projeto.
   Exemplo: “Já commitei aquela função nova, blz?”
2. Go horse!
   Significado:Significa resolver o problema com um código improvisado, mal estruturado, que resolve o problema mas é difícil de manter ou escalar depois.
   Exemplo: “Terminei o projeto em 3 dias como o chefe pediu! Foi a base do Go Horse, mas tá no ar!”
3. Baixar código / Pullar / Fazer Pull
   Significado: Baixar alterações do repositório remoto Git / GitHub.
   Exemplo: “Pulla a master antes de começar a mexer no código, tá?.”
4. Subir
   Significado: Enviar código para o servidor ou repositório no Git / GitHub.
   Exemplo: “Acabei de subir a nova versão, já tá em produção!”
5. Deployar
   Significado: Fazer o deploy, colocar a aplicação no ar usando o process de deploy.
   Exemplo: “Deployei agora pouco, vê se tá funcionando aí.”
6. Dar pau
   Significado: Quando algo dá erro ou para de funcionar.
   Exemplo: “O sistema deu pau depois da última atualização.”
7. Bugado
   Significado: Algo que está com defeito, não funciona como deveria.
   Exemplo: “Esse botão tá bugado, não tá clicando.”
8. Refatorar
   Significado: Reescrever o código para melhorar sem mudar a funcionalidade.
   Exemplo: “Esse código tá confuso, vou refatorar ele todo.”
9. Code smell
   Significado: Se diz quando há indícios de que o código tem potenciais problemas graves.
   Exemplo: “Cara, esse monte de if encadeado tá com um cheiro de code smell sinistro.”
10. Dar merge
    Significado: Juntar duas versões do código (normalmente em Git).
    Exemplo: “Já dei merge na sua branch com a minha.”
11. Dar rebase
    Significado: Reorganizar o histórico de commits.
    Exemplo: “Fiz um rebase pra deixar o histórico melhor.”
12. Fullstack
    Significado: Programador que trabalha tanto no backend quanto no frontend.
    Exemplo: “Sou fullstack: conserto tanto o botão quebrado quanto o banco de dados!”
13. Rollback (fazer rollback)
    Significado: Reverter alterações que deram errado.
    Exemplo: “O deploy deu ruim, tive que fazer rollback.”
14. Legado (código legado)
    Significado: Código antigo, normalmente difícil de manter.
    Exemplo: “Cuidado com a manutenção desse sistema, é legado tá cheio de coisas que ninguém sabe como funciona há anos.”
15. Buildar
    Significado: Compilar ou gerar a versão final do app.
    Exemplo: “Já buildei o projeto para versão de produção, pode testar.”
16. Ficar em loop
    Significado: Quando o código ou o programador não sai do lugar.
    Exemplo: “Tô em loop com esse monte de tarefas, melhor sair pra tomar um café.”
17. Codar
    Significado: Escrever código, programar.
    Exemplo: “Hoje eu só quero codar em paz, sem reunião.”

Pensar

programar

negociar