Wersja testowa WebDotNet

Wersja testowa WebDotNet

Witam!

Z przyjemnością zapodaję linka do testowej wersji nowej platformy J

http://www.webdotnet.eu

Jak sama nazwa wskazuje, nie jest to jeszcze finalna wersja, ale chcę pokazać, co udało mi się zrealizować przez ten czas. Stworzyłem także readonly konto w umbraco BackOffice, jeśli chciałbyś zobaczyć jak wygląda struktura umbraco. Link do umbraco to http://www.webdotnet.eu/umbraco  a dane do logowania to:

Login: „Test”

Pass: „qwerty123”

Boleć może zwłaszcza brak przystosowania do urządzeń mobilnych, ze względu na strukturę w jakim buduję strony, nie działa też podgląd na małych sekcjach. Nie mniej jednak zapraszam do oglądania i testowania!

Pozdrawiam, Kamil 

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.

Tagi, Umbraco Tag Service

Tagi w Umbraco Tag Service

W poprzednim poście opisałem jak zaimplementować do Umbraco możliwość dodawania tagów. Dziś będzie o tym, jak wykorzystać to w kodzie i umożliwić filtracje po tagach.

Aby mieć możliwość pobrania dokumentów z Tagiem o określonej nazwie, potrzebujemy UmbracoHelper’a. Ja stworzyłem klasę, którą wstrzykuję w miejsca gdzie potrzebuję pobrania czegokolwiek dodatkowego z Umbraco, a tak wygląda jej kluczowy element:

    public class UmbracoEventHandler : ApplicationEventHandler
        private static UmbracoHelper _umbracoHelper;

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

Na potrzeby wyświetlania tej listy, utworzyłem nowy kontroler, który jest odpowiedzialny tylko i wyłącznie za to.

    public class UmbracoEventHandler : ApplicationEventHandler
[DonutOutputCache(CacheProfile = "Page.Cache")]
        public override ActionResult Index(RenderModel model)
        {
            var pageViewModel = new PageViewModel();
            var extendedModel = _pageModelExtender.ApplyLayoutToModel(pageViewModel, model.Content);
            var tagName = Request.QueryString["tag"];
            var articles = new List();
            var articlesWithTag = _nodeHelper.Umbraco.TagQuery.GetContentByTag(tagName).ToList();
            var header = $"Posty otagowane {tagName}";
            articlesWithTag.ForEach(article =>
            {
                articles.Add(new ArticleCardViewModel
                {
                    Title = article.GetPropertyValue("title"),
                    ShortDescription = article.GetPropertyValue("shortDescription"),
                    Tags = article.GetPropertyValue("tags").Split(','),
                    CardImage = article.GetImage("cardImage", _nodeHelper).WithQuality(80).WithHeight(160).WithWidth(330).WithCrop(),
                    Url = article.Url
                });
            });
            var modelForArticles = new ArticleListViewModel
            {
                Title = header,
                Articles = articles
            };
            var viewModel = new ArticleByTagViewModel
            {
                Id = extendedModel.Id,
                Title = header,
                Footer = extendedModel.Footer,
                Header = extendedModel.Header,
                Description = "Lista wszystkich postów które zostały otagowane " + tagName,
                ArticlesListModel = modelForArticles
            };
            return View("Tag", viewModel);
        }

Kod odpowiedzialny za pobranie wszystkich dokumentów z określonym tagiem to zmienna „articlesWithTag”. Po drodze tworzę także dodatkowe modele i pakuję w odpowiadającą mi strukturę tak, by widok mógł pozostać czysty.

Nazwę taga, który ma być brany pod uwagę, pobieram z parametru w linku (patrz zmienna „tagName”). Jeżeli chodzi o razora, to reużyłem istniejący widok kart postów, skorzystałem z Section buildera i efekt końcowy jest zadowalający:

Dziś krótko, ale używanie tag service jest dość proste i stwierdziłem, że nie ma co nadmiernie się rozpisywaćJ

Udanej Majówki!

Tagi w Umbraco Back Office

Tagi w Umbraco Back Office

Jedną z bazowych funkcji, które posiada większość blogów, jest możliwość wyświetlania postów po tagach. W tym poście będzie o tym, jak skorzystać z serwisu tagowego w umbraco, aby pobrać i wyświetlić cały content, który został oznaczony określonym Tagiem.

