14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Google Chrome на днях достиг версии 124. Что это значит? Что у нас очередные обновления в DevTools!
Из наиболее интересного — инспектор анимаций теперь поддерживает нативные анимации по скроллу (на видео).
Если вы ещё не в курсе, что это, рекомендую посмотреть это демо: https://scroll-driven-animations.style/
К слову, автор демо — Брамус Ван Дамм — заодно представил расширение, позволяющее удобно эти самые анимации визуализировать и отлаживать. Есть и полифилл для ScrollTimeline.
Следующая фишка, которая будет, внезапно, полезна не только разработчикам — это отладка контента для автоподстановки в формах — Autofill! То есть теперь можно открыть форму и посмотреть, как и чем она будет заполняться. С точки зрения разработчика это значит, что появился шанс подогнать названия полей под соответствие системе распознавания.
А ещё в DevTools теперь нормальная поддержка нативного нестинга aka вложенности!
Ну и раз такое дело, пусть на всякий случай тут полежит ссылка на список изменений в Chrome 124: https://developer.chrome.com/release-notes/124
#css #chrome #devtools
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
▪️ Как научиться отвлекаться от работы и отдыхать?
▪️ Как совместить кучу рабочих задач и время с семьей?
▪️ Как справиться с прокрастинацией?
▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайся на канал @vadimpetrov_psy и научись работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходи в закреп канала - там много полезного, и даже бесплатный мини-курс.
Лучший менеджер – это бывший программист?
На YouTube-канале «Технологий в Контуре» вышел новый выпуск «Согласен / Не согласен». В шоу контуровцам разных ролей дают холиварные тезисы, которые связаны с их профессиями. И они либо соглашаются с ними, либо нет.
В этом выпуске спорят программист и менеджер разработки. А это значит в выпуске про полезность дейликов, тикеты на каждый чих, софт-скиллы – в общем, все то, на что жалуешься на обеде и на тех самых дейликах 🌚
Переходите смотреть шоу и подписывайтесь на канал «Технологии в Контуре» – СнС выходит раз в две недели, а еще ребята публикуют выступления и доклады с митапов.
#такое дня
Финляндия снова оказалась в мировых IT новостях, но на сей раз ситуация грустная для всех... разработчиков финансовых и платёжных систем.
А всё почему? А всё потому, что правительство Фи планирует повысить НДС до 25.5%.
Самые опытные из вас уже поняли, в чём проблема. И будут абсолютно правы. Потому что это не только офигеть какой высокий налог, но и первый случай нецелого значения налога.
А разработчики, как мы давно знаем, работать умеют только с целыми числами.
Если налог всё же будет введён, он резко превратится в лучшем случае в 26%, что вызовет тонну претензий, а в худшем — вызовет ошибки транзакций.
Ладно, скажете вы, нам-то зачем рассказываешь это? Мясо, мясо давай!
А вот и мясо. Глядите, на иллюстрации — API платёжной системы Paytrail. Прямо указано целое число. И ну всё бы ничего, но они обсуждали это... 2 года назад!
Вот: https://github.com/paytrail/api-documentation/issues/28
И тогда пришли к выводу, что не надо. А оно вот как вышло. Уже вовсю начали выдумывать варианты решения.
А сколько финансовых систем ещё в мире? :)
P. S. Я думаю, следующей новостью из Финляндии будет: «В связи со сложностью внесения изменений в информационные системы правительство приняло решение поднять НДС до 26%».
#api
#codepen дня
Я вообще хотел очередной дедовской разгон на тему вёрстки и общения с заказчиком, но мне чота в лом. Может открытую дискуссию устроим под этим постом…
А сам пост будет посвящен прекрасному примеру использования SVG-фильтров на реальном контенте.
Помните, я когда-то показывал газету на CSS-grid? Ну вот же: /channel/htmlshit/508
А представьте, клиент захотел, чтобы ваша газета реально была стилизована под едва сохранившийся архивный экземпляр… ну или ксерокопию, в цифровом мире же живём. Как это сделать? Не картинкой же, чесслово.
И вот тут на помощь придёт реализация шума Перлина aka Perlin Noise для SVG: https://codepen.io/simoncoudeville/pen/zYRygaV
Можно побаловаться настройками внизу, можно изменять контент как душе угодно. Абсолютно прекрасный по своей сути пример.
#svg #effect #filter #бородач
#инструмент дня
Генераторов треугольников на самом деле достаточно много... было создано лет за 20. Поэтому почти все из используют довольно старые техники. Или же вообще универсальные aka clip path.
Потому, встречаем:
https://css-generators.com/triangle-shapes/
Рассчитаны под один элемент. Пример кода:/* HTML: <div class="triangle"></div> */Заценили расчет соотношения сторон, кстати? 🤓
.triangle {
width: 180px;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% 100%,100% 0,0 0);
background: linear-gradient(45deg,#FA6900,#C02942);
}
Пользуемся, котаны!
#css #triangle #tool #generator
#заметка дня
В чём разница между селекторами :disabled и [disabled]?
Вот вы не знали (наверное), а она есть!
Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.
Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.
Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.
Да не томи уже!
Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.
Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE
Короче, аккуратнее.
#css #disabled #бородач
🇺🇲Реально ли специалисту в любой области получить greencard США без предложения о работе, без высшего образования, и без знания английского языка? Ответ: да! Рассказываем, как это сделать.
Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!
Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.
Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: /channel/relocode
Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.
Этот комментарий к посту про анимацию кривой SVG определённо стоит выноса в основной поток 🙂
Читать полностью…
16 апреля в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥
На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг
🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!
А за кодовую фразу, собранную во время интенсива, автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$
Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start
#фишка дня
Вы знали, что в CSS можно анимировать кривые в SVG?
Криво анимировать кривые...
Вот и я не знал. Посмотрите:
<svg viewBox="0 0 10 10">
<path d="M5,2 Q 2,5 5,8" />
</svg>
svg path {
transition: d 0.35s;
}
svg:hover path {
d: path("M5,2 Q 8,5 5,8");
}
#фишка дня
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
width: calc(95vmin + -1*mod(95vmin, 15px));
min-width: round(95vmin,15px);
grid-template-columns: repeat(auto-fill, 15px);
Бесит часами искать подходящие скрипты?
Конечно, ведь в сети полно различных источников. Зато в Telegram достаточно одного канала – Сайтодел
Зашел – подписался ✔️ – и сразу применил в своём проекте!
#ссылка дня
Я сначала подумал, что это шутка: https://github.com/tc39/proposal-math-sum
Оказалось, совсем и не шутка.
Ваши мнения, котаны?
inb4 https://0.30000000000000004.com/
#ссылка дня
Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.
Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks
Он пока небольшой, но уже есть достаточное количество примеров, от неверной проверки статуса запроса, до дырявого сервиса кеширования.
Не позволяйте памяти утечь, котаны! И дополняйте примеры :)
#javascript #memory
#фишка дня
Если вы дислексик, или просто устали считать цифры в длинных числах, используйте разделители!
Думаю, картинка говорит сама за себя.
1_234_567_89,01 после трудового дня как-то легче считывается, чем 123456789,01.
P. S. Пример намеренно игнорирует разряды, не душните :)
#js #number
#заметка дня
Что-то этот тег настолько слился с фишкой дня, что я почти про него забыл.
Итак, сегодняшняя тема: дробные пиксели! Половинчатые, чаще всего. Уж больно (наши) дизайнеры полюбили полупиксельные бордеры.
К HiDPI-экранам быстро привыкаешь, не правда ли? К слову, картинка от Веса Боса. Так вот, на экранах высокой плотности вы скорее всего получите желаемое — полупиксельную границу. Естественно, полупиксельную в рамках вашей плотности экрана и ваших виртуальных пикселей.
А на обычных экранах произойдёт округление, для 0.5px — до 1px.
А ещё в треде по ссылке нашлось шикарное: целая презентация о том, как в вашей вёрстке из-за сотни разных ошибок округления могут появиться рандомные белые полосы! Особенно при вёрстке писем.
Это на самом деле серьёзная и большая тема, затрагивающая как вопросы рендеринга на экранах различной плотности, так и историю HTML-движков.
Собственно, вот: https://docs.google.com/presentation/d/1orKRwx5DnSoyYL1XQk4nv8ffycgmMePbF9j8fOGhXi0
Абсолютно прекрасно.
#css #round
#заметка дня
Что-то по Твиттеру опять пронеслась война тех, кто считает, что надо максимально ограничивать кандидату доступ информации во время собеседования, не пускать его в поиск Google, запрещать спрашивать у ChatGPT, не давать документацию и так далее. И тех, кто, в общем-то, считает наоборот.
Я пока не видел хороших и правильных примеров использования ChatGPT на собеседованиях, если честно. Единственный известный мне случай подобного поведения кандидата вызывает нервный смех, потому что ему стоило честно сказать: "Не знаю". Он буквально понятия не имел даже как задать вопрос правильно, но с каменным лицом доказывал, что так и надо. Наверное, получился бы хороший продажник.
С документацией всё просто: естественно, надо разрешать доступ. Да даже в университетах разрешают пользоваться конспектами и справочниками. Ну, в нормальных...
Google... ситуация похожа на ChatGPT. Нужно внимательно смотреть, что и как человек гуглит. Как конкретно он формирует запрос и какие ссылки открывает.
Я лично нанимал фронта, который не стеснялся гуглить во время собеседования. Прям стримил экран и искал. Где-то для выжимки из доки, где-то чтобы посмотреть альтернативы алгоритму.
А потом чтобы показать скриншоты своего проекта, который был закрыт пейволлом!
А вот того, кто во время собеседования гуглил меня, мы не взяли...
А как у вас дела обстоят и опыт?
#work #interview #собеседование #бородач
#фишка дня
Замотался, но про вас не забыл, котаны!
Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...
Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?
«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?
Нет! Оказывается, достаточно пяти!
Глядите чо: https://codepen.io/t_afif/pen/jORvmKG
1. Вариант на тригонометрических функциях:
clip-path: polygon(50% 0,
calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
);
clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);
🖥 Javascript - первый канал для FrontEnd разработчиков.
По контенту:
1. Готовые примеры c кодом: карусели, паралаксы.
2. Frontend курсы 2024 года бесплатно.
3. 2000 реальных задач с собесов с разбором от Senior разработчика.
Ещё мы собрали маст-хэв папку Frontend разработчика.
Подписывайтесь, такие знания в 2024-м году на вес золота: @javascriptv
Регистрируйся на бесплатный онлайн-интенсив по фронтенд-разработке от METHED!
В рамках интенсива мы с 0 создадим посадочную страницу "Лендинг интернет-магазина Petplanet":
- Используем технологии HTML,CSS;
- Реализуем адаптивный дизайн под различные устройства;
- Уделим особое внимание доступности сайта для пользователей;
- Проведем оптимизацию файлов и изображений для улучшения производительности и скорости загрузки страницы.
Наша дружная команда ждет тебя в числе учеников!
Регистрация на интенсив по ссылке: https://tglink.io/20ee320b64fd
#статья дня
Как выделить абзац полоской на всю ширину экрана?
Да вот так: 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 #бородач
Причём так можно анимировать не только SVG-элементы, но и CSS-свойства с SVG-контуром в качестве значения, напр. clip-path:path(...) или offset-path. Главное, чтобы количество и тип команд в контуре оставалось тем же. Я так выпрямлял offset-path по ховеру в этой демке https://codepen.io/SelenIT/pen/zYLoXdB
Читать полностью…
#ссылка дня
Если у вас есть Chrome Canary (125+), то уже сегодня можно побаловаться такой фичей, как CSS Anchor Positioning.
Короче, можно прилепить один элемент к другому так, что он всегда там будет, несмотря на скролл и так далее. Без расчёта координат и трансформаций. Без прямой зависимости межлу элементами в DOM. Просто указываем ID элемента-якоря в атрибуте anchor и передаём позицию в стили: inset-area: right bottom. Всё.
Это, в целом, продолжение идеи, развиваемой в спецификации Popover.
Уна Кравец как раз сделала инструмент для демонстрации этой возможности: https://anchor-tool.com/
Повторю: только Chrome Canary 125+.
Ну а, конечно, пока этого нет в основных браузерах, нам надо довольствоваться https://floating-ui.com/ aka ex-Popper. Работает очень хорошо.
#css #anchor #tool
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
Как IT-управленцу угробить проект и свою карьеру?
Сделать системы сильно связанными!
Представим ситуацию:
❌ Процесс работы одного сервиса зависит от того, доступен ли другой
❌ Системы перегружены, нагрузку нельзя прогнозировать
❌ Меняешь в одном месте, все ломается
В итоге:
➖Системы отказывают по цепочке, а бизнес теряет деньги
➖Бизнес недоволен тем, что делаем доработки долго и дорого
➖Никто не отдыхает, все работают по ночам, вы постоянно на связи
и всё это из-за сильной связанности сервисов.
KT.Team с сотней инженеров и клиентами, IT-бюджеты которых переваливают за миллиарды, знают выход из ситуации.
Расскажут 12 апреля на бесплатном вебинаре «Интеграции без пожаров. Искусство слабой связанности IT-контура»
Регистрируйтесь на вебинар ЗДЕСЬ
#статья дня
Нет, на видео к посту вовсе не очередная реализация Tower Defense на ванильном JavaScript. Тут кое-что покруче.
И, наверное, не каждый фронтенд-разработчик задумывался вообще о проблеме, которую мы сегодня затронем, но вообще — желательно бы иметь представление.
И проблема эта — балансировка нагрузки! А точнее, существующие алгоритмы балансировки нагрузки.
Сразу ссылка на статью: https://samwho.dev/load-balancing/
И перевод: https://habr.com/ru/companies/ruvds/articles/732648/
Но в переводе нет интерактивного примера!
Вообще, в современном мире выпускать статью без интерактива уже как-то просто неприлично. И в этом огромное преимущество статей над любым видео.
Итак, что там за алгоритмы такие:
1. Чистый рандом
2. Карусель и взвешенная карусель (мощнее сервер — больше запросов в него кидаем)
3. Карусель с очередью запросов
4. Подсчёт активных подключений и передача серверу, с наименьшим их числом
5. Активный подсчёт способности серверов обрабатывать запросы и исключение наиболее слабых из них.
Очень крутая статья. Иллютрации и интерактив делают знакомство с алгоритмами весьма увлекающим.
Ну и, заодно, станет понятно, о чём говорить с девопсами, когда ваш чатик начнёт падать :)
#connections #devops
#фишка дня
Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.
В чём же проблема?
А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.
Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.
Когда нужен релиз, а транк не считается стабильным — выбираем нужные коммиты и релизим патч-релиз из своей ветки.
Очень важный момент здесь: время, когда транк считается нестабильным, должно быть сведено к минимуму. В любой момент команда должна иметь возможность релизить текущее состояние проекта.
Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.
Естественно, такое состояние удерживать не всегда просто, потому череда патч-релизов может быть очень длинной. Это не то чтобы плохо само по себе...
Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).
Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.
Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:git checkout ':/add multiselect to ui kit'
Причём, сообщение не надо вспоминать полностью!
В итоге, git выберет ближайший к вам такой коммит. Уютно!
В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.
#git #til #commit #бородач
Переходите на тёмную сторону тему на Хабре вместе с Yandex Cloud!
Мы знаем о любви разработчиков к тёмной теме. И знаем, что многим её не хватало на Хабре. Встречайте технический квест от Хабра и Yandex Cloud, пройдя который вы сможете подключить долгожданную тёмную тему и выиграть мерч.
Пройти квест и подключить темную тему можно здесь
#фишка дня
Когда-то давно я слышал о таком свойстве, как 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