Search
Write a publication
Pull to refresh
11
0
unspecified @unspecified

User

Send message

Кризис идентичности пикселя

Reading time5 min
Views13K


Пиксель всегда был наименьшей единицей в цифровом дизайне. Это невидимая величина измерения для дизайнеров. Фраза «пиксель пиксель пиксель» была принята в помощь принт-дизайнерам, чтобы те могли понимать концепт фиксированной плотности экрана. Веб-дизайнеры в свою очередь приняли пиксели взамен точкам.
Читать дальше →

Отзывчивая типографика: Основы

Reading time7 min
Views22K


Когда мы создаем веб-сайты обычно мы начинаем с определения текста документа. Определение основного текста задает ширину главной колонки на странице, все остальное должно произойти само по себе. Должно. До недавнего времени разрешение экрана было более менее одинаковым. Сегодня мы имеем дело с огромным количеством экранов разного разрешения и размеров. Это делает вещи намного сложнее.
Читать дальше →

Загрузка и инициализация JavaScript

Reading time10 min
Views43K

С появлением мобильного веба наш интернет стал снова плохим, а устройства медленными. 3G, 4G, Wi-Fi… — они, конечно, где-то есть, но когда очень надо, то как правило скорость падает до околомодемной и получается, что наши мобильный устройства «каменного века» попадают в условия современного объема информации. Даже в центре города (правда на 15-м этаже) значок мобильного интернета может показывать волшебную букву Е, намекающую о том, что уж лучше не тратить нервы и потерпеть. Лучше уж использовать нативную версию какого-то веб-сервиса, чем каждый раз ждать, загружать по мегабайту, чтобы отправить короткое сообщение. Нативную версию веб-сервиса... Понятное дело маркетинг, гонка приложений. Однако, же пользователи выбирают нативные веб-приложения, которые работают быстрее, не качают кучу ресурсов, хотя им приходится периодически его обновлять.

Эта статья о том какими путями можно оптимизировать загрузку и инициализацию JavaScript.
Читать дальше →

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

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

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

UI-Ai: Рисуем интерфейс в Adobe Illustrator

Reading time7 min
Views146K
На презентации Adobe CS6 в Самаре я делал доклад о том как мы в компании Parcsis используем Adobe Illustrator для создания веб- и мобильных интерфейсов. Хочу поделиться этим докладом с вами в виде слайдов с комментариями.

Рисуем интерфейс в Adobe Illustrator

Когда показываешь свои работы, зачастую начинающие дизайнеры задают вопрос «А в чем это нарисовано?» Опытные дизайнеры спрашивают такое реже, так как понимают, что одно и тоже можно сделать с помощью разных графических редакторов. Тем не менее, расскажу свою историю…

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

Вышел бесплатный профессиональный видеоредактор Lightworks

Reading time3 min
Views102K
“Бэтмен навсегда”, “Остров проклятых”, “Отступники”, “Король говорит”, “Авиатор”, “Карты, деньги, два ствола”, “Криминальное чтиво” — это далеко не полный список фильмов, смонтированных с помощью Lightworks за его более чем двадцатилетнюю историю. С 1989 года Lightworks сменил несколько владельцев, пока в 2009 его не приобрела компания EditShare — производитель систем хранения видео для ТВ и киностудий. Новые хозяева решили порвать с традицией продавать подобный софт за тысячи долларов, и теперь профессиональная версия Lightworks стоит 60$, а базовая — бесплатна. Причём эта “базовая” версия мало чем отличается от платной и не уступит многим профессиональным версиям других редакторов. Но и это ещё не всё — EditShare собирается в ближайшем будущем выпустить версии для Linux и Mac (именно в таком порядке) и открыть исходники.


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

Greensock: анимация на JavaScript

Reading time3 min
Views101K
Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash, теперь поддерживает и JavaScript. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким:


Сразу оговорюсь, что графику и идею для примера я взял из документации $fx(), ведь кто из нас откажется
проанимировать НЛО

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

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


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

Мой первый Android-проект, мой первый Android-заказчик

Reading time4 min
Views2.6K


Рассказ о том, как Хабр помог мне решиться написать первое приложение на android и помог найти «заказчика». Проект уже реализован и я решился написать о том, как это получилось.

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

Вся правда о Chrome (и не только) Web Inspector. Часть 1

