javascript

Консоль JavaScript: выводим отладку на новый уровень

Как веб-разработчик, вы должны быть знакомы с console.log() . Это наиболее простой подход к устранению любых неполадок путем регистрации значений переменных в инструментах разработчика. Но консольный API – это гораздо больше, он предоставляет множество других методов, которые могут помочь вам в отладке.

Список всех методов консоли, которые описаны в этой статье:

  1. console.log()
  2. console.clear()
  3. console.warn()
  4. console.table()
  5. console.dir()
  6. console.group и console .groupCollapsed()
  7. console.count и console.countReset()
  8. console.assert()
  9. Console.error()
  10. console.time и console.timeEnd()
  11. console.trace()

Подробнее

Lazy Load – отложенная загрузка изображений

Одной из самых быстрой и простой оптимизации производительности сайта является уменьшение времени загрузки изображений. Минимизацию изображений можно сделать с помощью таких инструментов, как ImageOptim и TinyPNG, использование URI и спрайтов данных, а также использование отложенной загрузки изображений (lazyload).

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы загружаются по мере необходимости (асинхронно), а не сразу вместе с запрашиваемой страницей.

Когда браузер «видит» у элемента атрибут src, то делает запрос по указанному в нём адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

Подробнее

Вывод последнего твита на сайт

В последнее время становится очень популярным использование социальных сетей и их возможностей применительно к сайтам – вывод последних событий, новостей, комментариев, опросов и пр. В данной статье будет рассмотрено 2 способа вывода последних опубликованных сообщений из Твиттера на сайт – с помощью Javascript и с помощью PHP.

 

Вывод последнего твита с помощью Javascript

Добавление виджета

Для того, чтобы добавить ленту твиттера на сайт необходимо вставить код виджета. Для этого на странице “Виджеты” https://twitter.com/settings/widgets вашего твиттер-аккаунта надо создать новый виджет. Тут же можно выполнить и первоначальную настройку (установить параметры отображения твиттов, указать высоту, выбрать тему и пр.) и скопировать код виджета.

 

Код состоит из двух элементов: анкор с атрибутами (настройками виджета) и javascript-кода, который подгружает библиотеку твиттера.

 

Подробнее

Velocity.js – новый аннимационный плагин javascript

Velocity – это jQuery плагин, который повторяет $.animate(), обеспечивая более высокую производительность, делая Velocity даже быстрее анимации в CSS, также включает новые возможности по улучшению аннимации.

 

velocity

Совместимость

Velocity работает и в Internet Explorer 8 и в Android 2.3. Velocity использует функцию $.queue() из jQuery, и таким образом легко взаимодействует с функциями jQuery – $.animate(), $.fade(), и $.delay(). Поскольку синтаксис Velocity похож с $.animate(), то ни один участок вашего когда не нуждается в изменении.

Подробнее

CSS или JS анимация – что быстрее? Velocity.js!

Как получилось так, что Javascript анимация быстрее и лучше CSS переходов? И как стало возможным, что релизы медиа-мобильных сайтов у Adobe и Google конкурируют с нативными приложениями?

 

В этой статье изложен детальный разбор, почему библиотеки Javascript DOM анимации, такие как Velocity.js и GSAP более производительные, чем jQuery и CSS анимация.

 

Щелкните по картинке и оцените возможности Javascript:

 

velo2

 

jQuery

Начнем с основ: Javascript и jQuery были ложно объединены. Javascript анимация быстрая. jQuery замедляет анимацию . Все из-за того, что анимация не была целью проекта jQuery и в нем не заложен мощный производительный движок, хотя jQuery является достаточно мощной библиотекой:

 

Подробнее

Как скрыть E-mail на сайте

Как скрыть emailУ вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.

 

Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.

Подробнее

Как отметить все чекбоксы

Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.

 

С помощью данного кода можно:

1. Отметить любое количество чекбоксов.

2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.

3. Отметить и снять чекбоксы в один клик мыши.


Подробнее

Плавная прокрутка страницы вверх для сайта

Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.

Демо можно посмотреть тут или тут http://jsfiddle.net/x404/K5enj/, или промотайте эту страницу ниже.

 

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы вверх при нажатии на кнопку прокрутки.

 

Итак начнем:

Подробнее