Ember.js — как узнать время создания DOM дерева?

Очень часто при создании приложения на Ember.js возникает необходимость держать под контролем время генерации DOM дерева. Существует довольно простой способ выводить это время в консоли как для всего приложения так и для отдельных View.  Читать далее

Рубрика: JavaScript/JQuery | Метки: | Добавить комментарий

vw, vh и vmin — единицы измерения для CSS3

В CSS3 появились новые единицы измерения, зависящие от размеров окна браузера.

  • 1vw — 1% ширины окна
  • 1vh — 1% высоты окна
  • 1vmin — 1vw или 1vh, в зависимости от того, что меньше

На момент написания статьи поддерживается почти всеми современными браузерами. Проверить можно тут.

Рубрика: HTML/CSS | Метки: , , , | Добавить комментарий

Настраиваем PhpStorm (WebStorm) для быстрого и удобного доступа к API jQuery

Быстрый доступ к jQuery API может очень сильно облегчить жизнь разработчику. Благодаря JetBrains стало возможно просматривать API прямо в IDE, даже offline. Все что для этого нужно — это просто 1 раз загрузить документацию jQuery в свой IDE, а затем навести на неизвестный метод курсор и нажать Ctrl+Q.

jQuery API

Читать далее

Рубрика: JavaScript/JQuery | Метки: , , , | 1 комментарий

HTML5 Web Storage

С появлением HTML5 мы получили 2 новых объекта для хранения локальных данных. Это localStorage и sessionStorage. Они работают практически идентично, с той лишь разницей, что в первом — данные хранятся всегда, а во втором — данные удаляются после потери сессии (например закрытия браузера). Сразу же возникает естественный вопрос — зачем они нужны, ведь есть Cookies? Читать далее

Рубрика: JavaScript/JQuery | Метки: , | Добавить комментарий

Создание jQuery плагина для массовой загрузки файлов на сервер

С появлением HTML5 File API загрузка файлов на сервер перестала быть проблемой. Раньше для этого использовались костыли, использующие Silverlight или Flash. Теперь же мы можем использовать только java script. Для загрузки файлов на сервер появились 2 новых объекта FormData и FileReader из XMLHttpRequest 2 и File API соответственно. В своем примере я использую FormData т.к. работа с ним мне показалась удобнее. Цель задачи состоит в том, чтобы при нажатии на кнопку типа file можно было выбрать сразу несколько (либо одну) фотографий и сразу же отправить их на сервер, используя при этом все плюшки которые нам дает jQuery. Читать далее

Рубрика: JavaScript/JQuery | Метки: , | 2 комментария

Кроссбраузерный CSS-градиент

Очень часто в своих макетах дизайнеры используют всевозможные градиенты. Раньше приходилось вырезать 1-пиксельную картинку с градиентом и размножать ее (repeat). При этом на сервер уходил лишний запрос, что в свою очередь замедляло загрузку страницы.

Сегодня  же мы можем создавать градиенты с помощью CSS 3.  Правда пока-что приходится добавлять эти свойства с префиксами для каждого из браузеров. Но это не так страшно.  Читать далее

Рубрика: HTML/CSS | Метки: , | Добавить комментарий

Создаем границы с помощью CSS

Использование CSS для границ не должно ограничиваться стандартными border:1px solid #000; Ниже я приведу более сложные случаи создания границ.

Вертикальное и горизонтальное закругление углов

Углы также можно закруглять только по горизонтали или по вертикали. Для этого используется 2 значения, разделенные ‘/’:

[codesyntax lang=»css» title=»CSS»]

img {
	border-radius: 50% / 15% /* горизонтальный радиус / вертикальный радиус */;
}

[/codesyntax]

Результат будет таким:

Читать далее

Рубрика: HTML/CSS | Метки: , , , | Добавить комментарий

Создаем геометрические фигуры с помощью CSS

Довольно часто при верстке сайтов возникает задача вставить в макет какую-либо геометрическую фигуру (треугольник на рисунке ниже).

Конечно для этой цели можно просто вырезать картинку типа .gif или .png, но загрузка лишнего файла это не слишком красивый способ. Я рекомендую использовать для этого CSS. Читать далее

Рубрика: HTML/CSS | Метки: | Добавить комментарий

Полезные online сервисы для вебразработчика

В этой статье я хочу перечислить полезные online сервисы для вебразработчиков.

1. RegExr — хороший сервис для создания и отладки регулярных выражений.

2. Spys.ru — обновляющиеся списки прокси-серверов по всему миру. Очень удобно использовать в паре с расширением для Google Chrome — Proxy SwitchySharp.

3. Ultimate CSS Gradient Generator — генератор CSS градиентов. Позволяет быстро и наглядно формировать CSS для кроссбраузерного отображения градиентов. Читать далее

Рубрика: Internet | Метки: , , , | 1 комментарий

HTML5 атрибут placeholder

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

[codesyntax lang=»html4strict» title=»HTML»]

<input placeholder="Введите Email" type="email" />

[/codesyntax]

Но, к сожалению, есть небольшие проблемы при использовании данного атрибута. Читать далее

Рубрика: HTML/CSS, JavaScript/JQuery | Метки: , , | 1 комментарий
  • Страница 4 из 6
  • <
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • >