#ссылка дня
#android

Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:

https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java

Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:

https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view

Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).

#фишка дня
#ide #vscode #sublime #editor #редактор

Sublime Text, в отличие от Visual Studio Code, не пытается сразу форматировать ваш текст при вставке. Я считаю, что это хорошо, потому что в VS Code и Atom, во всяком случае раньше, алгоритм расчёта отступов при вставке был отвратный.

Но нюанс в том, что в Sublime Text тоже встроена такая возможность. Включается зажатием Shift: ctrl-shift-v. И текст встаёт красиво.

Кидайте в комментарии существующие решения проблемы для VS Code. Лично я давно забил на это — мой код форматируется Prettier+ESLint при сохранении.

#ссылка дня
#типографика

Итак, запоздалые, но хорошие новости для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.

Александра Королькова выложила в бесплатный доступ свою книгу “Живая типографика”. Как оказалось, аж два года назад. А я свою на Авито покупал когда-то, потому что тираж был полностью распродан 🙂

https://leksandra.livejournal.com/120488.html

Приобщаемся к основам типографики и благодарим автора.

Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR

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

Постоянно всплывает в профильных чатах, решил, что надо сохранить.

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

Итак, встречайте: https://getwaves.io/

Есть даже плагин для Figma.

Ну и вдогонку пара похожих:
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
https://yoksel.github.io/wave-maker/

И чтобы добить набор, немного генераторов фонов в виде волн всё на том же SVG:
https://loading.io/background/m-wave
https://www.uplabs.com/posts/svg-gradient-wave-generator

#статья дня

https://habr.com/ru/post/503776/

Эффект перелистывания страниц — далеко не самая нужная штука в вебе. Желают её только менеджеры промо-проектов, но для кого-то они — единственные менеджеры 😭. Да и библиотек много.

Чем же хороша статья? А хороша она демонстрацией простой геометрии.

Очень многие разработчики стесняются визуализировать свои расчёты на бумаге (короче говоря, рисовать). Ещё некоторое количество верстальщиков просто не помнят или не могут применить элементарную геометрию 5-9 класса.

Конечно же это нужно в себе ломать. Не уметь в голове построить пересечение прямоугольников (если речь идёт о, например, эффектах при прокрутке страниц) — это абсолютно нормально. Чертите, рисуйте, вспоминайте школу.

#ссылка дня
#video #img #png #jpg #webp

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

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

https://www.youtube.com/watch?v=CMlXUS6e46w

#ссылка дня
#html #css #grid #cheatsheet #памятка

Великолепная Yoksel выложила отличную шпаргалку по гридам с примерами. Думаю, здесь добавить нечего.

https://yoksel.github.io/grid-cheatsheet/

#статья дня
#js #esnext

Леа Веру (Lea Verou) рассказала о своём опыте рефакторинга большой кодовой базы с приходом опциональной последовательности (опциональный доступ к атрибутам, optional chaining) в широкий доступ.

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

https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/

#статья дня
#css

И снова на сцене Ахмад Шадид (Ahmad Shadeed). На сей раз с “нетипичными” CSS-свойствами.

Сразу скажу, на мой взгляд все свойства более чем типичны. Дело тут в другом: они почему-то оказались в тени модных фишек или просто по какой-то причине прошли мимо (как object-fit, некоторым сложно составить правильный поисковый запрос, чтобы узнать о нём).

https://ishadeed.com/article/uncommon-css/

Вообще, хороший автор. Видно, что он в начале очень эффективного пути.

#css

Наглядное отличие алгебры от теории алгоритмов.

На КДПВ — паттерн и его алгебраическое решение.

В тексте ниже — аналогичный CSS:

li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
color: red;
}

Выводов не будет, в тред приглашаются математики :)

Статья переехала 👇

#css #fonts #шрифты

Очень часто в коде многих верстальщиков я наблюдаю примерно следующее:

font-weight: normal;
font-family: BrutalType-Bold, sans-serif;

Кажется, не все люди понимают, что же такое @font-face и с чего начать подключение шрифтов. Давайте разбираться.

Статья слишком длинная для канала, поэтому прочесть её можно на Телеграфе: https://telegra.ph/CHto-takoe-font-face-07-16

#js #es #esnext #webpack #twitter

Отличный тред Андрея Ситника о том, что же не так в мире ES-модулей и почему радоваться рано.

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

https://twitter.com/andrey_sitnik/status/1229753395961044993

#фишка дня
#color

Telegram стал показывать в бета-версии цвет рядом с HEX-представлением, как в большинстве современных IDE и редакторов. Если нет — у вас или старая версия, или X. Ждите обновлений!

#FF33FF

По этому поводу давайте вспомним, что когда-то в вебе был определён набор “безопасных” цветов в количестве 216 оттенков (https://www.artlebedev.ru/colors/). Сейчас, конечно, это не имеет никакого смысла, лишь как артефакт эпохи.

Вот некоторые из них:

#FF0000
#FF6600
#FFFF00
#00FF00
#0099FF
#0000FF
#9900FF

Кстати, не будет лишним напомнить, что все “безопасные” цвета могут быть записаны в трёхзначном, а не только шестизначном формате:

#09f

Вот только Telegram, к сожалению, пока такой формат не поддерживает.

#статья дня #html #js

Разработчики #Google выкатили статью о том, что же изменилось в атрибуте loading для “ленивой” подгрузки изображений с момента первого релиза.

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

https://web.dev/native-lazy-loading/#improved-data-savings-and-distance-from-viewport-thresholds

#статья #css #img

Опрос показал, что тема проклятого отступа внизу изображений волнует многих.

Итак, встречайте вторую статью в нашем Телеграфе: Загадка дыры.

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

Особая благодарность Виталию из канала Просто: разработка за идею и редактуру.

#статья дня
#css #inline #layout

На CSS-Tricks вышла статья про статус inline-block в 2020 году.

Что такой inline-block? Это значение свойства display, которое позволяет строчным элементам иметь свои собственные размеры, отступы, поля.

Раньше оно часто использовалось для формирования сеток, но приходом flexbox-модели это стало не нужно и про inline-block многие вообще забыли.

Статья рассматривает варианты, когда оно всё ещё может быть полезным:

1. Для трансформации inline-элементов в строке, поскольку иначе к ним трансформацию применить нельзя

2. Позволяет обойти неприятную особенность CSS-колонок, а именно, их разрыв посреди контентной части.

3. Помогает быстро и лаконично сделать список горизонтальным.

Остальное, а также примеры плохого использования, читайте тут: https://css-tricks.com/when-do-you-use-inline-block/

Нелишним будет упомянуть и статью на прекрасном ресурсе css-live.ru, повествующую об интересных примерах использования inline-block с гораздо большим погружением в тему: https://css-live.ru/articles-css/udivitelnyj-i-neizvestnyj-inline-block.html

#фишка дня
#css #keyframes #animation

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

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.