Algoritmos de força bruta são exatamente o que parecem – métodos diretos de resolver um problema que dependem de poder computacional puro e de tentar todas as possibilidades em vez de técnicas avançadas para melhorar a eficiência.

Por exemplo, imagine que você tem um pequeno cadeado com uma combinação 4 números, cada um deles indo de 0 a 9. Você esquece sua combinação, mas você não quer comprar outro cadeado. Como você não consegue se lembrar de nenhum dos números, precisa usar um método de força bruta para abrir a fechadura.

Você, então, insere todos os números no cadeado a partir do zero e os experimenta um a um: 0001, 0002, 0003 e assim sucessivamente até que ele abra. Na pior das hipóteses, seriam necessárias 10⁴, ou 10 mil tentativas para encontrar sua combinação.

Um exemplo clássico em ciência da computação é o problema do caixeiro viajante (TSP). Suponha que um vendedor precisa visitar 10 cidades em todo o país. Como determinar a ordem em que essas cidades devem ser visitadas de modo que a distância total percorrida seja minimizada?

A solução da força bruta é simplesmente calcular a distância total para toda possibilidade de rota possível e, depois, selecionar a mais curta. Isso não é particularmente eficiente, pois é possível eliminar muitas rotas através algoritmos inteligentes.

A complexidade de tempo da força bruta é O(mn), que às vezes é escrito como O(n*m) . Então, se fôssemos procurar uma string de "n" caracteres em uma string de "m" caracteres usando força bruta, faríamos n * m tentativas.

Mais informações sobre algoritmos

Na ciência da computação, um algoritmo é simplesmente um conjunto de procedimentos passo a passo para solucionar um dado problema. Algoritmos podem ser projetados para realizar cálculos, processar dados ou realizar tarefas automatizadas de raciocínio.

Veja como a Wikipédia os define:

Um algoritmo é um método eficaz que pode ser expresso em uma quantidade finita de espaço e tempo e em uma linguagem formal bem definida para calcular uma função. Partindo de um estado e de uma entrada (talvez vazia) iniciais, as instruções descrevem uma computação que, quando executada, prossegue através de um número finito de estados sucessivos bem definidos, eventualmente produzindo uma "saída" e terminando em um estado final. A transição de um estado para o seguinte não é necessariamente determinista; alguns algoritmos, conhecidos como algoritmos aleatórios, incorporam entradas aleatórias.

Existem certos requisitos que um algoritmo deve cumprir:

1. Definitividade: cada etapa do processo é declarada com precisão.
2. Computabilidade efetiva: cada etapa do processo pode ser realizada por um computador.
3. Finitude: o programa terminará eventualmente com sucesso.

Alguns tipos comuns de algoritmos incluem:

• algoritmos de classificação
• algoritmos de pesquisa
• algoritmos de compressão.

As classes de algoritmos incluem:

• de grafos
• de programação dinâmica
• de ordenação
• de busca
• de cordas (strings)
• matemáticos
• de geometria computacional
• de otimização
• diversas

Embora tecnicamente não sejam uma classe de algoritmos, as estruturas de dados são frequentemente agrupadas com eles.

Eficiência

Os algoritmos são mais comumente julgados por sua eficiência e pela quantidade de recursos de computação necessários para concluir sua tarefa.

Uma maneira comum de avaliar um algoritmo é observar sua complexidade de tempo. Isso mostra como o tempo de execução do algoritmo aumenta à medida que o tamanho da entrada aumenta. Como os algoritmos de hoje precisam operar em grandes entradas de dados, é essencial que nossos algoritmos tenham um tempo de execução razoavelmente rápido.

Algoritmos de ordenação

Os algoritmos de ordenação são de vários tipos, dependendo de sua necessidade. Alguns, muito comuns e amplamente utilizados, são:

Quicksort (Ordenação rápida)

Não há discussão sobre ordenação que possa terminar sem a ordenação rápida. Aqui está o conceito básico (em inglês): Quick Sort

Mergesort

Um algoritmo de ordenação que se baseia no conceito de como os arrays ordenados são mesclados para gerar um array ordenado. Leia mais sobre isso aqui (em inglês): Mergesort

O currículo do freeCodeCamp enfatiza fortemente a criação de algoritmos. Isso ocorre porque aprender algoritmos é uma boa maneira de praticar suas habilidades em programação. Os entrevistadores geralmente testam os candidatos quanto aos algoritmos durante as entrevistas de emprego para desenvolvedores.

Livros sobre algoritmos em JavaScript (em inglês):

Data Structures in JavaScript

• Livro gratuito que cobre as estruturas de dados em JavaScript
• GitBook

Learning JavaScript Data Structures and Algorithms - Second Edition

