​Скрытые возможности элемента input

Элемент input в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

​​​Создаём калькулятор на чистом HTML и CSS

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

https://blog.scottlogic.com/2022/01/20/noJS-making-a-calculator-in-pure-css-html.html

#html #css

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx многие воспринимают как средство, которое спасает интернет от одностраничных приложений. Но автор этой статьи написал с помощью htmx простой список ToDo. После загрузки его страницы взаимодействие с сервером прекращается — всё остальное происходит локально на клиенте.

Как он это сделал? Выполнял серверный код в сервис-воркере. Сможете ли вы также? Конечно, мы вам даже инструкцию принесли:

https://habr.com/ru/companies/ruvds/articles/849854/

#htmx #javascript #html

Стильный переключатель на чистом CSS

Этот свитч сделан с использованием чистых HTML и CSS. Никакого SVG. Посмотреть, как это работает можно на странице проекта:

https://codepen.io/josetxu/pen/NWEPmGz

#html #css #codepen

Как разобрать HTML в JavaScript

По мере роста спроса на данные растёт и потребность в их извлечении, обработке и анализе. Но большая часть этих данных представлена на веб-сайтах по всему интернету. Как же получить к ним доступ программно?

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

#javascript #html #парсинг

Коллекция лоадеров и скелетонов для вашего проекта

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

Все они выполнены на HTML и CSS с применением препроцессоров. Так что всё, что вам нужно сделать — скопировать их в свой проект.

#html #css #лоадер

Эффект матового стекла для веба

Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.

Своим опытом и готовым проектом автор поделился в статье.

#html #css #ui

Скрытые возможности элемента input

Большинство собратьев элемента input вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Как парсить сайты в обход защиты от парсинга?

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

На Хабре есть неплохой гайд. Делимся с вами: https://habr.com/ru/post/710982/

#linux #html #javascript #сsharp

Что такое innerHTML и почему иногда его лучше не использовать

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

Пример:

// Берём элемент <div> со страницы
const div = document.getElementById("example");

// Устанавливаем его содержимое
div.innerHTML = "<p>Привет, я новый текст!</p>";

Теперь в <div id="example"> появится <p>Привет, я новый текст!</p>. Всё, что ранее было внутри тега <div> (если что-то было), заменяется.

Чем удобен innerHTML

— Просто и быстро. Позволяет одной строкой добавить в элемент сложный HTML-код.
— Динамичность. Можно генерировать HTML-контент программно, например, на основе данных из API.

const list = ["яблоко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => `<li>${item}</li>`).join("");

После выполнения в элементе с id "list" появится список:

<ul>

  <li>яблоко</li>

  <li>банан</li>

  <li>апельсин</li>

</ul>

Почему же тогда в некоторых случаях лучше НЕ использовать innerHTML?

1. Уязвимость для XSS-атак. При работе с innerHTML вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.

2. Удаление старого содержимого. innerHTML полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener), они будут сброшены.

3. Низкая производительность на больших объёмах данных. Если нужно добавлять или изменять много элементов, innerHTML может стать неэффективным. Каждый раз он полностью пересоздаёт внутреннюю структуру элемента, даже если изменения минимальны.

Чем же тогда заменить её?

1. Используйте textContent, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent — ваш друг. Он безопасен, потому что не интерпретирует HTML.

2. Используйте insertAdjacentHTML, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.

3. Создавайте элементы через DOM-методы для сложной логики. Вместо innerHTML можно использовать методы вроде document.createElement и appendChild.

Если всё же решитесь использовать innerHTML, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.

#простымисловами #html #javascript