10 narzędzi ułatwiających pracę front-end developera. Część 1

Zdjęcie główne artykułu pochodzi z pl.depositphotos.com

W pierwszej części artykułu przedstawiam listę 5 najczęściej używanych narzędzi frontendowych, z których korzystam podczas tworzenia projektów.

1. Sass

2. Gulp

3. BEM

4. Tinypng

5. Blade template

1. Sass (Syntactically Awesome Style Sheets)

Sass to rozszerzenie języka CSS pozwalające na zagnieżdżanie, importowanie oraz używanie zmiennych i funkcji. Dzięki temu rozbudowane arkusze stylów są czytelne, a tworzenie ich jest zdecydowanie szybsze. Sass pozwala na używanie dwóch rodzajów plików:

• .scss – to składnia języka CSS rozszerzona o możliwości Sass. Wymaga używania nawiasów klamrowych oraz średników.
• .sass – nawiasy zastąpione zostały wcięciami a wymóg zakończenia każdej linii średnikiem został zniesiony.

W HighSolutions używamy plików .scss. Uważamy ten kod za bardziej czytelny oraz łatwiejszy w integracji z kodem otrzymanym od klienta czy bazą bibliotek znalezionych w internecie. Ponadto składnia ta kompatybilna jest w pełni ze składnią CSS i na odwrót.

Instalacja

1. Otwórz Terminal lub Wiersz Poleceń.

2. Wpisz gem install sass.

Używając systemu operacyjnego Windows, należy najpierw zainstalować Ruby

Aby sprawdzić czy instalacja przebiegła pomyślnie wpisz sass -v.

Przykłady

Rozszerzenie .scss i .sass

Zmienne

Zagnieżdżanie

Import

Mixins

Dziedziczenie

Operators

2. Gulp

Rozbudowane narzędzie do automatyzacji pracy. Pozwala między innymi na:

• kompresję i modyfikację obrazów,
• kompilację Sass do kodu CSS,
• walidację kodu,
• zagnieżdżanie i minimalizację plików JavaScript i CSS,
• wdrażanie plików na potrzeby środowiska lokalnego czy serwera produkcyjnego. 

gulp.watch

Oczekuje we wskazanych katalogach lub plikach na zmiany, po których wykonuje określone zadania Gulp. Idealne rozwiązanie do pracy z plikami Sass. Gulp-watch obserwuje zmiany i automatycznie kompiluje je do plików .css. 

instalacja

npm install gulp –save-dev

przykład

var gulp = require(’gulp’);

var sass = require(’gulp-sass’);

  gulp.task(’watch’, [’sass’], function(){

gulp.watch(’resources/assets/sass/**/*.scss’, [’sass’]);

});

gulp-sass

Pozwala na kompilację i minimalizację plików Sass.

instalacja

npm install gulp-sass –save-dev

przykład

var gulp = require(’gulp’);

var sass = require(’gulp-sass’);

var sassOptions = {

  errLogToConsole: true,

  outputStyle: 'compressed’

};

