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.

jQuery

Mini porady jQuery III – formularze

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.

jQuery

Pluginy jQuery, biblioteki JavaScript, tutoriale i kody – nowa strona

Już działa! Zapraszamy na nową stronę z interesującymi zasobami.

Znajdziemy tam pluginy jQuery, różne przydatne biblioteki JavaScript, tutoriale i wiele więcej. Publikujemy materiały naszym zdaniem godne uwagi, aby w jednym miejscu zarówno Web Developer jak i Web Designer mogli znaleźć rozwiązania do wykorzystania we własnych projektach. A może nawet nowe pomysły.

Obok przydanych i interesujących pluginów jQuery, pojawią się inne zasoby, dotyczące m.in. RWD i mobile Web, HTML5 i inne.

jsnet

css_javascript_3

CSS tips and tricks – porady CSS

Poziom średnio-zaawansowany

Pracując ciągle między innymi z CSS, tworzy się lub znajduje ciekawe rozwiązania różnych zadań lub napotkanych problemów.

Porady CSS

1. Cross-browser CSS word break – przełamanie zbyt długiego tekstu

Przykładowo gdy tworzymy front-end dla chatu on-line, i mamy div-y na poszczególne wiadomości. Użytkownik pisze długi ciąg, długi adres URL, lub inny ciąg nieprzerwanych znaków. Taki tekst nie „zawinie się” i wyjdzie w linii prostej poza nasz div.

Może przetwarzać ciągi w naszym języku programowania, jednak bezboleśnie można to załatwić w CSS. Nasz div musi otrzymać style CSS, które się tym zajmą:

.word-break {
    word-break: break-all;
    word-wrap: break-word;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
} 

To zapewni poprawne wyświetlenie się nietypowego tekstu w naszym elemencie.

Program control

Mini porady JavaScript i jQuery II

Poziom średnio-zaawansowany

OK! Pora na kolejne szybkie porady JavaScript i jQuery. Dziś co nieco o Fancybox plugin, checkboxach i parsowaniu linków w tekście.

Porady JavaScript i jQuery

Do rzeczy.

1. Wysyłanie formularza warunkowo – tylko jeśli użytkownik zaznaczył checkbox (np. akceptuję regulamin).

Oczywiście chodzi o walidację w JS / jQ, bez użycia języka takiego jak PHP.

Mamy sobie nasz checkbox:

<div class="error">Please accept the TOS!</div>

<input type="checkbox" name="terms" id="terms" value="1" />
<label style="display: inline;" for="terms">I agree ... </label>

Power JavaScript

Mini porady JavaScript i jQuery

Poziom średnio-zaawansowany

Kolejny artykuł z serii tricki i porady JavaScript (jQuery, CSS i inne również), jednak w nowej odsłonie – krótkich porad.

Szybkie porady JavaScript i jQuery

1. Klikalne tło strony

Chodzi o przypadek, gdy chcemy zrobić klikalne tło strony, przykładowo reklamę odsyłającą gdzieś użytkownika po kliknięciu w tło. Opakowanie (wrapper) contentu strony, lub dodanie zdarzenia onclick dla tła, czy inne rozwiązania, które jako pierwsze przychodzą na myśl.

Tutaj mamy proste i skuteczne rozwiązanie. Ustawiamy nasz obraz tła:


var img = "http://our-page.com/image.png";
var link = "http://target-website.com";

document.body.style.backgroundImage = "url('" + img + "')";

More advanced JavaScript

JavaScript, HTML5, CSS i praca z data URI

Poziom średnio-zaawansowany

Co to takiego? Schemat data URI to prostu sposób reprezentacji danych, jednak w taki sposób, że dane który zwykle przechowujemy w plikach (np. zdjęcie) występują w postaci ciągu tekstowego. Ciąg taki ma odpowiedni format, jednak pozwala programistom na łatwe przesyłanie takiego zasobu np. między aplikacjami Web, a także użycie bezpośrednio w kodzie CSS bądź JavaScript.

Nie potrzeba ponadto wykonywania dodatkowych żądań HTTP w celu pobrania dodatkowych plików, jako że takie dane mogą zostać pobrane od razu, jednym żądaniem.

Ciąg Data URI ma postać:

data:[media type][;charset=xxx][;base64],data

Generowanie oraz używanie data URI

O użyciu Data URI pisaliśmy już dawniej w kontekście operacji na HTML5 Canvas. Dziś rozwiniemy temat.

learning

Jak zacząć swoją przygodę z JavaScript – prezentacja

Poziom podstawowy

Tematy związane z JavaScript dla początkujących, prezentowaliśmy na blogu już dość dawno.

Ostatnimi czasy górowały bardziej zaawansowane tematy.

Chcemy jednak polecić ciekawą prezentację dotyczącą rozpoczęcia (mamy nadzieję długiej) przygody z JavaScript…