1. Интро. Личное

Я готовлюсь к языковому экзамену IELTS (International English Language Testing System) — пожалуй, самому популярному
тесту на знание английского. Если хочется эмигрировать, найти работу в международной компании — диплом IELTS очень пригодится. Шкала оценок — от 0 (от испытуемого не удалось получить даже внятного мычания) до 9 (экcперт — испытуемый чертовски хорош и может устроиться даже редактором лондонской газеты).

Для учебы, например, в США, нужно не менее 6.5 баллов (бывает и 6, но не часто), для работы — 7 и выше. А для эмиграции, допустим, в Канаду — чем выше оценка, тем лучше. Мой прогнозируемый балл перед сдачей теста — 5.5. Значит, что я могу читать газеты, смотреть кино, вести беседы в знакомых ситуациях, писать ответы на письма. Но для работы в центральном офисе Гугла явно недостаточно.

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

Вечерний багхантинг на Facebook привел к сервису Soundcloud. Исследовалась возможность XSS уязвимостей при шейринге треков в ленту Facebook. После нескольких неудачных попыток захотелось проверить и сам Soundcloud. В течение первых 5 минут был обнаружен бесполезный, так называемый self-xss — при добавлении нового тега можно передать скрипт. При наведении на этот тэг курсором исполнялся код. Чуть позже я нашел два видео в youtube.com, где горе багхантеры выкладывали это как нечто критичное (один даже назвал видео как «Soundcloud Xss epic fail»). Продолжив свои развлечения, подключил второго персонажа, ведь если есть атакующий, должна быть и жертва.

Если вы когда-нибудь сталкивались с задачей ресайза картинок в браузере, то вы наверное знаете, что это очень просто. В любом современном браузере есть такой элемент, как холст (<canvas>). На него можно нанести изображение нужных размеров. Пять строчек кода и картинка готова:

function resize(img, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  return canvas;
}

Из холста картинку можно сохранить в JPEG и, например, отправить на сервер. Можно было на этом закончить статью, но сперва давайте взглянем на результат. Если вы поставите рядом такой холст и обычный элемент <img>, в который загружена та же картинка (исходник, 4 Мб), то вы увидите разницу.

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

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

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

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

В продолжении части 1, мы решили написать статью, как вышли на «новый уровень» по созданию веб-продукта. Хочу сразу уточнить, что это не совсем хелпдеск, который основан на создании заявок клиентами (хоть такая возможность и присутствует), а больше рассчитан на внутреннюю работу организации или IT-департамента. Так же хочу напомнить, что система создавалась конкретно под наши требования, поэтому она не лучше других, но и не хуже. Она просто «другая», у которой есть свои функции под конкретные задачи и возможно займёт достойное место в общем мире продуктов, делающих IT-мир лучше.

Начитавшись статей про [все что угодно] на JavaScript в 30 строк кода, я подумал: чем я хуже? Не найдя в перечне своих недостатков пункт «написание плохого кода», решил сделать что-нибудь интересное.

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

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

Для сторонников принципа «меньше знаешь — крепче спишь» предлагается cсылка на JSFiddle (управление стрелочками).

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

Private Internet Access

Это наш любимый сервис, а судя по количеству наград, которые они собрали – и ваш тоже. PIA обеспечивает не только шифрование трафика, но и анонимизацию вкупе с отвязкой от регионального расположения. Вы можете выбрать выходной сервер из списка почти в 1000 штук (в 10 разных странах). PIA не хранит логи, не запрещает никакие протоколы и IP-адреса, и не хранит у себя информации о действиях пользователей. Также они поддерживают несколько методов авторизации, практически все операционки (мобильные и десктопные), а стоимость услуг начинается от $7 в месяц. Возможно подключение до пяти различных устройств.

Доброго {{timeOfDay}}

Как-то затихла тема canvas-а на Хабре…

Давайте вспомним солнечную систему на нём (начало, LibCanvas, Fabric.js) и напишем ещё одну версию? Теперь на graphics2d.js.

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

После нескольких часов просматривания Stackoverflow и доков CSS, я нашел несколько опций, но это все равно не до конца меня устроило. Использование Javascript и Jquery было бы лишним и неэффективным для такой простой задачи, которая, как кажется, должна легко решаться с использованием существующих опций для анимации в CSS3.

Я сначала попытался использовать переходы ease-in (ease-out), которые представлены CSS. Но несмотря на то, что они выглядели достаточно плавными, было слишком сложно добиться ощущения естественности. И каждый новый прыгающий объект нуждался бы в совершенно новой функции, подобрать которую очень трудоёмко. Многие сайты, которые я посещал, предлагали использовать громоздкие keyframe-функции для описания анимации каждого прыжка. Код этих функций выглядит слишком сложным и избыточным. Более того, полученные прыжки объекта выглядели отрывистыми и непрофессиональными.

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

Front-end Job Interview Questions

Репозиторий с самыми актуальными вопросами на собеседовании на позицию фронтенд разработчика. Проект от команды знаменитого HTML5 Boilerplate и набрал уже более 7500 звезд на GitHub.