• Trata de programação orientada a objetos, herança prototípica, algoritmos de ordenação e busca, quicksort, mergesort, árvores binárias de busca e conceitos avançados de algoritmos
• Amazon
• ISBN-13: 978-1785285493

Data Structures and Algorithms with JavaScript: Bringing classic computing approaches to the Web

• Trata de recursão, algoritmos de ordenação e busca, listas vinculadas e árvores binárias de busca.
• Amazon
• ISBN-13: 978-1449364939

Já ouvi muitos desenvolvedores dizerem que odeiam CSS. Na minha experiência, isso é resultado de não terem tempo de aprender o CSS.

O CSS não é a "linguagem" mais bonita do mundo, mas tem impulsionado com sucesso o estilo da web há mais de 20 anos. Nada mal, hein?

Contudo, à medida que você escreve mais CSS, você vê rapidamente uma grande desvantagem.

É muito difícil manter o CSS.

CSS mal-escrito rapidamente se transforma em um pesadelo.

Veja aqui algumas convenções de nomenclatura que salvarão você do estresse e incontáveis horas mais tarde.

Usar 'strings' delimitadas por hífen

Se você já escreve muito em JavaScript, então certamente usa variáveis em camel case, pois uma prática comum.

var redBox = document.getElementById('...')

Ótimo, certo?

O problema é que esta forma de nomenclatura não é adequada para o CSS.

Não faça isso:

.redBox {  border: 1px solid red;}

Ao invés disso, use:

.red-box {   border: 1px solid red;}

Esta é uma convenção de nomenclatura padrão do CSS. É indiscutivelmente mais legível.

Ela também é consistente com os nomes das propriedades do CSS,

// Correto

.some-class {   font-weight: 10em}

// Incorreto

.some-class {   fontWeight: 10em}

A convenção de nomenclatura BEM

As equipes têm abordagens diferentes para escrever os seletores de CSS. Algumas equipes usam delimitadores com hífen, enquanto outros preferem usar a convenção de nomenclatura mais estruturada, chamada BEM.

Geralmente, existem 3 problemas que as convenções de nomenclatura do CSS tentam resolver:

1. Saber o que um seletor faz, apenas olhando seu nome
2. Ter uma ideia sobre onde um seletor pode ser usado, apenas olhando para ele
3. Conhecer as relações entre os nomes das classes, apenas olhando para eles.

Você já viu nomes de classes escritos assim:

.nav--secondary {  ...}

.nav__header {  ...}

Essa é a convenção de nomenclatura BEM.

Explicando BEM para uma criança de 5 anos

BEM tenta dividir a interface geral do usuário em pequenos componentes reutilizáveis.

Considere a imagem abaixo:

