Forwarded from PiterJS (Ivan Voropaev)
✨ PiterJS #78! Ну наконец-то!
Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок
⏰ Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)
📰 Программа
🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт
🎤 Тайная активность
🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
Поговорим про компоненты, послушаем про View Transitions API, поучаствуем в тайной активности - и это всё в 5 метрах от дата-центра Selectel, неплохо, да?) Приходите сами, и берите ваших коллег, друзей и вторых половинок
⏰ Когда: 27 мая (вт), 19:00
📍 Где: Selectel (Цветочная ул., 19, Санкт-Петербург)
📰 Программа
🗣 Василий Беляев
🎤 Как мы компоненты оптимизировали, оптимизировали, да выоптимизировали
🗣 Николай Шабалин
🎤 Склеиваем экраны: как View Transitions API улучшает пользовательский опыт
🎤 Тайная активность
🎫 Регистрация: https://piterjs.org/#meetup=tgc5es_yh9ozv
PiterJS
Ежемесячный питерский митап о JavaScript, Node.js и всём, что окружает современного фронтендера.
👍5❤1🙏1
Copilot
У меня отличные новости для одиночек! Я всегда говорил: "Проводите все изменения в проекте через пулреквесты — даже самые мелкие."
PR — это способ сосредоточиться на конкретных изменениях. Иногда по одному пулреквесту можно понять, работаете ли вы с психопатом или с нормальным человеком. =)
Сейчас в сфере ИИ происходит множество изменений. Недавно GitHub выкатил обновление: теперь в пулреквест можно пригласить Copilot. Он уже нашёл у меня несколько ошибок — это с одной стороны.
С другой стороны, мне кажется, что он просто обязан что-то найти и в любом случае что-нибудь да напишет. Прям как самый токсичный коллега на работе. =)
Чтобы позвать Copilot проверить pullrequest нужно зайти в PR. В секции "Reviewers", которая находится справа, нажать "Request" напротив Copilot. После надо лишь подождать, когда он выполнить свою работу.
У меня отличные новости для одиночек! Я всегда говорил: "Проводите все изменения в проекте через пулреквесты — даже самые мелкие."
PR — это способ сосредоточиться на конкретных изменениях. Иногда по одному пулреквесту можно понять, работаете ли вы с психопатом или с нормальным человеком. =)
Сейчас в сфере ИИ происходит множество изменений. Недавно GitHub выкатил обновление: теперь в пулреквест можно пригласить Copilot. Он уже нашёл у меня несколько ошибок — это с одной стороны.
С другой стороны, мне кажется, что он просто обязан что-то найти и в любом случае что-нибудь да напишет. Прям как самый токсичный коллега на работе. =)
Чтобы позвать Copilot проверить pullrequest нужно зайти в PR. В секции "Reviewers", которая находится справа, нажать "Request" напротив Copilot. После надо лишь подождать, когда он выполнить свою работу.
👍13🔥1😁1
Как прошёл PiterJS
Привет. Вчера прошёл 78 митап PiterJS. На нём я рассказал про анимации с помощью ViewTransition API. Запись доклада есть. Чуть позже его нарежут выложат на YouTube.
Митап прошёл в Selectel. В нём, кстати, провели экскурсию для тех кто пришёл пораньше. Была отличная возможность пошататься по красивому офису и посмотреть на сервера.
Вчера ко мне подошли знакомиться очень много людей. За что я вам благодарен. Это было очень приятно. Обязательно повторяйте это в следующие разы, не стесняйтесь.
PS: Есть вероятность, что я снова появлюсь на следующем митапе PiterJS. Так что подпишитесь на их канал, чтобы следить за новостями
Привет. Вчера прошёл 78 митап PiterJS. На нём я рассказал про анимации с помощью ViewTransition API. Запись доклада есть. Чуть позже его нарежут выложат на YouTube.
Митап прошёл в Selectel. В нём, кстати, провели экскурсию для тех кто пришёл пораньше. Была отличная возможность пошататься по красивому офису и посмотреть на сервера.
Вчера ко мне подошли знакомиться очень много людей. За что я вам благодарен. Это было очень приятно. Обязательно повторяйте это в следующие разы, не стесняйтесь.
PS: Есть вероятность, что я снова появлюсь на следующем митапе PiterJS. Так что подпишитесь на их канал, чтобы следить за новостями
👍23❤2🔥1
Кринжавини хэхэруини
это будет пост в зумерской подаче, так как у меня пропал дар речи
Я послеживал за инициативой от госуслуг "Подтвердите свои ИT‑компетенции". Инициатива помогает подтвердить ваши навыки в программировании, в том числе HTML, CSS и даже гит. В общем, всё Айтишное. Пройдя полностью секции по HTML и CSS я отхватил такого бугурта, что теперь мне придётся менять кресло. Далее по тексту держите контекст, что я пишу про секции HTML и CSS. Остальные я не смотрел.
Сама инициатива хороша. Нужно несколько итераций по улучшению процессов и самое важное - вопросов.
Одна из проблем это то, что можно просто использовать нейронку поверх браузера и подтвердить любой навык. Тут надежда, что никто в здравом уме никогда не будет считать, что человек подтвердивший навык действительно это знает и нужно перепроверять его знания самостоятельно. Адекватного решения для онлайна тут никогда не будет, к сожалению. Поэтому я просто смирился, что ничего нового не придумано.
Также у меня не совпало ожидание и реальность. Я думал госуслуги найдут экспертов и с ними совместно создадут вопросы и ответы, но оказалось, что просто взяли готовый проект hh.ru, а те видимо взяли своего разработчика и из под палки заставили создавать квизы. Любой, кто хоть как-то серьёзно пишет на навыке, который есть в hh.ru поймёт, что работа была проведена плохо. По секциям HTML и CSS, любой студент из HTML1 и HTML2 почувствует, что что-то не так =)
Из того, что бросилось в глаза:
- Автор не открывал спеку HTML5 никогда. Он до сих пор оперирует инлайновыми и блочными элементами, которые были в HTML4. Помните такой HTML4? И я нет!
- Автор считает, что если что-то находится "снизу", то это футер. Совсем забыл, что с помощью HTML мы описываем смысл текста. Визуально футер может находится хоть сверху, хоть сбоку, это не влияет на выбор html-тега
- В вопросах про HTML спрашивают про JSX. Нормальные вообще? =) В общем, там надо было выбрать
- В CSS в одном из вопросов нужно было выбрать описания бесконечной анимации кручения спинера. Так в этом вопросе была два правильных ответа, но выбрать можно было один. Автор совсем не знал, что существует CSS-свойство
- Ещё больше меня поразили вопросы в стиле "лайфхаки прожённого версталы". Такие лайфхаки, которыми мы использовали давным давно и они уже никакому современному верстальщику не нужны. Как это подтверждает навык владением CSS для меня загадка. Я рад, что современные верстальщики не страдают, а создают адаптивные интерфейсы быстро и эффективно с помощью современного API.
Ну в общем: госуслуги положились на hh, а те не смогли, так как вопросы явно создавались не под госуслуги, а под какой-то свой коммерческий продукт и к подтверждению навыка это не имеет никакого отношения. Это просто видение одного человека, которого заставили делать квизы.
Ах да. Пострадать можно тут https://www.gosuslugi.ru/itskills
это будет пост в зумерской подаче, так как у меня пропал дар речи
Я послеживал за инициативой от госуслуг "Подтвердите свои ИT‑компетенции". Инициатива помогает подтвердить ваши навыки в программировании, в том числе HTML, CSS и даже гит. В общем, всё Айтишное. Пройдя полностью секции по HTML и CSS я отхватил такого бугурта, что теперь мне придётся менять кресло. Далее по тексту держите контекст, что я пишу про секции HTML и CSS. Остальные я не смотрел.
Сама инициатива хороша. Нужно несколько итераций по улучшению процессов и самое важное - вопросов.
Одна из проблем это то, что можно просто использовать нейронку поверх браузера и подтвердить любой навык. Тут надежда, что никто в здравом уме никогда не будет считать, что человек подтвердивший навык действительно это знает и нужно перепроверять его знания самостоятельно. Адекватного решения для онлайна тут никогда не будет, к сожалению. Поэтому я просто смирился, что ничего нового не придумано.
Также у меня не совпало ожидание и реальность. Я думал госуслуги найдут экспертов и с ними совместно создадут вопросы и ответы, но оказалось, что просто взяли готовый проект hh.ru, а те видимо взяли своего разработчика и из под палки заставили создавать квизы. Любой, кто хоть как-то серьёзно пишет на навыке, который есть в hh.ru поймёт, что работа была проведена плохо. По секциям HTML и CSS, любой студент из HTML1 и HTML2 почувствует, что что-то не так =)
Из того, что бросилось в глаза:
- Автор не открывал спеку HTML5 никогда. Он до сих пор оперирует инлайновыми и блочными элементами, которые были в HTML4. Помните такой HTML4? И я нет!
- Автор считает, что если что-то находится "снизу", то это футер. Совсем забыл, что с помощью HTML мы описываем смысл текста. Визуально футер может находится хоть сверху, хоть сбоку, это не влияет на выбор html-тега
- В вопросах про HTML спрашивают про JSX. Нормальные вообще? =) В общем, там надо было выбрать
className, как аналог атрибута class в HTML- В CSS в одном из вопросов нужно было выбрать описания бесконечной анимации кручения спинера. Так в этом вопросе была два правильных ответа, но выбрать можно было один. Автор совсем не знал, что существует CSS-свойство
rotate, которое в браузерах работает с 2020 года и предложил этот вариант в надежде, что это не работает, а это работает =)- Ещё больше меня поразили вопросы в стиле "лайфхаки прожённого версталы". Такие лайфхаки, которыми мы использовали давным давно и они уже никакому современному верстальщику не нужны. Как это подтверждает навык владением CSS для меня загадка. Я рад, что современные верстальщики не страдают, а создают адаптивные интерфейсы быстро и эффективно с помощью современного API.
Ну в общем: госуслуги положились на hh, а те не смогли, так как вопросы явно создавались не под госуслуги, а под какой-то свой коммерческий продукт и к подтверждению навыка это не имеет никакого отношения. Это просто видение одного человека, которого заставили делать квизы.
Ах да. Пострадать можно тут https://www.gosuslugi.ru/itskills
🙈10🔥3👍1
Функции и миксины в CSS
Сегодня наткнулся на спецификацию CSS Functions and Mixins Module. Решил полистать и немного залип. В целом, если использовали миксины и функции в препроцессорах, то теперь это будет в CSS, но гораздо мощнее, так как работает с кастомными свойствами, наследованием, каскадом и прочими способностями CSS прямо в браузере.
Вот небольшой пример:
Больше рассказал в блоге
👉 https://shabalin.online/blog/css/functions-and-mixins/
Сегодня наткнулся на спецификацию CSS Functions and Mixins Module. Решил полистать и немного залип. В целом, если использовали миксины и функции в препроцессорах, то теперь это будет в CSS, но гораздо мощнее, так как работает с кастомными свойствами, наследованием, каскадом и прочими способностями CSS прямо в браузере.
Вот небольшой пример:
@function --shadow(--shadow-color <color> : inherit) {
result: 2px 2px var(--shadow-color, black);
}Больше рассказал в блоге
👉 https://shabalin.online/blog/css/functions-and-mixins/
shabalin.online
Понимаем CSS Functions and Mixins Module Level 1 вместе
Узнаем о модуле CSS Functions and Mixins — новой спецификации в CSS, которая добавляет возможность создавать пользовательские функции и в будущем — миксины. Эти инструменты позволяют разработчикам задавать стили с параметрами, переиспользовать их и делать…
👍5🔥2
Обновки
Телеграмм выкатил сегодня обновки. Теперь в паблики можно писать сообщение администратору. Для этого надо обновить телеграм и в левом нижнем углу появится возможность написать в "личку паблика"
А напишите чего-нибудь приятного в эту личку :3
Телеграмм выкатил сегодня обновки. Теперь в паблики можно писать сообщение администратору. Для этого надо обновить телеграм и в левом нижнем углу появится возможность написать в "личку паблика"
А напишите чего-нибудь приятного в эту личку :3
????????
Поделюсь как я читаю дайджесты:
- Начните с заголовков статей, чтобы получить общее представление о содержании
- Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
- Выберите наиболее интересные или полезные темы под текущие задачи
- Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
- Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
- При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
- Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
- Используйте закладки для сохранения интересных материалов
- Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
Поделюсь как я читаю дайджесты:
- Начните с заголовков статей, чтобы получить общее представление о содержании
- Быстро пробегитесь по первым абзацам, чтобы понять актуальность материалов именно для вас
- Выберите наиболее интересные или полезные темы под текущие задачи
- Планируйте чтение: выделите, например, 15 минут утром и 15 минут вечером
- Не пытайтесь прочитать всё сразу — возвращайтесь к дайджесту в удобное время
- При повторном просмотре читайте выбранные статьи более вдумчиво, делая заметки
- Не сожалейте, если прочитали лишь часть: ценность в качестве, а не в количестве
- Используйте закладки для сохранения интересных материалов
- Делитесь инсайтами и ссылками с коллегами — так информация лучше усвоится
👍7
Странные дела
Странный вчера пост вышел, да? Сейчас будет ещё страннее.
Моя короткая история дайджестов
Где-то в 2015 году я понял, что вообще никак не успеваю за развитием фронтенда. Что я только ни делал — всё равно мимо пролетали важные события, новые технологии, подходы и прочее. Тогда я решил, что надо как-то это фиксить. Я нашёл парочку дайджестов и выработал правила, следуя которым я не буду грустить. С ними я поделился в прошлом посте. Всё успеть невозможно, но нужно хотя бы двигаться вместе с индустрией.
В 2020 году я начал делать дайджесты для себя. Даже собрал базу данных с группировкой по темам, по которой мог найти пул статей на определённую тему. Золотые деньки. Тут я понял, что могу делать это регулярно и на постоянной основе. Просто так, ни для кого — а для себя.
В 2022 году я начал публиковать свои дайджесты от лица компании — но не срослось.
В 2023 году я начал публиковать дайджесты внутри компании, от лица компании — но снова не срослось.
В 2024 году я перешёл в другую команду и там продолжил постить дайджесты внутри компании для фронтендеров. Отклика было 0. Как вы поняли — не срослось.
К этому моменту я понял, что делать дайджесты от лица компании для меня не имеет смысла. Для компании это просто очередная метрика, столбик в дашборде. А я-то делаю для души. Компания позволяет делать это на большую аудиторию — которой у меня нет, а хотелось бы.
Ну что, пора начать публиковать для всех, делая это для себя. Учиться монетизировать и не расстраивать читателя.
Сегодня я выпускаю публичную бета-версию:
👉 https://shabalin.online/blog/digest/weekly-digest-1/
Посмотрите, пожалуйста, и дайте мне обратную связь. Я вам за неё буду искренне благодарен.
Странный вчера пост вышел, да? Сейчас будет ещё страннее.
Моя короткая история дайджестов
Где-то в 2015 году я понял, что вообще никак не успеваю за развитием фронтенда. Что я только ни делал — всё равно мимо пролетали важные события, новые технологии, подходы и прочее. Тогда я решил, что надо как-то это фиксить. Я нашёл парочку дайджестов и выработал правила, следуя которым я не буду грустить. С ними я поделился в прошлом посте. Всё успеть невозможно, но нужно хотя бы двигаться вместе с индустрией.
В 2020 году я начал делать дайджесты для себя. Даже собрал базу данных с группировкой по темам, по которой мог найти пул статей на определённую тему. Золотые деньки. Тут я понял, что могу делать это регулярно и на постоянной основе. Просто так, ни для кого — а для себя.
В 2022 году я начал публиковать свои дайджесты от лица компании — но не срослось.
В 2023 году я начал публиковать дайджесты внутри компании, от лица компании — но снова не срослось.
В 2024 году я перешёл в другую команду и там продолжил постить дайджесты внутри компании для фронтендеров. Отклика было 0. Как вы поняли — не срослось.
К этому моменту я понял, что делать дайджесты от лица компании для меня не имеет смысла. Для компании это просто очередная метрика, столбик в дашборде. А я-то делаю для души. Компания позволяет делать это на большую аудиторию — которой у меня нет, а хотелось бы.
Ну что, пора начать публиковать для всех, делая это для себя. Учиться монетизировать и не расстраивать читателя.
Сегодня я выпускаю публичную бета-версию:
👉 https://shabalin.online/blog/digest/weekly-digest-1/
Посмотрите, пожалуйста, и дайте мне обратную связь. Я вам за неё буду искренне благодарен.
👍7🔥1
css-properties v4
👉 https://nikolai-shabalin.github.io/css-properties/
Вышла новая версия моего любименького пет-проекта css-properties. Как же он похорошел при мне.
Теперь есть тёмная тема. Появилось приветственное окно. Также есть чарт по добавлению CSS-фич по годам. Высота сайта уменьшилась втрое.
Всё прошло не без проблем, которые я буду решать позже. Размер проекта вырос в 2.5 раза. А самое страшное для этого проекта это то, что выросло количество DOM-нод. В проекте сейчас отрисовываются 2467 карточки. В каждой куча информации и ненужной вложенности, которая сильна аффектит рендеринг. Особенно пострадают мобльные девайсы. Но всё это новые вызовы, которые можно решить.
Если интересно приходите в issue проекта https://github.com/nikolai-shabalin/css-properties
👉 https://nikolai-shabalin.github.io/css-properties/
Вышла новая версия моего любименького пет-проекта css-properties. Как же он похорошел при мне.
Теперь есть тёмная тема. Появилось приветственное окно. Также есть чарт по добавлению CSS-фич по годам. Высота сайта уменьшилась втрое.
Всё прошло не без проблем, которые я буду решать позже. Размер проекта вырос в 2.5 раза. А самое страшное для этого проекта это то, что выросло количество DOM-нод. В проекте сейчас отрисовываются 2467 карточки. В каждой куча информации и ненужной вложенности, которая сильна аффектит рендеринг. Особенно пострадают мобльные девайсы. Но всё это новые вызовы, которые можно решить.
Если интересно приходите в issue проекта https://github.com/nikolai-shabalin/css-properties
👍8👏3⚡1
🗞 С понедельника запускаю рассылку с новостями из мира фронтенда
Выпуски начнут попадать в рассылки. Это важный момент для следующего повествования.
🎯 Если вы в поиске работы фронтенд-разработчиком — есть идея!
Добавлю ваш баннер с ссылкой на резюме прямо в выпуск. Смотрите на пример в посте. Это возможность рассказать о себе коллегам, рекрутерам и потенциальным работодателям.
📐 Что нужно:
- Баннер 960×300 пикселей (PNG или WebP)
- Одна ссылка на резюме (hh, habr.career, GitHub и так далее)
🎨 Креатив приветствуется: скругления, волны, прозрачность - всё можно. Выделяйтесь среди остальных.
Главное — избегайте кислотных цветов, делайте в спокойной палитре.
💸 Это бесплатно.
📩 Присылайте до воскресенья включительно, чтобы попасть в ближайший выпуск.
Давайте делать фронтенд-сообщество полезным друг для друга 🙌
Выпуски начнут попадать в рассылки. Это важный момент для следующего повествования.
🎯 Если вы в поиске работы фронтенд-разработчиком — есть идея!
Добавлю ваш баннер с ссылкой на резюме прямо в выпуск. Смотрите на пример в посте. Это возможность рассказать о себе коллегам, рекрутерам и потенциальным работодателям.
📐 Что нужно:
- Баннер 960×300 пикселей (PNG или WebP)
- Одна ссылка на резюме (hh, habr.career, GitHub и так далее)
🎨 Креатив приветствуется: скругления, волны, прозрачность - всё можно. Выделяйтесь среди остальных.
Главное — избегайте кислотных цветов, делайте в спокойной палитре.
💸 Это бесплатно.
📩 Присылайте до воскресенья включительно, чтобы попасть в ближайший выпуск.
Давайте делать фронтенд-сообщество полезным друг для друга 🙌
👍17🔥5
Привет, фронтендер! 🦊
Меня зовут Фронти, и я только начинаю свой путь в мире веб-разработки — вместе с тобой! ✨
Каждую неделю я буду делиться с тобой самым интересным из мира фронтенда: статьи, инструменты, подходы, которые действительно помогают расти. Будет и серьёзно, и весело — потому что учиться должно быть интересно.
Я обожаю нативные технологии браузера: Web APIs, семантику HTML, чистый CSS и всё, что можно сделать без лишней магии. Но и за новыми штуками вроде Wasm, React Server Components и AI-инструментами я слежу с большим интересом — ведь это отличная возможность научиться новому и прокачаться! 🚀
Так что подписывайся, читай, задавай вопросы и не бойся пробовать. Мы все тут, чтобы расти. Я тоже учусь каждый день — вместе с вами 🙌
Сегодня ждите от меня несколько новостей. До встречи в ленте!
— твой лис и проводник по фронтенду,
Фронти 🦊💻
Меня зовут Фронти, и я только начинаю свой путь в мире веб-разработки — вместе с тобой! ✨
Каждую неделю я буду делиться с тобой самым интересным из мира фронтенда: статьи, инструменты, подходы, которые действительно помогают расти. Будет и серьёзно, и весело — потому что учиться должно быть интересно.
Я обожаю нативные технологии браузера: Web APIs, семантику HTML, чистый CSS и всё, что можно сделать без лишней магии. Но и за новыми штуками вроде Wasm, React Server Components и AI-инструментами я слежу с большим интересом — ведь это отличная возможность научиться новому и прокачаться! 🚀
Так что подписывайся, читай, задавай вопросы и не бойся пробовать. Мы все тут, чтобы расти. Я тоже учусь каждый день — вместе с вами 🙌
Сегодня ждите от меня несколько новостей. До встречи в ленте!
— твой лис и проводник по фронтенду,
Фронти 🦊💻
🔥17🥰2❤1👍1🥴1
🦊 Фронти снова на связи!
Ура! Второй выпуск еженедельного фронтенд-дайджеста уже готов и ждёт тебя!
👉 https://shabalin.online/blog/digest/weekly-digest-2/
На этой неделе я подобрал самые вкусные статьи, свежие фичи и полезные тулзы, которые стоит заценить.
📬 Листай, читай, сохраняй и делись с командой. А если что-то особенно зацепило — пиши мне, мне интересно, что тебе нравится!
До встречи в следующем выпуске!
Твой лис и код-доброволец — Фронти 🦊💡
Ура! Второй выпуск еженедельного фронтенд-дайджеста уже готов и ждёт тебя!
👉 https://shabalin.online/blog/digest/weekly-digest-2/
На этой неделе я подобрал самые вкусные статьи, свежие фичи и полезные тулзы, которые стоит заценить.
📬 Листай, читай, сохраняй и делись с командой. А если что-то особенно зацепило — пиши мне, мне интересно, что тебе нравится!
До встречи в следующем выпуске!
Твой лис и код-доброволец — Фронти 🦊💡
2❤9👍4🔥1