Zmiana wielkości pola checkbox

Pola checkbox każdy widział, chociażby przy formularzach, gdzie trzeba zaakceptować warunki licencji, regulamin itd.

Temat dość błahy lub banalny, ale może być też przydatny. Chodzi o zmianę wielkości pola checkbox. Można zadać pytanie, po co zwiększać wielkość, skoro jest widoczny? 

Tu trzeba wyjść na przeciw osobom niedowidzącym lub po prostu chcą mieć większe pola.

Generalnie, pola checkbox daje się większe, aby każda osoba widziała i nie miała problemu ze znalezieniem takiego pola. Przykładowo, wypełni formularz i klika na submit Wyślij, ale pojawi się komunikat o zaakceptowaniu regulaminu. I tu może osoba przeoczyć.

Jak zrobić? Jeżeli mamy już formularz z polem, z polami, to wystarczy do pliku css, dodać następujące linijki:

input[type='checkbox']{
    -moz-transform: scale(2);
    transform: 2;
}

Po zapisaniu, pola checkbox będą większe, ale uwaga! Tylko dla przeglądarek Firefox, dlatego jest tylko -moz-transform.

Implementacja KCFinder w edytorach CKEditor i TinyMCE

Na blogu pisałem o edytorach CKEditor i TinyMCE, pokazując zrzuty kodu danego edytora. Czas na zaimplementowanie KCFinder do ładowania mediów np: zdjęć.

KCFinder był pierwszym pluginem do edytora CKEditor. Owszem są inne rozwiązania (lepsze) np:CKFinder, który jest dodatkiem płatnym, choć wersja free umożliwia korzystanie bez opłat tylko dla jednego użytkownika. Są jeszcze inne managery ładowania mediów.

KCFinder można było pobrać ze strony http://kcfinder.sunhater.com/download. Obecnie strona nie istnieje, ale dla przypomnienia, jak wyglądała, to dam wcześniejszy rzut strony, który kiedyś wykonałem, gdy strona działała.

strona Sunhater - KCFinder

I z takiej strony można było pobrać, odpowiednią wersję dla edytora CKEditor lub dla TinyMCE. Obecnie KCFinder można pobrać z tej strony: https://sourceforge.net/projects/kcfinder/. 

Zacznijmy od tego, jak zaimplementować w edytorach CKEditor i w TinyMCE. Zakładam, że pobrałeś i rozpakowałeś, a następnie przeniosłeś katalog kcfinder w miejsce, gdzie masz już swój edytor na stronie (czyli działa wybrany edytor). 

Jak nie wiesz o czym piszę, to na blogu pisałem o obu wspomnianych edytorach, i jest tam zrzut, gdzie znajduje się katalog kcfinder. 

Implementacja KCFinder w edytorze CKEditor

Wejdź w katalog CKEditor i wybierz config.php. Jeżeli otworzyłeś dowolnym edytorem plik config.php, to teraz wystarczy wkleić (u mnie przepisać!) następujące linijki kodu:

Zapisz i możesz zamknąć, ale jedna uwaga, ten kod musi być w: 

CKEDITOR.editorConfig = function( config ) {

Tu znajdują się linijki kodu, i nie tylko linijki odpowiadające za kcfinder, ale też za inne ustawienia edytora

}

Następnie wejdź w katalog KCFinder i otwórz plik config.php. Dla obu edytorów ustawienia są takie same, dlatego nie będę umieszczał dwa razy tych samych linijek kodu, choć mogą się różnić wg.swoich potrzeb. O to, co musisz zmienić. Patrz na zrzucie.

Domyślnie disabled jest ustawione na TRUE, zmień na FALSE. Dalej, musisz podać ścieżkę, gdzie mają się ładować zdjęcia. Możesz, ale nie musisz, dać nazwę dla okna, w którym będziesz mógł załadować zdjęcie. I tyle! Jak wcześniej napisałem, te ustawienia są takie same dla obu edytorów. 

Implementacja KCFinder w edytorze TinyMCE

