​First thoughts on Deno. Краткий обзор deno, преимуществ над node и особенностей его реализации → http://bit.ly/2E9dVz3

​Как использовать Puppeteer — как сервер для разработки. Рассказ Эрика Бидельмана о том, как команда https://web.dev придумала не разворачивать весь проект локально, а забирать живой сайт и подменять контент локально для простого редактирования статей → http://bit.ly/2EeL24L

​Собираем бандл мечты с помощью Webpack. Стенограмма доклада Максима Соснова на Frontend Conf о том, как оптимизировать сборку фронтенда с помощью Webpack. Очень полезно для тех, кто знает основные принципы работы сборщика и хочет углубить свои знания → http://bit.ly/2V6ysdj

Команда Реакт уже не советует делить компоненты на statefull и stateless, что в принципе логично с появленим Hooks. Об этом Ден Абрамов написал в своем твиттере → https://twitter.com/dan_abramov/status/1096927373008818176

​Как правильно сверстать кастомные чекбоксы? Вадим Макеев рассказывает в своем видеоблоге → http://bit.ly/2GSTTe8

​Введение в Node.js за 90 минут: что это такое и когда стоит применять, обзор основных встроенных модулей, написание и деплой сервера с нуля → https://youtu.be/fBNz5xF-Kx4

​Why I’m excited with React Hooks?. Да, снова хуки). Обзор 3 базовых хуков на примере таймера → http://bit.ly/2IqziAf

Почти всегда, при разговоре о производительности веб-сайта, мы говорим о времени ожидания пользователем какого-то события ("First Meaningful Paint" и тд). Мы часто обсуждаем оптимизации фронтенда и бэкенда. И это круто, но остается корень всех бед - скорость света. Часто JavaScript разработчики упускают это проблему из виду 😀

Может ли случится такое, что через 30 лет Интернет будет настолько быстрым, что сайт с сервера в Сан-Франциско будет моментально открываться в Киеве? Физики говорит, что нет.

Допустим:
1. Твой бекенд рендерит страницу (или формирует JSON) за 20мс.
2. Не существует никакого WiFi, провайдеров, маршрутизации и тд. Есть просто оптоволоконный кабель, который одним концом вставлен в твой ноутбук, а вторым напрямую в сервер в Сан-Франциско. Растояние по прямой от Киева до Сан-Франциско - 9,848км (возьмем 10 тыс км для простоты счета).
3. Скорость света в вакуме 300 тыс км в секунду, скорость света в оптоволокне будет ниже - 200 тыс км в секунду.

Если мы посчитаем время, которое проведет наш запрос в пути, то мы получим 100 мс (10 тыс / 200 тыс * 2). Быстрее получить ответ не позволит скорость света. Добавляем время оработки запроса и мы получим 120мс - в 6 раз дольше, чем наш запрос обрабатывает наш бэкенд.

========= Запрос к бэкенду ======
50ms: Kyiv -------запрос-----> SF 
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

Хорошо, мы уже выяснили, что никогда не поиграем в CS:GO с ребятами с Сан-Франциско с пингом ниже 100мс. Давайте дальше :)

Перед тем как запросить данные с сервера мы должны установить сетевое соединение. Протокол HTTP работает поверх TCP, следовательно нам нужно TCP соединение с сервером.

Для установки TCP соедения используется так называемое "тройное рукопожатие" ("TCP 3-way handshake") и теперь наш запрос выглядит:

========= TCP соединение ========
50ms: Kyiv -------syn--------> SF
50ms: Kyiv <------syn/ack----- SF
50ms: Kyiv -------ack--------> SF
========= Запрос к бэкенду ======
      Kyiv -------запрос-----> SF 
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

Мы не тратим дополнительные 50ms после TCP хендшейка, поскольку мы можем сразу начать отправлять запрос после отправки ack, нам не нужно ждать ответ от сервера. Сервер, как примет ack, посчитает соединение открытым и сразу начнет обрабатывать наш запрос.

То есть ответ пользователь получит через 220ms, в 11 раз дольше, чем отрабатывал наш бэкенд.

Но мы используем HTTPS и нам нужно SSL/TLS соединение и оно устанавливается поверх TCP, и у него есть свой механизм рукопожатия для обменя ключами шифрования, и это нужно сделать до момента, как мы отправим наш запрос на сервер.

