Читайте нас в телеграм:

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логический задачи с айтишных собеседований

8 фишек фронтенд-разработки, о которых знают далеко не все

Внимание, в этой статье хранятся уникальные секреты (🤐), о существовании которых разработчики обычно не подозревают. Надеемся они будут вам интересны.

Тег <datalist>

С помощью тега <datalist> вы можете создать «autocomplete» для <input> элементов, а именно выпадающий список предопределенных параметров.

<input list="cars" name="car" id="car">
<datalist id="cars">
     <option value="BMW">   
     <option value="Mustang">    
     <option value="Sienna">      
     <option value="Avalon">   
     <option value="Fortuner">   
</datalist>

Функция CSS calc()

Функция calc() дает возможность рассчитать значения свойств CSS во время их определения. Более детально можно ознакомиться здесь: MDNWebDocs Самое полезное свойство функции calc() состоит в том, что она позволяет совмещать единицы измерения, например, проценты и пиксели, а затем рассчитывает их общее значение. Это позволяет делать стили динамическими.

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

Оператор in

Оператор in может проверить, существует ли индекс в массиве, и вернет true  или false.

let cars = ['tesla', 'bentley', 'mustang', 'fortuner', 'Audi', 'BMW']; 

0 in cars // returns true
2 in cars // returns true
9 in cars // returns false

console.table()

Это очень крутая фишка! Функция console.table() записывает сообщение в виде таблицы в консоль либо в терминал, принимая массив объектов.

let actor = {name: 'Leonardo Di Caprio', movie: "Titanic"}
let actor2 = {name: "Shah Rukh Khan", movie: "DDLJ"}
let actor3 = {name: "Robert Downey JR", movie: "Iron Man 2"}

console.table([actor, actor2, actor3]);

Writing mode

Позволяет выводить текст вертикально.

<p class="nlt">Subscribe to DevWriteUps</p>

<style>
 .nlt {
   writing-mode: vertical-rl;
 }
</style>

Legalals или TnC

Вы можете добавлять ссылки, цитаты, положения, условия пользования и сотрудничества, любую другую информацию внизу своей страницы с помощью тега <small>. Тег пропорционально уменьшает шрифт текста.

<p>
  <small>* Please read Terms and Conditions</small
</p>

Математические уравнения

В HTML5 предусмотрена возможность встраивания и вывода математических уравнений, числовых задач, использование языка MathML. Просто нужно поместить все свои вычисления между тегами <math> и можно будет использовать другие математические теги. Пример уравнения:

<math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>a</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>+</mo>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>=</mo>
                <msup>
                    <mi>c</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
</math>

Селектор для выбора непосредственного дочернего элемента >

Использование знака > для выбора непосредственного дочернего элемента.

#footer > a

Напомним, дочерним элементом считается таковой, который в дереве элементов находится прямо внутри родительского элемента. 
В нашем примере мы обращаемся ко всем элементам а внутри footer Прием используется для стилизации либо поиска элементов на странице по css либо Xpath.

Читайте также

Обсуждение

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

читайте нас в телеграм

Верстальщик от бога

Самый большой канал по верстке в телеграм

Программист от бога

Божественный юмор о программистах

Тестировщик от бога

Божественный канал о тестировании

АйТи собес

Логические задачи на собеседованиях в IT

Фронтендер от бога

Божественный канал о тестировании

Mobile Dev Lib

Популярное

10 опенсорсных инструментов в помощь разработчику

Так как людей в ИТ все еще не хватает, и не только в США, нагрузка на одного разработчика остается большой. Невозможные дедлайны, задачи по продуктивности не учитывающие наличие лишь 24 часов в сутках, и при этом они хотят, чтобы ни одного бага. Что поможет разработчику в этой потогонке? Опыт говорит, что помогут хорошие инструменты.

Как войти в Java в 2021 году

Советы преподавателя как войти в Java в 2021 году. Что почитать по Java, как найти галеру, книжки по Java, competitive programming

Выбираем между React и Angular

Разбираемся, что лучше использовать в современной фронтенд-разработке.