Дайджест свежих материалов из мира фронтенда за последнюю неделю №476 (5 — 11 июля 2021)
2 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Стилизуем слайдер input range для всех популярных браузеров
1 мин
https://toughengineer.github.io/demo/slider-styler
(смотреть лучше на десктопе)
Работает со всеми популярными браузерами.
Счёт может быть красивым и в HTML, а не в PDF
3 мин
В статье “Что должно быть в счёте на оплату, чего быть не должно и что дико бесит” мы разбирали содержимое счёта. По результатам той работы возникло желание оформить счёт стильно ибо стандартный вариант бухгалтерских программ вроде 1С какой-то страшный.
В статье разберём плюсы генерации счетов в HTML-формате по сравнению с генерацией PDF и тюнинг версии для печати, добавим 5 копеек про ЭЦП (УКЭП).
Дайджест свежих материалов из мира фронтенда за последнюю неделю №475 (28 июня — 4 июля 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Ваше изображение не декоративно
4 мин
Перевод
Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.
Новые форматы графики в CSS с помощью обновлённой функции image-set
4 мин
Перевод
CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set ()
Что случилось с игрой «Колобок» в июне
2 мин
В июне сделал набросок собственного инструмента для дальнейшей разработки "Колобка" с помощью HTML, Matter.js и JSON.
Карго-культ HTML в современном фронтенде
13 мин
Здравствуйте, меня зовут Дмитрий Карловский и я… люблю рвать шаблоны. А во фронтенде как раз крайне много заблуждений вокруг шаблонизации. Так что давайте порвём их на лоскуты снизу вверх и справа налево.
Далее мы разберём что такое шаблоны. Их ключевые достоинства и фатальные недостатки. Зачем они нужны и почему не нужны. Сформируем представление о правильном решении и проедемся катком по популярным. Так что полная гамма чувств нам обеспечена.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №474 (21 — 27 июня 2021)
2 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дизайнерский Multiselect на протеинах
7 мин
Туториал
Те из верстальщиков кто часто клепает формы регистрации или обратной связи обязательно столкнутся с задачей по выводу множественного выбора результатов - multiselect. К сожалению, не все элементы тега <select> все ещё можно из коробки стилизовать по желанию дизайнера. В этом маленьком уроке я хотел бы поделиться своим опытом решения данной проблемы на базе знания CSS и немного ванильного JS.
Bindon: малоизвестные фишки шаблонов Angular
4 мин
Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!
Что можно положить в тег <head>
14 мин
Туториал
Перевод
Рекомендуемый минимум
Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):
meta charset — определяет кодировку веб-сайта, стандартом является utf-8.
meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью
width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)
initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования
Элементы
Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.
Эти элементы предоставляют информацию о том, как документ должен восприниматься и отображаться веб-технологиями, например, браузерами, поисковыми системами, ботами и так далее.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №473 (14 — 20 июня 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Ближайшие события
Пробелы бывают разные: ≠ C2A0
3 мин
Перевод
Я только что потратил более двух часов на устранение, казалось бы, простой проблемы с HTML. Когда я скопировал и вставил небольшой раздел HTML, веб-браузер отображал только что вставленный раздел не так, как оригинал. Горизонтальный интервал между некоторыми элементами был немного другим, из-за чего вся страница выглядела неправильно. Но как такое могло быть? Два раздела HTML были идентичны — новый был буквально копией старого.
Эта простая на первый взгляд проблема бросала вызов всем моим попыткам ее объяснить. Я придумал множество замечательных теорий: проблемы с моими классами CSS или с полями и отступами. Несоответствующие теги HTML. Ошибки браузера. Я попробовал три разных браузера и во всех получил одинаковые результаты.
Чувствуя себя сбитым с толку, я снова посмотрел на два раздела HTML в редакторе WordPress (текстовое представление) и подтвердил, что они полностью идентичны. Затем я попробовал встроенные в Firefox инструменты веб-разработчика для просмотра отображаемых элементов страницы и сравнил все их свойства CSS. Идентичны, но каким-то образом визуализированы по-разному. Я использовал инструменты разработчика, чтобы проверить точный HTML, полученный с моего веб-сервера, снова проверил два раздела и убедился, что они символьно идентичны. Инструмент Firefox «источник страницы» также подтвердил, что эти два раздела полностью идентичны.
К этому моменту я был готов обвинить космические лучи или магию вуду.
DIV должен уйти: улучшаем HTML
4 мин
Перевод
Во многих домах есть комната, существующая только потому, что вокруг неё возвели четыре стены, и теперь ей нужно какое-то предназначение. В результате такие «комнаты-заглушки» используются чаще, чем все остальные комнаты дома, хоть изначально они для этого и не предназначались. Их универсальность и уникальность позволяют нам часто их изменять, не ограничиваться их целью и ощущать свободу их планировки.
Тег
div во многом напоминает такие комнаты. Он является чистым листом. Он подходит для любого потока, позволяет управлять своими функциями, и может становиться всем, что мы пожелаем. Целые веб-сайты могут создаваться (и создаются) почти исключительно на одних div. Загуглите «single div designs», и вы найдёте бесчисленное множество дизайнеров, демонстрирующих свои навыки владения CSS, превращая один div в любую форму, которая им понадобится.Иногда это вселяет трепет, но этой статье я хочу сказать, что нам следует двигаться дальше, к миру без div с именами классов или ID. В мир уникальных элементов HTML. Семантического HTML. Нам нужно сосредоточиться на основах.
<img>. Доклад Яндекса
30 мин
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.
— Всем привет. У меня доклад с интригующим названием в виде одного тега.
— Всем привет. У меня доклад с интригующим названием в виде одного тега.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №472 (7 — 13 июня 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
История одной интеграции Agora SDK
4 мин
Всем привет. Меня зовут Дмитрий, и я типичный представитель касты гребцов на галере X. Основной ЯП, который я использую - PHP, но иногда приходится писать на других.
Используйте ссылки и кнопки правильно. Пожалуйста
3 мин
Туториал
При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе сайта. Рассказываю, как больше никогда не ошибаться в выборе.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №470 (1 — 6 июня 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
