Подведение итогов 2023 года по CSS от Google Chrome 🔥

Хайлатов слишком много, что аж не смог вынести в TLDR

Не поленись и прочти под бутылочку пятничного пивка 🍻

https://developer.chrome.com/blog/css-wrapped-2023?hl=ru

Advent календарь TypeScript'ера 👨‍💻

Заходи и решай задачку каждый день, чтобы помочь Санта-Клаусу успеть все свои делишки к Рождеству

https://typehero.dev/aot-2023

P.S. наткнулся на этот сайт спустя 10 дней, поэтому уже доступно 10 задачек

Команда Oxc создаёт убийц 🔒

Ребята пишут JS тулзы на Rust'е, засчёт этого получают огромный буст к производительности и готовят его модно-молодёжно

Что у них уже есть сейчас (пока всё равно сыровато, но потенциал большой)?
— OxLinter — в 50~100 раз быстрее чем ESlint
— OxResolver — в 28 раз быстрее чем enhanced-resolve
— OxParcer — в 2 раза быстрее чем SWC

Отзыв Evan You (создатель Vue.js) об OxLinter:

Запустил oxlint на кодовой базе Vue 3, ~200 правил + ~590 файлов завершены за 50 мс 🤯 (30 мс повторного запуска).

Производительность просто сумасшедшая

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

Функция TypeScript 5.3, о которой вам не рассказали 👨‍💻

Давно не переводил статьи, эта показалась интересной 😜
https://habr.com/ru/articles/781230/

Полный анонс TypeScript 5.3

GitBrain — AI-powered Git Client для MacOS ⚡️

На вид удобный и бесплатный интерфейс для Git'а с AI генерацией и разделением коммитов

https://gitbrain.dev/

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

TWC — создавай переиспользуемые компоненты React + Tailwind в одну строку ⚡️

Я сам никогда не использовал Tailwind в своих проектах, но комьюнити TW визжит от восторга в Твиттере, поэтому я не мог пропустить эту библиотеку, и не поделиться ею с тобой ❤️

Преврати свой компонент из этого:

import * as React from "react";
import clsx from "clsx";
 
const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx(
      "rounded-lg border bg-slate-100 text-white shadow-sm",
      className,
    )}
    {...props}
  />
));

В это:

import { twc } from "react-twc";
 
const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

Официальный сайт
GitHub проекта

Я не мог оставить тебя без подарка на Новый Год и Рождество, обязательно участвуй в розыгрыше ❤️

Типы событий в React и TypeScript 👨‍💻

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

FrontendConf нужна твоя помощь 🫶

Ребята собирают новую программу FrontendConf2024 и просят пройти опрос, займет не более пяти минут, проголосуй за темы, которые интересны тебе и твоей команде

А в конце опроса будет архив из 370 докладов с конференции 🤑

https://docs.google.com/forms/d/1AlPYMgHpFWFkT06G5fwA_GhmtZ2nQ0hcVmEXihPvE_o/viewform

И не забудь поделиться со своими коллегами-друзьями ❤️

Всех с прошедшим Новым Годом и прошедши-наступающим Рождеством! 🚗

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

Я закончил доедать прошлогодний оливье и потихоньку прихожу в себя, в ближайшее время начну писать контент, stay tuned

Будет очень приятно, если поделишься своими пожеланиями на этот год каналу и оставишь свой фидбэк (положительный или отрицательный), это будет для меня лучшим подарком на Новый Год от тебя! 👇

Индивидуальное менторство от Frontendiya 🌟

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

— Подготовимся к алгоритмическим собеседованиям в Яндекс, Тинькофф, ВК и другие биг техи.
— Научимся работать в команде, ты будешь понимать весь процесс от поставки задачи бизнесом, до доведения ее в прод
— Выйдем на сильный уровень работы с гитом (гит флоу, черепик, ребейз, сквош. Эти слова перестанут вас пугать)
— Качественно, а главное с пониманием научимся разворачивать проект (линтинги, ci/cd и тд)
— Получишь опыт командной разработки, научишься оценивать задачи и реализовывать их в рамках этой оценки (пишем проект связанный с автоматизацией работы компьютерных клубов на таком стеке: react, typescript, zustand, i18next, mantine). Если знания слабоваты для командного проекта, в течении 1-2 месяцев подтягиваем слабые стороны.

Важно!
— Никаких тудулиство, интернет магазинов и прочего💩
— Это не курсы, где вы все молодцы. Готовьтесь получать по рукам😂

Наши менторы:
Антон — Lead frontend 5+ лет опыта Ссылка на LinkedIn

Саша — middle+ frontend в Тинькоф, 4+ лет опыта. Ссылка на LinkedIn

Валера — 2 года опыта. Наш лучший студент, которого мы взяли на работу. Ссылка на LinkedIn

После менторства будем залетать на плотного мидла с зп 100-150к+ (прожарим резюме, подготовимся ко всем стадиям интервью), но ты можешь дальше спамить отклики и получать отказы🫡

Кто готов, пиши - @frontendiya_manager будем назначать собес.

Промокод POFLOTSKI24 даст скидку 10%

Умный TypeScript: (typeof array)[number] 👨‍💻

Топовый приём для извлечения типа членов массива, пользуйся ❤️

Всех с первым рабочим днём и прекрасной коротенькой недели, начнём этот год продуктивно (и обязательно продолжим) 🚀🚀🚀

Создаём гексагоны с помощью CSS 👨‍💻

aspect-ratio: 1 / cos(30deg);
clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);

CodePen👇
https://codepen.io/t_afif/full/KKEMjxV

В TypeScript 5.4 появится новый utility type: NoInfer 🔥

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

В примерчике NoInfer используется, чтобы чекнуть, что "initial" будет одним из переданных состояний

Пулл реквест уже смёржен в main ветку 👇
https://github.com/microsoft/TypeScript/pull/56794

Что нового в WebGPU? 🤔

Ребята из команды Chrome поделились новым апдейтом WebGPU

Вкратце:
— Поддержка WebGPU на Android 12 и выше
— DXC вместо FXC для компиляции шейдеров
— Таймстамп запросы в вычислениях и рендеринге
— Необязательное указывание поля entryPoint в модуле шейдера
— Поддержка display-p3 как цветового пространства GPUExternalTexture
— Получение информации о размере кучи

Подробнее чекай тут👇
https://developer.chrome.com/blog/new-in-webgpu-121?hl=ru

Вышел апдейт Next.js 14.1? 🤔

TLDR:
— Улучшения для Self-Hosting проектов: расширена документация и добавлен кастомный обработчик кэша
— Повышен перфоманс надёжности, скорости и памяти турбопака
— Улучшения опыта разработчиков: изменён вывод ошибок, добавлена поддержка pushState и replaceState
— Поддержка <picture> для next/image
— Исправление ошибок

За подробностями залетай сюда👇
https://nextjs.org/blog/next-14-1