Pierwsza rzecz, którą będziemy potrzebować to możliwość nadania tagów dla określonego typu dokumentów w Umbraco.

Przechodzimy, zatem do Settings -> Document Types i wybieramy interesujący nas DocType, w moim przypadku będzie to „Article”.  Dodajemy nową property i jako typ wybieramy Umbraco.Tags

Przechodzimy teraz do elementu w drzewie contentu. Jak widać, jest teraz możliwość dodawania tagów. Aby dodać nowy, wystarczy wpisać nazwę i kliknąć enter. Jeżeli chcemy dorzucić istniejący, to piszemy początek jego nazwy i możemy dodać go z listy, która się wyświetli:

Sporym ułatwieniem w zarządzaniu tagami na naszej stronie jest rozszerzenie do Umbraco o nazwie „Tag Manager” https://our.umbraco.org/projects/backoffice-extensions/tag-manager/ .

Najprostszym sposobem, aby je zainstalować, będzie pójście do sekcji Developer -> Packages w Back Office Umbraco. Wpisujemy „Tag Manager” i wybieramy ten, który właśnie tak się nazywa ;) Następnie klikamy „Install package”. Po zakończonym procesie instalacji będziemy mieli kolejny tab dostępny w CMS’ie.

Po przejściu do niego, naszym oczom ukaże się drzewo ze wszystkimi tagami, które utworzyliśmy w naszym systemie wraz z informacją ile dokumentów posiada dany tag:

Klikając na konkretny Tag mamy możliwość edycji. Możliwa jest zmiana nazwy oraz przeniesienie otagowanych dokumentów do innego taga, co znacząco ułatwia wszelkiego rodzaju migracje.

Kolejną bardzo przydatną rzeczą jest możliwość przejrzenia wszystkich dokumentów z contentu i mediów. W jednym miejscu widzimy nazwy tych dokumentów i możemy upewnić się czy wszystko jest w porządku. Po kliknięciu w nazwę, przenoszeni jesteśmy bezpośrednio do tego dokumentu i mamy możliwość jego edycji.  To już tyle, jeżeli chodzi o część w back Office Umbraco. Tag Service działa bardzo szybko i wszelkie informacje na ich temat są cachowane. Dzięki temu, wyszukiwanie po tagach działa dobrze i nie trzeba pisać implementacji samodzielnie. W następnym poście pokażę, jak używać Tag Service w kodzie oraz w jaki sposób zaimplementowałem wyświetlanie listy postów po tagach.

Pozdrawiam, Kamil.

PluralSight, Sonmez i Szafrański

Można robić wszystko po swojemu, uczyć się na swoich błędach (albo, co gorsza nie), przecierać własne szlaki. Dzięki temu wytyczymy sobie naszą ścieżkę, która w miarę postępów zamieni się już w drogę prowadzącą do finalnego celu. Można także skorzystać z wiedzy i doświadczeń innych. Zastosować sprawdzone trasy i dostosować je do własnych potrzeb. Wskoczyć na chwilę na autostradę, która znacząco przyspieszy dotarcie na miejsce, a w razie trudności zmienić pas na inny, bądź zjechać z niej, gdy widzimy, że już nie prowadzi tam gdzie chcemy jechać. Tak właśnie widzę wzorowanie się na innych i adaptację ich wiedzy oraz doświadczeń na naszej ścieżce. Takie podejście może nas uchronić od niepotrzebnych ślepych zaułków, ułatwić i przyspieszyć dotarcie do celu.

Post ten będzie o ludziach i zasobach, które mi znacząco pomogły (i nadal pomagają) w mojej szeroko pojętej karierze zawodowej.

PluralSight

