środa, 22 marca 2017

Czas skupić się na konkretach - czyli jak pozbyłem się "rozpraszaczy". ;)

Myślę, że jednym z większych problemów młodego programisty (starego może też :P) jest skupienie się na nauce, zarówno teorii jak i w praktyce...

W moim przypadku objawiało się to "falami" - jednym razem łapałem mega fazę na programowanie i nic nie mogło mnie oderwać, czy to od nauki czegoś nowego, czy kodzeniu bez przerwy. Za jakiś czas jednak hype opadał i kompletnie nie mogłem się skupić na czymś produktywnym.

Oczywiście jest to kwestia indywidualna ale wokół nas jest cała masa powodów do oderwania się od programowania, takich jak telewizja, gry komputerowe, telefon, facebook, youtube czy generalnie cały internet dostępny na monitorze obok tego z naszym edytorem kodu. Niestety osobiście jestem kiepski w skupieniu się na swojej pracy, szczególnie kiedy zjeżdżam z programistycznej fali.. ;)

Do tej pory walczyłem z samym sobą żeby jakoś to szło do przodu i wydaje mi się, że jest to dość normalne i sporo osób miewa podobne problemy. Swoją drogą, uważam, że osoby, które są zakochane w kodzeniu po uszy od samego początku gdy się do tego dorwały i nie myślą o niczym innym przez długi czas, mogą "wypalić się" znacznie szybciej niż ktoś kto jednak czasem przystopuje i po krótkiej przerwie wróci "z świeżą głową". To jednak już taka osobista wycieczka, nie znam żadnych statystyk na ten temat.. :P

No ale do rzeczy. Jak pewnie wiele osób przed poznaniem programowania byłem zwykłem graczem. Dlatego to właśnie gry stanowią u mnie główną część wśród skutecznych "rozpraszaczy". Do tej pory traktowałem zagranie w coś jako małą przerwę i chwilę odpoczynku, przyjemności. Jednak w ostatnim czasie trochę wypadłem z rytmu i w sumie programowanie stało się małą przerwą w graniu... Zbliża się jeden z trudniejszych momentów w moim życiu a ja popadam w jakąś fazę "wyłączenia się", zamiast szczególnie skupić się na rzeczach ważnych, jak matura, poszerzanie wiedzy programistycznej oraz portfolio, na znalezieniu pierwszej poważnej pracy kończąc (studia chwilę później :P).

Z tego powodu podjąłem dość radykalną decyzję i pozbyłem się aktualnie największych "rozpraszaczy" z mojego życia, a dokładniej z dysku mojego komputera.. :P

Wyleciał CS:GO. Tak, to właśnie ta gra potrafi wciągnąć mnie tak, że zapominam, że miałem zagrać tylko jeden meczyk i kończę po 4 godzinach... Ciężko też było mi się powstrzymać kiedy podczas kodzenia dostawałem zaproszenie do gry od dobrego ziomka. Jak tu odmówić, w sumie tylko jeden mecz, chwila przerwy. No i zaczynał się maraton... Dość tego, potrzebuję trochę przerwy od tej gry. ;)

Do kompletu z telefonu wypadła jedna gra typu "clicker". Złapałem się na najgłupszy możliwy rodzaj gry, no ale taki cel twórców, aby wzbudzić w graczu ten "syndrom upgrade".. Ahhh jak to pochłania czas, aż wstyd się przyznać na co go tracimy.. :P

Wiadomo, że nie jest to wszystko co potrafi oderwać od kodu, ale póki co pozbyłem się głównych pochłaniaczy czasu i oczywiście zamierzam poświęcić go na rozwój osobisty czy chociażby w konkursie Daj Się Poznać. ;)

Dajcie znać jak to u Was wygląda, a ja wracam do rozwijania swojego projektu. ;)

sobota, 18 marca 2017

Mój konkursowy projekt. :)

Najwyższa pora na drugi blogowy wpis, który według regulaminu konkursu ma dotyczyć mojego projektu, jak mniemam bardziej od technicznej jego strony. ;)

Muszę szczerze przyznać, że nie taki miałem zamiar kiedy myślałem o blogu, ponieważ internet przepełniony jest różnorakimi poradnikami, artykułami dotyczącymi konkretnych technologii czy rozwiązań problemów, a ja nie uważam siebie za szczególnie uzdolnionego programistę - nie na tyle aby próbować kogoś uczyć przy szerszej publiczności. Z tego powodu mierzyłem raczej w posty dotyczące moich odczuć i perypetii na tej programistycznej drodze życia. Szczególnie biorąc pod uwagę, że dopiero na nią wstępuję i sporo przede mną rzeczy, o których aktualnie nie mam pojęcia, więc wiążą się z tym pewne emocje - strach, ciekawość, radość - wszystko pomieszane. :D