Robisz te same kroki, jakie wyżej napisałem przy implementacji KCFinder w CKEditor. W pliku config.php edytora TinyMCE  ustawiasz to co jest wyżej. Natomiast, mając pod uwagę, że TinyMCE jest edytorem JS, wystarczy (zależnie od położenia pliku konfiguracyjnego) w ramach funkcji:

tinymce.init({ 

Wpisać ten oto fragment kodu:

});

Jak widać, jest tylko jedna linijka, która odpowiada za ładowanie pliku, reszta linijek, to dodatkowe ustawienia.  Po zapisaniu powinno teraz działać ładowanie zdjęć do edytora. 

Oprócz  KCFinder i CKFindera jest inne rozszerzenie o nazwie  file manager, niestety też jest płatny.

Dlatego dobrym wyjściem dla KCFinder i CKFinder, alternatywą może być Responsive file manager i można stąd pobrać: https://www.responsivefilemanager.com/ . Sam zaimplementowałem do CKEditora i w porównaniu z KCFinder dużo lepiej wygląda i ma więcej możliwości. Ale to już na osobny temat.

Animacje na stronach - biblioteka AOS.js

W poprzednim temacie pisałem o animacjach na stronach, i też pisałem, czy warto stosować na stronach internetowych. Tym razem przedstawię ciekawą bibliotekę, która daje ciekawe efekty.

Biblioteka AOS

Jest ciekawą biblioteką, którą możemy łatwo zaimplementować na naszej stronie. Wystarczy ściągnąć i podpiąć do strony oraz też dać odpowiednie linki w ramach <head></head>. 

Nie będę tu opisywał krok po kroku o tej bibliotece, ponieważ jest dobrze opisana na stronie autora znajdującego się na github'ie. I jest pod tym linkiem: https://github.com/michalsnik/aos. 

Natomiast, aby zobaczyć, jak działa, jakie efekty daje ta biblioteka, możemy zobaczyć tu na stronie autora: https://michalsnik.github.io/aos/.

Sam zastosowałem tę bibliotekę, która jest na jednym z moich stron, w  mojej galerii. 

Oczywiście, można zastosować bibliotekę dotyczącą animacji, która jest na tej stronie https://daneden.github.io/animate.css/ i też daje ładne efekty, tylko tu już nie chodzi o samo dołączenie i odwołanie do zewnętrznych zasobów(chodzi o linki w head), ale też trzeba napisać kod w JS, który pozwoli taką animację zapętlić ileś razy. Bez JS, będzie działać animacja, ale raz!

To tyle na temat animacji.

Animacje na stronach internetowych. Czy warto stosować?

Temat będzie o animacji stron internetowych, nie bibliotek, które umożliwiają animację. Napiszę, czy warto stosować, czy nie.

Animacje na stronach internetowych zagościły od paru lat i wyglądają całkiem dobrze. I odpowiadając na pytanie, które jest w temacie, to tak, bo przecież po co są stworzone? Do gier? Możliwe, ale przeważnie takie animacje ładnie wyglądają, gdy przykładowo  przewijamy stronę w dół, widząc pojawiające się działy tekstów, zdjęć itd. 

Wyżej odpowiedziałem na pytanie, czy warto stosować, ale zastosowanie  w dużej ilości, może wyglądać źle! Czy animacja będzie na stronie głównej, czy na wszystkich stronach, to zależy od twórcy strony. Nie można przesadzać z animacją, bo czasem może wyjść tak, że nic nie będzie czytelne. A czy zastosujemy animację na głównej, czy na wszystkich stronach, będzie zależeć od rodzaju animacji. 

Animacje to nie tylko płynne ładowanie treści, ale też poruszające się elementy na stronach np: obracające się logo, ruchomy tekst, wyskakujące powiadomienia itd. Tak naprawdę, zależy, co chcemy zrobić, aby taka animacja była. 

Kolejny temat będzie kontynuacją animacji i przedstawię ciekawą bibliotekę, która daje ciekawe efekty (efekty takie same).

Placeholder w formularzach. Czy warto stosować placeholder?

