hotkey  →  Hotkeys комбинация клавиш

published 09 March 2013

Будет в виде модуля, для евентовой модели.

Основная суть здесь вот в чем, имеем массив, в который будем добавлять клавиши по keydown, и удалять по keyup, то есть пока клавиша зажата она будет в массиве и мы можем посмотреть какая комбинация сейчас нажата.

ZERO, для бага в хроме.

APP.hotKeys = function () {
    'use strict';
    var init = function () {
            $(document).bind('keydown', hotKeyHandler);
            $(document).bind('keyup', removeKeyUp);
        },

        ZERO = 0,

        ESC_KEY = 27,

        CTRL_KEY = 17,

        ALT_KEY = 18,

        SHIFT_KEY = 16,

        ENTER_KEY = 13,

        SPACE = 32,

        RIGHT_KEY = 39,

        LEFT_KEY = 37,

        UP_KEY = 38,

        DOWN_KEY = 40,

        M = 77,

        A = 65,

        S = 83,

        F = 70,

        keys = [],

        hotKeyHandler = function (e) {
            e = e || window.event;
            var codeKey = e.which || e.keyCode;
            keys[codeKey] = true;
            //esc
            if (codeKey === ESC_KEY) {
                $('body').trigger('escKeyUp');
                e.preventDefault();
                //enter
            } else if (codeKey === ENTER_KEY) {
                 $('body').trigger('enterKeyUp');
                // e.preventDefault();
                //CTRL + SHIFT + M
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[SHIFT_KEY] || keys[ZERO]) && keys[M]) {
                $('body').trigger('comboCtrlShiftMKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //CTRL + SHIFT + A
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[SHIFT_KEY] || keys[ZERO]) && keys[A]) {
                 $('body').trigger('comboCtrlShiftAKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //CTRL + SHIFT + F
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[SHIFT_KEY] || keys[ZERO]) && keys[F]) {
                $('body').trigger('comboCtrlShiftFKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //CTRL + UPKEY
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[UP_KEY] || keys[ZERO])) {
                 $('body').trigger('comboCtrlUpKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //CTRL + DOWNKEY
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[DOWN_KEY] || keys[ZERO])) {
                 $('body').trigger('comboCtrlDownKeyUp', {codeKey: codeKey});
                e.preventDefault();
               //CTRL + LEFTKEY
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[LEFT_KEY] || keys[ZERO])) {
                 $('body').trigger('comboCtrlLeftKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //CTRL + RIGHTKEY
            } else if ((keys[CTRL_KEY] || keys[ZERO]) && (keys[RIGHT_KEY] || keys[ZERO])) {
                $('body').trigger('comboCtrlRightKeyUp', {codeKey: codeKey});
                e.preventDefault();
                //SPACE
            } 
            codeKey = null;
        },

        removeKeyUp = function(e) {
            var codeKey = e.which || e.keyCode;
            if (keys[ZERO]) {
                delete keys[ZERO];
            }
            delete keys[codeKey];
        };

    return {
        init: init
    };
}();
hotkey

firefox addons  →  Разширения Firefox для верстки

published 02 February 2013

Несколько инструментом облегчающие мне жизнь при верстке.

Firesizer

Позволяет выставлять размер браузерного окна, чтобы посмотреть как будет выглядеть сайт на том или ином разрешении.

MeasureIt

Позволяет точно измерить все растояния на сайте.

firefox addons

code key  →  Коды кнопок клавиатуры в Javascript

published 01 January 2013

Для определения кода кнопок, нажмите нужную кнопку вв текстовом поле:

Код нажатой кнопки:

var input = document.getElementById(‘code’), span = document.getElementById(‘codekey’); input.onkeydown = function(e) { input.value=’’; span.innerHTML = e.keyCode; }

code key

Геометрические фигуры с помощью CSS

published 22 December 2012

