#фишка дня

Вы могли читать в разных учебниках или слышать на разных курсах по GIT, что GIT — это "машина времени" или "бесконечная отмена". Так-то оно так, но...

Но что если вы что-то сохранили раз, два, три, десять... захотели отменить одно из старых изменений — а коммитов-то не было?

Wes Bos подсказывает, что на помощь придёт инструмент Timeline в VS Code!

Ну и собственно фишка эта появилась в VS Code в начале апреля. В Твиттере разработчиков есть большой разбор нововведений, и этого тоже: https://twitter.com/code/status/1511463346167496706

Надеюсь, вам не жалко нескольких десятков килобайт на диске ради возможности путешествий во времени :)

P. S. из чата пишут, что в в различных IDE от JetBrains тоже имеется Local History. И хранит он изменения прилично долго. Так что, конечно, фишка не уникальна.

#vscode #feature #timeline

#такое дня

Кто хочет на ночь глядя написать всё, что думает о канале в комментарии?

Чего не хватает? Чего нет совсем? Чего вроде ок, но охота побольше? А чего — поменьше...

Не стесняйтесь. А то что-то на мемы вы были жадные :(

#фишка дня

Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447

У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.

Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.

CSS тоже отлично справляется.

На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius

А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/

Кто смелый анимировать их? :)

#css #blob

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

И вообще, не забывайте на html ставить атрибут lang с верным кодом языка. Вы не представляете, как бесит, когда финские и шведские сайты это игнорируют, и переводчик иногда отказывается работать.

#html #attribute #translate

#баг дня

Google весьма знамениты тем, что у них на поток поставлена палочная система.

Если коротко, для достижения следующего грейда, тебе надо внедрить инновацию. Напоминает СССР, не правда ли?

Один сначала вводит инновацию, второй — проводит рационализацию. Оба получили премию.

Вспомним десяток обновлений интерфейса GMail.

Итак, в чём же конкретно проблема: https://issuetracker.google.com/issues/232060574

Есть такой язык и среда — Google Apps Script. Это JavaScript, на самом деле. Используется для написания приложений GSuite (расширения к формам, доксам и таблицам).

У него одновременно поддерживаются две системы развёртывания (деплоя): legacy и текущая.

Мы сидим пока на legacy, поскольку в текущей полно нововведений, несовместимых с жизнью.

Но за каким-то лешим один из сотрудников Google решил провести инновацию и заменил нативные HTML-селекты на самодельные в стиле Material UI.

И естественно, не обошлось без косяка: рендер выпадающей части происходил за пределами самого селекта, через портал. И отступы считались в зависимости от числа элементов в дропдауне.

А у нас их там 2000. Естественно, меню улетело за пределы экрана.

Зачем было трогать легаси-среду? Вопрос риторический.

Браво, Google. Браво. Зато инновация внедрена и премия получена

#google #bug

Подготовил иллюстрацию для тех, кто по ссылкам не ходит

#статья дня

Роман Шамин из «Злых марсиан» (Андрей Ситник оттуда, если вы не в курсе кто это — shame on you) о том, как минимальными усилиями со стороны дизайнера добиться максимальной доступности интерфейсов.

https://teletype.in/@romanshamin/a11y-for-designers

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

#design #a11y

#такое дня

Что-то я замотался и пропустил важную дату: каналу вчера стукнуло 4 года 🎉

Я его начинал под названием “Будни верстальщика” и изначально планировал вести в Твиттер-формате с забавными рабочими моментами и просто какими-то цитатами. Но быстро стало понятно, что Телега не про это.

Потом я начал модерить чат @css_ru и заметил, что вопросы у людей одни и те же. На канале стали появляться первые заметки и линкдампы.

Спустя некоторое время GeekBrains включили меня в свою email-рассылку и за сутки присоединилось больше 2000 человек. Это было похоже на взрыв.

Но поскольку в Телеге почти нет органического продвижения, а славы охота — я начал покупать и ставить рекламу. Да, тщеславие — оно такое, выражается админским сленгом “фулл реинвест”.

Но кто бы ты ни был, дорогой подписчик: пришедший из тех тёмных времён чата или по рекламе — я каждого ценю и спасибо, что вы со мной.

Всем lowercase hex, котаны!

#статья дня

Введение в SVG-анимации для верстальщиков

На моей памяти Хабрахабр умирал уже раза три.

Естественно, он умер, когда меня запихали в ридонли. Но речь не об этом.

На нём всё ещё выходят шикарные статьи, например, вроде этой: https://habr.com/ru/post/667116/

Очень хорошо написано, с небольшим, но достаточным, экскурсом в историю. Разобраны критичные отличия от CSS-анимаций. Уделено время правильному экспорту из редакторов.

