Полезные элементы 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

CSS: горизонтальный параллакс

Читать

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

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

#frontend #css

Если кратко: конкурентность и параллелизм

Читать

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

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

React: дорожная карта

Читать

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

#tutorial #frontend #js

PHP: длина массива

Читать

Разработчик PHP нередко встречается на собеседвании с вопросом: "Какова максимальная длина массива в PHP?". И здесь следует понимать, что в PHP для массивов не существует жестко определенной "длины", так как она зависит от количества памяти, выделенной для PHP-процессов.

#interview #backend #php

Frontend: ресурсы

Читать

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

#frontend #library #css #js #react #design

навигация по тегам:

1. #ai
2. #backend
3. #bash
4. #cli
5. #css
6. #design
7. #dev
8. #drBrainAI
9. #frontend
10. #go
11. #html
12. #interview
13. #js
14. #nutshell
15. #opinion
16. #php
17. #python
18. #tailwind
19. #tutorial
20. #есликратко

проголосовать за канал

CSS: центрируем элемент по вертикали

Читать

Проблема центрирования блоков на веб-страницах уже давно стала мемом, особенно для backend-разработчиков. За последние годы описано множество способов выравнивания элементов страницы по центру, как по горизонтали, так и по вертикали, в том числе с использованием возможностей модели flexbox.

#frontend #css