• Критический путь рендеринга веб-страниц

    В среде веб-разработчиков все больше распространяется знание о том, что скорость важна. Многие стараются ускориться: используют сжатие gzip, минификацию, кеширующие заголовки, сокращение запросов, оптимизацию картинок и другие.

    После выполнения этих рекомендаций возникает вопрос: а что именно мы оптимизируем? Оказывается, что в большинстве случаев это время полной загрузки страницы со всеми элементами. Однако, это не совсем то, что нужно. На самом деле важно время, за которое пользователь получает «первый экран» страницы с важными функциональными элементами (заголовок, текст, описание товара и т.д.) Другими словами, важен момент начала рендеринга страницы. Здесь и возникает критический путь рендеринга, который определяет все действия, которые должен выполнить браузер для начала отрисовки страницы. С этой штукой мы и будем разбираться в статье.
    Читать дальше →
  • Функциональное программирование на Javascript

    • Translation
    • Tutorial


    Краткое содержание:

    Возьмем немного функций высшего порядка, добавим частичное применение функций, приправим fold с map-ом и получим Javascript DSL для работы с DOM.

    Человеческим языком:
    Простое и понятное введение в функциональное программирование на чистом и понятном Javascript.

    В отличие от «Через тернии к Haskell» все разжевано (возможно даже слишком) и разложено по полочкам.

    Прочтение статьи развоплотит миф о неприменимости ФП в реальной жизни. Вы сможете смотреть на решение одной и той же задачи с разных точек зрения. Прямо как на картинке.

    Читать дальше →
  • Шпаргалка по mongodb: e-commerce, миграция, часто применяемые операции и немного о транзакциях

    • Tutorial

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


    Не хотелось бы, чтобы пост воспринимался в ключе холиваров на тему SQL vs. NOSQL И так понятно что везде есть свои плюсы и минусы, в данном случае это просто где-то немного справки, где-то немного примеров из того, с чем приходилось сталкиваться. Примеры на mongo shell и на python.


    1. Миграция в на новые версии в mongodb
    2. Запросы сравнения и логические
    3. Полнотекстовый поиск в Mongodb, regexp, индексы и пр.
    4. Атомарные операторы (модифицирующие данные )
    5. Немного о транзакциях в Mongodb
    6. Агрегационный фреймворк и JOIN-ы в Mongodb
    7. Примеры
    8. Небольшая песочница на Python

    Читать дальше
  • Яндекс.Директ. Общие рекомендации по стратегиям в зависимости от рекламных бюджетов

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

      Для многих затраты на рекламу – это расходы, не укладывающиеся в логику высокого начальства (читай – вторичны), соответственно – не то, что приносит прибыль и обеспечивает работой сотрудников и уж точно не то, что дает компании надежду на стабильное будущее. Такое начальство витает в облаках и не хочет или не может видеть очевидных, на первый взгляд, вещей.

      Реклама в эпоху жесточайшей конкуренции – это то, без чего развитие любой коммерческой организации попросту невозможно.
      Читать дальше →
    • Яндекс. Директ. Анализируем конкурентное окружение


        Представьте ситуацию. Вы разрабатываете сайты. Хорошие сайты для хороших людей. Ваши рекламные кампании работают давно, вы вышли на хороший уровень ROI, заказы идут с завидной периодичностью. Все казалось бы хорошо, пока в один прекрасный день мы не получаем кучу писем от Директа, о том что мы кем-то вытеснены с насиженных позиций. Мы идем в выдачу и видим на своей любимой позиции незнакомый сайт конкурента. Естественным нашим желанием будет узнать что это за фрукт и на основании этой информации принять стратегическое решение – ввязываться ли в войну бюджетов (если это серьезный и жирный конкурент) или подпереть снизу и помочь слить бюджет (если это мелочевка).

        «Но это же невозможно!» – Скажете вы. – «Любая система контекстной рекламы руководствуется принципами закрытого аукциона и не предоставляет своим рекламодателям информацию о конкурентах. Мы ведь не знаем ни ключевых запросов конкурента, ни настроек его РК. Не знаем использует он минус-слова или кавычки. Самое главное – мы не знаем его ставок и CTR»

        Спокойствие, только спокойствие! (с)

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

        Читать дальше →
      • 50 потрясающих плагинов jQuery


          Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
          http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
          Настоятельно рекомендуется к обозрению.
          PS Куда-то пропал тип топика «Ссылка» :(
        • Хороших иконок много не бывает



            Не так давно в поисках пиктограмм для интерфейса нашел любопытный ресурс WebHostingHub Glyphs.

            У ребят уже нарисовано более 1000 пиктограмм, которые доступны как PNG так и как шрифты.
            А что самое приятное, и не маловажное тем кто работает на «заграницу» использование бесплатно даже для коммерческого использования!

            Заявлена поддержка Bootstrap, CSS, Phototshop и Word. И судя по твиттеру проекта, ребята обещают постепенно увеличивать количество пиктограмм.

            Посмотреть и пощупать можно тут :) http://www.webhostinghub.com/glyphs/.

            Update: Мир, как оказалось, очень тесен!
            Читать дальше →
            • +138
            • 60.9k
            • 49
          • Плагин для извлечения данных с сайтов

              Коллеги-разработчики выпустили плагин, который умеет извлекать и анализировать плохо структурированную информацию. Проект ориентирован на самый широкий круг пользователей, в частности будет полезен владельцам интернет-магазинов и их клиентам. Что это и как работает — на видео:


              Читать дальше →
            • Подборка PSD: дизайн устройств Apple

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

                iMac


                PSD документ iMac + PSD Mac OS X внутри.
                Netcribe: Apple iMac PSD
                Ссылка для скачивания

                Читать дальше →
              • Корректный переход со старого домена на новый

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

                  Задача

                  Есть домен site.com с определенными показателями ТИЦ и PR, но мы хотим перенести проект (сайт) на новый адрес не теряя уже полученные кровью и потом результаты в поисковиках.

                  Решение

                  Сделать на старом домене site.com файл .htaccess, с содержанием:

                  Options +FollowSymLinks
                  RewriteEngine on
                  RewriteCond %{REQUEST_FILENAME} robots.txt$ [NC]
                  RewriteRule ^([^/]+) $1 [L]
                  
                  RewriteCond %{HTTP_HOST} ^site\.com
                  RewriteRule ^(.*)$ http://site.org/$1 [R=301,L]
                  RewriteCond %{HTTP_HOST} ^www.site\.com
                  RewriteRule ^(.*)$ http://site.org/$1 [R=301,L]
                  

                  Читать дальше →
                • CSS3-генераторы. Лучшее









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

                    Когда занимаешься творчеством, хочется иметь подручные средства и инструменты на освоение и работу с которыми тратишь минимум усилий и времени. В результате всего этого, пришла мысль: отобрать лучшие инструменты и организовать их для частого использования (а-ля навигационное меню, такой себе: Quick Launch).

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

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



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

                    Посмотрим как они выкрутятся?
                    Читать дальше →
                  • Оптимизация работы веб-студии. Применение теории ограничений в производстве сайтов



                      В статье «12 тыс рублей за сайт. Есть ли бизнес за МКАДом?» я писал про наш подход к разработке сайтов на базе разработанной внутри компании технологии. На момент написания той статьи, мы выпускали «под ключ» 24 сайта в месяц. Это больше чем один сайт в день силами команды из 8 человек.

                      После рассказа на хабре о нашей технологии количество заявок на разработку сайтов выросло в несколько раз. Только за март 2012 было выставлено около 60-ти коммерческих предложений и, большая часть из них превращалась в договора.

                      И тут наше производство затрещало по швам. Практически сразу заявки стали становиться в очередь, менеджеры начали путаться в проектах, дизайнеры стали проситься в отпуск. Ситуация становилась поистине напряженной…
                      Читать дальше →
                    • Как снизить риски взаимодействия с клиентами в три этапа

                        Совсем недавно проект «Рейтинг Рунета» опубликовал неудивительную и оттого ещё более печальную статистику об оформлении отношений между заказчиком и веб-студией.

                        Шокирующие факты:
                        • 17,5% процентов всех сайтов (и более 30% сайтов дешевле 100 000 рублей) делается вообще без всяких договоров.
                        • Более 26% сайтов дешевле 300 000 рублей делается с формальным договором, служащим лишь основанием для перечисления денег.
                        • Более 60% сайтов дешевле 100 000 рублей делается без техзадания или по техзаданию клиента.

                        Это говорит о том, что рынок крайне медленно учится на ошибках тех, кто уже добрался до «высшей ценовой категории», а также не понимает, что не умеет работать с рисками взаимодействия с клиентом. Поэтому мы решили поделиться уроками из истории нашей компании, чтобы помочь коллегам на рынке (и, возможно, заказчикам их услуг) сохранить некоторое количество денег, времени и нервов.
                        Договор, отдельное проектирование, предпроектная презентация
                      • Тонкие моменты в договоре на разработку сайта

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

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

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

                          Итак, я подготовил некий список неочевидных моментов, с которыми мне неоднократно приходилось сталкиваться на практике. Начнем:

                          Установка копирайта и публикация в портфолио


                          Очень часто при общении с заказчиком при запуске нового проекта конфликтным моментом становится размещение «марки» студии на сайте («Сделано в XXX » и пр.). Если данный момент никак не обозначен в договоре, то убедить заказчика прислушаться к вашим доводам бывает сложно. Часто проблемы возникают в самый последний момент, даже если изначально лейбл присутствовал и на макетах, и на тестовой зоне: «Ой, а мы не думали, что так и пойдет на основную версию сайта». Итак, что рекомендуется сделать:
                          Читать дальше →
                        • CSS печатной версии страницы



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

                            Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
                            Читать дальше →
                          • Полезные штуки для дизайнера интерфейсов iOS приложений



                              Прочитав посты Полезные штуки для iOS разработчиков #1 от Coder89 и Полезные штуки для iOS разработчика #2 от SeriiZ, решил собрать «полезные штуки» для дизайнеров пользовательского интерфейса iOS приложений.
                              Читать дальше →
                            • Готовим Sublime Text 2 для front-end

                                Ни для одного опытного программиста или верстальщика не секрет, что настроенная под себя среда разработки (не в смысле IDE, а в более общем) — жизненная необходимость. Было время, когда я делал очередную верстку в практически голом Notepad++ на единственном мониторе, поочередно открывая Photoshop, браузер и редактор. Сегодня, в эпоху «автоматизации всего», мне сложно представить, как вообще можно было так работать.

                                Sublime Text 2 — популярный расширяемый кроссплатформенный текстовый редактор, для которого написано множество плагинов если и не на все случаи жизни, то на многие. В этом посте я попытаюсь рассказать как из этого конструктора сложить удобный инструмент front-end разработчика для работы с HTML, CSS и JavaScript.
                                Читать дальше →