14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#ссылка дня
Чем отличается alt от title? А border от outline? А *.d.ts от *.ts? А for..in от for..of? А display: none от visibility: hidden? А slice от splice?
Как же я задолбался форматирование применять.
Да весь фронтенд это нагромождение похожих по написанию или даже по сути вещей. Как разобраться?
И тут нам поможет проект https://thisthat.dev/. Он буквально проходится по таким скользким определениям или сущностям и разбирает каждый из них.
Проект открытый, предлагайте ваши == и ===.
#javascript #html #css #this #бородач
Самое тупое во Фронтенде – это искать макеты
В сети полно актуальных источников. И один из них – канал Макеты для верстки.
Если хотите иметь крутое портфолио, обязательно подпишитесь
Увлекаешься разработкой? А может быть ты девопс или тестировщик?
Значит знаешь про командную строку. Но насколько гибко ты её используешь?
Действующий девопс из @bashdays рассказывает простым языком, про все тонкости и скрытые возможности работы в консоли.
Присоединяйся и забудь про скучную документацию. С полученными знаниями ты выйдешь на новый уровень, упростишь ежедневный workflow и повысишь свой ценник на рынке.
Помимо трюков в консоли, ты найдешь множество тем, которые тебе пригодятся: linux, gitlab, k8s, monitoring, docker, ansible, ci/cd, nginx, mysql, logs, python и т.п.
Подпишись и прокачай свой hard-skill 🤟
#заметка дня
Как же у меня бомбит сейчас, вы бы знали. Но обо всём по порядку.
Кому-то из разработчиков JetBrains показалось полезным дать возможность скомпилировать все TypeScript файлы разом в JavaScript и положить их рядышком с оригиналами.
Да, я не шучу, одним кликом мышки можно скомпилировать вообще все TS-файлы в вашем проекте. При этом, компилятору абсолютно по барабану, смешанный у вас проект или нет. Ну и, заодно, на macOS ему ровно так же по барабану на регистр названий файлов.
И, естественно, класс Config.ts перезаписал собой файл конфигурации config.js 🫠
Хвала небу, в PhpStorm есть локальная история файла, потому что конфигурация, естественно, исключена из Git.
Моя жопа давно так не горела. Это ну вообще как? Зачем? Кому это может быть полезно?! Ну типа, должна же быть хоть какая-то веская причина так делать?
Я сейчас отдышусь и передам свои впечатления команде поддержки JetBrains, которые помогают нашей компании. Но не сразу, точно не сразу...
#typescript #jetbrains #надмозг
#фишка дня
Крупная! ...для ngrok 🫠
TL;DR Теперь можно сделать локальные порты доступными снаружи в процессе разработки и быстро показать процесс коллеге или заказчику прямо из VS Code!
Если кто не знает, ngrok это средство для пробрасывания (туннелирования) ваших локальных портов наружу, с предоставлением уникального домена. Вот тут я писал: /channel/htmlshit/438
Так вот, Microsoft решила отобрать у ngrok значительную долю пользователей, встроив ровно эти же возможности в... VS Code! Прямо в панель состояния.
Вот, глядите, августовский список изменений: https://code.visualstudio.com/updates/v1_82#_builtin-port-forwarding
И статья с подробностями, как использовать: https://code.visualstudio.com/docs/editor/port-forwarding
Порт может быть публичный, а может — приватный. Ну и требуется авторизация через GitHub.
В общем, MS продолжает делать нам хорошо. Но, возможно, ngrok-у станет чуть хуже.
P. S. С Днём программиста, котаны и котанессы!
#vscode #ngrok #port #forwarding
Верстаешь?
Успей ухватить 7 дней бесплатного обучения фронтенд-разработке!
18–24 сентября Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью.
Что будет:
1️⃣ Создание полноценного веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием самых современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть свой проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
👉 Участвуй бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KD9ne
#библиотека дня
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей. И хотелось бы их использовать в своем корпоративном корыте.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component #бородач
#расширение дня
Что, котаны, думали, я буду тут сегодня про выход Bun 1.0 заливать?
Думаю, не. Не сегодня. Я смотрел на Bun очень давно, больше года назад, вот: /channel/htmlshit/1305
Там всё, что нужно знать. Быстро, удобно, не на V8. А в следующий раз — когда сам попробую в чуть более реальном проекте.
Так какова же тема сегодня? Пытка через решение задач на LeetCode?
Звучит странно, но именно такое расширение для Chrome сегодня прислали подписчики. Называется LeetCode Torture: https://chrome.google.com/webstore/detail/leetcode-torture/clbhgfneekiimoaakhhdjimgnnbnfbeh?hl=en
Суть? Оно не даёт открывать веб-сайты, пока не будет решена хотя бы одна задача с LeetCode. А? Ну? Как вам?
P. S. Не понимаю ваших реакций, это не реклама. Реклама попозже.
#leetcode #chrome #extension
*** ну как уже зарабатывать на этих играх?
Очень просто. Идешь на ПОСЛЕДНИЙ бесплатный в этом году онлайн-интенсив по геймдеву от Евгения Гришакова, основателя студии Garden of Dreams с оборотом почти миллион долларов, и делаешь свои деньги!
Сейчас очень сложно подняться в IT, везде нужен гигантский опыт, а конкуренция просто огромная. Геймдев в этом плане проще: здесь есть четкая стратегия, как на этом зарабатывать.
Просто переходи по ссылке и регистрируйся на бесплатное обучение по геймдеву. А за регистрацию, кстати, можно получить крутые подарки, в том числе бесплатный исходник игры.
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation
#драма дня
Итак, сообщество опять бомбит. Вот вы спите, а там происходит ого-го какая драма!
Короче, TL;DR: Создатель Ruby on Rails, Давид Хейнемейер Ханссон (David Heinemeier Hansson) заявил, что TypeScript не нужен.
Подробнее: https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01
Суть ситуации в том, что (в основном в мире RoR) есть фреймворк Turbo. По факту, он успешно конкурирует с Astro, HTMX и прочими React Server Components и просит ещё. Бесшовная интеграция фронтенда с бакендом через передачу HTML различными способами: https://turbo.hotwired.dev/
Идея не нова, что-то похожее есть и в Drupal, и в October CMS, можно повторить и в Laravel и так далее.
Так вот Turbo до 7 версии включительно был написан на TypeScript, а сейчас Давид психанул. Из его сообщения можно сделать вывод, что ООП (а Turbo пишется в ООП-стиле) в современном JS вполне себе развилось до состояния, в котором с ним можно работать.
Но ещё явно прослеживается, что он просто устал воевать со сложными типами. Многим знакомо это ощущение, когда типы разрастаются до невероятных размеров и сложности, особенно когда схема передаваемых данных очень сложна.
Сообщество бурлит, ссылается на State of JS 2023, мол, 70% разработчиков использует TS. Проблема только в том, что не 70% разработчиков, а 70% поучаствовавших в опросе.
К слову, ситуация не нова. React как был на JS написан, так и остаётся. Правда, без громких заявлений.
Upd. там фейсбучный Flow, про который я забыл совсем. И определения TS-типов поставляются в отдельном пакете.
Ну и ещё лично я замечал, когда мне надо поэкспериментировать, я точно не выберу TS: в экспериментах типобезопасность это последнее, что меня волнует, а в рантайме тебя TS не особо спасает от дурацких решений (inb4 гигиена, тайпгарды и и контракты).
Интересно, скоро ли появится turbo.d.ts в пакете types? По-моему, Давид и определения поставлять не собирается. Что-то это уже ну такое 🙂
А как ваши дела с TS, котаны?
#typescript #javascript #ruby
#такое дня
Лучшее времяпрепровождение на выходных? Конечно же, некромантия!
Нет ничего лучше, чем привести старую железку к современным стандартам. Особенно, если это iPod 5 aka Video. Аж 2005 года. По-моему, некоторые мои знакомые подписчики тогда даже не родились.
Итак, имеем модель с жестким диском (настоящим! только очень маленьким) на 30 Гб. Покупаем переходник на MSATA SSD, в моем случае 256 Гб. Ну и батарею побольше, на освободившееся место. С 650 mAh до 2000. Забегая вперёд скажу, что надо было брать переходник на microSD, они менее энергопрожорливые.
Ну и сверху на это все залетает прошивка Rockbox. Эдакий Linux для плееров. Правда, пришлось опять же патчить под MSATA (ещё одна причина брать переходник под карточки).
Получилось круто! Лежит, тестирует батарею. Дальше планирую поставить другую фронтальную панель и вообще ещё немного поугарать.
Некромантия — дело хорошее :)
1С-разработчики востребованы на рынке труда. Они помогают компаниям автоматизировать ежедневные задачи, считать налоги и зарплаты, вести документацию. А работать могут в любой сфере: в торговле, на производстве, в логистике, бухгалтерии, банкинге. Познакомьтесь с перспективной профессией на бесплатном мини-курсе по 1С-разработке с нуля.
Регистрация: https://epic.st/2HhPNV
Дарим год изучения английского языка всем, кто посмотрит 1 урок!
Знаниями поделится Вячеслав Вербий — основатель и руководитель центра автоматизации SlavVer, сертифицированный специалист по 1С. 15 лет в программировании.
Смотрите видео в удобное время — доступ бессрочный. Мы сделали акцент на практику, поэтому в роликах много подробных примеров работы.
Все участники мини-курса получат сертификат на скидку 10 000 рублей для покупки любого курса, а также полезные материалы и доступ в чат-комьюнити в Telegram.
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
#codepen дня
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: /channel/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
#css #goo #filter #svg
#игра дня
Глядите чо я откопал. По-моему, мы уже рассматривали все CSS-игры и игроподобные занятия, но этот ресурс больше похож на продвинутый #опрос.
Итак, встречайте: Guess CSS!
https://www.guess-css.app/
Возможно, это максимально быстрый способ прокачать своё понимание стилей, их композиции и каскада.
Делитесь результатами, котаны!
#css #game #quiz #бородач
#статья дня
Одно из самых интересных чтений на свете — это как принимались те или иные решения в уже готовом продукте.
Понятное дело, что новые проекты, т. н. greenfield, писать легко. Перед тобой чистый лист, гуляй не хочу, экспериментируй. Но потом...
Потом у твоего проекта появляются пользователи. И ладно если твои пользователи это просто посетители, а если твой проект — фреймворк или библиотека, а пользователи — разработчики, которые уже использовали твоё детище в своих продуктах?
Как убедить тех, кого убедить сложно, что были приняты поспешные решения, даже если они казались удобными? Как убедить людей в том, что им необходимо переписать свои продукты с учётом новых реалий?
И вот поэтому статьи вроде "Breaking React Query's API on purpose" — это настоящая золотая жила. Кто бы мог подумать, что такие простые вещи как события onSuccess и onError на самом деле могут приводить к проблемам и их придётся объявлять устаревшими?
Рекомендую не только пользователям React Query.
#react #query #js #бородач
#фишка дня
Позавчера вышел Chrome 117. И по его поводу надо бы написать пост побольше. Ну хотя бы по той причине, что там появились сабгриды!
Наш властелин гридов, думаю, будет рад.
CSS Subgrid были внедрены в Firefox 2 декабря 2019 года, а в Safari — 11 сентября 2022 года. Я специально так растягиваю даты, чтобы вы насладились отставанием Хрома от недооценённых конкурентов.
Edge ещё тупит, но он по факту тоже Хром на свистоперделках, так что скоро, скоро.
Ну а фишка дня — наконец-то для понимания HTTP-кодов вам не придётся смотреть на котов! Какой каламбур, ня.
Они теперь прописаны прямо в описании запроса на вкладке Network.
Почему это важно?
Ну, например, потому что больше и больше сервисов начинают правильно их использовать, а их фронтенды — правильно им подчиняться. Так что всплывает множество не самых ожидаемых кодов.
Всем коданы, котаны!
#http #chrome #subgrid
Знаете основы веб-разработки и хотите углубить свои знания? Присоединяйтесь к бесплатному мини-курсу, где вы получите практические советы и инсайты от опытного программиста, а также создадите 3 классных проекта — сайт, приложение и сервис — и добавите их в портфолио.
Регистрация и подробная программа по ссылке: https://epic.st/p_K2KK
Спикер мини-курса — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Автор 10 курсов по программированию и карьере программистов.
Всех участников ждут подарки!
— Сертификат на скидку 10 000 рублей на любой курс.
— Доступ к изучению английского языка на год.
— Персональная карьерная консультация
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#расширение и #статья дня
Вот эта вот странная блок-схема на иллюстрации — сгенерированное VS Code-расширением ReacTree дерево компонентов одной из частей нашего продукта.
Ссылка: https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree
Нужно установить расширение и выбрать файл, который будет корнем этого самого дерева. Причем, не обязательно из проекта — а любой.
Расширение сыроватое. Например, оно пока не умеет в условный рендеринг и обрывает построение. Ну, спасибо, хотя бы, что не падает. Хотя схему React Router-а оно понимает прекрасно (на иллюстрации).
Помимо построения дерева, показывает пропсы компонентов. Может быть удобно. Желаю им всяческого развития, короче.
А ещё они заодно написали статью о том, как разрабатывать расширения VS Code, использующие WebView: michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013" rel="nofollow">https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013 Возможно, кому-то будет полезно.
Делитесь схемами, котаны 🙂
#react #tree #vscode #extension
#такое дня
Тут такое дело, наткнулся на пост в, простите, 𝕏, цитирую: "Айти сообщество может сколько угодно переобуваться в прыжке, переименовывая мастеры в мейны и блэклисты в блоклисты, но в CSS всё ещё есть именованный цвет indianred, и это цвет кожи индейцев".
Давайте чуть разберёмся, вот пример использования: https://codepen.io/alinaki/pen/abPWmNy
Я специально не стал выносить его в иллюстрацию, чтобы каждый себе сам его представил.
Кажется, уже сходу можно догадаться, что это что угодно, но не цвет кожи. На самом деле, он и к индейцам отношения никакого не имеет 🫠
Это цвет почвы, богатой латеритом. В Индии!
Не знаю, зачем я в этот прекрасный вечер вынудил вас открыть форточку, но уж очень захотелось поделиться.
Впрочем, фирма Crayola, когда-то придумавшая восковые мелки, переименовала Indian Red в ореховый ровно по вышеозначенной причине...
А, ну пост был бы неполон без ссылки на обсуждение рабочей группы CSSWG как раз об этом: https://github.com/w3c/csswg-drafts/issues/5284
Комментарии там очень интересно почитать, на самом деле. Про статистику использования там тоже есть. И про Навахо
#css #color #indianred
🔍 Rust Journey: Хотите освоить язык программирования, который завоевывает мир?
🚀 Илон Маск, один из ведущих инноваторов нашего времени, утверждает, что за Rust будущее. А когда последний раз он ошибался в своих прогнозах? 😉
🪟Также недавно стало известно, что ядро Windows 11 переписывается на Rust.
✨ Не упустите свой шанс быть в авангарде IT-революции. Подписывайтесь на канал Rust Journey и начните свой путь в захватывающий мир Rust сегодня!
#фишка дня
...для маководов.
Не знаю, насколько может быть полезно, но оказывается, у macOS есть встроенный разделительный элемент для дока. Добавить его очень просто, пишете в терминале:
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock
...и в доке появится, собственно, разделитель, который можно перетащить куда нужно. Добавить их можно сколько угодно (но мне почему-то пришлось открыть новую сессию терминала, иначе не добавлялся очередной).
Давайте эту фишку свяжем с разработкой тем фактом, что я выделил группу с редакторами, например.
P.S. а ещё доком можно управлять с клавиатуры, нажмите fn + ⌃ + F3 и дальше стрелочками.
P.P.S. есть разделитель поменьше!
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock
#mac #dock #feature #бородач
#vscode дня
Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.
Я щас не шучу, know your tools!
Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.
Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!
Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque
Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!
Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).
Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.
Но потом ка-а-ак понял!
#search #extension #бородач
Почему все идут во Frontend-разработку?
Разберемся кто такой фронтенд разработчик.
Это специалист, который разрабатывает интерфейс интернет-страницы. Проще говоря, он отвечает за визуальную часть, с которой взаимодействует пользователь: кнопки, интерактивные элементы, всплывающие окна, расположение блоков информации.
Чем же так манит эта профессия?
🔹Считается, с фронта легче начать путь в IT
🔹Востребованность – сайты всегда нужно поддерживать и обновлять
🔹По данным hh. ru 70 000 рублей зарплата начинающего специалиста
🔹Возможность работать как в найме, так и удаленно
🔹Eсли начать учиться Frontend-разработке на курсе Skillbox, то 7 месяцев обучения на платформе достаточно, чтобы найти первую работу. Плюс вы получите гарантию трудоустройства и год английского бесплатно.
Переходите по ссылке и узнайте больше выгодных условий для старта во Frontend-разработке: https://epic.st/AeynI
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#фишка дня
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
#заметка дня
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:<svg xmlns="http://www.w3.org/2000/svg">И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто:
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.
<use href="icons.svg#icon-circle" />
</svg>
Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
#инструмент дня
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)
Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?
Вот: https://lightningcss.dev/
Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.
Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.
Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.
Кстати, молния понимает @import, за бандл не беспокойтесь.
И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39
Пробуем?
#css #lightningcss #rust
Журнал "XOR" – мастхев для любого программиста. Освещаем новости, обновления, мемы и много кодинга.
Присоединяйся к самому большому сообществу программистов: @xor_journal
#ссылка дня
Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.
У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.
https://codelabs.developers.google.com/
Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.
Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.
Моя рекомендация, в общем.
#google #dev #education #бородач