javascript-html5-tutorial.pl

Przydatne narzędzia dla programistów: Yeoman

15 sierpnia, 2016

Dominik-W

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 =>

Czytaj dalej »

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

6 maja, 2016

Dominik-W

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.

Czytaj dalej »

Tutorial AngularJS – proste UI do sterowania elementami

12 marca, 2016

Dominik-W

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;
}

Czytaj dalej »

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

5 marca, 2016

Dominik-W

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>
...

Czytaj dalej »

Nauka AngularJS od podstaw – część II

3 lutego, 2016

Dominik-W

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”.

Czytaj dalej »

Nauka AngularJS od podstaw – część I

16 stycznia, 2016

Dominik-W

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.

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ę.

Czytaj dalej »

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

17 grudnia, 2015

Dominik-W

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.

Czytaj dalej »

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

12 grudnia, 2015

Dominik-W

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.

Czytaj dalej »

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

12 grudnia, 2015

Dominik-W

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.

Czytaj dalej »

Mini porady jQuery III – formularze

19 listopada, 2015

Dominik-W

Witamy w kolejnym artykule z serii mini porady jQuery. Dziś zajmiemy się wybranymi aspektami pracy z elementami formularzy.

1. Nie więcej niż jedna opcja możliwa do zaznaczenia w input select multiple

Ostatnio tworzyłem projekt, gdzie trzeba było pokazać UI w nieco staroświeckim stylu (podobnym do typowych aplikacji desktop sprzed lat). Niektóre z inputów musiałby być pokazane jako listy select multiple, jednak wybieranie więcej niż jednej opcji jednocześnie było zabronione.

Na szczęście nie trzeba pisać żadnej obsługi w JS – z pomocą jQuery jest to trywialne do zrobienia:

// allow only one item to select
$('#my-options').removeAttr('multiple');

W ten sposób usuwamy możliwość wybrania więcej niż jednej opcji, jednak nasz element nadal pozostaje wyświetlany jako select multiple.

Czytaj dalej »