14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#баг дня
Срочно в номер! В 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 #бородач
Лучшие практики React-разработки собраны на бесплатном вебинаре Optimizing React: Web & Beyond!
13 марта команда разработчиков Social Discovery Group на примере реальных кейсов расскажут про:
Как оптимизировать React-приложения и снизить нагрузку на устройства;
Как основные «фичи» React нашли себе применение в монтаже видео, 3D графике и написании ботов;
Как не сломать мемоизацию в React.
📅 Дата: 13 марта, 19:00 (GMT+4)
🔉 Язык: русский
Регистрируйтесь на вебинар 👉🏻 здесь 👈🏻
🔥 Годнота
Наткнулся на базу с 1400 вопросов с собеседований на Frontend разработчика. Фишка в том что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏
#фишка дня
Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.
Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (:hover), на фокус (:focus), на нажатие (:active).
Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.
И решение весьма неожиданное: :not(:active).
Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.
Так в этом и суть!
Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что :not(:active) – это самое состояние перезапускает.
В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e
И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY
#css #button #click #animation #бородач
#статья дня
Чтобы разбавить инструменты, коих сотни, давайте возьмём статью. Впрочем, она тоже о визуализации.
А конкретно, о визуализации вашей JavaScript-сборки (бандла), что поставляется в браузер: Lighthouse Treemap.
Знакомое название? Lighthouse — стандарт де-факто для измерения производительности сайтов и веб-приложений и анализа способов её улучшения.
А Treemap, собственно, это его часть. Показывает из чего ваша сборка состоит, что позволит проанализировать наиболее тяжёлые её части и сделать выводы о том, как поступить: разбить на части (чанки) или заменить.
Итак, статья: https://sia.codes/posts/lighthouse-treemap/
TL;DR
Открыли DevTools, запустили анализ проекта. После прохождения анализа появится кнопка View Treemap. Жамкаем и анализируем.
Заодно нелишним будет вспомнить Statoscope и Webpack Bundle Analyzer.
Пользуемся, наслаждаемся.
#devtools #chrome #бородач
#тип дня
Вышел TypeScript 5.4.
А это что значит? Что у нас теперь есть служебный тип NoInfer.
Коротко, зачем он нужен: с его указанием TS больше не будет пытаться угадать тип передаваемого аргумента. Например, если не указать тип массива ["red", "yellow", "green"], TS определит его как string[] и разрешит запихнуть туда значение "blue" или, что хуже, позволить вашему коду попытаться, например, это самое значение в нём найти:
function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
// ...
}
createStreetLight(["red", "yellow", "green"], "blue");
function createStreetLight<C extends string, D extends C>(colors: C[], defaultColor?: D) {
}
createStreetLight(["red", "yellow", "green"], "blue");
// ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
// ...
}
createStreetLight(["red", "yellow", "green"], "blue");
// ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
#такое дня
Playwright-код на иллюстрации — это ваш знак свыше чтобы начать писать тесты.
Нет тестов? Сделай первый прямо сейчас. Просто возьми и напиши один. Юнит, интеграционный, e2e — неважно.
Собственно, соус: небезызвестный в фронтенд-сообществе Кент Доддс (Kent C. Dodds) написал, на первый взгляд, глупый тест.
Но не всё так просто. И этот тест его спас.
E2E тест что значит? Значит, end-to-end, от точки до точки. Он не проверяет как работает конкретно ваше приложение.
Задача проверить, как работает система целиком.
И тут оказалось, что Кент просто неправильно сконфигурировал редиректы на сервере :) Не было бы теста — упал бы продакшен. И сиди думай потом.
В общем, котаны. Нет тестов — прямо сейчас сделайте свой первый. Хватит откладывать. Иди уже.
P. S. Это, кстати, напомнило мне уже с точки зрения ведения блога: не бывает постыдных записей или находок. Нет ничего стыдного признаться в том, что ты что-то прочитал в документации или сделал какую-то глупость.
#tests #e2e #playwright
#такое дня
Крайне показательное чтиво на ночь: исследование российского опенсорса.
https://research.nplus1.ru/
Довольно длинный обзор, но меня очень смутили три вещи:
1. Человек, который сделал скролл на этом сайте, ты что покушал в тот день?
2. 58,4% Считают, что опенсорс не имеет границ и не существует «российского опенсорса»
В смысле, 58,4? Почему так мало?
К счастью, изоляционистская риторика пока всё ещё однозначно осуждается.
3. Эти глаза, они там зачем?
Вообще, если продраться сквозь очень плохую реализацию плавного скролла, исследование весьма полезное.
А вы, котаны, контрибьютите в опенсорс? Как часто? На каком уровне?
#opensource #longread
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
transform-box: fill-box;
transform-origin: 50% 50%;
#библиотека дня
Окей, сегодня кое-что необычное. Мы уже в курсе с вами про существование чистых 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
#фишка дня
Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.
Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.
А вот фиг!
Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.
Что же делать?
Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}
Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.
Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
По поводу поддержки браузерами: Safari умеет только в бета-версии (Tech Preview), Chrome со 115 и Firefox с 63.
#flex #css #scroll
#статья дня
Очень часто в коде многих верстальщиков я наблюдаю примерно следующее:font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
Кажется, не все люди понимают, что же такое @font-face и с чего начать подключение шрифтов. Давайте разбираться.
Статья слишком длинная для канала, поэтому я её выложил на Телеграф: https://telegra.ph/CHto-takoe-font-face-07-16
#css #fonts #шрифты #бородач
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 16 марта.
Не получается найти классную работу на удаленке, сидишь каждый день и смотришь вакансии? @TopSelectionWeb3 поможет тебе вырасти как специалисту
💼 Приходи на еженедельный разбор профилей LinkedIn в прямом эфире, от победителя Binance Хакатон
💼 Как всегда поделимся секретами чтобы ваш профиль привлекал жирные офферы. И, конечно же, будем разбирать настоящие профили в прямом эфире.
📆 Дата: 10 марта (вс) в 14:00 по мск
А также совсем скоро 14 марта, @TopSelectionWeb3 раскроет секреты, как кратно увеличить свой доход, работая в Web3/блокчейн-проектах. Приходи и начинай зарабатывать в Web3 вместе с нашей дружной аудиторией
Если хотите разбор своего кейса, то кидайте свои LinkedIn в комментарии под последним постом
Реклама, ООО "Мира", ОГРН 1167746248010
Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».
⏰ Когда: уже 14 марта в 19:00 по мск.
Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».
Мы ищем молодого талантливого Support Frontend Developer'a на поддержку и развитие уже запущенных проектов в студию Chipsa.
Если ты:
Стремишься к постоянному росту;
Обожаешь создавать и развивать удивительные веб-приложения и сайты;
Внимателен к деталям;
Знаешь, что такое Barba.js, GSAP, и CSS-методология БЭМ;
Горишь желанием воплощать анимационные идеи;
Имеешь базовые знания TypeScript и опыт работы с React, Next.js, и API;
Хочешь работать над захватывающими проектами.
Хотим найти pre-junior / junior разработчика, ориентировочная вилка по з/п 45-65К, но рассмотрим все варианты.
Отправляй нам свое резюме на @chipsahr или на почту hr@chipsa.ru.
⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы?
Знакомая история? Тогда давай к нам! 🚀
PREAX — онлайн-стажировка для frontend-разработчиков.
Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам.
ЧТО ВНУТРИ?
🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами.
🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки.
🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше.
🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь.
🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий.
🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой.
В итоге получишь реальный опыт работы в команде!
Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО!
Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755
#codepen дня
Гори всё синим пламенем!
Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.
Впрочем Awwwards получили :)
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