.square { width: 100px; height: 100px; background: #ddd; }

Квадрат

.square {
	width: 100px;
	height: 100px;
	background: #ddd;
}

.circle { width: 100px; height: 100px; background: #ddd; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Круг:

.circle {
	width: 100px;
	height: 100px;
	background: #ddd;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

.half-circle { width: 100px; height: 50px; background: #ddd; -moz-border-radius: 0 0 100px 100px; -webkit-border-radius: 0 0 100px 100px; border-radius: 0 0 100px 100px; }

Полукруг:

.circle {
	width: 100px;
	height: 50px;
	background: #ddd;
	-moz-border-radius: 0 0   100px 100px;
	-webkit-border-radius: 0  0 100px 100px;
	border-radius: 0 0  100px 100px;
}

.oval { width: 200px; height: 100px; background: #ddd; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

читать далее

css  →  Проверка поддержки CSS свойств в JavaScript

published 22 December 2012

В силу распостраненности множества различных браузеров, разной степени свежести, у веб разработчика возникает проблема обеспечения кроссбраузерности. Одна из таких проблем это поддержка того или иного браузера CSS свойств. Решение проблем или забить или всякого рода хаки, в том числе и на js. Вот способ как определить, поддерживается свойство или нет.

Определяем поддерживается ли CSS cвойство:

function PropIsSupported(prop) {
    return (prop in document.body.style)
}

Определяем поддерживается ли аттрибут:

function AttrIsSupported(element, attr) {
    var elem = document.createElement(element);
    return (attr in elem); 
}
css кроссбраузерность

selenium  →  Знакомство с Selenium WebDriver для python

published 04 September 2012

Selenium - это среда для тестирования веб-интерфейсов.

{"#" * i} Установка на линукс:

Устанавливаем клиента для python:

#pip install -U selenium

Java Server Скачиваем сервер http://selenium.googlecode.com/files/selenium-server-standalone-2.23.0.jar

Запускаем:

#java -jar selenium-server-standalone-2.23.0.jar

Можно начинать писать тесты.

{"#" * i} Примеры кода для Webriver python.

Импортируем нужные модули и переменные:

from selenium import webdriver  #Webdriver
from selenium.common.exceptions import NoSuchElementException #exceptions
from selenium.webdriver.common.keys import Keys #keys
from selenium.webdriver.support.ui import Select #select
import time #time for sleep

Запускаем Webdriver для Хрома (предварительно скачав бинарник http://code.google.com/p/chromedriver/ ):

browser = webdriver.Chrome('/opt/chromedriver')

Идем по урлу:

selenium webdriver python
читать далее

jquery  →  Стилизация Radio button и Checkboxes

published 23 July 2012

Написал тут по быстрому скрипт стилизации radiobuttons и checkboxes на jquery для Drupal:

(function ($) {
    $(document).ready(function() {
        $('input[type="checkbox"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.checkbox-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            if(self.hasClass('checked')) {
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })

        $('input[type="radio"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.radio-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            var name = this.getAttribute('data-name');

            if(self.hasClass('checked')) {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })
    });
})(jQuery);

Стили:

jquery checkboxes radiobuttons
читать далее

theme  →  Создаем свою тему вывода

published 21 July 2012

Для создания своей темы вывода контента в нашем модуле нам понадобиться объявить нашу тему воспользовавшись хуком hook_theme:

function example_module_theme ($existing, $type, $theme, $path) {
  return array(
       //Вариант 1 выводим все в шаблон
       'block_one' => array(
               //переменные которые будем передавать в шаблон
		'variables' => array('days' => NULL, 'link' => NULL, 'descrip' => NULL ),
                //имя шаблона без tpl.php
		'template' => 'event_block_field',
                //путь к шаблону
		'path' => drupal_get_path('module', 'example_module') . '/theme',
    ),
     //Вариант 2 выводим через функцию
    'block_two' => array(
                //переменные которые будем передавать в функцию
		'variables' => array('days' => NULL, 'link' => NULL, 'descrip' => NULL ),
    ),
  )
}

Наши темы объявлены создадим обработчики для них.

theme hook_theme
читать далее

patch  →  Создание и применение patch файлов в Linux

published 16 June 2012

Создание патч файлов:

diff -Naur   >> my_patch.patch

Применение патча:

patch -u
patch linux

linux  →  Отправка писем OpenSuse

published 16 June 2012

Для того чтобы с сайтов на локальной машине отправлялись письма достаточно поставить sendmail:

zypper in sendmail
linux opensuse
« 1 2 3 4 5 6 7 8 9 10 11 »