<p>Vamos entender o que significa cada parte de uma URL (Uniform Resource Locator). Observe a URL abaixo:</p>
<pre><code><div class="highlited-code" data-language="">https://user:password@blog.exemple.com.br:443/posts?s=javascript&amp;tags[]=html&amp;tags[]=css#top</div>
</code></pre><Alert title="URL (Uniform Resource Locator)" color="blue" mb="md">
Uma URL é um endereço de uma localização específica na web e uma mecanismo que especifica a forma de recuperar este conteúdo, que pode ser um documento, uma imagem, um vídeo, etc.
</Alert>

<ul>
<li><code>https://</code>: <strong>Protocolo de comunicação</strong> (padrão de comunicação utilizado entre o cliente e o servidor);</li>
<li><code>user:password@</code>: <strong>Credenciais de autenticação para o <a href="https://datatracker.ietf.org/doc/html/rfc7617">esquema Basic</a></strong> (obviamente, por questões de segurança, você <strong>não</strong> deve colocar suas credenciais diretamente na URL - inclusive, alguns navegadores <a href="https://crbug.com/82250#c7">já não permitem mais isso</a>);</li>
<li><code>blog</code>: <strong>Subdomínio</strong> (um domínio dentro de outro domínio);</li>
<li><code>exemple.com.br</code>: <strong>Domínio</strong> (nome do site);</li>
<li><code>.br</code>: <strong>TLD (Top Level Domain)</strong> (domínio de primeiro nível - identifica o país ou a região geográfica do site);</li>
<li><code>.com.br</code>: <strong>SLD (Second Level Domain)</strong> (domínio de segundo nível - alguns são reservados para entidades específicas, como governos, universidades, etc.);</li>
<li><code>:443</code>: <strong>Porta de comunicação</strong> (cada protocolo de comunicação possui uma porta padrão, por exemplo, o HTTP utiliza a porta 80 , HTTPS utiliza a porta 443. Porém, podemos utilizar outras portas, caso necessário);</li>
<li><code>/posts</code>: <strong>Caminho do recurso no servidor</strong>;</li>
<li><code>?s=javascript&amp;tags[]=html&amp;tags[]=css</code>: <strong>Parâmetros da requisição</strong> (informações adicionais que podem ser enviadas para o servidor);</li>
<li><code>#top</code>: <strong>Âncora</strong> (identifica um local específico dentro de uma página - normalmente utilizado para rolar a página até o local desejado).</li>
</ul>
<h2>O construtor URL</h2>
<p>O JavaScript possui um construtor chamado <code>URL</code> que nos permite criar um objeto com as informações de uma URL. Veja o exemplo abaixo:</p>
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">// Criando um objeto URL
const url = new URL(
  &quot;https://user:password@blog.exemple.com.br:443/posts?s=javascript&amp;tags[]=html&amp;tags[]=css#top&quot;
);

// Exibindo o objeto URL
console.log(url);
/*
Você verá o seguinte resultado:

URL {
  hash:  &quot;#top&quot;
  host: &quot;blog.exemple.com.br&quot;
  hostname: &quot;blog.exemple.com.br&quot;
  href: &quot;https://user:password@blog.exemple.com.br:443/posts?s=javascript&amp;tags[]=html&amp;tags[]=css#top&quot;
  origin: &quot;https://blog.exemple.com.br&quot;
  password: &quot;password&quot;
  pathname: &quot;/posts&quot;
  port: &quot;&quot;
  protocol: &quot;https:&quot;
  search: &quot;?s=javascript&amp;tags[]=html&amp;tags[]=css&quot;
  searchParams: URLSearchParams {size: 3}
  username: &quot;user&quot;
}
*/</div>
</code></pre><p>Note que a porta está vazia, pois o protocolo HTTPS utiliza a porta 443 por padrão. Caso houvesse uma porta diferente, ela seria exibida no atributo <code>port</code>.</p>
<h2>O construtor URLSearchParams</h2>
<p>O JavaScript também possui um construtor chamado <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams"><code>URLSearchParams</code></a> que nos permite criar um objeto com os parâmetros de uma URL. Veja o exemplo abaixo:</p>
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">// Criando um objeto URLSearchParams
const params = new URLSearchParams(&quot;s=javascript&amp;tags[]=html&amp;tags[]=css&quot;);</div>
</code></pre><p>Note que ele já é está presente no objeto URL que criamos anteriormente (no attributo <code>searchParams</code>), de modo que podemos acessar os parâmetros da URL da seguinte maneira:</p>
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">const url = new URL(
  &quot;https://user:password@blog.exemple.com.br:443/posts?s=javascript&amp;tags[]=html&amp;tags[]=css#top&quot;
);

