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

#инструмент дня Если вам этим утром было так же нечего делать, как и мне, вы могли поуправлять своим ноутбуком с электронной читалки! Кроме шуток :) Оказывается, есть такой инструмент удалённого доступа: noVNC. Это реализация VNC-клиента для браузера. И в Windows, и в MacOS и уж тем более в Linux есть средства удалённого доступа, поддерживающие этот протокол. На примере MacOS он называется Remote Management. Ещё не так давно он не поддерживал VNC, но уже некоторое время всё отлично работает. Правда, конфигурация его контр-интуитивна. По-умолчанию запрещено вообще всё, но система просто говорит тебе, что пароль неверен. Итак, в чём же была основная сложность? А в том, что VNC-поток должен шифроваться. И если в обычных браузерах есть Web Crypto API, что позволяет ходить на сервер без HTTPS, то вот браузер в Kindle, пусть и был недавно прокачан (и теперь похож на настоящий), эту самую криптографию не поддерживает. А мне почему-то очень было интересно посмотреть, как это — дополнительный E-ink экран. Пришлось генерировать сертификат самостоятельно, на эту мысль меня навёл Роберт Андерберг, показавший саму идею в Твитере:

openssl req -x509 -nodes -newkey rsa:2048 -keyout novnc.pem -out novnc.pem -days 365

...ответив по пути на кучу бестолковых вопросов «ты кто такой»... Ну и запускаем сервер нашего клиента:

./utils/novnc_proxy --vnc localhost:5900 --ssl-only --cert novnc.pem

И всё проходит прекрасно. К сожалению, на Kindle не поддерживается поворот экрана в браузере. Даже ковыряние в SQLite-базе настроек не помогло... Но! Можно выключить масштабирование и использовать скроллбары. Или подключить Kindle к Raspberry Pi c медиатекой или умным домом, там разрешение неважно. В общем, меня это ковыряние очень позабавило. Надо попробовать протащить в noVNC поворот холста, и будет совсем хорошо. Как часто на вас находят подобные эксперименты, котаны? #vnc #remote #eink

🔥 Программистика находка для каждого питониста Проведём за ручку от самых простых проектов до сложных. Расскажем самые трудные концепции простым языком. Научим не боятся сложных задач и наслаждаться своей работой 👍Подписывайся и развивайся

#codepen дня Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи. Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY Я форкаю кодпены, потому что они имеют особенность пропадать. Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :) #css #vertical #text

#фишка дня Когда-то давно я слышал о таком свойстве, как text-align-last. Что оно делает? Ну, думаю, всё понятно из иллюстрации :) Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/ С интерактивным примером, как вы любите. Почему я акцентировал на нём внимание? Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге. В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :( Но есть же наш уютный канальчик, мы тут всё вспомним :) #css #thefuturepast

Ещё вчера они отвечали за код и технологии, а сегодня в их подчинении специалисты, к которым никто не приложил инструкцию. Да, быть начинающим управленцем в IT — рискованно, но интересно. Открывается много новой информации и определений. Насчёт определений — в карточках собрали несколько ключевых, которые познакомят вас с профессией руководителя в IT поближе. А по поводу новой информации: в Практикуме появился курс по управлению командой разработки с воркшопами, личными консультациями и интерактивным учебником. → Начните учиться бесплатно

#фишка дня Является ли CSS языком программирования? Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко. Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции. Тригонометрические вон завезли недавно, а математические пока только в Safari. Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля: --abs: max(var(--a), -1*var(--a)); Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём. Теперь к сути дела. Давайте реализуем round: @property --round { syntax: '<integer>'; initial-value: 0; inherits: false; } --round: var(--a); Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание). А как сделать floor — округление вниз? Как-как: --floor: calc(var(--a) - .5); А ceil — округление вверх? --ceil: calc(var(--a) + .5); Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа. Кажется, уже стало немного больно, поэтому получение знака числа и двух разных остатков по делению реализуем потом. Пока можете подумать, где это применить 😉 #css #types

​​#инструмент дня Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается. Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392 Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой. https://yqnn.github.io/svg-path-editor/ #svg #path

Узнайте, как сделать ваш сайт быстрее и безопаснее, на бесплатном курсе Base cloudfort Вас ждут 8 уроков с теорией и практикой, где опытные эксперты поделятся своими кейсами и реальными примерами. Обучение будет проходить в формате видеолекций и общения с преподавателями в чате, так что у вас всегда будет поддержка и ответы на вопросы. Что вы изучите: — Ускорение сайтов и защиту от DDoS-атак. — Основы CDN и методы балансировки нагрузки. — Принципы работы с медиахранилищем и адаптацией медиаконтента. — Как запустить онлайн-трансляцию без лишних затрат. Участники также получат бесплатный доступ к новому продукту cloudfort для защиты и ускорения сайтов. Сервис позволяет создавать S3-хранилища, ускорять веб-ресурсы и включать защиту от кибератак. Регистрируйтесь на курс по ссылке. Реклама ПАО «ВымпелКом», beeline.ru erid: LjN8K9NV5

#расширения дня Сидишь такой на сайте, понравилась палитра. Надо бы потырить посмотреть концепцию. Открываешь девтулзы и тихо умираешь от бестолковости представления цветов в переменных... А ведь почти любой большой проект уже использует CSS-переменные для дизайн-систем и не стесняется. Но выход есть! И это — расширение Designgui от Джеймса Четвуда. Пока умеет не особо много: показывает список переменных с цветами, позволяет их менять или экспортировать разом, позволяет сгенерировать ИИ-палитру на основе переданных значений. А ещё в ней заложена работа с UI-китами и дизайн системами. Пока только Shadcn UI и Daisy UI, но начало положено: все токены на местах. Думаю, надо делать такое же расширение, но для анимаций... А то вытаскивать их всё сложнее, обмажутся тейлвиндами... ну да ладно. Ссылка на вебстор Хрома: https://chromewebstore.google.com/detail/design-gui/ldhbojdgokammocadfgbidodgffnimfj?pli=1 #css #var #color #design

#заметка дня Делаешь задачу, наступает конец дня, но осталось совсем чуток? Несчастные 10%? Отлично, закрывай ноутбук и иди домой. Или спать. Или домой спать. Или не домой. Да, в текущем моменте это покажется, мягко говоря, так себе затеей, зато следующий день можно начать с лёгкой победы. Бодрит получше, чем кофе. И настроение твоё улучшится.