HTML *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Встроенный инструмент тестирования Google Lighthouse оценивает доступность (accessibility) сайтов по шкале от 0 до 100. Похвально стремиться к максимальной читаемости контента, но оценка 100 не означает, что сайт идеально доступен. Для доказательства я провёл небольшой эксперимент.

Всегда приятно видеть, как люди хвастаются в твиттере своими оценками Lighthouse: это значит, что они заботятся о качестве.



Lighthouse награждает лучшие сайты зелёным кружочком с цифрой 100, которую вы с гордостью показываете клиентам и друзьям.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Всем привет! Меня зовут Виталий Ризо, я фронтенд-разработчик в «Амплифере». Мы сделали Uibook — простой инструмент для визуального тестирования React-компонентов с реальными медиа-запросами. Расскажу, как он работает и чем может быть полезен вам.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Несколько недель назад, я выступала на Frontend NE в Ньюкасле и большую часть выступления объясняла, что за особенности будут в CSS Grid Subgrid из Grid Level 2. Не имея реализации данного свойства(в браузерах), я смоделировала кучу демок, используя DevTools, для того выступления.

По пути в San Francisco на Smashing Conf, где я проводила семинар по CSS Layout, мне дали доступ к пробной сборке Firefox Nightly, которая имела раннюю реализацию этого свойства.
Это значит, что мне нужно переделать некоторые слайды для моих выступлений в мае, там будут использованы реальные скриншоты.

Просмотр списка лидов («холодных» контактов)

Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).

Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.

Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.

Всем привет! Меня зовут Костя, и я руковожу отделом верстки в компании Wrike.
В нашем отделе сейчас работает 10 человек, и все эти ребята пришли в компанию в разное время, у них различный опыт и задачи в отдельных командах. При этом все сотрудники — прекрасные специалисты, которые вдесятером умудряются закрывать потребности всего продукта в верстке.

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

Для тех, кому много букв, есть видео.

Не так давно я работал контрактником, перескакивая с одного проекта на другой. С некоторыми краткосрочными проектами справлялся за неделю. Другие длились пару месяцев. Они приносили достаточно денег, чтобы взять отпуск. Но я предпочитал короткие, потому что там можно было установить бóльшую часовую ставку. Я не только сам себе хозяин, но и не приходилось слишком много работать, чтобы зарабатывать на жизнь. Даже мои самые высокие ставки были вполне разумными, и я всегда обеспечивал высокое качество обслуживания. Так было до тех пор, пока мне не предложили контракт в большой компании.

Эта компания связалась со мной в срочном порядке, и менеджер сказал, что им нужен человек прямо сейчас. Сотрудник, который обеспечит максимальную производительность после минимального тренинга. Хорошо это или плохо, но таков был мой девиз. Проект мне очень нравился. Он был маленьким, быстрым и хорошо оплачивался.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

HTTP/2 обещал заметно ускорить веб, и Cloudflare давным-давно развернула доступ по HTTP/2 для всех клиентов. Но одна особенность HTTP/2, приоритизация, не соответствовала ожиданиям. Не потому, что она принципиально сломана, а из-за реализации в браузерах.

Сегодня Cloudflare предлагает изменить приоритизацию HTTP/2, что даёт нашим серверам контроль над решениями о приоритизации, которые действительно заметно ускоряют интернет.

Исторически именно браузер контролирует, как и когда загружать веб-контент. Сегодня для всех платных планов мы вносим радикальные изменения в эту модель. Они передают контроль напрямую владельцу сайта. На вкладке «Скорость» в панели мониторинга Cloudflare клиенты могут включить «Расширенную приоритизацию HTTP/2»: она переопределяет настройки браузера по умолчанию на улучшенную схему планирования, что значительно ускоряет доступ для посетителей (в некоторых случаях мы видели ускорение на 50%). С воркерами Cloudflare владельцы сайтов могут пойти ещё дальше и полностью подобрать настройки под свои конкретные нужды.

UPD: по форс-мажорным обстоятельствам, митап перенесен на 2 июля.

2 июля в петербургском офисе Одноклассников пройдет ok.tech: frontend meetup. Вместе с коллегами из OK.ru, Яндекса и Mail.Ru Cloud Solutions поговорим про тестирование на основе свойств, эволюцию подходов работы с текстами, познакомимся с новой библиотекой от создателя Emmet Сергея Чикуёнка — EndorphinJS, и обсудим переход фронтенда поисковых сервисов Яндекса на React.

Презентации

Под катом тезисы выступлений и расписание.

Проблема с отображением картинок возникла с момента появления адаптивности в интернете. Мы хотим, чтобы сайт хорошо смотрелся на любом планшете, телефоне, в портретной или ландшафтной ориентации экрана, а также на супербольших дисплеях 5K. Также на рынке появились Retina-дисплеи с высокой плотностью пикселей (DPI), где обычные картинки выглядят размытыми. Растет доля мобильного трафика, и крупные ресурсы нацелены на экономную загрузку изображений. Рассмотрим, как решают эти проблемы на сайтах Apple, Tilda и блог-платформе Medium.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Сегодня быть онлайн — это привычное состояние для многих людей. Все мы покупаем, общаемся, читаем статьи, ищем информацию на разные темы. Сеть соединяет нас со всем миром, но прежде всего, она соединяет людей. Я сам пользуюсь интернетом уже 20 лет, и мои отношения с ним изменились восемь лет назад, когда я стал веб-разработчиком.

Разработчики соединяют людей.
Разработчики помогают людям.
Разработчики дают людям возможности.

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов <img> и <iframe> loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.