Обновить
140.16

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

Slack Ruby App. Часть 2. Добавление чартов, или как делать рендер фронта на сервере

Время на прочтение8 мин
Количество просмотров1.2K

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

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

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

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

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

Научится

Используйте фавиконки правильно

Время на прочтение6 мин
Количество просмотров127K

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

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №484 (6 — 12 сентября 2021)

Время на прочтение3 мин
Количество просмотров8.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Состоялся релиз Firefox 92

Время на прочтение3 мин
Количество просмотров9.7K

Состоялся релиз 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.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №483 (30 августа — 5 сентября 2021)

Время на прочтение2 мин
Количество просмотров8.9K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

UiWebKit — Next Gen HTML. Подъём-переворот в мире веб-разработки

Время на прочтение7 мин
Количество просмотров10K

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №482 (23 — 29 августа 2021)

Время на прочтение2 мин
Количество просмотров7.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Мой крошечный любительский проект оказался важнее, чем десять лет работы в индустрии ПО

Время на прочтение3 мин
Количество просмотров47K
В 2013 году я начал писать конвертер mammoth.js для экспорта вордовских документов в HTML. Это небольшая библиотека на 3000 строк кода. И хотя в ней ничего выдающегося, меня не покидает ощущение, что простенький проект важнее и принёс больше пользы, чем десять лет работы в индустрии программного обеспечения.

Первую версию я написал в пятницу днём на работе, когда обратил внимание, как много времени коллеги тратят на копипаст текста из Word в CMS и последующее форматирование. Такие однотипные действия еженедельно забирают часы рабочего времени. Я написал утилиту для автоматизации этого процесса, с учётом нашей стройной рабочей системы конвертации стилей Word в нужные классы CSS вместо мешанины HTML-тегов, которые выдаёт нативный экспорт Word. Программка получилась не идеальной — коллегам всё равно приходилось что-то поправлять, но ускорила рутинные операции примерно на порядок.
Читать дальше →

Жизнь до Unicode

Время на прочтение4 мин
Количество просмотров9.9K

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

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

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

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

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №481 (15 — 22 августа 2021)

Время на прочтение2 мин
Количество просмотров7.3K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Почему инлайнить стили — плохо

Время на прочтение7 мин
Количество просмотров21K

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

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

Читать далее

Критерии качества вёрстки 2021

Время на прочтение32 мин
Количество просмотров52K

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

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

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

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

Читать далее

Повышение скорости написания кода: Emmet и его использование в VSCode

Время на прочтение6 мин
Количество просмотров86K

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

Читать далее

Ближайшие события

Адаптивные изображения. Что использовать: img или picture?

Время на прочтение5 мин
Количество просмотров19K

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

Читать далее

6 хороших практик по HTML и CSS

Время на прочтение4 мин
Количество просмотров26K

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №480 (2 — 8 августа 2021)

Время на прочтение3 мин
Количество просмотров9.5K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

О ходе создания игры «Колобок» в июле

Время на прочтение2 мин
Количество просмотров2K

В июле с помощью Matter.js реализовал прыжки колобка из-под платформы и подкидывание стрелы.

Как называть функции во фронтенде

Время на прочтение2 мин
Количество просмотров7.1K

Тут нет правильного варианта ответа, это вкусовщина. Единственная цель этой статьи – узнать ваше мнение по этому вопросу и окончательно сформировать своё, потому что сейчас я в сомнениях.

Не знаю, какие там проблемы в других сферах программирования, мой вопрос касается фронтенда.

Независимо от того, каким фреймворком вы пользуетесь, и пользуетесь ли вообще, у нас есть HTML-шаблон и JavaScript-код. Код частично залезает в шаблон, и тут и появляется наша проблема. От чего отталкиваться при названии функций?

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №479 (26 — 31 июля 2021)

Время на прочтение2 мин
Количество просмотров7.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Как создать 3d игру прямо в браузере

Время на прочтение7 мин
Количество просмотров10K

Ссылка на обучающее видео

Привет всем. Сегодня я вам расскажу как легко вы можете создать 3d игру прямо в вашем браузере и сделать вы сможете это очень быстро, примерно за минут 30.

Узнать как