Git. Шпаргалка

git

Команды для git, которыми я пользуюсь чаще всего:

Читать далее

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

Правильные CSS селекторы

css

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

В сложном селекторе самый правый селектор должен быть как можно лучше определен (специфичен). Читать далее

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

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 | Метки: | Добавить комментарий