14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Я знаю, вы любите стыдный контент.
После трёх релизов подряд, в которых не было ничего, кроме исправления z-index (не спрашивайте), проверяющий мои PRы бакендщик (остальные в отпуске), заметил:
— Я-то хотя бы жисоны перекладываю...
Давайте ваши свежие стыдные истории, котаны.
Реклама. ООО «Яндекс.Облако» ИНН 7704458262
Erid: 3apb1Qrwwr2uBg1WocnEFwJfQb4K3dy5grNscboPtJRyZ
#автор дня
Итак, я не так давно, буквально пару месяцев назад, выкладывал репозиторий Сергея Ufocoder'а, посвящённый утечкам памяти в JavaScript. Ну, вот же, положила: /channel/htmlshit/2668
Думаю, сегодня можно выложить кое-что ещё :)
Некоторое время Сергей занимается разработкой простого FPS. И пришло время показать первые результаты!
Собственно, перед нами однопользовательская игра в стиле Wolfenstein 3D.
Использует подход к отрисовке графике из 1990-х, в частности алгоритм raycasting (все графические вычисления происходят на CPU).
Написана с нуля, то есть без использования сторонних библиотек.
В игре несколько уровней и очень простой искусственный интеллект, есть возможность подбирать патроны и убегать от зомби, используя мини карту.
Если появится желание улучшить игру, то ее исходники находятся в открытом виде и автор приветствует любые улучшения и исправления.
Репозиторий: https://github.com/ufocoder/fps
Играть: https://ufocoder.github.io/fps/
Если вы, котаны, задались целью понять, как работают 3D-движки на базовом уровне — это вот самое то :)
#game #fps
#заметка дня
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle #бородач
Яндекс в последнее время очень активно внедряет нейросети в свои сервисы и продукты – ещё недавно, казалось бы, набирали AI-тренеров для обучения YandexGPT, а уже выпустили облегчённую нейронку третьего поколения YandexGPT 3 Lite.
Сейчас модель может суммаризировать деловые встречи, проверять орфографию, анализировать данные, консультировать клиентов в чате и по телефону, а также создавать маркетинговые материалы или дайджесты рабочих встреч. Модель заточена сугубо под бизнес и большие данные.
Чтобы добиться таких результатов, YandexGPT 3 Lite прошла через несколько этапов обучения: претренинг и выравнивание вместе с обучением на основе вознаграждения. Здесь ребята добавили GQA и прокачали отдельную reward-модель, чтобы нейронка быстрее адаптировалась к новым условиям и принимала более точные решения. В случае таких специализированных архитектур нейронных сетей reward-модель играет ключевую роль — дообучение делает её более устойчивой к ошибкам и способной работать в различных сценариях.
#YandexGPT #AI #технологии #бизнес
🚀 Поднимите свой опыт frontend-разработки на новый уровень.
👉 Приглашаем на вебинар: "Преимущества семантической верстки"
На открытом уроке вы получите ценные знания:
- Семантические теги: изучите строительные блоки HTML5.
- Влияние на сайт: постигните, как правильное использование тегов улучшает SEO и доступность сайта.
- Применение на практике: получите навыки, которые сможете применять в реальных проектах.
👩💻 Наш спикер, Анна Русяева – опытный веб-разработчик, поделится с вами лайфхаками и секретами мастерства.
📆 4 июня, 19:00 мск - отметьте дату в своем календаре!
🔑 Специальная цена на курс «Fullstack developer» для участников - расширьте свои возможности в IT с уникальным предложением.
=======
✨ Не упустите возможность! Регистрируйтесь сейчас https://vk.cc/cxedcA?erid=LjN8Jyg72
=======
🎁 Все участники online-трансляции получат в подарок 3 бесплатных урока, и полезные материалы для начинающих.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
#автор дня
Сегодня у моей дочки день рождения — целых три года :)
Потому сил моих хватает только познакомить вас с замечательным автором — Тиффани Чонг и её потрясающим анимешным CSS-артом: https://codepen.io/tiffachoo/pens/public
Кажется, будто можно составить из этих персонажей целую игру, милота зашкаливает.
Не кукситесь, котаны :)
#css #art
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
Вжух — и каналу шесть лет! 6️⃣
Я на такое не рассчитывал, когда менял uppercase hex на lowercase :)
То сообщение имеет номер два. Не уверен, что было в первом.
Спасибо, котаны, за поддержку! Я знаю, тут есть те, кто чуть ли не с самого начала.
Всем хорошего лета, впереди ещё много всего!
А давайте продолжим тематику багов дня. Вот хороший баг, но кыргызам так не показалось.
P. S. не уверен, что вам нужен был ещё один пост про Docker в РФ ...
#баг дня
Вроде мы все с вами знаем, что CSS — отвечает за представление контента, никак его не модифицируя. И это подтверждается спецификацией во многих местах.
Вот только если ты пойдёшь и скопируешь в Chrome текст, на который наложен text-transfrorm: uppercase, скопируются заглавные буквы!
Но это неправильно: спека.
В общем, в Chrome 127, благодаря разработчикам из Microsoft, это будет исправлено.
Мне нравится путь, которым разрабы Edge выбрали пиар своего браузера: исправление старых багов и работа на девтулзами.
Ну и ссылка на баг: https://chromium-review.googlesource.com/c/chromium/src/+/5399744
Такой же баг присутствует в Safari, Firefox же отрабатывает ок. Думаю, код этой части CSS в Blink довольно старый, потому можно ожидать, что в Safari и WebKit будет бэкпорт.
#bug #chrome #css
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
#codepen дня
Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?
И таки да, можно.
Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?
И таки да, можно.
Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?
Да!
https://codepen.io/paulnoble/pen/bGyNRNE
JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.
Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...
#css #filters #scroll
Про сравнение двух подходов к решению задачи запутывания кода. Что лучше — протектор или LLVM-обфускатор?
Команда Guardant обеспечивает защиту своих библиотек под разные операционные системы и разные ARM-архитектуры, используя разные подходы по обфускации:
🌦для x86/x64 применяет свою разработку — протектор Guardant Armor
🌦в случае ARM-архитектуры — открытые обфускаторы на базе LLVM для их модификации и защиты своих продуктов
🔑О плюсах и минусах каждого подхода читайте на Хабре и подписывайтесь на ✈️канал Guardant — там всё о защите, лицензировании и управлении продажами ПО.
Базовый вес
Правильно выставленная система отсчета помогает принимать правильные решения. Вопрос размера бандла веб-приложения холиварный, но я постоянно вижу одну и ту же ошибку: "Какая разница 50кБ React или 5кБ Preact, если из node_modules тащится еще пол мегабайта?". Даже если не учитывать, что вопрос поставлен неправильно (в каждом приложении набор либ и их размер разный), ответ очень простой: базовые примитивы загружаются всегда и замедляют каждую страницу, а отдельные тяжелые пакеты для разных страниц догружаются лениво и могут вообще не влиять на перф приложения в общем.
Например: либы для графиков, интерактивных анимаций, карт, аналитики и тп могут подгружаться лениво на соответствующих страницах и на их размер можно меньше обращаться внимание. Но библиотеки для: роутинга, фетчинга данных, отрисовки дома, форм и валидации используются на каждой странице и должны быть в кор бандле, их тришейкать смысла нет. За их размером и нужно следить.
Есть прекрасная аналогия как это разботает в мире туризма. Если вы заменяете какой-то тяжелый котелок титановой кружкой, то в общем весе вы разницу не почувствуете, только получите головняк от того что еда начнет пригорать. Но если вы немного заморочитесь и выстроите слаженную систему: сублиматы, кружка и горелка под нее, вы уже уменьшете походный вес кухни и еды в 2-3 раза. Если то же самое сделать с рюкзаком, укрытием, спальной системой - весь вес можно сократить в 2-3 раза. И для этого не обязателньо тратить больше денег, достаточно немного заморочиться, разобраться в вопросе и существующих альтернативах. Но уменьшив вес на плечах даже в полтора - два раза, можно почувствовать радикальную разницу в качестве и комфорте похода!
В легкоходном туризме есть понятие “базового веса” - это вес минимально необходимого снаряжения для похода: рюкзак, спальная система, кухня. Обычно, это 5кг. Конечно, в каждом походе есть необходимость брать больше или меньше еды или какое-то специфическое снаряжение, но это уже за базовый вес не считается. Это, типа, динамические импорты, если выстраивать аналогию.
Если фокусировать свой выбор снаряжения (библиотек) на цифре базового веса - можно получить гарантированный профит для того кто эту ношу несет. Туристы тащат поклажу на своем горбу и хорошо понимают стоимость каждого килограмма на любом подъеме и курумнике. А разработчики приложений тестируют свои сборки сидя на кресле под кондиционером (за мощным компом в локальной сети с сервером), понимаете проблему? 🙂
Есть ли у вас лимиты базового веса для какой-нибудь страницы логина и следите ли вы за ним?
Зачастую при работе с S3-хранилищем пользователи сталкиваются со сложностями, которые снижают производительность и увеличивают затраты на инфраструктуру.
Чтобы избежать типичных проблем и обеспечить быстрый доступ к вашим данным, рассказываем, что влияет на производительность на каждом этапе пути запроса от пользователя к объектному хранилищу и обратно.
➡️ О практических рекомендациях по работе с S3-хранилищем читайте в полной версии статьи.
#yacloud_articles
#инструмент дня
React Compiler, говорите...
А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?
Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...
Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/
Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.
Знаешь JSX или Svelte — пишешь на всех :)
#framework #tool
Чтобы быть продуктивным, разработчик должен кодить быстро.
Даниил Лихачев, Python-разработчик крупного диджитал-продакшена Далее, подготовил 5 способов? помогающих научиться кодить в 2,5 раза быстрее. Полную статью читайте на Хабре, а в этом после — краткая выжимка.
Подписывайтесь на канал Далее ). Каждую неделю мы постим проверенные советы разработчиками другим диджитал-специалистам, чек-листы и вакансии 🖖
#ссылка дня
Итак, в чатике пару дней назад поднялся срачик состоялось некоторое обсуждение.
Темой этого самого обсуждения стало автоматическое воспроизведение видео со звуком на сайтах. Насколько нам всем известно, это с некоторых пор практически невозможно: только после явного действия пользователя.
Но коллега утверждал, что можно и в доказательство приводил Reddit. Естественно, никто повторить не мог.
Пришлось — кто бы мог подумать — обратиться к документации!
Итак, смотрим: https://developer.chrome.com/blog/autoplay
И что же это мы такое видим?
— On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
Что ещё за индекс вовлечённости такой?!
Это что же получается, я смотрю недостаточно мемов на реддите?!
И таки да, внизу имеется расшифровка. Самый простой способ посмотреть её результаты — это открыть страницу about://media-engagement в Chrome.
В общем, когда очередной заказчик вашего очередного проекта возмутится тем, что музыка в его прекрасном промо-видео не играет, расскажите ему о том, что его проект просто неинтересен людям. Вот так просто.
#chrome #media #sound
#заметка дня
Рубрика "Вы не спрашивали, но я всё равно отвечу!"
На самом деле, разговор произошёл в Твиттере, и я посчитал разумным, вынести его сюда.
Итак, вопрос:
Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например.
Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения?
Отвечаю:
Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн.
1. Надо тестировать то, что видит юзер
2. Если что-то не видит, значит, всё плохо
3. Если там иконка или нужен результат — искать надо по a11y атрибутам.
Сразу поясню за "бестолковость".
Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода).
А это значит, если кто-то случайно сломает систему перевода или неправильно переведёт строку без информирования остальных — тесты упадут и это правильно.
Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Бесплатно. Поэтому data-testid и названы бестолковым использованием ресурсов.
Это же, кстати, касается систем трекинга вроде Datadog RUM.
Смысл фронтенда в том, чтобы пользователь мог с продуктом взаимодействовать. Для этого необходима визуальная и когнитивная поддержка. Кнопка может быть и видна, но на кнопке — упс — может не быть текста. Или она будет цвета фона (потому скриншот-тесты ещё не вымерли).
Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе.
Тестируйте, котаны!
#web #testing #e2e
#баг дня
Сегодня Chrome 125 принёс шикарное.
В погоне за поддержкой CSS Popup Anchor Positioning API они совсем позабыли о, собственно, правильном назначении этих самых якорей.
Вспоминаем, что видеоплеер работает в Shadow DOM и получаем поведение с иллюстрации.
Ссылка: https://issues.chromium.org/issues/341741271
Скоро поправят в Canary. Надеюсь, будет бэкпорт.
#css #popup
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
#заметка дня
Когда Ахмад Шадид выступал у нас с Defensive CSS, возникла забавная проблема.
Он выбрал для примеров в презентации акварельные тона. Очень нежные, успокаивающие. И все бы было хорошо, если бы презентация не транслировалась по Google Meet.
Алгоритмы видео Google Meet сильно режут контраст. В итоге разницы между акварельным голубым и акварельным розовым вообще не было заметно. А это были ключевые моменты примеров.
Думайте об этом выбирая цветовую гамму проекта. Ведь бывают и просто плохие дисплеи.
Вспомнил я про эту особенность потому что мне на глаза попалось огромное количество статей о неоморфизме. История циклична.
А неоморфизм он весь состоит из мягких теней, формирующих объём. Их точно так же не видно при плохом контрасте.
Хорошо, что некоторые статьи об этом все же упоминают: https://refine.dev/blog/neumorphic-css/
Так что не жалейте контраста. Оставьте акварель художникам.
#бородач
Кыргызы против Intl.NumberFormat
Когда лучшее враг хорошего.
Недавно к нам в команду web platform в aviasales пришли из техподдержки со странным багом у пользователя: в Arc браузере сломано отображение символа валюты кыргызских сомов, вместо него выводится непонятный символ. Проще всего конечно было ответить, что браузер не поддерживается, но стоп, разве арк не на хромиуме, чем он такой особенный?
Начал разбираться
Действительно, в обычном хроме сомы показываются как KGS, а в арке как символ, и символ явно ошибочный.
Для отображения валют мы используем стандартный Intl.NumberFormat и в арке он действительно выдаёт другой символ. Начало проясняться. Возможно, арк использует новую версию хромиума и поэтому показал проблемы раньше? И действительно, Chrome Canary получил точно такой же баг. Получается, совсем скоро, валюта сломается у всех, вообще у всех сайтов и пользователей страны, и отсчёт времени уже пошёл 🫠
Куда отправлять баг? У хромиума есть свой баг трекер, но работа с ним оставляет желать лучшего, выглядит он мягко говоря антично. Никогда не заполнял баги для браузера, но видимо этот час настал. В процессе подготовки репорта вспомнил, что вообще говоря, локализациями занимается не хромиум а отдельная библиотека ICU, то есть проблема ещё глубже, чем просто баг браузерного движка. А, казалось бы, невинная проблема
Описываю свои приключения коллегам, один замечает, что это первый раз, когда мы нашли баг не в самом лучшем браузере safari а в хроме, теперь счёт багов 4:1 в пользу первого. А действительно, а как себя ведёт в таких условиях сафари? Открываю. Встречаю тот же баг 🫡
Очевидно, проблема на уровне операционной системы.
Решил присмотреться к символу внимательнее, это просто мусорный вывод или он имеет какую-то семантику?
Символ который выдаётся на macos выглядит так: ⃀, если вы читаете с macos то почти наверняка ничего не увидите (в первом комментарии скриншот как это рендерилось в реальности). В базах данных по юникоду описание: Unicode Character 'SOM SIGN'. Бинго. Это не баг, это настоящий символ валюты, но в стандартных шрифтах macos его нет, на windows всё отображается нормально
В итоге получается ситуация: раньше вместо символа валюты выдавалась аббревиатура, библиотека ICU исправила эту проблему чем ухудшила вывод на девайсах apple
Это многое говорит о нашем обществе
Issue в багтрекере хрома или ICU открывать не стал. Очевидно они всё сделали правильно; парадоксальная ситуация в которой никто толком не виноват. Ну, точнее, можно конечно попинать apple чтобы добавляли символ, но это всё равно что орать на баобаб
Оценив диспозицию, решил что надёжнее всего будет просто сделать .replace для проблемного символа на старый вариант.
Мимоходом заметил, что в некоторых других условиях у нас на сайте кыргызская валюта отображается нормально. Оказалось, что вместо официального символа используется юникод-комбинация c + нижнее подчеркивание под символом: c̲. Как говорится c̲мекалочка ок. Но чтобы я не сильно радовался, оказалось, что в том самом стандартном шрифте apple этот символ тоже отображается криво, проще заменить обратно на KGS, как это было раньше и всех устраивало
Когда я заходил на эту пятничную задачу последнее чего я ожидал это изучения багтрекера браузеров. А вот проблемы с apple наоборот вполне были в рамках! Разумеется это ценно, что у движка chromium есть конкурент который не живёт на пособиях гугла, но нельзя не признать, что девайсы apple и веб разработка это головная боль. Всегда.
Пока писался этот пост, «улучшающий» апдейт хрома был раскатан на всех пользователей. Кыргызский интернет оказался уже сломан, сломан для всех
Frontend Developer — это первоисточник всего, что происходит во Frontend-сообществе
Здесь опытный Senior-разработчик ежедневно публикует материалы, которые накопил за 9 лет Frontend-разработки:
➤ Шаблоны с готовым кодом для твоих проектов
➤ Вопросы с собеседований, задачи и викторины
➤ Шпаргалки по JavaScript, HTML и CSS
P.S. Даже онлайн-школы берут материалы с этого канала🤫
#новость дня
В этот день 11 лет назад React стал публичным открытым проектом.
С чем нас всех и поздравляю.
Делитесь, кто когда начал с ним работать. Я — аж летом 2018, написал на нем проект для Oreo.
Это было приложение для вКонтакте на 64 экрана, включающее в себя работу с веб-камерой и загрузкой видео. Вот это был вход так вход, без жалости.
А до того — Ember был единственной любовью.
У вас как?
Проджекту вкатиться в айти не легче, чем разработчику. Нужно понимать процесс и детали, защищать решения перед клиентом и находить общий язык с командой.
Марина Заботина, аккаунт-директор Далее, провела большой опрос о том, какой именно уровень технических знаний должен быть у ПМа. Результатами опроса и собственным опытом 一 а Марина прошла все эти дебри 一 она поделилась в новой статье.
Читайте статью на Хабре или на vc.ru и делитесь в комментах, как обстоят дела с техническим бэкграундом у вас 🤝
#статья дня
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position #бородач
#codepen дня
Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).
Давайте исправим положение и сделаем что-то насущное.
Например, сымитируем табло в аэропорту… С его задержками смены линий при смене языка.
Поехали: https://codepen.io/alinaki/pen/ZEaOdKq
Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.
#css #grid #animation #scss #бородач
Мне кажется, Артём выстроил шикарную аналогию размера бандла с весом туристического снаряжения и отлично показал проблему затрат в целом. Читаем!
Читать полностью…