Grzesiek - Strona 22 - Kody, triki, sztuczki

31 paź 2014

Obsługa less w IntellijIDEA

Niestety plugin który jest dostępny na https://plugins.jetbrains.com/plugin/7059?pr=idea do kompilacji less -> css jest zbyt stary i w moim wypadku style z bootstrapa już nie chciały się kompilować.

Rozwiązanie to:

1. Wchodzimy do File -> Settings i sprawdzamy czy tam jest File Watchers jeśli nie to instalujemy do przez Settings -> Plugins -> Install JetBrains plugin... -> w oknie szukamy File Watchers i instalujemy.
2. Teraz potrzebne nam node.js http://nodejs.org/ pobieramy i instalujemy i robimy restart komputer
3. Z konsoli instalujemy plugin npm install -e less
4. Wchodzimy ponownie do Settings -> File Watchers poniżej screen

Czytaj dalej

8 lip 2014

Sortowanie polskich znaków w javascript

function MySort(alphabet) {
  return function (a, b) {
    const index_a = alphabet.indexOf(a[0]);
    const index_b = alphabet.indexOf(b[0]);

    if (index_a === index_b) {
      if (a < b) {
        return -1;
      }
      if (a > b) {
        return 1;
      }
      return 0;
    }
    return index_a - index_b;
  };
}

const items = ['świat', '1', 'ł', 'k', 'ą', '*sdf', '!', '!sdf', '@asdf', 'łódź', '_asd', '.sadf', '(sadf', ')sadf', '#sadf', '^asdf', '&asdf', '%asdf', '-sadf', '=sadf', '+sadf', '-sdf', 'sef', 'brocka'];

const sorter = MySort(
  '*!@_.()#^&%-=+01234567989aąbcćdeęfghijklłmnńoóprsśtuwyzźż'
);

console.log(items.sort(sorter));

W wersji z ES6 można to zrobić o wiele prościej:

items.sort((a, b) => a.localeCompare(b);

Polecam zapoznać się localeCompare, ma kilka przydatnych opcji.

22 maj 2014

mixins.less kolumny

Mały przykład jak wygenerować kolumny dla RWD

.generate-col-med(@columns, @prefix, @current: 1) when (@current =< @columns) {
  .col-@{prefix}-@{current} {
    width: (@current/@columns*100%);
  }
  .generate-col-med(@columns, @prefix, (@current + 1));
}

aby później wygenerować kolumny należy wywołać .generate-col-med

.generate-col-med(12, xm);

12 to numeracja spana, xm - nazwa która jest doklejona do stylu.

Czytaj dalej

27 kwi 2014

Support for swipe gestures in Colorbox

I used example3 here

I set rigidly width/1000px and height/600px.

$(".group3").colorbox ( { 
             rel: 'group3', transition: "none" , width: "1000", height: "600"} 
    ) ;

Czytaj dalej

26 mar 2014

html5 placeholder w IE7 i IE8

// set placeholder values
       $('[placeholder]').each(function() {
		if ($(this).val() == '') // if field is empty
		{
			$(this).val($(this).attr('placeholder'));
		}
	});
	// focus and blur of placeholders
	$('[placeholder]').focus(function() {
		if ($(this).val() == $(this).attr('placeholder')) {
			$(this).val('');
			$(this).removeClass('placeholder');
		}
	}).blur(function() {
		if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) {
			$(this).val($(this).attr('placeholder'));
			$(this).addClass('placeholder');
		}
	});

	// remove placeholders on submit
	$('[placeholder]').closest('form').submit(function() {
		$(this).find('[placeholder]').each(function() {
			if ($(this).val() == $(this).attr('placeholder')) {
				$(this).val('');
			}
		})
	});

Należy oczywiście sprawdzić czy placeholder jest wspierane przez przeglądarkę.

if (!("placeholder" in document.createElement("input"))) {
    odpalPlaceHolder(); // tutaj odpalamy funkcje która obsługuje placeholder
}

Można również użyć modernize jeżeli oczywiście używamy już w projekcie.

if(!Modernizr.input.placeholder) {
 // custom placeholder code
}