Как стать автором
Обновить
0
Лёха zloy и красивый @lexazloyread⁠-⁠only

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

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

Prototype, proto и оператор new

Время на прочтение3 мин
Количество просмотров83K
В этой статье я кратко в примерах объясню что такое свойства __proto__, prototype и работу оператора new в JavaScript.

Свойство __proto__


Абсолютно любой объект в JavaScript имеет свойство __proto__. Это скрытое системное свойство, и не во всех реализациях языка оно доступно пользователю.
При обращении к любому свойству объекта, оно в первую очередь ищется в самом объекте:
var obj = {ownProperty: 1};
console.log(obj.ownProperty);// 1
Но если его там нет, поиск происходит в свойстве __proto__:
obj.__proto__ = {propertyOfProto: 2};
console.log(obj.propertyOfProto);// 2
Если его нет и там, оно ищется дальше по цепочке:
obj.__proto__.__proto__ = {propertyOfProtosProto: 3};
console.log(obj.propertyOfProtosProto);// 3
Эта цепочка называется цепочкой прототипов (prototype chain).


Читать дальше →
Всего голосов 82: ↑67 и ↓15+52
Комментарии44

LESS-Mix — немного о LESS-примешаниях

Время на прочтение2 мин
Количество просмотров9.6K
Замечательный фреймворк LESS позволяет сильно упростить роботу со стилями. Одной из замечательных его возможностей есть примешания (mixins). Примешания позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств. Это напоминает использование переменных, но в отношении целых классов. Примешивания могут вести себя как функции, и принимать аргументы. Именно возможность примешаний принимать аргументы и манипулировать ими лежит в основе библеотек примешаний, таких как LESS Elements, LESS Hat, LESS Mix и компонента mixins.less в Bootstrap.



Читать дальше →
Всего голосов 19: ↑10 и ↓9+1
Комментарии12

HabraPack возвращается

Время на прочтение1 мин
Количество просмотров64K
Я надеюсь тут остались люди, которые помнят старый и ужасный на вид HabraPack? В последнее время я начал натыкаться на свои жуткие иконки на большом количестве сайтов и даже в терминалах оплаты местной компании, в разделе «Социальная сеть». Также, совсем недавно, знакомые попросили чуть обновить иконки, что я собственно и сделал.

image

Я буду обновлять иконки раз в день, большим количеством иконок. А пока можете СКАЧАТЬ и спокойно пользоваться, если вдруг найдутся люди, кому понравится.

.PSD файл прилагается.
Всего голосов 164: ↑158 и ↓6+152
Комментарии54

Свой облачный бэкенд в одну строчку кода. Обзор BaaS платформы «Backendless»

Время на прочтение8 мин
Количество просмотров49K
Привет Хабр!

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



(Осторожно: под катом много примеров простого кода. Любителям «велосипедов» читать не рекомендуется. После роста популярности данного сервиса ожидается ликвидация угрозы глобального потепления массовое сокращение депрессий от рутинных задач при написании серверной части.)
Проверим
Всего голосов 33: ↑28 и ↓5+23
Комментарии57

Поверхностный обзор javascript-enabled BaaS платформ

Время на прочтение9 мин
Количество просмотров21K
Будучи начинающим javascript разработчиком, я заинтересовался темой межплатформенной разработки мобильных приложений. В этой области, в настоящее время, балом правят Cordova (phonegap) www.phonegap.com, Appcelerator Titanium www.appcelerator.com, Mosync www.mosync.com.

Рано или поздно, после выпуска первых мини-приложений, основанных на этих системах, разработчику захочется создать что-нибудь Большое и Светлое, и хотелось бы, чтоб в этом новом приложении/сервисе были пользователи (c аватарами и проч.), push-notifications, user-generated-content и т.д… Но при этом, не хотелось бы тратить время и деньги на написание своей серверной инфраструктуры, а хотелось бы воспользоваться чем-нибудь недорогим, вплоть до бесплатного, и простым в освоении (и ещё чтоб «в облаке»!).

Как раз подобного рода тяжести и взяли на себя многочисленные Backend-as-a-Service (не путать с другими aaS). Я хочу кратко пробежаться по некоторым игрокам на этом рынке. Подчеркну, что меня в первую очередь интересовали те платформы, которые можно было бы легко и безопасно использовать с мобильным javascript (Phonegap/Titanium). Если платформа просто предоставляет REST API, этого мало, т.к. вопрос безопасности требует наличия некоторого специального ограничительного функционала: AccessControlList/permissions/masterKeys/etc. И вообще, желательно отдельный javascript SDK.

