Strona bez odświeżania

Wykorzystałem możliwości jquery oraz vue.js i od teraz odświeżana jest tylko prawa część strony, podczas gdy lewy panel tylko zmienia podświetlenie na aktualną podstronę.

Czytaj dalej

Reklamy

Organizacja pracy

Czasem byłem odrobinę zagubiony i nie wiedziałem co robić z projektem dalej.
Więc przydało by się cokolwiek do organizacji pracy, i padło na Trello lub Google keep.
Trello używałem już wcześniej i moim zdaniem jest bardzo dobre, ale chciałem także spróbować tej drugiej opcji bo jej jeszcze nie miałem okazji poznać.
Czytaj dalej

Własny edytor

Cms będzie potrzebował czegoś więcej nić zwykłego inputu na text, a edytora który przynajmniej obsługuje podstawowe formatowanie tekstu i jego położenie.

Zapewnie nie jest to najłatwiejsza rzaecz do wykonania, i obawiam się że będe się musiał uciec do gotowego, darmowego edytora gdyż aktualne zdolności nie pozwalają mi na to. W przyszłości napewno będę chciał stworzyć własny, a wtedy zaimplementuję go do kurczaczka.

Na samym początku zwykły input wystarczy, chodzi głównie o działanie cms’a, a nie dobre-działanie.

Także dodałem podświetlanie na lewym panelu aktualnie odwiedzanej podstrony, używając tylko jquery.

 

Następną rzeczą na liście już będzie baza danych, a wtedy będzie do roboty kilka rzeczy na raz, jak logowanie, pobieranie postów i menu do panelu bocznego, oraz insert nowego postu do tablicy wraz z informacjami jak data oraz użytkownik który dodał.

Stylizacji ciąg dalszy

Przez ostatnie parę dni kodzę css’y dla kurczaczka, oraz szukam także sposoby aby zaznaczyć na lewym panelu aktualną podstronę jasniejszym kolorem. Najlepiej będzie wykorzystać template engine i nadać aktualnej podstrone odpowiednią klasę.
Jednak jeszcze nie wiem jak wykryć aktualną podstronę, więc mam zadanie na następne kilka dni.

Powoli będę zmierzał do bazy danych i systemu logowania, także chciałbym zrobić logowanie za pomocą ajaxa i odrazu wyświetlać błędy przy pomocy vue.js, o ile to możliwe.

Więc po przygotowaniu wstępnego layoutu, około 2 dni zajęło mi przeniesienie tego na html/css. Wynik końcowy odrbinę się różni, ale raczej nic w tym dziwnego.

Wprowadzę także prawdopodobnie dark i light theme,  a że ja raczej preferuję ten pierwszy to od niego zacznę tworzenie.bitmap

Layout wykonany w Inkscape

1

Strona w html/css

Druga sprawa. Dużo czasu zajęło mi ogarnianie Reacta, jednak mało z tego wynikło ponieważ wydaje on mi się zbyt skomplikowany jak na kogoś kto dopiero zaczyna. Postawiłem na Vue.js, i wydaje mi się to dobry wybór głównie poprzez prostotę jaką na mnie wywarło.

Także jeżeli chodzi o temat renderowania strony po stronie serwera, potrzebny jest jeden z Template Engine’ów. Postaram się wprowadzić jak najwięcej, bo chcę aby programista miał nad wszystkim kontrolę, ale na początku wstawię tylko najpopularniejszy, czyli Handlebars który świetnie współgra w Expressem.

Więc szablon panelu bocznego oraz prawdopodobnie strony dodawania posta jest godotwy, jednak aktualnie to tylko grafika. Teraz będe uczył się dokładniej css’a żebym był w stanie przełożyć to na kod, teraz tylko na komputery,nie będę się przejnował teraz responsywnością na urządzenia mobilne.

Czytaj dalej

Wygląd panelu logowania

Na samym poczatku wykonałem responsywny panel logowania, aktualnie nie pełni on żadnej funkcji więc już powoli zabieram się logowanie, później rejestrację.

Będę potrzebował bazy danych ( MongoDB ) oraz czegoś do jej obsługi jak i zarówno skryptu hashującego hasło. Prawdopodobnie wybiorę moduł mongoose, a jako skrypt BCrypt, jednak tego nie jestem wciąż pewien.

Całościowo design będę prowadził w styl ciemny pod kolor żółty, ikonki symboliczne lekko nawiązujące do flat.

Aktualne logo w krzywych, prawdopodobnie nie będzie już ulegało zmianie:

logo

Oraz responsywny panel logowania, aktualnie tylko pod samo logowanie. Rejestracja, działająca zmiana języka oraz wybór logowania poprzez wykorzystanie innych aplikacji zostawiam sobie na dalsze części rozwoju cms’a.

Aktualnie także podczas tworzenie tego projektu, uczę się podstaw gita i powoli zaczynam ogarniać działanie branchy oraz merge. Mam nadzieję że czegoś nie skopię na samym prawie początku :v.

Początek projektu

W wolnym czasie poczytałem odrobinę o działaniu cms’ów, jako że wcześniej za bardzo nie używałem takowych, jedynie wordpressa na potrzebę tego konkursu.

Na samym początku przejżałem kilka przykładowych repo z modułami do Node i przygotowałem sobię początkowy plik który będzie wczytywany do aplikacji.

Zacznę od panelu admina do zalogowania. Do samego logowania użyję passport-local, ale wpierw jednak zajmę się wyglądem oraz działaniem formularza.

1

Staram się także aby moduł był jak najprostszy w użyciu, czyli:
-npm install
-dodać parę linii kodu
I działa. Będę się trzymał tego konceptu, starając się także umożliwić programiście na jak największą kontrolę nad działaniem jak i wyglądem cms’a.