Archiwum dla kategorii ‘Praktyka’

Sass (scss)

Szybka nauka Sass (SCSS)

Sass (Syntactically awesome style sheets), znany również jako CSS with superpowers, jest to preprocesor, który czyni opracowywanie stylów dla naszych projektów, znacznie łatwiejszym, przyjemniejszym, szybszym. Pozwala również znacząco ulepszyć samą strukturę kodów, używać zmiennych oraz tworzyć elementy wielokrotnego użytku (mixins, placeholders), co znacząco poprawia również łatwość utrzymania i modyfikacji. Szybka nauka Sass (SCSS) O Sass […]

Klikalny numer telefonu na stronie – click to call w HTML5

W tym artykule temat prosty. Zwyczajnie podsumowujemy w jednym miejscu możliwości tworzenia telephone links, lub jak kto woli klikalnych numerów telefonu. Współcześnie pewna część aplikacji mobilnych jest realizowana nie jako native, ale jako web apps, a tam często zachodzi potrzeba stworzenia linku do rozmowy telefonicznej (zadzwoń do użytkownika), lub wysłania SMS. Klikalny numer telefonu w […]

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 […]

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ę […]

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 […]

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 […]

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. […]

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 […]

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 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 […]