• Дизайн под iPhone X. Гайдлайны для iOS 11

    • Translation


    Вместе с iOS 11 появился новый iPhone X, айфон с самой большой диагональю экрана, который фактически не имеет границ. 5.8 дюймовый OLED экран даже больше чем экран 5.5 дюймов iPhone 8 Plus, в то время как размер самого корпуса примерно такой же как у iPhone 8. Для дизайнеров это означает большую свободу в макетах.
    Читать дальше →
  • User flow: как создаются популярные приложения и сайты

    Всем привет!

    Я – Максим Скворцов, UX/UI-дизайнер Omega-R, международной компании по разработке и интеграции IT-решений. Я занимаюсь проектированием и визуализацией интерфейсов мобильных и веб-приложений.

    На базе своего опыта в сфере информационных технологий и экспертизы компании хочу поделиться своим видением и подходом к применению одного из инструментов проектирования дизайна – user flow. Почему его используют и почему он является ценным помощником для дизайнера? Как может выглядеть user flow и как его создать?

    image
    Читать дальше →
  • Дизайн-система: что это, для чего и как создать

      Всем привет!

      Я рад вернуться к вам, дорогие читатели сообщества, и поделиться опытом и знаниями, полученными благодаря работе в IT-компании Omega.

      Тема дизайн-систем, казалось бы, уже рассмотрена со всех сторон: можно найти множество статей, постов, докладов и других материалов. Несмотря на это, у каждого, кто сталкивается с этим термином, возникает множество вопросов. Я постараюсь подробно ответить на главные из них:

      Читать далее
    • Обзор технологий скроллинга

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



      Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
      Читать дальше →
      • +29
      • 10.1k
      • 3
    • Как сбросить вес, не занимаясь спортом? Личный опыт

      • Tutorial
      Привет, Хабр!

      По моим наблюдениям, всех людей можно разделить на три категории: счастливчиков с нормальным телосложением, худых, кто не знает как бы поправиться, и полных, кто не знает как бы похудеть. Мне угораздило попасть в третью категорию, и всю взрослую жизнь мой вес колебался в районе 95кг при росте 1.74м, что соответствует BMI=31.4 или ожирению. И хотя в принципе, это ничуть не мешало, но все же лишний вес накладывает определенные ограничения, как в перспективе состояния здоровья, так и в плане личной жизни. Наконец, в один прекрасный день я решил что «пора», и занялся этим вопросом более серьезно.



      Думаю, среди IT-шников, работающих в офисе, немало людей с похожими проблемами, и надеюсь, мой опыт будет им полезен.
      Читать дальше →
    • Медиавыражения в CSS — это не только max-width

      • Translation


      Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.

      После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.

      Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном
      Читать дальше →
      • +15
      • 14k
      • 6
    • Заставьте сайт работать на сенсорных устройствах



        Сенсорные экраны на мобильных телефонах, планшетах, ноутбуках и настольных компьютерах открыли веб-разработчикам целый ряд новых взаимодействий. В переведенном руководстве Патрик Локи рассматривает основы работы с сенсорными событиями в JavaScript. Все рассматриваемые далее примеры есть в архиве.

        Читать дальше →
        • +26
        • 53.6k
        • 7
      • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

        • Translation

        Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:


        Эффекты фильтрации SVG


        1. Эффекты фильтров SVG. Часть 1. SVG фильтры 101.
        2. Эффекты фильтров SVG. Часть 2. Контурный текст при помощи feMorphology.
        3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer.
        4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
        5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap



        Это первая статья в серии об SVG фильтрах. Это руководство поможет понять, что это такое, и покажет, как использовать их для создания собственных визуальных эффектов.


        Читать дальше →
        • +13
        • 11.2k
        • 1
      • Конструкция async/await в JavaScript: сильные стороны, подводные камни и особенности использования

        • Translation
        Конструкция async/await появилась в стандарте ES7. Её можно считать замечательным улучшением в сфере асинхронного программирования на JavaScript. Она позволяет писать код, который выглядит как синхронный, но используется для решения асинхронных задач и не блокирует главный поток. Несмотря на то, что async/await — это отличная новая возможность языка, пользоваться ей правильно не так уж и просто. Материал, перевод которого мы публикуем сегодня, посвящён разностороннему исследованию async/await и рассказу о том, как использовать этот механизм правильно и эффективно.

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

        • Translation
        Автор материала, перевод которого мы сегодня публикуем, Нэш Вэйл, говорит, что недавно он занимался исследованием лендинг-страниц. В ходе работы он наткнулся на один сайт. Это был отличный, полезный ресурс. Однако, в ходе работы с ним, Нэш заметил, нечто неприятное.

        Неестественная анимация
        Читать дальше →
      • Отладка асинхронного JavaScript с помощью Chrome DevTools

        • Translation

        Вступление


        Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

        К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!
        Под катом 10Mb трафика
      • Разработка браузерной онлайн игры без фреймворков и движков


          Привет, Хабр!

          В этом посте будет описан процесс разработки онлайн игры на чистом javascript и WebGL (без фреймворков и движков). Будут рассмотрены некоторые алгоритмы, техники рендеринга, искусственный интеллект ботов и сетевая игра. Проект является полностью опенсорсным, в конце поста будет ссылка на репозиторий.
          Много картинок и гифок
        • Что почитать, чтобы повысить свой уровень JavaScript

          • Translation
          От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

          Сейчас в рассылке JSMentors JavaScript идет обсуждение книг, который стоит прочитать, чтобы улучшить свои знания. Там было много позитивных отзывов и предложений. Я хочу показать вам те книги и интернет-ресурсы, который я считаю важными и которые помогут вам в обучении. На этой странице я перечислил большое количество источников, разделенных по уровням.

          Учтите, что некоторый ресурсы могут принадлежать нескольким уровням и охватывают широкие аспекты языка. Если вы считаете, что я что-то упустил, пожалуйста, дополните меня в комментариях.

          Не заставляю вас читать все книги, которые предложены ниже. Эти книги я читал на протяжении многих лет и почерпнул в каждой много полезного. Я их распределяю по категориям, чтобы вам было проще работать с ними. Выберите книги, которые подходят вам.
          Читать дальше →
          • +157
          • 93.4k
          • 31
        • Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний

          • Translation
          До релиза Firefox Quantum остаётся всё меньше времени. Он принесёт множество улучшений в производительности, в том числе сверхбыстрый движок CSS, который мы позаимствовали у Servo.

          Но есть ещё одна большая часть технологии Servo, которая пока не вошла в состав Firefox Quantum, но скоро войдёт. Это WebRender, часть проекта Quantum Render.



          WebRender известен своей исключительной скоростью. Но главная задача — не ускорить рендеринг, а сделать его более плавным.

          При разработке WebRender мы поставили задачу, чтобы все приложения работали на 60 кадрах в секунду (FPS) или лучше, независимо от размера дисплея или от размера анимации. И это сработало. Страницы, которые пыхтят на 15 FPS в Chrome или нынешнем Firefox, летают на 60 FPS при запуске WebRender.

          Как WebRender делает это? Он фундаментальным образом меняет принцип работы движка рендеринга, делая его более похожим на движок 3D-игры.
          Читать дальше →
        • Полезные хаки и сниппеты для .htaccess



          Это перевод очень интересной лично для меня статьи, которым я хочу поделиться с уважаемым хабрасообществом. Некоторые из приведенных рецептов я уже встречал на Хабре, но разрозненно и далеко не все из нижеприведенного.

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

          Если же вам нужны базовые сведения о предназначении данного файла, то вы можете получить из нашей статьи введение в .htaccess (перевод данной статьи не делал, так как там основы, их достаточно в русскоязычном сегменте Сети, но если будет проявлен интерес, то можно и ее перевести для полноты картины — прим. переводчика), в которой достаточно подробно раскрыты все аспекты его применения.
          Узнать больше
        • Простая настройка .htaccess для production

            Иногда, когда сайты хостятся на shared-хостинге или работа идет только с Apache, нужно сделать максимальную оптимизацию работы сервера и сайта соответсвенно. В статье приводятся несколько настроек, которые позволят вашему сайту работать лучше.

            Читать дальше →
          • 15 малоизвестных свойств и методов объектов DOM

            • Translation
            При разработке современных веб-сайтов интенсивно используются возможности JavaScript по работе с DOM. Скрипты позволяют отображать и скрывать элементы, из которых строятся страницы, настраивать свойства этих элементов. У объектов DOM, с которыми взаимодействуют из программ, имеются свойства и методы. О некоторых из них, по мнению автора материала, перевод которого мы сегодня публикуем, знают практически все веб-программисты. А вот некоторые, о которых он и хочет здесь рассказать, пользуются куда меньшей известностью.


            Читать дальше →
          • Разработка Технического задания по ГОСТ 34 легко и просто

              Нередко слышишь мнение, что составление Технического задания по ГОСТ 34 (ТЗ) занятие не только трудоемкое, но и крайне раздражающее, поскольку приходится писать много всякой ерунды, воды. Но подумайте: разработкой этого ГОСТа занимались целые НИИ, это был проект на государственном уровне, обобщен опыт сотен проектов автоматизации, сложных проектов. Неужели они могли написать чушь?

              На самом деле, при грамотном подходе ГОСТ очень сильно помогает не только при разработке ТЗ, но и в ходе реализации проекта автоматизации в целом (и не только в госконтрактах, но и для коммерческой разработки). Грамотные люди его писали. Но чтобы воспользоваться плодами их трудов, нужно немного понять замысел не только ТЗ, но и ГОСТ 34 в целом.

              В данной статье мы пункт за пунктом разберем все требования ГОСТа и попробуем сделать разработку ТЗ по ГОСТ 34 не обременением, а большой помощью в проекте.
              Читать дальше →
            • Перемены в интерфейсах, многослойная анимация и структурированный визуальный хаос: обзор веб-тенденций на 2019 год

              • Translation


              Интернет — многостороннее явление. Динамика его развития расширяет привычные границы по всем направлениям. Зарекомендовавшие себя подходы и элементы постепенно уступают место новым, более эффективным формам коммуникации людей с брендами и технологиями.

              1 / Технологии


              1.1. Машинное обучение


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


              Без машинного обучения добиться успеха будет очень сложно

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

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

              Переведено в Alconost
              Читать дальше →
            • В основе скорости хода эволюции может лежать математическая простота

              • Translation

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



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

              Креационисты обожают настаивать на том, что эволюции пришлось бы собирать до 300 аминокислот в правильном порядке, только чтобы создать единственный человеческий белок среднего размера. И поскольку на каждой позиции могла располагаться одна из 20 возможных аминокислот, казалось бы, существует более 20300 вариантов перебора, что на много порядков превышает количество атомов в обозримой Вселенной. Даже если мы обнаружим избыточность, из-за которой некоторые из этих вариантов будут эквивалентными, вероятность того, что эволюция наткнулась на правильную комбинацию случайно, проводя случайные мутации, кажется чудовищно маленькой, даже с учётом миллиардов прошедших лет.
              Читать дальше →