Search
Write a publication
Pull to refresh
51
0
Глеб Арестов @arestov

User

Send message

Как работают таймеры в JavaScript

Reading time2 min
Views18K
Примечание: ниже перевод заметки John Resig «How JavaScript Timers Work», в которой автор jQuery ясно и подробно излагает тонкости работы различных методов отложенного исполнения функций. Мои комментарии по клиентской производительности далее курсивом.

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

  • var id = setTimeout(fn, delay); — создает единичный таймер, срабатывание которого выливается в вызов определенной функции после указанной задержки. Данный метод возвращает уникальный ID, с помощью которого можно в дальнейшем отменить таймер.
  • var id = setInterval(fn, delay); — похож на предыдущий метод setTimeout, но совершает вызовы заданной функции постоянно (каждый раз с заданной задержкой), пока не будет отменен.
  • clearInterval(id);, clearTimeout(id); — принимают в качестве параметр ID таймера (возвращаемый двумя предыдущими методами) и предотвращают дальнейшие вызовы таймера.


Для того чтобы уяснить внутренние аспекты работы таймеров, стоит учесть одну важную деталь, которую стоит осветить: задержка при выполнении таймера не гарантируется. Так как весь JavaScript исполняется в браузере в один поток, то асинхронные события (например, клики мышкой или таймеры) запускаются только по возникновению «окна» в этом основном потоке (обработчики событий и вызываемые функции, фактически, «встраиваются» в основной поток выполнения, подробнее об организации тяжелых вычислений). Лучше всего это можно продемонстрировать с помощью следующей диаграммы:

Схема работы таймеров в JavaScript

Рисунок 1. Схема работы таймеров в JavaScript

читать дальше на webo.in →

Web-типографика — четыре золотых совета

Reading time3 min
Views4.2K
Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)

Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.

Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.


Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.

Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.
Читать дальше →

Кто из современных программистов способен решить задачи низкого уровня или Задачки Для Программистов

Reading time1 min
Views3.3K
Навеяно историей об одном байте

А способны ли современные программисты на создание кода как искусства? Попробуйте решить эти задачки :)
Читать дальше →

Текстура для веб-дизайна

Reading time1 min
Views13K
Последние время мне часто приходится искать разнообразные текстуры. Поэтому я решил опубликовать несколько сайтов с большим выбором текстур.

Первым в этом списке я выбрал http://www.textureking.com/ — красивый и понятный дизайн сайта, а также хороший выбор текстур которые разделены на 14 категорий.

Следущим будет http://www.cgtextures.com/ — огромное количество текстур и их категорий (вожможно он и получше textureking :), вам решать.
Читать дальше →

FC-TrackBar 0.4.1 — новое начало

Reading time2 min
Views2.8K

Заглянем в прошлое

Не так давно в статьях раздела JavaScript были представлены широкой публике трекбары:



Проект неожиданно получил продолжение. К разработке присоединились камрады abarmot и 1602, а активное обсуждение привело к улучшению текущего и реализации нового функционала. Поэтому, появилось желание сделать проекту свой собственный «дом», где он будет жить и развиваться, что было успешно реализовано на sourceforge.net. Теперь вместо того, чтобы писать статью на каждое изменение в трекбарах автор может спокойно обновлять архивы и описания, а вы самостоятельно скачивать последние версии.

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

Новый движок JavaScript от Apple

Reading time1 min
Views2.3K
Несколько дней назад разработчики Safari анонсировали новый движок JavaScript — SquirrelFish (БелкоРыба, или для большей русско–звучности Рыба–Белка).

SquirrelFish значительно опережает по производительности JS машины, которые используется в WebKit 3.0 и 3.1 (порядка 60% быстрее). Более того, он на 46% быстрее, чем SpiderMonkey, движок используемый Mozilla в текущих версиях FireFox, и на 52% быстрее Tamarin, который используется в Adobe Flash 9 и портируется для использования в FireFox.

David Mandelin написал очень интересный пост, анализирующий то, за счет чего SquirrelFish добился таких результатов. Коротко — используя технологии не очень стандартные для «классического» интерпретатора (в особенности, построив интерпретатор с использованием регистров, а не стэка и прямую адресацию потоков).

По следам этого анализа появились даже предположения, что Apple расстанется с AppleScript как средой скриптования в Mac OS и полностью перейдет на JavaScript.

Принципы «ненавязчивой» рекламы

Reading time1 min
Views851
Сразу хочу оговориться, о чем пойдет речь в данной статье. Я собираюсь изложить свои представления о том, как стоит организовывать размещение рекламы на веб-страницах для того, чтобы доставить посетителям сайтов минимум неудобств. Поскольку, большинство выводов последуют из анализа техник «ненавязчивого» JavaScript, то статья озаглавлена именно таким образом. Я не собираюсь анализировать, в каких случаях пользователи видят банеры лучше, в каких — выше их кликабельность, и когда банеры достигают целевой аудитории. Я просто расскажу о клиентской оптимизации использовании рекламы на сайтах.

