HTML *

Доброго времени. Меня зовут Дмитрий и я веб‑разработчик. На данный момент работаю в группе компаний по экспорту автомобилей и техники из Японии, Китая и Кореи. Но, сейчас поговорим не об основной работе, а о «подработке».

>= 2 лет назад, на меня вышел директор достаточно крупной автошколы нашего города. На тот момент у них имелось порядка 3-х филиалов, и приблизительно 4,5 тыс. учеников (как актуальных, так и те — которые уже получили свои ВУ). Директор предложил мне поработать с их CRM системой. Данное ПО было написано какими‑то фрилансерами, и на протяжении нескольких лет они же и обеспечивали поддержку. Но, со слов директора, они начали забивать на свою работу, затягивали с выполнением задач или во все игнорировали пожелания по внесению изменений (все это было не бесплатно).

Быстрый сайт - что-то очень очевидное и простое - сайт загружается быстро и не зависает. “3 секунды ожидания и вы начинаете терять пользователей” - пожалуй это правило слышал любой веб-разработчик. Но это правило лишь вершина айсберга - как в вопросе причин потери клиентов, так и в реальном результате.

Статья является комплексным сборником информации о производительности. От причин и истории создания первых инструментов анализа, до современных проблем и универсальных улучшений сайта.

Привет, Хабр! Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.

Подробная инструкция по разработке трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта электроэнергии.

Кейс про генерацию PDF из HTML страницы с таблицами. Расскажу какие решения пытался применить, с какими проблемами пришлось столкнуться и как удалось сгенерировать корректный PDF.

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

Парсинг — это автоматический поиск различных паттернов (на основе заранее определенных конструкций) из текстовых источников данных для извлечения специфической информации.

Не смотря на то, что парсинг — широкое понятие, чаще всего под этим термином подразумевают процесс сбора и анализа данных с удаленных веб-ресурсов.

Со времен появления скринсейвера «Ленты» (ориг. «Ribbons») на Windows 7, эта заставка была стандартом для всех моих рабочих мест, благо в новых версиях Windows (8, 10, 11) эта заставка остается и по сей день. Однако с момента «импортозамещения» десктопной Windows на десктопную Linux, особенно актуального с 2022 года, хотелось получить эту или хотя бы похожую заставку и на этой свобоной платформе. Но вот незадача — нормальный порт найти мне не удалось. Может, конечно, плохо искал (скиньте ссылку в комментариях, если кто‑то нашел что‑то работоспособное).

И тут на просторах github очень удачно нашелся вот этот репозиторий. Автор в canvas с использованием JS наваял на мой взгляд очень даже симпатичную анимацию по мотивам того самого скринсейвера «Ленты».

Причем он в README отметил, что пытался сделать из этой анимации PWA (Progressive Web App), но почему‑то у него ничего из этого не вышло, читай «failed». Вопрос, почему человек, наваявший такой годный «генератор лент», не смог в PWA, оставим за скобками.
А тут как раз я, начавший недавно по служебной необходимости, изучать всем известный фреймворк Electron для создания кроссплатформенных настольных web‑приложений... Чем не альтернатива PWA?

Причина написания сего опуса как и прежде — поделиться чем‑то, что делал для себя и ближайшего окружения, с теми, кому это может быть интересно.

Привет, меня зовут Артур, и я люблю плавные интерфейсы, CSS и современные подходы. Сегодня хочу поговорить с вами о задаче, которая настигает, пожалуй, каждого фронтенд разработчика: о создании галереи.

Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.

Может возникнуть вопрос, сколько символов можно записать в URL и как много кода таким образом можно закодировать? У разных браузеров максимальная длина URL-строки отличается. Но 2000 символов поддерживают все современные браузеры. В такую строку можно закодировать довольно много кода, причем степень сжатия увеличивается с объёмом кода.

Манипулирование деревом DOM, это альфа и омега любого фронтенд-разработчика, а это не возможно без селекторов позволяющих находить HTML элементы. Давайте подробно разберёмся как они работают.

Основных методов селекторов в JavaScript всего 2 и оба они являются методами классов Document и Element:

Ранее я эту статью писал на VC, но подумал, что, быть может, вам всем будет полезно её почитать и здесь, никаких продаж товаров или услуг я не преследую, просто пишу, пытаюсь давать полезности, какие-то плюшки, которые будут помогать людям, всем добра, читаем статью.

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

При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw.

Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.

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

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

▎Проблема

Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px.  При максимальной ширине (1440px), размер шрифта должен быть 40px. 

Для решения этой задачи мы можем использовать специальный онлайн калькулятор:

Min-Max-Value Interpolation

Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

На самом деле, HTML — самый важный язык вычислений, из когда-либо созданных. Недооценивайте его на свой страх и риск.

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

Яндекс капча: попытки установки для самых джун’ых.

Для чего?

Почему вдруг «молодо-зелено» учит «плавали-знаем» тому, что и так описано в оф.документации? Дело в том, что эта документация не сильно newbie-friendly. И если вы никогда до этого не ставили на сайт капчу, то имеется ненулевой шанс, что и не поставите, не прочитав данное «крео». Документация написана довольно сносно, но не для тех, кто здесь впервые. Не хватает основы — концепции (хотя раздел концепций в документации имеется…).

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.

Всем привет и добро пожаловать в мой хабр о тестировании и QA!

Вполне возможно, что новая статья выйдет уже в Новом Году, так что поздравляю всех с Новым Годом. Пусть задачи будут понятными, а спринты не "подгорали"!

В данной статье разберём создание и деплой простой html-страницы с embed-видео для дальнейших тестов.

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

Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.