Pull to refresh
13
0
Игорь Свист @silverwind

User

Send message

jQuery CoreUISelect — плагин для стилизации селекта

Reading time1 min
Views19K
На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.
Читать дальше →

Fluid UI: прототипирование мобильных интерфейсов

Reading time1 min
Views15K
Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.

JPEG сжатие картинки с альфа-каналом или SVG masks

Reading time5 min
Views11K
Привет, Хабр! Недавняя статья про сжатие в png-8 с сохранение полупрозрачности, напомнила мне об одной технике, которая позволяет применять на сайтах изображения с альфа-каналом, при этом используя алгоритм сжатия с потерями — JPEG, что позволяет существенно сократить их объём.
Читать дальше →

Сколково на вашем столе (или история о том, как я делал электронное устройство с нуля)

Reading time19 min
Views67K
Сегодня, оглядываясь назад, я ловлю себя на мысли, что тот опыт и знания, которые я получил в процессе разработки, имеют не меньшую ценность, чем непосредственный результат моих усилий. Получив четкое представление о процессе и о многих «подводных камнях», сопутствующих такого рода затее, я всерьез подумываю о том, чтобы приступить к еще более смелому проекту, о котором я постараюсь рассказать уважаемому сообществу чуть позднее.

А пока, обо всем по порядку…

Prague Electronic Tour Guide. Клубникина.
Катя Клубникина изображает счастливого туриста с первым макетом устройства на шее.

Часть первая. Предыстория.



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

Надо сказать, что до этого я практически 13 лет занимался тем, что принято называть собирательным термином «визуальная коммуникация», а именно, рисовал графический дизайн, снимал рекламу и делал дизайн в движении, а позднее, имея изрядный школьно-студенческий программерский багаж, стал интересоваться разработкой интерактивного ПО, в т.ч. применительно к набиравшей обороты web-индустрии.

И всё бы ничего, как вдруг...

Профилирование и отладка php-приложений с помощью xhprof & FirePHP

Reading time5 min
Views68K

Всем веб-разработчикам, особенно в высоконагруженных проектах, рано или поздно приходится сталкиваться с профилированием своих приложений. Конечно, все мы знаем xdebug, с помощью которого можно проводить отладку серверной части. Однако, в тяжелых RIA-приложениях значительно чаще приходится отлаживаться в связке фронтенда+бэкэнд, всякие ajax-запросы, скорость отработки конкретных скриптов и все такое прочее. И для этих задач есть довольно-таки не плохой набор инструментов. Это xhprof и firephp.
Читать дальше →

Разработка сайтов с адаптивным дизайном

Reading time5 min
Views4.7K
Перевод статьи “Responsive workflow” финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen).

На прошлой неделе я был на конференции Webshaped, где Стивен Хэй (Stephen Hay) рассказывал о процессе разработки адаптивного дизайна. Этот пост не совсем о том же самом, но подход Стивена напомнил мне мой собственный, поэтому я решил изложить некоторые мысли по этому поводу, описать как моя работа эволюционировала за прошедшие два или три года и как может измениться в будущем.

Читать дальше →

Создаем сайт с эффектом Parallax, используя Stellar.js

Reading time7 min
Views86K
Один из самых популярных трендов современного веб-дизайна является эффект Parallax. В этом туториале я покажу вам, как создать подобный эффект на вашем веб-сайте, используя воображение и Stellar.js.



Скачать исходники | Демо
Читать дальше →

5 новых курсов Udacity

Reading time3 min
Views11K
На хабре про Udacity уже писали: 1, 2, 3

Пояснение для тех, кто не знает что это такое. Университет Udacity был основан после успешного проекта online курсов, организованных Стэнфордским Университетом. После этих курсов, которые успешно прошли несколько тысяч человек, Себастьян Тран уже не смог вернуться к обычной преподавательской деятельности и обучать 100 человек в аудитории Стенфордского университета, когда есть возможность вести курс для десятка тысяч по всему миру.

Университет открылся 20 февраля 2012 года двумя семинедельными курсами:
CS101: Building a Search Engine
CS373: Programming a Robotic Car

16 апреля запустились ещё 4 курса:
CS212: Design of Computer Programs
CS253: Web Application Engineering
CS262: Programming Languages
CS387: Applied Cryptography

На этой неделе как раз идет final exam. И вот сегодня должна появится новость о запуске 5 новых курсов:
CS215: Algorithms
CS221: Logic & Discrete Mathematics
CS258: Software Testing
PH100: Landmarks in Physics
ST101: Introduction to Statistics

