#заметка дня

Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.

Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.

Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.

Но есть нюанс.

Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:

<td>

_markdown_ **тут**

</td>

...и будет норм.

#markdown

#статья дня

Злые Марсиане и Андрей Ситник как всегда снабжают нас прекрасными статьями, описывающими современное состояние фронтенда.

Даже такая простая вещь, как фавиконка, совсем не простая. Каждый год выходят обновления минимального набора для максимальной поддержки клиентов.

Вот и в этом году тоже: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

В статье имеется TL;DR, для тех, кому ну вообще лень :)

Он настолько короткий, что умещается даже здесь:

HTML

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

И манифест:

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

И всё, делов-то.

#favicon #web

#видео дня

Интервью Дугласа Крокфорда — создателя JSON — подкасту «Мы обречены».

Для начала, цитата: «Часто — это самоучки, которые научились делать то, что они делают, читая код на других сайтах. К сожалению большинство кода, который находится в сети — дерьмо...
И вы не можете винить их за то, что они сами пишут дерьмо. Так что знаете, мы все в одной лодке мы все должны помогать друг другу».

Кажется, тут не надо ничего пояснять :)

Собственно, интервью: https://www.youtube.com/watch?v=WSqCpWYfTFU

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

#podcast #json #js

#статья дня

Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.

Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation

Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.

Хорошее чтиво на своей работе, да.

Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP

SVG-фильтры + IntersectionObserver и дают такой результат. Для ускорения процессинга пикселизируется не основное изображение, а его миниатюра.

Pixelate all the thi(n)gs!

#js #pixel #effect #filter #svg

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

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

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

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире!

#css #framework

#статья дня

Я много раз начинал и забрасывал статью о том, как справляться с рутиной. Но писать статью — это не в чате «деда» включать. Всё-таки важная штука — аудитория.

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

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

Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology

#книга дня

Обновился “Налоговый путеводитель для цифровых кочевников” от юридической фирмы Buzko Krasnov. Возможно, многим пригодится.

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

#book

#такое дня

В рабочий чат прислали таблицу скорости брутфорса разных паролей.

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

Забавно, что 5 лет — это оранжевый уровень угрозы. Возможно, потому, что через год превратится в 30 минут?

И где та грань, когда пароль становится настолько сложным, что требует записи на бумажке, налепленной на монитор? :)

#статья дня

Михаил Башуров из канала Typesafe&Sound написал статью о том, как правильно составлять и исправлять резюме: https://telegra.ph/Pochemu-menya-ne-zovut-na-sobesedovaniya-03-03

Канал хороший, надеюсь, тематика Typescript на него вернётся.

Ну и там же вдогонку статья от Никиты Мостового о, в общем, том же. Актуальности не потеряла: https://habr.com/ru/company/hh/blog/510104/

#статья дня

Думаете, браузеры только ругаться друг с другом умеют? Нет, они ещё и взаимодействуют.

Начиная с 2019 года множество компаний-разработчиков браузеров, ведомые инициативой Mozilla и Google, стали собираться на конференцию Interprop.

Этот год не стал исключением: https://web.dev/interop-2022/

Рассматриваются 15 тем взаимодействия и стандартизации (единого понимания документов):
- Каскадные слои
- Цветовые пространства
- Новые единицы измерения для viewport
- Скролл
- Subgrid
- CSS contain
- Элемент dialog
- Типографика
- Совместимость браузеров
- Правило aspect-ratio
- Flexbox
- Grid
- position: sticky
- Трансформации

В общем, будьте как разработчики браузеров :)

#webkit #firefox #blink #chrome #safari

#фишка дня

Плохо с математикой? 360 градусов вводят в ступор? 2π радиан доводят до истерики? Грады это какой-то сплошной гон?

Используй 1 поворот! Вращение элементов никогда ещё не было таким простым!

turn — и готово!

#css #transform #rotate

#статья дня

Думаете, SVG это только формат описания векторной графики?

Нет, всё чуть-чуть сложнее. SVG это формат, не менее интересный чем весь стек HTML, а то и более. Внутри SVG может содержаться настоящее приложение, способное включать в себя и HTML (вспоминаем мой опыт с foreignObject).

Но раз весь стек HTML, то и скрипты? И сетевые запросы? Да. К сожалению. Или к счастью.

Сначала давайте посмотрим на эту статью: https://habr.com/ru/company/pvs-studio/blog/652255/

