Обновить
512K+

Веб-разработка *

Делаем веб лучше

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

SPA Meetup 5: интеграция Jest с QA, мощный UIKit, библиотеки компонентов, DI для масштабирования, платформенные команды

Время на прочтение3 мин
Охват и читатели2.4K

Привет! Это пост-отчёт с митапа Moscow SPA 5, серии встреч для фронтенд-разработчиков, которым интересна тематика веб-приложений (Single Page Application). Вместе с докладчиками из Mail.Ru, Яндекса, ВКонтакте, Тинькофф и Авито мы говорили об интеграции Jest с QA-инфраструктурой, DI в качестве способа масштабирования, росте библиотек компонентов, платформенной команде. А также обсуждали, может ли UIKit быть максимально гибким и подходящим для всего.


Заходите под кат, если вам интересны эти темы. Внутри вы найдёте материалы встречи: видеозаписи докладов, презентации спикеров, отзывы гостей митапа и ссылки на фотоотчёт.


Будни Программного комитета FrontendConf. Интервью c Сергеем Поповым

Время на прочтение8 мин
Охват и читатели1.5K
Программный комитет FrontendConf отвечает за отбор заявок, готовит программу, расписание, отвечает за стенды и концепцию. При этом участники ПК еще и курируют доклады спикеров. Задача куратора — помочь со структурой, контентом и довести доклад до идеала. Таких докладов у члена ПК бывает от одного до пары десятков, а еще надо готовить программу и свой доклад, если член ПК еще и спикер на конференции.



Накануне FrontendConf мы взяли у интервью у Сергея Попова (@sergeytovarov) и расспросили обо всем подробнее. Сергей — участник ПК, руководитель Лига А., выступающий спикер. Мы узнали о том, как идет подготовка к конференции, какие доклады он берет на курирование и чего от них ждать зрителям, для чего он выступает, о чем его новый доклад и зачем ходить на конференции.
Читать дальше →

Путь к проверке типов 4 миллионов строк Python-кода. Часть 1

Время на прочтение7 мин
Охват и читатели18K
Сегодня мы предлагаем вашему вниманию первую часть перевода материала о том, как в Dropbox занимаются контролем типов Python-кода.



В Dropbox много пишут на Python. Это — язык, который мы используем чрезвычайно широко — как для бэкенд-сервисов, так и для настольных клиентских приложений. Ещё мы в больших объёмах применяем Go, TypeScript и Rust, но Python — это наш главный язык. Если учитывать наши масштабы, а речь идёт о миллионах строк Python-кода, оказалось, что динамическая типизация такого кода неоправданно усложнила его понимание и начала серьёзно влиять на продуктивность труда. Для смягчения этой проблемы мы приступили к постепенному переводу нашего кода на статическую проверку типов с использованием mypy. Это, вероятно, самая популярная самостоятельная система проверки типов для Python. Mypy — это опенсорсный проект, его основные разработчики трудятся в Dropbox.

Dropbox оказалась одной из первых компаний, которая внедрила статическую проверку типов в Python-коде в подобном масштабе. В наши дни mypy используется в тысячах проектов. Этот инструмент бесчисленное количество раз, что называется, «проверен в бою». Нам, для того, чтобы добраться туда, где мы находимся сейчас, пришлось проделать долгий путь. На этом пути было немало неудачных начинаний и провалившихся экспериментов. Этот материал повествует об истории статической проверки типов в Python — с самого её непростого начала, которое было частью моего научного исследовательского проекта, до сегодняшнего дня, когда проверки типов и подсказки по типам стали привычными для бесчисленного количества разработчиков, которые пишут на Python. Эти механизмы теперь поддерживаются множеством инструментов — таких, как IDE и анализаторы кода.

Читать вторую часть
Читать дальше →

Делаем свой Google Call Screening на основе Voximplant и Dialogflow

Время на прочтение4 мин
Охват и читатели5.4K