Ale do sedna, bo widzę, że budzi się we mnie jakiś poeta.. :)

Projekt jaki zgłosiłem do konkursu #DSP2017 zacząłem realizować w grudniu, kiedy to w moim technikum na lekcjach zawodowych dotyczących podstaw programowania dosłownie się nudziłem. Nie dlatego, że jestem taki super, po prostu kilka miesięcy wcześniej mocno pracowałem we własnym zakresie aby móc wstąpić w ten programistyczny świat. No więc podstawy już znałem. ;)
Trafiłem dość dobrze, bo na nauczyciela, który mimo, że zawsze zapracowany to znajduje czasem dla mnie chwile aby pogadać o sprawach związanych z kodzeniem. Pewnego dnia przyszedł na lekcję i z uśmiechem oznajmił, że "ma to!". To znaczy, wymyślił razem z innym nauczycielem projekt jakiego mógłbym się podjąć. Oczywiście ucieszyłem się, tym bardziej, że realizując go mogę komuś pomóc.

W mojej szkole jest całkiem sporo wszelakiego rodzaju sprzętów typu PeCety, laptopy, terminale, routery itd itd, a problem z nimi jest taki, że są "nieokiełznane". Czasem coś się zepsuje, czasem z niewyjaśnionych przyczyn sprzęty zmieniają swoje położenie, sale, podopiecznych. No i za Chiny potem nie wiadomo co jest co, gdzie było, a tym bardziej jaka jest historia danego sprzętu - szczególnie jest to uciążliwe, kiedy trzeba go zdiagnozować i naprawić. Moim więc zadaniem było stworzyć jakiś system, który by to wszystko ogarnął.

Początkowo system miał opierać się o kody kreskowe (bo tak pasowałoby szkole, chyba mają od tego jakiś sprzęt). Stwierdziłem jednak, że łatwiej będzie to ogarnąć wykorzystując do tego kody QR z zapisanymi linkami, dzięki którym, po zeskanowaniu od razu będzie można przenieść się do informacji o danym przedmiocie, korzystając na przykład ze smartphone'a. Wielu szczegółów nie dostałem, ale był zamysł, który bardzo mi się spodobał i ochoczo podjąłem się próbie jego realizacji.

Bardzo szybko naszła mnie jednak trochę ambitniejsza myśl... Skoro w mojej szkole jest taka potrzeba, to kto wie czy czasem komuś innemu nie przydałoby się coś podobnego w szkole, pracy czy nawet domu. Po co się ograniczać i robić coś "na sztywno"? ;)

Mam nadzieję, że tym przydługim wstępem wyjaśniłem skąd wziął się pomysł. ;)
A teraz konkretniej - Oversee Systems (nie jestem dobry w wymyślanie nazw, tektsów i ogólnie contentu..) jest z zamysłu darmowym systemem (teoretycznie Open Source, jednak nie wiem czy warto zaglądać w kod :P), dzięki któremu możemy katalogować dowolne przedmioty i przechowywać informację o nich. Przypisywać lokację, informację o uszkodzeniach czy generalnie dodawać dowolne komentarze na ich temat. Całość działa sprawnie jeśli wykorzystamy wspomniane kody QR, na przykład w formie naklejek, wtedy każda naklejka posiada własny numer ID, który po naklejeniu może być przypisany do danego przedmiotu.

Co zrobiłem, aby był on "dostępny dla każdego"? 

Oversee stworzyłem jako pustą templatkę i dodałem coś na wzór instalatora, dzięki któremu dość mocno ułatwiony jest proces implementowania systemu na własnym serwerze. Wystarczy pobrać pliki z niezależnej strony domowej (KLIK) i przerzucić je na swój serwer. Po wejściu na swoją domenę wita nas wspomniany instalator, gdzie podajemy wszelkie potrzebne dane (np dane do łączenia się z bazą MySQL, utworzenie konta administratora, nadanie nazwy i loga stronie), które normalnie musielibyśmy samemu wklepywać wewnątrz kodu. W instalatorze dodanych jest wiele wyjaśnień czym są potrzebne dane i gdzie je znaleźć, dzięki czemu serwis może być postawiony nawet przez mniej doświadczone osoby.

Na stronie głównej wita nas wyszukiwarka przedmiotów dodanych już do bazy danych. Poza tym do dyspozycji jest panel użytkownika i administratora, historia komentarzy każdego przedmiotu, dodawanie i usuwanie użytkowników (3 rodzaje uprawnień), dodawanie, usuwanie i edytowanie przedmiotów.

Jeśli ktoś jest zainteresowany oczywiście sam może zobaczyć co strona ma do zaoferowania. :)