Она для общего развития, про десктопные приложения. Но суть остаётся той же: если ваш SVG-парсер неправильно настроен, вы рискуете многим.

Ну а если занимаетесь настройкой серверов и разработкой полномасштабных проектов, то не забывайте о том, что, загрузив SVG, можно и XSS-атаку провести: https://blog.yeswehack.com/yeswerhackers/file-upload-attacks-part-2/

Вот ещё из 2011 презентация, многое неактуально из-за развития CSP в браузерах, но опять же — помните про правильную настройку: https://owasp.org/www-pdf-archive/Mario_Heiderich_OWASP_Sweden_The_image_that_called_me.pdf

Фильтруйте ваши изображения, в общем.

#svg #security #css

#фишка дня

Если вы используете стандартные элементы вроде input type number, date, range (а их часто используют в админках, да и они потихоньку улучшаются), может возникнуть задача стилизовать значения, выходящие за рамки дозволенного.

И тут, оказывается, в CSS есть необходимые селекторы: :in-range и :out-of-range.

Ну уж input type number точно будет доволен :)

#css #range #selector #input

#codepen дня

Как проще всего понять CSS 3D-преобразования?

Нарисовать сферу!

И добавить немного лоска 😋

https://codepen.io/Skagoo/pen/RwxpoyX

#css #3d

#фишка дня

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

Как писал Джон Кармак: “I can send an IP packet to Europe faster than I can send a pixel to the screen. How f’d up is that?”.

Это я к чему.

Вот выкатили вы здоровую картинку на сайт, уж не знаю, почему. Может, удивить пользователя сверхкачеством хотели. Но её надо же не только доставить, но и декодировать. А если у тебя не последний айфон?

С доставкой нам поможет атрибут loading=“lazy”, но что насчёт декодирования?

Вуаля, такое тоже есть: decoding=“async”.

Можно использовать вместе с ленивой загрузкой, можно — раздельно. В зависимости от задач.

На сладкое держите неплохую лекцию об оптимизации изображений для SEO: https://youtu.be/F6KGcb6trXc с кучей нюансов, включая вышеописанные атрибуты.

#img #decoding #html

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

HTML Academy в представлении не нуждаются. Поэтому, этот пост никак не спонсирован и тем более не является рекламой.

В общем, они сделали свои тренажёры по вёрстке бесплатными. На какое время — официально не объявлено.

Заходите, пользуйтесь. Кому-то поможет освоить что-то новое, кому-то — отвлечься.

https://htmlacademy.ru/

#css #html #school

#codepen дня

Придётся возрождать рубрику CodePen дня. И, пожалуй, в классическом виде.

Разве меня одного должен страшно бесить этот прелоадер?

https://codepen.io/jkantner/pen/abEoyeK

Нет, конечно. Пусть вас тоже бесит!

#css #preload #animation

#фишка дня

Давайте отвлечёмся немного.

Если поискать в Google Pac-Man, появится играбельный дудл :)

Вот так просто.

#game #google #doodle

#статья дня

Вы не поверите, но, кажется, до Apple таки дошло, что Safari начинает всех бесить.

На самом деле, Safari надо любить, потому что Firefox стремительно загибается, но сложно любить то, что не очень-то и уважает потребности разработчиков.

Так вот!

Вышел Safari 15.4: https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

В списке нововведений: lazy loading, dialog, :has(), каскадные слои, svh/lvh/dvh, focus-visible, accent-color, display: contents fix, scroll-behavior, Manifest-иконки, BroadcastChannel.

Выглядит охренительно, даже похоже на будущее.

Обновляемся, пользуемся.

Upd. держите перевод на русский https://habr.com/ru/news/t/655743/

#safari #webkit #macos

#видео дня

Инструкции по Chrome DevTools никогда не перестанут быть актуальными. Вот с пылу с жару подлетело новое видео от их developer advocate — Jecelyn Yeen. (Понятия не имею, как пишутся на русском ни должность ни имя, сорян).

Про отладку CSS Grid: https://www.youtube.com/watch?v=M8SlBgul8ao

А год назад было видео про отладку флексов, тоже нелишне будет напомнить: https://www.youtube.com/watch?v=J5n2aS37rpE

Естественно, не забываем, что у Google прекрасная документация: https://developer.chrome.com/docs/devtools/css/grid/

С датами публикации, правда, что-то не то… ну да ладно.

В качестве иллюстрации к посту вынесу отображение имён grid-area. Весьма удобно!

#css #grid #devtools