Pull to refresh
71
Karma
0
Rating
Алексей @HeadWithoutBrains

User

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

JavaScript *Internet Explorer Debugging *Browsers
После того, как сразу два букмарклета, работавшие в 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 — могут (закладки в них могут быть даже вообще без имени, только со значком сайта или стандартным заменителем).
Читать дальше →
Total votes 9: ↑7 and ↓2 +5
Views 5.4K
Comments 6

Перестаньте делать обычные сайты. Адаптив — это не страшно

Project management *Sales management *


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

Сегодня я хочу рассказать, как посчитать адаптивный сайт, о чем важно не забыть, чтобы потом не было мучительно больно. Информация в основном для менеджеров и им сочувствующим.
Читать дальше →
Total votes 12: ↑12 and ↓0 +12
Views 14K
Comments 13

Букмарклеты: если XPath недоступен, а селекторов и методов навигации по DOM не хватает

Firefox JavaScript *Internet Explorer Google Chrome Browsers
Недавно я пытался написать несколько условно кроссбраузерных букмарклетов с выборками и навигацией средней сложности. Решил ограничиться последними версиями 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.
Читать дальше →
Total votes 7: ↑7 and ↓0 +7
Views 6.1K
Comments 6

36 млн запросов в час, 10000+ постоянно работающих клиентов, на одном сервере, nginx+mysql

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

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

У нас нет денег и мы все делаем за свой счет, поэтому экономим. Итог — весь миллион клиентов обслуживается на одном сервере, вот на таком — EX-60 на hetzner.
Читать дальше →
Total votes 111: ↑96 and ↓15 +81
Views 112K
Comments 102

DDoS атака в обход Qrator. Как защититься?

Information Security *
Есть сервисы, защищающие нас от DDoS атак. Они работают по принципу прокси: в DNS прописывается их IP, они фильтруют трафик и проксируют на ваш сервер. Все они настоятельно рекомендуют прятать свой IP и в публичном доступе давать только IP прокси-защитника. Вполне здравый подход, достаточный для успешной защиты. А я расскажу на чем можно проколоться и как от этого защитится.
Читать дальше →
Total votes 43: ↑38 and ↓5 +33
Views 24K
Comments 10

Быстрое кроссплатформенное HTML5 приложение на Framework7

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


Читать дальше →
Total votes 44: ↑43 and ↓1 +42
Views 78K
Comments 20

BIDI (unicode bidirectional algorithm)

Website development *Algorithms *HTML *
imageМультиязычные сайты — это хорошо, но довольно муторно. И если для самых популярных языков достаточно иметь несколько вариантов текста, то с добавлением RTL (right-to-left) всё становится гораздо хуже. Приходится заводить новый набор стилей с заменой всего правого на левое и наоборот (касается свойств типа float, padding, margin etc), но и это ещё не все. Могут возникнуть ситуации, когда в одном документе соседствуют фразы на языках с разным направлением, здесь и начинает работать bidi. Если это кому-нибудь интересно....
Подробности
Total votes 79: ↑77 and ↓2 +75
Views 15K
Comments 2

Несколько интересностей и полезностей для веб-разработчика #42

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

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)
    })
  })
})

Читать дальше →
Total votes 49: ↑44 and ↓5 +39
Views 37K
Comments 17

Продвижение инди-игры на Steam Greenlight

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

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

image
Читать дальше →
Total votes 33: ↑31 and ↓2 +29
Views 96K
Comments 14

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

Журнал Хакер corporate blog Information Security *Python *API *Geoinformation services *


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