Dzisiejszy temat będzie dotyczył formularzy, a dokładniej etykiety pola formularza o nazwie placeholder. I odpowiem na pytanie zawarte w temacie, czy warto stosować placeholder, czy lepiej coś innego. 

Kilka lat temu, placeholder zyskał dużą popularność stosowania w formularzach, które są na stronach internetowych. I do dziś stosuje się placeholder (również ja), ale czas leci do przodu, i już niektóre  strony, przestały używać placeholder. Do takich stron zalicza się m.in Onet poczta, Gmail, Empik. Nie ma  już, że jak jest pole input aktywne, to już mamy czyste pole. Wspomniane wyżej witryny, zrobiły tak, że gdy aktywne jest pole, to nazwa pola idzie na górę, do póki nie zwolnimy pola. 

Dobrze, ale jeżeli nie placeholder, to co innego możemy zastosować? Możemy zastosować zwykłe etykietę label nad polami lub obok pól formularza. 

Poniżej napisałem dwa formularze. Jeden z placeholder, drugi z etykietami label. Kolejne zdjęcie pokazuje, co stanie się, gdy pole jest aktywne.

Grafika 1. formularze

Jak  widać na powyższym formularzu, gdy pole jest aktywne, to jest inny kolor, ale placeholder znika! Gdyby użytkownik mial telefon, i wrócił po czasie, to nie wiedziałby, co ma wprowadzić, i to jest minus stosowania placeholder w formularzach. Natomiast mając etykietę label nad polami, nadal widzimy nazwę pola i nic nie znika, a mamy tylko aktywne pole z innym kolorem. To pokazałem na drugiej grafice.

Grafika 2 formularze

Nie trzeba pisać, że jest różnica. A to, gdzie label będzie, czy na górze, czy obok pól, to już zależy od użytkownika.  

I odpowiadając na pytanie, które jest w temacie. Moim zdaniem placeholder, nie powinien być stosowany, ponieważ, jak już wyżej napisałem, ma ten jeden minus! Znika label! Jednak, można go stosować w formularzach, ale pamiętajmy, że placeholder nie jest tak bardzo widoczny dla wszystkich osób, co może utrudniać czytanie i wypełnianie formularzy.

Najlepiej stosować placeholder, który po aktywacji pola idzie na górę pola formularza, wtedy wiemy i widzimy, co wpisujemy do pola.

Szum wokół JQuery. Czy warto uczyć się JQuery?

Ostatnio powstało wiele tematów, czy filmów na temat nauki JQuery. Jedni nadal używają, drudzy zabraniają, bo!, JS na tyle się rozwinął, że JQuery nie jest już potrzebny. To ja napiszę moje zdanie na temat tej biblioteki.

Na początku był krytykowany język PHP, teraz czas na JQuery i zastanawiam się, czemu krytykują? Nie udaje im się napisać aplikacji, czy stron, a może twierdzą, że kto używa JQuery, to ten jest zacofany i nie zrobi porządnej aplikacji z użyciem JQuery. 

Napiszę tak, piszę w PHP i korzystam z JQuery. Nie uważam, abym był zacofany i pisał kiepskie aplikacje. Każdy woli to, co mu pasuje. Każdy powinien zdecydować, czy chce nauczyć się JQuery, czy innego języka.
A takie straszenie, że dziś jest rok 2019, to już porzucajcie jQuery, bo Ja Wam tak mówię.... Takie słowa wcale nie zachęcają do porzucania JQuery, czy innego języka. Raczej przedstawiają taką osobę w negatywnym świetle!

Co do PHP, to już pisałem wcześniej. Ale mogę zgodzić się z dwoma kwestiami. JS naprawdę mocno rozwinął się i jeżeli chcemy pisać aplikacje np: klienckie, to musimy najpierw poznać sam JS ES6, a dopiero dany framework np: React, Angular, czy Vue itp. 

JQuery jest biblioteką, która bazuje na JavaScript, ma w sobie wiele ciekawych efektów, ale korzystać z JQuery, aby zrobić jedną animację, to jest wg.mnie bez sensu!

