Есть чудный «лайтбокс» под названием shadowbox. Всё хорошо, но для работы нужно много файлов:

• джаваскритп,
• стиль,
• 5 картинок;

Возникла идея сунуть всё в один джс:

1. Засовываем вместо ссылок на фон, base64-картинки, сделать их можно с помощью утилиты Сергея Чикуёнка. Не забываем, вставлять нужно без каких либо скобок;
2. С помощью импорта стиля, просто сразу добавляем стиль перед </head>;
3. засовываем всё это в начале скрипта, стиль строкой, строку импортим, а после самого скрипта шадовбокса, инициилизируем его-же;
4. ...
5. Профит!

ps: на старючие браузеры откровенно уже пофик, нужно это принять ;)

• Посмотреть Пример
• Инструкция к полётам на shadowbox

Все знают, что в JS констант нет, но с помощью супер-мега-гибкого ООП даже их можно реализовать:

"use strict";
var constant = (function () {
    var constants = {};
    return {
        define: function (name, value) {
            if (!name in constants) {
                constants[name] = value;
                return true;
            }
            return false;
        },
        defined: function (name) {
            return name in constants;
        },
        get: function (name) {
            return constants[name];
        }
    };
}());

Пример использования:

// check if defined
constant.defined("lol"); // false
// define
constant.define("lol", "ok!"); // true
// check again
constant.defined("lol"); // true
// attempt to redefine
constant.define("lol", "lolok"); // false
// was it constant or it changed?
// get da, get da, get da value
constant.get("lol"); // "ok!"

• Оригинал статьи с jspatterns
• Голосуем за «Ускоряем сайт в космос ;)»

Для того что бы конвертить неведомые символы, мы должны их отCharCodить, но функция конвертит всё подряд, поэтому мы предварительно составляем массив наших символов, и если не наши, мы их через ASCII-код выдаём :)

cp1251 = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,48,49,50,51,52,53,54,
	55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,
	76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,93,94,95,96,97,
	98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,
	114,115,116,117,118,119,120,121,122,123,125,126,1025,1028,1030,
	1031,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,
	1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,
	1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,
	1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,
	1091,1092,1093,1094,1095,1096,1097,1098,1099,1100,1101,1102,1103,
	1108,1110,1111,8470];
function in_array(myValue,myArray){
	function equals(a,b){return (a === b);}
	for (var i in myArray) if (equals(myArray[i],myValue)) return true;
	return false;
}
function fetchAscii(){
	var obj = document.getElementById("converter").value,
  convertedObj = '', converted = document.getElementById("converted");
  var _length = obj.length;
  
  for(i = 0; i < _length; i++)
    convertedObj += (in_array(obj.charCodeAt(i),cp1251) ? '&#' : '&amp;#') 
    	+ obj.charCodeAt(i) + ';';
  converted.innerHTML = convertedObj;
  return false;
}  

• Посмотреть Пример

зы: прикрутил сразу туда же ZeroClipboard :)

var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.addEventListener('mouseOver', 
	function(clip){
		clip.setText(
			document.getElementById("converted")
			.innerHTML
			.split("&")
			.join("&"))
	}
);
clip.glue("copy");

Особенность в том, что текст, который копируется, постоянно изменяется, то есть динамический %)

var myVar   = "3.14159",  
    str     = ""+ myVar,//  в стринг     (string)
    int     = ~~myVar,  //  в интеджер   (integer)
    float   = 1*myVar,  //  во флоат     (float)
    bool    = !!myVar,  //  в булен - все непустые строки и числа кроме 0 будут true
    array   = [myVar];  //  в массив

• Посмотреть больше

var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); 

С утра твитор порадовал интересной викториной.

Немного подумав над ней, оказалось что решил я её без ошибок \m/, в отличии от многих других ;) (если бы на время, то наверное бы слил)...

По просьбам трудящихся, небольшие объяснения (в комментариях к викторине их можно частями найти)

1. (function(){
     return typeof arguments;
   })();

   Вернёт object, потому что arguments всегда задана, и выводит все переменные которые приходят в функцию

2. var f = function g(){ return 23; };
   typeof g();

   Получим ошибку, фугкция g() не объявлена. Если запустить f() получим «number»

3. (function(x){
   delete x;
   return x;
   })(1);

   Небольшой подвох ;) Delete внутри функций не работает ;) Ответ 1

4. var y = 1, x = y = typeof x;
   x;

   Объявление в «колоне» идёт слева на право, получаем в итоге строку «undefined»

5. (function f(f){ 
   return typeof f(); 
   })(function(){ return 1; });

   функция выполняется вконце, возвращает 1, она же идёт в начало аргументом функции f(), и тип 1 — «number»

6. var foo = { 
   bar: function() { return this.baz; }, 
   baz: 1
   };
   (function(){ 
   return typeof arguments[0]();
   })(foo.bar);

   Есть объект foo с методом bar, и функция которой в качестве аргумента передаём наш метод. Почему в итоге не «function»? this в обжекте ;) Лол! ок!

7. var foo = {
   bar: function(){ return this.baz; },
   baz: 1
   }
   typeof (f = foo.bar)();

   А ну как конструкция, гибкость? :) смотрим выше

8. var f = (function f(){ return "1"; }, function g(){ return 2; })();
   typeof f;

   исполняется последняя в списке функция g() — потому «number»

9. var x = 1;
   if (function f(){}) {
   x += typeof f;
   }
   x;

   Опять функция в условии (смотри 2), в итоге получаем «1undefined»

10. var x = [typeof x, typeof y][1];
    typeof typeof x;

    типоф от типоф всегда стринг ;)))

11. (function(foo){
    return typeof foo.bar;
    })({ foo: { bar: 1 } });

    у нас просто получилось foo.foo.bar = 1, обжект в обжекте — масло масляное, потому «undefined»

12. (function f(){
    function f(){ return 1; }
    return f();
    function f(){ return 2; }
    })();

    Последняя объявленная нижняя, потому получаем 2 %)

13. function f(){ return f; }
    new f() instanceof f;

    инстансоф буллевый оператор, и итог функции f() не может быть в «движении» функции f.

14. with (function(x, undefined){}) length;

    оператор with поиска находит оба аргумента, получаем 2 %)

• Flawless victory.

Math.round(num* 100,2)/100

Последнее время часто пользуюсь, и так же часто не могу найти рабочие сайты. То домен пропал, то домен украли, то тупо сайт лежит. По этому сделал два зеркала для себя (если кому-то ещё пригодится, я не против ;) + любимый сайт для сжатия скриптов.

• CSS Formatter and Optimiser (csstidy 1.3)

• Dean Edwards p.a.c.k.e.r 3.1

• JS Compressorrater

<!-- Always need this javascript -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
	// Джикверюшка
	google.load('jquery', '1.3.2');
	google.load('jqueryui', '1.7.2');
	//other examples
	google.load('mootools', '1.2.1');
	google.load('prototype', '1.6.0.3');
	google.load('scriptaculous', '1.8.2');
	google.load('mootools', '1.2.1');
	google.load('dojo', '1.2.3');
	google.load('swfobject', '2.1');
	google.load('yui', '2.6.0');

</script>

• Почитать доки (EN)

PS: каникулы кончились? :))

MD5 — 128-битный алгоритм хеширования, лалала, который нельзя взламать простым компом за пару лет ;)

Сам алгоритм запутан и немного ужасен, сделанных (готовых реализаций) найти через гугл очень просто, их там очень много, но смысл одинаковый и результат тоже ;)

• Посмотреть пример скрипта MD5

Есть сервис аватаров gravatar.com, в котором каждый может хранить на каждый свой мейл по 1 аватару. Работает давно и надёжно.

Как же получить с него нужный аватар? Для этого достаточно к урлу http://www.gravatar.com/avatar/ добавить MD5 хэш емейла и параметр s которым мы указываем размер ;)

md5 = MD5(mail.value);
var gravatar = 'http://www.gravatar.com/avatar/';

var sURL = gravatar + md5;
var sParams = (s != '') ? 's=' + s : '';

sURL += (sParams != '') ? '?' + sParams : '';

avatar.src = sURL;

• Посмотреть Пример

Сегодня речь пойдёт о утилитах для Мускула (MySQL).
Первая это php-утилита Sypex Dumper — универсальный дампер БД (сделан нашими ребятами)

• можно просто и быстро создать резервную копию (бэкап, дамп)
• работает очень быстро с огромными БД
• есть куча фич (свой cmd, cron)

Вторая — javascript-утилита WWW SQL Designer — для создания структуры БД, установки связи между таблицами и всё это в удобном GUI

• очень простая и удобная
• установка — просто залил на сервер
• сохранение/загрузка результатов
• експорт в SQL и XML
• в демке всё круто видно %)

Первая это php-утилита Admiter

• php MySQL Admin одним файлом, всегда мечтал ;)
• умеет всё что нужно, но не такой мощный как PhpMyAdmin

Вторая это javascript-утилита DD_roundies

• она от автора супер PNG-fix для ИЕ6
• css-selectors для выбора применяемых элементов
• работает очень быстро и просто, одни бонусы :)
• умеет за одно делать прозрачными png-рисунки

Просмотрев с 10к возможных способов сделать обрезания пробелов по краям, самыми быстрыми оказались методы основаны на регекспах. Здесь запостим только самый-самый

pattern = (pattern+"").replace(/^\s\s*/, '').replace(/\s\s*$/, '');

зы: Колупания в инете пост :) По материалам Javascript trim — тут аж 12 методов
ps: array_merge = function(arr, arr2) {return arr.concat(arr2);}

Странно, все ищут изврат типа такого:

function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
}

Ведь есть родной функционал:

subject.replace(search, replace)

Зачастую, применяя к переменной эти методы, получают ошибку, мол нету такого метода для данного объекта. Нам нужно, всего лишь, превратить переменную из типа объект в строку, приплюсовав например пустую строку, вот так:

var str = (str + "").replace(search, replace);

Можно применить и родной метод

var str = str.toString().replace(search, replace);

breakpoint = function (_name, _context){
  if(!breakpoint.allow){return;}
  var expr, result, output;
  while(true){
    expr = prompt('Debug into breakpoint "' + _name + '"' , '');
    if(!expr){break;}
    else{
      output = true;
      try{
        result = result = _context(expr);
      }
      catch(e){
        alert('[!] caught exception with message "' + e.message + '"');
        output = false;
      }
      if(output){
        alert(result);
      }
    }
  }
}
 
breakpoint.allow = true;

Использовать вот так:

function f(_a, _b, _c){
    var a = 10;
    var b = 20;
    var c = 30;
    breakpoint("breakpoint1", function (_$) { return eval(_$); });
}
 
f(40, 50, 60);

Потом можно сделать вот так

window['alert']= function(){message(Array.slice(arguments));}

Предвариетльно подключив HabraAlert
зы: По мотивам хабра, что бы не потерять :)

Возникло много багов и пожеланий, поэтому переделал:

• Исправил CSS ошибки, добавил pointer: cursor;
• Разделил CSS для ИЕ и остальных;
• Исправил багу с позиционированием в ИЕ6;
• Избавился от js.ошибки NS_ERROR_DOM_NOT_FOUND_ERR
• Сделал возможности загрузки скрипта как в head так и в body;

• Посмотреть здесь

После того, как пригодился мне уже в 5 проектах, сделал стендалоун решение, которое работает после простого подключения файла JS после body. Почему не сделал загрузку в head, спросите вы, потому что на страницах зачастую много инфы, и ждать пока загрузится весь DOM долго, а ерроры, алерты лучше видеть сразу ;).

В решении используется сразу несколько моих статей, и работает довольно просто:

• динамически загружаем CSS стиль
• вставляем тег, сразу после body
• ну и сам JS алерт

• Скачать скрипт
• Пример

var favicon = {
change: function(iconURL) {
/* Бонусом меняем тайтл */
  if (arguments.length==2) {
	document.title = optionalDocTitle;
  }
/* для разных браузеров разный фавикон */
  this.addLink(iconURL, "icon");
  this.addLink(iconURL, "shortcut icon");
},
addLink: function(iconURL, relValue) {
/* создаём линк, добавляем в него сорс */
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = relValue;
  link.href = iconURL;
/* предыдущие иконки убиваем */  
this.removeLinkIfExists(relValue);
  this.docHead.appendChild(link);
},
removeLinkIfExists: function(relValue) {
  var links = this.docHead.getElementsByTagName("link");
  for (var i=0; i<links .length; i++) {
	var link = links[i];
	if (link.type=="image/x-icon" && link.rel==relValue) {
	  this.docHead.removeChild(link);
	  return; // Assuming only one match at most.
	}
  }
},
/* башка нашего сайта */
docHead:document.getElementsByTagName("head")[0]
}

Скрипт найден на просторах инета, в демке по сути не нуждается.

Давно хотел разобраться с функциями через точечку, то есть с теми, что по цепочке, как в любимом jQuery. В самом коде jQuery можно сломать голову, потому искал просветления в инете, и довольно безрезультатно, пока не наткнулся на маленькую либу $fx для анимации, и на меня сошло озарение.

Всё довольно просто и через замыкание функции в конце:

$ = function(v) {
	if (v.nodeType && v.nodeType == 1) var f = v;
	else if (typeof v == "number") {
		var f = {"result":v};
	} else return null;
  f.plus = function (nmbr) {
  		nmbr = nmbr || this.result;
  		this.result += nmbr;
      return this;
  };
  f.minus = function (nmbr) {
  		nmbr = nmbr || this.result;
  		this.result -= nmbr;
      return this;
  };
  f.multiply = function (nmbr) {
  		nmbr = nmbr || this.result;
  		this.result *= nmbr;
      return this;
  };
  f.divide = function (nmbr) {
  		nmbr = nmbr || this.result;
  		this.result  /= nmbr;
      return this;
  };	    
  return f;
}

Вкратце, проверяем первый аргумент:

• если функция (объект, без разницы в JS), присваиваем к главной функции с подлепрамифункциями(нодами)
• если число, то создаём объект с параметром result
• дальше следует замыкание через «return f»;

Что бы получить результат, пишем всё вот так:

$(10).plus(5).minus(7).divide(2).multiply(3).result

• Посмотреть Пример

var is_ie6 = (window.external &&
typeof window.XMLHttpRequest == "undefined");