Под катом их описание

UPD Курсы начнутся 25 июня 2012 года
Официальное объявление: udacity.blogspot.com/2012/05/udacity-expands-course-offerings-five.html
Читать дальше →

Работа с локальным хранилищем, как с объектом — Продолжение

Reading time3 min
Views14K
Этим постом я бы хотел исправиться и предложить адекватный способ работы с хранилищем, как с объектом. Код из поста «Работа с локальным хранилищем, как с объектом? Легко!» использовать крайне не рекомендую, там всё плохо (минусы изложены внизу). Цель данного — объяснить всем тем, кто добавил статью по ссылке в избранное или поставил плюсик, никогда не использовать этот код.

Сейчас же я хочу продемонстрировать простейшую идею, предложенную Scalar в комментарии.

При загрузке страницы (даже до события готовности DOM дерева) обращаемся к хранилищу (в данном случае, это localStorage и sessionStorage), получить JSON, десериализовать его и положить в какую-нибудь переменную.
localObject = JSON.parse( localStorage.getItem( '_myStorage' ) ); // "{'a':1, 'b':2}" → {a:1, b:2}

Затем, каждые N миллисекунд производить обратный процесс:
localStorage.setItem( '_myStorage', JSON.stringify( localObject ) );

При событии onbeforeunload делать то же самое.

Реализация идеи проста (уровень сложности задачи низок и доступен даже новичку). Но, не все (и я в том числе) до этого додумались.
Код конструктора ObjectStorage
var ObjectStorage = function ObjectStorage( name, duration ) {
	var self,
		name = name || '_objectStorage',
		defaultDuration = 5000;
		
	// дабы не плодить кучу экземпляров, использующих один и тот же ключ хранилища, 
	// просто возвращаем единственный с заданным именем,
	// меняя только duration (если имеется)
	if ( ObjectStorage.instances[ name ] ) {
		self = ObjectStorage.instances[ name ];
		self.duration = duration || self.duration;
	} else {
		self = this;
		self._name = name;
		self.duration = duration || defaultDuration;
		self._init();
		ObjectStorage.instances[ name ] = self;
	}
	
	return self;
};
ObjectStorage.instances = {};
ObjectStorage.prototype = {
	// type == local || session
	_save: function ( type ) {
		var stringified = JSON.stringify( this[ type ] ),
			storage = window[ type + 'Storage' ];
		if ( storage.getItem( this._name ) !== stringified ) {
			storage.setItem( this._name, stringified );
		}
	},

	_get: function ( type ) {
		this[ type ] = JSON.parse( window[ type + 'Storage' ].getItem( this._name ) ) || {};
	},

	_init: function () {
		var self = this;
		self._get( 'local' );
		self._get( 'session' );

		( function callee() {
			self.timeoutId = setTimeout( function () {
				self._save( 'local' );
				callee();
			}, self._duration );
		})();

		window.addEventListener( 'beforeunload', function () {
			self._save( 'local' );
			self._save( 'session' );
		});
	},
	// на случай, если нужно удалить таймаут (clearTimeout( storage.timeoutId ))
	timeoutId: null,
	local: {},
	session: {}
};



Использование:
var storage = new ObjectStorage;
storage.local = {a:4, b: {c:5}};
storage.session = {a:7, b: {c:8}};
b = storage.local.b;
b.c = {d:6};

Читать дальше →

Класс для реализации UNIX-демонов на PHP

Reading time5 min
Views2.5K
Ну начнем с того, что довольно часто приходится сталкиваться с тем, что необходимо реализовывать какую-либо серверную часть для обработки каких-то данных и т.д. Естественно, что сервеную часть удобней всего было бы реализовать в виде демона. В свое время я наткнулся на подобный класс реализации демонов написанного на Python. И вот на прошлой неделе решил написать такое же творение на PHP, вроде получилось не плохо, оценивать Вам.
Читать дальше →

Адаптивная верстка: CSS&JS фреймворк Skeleton

Reading time4 min
Views69K

В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать дальше →

SMART Jobs Act: трудоустройство для иностранных студентов в США

Reading time2 min
Views3.1K
На учёбу в университеты США приезжают талантливые студенты со всего мира, но после получения диплома многие вынуждены уехать, потому что заканчивается срок студенческой визы, а работать по ней они не имеют права. Каждый год Америку покидает 20 000 выпускников.

