Author: F. Sanches

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)

The basic approach to using themes in w2ui is to include w2ui.css and then include some kind of w2ui-custom.css, where you can override the default styles based on your needs.

This straightforward approach is the one recommended by the creator of w2ui.

This shows us that sometimes insisting on complex solutions as the “right” ones is purely a matter of preference, not necessarily a fact.

Let’s keep it simple!

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:

Apt compatibility

Another point to consider is that often an older PHP version, such as 7.4, is running on an older Ubuntu Linux distribution like 20.04. In this case, updates via apt to newer packages like those for PHP 8 will also be problematic. If possible, first update your Linux distribution to the latest LTS version.

Code compatibility

Upgrading from any version of PHP 7 to any version of PHP 8 is a major version jump and there is no single “self-update” command or “auto-update” button to do this, furthermore PHP 8 introduces breaking changes that could stop your old code from working, so we need be careful with this update.

However, assuming all the risks of the code, we will perform the update using the apt package manager. Below let’s see the process to upgrade your system.

The “Ondřej Surý” PPA

Standard Ubuntu repositories usually lack the newest PHP versions, so you need use the standard third-party repository maintained by Ondřej Surý (a Debian PHP maintainer). To do it, type in shell:

sudo apt update
sudo apt install -y software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update

Get he extensions you had for PHP 7.x

dpkg -l | grep php7 | cut -d ' ' -f 3

Output:

$ dpkg -l | grep php7 | cut -d ' ' -f 3
php7.4-cli
php7.4-common
php7.4-mbstring
php7.4-opcache
php7.4-readline
php7.4-xml

Install PHP 8.x

In a text editor, you can paste the output of the grep, and create your install command replacing what you need, like this:

sudo apt install -y php8.4 php8.4-cli php8.4-common php8.4-mbstring php8.4-opcache php8.4-readline php8.4-xml

Okay, now you have PHP 8 configured with the same packages as PHP 7.

Auction and bidder, or news broadcast and viewer. These are examples of the observer design pattern. In each of these, relationships are generally one subject to many observers. One auction is observed by many bidders. One broadcast is observed by many viewers.

As a behavioral pattern, it makes it easy to distribute and handle notifications of changes across systems, in a manageable and controlled way. 

There are many different ways and situations you can apply the observer design pattern.