​Не умничайте с элементами форм. Брэд Фрост про модалки, формы, 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

Вот и продолжение крутой серии статей от @jabanoscript: "Скорость света и Веб - часть 2" :)

Мы уже разобрались, что есть скорость света и она влияет на задержки при передаче данных. У нас есть задержки на TCP и TLS рукопожатия, также есть время в пути запроса и ответа. Можем ли мы говорить, что это максимальные задержки, которые мы получаем?

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

Есть 2 нюанса, которые важны:
1. TCP контролирует доставку пакетов и для того, чтобы понять, что пакеты были доставлены нужно какое-то подтверждение от получателя. Для этого в ответ отправляется пакет с флагом "ack" (acknowledge).
2. Клиент и сервер изначально не знают доступной на данный момент пропускной способности сети. Она зависит от возможностей сервера, от возможностей промежуточных узлов, от активности других узлов в этой же сети и тд. Единственный способ узнать - это пробовать передавать данные с разной скоростью и смотреть доходят ли они (ждать подтверждения, что вторая сторона получила их).

Как это работает?
Когда мы делаем запрос к серверу он сначала отправляет нам часть данных, потом ждет подтверждения, потом увеличивает объем передаваемых данных в 2 раза и опять ждет ответ. Если все ок, еще раз увеличивает и так далее до момента пока он не достигнет максимального объема данных, которые готов принимать клиент.

Как это все называется?
✳️ Механизм постепенного увеличения скорости передачи данных называется "TCP Slow Start"
✳️ Лимит отправителя на объем данных в пути называется "Congestion window size" (CWND). После отправки этого объема данных, отправитель должен ждать подтверждения о том, что данные дошли. Увеличения этого лимита и есть "TCP Slow Start". ВАЖНО: про этот лимит знает только отправитель и он сам для себя его регулирует. CWND имеряется в "сегментах" (сегмент обычно не более 1,46KB). Стартовое значение по стандарту - 10 сегментов (14.6KB)
✳️ Также есть ограничение получателя на объем данных, которое он может принять - "Receiver window size" (RWND). Получатель отправляет отправителю RWND в каждом пакете с подтвержджением (с флагом ack). Поскольку передача дынных происходит в обе стороны, то каждая сторона может выступать как получателем, так и отправителем. Получатель может передать RWND равным нулю, это говорит о том, что отправитель должен приостановить передачу.

Обе переменные ограничивают количество данных, которое можно отправить, это всегда минимум с CWND и RWND.

Теперь давайте нарисуем, что на самом деле происходит, когда браузер хочет скачать наш JavaScript файл на 50KB.
Возьмем те же локациии - Киев и Сан-Франциско.

 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
====== HTTP запрос к серверу ====
50ms: Kyiv -------запрос-----> SF
20ms: работа бекенда         
50ms: Kyiv <-----14.6KB------- SF
50ms: Kyiv -------ack--------> SF
50ms: Kyiv <-----29.2KB------- SF
50ms: Kyiv -------ack--------> SF
50ms: Kyiv <-----6.2KB-------- SF

Скорость в 100Мбит/с говорит о том, что мы получим 50KB через 4ms, но на самом деле у нас это займет 620ms.
Самое интересное, что если бы наш JS файл был бы 40KB, то мы получили бы его на 100ms раньше.

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

Поэтому используйте Gzip компрессию c HTTP, следите за Cookie (они могут быть большими), сжимайте картинки и удаляйте с них метаданные . Конечно, не забывайте про CDN (может дать существенный выигрышь).

Дальше я попробую описать более детально, что у нас есть, чтобы сделать наши веб-приложения более быстрыми.

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

​AMP и Турбо-страницы: плюсы, минусы и результаты внедрения. Опыт внедрения компанией данных технологий, сложности, с какими столкнулись и какой профит получили. Такжи советую почитать комментарии, там альтернативная точка зрения → http://bit.ly/2GR11Iv

​Вебпак, вид сквозь монокль. Классный доклад об улучшении сборки проекта и developer experience при работе с вебпак -> http://bit.ly/2tOFXtC

​Сотрудник Google Мартин Сплит (Martin Splitt) объявил о запуске новой серии видео, посвящённой SEO для JavaScript. Так как эта тема интересует многие контент-ориентированные проекты, а точного описания процессов индексации нет - очень советую → http://bit.ly/2VAlg0i

Всем привет.
У нашего канала есть друзья, коротые несут образование в массы - это WebHero School. Это не просто образовательный проект, а целое коммьинити (что очень-очень круто). Рекомендуем подписаться на их канал @webheropublic. В нем сможете найти полезные материалы, книги и статьи, необходимые для того чтоб начать свой путь в мир разработки или углубить знания. Также у сообщества есть чат, в котором можно обсудить интересующие вопросы.
В общем подписывайтесь, рекомендуем)

​Improving Performance in React Functional Components using React.memo(). Интересная статья, в которой объясняется как улучшить производительность React приложения с помощью Pure.Component, ShouldComponentUpdate и React.memo() → http://bit.ly/2tRawyS

​How Are Function Components Different from Classes?. Пост Дена Абрамова о том, чем функциональные компоненты отличаются от классов, как замыкания помогают нам избежать багов в edge-кейсах и как в свете всего этого исопльзовать хуки → http://bit.ly/2Turcut

Ребята, сегодня закрываем конкурс, если кто-то еще хочет поучаствовать - можете успеть. Условия и участники закреплены в группе 👆

​Основи програмування CS50 2019. Стартовал известный Гарвардский курс по компьютерным наукам CS50 в переводе на украинский (на платформе Prometheus). Очень советую всем новичкам в программировании, заодно очень интересно посмотреть способ преподавания в западных вузах (поверьте, посмотреть есть на что) → https://courses.prometheus.org.ua/courses/course-v1:Prometheus+CS50+2019_T1/about

​JavaScript Loading Priorities in Chrome. Эдди Османи в своем блоге написал таблицу приоритетов загрузки различных составляющих частей страницы, с примерами какой для чего лучше использовать → http://bit.ly/2EOYw7q

​Redux in 1 min. Прикольное очень лаконичное объяснение принципов работы Redux с наглядным примером → http://bit.ly/2TinVzh

​8 reasons to use styled-components. В статье наведены доводы за и против использования CSS-in-JS и styled-components в частности → http://bit.ly/2Tmk6Jz

​5 советов как лучше писать условные конструкции в JavaScript. Интересный пост, разбирающий проблему с разных сторон и показывающий, что всегда есть больше одного решения проблемы → http://bit.ly/2tSAvG9

​Код ревью. Содержательная статья от Дмитрия Мананникова о принципах, на которые нужно опираться, когда делаешь код-ревью → http://bit.ly/2UlFueg

Как обещали - объявляем голосование за лучшую историю. Голосование проходит в чате @smart_dev_chat. Длиться будет 3 дня, закроем в понедельник вечером. Заходим, читаем, головуем 😉. Полный список историй можно прочитать здесь:

https://telegra.ph/Konkurs-Luchshaya-istoriya-na-temu-Bagi-na-prode-02-28

​We Need Chrome No More. Размышления о том, почему доминирование Хрома на всех платформах это плохо и что с этим можно поделать → http://bit.ly/2EBIYCQ