Возможно, вы слышали или читали про функцию Call Screening, которую Google выкатил для своих телефонов Pixel в США. Идея отличная – когда вам поступает входящий звонок, то виртуальный ассистент начинает общаться, в то время как вы видите этот разговор в виде чата и в любой момент можете начать говорить вместо ассистента. Это очень полезно в наши дни, когда почти половина звонков – это спам, но при этом вы не хотите пропускать важные звонки от кого-то не из вашего списка контактов. Единственная загвоздка – эта функциональность доступна только на телефоне Pixel и только в США. Что ж, препятствия существуют, чтобы их преодолевать, верно? Поэтому мы решили рассказать, как сделать подобное решение, используя Voximplant и Dialogflow. Прошу под кат.

Как организовать работу над библиотекой общих компонентов

Время на прочтение9 мин
Охват и читатели18K
Если ваша компания делает несколько продуктов в едином стиле, однажды вам в голову придет идея сделать библиотеку с общим кодом. Например, с UI-компонентами, сервисом авторизации или для работы со сторонними API. Возможно, вы зададитесь вопросами: кто должен поддерживать этот код? Как доносить изменения до пользователей? В конце концов, как вообще заставить их пользоваться вашей библиотекой?

С 2015 года я работаю в Тинькофф в отделе сервисов для бизнеса. За это время наша команда выросла с 3 до 60+ разработчиков, а экосистема Тинькофф Бизнес — с 3 до 50 веб-приложений. На разных этапах нашего развития мы подходили к работе с общим кодом по-разному, об этом я и хочу рассказать в этой статье.

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

Криптографический АРМ на базе стандартов с открытым ключом. Выпуск SSL-сертификатов. Эпилог

Время на прочтение4 мин
Охват и читатели7.7K
Вот мы и добрались до создания самоподписанных сертификатов.
Где применяются самоподписанные сертификаты? Конечно, с самоподписанным сертификатом вы не сможете зарегистрироваться на сайте Госуслуг или подать подписанную декларацию в ФНС. Но для внутрикорпоративного документооборота их вполне можно использовать. Можно также использовать их для защиты личной почтовой переписки, в VPN-сетях и т.п. Но наиболее часто используют самоподписанные SSL-сертификаты для обеспечения защищенного доступа по https-протоколу к Web-приложениям. Самым популярным средством для создания самоподписанных сертификатов остается OpenSSL. Процедура получения SSL-сертификатов с помощью того же OpenSSL хороша описана здесь. Но там вы не найдете упоминая о ГОСТ-овых сертификатах, о токенах PKCS#11 и т.п. Здесь мы рассмотрим простой графический интерфейс, который позволяет получать сертификаты на базе ГОСТ Р 34.10-2012 и без всякого использования OpenSSL.
Читать дальше →

Сервис-воркеры в клиенте Slack: об ускорении загрузки и оффлайн-режиме

Время на прочтение8 мин
Охват и читатели5.5K
Материал, перевод которого мы сегодня публикуем, посвящён рассказу об оптимизации новой версии настольного клиента Slack, одной из центральных особенностей которой стало ускорение загрузки.


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

Технологии Яндекс Турбо-страницы и Google AMP для e-commerce

Время на прочтение6 мин
Охват и читатели7.9K

Введение


Веб разработка давно двинулась в сторону мобильного контента. Тренд последних нескольких лет в пользу трафика с мобильных устройств вместо десктопа, привёл к тому что поисковики сначала стали требовать от сайтов адаптивности и быстрой скорости загрузки, а с 1 июля 2019 года Google для новых сайтов перешёл на mobile only, вместо mobile first. Это значит, что ему совсем не интересна десктоп версия.

Одновременно с этим поисковики предложили технологии очень быстрой загрузки страниц. У Google это AMP (Accelerated mobile pages), у Яндекс — Турбо-страницы.

Далее в статья я хочу рассказать о плюсах, минусах и проблемах с которыми я столкнулся при внедрении AMP и Турбо-страниц для действующих интернет-магазинов.
Читать дальше →

Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Время на прочтение18 мин
Охват и читатели7.1K
Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.



Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.

Заходят как-то два браузера в скроллбар…

Время на прочтение8 мин
Охват и читатели35K
image Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.

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

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

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

Материал, перевод которого мы публикуем сегодня, посвящён некоторым особенностям использования скроллбаров в веб-приложениях.
Читать дальше →

