• 10 PostCSS плагинов, которые сэкономят время вашему верстальщику


      У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.


      Волна хайпа уже давно прошла, в последнее время про PostCSS говорят очень мало. Многие новички даже не знают, что это такое. Думаю самое время посмотреть на этот инструмент с точки зрения практического использования в самых обычных проектах, где люди решают задачи, а не играются с модными технологиями.

      Читать дальше →
    • Производительность анимаций на сайтах

      • Tutorial

      image


      При разработке сайтов, выходящих за рамки условного бутстрапа, рано или поздно возникают вопросы, связанные с производительностью анимаций. Особенно важными они являются в дизайнерских сайтах, вроде тех, что попадают в каталоги Awwwards, FWA, CSS Design Awards и.т.д. При этом часто задача создания анимаций и последующей оптимизации, если она будет нужна, ложится на плечи не очень опытных разработчиков, которые даже не знают с чего начать. Обычно все это выливается в тормозящие сайты, которыми невозможно пользоваться, и последующее негативное отношение ко всему классу таких проектов. В этой статье мы постараемся разобрать, где находится граница приемлемой производительности анимаций, какие узкие места часто встречаются и куда смотреть в инструментах разработчика в первую очередь.

      Читать дальше →
    • Продвинутый Three.js: шейдерные материалы и постобработка

      • Tutorial


      В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.

      Читать дальше →
      • +17
      • 6.6k
      • 2
    • Трехмерные презентации товаров на Three.js для самых маленьких

      • Tutorial


      Всевозможные презентации товаров в 3D – не такая уж и редкость в наше время, но эти задачи вызывают массу вопросов у начинающих разработчиков. Сегодня мы посмотрим некоторые основы, которые помогут войти в эту тему и не спотыкаться о такую простую задачу, как отображение трехмерной модельки в браузере. В качестве подспорья будем использовать Three.js как самый популярный инструмент в этой области.

      Читать дальше →
      • +17
      • 12.7k
      • 7
    • Генерируем красивые SVG-плейсхолдеры на Node.js

      • Tutorial


      Использование SVG-картинок в качестве плейсхолдеров — это очень неплохая идея, особенно в нашем мире, когда чуть ли не все сайты состоят из кучи картинок, которые мы пытаемся асинхронно подгружать. Чем больше картинок и чем более объемные они, тем выше вероятность получения различных проблем, начиная от того, что пользователь не совсем понимает, а что же там собственно грузится, и заканчивая известным скачком всего интерфейса после прогрузки картинок. Особенно на плохом интернете с телефона — там может и на несколько экранов все улететь. Именно в такие моменты заглушки приходят на помощь. Еще один вариант их использования – это цензура. Бывают такие моменты, когда нужно скрыть от пользователя какую-то картинку, но хотелось бы сохранить общий стиль страницы, цвета и место, которое картинка занимает.


      Но в большинстве статей все рассуждают о теории, о том, что было бы неплохо инлайново вставлять все эти картинки-заглушки в страницы, а мы сегодня посмотрим на практике, как можно генерировать их на свой вкус и цвет с помощью Node.js. Мы создадим handlebars-шаблоны из SVG-картинок и будем из заполнять разными способами, начиная от простой заливки цветом или градиентом и заканчивая триангуляцией, мозаикой Вороного и использованием фильтров. Все действия будут разбираться по шагам. Полагаю эта статья будет интересна начинающим, которым интересно, как это делается, и нужен подробный разбор действий, но и опытным разработчикам возможно приглянутся некоторые идеи.

      Читать дальше →
    • Шизотипическое расстройство: взгляд изнутри


        На Хабре уже писали о различных расстройствах, но как-то так получается, что тема шизотипического расстройства остается не раскрытой. Да и в сети сложно найти информацию для широкого круга людей по этой теме. Часто можно встретить много раз скопированные копирайтерами тексты со множеством неточностей и откровенными мифами, а еще чаще — полную противоположность, заумные тексты, написанные врачами для врачей. Так, согласно DSM, шизотипическое расстройство — это демонстрация пациентом первазивной модели социального и межличностного дефицита, отмеченного острым дискомфортом и сниженной способностью к формированию близких отношений, который испытывает когнитивное и перцептивное искажение, а также проявляет эксцентричность в поведении, начинающеюся с ранней юности и представленную в различных контекстах. Если вы ни слова из этого не поняли — добро пожаловать под кат. Сегодня мы посмотрим, как все это выглядит изнутри.

        Читать дальше →
      • Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта

        • Tutorial
        image

        Данная статья является логическим продолжением введения в программирование шейдеров для верстальщиков. В ней мы сделали шаблон для создания различных двумерных эффектов с фотографиями с помощью шейдеров и посмотрели пару примеров. В данной статье мы добавим еще пару текстур, применим на практике разбиение Вороного для создания мозаики из них, поговорим о создании различных масок в шейдерах, о пикселизации, а также затронем некоторые проблемы древнего синтаксиса GLSL, который до сих пор существует в наших браузерах.


        Так же, как и в прошлый раз, будет минимум теории и максимум практики и рассуждений на приземленном бытовом языке. Начинающие найдут здесь последовательность действий с советами и полезными замечаниями, а опытные фронтендеры возможно найдут себе пару идей для вдохновения.

        Читать дальше →
      • Введение в программирование шейдеров для верстальщиков

        • Tutorial


        WebGL существует уже давно, про шейдеры написано немало статей, есть серии уроков. Но в основной массе они слишком сложные для верстальщика. Даже лучше сказать, что они охватывают большие объемы информации, которые скорее нужны разработчику игрового движка, чем верстальщику. Там сразу начинают с построения сложной сцены, камера, свет… На обычном сайте для создания пары эффектов с фотографиями все эти знания избыточны. В результате люди делают очень сложные архитектурные конструкции и пишут длинные-длинные шейдеры ради очень простых по сути действий.


        Все это побудило создать введение в те аспекты работы с шейдерами, которые наиболее вероятно пригодятся в работе именно верстальщику для создания различных 2d-эффектов с картинками на сайте. Конечно с поправкой на то, что сами по себе в дизайне интерфейсов они у нас применяются относительно редко. Мы сделаем стартовый шаблон на чистом JS без сторонних библиотек и рассмотрим идеи создания некоторых популярных эффектов, основанных на сдвиге пикселей, которые сложно сделать на SVG, но при этом они легко реализуются с помощью шейдеров.

        Читать дальше →
        • +40
        • 19.7k
        • 8
      • 5 приемов работы с CSS, о которых вам следует знать


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

          Читать дальше →
        • Пунктирные вау-эффекты: о магии простыми словами



            Продолжаем смотреть технические приемы создания различных анимаций в интерфейсах. Мы уже познакомились с частицами, масками и изменением форм различных объектов — настал черед рисовать пунктирные линии.

            Перед тем, как перейти к статье, сделаю небольшое отступление. Эта серия статей предназначена для разработчиков (в первую очередь начинающих), которые хотят делать красивые вещи, но совершенно запутались в сложных инструментах. Каждый раз мы затрагиваем какой-то один прием использования того или иного инструмента и смотрим, к созданию какиих эффектов его можно применить. Комментарии о том, что “во времена флеша было лучше” или что “нужно анимации рисовать в AfterEffects” безусловно имеют право на существование, но будут вырваны из контекста и совершенно не помогут начинающим в решении их задачи.
            Читать дальше →
          • Изменчивые формы и вау-эффекты: о магии простыми словами



              Продолжаем рассматривать идеи создания различных эффектов для сайтов. Закончили мы на SVG масках, а сегодня на повестке дня элемент path и формы, которые с его помощью создаются. Точнее их изменения. И снова мы постараемся избежать использования сложных технологий, рассмотрим преобразование одних иконок в другие, создание эластичных элементов и использование силуэтов для придания сайту атмосферности.
              Читать дальше →
              • +14
              • 9.6k
              • 9
            • SVG маски и вау-эффекты: о магии простыми словами



                О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.
                Читать дальше →
              • Частичные вау-эффекты: о магии простыми словами

                  Существует такая категория сайтов, которые мы обычно называем «вау-сайтами». Они не предназначены для непосредственного потребления контента, а скорее производят впечатление на посетителя. Эти сайты обычно уникальны в своем дизайне, содержат экспериментальные решения для взаимодействия с пользователем, ломают стереотипы и изобилуют разными анимациями. Особый интерес представляют различные трюки с SVG и анимации, основанные на большом количестве частиц, о которых и пойдет речь в этой статье.



                  В целом идея воссоздания различных объектов в виде набора частиц существует уже давно. Но из-за того, что практическое применение этой идеи сильно ограничено, а каждая конкретная реализация завязана на конкретный контент, нет единой структурированной базы знаний, в которой можно было бы быстро ознакомиться со всеми приемами. В результате многие разработчики не понимают, что в основе всего лежат очень простые идеи. Их под силу реализовать каждому, кто более-менее знаком с JS.
                  Читать дальше →
                  • +15
                  • 13.7k
                  • 3
                • Делаем сайт для виртуальной реальности. Встраиваем монитор в монитор и размышляем о будущем

                    image

                    Несмотря на то, что понятие «виртуальная реальность» уже не первый год мелькает перед глазами, оно до сих пор остается загадкой для большинства людей, а цены на аксессуары, связанные с этим развлечением, могут уходить в бесконечность. Но существует бюджетный вариант. Среднестатистический человек, интересующийся новыми технологиями, может позволить себе смартфон с гироскопом, встроенный в Google Cardboard или любой аналог этого нехитрого устройства и простой джойстик с парой кнопок. В наше время такой вариант знакомства с этой технологией наиболее распространенный. Но, как и многие другие технологичные новинки, вроде квадрокоптеров, интересная игрушка быстро превращается в пылящуюся на полке. Практическое применение сильно ограничено. Взрослые люди, купившие очки виртуальной реальности, первые дни играются в игрушки, смотрят различные видео с прекрасными барышнями, радуются, как дети. Это здорово. Новые впечатления всегда полезны. Но быстро приходит понимание, что графика в игрушках находится на уровне конца 90-х, видео наскучивает, а другого практического применения очкам для этих людей нет. Для отдельных разработчиков, дизайнеров и экспериментаторов очки становятся инструментом в работе, но обычный потребитель кладет их на полку и забрасывает. Было бы интересно применить эту технологию в интернете на обычных сайтах. В этой статье мы попробуем с помощью Javascript адаптировать привычную нам верстку под новые условия отображения. Информации по теме пока не много, статья носит характер эксперимента, так что всем заинтересованным людям, а также тем, кто имел подобный практический опыт, заранее предлагается присоединиться к обсуждению и поделиться своими мыслями и опытом в комментариях.

                    Читать дальше →
                  • Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии

                      главная картинка
                      В течение некоторого времени мне в руки попадали различные макеты, сделанные как известными дизайнерами, так и не очень, а также сайты, которые верстались по этим макетам. Одни были симпатичными, другие немного старомодными, третьи — просто ужасными. Переодически и сам решал задачи по верстке, в том числе и pixel-perfect, и постепенно пришел к пониманию, что все размеры в макетах выбираются почти всегда от балды относительно случайным образом, что привносит в результат некоторую неоднородность, а в процесс верстки — лишнюю головную боль, костыли и потраченное время. В данной статье я бы хотел поделиться некоторыми размышлениями и экспериментами по этому поводу.

                      Читать дальше →
                    • Создание картинок на CSS делает верстальщика лучше, или Чем себя занять долгими зимними вечерами

                        Monster


                        Те, кто интересуется версткой, frontend разработкой и веб-дизайном, вероятно заметили, что в последние несколько месяцев в сети все чаще стали появляться анимированные картинки, сделанные с помощью HTML и CSS. В этой статье я постараюсь рассказать откуда это веяние появилось, в чем фишка и почему это стало так популярно среди верстальщиков (а возможно кто-то еще не слышал, может быть интересно познакомиться с таким видом деятельности).

                        Читать дальше →
                      • Управляем состоянием приложения с помощью Vuex

                        • Tutorial
                        image

                        При создании веб-приложения мы в какой-то момент задаемся вопросом — как управлять его состоянием? Vue предоставляет нам способ управлять им в пределах одного компонента, подход очень простой, и при этом замечательно работает. Но что делать, если в приложении множество компонентов, которые должны иметь доступ к одним и тем же данным? Одно из решений этой задачи — Vuex, инструмент для централизованного управления состоянием. В данной статье мы рассмотрим из чего он состоит и как его использовать.
                        Читать дальше →
                      • Zenity на службе у системного администратора

                        Задумала как-то одна компания перейти на ПО свободное. И скачали себе линукс на все компьютеры, и сервер с дисками заморскими поставили, и учетные записи для пользователей сделали. И приказал начальник чтобы все сотрудники поставили себе пароли заковыристые. А они хоть и послушали рассказы о том, что за зверь перед ними, а вот где поменять пароль не знают. Или в настройках найти не могут. А от консоли бегут сломя голову. И начинают бегать к админу со словами «админ-админушка, помоги найти кнопочку», и начинает админушка бегать да нервничать, от дум важных отвлекается...

                        Не секрет, что для многих пользователей (особенно не связанных напрямую с IT) переход на новую операционную систему и ПО часто проходит болезненно. И во многом это связано с привычками. Люди запоминают что где находится на их компьютере и, если все переставить — они теряются. В результате многие простые действия могут вызывать сложности, такие как потеря времени и нервов.

                        Появилась идея: а что, если для задачи, требующей незамедлительного вмешательства пользователя (вроде замены пароля из былины выше), еще не знакомого с интерфейсом системы, ему явно дать окно с возможностью эту задачу решить? В поисках простого решения я наткнулся на zenity.
                        Читать дальше →