Обновить
0
0
G0RIK@G0RIK

Пользователь

Отправить сообщение

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

Время на прочтение2 мин
Охват и читатели4.6K
В 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;
}

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

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

Время на прочтение9 мин
Охват и читатели80K

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


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

«Это было столь хорошо, что заставило меня изменить свое мнение..» — Эрих Шмидт, первоначально не желающий принимать идею Google Chrome.
Читать дальше →

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

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

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

Создание спрайтового движка

Время на прочтение4 мин
Охват и читатели10K
Когда то давно, в своем дебютном посте, я обещал рассказать о создании спрайтовой анимации с сортировкой по глубине… Ну, обещания нужно сдерживать:)
Читать дальше →

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

Время на прочтение3 мин
Охват и читатели364K

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

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


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

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

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

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

Form builder


Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
image
Читать дальше →

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

Время на прочтение3 мин
Охват и читатели17K
Прочитав пост о псевдо 3D эффекте, стало интересно реализовать некий аналог для использования в веб приложениях. За результатом прошу под кат
Читать дальше →

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

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

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

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


Приступим


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

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


Пока я буду рассказывать, как появился HTML5, помните эти слова.
Читать дальше →

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

Время на прочтение2 мин
Охват и читатели126K
Доброго времени суток уважаемые хабраюзеры. На сегодняшний день 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 используются как ключевые атрибуты при передачи необходимых параметров.

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

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

Время на прочтение5 мин
Охват и читатели16K
Это продолжение перевода «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
  • Итак, нравится ли нам это?

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

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

Время на прочтение2 мин
Охват и читатели6.1K

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

Плохая новость в том, что вы все равно не сможете кешировать mp3 файлы, используя кеш приложения и просто загружать их используя XmlHttpRequest. Safari под iOS 6 будет кешировать mp3 файлы, но потом молча откажется воспроизводить их (очень полезно!)
Но не все потеряно...

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

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

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

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

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

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

Время на прочтение3 мин
Охват и читатели21K
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.

image

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

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

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

Время на прочтение4 мин
Охват и читатели30K

Пора


Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 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);
}

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

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

Время на прочтение6 мин
Охват и читатели155K


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

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

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

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



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

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

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

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

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


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

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

Время на прочтение1 мин
Охват и читатели24K


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

Сайт проекта | Ratchet на GitHub | Обсуждения в Google Groups | Twitter
Читать дальше →

Большая подборка уроков по созданию CSS-кнопок

Время на прочтение2 мин
Охват и читатели84K
В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]


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

Как сделать рабочий стол, или аутсорсинг решает

Время на прочтение3 мин
Охват и читатели275K
Хабраюзер любит темы про домашние рабочие места, поэтому покажу и я свое, свежеиспеченное.



Топик отношу к DIY – потому как все здесь сделано для меня, благодаря мне и для меня. БОльшая часть «работ» была отдана профессионалам, и это не потому что я «такой уж рукожопый» (хотя и это присутствует), а потому что я хочу пользоваться вещами, удовлетворяющими моим требованиям. А сделать такие самостоятельно – будет очень долго, нервно, муторно => дорого (да и не факт, что получится).

Собственно говоря, руководствуясь этим правилом в последнем ремонте ничего мною лично и не делалось.☺
Читать дальше →

Информация

В рейтинге
Не участвует
Откуда
Минск, Минская обл., Беларусь
Дата рождения
Зарегистрирован
Активность