(Так как это «поверхностный обзор», я не буду подробно писать кому и зачем нужен BaaS и почему вместо всего этого не использовать старый-добрый PHP/MySQL на VPS или новый-добрый node.js в облаке)

Я начал поиск с www.programmableweb.com/apis/directory/1?apicat=Backend там перечислено почти 40 платформ, просмотрев их, я оставил для обзора те, что легко можно использовать с javascript:
Читать дальше →
Всего голосов 13: ↑11 и ↓2+9
Комментарии13

Псевдо 3D: Анимация вращения планет и других шароподобных объектов

Время на прочтение2 мин
Количество просмотров19K
Описание небольшого трюка по анимации вращения планет или других шарообразных штуковин. На написание этой статьи меня натолкнула статья Сфера из двух треугольников (стоит почитать). А сам трюк основан на весьма простом способе создания в Photoshop псевдо-объемной картинки из плоской, который описан под катом.

микродемо


Читать дальше →
Всего голосов 36: ↑23 и ↓13+10
Комментарии26

Использование разметки schema.org для логотипов организаций

Время на прочтение1 мин
Количество просмотров32K
Уровень подготовки веб-мастера: любой

Теперь наша система поддерживает разметку schema.org для логотипов организаций. Это позволит вам выбрать логотип, который будет представлять ваш сайт в результатах поиска Google.

С помощью этой разметки вы можете указать системе, где находится ваш логотип. Например, если вы – владелец сайта www.example.com, можно использовать следующую разметку элементов на странице:

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Главная</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>

Читать дальше →
Всего голосов 46: ↑43 и ↓3+40
Комментарии11

Как превратить браузер в notepad за 1 секунду

Время на прочтение1 мин
Количество просмотров137K
Открыть новую закладку, скопировать в адресную строку

data:text/html, <html contenteditable>

и нажать Enter.

Вуаля.


При клике на белом поле появляется курсор, и можно писать мысли, заметки, наблюдения. Романы, стихи…

Можно печатать написанное, можно сохранять в текстовый файл (для корректного сохранения русского языка необходимо сначала выставить правильную кодировку у страницы).
Всего голосов 554: ↑418 и ↓136+282
Комментарии154

Манипулирование URL'ами в JavaScript

Время на прочтение2 мин
Количество просмотров70K
Из года в год, сталкиваюсь с одной и той же проблемой. Как добавить, изменить или удалить параметр к некоторому адресу в строковом виде. Быстро и грязно это можно делать с помощью, например, регулярных выражений или найти каке-то готовое решение. Зачастую также может потребоваться, к примеру, подменить путь в адресе или изменить протокол с HTTP на HTTPS и т.д.

В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…
Читать дальше →
Всего голосов 70: ↑67 и ↓3+64
Комментарии50

Как сократить количество написаного кода при ajax запросах? И ассинхронная отправка файлов

Время на прочтение4 мин
Количество просмотров16K
Итак ajax запросы, всё просто, все привыкли их уже писать, но всё же как можно сократить количество написанного кода.
jquery.async.js

Сразу пример:
<form action="/" jasync>
	<input type="submit" />
</form>
форма отправляется ассинхронно

<input type="file" href="/" multiple jasync />
<div type="file" href="/" multiple jasync>Выберите файл</div>
<div href="/" jasync dropfile>Перетащите файлы и они отправятся на сервер</div>
файлы загружаюся асинхронно

<a href="/" jasync data="year=2013&month=5" class="send">отправить данные</a>
данные отправляется ассинхронно

И тут у многих наверное возник вопрос, как обрабатывать полученные данные, если форма не валидна зачем её отправлять, а если я хочу ещё отправить дополнительные параметры?
Читать дальше →
Всего голосов 41: ↑27 и ↓14+13
Комментарии19

Переносим функциональность bash в cmd.exe

Время на прочтение2 мин
Количество просмотров114K
Мне, как и многим из вас, работать с bash и стандартными утилитами Linux гораздо удобнее и приятнее, чем с cmd.exe. Однако, к сожалению, порой обстоятельства складываются так, что операционную систему выбирать не приходится. Например, в моём случае корпоративным стандартом является Windows 7. К счастью есть способ сделать жизнь линуксоида в командной строке Windows комфортнее, о нём и пойдет речь ниже.

Читать дальше →
Всего голосов 94: ↑83 и ↓11+72
Комментарии103

MySQL On air. Мониторим SQL запросы

Время на прочтение4 мин
Количество просмотров39K
image
Разбираясь как работает та или иная CMS приходится использовать различные инструменты, облегчающие работу.
Наиболее интересная тема — это работа с баз(ой|ами) данных. Естественно для изучения запросов и результатов запросов нужно использовать что-то универсальное. Что-то, что будет работать стабильно как с известным движком, так и с самописной системой.
Предположим у вас оказалась система управления контентом и вам необходимо посмотреть как реализовано добавление новых пользователей или смена паролей.

Большинство инструментов позволяющих мониторить работу с БД являются платными [раз, два]. Я хотел что-то более легкое и удобное, поэтому выбрал mysql-proxy. Хотя возможности утилиты гораздо шире чем мне требуется, я опишу лишь основное. Работает как под Windows, так и под Unix системами.
Как я это использую?
Всего голосов 38: ↑33 и ↓5+28
Комментарии31

Алгоритм Эллера для генерации лабиринтов

Время на прочтение5 мин
Количество просмотров151K
Это топик-перевод статьи Eller's Algorithm. В ней рассказывается о способе программной генерации лабиринтов. Дальнейшее повествование идет от лица автора.

 __ __ __ __ __ __ __ __ __ __ __ __ __ __ __  
|__   |__       __ __|__   |   __|  |  |  |  |
|__   |__   |__|   __ __|   __ __      |     |
|        |  |  |     |  |__      |__|  |  |  |
|__|__|  |  |   __|   __|__   |   __|__|  |__|
|   __|  |     |__ __ __|  |  |__|  |     |  |
|  |  |  |  |__|  |__   |  |   __|__ __|  |  |
|  |__    __    __ __    __|  |   __   |  |  |
|  |  |  |  |      __|  |   __|  |  |__|  |  |
|  |     |     |__   |  |  |  |  |  |__    __|
|  |  |__|__|__ __|  |     |  |  |      __|  |
|__ __|  |  |  |__   |__|   __|     |   __ __|
|   __|  |   __|__      |__   |__|  |__    __|
|  |  |     |  |     |__|  |   __    __|   __|
|   __|  |__ __|__|      __|  |  |     |  |  |
|   __ __   |      __|__|  |__   |  |  |__|  |
|__ __ __|__ __|__ __ __ __ __|__|__|__ __ __|


Алгоритм Эллера позволяет создавать лабиринты, имеющие только один путь между двумя точками. Сам по себе алгоритм очень быстр и использует память эффективнее, чем другие популярные алгоритмы (такие как Prim и Kruskal), требуя памяти пропорционально числу строк. Это позволяет создавать лабиринты большого размера при ограниченных размерах памяти.

Читать дальше →
Всего голосов 122: ↑117 и ↓5+112
Комментарии35

AppFog и Django. С чего начать?

Время на прочтение4 мин
Количество просмотров20K
Доброго времени суток, уважаемые хабровчане! Недавно я заинтересовался Python и, в частности, веб-фреймворком Django. После ознакомления с основными возможностями захотелось найти бесплатный хостинг с поддержкой Django. Каюсь, в тот момент напрочь забыл про GAE, но, почитав вчера про оный, понял, что выбор получился ничуть не хуже. Итак, встречайте, AppFog! (осторожно, под катом картинки!)
Читать дальше →
Всего голосов 27: ↑19 и ↓8+11
Комментарии19

Управление картинками и другим бинарным содержимым вашего веб-проекта

Время на прочтение4 мин
Количество просмотров12K
image
Мы, в компании XIAG, в разных проектах постоянно решаем одну и ту же задачу: как хранить и показывать бинарные пользовательские данные. Это могут быть логотипы компаний, PDF файлы с описанием вакансий или приветственное видео. Причем это содержание нужно показывать на страницах сайта самым разнообразным способом: лого должно быть нужного размера, PDF — в виде маленькой превью-картинки, а из видео нужно показать пару стоп-кадров.

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

