Улучшаем код и UX с помощью scroll-padding-block, используй на здоровье 😊

caniuse 94.7%

Angular теперь модный 😍

Команда Angular сделала редизайн своего фреймворка и разработала новый сайтик с крутым UI/UX для его изучения в преддверии 17-ой версии, которая анонсирована на 8 ноября

Выглядит прям стильно, я влюбился 🔥

Заценить сайтик можно тут

Про новую версию Angular напишу попозже, но для нетерпеливых вот видосик-анонс

Встречаем Angular 17🫱🫲

Перевёл статью из блога команды ангуляра, приятного чтения тебе ❤️

https://habr.com/ru/articles/772894/

Интерактивчик с HolyJS от VK 🧑‍🎓

Ответы можно писать в комменты, а то я не справляюсь 😄

Оказывается у них два вида кроссворда, вперёд решать макаронинки 🤓

За что я обожаю конференции, так это за возможность фарма по квестикам, как будто окунаешься в какую-то рпг и гриндишь 2 дня 😍

На этой неделе постараюсь собрать несколько понравившихся докладов и поделиться с тобой полезной инфой, stay tuned

Endorphin.js — фреймворк от одноклассников 🤤

Сергей Чикуёнок в докладе на холи рассказал про своё детище, которое он растит на гитхабе и успешно использует в ok.ru, судить хорошее оно или плохое рановато, так как фреймворк сыроват и сравнение с другими фреймворками перфоманса не проводилось.

Синтаксис выглядит неплохо, попытка взять лучшие решения из каждого фреймворка, а вот ответ на вопрос реальной нужды в нём меня не удовлетворил (смотри скрин) 😄

Я вижу 3 варианта для этого фреймворка:
1. Endorphin останется только внутри одноклассников (самое вероятное) 🙃
2. Забьют болт на него со временем и переедут на поддержку чего не нужно тратить время и деньги 🫡
3. Сергей станет Evan'ом You в СНГ 😄

Вот можешь заценить гитхаб Endorphin'а
Github Endorphin

Rive — анимации, которые не ссорят тебя с дизайнером 🥹

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

Тут ты тут решил раскинуть мозгами и перебираешься варианты:
1. GIF или .mp4 — норм, если короткая анимашка, иначе будет неприлично много весить
2. Возможно шаришь за lottie и дизайнер тебе сделает экспорт из after effects — топ вариант для короткой и длинной анимации, но есть проблемы с анимашками, которые имеют несколько состояний (ну и экспорт хромает у него из-за использования разных тулзов)
3. Rive — такой же топ как и lottie, но имеет свой редактор (исчезает проблема экспорта) и в редакторе есть state machine, что позволяет создавать разные состояния и рулить ими удобно в коде + выходит легче по весу

Вроде всё круто, но за дружбу надо платить, минимальный тариф $25, чтобы пользоваться редактором, но всё равно дешевле After Effects

Потестить можно бесплатно, а готовую графику можно свободно вставлять в код, так как сама библиотека опен-сурсная

Официальный сайт — https://rive.app/
Видос анонс — https://www.youtube.com/watch?v=inNaaPYsRCU
GitHub — https://github.com/rive-app

CSS, который уже можно использовать 🔥

Что-то я довольно часто писал про CSS фичи, которые были не готовы к проду, сегодня го разберём то, что уже вполне можно использовать у себя в проекте

1. flex gap (caniuse 96%) — если у тебя ещё есть в коде а-ля :not(:last-child) { margin-left: 8px }, то можешь смело заменить этот код на gap: 8px

2. overscroll-behavior (caniuse 94%) — эта штука нужна, чтобы не срабатывал цепной скролл внешнего контента, после полной прокрутки внутреннего

3. scroll-snap-type (caniuse 96%) — заставляет скролл прилипать к элементу, топ вещь для создания слайдера

4. scroll-snap-align (caniuse 96%) — выравнивание скролла по элементу (прилипание), классно работает в комбинации с scroll-snap-type

5. scroll-margin (caniuse 95%) — отступ элемента в скролл контейнере (можно убрать костыльные отступы при использовании прилипающей шапки), неплохо комбинируется с scroll-snap-type

Офлайн занятия фронтендом в Питере 💪

Можно и онлайн, в любом случае приходи на пробный урок в школу программирования SaintCode Bootcamp — преподаватель выявит слабые места, поможет написать несложный проект и объяснит, куда двигаться дальше

Тему занятия можешь выбрать сам: например, разобраться в адаптивной вёрстке и flex/grid, освоить определённый метод в JS или выстроить структуру проекта в библиотеке React. Если конкретного запроса нет, преподаватель сам подберёт тебе задание и поможет выполнить его

Урок длится 2 часа, цена 600, но предложение действует только в ноябре. Перед покупкой зацени наш YouTube канал, а потом приходи к нам в SaintCode ⚡️

