Pull to refresh
19
0
Andrew Marcus @marcus

User

Send message

Фоторама

Reading time4 min
Views55K


Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.
Читать дальше →
Total votes 304: ↑295 and ↓9+286
Comments111

Алгоритм Ляна-Кнута для расстановки мягких переносов

Reading time4 min
Views13K
При работе с текстом часто возникает потребность корректно расставить переносы. Задача на первый взгляд не такая уж очевидная, нужно учитывать особенности каждого языка, чтобы решить, в каком месте разорвать слово. Как правильно формализовать такие требования, и как потом применить их в алгоритме? Одно из самых распространенных на сей день решений предложил Франклин Марк Лян, студент известного профессора Дональда Кнута. Алгоритм так и называется – «Алгоритм Ляна-Кнута», он применяется в издательской системе TeX, автор которой опять же Д. Кнут.

Алгоритм основан на сравнении исходного слова с набором правил (шаблонов). Чем больше правил и чем качественнее они составлены, тем лучше будут расставляться переносы. В пакете TeX можно найти готовые бесплатные наборы правил для многих языков, нужно только внимательно смотреть на условия использования и распространения.
Узнать больше
Total votes 54: ↑51 and ↓3+48
Comments15

HTML5 History API уже сегодня и без ограничений

Reading time6 min
Views63K

Библиотека для работы HTML5 History API


Изначально этот проект был задуман добавить поддержку HTML5 History API в старые HTML4 браузеры. Первые версии библиотеки были нацелены именно на эти потребности, но с учетом прошедшего времени и пожеланий многоуважаемых разработчиков использующих эту библиотеку, она выросла до уровня того, что выполняет некие промежуточные действия по добавлению/исправлению того функционала что описаны в спецификациях по интерфейсу History.

На сегодняшний день библиотеку я могу смело назвать, на мой взгляд, полноценно законченной. Конечно же, ошибкам в работе библиотеки думаю, место будет, тестировалась библиотека мною в разных условиях и браузерах, но как вы понимаете, все не уловишь, да что-то упустишь. И так давайте приступим к описанию возможностей и тонкостей библиотеки.
Читать дальше →
Total votes 85: ↑84 and ↓1+83
Comments49

Mobiscroll — кастомный select для мобильных сайтов и не только

Reading time1 min
Views6.2K

К каждому, кто сталкивался с разработкой сайтов под iOS/Android/etc (или native-приложений через phonegap и иже с ним), рано или поздно наверняка приходило осознание того факта, что стандартные управляющие элементы форм не очень удобны для работы с touch-экранов.

И если input'ы и textarea вполне можно отрисовать с помощью css, то с селекторами ситуация гораздо более грустная — и не улучшить особо, и выбирать, например, дату, последовательным выбором трех выпадающих списков — занятие не из приятных.
Помогает в решении этой проблемы мультиплатформенный (обещают как минимум работу на iOS/Android, но с некоторыми помарками работает и на MeeGo — это из проверенного собственноручно) select-заменитель Mobiscroll, с некоторым трудом нагугленный мной пару недель назад.

Читать дальше →
Total votes 27: ↑26 and ↓1+25
Comments13

Борьба с WordPress-червём GetMama

Reading time2 min
Views2.2K
Привет!
Подлый вирус GetMama пожрал кучу сайтов на вордпрессе. В том числе несколько моих. И я вам расскажу, как это почистивать сущность в виде гномика.

Началось с того, что некоторые сайты начали открываться очень долго. Причём только те, что на вордпрессе.
Я долго не мог понять, что же за беда приключилась. Обновил полностью всё ПО на сервере (думал, можнт wp какую-нибудь хитрую срань использует). Но это не помогло.
Тогда я стал искать, какая же функция выполняется так, сука, долго.
Для этого я использовал xhprof.
Читать дальше →
Total votes 77: ↑55 and ↓22+33
Comments40

