Obuwnicze zmagania z materią

Ciąg dalszy spotkania z bootstrap. W poprzednim artykule https://www.rafalrebacz.pl/2015/09/20/jak-obuwie-moze-ulatwic-zycie/ było kila słów o tym jak zacząć przygodę z frameworkiem bootstrap. Teraz ciąg dalszy, w którym pokażę jeszcze kilka ciekawych możliwości, które są oferowane przez bootstrap.

Tak jak było już wspominane grid składa się z 12 kolumn jednakowej szerokości, w oparciu o które budujemy szablon strony. Poprzednie przykłady pokazywały rozwiązania polegające na zapełnieniu okna kolumnami z treścią. Przykład poniżej pokaże, że nie zawsze musi być treść – czasem może jej nie być (bo będzie offset).

Offset

Jak działa offset? Bardzo prosto – przesuwa nam kolumnę z treścią o „n” pozycji.
Czytaj dalej Obuwnicze zmagania z materią

Jak obuwie może ułatwić życie?

Twitter Bootstrap – bo o nim będzie dzisiaj mowa – może ułatwić życie gdy tworzymy responsywne strony www. Standardowo szablon pustej strony opartej o bootstrap wygląda tak jak poniżej:

<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bootstrap 101 Template<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Bootstrap --&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>

    <span class="c">&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;</span>
    <span class="c">&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;</span>
    <span class="c">&lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>

    <span class="c">&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="c">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
</div>

Jak wygląda strona, ano tak -> strona bootstrap czyli nic interesującego.

Jeśli chcemy mieć szybko jakiś efekt możemy użyć „gotowca” w postaci strony -> https://getbootstrap.com/examples/jumbotron/
Czytaj dalej Jak obuwie może ułatwić życie?

Buttony, ach buttony

Nie raz na stronach można zobaczyć ładne przyciski. Zazwyczaj wykonywane są w postaci grafiki związanej z layoutem strony WWW ale niekoniecznie musi tak być. Jeśli mamy linki, które chcielibyśmy przedstawić w postaci przycisków to możemy tego dokonać z pomocą CSS.

Załóżmy, że chcemy mieć śliczny przycisk „uruchom” w kolorze zielonym. Rozwiązaniem pierwszym jest zastosowanie obrazka. No ale obrazek trzeba zrobić w programie graficznym lub wykorzystać jakiś „stockowy”. Innym rozwiązaniem jest zrobienie obrazka w samym HTML i CSS. Poniżej przedstawiam przykłady jak można to zrobić.
Czytaj dalej Buttony, ach buttony

WordPress – czas na potomka

WordPress pozwala na dostosowywanie motywów do własnych wymagań. Możemy to zrobić edytując pliki oryginalnego motywu ale przy aktualizacji motywu zostaną one nadpisane nowymi wersjami plików motywu i stracimy zmiany, które zostały przez nas wykonane.

Jeśli nie chcemy stracić zmian, które zostały przez naz wykonane musimy posłużyć się motywami potomnymi (child themes). Jak wyprodukować sobie potomka? Bardzo prosto. Załóżmy, że korzystamy z motywu twentysixteen i w tym motywie chcielibyśmy zrobić kilka zmian. W tym celu po pierwsze musimy utworzyć folder np. twentysixteen-child-test dla naszego nowego motywu w /wp-content/themes/
Czytaj dalej WordPress – czas na potomka

WordPress – platforma do blogów i nie tylko

Pisać, pisać , pisać …. programować, programować … blogować, blogować. No ale czy do tego trzeba pisać od razu swój system CMS? Oczywista odpowiedź jest – nie trzeba. Lepiej użyć tzw. gotowca czyli znany wielu osobom system CMS pod nazwą WordPress (https://www.wordpress.org/).

WordPress może zadziwić ilością dostępnych motywów pozwalających customizować wygląd swojego bloga. Zadziwić może ilością dostępnych wtyczek, dzięki którym z systemu CMS może stać się systemem e-commerce np. sklepem internetowym  gdy wykorzystamy np. wtyczkę wooCommerce (https://www.woothemes.com/woocommerce/).
Czytaj dalej WordPress – platforma do blogów i nie tylko

Sublime Text 3 z dodatkiem Emmet

W pewnym momencie mój ulubiony Notepad++ przestał mi wystarczać w mojej pracy i choć cenię go za wiele rzeczy postanowiłem „przesiąść” się na coś ciekawszego. Wybór padł obecnie na edytor Sublime (po lekturze wielu wątków dotyczących narzędzi do kodowania wybrałem ten edytor i jeszcze kilka innych).

Dobrym dodatkiem do Sublime jest Emmet czyli „plugin” zwiększający produktywność developera poprzez generowanie kodu po wpisaniu odpowiedniego skrótu i naciśnięciu klawisza [tab]. Dokumentacja do Emmet znajduje się tutaj->https://docs.emmet.io/ Składnia Emmeta opisana jest jasno tutaj -> https://docs.emmet.io/abbreviations/syntax/

Przykłady działania Emmet (lista dostępna tutaj ->https://docs.emmet.io/cheat-sheet/)
Czytaj dalej Sublime Text 3 z dodatkiem Emmet

Edytor dla programisty

Kto dużo stuka „z palca” w klawiaturę pewnie nie jeden raz stanął przez dylematem wyboru odpowiedniego narzędzia do przelewania swoich pomysłów z głowy do komputera.

Ci, którzy korzystają z Windows czymś naturalnym uważają na początku korzystanie z systemowego Notepada – no ale to nieszczęście a nie edytor dla programisty.

O niebo lepszy od systemowego Notepada jest Notepad++ (https://notepad-plus-plus.org) doceniony przez niejednego developera. Niby tylko dwa „+” a jaka wielka różnica w funkcjonalności i wygodzie korzystania. Możliwość otworzenia wielu dokumentów w jednym oknie programu, kolorowanie składni, możliwość porównywania zawartości dokumentów, zapis dokumentów w różnych formatach oraz wielka ilość „pluginów” i szybkość działania to główne zalety tego programu, który docenią programiści.
Czytaj dalej Edytor dla programisty