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

#заметка дня Половина мемов про работу программистом построены на том, что работа и собеседование редко бывают связаны. Лайвкодинг, алгоритмы, большая О — это всё лишь способы напустить дыму, не правда ли? :) И тем забавнее, когда возникает рабочая задача, которая как раз лежит себе на литкоде слово в слово. Итак, ситуация: пользователь продукта жалуется, что данные в Excel меняют своё местоположение, когда обновляются. Диагностика проблемы: начиная с колонки BO неверно рассчитывается её порядковый номер. Решение же на экране, но тем забавнее, что проверяющий пулл-реквест коллега как раз на днях эту же задачу решал на Leetcode. А вот предыдущий код расчёта был достаточно плохо протестирован на граничных значениях колонок... Но много лет работало без проблем :) Странное чувство, в общем. #leetcode

🚀 CodeRun — Тренажёр для прокачивания навыков 🚀 Привет! Мы рады сообщить, что CodeRun, созданный разработчиками для разработчиков, выходит из беты и запускает второй сезон — захватывающее соревнование на знание технологий! Что такое CodeRun? CodeRun — это бесплатный онлайн-тренажер Яндекса для разработчиков, где можно не только улучшать свои навыки, но и выигрывать ценные призы! Тренажёр предлагает огромный каталог задач с адаптируемой сложностью, чтобы каждый нашел что-то по душе. Главные фичи CodeRun: Авторские и тематические подборки — специально разработанные задачи, чтобы вы могли тренироваться и учиться новым техникам. Скриншотные задачи для фронтендеров — уникальный формат задач, который проверяет ваши навыки в создании интерфейсов. Сезонные турниры с призами — участвуйте в наших турнирах и боритесь за звание лучшего разработчика. 🔥 Второй сезон уже начался! 🔥 Присоединяйтесь к соревнованию, набирайте баллы и выигрывайте призы. Победители смогут залутать: ✅ фирменный мерч, ✅ сертификаты, ✅ награждение в офисе Яндекса, ✅ возможность попасть в штат по упрощенному найму. Не упустите шанс показать свои навыки и стать частью команды Яндекса! 📚 Хочу узнать больше! 📚 Переходите на сайт CodeRun и узнайте все подробности. Прокачивайтесь, соревнуйтесь, побеждайте!

#новость дня Посмотрите на иллюстрацию. Ничего интересного не замечаете? А здесь происходит ого-го какая драма! Итак, чуть больше года назад я уже знакомил вас с совершенно новым браузером, который не использует ни один существующий движок. И это — браузер Ladybird. Если коротко, есть такой чувак, Андреас Клинг. Долгое время он работал над движком WebKit в Nokia, а потом и над браузером Safari в Apple. А потому немного... в общем, оказался в центре реабилитации. Выйдя оттуда, ему потребовалось чем-то себя занять (блин, звучит как история BMTH), потому он создал операционную систему SerenityOS. Суть её была в том, чтобы написать Unix-подобную ОС без использования сторонних библиотек. Постепенно вокруг проекта даже образовалось сравнительно большое сообщество. И вот, разрабатывая просмотровщик HTML-документации, ребята случайно написали браузер. И так получилось, что браузер стал развиваться быстрее чем материнский проект. И месяц назад Андреас решил, что будет заниматься только им, выпустив соответствующее уведомление. И вот тут началось самое интересное. Все так наелись монополии Google, что новость взлетела с дикой скоростью. Казалось бы, зачем нам ещё один движок и тем более — браузер? Но запрос есть. Начиная от энтузиастов, заканчивая слабомощными машинами и телевизорами. В общем, пару дней назад стало известно, что в некоммерческую организацию, созданную под Ladybird, инвестировали 1 миллион долларов. И не кто иной, а Крис Ванстрат. Не знаете, кто это? А это сооснователь GitHub. И он не один такой. Shopify тоже в спонсорах. В общем, мир наконец-то снова стал интересным. На скриншоте — браузер, собранный мной за пять минут до этого поста. Это очень легко. И пусть он пока не умеет всего, что умеет Chrome, я верю в его светлое будущее. #web #browser #ladybird

#инструмент дня Если вам этим утром было так же нечего делать, как и мне, вы могли поуправлять своим ноутбуком с электронной читалки! Кроме шуток :) Оказывается, есть такой инструмент удалённого доступа: 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