Chop Slider 2 — лучший jQuery-слайдер

Reading time5 min
Views54K

Добрый день. Несколько дней назад появилась необходимость использовать слайд-шоу на своём сайте, но оно должно было быть нестандартным, чтоб привлекало внимание пользователей. Искал в течение дня и ничего нормального не мог найти, были более менее подходящие «слайдеры», но душа хотела клубнички. После того как я облазил весь рунет, переключился на «забугорных» друзей и… удача! Забегая наперёд хочу сказать: этот обзор сделан потому, что в рунете нет никакого упоминания про это слайд-шоу, отсюда и логика.
Читать дальше →
Total votes 89: ↑68 and ↓21+47
Comments49

Знакомство с Parallax Scrolling

Reading time4 min
Views292K
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.


Читать дальше →
Total votes 99: ↑92 and ↓7+85
Comments35

Онлайн-курсы Stanford University, Berkley и MIT в доступном виде

Reading time2 min
Views54K


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

Пример такого поста: habrahabr.ru/post/139542

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

Уверен, что курсов по данным дисциплинам, информативнее и понятнее выложенных, в природе не существует.

Под катом ссылки и список того, что было выложено, что ещё предстоит выложить…
Читать дальше →
Total votes 98: ↑92 and ↓6+86
Comments34

Фотореалистическое изображение облака при помощи JavaScript и трёхмерных CSS-преобразований

Reading time1 min
Views9.6K
Эта картинка, если на первый взгляд, выглядит фотографией реального облака в реальных небесах:

[облако]

Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.
Total votes 85: ↑70 and ↓15+55
Comments42

Сверхплавные трансформации для jQuery

Reading time1 min
Views20K
Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.
Total votes 84: ↑74 and ↓10+64
Comments44

Золотые правила успешной кнопки

Reading time3 min
Views71K
Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSS или пользуетесь специальными инструментами для их создания, всегда нужно тщательно подумать о том, как ваша кнопка будет выглядеть в контексте веб-сайта.
Читать дальше →
Total votes 224: ↑215 and ↓9+206
Comments55

Равномерное выравнивание блоков по ширине

Reading time4 min
Views19K
Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге, но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».

В общем в задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
image
Читать дальше →
Total votes 172: ↑163 and ↓9+154
Comments87

«Лапша» из callback-ов — будьте проще

Reading time3 min
Views13K
По следам недавних топиков, а также постоянных рассказов в стиле «мой стартап не взлетел, потому что его зохавала лапша из callback-ов».

Как раз недавно я закончил небольшой проект (ссылку не даю, чтобы не заподозрили — кому надо см. профиль), полностью и на всех этапах написанном только на JS, и притом полностью асинхронный. Разумеется, я столкнулся с пресловутой проблемой «лапши». И, вы не поверите, совершенно спокойно решил её без всяких там фреймворков и хитрых приемов.

Итак, допустим, у нас есть задача: асинхронно выбрать из базы количество книг, потом асинхронно же выбрать из базы нужную пачку книг, потом асинхронно же выбрать из базы метаданные по книгам, а потом свести всё это в один dataset и отрендерить шаблон. Как это обычно выглядит?

Читать дальше →
Total votes 74: ↑63 and ↓11+52
Comments119

«Загадочные отступы» между инлайн-элементами

Reading time15 min
Views30K
Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.
Читать дальше →
Total votes 127: ↑123 and ↓4+119
Comments141

Почему проекты в IT занимают в 2-3 раза дольше, чем планируется?

Reading time3 min
Views24K
Мы с другом решаем пойти в поход от Сан Франциско до Лос Аджелеса, чтобы заскочить в гости к нашим друзьям на Ньюпорт Бич. Посмотрим на карту и примерно прикинем путь по берегу:

image

Путь займёт около 400 миль, в день мы можем пройти 4 мили в час по десять часов, так что придём мы туда примерно через 10 дней. Мы звоним друзьям и бронируем столик на 6 вечера в воскресенье.