Есть в американской разведке такая дисциплина, как OSINT (Open source intelligence), которая отвечает за поиск, сбор и выбор информации из общедоступных источников. К одному из крупнейших поставщиков общедоступной информации можно отнести социальные сети. Ведь практически у каждого из нас есть учетка (а у кого-то и не одна) в одной или нескольких соцсетях. Тут мы делимся своими новостями, личными фотографиями, вкусами (например, лайкая что-то или вступая в какую-либо группу), кругом своих знакомств. Причем делаем это по своей доброй воле и практически совершенно не задумываемся о возможных последствиях. На страницах журнала уже не раз рассматривали, как можно с помощью различных уловок вытаскивать из соцсетей интересные данные. Обычно для этого нужно было вручную совершить какие-то манипуляции. Но для успешной разведки логичнее воспользоваться специальными утилитами. Существует несколько open source утилит, позволяющих вытаскивать информацию о пользователях из соцсетей.
Читать дальше →
Total votes 89: ↑83 and ↓6 +77
Views 174K
Comments 22

Несколько интересностей и полезностей для веб-разработчика #41

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

Learn X in Y minutes




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

Кстати, еще есть Hyperpolyglot, где наглядно показаны различия между инструментами и языками программирования в таблицах.
Читать дальше →
Total votes 37: ↑34 and ↓3 +31
Views 39K
Comments 8

Разработка «браузерки» — год жизни и три года мучений

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

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

Пернатск :: Лабиринт мрачного леса
Читать дальше →
Total votes 47: ↑42 and ↓5 +37
Views 40K
Comments 30

Разработка javascript приложений на базе Rx.js и React.js (RxReact)

Website development *JavaScript *ReactJS *
Tutorial
rxreactlogo

React.js позволяет очень эффективно и быстро работать с DOM-ом, активно развивается и с каждым днем набирает все больше популярности. Недавно открыл для себя концепцию реактивного программирования, в частности, не менее популярную библиотеку Rx.js. Данная библиотека выводит на новый уровень работу с событиями и асинхронным кодом, которого в UI логике javascript приложений предостаточно. Пришла идея объединить мощь данных библиотек в одно целое и посмотреть что из этого выйдет. В этой статье вы узнаете о том как удалось подружить Rx.js и React.js.
Читать дальше →
Total votes 27: ↑24 and ↓3 +21
Views 39K
Comments 9

7 советов по созданию GIF анимаций

Image processing *
Tutorial
Translation
61563fa3ab3147239dc7777662290fbe

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.
Читать дальше →
Total votes 51: ↑44 and ↓7 +37
Views 212K
Comments 23

86 бесплатных площадок для продвижения стартапов на международном рынке

Фонд развития интернет-инициатив corporate blog Growth Hacking *Content-marketing *
Translation


Мы дополнили и адаптировали оригинальную подборку, выбрав исключительно бесплатные ресурсы для продвижения стартапов на международном рынке. Помимо этого мы переработали первоначальную классификацию, ввели ранжирование по потенциальному охвату аудитории (для площадок с обозначенным охватом) и распределили соответствующие ресурсы в тематические категории.
Читать дальше →
Total votes 33: ↑32 and ↓1 +31
Views 98K
Comments 9

Самые нужные плагины для Grunt

Website development *CSS *JavaScript *HTML *Node.JS *


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

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

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

Читать дальше →
Total votes 53: ↑48 and ↓5 +43
Views 49K
Comments 43

Приятная сборка frontend проекта

Website development *CSS *JavaScript *HTML *Node.JS *
Tutorial
В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.

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

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

Читать дальше →
Total votes 61: ↑53 and ↓8 +45
Views 435K
Comments 119

300 потрясающих бесплатных сервисов

Web design *Typography *Interfaces *
Translation


Автор оригинальной статьи 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: Невероятно простой счет.

Читать дальше →
Total votes 341: ↑325 and ↓16 +309
Views 1.6M
Comments 107

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

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

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

image
(пример адаптированной темы на GitHub по ссылке с картинки )
про WCAG 2.0 и как ему соответствовать читайте внутри
Total votes 46: ↑43 and ↓3 +40
Views 23K
Comments 21

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

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

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


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

Это продолжение статьи «ReactJS For Stupid People».
Читать дальше →
Total votes 38: ↑35 and ↓3 +32
Views 244K
Comments 35

Information

Rating
Does not participate
Location
Киев, Киевская обл., Украина
Date of birth
Registered
Activity