Bundlephobia — помощник при выборе и обновлении библиотек 🥹

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

https://bundlephobia.com/

UPD: есть ещё и https://bundlejs.com/, поможет оценить всю сборку сразу

Ещё на HolyJS мой взгляд зацепил стенд GeekBoards с механическими клавиатурами, некоторые были раритетно-специфичными, а остальные современными и их можно было купить👨‍💻

У меня никогда не было механической клавиатуры, поэтому мне это казалось чем-то ВАУ!

Тыкнул ребят по теме скидок, сказали, что намечается чёрная пятница (уже завтра) и будут скидки, может выберешь себе механику по душе 😄

Официальный сайт ребят GeekBoards

Не даём мозгу засохнуть, вспоминаем алгоритмы на выходных 🥸

Яндекс любит алгоритмические собесы, поэтому у них есть куча материала по подготовке:
https://contest.yandex.ru/contest/8458/enter
https://practicum.yandex.ru/profile/algorithms-interview/
https://yandex.ru/yaintern/algorithm-training_1

Ещё и видосы у них тоже есть:
https://www.youtube.com/watch?v=0yxjWwoZtLw
https://www.youtube.com/watch?v=zU-LndSG5RE
https://www.youtube.com/watch?v=OsQoft0R1GA

Вспомнить оценку сложности алгоритмов:
https://habr.com/ru/post/188010/
https://habr.com/ru/post/196560/
https://www.geeksforgeeks.org/

Известные сайтики где можно набить руку и померится птс'ами:
https://leetcode.com/problemset/algorithms/
https://www.codewars.com/
https://www.hackerrank.com/

Хороших и продуктивных выходных тебе! ❤️

Prime — UI фреймворк, который может везде 😎

Он поддерживает React, Angular и Vue, имеет богатый набор компонентов и интегрируется с Tailwind

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

GitHub команды

Компоненты для React
Компоненты для Vue
Компоненты для Angular

Proposal: Promise.withResolvers перешёл на Stage 4 🫶

Для пропоусалов это финальная стадия, а это значит, что уже совсем скоро это можно будет без проблем использовать в проектах 🔥

Спецификация 👇
https://github.com/tc39/proposal-promise-with-resolvers

Для нетерпеливых можно использовать уже сейчас с помощью npm пакета 👇
https://www.npmjs.com/package/promise.withresolvers

Умный Typescript: Branded types + Assertion function 🧑‍🎓

Бывало такое, что хочется создать такой тип, которому нужна логика? Например, тип для процентов или же тип только для положительных чисел? Тебе нужно лишь 3 шага, чтобы такое реализовать!

Первый шаг:
Создай тип и назови его так, чтобы тиммэйты поняли
type PositiveNumber = number; — всё привычно и понятно, но TS не будет ругаться если вдруг это -1

Второй шаг:
Добавь Branded Types по вкусу
type PositiveNumber = number & { __brand: 'PositiveNumber' }; — тут ты TS'ы показал, что это не просто число, а что-то особенное

Третий шаг:
Используй Assertion function, чтобы показать TS'у как он может его распознать
function assertsPositiveNumber(value: number): asserts value is PositiveNumber {
if (value < 0) {
throw new Error('Value must be a positive number');
}
}

Хорошего дня ❤️

Развитие для Frontend-разработчика 🧐

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

Конечно, перед интервью я немного готовлюсь, а потом делаю разбор нерешённых задачек

Ко мне постучались ребята из Frontendiya и поделились, что как раз делают платформу для подготовки к интервью и занимаются менторством во фронтенде (готовят к собесу, проводят тренировочные интервью, разбирают недочёта и делают так, чтобы тебя точно взяли на крутую работу 😎)

Можно заценить их собесы на ютубе:
Senior за 2 года? собеседование frontend | live coding
7+ лет опыта во фротенде | Собеседование frontend #10

В субботу (9 декабря) ребята будут запускать свою платформу и решать алгоритмические задачи из интервью бигтеха (Яндекс, Вк, Сбер, Тинькофф) на стриме. Стрим будет приватным, поэтому ссылка появится в закрытом чате, если интересно, то залетай 😏

Что нового в Chrome 120? 🔥

Теперь нет смысла переводить статьи, гугл сам стал их переводить 🤗

https://developer.chrome.com/blog/new-in-chrome-120?hl=ru

JetBrains AI — новый конкурент GitHub Co-pilot 🏖️

Что там будет?
— Чат с ИИ консультантом по поводу кода
— Автокомплиты кода презсказанные нейронкой
— Документирование функций и классов
— Генерация описания коммитов
— Помощь в именовании классов, функций и переменных

Цена должна быть в районе ~$10 в месяц

Видос анонс и обзор возможностей 👇
https://www.youtube.com/watch?v=-NnYtfzO7qU

Официальный сайт