Однажды в погоне за дешёвым дофамином наткнулся в ленте Твиттера на интересную инфографику, сразу начну с нее — вот она:
Ниже стояла ссылка на статью-источник — делюсь и ейЧитать полностью »
Рубрика «html» - 3
Какого цвета интернет: история смены окраски веб-страницами
2023-10-02 в 10:49, admin, рубрики: charts, color, css, hsl, html, statistics
JavaScript повсюду или почему веб-технологии захватили мир
2023-08-22 в 18:04, admin, рубрики: css, electron, html, javascript, веб-стандарты, нытьё, фронтендЯ давно слежу за развитием веб-технологий и каждый раз, натыкаясь на очередной холивар в интернете про злой и страшный JavaScript, залезающий на чужую территорию, инстинктивно хочу побыть его адвокатом. Обычно все мои доводы сводятся к банальному “не мы такие, жизнь такая” или “ничего личного, просто бизнес”, но в этот раз захотелось развернуто обосновать причины популярности веб-технологий.
Для контекста подобрал рандомные статьи с Хабра, чтобы вы могли насладиться чтением комментариев и оценить накал страстей, прежде чем погрузитесь в данную статью: раз, Читать полностью »
Интересные трюки JS, HTML и CSS, #2
2023-07-24 в 9:00, admin, рубрики: chrome, css, DevTools, Eruda, Firefox, html, javascript, Kiwi Browser, ruvds_статьи, Tor, Блог компании RUVDS.com, браузеры, быстрый эстонский браузер, консоль разработчика, мобильные браузеры, фингерпринтинг
Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Предыдущая часть здесь.
В этом выпуске — DevTools для мобильных браузеров, CSS-антистресс для Booking.com (на КДПВ), единственная защита от фингерпринтинга (спойлер: это браузер Tor, он же Firefox) и др.
Читать полностью »
Рендеринг на сервере и HTMX — это будущее
2023-05-22 в 13:00, admin, рубрики: html, htmx, javascript, Progressive enhancement, ReactJS, ruvds_перевод, single page application, SPA, Блог компании RUVDS.com, веб-приложения, Разработка веб-сайтов, рендеринг на стороне сервера
Современная ситуация с разработкой веб-приложений
Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.
Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
Читать полностью »
Webpack. Создание WebP вместе с Jpeg и Png
2023-05-07 в 17:38, admin, рубрики: css, html, html-верстка, jpeg, optimization, PNG, WebP, webpack, Клиентская оптимизация, плагины, сборщик пакетов, сжатие данных, системы сборкиКак вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.
А как же пользователи, устройства которых не поддерживают данный формат?
В этом случае нам помогает тег <picture> или значение image-set свойства background-image. Просто пишем такие магические конструкции и браузер сам выберет тот источник, который понимает:
<!-- for HTML... -->
<picture>
<source type="image/webp" srcset="images/cat.webp">
<img src="images/cat.jpg" width="100" height="100" alt="Cat">
</picture>Читать полностью »Как я написал удобную оболочку над электронным дневником
2023-05-04 в 14:17, admin, рубрики: css, html, javascript, python, web, дневник, Программирование, Разработка веб-сайтов, электронный дневникСтатья о том, как я в 15 лет облегчил работу с электронным дневником, представленным правительством Кировской области в 2022 году.
Что получилось сделать и как это было реализовано.
Предыстория
Интересные трюки HTML, CSS и JS
2023-05-01 в 9:00, admin, рубрики: avif, chrome, css, designMode, html, HTTP/2 Server Push, imagemagick, javascript, JPEG XL, picture, Reporting API, ruvds_статьи, seo, URI-фрагмент, WebP, Блог компании RUVDS.com, браузеры, тригонометрические функции
Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.
Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать полностью »
Трудности маскирования текстового поля
2023-04-07 в 9:44, admin, рубрики: html, input mask, inputmask, javascript, masking, maskito, open source, TypeScript, web, Блог компании Tinkoff, Разработка веб-сайтовОдин античный оратор говорил, что всем людям свойственно ошибаться. Прошло много веков, а человек продолжает совершать ошибки каждый день. Даже беглое заполнение формы на сайте не обходится без опечаток.
Хороший UI/UX помогает пользователю избежать большинства таких проблем. Инструментов контроля огромное количество, сегодня расскажу про один их них — создание маски для поля ввода силами Javascript.
Создание карты потоков с помощью JavaScript: пошаговое руководство
2023-03-26 в 10:00, admin, рубрики: anychart, css, html, javascript, ruvds_перевод, Блог компании RUVDS.com, графический дизайн, карты потоков
Карты потоков – это мощный способ представления движения объектов между различными географическими локациями, который очень легко реализуется с помощью JavaScript. По сути, они совмещают в себе функциональность карты и потоковой диаграммы. Такой тип визуализации показывает направление движения людей, товаров, денег или информации, а также их количество.
В текущем руководстве мы познакомим вас с процессом создания карты потоков. А чтобы сделать этот процесс более практичным, мы используем пример визуализации количества студентов из Индии, обучающихся в разных странах. Следуя этому руководству, вы научитесь создавать собственные карты потоков с помощью JS для любых видов данных.Читать полностью »
Основы веба, которые должен знать начинающий разработчик
2023-03-06 в 13:00, admin, рубрики: css, html, http, HTTPS, ruvds_перевод, TLS, web-разработка, Блог компании RUVDS.com, протоколы передачи данных, Разработка веб-сайтов, Сетевые технологии
В этом посте я объясню, как работает Интернет. Мы ответим на вопросы наподобие «Как браузер находит файл HTML для запрошенной веб-страницы?», «Как файл HTML превращается в интерфейс пользователя?», «Что можно сделать, чтобы ускорить этот процесс?», «Как устанавливается и поддерживается связь с сервером?», а также рассмотрим следующие концепции:
- Клиент-серверную модель
- Жизненный цикл запроса веб-страницы
- Hypertext Transfer Protocol
- Как браузеры рендерят контент