Эта статья — перевод оригинальной статьи «Perfectly Pointed Tooltips: A Foundation», будут переводы ещё двух частейТакже я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.ВступлениеТултипы — классика веб-разработки. Кликаешь по элементу — и рядом всплывает небольшой «бабл» с дополнительной информацией. Но за этим простым кликом почти всегда стоит JavaScript, который рассчитывает, где именно показать тултип.Попробуем поставить его све…
❯ Поддержка браузеровРанняя версия Sanitizer API была реализована в Chrome, но позже была удалена. Поэтому не стоит ориентироваться на старые материалы — спецификация API со временем значительно изменилась.На данный момент Sanitizer API поддерживается в Firefox Nightly в соответствии с актуальной спецификацией. В Chrome Canary он также доступен, но только при включении специального флага. В Safari реализация пока не ведется, однако команда разработчиков Safari выразила поддержку этой инициативе…
Продолжая тему из моей предыдущей статьи о веб-компонентах, я хочу подробнее рассмотреть их применение для решения реальных задач. Сегодня мы напишем простую, но полнофункциональную реализацию Слайдера, в процессе познакомившись с такими ключевыми концепциями, как Shadow DOM и Declarative Shadow DOM. Что нам даёт использование Shadow DOM: Возможность работать со слотами (<slot>) для композиции контентаПолная изоляция стилей компонента от глобальных таблиц CSSИнкапсуляция DOM-дерева комп…
Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если вы уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним.Содержание серииЧасть 1: Чем полезна ленивая загрузка || English versionЧасть 2: Граф…
И снова здравствуй. И добро пожаловать во вторую часть моего ультимативного гайда. Приготовься — скоро ты станешь настоящим профи.Содержание серииКак сделать бесконечно ленивым: Ультимативный гайд.Часть 1: Чем полезна ленивая загрузка || English versionЧасть 2: Графы зависимостей || English versionЧасть 3: Вендоры и кэш || English versionЧасть 4: Преждевременная загрузка || English versionРанее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотр…
И снова здравствуй. И добро пожаловать в третью часть моего ультимативного гайда. Приготовься — скоро ты станешь настоящим профи.Содержание серииКак сделать бесконечно ленивым: Ультимативный гайд.Часть 1: Чем полезна ленивая загрузка || English versionЧасть 2: Графы зависимостей || English versionЧасть 3: Вендоры и кэш || English versionЧасть 4: Преждевременная загрузка || English versionРанее мы поговорили о том, как сделать дерево зависимостей нашего проекта максимально чистым и почему это ва…
И снова здравствуй. И добро пожаловать в четвертую часть моего ультимативного гайда. Приготовься — скоро ты станешь настоящим профи.Содержание серииКак сделать бесконечно ленивым: Ультимативный гайд.Часть 1: Чем полезна ленивая загрузка || English versionЧасть 2: Графы зависимостей || English versionЧасть 3: Вендоры и кэш || English versionЧасть 4: Преждевременная загрузка || English versionРанее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать вендоры. А в этой …
API. Это слово звучит в каждой статье, в каждой вакансии, в каждом разговоре разработчиков. Но когда гуглишь, что это, вываливается тонна заумных определений про «программные интерфейсы приложений», от которых мозг плавится.Так что сегодня объясню, что такое API, так, что ты точно поймешь: на простых примерах, интересно, да еще и с крутой графикой. Уже через несколько минут ты будешь великолепно знать, что такое API и как создать свой собственный.Знакомая ситуация из реальной жизниПредставь, чт…
Как‑то на одном проекте понадобилось красиво равномерно разместить небольшие блоки‑виджеты в контейнере на странице. Сложность в том, что эти блоки различаются, как по высоте, так и по ширине. При чём нужно учесть адаптивность вёрстки и динамическое изменение содержимого, как контейнера, так и самих элементов — виджетов. Собственно мои изыскания по этой теме и вылились в разработку собственного решения и эту статью, которые, я надеюсь, будут полезны читателям. Опишем подробно условия/пожелания …