Познакомьтесь с веб-сервисом Barberry (https://github.com/Magomogo/Barberry), который мы успешно используем уже около года. Суть сервиса в том, что он хранит оригиналы загруженных документов и способен по-разному отдавать их, конвертируя на лету.
Читать дальше →
Всего голосов 30: ↑26 и ↓4+22
Комментарии33

Полезные техники HTML, CSS и JavaScript

Время на прочтение8 мин
Количество просмотров101K
Техника – это способ справиться с заданием, и у нас, разработчиков и дизайнеров фронтэнда, этих способов бывает достаточно много. При это, будучи погруженными в рутинную работу, мы порой не всегда замечаем как стремительно меняется окружающая нас сфера. В период с 2002 по 2010 годы сообщество фронтэнд-разработчиков буквально покрывалось язвами избыточного кода и ресурсов, от которых страдали и работа сайтов, и удобство их использования. Чтобы с этим справиться, мы придумали уйму хаков, трюков и уловок под кодовым названием «техника». Мы по-прежнему продолжаем выполнять поставленные перед нами задания, просто используем не самые эффективные способы.



Оборачиваясь назад, отметим, что в последние несколько лет установились новые, лучшие, стандарты и способы их применения, позволяя нам создавать более продвинутые «техники». Этот новый мир, открытый перед нами, называется «modern web». Web 2.0, которым восхищались в свое время, сегодня для нас стал запутанным и застойным. С одной стороны нет сомнений в том, что подобная судьба постигнет и то, что мы называем «modern web». С другой — пока что мы можем использовать этот термин и злоупотреблять им сколько угодно, пока понимаем, что он означает.



В 2010 появился стандарт HTML5, обеспечивающий совершенно новую, полустандартизованную веб-среду. Такие браузеры, как Opera, Firefox, Chrome и Safari приняли нововведения, и их разработчики вышли за пределы реализации стандартов и изучения интерфейса программирования приложений. Чтобы представить себе, насколько автономны эти браузеры, можно ознакомиться с отличной наглядной демонстрацией поддержки HTML5 на www.html5readiness.com.
Читать дальше →
Всего голосов 110: ↑98 и ↓12+86
Комментарии37

На пути к созданию безопасного веб-ресурса. Часть 1 — серверное ПО

Время на прочтение7 мин
Количество просмотров99K
Я уже довольно долгое время хочу формализовать все свои мысли, опыт, ежедневно применяемый на практике, и многое другое в одном месте и предоставить их общественности. Уверен, многим этот материал будет полезен. Он посвящен различным моментам в конфигурации серверного ПО Linux и безопасным подходам к созданию сайтов/приложений на php (все же это до сих пор одна из самых популярных связок, хоть её успешно и подвигают другие технологии. Но советы так же легко применимы и к веб-ресурсам на других технологиях).

Т.е. речь идет о типичной ситуации. Проект (стартап), купили под него сервер и разворачиваем на нем сайт. Бизнесу не нужно тратить лишних денег на сервера (поэтому будут выбраны наиболее производительные связки ПО), а так же нужно, чтобы все было безопасно, при чем бесплатно :)
Много текста. По-другому никак
Всего голосов 170: ↑159 и ↓11+148
Комментарии47

Упрощение жизни разработчика с помощью сторонних сервисов

Время на прочтение3 мин
Количество просмотров9.6K
Представляю скромную подборку сервисов, которые ускоряют экономят время разработчику и/или ресурсы сервера. Здесь не будет подробных обзоров, только список с кратким описанием и ссылками. Также, я не претендую на свежесть ресурсов, поэтому кому-то перечисленный список покажется слишком очевидным и известным всем.

Буду рад включить ссылки и описания, предложенные в комментариях.

Google Fusion Tables


Позволяет развернуть реляционную базу данных на серверах гугла с обращениями с помощью библиотеки Visualization или JSONP.
Статья на хабре: habrahabr.ru/blogs/webdev/116035
Ссылка: www.google.com/fusiontables/Home

Минусы: количество обращений в секунду равно пяти с одно IP адреса и столько же при обращении с аккаунта (используя авторизацию). То есть развернуть сайт с хорошей посещаемостью и работать с сервисом с помощью сервера не получится. Стоимость увеличения лимита — от 10 тысяч долларов в год (см. Maps API Premier). Кроме того, отсутствуют джойны, которые заменяются представлениями (view), создаваемыми через интерфейс.
Читать дальше →
Всего голосов 170: ↑156 и ↓14+142
Комментарии41

Делаем превью сайтов в стиле Yandex Браузера

Время на прочтение5 мин
Количество просмотров24K
yandex browserПрошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

Читать дальше →
Всего голосов 52: ↑44 и ↓8+36
Комментарии28

Как сделать 3D шутер на JavaScript за пару дней

Время на прочтение3 мин
Количество просмотров84K
imageВ субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?
Читать дальше →
Всего голосов 102: ↑98 и ↓4+94
Комментарии65

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Зарегистрирован
Активность