• Букмарклеты в Internet Explorer 11: формат хранения, лимиты и негласные правила, коварный баг

      После того, как сразу два букмарклета, работавшие в Google Chrome и Firefox, отказались работать в Internet Explorer 11, причём не выдавали в консоль никаких сообщений об ошибках и вообще не подавали признаков жизни, я стал разбираться, в чём же дело.

      Сначала я решил, что дело в лимите на длину URL и тем самым на длину букмарклета. В IE 7 ограничение было в 2083 символа, в IE 11, по уверениям экспериментировавших пользователей, лимит увеличили. Нужно было выяснить опытным путём, какова теперь эта граница.

      Но сперва небольшое предисловие.

      Google Chrome хранит закладки в JSON, Firefox — в базе данных sqlite. Поэтому названия у закладок могут быть произвольные. IE хранит каждую закладку как отдельный файл, например, в папке %userprofile%\Favorites\Links. Поэтому браузер будет корректировать названия закладок, чтобы они подходили под нормы файловой системы (заменять знаки вопроса, например). Поэтому же в IE не могут быть в одной папке две закладки с одинаковым именем, а в Google Chrome и Firefox — могут (закладки в них могут быть даже вообще без имени, только со значком сайта или стандартным заменителем).
      Читать дальше →
    • Перестаньте делать обычные сайты. Адаптив — это не страшно



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

        Сегодня я хочу рассказать, как посчитать адаптивный сайт, о чем важно не забыть, чтобы потом не было мучительно больно. Информация в основном для менеджеров и им сочувствующим.
        Читать дальше →
      • Букмарклеты: если XPath недоступен, а селекторов и методов навигации по DOM не хватает

          Недавно я пытался написать несколько условно кроссбраузерных букмарклетов с выборками и навигацией средней сложности. Решил ограничиться последними версиями Google Chrome, Firefox и Internet Explorer. Приступив к проверке в последнем браузере, с грустью обнаружил, что даже в IE 11 всё ещё нет поддержки XPath.

          Вроде бы полная поддержка обещана в Edge: «Microsoft Edge supports the XML Path Language Version 1.0 with no variations or extensions». И уже даже, кажется, реализация добавлена в Internet Explorer Developer Channel (никто не проверял?). Но это пока недостаточное утешение.

          (P.S. Проверка через виртуальную машину подтверждает реализацию XPath в MS Edge версии 11.00.10240.16397 от 7.22.2015 (по версии файла), она же 20.10240.16384.0 (по информации в настройках)).

          Следующим шагом стало обнаружение библиотеки от Google. Я даже для очистки совести проверил способ с вживлением библиотеки на странички в IE 11 (по описанному здесь методу) — всё замечательно работает даже на параноидальных сайтах вроде Твиттера (к слову, если вы вдруг не знали, в Firefox всё ещё нельзя запустить букмарклет в Твиттере или, например, в Гитхабе, из-за до сих пор не исправленного бага). Но метод этот очень громоздкий. Он хорошо подходит для разработки сайтов, но маленькие пользовательские букмарклеты он отягощает лишней асинхронностью, усложнением логики и дополнительным временем на загрузку файла.

          Пришлось искать более простые замены для некоторых не хватавших мне инструментов XPath.
          Читать дальше →
        • 36 млн запросов в час, 10000+ постоянно работающих клиентов, на одном сервере, nginx+mysql

          Сложилась ситуация, что участвую в проекте, который работает с достаточно большой нагрузкой. Как уже написал — 36 млн запросов в час. Я много чего прочитал и перепробовал за последний месяц, настраивая сервер; хотелось бы просто сжато и компактно выдать тезисно то, что работает хорошо в такой конфигурации.

          Первое, что я заметил — множество советов как все настроить под большую нагрузку. Читайте их внимательно, обычно в тексте найдете, что речь про «высокую нагрузку» в 15-20 тысяч клиентов в сутки. У нас клиентов примерно миллион, активных, ежедневных.

          У нас нет денег и мы все делаем за свой счет, поэтому экономим. Итог — весь миллион клиентов обслуживается на одном сервере, вот на таком — EX-60 на hetzner.
          Читать дальше →
        • DDoS атака в обход Qrator. Как защититься?

            Есть сервисы, защищающие нас от DDoS атак. Они работают по принципу прокси: в DNS прописывается их IP, они фильтруют трафик и проксируют на ваш сервер. Все они настоятельно рекомендуют прятать свой IP и в публичном доступе давать только IP прокси-защитника. Вполне здравый подход, достаточный для успешной защиты. А я расскажу на чем можно проколоться и как от этого защитится.
            Читать дальше →
          • Быстрое кроссплатформенное HTML5 приложение на Framework7

              Задумываясь о разработке html5 приложения, многим сразу на ум приходит jQuery, или точнее jQueryMobile. И попробовав написать даже самое простенькое приложение используя jQueryMobile, очень легко разочароваться, так как производительность и отзывчивость получившегося html5 приложения куда ниже ожидаемого, и уж совсем его не сравнить с нативными приложениями.


              Читать дальше →
            • BIDI (unicode bidirectional algorithm)

                imageМультиязычные сайты — это хорошо, но довольно муторно. И если для самых популярных языков достаточно иметь несколько вариантов текста, то с добавлением RTL (right-to-left) всё становится гораздо хуже. Приходится заводить новый набор стилей с заменой всего правого на левое и наоборот (касается свойств типа float, padding, margin etc), но и это ещё не все. Могут возникнуть ситуации, когда в одном документе соседствуют фразы на языках с разным направлением, здесь и начинает работать bidi. Если это кому-нибудь интересно....
                Подробности
                • +75
                • 12,4k
                • 2
              • Несколько интересностей и полезностей для веб-разработчика #42

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

                  Webtorrent




                  Полноценный торрент клиент для NodeJS и браузеров. Стримминг будет работать прямо в браузере благодаря WebRTC (data chanels) для P2P транспортировки. А самое главное «It's Just JavaScript™», то есть не нужны никакие дополнительные плагины или расширения. Проект собрал более 3000 звезд на GitHub и на данный момент предоставляет следующие возможности: непосредственно саму потоковую передача данных, загрузка нескольких торрентов одновременно, поддержку magnet uri, peer discovery и protocol extension api, возможность подключения WebTorrent клиентов на разных доменах, стримминг видео в <video> тег в формате (webm (vp8, vp9) или mp4 (h.264)), а также в AirPlay, Chromecast, VLC player и прочие устройства.

                  var WebTorrent = require('webtorrent')
                  
                  var client = new WebTorrent()
                  var magnetUri = '...'
                  
                  client.add(magnetUri, function (torrent) {
                    // Got torrent metadata!
                    console.log('Torrent info hash:', torrent.infoHash)
                  
                    torrent.files.forEach(function (file) {
                      // Get a url for each file
                      file.getBlobURL(function (err, url) {
                        if (err) throw err
                  
                        // Add a link to the page
                        var a = document.createElement('a')
                        a.download = file.name
                        a.href = url
                        a.textContent = 'Download ' + file.name
                        document.body.appendChild(a)
                      })
                    })
                  })
                  

                  Читать дальше →
                • Продвижение инди-игры на Steam Greenlight

                    Всем, привет! Наша команда сейчас проходит важный этап становления любого разработчика игр — первый запуск игры на Steam Greenlight. Пока я готовил материал для этой статьи, наша игра вошла в ТОП-100 проектов на Greenlight, набрала почти 2000 голосов «ЗА» и через 12 дней получила зелёный свет.

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

                    image
                    Читать дальше →
                  • Я тебя по сетям вычислю: используем API крупнейших соцсетей в своих корыстных целях



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

                      Есть в американской разведке такая дисциплина, как OSINT (Open source intelligence), которая отвечает за поиск, сбор и выбор информации из общедоступных источников. К одному из крупнейших поставщиков общедоступной информации можно отнести социальные сети. Ведь практически у каждого из нас есть учетка (а у кого-то и не одна) в одной или нескольких соцсетях. Тут мы делимся своими новостями, личными фотографиями, вкусами (например, лайкая что-то или вступая в какую-либо группу), кругом своих знакомств. Причем делаем это по своей доброй воле и практически совершенно не задумываемся о возможных последствиях. На страницах журнала уже не раз рассматривали, как можно с помощью различных уловок вытаскивать из соцсетей интересные данные. Обычно для этого нужно было вручную совершить какие-то манипуляции. Но для успешной разведки логичнее воспользоваться специальными утилитами. Существует несколько open source утилит, позволяющих вытаскивать информацию о пользователях из соцсетей.
                      Читать дальше →
                    • Несколько интересностей и полезностей для веб-разработчика #41

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

                        Learn X in Y minutes




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

                        Кстати, еще есть Hyperpolyglot, где наглядно показаны различия между инструментами и языками программирования в таблицах.
                        Читать дальше →
                        • +31
                        • 38,1k
                        • 8
                      • Разработка «браузерки» — год жизни и три года мучений

                          Фактически прошел год с момента последней статьи — весь год молчание было связано больше с отсутствием масштабных интересных моментов, кои, по большей части, были освещены в первых статьях [1, 2, 3, 4]. Однако новый рассказ как минимум может осветить итоги годовой работы проекта с момента старта в публичный доступ.

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

                          Пернатск :: Лабиринт мрачного леса
                          Читать дальше →
                        • Разработка javascript приложений на базе Rx.js и React.js (RxReact)

                          • Tutorial
                          rxreactlogo

                          React.js позволяет очень эффективно и быстро работать с DOM-ом, активно развивается и с каждым днем набирает все больше популярности. Недавно открыл для себя концепцию реактивного программирования, в частности, не менее популярную библиотеку Rx.js. Данная библиотека выводит на новый уровень работу с событиями и асинхронным кодом, которого в UI логике javascript приложений предостаточно. Пришла идея объединить мощь данных библиотек в одно целое и посмотреть что из этого выйдет. В этой статье вы узнаете о том как удалось подружить Rx.js и React.js.
                          Читать дальше →
                          • +21
                          • 38,4k
                          • 9
                        • 7 советов по созданию GIF анимаций

                          • Перевод
                          • Tutorial
                          61563fa3ab3147239dc7777662290fbe

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

                          В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.
                          Читать дальше →
                        • 86 бесплатных площадок для продвижения стартапов на международном рынке

                          • Перевод


                          Мы дополнили и адаптировали оригинальную подборку, выбрав исключительно бесплатные ресурсы для продвижения стартапов на международном рынке. Помимо этого мы переработали первоначальную классификацию, ввели ранжирование по потенциальному охвату аудитории (для площадок с обозначенным охватом) и распределили соответствующие ресурсы в тематические категории.
                          Читать дальше →
                          • +31
                          • 83,7k
                          • 9
                        • Самые нужные плагины для Grunt



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

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

                            А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.

                            Читать дальше →
                          • Приятная сборка frontend проекта

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

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

                            UPD (13 марта 2015): Заменил несколько плагинов на более актуальные + решил проблему с импортом CSS файлов внутрь SCSS

                            Читать дальше →
                          • 300 потрясающих бесплатных сервисов

                            • Перевод


                            Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



                            A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

                            • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
                            • Bootswatch: Бесплатные темы для Bootstrap.
                            • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
                            • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
                            • Strikingly.com Domain: Конструктор веб-сайтов.
                            • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
                            • Withoomph: Мгновенное создание логотипов (англ.).
                            • Hipster Logo Generator: Генератор хипстерских логотипов.
                            • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
                            • Invoice to me: Бесплатный генератор счета.
                            • Free Invoice Generator: Альтернативный бесплатный генератор счета.
                            • Slimvoice: Невероятно простой счет.

                            Читать дальше →
                          • Делаем онлайн-кинотеатр для слепых (WCAG 2.0 AAA)

                              В РФ живет около 275 тысяч слепых и слабовидящих людей, 22% молодежь, некоторые из них также являются пользователями интернета, как и мы.

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

                              image
                              (пример адаптированной темы на GitHub по ссылке с картинки )
                              про WCAG 2.0 и как ему соответствовать читайте внутри
                            • Flux для глупых людей

                              • Перевод
                              • Tutorial
                              Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Чуть раньше я поделился с хабравчанами переводом первой статьи, настала очередь второй. Итак, поехали.

                              Flux для глупых людей


                              TL;DR Мне, как глупому человеку, как раз не хватало этой статьи, когда я пытался разобраться с Flux. Это было не просто: хорошей документации нет и многие ее части перемещаются.

                              Это продолжение статьи «ReactJS For Stupid People».
                              Читать дальше →