Что плохо на примере jq.
Рассмотрим на задаче и её реализации: Есть x элементов, по клику на элемент он должен поменять состояние. Кликов на элементе может быть, и чаще всего будет, не одни.
Читать полностью »
Рубрика «javascript» - 537
Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript
2013-01-23 в 14:55, admin, рубрики: html, html 5, javascript, javascript html5, Веб-разработка, Кнопки социальных сетей, метки: html 5, javascript, javascript html5, Кнопки социальных сетейДавно уже планировал установить на свой сайт кнопки социальных сетей. Наконец нашел время для этого, проблема усугублялась тем, что я сам не являюсь пользователем социальных сетей, хотя против ничего не имею.
Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.
В общем, ознакомившись с темой, решил взять кнопки в первоисточнике:Читать полностью »
Yota-script или экономим c Yota кроссплатформенно
2013-01-22 в 19:06, admin, рубрики: javascript, LTE, phantomjs, Yota, метки: javascript, phantomjs, Yota Доброго времени суток, уважаемые читатели.
Пару месяцев назад и до нашего города добралась цивилизация в виде Yota. После беглого осмотра личного кабинета и выяснения что тарификация работает с точностью до минуты появился автоматизационный зуд :) Тут еще подвернулся топик Экономим затраты на интернет от Yota и понеслась. Главная проблема которую я хотел решить — позволить управлять своим тарифом из командной строки (к примеру с помощью crontab) кроссплатформенно т.к. сам давно живу под Arch Linux в качестве основной операционной системы.
Читать полностью »
Раскрываем потенциал HTML 5 Canvas в играх
2013-01-22 в 14:06, admin, рубрики: canvas, html 5, javascript, игры, оптимизация, метки: Canvas, html 5, игры, оптимизация 
HTML 5 в браузерах и HTML 5 для Windows 8 Metro в настоящее время серьезные кандидаты для разработки современных игр.
Используя Canvas, вы имеете доступ к аппаратным ускорениям пространства, и если использовать некоторые советы и приемы, то сможете достигнуть великолепных 60 кадров в секунду.
Это действительно важно в играх, потому что чем плавнее происходит игра, тем лучше ощущения игрока.
Целью данной статьи является показать вам некоторые трюки, которые помогут получить максимальную мощность от HTML 5 Canvas.
В следующих главах Я буду использовать примеры, чтобы продемонстрировать концепции о которых Я хочу рассказать. Образецом будет 2D туннельный эффект, который я написал для Coding4Fun и представил на TechDays 2012 году во Франции (http://video.fr.msn.com/watch/video/techdays-2012-session-technique-coding4fun/zqy7cm8l).
Этот эффект в основном вдохновлен кодом Commodore Amiga, который я написал, когда был молодым демомейкером в 80-х.
Используется только canvas и JavaScript (когда-то исходный код был только ассемблере 68000):
Показ масштабируемых изображений
2013-01-22 в 7:25, admin, рубрики: HabrAjax, javascript, Веб-разработка, интерфейсы, просмотр изображений, метки: HabrAjax, просмотр изображенийТрадиционная работа HTML-страниц с картинками заключается в раскрывании картинок вместо этих страниц. Пришла пора прекращать это неудобство на отдельно взятом сайте. Ссылки — хорошо, но удобный просмотр — лучше.
Что такое удобный просмотр? Пример "лайтбоксов" разных показал, что лучше открыть псевдоокно просмотра внутри документа, не удаляя документ. Но при чтении статей этот подход не очень удобен. Мы не видим контекст документа. Получается, что видна или картинка, или документ. Лучше, если картинка не закрывает текст, как организовано, например, в скрипте Dollchan Extension Tools (подсказали здесь), где просмотр картинок занимает малую часть общей функциональности просмотра «имаджбордов» — примерно таких же текстово-картиночных потоков статей. Сделаем и мы контролы управления картинками, добавив кое-что своё.
Читать полностью »
Lifehack для Same-Origin-Policy; Google Chrome и другие
2013-01-21 в 21:51, admin, рубрики: fiddler, Google Chrome, google chrome extensions, javascript, Веб-разработка, метки: fiddler, google chrome extensions, javascript 
Задача:
— есть REST-сервер
— есть одно страничное приложение (HTML/CSS/Javascript) которое берет данные с сервера через XMLHttpRequest
— нужно разработать новую фичу
Тренды фронтэнда. Javascript APIs для мобильных устройств
2013-01-21 в 8:50, admin, рубрики: api, browser, Firefox, html, javascript, JS, mobile, mozilla, w3c, Веб-разработка, Мобильный веб, метки: api, browser, firefox, html, mobile, mozilla, w3c, фронтендПрезентация: http://goo.gl/2CkWb.
Примеры: http://goo.gl/5jv4i.
Исходники: http://goo.gl/YYj0R.
В настоящее время нельзя не заметить общую тенденцию к миграции сервисов и приложений в веб, что подкрепляется появлением множества онлайн-сервисов, которые претендуют называться однозначно можно назвать веб-приложениями. Как следствие, теряют популярность standalone-приложения, функционал которых не предусматривает связи с массовыми веб-сервисами. Таким приложением приходится либо видоизменяться, добавляя в себя функционал для интеграции с внешним миром, либо мигрировать в веб.
Читать полностью »
Не надо давать обещания, или Promises наоборот
2013-01-21 в 8:01, admin, рубрики: control flow, javascript, node.js, метки: control flow, javascript, node.jsКаждый программист, начинающий разрабатывать под Node.js, встаёт перед выбором стратегии организации асинхронного кода в проекте. В то время, как в небольших системных утилитах поддерживать гигиену асинхронного кода достаточно просто, при росте массы кода в проекте решение этой задачи начинает требовать введения дополнительного, так называемого control flow средства.
В этой статье будет рассмотрена небольшая control flow библиотека «Flowy», являющаяся развитием идей проекта Step Тима Касвелла, и ядро которой базируется на концепциях CommonJS Promises, а также приведены аргументы, почему же Promises — это так неудобно.
Knockoutjs. «Растим» дерево
2013-01-21 в 7:25, admin, рубрики: javascript, knockout, knockoutjs, mvvm, tree, treeview, Веб-разработка, метки: javascript, knockout, knockoutjs, mvvm, tree, treeview 
Судя по частоте появления статей, KnockoutJS набирает популярность на Хабре. Внесу и я свою лепту. Хочу осветить тему нестандартных для HTML элементов управления и «дерева» в частности. Под деревом здесь понимается аналог элемента управления TreeView. Статья подразумевает, что читатель уже знаком с KnockoutJS на базовом уровне. Публикация может рассматриваться, как пособие для изучения KnockoutJS. С другой стороны, надеюсь, и опытные пользователи KnockoutJS смогут почерпнуть для себя что-то новое.
Читать полностью »
Трюк:
Внутрь элемента засовываем пустой фрейм с position:absolute, придаём элементу position:relative;
И отслеживаем frame.onresize:
Тест-Код:
<div id="Test" style="position:relative;border:red solid 1px;width:200px;height:100px;">
<iframe name="frame" width=100% height=100% style="position:absolute;z-index:-1"></iframe>
Тут контент ...
</div>
<script type="text/javascript">
frame.onresize = function(){
alert('Размеры div #Test изменены.');
};
setTimeout(function(){
document.getElementById("Test").style.width='100px';
},3000)
</script>