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

#drBrainAI

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

1. сайт
2. генератор коротких видео
3. генератор анонсов
4. чат-бот

Предлагаемый к прочтению материал - одно из множеств мнений о роли генеративного искусственного интеллекта в работе программиста с учетом возможностей больших языковых моделей (LLM), достигнутых в 2024 году.

AI: повышаем продуктивность

Читать

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

#ai #drBrainAI

CSS: простой параллакс

Читать

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

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

#frontend #css

JavaScript: статические методы для CRUD

Читать

CRUD (create, read, update, delete, в переводе: создать, прочитать, обновить, удалить) — четыре базовых функции, которые мы применяем к любой информации в любых приложениях. Рассмотрим варианты реализации CRUD с помощью статических методов при работе с базой данных в JavaScript...

#frontend #js