Чтобы исправить ситуацию и помочь молодым талантам остаться в Америке (и принести пользу американской экономике), сенаторы от республиканской и демократической партий совместно разработали законопроект SMART Jobs Act (Sustaining our Most Advanced Researchers and Technology).

Если законопроект пройдёт, то создаётся новая студенческая виза F4, она позволит иностранному студенту остаться на территории США на срок до 12 месяцев после окончания вуза, чтобы найти работу или создать свой собственный стартап.
Читать дальше →

Простая кастомизация Checkbox и Radio

Reading time4 min
Views261K

Вместо вступления


Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!


Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.
Читать дальше →

Самые простые техники адаптивной верстки

Reading time2 min
Views465K
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.


Читать дальше →

Честная генерация DOCX на PHP. Часть 1

Reading time4 min
Views73K
image Здравствуйте, уважаемое хабрасообщество! Как-то раз был на хабре интересный материал про генерацию doc-файлов средствами PHP. К сожалению, больше на хабре ничего на эту тему я не нашел. На тот момент я разработал собственное решение.
Оно состояло в том, чтобы генерировать .docx файлы. Аргументы были следующие:

  • На дворе 2012 год, а этот формат появился аж в 2007-м
  • Генерить .docx несомненно проще, чем .doc, поскольку .docx = .zip, а .doc — бинарный файл
  • Костыль с генерацией HTML и переименованием в doc не подойдет для более-менее уважающих себя проектов
  • С помощью приведенного ниже метода мы с легкостью сгенерируем Excel, и вообще всё что угодно.

Подробности под катом.
Читать дальше →

Webasyst Блог: приложение для ведения коллективного блога

Reading time2 min
Views7.1K
Представляем бесплатное приложение «Блог» (лицензия LGPL) для ведения блогов, написанное на PHP-фреймворке Webasyst:

image


Приложение разработано, в первую очередь, для корпоративного использования: для компаний, которые ведут открытый (общедоступный) и закрытые (внутрикорпоративные) блоги. Приложение позволяет вести все эти блоги вместе в едином потоке. Приложение может быть интересно блогерам, которым надоел Wordpress их движок блога.

Поддерживается весь основной функционал, который есть в популярных движках: много блогов, комментарии, RSS, sitemaps, кат, фронтенд, бекенд, дизайн-редактор и пр. Есть и такие приятные фичи, как, например, календарь публикаций:
Читать дальше →

User experience design: как построить сайт для клиентов, а не для себя

Reading time8 min
Views76K
В конце апреля я делал доклад на РИФ 2012 про этапы проектирования пользовательского интерфейса. Так как видео нет, попробую представить доклад в виде слайдов с моими комментариями.

UX

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

Читать дальше →

Строим защищённую систему на основе TOR и I2P

Reading time5 min
Views77K

Введение


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

На провокации вида «при помощи такой системы можно слить гостайну врагу» я отвечаю сразу: при помощи ядерных ракет можно не только устроить конец света, но и отогнать или расколоть угрожающий нашей планете астероид.
Читать дальше →

Виджет для Android на JavaScript за 15 минут на примере Хабра-Кармы

Reading time5 min
Views13K
Сразу говорю, кармавиджет — вовсе не основная цель статьи. В этой статье я хочу представить широкой общественности способ быстрого создания информационных виджетов для Android на JavaScript всего лишь на примере кармы и рейтинга хабра. Виджет будет смотреться примерно так:



Виджет будет представлять собой плагин для программы AnyBalance (Android), основная идея которой — собрать общую базу способов извлечения балансов и прочих параметров из личных кабинетов различных провайдеров, например, балансов на сотовых телефонах, интернет провайдерах и т.д. Эти плагины (будем их дальше называть «провайдерами») пишутся на JavaScript и имеют открытый исходный код. Сейчас база AnyBalance содержит около 80 провайдеров, но постоянно расширяется. И хабрахабр там будет не лишним :)
Читать дальше →

TeamLab: прогулка по каналам продвижения, или как мы создавали social buzzz

Reading time5 min
Views10K
Когда мы рассказывали о нашей системе переводов, нас попросили написать и о том, как идет продвижение TeamLab, в особенности, на зарубежные рынки. Сегодня попробуем. Были и взлеты и падения, шли очень часто методом проб и ошибок, но любой опыт бесценен, вот им и поделимся, может, кому пригодится. Не будем писать умных, и уже ставших банальными, советов про SEO, Adwords и прочее, постараемся быть по максимуму конкретными.



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

Information

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