Reading time9 min
Views154K
Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.


В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го.
Читать дальше →

Работа с локальным хранилищем, как с объектом? Легко!

Reading time3 min
Views15K
Когда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.

localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;

Круто было бы, не так ли?

Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!

Как говорит небезызвестный Геша: “Всё, я здзелал”.

Дальше читать не обязательно. Более разумное решение находится здесь: habrahabr.ru/post/144998

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

Кластеризация дубликатов в Яндекс.Картинках

Reading time1 min
Views7.4K
Сегодня в клубе Яндекс.Субботник появилось интересное видео о том, как Яндекс обрабатывает изображения для исключения дубликатов. Рассказывает Александр Крайнов: он с 2000 года занимается проектами, связанными с обработкой медиаданных. В Яндексе отвечает за проекты, в которых задействовано компьютерное «зрение».

О докладе
Легко найти дубликаты среди тысяч картинок. Сложнее – среди миллионов. И совсем трудно – среди миллиардов. Чем выше полнота работы алгоритма, тем больше проблем. Но в то же время полнота кластеризации дубликатов – это основа качества поиска изображений.

Думаю, многие не следят за этим клубом и мне кажется, что после этого видео есть над чем поразмыслить.
Всем кому интересно — прошу под кат.
Читать дальше →

Отложенные уведомления пользователей на Node.js & Redis

Reading time5 min
Views9.8K
Описание задачи

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

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

Как раскидать окна по рабочим столам после загрузки

Reading time2 min
Views13K
Задача: Ubuntu Precise, Compiz Wall, несколько приложений в автостарте и желание не раскидывать их по рабочим столам вручную каждый раз при логине.

Решение найдет только очень внимательный, что и стало причиной для поста. Оказалось, что задачу можно решить силами самого compiz'a без каких-либо ухищрений. Все что нужно, это плагин Place Windows, который есть в поставке по умолчанию.

Как же, как же это настроить?

Руководство по оформлению HTML/CSS кода от Google

Reading time12 min
Views361K

От переводчика


С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение


Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
Читать дальше →

Re: Командная строка на службе фотографа-линуксоида

Reading time3 min
Views3.5K
Недавно опубликована статья «Командная строка на службе фотографа-линуксоида», где автор пишет о решении разных типовых задач, встающих перед фотографом-линуксоидом, но он рассмотрел явно не всё.

Первая, а точнее, нулевая задача — скопировать изображения. Казалось бы, в ней нет чего-то такого, что бы подлежало оптимизации и автоматизации: всегда можно нажать F5 в mc либо перетащить файлы мышкой или же воспользоваться каким-нибудь менеджером фотографий наподобие digiKam. Можно — но не нужно: слишком много лишних движений. Фотографу-линуксоиду (а точнее, линуксоиду, время от времени занимающемуся фотографией) обычно надо лишь забрать фотографии с карты памяти, аккуратно сложить их на жёсткий диск, рассортировав, например, по времени съёмки и, если лишние буквы раздражают взгляд, убрать их.

Другая задача, о которой говорили в комментариях — пакетное уменьшение фотографий и их подписывание. Один из методов — использовать ImageMagick, к которому доступны различные интерфейсы: как интерфейс командной строки (программы convert, mogrify, montage), так и API для различных языков программирования. В случае с перлом — модуль Image::Magick. ImageMagick позволит и уменьшить фотографию, и подписать её.

Я подобные задачи автоматизировал следующим образом:
Читать дальше →

Командная строка на службе фотографа-линуксоида

Reading time4 min
Views4.6K
Здравствуйте, хабралюди!

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

Для Линукса, которым я пользуюсь практически 100% времени, есть много различных графических инструментов для работы с фото. Но иногда бывает, что нужной функции в используемой программе — нету.
Или она есть, но ты не смог её найти. Что же делать? Конечно же, использовать bash.

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

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

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



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

Знакомство с 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.


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

Перевод официальной документации по Backbone.JS

Reading time1 min
Views9.9K
Доброго времени суток!



В полку Open Source прибыло! Мы (@kulakowka, k12th, dhomich и я) рады представить вашему вниманию перевод официальной документации по Backbone.JS — каркасу для создания RIA приложений на JavaScript, автором которого является Jeremy Askenas — создатель CoffeeScript.
Читать дальше →

Information

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