Как было продемонстрировано в исследованиях этого и прошлого годов, большая часть задержек при загрузке страницы у обычного пользователя приходится на долю рекламы, подключаемой, в основном, через JavaScript (cредний размер веб-страницы увеличился втрое с 2003 года и цена банерной рекламы для клиентской производительности). Далее я хочу рассмотреть основные типы использования рекламы на сайтах и предложить способы (в большинстве своем опробованные на практике) для разгона ее загрузки.

читать дальше на webo.in →

12 простых правил, чтобы не деградировать во фрилансе

Reading time3 min
Views20K
Очень часто фриланс обвиняют в том, что он является тупиком в развитии специалиста (при этом часто в пример ставятся именно фрилансеры-программисты).

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

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

Вежливое обращение на сайтах

Reading time1 min
Views5.4K
Одна из наиболее распространённых ошибок, встречаемых на работающих сайтах, в макетах дизайнов и в документах, заключается в злоупотреблении прописной буквой в вежливом обращении «Вы».

На самом деле, всё очень просто, и на сей счёт есть чёткое устоявшееся правило.
Читать дальше →

Рабочая библиотека веб-типографа и контент-менеджера

Reading time4 min
Views7.6K
Несмотря на то, что основной инструмент работы веб-типографа и контент-менеджера — это Интернет, пока ещё не весь корпус полезных для нас материалов переведён в электронную форму. Поэтому я решил перечислить те бумажные книги, которые стоят у меня на отдельной полке, и на которые не успевает оседать пыль из-за постоянного их использования.

Список книг будет разбит на группы по темам, и каждая из них — на группы «обязательно прочесть и иметь» и «можно прочесть и иметь» (это выделение безусловно субъективно, так что спорить насчёт него не буду точно). В принципе, большинство книг есть в широкой продаже, в том числе и в крупнейших российских интернет-магазинах. Некоторые есть в отсканированном виде и их можно найти в Интернете.

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


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

Типографика в движении

Reading time2 min
Views6.2K
Чтобы не нарушать пятничной расслабленности, позволил себе немного развлечься просмотром видеороликов, непосредственно связанных с типографикой.

Пока что удалось обнаружить два вида интересных с точки зрения типографики видеороликов:
  • титры в кино (movie title sequence),
  • кинетическая типографика (kinetic typography).
Под хабракатом приведу несколько роликов-иллюстраций и дам ссылки на дальнейшее копательство в YouTube.

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

А сколько денег Америка украла у тебя сегодня?

Reading time1 min
Views770
Средняя американская семья обкрадывает мир на $7200 ежегодно. К такому выводу пришел автор книги Empire of Debt Билл Боннер. Боннер просто взял размер торгового дефицита США и поделил его на количество домохозяйств.

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

Дело в том, что Америка и американцы уже давным-давно покупают все в кредит. Даже война в Ираке ведется в кредит, через увеличение госдолга. У Боннера нет никакого сомнения, что эти долги никогда не будут выплачены в полной мере, ибо это просто невозможно. Ведь соотношение частных долгов и государственных, плюс ничем не обеспеченные пенсионные и медицинские обязательства, составляют более $100,000 на каждого американца, включая грудных младенцев.

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

Источник — Средняя американская семья обкрадывает мир на $7200 ежегодно., Американская статистика – врем бесплатно, правда за дополнительную плату.

Неотложный пункт добрых дел

Reading time1 min
Views1.1K
В связи с недостатком времени для написания топиков в течение ближайшей недели или даже двух, открывается экспериментальный типографический «Неотложный пункт добрых дел». Предлагаемая схема НПДД очень проста, и напоминает лёбёдёвский «Линч». Только у Лебедева линч недобрый, а в НПДД все очень добрые.

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

Независимо от качества сайта, гарантируется отсутствие комментариев типа «ваш сайт — говно». Совсем наоборот, работник НПДД (на иллюстрации изображён Колобком) укажет на основные ошибки (если таковые есть) или предложит несложные способы улучшить удобочитаемость сайта.

Пожалуйста, кидайте ссылки именно на ваши сайты, если вам интересна помощь НПДД (а не на всё подряд) — Колобок не резиновый. Волонтёрство в роли Колобка также приветствуется!

Использование пространств имен для организации JavaScript-кода

Reading time3 min
Views16K
На текущий момент большинство web-приложений состоят из большого числа библиотек, виджетов и сниппетов из многих и многих источников. Следует помнить, что код других разработчиков может взаимодействовать с вашим кодом в случае, если происходит подключение обоих их на одной странице. А если вы оперируете глобальными переменными, то это и вовсе небезопасно.
Читать дальше →

