Дайджест свежих материалов из мира фронтенда за последнюю неделю №311 (16 — 22 апреля 2018)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Export to Excel from JS
2 мин
Recovery Mode
Введение
Всем привет! Сегодня я опишу довольно тривиальную, но нигде не освещенную тему экспорта из страницы данных в Excel. На мое удивление сам процесс не описан нигде в полной мере. Итак, приступим.
SvelteJS: Релиз второй версии
6 мин
Буквально вчера вышла 2-я версия молодого, но весьма многообещающего фреймворка SvelteJS. Версия мажорная, а значит содержит не только новые фичи и исправленные баги, но и соответствующие «breaking changes». Что новенького предлагает разработчикам новая версия и почему Svelte стал еще лучше, читайте под катом.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №310 (9 — 15 апреля 2018)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Кстати, на днях дайджесту исполнилось 6 лет. Спасибо, что все еще читаете.
Кстати, на днях дайджесту исполнилось 6 лет. Спасибо, что все еще читаете.
Противостояние W3C и WHATWG: Apple, Google, Microsoft, Mozilla возражают против DOM 4.1
2 мин
Как всем известно, существует две спецификации HTML: W3C (консорциум World Wide Web) и WHATWG (компании Apple, Google, Microsoft и Mozilla, де-факто авторы стандарта HTML5). На этой неделе между создателями спецификаций состоялся открытый конфликт.
Ситуация развивалась следующим образом. Началось всё с того, что W3C сделала форк спецификации живого стандарта WHATWG DOM и назвала его DOM 4.1. Затем W3C внесла в неё несовместимые изменения и объявила форк официальной спецификацией, хотя по факту вся важная работа производилась в версии WHATWG.
Прошло некоторое время, и месяц назад стартовало публичное обсуждение предложения W3C сделать спецификацию Кандидатом в рекомендации (после неё существенные изменения по сути уже не вносятся, только уточняются детали дизайна в PR, рекомендация принимается официально). Прочитать это познавательное обсуждение можно на Github по адресу.
Логично предположить, что у некоторых членов W3C возникли вполне обоснованные возражения по поводу несовместимости двух версий DOM. Здесь в вопрос вмешался CEO W3C, который вступил с ними в спор и отклонил все их возражения, продвинув спецификацию до статуса Кандидата в рекомендации (Candidate Recommendation, CR) и объявив призыв к консенсусу.
Разумеется, членам WHATWG такой поворот событий не понравился. После того, как директор W3C отказался изменять спецификации, эти компании несколько дней назад выступили с официальным возражением (Formal Objection) против DOM 4.1, пообещав W3C, что в текущем виде данную спецификацию ни один из движков браузеров реализовывать не собирается — поскольку две несовместимые версии DOM не нужны ни разработчикам, ни пользователям.
Ситуация развивалась следующим образом. Началось всё с того, что W3C сделала форк спецификации живого стандарта WHATWG DOM и назвала его DOM 4.1. Затем W3C внесла в неё несовместимые изменения и объявила форк официальной спецификацией, хотя по факту вся важная работа производилась в версии WHATWG.
Прошло некоторое время, и месяц назад стартовало публичное обсуждение предложения W3C сделать спецификацию Кандидатом в рекомендации (после неё существенные изменения по сути уже не вносятся, только уточняются детали дизайна в PR, рекомендация принимается официально). Прочитать это познавательное обсуждение можно на Github по адресу.
Логично предположить, что у некоторых членов W3C возникли вполне обоснованные возражения по поводу несовместимости двух версий DOM. Здесь в вопрос вмешался CEO W3C, который вступил с ними в спор и отклонил все их возражения, продвинув спецификацию до статуса Кандидата в рекомендации (Candidate Recommendation, CR) и объявив призыв к консенсусу.
Разумеется, членам WHATWG такой поворот событий не понравился. После того, как директор W3C отказался изменять спецификации, эти компании несколько дней назад выступили с официальным возражением (Formal Objection) против DOM 4.1, пообещав W3C, что в текущем виде данную спецификацию ни один из движков браузеров реализовывать не собирается — поскольку две несовместимые версии DOM не нужны ни разработчикам, ни пользователям.
Насколько быстр AMP на самом деле?
7 мин
Перевод
Проект Accelerated Mobile Pages (AMP) от Google вызвал определённый переполох по идеологическим причинам, но саму технологию так и не разобрали подробно. Несколько недель назад Ферди Кристант писал про несправедливое преимущество, которое получает контент AMP за счёт предзагрузки. Это заставило меня задуматься: насколько хорошо AMP работает на самом деле? Я видел тесты как у Ферди, когда сравнивались одна или две страницы, но ещё не встречал всесторонних объективных тестов.
Оценить производительность AMP на самом деле не так просто, чем кажется. Нужно рассмотреть по крайней мере четыре контекста:
Оценить производительность AMP на самом деле не так просто, чем кажется. Нужно рассмотреть по крайней мере четыре контекста:
Генерация страниц сайта средствами сервис-воркеров
12 мин
Туториал
(С)
Из этой статьи вы узнаете, как прямо на мобильном устройстве, в браузере, создать страницу со списком закэшированных ранее материалов сайта, чтобы условный, застрявший в лифте пользователь, не скучал без интернета. По мере приближения к цели мы коснемся следующих тем:
- кэширование страниц сайта для офлайн доступа;
- ведение учета страниц, доступных офлайн, проброс необходимых данных;
- мониторинг статуса сети, онлайн или офлайн;
- общение сервис-воркера со страницами и вкладками, которые он обслуживает;
- перехват сервис-воркером запроса на открытие адреса
/offline/и генерирование новой страницы прямо на устройстве, без запроса к серверу.
Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.
Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.
В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №309 (2 — 8 апреля 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Переиспользуемые UI компоненты в приложениях на Ruby on Rails
5 мин
В этой статье, я хотел бы рассказать об альтернативном способе организации фронтенда для приложений на Ruby on Rails. В основном я работаю на бэкенде, но время от времени появляются задачи на фронтенде и то, что зачастую приходится там видеть, не внушает никакого оптимизма для дальнейшей работы.
SASS: Оптимизируем media screen
5 мин
Приветствую!
Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации
Давайте посмотрим, что у меня вышло (репозиторий Github)!
Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации
@media screen. Идея заключается в том, чтобы иметь возможность писать значения для всех экранов в одну строку. Более подробно можете почитать по ссылке. Большинство комментариев — это критика относительно реализации, к сожалению идей никто не подкинул. Но если посмотреть с другой стороны, из каждой критики можно вытащить идею, поэтому опираясь на мнение читателей, я поставил себе цель написать миксин, который:- легко читается (максимально повторяющий синтаксис sass/scss/css);
- легко поддерживать (чтобы через год ты понимал, что там написано);
- гибкий (поддержка максимального количества описаний
@media);
Давайте посмотрим, что у меня вышло (репозиторий Github)!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №308 (26 марта — 1 апреля 2018)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дайджест свежих дайджестов из мира фронтенда за последнюю неделю №1 (26 марта — 1 апреля 2018)
2 мин
Предлагаем вашему вниманию подборку с дайджестами и рассылками на новые материалы из области фронтенда и около него.
Создание несимметричной сетки с помощью Grid Layout
3 мин
На данный момент, по данным Can I Use, 84% браузеров поддерживает Grid Layout. С каждым месяцем это число растет. А ведь буквально недавно этот модуль находился за флагом. Поэтому если Вы еще не знакомы с теми возможностями, которые он предоставляет, то самое время это исправить.
В качестве примера я выбрал галерею изображений с сайта Кинопоиск, которая создана с помощью относительного позиционирования. При реализации мы будем руководствоваться принципом «воруй, но улучшай», поэтому наша галерея будет гибкая и адаптирована под различные разрешения.
Ближайшие события
Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 4 — Компоненты и композиция
24 мин
Туториал
В предыдущей части туториала мы решили проблемы изоморфного роутинга, навигации, фетчинга и начального состояния данных. В итоге, получилась довольно простая и лаконичная основа для изоморфного приложения, которую я также выделил в отдельный репозиторий — ractive-isomorphic-starterkit. В этой части мы начнем писать приложение RealWorld, но сначала осуществим декомпозицию. Погнали!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №307 (19 — 25 марта 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №306 (12 — 18 марта 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 3 — Routing & Fetching
24 мин
Туториал
В предыдущей части туториала мы научили наше изоморфное приложение проксировать запросы к backend api, с помощью сессии передавать начальный стейт между синхронными запросами и осуществлять Server-side rendering с возможностью переиспользования разметки на клиенте (hydrate). В этой части мы решим еще две ключевые проблемы изоморфных веб-приложений: изоморфный роутинг и навигация, и повторный фетчинг и начальное состояние данных. И сделаем это буквально 5-ю строками кода. Погнали!
Font (ещё более) Awesome — узорное изобретение
4 мин
Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu Dodangoda.
Создаёте ли вы веб-сайт, мобильное или настольное приложение, есть несколько вещей, которых вам не удастся избежать. Правильное использование графики и иконок является одной из таких базовых потребностей. Стильные иконки также важны, как выравнивание и цветовые комбинации — просто потому, что одна иконка может выразить то, что едва поместится в сотню слов.
Простой статический сайт на Webpack 4
15 мин
Туториал
После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №305 (5 — 11 марта 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