Sam system jest teoretycznie skończony i już opublikowany, jednak trochę się śpieszyłem aby wydać pierwszą "używalną" wersję, dlatego nazwałbym to raczej opublikowaną Betą. ;) Mój pośpiech wynikał z tego iż zbliżają się matury, chciałem trochę odpocząć przed nimi, zobaczyć czy system będzie w ogóle przydatny, zamiast bez końca dodawać kolejne "ficzery".

Z pomocą przyszło jednak "Daj Się Poznać", dzięki któremu postaram się znaleźć motywację do dalszego rozwoju projektu. :)

Taaaaaak więc dochodzimy w końcu do stricte technicznej części tego wpisu! :D
Jeśli chodzi o rozwój Oversee to mam oczywiście w głowie trochę pomysłów na rzeczy jakie przydało by się dodać do systemu, na przykład filtrowanie wyszukiwań w kategoriach, dodać możliwość zmiany tła strony, czy generalnie poprawić design, którego teraz praktycznie nie ma. Poza tym jest sporo backendowych rzeczy, które przydało by się dodać lub usprawnić, jednak na samym początku zajmę się poprawieniem samego kodu, który teraz dla wielu jest pewnie typowym "Spaghetti", wynikającym z pośpiechu. :P

Moim celem na najbliższe dni będzie poprawienie czytelności, wywalając wiele rzeczy do oddzielnych plików (głównie z PHP'a), a szczególnie skupię się na JavaScripcie, który postaram się ułożyć w moduły, tym samym poćwiczyć trochę OOP i tworzenie prostych API. Jeśli będzie potrzeba, może uda mi się zrobienie jakiegoś PubSub'a. ;)

Podam przykład jak będzie to wyglądać. Zamieniam taki kod:

var menu_toggled = false;

$('#toggle_menu_btn').on('click', function(){

    if(menu_toggled == false)
    {
        menu_toggled = true;

        $('#bs-example-navbar-collapse-1').css('text-align', 'center');
        $('#nav_sign_in_btn').removeClass('pull-right').addClass('center-block');
        $('#log_out_btn').removeClass('pull-right').addClass('center-block');
        $('#lang_btns').removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
    }
    else
    {
        menu_toggled = false;

        setTimeout(function(){

            $('#bs-example-navbar-collapse-1').css('text-align', 'left');
            $('#nav_sign_in_btn').removeClass('center-block').addClass('pull-right');
            $('#log_out_btn').removeClass('center-block').addClass('pull-right');
            $('#lang_btns').removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');

        }, 250);
    }

});

//ustawienia wyświetlania elementów podczas zmiany rozmiarów okna
$(window).resize(function(){

    if($('#toggle_menu_btn').css('display') == 'none')
    {
        $('#bs-example-navbar-collapse-1').css('text-align', 'left');
        $('#nav_sign_in_btn').removeClass('center-block').addClass('pull-right');
        $('#log_out_btn').removeClass('center-block').addClass('pull-right');
        $('#lang_btns').removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');
        $('#footer_content1, #footer_content2').css('float', 'left');
        $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '75%');
        $('#search_input_group, #search_input_group2').css('width', '65%');
        $('#table_wrapper').css('width', '90%');
        $('h3').css('font-size', '22px');
        $('h2').css('font-size', '25px');
    }
    else
    {
        $('#bs-example-navbar-collapse-1').css('text-align', 'center');
        $('#nav_sign_in_btn').removeClass('pull-right').addClass('center-block');
        $('#log_out_btn').removeClass('pull-right').addClass('center-block');
        $('#lang_btns').removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
        $('#footer_content1, #footer_content2').css('float', 'none');
        $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '95%');
        $('#search_input_group, #search_input_group2').css('width', '90%');
        $('#table_wrapper').css('width', '100%');
        $('h3').css('font-size', '15px');
        $('h2').css('font-size', '20px');
    }

});

    //ustawienia wyświetlania elementów na urządzeniach mobilnych
if($('#toggle_menu_btn').css('display') == 'block')
{
    $('#footer_content1, #footer_content2').css('float', 'none');

    $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '95%');
    $('#search_input_group, #search_input_group2').css('width', '90%');
    $('#table_wrapper').css('width', '100%');
    $('h3').css('font-size', '15px');
    $('h2').css('font-size', '20px');
}

Na taki:

//ustawienie elementów strony w wersji mobilnej
var mobile_elements_position = (function(){

    //Flag
    var menu_toggled = false;
    
    //#### Cache DOM
    var $toggle_menu = $('#toggle_menu_btn'),
        $navbar = $('#bs-example-navbar-collapse-1'),
        $sign_in = $('#nav_sign_in_btn'),
        $logout = $('#log_out_btn'),
        $lang = $('#lang_btns'),
        $footer1 = $('#footer_content1'),
        $footer2 = $('#footer_content2'),
        $change_password = $('#change_password_inputs'),
        $error_alert = $('#error_alert'),
        $login_input = $('#login_input_group'),
        $admin_panel = $('#admin_panel_content'),
        $add_new_users = $('.add_new_user_inputs'),
        $search1 = $('#search_input_group'),
        $search2 = $('#search_input_group2'),
        $table_warpper = $('#table_wrapper'),
        $h2 = $('h2'),
        $h3 = $('h3');

    //#### Bind events and init
    _positionElements();
    $toggle_menu.on('click', _positionButtons);
    $(window).resize(_positionElements);
    
    //#### Functions
    
    //ustawienie przycisków w navbar menu
    function _positionButtons(){
        
        if(menu_toggled == false)
        {
            menu_toggled = true;

            $navbar.css('text-align', 'center');
            $sign_in.add($logout).removeClass('pull-right').addClass('center-block');
            $lang.removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
        }
        else
        {
            menu_toggled = false;

            setTimeout(function(){

                $navbar.css('text-align', 'left');
                $sign_in.add($logout).removeClass('center-block').addClass('pull-right');
                $lang.removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');

            }, 250);
        }

    }
    
    //ustawienie elementów dla strony mobilnej
    function _positionElements(){
        
        if($toggle_menu.css('display') == 'none')
        {
            $navbar.css('text-align', 'left');
            $sign_in.add($logout).removeClass('center-block').addClass('pull-right');
            $lang.removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');
            $footer1.add($footer2).css('float', 'left');
            $change_password.add($error_alert).add($login_input).add($admin_panel).add($add_new_users).css('width', '75%');
            $search1.add($search2).css('width', '65%');
            $table_warpper.css('width', '90%');
            $h3.css('font-size', '19px');
            $h2.css('font-size', '24px');
        }
        else
        {
            $navbar.css('text-align', 'center');
            $sign_in.add($logout).removeClass('pull-right').addClass('center-block');
            $lang.removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
            $footer1.add($footer2).css('float', 'none');
            $change_password.add($error_alert).add($login_input).add($admin_panel).add($add_new_users).css('width', '95%');
            $search1.add($search2).css('width', '90%');
            $table_warpper.css('width', '100%');
            $h3.css('font-size', '15px');
            $h2.css('font-size', '20px');
        }
        
    }

})();

Teoretycznie niewiele się zmieniło, nawet jest trochę dłuższy ale jednak jakoś tak ładniej i porządniej. :) Oczywiście nie uważam, że jest to rozwiązanie szczególnie dobre, ja wciąż się uczę, ale chociażby "keszowanie" slektorów powinno trochę usprawnić działanie strony a sam kod wydaje się być troszkę czytelniejszy. ;)

No więc to by było na tyle jeśli chodzi o mój aktualny rozwój projektu, chcę doprowadzić go do ładniejszego stanu, porozdzielać wiele rzeczy na mniejsze "moduły", poprawić trochę semantykę (np wywalić CSS z HTMLa), być może użyję gdzieś szablonów z Mustache.js. Dopiero gdy stwierdzę, że kod wygląda i być może działa lepiej, wezmę się za bardziej widoczny rozwój w postaci dodawania nowych elementów do systemu. :)

Tymczasem, zachęcam do sprawdzenia mojego projektu "na własnej skórze", komentowania i dzielenia się opiniami.

Pozdrawiam! :)

niedziela, 12 marca 2017

Daj się poznać.. W ostatniej chwili!

Uff - jestem w konkursie, otwieram blog!

Pana Macieja poznałem poprzez przypadkowe trafienie na jego vloga.. Oczywiście spodobały mi się jego materiały, a kto ogląda ten wie, że często przewijał się tam temat konkursu Daj Się Poznać.. Niby mnie to zainteresowało, ale ciągle odkładałem na później sprawdzenie szczegółów. Zapadła mi jedynie w pamięć data - 12 marca, koniec zapisów.

Nadchodzi ten dzień i co? Zonk! 23:50 - przypomniało mi się! Szybko wchodzę na formularz zgłoszeniowy - cholercia, trochę długi - no nic, trzeba pisać. Niestety zawiesiłem się na linku do bloga.. Przecież ja nie prowadzę JESZCZE bloga! Pozostało mi wybrać najłatwiejszą drogę, szybkie utworzenie bloga, kopiowanie linków, pot z czoła spływa... Wybiła północ, wiedziałem, że sam jestem sobie winny, czasu mało ale nie musiałem tyle zwlekać.. No trudno.

Z drugiej strony, co mi szkodzi wysłać formularz. JEST! Dostaje mail z potwierdzeniem zgłoszenia.. Udało się! Jestem zapisany! ;)

Dziś szkoła, a jeszcze tyle rzeczy do zrobienia... Obiecuję lepiej przygotować mój profil "za dnia". :)

#DSP2017