Pull to refresh
0
0
G0RIK @G0RIK

User

Send message

Инструменты студии мобильной разработки

Reading time4 min
Views38K


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

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

Пройдемся по дизайну, серверным решениям, тестированию и аналитике.
Читать дальше →
Total votes 46: ↑41 and ↓5+36
Comments22

Наследование без Prototype

Reading time2 min
Views4.5K
В JavaScript наследование сделано через Prototype. Почему же не сделать наследование не через него, нигде не написано. Программисту, который больше всего пишет на PHP или любом другом языке, где «Прототип», это порождающий шаблон проектирования, а не способ наследования в JavaScript, очень трудно взять и начать писать классы, поэтому их почти никто собственно и не пишет на своих сайтах, а только в каких либо изощренных задачах или в специальных библиотеках.

Большая часть сайтов обходится без классов. Максимум на что можно рассчитывать, это использование какого-либо JavaScript фреймворка, где можно надеется, что это присутствует.

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

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

function Class(name, b, c) {

	window[name] = function(){
		/* Добавляем члены класса */
		for(var v in c) {
			if (!c.hasOwnProperty(v)) this[v] = c[v];
		}

		
		/* Делаем наследование */
		this.__bases = [];
		for(var i = 0; i < b.length; i++) {
			this.__bases.push([]);
			for (var v in b[i].__dict)	{
				if (!c.hasOwnProperty(v) && v != 'construct') {
					this[v] = b[i].__dict[v];
                                }
				else
				{
					this.__bases[i][v] = function(obj, f) {
						if (typeof f == 'function') {
							return function() {							
								f.apply(obj, arguments)
							};
                                                } else {
							return f;
						}
					}(this, b[i].__dict[v]);	
				}
                        }			
		}

		/* Вызываем конструктор */
		if (c.hasOwnProperty('construct')) {
			c['construct'].apply(this, arguments);
		}
		else
		{
			for(var i = 0; i < b.length; i++) {
				if (b[i].__dict.hasOwnProperty('construct')) {
					b[i].__dict['construct'].apply(this, arguments);
				}
		        }
		}
	};

        window[name].__dict = c;
}

Читать дальше →
Total votes 43: ↑7 and ↓36-29
Comments33

Высокая производительность Google Chrome

Reading time9 min
Views80K

История и краеугольные принципы Google Chrome.


imageGoogle Chrome был представлен во второй половине 2008 года, как бета версия для Windows платформы. Код Chrome, авторство которого принадлежит Google, был сделан доступным под либеральной BSD лицензией — как и Chromium проект. Для большинства заинтересованных, такой поворот событий стал сюрпризом — война браузеров возвращается? Сможет ли Google сделать свой продукт действительно лучше других?

«Это было столь хорошо, что заставило меня изменить свое мнение..» — Эрих Шмидт, первоначально не желающий принимать идею Google Chrome.
Читать дальше →
Total votes 127: ↑90 and ↓37+53
Comments95

Распределительная сеть дата-центров мирового масштаба — сердце империи Google

Reading time12 min
Views79K
«Гу́гол (от англ. googol) — десятичной системе счисления изображаемое единицей со ста нулями».
(Википедия).
Многие знают многоликость Google — это и популярный поисковик, и социальная сеть, а также еще множество других полезных и новаторских сервисов. Но мало кто задумывался: каким образом удалось компании развернуть и поддерживать их со столь высоким быстродействием и отказоустойчивостью? Как организовано то, что обеспечивает такие возможности,— дата-центр Google, каковы его особенности? Как раз об этом и пойдет речь в данной статье.

Собственно, корпорация Google уже давно никого не удивляет мощной динамикой своего роста. Активный борец за «зеленую энергетику», множество патентов в различных областях, открытость и дружественность по отношению к пользователям — вот те первые ассоциации, которые возникают при упоминании Google у многих. Не менее впечатляет и ЦОД компании: это целая сеть дата-центров, размещённых по всему миру, суммарной мощностью220 МВт (по состоянию на прошлый год). Учитывая тот факт, что инвестиции в ЦОД только за последний год составили 2,5 миллиарда долларов, понятно, что компания считает это направление стратегически важным и перспективным. В то же время наблюдается некое диалектическое противоречие, ведь, несмотря на публичность деятельности корпорации Google, его дата-центры являются этаким ноу-хау, тайной, скрытой за семью печатями. В компании считают, что разглашение деталей проектов может быть использовано конкурентами, поэтому лишь часть информации о наиболее передовых решениях просачивается в широкие массы, но даже эта информация весьма интересна.
Читать дальше →
Total votes 108: ↑102 and ↓6+96
Comments54

