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…

udontsay-128

Tutorial node.js i socket.io – system komentarzy „real-time”

Poziom zaawansowany

Poprzednio pisaliśmy o tym jak pracować z node.js i socket.io. Dziś rozwiniemy temat przykładem praktycznym. Stworzymy prosty, wydajny system komentarzy między użytkownikami, który będzie przetwarzał i odświeżał listę komentarzy wszystkim użytkownikom, którzy mają otwartą naszą aplikację web.

Tutorial node.js i socket.io – real-time comments

Krok po kroku, od podstaw. Oczywiście sama strona i funkcjonalność komentarzy będzie uproszczona – każdy może łatwo dostosować je do własnych potrzeb, począwszy od danych, jakie chce trzymać w bazie danych.

Skupiamy się tutaj na wykorzystaniu node.js i socket.io. Zakładamy że nasz system komentowania podpięty będzie do artykułów.

Krok 1 – start

Stwórzmy folder na nasz projekt, otwórzmy konsolę i przejdźmy do tego folderu. Z poziomu wiersza poleceń instalujemy potrzebne moduły node.js:

$ npm install socket.io

oraz

$ npm install mysql

Nie konieczne gdy mamy już zainstalowane te moduły globalnie.

Krok 2 – schemat bazy MySQL

Stwórzmy bazę danych (np. node_tests) oraz prostą tabelę (np. tbl_comments). Przykładowy kod SQL zaprezentowany poniżej.

CREATE TABLE IF NOT EXISTS `tbl_comments` (
  `comment_id` int(11) NOT NULL AUTO_INCREMENT,
  `article_id` int(11) DEFAULT '0',
  `sender` varchar(100) NOT NULL,
  `body` TEXT NOT NULL,
  `created_at` datetime DEFAULT NULL,
  PRIMARY KEY (`comment_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
node-js

Node.js i socket.io

Poziom zaawansowany

Node.js to rewelacja sama w sobie. Dodajmy jeszcze do tego socket.io, a otrzymamy możliwości o których dawniej nawet nam się nie śniło.

Node.js i socket.io

Po omówieniu podstaw node.js oraz pracy z bazami danych z poziomu tej technologii, pora sięgnąć po jeszcze ciekawsze rzeczy.

Jedną z nich z pewnością jest socket.io. Wystarczy nawiązać połączenie pomiędzy naszą stroną (front end) a skryptem node uruchomionym na serwerze:

var socket = io.connect('//localhost:1337');

Zacznijmy jednak od podstaw node.js i socket.io, krok po kroku.

Wpierw dostosujmy naszą konfigurację o elementy potrzebne dla gniazdek. Konfigurację przedstawiliśmy w poprzednim artykule, teraz ją tylko rozszerzymy…