<autoreklama>
Rewolucyjne Witryny Internetowe tani CMS szablony dla stron www retusz zdjec
</autoreklama>

PNEB: inteligentna nawigacja – asystent

29 maja 2016

Gdy wyruszam w trasę, nawigacja jest rzeczą niezbędną. Najlepiej wszak, gdy z nawigacją obok siedzi ktoś kto podpowiada dodatkowo, w zależności od realnej sytuacji na drodze.

Tą osobę teoretycznie już można zastąpić czymś w stylu nawigacyjnej Siri – mającej oczy dookoła samochodu i podpowiadającej „jedź za tym czerwonym samochodem” zamiast suchego „za 100 m na rondzie w prawo”. Poza tym gdy jestem trochę zamyślony (oczywiście nie tak żeby nie uważać na drodze) i przegapię komunikat, mógłbym nagle zapytać „Siri, na którym pasie się teraz ustawić?„.

Dodatkowo taki asystent mógłby mi pomagać w jeździe nie tylko w temacie navi – np. mógłbym zadać pytanie „Siri, prawa wolna?”.

Po prostu jak aktywnie uczestnicząca w ruchu osoba siedząca obok.

To byłoby super, dlaczego jeszcze nikt tego nie zrobił?

Nauka flexboxa

28 kwietnia 2016

flexbox

Flexbox to stosunkowo nowa technika CSS pozycjonowania (wyrównywania) serii elementów w określonym obszarze.

Po nauczeniu się jej już nigdy nie będziesz miał problemów z wierszami, kolumnami, marginesami między nimi i kolejnością elementów.

Flexbox jest prosty, łatwy i przyjemny. Wystarczy sobie przyswoić kilka nowych poleceń i ich parametry.

Jedynym mankamentem jest obsługa przez … IE. Jest częściowa, i to dopiero w wersji IE11. Dupa blada. W pozostałych browserach (także mobilnych) flexbox w zasadzie śmiga bez broblemów. Ale ale – technika jest super, dlatego ma przyszłość. warto przyswoić.

A pomoże w tym fajna gierka: Flexbox froggy. Koduj cssa aby żabki trafiły na swoje liście w jeziorze. :)

 

Wywiad ze mną

1 września 2015

Sam nie mogę w to do końca uwierzyć, ale na oficjalnym polskim blogu legendarnego serwisu Template Monster pojawił się wczoraj wywiad ze mną. Starałem się odpowiadać szczerze i obszernie. Jest trochę o życiu, o drodze do celu, o oczekiwaniach i błądzeniach. Ale i o grafice, webmasterce, traktowaniu Klientów i o pracy.
Myślę że wyszło dość ciekawie, dlatego zapraszam do przeczytania. :)

Sposób na testowanie mobilnych www

23 lipca 2015

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

Gry w przeglądarce i Orc Attack

20 grudnia 2014

Ponieważ lubię także pograć w prste gry, najlepiej bez instalowania niczego na komputerze, postanowiłem stworzyć na tym blogu nowy tag „gry-przeglądarkowe. Pod tym tagiem będę wrzucał linki do gier które mi się spodobały, odprężają i są po prostu fajne. Z tym że nie należy się spodziewać linków do flashówek, jakich pełno w sieci. Owszem – gry flash także moga się pojawić, ale jedynie te najlepsze, przy których posiedziałem przynajmniej kilka godzin. Będę za to faworyzował gry 3d, korzystające z WebGL i HTML5. Takich można się spodziewać najczęściej.

orc attackNa pierwszy ogień gierka którą znalazłem dziś: The Hobbit – Orc Attack. Jesteś elfem i walisz z łuku do orków. Ładna oprawa i całkiem dobry flow w grze sprawiają że ten – w sumie – point’n’shoot – jest całkiem grywalny. :)

Atrakcyjne wczytywanie podstron

15 grudnia 2014

animsition… tych standardowych, nie ajaxowych. Z ajaxowymi cuda potrafi robić każdy. A ze zwykłymi już nie… do tej pory. Animsition to skrypt działający w oparciu o CSS3 (a więc działający na wszystkich przegladarkach CSS w tej wersji obsługujacych, który może sprawić że przełączanie się między stronami będzie bardzo atrakcyjne wizualnie. Mamy do wyboru wiele efektów animacji – od prostego zanikania, poprzez zmianę rozmiarów, przesuwanie się, wirowanie itp. Można tez połączyć kilka efektów razem (np. fade plus obrót). Fajna sprawa, szczególnie dla Klientów łasych na wizualne bajery. Sam skrytp jest lekki i sprawia wrażenie przyjaznego… ale jeszcze potestuję, o ewentualnych uwagach poniżej poinformuję.

Isotope

3 grudnia 2014

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Fluidy w WebGL

20 listopada 2014

fluidwebglPamiętacie Silk? To taka zabawka kolorową plazmą.

Teraz czasy się trochę zmieniły, mamy do dyspozycji zaawansowany silnik graficzny w przeglądarkach – WebGL. I zaczyna się „dziać”. Jedną z zabawek o której warto wspomnieć, jest Fluid Experiment. Zasadniczo to też zabawka, ale się animuje i zachowuje jak płyn. Powiadam Wam – power drzemie w waszych browserach! :)