gulp.task(’sass’, function(){

  return gulp.src(’resources/assets/sass/*.scss’)

     .pipe(sass(sassOptions).on(’error’, sass.logError))

     .pipe(gulp.dest(’public_html/css’))

});

gulp-sourcemaps

Tworzy mapę źródłową plików Sass.

instalacja

npm install gulp-sourcemaps –save-dev

przykład

var gulp = require(’gulp’);

var sass = require(’gulp-sass’);

var sassOptions = {

  errLogToConsole: true,

  outputStyle: 'compressed’

};

var sourcemaps = require(’gulp-sourcemaps’);

gulp.task(’sass’, function(){

  return gulp.src(’resources/assets/sass/*.scss’)

     .pipe(sourcemaps.init())

     .pipe(sass(sassOptions).on(’error’, sass.logError))

     .pipe(sourcemaps.write())

     .pipe(gulp.dest(’public_html/css’))

});

gulp-autoprefixer

Podczas kompilacji plików Sass dodaje do wynikowego kodu CSS wszelkie potrzebne prefiksy, zapewniające kompatybilność naszej strony ze wszystkimi najpopularniejszymi przeglądarkami.

instalacja

npm install gulp-autoprefixer –save-dev

przykład

var gulp = require(’gulp’);

var sass = require(’gulp-sass’);

var sassOptions = {

  errLogToConsole: true,

  outputStyle: 'compressed’

};

var autoprefixer = require(’gulp-autoprefixer’);

gulp.task(’sass’, function(){

  return gulp.src(’resources/assets/sass/*.scss’)

     .pipe(sass(sassOptions).on(’error’, sass.logError))

     .pipe(autoprefixer())

    .pipe(gulp.dest(’public_html/css’))

});

gulp-browsersync

Podgląd strony “na żywo”. Po każdej zapisanej zmianie narzędzie automatycznie odświeża stronę w przeglądarce. Opcje synchronizacji pozwalają na przeglądanie jednej strony w wielu oknach o różnych rozmiarach. Dzięki temu widzimy na bieżąco, jak nasza strona wygląda na różnych urządzeniach.

instalacja

npm install gulp-browsersync –save-dev

przykład

var gulp = require(’gulp’);

var browserSync = require(’browser-sync’).create();

gulp.task(’browserSync’, function() {

  browserSync.init({

     proxy: 'local.dev’

  });

});

gulp-iconfont

Tworzy zestaw ikon z plików .svg i zapisuje jako font. Dzięki temu otrzymujemy w pełni edytowalne grafiki gotowe do wykorzystania na naszej stronie.

instalacja

npm install gulp-iconfont –save-dev

przykład

var gulp = require(’gulp’);

var iconfont = require(’gulp-iconfont’);

var iconfontCss = require(’gulp-iconfont-css’);

var fontName = 'Icons’;

gulp.task(’iconfont’, function(){

  gulp.src([’resources/assets/svg/*.svg’])

     .pipe(iconfontCss({

       fontName: fontName,

       path: 'resources/assets/sass/components/_icons-template.scss’,

       targetPath: ’../../resources/assets/sass/components/_icons.scss’,

       fontPath: ’../fonts/’

     }))

     .pipe(iconfont({

       fontName: fontName,

       normalize: true

}))

.pipe(gulp.dest(’public_html/fonts’));

});

_icons-template.scss

$unique: unique-id();

@font-face {

font-family: „<%= fontName %>”;

src: url('<%= fontPath %><%= fontName %>.eot?x=’ + $unique);

src: url('<%= fontPath %><%= fontName %>.eot?x=’ + $unique + '#iefix’) format(’eot’),

url('<%= fontPath %><%= fontName %>.woff?x=’ + $unique) format(’woff’),

url('<%= fontPath %><%= fontName %>.ttf?x=’ + $unique) format(’truetype’)

}

.<%= cssClass %>:before {

font-family: „<%= fontName %>”;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-style: normal;

font-variant: normal;

font-weight: normal;

text-decoration: none;

text-transform: none;

line-height: 1;

}

.<%= cssClass %>–default:before {

background: linear-gradient(to top, $fountain_blue, $hippie_blue 100%);

background: -o-linear-gradient(to top, $fountain_blue, $hippie_blue 100%);

background: -ms-linear-gradient(to top, $fountain_blue, $hippie_blue 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

<% _.each(glyphs, function(glyph) { %>

.<%= cssClass %>-<%= glyph.fileName %>:before {

content: „\<%= glyph.codePoint %>”;

}

<% }); %> 

3. BEM (Block Element Modifier)

Metodologia nazewnictwa klas w języku CSS pomagająca w udostępnianiu kodu oraz wyodrębnianiu komponentów i ponownym ich użyciu. Polega na dzieleniu strony na osobne bloki, elementy i modyfikatory. Każdy blok zawiera elementy, czyli części, z których się składa. Drobne różnice elementów i bloków wyodrębniane są modyfikatorem.

HTML

<div class=”blok”>

          <div class=”blok__element1”></div>

          <div class=”blok__element2 blok__element2–modyfikator”></div>

</div>

Sass

.blok {

          &__element1 {

          }

          &__element2 {

               &–modyfikator {

                }

          } 

}

4. TinyPNG

TinyPNG to narzędzie redukujące rozmiar pliku obrazu o rozszerzeniach .jpg i .png. Wykorzystując technikę kwantyzacji, zmniejsza liczbę kolorów w obrazie zamieniając 24-bitowy plik w znacznie mniejszy – 8-bitowy. Usuwane są również wszystkie zbędne metadane a efekt końcowy nie różni się jakością od oryginału. Dzięki takiej kompresji, zdjęcia na naszych stronach ładują się zdecydowanie szybciej.

Autorzy aplikacji zadbali o jej dostępność. Z algorytmu skorzystać można poprzez aplikację przeglądarkową tinypng.com, wtyczkę programu Photoshop CC oraz Developer API.

A czy Ty widzisz różnice?

5. Blade template

Potężny silnik PHP do tworzenia szablonów będący częścią frameworka Laravel. Dzięki temu, że widoki kompilowane są do czystego pliku php i zapisywane w pamięci podręcznej, system nie obciąża naszej aplikacji. Pliki o rozszerzeniu .blade.php pozwalają na:

• używanie pętli,
• instrukcje warunkowe,
• wyświetlanie zmiennych,
• importowanie zewnętrznych plików,
• tworzenie układu podzielonego na sekcje.

Dzięki Blade template możemy podzielić naszą stronę na części, a powtarzający się kod umieścić w jednym pliku i importować w odpowiednich miejscach, używając wbudowanych poleceń.

Przykład

<!doctype html>

<html>

<head>

  <meta charset=”utf-8″>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>

  <meta name=”viewport” content=”width=device-width, initial-scale=1″/>

  <title>{{ isset($meta) ? $meta[’title’] : ” }}</title> 

  <meta name=”description” content=”{{ isset($meta) ? $meta[’description’] : ” }}” />

  <meta name=”keywords” content=”{{ isset($meta) ? $meta[’keywords’] : ” }}” />

  <meta name=”referrer” content=”no-referrer”/>

  <meta name=”csrf-token” content=”{{ csrf_token() }}”/>

  <!– Chrome, Firefox OS and Opera –>

  <meta name=”theme-color” content=”#000000″>

  <!– Windows Phone –>

  <meta name=”msapplication-navbutton-color” content=”#000000″>

  <!– iOS Safari –>

  <meta name=”apple-mobile-web-app-status-bar-style” content=”#000000″>

  @include(’website._layouts.partials.favicon’)

</head>

<body>

<div id=”app”>

  @yield(’before’)

  @foreach($data as $el)

  {{ $el->title }}

  @endforeach

  @yield(’content’)

  @include(’website._components.footer’)

</div>

@include(’website._layouts.partials.scripts’)

</body>

</html>

Podsumowanie

To 5 pierwszych propozycji niezbędnych przy pracy front-end developera. Wkrótce ciąg dalszy, gdzie opiszę narzędzia pomagające w analizowaniu naszej strony. Poruszę również temat zwiększenia wydajności tworzenia kodu oraz dostosowania strony pod urządzenia mobilne.

–

Amadeusz Kozłowski

Front End Developer w HighSolutions

Firmowy ekspert od optymalizacji serwisów internetowych oraz kodowania grafiki zgodnie z zasadami Responsive Web Design. To dzięki niemu nasze realizacje szybko się ładują oraz są wygodne do przeglądania także na mniejszych wyświetlaczach urządzeń mobilnych.