HTML *

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

Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.

Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.

Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

Технология WebRTC, предоставленная Google для всеобщего использования в 2011 году, нашла широкое применение в системах видео коммуникации, трансляции видео, для создания групповых чатов, видеоконференций, роботов телеприсутствия и роботов-промоутеров. Ее главным достоинством является реализация базовых методов и классов непосредственно в браузере, что обеспечивает широчайшую совместимость с различными ОС и аппаратными платформами. В предлагаемой статье описывается реализованный нами метод масштабирования видео для передачи средствами WebRTC, с использованием Javascript и HTML5.

Небольшое вступление: меня заинтересовали CSS-сбросы по вполне практичной причине. Я инженер-консультант по программному обеспечению, поэтому работаю с разными клиентами и время от времени начинаю новые проекты.

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

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

Первым делом я обратился к уже существующим решениям, графики через API Google, готовые гемы для Ruby. Основной минус в том, что не было возможности убрать или добавить легенду в том формате, который мне нужен, сложно кастомизировать внешний вид этих графиков и, к примеру, нет возможностей строить график по значению timestamp, а выводить уже значения в формате DateTime.

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

Поэтому предлагаю вам скорее ознакомится с материалом, мы научимся сначала делать график с использованием своего js скрипта, а потом поймём как его рендерить в коде.

Представляю содержание.

Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.

Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.

Состоялся релиз web-браузера Firefox 92, сообщает Techradar. Новая версия, как сообщают разработчики, обеспечивает пользователей усиленными протоколами защиты данных, исправлены мелкие недочеты и улучшена производительность браузера, а также разработчики продлили срок поддержки версий 78.14.0 и 91.1.0. 

Кроме этого, версия Firefox 93 перешла в стадию бета-тестирования, релиз которой намечен на 5 октября.

Основные нововведения Firefox 92:

- Появилась возможность автоматического проброса на HTTPS с использованием протокола HTTPS в DNS вместо HTTP-заголовка Alt-Svc (HTTP Alternate Services, RFC-7838), что позволяет серверу определять альтернативный способ обращения к сайту. При отправке DNS-запросов, помимо записей A и AAAA для определения IP-адресов, теперь также запрашивается DNS-запись HTTPS, через которую передаются дополнительные параметры установки соединения.

- Реализована поддержка корректного воспроизведения видео в полном цветовом диапазоне RGB.

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

Unicode определенно усложнил обработку строк, а люди, которые используют языки исключительно с алфавитами ASCII, могут подумать, что это неоправданно. Однако я не говорю на языке ASCII и достаточно взрослый, чтобы помнить альтернативы, и альтернативы были намного хуже, чем сложность Unicode.

Для справки, я начал работать с компьютерами в начале 2000-х годов в России. Русский язык использует алфавит на основе кириллицы. И что касается языков, отличных от ASCII, все относительно просто: 33 буквы, у каждой есть варианты в верхнем и нижнем регистре, и преобразование верхнего/нижнего регистра обратимо. Так как букв всего 33, вы можете уместить их в 8-битной кодировке. Кроме того, есть еще место для псевдографики.

Загвоздка в том, что какое-то время в русском языке использовались три почти одинаково распространенных кодировки.

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

Старые советские системы в основном использовали кодировку KOI8-R. KOI расшифровывается как «Код Обмена Информацией», 8 означает 8-битный, а R означает русский (есть еще украинская версия под названием KOI8-U, украинский алфавит отличается от русского). Эта кодировка, мягко говоря, безумна: она была спроектирована так, что удаление 8-го бита оставляет вам несколько читабельную ASCII-транслитерацию русского алфавита, поэтому русские буквы не идут в обычном порядке.

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

Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.

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

С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.

Сейчас пришло время обсудить с сообществом обновлённые критерии.

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

Emmet - это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово "Emmet" означало муравей - маленькое насекомое, которое может нести в 50 раз больше своего веса.