
HTML *
Стандартный язык разметки web-страниц
Растянуть видео в браузере

Очень часто видео в онлайн-кинотеатрах имеет соотношение сторон, отличное от соотношения сторон монитора. Поэтому иногда возникает желание сделать общий масштаб чуть крупнее за счет небольшой обрезки по краям. Или вовсе — вписать изображение в размеры экрана по меньшей стороне картинки. Особенно это актуально для маленьких экранов, а также, для старых мониторов 4:3. Я уж молчу о том, что оригинальное видео может быть вообще растянуто по одной из сторон и это необходимо как-то исправить.
Для решения данной проблемы я задумал написать браузерное расширение под Chrome и Firefox. Идея такая: при проигрывании любого браузерного видео вызывается экранное меню, которое позволяет произвольно менять масштаб и соотношение сторон картинки.
Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Доброго времени суток, друзья!
Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.
Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.
В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.
Без дальнейших предисловий.
Современный стартовый HTML-шаблон

Доброго времени суток, друзья!
Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.
Данный шаблон является результатом анализа более 100 источников по вопросам, касающимся структуры и содержимого веб-страницы, разделения приложения на компоненты, кэширования ресурсов, поисковой оптимизации, безопасности и т.д., и включает в себя следующее:
- Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
- Пример использования HTML5-тегов
- Пример использования CSS3-свойств
- Пример использования CSS-модулей
- Пример использования JavaScript-модулей
- Файл «manifest.json»
- Сервис-воркер общего назначения (сначала кэш, затем сеть)
- Файл «robots.txt»
- Файл «sitemap.xml»
- Файл «browserconfig.xml»
- Файл ".gitignore"
- Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
- Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
- и многое другое
Официальный сайт: moderntemplate.site.
Код проекта находится здесь.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №441 (9 — 15 ноября 2020)
Не храните в базах данных HTML
Часто информация, которая отображается пользователю и имеет свойства разметки, хранится в базе данных и сразу в формате HTML. Я уверен, что те, кто хоть раз создавал свой блог, Хабр или что-то подобное, скажут: «Да, было». Но что, если я предложу другой подход? Использовать JSON.
Давайте вместе разберёмся в преимуществах и недостатках такого подхода к хранению данных.
20 небольших, но вдохновляющих вызовов веб-разработчику

Написание графического приложения на Electron JS (начало: Создание окна)
Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию (а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №440 (2 — 8 ноября 2020)
Рендеринг на клиенте, на сервере и генерация статических сайтов
Приветствую всех профессионалов и любителей сайтостроения! Предлагаю вашему вниманию перевод статьи "Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation" от Malcolm Laing.
Фронтендеры часто используют эти термины для описания своих приложений. Однако людей, хуже знакомых с веб-технологиямм, эти понятия часто вводят в заблуждение. Если вам сложно понять различия между рендерингом на стороне клиенте, рендерингом на стороне сервера и генерацией статических сайтов — эта статья для вас!
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда

Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.
Содержание:
- Кто такой фронтендер и чем он занимается?
- С чего начать и что читать? Чек-лист обучения
- Какие трудности могут быть? Ошибки в начале пути
- Подготовка к собеседованию на Junior-разработчика
Дайджест свежих материалов из мира фронтенда за последнюю неделю №439 (26 — 31 октября 2020)
Ближайшие события
Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями
В этой статье я бы хотел рассказать как реализовать доступное модальное окно, без использования атрибута «aria-modal».
Как я IF на Twine писал

Началось все пять месяцев назад, когда мне предложили сделать IF-игру.
Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).
Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим в статье, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу <img> полезным.
Помогаем пользователям менять пароли с помощью well-known URL
Привет!
Делимся переводом небольшой, но полезной статьи о том, как упростить процесс обновления данных для аутентификации.
Установите редирект со страницы /.well-known/change-password на страницу смены пароля для вашего сайта. Благодаря этому, менеджеры паролей смогут направлять пользователей прямо на данную страницу.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)
Элементарный автоматический слайдер на основе библиотеки RevolveR: 10 строчек кода

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)
Вклад авторов
alexzfort 6864.0alizar 1773.0ilusha_sergeevich 1448.2melnik909 1403.0kichik 754.8TheShock 613.0ru_vds 530.0Paul_King 421.0krovatti 397.0Bright_Translate 377.6