#заплакала дня

Не успел я на работе выйти в декрет (в Финляндии отцам можно брать до 56 дней отпуска по уходу за ребёнком, из них 18 одному), как из моей команды решила уйти стажёрка. Я ж тут вроде как личинка тимлида, нашу большую команду делят на три части в каждой по 3-4 человека. По продуктам.

Процесс этот, как впрочем и все процессы в финских компаниях, довольно эффективный, но очень не быстрый. Окончательное формирование команд планировалось завершить к осени.

И очень обидно, что уходит хороший стажёр, которой собирались дать должность джуна. И уходит она не просто из команды, она заявила, что «не подходит для разработки».

Довольно грустно, у неё это весьма хорошо получалось. Но хочет уйти в UX/UI-дизайн. А продукт наш слишком кондовый чтобы позволить ей успешно развиваться в этом направлении.

Чем хороша Финляндия, сменить область деятельности и пойти обучаться. можно практически в любом возрасте и в любое время. Без поддержки не останешься и никто косо не посмотрит, программ для обучения огромное количество.

Естественно, я ощутил некий укол вины, ведь курировал последние четыре месяца её именно я, но желаю ей удачи и надеюсь, что своё призвание она найдёт.  

#life #finland #work

#статья дня

Ну и раз я уже начал писать про нашу компанию, вот сегодняшняя статья дня — первая в корпоративном блоге на dev.to.

Мой коллега James Elderfield написал о простой и легкоподдерживаемой обработке ошибок в TypeScript: https://dev.to/supermetrics/simple-and-maintainable-error-handling-in-typescript-56lm

Круто работать с людьми, которые в чём-то лучше тебя. Только так и можно развиваться :)

#typescript #error #errorhandling

#codepen дня

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

Время повышать планку. Каждый верстальщик теперь тоже должен написать калькулятор.

И даже не шучу, глядите: https://codepen.io/lillian-kodi/pen/YzZLebR

Он на десктопе точно работает, а вот на мобилах что-то через раз.

Тут разбираться и разбираться. Но точно можно сказать, что число хаков ужасающе мало. Почти всё легитимно.

Сходу можно сказать, что каждая кнопка создаёт свой слой. Нажали на радиокнопку — стал активен следующий слой. И так далее.

Ждём статью от автора, разберёмся: https://twitter.com/LillianKodi/status/1401325452581613568

#css #calculator #awesome

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».

Впрочем, он же пишет, что повторить подобное поведение ему не удалось.

Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.

#css #darktheme #filter

#заметка дня

— Э, что это за обводка на полях и ссылках? Убирай.

Знакомо же? Отключение подсветки, box-shadow, focus-visible...  Но хочется же как-то проще решить вопрос.

И тут нас встречает свойство outline-offset. Ага, можно управлять отступом контура от элемента. И это уже будет выглядеть интереснее.

А главное, это свойство — анимируемое, глядите: https://codepen.io/alinaki/pen/GRWXeae

Элегантно и максимально просто. Автор идеи — Adam Argyle.

#css #focus #outline

Посмотри на ДЕЙСТВИТЕЛЬНО ужасный код: @badcode_tg

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

Ну наконец-то! В Chrome 92 полноценно заработал редактор CSS Grid с удобной панелью. Не очень понятно, что у них заняло так много времени :) Редактор флексов был давно.

Полный список изменений: https://developer.chrome.com/blog/new-in-devtools-92/

Ещё из интересного: добавили индикацию Quirks Mode (почему сейчас-то?) и возможность записи действий для Puppeteer.

#chrome #devtools

#codepen дня

Уже любимая всеми нами Ана Тюдор совсем не так давно написала шикарную статью о том, как стилизовать ползунковый контроллер, в простонародье input[type=“range”]: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

Вообще, это статья о том, как сделать вариант с двумя ползунками. Просто разделение на составные части виджета и объяснение принципа даны прекрасно.

Но мы тут собрались готовые решения смотреть. И вот они, целая коллекция ползунков: https://codepen.io/collection/DgYaMj?sort_order=desc&sort_by=item_updated_at

На любой вкус и цвет! Двойные и одиночные. Подобрать можно под практически любой дизайн.

Пользуйтесь 😉

Важное дополнение к посту выше: эта коллекция собиралась и пополнялась автором не один месяц. Не стесняйтесь использовать сортировку и вообще копаться в ней 🤗

Тем временем, пост я поправил, чтобы ссылка сразу эту сортировку включала. Приношу свои извинения.

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

Очередной генератор сеток CSS Grid: https://css-grid-layout-generator.pw/

Не говорите мне, что это масло-масленое. Многие до сих пор мыслят категориями Bootstrap и т. п., каждый раз приходится уточнять 👀

Так вот, этот довольно сложный.

Мне кажется, проще выучить спецификацию гридов, чем разобраться в нём 😅

Но упоминания стоит.

#css #grid #generator

Видишь классный макет, но не знаешь как его сверстать?

Канал «Просто: разработка» может тебе помочь. Его автор публикует ценные статьи, а также авторские наработки, которые помогут верстать макеты любой сложности!

1. Откуда горизонтальный скролл?!
2. Доступные цвета
3. Часы БЕЗ на HTML и CSS (без js)

YouTube-канал с уроками, а также чат на тысячу человек — прилагаются.

#реклама

#статья дня

…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).

1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.

Звучит страшно, но статьи прекрасно оформлены, с большим количеством схем, и написаны простым языком. В общем-то, я бы назвал эти знания обязательными.

#css #javascript #layout #handbook

#codepen дня

Заказчики и дизайнеры пищат от кнопок, ссылок и прочих виджетов, направление эффекта по наведению мыши на которых зависит от, собственно, направления движения курсора.

Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx

В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.

Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪

Те, кто делал скруглённые уголки, поймут. Вот только технологии сильно вперёд ушли и теперь перед нами пользовательские свойства.

История точно движется по спирали.

#css #component #directional

Для тех кто просил, канал с мемами для программистов и айтишников

t.me/it_memes_tg

#реклама

#ссылка дня

Eleventy — это простой, но мощный генератор статических сайтов.

Суть его в том, что вы имеете доступ к мощной и разветвленной системе шаблонов, шорткодов и обработчиков запросов к разным API, но только в момент сборки. После чего получаете чистый HTML. Без CMS и прочего бакенда, пока сами не захотите. Мне вот нравится черновики статей в Markdown готовить.

Кайф в том, что Eleventy никак не ограничивает вас в инструментах сборки и постобработки. Webpack, Snowpack, Gulp — что угодно. Хоть виджеты на React вставляйте.

В общем, вот бесплатный курс по нему: https://piccalil.li/course/learn-eleventy-from-scratch/

Сейчас сам тоже его буду проходить. Ибо сайт канала максимально прост. Слишком прост 🤷‍♂️

#11ty #eleventy #course

#статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Классика вечна :)

#css #svg #gif #animation

FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков: 
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Проверь свои знания на @frontendquiz

#реклама

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

Знакомая ситуация? 👆

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

Всё просто: подсвечивает блоки кода, что очень часто бывает довольно удобно. Причём, не прямоугольниками, а всю область видимости целиком.

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

На самом же деле, чтобы не попадать в такие ситуации, старайтесь не допускать большой вложенности кода. Но уж если так получилось…

#vscode #extension