Dries Deboosere – blog

Lees de huidige url uit in ASP.Net Core

2021-07-28T00:00:00Z

Voeg onderstaande code toe in de Startup klasse:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRouting(options => options.LowercaseUrls = true);
    services.AddRazorPages().AddRazorRuntimeCompilation();
    services.AddHttpContextAccessor(); // Add this one

    ...
}

Injecteer de IHttpContextAccessor in de constructor van je klasse waarin je de huidige URL wenst uit te lezen:

public class BlogService : IBlogService
{
    private readonly IHttpContextAccessor _httpContextAccessor;

    public BlogService(IHttpContextAccessor httpContextAccessor)
    {
        _httpContextAccessor = httpContextAccessor;
    }
}

Daarna lees je de Scheme en Host.Value properties uit:

private string GenerateUrl(string slug)
{
    return $"{_httpContextAccessor.HttpContext.Request.Scheme}://{_httpContextAccessor.HttpContext.Request.Host.Value}/blog/{slug}";
}

In het geval van de link naar dit blogbericht zou volgende string gegenereerd worden in de GenerateUrl methode: https://localhost:5001/blog/urls-in-asp-net-core-met-kleine-letters-in-plaats-van-hoofdletters

_httpContextAccessor.HttpContext.Request.Scheme leest het schema uit, wat meestal https zal zijn.

_httpContextAccessor.HttpContext.Request.Host.Value leest het adres (inclusief poortnummer) uit, wat tijdens de developing meestal localhost:5001 zal zijn. Maar dit kan even goed www.eenofanderesite.be zijn als waarde.

Urls in ASP.Net Core met kleine letters in plaats van hoofdletters

2021-07-28T00:00:00Z

Wanneer je links creëert in je ASP.NET Core web applicatie met behulp van TagHelpers zal elk woord in je URL beginnen met een hoofdletter.

Neem nu onderstaand voorbeeld:

<a asp-controller="About" asp-action="Index">About</a>
<a asp-controller="Tools" asp-action="Index">Tools</a>

Dit zal gerendered worden als onderstaande HTML waarin elk woord van de Controller of Action naam begint met een hoofdletter in de URL:

<a href="https://driesdeboosere.dev/About">About</a> <a href="https://driesdeboosere.dev/Tools">Tools</a>

Zelfs in de adresbalk van je web browser begint elk woord van de Controller en Action met een hoofdletter:

Ik heb mijn URLs liever allemaal in kleine letters, zoals dit:

<a href="https://driesdeboosere.dev/about">About</a> <a href="https://driesdeboosere.dev/tools">Tools</a>

Gelukkig kunnen we dit erg gemakkelijk instellen in onze Startup.cs class in de ConfigureServices methode. We moeten enkel de nodige setup doen aan de route options door de RouteOptions LowercaseUrls property op true in te stellen.

services.AddRouting(options => options.LowercaseUrls = true);

Zorg ervoor dat je deze options plaatst VOOR services.AddMvc(), services.AddControllersWithViews(), services.AddRazorPages(), ...!!

Zie onderstaand voorbeeld:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRouting(options => options.LowercaseUrls = true);
    services.AddControllersWithViews().AddRazorRuntimeCompilation();
    // other configurations
}

Nu zullen alle URL's gecreëerd door de TagHelpers met kleine letters beginnen.

Is je computer klaar voor Windows 11?

2021-07-30T00:00:00Z

Download de executable van de laatste release op de GitHub repository van rcmaehl van de WhyNotWin11 tool.

Run de tool en bekijk de resultaten.

Mijn laptop vinkt in ieder geval alle vereisten aan 😁

Voor mijn desktop zal ik nog even in het BIOS moeten duiken blijkbaar 🤔

Hoe voeg je een Spotify afspeellijst toe aan je website

2021-08-11T00:00:00Z

Een Spotify-afspeellijst aan uw website toevoegen is heel eenvoudig. Het is gewoon wat HTML-code van Spotify kopieren, die je dan in je eigen HTML van je eigen website kunt plakken.

Open Spotify

Open de Spotify-applicatie en ga naar je playlist die je op je website wenst te delen.

Kopieer de HTML code

Klik op de drie bolletjes
Ga naar Share en dan Embed playlist

Nu zie je het volgende scherm:

Zo ziet je playlist eruit als je de html-code in je website plakt.

Klik nu op de Copy knop om de code te kopiëren. Dit zou er ongeveer zo uit moeten zien:

<iframe
  src="https://open.spotify.com/embed/playlist/5aXXutTCAQMAXHV7juYBR0"
  width="100%"
  height="380"
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
></iframe>

Als je deze HTML code in de HTML van je website plakt dan zie je de (afspeelbare) Spotify playlist op je website staan. Het ziet er precies zo uit als de afspeellijst die je in onderstaand voorbeeld ziet:

Hieronder heb ik de iframe HTML-code op deze blog post geïmplementeerd:

Verwijder alle HLN Plus artikelen van het Laatste Nieuws website

2021-08-19T00:00:00Z

TLDR;

Enkel interesse in de extensie en niet in het verhaal?

Download hier voor Chromium browsers (Chrome, Edge, Brave, ...)

Download hier voor FireFox

Waarom?

Bij het surfen naar de website van Het Laatste Nieuws was ik het beu om telkens de HLN+ artikelen te zien. Ik heb geen abonnement bij HLN en ben het ook niet van plan om te nemen.

Ik begrijp dat niet al het nieuws gratis gelezen kan worden en dat de journalisten ook betaald moeten worden voor hun werk en heb dan ook alle begrip ervoor dat bepaalde artikelen achter een betaalmuur zitten. Maar aangezien ik geen abo wil afnemen bij HLN heb ik dan ook liever niet de HLN+ artikelen te zien.

Toen kwam ik op het idee om een extension te schrijven voor mijn browser (MS Edge) die deze artikelen voor mij verbergt.

Versie 1.0

Toen ik aan het rondneuzen was op de website met de dev tools van de browser zag ik dat alle HLN+ artikelen een bepaalde CSS klasse hadden in de trend van article-plus. Ik ging dus op zoek naar alle CSS klassen waarin -plus voorkomt. Via CSS kon ik deze artikelen verbergen:

.article-plus,
.article-small-plus,
.article-large-plus {
  display: none;
}

Versie 1.1 en 1.2

Dit ging goed voor een tijdje maar na verloop van tijd werden wijzigingen aangebracht aan de HTML en CSS structuur van de website van HLN waardoor mijn CSS injectie niet meer volledig werkte en er dus toch weer HLN+ artikelen tevoorschijn kwamen. Ik kon het voorlopig oplossen door nieuwe CSS klassen toe te voegen en een update in te dienen bij de Chrome Web Store.

Versie 1.3

Op 5 april 2021 krijg ik echter een mailtje binnen van een gebruiker (tot dan dacht ik dat ik de enige gebruiker was 😃) die me erop attent maakte dat er plots opnieuw HLN+ artikelen tevoorschijn kwamen.

Altijd leuk die fanmail! Eindelijk de tijd gevonden om een update te voorzien. Versie 1.3 werd ingediend bij de Chrome Web Store, binnenkort beschikbaar dus! 😎 #chromiumextension #hlnplus #hlnplusremover

— @Drieze_ op 11 april 2021

Opnieuw vond ik een soort logica in de HTML en CSS om de artikelen te verbergen, maar deze keer had ik ook JavaScript nodig. Zogezegd, zo gedaan en versie 1.3 werd toegevoegd aan de Chrome Web Store.

Open Source

Al die tijd stonden de bestanden van deze extensie publiekelijk op mijn GitHub profiel. Toen ik plots op 10 juni 2021 een pull request binnenkreeg op deze GitHub repository van ExcuseMi.

Versie 1.4.2

ExcuseMi heeft ervoor gezorgd dat deze extensie meer mogelijkheden bevat:

Verberg HLN+ artikelen
Verberg HLN Shop
Verberg footer
Compacte modus
Verberg reacties

En heeft ervoor gezorgd dat deze extensie beschikbaar is voor FireFox.

Waar te vinden?

Download hier voor Chromium browsers (Chrome, Edge, Brave, ...)

Download hier voor FireFox

Statistieken Chromium

Enkele statistieken van het aantal installatie en wekelijkse gebruikers voor Chromium

Statistieken FireFox

FireFox heeft slechts één gebruiker (en dat zal mezelf waarschijnlijk zijn 😁)