То, что вам никто не говорил о z-index

Reading time3 min
Views357K

Проблема z-index в том, что многие просто не понимают, как он работает.
Всё, описанное ниже, есть в спецификации W3C. К сожалению, не все её читают.

Описание проблемы:


Итак, пусть у нас есть HTML код, состоящий из 3 элементов.
Каждый из них внутри себя содержит по одному . А каждый , в свою очередь, имеет свой фон: красный, зеленый и синий, соответственно. Плюс ко всему, каждый позиционирован абсолютно левого верхнего края документа таким образом, что он немного перекрывает собой следующий за ним . Первый имеет z-index
, равный 1, у остальных двух z-index не задан.
Читать дальше →
Total votes 112: ↑109 and ↓3+106
Comments30

Подборка инструментов для фронт-энд разработки

Reading time2 min
Views134K
Как разработчику, мне очень нравятся инструменты, которые помогают сэкономить время или упростить процесс разработки фронт-энда. В этой статье я собрал мои любимые веб-инструменты для упрощения разработки веб-интерфейсов.

Картинки кликабельны.

Form builder


Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
image
Читать дальше →
Total votes 202: ↑184 and ↓18+166
Comments40

Псевдо 3D или параллакс средствами javascript

Reading time3 min
Views17K
Прочитав пост о псевдо 3D эффекте, стало интересно реализовать некий аналог для использования в веб приложениях. За результатом прошу под кат
Читать дальше →
Total votes 16: ↑10 and ↓6+4
Comments10

Бесплатная книга «HTML5. Руководство разработчика»

Reading time12 min
Views133K
ХО-ХО-ХО! Праздник к нам приходит! Всегда coca-co… HTML5!
Выпал снежок и как-то незаметно пришло праздничное, предновогоднее настроение. Чтобы как-то поддержать праздничный дух, мы решили сделать небольшой сюрприз от издательства и порадовать наших читателей бесплатной электронной книгой Марка Пилгрима «HTML5. Руководство разработчика» (DIVE INTO HTML5). Оригинал книги также есть в бесплатном варианте в Интернете.

Прежде чем скачать книгу целиком, предлагаем вам познакомиться с первой главой:

Глава 1. Как мы сюда попали?


Приступим


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

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


Пока я буду рассказывать, как появился HTML5, помните эти слова.
Читать дальше →
Total votes 103: ↑93 and ↓10+83
Comments33

Простая техника Parallax Scrolling

Reading time2 min
Views126K
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка


Создаем два блока с атрибутами "data-type" и "data-speed":
<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

Читать дальше →
Total votes 44: ↑34 and ↓10+24
Comments39

Кто использует Node.js: Trello (Часть 2)

Reading time5 min
Views16K
Это продолжение перевода «The Trello Tech Stack».

Часть 1
  • CoffeeScript
  • Клиент
    * Backbone.js
    * HTML5 History API
    * Mustache
  • Pushing and Polling
    * Socket.io and WebSockets
    * AJAX запросы

Часть 2
  • Сервер
    * node.js
    * HAProxy
    * Redis
    * MongoDB
  • Итак, нравится ли нам это?

Читать дальше →
Total votes 21: ↑20 and ↓1+19
Comments63

Веб аудио оффлайн в Safari под iOS 6

Reading time2 min
Views5.9K

Воспроизведение кешированного аудио в оффлайн режиме в Safari под iOS долгое время было настоящим испытанием, которое было признано недостижимой целью. Но с приходом веб аудио API (только в движках WebKit), это наконец-то стало возможным, несмотря на то, что вам все-равно придется сделать несколько шагов.

