Верстальщик от бога

Замена YouTube Kids #почитать Что делать, когда твой ребёнок признаёт только это приложение? Вот не хочет пользоваться аналогами, и всё тут! Как убрать недостатки в такой ситуации и добавить достоинств? Об этом и поговорим. Какие недостатки YouTube Kids я хотел бы убрать? Невозможно сделать раздачу исключительно русскоязычной. Это может быть особенно плохо, например, для детей с аутизмом, у которых спец-интерес после просмотра мультиков может проявиться в английском (или любом другом) языке, с нежеланием говорить по-русски. Невозможность ограничить доступ к любым мультфильмам, кроме заданного списка. «Замедление» работы сервиса в России. Этот пункт обсуждать я не буду. Казалось бы, можно было бы пользоваться аналогичными сервисами. Но их авторы вместо того, чтобы скопировать в точности интерфейс предшественника, почему-то решают проявить творческие способности там, где они не требуется. И в результате хороший интерфейс превращается в камень преткновения: некоторые дети отказываются им пользоваться. ⏱Читать статью

Opening a Details Element from the URL #почитать Say you’ve got a page with a bunch of <details> elements on it. Your goal is to be able to send someone to that page with one particular details element open. I was doing just this recently, and my first thought was to do it server-side. If the URL was like website.com/#faq-1 I’d see if faq-1 matches an ID of the details element and I’d put the open attribute on it like <details id="faq-1" open>. But no, you don’t get to have the #hash as part of the URL server side (for whatever reason 🤷‍♀️). ⏱Читать статью

👑 Кто работает PM — тот в цирке не смеется Наша сегодняшняя рекомендация — канал с PM юмором. Мы работаем в проджект-менеджменте и уже не смеемся. Но если вас можно рассмешить — welcome в PM Humor

Если увлекаешься технологиями, не пропусти True Tech Champ 21 ноября — масштабный ИТ-фест от МТС 🔥 В программе: 📝 доклады о технологиях будущего от экспертов в ИИ, включая руководителя фундаментальных исследований MWS AI Валентина Малых; 🛻 шоу-битва роботов со спецэффектами и сюжетной линией; 📝 воркшоп по работе с ИИ-агентами от канадского разработчика и автора книги AI Agents in Action Майкла Ланэма, кодинг-практикум с MWS AI и интеллектуальный спарринг с искусственным интеллектом; ◻️ 20+ площадок с активностями: IT-Родео, робофайтинг, лазерный лабиринт и многое другое. 🔴 А в завершение дня — афтепати со звездным хедлайнером. Фестиваль бесплатный, он пройдет 21 ноября в Москве и онлайн. Смотри подробную программу на сайте и регистрируйся — количество мест ограничено.

Lottie — новый стандарт векторной анимации #почитать В области графических форматов в последнее время произошло много интересных событий. Вышла новая спецификация PNG с официальным утверждением формата анимированной графики APNG, хотя его поддержка в браузерах реализована уже довольно давно. В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов. ⏱Читать статью

Дизайн для ленивых: как интерфейсы учатся думать за пользователя #почитать Современные пользователи цифровых продуктов подсознательно стремятся к минимальным когнитивным затратам. Это порождает новый тренд — «ленивый UX», где система берет на себя рутинные решения. В этой статье разберем: - Как алгоритмы упрощают взаимодействие - Примеры удачных и провальных предугадываний - Грань между удобством и навязчивостью ⏱Читать статью

❌ «В IT сейчас работы нет» — слышали такое? А вот и нет 🙅‍♂️ Мы каждый день публикуем новые, живые вакансии с вилкой и прямыми контактами рекрутеров в телеграм. Подборки для всех направлений — от джуна до лида. Есть даже еженедельные интерншипы и стажировки для начинающих. 🔎 Выбирай свой канал: QA → @qa_work PM → @jobs_pm BA/SA → @analytics_jobs .NET → @job_dotnet DS/ML → @dsml_jobs PHP → @work_php Java → @java_dev_job Python → @jobrocket_python 🧩 Или подпишись сразу на все

CSS-селекторы. Шпаргалка для новичков #почитать Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора. ⏱Читать статью

Bounce Rate в веб-дизайне: как удержать пользователей на сайте #почитать Вы замечали, что посетители быстро покидают ваш сайт, едва заглянув на него? Это может быть связано с высоким bounce rate (показателем отказов) — процентом пользователей, которые ушли, не совершив никаких действий. Разберём, почему это происходит и как улучшить ситуацию через грамотный дизайн. В данной статье разберем: - Что такое bounce rate и как его рассчитывают? - Основные причины высокого bounce rate - Влияние bounce rate на SEO - Мифы о bounce rate - Инструменты для отслеживания и анализа bounce rate ⏱Читать статью

Как создать нечитаемый слайдер для Вашего сайта, или свойство BlurText, которого нет #почитать

На просторах сети немало сайтов, и у значительной их части на главной странице находится ОН — Самый Главный Слайдер. Как правило, у него есть некоторый набор отличительных черт: он большой, у него красивые картинки, он содержит очень важную информацию! А самое главное — зачастую, часть его слайдов... нечитаема. И это очень коварная проблема, ведь поначалу ничто не предвещает беды. Дизайнер делает красивый дизайн, верстальщик - качественную вёрстку. Всё идёт отлично! А спустя время заказчик начинает вводить текст, загружает картинку, иии... Оказывается, что картинка подходит совсем не любая. На самом деле, даже не любая картинка зачастую тоже не подходит! А ещё есть разные... кхм... разрешения... кхм... экрана... Простите, слеза в горле застряла.

⏱Читать статью

Optimizing PWAs For Different Display Modes #почитать Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. Declan covers how we can modify our app depending on what display mode is applied to mitigate these issues. ⏱Читать статью

Улучшаем тексты в вебе при помощи text-wrap: pretty #почитать В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать. Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению. В цифровой типографике все слова располагает компьютер, а не человек. Веб-дизайнеры или разработчики часто создают шаблон, заполняемый различными версиями контента. Типографика в вебе не настраивается вручную, особенно в случае гибкой структуры текста, меняющейся в зависимости от формы и размеров экрана. Что же мы можем сделать, чтобы приблизиться к качеству традиционной типографики, сохранив при этом возможность механизации, привносимую современными компьютерами? Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов. ⏱Читать статью

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах #почитать UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты. ⏱Читать статью

и не говорите, что работы нету 😁

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

What We Know (So Far) About CSS Reading Order #почитать Предлагаемые CSS-свойства reading-flow и reading-order предназначены для указания исходного порядка элементов HTML в дереве DOM, или, проще говоря, как инструменты доступности определяют порядок элементов. Вы будете использовать их для того, чтобы порядок фокусировки фокусируемых элементов соответствовал визуальному порядку, как указано в Руководстве по доступности веб-контента (WCAG 2.2). ⏱Читать статью

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения #почитать Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас. ⏱Читать статью

Scroll-Driven Animations Inside a CSS Carousel #почитать Недавно я размышлял над тем, что узнал о CSS-каруселях. Они многое могут делать прямо из коробки (и кое-что не могут), как только вы определите контейнер прокрутки и скроете переполнение. Нет ли еще одной довольно новой функции CSS, которая работает с областями прокрутки? Ах да, это анимация, управляемая прокруткой. Разве это не означает, что мы можем запускать анимацию при прокрутке элементов в CSS-карусели? ⏱Читать статью

Как размыть фон под элементом с помощью backrop-filter #почитать В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно. То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter. ⏱Читать статью