Иван Акулов про разработку

@iamakulov_channel Нравится 3

JS · React · веб-перформанс · разработка и архитектура
Твитер: https://twitter.com/iamakulov
Поможем с производительностью: https://3perf.com
По всем вопросам (рекламу не продаю): @iamakulov
Чатик канала: @iamakulov_channel_chat
Гео и язык канала
Россия, Русский
Категория
Технологии


Написать автору
Гео канала
Россия
Язык канала
Русский
Категория
Технологии
Добавлен в индекс
02.08.2017 13:27
реклама
Telegram Analytics
Подписывайся, чтобы быть в курсе новостей TGStat.
TGStat Bot
Бот для получения статистики каналов не выходя из Telegram
TGAlertsBot
Мониторинг упоминаний ключевых слов в каналах и чатах.
2 627
подписчиков
~2k
охват 1 публикации
~1.4k
дневной охват
~5
постов / нед.
75.6%
ERR %
1.63
индекс цитирования
Репосты и упоминания канала
17 упоминаний канала
0 упоминаний публикаций
17 репостов
Frontend Guild
Жабаскрипт
Frontend Info
ТОП каналов Telegram
KyivJS
HiPO
Frontend Doge
Frontend Doge
Gambala.live
Heisen MINDS
Gambala.links
Gambala.links
Родионов
Telegram Group List
Родионов
Родионов
Каналы, которые цитирует @iamakulov_channel
James Akwuh
Канал Ильи Бирмана
Веб-стандарты
Жабаскрипт
Frontend Weekend
Безос позвонит
How to Edinburgh
noTieinIT
Remote IT (Inflow)
Родионов
Things I read
Things I read
Родионов
Grumpy Website
Родионов
Grumpy Website
Grumpy Website
Web Tip @ James Akwuh
Design & Productivity
Последние публикации
Удалённые
С упоминаниями
Репосты
​​У 3perf.com в PageSpeed Insights теперь наконец-то 100 🎉

Интересные наблюдения:

📦 Без JS всё же быстрее (да)
3perf.сom написан на React/Gatsby. Этот стек для быстрых сайтов подходит плохо (кто бы мог подумать, да)

Gatsby хорошо оптимизирует First Contentful Paint/First Meaningful Paint, но после рендеринга загружает огромный бандл (с реактом, полифиллами для IE 11 и т.д.). Просто отключив этот бандл, я поднял счёт в PageSpeed Insights с ≈65 до ≈90.

Отключить бандл в Gatsby можно плагином gatsby-plugin-no-javascript. (Если используете gatsby-image, придётся чуть-чуть повозиться.)

А если бы я делал 3perf.сom с нуля, то взял бы 11ty.

🔤 Резать шрифты — кайф
На 3perf.сom используется шрифт Montserrat. Все файлы шрифта загружаются с домена 3perf.сom (что хорошо), используют font-display и отдаются в woff2 — но этого оказалось недостаточно.

Чтобы поднять счёт до 100, мне пришлось порезать ненужные символы из шрифтов. Для этого я подключил инструмент subfont (для статических сайтов он подключается одной командой). Это уменьшило шрифты на главной с 330 до 49 кб.

Не режьте шрифты, если ваши пользователи могут вводить что-то на странице — а то часть символов у них будет другим шрифтом. А ещё проверьте, что лицензия шрифта разрешает subsetting (популярная Open Font License разрешает, но вдруг у вас другая).

🔗 Переходы по ссылкам
Один из бонусов Gatsby — это мгновенные переходы между страницами: Gatsby предзагружает чанки всех соседних страниц заранее. Но это не работает, если отключить бандл, как у меня.

Я заменил эту фичу библиотекой quicklink. Quicklink весит 1 кб и делает то же самое, только на уровне HTML.

🌍 Netlify
3perf.сom хостится на netlify.com, который я продолжаю нежно любить. Крутой DX, бесплатный план, супер-короткое время ответа. 100 баллов не было бы без хорошего сервера и CDN.

Единственный минус — Netlify заблокирован в Китае и у некоторых операторов в России. Говорят, zeit.co от этого не страдает, но я не пробовал.
Читать полностью
​​Как работают HTTPS-сертификаты

За последний год мне приходилось несколько раз генерировать самоподписанные HTTPS-сертификаты. Обычно это выглядело так:
— загуглить «how to generate https certificate»
— открыть несколько первых ссылок
— увидеть десяток непонятных команд (привет, openssl x509 -in domain.crt -signkey domain.key -x509toreq -out domain.csr), попытаться разобраться
— сломаться, 3 минуты копировать сочетания из разных команд, пока не получится что-то внятное

Проблема (кроме того, что у openssl отвратительный юзабилити) была в том, что я плохо понимал, как устроены https-сертификаты. Окей, что-то шифруется, есть какие-то authorities, которые выдают сертификаты — но почему столько форматов файлов? зачем нужен certificate signing request? что происходит, когда https-сертификат отзывается? сложно.

На прошлой неделе я наконец разобрался в этом.

🤓 Ловите клёвое введение Роберта Хитона в HTTPS:

How does HTTPS actually work
— Как устанавливается HTTPS-соединение
— Почему ваш сайт не может притвориться google.com
— Может ли читать ваш HTTPS-трафик кафе, в котором вы подключились к вайфаю (нет) или работодатель, в офисе которого вы пользуетесь сетью (вероятно, да)

🔬 И более глубокую серию статей Николаса Дилле про сертификаты:

