HTML *
Стандартный язык разметки web-страниц
- Новые
- Лучшие
- Все
- ≥0
- ≥10
- ≥25
- ≥50
- ≥100
Webix SpreadSheet. Полноценная web альтернатива десктопного Excel?
Продолжая тему постепенного перехода от десктопного софта к аналогичным онлайн сервисам, в этой статье я хочу рассказать вам о виджете, который способен потягаться с его величеством "Excel". Речь пойдет о весьма необычном JavaScript решении для полноценной работы с электронными таблицами, которое гибко настраивается и легко интегрируется в любое окружение. Давайте разбираться что же представляет собой SpreadSheet и так ли он хорош на самом деле.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №485 (13 — 19 сентября 2021)
Slack Ruby App. Часть 2. Добавление чартов, или как делать рендер фронта на сервере
Во время разработки своего приложения в качестве проекта внутри компании, поступил запрос на постройку графика по некоторой выборке данных, чтобы по команде Slash Command происходила постройка графика и его публикация в чат.
Первым делом я обратился к уже существующим решениям, графики через API Google, готовые гемы для Ruby. Основной минус в том, что не было возможности убрать или добавить легенду в том формате, который мне нужен, сложно кастомизировать внешний вид этих графиков и, к примеру, нет возможностей строить график по значению timestamp, а выводить уже значения в формате DateTime.
Имея на вооружении тот метод, который освещает эта статья, любой сможет строить какую угодно страницу полностью на сервере, получать фото этой страницы и использовать её в коде. В будущем можно приспособить этот подход для, например, для предпоказа тем на своем движке, генерации каких-то изображений с подвязкой к внешнему API и заключении всего в html документ. В целом, применений реально много, собственно поэтому и решил поделится solution'ом.
Поэтому предлагаю вам скорее ознакомится с материалом, мы научимся сначала делать график с использованием своего js скрипта, а потом поймём как его рендерить в коде.
Представляю содержание.
Используйте фавиконки правильно
Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.
Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest
для подключения всех фавиконок к вашему сайту.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №484 (6 — 12 сентября 2021)
Состоялся релиз Firefox 92
Состоялся релиз 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.
Листаю очень плохую книжку по веб-разработке
Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!
А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?
В общем, давайте вместе полистаем старую книжку.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №483 (30 августа — 5 сентября 2021)
UiWebKit — Next Gen HTML. Подъём-переворот в мире веб-разработки
Доброго времени суток, коллеги. Эта первая статья (вводная), далее будут подробные статьи по каждому из пакетов кастомных HTML элементов и веб-компонент. Разрабатывая веб интерфейсы на протяжении многих лет, мы заметили что веб разработка с каждым годом становится все сложнее и сложнее. В современных веб приложениях, императивный JavaScript занимает чуть ли не 100% всей кодовой базы, а декларативный HTML может вообще отсутствовать как таковой. Этот факт превращает любой такой веб проект в неподдерживаемого монстра всего за год-другой. Мы очень долго жили с этой болью и вот, наконец, мы решили это изменить, сделав нечто настолько простое и удобное, что способно в корне изменить разработку современных веб приложений. Хочется сказать, что данная статья и сам UiWebKit будут полезны преимущественно прогрессивным веб разработчикам, так что будьте готовы к нестандартным идеям.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №482 (23 — 29 августа 2021)
Мой крошечный любительский проект оказался важнее, чем десять лет работы в индустрии ПО
Первую версию я написал в пятницу днём на работе, когда обратил внимание, как много времени коллеги тратят на копипаст текста из Word в CMS и последующее форматирование. Такие однотипные действия еженедельно забирают часы рабочего времени. Я написал утилиту для автоматизации этого процесса, с учётом нашей стройной рабочей системы конвертации стилей Word в нужные классы CSS вместо мешанины HTML-тегов, которые выдаёт нативный экспорт Word. Программка получилась не идеальной — коллегам всё равно приходилось что-то поправлять, но ускорила рутинные операции примерно на порядок.
Жизнь до Unicode
Unicode определенно усложнил обработку строк, а люди, которые используют языки исключительно с алфавитами ASCII, могут подумать, что это неоправданно. Однако я не говорю на языке ASCII и достаточно взрослый, чтобы помнить альтернативы, и альтернативы были намного хуже, чем сложность Unicode.
Для справки, я начал работать с компьютерами в начале 2000-х годов в России. Русский язык использует алфавит на основе кириллицы. И что касается языков, отличных от ASCII, все относительно просто: 33 буквы, у каждой есть варианты в верхнем и нижнем регистре, и преобразование верхнего/нижнего регистра обратимо. Так как букв всего 33, вы можете уместить их в 8-битной кодировке. Кроме того, есть еще место для псевдографики.
Загвоздка в том, что какое-то время в русском языке использовались три почти одинаково распространенных кодировки.
Одна из причин - сложная история Советского Союза и вычислительной техники - он был изолирован от остального мира, и все организации, производящие компьютерное оборудование и программное обеспечение, принадлежали государству, поэтому оно могло навязать им стандарты. После распада СССР рынок был быстро захвачен западным оборудованием и программным обеспечением потому что советскую технику уже никто не производил. Частные софтверные компании тоже сразу начали выпускать ПО для импортных ОС - сначала это был DOS.
Старые советские системы в основном использовали кодировку KOI8-R. KOI расшифровывается как «Код Обмена Информацией», 8 означает 8-битный, а R означает русский (есть еще украинская версия под названием KOI8-U, украинский алфавит отличается от русского). Эта кодировка, мягко говоря, безумна: она была спроектирована так, что удаление 8-го бита оставляет вам несколько читабельную ASCII-транслитерацию русского алфавита, поэтому русские буквы не идут в обычном порядке.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №481 (15 — 22 августа 2021)
Почему инлайнить стили — плохо
CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link
. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.
Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.
Критерии качества вёрстки 2021
6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.
С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.
Сейчас пришло время обсудить с сообществом обновлённые критерии.
В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.
Webix File Manager. Достойный web-аналог десктопного приложения
Тенденция последних лет говорит о том, что эпоха десктопных приложений, в их классическом понимании, доживает свои последние годы. Так же, как в свое время дискеты были вытеснены СD/DVD дисками, а на смену им пришли флешки и облачные технологии, так и настольные программы будут постепенно замещаться их более современными и практичными веб-аналогами. Об одном из таких аналогов я и хочу вам рассказать в этой статье.
Повышение скорости написания кода: Emmet и его использование в VSCode
Emmet - это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово "Emmet" означало муравей - маленькое насекомое, которое может нести в 50 раз больше своего веса.
Адаптивные изображения. Что использовать: img или picture?
Теги img
и picture
предназначены для загрузки изображений. Каждый из них позволяет задать набор правил, согласно которым браузер будет выбирать, какое из изображений загружать. В статье рассмотрен синтаксис и различия данных тегов.
6 хороших практик по HTML и CSS
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.