JavaScript: ведущий ноль

Довольно часто к числу, выводимому на экран, нужно добавить ведущий ноль, особенно, если это число меньше 10. Как это сделать?

Узнать правильный ответ

#interview #frontend #js

JavaScript: цвет страницы

Как с помощью свойства CSS 'filter' и JavaScript динамически менять цвет страницы?

Узнать правильный ответ

CSS: выбираем элемент без атрибута

Как в HTML-документе обратиться к стилям элемента, у которого нет определенного атрибута?

Узнать правильный ответ


#interview #frontend #css

JavaScript: динамический импорт модулей

Нужно загрузить файл из папки, название которой создается динамически.

Написав:

import test from folder + '/test.js'

или

import test from `${folder}/test.js`

Вы поймете, что код не работает...


Узнать правильный ответ

#interview #frontend #js

CSS: отключаем выделение текста

Читать

Попробуем отключить возможность выделения текста (как впрочем и всего остального содержимого веб-страницы) с помощью CSS-свойства user-select

#css #frontend

CSS: flexbox для выравнивания по центру

Читать

Flexbox дал, пожалуй, наипростейшую возможностью центрирования элементов на странице.

#frontend #css

JavaScript: доступ к истории

Читать

Свойство window.history используется только для чтения и ссылается на объект History, позволяющий манипулировать историей сессии броузера. То есть получать сведения о страницах, загруженных в текущей вкладке или фрейме.

#frontend #js

JavaScript: определяем броузер

Кажется, что узнать, в каком броузере находится текущая сессия пользователя, довольно просто. Ведь именно для этого предназначено свойство userAgent объекта navigator

Узнать правильный ответ

#interview #frontend #js

JavaScript: поиск элементов массива

Представьте, что Вы участвуете в разработке интернет-магазина, и существует необходимость отбирать товары по ценовому диапазону и производителю.

Узнать правильный ответ

#interview #frontend #js

JavaScript: объединение данных

Допустим, Вам нужно создать для личного кабинета пользователя дашборд, позволяющий получать информацию, собранную из различных сторонних источников (API).

Узнать правильное решение

#interview #frontend #js

JavaScript: удаление дублей

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

Узнать правильный ответ

#interview #frontend #js

JavaScript: преобразование данных

Допустим, у нас есть массив товаров, для каждого из которых определен рейтинг. Ваша задача: найти в массиве товар с наивысшим рейтингом.

Узнать правильный ответ

#interview #frontend #js

CLI: обнволение npm

Читать

Довольно часто возникает необходимость обновления большого количества npm-пакетов, принадлежащих разным проектам и находящихся в различных подпапках одной директории.

#cli #bash

HTML: отправляем данные нередактируемых полей

Читать

Порой, при работе с HTML-формой возникает необходимость в отключении возможности редактирования значения поля ввода input пользователем.

Простое и очевидное решение задачи - использование для такого поля атрибута disabled. Но, такой подход не позволяет передавать данные отключенного поля ввода при отправке сведений формы на сервер.

Атрибут readonly - решение проблемы, он позволяет отправлять данные поля ввода в составе сведений формы и отключает возможность внесения изменений для пользователя

#frontend #html

JavaScript: как получить подстроку

Читать

Часто в javaScript нужно извлечь часть строки.

Вот простой способ решения такой задачи. С помощью метода split() и манипуляции с элементами массива получаем фрагмент строки от ее начала до первого вхождения разделителя (не включая сам разделитель -):

const str = 'test-hey-ho'
str.split('-')[0] //'test'

#interview #frontend #js

Полезные элементы HTML: dialog

Читать

HTML-элемента 'dialog' позволяет получать модальные диалоговые окна, не полагаясь на библиотеки JavaScript. Такой семантически верный подход можно использовать для создания оповещений, подтверждений, всплывающих окон.

Например:

<dialog id="myDialog">
    <p>Это диалог</p>
    <button onclick="document.getElementById('myDialog').close()">Закрыть</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Открыть</button>

Такой элемент достаточно просто стилизовать или оснастить дополнительным функциями с помощью JavaScript.

#frontend #html

Полезные элементы HTML: picture

Читать

HTML-элемент picture - контейнер для вложенных элементов source. Он необходим для загрузки адаптивных изображений, оптимизированных в соответствии с выбранными размерами и разрешениями экрана.

picture позволяет определить несколько источников изображения source и выбрать лучший, исходя из возможностей устройства.

Например:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

Таким образом, picture сокращает время загрузки картинки, повышает удобство работы пользователя, предоставляя наиболее подходящее изображение.

#frontend #html

Полезные элементы HTML: output

Читать

HTML-элемент ouptput нужен для вывода на экран результатов вычислений или действий пользователя. Это особенно полезно в формах, для визуализации возможностей обратной связи в режиме реального времени, полагаясь на данные, введенные пользователем.

Например:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

Таким образом, output дает простой вариант создания интерактивных и динамических форм без необходимости использования многострочного кода JavaScript.

#frontend #html

Полезные элементы HTML: data

Читать

HTML-элемент data связывает машиночитаемое значение с его человекопонятным представлением. Это особенно полезно для добавления семантического значения к вашему контенту, например, для привязки идентификатора продукта к его отображаемому названию.

<p>Кетчуп:</p>
<ul>
  <li><data value="398">Мини</data></li>
  <li><data value="399">Джамбо</data></li>
  <li><data value="400">Мега Джамбо</data></li>
</ul>

или

<p>Price: <data value="49.99">$49.99</data></p>

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

#frontend #html

Полезные элементы HTML: details и summary

Читать

HTML-элементы details и summary предназначены для создания любых сценариев, в которых необходимо скрывать и раскрывать информацию (например: FAQ).

Если summary является первым дочерним элементом details, содержимое summary используется в качестве метки для виджета раскрытия, который обычно представлен на экране с использованием небольшого треугольника, меняющего направление своей вершины после нажатия, для демонстрации состояния открытия или закрытия блока с информацией. При этом метка summary (если она есть) находится рядом с треугольником.

Например:

<details>
    <summary>More Information</summary>
    <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>

Таким образом, details и summary позволяют оптимизировать пользовательский интерфейс за счет уменьшения количества одновременно отображаемой информации, что, в свою очередь, улучшает восприятие и читабельность веб-страниц для пользователя.

#frontend #html

Если кратко: библиотеки и фреймворки

Читать

Что такое библиотеки и фреймворки, для чего они нужны и чем отличаются, легко объяснить на простых примерах из нашей повседневной жизни.

Разработка с использованием библиотек очень похожа на приобретение ингредиентов для какого-либо блюда.

#tutorial #nutshell #есликратко