Пространство имён в Javascript-коде 2

Reading time1 min
Views8.1K
Прочитав заметку об использовании пространств имён в Javascript коде мне захотелось поделиться подходом, который использую я. Он изобретён не мной, конечно, но, возможно кто-то о нём не знает. Этот подход отличается от предложенных в той статье тем, что позволяет кроме функций и данных видимых снаружи, также определять данные и функции локальные для пространства имен и невидимые снаружи.

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

Пряник для пользователей правильных браузеров

Reading time3 min
Views2.3K
Объясняя однажды преимущества таких браузеров, как firefox и opera перед всеми любимым IE, я осознал насколько не очевидны их преимущества при рассказе о них.

  • Табы большинство пользователей воспринимают как нечто заумное — они привыкли переключаться между окнами, ища нужное внизу на панельке. У многих она для этого специально делается двойной а то и тройной ширины.
  • Обработка полупрозрачных PNG для нормальных людей звучит вообще как страшное шаманское заклинание. И конечным потребителям, в итоге, глубоко плевать, насколько на сайте сделана честная полупрозрачность и на скольких костылях она держится. Это целиком проблемы вебмастеров. Юзерам о них можно даже не упоминать.
  • CSS 3 уровня непонятен пользователям точно так-же как и полупрозрачность в картинках — они с этим не сталкиваются и им все равно.
  • Проверка орфографии понятна уже многим. Несмотря на то, что обычно в качестве аргумента приводят проверку орфографии в ворде, расстановку им заглавных букв и прочие мелочи, простые пользователи даже сами замечают различия между IE и другими браузерами — у меня было несколько вопросов, мол почему дома и на-работе ВКонтакт выглядит по-разному.
  • Быстродействие особенно актуально для пользователей рискнувших перейти на IE7 — разница в скорости ощущается невооруженным взглядом. Обычно такие пользователи быстро откатываются на IE6, но достаточно серьезным аргументов для них будет упоминание о дате выпуска IE6 — многих это подталкивает к переходу на более новые браузеры.

Во всем этом списке нет ни одного железного аргумента для простого пользователя, чтобы уйти с IE6. Для разработчиков, стремящихся использовать новые возможности браузеров, это большая проблема. Но кого она волнует кроме них? Поэтому проводятся всевозможные акции из серии «Заблокируй для IE доступ на свой сайт», которые приносят какой-то эффект, но этого явно недостаточно. Я хочу предложить еще один способ для ослабления позиций «самого любимого» браузера, который кардинально отличается от подобных акций.


Читать дальше на хабре

Подгружаемые шрифты в HTML — мечта или реальность?

Reading time2 min
Views4K
Многие согласятся, что стандартных Arial, Times, Verdana и т.д. зачастую не хватает.
Тут на помощь вроде как должен прийти css правило @font-face, которое позволяет использовать свой шрифт. Но к сожалению нормальной поддержки браузерами нет. В качестве теста можно использовать http://www.alistapart.com/d/cssatten/stef.html.
Реалии поддержки @font-face и возможные альтернативы

Кастомайзим INPUT FILE.

Reading time3 min
Views68
Когда-то давно видел подобное действо на хабре ( спасибо elfiki за линк habrahabr.ru/blog/la_france/24341.html ), но, недавно, пришлось столкнуться с этим самому. Старое решение мне не понравилось количеством javascript, решил попробовать реализовать, по возможности, с минимальным JS. Пара просмотренных воркэраундов не подошла, так как задать размер в пикселях для input file мне не удалось (если это вообще реально), а даже при фиксированном шрифте в разных браузерах «пиксели», почему-то, «разные» получились. Особенно ИЕ удивил, уместив в DIV размером 400px два дива размером по 200 и еще половину третьего.

в итоге получилось примерно такое решение:



Итого, мое доработанное, может кому пригодится.

продолжение дальше

Забудем на минутку про canvas

Reading time2 min
Views2K
Как то так получилось, что рассматривая различные browser demo последних лет, не мог не заметить, что все повально стали использовать canvas.
Вот и недавно, просматривая хабр, наткнулся на wolf3d на джаваскрипте через canvas (от того же автора что и mario). (в ссылке буквы c и p русские, но это не я такой, а хабр)
А ведь на самом деле многие эффекты можно сделать без использования этого замечательного тэга.
А ещё, используя эти идеи, в некоторых случаях можно отказаться от флэша, тем более что, в отличии от канваса, это всё прекрасно работает в IE (доля рынка которого, пока ещё, очень велика).

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

Information

Rating
Does not participate
Date of birth
Registered
Activity