Nie mam wykształcenia stricte informatycznego. Na pierwszym stopniu studiów byłem na wydziale ekonomii, a finalnie uzyskałem dyplom magistra fizyki. Jako, że specjalizacje były luźno związane z informatyką, miałem kilkakrotnie „podstawy programowania” w programie nauczania. Podstawy (pętle, deklaracja zmiennych, metod itp.) w większości języków są bardzo zbliżone i naprawdę wystarczyłoby raz pokazać jak się robi pętle for. W związku z takim akademickim „background’em” moja wiedza była niewielka. Idąc na moją pierwszą rozmowę kwalifikacyjną podkreśliłem, że niewiele umiem, ale bardzo szybko się uczę. Z takim kredytem zaufania zatrudnił mnie mój pierwszy pracodawca. Po rozpoczęciu pracy, okazało się, że firma, która mnie zaangażowała ma konto na Pluralsight. Dostałem więc login i hasło i mogłem korzystać z niego zarówno w pracy, jak i w domu. Serwis jest ogromną skarbnicą wiedzy o programowaniu. Chłonąłem kursy jeden za drugim. Uczyłem się częściowo w pracy, ale głównie w domu, by nadrobić wszelkie braki oraz uzupełnić wiedzę, która była mi potrzebna do sprawnej pracy przy projekcie. Polecam serdecznie, jako źródło wiedzy, można znaleźć tam kursy na różnym poziomie zaawansowania (a o dobre kursy dla zaawansowanych przecież tak trudno).

Do dzisiaj, zanim zagłębię się w jakąś nową bibliotekę, sprawdzam czy jest dostępny kurs na jej temat na tej właśnie platformie. Najbardziej utknęły mi w procesie nauki kodowania dwa nazwiska autorów.

Scott Allen (http://odetocode.com/about/scott-allen), który stworzył świetne kursy na temat programowania w C#, pisania aplikacji MVC czy WebApi oraz na temat frameworków JavaScript-owych. Ostatnio mocno zaangażował się w projekt Aurelia JS (http://aurelia.io).

Drugim autorem, któremu chciałbym poświęcić nieco więcej uwagi jest John Sonmez

 https://simpleprogrammer.com/about-simple-programmer/

Pierwszy raz miałem styczność z Sonmezem właśnie na platformie Pluralsight, gdzie oglądałem kursy na temat programowania na urządzenia mobilne i szeroko pojętego programowania w .NET. Jest to człowiek, na którym się wzoruje. Przetarł on ścieżkę w wielu miejscach i czerpię od niego mnóstwo wiedzy. Ma swój kanał na Youtube, na którym często wrzuca materiały o interesującej mnie tematyce np. jak zbudować własny „Brand”, jak poprowadzić swoją karierę tak, aby przynosiła jak najwięcej satysfakcji i pieniędzy. To i wiele innych rzeczy można znaleźć u Sonmeza. Zastosowałem u siebie wiele z jego rad i zauważyłem jedynie pozytywne efekty. Z czystym sumieniem polecam.

Ostatnim świetnym „zasobem”, z którego wiele wyciągnąłem i z powodzeniem zastosowałem jest Michał Szafrański, jego blog http://jakoszczedzacpieniadze.pl oraz książka „Finansowy Ninja” .

W miarę jak rozwijała się moja kariera, rosły także zarobki. Jednak nie umiałem (i nadal mam z tym czasem problem) utrzymać swoich finansów w „ryzach”. Zarabiałem coraz więcej, a i tak starczało „na styk”. Podjąłem kilka głupich z finansowego punktu widzenia decyzji, których konsekwencji nie udało mi się jeszcze w pełni opanować. Blog, a zwłaszcza książka Michała, pomogły mi ogarnąć swoje finanse, przeskanować wydatki i dowiedzieć się gdzie leży problem. Dowiedziałem się, jak mogę im zaradzić i wytyczyć sobie ścieżkę do wyjścia na prostą. Nadal się jeszcze za mną pewne smrodki ciągną, ale sukcesywnie udaje mi się je redukować, budując przy tym kapitał na przyszłość. Materiały Michała pozwoliły mi spojrzeć na wiele rzeczy z zupełnie innej perspektywy oraz zobaczyć, że to co robią „wszyscy” niekoniecznie jest dobre dla mnie.

Osób, od których czerpię wiedzę, czy zasobów, z których się uczę jest oczywiście więcej, jednak nie chcę, aby ten post był zbyt długi. W moim dorosłym życiu (po studiach) to są osoby/zasoby, które były mi najbardziej pomocne.

To już wszystko na dziś.

Pozdrawiam, Kamil.

     

Proste Cachowanie w .NET MVC

Umbraco ma w sobie system cachowania contentu. Co jednak, gdybyśmy chcieli pójść o krok dalej i zrobili cachowanie jeszcze wcześniej? Po co w ogóle się tym przejmować? O tym w dzisiejszym poście.

Sprawdźmy więc definicję. Czym właściwie jest Cache?

„Pamięć podręczna (ang. cache) – mechanizm, w którym część spośród danych zgromadzonych w źródłach o długim czasie dostępu i niższej przepustowości jest dodatkowo przechowywana w pamięci o lepszych parametrach. Ma to na celu poprawę szybkości dostępu do tych informacji, które przypuszczalnie będą potrzebne w najbliższej przyszłości.”

Źródło Wikipedia

W stronach takich jak WebDotNet, czy innych, w których content nie zmienia się dynamicznie, warto zastanowić się nad cachowaniem wyników, całych requestów.  Zdecydowałem się na zastosowanie „Donut Output Cache”, który jest inspirowany standardowym w MVC Output Cachem. Oto krótki poradnik jak możesz zastosować go w swoim projekcie MVC/Umbraco.

Instalujemy nuget package „MvcDonutCaching”. Cachowanie za pomocą tej biblioteki polega na zapisywaniu w pamięci całych zwrotów z metod Controllerów.  W aplikacji WebDotNet mam jak na razie dwa Controllery. Pierwszy odpowiedzialny za requesty o posty, a drugi o „normalne” strony z sekcjami. Aby dodać akcję do cachowania, należy dodać atrybut do metody. Przy zwykłym projekcie MVC możemy pokusić się o coś bardzo prostego jak np.:

    [DonutOutputCache(Duration = "300")]

Wartość zwracana zostanie w tym przypadku zapisana w pamięci na 300 sekund. Jeżeli w przeciągu tego czasu ktoś ponownie odpyta tę metodę, zwrócona zostanie wartość z pamięci, a kod z metody zostanie pominięty. W ten sposób możemy zaoszczędzić sporo czasu gdy np. nasza metoda odpytuje dodatkowo bazę danych i wykorzystuje jakiś algorytm do wyliczenia danych, które zwraca.

W moim przypadku musiałem pójść o krok dalej, jako że metoda Index jest wykonywana przy renderowaniu każdej strony na platformie. Musiałem więc wykorzystać dostosowany do moich potrzeb profil cachowania. Atrybut przy takim podejściu wygląda tak:

    [DonutOutputCache(CacheProfile = "Page.Cache")]

Profil jest zdefiniowany w Web.configu aplikacji:

Definiujemy tu nasz profil, czas przechowywania w pamięci oraz opcjonalną (a w moim przypadku wymaganą) dedykowaną klasę, która zajmie się kreacją kluczy do cacha. Zdecydowałem się, że kluczem dla moich elementów w pamięci będzie URL strony, gdyż jest to wartość unikalna.

    public class WebdotnetApplication : UmbracoApplication
    {
        public override string GetVaryByCustomString(HttpContext context, string custom)
        {
            if (custom.Equals("Page.Cache")) 
            {
                return context.Request.Url.AbsoluteUri;
            }
            return base.GetVaryByCustomString(context, custom);
        }
    }

Aby dedykowany kreator kluczy działał, musimy zrobić jeszcze jedną rzecz. Sprawić, by dziedziczył po naszej startowej klasie, która jest zdefiniowana w Global.asax. Przeciążyć metodę  „GetVaryByCustomString” i w pliku Global zmienić bieżącą klasę na naszą klasę dziedziczącą po poprzedniej, aby zachować ówczesną funkcjonalność. 

    <%@ Application Inherits="Webdotnet.Custom.Core.WebdotnetApplication" Language="C#" %>

To by było na tyle, jeżeli chodzi o dodawanie elementów. Używając Umbraco chcemy jednak, by przy wszelkich zmianach w contencie pamięć podręczna została wyczyszczona (a przynajmniej pozycja pod zmienianym kluczem została usunięta). Pozostało nam jeszcze podpięcie się pod Eventy umbraco. Aby to zrobić, należy stworzyć klasę, która dziedziczy po „ApplicationEventHandler” i nadpisać metodę „ApplicationStarted”. W ciele tej metody należy podpiąć się pod eventy zmiany/dodawania/usuwania itp. i dodać metody modyfikujące zawartość cacha, w moim przypadku usuwające jego zawartość.

    public class UmbracoEventHandler : ApplicationEventHandler
    {
        protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            ContentService.Published += UmbracoContentChangeHandler.OnPublished;
            ContentService.Created += UmbracoContentChangeHandler.OnCreated;
            ContentService.Saved += UmbracoContentChangeHandler.OnSaved;
            ContentService.Published += UmbracoContentChangeHandler.OnPublished;
            ContentService.UnPublished += UmbracoContentChangeHandler.OnUnpublished;
            ContentService.Moved += UmbracoContentChangeHandler.OnMoved;
            ContentService.Trashed += UmbracoContentChangeHandler.OnTrashed;
            ContentService.Deleted += UmbracoContentChangeHandler.OnDeleted;
        }
    }

W każdej z tych metod wywołuję usuwanie elementów z cacha, kod tej metody wygląda następująco:

    private static void RemoveItemsFromCache()
        {
            var cacheManager = new OutputCacheManager();
            cacheManager.RemoveItems();
        }

I to by było wszystko. W tym momencie będziemy już mieli działającego cacha wraz z usuwaniem jego elementów przy zmianach w contencie aplikacji.

To już wszystko na dziś, pozdrawiam Kamil.

Komentarze poprzez Disqus

Dziś podjąłem się implementacji komentarzy. Zdecydowałem, że nie chcę się bawić w implementowanie ich samemu, gdyż wiązałoby się to również z implementacją użytkowników. Obecnie nie widzę potrzeby by mieć użytkowników poza możliwością komentowania, więc postanowiłem się rozejrzeć za czymś gotowym.
Moją uwagę przykuł Disqus, którego widziałem na wielu stronach. Ma multum opcji logowania się i wygląda bardzo ładnie :). W dzisiejszym poście będzie zatem o tym jak skonfigurować Disqus i zamieścić go na dowolnej stronie. Sama instrukcja jest na stronie producenta, jednak chciałbym pokazać jak proste i bardzo intuicyjne jest to rozwiązanie, by rozwiać wątpliwości czy warto.

Pierwszą rzeczą, którą musimy zrobić jest… Założenie konta na Disqus :). Logujemy się więc na https://disqus.com/ i przechodzimy do zakładki „Get Started”.
Logujemy się za pomocą jednego z kont na social mediach bądź zakładamy nowe konto, jeśli nie posiadamy nawet „fejkowych” kont. Ja zalogowałem się poprzez Google.
Klikamy na „I want to install Disqus on my site”

Wpisujemy nazwę strony, kategorię oraz język, następnie klikamy „Create Site”

Następnym etapem jest wybór subskrypcji. Przeczytaj i zdecyduj, która Ci odpowiada najbardziej.
Nadszedł czas na wybór sposobu implementacji samych komentarzy na stronie. Możesz wybrać jeden z wielu gotowych pluginów, bądź skorzystać z „Universal Code”. Jako, że tworzę własnego bloga, wybrałem ten ostatni, który umożliwia implementację komentarzy na dowolnej stronie.

Naszym oczom ukaże się ten oto blok kodu, który z drobnymi zmianami musimy wkleić na stronę, która ma posiadać sekcję komentarzy:

Tak jak jest napisane interesują nas dwie rzeczy:
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
URL możemy uzyskać np. poprzez JavaScript wykorzystując „window.location.href” natomiast identifier musimy ustalić na bazie czegoś unikalnego, w moim przypadku jest to Id Noda z umbraco będącego wyświetlanym artykułem. I to tyle… Tak, to było tak proste.
Czas na test, sprawdzam czy wyświetla mi się sekcja komentarzy i dodaję testowy komentarz:

Wygląda całkiem niesamowicie, sprawdźmy jeszcze czy widzę komentarze w panelu administracyjnym w disqus

Wygląda na to, że wszystko jest w porządku. Tym oto sposobem zaoszczędziliśmy sobie mnóstwo czasu, który byłby potrzebny na wdrożenie czegoś podobnego samodzielnie i ostylowanie, by wyglądało równie ładnie.
To już wszystko na dziś, pozdrawiam! :)