What Certificates Are and How They Work
— Как работает шифрование, которое используется в HTTPS
— Что именно находится внутри файла сертификата

What Certificate Authorities Are and Why We Need to Trust Them
— Кто такие certificate authorities
— Почему у сертификатов ограниченный срок действия
— Как работает отзыв сертификата (например, если утёк приватный ключ)

How to Request a Certificate + Certificate File Formats and Conversion
— Как выглядит процесс выпуска сертификата
— Что такое CSR (certificate signing request)
— И почему столько форматов файлов
Читать полностью
Репост из: James Akwuh
Привет 🤚🏼

Мы снова расширяемся

NeatTech.io – амбициозная компания, создающие веб и мобильные приложения.
Работаем по стандартам мировых лидеров, таких как Яндекс и Airbnb.

Cейчас мы ищем крутых специалистов в нашу дрим тим:
Backend-разработчик уровня Middle+ (Node.js)
Frontend-разработчик уровня Middle+ (React)
Мобильный разработчик уровня Middle+ (React Native)
UX / UI дизайнер с опытом
Бизнес-аналитик / Проджект-менеджер
QA-инженер

Если нет опыта, но ты умный/умная, то с нами можно начать карьеру.

Ждем 🙌 За репост – спасибо!

#james_компании
Читать полностью
Мой хороший друг Джеймс ищет к себе в компанию разработчиков (и не только).

Джеймс крутой, отлично менторит и безумно заряжает энергией — уверен, работать с ним будет классно:
✅ Всегда так:

console.log('Error:', e)
❌ Не логгируйте ошибку, печатая её стек:
console.error(`Error: ${e.stack}`);
console.error('Error:', e.stack);

Это работает отлично в 98% случаев. Но потом в какой-то момент одна из ваших API-библиотек бросает исключением кастомный объект (привет, Кубернетес) — и ваш код просто печатает undefined ↓↓
​​❌ Не логгируйте ошибку строкой:
console.error(`Error: ${e}`);

Это немного лучше, чем просто e.message — так не теряется класс ошибки. Но так вы тоже теряете стектрейс.
​​❌ Не логгируйте поле .message:
console.error(`Error: ${e.message}`);
console.error('Error:', e.message);

Так вы теряете стектрейс, который позже будет полезен при дебаггинге.
​​Хинт: Если вы пишете код, который ловит и выводит ошибку, всегда передавайте эту ошибку отдельным аргументом в console.error.

✅ Это гуд:
console.error('Error:', e)

❌ Это не гуд:
console.error(`Error: ${e.message}`)

Вот несколько неправильных паттернов, которые я часто вижу ⬇️
Чуть-чуть спойлеров, как обычно
fwdays 2020

В эту субботу 14 марта выступлю на fwdays в Киеве. Расскажу про кучу перформанс-плагинов и инструментов для Вебпака:
— для минификации (вы знали про Closure Compiler и его advanced mode?)
— для изображений
— для CSS и CSS-in-JS (и что такого особенного в babel-plugin-styled-components)
— для предзагрузки и пререндеринга
— для анализа бандла (включая самый недооценённый тул — webpack.github.io/analyse)

Приходите! Промокод на 15% скидки: 1B26C3887A
https://fwdays.com/en/event/js-fwdays-2020
Читать полностью
***

(Чё, как вам вообще такой формат длинных постов? Кайф или слишком длинно?)
👍 485
👎 19
5) Библиотеки
Ну и последнее. Треть из присланных бандлов можно было бы уменьшить, выбросив неиспользуемые модули или заменив крупные библиотеки на мелкие такие же. Обычно это делается одним плагином или одной заменой:
— lodash → babel-plugin-lodash
— whatwg-fetch → unfetch
— moment → moment-webpack-plugin

Куча таких кейсов перечислена в https://github.com/GoogleChromeLabs/webpack-libs-optimizations. (Я не первый раз пишу про этот репо — но вы всё же проверьте своё приложение по нему, если ещё не.)
Читать полностью
4) JSON- или SVG-файлы
Менее частая, но особо неприятная проблема — это когда библиотека использует большой JSON-файл с данными — и этот файл бандлится как есть. Я, например, видел такое с:
— iconv-lite (используется в некоторых библиотеках локализации; бандлит JSON-файлы кодировок)
— или emojione (бандлит JSON-файл с информацией про emoji)

Ещё из той же сферы: иногда приложение использует дизайн-систему с svg-иконками — и инлайнит все иконки url-loader-ом в бандл. Одна иконка может весить немного — 1 кб — но если в приложении их 200, эффект будет ощутимый.

🔎 Как обнаружить проблему: webpack-bundle-analyzer → посмотреть, есть ли в бандле статические файлы типа .json, .svg или чего-то такого

⚙️ Как чинить:
— для библиотек, которые бандлят JSON: или заменить библиотеку, или убрать ненужный JSON с помощью IgnorePlugin
— для приложения, которое инлайнит иконки url-loader-ом:
уменьшить параметр limit, чтобы не инлайнить крупные иконки;
или добавить параметр exclude, чтобы не инлайнить конкретную папку с кучей иконок



***
Читать полностью
🔎 Как обнаружить проблему: webpack-bundle-analyzer → просмотреть крупные модули, понять, нужны ли они для первого рендера

⚙️ Как чинить:
— import() для крупных библиотек или модулей
— в React: React.lazy или loadable-components
— во Vue: асинхронные компоненты



***
Читать полностью