ECMAScript 2024 №2: string.isWellFormed() 👨‍💻

Специфичный и одновременно простой пропоусал вероятно появится в этом году в стандарте

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

В каком случае она может неверно отобразиться?

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

https://github.com/tc39/proposal-is-usv-string

SvelteJS стал самым популярным фреймворком этого года 🤯

Он набрал 254к и 251 млн. скачиваний и звёздочек, из которых более 50% за 2024 год

Для сравнения у React 20млн скачиваний и 221к звёздочек, а у Vue 4млн скачиваний и 44к звёдочек

ScreenMate AI: автоматизированное создание и прохождение UI тест-кейсов для твоих веб-приложений 👨‍💻

Представь, что ты показываешь нейросети успешный путь для конкретного тест-кейса, а она пытается его сломать и выдаёт тебе скоуп непрошедших тестов 🤯

Сервис ещё в процессе разработки, поэтому на данный момент есть только демо-видео и веб-сайт

Чтобы сделать продукт более нужным, команда ScreenMate обращается к опытным фронтендерам, их потенциальным пользователям, для проведения небольшого zoom интервью на 35 минут, а в подарок дают подарочный сертификат на 2000 рублей на Ozon 🎁

Чтобы записаться на интервью, пиши @fitilbam ❤️

Релизнулся ESLint 9.0.0 👨‍💻

Из интересного там появилось новое правило no-useless-assignment предназначенное для выявления ситуаций, когда ты присвоил переменной значение, но оно никогда не используется

let id = 1234;      // 1234 никогда не используется
id = calculateId();

https://eslint.org/blog/2024/04/eslint-v9.0.0-released/

WebAssembly JavaScript Promise Integration (JSPI) можно попробовать в Chrome 🥸

JavaScript Promise Integration (JSPI) - это API, который позволяет синхронному последовательному коду, скомпилированному в WebAssembly, получать доступ к асинхронным веб-интерфейсам. Многие веб-интерфейсы построены на основе обещаний JavaScript: вместо немедленного выполнения запрошенной операции они возвращают обещание сделать это. Когда действие наконец-то выполнено, программа запуска задач браузера вызывает все обратные вызовы с обещанием. JSPI подключается к этой архитектуре, чтобы позволить приложению WebAssembly приостанавливаться при возвращении обещания и возобновлять работу, когда обещание будет выполнено.

Чтобы лучше понять, как использовать эту функцию, рассмотрим следующий отрывок программы на языке C, которая вычисляет последовательность Фибоначчи, передавая сложение функции JavaScript.

// Это код на C.
long promiseFib(long x) {
  if (x == 0)
    return 0;
  if (x == 1)
    return 1;
  // Это где C код вызывает асинхронный JavaScript.
  return promiseAdd(promiseFib(x - 1), promiseFib(x - 2));
}

// Дополнение, искусственно завернутое в Обещание.
EM_ASYNC_JS(long, promiseAdd, (long x, long y), {
  // Это асинхронный JavaScript код.
  return Promise.resolve(x+y);
});

Определить поддержку JSPI в JavaScript можно следующим образом:

if ('Suspender' in WebAssembly) {
  // JSPI поддерживается.
}

Пропоузал 👇
https://github.com/WebAssembly/js-promise-integration/blob/main/proposals/js-promise-integration/Overview.md

Хочешь поработать со мной? 🫶

Мы сейчас ищем крепкого и заряженного мидла или мудрого синьора в команду

О компании
Moni — компания и сообщество с разными аналитическими продуктами: Moni Discover – платформа для социальный аналитики проектов, Moni Portfolio – платформа для отслеживания web3 активов, крипто-медиа Moni Talks.

Чем ты будешь заниматься?
— Разработка новых фич для Moni Discover и хром расширения для интеграции с твиттером
— Делать промо сайтики
— Также есть планы по созданию новых проектов, в которых ты сможешь поучаствовать

Наш стэк:
- Next.js, TypeScript, MobX, SCSS

Что мы ожидаем?
1. Опыт более 3 лет во фронтенде
2. Опыт создания SPA приложений на React
3. Умение хорошо верстать
4. Виртузное знание JavaScript, TypeScript и понимание SSR
5. Большой кругозор по фронтенд технологиям

Будет плюсом:
— Опыт создания сложных графиков и аналитических инструментов
— Опыт создания Chrome расширения

Что мы предлагаем?
— Работу в амбициозной и небольшой команде.
— Мы не поддерживаем старые версии браузеров и используем самые новые технологии современных браузеров
— Участие в развитии нового масштабного продукта.
— Заработная плата $2000+

Кидай свой CV мне (@qmzik), пообщаемся ❤️

Канал для подготовки к собеседованию по фронтенду 🔥

Подчерпнул оттуда пару вопросов для предстоящего интервью, там даже просчитана вероятность с которой зададут вопрос 🧐

Яндекс выложили в опенсорс Testplane 🔥

Testplane предназначен для тестирования пользовательских сценариев во фронтенде, скриншотного тестирования, выполнения тестирования твоих React-компонентов и может запускать клиентские unit-тесты в контексте браузера

https://github.com/gemini-testing/testplane

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