В общем, мне такой в своё время очень не хватало, я бы возился меньше с, казалось бы, простыми анимациями вроде этой: https://codepen.io/alinaki/pen/qoPRRE или этой https://codepen.io/alinaki/pen/oNXjEzz (впрочем, спиннер не разбирал только ленивый).

#svg #css #animate

#фишка дня

Я, конечно, дико извиняюсь, но недавно я впервые сконвертировал SVG в PNG используя средства разработчика в Chrome.

Поскольку SVG это просто код, я немного подвигал элементы туда-сюда, поменял их контрастность и решил, что мне срочно нужен PNG не дожидаясь дизайнера. Figma, к сожалению, этот SVG била.

Оказалось, в DevTools есть ошеломительная штука: “Capture node screenshot”. Она прекрасно работает, естественно, не только для SVG, но и для любых DOM-нод. К сожалению, прозрачность не поддерживается.

Понятное дело, что фишка эта применима не только для конвертации изображений :)

Сохранить изображение с canvas так тоже не удастся, но эта возможность встроена в контекстное меню самого холста и так.

И ещё — не работает в iframe… эх.

#svg #png #screenshot #devtools

#новость дня

Одной картинкой.

У меня всё.

#статья дня

Вы когда-нибудь задумывались, что же делает шрифты приятным для чтения? Конкретно — кириллические шрифты?

А вот Александра Королькова точно задумывалась. И это неудивительно, она же автор «Живой типографики». Кстати, книга эта официально в бесплатном доступе: https://t.me/htmlshit/955

Так вот. Статья на сайте небезызвестных Паратайп так и называется: «Как разобраться в кириллице».

Конструкция букв, курсивы и наклонные шрифты, кернинг и распределение толщин — всё доступно и понятно.

Вот где клад для нашей жабы, котаны!

#fonts #cyrillic

#видео дня

Кому технического стендапа? Егор Малькевич как всегда: https://www.youtube.com/watch?v=b8k0FLrW4xw

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

Немного поржал с подачи, что Node.js это буквально просто вызовы API над Си.

Какое совпадение, не подскажете, за счёт чего PHP всё ещё держит позиции в крупных проектах? 😬

В общем, на ночь — самое то.

#video #nodejs

#фишка дня

Продолжаем наше путешествие по уже-не-столь-будущему псевдоселектору :has aka родительский селектор.

На сей раз абсолютно прекрасная штука, сочетание :has и object-view-box (aka фокусировка на части изображения):

img {
  object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
  --top: 61%;
  ...
}

Залипаем на видео, смотрим кодпен:

https://codepen.io/jh3y/pen/QWQrVwj

Ах, простите. Смотрим кодпен только в Chrome Canary с флагом Experimental Web Platform Features 😜

Но заглянуть в будущее всегда приятно.

#css #has #future

#ссылка дня

Мы не так давно приняли решение требовать в тестовых заданиях TypeScript по-умолчанию.

Сейчас уже сложно представить, как должен впечатлить нас человек, пишущий на чистом JavaScript. Даже если он использует cutting-edge возможности.

И мы далеко не первые в этом и уж точно не последние. Так что если желаете где-то адекватно работать или просто меньше бояться за стабильность своих проектов — самое время.

Ну а чтобы не было так больно, держите «методичку» по использованию TypeScript в React-приложениях: https://github.com/typescript-cheatsheets/react

Хороших выходных, котаны!

#react #typescript #cheatsheet

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

Всё ещё испытываете проблемы с ветками в Git?

Not anymore!

Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.

Или вы любите Mercurial? 🤔

#git #education

#игра дня

Очередной образец игры на CSS, ни строчки JS.

Проведите курсор к бриллианту, не касаясь стен: https://codepen.io/t_afif/pen/YzeNyjR

Очень странно, что она раньше не появилась. Реализация довольно очевидная :)

P. S. Да-да, я в курсе, что на мобиле можно выиграть сразу. Слово «курсор» видим?

#css

#ссылка дня

Вот вы знали, что Apple WWDC не ограничивается одной презентацией новых операционных систем, часов и ноутбуков?

Это же самая настоящая конференция для разработчиков. Как оказалось. А видео с неё рано или поздно попадают сюда: https://developer.apple.com/videos/

И вот там находятся настоящие бриллианты. Видео по дизайну, типографике, программированию…

Ну и, конечно, те самые видео с презентацией багнутых операционных систем тоже имеются :)

Обучаемся, котаны.

#apple #wwdc #video

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

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

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

Итак, как отследить, какой код вызвал изменение атрибута (или поддерева, или вообще удаления) элемента?

Находим элемент в инспекторе, правой кнопкой – «Break on» ➡️ «attribute modifications» и... и в общем, всё, смотрите видео.

Теперь исполнение остановится по условию и вы сможете посмотреть код, изменивший ваш атрибут, прямо во вкладке «Sources». Там же можно добавить больше точек останова или просто продолжить.

#js #debug #devtools