#видео дня

Рассказ о старых и новых математических функциях CSS.

C ними адаптивная верстка может быть совсем другой!

https://youtu.be/YtkGbZ3DxoQ

#codepen дня

Что-то давно рубрики не было. Нехорошо.

Поскольку я очень люблю 3d-эксперименты в CSS, не ради практического применения, а просто для тренировки мозга (хотя разные карусели), решил принести очередное: https://codepen.io/jh3y/pen/dyzpVrY

Анимированный 3d-логотип Stack Overflow. Даже вращается.

Хотя почему никакого практического применения… можно забавный индикатор загрузки сварганить.

#css #3d #rotate

#заметка дня

Я тут вспомнил, что эпопея с запуском WebKit в Windows — а это, суть, возможность тестировать настолько близко к Apple Safari, насколько возможно — была бы неполной без одного важного дополнения.

Давайте вначале вспомним, что было:
1. Краткая история Safari
2. Запуск WebKit-браузера Epiphany в Windows с WSL2
3. Запуск WebKit под Windows без виртуальных машин
4. Happy End в виде бесплатного Browserstack

У всего этого была одна небольшая проблема: WebKit во 2 и 3 вариантах был обычно слишком новый, что соответствовало последним сборкам Safari 14 и 15. Но что же делать, если нужно что-то чуть постарее? На официальном сервере сборки долго не живут.

Так вот, и такое есть: оказывается, старые сборки WebKit можно найти в старых же релизах Playwright: https://playwright.dev/docs/browsers/#managing-browser-binaries

Кто не знает, Playwright — средство для автоматизации тестирования.

Установили — забрали из каталога установки. Кажется, это вполне себе заявка.

#webkit #safari #windows

#codepen дня

О, я точно знаю, что у нас тут есть люди, любящие прозрачные кнопки с градиентом. Да чтобы ещё текст тоже цветной.

Ну Ана Тюдор точно одна из таких: https://codepen.io/thebabydino/pen/ExvNBRY

1. Вариант только для Chrome/Blink, через маску
2. И два универсальных варианта через background-clip. Конечно же, о поддержке IE речи не идёт.

Так и хочется поставить Доге и Чимса с подписью “кросс-браузерная разработка в 2008 и 2021”… Но всё равно — впечатляет!

#gradient #css #buttons #clip

никто:
theguardian.com: я веган

...
Вот кого-то распирало, вы поглядите.

#статья дня

Игорь Камышев из Aviasales рассказывает о том, с чем же сталкивается компания подобного размаха при разработке своей веб-платформы.

От понимания проблемы до эволюционных решений.

https://blog.kamyshev.me/salo-selene/

#тред дня

Я очень люблю треды в Твиттере. К сожалению, в Телеграме подобный формат практически невозможен, разве что в виде комментариев. В блогах — только в Медиуме, но Медиум — это рак.

А в Твиттере каждый абзац — может быть законченной мыслью, каждый абзац может содержать альбомы и комментироваться отдельно, порождая новые ветки. В этом вся суть.

Ну а если какой-то тред охота сохранить — есть инструменты вроде https://threadreaderapp.com/

Так вот, сегодняшний тред — о проблемах программистов, пришедших с курсов.

TL;DR У них отсутствует инженерное мышление и желание это мышление получить.

Ну и ссылка, куда ж без неё: https://twitter.com/kalashnikovisme/status/1456880323929657348

И для тех, кому Твиттер не по душе: https://unrollthread.com/t/1456880323929657348/ (выглядит как обычный пост в блоге).

#twitter

#игра дня

Учить флексбокс? Но я хочу убивать зомби!

Ни слова больше!

https://flexboxzombies.com/p/flexbox-zombies

Раньше эта игра стоила 179 баксов. Сейчас бесплатно.

Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…

#css #flexbox #flex #game

#фишка дня

Если вы любитель открывать кучу вкладок и нелюбитель использовать группы, для вас в Chrome есть прекрасное сочетание клавиш Ctrl-Shift-A или Cmd-Shift-A.

Это список вкладок с поиском! Очень удобная штука. Конечно, надо хоть немного помнить, что ты вообще открывал :)

Я просто к чему это, взглянул на экран «своего» джуна… ужас.

#chrome #feature #search

#статья дня

Помните, я разгонял про аккордеоны? Вот тут вот: https://news.1rj.ru/str/htmlshit/591

Итогом было то, что анимировать высоту не так-то просто, нужно или анимировать max-height, или заранее всё считать.

Но тут оказалось, что Firefox умеет анимировать высоту в гриде! Вы только посмотрите: https://codepen.io/chriscoyier/pen/qBXoEMV

Через анимацию grid-template-rows!!

Давайте-ка поднажмём в issue Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=759665

Может, добавят.

#grid #accordion #animate

#фишка дня

Ребятки, тут в Chrome Canary прилетел structuredClone! Кто не знает, это рекурсивное копирование объекта: https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Вот только structuredClone заодно может не просто скопировать, но и перенести некоторые данные в новый объект. В буквальном смысле.

Больше никаких самодельных рекурсивных обходов. Ну, скоро.

Раньше было только в Firefox, кстати. В Chromium добавил https://twitter.com/AndreuBotella/

#js #object #clone

#драма дня

