Polub bloga na fejsie!

Przedstawiam mój projekt: polskifrontend.pl!

35

Jeśli subskrybujesz mój Newsletter to być może wiesz już, że ostatnio pracowałem w pocie czoła nad pewnym moim prywatnym projekcikiem… W sumie w ostatnim wpisie też coś tam o tym przebąknąłem. Dziś wreszcie przyszła pora przedstawić mój projekt szerszej publiczności!

Z tytułu możesz wywnioskować, że chodzi o serwis polskifrontend.pl. Poniżej przedstawiam co to jest, po co to zrobiłem i czego użyłem do jego stworzenia.

Co to jest i po co?

Pomysł na ten serwis nie jest w sumie niczym szczególnym… W zasadzie można powiedzieć, że jest to typowy agregator treści, który skupia w jednym miejscu serwisy, blogi i strony na temat szeroko pojętego front-endu oraz web-developmentu. Stworzyłem go w zasadzie z dwóch powodów.

Po pierwsze, chyba nie ma niczego takiego w polskim internecie, a czasem zdarzało mi się szukać różnych polskich treści w google i wcale nie jest łatwo wyszperać blogi i serwisy, które by pisały na ten temat i to jeszcze po polsku. Zresztą, spójrz na mój wpis o tym, kogo warto obserwować w 2017 roku. W sekcji dotyczącej treści polskojęzycznych wcale nie ma tak wielu pozycji… Dlatego też jedną z głównych funkcjonalności mojej aplikacji jest możliwość zgłaszania nowych serwisów przez czytelników!

Po drugie, moim zdaniem zawsze warto mieć jakiś poboczny projekt na tapecie. Jest to okazja do nauki nowych technologii i narzędzi – takie wypłynięcie na nie znane dotąd wody. Na codzień często pracujemy przy nudnych, mało rozwijających projektach. Taki „side project” to, moim zadniem, super okazja do oderwania się na chwilę od tej szarej, programistycznej codzienności.

Główne funkcjonalności

Generalnie jest to „single page application”. Na stronie głównej widać ostatnie artykuły pogrupowane według serwisów. Są one posortowane po ostatniej aktywności w danym serwisie. Istnieje też drugi widok, przedstawiający wszystkie artykuły z dostępnych w serwisie, posortowane od najnowszego. Do przełączania tych dwóch widoków służą guziki znajdujące się po prawej nad artykułami.

polskifrontend.pl - główny widok aplikacji

Jak widać na powyższym screenie, najnowsze artykuły mają specjalne oznaczenie: kolor różowy oraz label „Nowość”. Po odwiedzeniu takiego linku, zmienia on kolor na zielony aby łatwo było odróżnić przeczytane już artykuły. Kliknięcie w tytuł artykułu po prostu otwiera nową kartę przeglądarki z danym artykułem, już w macierzystym serwisie. Autorzy blogów będą więc zadowoleni, że ruch jest przekierowywany bezpośrednio do nich.

Aby zapewnić płynne działanie serwisu, na początek ładowane są tylko najnowsze dane o blogach i artykułach, a kolejne doczytywane są gdy czytelnik „doskrolluje” się do końca strony. To się chyba nazywa „infinite scroll”.

Po lewej stronie, nad artykułami znajduje się przycisk przenoszący do formularza zgłaszania nowego serwisu. Wystarczy podać jego adres URL, ewentualnie podać też swój email (jeśli chcesz abym mógł się w razie czego z Tobą skontaktować) oraz potwierdzić „reCaptche”. W ten sposób wysyłasz mi wiadomość z linkiem do bloga, który ja mogę dodać do serwisu lub też nie. Myślę, że dzięki moderacji dodawanych blogów, do serwisu trafią tylko te, które faktycznie niosą ze sobą jakąś wartość.

polskifrontend.pl - ekran zgłaszania wpisu

Baza danych artykułów jest odświeżana co 15 minut – dzięki temu, sama strona otwiera się szybko ponieważ, nie zaczytuje ona od nowa RSS’ów przy każdym żądaniu. Na tę chwilę nie ma (jeszcze) odświeżania w tle za pomocą websocketów, więc aby sprawdzić czy coś nowego się nie pojawiło trzeba niestety odświeżać stronę…

Jak to działa i co jest „po spodem”

