Умный 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

Язык программирования №1 в мире🏆

LmaoLang — революционный язык программирования, он использует эмоджи для отображения элементов HTML

Как же на нём кодить??

«Hello World» будет выглядеть как-то так, лол:

🤣
   🪬
      🫦 Hello World 💀🫦
   💀🪬
💀🤣

Ты спросишь: "Как они выбирают эмоджи для разметки?", вот по такому принципу:

📦 это div 👉 Коробка содержит вещи, это контейнер
👂 это li 👉 Если наберешь «list» на клаве эмодзи, это будет вторая запись, которая появится
🎲 это ul 👉 Противоположность упорядоченному является случайной
🤓 это article 👉 Статьи для ботаников

Заценить гитхаб можно тут 👇
https://github.com/QuantGeekDev/lmaolang/

Видос обзор 🎙
https://www.youtube.com/watch?v=LjOmYastyUI

Как тебе эволюция HTML, ахаха? 🤓🤓🤓

Новое в Chrome 121🔥

TLDR:
— Обновили СSS
— Обновление API Speculation Rules
— API Element Capture доступен в пробной версии Origin
(преобразует захват всей вкладки в захват определенного поддерева DOM)

По мне так топ апдейт именно для CSS, релизнули наконец-то scrollbar-color, scrollbar-width и добавили ::spelling-error вместе с ::grammar-error (правда срабатывает через раз)

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

Ревил доклада с крайнего HolyJS: CSS first 🔥

Имхо это был самый интересный доклад на конфе 😍

https://www.youtube.com/watch?v=G_GwPX6hM9M

Что нового в Deno 1.40? 🤨

Работяги из Deno недавно выкатили обновление. Добавили Temporal API, который фиксит некоторые недостатки и траблы связанные с Date, это позволит тебе легко парсить дату и время, а также манипулировать ими

TLDR:
— Temporal API
— Filename and dirname
— Decorators
— Упрощённый imports
— Web API: rejectionhandled event
— Better looking diagnostics

Более подробно👇
https://deno.com/blog/v1.40

Прикольный CSS трюк🔥

Этот трюк позволит тебе сделать крутую анимацию выделения текста при прокрутке

mark {
  animation: highlight;
  animation-timeline: view();
}

@​keyframes highlight { to { --lit: 1; }}

mark span {
  background-position: calc(var(--lit) * -110%) 0;   
  transition: background 1s;
}

Хитрость этого трюка в изменении значении между 0 и 1 элемента <mark>

mark {
  --lit: 0;
  animation: highlight steps(1) both;
  animation-timeline: view();
  animation-range: entry 100% cover 10%;
}

Фон применяем к дочернему элементу метки и ставим ему размер больше элемента

mark span {
  background: linear-gradient(
    120deg,  yellow 50%, transparent 50%)
    110% 0 / 220% 100% no-repeat;
  background-position: calc(var(--lit) * 110%) 0;
  transition: background-position 1s;
}

Если поддержка анимации с прокруткой отсутствует, используй JavaScript IntersectionObserver API.

CodePen👇
https://codepen.io/jh3y/pen/qBgRLxb

Motion Canvas — сам себе motion designer 🤔

Либа состоит из двух основных компонентов:

1. Библиотека TypeScript, использующая генераторы для программирования анимаций
2. Редактор, обеспечивающий предварительный просмотр анимации в реальном времени

Ты можешь писать анимацию кодом в комбинации с превью и её редактированием через интерфейс

https://motioncanvas.io/

CSS трюк: изменение масштаба и затемнение при скролле 🔥

Нашёл для тебя CSS трюк, который позволит сделать крутую анимацию — уменьшение масштаба при прокрутке

В этом маленьком примере мы будем использовать элемент <header>, который будет уменьшаться при скролле вниз (такой эффект есть на сайте Apple Vision Pro)

header {
  transform-origin: 50% 0%;
  animation: scale-down both ease-in;
  animation-timeline: view();
  animation-range: exit;
  view-timeline: --header;
}

@​keyframes scale-down {
  to { scale: 0.8 0.8; }
}

Вот и всё! Давай добавим ещё одну небольшую анимацию, затемнение при прокрутке

header { view-timeline: --header; }

header > section::before {
  background: hsl(0 0% 0% / 0.75);
  opacity: 1;
  animation: fade both linear;
  animation-timeline: --header;
  animation-range: exit-crossing 0% exit 0%;
}

@​keyframes fade {
  to { opacity: 0; }
}

CodePen👇
https://codepen.io/jh3y/pen/jOJZYRm

Шансы на зарубежный оффер 🌎

Я тут подружился с компанией AgileFluent, они делают максимально всё, чтобы помочь тебе построить международную карьеру

Хотят вот поделиться, что делают бесплатный вебинарчик. Там умный HR-эксперт расскажет как оценить и повысить твои шансы получить оффер за рубежом, и ответит на частые вопросы по этой теме

Он намечается завтра во вторник в 19:00 (UTC+3), предварительно надо зарегаться туточки ❤️

Если хочешь сначала узнать AgileFluent получше, то можешь чекнуть их YouTube канал
https://www.youtube.com/@AgileFluent

Когда «as never» — единственное, что работает 🫡

Перевёл статью, рассматривающую популярный кейс с типом never, скорее всего ты с этим сталкивался 👨‍💻

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

Старик ещё жив: вышел jQuery 4.0.0 beta 😨

Ты всё верно прочитал, команда JQuery выкатила в бету мажорный релиз свой библиотеки, но что же там такого мажорного то?

Вся мажорность заключается в том, что они забросили поддержку IE<11 версии и удалили несколько методов/ивентов, а также мигрировали на ES модули и множество других исправлений и фиксов

Новых фич, к сожалению, не добавили 🤪

https://blog.jquery.com/2024/02/

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

Я вижу как он старается вести канал и контент прям хорош, но подписоты мало, го поддержим его 💪💪

https://t.iss.one/edinorog_blog/37

UPD:
Вы ж мои хейтеры 😄😄