Parallax na Twojej stronie www

2 listopada 2014

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.

Tutorial wyrażeń regularnych

25 października 2014

regexoneJako że mam krew bardziej designera, a nie programisty, wiele programistycznych must-know’ów delikatnie mówiąc – olałem. Wolałem się np. nauczyć teorii dopasowywania krojów czcionek, niż wyrażeń regularnych. Potem, gdy miałem coś w kodzie wyciąć z łańcucha, wielokrotnie używałem explode(). Jednak w końcu zmusiłem się do nauczenia RegExpa. Wyszukałem bardzo fajny kurs wyrażeń regularnych, z przykładami, dokładnym opisem i testami: regexone.com.

Powiem krótko: RegEx to power niesamowity. Przyspieszył moją pracę nad jakimkolwiek kodem czy tekstem o około 10%, a to bardzo dużo. Każdy powinien go znać. A najlepiej uczyć się powyższym kursem. :)

Wyszukiwanie podobnych obrazków

7 października 2014

Podczas pracy przy webdeveloperce dość często, z różnych powodów, zdarza się, że potrzebujemy wyszukać obrazek podobny do tego który już mamy. Najczęściej Klient podsyła mi do projektu jakąś ilustrację do której nie ma praw, a moim zadaniem jest odnaleźć możliwie podobną, którą mogę zakupić wraz z prawami do użycia.

W Chrome sposób na to jest prosty. Wczytuje obrazek do przeglądarki, nasiskam klawisz „s” i klikam na obrazku prawym przyciskiem myszki. Powoduje to wyszukiwanie przez Google obrazków podobnych. Ale to wyszukiwanie nie jest idealne.

tineyeDlatego warto skorzystać z dedykowanej wyszukiwarki tego typu, jaką jest na przykład TinEye. Działa szybko, prosto, intuicyjnie, a wyniki wyszukiwania są bardzo zadowalające.

Spin! czyli kręciołek w JavaScript

30 września 2014

spinjsJuż dwa razy poruszałem temat generatorów loaderów: tutaj i tutaj. jednak w obu przypadkach generatory te produkowały grafikę/animację.

Tym razem jest inaczej. Spin.JS to skrypt który tworzy animację ładowania przez kod JS. Animację co prawda słabo konfigurowalną (chociaż – czy słabo? Zobacz ile suwaczków! :)), ale lekką, przyjemną, bez plików, skalowalną, i przyjazną wszystkim przeglądarkom.

Justowanie wszystkich linii

25 lipca 2014

justified-textPod tym adresem znalazłem fajne rozwiązanie justowania także ostatniej linii. Działa dobrze więc wklejam tutaj dla potomnych (i dla siebie ;)). No chyba że ktoś zna lepsze rozwiązanie tego problemu…?

Kupię stronę www – nowy projekt

1 kwietnia 2014

kupiestroneCoraz częściej zdarza mi się kupować gotowe strony www od osób które chcą je z róznych względów sprzedać. Na szybko stworzyłem ostatnio prostą stronę trochę oszczędzającą mój czas – zamiast wysyłać pytania każdemu kto jest zainteresowany sprzedażą swojego serwisu, teraz będę podawał adres witrynki służącej mi do zbierania takich informacji: KupieStrone.pl , a tam jest już odpowiedni formularz…

Dodatkowo, jest możliwość dopisania się do newslettera i także otrzymywania ofert sprzedaży stron www.

Na GRX.pl kilka nowych szablonów www…

15 marca 2014

Poniżej cztery smaczki spośród kilkunastu nowych. Po więcej zapraszam na GRX.pl :)

Sposób na linie w js – dowolnie pochyłe

15 lutego 2014

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Generator trójkątów CSS

1 stycznia 2014

triangleKolejne proste, łatwe i przydatne narzędzie – CSS Triangle Generator – do tworzenia prostych trójkatów z borderów CSS’owych. Osobiście używam często, działa wysmienicie. Warto znać.

DetURL

20 sierpnia 2013

Krótko, za Strimsem:
Wprowadź „deturl.com/” przed adres filmu na YouTube itp. lub dowolnego obrazka, aby w szybki sposób uzyskać narzędzia do pobrania danego klipu, przerobienia zdjęcia, odczytania danych EXIF, możliwości wyszukania podobnych obrazów i wiele więcej.

Łatwe wycinanie tła online

28 lipca 2013

Clippingmagic.com to prosty onlajnowy program graficzny, odpalany w przeglądarce, używający zaawansowanych funkcji które w prosty sposób można wykorzystać do wycinania obiektów z tła zdjęć. Moim zdaniem rewelka, działa szybko, sprawnie i dokładnie. Przetestowałem i będę używał, chyba nawet Fotoszkopa porzucę w tego rodzaju zadaniach, na rzecz Clippingmagic. Na pewno warto znać.

Konwerter dźwięków

15 lipca 2013

Szybki, prosty, skuteczny konwerter dźwięków. Osobiście używam do przemianowania dźwięków z nagrań telefonu (w formacie totalnie kosmicznym) na mp3. Polecam. Dodatkowo po skonwertowaniu wielu dźwięków można zasiorbać wszsytkie razem, w jednym pliku spakowane. Mniam.