console.log(url.searchParams.get(&quot;s&quot;)); // javascript
console.log(url.searchParams.get(&quot;tags&quot;)); // ['html', 'css']</div>
</code></pre><h2>Uma nota importante sobre a âncora</h2>
<p>Os navegadores não enviam a âncora para o servidor, de modo que, no nosso exemplo, os caracteres <code>#top</code> só é acessível do lado do navegador. Algumas pessoas utilizam este recurso para armazenar o estado da aplicação ou informações encriptadas na URL que só serão acessíveis do lado do navegador, sem nunca ter acesso à isso pelo servidor.</p>


Dissecando URLs com JavaScript

<p>Usar elementos customizados de diálogo no lugar das implementações nativas do navegador, como <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"><code>alert</code></a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm"><code>confirm</code></a> ou <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt"><code>prompt</code></a>,
se tornou o padrão do desenvolvimento web há bastante tempo (popularizado por diversos plugins do <a href="https://jqueryui.com/dialog/">jQuery</a> e pelo próprio <a href="https://getbootstrap.com/2.3.2/javascript.html#modals">Bootstrap</a>), de modo que, a cada nova biblioteca de UI que surge[^1][^2][^3], é comum que seus autores re-implementem um modal com o framework da vez (que podem ou não implementar <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/">acessibilidade WAI-ARIA</a>).</p>
<p>[^1]: <a href="https://mui.com/material-ui/react-modal/">Modal do Material UI</a>
[^2]: <a href="https://ant.design/components/modal">Modal do Ant Design</a>
[^3]: <a href="https://carbondesignsystem.com/components/modal/usage/#live-demo">Modal do Carbon Design System</a></p>
<p>Mas agora, com a chegada do elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code>&lt;dialog&gt;</code></a> no HTML5 (suportado por <a href="https://caniuse.com/dialog">93,85%</a> dos navegadores em uso), é muito mais fácil criar diálogos de forma nativa. Neste artigo, vamos ver como criar um diálogo modal (e não-modal) simples com o elemento <code>&lt;dialog&gt;</code>.</p>
<h2>Entendendo o elemento <em>dialog</em></h2>
<p>No sentido empregado no desenvolvimento de interfaces de usuário, um <strong>diálogo</strong> é uma <q>conversação</q> entre o sistema e o usuário, onde o sistema espera uma resposta do usuário para continuar. Um diálogo pode ser <strong>modal</strong> ou <strong>não-modal</strong>. Um diálogo modal (isto é um, um diálogo que muda o <strong>modo</strong> de interação do usuário com o sistema) é aquele que trava a interface, impedindo o usuário de interagir com o restante da página até que ele seja fechado. Um diálogo não-modal (isto é um, um diálogo que <em>não</em> muda o <strong>modo</strong> de interação do usuário com o sistema), por outro lado, permite que o usuário interaja com o restante da página enquanto o diálogo está aberto.</p>
<p>A maneira mais simples de colocar um diálogo não-modal na tela é da seguinte forma:</p>
<pre><code class="highlited-code-wrapper langhtml"><div class="highlited-code" data-language="html">&lt;dialog open&gt;
  &lt;p&gt;Olá, mundo!&lt;/p&gt;
  &lt;form method=&quot;dialog&quot;&gt;
    &lt;button&gt;Fechar&lt;/button&gt;
  &lt;/form&gt;
&lt;/dialog&gt;</div>
</code></pre><p>Note o formulário, na linha 5, com o método <em>dialog</em>. É este formulário que envia ações para o <code>dialog</code>. Ele será exibido dessa forma:</p>
<CodePen id="qBQzzww" />

<p>O que torna o exemplo acima um diálogo não modal é o uso do atributo <code>open</code> (linha 1), o que também faz com que ele não possa ser fechado com a tecla <code>Esc</code>. Também é possível criar um diálogo não modal usando a API JavaScript:</p>
<CodePen id="BaGXqjx" />

<p>Agora, para que o diálogo se comporte como um modal, é necessário que ele seja aberto através de sua API JavaScript, você pode ver no exemplo a seguir:</p>
<CodePen id="ZEmdgYj" />

<p>Desta vez, abrimos e fechamos o modal com JavaScript e colocamos o resultado do formulário no elemento <code>output</code> quando o modal é fechado. Leia o código com calma e tente entender o que está acontecendo.</p>
<h2>Estilizando o modal</h2>
<p>O elemento <code>dialog</code> pode (é claro), ser estilizado como qualquer outro elemento HTML. Atente-se, porém, que, para estilizar o <em>overlay</em> (o fundo escuro que fica atrás do modal), é necessário usar o seletor <code>::backdrop</code>:</p>
<CodePen id="PoxrMzW" />

<h2>Polyfill</h2>
<p>Se você quiser usar o <code>dialog</code> e não ter problemas de compatibilidade em navegadores mais antigos, pode usar este <a href="https://github.com/GoogleChrome/dialog-polyfill">polyfill</a>.</p>
<hr />

<h3>Referências</h3>

<ul>
<li><a href="https://web.dev/learn/html/dialog/">Dialog</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">Dialog</a></li>
<li><a href="https://www.nngroup.com/articles/modal-nonmodal-dialog/">Modal &amp; Nonmodal Dialogs: When (&amp; When Not) to Use Them</a></li>
</ul>


Criando modais nativos com o elemento dialog

<p>Você já precisou criar um EditorConfig nos seus projetos de programação, mas
nunca consegue lembrar de todas as opções que pode usar? Seus problemas
acabaram: apenas digite npx create-editorconfig -y no seu terminal e tenha um
EditorConfig gerado para você. Essas são as opções definidas por padrão:</p>
<pre><code><div class="highlited-code" data-language=""># editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true</div>
</code></pre><p>E se você desejar customizar estas configurações ou até mesmo adicionar mais
configurações para um grupo de arquivo diferente (definindo um padrão <a href="https://en.wikipedia.org/wiki/Glob_(programming)">glob</a>),
apenas omita o parâmetro -y no terminal e responda às questões que aparecerão
no terminal.</p>
<h2>O que é o EditorConfig?</h2>
<p>EditorConfig é um formato de arquivo (o próprio .editorconfig) que serve para
definir os estilos que um editor de código (como o <a href="https://code.visualstudio.com/">VS Code</a>) deve aplicar nos
arquivos. Você pode até definir um conjunto diferente de regras para os arquivos
presentes no seu projeto de acordo com suas respectivas extensões ou diretórios,
utilizando um <a href="https://en.wikipedia.org/wiki/Glob_(programming)">padrão glob</a>.</p>
<h2>Meu editor de código não está aplicando as configurações do EditorConfig</h2>
<p>Para aplicar as regras do seu .editorconfig, o seu editor de código deve ter um
plugin ou ter implementado, nativamente, a aplicação das regras do EditorConfig
(se você estiver usando o VS Code, você deve instalar <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">esta extensão</a>).</p>
<h2>Como posso contribuir com o create-editorconfig?</h2>
<p>Por favor, vá ao <a href="https://github.com/DouglasdeMoura/create-editorconfig">repositório oficial do GitHub</a> e abra uma nova issue.</p>


Use este script do NPM para gerar seus arquivos do EditorConfig

<p>Web apps são complexos e, mantê-los acessíveis para pessoas com necessidades
especiais exige um bom conhecimento das suas <a href="https://w3c.github.io/html-aria/">espeficações</a>.
Mas não se preocupe, pois neste artigo, eu vou mostrar como criar o indicadores
de carregamento acessíveis e bonitos para suas aplicações.</p>
<aside className="aside-info">
Neste artigo, você aprender aprender para que servem os atributos <code> aria-live</code>,
 <code> aria-busy</code>, <code> aria-control </code> e <code>role</code>.
Além disso, aprenderá como adicionar um ícone de carregamento feito somente com CSS.
</aside>

<p>Usamos indicadores de carregamento sempre que é necessário recuperar dados de maneira
assíncrona em nossas aplicações, normalmente relacionadas à alguma interação do
usuário: envio de formulários, requisições à <abbr title="Application Programming Interface">API</abbr>s
externas, upload de arquivos, etc. Para executarmos estas ações, é necessário que
forneçamos alguma identificação visual para que o usuário possa identificar que
a nossa aplicação está esperando algum dado ou retorno externo.</p>
<p>Vamos começar com um exemplo simples, onde uma região da tela será atualizada quando
um usuário selecionar um planeta da lista:</p>
<pre><code class="highlited-code-wrapper langhtml"><div class="highlited-code" data-language="html">&lt;!-- Utilizaremos este formulário para selecionar um planeta --&gt;
&lt;fieldset&gt;
  &lt;legend&gt;Informação do planeta&lt;/legend&gt;
  &lt;label for=&quot;planetasSelect&quot;&gt;Planeta:&lt;/label&gt;

  &lt;!--
    O atributo aria-controls aponta para o ID do elemento da página este formulário controla
  --&gt;
  &lt;select id=&quot;planetasSelect&quot; aria-controls=&quot;planetaInformacoes&quot;&gt;
    &lt;option value=&quot;&quot;&gt;Selecione um planeta:&lt;/option&gt;
    &lt;option value=&quot;mercurio&quot;&gt;Mercúrio&lt;/option&gt;
    &lt;option value=&quot;venus&quot;&gt;Vênus&lt;/option&gt;
    &lt;option value=&quot;terra&quot;&gt;Terra&lt;/option&gt;
    &lt;option value=&quot;marte&quot;&gt;Marte&lt;/option&gt;
  &lt;/select&gt;
&lt;/fieldset&gt;

&lt;!--
  O atributo role=&quot;region&quot; define que a div a seguir é um ponto de destaque na
  página, facilitando o acesso à região através do teclado.

  Observe que o ID da div a seguir é o mesmo definido no atributo aria-controls
  do select acima.

  Definimos o aria-live como igual a polite. Desse modo, os leitores de
  tela não interromperam a leitura da página quando o conteúdo dessa div for alterado.

  Por fim, definimos o aria-busy para informar aos leitores de tela ou outras
  tecnologias assistivas quando a região está aguardando um novo conteúdo.
--&gt;
&lt;div role=&quot;region&quot; id=&quot;planetaInformacoes&quot; aria-live=&quot;polite&quot; aria-busy=&quot;false&quot;&gt;
  &lt;h2 id=&quot;planetaNome&quot;&gt;Nenhum planeta selecionado&lt;/h2&gt;
  &lt;p id=&quot;planetaDescricao&quot;&gt;Selecione um planeta para ver sua descrição&lt;/p&gt;
&lt;/div&gt;

&lt;p&gt;
  &lt;small&gt;
    Com informações da
    &lt;a href=&quot;https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System&quot;&gt;Wikipedia&lt;/a&gt;
  &lt;/small&gt;
&lt;/p&gt;</div>
</code></pre><p>Agora, precisamos dizer para o leitores de telas ou qualquer outra tecnologia assistiva
que o parte do conteúdo exibido na tela é dinâmico. Para fazermos isso, usamos o
atributo <code>aria-live</code><sup><a href="#aria-live-regions">1</a></sup>, o qual pode receber um dos três argumentos:</p>
<ol>
<li><code>off</code>: atributo padrão para todos os elementos da página. Normalmente, você
não precisa definir este atributo de maneira explícita;</li>
<li><code>assertive</code>: interrompe a leitura da tecnologia assistiva de maneira abrupta.
Só deve ser utilizado para notificações críticas ou que requeiram a atenção imediata
do usuário;</li>
<li><code>polite</code>: indica que a uma região da página foi atualizada, mas não requer a
atenção imediata do usuário. É o atributo utilizado com mais frequência.</li>
</ol>
<p>Também utilizamos o atributo <code>aria-busy</code> para informar aos leitores de tela que
a região está aguardando uma atualiação. Este atributo só aceita valores <em>booleanos</em>:
<code>true</code> ou <code>false</code>.</p>
<p>Se você leu o código acima com atenção, verá que definimos outros atributos:
<code>aria-controls</code><sup><a href="#using-aria">2</a></sup> (linha 9) e <code>role</code><sup><a href="#aria-region-role">3</a></sup> (linha 32).
O primeiro indica qual elemento o formulário controla, enquanto o segundo facilita
o acesso à região para pessoas que só podem utilizar o teclado para navegar na página.</p>
<p>Agora, vamos adicionar um pouco de JavaScript para  selecionar os dados dos
planetas selecionados em nosso formulário:</p>
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">const PLANETAS = {
  mercurio: {
    nome: 'Mercúrio',
    descricao: 'Mercúrio é o menor e mais interno planeta do Sistema Solar. Tem o nome da divindade romana Mercúrio, o mensageiro dos deuses.'
  },
  venus: {
    nome: 'Vênus',
    descricao: 'Vênus é o segundo planeta depois do Sol. Foi nomeado em homenamgem à deusa romana do amor e da beleza.'
  },
  terra: {
    nome: 'Terra',
    descricao: 'A Terra é o terceiro planeta depois do Sol e o único planeta conhecido capaz de suportar a vida.'
  },
  marte: {
    nome: 'Marte',
    descricao: 'Marte é o quarto planeta depois do Sol e o segundo menor planeta do Sistema Solar. Seu nome é uma homenagem ao deus romano da Guerra. Também é conhecido com o &quot;Planeta Vermelho&quot;.'
  }
}

function renderizaInformacoesDoPlaneta(planeta) {
  const planetaInformacoes = document.getElementById('planetaInformacoes');
  const planetaNome = document.getElementById('planetaNome');
  const planetaDescricao = document.getElementById('planetaDescricao');

  planetaInformacoes.setAttribute('aria-busy', 'true');

  setTimeout(() =&gt; {
    if (planeta in PLANETAS) {
      planetaNome.textContent = PLANETAS[planeta].nome;
      planetaDescricao.textContent = PLANETAS[planeta].descricao;
    } else {
      planetaNome.textContent = 'Nenhum planeta selecionado';
      planetaDescricao.textContent = 'Selecione um planeta para ver sua descrição';
    }

    planetaInformacoes.setAttribute('aria-busy', 'false');
  }, 1100);
}

document.getElementById('planetasSelect')
  .addEventListener('change', event =&gt; {
    renderizaInformacoesDoPlaneta(event.target.value);
  });</div>
</code></pre><p>Perceba que utilizamos a função <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals"><code>setTimeout</code></a>
(linha 27) para simular o acesso à uma API externa.</p>
<p>E para finalizar, adicionaremos um indicador de carregamento utilizando CSS. Sempre
que algum elemento da página (<code>div</code>, <code>aside</code>, <code>main</code>, etc.) tiver um atributo <code>aria-busy</code>
que seja igual a <code>true</code>, diminuiremos a opacidade do elemento e adicionaremos um
ícone de carregamento sobre o elemento em questão.</p>
<pre><code class="highlited-code-wrapper langcss"><div class="highlited-code" data-language="css">[aria-busy] {
  transition: opacity 0.2s linear;
  position: relative;
}

[aria-busy=&quot;true&quot;] * {
  opacity: 0.7;
}

[aria-busy=&quot;true&quot;]:before {
  content: '';
  display: block;
  border: 6px solid transparent;
  border-top-color: purple;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  animation: spin 1.2s infinite linear;
  position: absolute;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}</div>
</code></pre><p>Depois de tudo isso, podemos ver o nosso exemplo em ação:</p>
<iframe height="300" style={{width: '100%'}} scrolling="no" title="Exemplo de loading acessível" src="https://codepen.io/douglasdemoura/embed/poNqmYq?default-tab=" frameBorder="no" loading="lazy" />

<p>Experimente utilizar um leitor de tela no exemplo que acabamos de construir e veja
como os atributos que adicionados ao nosso exemplo fornecem uma boa experiência de
uso para usuários com necessidades especiais. Claro que podemos chegar ao mesmo
resultado de diversas outras formas, mas é importante sempre levarmos em consideração
se a nossa aplicação é acessível.</p>
<p><small>
  <abbr title="Post scriptum">P.S.</abbr>: interaja e edite o código deste exemplo no <a href="https://codepen.io/douglasdemoura/pen/poNqmYq" target="_blank">CodePen</a>.
</small></p>

<footer className="footnotes">
  <h4>Referências</h4>

  <ol>
    <li id="aria-live-regions">
      <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" target="_blank">ARIA live regions</a>
    </li>
    <li id="using-aria">
      <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques" target="_blank">Using ARIA: Roles, states, and properties</a>
    </li>
    <li id="aria-region-role">
      <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role" target="_blank">ARIA: Region role</a>
    </li>
  </ol>
</footer>

Douglas Moura

Douglas Moura

#html

Dissecando URLs com JavaScript

Criando modais nativos com o elemento dialog

Use este script do NPM para gerar seus arquivos do EditorConfig

Como criar um indicador de carregamento perfeito para seus web apps