Koniec DajSięPoznać 2017, co dalej z blogiem?

Koniec DajSięPoznać 2017, co dalej z blogiem?

Drugi post będzie krótki, ale czuję, że jest potrzebny. Co dalej będzie się działo z blogiem http://www.webdotnet.pl. Pierwsza i najważniejsza zmiana to przejście na cykl jednego posta w tygodniu zamiast dwóch. Dwa posty to dość sporo biorąc pod uwagę resztę obowiązków, które mam na głowie. Nie było łatwo wytrwać z dwoma postami w tygodniu, zwłaszcza chcąc utrzymać ich sensowność. Wiem, że czasem dało się odczuć, że tak naprawdę te dwa posty można było napisać w jednym, jednak bywały ciężkie tygodnie i właściwie tak właśnie było (podzieliłem post na pół i zamieściłem, jako dwa). Takie rzeczy już nie będą się działy J.

Kolejną rzeczą, którą chcę poruszyć to tematy, które będą obecne na tym blogu. Przez najbliższy czas z pewnością nadal będzie to tematyka Umbraco, .NET i frontendu. Chciałbym także poruszyć nieco tematów mniej technicznych. Np. tego jak rozwijała się moja kariera jako programisty (nie mam typowo informatycznego wykształcenia).

Python będzie kolejnym językiem, którego chcę się nauczyć (głównie ze względu na jego popularność w machine learning i automatyzacji). Możesz oczekiwać postów o tej tematyce w niedalekiej przyszłości. Myślałem nad nauką PowerShell-a, ale spróbuję przeprowadzić tego typu automatyzację za pomocą Pythona.

Postaram się także by posty były nieco dłuższe, chyba ze krótki wyczerpie temat (jak moje posty na temat implementacji Disqus i Addthis). Nie widzę powodu by niepotrzebnie je przedłużać.

Na ten moment to tyle updatu, pozdrawiam serdecznie, Kamil.

Koniec DajSięPoznać 2017, co z projektem?

Koniec DajSięPoznać 2017, co z projektem?

Konkurs Daj się poznać dobiega końca, ten post będzie o tym, co udało mi się zrealizować w projekcie do tej pory.

Jestem już bardzo blisko wypuszczenia nowej wersji bloga. Myślę, że stanie się to w drugim tygodniu czerwca.

Właściwie brakuje mi jedynie lekkiego dopasowania stylów na stronie i dodania Google analyst i tag manager do strony.

Posty zostały już przepisane do nowej platformy i tak wygląda przegląd postów na stronie głównej:

Robots.txt jak i sitemap-a zostały zrobione.

Stworzyłem także widok wszystkich postów, które zostały napisane, pogrupowane po miesiącach. Zastanawiam się czy nie lepiej by było zrobić odwrotnego sortowania, czyli od najnowszych do najstarszych. Jest to jednak prosta poprawka.

Co dalej?

Jak już wspomniałem, muszę nico popracować nad stylami. Kolejnym krokiem będzie postawienie wersji testowej, by sprawdzić poprawność wszystkich elementów „third-party”, dopełnienie contentu i… puszczenie wszystkiego „live” z podmianką przekierowania na domenę J

Sam projekt będzie oczywiście nadal rozwijany i rozszerzany o nowe funkcjonalności w miarę potrzeb bieżących.  Jednak już teraz mogę powiedzieć, że kolejnym dużym krokiem będzie wersja angielska.

Pozdrawiam Kamil.

Plany

Plany

Zbliża się już koniec miesiąca, ten post będzie krótką listą rzeczy, które chciałbym zrealizować zanim maj się skończy. Kłopoty zdrowotne niestety trochę psują mi mój plan, mam spore problemy z skupieniem się, na czymkolwiek przez grypę. Jeżeli jednak wszystko pójdzie po mojej myśli to powinno się udać zrobić deployment nowej wersji mojego bloga.

Aby blog mógł ujrzeć światło dzienne muszę jeszcze zrobić:

• Widok wszystkich postów na blogu
• Sitemape
• SEO optymalizacje
• Możliwość subskrypcji po RSS
• Wypełnić stronę główną i „O mnie” właściwą treścią
•  Przepisać wszystkie posty z starego bloga na nowego.

Jeśli powyższa lista zostanie zrealizowana, będę mógł przenieść się już na nową platformę. Mam nadzieję, że się uda J