ShareDrop

В «Америках» почему-то часто критикуют веб-стандарты и работу консорциума W3C в целом. Но не знаю как вас, а меня современные возможности очень даже радуют, особенно когда я вижу их реализацию. Встречайте P2P сервис для передачи файлов, основанный на технологии WebRTC и Firebase. Это веб аналог яблочного AirDrop. Лично я открыл оффлайновый учебник «Постройка.ру» по HTML лет 7-8 назад и по сравнению с тем, что мы видим сейчас — это небо и земля. Даже невзирая на объем и некоторую путаницу в спецификациях.

Давеча снова увлекся простыми числами. Манит меня их тайна.

Написал алгоритм, похожий на решето Эратосфена. За 3 часа программа нашла 700 тысяч первых простых чисел. А мне надо хотя бы 14 миллионов простых чисел, чтобы перемножив их, получить число с количеством десятичных цифр, равным 100 миллионам штук.

Из статьи «Еще раз о поиске простых чисел», написанной пользователем Bodigrim, узнал о существовании быстрой программы primegen, которая работает используя решето Аткина. Установил ее в виртуальной машине LUbuntu (VirtualBox). Действительно, primegen очень быстро работает!

Тогда встал вопрос, как сохранить 14 миллионов простых чисел? Можно просто каждое простое число записать в файл как int32. А если простое число будет больше мощности 32-х бит?

В современном английском (я сейчас про «язык королевы» или Received Pronunciation) тыканье и выканье управляется местоимением you, отчего у иностранцев складывается примерно такая картина мира: «о, удобно, не то, что у нас!» или «а мне сейчас тыкнули или что?». Открою тайну: технически и по идейным соображениям англичане выкают всем подряд вот уже 500 лет. Почему так вышло, и какие они – настоящие шекспировские страсти – читайте под катом.

При работе над одним проектом возникла необходимость написать некое подобие тестовой системы. Задача формулировалась примерно так:

• из N записей в базе необходимо выбрать m (3-5) случайных строк в серии из k выборок (преимущественно k=2).

А теперь то же самое человеческим языком: из таблицы нужно два раза выбрать по 3-5 случайных записей. При этом не должно быть дубликатов и выборка должна происходить случайным образом.

Первое, что приходит в голову:

 SELECT *
  FROM data_set
  WHERE id NOT IN (1,2,3,4, 5)
  ORDER BY random()
  LIMIT 5;

И это даже будет работать. Вот только цена такого решения…

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

Путь разработчика мобильного приложения часто начинается с выбора: разрабатывать под iOS, Android или Windows? Этот выбор мгновенно уменьшает размер вашей потенциальной аудитории, но разработчики вынуждены принимать подобные решения. Те, кто хочет присутствовать по всех трех магазинах приложений, приходят к необходимости переписывать приложение под каждую платформу.



Visual Studio позволяет поддерживать максимальный охват пользователей, достигая при этом значительного повторного использования кода. С помощью Xamarin C#-разработчики могут поддерживать общую бизнес-логику между iOS, Android и Windows-приложениями. С помощью Apache Cordova веб-разработчики могут достичь максимального повторного использования кода, создавая кросс-платформенные приложения на HTML, CSS и JavaScript.

В этой статьей мы посмотрим в деталях, как вы можете использовать расширение “Multi-Device Hybrid Apps” для Visual Studio, для второго сценария – создания кросс-платформенных приложений с использованием веб-стандартов. Чтобы следовать за статьей:

• Скачайте и установите расширение для Visual Studio 2013 Pro Update 3, или…
• Попробуйте одну из виртуальных машин, доступных в Azure.

---

UPD. Вторая версия бенчмарка тут: eric.themoritzfamily.com/websocket-demo-results-v2.html

---

Предупреждение: если у вас есть претензии к бенчмарку и/или к коду, бенчмарк выложен на Гитхабе, что позволяет вам править баги самим или сообщить о багах автору.

Подробнее о проблеме 10000 соединений: ru.wikipedia.org/wiki/Проблема_10000_соединений

Как с проблемой 10000 соединений через вебсокеты справятся Erlang, Go, Haskell (Snap), Java (Webbit), Node.js (websocket) и Python (ws4py)?

Порой встречаются такие артефакты природы, что начинаешь невольно задумывать о разных конспирологических теориях и альтернативной истории. Сегодня я хотел бы поговорить о разных малоизвестных и не очень аспектах операционной системы MS-DOS. Историй про дос на хабре было огромное множество: краткие очерки, подробная хронология, мемуары ностальгирующих, но никто ни разу не отмечал про MS-DOS 4.0 от 1985 года. Я считаю это очень важным звеном развития операционных систем для IBM PC, но удивительно мало информации о таком важном переходном этапе. Это буквально утерянная ветка доса и найти про нее информацию большая проблема. Что бы вы подумали если бы услышали о поддержке в DOS вытесняющей многозадачности, виртуальной памяти, свопа, семафоров и IPC. Фантастика?

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