• Как забраться в голову к посетителю, или о Wi-Fi-аналитике

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



      Один из крупнейших разработчиков системы Wi-Fi аналитики в России, применяющейся в ритейле, торговых центрах и на объектах HoReCa, делится своими секретами.
      Читать дальше →
    • Понимание критического пути рендеринга

      • Перевод

      Браузеру предстоит пройти много шагов, прежде чем HTML-ответ от сервера будет преобразован в пиксели на экране. Последовательность этих шагов, необходимая для первого отображения страницы, называется «Критический путь рендеринга» (ориг. Critical Rendering Path).


      Читать дальше →
    • 7 советов начинающему ИП, чтобы избежать проблем (что-то вы точно из этого не знаете)



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


        А для тех, кто открыл ООО, мы подготовили: 10 вещей, которые обязательно нужно сделать после регистрации ООО
        Читать дальше →
      • Как я создавал бесшовный Wi-Fi



          У нас в конторе не так давно назрела задача сделать бесшовное Wi-Fi-покрытие, долго терпели и перетаптывались, но в итоге его сделали. Поделюсь опытом, как это было. Началось с того, что два года назад мы полностью перешли на IP-АТС и почти извели аналоговые телефоны включая, в итоге и DECT. Однако, переносные трубки нужны и помимо настольных SIP-телефонов купили несколько Wi-Fi телефонов Tecom. Я и сам, как ответственный за техническую часть в компании постоянно хожу по офису с различными Wi-Fi-ными девайсами, ну и манагеры тоже. У многих на руках упомянутые Wi-Fi SIP-телефоны, + у складских пару Wi-Fi терминалов, есть просто Андроиды и Яблоки с установленными SIP-клиентами от АТС. Раньше все решалось несколькими Wi-Fi роутерами, в принципе, тоже было приемлемо (офис небольшой), но ровно пока ты сидишь на месте – пошел, все, кончился разговор, а Skype-соединение еще быстрее слетает. Это стало изрядно раздражать руководство и менеджеров и пошли наезды что вай-фай не вай-фай. Попытки просто увеличить количество роутеров ясное дело задачу не решило.

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

          В общем, по мере изучения задачи проснулся уже спортивный интерес – можно ли сделать гладкое WiFi-покрытие (прям как на форумах) в нормальные деньги и так чтобы без этих контроллеров? Оказалось, можно.
          Читать дальше →
        • 4 вида утечек памяти в JavaScript и как с ними бороться

          • Перевод

          В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


          timeline в Chrome Dev Tools

          Читать дальше →
        • jQuery UI Datepicker — добавление возможности выбора нескольких дат на одном календаре

            image Всем привет, дорогие читатели Хабра!

            Статья посвящена jQuery UI и его виджету выбора дат.

            Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.

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

            Итак, наша цель — решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker.

            Для решения этой задачи существует небольшое расширение для jQuery UI Datepicker, которое увеличивает его стандартные возможности без подключения сторонних виджетов, плагинов и стилей.
            Читать дальше →
          • Что делать если Instagram не дал доступ к API?

            1 июня 2016 года Instagram отключит от своего API все приложения, которые не прошли модерацию. Что делать если вы в их числе?

            Предыстория


            Мы делаем сервис для постинга в Instagram по расписанию и используем API для получения информации об аккаунтах. Самим постингом занимаются телефоны в автоматическом режиме. Нам отказали в доступе к API после 1 июня (пробовали пройти модерацию два раза) поэтому было решено найти замену.

            Сначала расскажу как мы использовали официальный API:
            1. При добавлении аккаунта забираем из Instagram информацию об аккаунте: имя, фото профайла, количество постов, подписчиков, подписок.
            2. Перед тем как опубликовать фото/видео мы запрашиваем количество постов, и тоже самое после публикации, если число постов увеличилось считаем публикацию успешной.
            3. Если публикация прошла успешно забираем ссылку на последнее фото в профайле.
            4. Если пользователь удаляет фото из нашего сервиса, то перед тем как выполнить задачу нужно проверить существует ли такой пост в Instagram (или его удалили).

            Реализация


            У Instagram есть веб-версия. С помощью нее в приватных аккаунтах можно получить информацию о количестве постов, подписок и подписчиков, а в публичных еще и сами посты, комментарии и лайки. Поэтому, в силу простоты получения, я подумал, что уже написаны подобные библиотеки. Пошел гуглить и нашел только для NodeJS. И для PHP нашелся какой-то код, но всем четырем пунктам не соответствовал. В итоге было решено писать свою библиотеку.
            Читать дальше →
          • Autofill: чего не знают веб-разработчики, хотя должны знать

            • Перевод


            Многим известно, что в мобильной версии Safari можно отсканировать свою банковскую карту. Но многие ли разработчики умеют создавать формы, поддерживающие эту возможность?

            Готов поспорить, что немногие.

            Дело осложняет полное отсутствие документации от Apple по работе этой функции. Но тут есть один момент. Функция сканирования банковских карт является подмножеством автозаполнения — браузерного функционала, давно игнорируемого веб-разработчиками. Понятно, почему они не уделяли ему должного внимания: когда регулярно заполняешь форму тестовыми данными, автозаполнение обычно мешает. Но для наших пользователей это важная функция. В Google выяснили, что при использовании автозаполнения пользователи на 30% быстрее заполняют формы. Так что давайте изучим работу автозаполнения, разберёмся, как создавать формы, поддерживающие кросс-браузерное автозаполнение, и воспользуемся преимуществами новых возможностей наподобие сканирования банковских карт.
            Читать дальше →
          • Давайте знакомиться: компания Align Technology

              Представьте себе компанию, будничный рабочий процесс которой включает лазерные резаки, трехмерные принтеры и трехмерные сканеры, рентгеновские томографы, CAD, композитные материалы, автоматические станки с ЧПУ, оптическую и биохимическую лабораторию и даже собственную сборку специализированных железячных девайсов. Здесь широко реализуется поточная обработка данных в реальном масштабе времени, используется 3D печать, занимаются биоинжинерией и программируют FPGA, есть сети хранящие терабайты данных, датамайнинг и даже немножко искусственного интеллекта. Представили? А теперь попробуйте угадать чем эта компания может заниматься. Сразу скажу, что это не космос, не авиация и даже не автомобилестроение.


              Заинтересовались?..
            • Web-приложения в режиме offline. ServiceWorker и CacheStorage

              О чём речь?


              Всё чаще возникает задача научить frontend-приложение работать в автономном режиме. Это значит придать web-приложению свойство mobile- или desktop-программы — функционировать в отсутствии связи с Интернет, а также в случае отказа сервера.

              Цель — оградить пользователя от проблем соединения на его устройстве. Как было бы обидно не сохранить созданные в google docs таблицы из-за потери wi-fi в ближайшем фастфуде!

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

              Решение задачи заключается в следующем:
              Читать дальше →
              • +24
              • 30,5k
              • 2
            • Я хочу, чтобы сайты открывались мгновенно

                Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик. Я расскажу, как сделать так, чтобы ваш сайт открывался быстро. Очень быстро.


                Я хочу, чтобы мой сайт открывался быстро
              • Вёрстка писем: 60 полезных ресурсов, руководств и исследований



                  В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию список из 60 полезных ресурсов, туториалов и исследований о работе с email.
                  Читать дальше →
                  • +14
                  • 81,6k
                  • 4
                • Шорткаты в JavaScript



                    Изучая любой язык программирования, полезно знать о его особенностях и уметь эффективно использовать языковые конструкции. Хочу поделиться с вами шорткатами для JS. Эти сокращения в некоторых случаях могут облегчить чтение кода, а также существенно уменьшить его количество. Однако следует помнить, что они могут сыграть с вами злую шутку и, если использовать их повсеместно, ваш код перестанет быть читаемым и поддерживаемым.
                    Читать дальше →
                  • CSRF-уязвимость VK Open Api, позволяющая получать Access Token’ы сторонних сайтов, использующих авторизацию через VK

                    Представляю вашему вниманию обзор уязвимости, связанной с неправильным применением JSONP в VK Open Api. На мой взгляд, уязвимость достаточно серьёзная, т.к. позволяла сайту злоумышленника получать Access Token другого сайта, если на нём используется авторизация через библиотеку VK Open API. На данный момент уязвимый код поправили, репорт на HackerOne закрыли, вознаграждение выплатили (1,500$).

                    Как это выглядело


                    В принципе, процесс получения пользовательского Access Token'а страницей злоумышленника происходил по стандартной схеме эксплуатации CSRF-уязвимости:

                    1. Пользователь заходит на сайт, использующий библиотеку VK Open API (например, www.another-test-domain.com).
                    2. Авторизуется там через VK.
                    3. Потом заходит на сайт злоумышленника (например, www.vk-test-auth.com), который, эксплуатируя уязвимость, получает Access Token, принадлежащий сайту www.another-test-domain.com.
                    4. Получив Access Token пользователя, злоумышленник может обращаться к VK API с теми правами, который пользователь дал сайту www.another-test-domain.com при авторизации на нем через VK.

                    Демонстрация


                    На видео показано, как страница «злоумышленника» на домене www.vk-test-auth.com получает Access Token пользователя VK, который авторизовался на сайте www.another-test-domain.com, несмотря на то, что в настройках приложения VK, доступ разрешён только для домена www.another-test-domain.com.


                    Читать дальше →
                  • Использование веб-шрифтов, самый лучший способ (на 2015 год)

                    • Перевод
                    Недавно я снова исследовал вопрос загрузки шрифтов, так как я хотел использовать локальную копию шрифта и сделать ее загрузку максимально быстрой и эффективной. Данный подход существенно отличается от того, когда вы используете TypeKit или шрифты Google и простые сниппеты «копировать/вставить».

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

                    1, 2, 3

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

                    Цели:

                    1. Асинхронно загружать веб-шрифты
                    2. Избежать сильного пересчета положения в макете
                    3. Как можно быстрее загружать веб-шрифты
                    4. Избежать загрузки шрифтов для возвращающихся посетителей


                    А теперь давайте попробуем добиться наших целей поэтапно:
                    Читать дальше →
                    • +9
                    • 28,5k
                    • 6
                  • How-to: адаптивные письма в Gmail



                      В нашем блоге мы часто пишем о создании адаптивных почтовых рассылок (раз, два, три) и вообще уделяем большое внимание email-верстке. Сегодня речь пойдет о способе создания адаптивных писем для почтового клиента Gmail, известного своей довольно скудной поддержкой различных возможностей для верстки. Данную технику в 2014 году описал Джастин Ку (Justin Khoo), позднее метод был дополнен статьей Марка Роббинса в блоге Email Code Geek. Мы представляем вашему вниманию адаптированный перевод основных моментов двух публикаций.
                      Читать дальше →
                      • +10
                      • 20,3k
                      • 3
                    • 12 малоизвестных фактов о CSS

                      Предлагаю читателям «Хабрахабра» перевод статьи «12 Little-Known CSS Facts (The Sequel)». Она совсем недавно была упомянута в дайджесте интересных материалов из мира веб-разработки и IT.

                      Update: немного «шлифанул» перевод напильником. Выражаю благодарность всем неравнодушным читателям.
                      Внимание! Под катом почти 1.5 Мб картинок и много интересных ссылок.

                      Итак, начнём-с…

                      1. В свойстве border-radius можно использовать slash-синтаксис.


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

                      Верите или нет, но следующий код валиден:

                      .box {
                        border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
                      }
                      

                      Читать дальше →
                    • По-настоящему адаптивные письма. Часть… снова первая



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

                        К чему мы приходим:
                        — Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
                        — Улучшение семантики через именование классов и сокращение участков кода
                        — Частичная поддержка the Bat! Хотя Николь на него забила.
                        — Полная поддержка всех мобильных почтовых клиентов
                        — Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
                        Читать дальше →
                      • Как сверстать фоновое HTML5-видео в email-сообщении

                        • Перевод


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

                        Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.
                        Читать дальше →
                      • Создаём отзывчивые письма для будущего без медиа-запросов

                        • Перевод
                        • Tutorial
                        Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю. Поддержка media query как и сам CSS разнятся среди приложений, в следствии этого, каждый раз когда вы слышите что появилось новое восхитительное почтовое приложение, для которого тоже нужно провести тесты, вас неизбежно одолевает страх.

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

                        Приведенный ниже метод, сторонником которого я являюсь, всецело ориентирован на создание положительного опыта взаимодействия при работе с email-клиентами, у которых вообще отсутствует поддержка media query.

                        Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
                        Читать дальше →
                        • +15
                        • 26,1k
                        • 7