Pozdrawiam serdecznie, Kamil.

301 URL tracker Umbraco

Dziś będzie o bardzo przydatnej paczce do umbraco, więc jeśli potrzebujesz łatwego zarządzania przekierowaniami linków to powinieneś zainteresować się URL trackerem.

Post będzie krótki, ale mam nadzieję, że przydatny J Url Tracker to rozszerzenie do Back Office umbraco, które pozwala na łatwe zarządzanie linkami wewnątrz aplikacji, gdy np. chcemy stworzyć przekierowania na stronę jakiegoś konkursu, albo po prostu mamy starą strukturę strony i chcemy przekierować na nowe linki.

Po wejściu na zakładkę Content, mamy do dyspozycji dodatkowy Tab, „Url Tracker”

Po kliknięciu przycisku „Create”, możemy stworzyć nowe przekierowanie. Najpierw zajmijmy się sekcją Requred:

Z pomocą kombinacji RootNode oraz Old URL decydujemy, jaki link ma być przekierowany na inny za pomocą tego narzędzia. Opcjonalnie, możemy również dodać wymagane parametry w linku. Możemy także skorzystać z wyrażeń regularnych i w takim przypadku wszystkie linki spełniające to wyrażenie regularne zostaną przekierowane.

Następnie w Redirect Node możemy wybrać noda, do którego użytkownik ma zostać przekierowany (link zostanie pobrany z właściwości tego noda) lub wpisać samodzielnie URL.

W sekcji Optional, należy zdecydować czy redirect jest permanentny (301) czy tymczasowy (302). Jeżeli przeglądarka, jako zwrot otrzyma 302 będzie sprawdzać czy przekierowanie nadal jest, natomiast przy 301 przeglądarka zapamiętuje to i przy kolejnej próbie wejścia na link, który zwrócił 301, automatycznie jesteśmy przekierowani na odpowiednią stronę bez pytania serwera.

Po stworzeniu linka, możemy zobaczyć go w overview wszystkich naszych redirectów.

Jeszcze jedną bardzo przydatną funkcjonalnością jest „404 Not found view” dostępny po naciśnięciu guzika z takim napisem w zakładce trackera. Zawiera listę wszystkich requestów, które zwróciły 404, wiec możemy sprawdzić gdzie użytkownik próbował się dostać. Z poziomu tego widoku możemy od razu stworzyć redirect do linka, który np. bardzo często się powtarza, a domyślamy się gdzie użytkownik próbował się dostać.

Pozdrawiam, Kamil.

Pobieranie Contentu z Umbraco część 1

Pobieranie Contentu z Umbraco część 1

Ten post będzie pierwszym postem z cyklu jak pobierać content, który dodaliśmy w Back Office w naszym kodzie C#. Dziś opiszę jak znaleźć interesujący nas node w contencie umbraco.

Jedną z opcji, którą bardzo często wykorzystuję, jest pobieranie contentu za pomocą Controllerów. Całą operację przedstawię za pomocą podstrony, która wyświetla wszystkie posty otagowane danym tekstem. Aby móc skorzystać z tej metody, musimy stworzyć dowolny Document Type i zapamiętać jego alias.

Teraz przechodzimy do kodu i tworzymy Controller dziedziczący po RenderMvcController i nazywamy go [Nasz alias doc typu]Controller i overridujemy metodę Index

    
    public class TagController : RenderMvcController
    {
        public override ActionResult Index(RenderModel model)
        {
            var content = model.Content;
        }
    }

W parametrze metody, możemy sięgnąć po IPublishedContent poprzez property o nazwie Content. Z kolei z niego, możemy wyciągnąć wszelkie inne teksty, bądź dzieci w drzewku contentu, więcej o tym będzie w części drugiej.

Innym sposobem na dojście do interesującego nas noda w drzewku, jest pobranie jego rodziców, którzy znajdują się w „korzeniu” i znalezienie interesujących nas rzeczy np. poprzez Linq. Ja w ten sposób pobieram wszystkie posty. Przejdźmy więc do kodu. W projekcie umbraco, mamy możliwość skorzystania z UmbracoHelper-a, który zawiera mnóstwo przydatnych rzeczy, a także zcachowaną zawartość naszego contentu.  Myślę, że dobrym pomysłem będzie stworzenie klasy, która zawiera statyczną property pobierającą ten Helper z kontekstu umbraco. To przykład mojej klasy:

    
    public class NodeHelper
    {
        private static UmbracoHelper _umbracoHelper;

        public static UmbracoHelper Umbraco => _umbracoHelper ?? (_umbracoHelper = new UmbracoHelper(UmbracoContext.Current));       
    }