Плохая новость в том, что вы все равно не сможете кешировать mp3 файлы, используя кеш приложения и просто загружать их используя XmlHttpRequest. Safari под iOS 6 будет кешировать mp3 файлы, но потом молча откажется воспроизводить их (очень полезно!)
Но не все потеряно...
Total votes 14: ↑14 and ↓0+14
Comments5

Код CSS «с душком»

Reading time8 min
Views107K
Недавно Крис Койер отвечал на вопросы читателей Smashing Magazine. Один из вопросов был о том, как распознать код CSS с «душком»:
Как можно определить, что ваш CSS пованивает? Какие признаки указывают на то, что код неоптимален или что разработчик писал его спустя рукава? На что вы смотрите в первую очередь, чтобы определить, плох или хорош код?

Я подумал, что могу расширить и дополнить ответ Криса исходя из собственного опыта.

Я работаю в BSkyB. Я делаю большие сайты — над последним из них я тружусь уже больше года. Плохой код CSS доставляет мне очень много проблем. Когда занимаешься одним сайтом месяцами, ты просто не можешь себе позволить плохой код, и его обязательно надо исправлять.

Я хочу поделиться несколькими вещами, на которые я обращаю внимание прежде всего, чтобы составить впечатление о качестве, сопровождаемости и чистоте кода CSS.
Читать дальше →
Total votes 165: ↑155 and ↓10+145
Comments131

Кроссбраузерность в SVG

Reading time3 min
Views21K
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.

image

Предыдущие топики о SVG:

Читать дальше →
Total votes 19: ↑18 and ↓1+17
Comments10

Зверюшки на CSS3 transitions & transforms

Reading time4 min
Views30K

Пора


Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 65% пользователей уже могут увидеть transitions в действии.

CSS


Демо Код на jsfiddle
Так как я люблю CSS, решил сделать интерактивных зверюшек на чистом CSS, без каких-либо скриптов.
Благодаря псевдоклассу :checked, можно реализовать действие по клику, что обычно приписывается на js. А также используя уже привычные псевдоклассы :hover и :active, я оживил зверюшек:
.pavepy .body .hand.left,
.pavepy:hover .body .hand.right,
input:checked + .pavepy .body .hand.right,
input:checked + .pavepy:hover .body .hand.left,
input:checked + .pavepy.fox .head .ear.right {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-o-transform: rotate(-30deg); 
	transform: rotate(-30deg);
}

Читать дальше →
Total votes 22: ↑18 and ↓4+14
Comments17

Базовые стили и полезные CSS-сниппеты

Reading time6 min
Views147K


В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
Читать дальше →
Total votes 163: ↑118 and ↓45+73
Comments54

Web разработка на node.js и express. Глава 2 — тестирование приложения

Reading time8 min
Views50K
Не прошло и полгода как я наконец добрался до написания второй главы учебника. Первую главу я тоже немного переработал с учетом пожеланий хабражителей, так что можете снова ее просмотреть — Web-разработка на node.js и express. Изучаем node.js на практике

Глава 2. Демонстрационное приложение и первые тесты



В этой главе мы приступим к разработке нашего приложения, которое мы будем использовать в качестве примера на протяжении всего учебника, и начнем с самого простого, а именно со статических страниц. Так же мы познакомимся с тестированием приложений на node.js и с инструментами, которые используются для этого.
Читать дальше →
Total votes 29: ↑26 and ↓3+23
Comments27

Адаптивные фоновые изображения

Reading time3 min
Views139K
Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.

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

Фиксированное соотношение сторон


Читать дальше →
Total votes 71: ↑62 and ↓9+53
Comments15

Ratchet — быстрое прототипирование мобильных приложений на HTML, CSS и JS

Reading time1 min
Views24K


Ratchet — новый фреймворк, который позволяет быстро создавать прототипы приложений для iOS. По сути является аналогом Twitter Bootstrap для мобильных устройств.

Сайт проекта | Ratchet на GitHub | Обсуждения в Google Groups | Twitter
Читать дальше →
Total votes 41: ↑37 and ↓4+33
Comments27

Information

Rating
Does not participate
Location
Минск, Минская обл., Беларусь
Date of birth
Registered
Activity