14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#codepen дня
Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.
Так вот.
Прелесть этой сетки логотипов в том, что она весьма сбалансирована.
Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.
И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO
Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.
Кто-нибудь находил нечто подобное в виде плагина для Figma?
Где-то в закладках у меня лежала информация о подготовке изображений для такой сетки... завтра найду и закину.
#js #grid #img #бородач
🔲 Посмотрите, как выглядит стол промышленного дизайнера. Авенир Бабин работает в команде Яндекс Маркета и создаёт дизайн для бренда аксессуаров Commo: наушников, пауэрбанков, чехлов и зарядных устройств.
Commo — это один из собственных брендов Яндекс Маркета. Помимо него, маркетплейс также развивает, например, бренды велосипедов Raskat, мебели и товаров для дома Pragma, компьютерной техники Lunnen и другие.
Подписывайтесь ✨ @yandex
#библиотека дня
Скажи мне, узнаёшь ли стиль на картинке, и я скажу, сколько тебе лет.
Ну или что ты учился в пост-советской школе, ха-ха.
Так или иначе, TuiCSS. Буквально — Turbo Vision UI CSS: https://github.com/vinibiavatti1/TuiCss
Не знаю, зачем оно. Но мало ли, приступ ностальгии или вечеринка в стиле.
Мне больше по душе NES.css, его для ретро-игр использовать милое дело: https://nostalgic-css.github.io/NES.css/ 😍
#ui #css
#статья дня
Тот случай, когда статья девятилетней почти давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/
1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.
Вечнозеленая, я бы сказал, статья.
#css #svg #gif #animation
#ссылка дня
Подробное руководство по выгоранию входу во фронтенд в 2024 году.
Прекрасно оформленное и проиллюстрированое.
От базы сетей до популярных фреймворков и подготовки резюме. Все баззворды и их пояснение в одном месте.
Пользуемся:
https://frontendmasters.com/guides/front-end-handbook/2024/
#guide #frontend
#статья дня
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию: box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
#css #animation #keyframes
Программирование сейчас - один из немногих социальных лифтов, доступных всем!
Лучший способ начать свой путь в IT - изучать Python. Этот язык не такой сложный для изучения, однако на нем создают сайты, чат-боты и даже искусственный интеллект. Например, Netflix, YouTube и Google написаны на этом языке.
С нуля стать опытным разработчиком со средней зарплатой в 180 000 рублей можно в онлайн-школе Product Star на курсе “Профессия: Python-разработчик”. Курс создан специалистами из топовых компаний с реальным опытом в индустрии, благодаря чему в процессе обучения вы будете погружаться в реальные кейсы.
После обучения ваше портфолио пополнится проектами, которые будет не стыдно показать любому работодателю. И самое главное: Product Star гарантируют трудоустройство, а если в процессе поймете, что специальность не для вас, вам вернут деньги.
Станьте Python-разработчиком вместе с ProductStar. Скидка до 57% и техническое собеседование с топовым разработчиком в подарок - https://tglink.io/021390a35303
Реклама. ООО "ТРИВИУМ". ИНН 7806297293.
#video дня
Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были.
И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions.
Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo
Документация: https://developer.chrome.com/docs/web-platform/view-transitions
Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary)
Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего.
#css #view #transition
Хочешь начать свой путь в хакатонах?! Хакатоны.рус запускает ЛЕТС ХАК — первый в России образовательный интенсив и хакатон для начинающих хакатонщиков!
Регистрация и подробная информация: https://www.хакатоны.рус/letshack
Интесив рассчитан на раскрытие тем об устройстве хакатонов, о том как правильно подходить к решениям задач, организовывать работу, а также, секретам успеха на подобных соревнованиях.
ЛЕТС ХАК пройдет в два этапа:
Теоретическую часть — образовательный интенсив — серия онлайн уроков от IT-специалистов, организаторов хакатонов, участников и победителей, которые расскажут о всех тонкостях участия и рецептах успеха в IT-соревнованиях
Практическая часть — продуктовый хакатон — вы сможете отточить полученные знания и побороться за призовой фонд.
Формат мероприятия: онлайн.
Что дает участие?
Слушатели образовательного интенсива получат знания об устройстве всех видов IT-соревнованиях. Также, участники, прошедшие курс получат сертификаты. Участники хакатона получат денежные призы и обратную связь от экспертов.
Таймлайн:
18-23 мая — образовательный интенсив. Подробная информация: https://www.хакатоны.рус/letshackintensive
24-27 мая — продуктовый хакатон. Подробная информация: https://www.хакатоны.рус/letshackhack
Узнай как побеждать на хакатонах, знакомься, объединяйся в команды и получи опыт участия в хакатоне!
Успей зарегистрироваться до 23 мая 2024 года: https://www.хакатоны.рус/letshack
Проект реализуется при поддержке Росмолодежь.Гранты
#хакатон #hackathon #хакатонырус #hackathonsrus #Росмолодежь #РосмолодежьГранты
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
transform-box: fill-box;
transform-origin: 50% 50%;
Информационные технологии развиваются стремительно, ускоряя темп жизни и внося кардинальные изменения.
📎 Как не отстать от меняющегося мира?
📎 Как быть в курсе новинок?
📎 Как предугадать будущее технологий?
Вам поможет канал IT news
🎯 Только актуальная и правдивая информация
🎯 Непрерывное обновление ленты новостей
🎯 Полезные ссылки на информативные источники
Подписывайтесь!
Привет! Если ты амбициозный frontend developer, который неравнодушен к анимациям и эстетическому дизайну, умеешь в React — эта вакансия для тебя! Нам нужен специалист, который будет работать над интересными креативными проектами, расти и развиваться, помогать всей команде добиваться новых выдающихся результатов! Присылай резюме и примеры работ (желательно сайты с анимациями) на почту hr@chipsa.ru и получи возможность попасть к нам в команду! Предполагаемый и обсуждаемый разбег по з/п: 80-90К. Полный текст вакансии тут: http://chipsa.ru/career/frontend
Читать полностью…
#ссылка дня
Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!
Во всяком случае, так считает автор блога Comicss: https://comicss.art/
Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.
Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.
Максимально забавный подход.
#css #art #бородач
#фишка дня
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
Фантастические новости для всех, кто мечтает овладеть JavaScript и стать настоящим профессионалом в этой области!
Если ты когда-то задумывался о том, как начать свой путь в программировании, то сейчас самое время действовать!
Если ты уже опытный разработчик, приходи и прокачай свои скилы!
Новый бесплатный интенсив от METHED создан специально для того, чтобы дать тебе возможность окунуться в мир JavaScript без лишних затрат времени и денег.
Что ждёт тебя на нашем интенсиве?
Узнаешь по ссылке тут 👉🏻 https://tglink.io/b24b15431871
Не упускай свой шанс стать экспертом в области JavaScript! Зарегистрируйся на нашем интенсиве прямо сейчас и начни свой путь к новым профессиональным высотам!
#ссылка дня
Хотите флагов? Их есть у меня!
https://flagpack.xyz/
Больше 250 флагов в комплекте с исходниками в Figma и Sketch. Ну и, понятное дело, компоненты для React, Vue и Svelte. PNG и SVG.
Присутствуют забавные модификаторы в виде разного вида градиентов, если основного стиля недостаточно.
Лицензированы по MIT.
#flags #icons #design
#заметка дня
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.
В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?
Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).
Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.
Рекомендую туда почаще заглядывать, котаны.
#devtools #ignore #sourcemaps #бородач
🚀 Регистрация на хакатон «Ясная Система: сделай сложное понятным» от МТС стартовала! У тебя будет неделя, чтобы попрактиковаться в машинном обучении и сделать финтех инклюзивнее.
Призовой фонд – 375 000 рублей. Оставляй заявку до 24 мая и участвуй в соревновании онлайн из любого города России: https://cnrlink.com/mtshacktomskbudnyrazrab
🤖 Задача – создать сервис, который сможет перевести сложные банковские тексты из датасета в ясные формулировки, подходящие для людей с ментальными особенностями, пожилых людей и иностранцев, плохо владеющих русским языком.
Церемония открытия соревнования пройдет 25 мая на фестивале «Система Fest» в Томском государственном университете. Посетители смогут поучаствовать в насыщенной программе мероприятия.
Для онлайн-участников МТС проведет два митапа с экспертами. 2 июня авторы 10 лучших проектов выступят с питчингами на церемонии награждения победителей.
➡️ Регистрируйся прямо сейчас, чтобы ничего не пропустить: https://cnrlink.com/mtshacktomskbudnyrazrab
Реклама. ПАО "МТС". erid:LjN8KAMwL
#фишка дня
Если вам не пофиг на удобство пользования формами и сайтами вообще, то вы хоть раз, но задумывались о порядке перехода клавишей Tab по полям, ссылкам и кнопкам. Сидели, расставляли tabindex, что-то игнорировали, где-то ставили ловушки фокуса... Потом сидишь, как дурак, табаешь. Так вот.
И в Chrome, и в Firefox можно включить отображение порядка tabindex! Причём, в Firefox проще: DevTools — Accessibility — Show Tabbing Order. Осторожно, на больших сайтах рендер занимает время!
А вот в Chrome называется и работает похожая опция иначе: Show source order. Почему не Tabbing? Потому что суть у неё малость иная.
В то время, как Tabbing order показывает порядок следования по всем интерактивным элементам, Source order показывает порядок следования узлов в выбранном родителе. Но свои задачи решает хорошо.
А так ещё можно воспользоваться расширениями вроде Polypane или Taba11y.
#a11y #firefox #chrome #бородач
Давно работаете стажером и никак не можете найти постоянное место работы?
Устали от тысячи собеседований, где десяток человек пытается пробиться на ЗП в 50 тысяч.
Надоело что от джунов требуют 10-летний опыт и навыки сеньора?
Вы всегда можете быстро стать разработчиком 1С. Приходите на вебинар 29 мая в 19:00 и мы расскажем об этой профессии.
Почему именно 1С?
🔸Большинство компаний в РФ “сидят” на 1С. А благодаря новым законам еще больше компаний переходит на 1С сейчас
🔸1С ежегодно обновляет свою продукцию, поэтому у разработчиков всегда есть работа.
На вебинаре 29 мая в 19:00 мы расскажем:
- Чем отличается встроенный язык 1С от остальных языков программирования?
- Какие знания из других языков программирования вам понадобятся на старте?
- Как быстро переквалифицироваться в 1С разработчика и начать получать заказы?
А еще мы разберем вакансии и посмотрим тестовые задания для разработчиков 1С, обсудим карьерный путь и ЗП.
Записывайтесь на вебинар сейчас и приходите в среду в 19:00.
P.S.
Всем, кто зарегистрируется мы вышлем словарь 1С разработчика для ознакомления.
#фишка дня
Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.
Давайте сделаем свою. Для любого сайта.
Секунд за пять.
1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11
Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW
Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».
Впрочем, он же пишет, что повторить подобное поведение ему не удалось.
Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.
#css #darktheme #filter #бородач
#такое дня
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
#баг дня
Один браузер для всех это же так прекрасно, не правда ли?
И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики Google Chrome отказываются решать годами.
Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451
TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.
К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂
Зачем это было сделано? Ну им нужно было продвигать свои фичи для логина, управления паролями, адресной книги.
Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.
Дискуссия ещё и перегибает палку там, и очень часто. Потрясающее чтение, рекомендую.
#chrome #google #evil #бородач
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
#молния дня
Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler
Исходники: https://github.com/facebook/react/tree/main/compiler
#инструмент дня
А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?
Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде.
Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks
Естественно, все эти хуки умеют определять, запущены они в SSR или нет.
Куча демок в наличии.
К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: /channel/htmlshit/2347
#react #hooks
#фишка дня
И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.
И речь пойдёт о недооценённом хуке в React: useDeferredValue.
Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.
Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.
Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?
И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.
Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.
Будьте разумно ленивыми, котаны!
#react #hook
Хочешь освоить или улучшить свои навыки во фронтенде?
Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое
👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!
#фишка дня
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
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);
#статья дня
Музыканты тут? Хотите нотную запись на гридах?
Нет? А я принёс! Сходу: https://cruncher.ch/blog/printing-music-with-css-grid/
В общем, предыстория такая. Разработчик по имени Стивен Бэнд несколько лет назад реализовал генерацию нотного стана в SVG из JSON записи, но осознал, что правильный рендеринг этого дела слишком сложен, и отложил.
И тут до него дошло: раз всё равно всё делать в браузере, почему бы не сделать гридами?
Ну и пошло-поехало:
grid-template-rows:
[A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
[D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
[G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
[C4] 0.25em ;
0 chord D maj 4
0 F#5 0.2 4
0 A4 0.2 4
0 D4 0.2 4