Po stworzeniu takiej klasy, możemy pobrać Root Node naszego contentu.

    
       var rootNodes = NodeHelper.Umbraco.TypedContentAtRoot();

Korzystając z metody TypedContentAtRoot, otrzymujemy listę wszystkich „korzeni” w naszej aplikacji.

Struktura postów w moim projekcie wygląda następująco: Posty -> Kategoria -> Post

Aby pobrać wszystkie nody zawierające posty, muszę najpierw w Roocie wybrać te Posty, a z nich wziąć wszystkie dzieci ich dzieci. Spłaszczymy tym nieco strukturę, pomijając kategorie, a wybierając same artykuły. W kodzie można to załatwić następująco:

    
      var articlesRootNode = rootNodes.First(x => x.DocumentTypeAlias == "articlesRoot");
      var allArticles = articlesRootNode.Children.SelectMany(x => x.Children).ToList();

W zmiennej allArticles, mam listę typu IPublishedContent, z której mogę wyciągnąć interesujące mnie dane na temat postów. Do pobierania contenu możemy także wykorzystać ContentService. Nie jest to jednak zalecane, jeśli chcemy jedynie czytać dane, ponieważ ContentService odpytuje bezpośrednio bazę danych, a UmbracoHelper, jak już wspomniałem na początku, nie.

To już koniec części pierwszej. W kolejnej opiszę, w jaki sposób możemy wyciągać teksty i inne properties, które mamy w umbraco, a możemy je dodać do Document typ-ów.

404 w umbraco

404 w umbraco

Każda witryna powinna mieć swoją wersję strony 404. Wyświetla się ona, gdy użytkownik jest na właściwej domenie, jednak próbuje wyświetlić nieistniejącą podstronę. W tym poście opiszę, jak taką stronę utworzyć w umbraco.

Na początek zalogujmy się do Back Office umbraco i stwórzmy nową stronę. Zadbajmy także o to, aby mogła ona być poprawnie wygenerowana przez umbraco. W moim przypadku wiązało się to z dodaniem nowego contentu typu „Page” i dodanie do niego sekcji, które mają zostać wyświetlone na tej stronie.

Po utworzeniu i sprawdzeniu czy działa, przejdźmy do zakładki właściwości i skopiujmy sobie ID naszego Noda.

Przechodzimy teraz do naszego projektu umbraco i wyszukujemy plik, umbracoSettings.config w XML-u musimy zmienić zawartość error404 na ID, które skopiowaliśmy z Back Office.

Po przebudowaniu projektu, strona 404 powinna się już poprawnie wyświetlać na lokalnym serwerze. Żeby zadziałała także na hostowanym, musiałem dodać w głównym WebConfigu tę linijkę:

<httpErrors existingResponse="PassThrough" />

Należy to wkleić w sekcji <system.webServer>

Po tej operacji wszystko powinno już śmigać, a po wpisaniu błędnego linka, naszym oczom powinna ukazać się strona 404.

To by było na tyle, dodawanie strony 404 w umbraco jest dość proste.

Pozdrawiam, Kamil.

Dzielenie się postami poprzez „addthis”

Dzielenie się postami poprzez „addthis”

Praktycznie każdy blog posiada ułatwienia do dzielenia się postami z znajomymi. Oczywiście ja także chciałbym mieć taką funkcjonalność w swoim blogu, ale czy muszę to robić od zera? Nie! Podobnie jak z sekcją komentarzy w sieci, możemy znaleźć gotowe rozwiązania popularnych „Share buttons”. Instalacja jest prosta i dziś poprowadzę Cię przez instalacje takich guzików ze strony https://www.addthis.com/

Rejestrujemy się na stronie, po czym naszym oczom ukazują się opcje, które możemy wybrać na stronie. Poza guzikami do dzielenia się, możemy skorzystać także z innych usług, jednak ja skupię się dziś jedynie na nich. Kliknijmy więc „Share Buttons”:

