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 #есликратко

Если кратко: рекурсия

Читать

Рекурсия - это функция, которая вызывает сама себя.

Разработчик Джон Рэнди (Jon Randy) в рамках участия в конкурсе "DEV Computer Science Challenge v24.06.12: One Byte Explainer" дал потрясяющее объяснение рекурсии...

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

Если кратко: глубокое обучение

Читать

Глубокое обучение (Deep Learning, DL) является одним из методов машинного обучения (Machine Learning, ML). Этот метод основан на самообучении многослойных нейронных сетей. Имитируя работу мозга, он подобен обучению ребенка в раннем возрасте, которому дают различные наборы представлений об объекте для того, чтобы он сам смог его распознать в будущем.

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

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

CSS: высокая контрастность

Читать

Иногда просмотр содержимого веб-страницы в режиме высокой контрастности приводит к ошибке при выводе SVG-изображений.

Хорошим вариантом решения такой проблемы стало использование свойства CanvasText для настройки системного цвета и, как результат, корректного вывода картинок в формате SVG.

#frontend #css

Если кратко: большая языковая модель

Читать

Большая языква модель (Large Language Model, LLM) является очень большой моделью глубокого обучения (набором нейросетей), обучаемой на огромных объемах данных, и способной предсказывать следующий токен, опираясь на информацию о предсказанных ранее токенах.

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

CSS: простые эффекты перехода

Читать

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

В статье приведены 12 таких эффектов.

Например, Fade In:

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.fade-in:hover {
    opacity: 1;
}

#frontend #css

Если кратко: алгоритм

Читать

Алгоритм - это четко определенная последовательность действий, выполнение которых приводит к заранее известному результату. В программировании алгоритм - это список необходимых пошаговых инструкций для наилучшего решения задачи...

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