14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Как философ заработал состояние в $750 млн на знакомствах?
Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.
Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.
В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.
👉Подписывайтесь👈
и участвуйте в дискуссиях!
Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.
В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование
На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.
Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно 🥸
В DevTools Chrome 123 встроили какую-то пасхалку. Мол, искать под эмодзи 💫 (комета).
Кто искал? Кто нашёл?
Upd. окей, в комментариях рассказали, как это сделать. Скоро выкачу и сюда :)
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота": .box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick
Вы откликаетесь на миллион вакансий в день, выполняете тестовые задания, ходите на собеседования, но как итог не имеете ни одного оффера. Звучит знакомо? 🥺
Эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.
С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!
📆 Расписание феста:
25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме
Переходите по ссылке, чтобы зарегистрироваться на фест!
Смартфон за ваш ответ!
Исследовательская компания OMI проводит опрос среди IT-специалистов.
Пройдите по ссылке, ответьте на несколько вопросов и получите шанс выиграть последнюю модель передового смартфона!
Примите участие в опросе прямо сейчас — это займет минимум времени.
#такое дня
Предлагаю выразить своё отношение к происходящему в комментариях.
Объяснение через час.
☁️ CryptoCloud - ваш надежный инструмент для интеграции криптоплатежей.
Откройте возможность принимать оплату в криптовалюте со всего мира прямо в вашем приложении или сервисе.
➗ С комиссиями всего от 0.4%, CryptoCloud позволяет минимизировать затраты и максимизировать прибыль вашего проекта.
✅ Преимущества криптопроцессинга CryptoCloud:
💎 Легкая интеграцию криптоплатежей в любую систему или приложение.
💎 Автоматизация платежей;
💎 Функциональный кабинет.
💎 Вывод в течение 30 минут
💎 Высокий уровень безопасности
✅ Поддерживаемые валюты платежной системы CryptoCloud:
💰 Bitcoin
🔹Ethereum
🪙 Litecoin
💲 Стейблкоины (USDT, USDC, TUSD) в различных сетях, обеспечивая гибкость и выбор для ваших пользователей.
CryptoCloud предлагает обширную документацию и поддержку для обеспечения гладкой интеграции. Наша команда технической поддержки всегда на связи, чтобы помочь вам с любыми вопросами или проблемами.
✅ Сделайте свои проекты еще более доступными для пользователей по всему миру, используя передовые решения CryptoCloud для криптоплатежей.
➡️ Присоединяйтесь к CryptoCloud, чтобы сделать свой бизнес лучше!
#баг дня
Срочно в номер! В Chrome 123 обнаружен баг, из-за коротого блокируется открытие DevTools.
В итоге, открывать их приходится в инкогнито или создав чистый профиль.
Ссылка на баг: https://issues.chromium.org/issues/330112831
Апдейт скоро прилетит. Пока же рекомендация не обновляться в ближайшие пару дней.
#такое дня
Я тут умудрился пропустить одну довольно интересную новость, несущую серьёзные выводы для веб-разработчиков.
В декабре 2023 года NASA перешла от использования CMS Drupal и React.js SPA на...
я выговорить это не могу, не то, что написать
...на Wordpress и классическую схему доставки контента aka backend generated.
Давате углубимся в историю.
В 2014 году NASA объявило о совершенно новом сайте, построенном по так называемой headless технологии, безголовой. Что это значит?
Что не подумали.
Берётся фреймворк или CMS, неважно, отрезаем часть, генерирующую HTML клиенту, вместо неё — JSON API. Фронтенд пишется на любом доступном фреймворке. В данном случае, React.
Эффект был потрясающий: хорошее кеширование, шикарная работа под большой нагрузкой, простота обновлений. Кейс: https://www.drupal.org/case-study/nasagov
Шли годы, агентство NASA всё больше работало на широкую аудиторию (конкуренты заставили), нанимало редакторов, журналистов и учёных... Более 400 человек!
И неожиданно оказалось, что создатели контента-то привыкли к Wordpress, когда-то такому простому, а нынче развившему редактор Gutenberg до состояния, утирающего нос не только Drupal, но и многим коммерческим решениям.
Кроме шуток, сообщество вокруг Wordpress огромное, а создатели, развивая проект, не забывали о корнях.
Drupal довести до такого состояния весьма сложно, личный опыт.
При этом разработчики Drupal не сильно заботились о простоте обновления. И когда Drupal 7 достиг EOL, было принято решение.
Собственно, вот и кейс, и ещё, включающие в себя интервью создателей и людей из NASA.
И ещё: контент доставляется классическим способом, HTML генерируется самим Wordpress, а не на клиенте.
Подытожим.
Насколько бы правильным вам не казалось некое решение, нельзя забывать, ради кого оно принимается.
То, что сделали в NASA сродни пощёчине всем модным веяниям.
Придётся признать, что даже современные вещи вроде Next.js, Contentful и т. д. не всегда являются экономически обоснованными и не учитывают интересы всех сторон.
Мысли?
⚛️ React 19 — useOptimisticuseOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.
❓Как используется
- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и тоже состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состояние.
ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:
- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.
🤷♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:
- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?
Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть, что добавить — пишите в комментах.
Ещё по теме:
- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут
#react #frontend #new
Готовы раскрыть свой потенциал в веб-разработке?
Регистрируйся и приходи на бесплатный интенсив «ЛЕНДИНГ ЗАКАЗ ПИЦЦЫ ГО-ГО» от онлайн-школы METHED.
На интенсиве:
— Напишем на HTML и CSS красивый лендинг с современным дизайном;
— Реализуем адаптив под все устройства от смартфона до мониторов ПК;
— C нуля пошагово создадим лендинг, начиная с вёрстки на основе дизайн-макета в Figma/Pixso с Ajax технологией обновления страницы;
— Напишем фильтр и форму для заказа пиццы.
Участвовать в интенсиве бесплатно 👉 https://tglink.io/2923b4ac9487
#фишка дня
Как получить последний элемент массива?
Можно посчитать длину массива минус один, чтобы получить нужный индекс.
Можно сделать array.slice(-1) и взять нулевой элемент получившегося массива.
А можно воспользоваться сравнительно новым методом Array.prototype.at! Ну, уже два года как в продакшене. И полифилл давно есть.
Весьма удобно, я считаю.
#javascript #array
🇺🇲Реально ли специалисту в любой области получить greencard США без предложения о работе, без высшего образования, и без знания английского языка? Ответ: да! Рассказываем, как это сделать.
Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!
Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.
Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: /channel/+pp3Zsoru1sVhM2Uy
Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
#инструмент дня
Идеи атомарного подхода к CSS захватывают умы всё большего числа людей: взлёт Tailwind CSS это подтверждает. Но если Tailwind берёт на себя всю работу, что может быть не всегда удобно и семантично, но уж точно всегда многословно, то сегодняшняя библиотека занимается лишь комбинированием анимаций.
Встречайте: AnimXYZ,
https://animxyz.com/.
Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.
Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.
Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.
#css #transitions #animation #бородач
#статья дня
Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: /channel/htmlshit/1757
Лучшее, для чего их обычно применяют, это убирание белого фона под логотипами. Не видели? Потом покажу, сейчас о другом.
Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?
Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.
Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/
Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек
#css #mix #blend #бородач
#фишка дня
Итак, в комментариях к предыдущему посту уже выяснили, что пасхалка — это игра Breakout. Или Арканоид по-нашему.
Появиться она должна 1 апреля. По крайней мере, это следует из кода (в комментариях).
Но за этой пасхалкой скрыта ещё одна: собственно, активация игры до 1 апреля.
1. Открываем профайлер
2. Записываем секунд 5-7
3. Вводим команду fixme (чтобы было интереснее, оставлю вам самим разбираться, как)
4. ...
5. Играем!
Чем хуже производительность сайта — тем лучше игра :)
P. S. Мне не удалось активировать игру на сайтах от Google 🫠 Но по профайлеру, у них всё очень плохо.
С 2 по 27 апреля программа Garage Digital запускает мастерскую по креативному программированию. Она предназначена как для начинающих программистов, так и для тех, кто впервые будет работать с кодом.
Авторы и ведущие мастерской Степан Кухарский и Алина Черейская — основатели SA lab — расскажут о том, как при помощи кода создавать автоматически генерируемые и разнообразные элементы цифровых миров. Результатом станет проект, разработанный участниками самостоятельно.
Подробнее о программе — на сайте. Купить абонемент можно по ссылке.
Токен:
Реклама. Частное учреждение культуры «Музей современного искусства «Гараж». Erid: 2VtzqvtnFiD
#фишка дня
Показать цвет белее белого? Легко!
На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...
Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.
А ещё она очень бесит в тиктоке и инстаграме.
Суть её в том, что можно увеличивать яркость отдельных участков без увеличения яркости всего изображения. Но для этого, конечно, ваш дисплей должен поддерживать такую возможность.
Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode
Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.
Вполне можно применять в билетных сервисах...
Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite
Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...
#hdr #video #ios #macos #бородач
#ссылка дня
Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)
Встречайте: https://github.com/typescript-cheatsheets/react
Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».
Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/
Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.
В общем, всем типов, котаны.
#typescript #react #бородач
#такое дня
Не думаю, что автор оригинального твита спрашивал серьезно, но всё же.
1. Конструктор RegExp принимает только строки, а {}.toString() это '[object Object]'
2. Квадратные скобки [] устанавливают соответствие любому символу внутри них
3. Ну и mom приводит к совпадению по o, а dad — нет 🫠
#фишка дня
Заканчивайте использовать JSON.parse(JSON.stringify(obj)) для дублирования (aka глубокого копирования aka deep copy) объектов в JavaScript.
Такой метод игнорирует даты, неопределённые значения и не работает с циклическими зависимостями.
Уже достаточно давно имеется structuredClone.
Наличествует во всех современных браузерах, есть полифилл.
P. S. вот тока не надо мне про лодаш тут плиз) все же использовали JSON-решение из-за скорости ⚡️
#js #clone #бородач
#фишка дня
Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().
Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.
Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.
Так вот, к чему это я. С выходом Firefox 115 в июле 2023 года мы получили иммутабельные методы работы с массивами во всех браузерах:.toReversed()
.toSorted()
.toSpliced()
.with()
Если что, with — это про замену элементов по индексам.
Есть и полифиллы на core-js, так что без работы никто не останется.
И это прекрасно.
#js #array #sort #бородач
#библиотека дня
Окей, сегодня кое-что необычное. Мы уже в курсе с вами про существование чистых UI-китов без id, классов и всего того, что замутняет семантику. Стили навешиваются на абсолютно девственный HTML, никаких кастомных атрибутов.
А как вам подход наоборот? Описываешь стиль элемента в CSS, а потом используешь его в React без описывания кучи пропсов и HTML вообще?
Звучит как бред? Смотрим иллюстрацию! И — вжух 🪄 — всё становится на свои места и бредом уже не кажется.
Называется это чудо MistCSS и решает весьма банальную проблему: совмещение UI-only пропсов реакта со стилями. Ну раздражает же писать два раза "size, space, variant" сначала в JSX, а потом в CSS... ещё о типах заботиться.
Ссылка: https://typicode.github.io/mistcss/
В общем, ребята там восприняли "один источник правды" абсолютно буквально.
Но, мне кажется, это имеет право на существование.
Материалы из этого канала дают на платных курсах
Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое
👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!
Я сегодня пытался на iPod Classic заменить тридцатипиновый разъём на type c, но контактные площадки оказались сгнившими и попытки их восстановить провалились.
Но это не проблема. Дорожки к площадкам же где-то начинаются, верно? :) И я их уже идентифицировал. Жду провода и паяльную маску.
А как прошло ваше воскресенье?
#codepen дня
Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.
Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.
Следите за руками:
1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym
Простой концепт, а сколько вариантов и идей.
#css #houdini #gradient #clip #бородач
#заметка дня
Почему-то многие люди путают решение проблемы с её описанием. И это не то чтобы мешает в работе, но замедляет некоторые процессы.
TL;DR
Говорите о том, что вас беспокоит, а не о том, что, по вашему мнению, стоило бы сделать.
Теперь для менее нетерпеливых.
Есть у нас в продукте процедура подключения к источнику данных. Там, где ваш типичный пользователь логинится один раз, в наших задачах считается нормальным логиниться раз десять в день. В разные источники данных, под разными именами, с разными правами доступа... ну не суть.
И приходит ко мне тестировщик с фразой: "А почему нет уведомления о подключении?"
На что получает логичный ответ: потому что интерфейс меняет своё состояние в момент успешного подключения. Positive thinking, вот это вот всё.
Он упирается, что хочет видеть сообщение об успехе. Я не понимаю, зачем. Объясняю ему логику. В итоге, садимся и смотрим.
И выясняется, что у нас есть отдельынй экран только со списком подключений (такой же экран есть и в редакторе среди прочих) и на нём, действительно, ничего не происходит. А хотелось бы, чтобы вновь созданное подключение подсвечивалось и скроллилось наверх.
Что, естественно, гораздо лучший способ уведомления, чем попап со словами "Подключение создано успешно".
И именно этот вариант и будет реализован. Но, инстиктивно, моя первая реакция была отторжением, потому что ко мне пришли с решением проблемы, о существовании которой я вообще не подозревал.
А стоило просто прийти с проблемой.
#библиотека дня
Всем же знаком UI-kit, а нынче уже целая дизайн-система, MUI?
Раньше назывался MaterialUI, несложно догадаться, почему так назывался и почему в итоге переименовались.
Эти ребята двигали идею CSS-in-JS чуть ли не с самого появления концепта. Сначала они использовали JSS, потом дикую смесь из JSS и Emotion, что приводило к, мягко говоря, мучениям.
По всей видимости, они сами наелись и решили перейти к созданию своего CSS-in-JS фреймворка, основанного на проекте WyW-in-JS
(на котором основан Linaria): Pigment CSS.
Как и многие современные альтернативы, стили Пигмента будут собираться в статичный CSS (с CSS-переменными), а API уже стандартно напоминает Styled Components:
const Button = styled('button')({
border: 'none',
padding: '0.75rem',
// ...other base styles
variants: [
{
props: (props) => props.variant !== 'contained',
style: { backgroundColor: 'transparent' },
},
],
});
#фишка дня
Селектор :empty в CSS реализован максимально тупо: он не считает пустым элемент, внутри которого есть пробелы или прочие незначащие символы.
Да-да, это официально признанный косяк спецификации /channel/htmlshit/2243
И в новых версиях он уже исправлен, вот только в браузерах-то до сих пор нет.
К счастью, есть :has. И вот что предлагает Ана Тюдор: использовать :has для поиска элементов без потомков! То бишь, де-факто, пустых! :not(:has(*))
Это просто гениально!
#css #trick #has
