• Про оптимизацию рендеринга — с оптимизмом

      У меня есть мечта, и она утопична: я хочу, чтобы мои веб-приложения работали идеально. JQuery, AngularJs, React, Vue.js — все обещают производительность. Но проблема совсем не во фреймворках и не в JavaScript. Проблема в том, как браузер рендерит страницу. А делает он это очень плохо.

      Если бы браузер отлично справлялся с рендерингом, то не появился бы такой инструмент, как React Native. Под капотом React Native всё тот же JavaScript, а View нативное, и разница в производительности между нативным приложением и приложением на React Native не будет заметна для рядового пользователя. Другими словами, проблема не в JavaScript.

      Если что-то оптимизировать, то как раз рендеринг. Инструментов, которые нам даёт JavaScript и API браузера, недостаточно. Два года я пытаюсь сделать работу своих продуктов плавной и быстрой, но тщетно. Я почти смирился с тем, что веб останется таким навсегда. В этой статье я собрал всё, что успел узнать об оптимизации рендеринга и применить на проектах, над которыми работал, и рассказываю о своих надеждах на ближайшее будущее. Это будущее, в котором я хочу опираться на устойчивый фундамент стандартов и API браузера, а не CSS-хаки и third-party репозитории для оптимизации производительности.


      Читать дальше →
    • Инерция в JavaScript на примере OL3

        Современный мир диктует разработчикам и дизайнерам довольно высокие стандарты качества и удобства использования веб-приложений. Как правило, хорошее впечатление о приложении складывается из множества мелочей, которые должны гармонично сочетаться между собой. Одной из таких мелочей может являться инерционное движение “драгабельных” (перетаскиваемых) объектов на странице — об этом мы и поговорим в рамках сегодняшней небольшой статьи. Фича особенно актуальна при взаимодействии пользователя с приложением посредством тач-устройств, так как размер экранов таких устройств ограничен, и передвигать объект из одной точки в другую хочется одним “легким движением руки”, а не многократными касаниями экрана.

        Подобным вопросом мы когда-то задались в рамках разработки API карт 2GIS, а сегодня решили поделиться нашим скромным опытом.
        Читать дальше →
      • Ценность многошрифтового дизайна

        • Translation


        Я заметила, что одна из особенностей моего дизайнерского стиля — это готовность использовать, на первый взгляд, слишком большое количество разных гарнитур шрифтов. Я видела неисчислимое множество статей о сочетаниях и системах использования шрифтов, и почти везде рекомендуется использовать меньше шрифтов в любом дизайне. Я и к своей работе получала такие комментарии – дескать, работы приятные, несмотря на количество используемых шрифтов.
        «Очень нравится сайт, потому что он не боится нарушать одно из первых правил шрифта – не использовать слишком много разных гарнитур. Используется четыре шрифта, два из семейства sans-serif и два из serif — Galaxie Copernicus, Interstate, Harriet и Nimbus Sans. Основной момент такого дизайна – последовательность, и сайт Бетани Хек последовательно использует каждый из шрифтов для своей цели.»
        — Джеремия Шоаф, Typewolf


        Расцениваю это, как вызов. Спасибо, Джеремия!

        Хочу поспорить и рассказать о ценности эклектичных систем, и о том, как создать структуру проекта, чтобы эффективно использовать совместно несколько шрифтов.



        Так почему же у нас есть правила насчёт количества используемых гарнитур?
        Реально много больших картинок.
        • +15
        • 17.6k
        • 4
      • Обзор книг по дизайну

          Всем привет! У нас вышли новые книги по дизайну

          image
          Дизайн. Книга для недизайнеров. 4-е изд.
          Автор: Робин Уильямс

          Дизайнеры и недизайнеры всего мира уже два десятилетия используют в своих работах фундаментальные принципы, изложенные Робин Уильямс. Познакомьтесь с полностью обновленным полноцветным четвертым изданием «Дизайн. Книга для недизайнеров». В этой книге вы найдете: четыре секрета, которые пригодятся в любом дизайнерском проекте; принципы работы с цветом; стили дизайна; оттачивание дизайна с помощью шрифтов; варианты дизайна для брошюр, листовок, писем, рекламы.

          Мысли о дизайне
          Автор(ы): П. Рэнд

          Эссе Пола Рэнда по дизайну — старейшее и самое известное в мире. Впервые книга увидела свет еще в 1970-х, а основные идеи, изложенные в ней автором, абсолютно актуальны и сегодня! Поэтому, переизданная снова в 2014 году, она тут же стала мировым бестселлером. Этот классический труд будет интересен и полезен как студентам художественных факультетов, так и профессиональным дизайнерам.
          Читать дальше →
        • Автоматическое дополнение JS-кода из базы Stack Overflow

            Пару недель назад Stack Overflow выложил в открытый доступ дамп всего контента, опубликованного на сайтах в сети Stack Exchange за 2014-2016 гг, в формате XML. Там все вопросы и ответы, комментарии и оценки: всего 33,8 ГБ в архиве.

            Разработчик веб-приложений Эмиль Шутте (Emil Schutte) нашёл полезное применение этому дампу. Он извлёк оттуда фрагменты кода, которые соответствуют критериям (одобренные ответы с более 50 голосов и тегом "javascript") и проиндексировал их.



            Так появилась программка Autocomplete from Stack Overflow. Если написать что-то в форме, то она ищет подходящий фрагмент в базе Stack Overflow — и автоматически его предлагает.
            Читать дальше →
          • Подборка: Более 800 ресурсов для front-end-разработчиков

            • Translation
            Мы продолжаем публиковать подборки полезных инструментов. Ниже представлена подборка из более 800 сервисов, книг, статей, видеотуториалов и других материалов, которые будут полезны всем, кто занимается фронтенд-разработкой.

            Читать дальше →
          • БЭМ-одержимость. Последствие параметрического дизайна

              Тысячи часов были инвестированы мной вхолостую. Если верить правилу 10 000 часов, то еще немного и я смог бы стать сносным скрипачом, ремесленником, спортсменом или еще кем-то. Но в разработке и дизайне это не работает. Весь шлак удаляется и часы обнуляются. А число ошибок и скорость изменения настолько велика, что мысли о приобретенном опыте можно отбросить.

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

              Мне, как дизайнеру, не хочется тратить 90% времени на формирование окружения (структуру, сборщики и другие подобные вещи). А писать HTML и CSS по старинке, я позволить себе не могу. Таким образом, появляется необходимость в среде для «умного» дизайна.

              Анти-кастомщина


              Какое-то время я был горд проделанной работой. То, тем как поменялись процессы в нашей команде, как мы выходили из полного дизайн-хаоса. Я описывал это в статье «Дизайн масштабируемых проектов». Но меня беспокоило несколько моментов. И ощущение того, что мы написали свою кастомщину (хоть и достойно справляющуюся со своими задачами) все чаще напрягало.
              Читать дальше →
            • Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 1: письмо, идея, прототип

                image

                Началось так: мне написали из Envato, что они запускают раздел с шаблонами Скетча в Themeforest, а раз уж я такой идейный пользователь, то было бы неплохо, если бы я на открытие нарисовал шаблон какой-нибудь. Я, естественно, отказываться не стал.

                Шаблон получился вот такой.

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

                Рассмотрим ситуацию, когда необходимо обрабатывать столкновения между объектами. Как вы в этом случае поступите? Вероятно, самым простым решением будет проверить каждый объект с каждым другим объектом. И это правильное решение, и все будет замечательно до тех пор пока объектов не много. Как только их станет порядка нескольких тысяч, вы заметите, что все стало как-то медленно работать. А если частиц несколько десятков тысяч или сотен? Тогда все замрет. Вот здесь уже интересно, на какие хитрости и оптимизации вы пойдете, чтобы решить такую проблему.

                Для простоты, будем рассматривать 2D случай, частицы круглые, радиус частиц у всех одинаковый.

                Содержание


                1. Обзор алгоритмов
                1.1. Полный перебор
                1.2. Sweep & Prune
                1.3. Регулярная сеть
                2. Некоторые оптимизации
                2.1. Sweep & Prune
                2.2. Регулярная сеть
                3. Сравнение скорости выполнения
                4. Приложение (программа и исходный код)
                5. Заключение

                Читать дальше →
              • 50 лучших инструментов для разработки CSS и JavaScript

                • Translation
                Веб-разработчику постоянно необходимо быть в курсе появления новых библиотек и инструментов. Я нашёл и выбрал несколько лучших инструментов для разработки как CSS, так и JavaScript. Это не просто копипаста – это выборка, основанная как на рекомендациях, так и на личном опыте использования.

                Разработка фронтэнда – штука хитрая. И хотя она не слишком сложная для освоения, некоторые тонкости освоить также не помешает. В сети ежедневно появляются отличные ресурсы. Они могут дать толчок развитию ваших навыков и помочь вам лучше выполнить вашу задачу.

                Лучшие инструменты для CSS и JavaScript


                1) Fileicone

                Сборник 100%-CSS файловых иконок. Может пригодиться для дизайна страниц.

                image

                2) Marx

                Элегантное обнуление CSS безо всякого JavaScript.

                image
                Читать дальше →
              • JavaScript. Вопросы на собеседовании

                  Не так давно озадачился поиском работы, в связи с чем посетил n-нное количество собеседований и услышал много интересных вопросов. По сети гуляет много статей с вопросами по JS, поэтому постараюсь выбрать вопросы, которые ещё не видел. Здесь нет вопросов типа Что такое замыкание?, Наследование в JavaScript или Сделайте ajax запрос на VanillaJS. Кстати советую поискать ответы на эти вопросы, прежде чем читать статью :) Под катом вопросы типа «с подвохом». Вряд ли какой-то из них попадётся вам, но, надеюсь, статья настроит вас на «подвоховое» мышление, и напомнит некоторые скользкие места и подводные камушки javascript.
                  Читать дальше →
                • Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

                    Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
                    Вы заказчик. Как убедиться, что работа выполнена качественно?
                    Как оценить качество вёрстки?

                    Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

                    Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

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

                    Итак что же это за список?

                    Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

                    История обновлений:
                    • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
                    • 2015/08/10: актуализирован список исключений для CSSLint
                    • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
                    • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
                    • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
                    • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
                    • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
                    • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
                    • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
                    • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


                    Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
                  • Используем SVG на сайте



                      Оставим за скобками вопрос о целесообразности использования SVG на сайте. Каждый сам для себя должен определить полезность этой технологии. Тем более что эта тема поднималась уже неоднократно.

                      Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.

                      Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в будущем настоящем.
                      Для любопытных сразу приведу сводную таблицу:
                      Иконочный шрифт IMG, background-image Object Inline
                      CSS Манипуляции Частично1 Нет Частично2 Да
                      JS манипуляции Частично1 Нет Да Да
                      SVG анимации Нет Да Да Да
                      Интерактивные SVG анимации Нет Нет Да Да
                      Читать дальше →
                    • webpack: 7 бед — один ответ

                      После моего недавнего выступления на MoscowJS #17 с одноимённым докладом у многих возник интерес к этому инструменту. В рамках 11-го выпуска RadioJS, Миша Башкиров bashmish рассказал, что решился попробовать его в своём новом проекте, об успешном опыте и множестве положительных эмоций. Но были озвучены вопросы и возникла дискуссия, в результате которой я решил написать эту статью, чтобы раскрыть основные тезисы с доклада и рассказать о том, что тогда не успел.
                      Статья ориентирована, как на профессионалов, так и на тех, кто с похожими технологиями ещё не сталкивался.
                      Итак, начнём.
                      Читать дальше →
                    • Способы организации CSS-кода

                        Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».

                        К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.

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

                        Итак, начнем.
                        Читать дальше →
                      • Верстка для самых маленьких. Верстаем страницу по БЭМу

                        • Tutorial
                        Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

                        В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

                        • BEM
                        • Собственно пример — как сверстать страницу

                        Читать дальше →
                      • Руководство для дизайнера по DPI



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

                        Автор — Sebastien Gabriel.

                        Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
                        Читать дальше →
                      • Опыт разработки и проектирования на AngularJS

                          Всем привет!

                          В нашей компании, помимо разработки собственной СУБД, также занимаются заказными разработками по самым разным направлениям, от суровых java-энтерпрайз приложений до небольших мобильных приложений. Наши команды стараются использовать передовые технологии и фреймворки. И как раз я являюсь представителем одной из таких команд. Сегодня хочу поделится опытом разработки на AngularJS и парой мыслей о проектировании веб приложения с использованием этого фреймворка.


                          Читать дальше →
                        • Улучшаем форму оплаты с помощью дизайна и анимации

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

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

                            Анимация на форме оплаты не должна носить исключительно развлекательный характер, напротив, ее главная цель — помочь пользователю разобраться с тем, что от него требуется и подтолкнуть к наиболее эффективному использованию вашего продукта. Здесь важно не переусердствовать. Существует простое, но эффективное правило, помогающее понять, так ли нужна выбранная вами анимация на форме оплаты: отключите ее и посмотрите, что будет. Если после отключения анимационных эффектов ваша форма значительно потеряла в информативности и функциональности, интерфейс стал менее удобным и выглядит неполным, значит анимация действительно полезна и нужна, в противном случае, если после отключения анимации восприятие формы не изменилось, вероятнее всего, она будет лишней.
                            Читать дальше →
                            • +18
                            • 15.6k
                            • 6