Odpowiadając na pytanie w temacie. Tak, warto poznać i nauczyć się, ale nie przeginajmy z ilością! Mam tu na myśli efekty wizualne, przejścia itp.  Korzystajmy, jeżeli musimy lub chcemy to dodać do swojej strony. Kolejna sprawa, zadaj sobie pytanie, co chcesz stworzyć? Jaka to ma być aplikacja? Jak ma składać się z angulara, reacta, czy vue + node.js (niezbędne) + baza NoSQL (możesz skorzystać z MySQL, ale nie jest zalecane!), to nie używaj JQuery i PHP! Po co?

Ale nikt Ci nie zabrania, aby skorzystać z PHP + JS + CSS i dowolnej bazy danych! To Ty wybierasz i Ty decydujesz, czego nauczysz się lub będziesz dalej pogłębiał wiedzę. 

Reasumując, nie patrz na innych, patrz na siebie. To że inni piszą w  JS bez JQuery, nie oznacza, że ty tak też musisz robić, ale jak wyżej napisałem. Ty decydujesz o nauce danego języka, danej biblioteki, czy frameworku.

Wybór PHP a inne języki programowania. Ty jeszcze piszesz w PHP?!

Można sobie zadać pytanie, jaki język do tworzenia stron internetowych jest dobry i aktualny. Język, który cały czas się rozwija. Czy warto programować w PHP?

Kiedyś do stworzenia strony internetowej, wystarczyła znajomość HTML/XHTML i CSS. Następnie wchodziły kolejne wersje CSS 2 i teraz 3. W międzyczasie powstała technologia .NET, która do dziś jest popularna. Tylko, aby pisać takie aplikacje i umieszczać, aby działały na serwerze, nie lokalnym, ale na hostingu, to samo hosting musi wspierać .NET. 

Dobrze, a jak jest z innymi językami? Język PHP dziś wolno się rozwija, co nie znaczy, że nie jest ciekawy i polecanym językiem. Sam pisze w PHP i uważam, że jest dobry, ale mam wiele zastrzeżeń!

PHP kiedyś szybko wprowadzał wersje od PHP 1.0, 2.0, 3.0, 4.0, 5.5 po aktualną wersję 7.  Pojawiały się frameworki takie jak: CakePHP, Zend, Symfony, CodeIgniter po Laravel. I koniec! Może będą pojawiać się aktualne wersje php, ale co z bibliotekami? Tymi nowymi? 

Dlatego uważam, że pisząc dziś w języku PHP, nie należy ograniczać się wyłącznie do tego języka. Wystarczy zobaczyć  jak JS się rozwinął i nadal rozwija. Kiedyś JS było tylko zwykłym klepaniem kodu, a teraz? Angular JS, Node JS, React JS i wiele wiele innych bibliotek powstało. Warto wspomnieć o AJAX i JQuery, które też opierają się o JS. 

PHP szybko nie zniknie, chyba że hostingi przestaną dawać php i może bazę MySQL. Od wielu lat stało się modne używanie JS+ biblioteka + baza NoSQL np: MongoDB. Kiedyś może nadejść taki czas, że php może na stałe zniknąć. Póki co jest i cieszmy się tym. 

Pytanie zawarte w temacie: Ty jeszcze programujesz w PHP?!

Zdarza mi się, że zapyta mnie osoba na forum lub na spotkaniu przy browarze, pytając tak o język PHP. A dlaczego miałbym nie pisać w języku PHP? I zawsze odpowiedź brzmi: Jest językiem przestarzałym, co z tym nie zgodzę się. A to, że nie powstają nowe frameworki, nie znaczy, że na stałe PHP przestał się rozwijać.

Dlatego projektując aplikację Internetową, możesz wybrać zestawienie technologii(pomijam HTML i CSS, bo to dość oczywiste, że trzeba to znać):

• .NET(C#)+ MS SQL Server lub inna baza danych +JS + biblioteki
•  PHP+ JS+MySQL+ biblioteki
•  JS+Node.JS+ Baza NoSQL 

Ja polecam naukę w  języku PHP i nie ograniczanie się do jednego języka.