История и наследие jQuery

Время на прочтение7 мин
Охват и читатели27K

jQuery — это самая популярная в мире JavaScript-библиотека. Сообщество веб-разработчиков создало её в конце 2000-х, что привело к возникновению богатой экосистемы сайтов, плагинов и фреймворков, использующих под капотом jQuery.

Но в последние годы её статус главного инструмента для веб-разработки пошатнулся. Давайте посмотрим, почему jQuery стала популярной и почему она вышла из моды, а также в каких случаях её пока ещё целесообразно использовать для создания современных сайтов.
Читать дальше →

Ускорение instagram.com. Часть 1

Время на прочтение9 мин
Охват и читатели9.7K
В последние годы на instagram.com появилось много нового. Очень много. Например — средства создания историй, фильтры, творческие инструменты, уведомления, прямые сообщения. Однако по мере роста проекта всё это дало один печальный побочный эффект, который заключался в том, что производительность instagram.com начала падать. В течение прошлого года команда разработчиков Instagram прилагала постоянные усилия к тому, чтобы это исправить. Это привело к тому, что общее время загрузки ленты Instagram (feed page) снизилось почти на 50%.



Сегодня мы публикуем перевод первого материала из серии статей, посвящённых рассказу о том, как ускоряли instagram.com.
Читать дальше →

Разгоняем Google PageSpeed до 100 и больше

Время на прочтение6 мин
Охват и читатели62K
Google PageSpeed

Простые и полезные советы, которые позволят вам максимально разогнать сайт без необходимости закапываться в метриках Google PageSpeed и Lighthouse.
Читать дальше →

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

Google Analytics и GDPR: а нужно ли согласие пользователя?

Время на прочтение3 мин
Охват и читатели7.2K
После публикации о том, как быстро проверить cookies на соблюдение GDPR, наиболее обсуждаемым оказался вопрос необходимости получения согласия пользователей при использования на сайте Google Analytics.

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

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

Laragon — WAMP с автоматическими локальными доменами

Время на прочтение2 мин
Охват и читатели23K
Даже странно, что про Laragon нет ни единой публикации на Хабре. Хочу очень кратко восполнить этот пробел, ибо данный инструмент вполне заслуживает популярности среди целевой аудитории веб-разработчиков, кодящих под Windows.

Laragon

Laragon — это простой и компактный WAMP (Apache + MySQL + PHP под Windows) во многом сродни своим более известным аналогам, вроде XAMPP, OpenServer, Denwer etc. Но, со своей маленькой изюминкой:

Когда вы создаете папку your-test-project в каталоге <laragon_root>\www\, то содержимое этой папки автоматически становится доступно из браузера по адресу http://your-test-project.test причем, шаблон, по которому именуются домены, также настраиваемый.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №381 (16 — 22 сентября 2019)

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


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

Gap — светлое будущее для отступов в Flexbox (как в Grid)

Время на прочтение4 мин
Охват и читатели150K


Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки.

Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS.

W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column.

В этом руководстве мы посмотрим, как добавляли margins в Flexbox раньше и как это делает свойство gap, позволяя нам получить внутренние отступы без дополнительных ухищрений.
Читать дальше →

Простой слайдер изображений на CSS и Javascript

Время на прочтение7 мин
Охват и читатели171K
Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.

История о V8, React и падении производительности. Часть 2

Время на прочтение9 мин
Охват и читатели8.4K
Сегодня мы публикуем вторую часть перевода материала, посвящённого внутренним механизмам V8 и расследованию проблемы с производительностью React.



Первая часть
Читать дальше →

Как создать UI kit, который продается. Этапы разработки коммерческой дизайн-системы

Время на прочтение8 мин
Охват и читатели24K


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

Я расскажу о поэтапном плане создания коммерческой дизайн-системы. Узнаете как сделать и выпустить на рынок свой продукт. Расскажу что сделать перед началом работы, как подготовиться и составить план. Отдельно рассмотрю этапы разработки дизайн-системы для Figma. В последней части дам советы как продвигать и раскручивать. В статье только личный опыт и наблюдения самоучки.
Читать дальше →