Тут такое дело. В общем, некто Эрик Лоуренс внёс в кодовую базу браузера Chromium исправление, позволяющее политикам безопасности блокировать просмотр исходного кода страницы: https://t.co/00MoEdcJry

Абсолютное большинство восприняло изменение в штыки. То ли они проигнорировали факт, что блокировка просмотра исходного кода регулируется администратором машины, а не сайтом. То ли то, что механизм блокировки URL и так давно уже был и это лишь ещё один протокол (view-source).

Прям скандал: https://twitter.com/textfiles/status/1458555850524663815

Мне нравится манипуляция вида: «in the middle of the Chrome Dev summit». Ну приплыли, это-то какое отношение имеет к делу?

Но знаете, что позабавило больше? Что в тестах на google forms можно посмотреть ответы в исходном коде! Мне лениво проверять, но я шокирован.

А вы тоже в начале своего пути смотрели исходники на каждом встречном сайте? Я — да. Но данный багфикс меня никак не задел.

#chrome #chromium #twitter

#новость дня

Буквально одной строкой.

Гуглохромовцы починили редактирование значений в девтулзах. То, что сломали не так давно: https://developer.chrome.com/ru/blog/new-in-devtools-96/#length

А могли бы просто не ломать, да.

#chrome #devtools

#ссылка дня

Для участия в Google Summer of Code больше не требуется быть студентом! Достаточно просто быть старше 18 лет.

https://opensource.googleblog.com/2021/11/expanding-google-summer-of-code-in-2022.html

Больше проектов, больше менторов, больше возможности выделится. Это ли не прелесть?

#google #gsoc

#библиотека дня

Я тут такое нашёл, закачаешься. Очередные выкрутасы с Shadow DOM. На сей раз — метаязык для описания паттернов.

Короче говоря, можно шикарные фоны делать не ограничивая себя возможностями градиентов.

Называется это всё <css-doodle/>: https://css-doodle.com/

Описываем нужный нам паттерн используя правила CSS и простые функции типа flip, reverse, shape, random и так далее, там полновесный декларативный язык.

Огромное число примеров, большое сообщество. Вот, например, автор описывает как сделать классический китайский орнамент на простых flip-invert-reverse функциях: https://yuanchuan.dev/flip-invert-reverse

В общем, потрясающая штука.

#css #pattern #doodle

#инструмент дня

Вы замечали, что в отпуске ногти медленнее растут? Просто положение рук при печати такое же, как при копании. А в отпуске — не печатаешь. Впрочем, я отвлёкся (похвастался).

Глядите, какая штука от Йоксель: генератор SVG-фильтров, буквально — <filter/>.

https://yoksel.github.io/noscript-filters/

Размытие, диффузия, тень, смешивание... больше не надо запоминать. Выбираешь нужный, настраиваешь, экспортируешь.

Из таких простых инструментов и складывается сообщество. Кто-то когда-то что-то для себя :)

#css #noscript #filter #tool

#фишка дня

В свежем Chrome 96 исчез список для чтения (Reading List). Появился он в 89 (вроде как) в экспериментальном режиме и лично мне крайне полюбился.

На самом деле, он не исчез, а переместился в сайдбар, для которой отдельная кнопка.

Просто раньше добавить в список можно было через ту же звёздочку, что в и закладки. А теперь — отдельно.

Видимо, решили не ломать классический способ добавления в закладки.

#chrome #bookmarks

#статья, а заодно и #инструмент, дня

Я очень люблю заказывать себе и другим футболки с разными глупыми и не очень рисунками. Очень часто найти оригинал изображения не представляется возможным по разным причинам. В наличии только хреновенький растр.

Естественно, это никуда не годится и приходится переводить изображение в векторный формат, SVG. Трассировать его, выражаясь профессиональным языком.

Обынчо залетаешь в поиск с запросом "image to vector online" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде http://potrace.sourceforge.net/ или условными Inkscape, люстрой, дровами.

И вот Томас Штайнер взял Potrace, собрал его под WebAssembly и выдал SVGcode. По пути не преминув запилить целую статью: https://web.dev/noscriptcode/

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

Да и сам SVGCode весьма хорош :)

#noscript #pwa #trace

#codepen дня

Давно у нас не было игр. Не про CSS/JS, а просто хороших игр с простой и понятной физикой.

Marble Labyrinth одна из таких. Всё максимально просто и понятно, вам не найти кандидата лучше на изучение исходного кода: https://codepen.io/Gthibaud/pen/zNwgmZ

#game #physics #js

#ссылка дня

https://mediaqueri.es/

Честно говоря, довольно неожиданный проект. Это каталог внешнего вида адаптива различных сайтов, их там огромное количество.

Кому может пригодиться? Ну, пожалуй, дизайнерам в первую очередь, которым нужно прикинуть, как же адаптировать сайт под мобильные устройства. Ну или наоборот, если mobile first.

Ну и, конечно, верстальщикам. Ведь даже в 2021 году макет могут дать без адаптива (беги, я бы сказал). Ну или дать совет заказчику и/или дизайнеру.

#html #mediaqueries

#статья дня

Вы веб-разработчик из девяностых, если помните… https://zachholman.com/posts/only-90s-developers/

Точнее, веб-мастер. Чего это я :)

К слову, все представленные в статье техники очень даже жили года так до 2008 точно. Аж дрожь берёт.

#css #old