Brincadeira. Não é  premiada, infelizmente. :(

O bonequinho de palito, aqui, representa um componente, como um bloco de design.

Você já deve ter adivinhado que o B em "BEM" significa "Bloco".

No mundo real, esse 'bloco' poderia representar um site de navegação, cabeçalho, rodapé, ou qualquer outro bloco de design.

Seguindo a prática explicada acima, um nome de classe ideal para este componente poderia ser stick-man.

O componente deveria ser estilizado assim:

.stick-man {   }

Usamos strings delimitadas aqui. Isso é bom!

E para elementos

O E em, "BEM" significa "Elementos".

Geralmente, blocos de design raramente vivem isolados.

Por exemplo, o stick-man tem uma head (cabeça), e dois arms e feet (braços e pés, respectivamente) maravilhosos.

head, feet e arms são todos elementos dentro do componente. Eles podem ser visto como componentes filhos, ou seja, filhos do componente pai geral.

Usando a convenção de nomenclatura BEM, os nomes das classes de elementos derivados são colocados adicionando duas sublinhas, seguidas do nome do elemento.

Por exemplo:

.stick-man__head {

}

.stick-man__arms {

}

.stick-man__feet {

}

M para Modificadores

O M em "BEM" significa "Modificadores".

E se o boneco fosse modificado e pudéssemos ter um blue ou um red?

No mundo real, isso pode ser um botão red ou um botão blue. Estes são modificações dos componentes em questão.

Usando BEM, os nomes das classes modificadoras são obtidos adicionando dois hifens, seguidos do nome do elemento.

Por exemplo:

.stick-man--blue {

}

.stick-man--red {

}

O último exemplo mostrou o componente pai sendo modificado. Esse não é sempre o caso.

E se tivéssemos dois stick-man com diferentes tamanhos de cabeça?

Desta vez, o elemento foi modificado. Lembre-se de que o elemento é um componente filho dentro do bloco que o contém.

.stick-man representa o bloco, enquanto .stick-man__head representa o elemento.

Como visto no exemplo acima, o hífen duplo também pode ser usado assim:

.stick-man__head--small {

}

.stick-man__head--big {

}

Novamente , observe o uso do hífen duplo no exemplo acima. Ele é usado para denotar um modificador.

Agora você entendeu.

Basicamente, é assim que a convenção de nomenclatura BEM trabalha.

Pessoalmente, eu costumo usar apenas nomes de classes com delimitadores de hífen para projetos simples e uso a BEM para interfaces mais envolvidas.

Você pode ler mais sobre a BEM.

BEM - Modificador de elemento em bloco

BEM - O modificador de elemento de bloco é uma metodologia que ajuda você a obter componentes reutilizáveis e compartilhamento de código no… (Fonte: getbem.com, em inglês)

Por que usar convenções de nomenclatura?

Existem só dois problemas difíceis na ciência da computação: invalidação de cache e nomeação de objetos — Phil Karlton.

Nomear objetos é difícil. Tentamos tornar as coisas mais fáceis, economizando tempo no futuro com códigos mais sustentáveis.

Nomear corretamente em CSS torna seu código fácil de ler e sustentável.

Se você optar por usar a convenção de nomenclatura BEM, será mais fácil de ver o relação entre seus componentes/blocos de design apenas olhando para a marcação.

Está se sentindo confiante?

Nome CSS com 'hooks' do JavaScript

Hoje é o primeiro dia de trabalho do John.

Ele recebe um código em HTML com essa aparência:

<div class="siteNavigation">

</div>

John está lendo este artigo e percebe que esta pode não ser a melhor maneira de nomear as coisas em  CSS. Então, ele vai em frente e refatora a base de código assim:

<div class="site-navigation">

</div>

Parece bom, não?

Mal sabe John que ele quebrou a base de código!

Como?

Em algum lugar no código JavaScript, havia uma relação com o nome da classe anterior, siteNavigation:

//Código em JavaScript

const nav = document.querySelector('.siteNavigation')

Então, com a mudança no nome da classe, a variável nav ficou null.

Que triste.

Para evitar casos como estes, os desenvolvedores criaram estratégias diferentes.

1. Usar nome de classes 'js-'

Uma maneira de reduzir esses bugs é usar um nome de classe js-* para denotar um relacionamento com o elemento do DOM em questão

Por exemplo:

<div class="site-navigation js-site-navigation">

</div>

E, no código, JavaScript:

//Código em JavaScript

const nav = document.querySelector('.js-site-navigation')

Por convenção, qualquer pessoa que veja o nome da classe js-site-navigation entenderá que existe um relacionamento com esse elemento do DOM no código em JavaScript.

2. Usar o atributo 'Rel'

Eu não uso essa técnica, mas já vi outras pessoas usando.

Você reconhece isso?

<link rel="stylesheet" type="text/css" href="main.css">

Basicamente, o atributo define o relacionamento que o recurso vinculado tem com o documento onde é referenciado.  

No exemplo anterior com John, os defensores dessa técnica fariam isso:

<div class="site-navigation" rel="js-site-navigation">

</div>

No JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Eu tenho minha dúvidas sobre esta técnica, mas é provável que você a encontre em algumas bases de códigos.  A defesa aqui é: “bem, há uma relação com o JavaScript, então eu uso o atributo 'Rel' para denotar isso”.

A web é um lugar imenso, com diferentes “métodos”  para solucionar o mesmo problema.

3. Não usar atributos de dados

Alguns desenvolvedores usam atributos de dados como uma conexão com o JavaScript. Isso não está correto. Por definição, os atributos de dados são usados para armazenar dados personalizados.

Edição nº 1: conforme mencionado por algumas pessoas incríveis na seção de comentários original deste texto, se as pessoas usarem o atributo 'Rel', talvez não haja problema em usar atributos de dados em certos casos. No final, a decisão é sua.

Dica de bônus: escrever mais comentários no CSS

Isso não tem a ver com convenções de nomenclatura, mas também poupará algum tempo.

Embora muitos desenvolvedores da Web tentem NÃO escrever comentários em JavaScript ou se ater a alguns, penso que você deveria escrever mais comentários em CSS..

Como CSS não é a “linguagem” mais elegante, comentários bem estruturados podem economizar tempo quando você está tentando entender seu código.

Não dói.

Veja como o código-fonte do Bootstrap é bem-comentado.

Você não precisa escrever comentários para dizer que color: red dará uma cor vermelha. No entanto, se estiver usando um truque de CSS menos óbvio, sinta-se à vontade para escrever um comentário.

Pronto para se tornar profissional?

O autor criou um guia grátis de CSS para que suas habilidades de CSS se destaquem imediatamente. Obtenha o e-book gratuito aqui (em inglês).

Se você está aprendendo estruturas de dados, uma lista vinculada é uma estrutura de dados que você deve conhecer. Se você realmente não a entende ou como ela é implementada em JavaScript, este artigo está aqui para ajudar você.

Neste artigo, discutiremos o que é uma lista vinculada, como ela é diferente de um array e como implementá-la em JavaScript. Vamos começar.

O que é uma lista vinculada?

Uma lista vinculada é uma estrutura de dados linear semelhante a um array. No entanto, ao contrário dos arrays, os elementos não são armazenados em um local da memória ou índice. Em vez disso, cada elemento é um objeto separado, que contém um ponteiro ou um link para o próximo objeto dessa lista.

Cada elemento (comumente chamado de nó) contém dois itens: os dados armazenados e um link para o próximo nó. Os dados podem ser qualquer tipo de dados válido. Você pode ver isso ilustrado no diagrama abaixo.

O ponto de entrada para uma lista vinculada é chamado de head (cabeça/cabeçalho). Head é uma referência ao primeiro nó na lista vinculada. O último nó da lista aponta para null. Se a lista estiver vazia, head é uma referência nula.

Em JavaScript, uma lista vinculada pode ter a seguinte aparência:

const list = {
    head: {
        value: 6
        next: {
            value: 10                                             
            next: {
                value: 12
                next: {
                    value: 3
                    next: null	
                    }
                }
            }
        }
    }
};

