Будни разработчика

#фишка дня Многие недооценивают css variables, особенно при небольшой поддержке javascript. Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное? А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой). Идея для использования - динамический брендинг. Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара. Пример кода показывает насколько это легко понять и использовать. https://codepen.io/glebcha/pen/gbpwbob #css #var #бородач

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗 ✓ Как совместить кучу рабочих задач и личную жизнь? ✓ Как научиться отвлекаться от работы и отдыхать? ✓ Как справиться с прокрастинацией? ✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии

#такое дня Люди в LinkedIn, конечно, странные. Удивительно, что useEffect и use ничему его не научили в продажах. Но не суть. А суть в том, что ребята из React, конечно, как продолжали вносить смуту и вытаскивать наружу внутренние особенности реализации, так и продолжают. И никакие You Might Not Need an Effect тут уже не помогут. Но вообще, конечно, просто смешная картинка. Ведь очевидно, что нужно использовать Effector React Query. #react #thoughts

#ссылка дня Дамы и господа, мы зашли слишком далеко. Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS! Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через анимации. «Процессорный цикл» — это просто тик анимации. Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной. Как это выглядит в упрощённом виде. Тик процессора:

    
        
@property --ip {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tick {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.cpu {
  animation: clock 0.1s steps(1) infinite;
}

@keyframes clock {
  to {
    --tick: calc(var(--tick) + 1);
  }
}

.cpu {
  --ip: calc(var(--ip) + var(--tick));
}
{}
    

Анимация создаёт шаг. На каждом шаге меняется состояние. От состояния зависит, какие инструкции сработают дальше. Ввод — тоже без JS. Например, зажатая кнопка:

    
        
.key:active ~ .cpu {
  --running: 1;
}

.cpu {
  --running: 0;
  --ip: calc(var(--ip) + var(--running));
}
{}
    

Пока кнопка нажата — переменная меняется и влияет на вычисления. В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их. Практической пользы — ну, нет. Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда. Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение. #css #cpu #x86 #hack

#фишка дня CSS anchor positioning aka якоря могут реально поменять то, как мы с вами реализуем интерфейсы, требующие графового представления: CJM, майндмапы, блок-схемы, пайплайны... Темани Афиф недавно сделал пример, соединив круги стрелками и набросив немного JS для drag&drop: https://css-tip.com/connected-circles/ Потом немного улучшил: https://css-tip.com/connected-circles-2/ И пару дней назад пошёл ва-банк и представил буквально реализацию поиска кратчайшего пути в графе: https://css-tip.com/graph-theory/ Выглядит, конечно, весьма сложно. Но следующим шагом, видимо, будет транспиляция Mermaid в CSS... Зато самому алгоритм стрелок реализовывать не придётся! 😂️️️️️️ #css #anchor #graph

Backend реальности или скрытые механизмы этого мира Любой разработчик знает, что за каждым интерфейсом, плавной анимацией или кнопкой, на которую хочется нажать, стоят тысячи строк кода. Кода, который долго оттачивали, рефакторили и дебажили. Пользователь видит картинку — мы видим архитектуру, логику и зависимости. В жизни всё устроено точно так же. За каждым крупным событием, культовым брендом или социальным трендом стоит своя «кодовая база» — смыслы и механизмы, которые не видны при беглом взгляде. Если вам привычнее мыслить системами, а не картинками, загляните в канал «Рабочая философия». Там занимаются деконструкцией реальности. Это разборы того, как на самом деле устроено поведение людей, на какие «скрытые спецификации» опирается наш мозг при принятии решений и как конструируются смыслы, управляющие миллионами. Советую к прочтению: → Как Нетфликс конструирует реальность? → Как один ритуал превратил стартап в систему за $730 млн (кейс Ironman) → Баги восприятия. Как реклама обходит наши фильтры и заставляет покупать ненужное → Как человек превратился в «символическое животное» и почему мы живем в мире знаков Полезно читать, чтобы понимать правила игры, в которую мы все вовлечены. Даже если вы не собираетесь «строить бизнес», знание того, как устроены социальные механизмы, дает огромное преимущество в критическом мышлении — @journey_liceum

#заметка дня В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?" Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода! Он очень давно и хорошо поддерживается, так что почему бы и нет. Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать. И, конечно, пример: https://codepen.io/alinaki/pen/xxMpgLK?editors=1100 Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится! Всем бу, котаны! #css #placeholder #svg #sprite #бородач

#ссылка дня Каждый из нас при взгляде на кодовую базу когда-нибудь ловит себя на мысли "есть ли вариант элегантнее и проще, может спецификацию обновили". Особенно это актуально в контексте стилизации (к счастью сейчас развитие спецификации можно назвать стремительным). Но чтение разрозненных статей/заметок, попытки получить внятный ответ ИИ зачастую вносят лишь сумятицу. Ведь хорошо когда можно найти готовые примеры современных решений частых (и не очень) задач в сравнении до/после. Еще лучше когда для каждого примера указана поддержка браузерами использованных свойств спецификации. https://modern-css.com содержит пока небольшое количество примеров, но с понятным описанием и ченжлогом