Наша схема превращается в:

========= TCP соединение ========
50ms: Kyiv -------syn--------> SF
50ms: Kyiv <------syn/ack----- SF
50ms: Kyiv -------ack--------> SF
========= TLS соединение ========
      Kyiv ---представление--> SF
50ms: Kyiv <--сертификаты----- SF
50ms: Kyiv ---обмен ключами--> SF
50ms: Kyiv <--обмен ключами--- SF
========= Запрос к бэкенду ======
50ms: Kyiv -------запрос-----> SF
20ms: работа бэкенда         
50ms: Kyiv <------ответ------- SF

То есть в условиях, которые не могут даже существовать, когда пользователь имеет оптоволоконный кабель длинной в 10тыс км от своего ноутбука к серверу, он получит ответ через 420мс, в 21 раз дольше чем отрабатывает наш бэкенд. Это без учета того, что нам нужно еще вначале сбегать к DNS, чтобы получить ip-адрес сервера.

Если мы разрабатываем веб-приложения (не важно фронтенд или бекэнд), то обязаны понимать азы работы веба.

Продолжение следует...

​Как ускорить код-ревью . Интересный рассказ о том как улучшить качество кода, наладить процесс код ревью и уменьшить количество ошибок в продакшене → http://bit.ly/2T76aSA

​​Интересная заметка о том почему MDN выбирает Flow (спойлер: нет фич, которые не в страндарте, в их команде больше разработчиков, работавших с Flow, есть инструменты для легкого перехода на TS если что-то пойдет не так) → http://bit.ly/2BLCsbY

​Разбираемся с асинхронностью в JavaScript . Перевод статьи на тему того, как обрабатывает движок js асинхронные операции → http://bit.ly/2Isd94s

​Use Imagemin to compress images. Библиотека для сжатия изображений в статье на web.dev → http://bit.ly/2SR9geb. Также у них есть классная песочница, где можно посмотреть интеграцию с популярными сборщиками, например webpack → http://bit.ly/2GCb4Bh

​A Roadmap for Node.js Security: обзор угроз безопасности и способов защиты проектов на Node.js → http://bit.ly/2BMV1fF

​Make frontend “backend” again: как развивалась разработка бэкенда и что из этого могут позаимствовать фронтендеры. Прикольный доклад Николая Рыжикова на HolyJS → http://bit.ly/2T1CaIo

​Прикольная шпаргалка по git. Описаны самые часто используемые комманды и best practices

​Не умничайте с элементами форм. Брэд Фрост про модалки, формы, best practices при их разработке и том, что мешает юзерам и менеджерам паролей В переводе на Хабре → http://bit.ly/2BUULeI

​Прикольная коллекция бесплатных иллюстрированных аватаров с удобным API → https://joeschmoe.io/

Стартует конкурс.

Условия простые: прислать интересную или смешную историю, которая происходила с вами, или свидетелем которой вы были.

Возьмём тему: "баги на продакшене". Думаю многим будет что сказать.

Неделю собираем истории (@smartDevBot), формируем список историй и проводим голосование.

Голосование проведем в чате канала в телеграмме (@smart_dev_chat), 3 дня думаю будет достаточно.

Победителю полагается утешительный приз - 1 кг конфет (каких - предлагайте в комментариях). Приз доставим в любую точку, но если вы живёте за полярным кругом - прошу, пожалейте нас, и нашу упряжку хаски 😁.

Актуальный список можно почитать (и поднять себе настроение) здесь:
https://telegra.ph/Konkurs-Luchshaya-istoriya-na-temu-Bagi-na-prode-02-28

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

🤹‍♂️💣💥

​The Smart Ways to Correct Mistakes in Git. Очень полезная статья для тех, кто пытается освоить git. Разобраны способы исправления ошибок на разных этапах работы. Также внизу статьи есть ссылка на бесплатный курс обучения по git → http://bit.ly/2tJMO7z

​TSLint in 2019. Краткая заметка о нынешнем состоянии линтера и том, почему команда будет переходить к улучшении поддержки Typenoscript в ESLint взамен развития TSLint → http://bit.ly/2tFU5FN