Uma vantagem das listas vinculadas

• Os nós podem ser facilmente removidos de ou adicionados a uma lista vinculada sem reorganizar toda a estrutura de dados. Esta é uma vantagem que elas tem sobre os arrays.

Desvantagens das listas vinculadas

As operações de pesquisa são lentas em listas vinculadas. Ao contrário dos arrays, o acesso aleatório aos dados dos elementos não é permitido. Os nós são acessados sequencialmente a partir do primeiro nó.

Elas também usam mais memória do que os arrays por causa do armazenamento dos ponteiros.

Tipos de listas vinculadas

Existem três tipos de listas vinculadas:

• Listas vinculadas individualmente : Cada nó contém apenas um ponteiro para o próximo nó. É disso que falamos até agora.
• Listas duplamente vinculadas : Cada nó contém dois ponteiros, um ponteiro para o próximo nó e um ponteiro para o nó anterior.
• Listas vinculadas circulares : A lista vinculada circular é uma variação de uma lista vinculada na qual o último nó aponta para o primeiro nó ou qualquer outro nó anterior, formando um laço.

Implementando um nó da lista em JavaScript

Como afirmado anteriormente, um nó da lista contém dois itens: os dados e o ponteiro para o próximo nó. Podemos implementar um nó de lista em JavaScript da seguinte maneira:

class ListNode {
    constructor(data) {
        this.data = data
        this.next = null                
    }
}

Implementando uma lista vinculada em JavaScript

O código abaixo mostra a implementação de uma classe de lista vinculada com um construtor. Observe que, se o nó principal não for passado, ele será inicializado como nulo.

class LinkedList {
    constructor(head = null) {
        this.head = head
    }
}

Juntando tudo

Vamos criar uma lista vinculada com a classe que acabamos de criar. Primeiro, criamos dois nós da lista, node1 e node2, e um ponteiro do nó 1 para o nó 2.

let node1 = new ListNode(2)
let node2 = new ListNode(5)
node1.next = node2

Em seguida, criaremos uma lista vinculada com o node1.

let list = new LinkedList(node1)

Vamos tentar acessar os nós na lista que acabamos de criar.

console.log(list.head.next.data) //retorna 5

Alguns métodos das listas vinculadas

Em seguida, implementaremos quatro métodos auxiliares para a lista vinculada. Eles são:

1. size()
2. clear()
3. getLast()
4. getFirst()

1. size() (ou tamanho)

Este método retorna o número de nós presentes na lista vinculada.

size() {
    let count = 0; 
    let node = this.head;
    while (node) {
        count++;
        node = node.next
    }
    return count;
}

2. clear() (ou limpar)

Este método esvazia a lista.

clear() {
    this.head = null;
}

3. getLast() (ou obter o último)

Este método retorna o último nó da lista vinculada.

getLast() {
    let lastNode = this.head;
    if (lastNode) {
        while (lastNode.next) {
            lastNode = lastNode.next
        }
    }
    return lastNode
}

4. getFirst() (ou obter o primeiro)

Este método retorna o primeiro nó da lista vinculada.

getFirst() {
    return this.head;
}

Sumário

Neste artigo, discutimos o que é uma lista vinculada e como ela pode ser implementada em JavaScript. Também discutimos os diferentes tipos de listas vinculadas e suas vantagens e desvantagens.

Espero que tenham gostado de ler.

Deseja ser notificado quando a autora publicar um novo artigo? Clique aqui.