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

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

Забьем еще один гвоздь в крышку гроба Роскомнадзора.

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

Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.

Вопрос, стоит ли хранить javascript и css ресурсы веб-страницы в LocalStorage браузера или позволить ему самому отрабатывать кэширование, не имеет однозначного ответа. Есть плюсы и минусы. С моей точки зрения, основной плюс — скорость загрузки — перевешивает все остальное. Это очень хорошо чувствуют пользователи EDGE и 3G.

Для поклонников стандартного кэша браузеров, гордо показывающих на слово «Кэшировано» в Средствах разработчика, советую открыть Fiddler и увидеть, что по каждому кэшированному ресурсу за 304 HTTP ответом всё равно идет запрос. Затем советую зайти на что-нибудь типа pingdom.com и увидеть, что непосредственно передача данных во всем времени исполнения запроса занимает проценты. То есть толку в абсолютном значении от такого кэширования — кот наплакал, особенно если файлы небольшие.

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

Под занавес прошлогоднего DevConf Артем Дегтярь и Павел Степанец рассказали как они мигрировали ERP-систему написанную на «голом» PHP5.3, работающую на винде, в Symfony + PHP7, и построили на его основе облачный сервис в сфере b2b. Видео доступно по ссылке доклада. А я представлю текстовый, немного сжатый, вариант.


Мы работали над большой системой, которая позволяла создавать заявки и менять статусы, плюс биллинг, учет ТМЦ и много всего. Сегодня мы расскажем как рефакторили эту систему, мигрировали ее в Symfony. Первоначально система была написана на чистом PHP, и имела много «особенностей». Например, этот пятиуровневый тернарник на слайде весьма оригинально работал с датой, пришедшей от юзера.

Анимация — неотъемлемая часть современных веб-интерфейсов. От того, насколько она уместна, привлекательна и производительна, зависит немалая доля впечатлений пользователя от работы с сайтом или веб-приложением. Сегодня, в переводе тринадцатой части серии материалов, посвящённых особенностям JavaScript и связанных с ним технологий, мы поговорим об анимации, выполняемой средствами CSS и JS, а также обсудим подходы к её оптимизации.

Привет, Хабр.

На недавнем митапе в офисе Tutu я рассказывал о том, как мы в рамках редизайна superjob.ru совершали переход от монолитного приложения к api-based архитектуре с красивыми single page applications на ReactJS на фронте и шустрым PHP-приложением на бэке. В этой статье я бы хотел подробнее рассказать о том, как мы оптимизировали наше бэкенд-приложение, чтобы оно действительно стало шустрым.

Заинтересовавшихся — прошу под кат.

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

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

(издание 2018)

Miguel Grinberg

---

Туда Сюда

Это двадцать первая часть Мега-Учебника Flask, в которой я добавлю функцию личных сообщений, а также уведомления пользователей, которые появляются на панели навигации без необходимости обновления страницы.

Привет. Я Катя. Я пишу фронтенд в Яндекс.Деньгах.

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

В этой статье я расскажу, что мы разрабатываем, как оптимизируем рабочие процессы и зачем развивать свои soft skills. На подходе вторая часть — она будет технической. В ней подробно расскажу про стек, почему их два и как мы дружили БЭМ с React (спойлер: будет много кода). Поехали!

upd. Вторая часть вышла.

Недавно в офисе Авито прошёл четвёртый по счёту митап-сателлит Moscow.js — Moscow SPA, встреча для фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application). Прозвучали доклады от представителей Mail.ru, Альфа-Банка и Авито, а в конце встречи прошла панельная дискуссия о том, каким должно быть SPA сегодня. Под катом — видеозаписи и презентации докладов и ссылка на фотоотчёт.

Python-разработчики, внимание: шестой российский PyCon пройдёт 22-23 июля в отеле «Cronwell Яхонты Таруса» в 95 км. от Москвы. Доклады будут идти в два потока, плюс мастер-классы, Lightning Talks и афтепати.

Если вы не знаете, что такое PyCon Russia, посмотрите маленький ролик ниже — в нём коротко о том, как прошёл PyConRu-2017.


