Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS.
В Кремниевой долине есть очень особенный ресторан фаст-фуда, который всегда открыт. Там имеется один столик, за ним может разместиться лишь один посетитель, которому дадут совершенно фантастический гамбургер. Когда туда приходишь — ждёшь до тех пор, пока не настанет твоя очередь. Потом хозяин ресторана подведёт тебя к столику, и, это же Америка, тебе зададут, кажется, бесконечное количество вопросов о том, как приготовить и как подать твой гамбургер.
Сегодня, правда, мы не собираемся говорить о кулинарных изысках. Мы говорим о системе очередей, которую используют рестораны. Если вам повезло и вы прибыли в ресторан тогда, когда столик пуст, и когда никого в очереди нет, вы можете прямо сразу за него сеть. В противном случае хозяин даст вам специальный пейджер (из бескрайней кучи таких пейджеров!) и вы можете бродить вокруг ресторана до тех пор, пока этот пейджер не подаст сигнал. Дело хозяина ресторана — обеспечить, чтобы посетители попадали бы за столик в порядке их прибытия. Когда настанет ваша очередь, хозяин отправит сигнал на ваш пейджер, а вы вернётесь в ресторан, где сможете усесться за столик.
Если вы передумали — можете вернуть пейджер хозяину, а он, ни слова не сказав, спокойно его заберёт. Если ваш пейджер уже сработал, то хозяин, если на вас очередь не оканчивается, вызовет следующего посетителя. Посетители этого ресторана всегда вежливы, они, получив пейджер, не уходят украдкой, никого не предупредив. А хозяин всегда честен и не усадит за столик кого-то, кто стоит в очереди за вами, даже если вам, чтобы вернуться в ресторан после срабатывания пейджера, нужно некоторое время.
В Joomla 4 используются контейнеры внедрения зависимостей (DI контейнеры, DIC). Эта статья-перевод (из нового портала документации для разработчиков) призвана объяснить, зачем их внедрили и как их использовать в Joomla. DI контейнеры уже давно существуют в экосистеме PHP, например, Symfony представила эту концепцию в 2009 году. Теперь они доступны и в Joomla.
<capture>, который начинает видеосъёмку на смартфоне просто по нажатию кнопки на веб-странице.
В данной статье я хочу поделиться своим опытом разработки интерфейсов с уровнем кастомизации вплоть до 100% (реальные 100%). При этом сохраняется обратная совместимость и возможность апдейтов. Магия? - Нет, это CDD!
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной 4 малоизвестным API, которые в некоторых ситуациях могут оказаться весьма полезными:
Я только начинаю свой путь, как в веб-разработке, так и в программировании в принципе, с ответом на этот вопрос мучился 2 дня и казалось бы перепробовал все, НО как это обычно бывает, решение лежало на поверхности.
P.S. Могу путаться в терминах в силу своей неопытности, прошу строго не судить. Всегда рад конструктивной обратной связи, спасибо за понимание! Да, я знаю о существовании Django, просто начинать как мне кажется лучше с голого кода и дальше с базовыми знаниями переходить к изучению этого прекрасного фреймворка.
Привет, друзья!
В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook.
Мы разработаем библиотеку, состоящую из одного простого компонента — кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки.
Если вам это интересно, прошу под кат.
С Shopify я работаю практически год, за это время я столкнулся с множеством интересных задач и сейчас постараюсь поделиться своим опытом. Если вы хотите изучить Shopify разработку, то вам будет полезно прочитать эту статью, она должна помочь вам познакомиться с Шопифай и возможно ответить на какие-то ваши вопросы. Даже если вы хотите открыть магазин на Шопифай вы сможете почерпнуть для себя полезную информацию.
Всем привет. Меня зовут Андрей, я работаю в компании SegmentStream, занимаюсь вопросами архитектуры, инфраструктуры и написанием кода. Сегодня я расскажу как мы адаптировали Cube под наши нужды. В рамках статьи я не буду подробно рассказывать про сам Cube, если вы не знакомы с Cube, то лучше сначала немного почитать про него на официальном сайте cube.dev/docs. Если говорить про SegmentStream, то мы разрабатываем SaaS-платформу для оптимизации рекламных кампаний на основе машинного обучения. Звучит просто, но я рекомендую почитать, там много интересных вещей.
Также, в статье будет достаточное количество кода на TypeScript, который можно при желании не стесняться заимствовать. Я постараюсь оставлять объяснения к нему.
В идеальном мире дизайнеры, бэки и фронты – все из одной команды. Но наш мир далек от совершенства, поэтому частенько приходится работать с тем, что дают клиенты.
После очередного "чужеродного" дизайна у наших разработчиков наболело, и они создали базовый чеклист для дизайнеров. Мы решили поделиться им, вдруг кто-то тоже страдает. Поэтому, если вам:
Привет, друзья!
Представляю вашему вниманию перевод еще нескольких статей из серии Mastering TypeScript, посвященных углубленному изучению TypeScript.
Wireframe — это карта экранов, которая показывает навигацию между ними и содержит минимальную детализацию.
Sergejs Jersovs зарабатывал на жизнь частным извозом в Ирландии. Пока однажды, когда ему было 44 года, не решил полностью изменить свою жизнь и стать веб-разработчиком. Начал свой путь в IT он с того, что прошел наш курс «Веб-разработчик с нуля до профи». Меньше чем через полтора года после окончания курса он уже работает в Amazon.
Я не люблю магию, магией мы часто объясняем какое то поведение части приложения, библиотеки или фреймворка, которое не понимаем, а когда наконец прочитав документацию понимаем, как тот или иной функционал реализован на самом деле, ловим себя на мысли, что никакой магии нет, только грани нашего познания и что на самом деле все просто, когда разберешься.
Так вот как то раз смотря документацию Relay я наткнулся на мысль, что не понимаю, как работает связка Relay.useLazyLoad и React.Suspense.
В частности не понятно, как именно React.Suspense понимает, что вот прямо сейчас происходит асинхронный запрос и самое время отрисовывать fallback?
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
При написании HTML-страницы по методологии БЭМ («Блок, Элемент, Модификатор») БЭМ-сущности привязываются к узлам HTML-дерева. В предыдущих статьях я рассматривал, как можно выполнить в скрипте на языке PowerShell проверку правильности написания названий БЭМ-сущностей по отдельности с помощью регулярных выражений.
В этой статье рассмотрено, какие есть правила для совмещения нескольких имен БЭМ-сущностей на одном узле HTML-дерева и как соблюдение этих правил можно проверить в скрипте на языке PowerShell. Приведены иллюстрации фрагментов результатов работы скрипта в разных случаях, при обнаружении разных ошибок.
Angular имеет отличный инструмент для ограничения навигации между страницам из коробки. Но, как и любом большом проекте, у него есть свои подводные камни. Сегодня я расскажу вам об одном из них.
Любой крупный проект старше пары лет имеет легаси. hh.ru здесь — не исключение. Однажды перед нашей командой встала задача перевести страницу прайс-листа работодателя на React. Сперва это занятие показалось нам абсолютно рутинным, но если бы это на самом деле было так, вы бы сейчас не читали эту статью.
Всем привет! Меня зовут Саша, я — фронтенд-разработчик команды «Монетизация» hh.ru. В своем материале расскажу, как мы рефакторили наболевшее, обнаруживали главные проблемы и находили элегантные решения.