Progress bar

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

Poziom średnio-zaawansowany

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 bar w różnych przeglądarkach

Różne przeglądarki różnie wyświetlają pasek postępu html5, różne są także domyślne style. Jeśli chcemy, aby pasek zawsze wyglądał tak samo we wszystkich przeglądarkach, potrzebujemy małego triku CSS. Gotowe rozwiązanie poniżej.

Yeoman

Przydatne narzędzia dla programistów: Yeoman

Poziom średnio-zaawansowany

Znalazła się w końcu odrobina czasu na blogowanie, dlatego dziś chciałem napisać kilka słów o jednym z przydatnych narzędzi dla programistów – Yeoman.

Yo man! Przydatne narzędzia dla programistów – pan Yeoman

Po co robić żmudne, powtarzalne czynności skoro może to za nas robić maszyna, lub w tym przypadku – program. Yeoman pozwala nam na generowanie różnego rodzaju projektów – szczególnie tworzenie struktury katalogów i niezbędnych składników, zgodnie z najlepszymi praktykami i wzorcami.

Następuje wstępne utworzenie niezbędnych katalogów oraz plików, a także zainstalowanie potrzebnych zależności (dependencies).

Przykładowo możemy tworzyć nowy AngularJS, dla którego może zostać od razu zainstalowany Bootstrap, Saas i inne rozszerzenia, których nasz projekt będzie potrzebować.

Instalacja opiera się o npm, który z pewnością mamy w naszym środowisku, jeśli mieliśmy już do czynienia z node.js. Potrzebny jest również Bower i Grunt =>

html5-css-progress-bar-mini

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

Poziom średnio-zaawansowany

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.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Gotowe. Mamy pasek postępu! Kolory i postęp definiujemy poprzez klasy CSS (np. class=”progress-bar progress-bar-danger”) oraz właściwości (np. role=”progressbar”, aria-valuenow=”100″). A ponadto ustawiamy szerokość elementu (style width).

Więcej przykładów pasków postępu poniżej.

AngularJS-tutorial-logo

Tutorial AngularJS – proste UI do sterowania elementami

Poziom średnio-zaawansowany

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.

Krok 1.

Stwórzmy dokument HTML5 i dołączmy bibliotekę AngularJS.

Krok 2.

Zdefiniujmy element, którym będziemy poruszać z poziomu UI. W naszym przykładzie stworzymy prosty element w CSS:

.my-elem {
  background: #00c;
  border-radius: 10%;
  position: absolute;
  width: 200px;
  height: 200px;
  max-width: 500px;
  max-height: 500px;

  /* speed */
  transition: 0.8s;
  -webkit-transition: 0.8s;

  /* init pos*/
  left: 100px;
  top: 200px;
}
angularjs-logo

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

Poziom średnio-zaawansowany

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 poprzedniej części mogliśmy zobaczyć jak proste w użyciu (a jednocześnie pomocne) są filtry, na przykład:

...
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
...
AngularJS-tutorial-logo

Nauka AngularJS od podstaw – część II

Poziom średnio-zaawansowany

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 także świadomość wielu przydatnych dyrektyw, np. ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Dodajmy do tego wyrażenia (AngularJS expressions). Egzystują one w podwójnych nawiasach klamrowych np. {{ expression }} i na nich AngularJS może wykonywać swoją magię. Wyrażenia mogą być także zapisane w dyrektywie ng-bind=”expression”.

angularjs-logo

Nauka AngularJS od podstaw – część I

Poziom średnio-zaawansowany

AngularJS – otwarta biblioteka języka JavaScript, rozwijana przez firmę Google. Znakomicie wspomaga tworzenie aplikacji na pojedynczej stronie (Single Page Application, SPA). Rozszerza HTML o własne, specjalne tagi. Biblioteka implementuje wzorce Model-View-Controller (MVC) oraz Model-View-ViewModel (MVVM), ułatwiając programowanie i testowanie aplikacji Web.

Nauka AngularJS – wstęp. Jak to działa?

AngularJS został stworzony z założeniem, że programowanie deklaratywne powinno być używane do budowy interfejsów i łączenia komponentów oprogramowania, natomiast programowanie imperatywne znajduje zastosowanie w logice biznesowej.

Biblioteka Angular wczytuje HTML zawierający dodatkowe, specyficzne dla tej biblioteki tagi. Obsługując owe tagi, AngularJS przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych JS.

Wartości tych zmiennych mogą być ustawiane zarówno ręcznie, jak i pobrane ze źródła w postaci JSON.

AngularJS_logo

Framework przystosowuje i rozszerza możliwości zwykłego HTML do lepszej obsługi dynamicznych treści, umożliwiając automatyczną synchronizację pomiędzy modelem i widokiem. Mówiąc najprościej zdejmuje z programisty naprawdę sporo żmudnej pracy.

Znakomitą i bardzo silną cechą AngularJS jest wiązanie danych (data binding) oraz dwukierunkowe wiązanie danych (two-way binding). Dwukierunkowe wiązanie danych w AngularJS jest uważane za jego najważniejszą funkcję.

money-5

No skill – no deal! Umiejętności front-end developera lub full-stack developera

Poziom średnio-zaawansowany

Jak to mówią no skill – no deal! Bez odpowiednich umiejętności nie zdziałamy za wiele. Ważny jest też ciągły rozwój naszych skillz.

To już nie te czasy, gdy wystarczała znajomość DHTML i PHP, obecnie developer obok języków programowania musi znać także masę narzędzi i frameworków.

Umiejętności front-end developera / full-stack developera kontra rynek

Dziś postaramy się rzucić okiem na to, co warto umieć chcąc być dobrym front-end lub full-stack developerem. Jakie są trendy, a przede wszystkim czego wymaga rynek – zleceniodawcy i pracodawcy.

Jakie są dziś pożądane umiejętności front-end developera lub full-stack developera? Branża rozwija się niezwykle dynamicznie w tym kierunku, a wiele osób rozważa zostanie front-end developerem, którzy są dziś rozchwytywani.

mustache-js

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

Poziom zaawansowany

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

Ionicons

mustache JS

Kolejny zatem krok to strona html5, stworzona w oparciu o Bootstrap.

Szczególnie zwróćmy uwagę na 2 elementy – nawigację oraz szablony Mustache.

mustache-js

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

Poziom zaawansowany

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 Mustache (logic-less), który powstał dla wielu różnych języków programowania: http://mustache.github.io.

Dlaczego Mustache (i podobne biblioteki) są fajne?

Przede wszystkim mając dane np. pochodzące z obiektów JSON, nie musimy przetwarzać ich ręcznie, co bywa żmudne. Zamiast tego definiujemy niewielki szablon i placeholdery, w których Mustache JS dokona interpolacji. W ten sposób otrzymamy od razu dane zintegrowane z warstwą front-end naszego projektu.

Mając opanowane Mustache JS, oszczędzamy cenny czas i wysiłek. Za chwilę zobaczymy to w praktyce.