11 truques frontend que a maioria dos desenvolvedores frontend não sabem sobre

Truques interessantes que você pode fazer com HTML/JS/CSS

Abaixo estão alguns truques que muitos desenvolvedores frontend não sabem. A ver com HTML/CSS/JavaScript.

Espero que haja pelo menos um casal na lista que você não sabia!

1. Elemento datalist

Um elemento HTML que você não vê usou muito e sem motivo!

A tag é usada para fornecer um recurso “autocompletar” para elementos. Você verá uma lista de opções pré-definidas como você digita.<datalist><input>

exemplo:

<input list="animals" name="animal" id="animal"><datalist id="animals">
<option value="Cat">
<option value="Dog">
<option value="Chicken">
<option value="Cow">
<option value="Pig">
</datalist>

O atributo id (ver itens em negrito acima) deve ser igual ao atributo da lista do , é isso que os une.<datalist><input>

2. Etiqueta clicável com uma caixa de seleção

Se você quiser uma etiqueta clicável para caixa de seleção, você normalmente usaria ter um elemento com um atributo “for”, como abaixo.label

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">I agree</label>

Você pode realmente apenas colocar o elemento em torno da caixa de seleção para realizar a mesma coisa. Então, quando você clicar em “concordo” ele selecionará a caixa de seleção!label

exemplo:

<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value">I agree</label>

3. Child selectors

Probably more of the most well used on this list but most people don’t know the extent of their power.

Child Selectors are used to match all the elements which are a child of a specified element. It gives the relation between two elements.

Examples:

 /* 1st <li> element */
li:first-child {
color: red;
}/* Last <li> element */
li:last-child {
color: green;
}// Select All <li> elements but The First Three */
li:nth-child(n+4) {
color: yellow;
}/* Select only the first 3 <li> elemets */
li:nth-child(-n+3) {
color: green;
}/* Styles are elements that are not a <p> */
.my-class:not(p) {
display: none;
}

4. Writing mode

Writing mode is little known yet quite powerful CSS property.

This allows text to run vertically like this:

Vertical text

The code for accomplishing this very simple.

writing-mode: vertical-rl;

Full example:

<style>
.sideway {
writing-mode: vertical-rl;
}
.normal {
width: 5%;
float: left;
}
</style>
<p class="normal">
Hi some paragraph text
</p>
<p class="sideway">
Hey I'm some sidway text
</p>

The property has five possible options.writing-mode

  writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

5. calc() function

The CSS function lets you perform calculations when specifying CSS property values.calc()

The most useful ability of is its ability to mix units, like percentages and pixels. No Preprocessor will ever be able to do that. It is something that has to happen at render time.calc()

Examples:

width: calc(5px + 100px);
width: calc(6em * 8);
width: calc(100% - 50px);

6. Math.round & Math.floor alternatives

Maybe not the easiest to read but still a cool trick.

Math.floor() you can use :0|

0|743.4343 // returns 743
Math.floor(743.4343) // returns 743

Math.round() you can use :+.5|0

812.777+.5|0 // returns 813
Math.round(812.777) // returns 813

7. Console.table

Hopefully, by now you have heard and used but one you may not is which takes in an array or an object. This displays a table in the console view in a very neat way!console.log()console.table()

Array Example:

let car1 = { name : "Audi", model : "A4" }
let car2 = { name : "Volvo", model : "XC90" }
let car3 = { name : "Ford", model : "Fusion" }console.table([car1, car2, car3]);
console.table()

8. Console.time

Outro método útil do console. começa um temporizador. É preciso um parâmetro como rótulo. Em seguida, você usa com o mesmo nome da etiqueta e o console vai produzir o tempo em milissegundos de quando você ligou e console.time()console.timeEnd()console.time()console.timeEnd()

console.time()

exemplo:

// Starts the timer
console.time("MyTimer");// Ends the timer and outputs the time in milliseconds
console.timeEnd("MyTimer");

9. No operador

O operador “in” pode verificar se existe um índice em uma matriz e retornará verdadeiro ou falso.

exemplo:

let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];0 in cars        // returns true
3 in cars // returns true
6 in cars // returns false

Você também pode verificar se existe uma propriedade em um objeto.

exemplo:

const person = { firstName : "Dave", surname: "Smith", age: 34 };'firstName' in person  // returns true
'surname' in person // returns true
'age' in person // returns true
'gendar' in person // returns false

10. Make Chrome um editor de texto

Talvez um muito aleatório na lista. Se você inserir o abaixo na barra de URL e apertar a tecla de retorno. Ele vai transformar o Chrome em um bloco de notas

data:text/html, 

11. Várias declarações em se bloquear sem suportes encaracolados

Eu não usaria este código de produção real, mas ainda assim um que muitas pessoas não sabem. O truque é a círgula!

if (1 === 1)
alert("Alert 1"), alert("Alert 2");

conclusão

Todos os acima da lista podem não ser os mais práticos, mas alguns deles definitivamente não são usados o suficiente no desenvolvimento de frontend e podem realmente ajudá-lo a expandir suas habilidades frontend. Tenho certeza que há muito mais truques!