Archiwum dla kategorii ‘Praktyka’

css-green

Styl, konwencje i metodologie CSS – część 2. Sass, BEM, rscss, SMACSS, WTF?

Ciąg dalszy tematyki poruszanej w części I. Dziś przyjrzymy się kolejnym metodologiom pisania CSS, takim jak BEM, rscss, SMACSS. Należy dodać, że metodologie możemy łączyć (np. OOCSS + BEM). O ile oczywiście ma to dla nas sens. Do rzeczy. Metodologie CSS: SMACSS Zaczniemy od SMACSS, choć od razu powiem, że nie pracowałem z tym przy […]

css-sass-black

Styl, konwencje i struktura CSS. Sass, OOCSS, BEM, rscss, SMACSS, OMG?

Co to znaczy być zajętym? Ano na przykład nie mieć absolutnie czasu nawet na nowe posty na blogu, chociaż tematów jest cała rzeka. Tak oto byłem zajęty, zawodowo oraz prywatnie. Dziś wracamy „on-line” z tematem, i to nie byle jakim… Zyskiwać czas można poprzez optymalizację codziennych czynności, ich automatyzację i organizację. I zawsze staram się […]

content-like-water-rwd-128

Tutorial Bootstrap i RWD – responsywne strony

Dziś szybki tutorial Bootstrap o tworzeniu responsywnych stron WWW. A właściwie szablonu, stanowiącego dobry punkt wyjścia dla dalszych projektów. Opowiemy też o kilku technikach, które pozwalają osiągnąć określone rezultaty. Zebraliśmy także linki do zasobów z cennymi informacjami. Tutorial Bootstrap i RWD – szablon od ręki Jak wiemy, Twitter Bootstrap (TB) to framework CSS, rozwijany jako […]

Progress bar

Style CSS dla html5 progress bar w różnych przeglądarkach

Dziś kilka słów o HTML5 progress bar, a konkretnie nadawanie mu CSS w taki sposób, aby wyglądał tak samo we wszystkich przeglądarkach. Może tego wymagać projekt, a programista może być zaskoczony, że określone style stosują się tylko w określonej przeglądarce, podczas gdy w innych przygotowany pasek postępu wygląda zupełnie inaczej. Ten sam wygląd html5 progress […]

html5-css-progress-bar-mini

Pasek postępu w CSS – progress bar w kilku linijkach kodu

Pasek postępu (progress bar) w projekcie Web? Jasne – i to bez użycia obrazków. Dziś krótko i na temat. Pasek postępu w CSS i HTML5 Możemy skorzystać z HTML5 i Bootstrap, lub zdefiniować własne style CSS. Sposób 1 – HTML5 Dodajmy do strony Bootstrap i jQuery, oraz kod jak poniżej. Gotowe. Mamy pasek postępu! Kolory […]

AngularJS-tutorial-logo

Tutorial AngularJS – proste UI do sterowania elementami

Angular w praktyce! Dziś mamy tu mały tutorial AngularJS, w którym stworzymy proste UI powiązane z dynamicznie rysowanym (odświeżanym ) obiektem graficznym. Tutorial AngularJS – sterowanie obiektem graficznym za pomocą Angular W kursie podstawowym skupialiśmy się głównie na informacjach, warto więc teraz zobaczyć to w realnym przykładzie. Pomoże nam ten prosty tutorial w kilku krokach. […]

angularjs-logo

Nauka AngularJS od podstaw – część III – podsumowanie

W części III podstawowego kursu Angular kontynuujemy zagadnienia z części poprzedniej, jak i dotykamy nowych, kolejnych zagadnień dotyczących pracy z tą biblioteką. Nauka AngularJS – kolejne zagadnienia Zacznijmy od filtrów. To kolejna cecha AngularJS, która zdejmuje z programisty część żmudnej pracy. Zobaczmy je w akcji, podczas formatowania danych różnego rodzaju. Filtry (AngularJS filters) Już w […]

AngularJS-tutorial-logo

Nauka AngularJS od podstaw – część II

Dziś kontynuujemy naukę frameworku AngularJS od podstaw, opisując najważniejsze aspekty składowych aplikacji Angular, oraz analizując małe przykłady praktyczne. Nauka AngularJS – kolejne kroki Poprzednia część opisuje podstawowe kwestie związane z tym znakomitym rozwiązaniem. Wiemy że AngularJS jest frameworkiem języka JavaScript i rozszerza HTML poprzez dyrektywy ng. Poprzednia część pokazuje także prosty przykład z data-binding. Mamy […]

mustache-js

Mustache JS na przykładzie aplikacji Express. Część 2/2.

Witamy w II części tutoriala o Mustache JS i Express. Dziś dokończymy dzieło rozpoczęte w części I. Mustache JS i jQuery w akcji Dotąd omówiliśmy podstawy pracy z biblioteką Mustache, przygotowaliśmy dane testowe oraz serwer w node.js. Teraz pora na oprogramowanie warstwy front-end. W naszym przypadku użyjemy: Bootstrap v3.3.5 jQuery v1.11.3 jQuery Easing v1.3 plugin […]

mustache-js

Użycie Mustache JS na przykładzie aplikacji Express. Część 1/2.

Dziś stworzymy aplikację Web w oparciu o wspaniałe narzędzia – html5, Bootstrap, jQuery, Mustache JS i Express. Krok po kroku. Użyjemy także ionicons do wyświetlenia ikon. Mustache JS Nie każdy (w tym ja) przepada za systemami szablonów np. w PHP. Tutaj jednak sprawa wygląda znacznie inaczej. Mustache JS to implementacja dla języka JavaScript mini-engine szablonów […]