Читать дальше →
Total votes 278: ↑262 and ↓16+246
Comments181

JavaScript. Оптимизация: опыт, проверенный временем

Reading time10 min
Views41K

Предисловие


Давно хотел написать. Мысли есть, желание есть, времени нету… Но вот нашлось, так что привет, Хабра.
Здесь я собрал все идеи, которые помогали и помогают в разработке веб-приложений. Для удобства я разбил их на группы:
  1. Память
  2. Оптимизация операций
  3. Выделение критических участков
  4. Циклы и объектные свойства
  5. Немножко о DOM
  6. DocumentFragment как промежуточный буфер
  7. О преобразованиях в объекты
  8. Разбитие кода
  9. События перетаскивания
  10. Другие советы

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

Память

Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
Чтобы уменьшить расход памяти, я предлагаю несколько способов:
Читать дальше →
Total votes 113: ↑92 and ↓21+71
Comments99

Принцип домино или XSS на крупных сайтах рунета

Reading time1 min
Views4.3K
На странице регистрации нового аккаунта Mail.ru не фильтровались поля 'Имя' и 'Фамилия', в следствии чего туда можно было вставлять скрипты и регистрировать пользователя чьим именем был скрипт (до 80-ти символов). На самом Mail.ru эта уязвимость никак не отражалась, а проявляла себя на тех сайтах, что использовали авторизацию через Mail.ru, и на тех сайтах, что использовали авторизацию сайтов, использовавших авторизацию через Mail.ru :)
Вот так было до исправления уязвимости:
image
Читать дальше →
Total votes 123: ↑114 and ↓9+105
Comments95

Определение доминирующих тонов на изображении

Reading time4 min
Views26K

Предыстория


Очень давно, когда мои познания в PHP были на уровне мат операций и вывода результатов, а нашел очень полезный класс, написанный Kalpeh Gamit, его сайт уже давно недоступен, поэтому, к сожалению контакты оставить не могу. Класс распространяется под именем GetImageColor и лицензией GPL 2.0.

Пользовался я этим классом частенько. Он принимает в качестве входного параметра изображение (только в формате JPEG, но за минуту дополняется всеми остальными), количество возвращаемых цветов и шаг обработки. Скрипт считывает цвет с фотографии с заданным шагом и заносит его в массив цветов. Итоговый массив отсортирован по вхождениям цветов и возвращается только заданное количество цветов.
Читать дальше →
Total votes 53: ↑51 and ↓2+49
Comments35

Последовательный вызов асинхронных функций

Reading time3 min
Views33K
Как известно, язык JavaScript преследует парадигму событийно-ориентированного программирования. Это, безусловно, хорошо, но что делать, если за одной асинхронной функцией должна вызываться другая асинхронная функция, а затем еще одна, и еще… Иногда такой код очень запутывает, и не только человека привыкшего к синхронному и поочередному вызову функций. Это касается сложных анимаций, таймаутов, аякса, когда за одним должно следовать другое, и так дальше.

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

UPD
image
Ниже моё решение, являющееся аналогом этой функции модуля async и кучи других подобных решений, представленных в комментариях. Спасибо всем комментирующим и sedictor в частности.
/UPD

Рассмотрим пример (который взят из головы и в нем возможны ошибки) гипотетического парсера сайта, который после парсинга заносит данные в БД, и, после занесения, вызывает некоторый код.

var html = '';
request.on('response', function (response) {

    response.on('data', function (chunk) {
        html = html + chunk;
    });

    response.on('end', function() {
        //какой-то парсер
        parse(html, function(data){  
                //какая-нибудь функция, добавляющая данные в базу
		addToDatabase(data, function() {  
			doSomething();
		})
	});

    });
});


Много вложенных колбеков — не есть гуд, пробуем по-другому.
Читать дальше →
Total votes 50: ↑40 and ↓10+30
Comments33

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Registered
Activity