В прошлом году у нас выступили Paul Hildebrandt (Walt Disney Animation Studios, США), Łukasz Langa (Facebook, США), Nina Zakharenko (Venmo, США), Maciej Fijałkowski (PyPy, ЮАР), Андрей Степанов (Тинькофф Банк), Александр Кошкин (Positive Technologies), Кирилл Борисов (Яндекс), Елизавета Шашкова (JetBrains), Михаил Юматов (ЦИАН), Олег Чуркин (Rambler&Co) и ещё 16 крутейших спикеров. Все видео прошлогодних докладов можно посмотреть на нашем YouTube-канале.

Регистрация для участников открыта. Early Bird билеты стоят от 15000 рублей. А до 12 июня мы принимаем заявки на доклады. Под катом все подробности.

В webpack 4.6.0. появилась поддержка директив prefetch и preload (они выглядят, соответственно, как «магические комментарии» webpackPrefetch и webpackPreload к командам import()). С их помощью браузеру можно давать подсказки о ресурсах, которые могут понадобиться пользователю в недалёком будущем. Браузер заблаговременно загружает такие ресурсы, что позволяет улучшить впечатление пользователя от работы с сайтом.



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

История превью страниц.


Когда вы наводите курсор на ссылку, появляются карточки предварительного просмотра (и да, у меня на десктопе мобильный скин Википедии). Текст из статей Википедии об айсбергах и воде, CC BY-SA 3.0. Изображения слева направо, сверху вниз: #1 Ким Хансен, CC BY-SA 3.0; #2 Андреас Вайт, CC BY-SA 4.0; #3 Национальная библиотека Новой Зеландии, CC0

Несколько дней назад моя команда запустила функцию «предварительного просмотра страниц» (превью) в сотнях языковых версий Википедии. Наш API ежеминутно обрабатывает до полумиллиона вызовов для выдачи карточек превью, которые отображаются при наведении курсора на любую ссылку.

На первый взгляд всё очень просто. Такое есть на многих сайтах. На карточке размещается изображение и немного текста — и она отображается при наведении курсора на ссылку. Ничего инновационного… по крайней мере, так может показаться на первый взгляд.

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

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

Ты — не ты, когда голоден! Мы же не дадим вам проголодаться, потому что в меню ThinkPHP #16 будут огро-оо-омные порции полезной информации, новых знакомств, вопросов и ответов, ну и компот. Да и среда — это же маленькая пятница :).

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

Сегодня мы публикуем перевод об очередном тренде WebRTC, спасибо за это консультанту Цахи. Какие изменения несет в мир VoIP технология WebRTC и что как меняется подход к статистике: об этом под катом. Кстати, возможно вы помните, что Цахи Левент-Леви приезжал на нашу конференцию Intercom 2017 – тогда он читал доклад про историю и влияние WebRTC на современные коммуникации; однако на нашей ближайшей конфе его, увы, не будет. Но зато блог bloggeek.me всегда доступен, а мы стараемся сделать его еще доступнее своими переводами :) Итак, речь про сбор статистики с видеозвонков через клиентов, прошу под кат.

Много раз, когда шла речь о переводе React-проектов на TypeScript, я часто слышал, что самую сильную боль вызывает создание HoC’ов (Higher-Order Components — компоненты-обертки). Сегодня я покажу приём, как делать это безболезненно и довольно легко. Данный приём будет полезен не только для проектов TS, но также и для проектов ES6+.

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

DevConf 2018 состоится 18 мая в Москве, в Digital October. А мы продолжаем публиковать доклады с прошлогодней конференции. На очереди доклад Алексея Акуловича из ВКонтакте, где он поведает о том, о чем внимательные читатели уже догадались по сабжу.


В 2015 году мы использовали стороннее решение. Мы встраивали(embed) его плеер на сайт как youtube и оно работало. Работало не идеально, но на тот момент оно нас устраивало по объему трансляций, который через него можно было пустить, а также по качеству и задержкам, которые оно давало. Но мы из него довольно быстро выросли.