Собрали советы от старшего исследователя MTS AI Аммара Али, выигравшего семь конкурсов по искусственному интеллекту, организаторами которых были Google, NASA, AI Journey. 

Итак, если вы хотите побеждать в международных соревнованиях по ИИ, вам нужно:

1. выбрать направление, в котором мы чувствуете себя увереннее всего;
2. начать участвовать в соревнованиях, не бояться и не думать, что это что-то невероятно сложное;
3. превратить конкурсы в свое хобби и почувствовать драйв от турниров по ИИ;
4. подавать заявку как можно раньше, чтобы больше времени было на подготовку; 
5. совершенствовать свое решение каждый день понемногу - так больше шансов, что к финалу подачи заявки вы будете одними из лучших.

Если хотите участвовать в соревнованиях по ИИ, готовить статьи для крупнейших научных изданий, приходите работать в MTS AI. У нас есть целый отдел фундаментальных исследований и еще крутые позиции для разработчиков. Вакансии смотрите по ссылке.

#фишка дня

Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.

Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.

С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.

Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/

Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

Помогайте своим пользователями, браузерам и менеджерам паролей.

#html #autocomplete #form #бородач

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

#css #fullbleed #бородач

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

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

Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...

И тут выходит VanJS со своими 0.9kB: https://vanjs.org/

Сразу пример кода:

const Hello = () => div(
  p("Hello"),
  ul(
    li("World"),
    li(a({href: "https://vanjs.org/"}, "VanJS")),
  ),
)

van.add(document.body, Hello())

Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!

А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)

#van #framework #js

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform

#такое дня

Thank you CSS!

P. S. соус

#заметка дня

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

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

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

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

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

#бородач

#грусть дня

Умер создатель редактора Vim — Брам Моленар (Bram Moolenaar) 😢

Вот собственно, сообщение его семьи: https://groups.google.com/g/vim_announce/c/tWahca9zkt4

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

:wq!

#codepen дня

The next big thing после Scroll-driven animations в CSS это View Transitions.

Когда в предложении английских слов больше, чем русских.

О чем же речь? Ну, представьте себе, что вы сможете задавать элементам анимации не только на прямые воздействия, но и на изменение DOM или смену страницы в браузере. Какой элемент должен уйти совсем, какой — уступить своё место другому. И всё это — в CSS.

Яркий пример такого взаимодействия — сортировка. Благодаря Адаму Аргайлу у нас есть и демонстрация: https://codepen.io/argyleink/pen/rNQZbLr

В браузерах, которые не поддерживают View Transitions, элементы просто поменяют свои места. А в Chrome 111 и выше — с анимацией :)

Имеется статья в блоге разработчиков Хрома, с огромным числом примеров: https://developer.chrome.com/docs/web-platform/view-transitions/

Ну а мы с вами ещё вернёмся к ним, котаны. И сайты будут еще больше похожи на нативные приложения :)

#css #view #transition

#фишка дня

Давайте сегодня продолжим тему SVG.

Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.

Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111

Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().

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

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

1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.

Вуаля: https://codepen.io/alinaki/pen/eYPmayO

Такое можно и с текстом провернуть, кто первый? :)

#svg #path #length #бородач

#видео дня

Ох какую я вам мякотку нашёл, котаны! Только представьте как было бы круто иметь руководство по такому сценарию:

1. Тебе не нравится что-то на каком-то сайте.
2. Открываешь девтулзы, вешаешь слушатель изменения атрибута или контента ноды.
3. Включаешь дебаггер, находишь точное место.
4. Меняешь код, тестируешь.
5. Заменяешь файл на локальный.
...
6. PROFIT!

И по этому поводу я решил принести вам видео как починить Тwitter. Ой, простите, X. Ну нельзя же на канале совсем без хайповых тем!

Получилось прекрасное руководство, целый скринкаст.

Не сцыте менять мир как вам нужно, котаны!

#js #devtools #debug

#презентация дня

Раз уж я упомянул не так давно и Scroll-driven Animations и View Transitions API в одном сообщении, надо идти дальше.

Хорошо уже нам известный товарищ Ван Дамм, который Брамус, собрал всё в кучу. Он давно оседлал тематику скроллозависимых анимаций и теперь, с выходом Chrome 115, пушит максимально.

Итак, встречайте: Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)

Ну и сразу ссылку на видео: https://youtu.be/nFbuXdEU-oA

#css #scroll #view #transition

#фишка дня

Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.

Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.

Пользуемся 💝️️️️️️

#devtools #debug

#такое дня

Это дежурное напоминание о том, что если доступность вашего сайта зависит от геополитической ситуации в мире — вы что-то делаете не так.

Например, мне бы в голову не пришло выбрать домен в зоне .AF — Афганистан. А вот паре грандов в мире фронтенда, Вес Босу и Джейсону Ленсторфу так не показалось.

