Дайджест свежих материалов из мира фронтенда за последнюю неделю №497 (6 — 12 декабря 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Как мы переходили на Node.JS v16, или История о сломанном GC
3 мин
26 октября 2021 года вышел новый релиз Node.JS 16.13.0 который стал Active LTS.
Как мы переводили на него наш сервис мониторинга и анализа логов PostgreSQL и с какими проблемами столкнулись — в статье ниже.
Как мы переводили на него наш сервис мониторинга и анализа логов PostgreSQL и с какими проблемами столкнулись — в статье ниже.
Пять причин для ИТ-компании полюбить опенсорс
4 мин
Я всегда старался выносить в опенсорс все, что может быть полезно людям вне моей компании. Помимо стремления не только брать от сообщества, но и отдавать, это приносит ряд бенефитов для самой компании.
Всю статью я построил на примерах опыта Taiga UI — огромной библиотеки компонентов под Angular, которая долго развивалась внутри компании, а 10 месяцев назад была выложена в опенсорс. Несмотря на то, что примеры взяты из опыта фронтовой библиотеки, все пункты применимы и актуальны для любого другого стека.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №496 (29 ноября — 5 декабря 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Процедурная генерация бумажных снежинок
16 мин
Скоро начинаются предпраздничные дни, а вместе с ними и украшение наших домов. По этому поводу я решил заняться процедурной генерацией лекала для вырезания снежинок из бумаги. Под катом процесс разработки, алгоритм и демка.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №495 (22 — 28 ноября 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Как Angular загоняет фронтенд разработчиков в enterprise-кабалу
11 мин
В последние годы, рабство фронтенд разработчиков, использующих современные фреймворки, стало обыденностью. И данная статья рассказывает о том, как Angular буквально заставляет разработчиков удовлетворять свои прихоти, погружая их в enterprise кабалу.
Если пару лет назад шли вопросы о том, какой фреймворк выбрать, то сейчас все задаются вопросом: “Как оттуда выбраться”. Давайте разберемся с тем как это произошло, и что стоит делать, чтобы не попасть в жернова фронтенд фреймворка.
Как мы ускоряли комментарии Хабра
16 мин
Комментарии на Хабре иногда несут больше пользы, чем сама статья. Поэтому при переходе на новую версию сайта было важно сделать работу с комментами не хуже, чем было.
Вы когда-нибудь открывали в старом дизайне Хабра пост с большим числом комментариев? Страничка даже с тысячей сообщений грузится шустро, на ней без серьёзных задержек работает форма для ответа, кнопки голосования и закладок. Но когда мы начали переход на новую версию Хабра, стало понятно, что добиться такой же скорости будет непросто.
Этому есть несколько причин. Во-первых, Хабр стал одностраничным приложением (SPA, Single Page Application) на Vue, то есть теперь переходы между страницами рисуются на клиенте с помощью JS вместо классического серверного рендеринга (Server-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых девайсах могут тормозить.
Во-вторых, движок старого Хабра — это больше десяти лет оптимизаций, костылей и заплаток. Вполне естественно, что если попытаться переписать их с нуля на современных технологиях, придётся учесть эту историю поиска и устранения бутылочных горлышек в производительности.
В октябре мы постепенно выкатывали на часть пользователей обновлённую версию комментариев, над которой трудились последние полгода. Наши новые комментарии должны рендериться быстрее и доставлять удовольствие всем, а не только обладателям топовых MacBook Pro c M1 Max.
Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали работу по оптимизации.
Поиск проблемных промисов в JavaScript
10 мин
Перевод
JavaScript — это фантастический язык для серверного программирования, так как он поддерживает асинхронное выполнение кода. Но это ещё и усложняет его использование.
Асинхронность означает возможность написания кода, который не подвержен обычным проблемам, связанным с потокобезопасностью, и поддерживает выполнение множества задач в «параллельном» режиме. Например — ожидание считывания файла не блокирует другие вычисления.
Но небольшие ошибки в асинхронном коде могут приводить к появлению неразрешённых промисов. То есть — к участкам кода, выполнение которых, однажды начавшись, никогда не завершается.
Мы столкнулись с этой проблемой, когда в пуле соединений нашей базы данных knex постоянно заканчивались доступные соединения, после чего происходил сбой сервиса. Обычно в рамках соединения выполняется запрос, после чего оно возвращается в пул и может быть использовано для выполнения другого запроса.
Эти соединения что-то захватывало.
Речь идёт о кодовой базе в миллионы строк кода, которой в течение нескольких лет занимались десятки программистов. Может — проблема заключается в неразрешённых промисах? Я решил исследовать этот вопрос.
Асинхронность означает возможность написания кода, который не подвержен обычным проблемам, связанным с потокобезопасностью, и поддерживает выполнение множества задач в «параллельном» режиме. Например — ожидание считывания файла не блокирует другие вычисления.
Но небольшие ошибки в асинхронном коде могут приводить к появлению неразрешённых промисов. То есть — к участкам кода, выполнение которых, однажды начавшись, никогда не завершается.
Мы столкнулись с этой проблемой, когда в пуле соединений нашей базы данных knex постоянно заканчивались доступные соединения, после чего происходил сбой сервиса. Обычно в рамках соединения выполняется запрос, после чего оно возвращается в пул и может быть использовано для выполнения другого запроса.
Эти соединения что-то захватывало.
Речь идёт о кодовой базе в миллионы строк кода, которой в течение нескольких лет занимались десятки программистов. Может — проблема заключается в неразрешённых промисах? Я решил исследовать этот вопрос.
Обращение к Javascript-сообществу: перестаньте писать квадраты
7 мин
Пост про то, почему стоит, как минимум избегать квадратичной сложности в тех местах, где на это нет никаких причин. Если вы широко используете .concat в .reduce эта статья для вас. В ней я попытаюсь разобрать на пальцах почему это может быть очень плохим решением, и как это исправить.
Ох уж эти QR коды
5 мин
Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека.
5 возможностей JavaScript ES12, которыми стоит воспользоваться уже сегодня
6 мин
Перевод
Стандарт ECMAScript 2021 (12 редакция) выпущен 22 июня 2021 года. Вместе с ним появились новые возможности и новые синтаксические конструкции. Все эти улучшения направлены на то, чтобы сделать JavaScript надёжнее и стабильнее, чтобы разработчикам легче было делать своё дело.
Я подробно расскажу о 5 самых интересных возможностях ECMAScript 2021. Это позволит вам приступить к их использованию в своих проектах, что упростит вам работу и улучшит ваш код. Эта статья может оказаться полезной как начинающим, так и опытным разработчикам.
Я подробно расскажу о 5 самых интересных возможностях ECMAScript 2021. Это позволит вам приступить к их использованию в своих проектах, что упростит вам работу и улучшит ваш код. Эта статья может оказаться полезной как начинающим, так и опытным разработчикам.
Релизим фронтенд несколько раз в день
5 мин
Меня зовут Петр Солопов, я руковожу фронтенд-разработкой в SuperJob. В этой статье хочу рассказать об опыте ежедневных релизов у нас в компании, зачем мы это делаем и почему это не так страшно, как кажется.
История разбита на пять частей: что нас к этому привело, как это сделать, сколько нужно тестов и каких, что следует автоматизировать в процессе деплоя и как мониторить продакшн.
Ближайшие события
Дженерики в TypeScript
10 мин
Привет, я Сергей Вахрамов, занимаюсь фронтенд-разработкой на Angular в компании Тинькофф. Во фронтенд-разработку вошел напрямую с тайпскрипта, просто перечитав всю документацию. С того момента и спецификация ECMAScript расширилась, и TypeScript сильно подрос. Казалось бы, почему разработчики могут бояться дженериков, ведь бояться там нечего? Мой опыт общения с джуниор-разработчиками говорит, что во многом ребята не используют обобщенные типы просто потому, что кто-то пустил легенду об их сложности.
Эта статья для тех, кто не использует generic-типы в TypeScript: не знают о них, боятся использовать или используют вместо реальных типов — any.
Блокчейн на JavaScript
7 мин
Перевод
В последнее время криптовалюты и блокчейн-технологии стали невероятно популярными. Сегодня я расскажу о моём подходе к созданию блокчейн-платформы на JavaScript с использованием всего 60 строк кода. Я — начинающий блокчейн-разработчик, поэтому если я в чём-то ошибаюсь — поправьте меня в комментариях.
Учись глазами. Как айтрекер помогает обездвиженным
3 мин
Привет, я Иван Бакаидов.
Вы знаете, что я много лет делаю софт, который помогает людям с тяжелыми нарушениями общаться с миром. Хочу немного рассказать о том, чем занимаюсь последний год, также мне нужна помощь разработчиков браузерных игр.
За эти годы я пришел к использованию устройств отслеживания положения взгляда Tobii для коммуникации с тяжелыми формами инвалидности.
В прошлом году я начал сотрудничать с фондом “Близкие Другие”. У нас был интересный опыт, когда несколько десятков семей научились работать с айтрекером с использованием моих open-source программ.
В этом году мы решили масштабировать этот опыт и для этого сделать бесплатный методический курс, которым может воспользоваться любая семья самостоятельно.
Юра Дудь пробует LINKa смотри, на разработку которой он выделял деньги.
Вы знаете, что я много лет делаю софт, который помогает людям с тяжелыми нарушениями общаться с миром. Хочу немного рассказать о том, чем занимаюсь последний год, также мне нужна помощь разработчиков браузерных игр.
За эти годы я пришел к использованию устройств отслеживания положения взгляда Tobii для коммуникации с тяжелыми формами инвалидности.
В прошлом году я начал сотрудничать с фондом “Близкие Другие”. У нас был интересный опыт, когда несколько десятков семей научились работать с айтрекером с использованием моих open-source программ.
В этом году мы решили масштабировать этот опыт и для этого сделать бесплатный методический курс, которым может воспользоваться любая семья самостоятельно.
Юра Дудь пробует LINKa смотри, на разработку которой он выделял деньги.
Го: Долгая дорога к боту
28 мин
There is no difference between theory and practice in theory, but there is often a great deal of difference between theory
and practice in practice.
Yogi Berra
Я слепым вместо глаз вставил звезды и синее небо.
Юрий Шевчук
Тема игровых ботов с самого начала была для меня довольно чувствительной. Используя Dagaz, я научился воссоздавать самые разнообразные игры, но что в них толку, если с тобой никто не играет? Nest позволил разработать сервер, для игры по сети, но до тех пор пока на нём не слишком много народу, боты продолжают оставаться актуальными. Универсальные боты, которые я писал, были медленными и слабыми. К счастью, знакомство с Garbochess позволило переломить ситуацию, по крайней мере в том, что касалось шахматных игр. Признаюсь честно, я никогда не думал, что у меня появится бот для игры в Го…
Дайджест свежих материалов из мира фронтенда за последнюю неделю №492 (1 — 7 ноября 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Разбираемся в сортах реактивности
27 мин
Здравствуйте, меня зовут Дмитрий Карловский и я… прилетел к вам на турбо-реактивном самолёте. Основная суть реактивного двигателя изображена на картинке.
Тут, казалось бы, хаотичное взаимодействие между молекулами, приводит к тому, что улетающие молекулы опосредованно передают импульс корпусу двигателя. Что ж, давайте подумаем, как реактивные принципы решают или наоборот усугубляют проблемы в программировании. Сравним различные подходы к реактивному программированию. И вытащим на поверхность все их подводные камни.
Это — текстовая расшифровка выступления на SECON.Weekend Frontend'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.
Chrome DevTools: Хитрости при отладке
7 мин
В сети полно обзоров Chrome DevTools, которые демонстрируют многочисленные возможности этого прекрасного инструмента. DevTools настолько большие, что познать их полностью, как мне кажется, уже почти невозможно.
В этой заметке я бы хотел остановиться на различных нюансах, полезных при отладке. Какие-то из них я почерпнул в сети (например в комментариях на Хабре), до каких-то додумался сам. Надеюсь вы найдёте для себя что-нибудь полезное.
Под катом:
— Как отладить popup-ы, которые исчезают при потере фокуса
— Как убить повисший JS-цикл, не убивая вкладку
— Различные нюансы работы с breakpoint-ми
— Методы ведения войны с sourceMaps
— Перехват network-запросов
— Как отладить race-condition
— Почему стоит опасаться галочки "disable cache"
— Что делать если у вас не Hi-DPI экран?