28 декабря 2011 г.

Бешенный скролл jCarousel Lite.

Есть такая очень удобная js библиотека 
jCarousel Lite, которая позволяет очень просто делать анимации и карусели. И вот после очередного обновления сервера карусель начала бешено двигаться то вперёд, то назад.

А дело заключалось в том, что случайно в шапке сайта два раза подгружался скрипт инициализации и в том числе инициализации карусели. И таким образом заместо одной карусели появляется две - и обе листают практически одинаково и незаметно что их две. Но стоит переключиться на другую вкладку в браузере или свернуть - как карусель бешено крутится.
Отпишусь создателю библиотеки об этом issue.

14 декабря 2011 г.

Ширина макета с фиксированным контентом

Если макет веб-страницы фиксирован и должен корректно вписываться по ширине в окно браузера при разрешении 1024x768, то максимальная ширина для wrapper'а (или обёртки контента) должна быть 996px или меньше. При указании ширины больше этого числа (1000px например) в некоторых недобраузерах появляется горизонтальный скролл.

Пример макета - http://dl.dropbox.com/u/1218489/web/markup_996.html

5 декабря 2011 г.

Javascript — полезняшки и хелперы

1. jQuery фильтр :random для получения случайного элемента из набора: (взять отсюда)

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

2. Работа с датами на javascript. Класс Date можно расширить замечательным свойством .format(...), которое позволит получать дату в нужном формате.

var now = new Date();

now.format("mm.dd.yyyy");
// Возвращает, например, "06.09.2010"

// Можно использовать как отдельную функцию
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");
// Saturday, June 9th, 2007, 5:46:21 PM

// Или можно использовать некоторые заранее определённые
// маски, или определить свою маску.
now.format("isoDateTime");
// 2007-06-09T17:46:21

// Функция без аргументов возвращает текущую дату с дефолтной маской
dateFormat();
// Sat Jun 09 2007 17:46:22
Скачать и посмотреть примеры использования можно тут

3. Правильный typeof - возвращает тип JS объекта

Object.prototype.toType = function() {
  return Object.prototype.toString.call(this).slice(8, -1).toLowerCase();
}

Пример использования: http://jsfiddle.net/nerevar/sfq4L/
.....

4. Placeholder - подсказка в текстовом поле, которая пропадает при переходе в это поле, реализуется следующим скриптом:

 $('input[placeholder], textarea[placeholder]').each(function(){
  var $input = $(this);
  var value = $input.attr('placeholder');
  $input.removeAttr('placeholder').val(value);
  $input.bind({
   blur: function() {if (this.value=='') this.value=value;},
   focus: function() {if (this.value==value) this.value='';}
  });
 });
Кстати нативно поддерживается многими браузерами.

30 ноября 2011 г.

Превью пользовательских изображений на сайте.


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


27 ноября 2011 г.

25 ноября 2011 г.

Getting Autocomplete For CodeIgniter 2.0 with PHPStorm


Getting Autocomplete For CodeIgniter 2.0 with PHPStorm | Grafik Kaos
Статья о том, чтобы заставить PHPStorm использовать автодополнение кода для средств фреймворка CodeIgniter 2.x




16 ноября 2011 г.

HTML формы и опера

Обнаружил в Опере интересную особенность, при которой jquery serialize() не получала данных из формы:

- Между тегами<form> и </form>
не должно быть неполных или пересекающихся таблиц
- Между тегами <form> и </form>
не должно быть другой формы (что очень логично).


Для следующего, не очень валидного кода:
<form id="firstform">
    <input type="text" name="firstname" value="MyName" />
    <input type="text" name="lastname" value="LastName" />

    <form id="secondform">
        <input type="text" name="age" value="21">
    </form>

    <input type="text" name="gender" value="male">
</form>

результатом операции $('#firstform').serialize() будет:
firstname=MyName&lastname=LastName&age=21

Закрывающая форма #secondform будет являться завершающим тегом для #firstform и поле gender будет опущено.

Впрочем это особенность не только Оперы, а самого jquery и его механизма выполнения операции serialize()

15 ноября 2011 г.

Firebug - тонкая настройка

Долгое время я не мог понять, почему Firebug раскрывает обычные css свойства, например
"border: 1px solid black"
превращается в 29 вот таких строчек:

firebug


element.style {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;

12 ноября 2011 г.

Изменение размеров jqGrid'ов при изменении размеров окна браузера

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

Чтобы сделать так, чтобы ширина таблицы динамически изменялась при ресайзе браузера, необходимо добавить следующее событие:

$(window).bind('resize', function() {
    if (grid = $('.ui-jqgrid-btable:visible')) {
        grid.each(function(index) {
            gridId = $(this).attr('id');
            gridParentWidth = $('#gbox_' + gridId).parent().width();
            $('#' + gridId).setGridWidth(gridParentWidth - 20);
        });
    }
}).trigger('resize');

В результате чего при событии resize, вызванным изменением размеров окна браузера, ширина таблицы будет зависеть от новой ширины родительского контейнера (и минус 20 пикселей :) ).

11 ноября 2011 г.

Code Igniter сжатие прозрачных png средствами фреймворка.

При использовании php библиотеки GD для сжатия изображений, библиотека работы с изображениями Image_lib, входящая в состав фреймворка Code-igniter при сжатии прозрачных PNG по-умолчанию делает прозрачный фон черным для GIF и PNG файлов, что не очень красиво.

Данное решение позволяет сохранять прозрачность при сжатии изображений:

В system/libraries/Image_lib.php, после строчки
$dst_img = $create($this->width, $this->height);

добавить следующий текст:
// keeping transparency
$transparent_index = imagecolortransparent($src_img);
if ($transparent_index >= 0) {
      imagepalettecopy($src_img, $dst_img);
      imagefill($dst_img, 0, 0, $transparent_index);
      imagecolortransparent($dst_img, $transparent_index);
      imagetruecolortopalette($dst_img, true, 256);
}
elseif ($this->image_type == 3) {
      imagealphablending($dst_img, false);
      $transparent_index = imagecolorallocatealpha($src_img, 0, 0, 0, 127);
      imagefill($dst_img, 0, 0, $transparent_index);
      imagesavealpha($dst_img, true);
}
Недостатком такого решения является то, что изменяется системная библиотека в system/ , а при "обновлении" проекта, изменения могут затеряться.

21 сентября 2011 г.

Пока что рабочая демонстрационная версия шашек будет находится здесь:
http://nerevar.github.com/iPadCheckers/
Если вкратце - то это шашки, которые я разрабатываю для touch-девайсов, а именно планшеты на iOS и Android

10 июля 2011 г.

Чем занимаются герои Мортал Комбат в свободное время?

Originally posted by Чем занимаются герои Мортал Комбат в свободное время?

Немного фантазии на тему:
"Чем занимаются герои Мортал Комбат в свободное от турниров время?" :)





21 июня 2011 г.

Ubuntu выделять слова по ctrl+shift МОЖНО!


Столкнулись с проблемой, что в ubuntu 10.04 если установить переключение раскладки на ctrl+shift, то нельзя выделять слова с помощью стрелочек ctrl+shift+← или ctrl+shift+→ ?

Оказывается, решение есть. Для этого нужно
1) Установить программу xneur (это аналог punto switcher под windows, must have)
2) В настройках клавиатуры в системе совсем убрать переключение раскладки с помощью горячих клавиш
3) В настройках xneur > Комбинации клавиш > установить "Перключение раскладки" на "Control + Shift_L"

После этого слова можно будет выделять с помощью ctrl+shift+стрелочек.
Единственная ложка дёгтя, с которой я еще не разобрался - переключение раскладки происходит именно по Ctrl+Shift а не Shift+Ctrl и не одновременно.. - Но к этому можно быстро привыкнуть :)

UPD: кстати всё-таки рекомендую не полностью отключать переключение клавиш в настройках, а оставить Alt+Shift на всякий случай, некоторые программы некорректно работают с переключением клавиатуры, или xneur  может быть и вовсе не запущен.

12 апреля 2011 г.

27 февраля 2011 г.

А вот и андроид!

Приобрел себе такой телефон - LG P500 Optimus One, и не просто телефон а коммуникатор с операционной системой - Android версии 2.2 (FroYo).

Вот его краткие характеристики:
  • Операционная система Android Mobile Technology Platform 2.2
  • Процессор Qualcomm 600 МГц
  • 3.2" емкостный сенсорный дисплей, разрешение 320 x 480 точек, 256К цветов
  • Здоровый аккумулятор Li-Ion 1500 мАч
  • Камера 3-Мпикс, максимальное разрешение 2048 x 1536
  • 3G, Wi-Fi, BlueTooth, GPS
  • MicroSD флешки до 32Гб

24 февраля 2011 г.

Личное первенство ЮРГТУ(НПИ) по программированию

Итак, настало время для олимпиады - личного первенства по программированию среди студентов ЮРГТУ(НПИ).

Первый, заочный тур проводится в online-режиме и для того, чтобы участвовать, нужно зарегистрироваться на сайте http://195.208.241.160:888

Небольшая выжимка из правил:
Первый тур состоится с 21.02 по 25.02.
Во втором туре 26.02 с 13-15 до 17-30 участвуют только первые 20 участников первого тура (контроль по таблице результатов).
Результаты первого тура не влияют на результаты второго тура
Сами задачки простые.

20 февраля 2011 г.

ASUS M51Tr Не работает звук в Windows 7? Тогда вам сюда!

Поставил на ASUS M51Tr Windows 7, установил все драйвера с официального сайта, скачал все обновления, всё настроил, кроме одного НО. Не работает звук.

А чтобы заработал звук, нужно скачать и установить драйвера для Windows Vista (в режиме совместимости с Windows Vista и от имени Админисратора).

А теперь подробнее об этом.

Java? Oracle? C'mon!

Перспективные информационные технологии... Что там у нас в этом семестре? Java? Oracle? А давай-те посмотрим что это такое.

Во первых что писать и где писать. Скачать следущее:
Java SE Development Kit (JDK) (Комплект разработчика приложений на языке Java, включающий в себя компилятор Java (javac), стандартные библиотеки классов Java, примеры, документацию, различные утилиты и исполнительную систему Java Runtime Environment (JRE))

Затем IDE. Мой любимый Eclipse можно скачать http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/heliossr1

Кстати про JDK и JRE - различия для тех кто еще не перевёл эти аббревиатуры - http://www.java.com/en/download/faq/techinfo.xml

Про Oracle.
Сам сервер можно скачать тут: Oracle Database 10g Express Edition (Universal) , но перед этим придётся создать себе аккаунт там же на oracle.com

В качестве клиента мне очень понравился OraDeveloper Studio

Собственно это и есть минимальный джентельменский набор :)

UPD: книга по java: http://www.intuit.ru/department/pl/javapl

Кем быть? Узким специалистом или широким?

Интересная статья о профессионализме http://www.skipy.ru/philosophy/professionalism.html

Однозначного ответа тут на самом деле нет. Широкий специалист может решить достаточно большое количество задач уровня не выше какого-то. Выше этого уровня – нет. Причем, что очень важно понимать, – не сможет он этого даже в команде таких же как он широких специалистов. Хочешь, не хочешь – а придется идти на поклон к узкому специалисту.

Узкий же специалист может решить достаточно ограниченное количество задач. Но эти задачи могут быть гораздо более сложными, чем в случае широкого специалиста. И, что немаловажно, – команда из узких специалистов имеет куда большие возможности, чем каждый из них по отдельности.