И этот день настал: регистраторы доменов не могут связаться с лицами, ответственными за доменную зону .AF.

Бизнес обоих зависел от сайтов, веселье! Зато крутая доменная зона, ага.

Думайте, котаны, где регистрируете проекты.

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

Tailwind CSS при всех своих спорных моментах понравился многим людям. Кто-то не парится и пишет все атомы в классы, кто-то берёт компонентный подход и собирает компоненты на базе его DSL (domain-specific language), чтобы потом скомпилировать их в чистый CSS. Но, оказывается, есть и альтернативный подход: panda.

Что такое Panda CSS? Это CSS-in-JS движок, который собирает человекочитаемые атрибуты или пропсы компонентов в атомарный CSS-файл. Да, в файл, который создаётся в момент сборки, не в рантайме!

Есть три варианта описания стилей, мне больше всех импонирует компонентный подход, с пропсами.

В общем, такой атомарный CSS мы покупаем.

#css #react #cssinjs

#заметка дня

Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.

Я пока не видел хороших и правильных примеров использования ChatGPT, если честно. Единственный известный мне случай подобного поведения кандидата вызывает нервный смех, потому что ему стоило честно сказать: "Не знаю". Он буквально понятия не имел даже как задать вопрос правильно, но с каменным лицом доказывал, что так и надо. Наверное, получился бы хороший продажник.

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

Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.

Я лично нанимал фронта, который не стеснялся гуглить во время собеседования. Прям стримил экран и искал. Где-то для выжимки из доки, где-то чтобы посмотреть альтернативы алгоритму.

А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!

А вот того, кто во время собеседования гуглил меня, мы не взяли...

А как у вас дела обстоят и опыт?

#work #interview #собеседование

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

Что делать, если нужно срочно проверить какую-то гипотезу или сгенерировать набор строк, покадровую анимацию или что-нибудь ещё в таком духе?

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

Например, что-то пошло не так и ваш любимый язык — JavaScript. Написали, выполнили node index.js и радуетесь выводу.

Впрочем, есть другие варианты. Консоль браузера, codepen.io, codesandbox.io, jsfiddle.com... Но давайте что-то локальное.

Первый вариант: RunJS (на видео). Бесплатная версия достаточна чтобы играть роль бесконечной удобной консоли. Платная включает npm, вкладки, автодополнение, ENV-переменные и проверку типов.

Второй вариант: расширение CodeRunner для VS Code. В отличие от RunJS поддерживает больше языков и встраивается прямо в редактор.

Третий, естественно: scratch files в IDE от JetBrains. Дебаггер, HTTP-запросы и среда выполнения из коробки.

Всем удачной проверки гипотез, котаны!

#js #runtime #coderunner

#такое дня

Когда-то давным давно, во времена первых браузеров и изобретения JavaScript, кто-то подумал, что было бы неплохо получать доступ к элементам в глобальном пространстве имён. Речь идёт в том числе об атрибуте name для ссылок.

Вам все знакомы якоря вида #cheatsheet в адресной строке браузера. Да-да, хештеги не взялись из ниоткуда.

Так вот, пока браузеры пытались договориться (не пытались), что же должно быть индикатором доступа, name или id, вышло так, что IE сделал элементы с id свойствами не только объекта document, но и объекта window. А остальные, естественно, скопировали.

Что это значит? А то, что если вы добавили id элементу, то этот самый элемент стал доступен как переменная в глобальном пространстве ваших скриптов. Без объявления! Буквально вот так: https://codepen.io/alinaki/pen/zYLJVZN

Если кому интересно подробнее почитать, что куда и как попадает, спецификация ответит на этот вопрос: https://html.spec.whatwg.org/multipage/dom.html#dom-tree-accessors

Но если коротко: не надо это использовать если вы не на хакатоне. Приведёт к таким спагетти, что мало не покажется.

А вот знать надо.

#js #dom #node #бородач

#история дня

27 лет назад вышел Internet Explorer 3.0.

13 августа 1996 года появилась версия для Windows, а 8 января 1997 — для Mac OS (да-да, она тогда не macOS называлась). Было же время...

Что же такого в нём примечательного?

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

В то время CSS использовался чтобы помечать посещенные ссылки фиолетовым.

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

А ещё была своя реализация JavaScript: JScript. И предлагалась поддержка VBScript... я свой первый веб-проект на нём писал, не особенно содрогаясь.

Работал браузер на 386 с Windows 3.1, требовал от 4 MB оперативной памяти, 12 MB — если хотелось Java 🤯

Посмотреть скриншоты и видео можно в музее веб-дизайна: https://www.webdesignmuseum.org/old-software/web-browsers/internet-explorer-3-0

Взгрустнулось, котаны? 😅

#css #ie #history