Журнал "XOR" – мастхев для любого программиста. Освещаем новости, обновления, мемы и много кодинга.
Присоединяйся к самому большому сообществу программистов: @xor_journal
Присоединяйся к самому большому сообществу программистов: @xor_journal
🤡10👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
❤4👎1
#инструмент дня
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)
Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?
Вот: https://lightningcss.dev/
Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.
Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.
Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.
Кстати, молния понимает
И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39
Пробуем?
#css #lightningcss #rust
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете 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
👍17❤5
#заметка дня
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
<svg xmlns="http://www.w3.org/2000/svg">
<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>
И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто: <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 #бородач
MDN Web Docs
<symbol> - SVG: Scalable Vector Graphics | MDN
The <symbol> SVG element is used to define graphical template objects which can be instantiated by a <use> element.
👍21❤3
#такое дня
Лучшее времяпрепровождение на выходных? Конечно же, некромантия!
Нет ничего лучше, чем привести старую железку к современным стандартам. Особенно, если это iPod 5 aka Video. Аж 2005 года. По-моему, некоторые мои знакомые подписчики тогда даже не родились.
Итак, имеем модель с жестким диском (настоящим! только очень маленьким) на 30 Гб. Покупаем переходник на MSATA SSD, в моем случае 256 Гб. Ну и батарею побольше, на освободившееся место. С 650 mAh до 2000. Забегая вперёд скажу, что надо было брать переходник на microSD, они менее энергопрожорливые.
Ну и сверху на это все залетает прошивка Rockbox. Эдакий Linux для плееров. Правда, пришлось опять же патчить под MSATA (ещё одна причина брать переходник под карточки).
Получилось круто! Лежит, тестирует батарею. Дальше планирую поставить другую фронтальную панель и вообще ещё немного поугарать.
Некромантия — дело хорошее :)
Лучшее времяпрепровождение на выходных? Конечно же, некромантия!
Нет ничего лучше, чем привести старую железку к современным стандартам. Особенно, если это iPod 5 aka Video. Аж 2005 года. По-моему, некоторые мои знакомые подписчики тогда даже не родились.
Итак, имеем модель с жестким диском (настоящим! только очень маленьким) на 30 Гб. Покупаем переходник на MSATA SSD, в моем случае 256 Гб. Ну и батарею побольше, на освободившееся место. С 650 mAh до 2000. Забегая вперёд скажу, что надо было брать переходник на microSD, они менее энергопрожорливые.
Ну и сверху на это все залетает прошивка Rockbox. Эдакий Linux для плееров. Правда, пришлось опять же патчить под MSATA (ещё одна причина брать переходник под карточки).
Получилось круто! Лежит, тестирует батарею. Дальше планирую поставить другую фронтальную панель и вообще ещё немного поугарать.
Некромантия — дело хорошее :)
❤21👍14
Не влезло в пост выше :)
👍23❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
👍24❤1
#драма дня
Итак, сообщество опять бомбит. Вот вы спите, а там происходит ого-го какая драма!
Короче, 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, котаны?
P. S. мне тут напомнили, что самая мякотка-то происходит в обсуждении PR с удалением TS: https://github.com/hotwired/turbo/pull/971
Там просто полыхают костры из ягодиц.
#typescript #javascript #ruby
Итак, сообщество опять бомбит. Вот вы спите, а там происходит ого-го какая драма!
Короче, 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, котаны?
P. S. мне тут напомнили, что самая мякотка-то происходит в обсуждении PR с удалением TS: https://github.com/hotwired/turbo/pull/971
Там просто полыхают костры из ягодиц.
#typescript #javascript #ruby
👍10