Jako, że jest to projekt stricte front-endowy to myślę, że mogą Cię też zainteresować technikalia siedzące wewnątrz tego serwisu. Jest on oparty o React + Redux + RxJS, natomiast back-end napisany jest w Node.js (Express.js) co oznacza, że w zasadzie cały projekt stworzony został w JavaScript. Komunikacja między front-endem a back-endem odbywa się standardowo za pomocą REST API.

Do wystartowania z projektem użyłem Reactowego startera react-starter-kit. Ogólnie jestem zadowolony z wyboru chociaż, zamiast standardowego react-routera wykorzystuje on bibliotekę universal-router (ten sam autor co react-starter-kit). W sumie jest to całkiem ciekawa alternatywa i nieźle mi się sprawdziła.

Ogólnie rzecz biorąc to podczas pracy nad tym projektem chciałem przetestować kilka rzeczy, których wcześniej nie używałem. Są to: „server side rendering” na serwerze Node.js, tworzenie REST’owego back-endu w oparciu o Node.js (czego wcześniej nigdy nie robiłem) oraz praca z bazą MongoDB.

Muszę powiedzieć, że jeśli chodzi o to czego się nauczyłem to po pierwsze: SSR to jedna z najwspanialszych zdobyczy zachodniej cywilizacji; po drugie tworzenie serwera w Node.js jest bardzo fajne – mogę być „full-stackiem” jeśli miałbym pracować właśnie w tej technologii; po trzecie nadal nie mam zdania co do MongoDB. W sumie pracuje się z tym ok (korzystałem z biblioteki Mongoose), natomiast pewnie czas pokaże jak wygląda sprawa z wydajnością.

Zarówno front-end jak i back-end aplikacji stoją na osobnych instancjach w Heroku. Muszę powiedzieć, że jestem pozytywnie zaskoczony wydajnością tego rozwiązania oraz łatwością deploymentu (w skrócie polega to na commitach do specjalnego repozytorium Git na Heroku).

To w zasadzie tyle szczegółów technicznych – jeśli masz jakieś pytania to pisz do mnie na priv.

Mój projekt – podsumowanie

No i to tyle… na tę chwilę dodałem do serwisu około 16 blogów i stron. Mam nadzieję, że ta liczba się powiększy dzięki zgłoszeniom od użytkowników! Dlatego jeśli znasz jakieś blogi czy strony, które według Ciebie nadałyby się do dodania do serwisu Polski Front-End, to zapraszam do skorzystania ze wspomnianego formularza na stronie!

Mam jeszcze parę pomysłów na usprawnienia w serwisie ale wprowadzę je w późniejszym terminie. Na razie chcę zobaczyć czy w ogóle ktoś będzie tego używać – wiesz… „lean startup” i te sprawy.

Jeśli masz jakieś uwagi, chcesz wyrazić opinię lub stanowczo się czemuś sprzeciwić to pisz w komentarzach albo poprzez formularz kontaktowy!

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń

Uwaga! Obecnie trwa przedsprzedaż kursów - premiera 1 sierpnia 2017!

  • Marcin Górecki

    Po 30 sekundach przeglądania Twojego serwisu dodaję do ulubionych! Gratuluję pomysłu!

    • dzięki! jak znasz jakieś blogi ktore można tutaj dodać to zgłaszaj śmiało! 😉

  • Artur Czopek

    Świetny pomysł, jestme pod wrażeniem, tak dalej! 🙂

  • Prezes

    Ustawiam jako stronę startową 🙂

  • Dźwiedziu

    Upublicznisz silnik strony na GitHub? Dlaczego tak zachwalasz SSR i czy to dobry pomysł gdy serwis ma stać na czymś typu RaspberryPi albo jakimś uC np. ESP32 (to takie dużo mocniejsze Arduino, na oryginalnym Arduino SSR sobie nie wyobrażam), a jego klientem ma być też apka na smartfon pisana w natywnym framework? Zrobisz coś kiedyś o wielojęzycznym frontend?

    • kod źródłowy być może kiedyś upublicznie – na razie i tak wymaga sporej refaktoryzacji (szczególnie backend) bo zależało mi żeby wypuścić „MVP” i potem zająć się dalszą pracą nad projektem… tak więc póki co się wstydzę 😛
      a na temat SSR na pewno będzie w końcu osobny wpis – teraz kiedy w praktyce to przetestowałem będzie mi łatwiej

  • Paweł Kucia

    Dla mnie bomba 🙂 Niezły kawałek technologii 🙂

  • Adrian Widerski

    Szanuję

  • Kamil Rogala

    ustawione jako strona startowa, świetna robota! 🙂

  • Rafał Konofalski

    Dodane do codziennej prasówki. Znakomita robota! 🙂

  • Fajne, ale… 😉 Może dorzucić jakieś RSS-a, w którym byłyby po prostu linki do wszystkich najnowszych wpisów?

  • nrm

    popraw prosze og:image bo nie chce mi fejs szerować z obrazkiem 😉 Object at URL ‚http://www.polskifrontend.pl/’ of type ‚website’ is invalid because the given value ‚/assets/a1816300.png’ for property ‚og:image:url’ could not be parsed as type ‚url’.

    • tak właśnie już też to zauważyłem – jak rozumiem powinien być pełny URL… dziś będzie poprawione!

      • nrm

        Tak, chodzi o pełen URL. BTW: widziałem serwis z tydzień temu, chyba na heroku najpierw ale nie chciałem się wychylać i czekałem na oficjalną premierę 😉

        • og:image poprawione!
          jak pracowałem nad serwisem to jakieś blogi musiałem testowo dodać padło m.in. na Twój 😉

          • nrm

            Dobrze padło, prawidłowo!!!

  • Bartku, fajny pomysł! Ja bym jeszcze dodał dwie/trzy/przestaje numerować rzeczy 🙂
    1. Zliczanie kliknięć w poszczególne linki i na tej podstawie możliwość sortowania po najpopularniejszych wpisach.
    2. Możliwość „wykopania/rekomendowania” danego wpisu i potem sortowanie po najczęściej rekomendowanych.
    3. Potem takie dwa rankingi można wysyłać w mailingu, dzięki czemu budujesz sobie bazę do newslettera.
    4. Ranking najpopularniejszych wpisów danego miesiąca. Może nawet znalazłby się jakiś sponsor na blogu, który ufundowałby drobny upominek dla pierwszego miejsca 🙂 Można po pewnym czasie podpytać helionu czy jakichś firm podczas konferencji.
    Ale to już ponad MVP 😉 Powodzenia!
    Btw podobny agregator pod javę znajdziesz na http://jvm-bloggers.com/ Może jakiś pomysł rzuci Ci się w oczy.

    • dzięki za komentarz i propozycje – wszystkie zapisuję 😉 być może pójdę w możliwość założenia konta, które daje dużo więcej (m.in. to co proponujesz) za drobną opłatą… zobaczymy

      • Albo darmowy newsletter z podsumowaniem, ale każda wysyłka będzie miała swojego sponsora – co będzie wiadome od samego początku.
        A sponsor ma na dole newslettera okazję do przekazania jakiejś informacji, np. aktualnych ofert pracy ;P

  • Wstaję z łóżka, biorę telefon, dawno nie patrzyłem statystyk strony, więc włączam i patrzę, patrzę, patrzę a tu jakiś skok z samego rana. Wbijam więc na komputer, szukam zakładki „pozyskiwanie” i….polskifrontend.pl

    Fajny pomysł, dzięki za umieszczenie 🙂

  • Radwojt

    Genialny pomysł. Do porannej kawy w pracy wręcz ideał. Dzięki!

  • Guy Diamond

    Czy będzie appka na telefony?

    • nie mówię nie – do React Native pewnie nie będzie trudno tego przerzucić 😉

      • E tam, prawdziwemu frontowi nie przystoi. PWA a nie jakieś tam natywne 😛

  • Mary Pieroszkiewicz

    Świetny pomysł. Czegoś takiego brakowało w polskim frontendzie 😉

  • Marcin Kopeć

    Cześć,
    super pierwsze co zrobiłem po wejściu to….”Pokaż kod” a tu wszystko zminifikowane 🙂
    Może nam zdradzisz tajemnicę jakich technologii użyłeś? 😀 Ja tam coś wyczytałem a’la React+jakiś obfuscator.
    Pozdrawiam,
    MK

  • Ariels

    Fajna strona. Przydało by się jeszcze dodać jakaś wyszukiwarkę słów kluczowych.

    • dzięki – coś się pomyśli ale robię to po godzinach więc nie obiecam żadnych terminów… 😉

Google Analytics Alternative