Wybierzmy teraz najbardziej interesujący nas wygląd guzików. Klikając na poszczególne opcje, mamy podgląd na żywo po prawej stronie, w prawym górnym rogu możemy także przełączać się między wersją mobile a zwykłą. Dzięki temu, zanim dodamy to na naszą stronę, widzimy co bierzemy i jak będzie to wyglądać na różnych urządzeniach. Ja wybrałem pierwszy z góry J

Następnie, mamy możliwość konfiguracji wyglądu i zawartości naszego paska z guzikami.

Jeżeli chodzi o „Social Networks” to w przeciwieństwie do tego, co jest napisane, ja rekomenduje wybrać samemu social media, do których guziki mają zostać wygenerowane. Do wyboru jest multum opcji, sprawdźcie, które serwisy was interesują i wybierzcie je J

W zakładce Design, możemy ustawić wygląd naszego paska, ja pozostawiłem to bez zmian, ponieważ domyślny wygląd najbardziej mi odpowiada. Jeżeli Twój blog jest w biało czarnych odcieniach i nie chcesz by guziki raziły w oczy swoimi kolorami, masz opcję by to zmienić właśnie w tym miejscu.

Warto także zajrzeć do sekcji zaawansowanych ustawień. Tu możemy ustawić, na których podstronach guziki mają, bądź nie mają się pojawiać. W jakim momencie layout ma zmienić się na wersję mobilną i od jakiej ilości udostępnień ma się pojawiać licznik pokazujący ich ilość.

Jeśli nie prowadzimy bloga w języku angielskim, warto również ustawić treść wiadomości wyświetlanych użytkownikowi.

Jeżeli jesteśmy już zadowoleni z efektu, klikamy „Continue” i naszym oczom ukażą się opcje, których możemy użyć przy podpinaniu guzików pod nasz serwis. Jako, że nie korzystam z serwisów wymienionych w kartach, wykorzystałem wersję HTML. Jedyne co trzeba teraz zrobić, to wkleić Skrypt na końcu body w naszym serwisie.

To już wszystko na dziś, jak mogliście się przekonać, dodawanie guzików do dzielenia się postem poprzez addthis jest dość proste i intuicyjne.

Pozdrawiam, Kamil

Widok postu, rozwinięcie.

Widok postu, rozwinięcie.

Tym razem o tym, co zmieniło się w widoku postu. Prototyp bloga jest już niemal gotowy. Zostało nieco pracy związanej z SEO. Strona wizualna projektu potrzebuje jedynie ostatnich szlifów i pierwsza wersja będzie gotowa. Z radością przedstawiam także logo mojego projektu:

Zdecydowałem się na treść postu po lewej stronie, a po prawej kolumnę na ¼  szerokości zawierającą dodatkowe informacje. Pierwszą informacją są Tagi, które można kliknąć by przejść do widoku listy wszystkich postów zawierających dany tag. Drugą, lista (aktualnie siedmiu, ale to może ulec zmianie) ostatnich postów z tej samej kategorii, co czytany przez użytkownika. Poniżej listy niedawno dodanych, znajduje się iframe z fanpagu na Facebooku. Na końcu, po treści postu, znajduje się sekcja z komentarzami na całą szerokość strony.

Planuję także stworzyć sekcję z subskrypcją mailingową, ale w pierwszej kolejności mam zamiar dodać całą funkcjonalność, którą posiada obecny „brzydki” blog. Gdy to już się stanie, przepnę domenę i nowe posty będą się już pojawiać na nowej odsłonie bloga, która mam nadzieję, że się Ci spodoba J

Ostatnią rzeczą, którą podłączyłem do bloga, jest możliwość dzielenia się postami na „social mediach” lub mailowo. Nie chcąc budować tego samemu od początku, skorzystałem z gotowej implementacji z https://www.addthis.com/. Guziki do dzielenia się ze znajomymi pojawiają się po lewej stronie, chyba że przeglądamy na małym ekranie - wówczas u dołu. Wygląda to bardzo spójnie i mi osobiście przypadło do gustu. Jak dodać to samodzielnie do własnej strony, opiszę w kolejnym poście.

To już wszystko, co chciałem przekazać w ramach tego posta. Ostatnio skupiam się na implementacji nowych rzeczy, dlatego też nie mam tak dużo czasu na pisanie jak bym chciał.

Pozdrawiam, Kamil.