— Новый метод setHTMLUnsafe у Element, это ближайший родственник innerHTML. Отличие в том, что innerHTML не создаст shadow DOM, если ты попробуешь создать веб компонент, а setHTMLUnsafe поймёт тебя правильно

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

— Событие pageswap для View Transition API, оно сработает, когда произойдёт замена вьюшек

— Скролл контейнеры стали доступны для фокусировки, отключить это можно через tabindex="-1"

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

Путь к потрясающему CSS Easing с помощью новой функции linear() ⚡️

У нас тут снова глобальные новиночки в CSS подъезжают 🔥

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

Что нового в Chrome 125? 🧑‍🎓

— Наконец-то завезли CSS Anchor Positioning 🔥
— Добавили Compute Pressure API с помощью которого можно узнать загрузку ЦП
— Storage Access API создано как альтернатива для кросс-доменных куков

Релиз добавил множество крутых API, обязательно зацени его 😉
https://developer.chrome.com/blog/new-in-chrome-125?hl=ru

Что я спрашивал на интервью? 👨‍💻

В общем, поиск коллеги окончен и завершился успехом, и теперь я готов поделиться как происходил отбор

Принимали решение на основе двух интервью:
1. А-ля HR интервью и проверка софт скиллов
2. Техническое интервью

Техническое интервью состояло из двух частей, на каждую примерно по 45 минут (но могла затянуться по часу на каждый этап)
1 часть — теоретическая, тут я хотел узнать основы и кругозор человека, спрашивал много, но как только понимал, что чел шарит, то сразу могу пойти глубже или к следующей теме

Вот список примерных тем на интервью:

— ООП
— SOLID
— ФП
— Паттерны проектирования
— http, REST-api, WebSocket
— Архитектура
— Вёрстка: Специфичность селекторов, Семантика
— JavaScript: Event Loop, контекст и замыкания
— TypeScript: зачем таймскрипт, дженерики

Далее был лайвкодинг:

Дан файл data.json, который содержит пользователей и их детей. Нужно отобразить их в двух видах: иерархия, список всех пользователей подряд (пример реализации на видосе)

Вот тут сендбокс для тех, кто хочет начать с нуля https://codesandbox.io/p/sandbox/moni-test-pk84qn

Вот тут для ленивых с итоговым результатом https://codesandbox.io/p/sandbox/moni-test-result-xps4hc

P.S. я не душнила если спрашиваю ООП

Закончилась годовая подписка Github Co-pilot, хочу попробовать альтернативу какую-нибудь, кто что посоветует?

Пока что поставил фри версию Tabnine, тыкаюсь 👨‍💻

Расширяем семантические знания: <dl>, <dt>, <dd> 🧑‍🎓

dl — расшифровывается как Description List, что на русском будет звучать а-ля список описаний, <dt> и <dd> могут использоваться только внутри него. <dt> (Description Term) — по сути содержит в себе название/заголовок/термин, а <dd> (Description Details) содержит пояснение к <dt> контенту

По семантике эти теги отлично подходят для создания меню ресторана, толкового словаря или, в целом, любого списка у которого элементы состоят из какого-то термина и его описания 👨‍💻

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

CSS функция pow() 👨‍💻

Недавно все модные браузеры стали поддерживать функцию pow в CSS, она по факту работает так же как Math.pow в JS

Ты, наверное, спросишь: "Нафига это мне?", а я отвечу: "Включай фантазию!"

Я нашёл пример для адаптива шрифтов
https://codepen.io/jh3y/pen/KKLNLxW

:where(dd) {
--min: calc(17 * pow(1.2, var(--lvl, 0)));
font-size: clamp(var(--min), var(--fluid), var(--max)); ✨
}
dd:nth-of-type(2) { --lvl: 2; }

Ссылочка на MDN 🫡
https://developer.mozilla.org/en-US/docs/Web/CSS/pow

Сегодня очень важный день для канала — ему исполнилось 3 года 🐶

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

Извини меня, мой друг, за редкие посты, я скоро вернусь в строй, обещаю!

А пока лови полезную инфу, которую ты, возможно, упустил ❤️

1. Релизнулся Chrome 126 (там нет чего-то вау, но для кругозора прочитай)
2. В превью Хрома появился HTML-тег <permission>
3. Firefox добавил поддержку field-sizing: content (все ждём сафарииии)

Бесплатный офлайн/онлайн Фронтенд митап 👨‍💻

Когда: 11 июля, 19:00 (UTC+3)
Где: Москва, проспект мира, 119 или в онлайне

Программа:
18:00 — регистрация на площадке и всевозможные конкурсы и нетворкинг
19:00 — приветственное слово
19:05 — «Frontend with no limits», Виктор Щеглов
19:30 — «Базовые принципы самопомощи, или почему опытному разработчику нужно стать наставником», Тимур Гафиулин
19:50 — перерыв и конкурсы в онлайне
20:15 — «Выбор технологического стека: как не угодить в ловушку модных трендов и не устареть», Алексей Козлов
20:40 — TBA, Зар Захаров
21:05 — подведение итогов конкурсов
21:20 — розыгрыш призов
21:40 — афтепати

Регистрация туточки 🧑‍🎓
https://moscowjs.timepad.ru/event/2940895/