Как стать автором
Обновить
71
0
Алексей @HeadWithoutBrains

Пользователь

Отправить сообщение

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

Время на прочтение9 мин
Количество просмотров6K
После того, как сразу два букмарклета, работавшие в 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 — могут (закладки в них могут быть даже вообще без имени, только со значком сайта или стандартным заменителем).
Читать дальше →
Всего голосов 9: ↑7 и ↓2+5
Комментарии6

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

Время на прочтение7 мин
Количество просмотров15K


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

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

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

Время на прочтение5 мин
Количество просмотров6.3K
Недавно я пытался написать несколько условно кроссбраузерных букмарклетов с выборками и навигацией средней сложности. Решил ограничиться последними версиями 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.
Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии6

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

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

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

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

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

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

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

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


Читать дальше →
Всего голосов 44: ↑43 и ↓1+42
Комментарии20

BIDI (unicode bidirectional algorithm)

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

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

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

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

Читать дальше →
Всего голосов 49: ↑44 и ↓5+39
Комментарии17

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

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

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

image
Читать дальше →
Всего голосов 33: ↑31 и ↓2+29
Комментарии14

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

Время на прочтение11 мин
Количество просмотров175K


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

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

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

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

Learn X in Y minutes




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

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

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

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

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

Пернатск :: Лабиринт мрачного леса
Читать дальше →
Всего голосов 47: ↑42 и ↓5+37
Комментарии30

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

Время на прочтение10 мин
Количество просмотров40K
rxreactlogo

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

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

Время на прочтение3 мин
Количество просмотров215K
61563fa3ab3147239dc7777662290fbe

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

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

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

Время на прочтение4 мин
Количество просмотров102K


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

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

Время на прочтение6 мин
Количество просмотров49K


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

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

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

Читать дальше →
Всего голосов 53: ↑48 и ↓5+43
Комментарии43

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

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

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

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

Читать дальше →
Всего голосов 61: ↑53 и ↓8+45
Комментарии119

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

Время на прочтение11 мин
Количество просмотров1.6M


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

Читать дальше →
Всего голосов 341: ↑325 и ↓16+309
Комментарии107

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

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

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

image
(пример адаптированной темы на GitHub по ссылке с картинки )
про WCAG 2.0 и как ему соответствовать читайте внутри
Всего голосов 46: ↑43 и ↓3+40
Комментарии21

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

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

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


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

Это продолжение статьи «ReactJS For Stupid People».
Читать дальше →
Всего голосов 38: ↑35 и ↓3+32
Комментарии35
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность