Deerua about Coding

Типы СУБД

Wed, 16 May 2012 16:40:14 +0200

реляционные: MySQL, Oracle, Microsoft SQL Server, PostgreSQL;
различные варианты хеш-таблиц key-value (Redis, BigTable, memcached);
документо-ориентированные базы данных (MongoDB, CouchDB);
базы данных, основанные на графах (Neo4j, Sones GraphDB);
объектно-ориентированные базы данных (db4o, Cache, Jade);
XML-ориентированные базы данных (eXist, BaseX).

зы: MongoDB использует в качестве языка запросов BSON, eXist применяет XQuery, а Sonic GraphDB требует от разработчика знания GraphQL

шпаргалка

CSS3: анимация на примере вращения картинки вокруг своей оси :)

Fri, 24 Feb 2012 16:05:50 +0200

ЦСС3 крутая вещь, круче не придумать ;)
анимировать будем при наведении мыши на картинку

@keyframes rotate{ 
	/* создаем анимацию и даем ей имя (rotate например) */
	/* дальше задаем положение в начале и в конце */
	from { 
		/* 
			для анимации используем трансформацию вращение 
			есть ешё сдвиг translate(x,y) и увеличение scale(z)
		*/
		transform:  rotate(0);
		/* можно анимировать размеры и прочие парамтры цсс */
	}	
	to {
		transform: rotate(360deg);
	}

	/* или вместо from|to пишем процент выполнения сцены, от 0% до 100%, любой нужный */
	/* 
		так как поддерживают анимацию передовики Гекко и ВебКит, 
		запись выше не работает и каждому нужно написать свою
	*/


} 
@-moz-keyframes rotate{from {-moz-transform:  rotate(0);}	to {-moz-transform: rotate(360deg);}} 

@-webkit-keyframes rotate{from {-webkit-transform:  rotate(0);}	to {-webkit-transform: rotate(360deg);}} 
	

img {
	padding-right: 13px;
}
img:hover {
	/* анимировать будем при наведении мыши на картинку */
	border: 1px solid #C0C0C0;
	/* имя анимации, длительность, продолжительность циклов, "задержки" */
	animation: rotate 0.5s infinite linear; 
	-moz-animation: rotate 0.5s infinite linear;
	-webkit-animation: rotate 0.5s infinite linear;
	/* 
	
	-webkit-animation-name —  имя анимации
	-webkit-animation-duration — время проигрывания анимации
	-webkit-animation-timing-function — метод расчета промежуточных значений свойств для анимации
	-webkit-animation-delay — задержка анимации
	-webkit-animation-iteration-count — количество циклов анимации
	-webkit-animation-direction — направление анимации
	-webkit-animation-play-state — проигрывается ли анимация или стоит на паузе

	*/}

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

css3

jQuery: Как получить значение css %параметра% блока в процентах

Sun, 19 Feb 2012 16:21:27 +0200

В чем проблема? Все, кроме вебкита, заданный параметр в процентах, например #wrp {left: 150%;}, возвращают в пикселях.

$(document).ready(function() {
    var lft = $('#wrp').css("left")+"";
    if (lft.match("px")) {
        lft = parseInt(lft) / $('#wrp').parent().width()*100;
        if ($.browser.msie)
            lft = lft>0 ? Math.ceil(lft) : Math.floor(lft);
        lft += "%";                     
    }

    $('#out span').html(lft);
});

В примере параметром будет left, а для ИЕ как всегда костыль ;)

jquery

ИЕ8 и тени со скругленными уголками вместе

Wed, 25 Jan 2012 15:52:57 +0200

Для тени очень хорошо работает свойство фильтр, но как только пытаешься применить к блоку с тенью какой нить хтц плагин для скругленных уголков или дд_раунди, это блок и разработчик тоже получают дикий баттхерт, потому что тень теперь у текста, блок стал выше на длину тени, но зато есть уголки. Пришлось на коленке писать приблуду, которая почему-то не хочет работать в ИЕ7, нужно наверное там джиквери с 1.4.2 обновить до 1.7.1

<!--[if lte IE 8]>
	<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/roundie.js"></script>
	<script type="text/javascript">
		if (document.all) {
			DD_roundies.addRule('.div-onmain .n-det, .div-onmain .news-list, #t-m ', '3px');
		}
		$(document).ready(function() {
			$(".div-onmain .news-list, #t-m").each(function(){
				var 
					w = $(this).innerWidth(),
					h = $(this).innerHeight();
				
				$(this).css({
					"z-index":3,
					"overflow": "visible",
					"margin-top": -h*1+15 + "px"
				});
				
				$(this).parent().css({
					"z-index":1
				});
				
				$(this).before(
					$("<div class='shadow'>&shy;</div>").css({
						"z-index":2,
						"margin-top": "-15px",
						"overflow": "hidden",
						"width": w,
						"height": h,
						"overflow": "visible"
					})
				);
			});
			
			$(".shadow").css({
				"background": "#fff",
				"filter": "progid:DXImageTransform.Microsoft.Shadow(color='#EEEEEE', Direction=0, Strength=15)"
			});
		});
	</script>
<![endif]-->

bugs, butthurt, ie, jquery

Это нужно сохранить :) Простое объяснение ajax"а

Sun, 22 Jan 2012 13:47:16 +0200

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

Thu, 05 Jan 2012 23:42:20 +0200

<script type="text/javascript">
function browser() {
  if(-[1,]){
    var f = 1; var d={4294967296:'opera', d:'firefox', 4294967295:'chrome', '1' :''};
    for(var i in d) if(f) f=0; else return d[i];
  } else return 'ie';
}
document.write(browser());
</script>

Найдено на хабре

javascript

С новым годом

Thu, 05 Jan 2012 23:33:22 +0200

[][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})
[-~[]]+([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+
!![]]+([]+!![])[+![]]+([]+!![])[+!![]]+
([]+!![])[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+
!![])]+([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])
[+!![]]][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})
[-~[]]+([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+!![]]+
([]+!![])[+![]]+([]+!![])[+!![]]+([]+!![])
[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+!![])]+
([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])[+!![]]]
(([]+!![])[+!![]]+([]+{})[-~[]<<[-~[]+-~[]]]+
([]+!![])[-[]]+([]+[][{}])[-[]]+([]+!![])[+!![]]+
([]+[][{}])[-~[]]+([]+{})[~[]+(+!![]<<!![]+!![]+
!![])]+([]+![])[!![]+!![]+!![]]+([]+![])[!![]<<!![]+
!![]]+([]+![])[!![]+!![]]+([]+![])[-[]])()
[([{}-{}]+[])[-~[]]+([]+![])[!![]+!![]]+([]+![])
[!![]<<!![]+!![]]+([]+!![])[-~[]]+([]+!![])[+[]]](
[][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})
[-~[]]+([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+
!![]]+([]+!![])[+![]]+([]+!![])[+!![]]+
([]+!![])[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+!![])]+
([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])[+!![]]]
[([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})[-~[]]+
([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+!![]]+
([]+!![])[+![]]+([]+!![])[+!![]]+([]+!![])
[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+!![])]+
([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])[+!![]]]
(([]+!![])[+!![]]+([]+{})[-~[]<<[-~[]+-~[]]]+
([]+!![])[-[]]+([]+[][{}])[-[]]+([]+!![])
[+!![]]+([]+[][{}])[-~[]]+([]+{})[~[]+(+!![]<<!![]+
!![]+!![])]+([]+![])[!![]+!![]+!![]]+([]+![])
[!![]<<!![]+!![]]+([]+![])[!![]+!![]]+([]+![])
[-[]])()[([]+![])[-~[]]+([]+!![])[+![]]+([]+{})
[-~[]]+([]+{})[!![]+!![]]](([]+![])[-~[]]+
([][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})[-~[]]+
([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+!![]]+([]+!![])
[+![]]+([]+!![])[+!![]]+([]+!![])[-[~[]+~[]]]+
([]+{})[-~[]+(!![]<<!![]+!![])]+([]+!![])[+![]]+
([]+{})[-~[]]+ ([]+!![])[+!![]]]+[])[(-~[]+[+![]])-!![]])+
([]+![])[-~[]]+
(/!/[([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})[-~[]]+([]+[][{}])
[-~[]]+([]+!{})[!![]+!![]+!![]]+([]+!![])[+![]]+([]+!![])[+!![]]+([]+!![])
[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+!![])]+([]+!![])[+![]]+([]+{})
[-~[]]+([]+!![])[+!![]]]+[])[+!![]+[!![]<<!![]-~[]]]+
(/!/[([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})[-~[]]+([]+[][{}])
[-~[]]+([]+!{})[!![]+!![]+!![]]+([]+!![])[+![]]+([]+!![])[+!![]]+([]+!![])
[-[~[]+~[]]]+([]+{})[-~[]+(!![]<<!![]+!![])]+([]+!![])[+![]]+([]+{})
[-~[]]+([]+!![])[+!![]]]+[])[+!![]+[!![]<<!![]-~[]]]+
([]+[~[]/[]])[[[!![]+!![]]*[!![]+!![]]]*[!![]+!![]]]+
([]+{})[~[]+(+!![]<<!![]+!![]+!![])]+
([]+[][{}])[-~[]]+
([]+{})[-~[]<<[-~[]+-~[]]]+
([][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})
[-~[]]+([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+!![]]+([]+!![])
[+![]]+([]+!![])[+!![]]+([]+!![])[-[~[]+~[]]]+([]+{})[-~[]+
(!![]<<!![]+!![])]+([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])
[+!![]]][([]+{})[-~[]+(!![]<<!![]+!![])]+([]+{})[-~[]]+
([]+[][{}])[-~[]]+([]+!{})[!![]+!![]+!![]]+([]+!![])[+![]]+
([]+!![])[+!![]]+([]+!![])[-[~[]+~[]]]+([]+{})[-~[]+
(!![]<<!![]+!![])]+([]+!![])[+![]]+([]+{})[-~[]]+([]+!![])
[+!![]]](([]+!![])[+!![]]+([]+{})[-~[]<<[-~[]+-~[]]]+
([]+!![])[-[]]+([]+[][{}])[-[]]+([]+!![])[+!![]]+([]+[][{}])
[-~[]]+([]+{})[~[]+(+!![]<<!![]+!![]+!![])]+([]+![])
[!![]+!![]+!![]]+([]+![])[!![]<<!![]+!![]]+([]+![])
[!![]+!![]]+([]+![])[-[]])()+[])[([]+![])[!![]+!![]+
!![]]+([]+![])[!![]+!![]]+([]+[][{}])[!![]+(!![]<<!![]+!![])]+
([]+{})[!![]+(!![]<<!![]+!![])]+([]+!![])[!![]+!![]+!![]]](~[]+~[])[-[]]+
([]+{})[~[]+(+!![]<<!![]+!![]+!![])]+
(~[]/[]+[])[-~[]<<-(~[]+~[]+~[])]+
([~[]<[]]+[])[-[~[]+~[]+~[]]]+
([{}-{}]+[])[-~[]]+
 ([]+!![])[+!![]]+
(/!/+[])[-~[]])

Это Женя Степанищев написал здесь такое вот поздравление. Как-то раз я уже описывал, как работает данный «обфускатор», почему-то не могу найти, повторюсь :)

Пока я искал, все появилось в комментариях :)

Теперь немного о том как это сделано.

Проще всего получить буквы I, N, O, a, b, c, d, e, f, i, j, l, n, o, r, s, t, u, y. Они встречаются в различных словах самого языка. Например, нам нужна буква «f». Нет ничего проще, берём значение «false», вырезаем первую букву: «false»[0].

Перевести что угодно в строку можно прибавляя слева пустой массив, напимер «[]+![]» будет «false». Получить нулевой символ тоже легко, нужно перевести массив в число. Получается: «([]+![])[+[]]». Можно получать менее очевидные вещи: «[]+{}» будет «[object Object]», «{}-{}» — NaN, а «~[]/[]» — «-Infinity».

Здесь он продолжил:

С некоторыми другими буквами пришлось повозиться. Например, над «w» я долго ломал голову, наконец решил попробовать получить глобальный «window», преобразовать в строку и взять букву из него.

Очевидный способ через пустой call какого-нибудь метода отказался работать в Файрфоксе (строгий режим они что ли включили?), поэтому я добрался до него в два приёма.

Во-первых, сначала мне нужен был конструктор какого-нибудь метода, чтобы вызвать конструктор Function. Это я решил так: [].sort.constructor (sort — хорошее имя метода, все буквы просто достаются), точнее, вот так [][’sort’][’constructor’], буквы подставляются методом, описанным чуть выше.

Во-вторых, вызовом конструктора я создал функцию, которая вернула self: [].sort.constructor(’return self’)()

Дальше — дело техники. Я отрезал последние две буквы (в зависимости от браузера я могу получить объект «window» или «DOMWindow», первая буква не годится) и взял первую: [][’sort’][’constructor’](’return self’)()[’slice’](-2)[0]

А тут закончил:

Кстати, «alert» вызывается аналогичным образом — надо добраться до window и вызвать у него «alert»: window[’alert’](’параметры’). Собственно, то же с любой другой глобальной функцией. Я, например, использую ещё atob, чтобы получить букву «h» в слове «happy». Вызов window[’atob’](’aA’) даст искомую букву.

Букву «a» для параметра «atob» получить просто, можно, например, отрезать её от «false», а большой «A» сложнее. Я поступил следующим образом: преобразовал конструктор массива к строке: «[]+[].constructor». Получается следующее:
function Array() {
[native code]
}
Искомая буква там — под номером девять (если считать с нуля), я девятку получил вот так: +([-~[]]+-![])+~[] (в строковом представлении сложил один и ноль, преобразовал число, прибавил минус один).

В итоге, буква «h» получается как-то так: [].sort.constructor(’return self’)()[’atob’](«false»[1] + ([]+[].constructor)[9])

И добавил

О! Надо ещё про букву «p» рассказать. Я получил её из объекта «RegExp», знакомым уже способом: «([]+/!/.constructor)[14]».

FIN

javascript

импорт джаваскриптов и стилей через джиквери (import javascripts and styles via jQuery)

Fri, 23 Dec 2011 13:28:31 +0200

По следам моих старых-старых статей

$('head').append($("<script></"+"script>").attr({
	'type':'text/javascript'
	'src':"path_to_file.js",
}));

$('head').append($("<link/>").attr({
	"rel": "stylesheet",
	"type": "text/css",
	"href": "path_to_file.css",
}));

import, jquery

Как в jQuery получить html код самого элемента

Fri, 23 Dec 2011 12:41:56 +0200

$(".selected_element").wrap("<div>").parent().html()

Все делает функция wrap, которая обволакивает выбранный элемент выбранным тэгом, в зависимости от контекста, он можеть быть любым :)

jquery

Скролл сверху и снизу блока

Sat, 10 Dec 2011 20:16:59 +0200

Wow, who is back. Да — это я с новым ДОУ (deer.org.ua, lol)

Разминка для мозгов :)

<style type="text/css">
  #doublescroll { overflow: auto; overflow-y: hidden; }
  #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>

<div id="doublescroll">

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<script type="text/javascript">
function DoubleScroll(element) {
    var scrollbar= document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow= 'auto';
    scrollbar.style.overflowY= 'hidden';
    scrollbar.firstChild.style.width= element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop= '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll= function() {
      element.scrollLeft= scrollbar.scrollLeft;
    };
    element.onscroll= function() {
      scrollbar.scrollLeft= element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
  }

  DoubleScroll(document.getElementById('doublescroll'));
</script>

Код честно взят со стакексчендж (стаковерфлоу раньше). Я просто сделал с него джиквери решение

$("#doublescroll")
	.before($("<div></div>")
		.append($("<div></div>")
  			.css({
  				"padding-top":"1px",
  				"width": $("#doublescroll")[0].scrollWidth+"px"
  			})
  			.text('\xA0')
  		)
		.css({
			"overflow":"auto",
			"overflowY":"hidden"
		}).
		bind("scroll",function(){
			$("#doublescroll")[0].scrollLeft = $(this)[0].scrollLeft;
		})
	)
	.bind("scroll",function(){
		$(this).prev()[0].scrollLeft = $(this)[0].scrollLeft;
	})

Примера не будет, мне лень.

javascript, css, jquery