DEV Community: kis.stupid

Secure Access to Azure Storage Blobs

kis.stupid — Sun, 28 Apr 2024 16:40:25 +0000

In the midst of building a webshop-like feature for the kiss-code.com brand website, I stumbled upon the requirement to provide protected access to the digital products.

Currently, my shop only holds the lead magnet which is free. Within 5 minutes after ordering it, you should receive an email containing a download link. This lead magnet lives on an Azure Blob Storage container which allows public read access for anyone to download, at any time.

This download link getting leaked would result in people bypassing subscribing to my newsletter. So, let's start by changing the access level to private.

Surprise! Changing the access level to private will deny access also to the people who should have access after subscribing. Now, we can generate Shared Access Signature (SAS) tokens to grant limited access for a limited time. We can simply generate one by specifying permissions and the token's time-to-live (expiry) and clicking that "Generate SAS token and URL" button.

This results in the following token and URL. Following that URL will download the lead magnet which lives in a private Azure Blob Storage container.

Now, I'll want to generate these URLs automatically after someone ordered a digital product on my shop. So that this person receives an email containing the download link including the SAS token to access the purchased product.

I'll add the following code to my NuGet package to generate an URL including a SAS token that grants read access for a given duration.

public string GenerateSasUrlForBlob(string blobName, DateTimeOffset? expiresOn = null, string? containerName = null)
{
    ArgumentNullException.ThrowIfNullOrWhiteSpace(_config.AccountKey);

    containerName = string.IsNullOrWhiteSpace(containerName) ? _config.ContainerName : containerName;
    ArgumentNullException.ThrowIfNullOrWhiteSpace(containerName);

    var sasBuilder = new BlobSasBuilder
    {
        BlobName = blobName,
        BlobContainerName = containerName,
        ExpiresOn = expiresOn ?? DateTimeOffset.UtcNow.AddHours(24)
    };

    sasBuilder.SetPermissions(BlobSasPermissions.Read);

    var sasUrl = sasBuilder
        .ToSasQueryParameters(new StorageSharedKeyCredential(_config.AccountName, _config.AccountKey))
        .ToString();

    return sasUrl;
}

You can get an AccountKey in the Azure portal:

Find my .NET 8 Brand Website V1 with tons of features add value to and capture your audience!

If you are interested in more of my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Thank you for taking the time & interest in my work. Kind regards, Auguste @ kiss-code.com

Sources

How I Became Top Rated on UpWork

kis.stupid — Sat, 20 Apr 2024 18:54:46 +0000

WOOHOOW!!! The "Top Rated" badge!

How did I obtain this so quickly? And that, with only 23 hours on 3 jobs?

This is written from my POV with my free UpWork account => very few connects at my disposal.

1. Research the platform.

I first researched how to get jobs on UpWork by listening to YouTubers like Josh Burns Tech and Cody Codes.

Their advice:

Don't be proposal number 80, try to be within the first 15.
The first 2 sentences matter.
Set filtered job alerts.
Take profile inspiration from e.g. top UpWork earners.
...

2. Land a job.

I target jobs where I have an edge. This edge can be skill-wise, project-wise, geographical, having things in common e.g. native tongue, ...

I also increase my odds by having a portfolio with (passion) projects to show & tell about my relevant experience. For example, I applied a job post for a Tinder-like app by leading with my Tinder-like dog adoption app coincidently built with the listed technology.

And, I put out content (YouTube, tech blog, ...) to grow my reach (potential clients), experience and to build trust and authority. I can confirm that this results in hot-leads.

Explain your process (how you go about your work). This also helps to gain trust and authority. If you don't have a process yet, borrow one ;).

Show / tell your potential leads:

how you can help them.
how you tackled a similar problem.
a (pro-active) task breakdown / estimates.
...

3. Build a work-relationship.

I obtained this "Top Rated" badge by bringing clients to the platform to then deliver project milestones resulting in customer satisfaction, 5-star reviews and a high job success score. Don't be afraid to ask for / negotiate a positive review.

The majority of jobs I completed, didn't come from UpWork but I dealt with my clients through the platform since it's trustworthy with useful tools for both parties.

Go the extra mile(stone).

It can be a great privilege to serve your clients from the comfort of your own home and/or at your own pace. This allows me to be the most efficient and productive. The trade-off may be that you need to fill multiple "roles", you are not just the programmer. This means, being available at odds hours and being pro-active on all fronts of the project. It may not all be "billable" work.

The result is what matters for your client and for your 5-star reviews. Not the amount of hours you put into it. It's your job to estimate the work appropriately and to deliver on it. Estimate & communicate!

Estimate and time track the work even if it has a fixed price.
Scope creep and underestimations are part of the game.

Communicate:

work progress
hiccups & how you'll solve them
(re-)align expectations
scope creep
when you'll attack the tasks at hand
...

Don't (accidently) keep your client in the dark until after you're done.

A win for the client can also mean a big win for (future) you.
Being pro-active, solution oriented will build your relationship and reputation which will open-up future opportunities.

Conclusion

UpWork has opened my eyes to what it takes to be a freelancer and to what is possible. It's a great stepping-stone into the (remote) freelance world.
That said, I'm not putting all my bets on it since the majority of my gigs didn't come from UpWork. There are good reasons for that:

Saturation: in a matter of hours, there can be 50 to 80 proposals on jobs that fit my active skillset. This may mean that my skillset is not niche enough.

With my free account, I can hardly do 2 proposals each month due to the high cost to apply. I could go premium or buy connects with the earnings. I'll have to come up with a better strategy. Until then, my wonderful "Top Rated" badge won't do much.

If you are interested in more of my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Thank you for taking the time & interest in my work.
Kind regards, Auguste @ kiss-code.com

JavaScript Interop with Blazor WASM

kis.stupid — Sat, 06 Apr 2024 02:22:58 +0000

In last article The Role of JavaScript in Blazor I laid out how a Blazor app can leverage JavaScript without being turned into it.

Now, I'll cover Blazor WASM's JavaScript interopability feature which allows your Blazor app to execute JavaScript. This is commonly used to invoke custom JavaScript methods and browser APIs.

Did you know that it works in both directions? Your JavaScript code can invoke a C# method of your Blazor app. I'll also cover that later on, in this article or you can watch the video.

Why I use JavaScript in Blazor?

The JavaScript ecosystem has an enormous amount of already built functionality and it can do anything from dynamically updating the layout on static web pages to full-fledged, highly-interactive, single-page web apps. There is a lot of knowledge and function to be learned, borrowed, re-used, ...

That's exactly what I use it for in all of my Blazor WASM projects. I implement the JS interop feature for e.g. automatically starting carousels and other components that would be too time-consuming to rebuild. And, to access the browser APIs like navigator.share or the local storage and other useful client-side, browser functionality.

Call JavaScript from Blazor

For this demo, I scaffolded a new "Blazor Web App" with "RenderMode.Auto" interactivity set globally. The code will be available on my Patreon.

I named this project: "JavaScriptInteropWithBlazor" and it contains a server-side project with the same name and a ".Client" project.

Take the typical "scroll to top" functionality, let's add that code into the client project's wwwroot/js/custom-js.js.

1. Add the custom JavaScript code

function scrollToElement(elementId) {
    console.info("Invoked 'scrollToElement'");

    const element = document.getElementById(elementId);
    element?.scrollIntoView({
        behavior: 'smooth'
    });
}

For demo purposes, I added a log statement simply to verify that it worked.

2. Add the script tag

Then, we'll need to make sure this custom code is included in our application. Let's add the <script> tag at the bottom of the App.razor in the server-side project.

<body id="first_element_id">
    <Routes @rendermode="@InteractiveAuto" />
    <script src="_framework/blazor.web.js"></script>

    <script src="./js/custom-js.js"></script> <!-- Here -->
</body>

Note: We're placing this script tag at the bottom of the page so that the target elements are created before trying to manipulate them with our custom JavaScript code.

3. Create ScrollToTop component

Create a new component in the client project's Layout folder. I'll name it ScrollToTop.razor and paste in the code below.

After injecting the IJSRuntime at the top, this Blazor code can call the JavaScript method scrollToElement and pass a parameter elementId.

@inject IJSRuntime JsRuntime

<button @onclick="@(() => ScrollToElement("first_element_id"))">
    Scroll to top
</button>

@code {
    private async Task ScrollToElement(string elementId)
    {   
        await JsRuntime.InvokeVoidAsync("scrollToElement", elementId);
    }
}

4. Add the component to a page

Don't forget to add this component on a Blazor page, I'll put it on the client's MainLayout.razor somewhere underneath the @Body.

...
    <main>
        <article class="content px-4">
            @Body
        </article>
    </main>

    <ScrollToTop /> @* Here *@
</div>

Now, running the Blazor app, clicking the "Scroll to top" button, should log "Invoked 'scrollToElement'" in our browser's console.

Return a value from JavaScript

I can also use InvokeAsync<T> to invoke a method that returns a value. I added this code to demonstrate that.

In custom-js.js:

function scrollToElement(elementId) {
    console.info("Invoked 'scrollToElement'");

    const element = document.getElementById(elementId);
    element?.scrollIntoView({
        behavior: 'smooth'
    });

    return element == null; // <-- Here
}

In the Blazor component's ScrollToTop method:

...
var isElementNull = await JsRuntime.InvokeAsync<bool>("scrollToElement", elementId);
Console.WriteLine("Element is null: " + isElementNull);

Interop with Browser API

Another major reason for me to use the JavaScript interopability feature is to access the browser's APIs e.g. navigator.share.

...
await JsRuntime.InvokeVoidAsync("navigator.share", new
{
    Title = "Foo",
    Text = "Foo Bar",
    Url = "https://www.kiss-code.com/blog"
});

After adding that to the ScrollToElement method in the Blazor app, clicking the "Scroll To Top" button should now also open the brower's share menu (if supported). This share menu will be operating system specific (Windows, Android, iOS, ...).

Find more browser APIs here.

Import JavaScript into Blazor

What I showed you above is the more common use case in which I included my custom JavaScript code by referencing it in a <script> tag at the bottom of the index page (App.razor).

A less common use case may be to encapsulate this <script> tag into a component. Unfortunately, I can't just move the script tag into the component and expect reliable behavior. A better approach is to use the JavaScript interop feature to import the script or a module.

This can be done similarly as invoking a JavaScript method, as follows:

await jsRuntime.InvokeVoidAsync("import", "./js/prism.js");

After which you can use the methods that come with this module, for example:

await jsRuntime.InvokeVoidAsync("Prism.highlightAll");

Call Blazor from JavaScript

To invoke a C# method in the Blazor app from JavaScript, I added the Blazor method:

[JSInvokable("DifferentNameOptional")]
public static void LogInBlazor()
{
    Console.WriteLine("Invoked: " + nameof(LogInBlazor));
}

I added the following JavaScript snippet into the scrollToElement method in custom-js.js file:

DotNet.invokeMethod("JavaScriptInteropWithBlazor.Client", "DifferentNameOptional");

This should work in a client-side Blazor WASM application not in a server-side one or a pre-rendered one, then it gives the following error:

There are multiple .NET runtimes present, so a default dispatcher could not be resolved. Use DotNetObject to invoke .NET instance methods.`.

To resolve that error I had to add this object reference and pass it, the update code:

var jsObjectReference = DotNet.createJSObjectReference(window);
DotNet.invokeMethod("JavaScriptInteropWithBlazor.Client", "DifferentNameOptional", jsObjectReference);

There is much more you can do in this direction but it can get messy, read more here: call-dotnet-from-javascript.

I first encountered this use-case in an application leveraging a strong, JavaScript-based library with a lot of custom JavaScript code built on top of it where it really proves it strength. For example, after a user interaction with the calendar, I could then pass the result to Blazor to do the necessary e.g. HTTP call afterwards. I could do this entirely in JavaScript code but I prefer to limit the amount of untyped JavaScript code in my Blazor apps.

JavaScript Interop Server-side

The JavaScript interop feature is not available for Blazor SSR (static, without interactivity) since the Blazor app needs to tap into the client-side. Don't believe ChatGPT when it suggests that, it happened to a freelance client of mine.

A Blazor app with RenderMode.InteractiveServer or a WASM hosted (pre-rendered) can use the interop but only once the interactivity kicks in after client-side render. To avoid the server-side project to throw an interop related error, we'll have to (recommended) wrap the interop calls in a conditional of the AfterRender lifecycle method. Only for interop calls that would happen OnInitialized, not the ones that happen after a button click or a not-instant user interaction. Example:

@inject IJSRuntime JsRuntime

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Task.Run(() => JsRuntime.InvokeVoidAsync("import", "./js/prism.js"));
        }
    }
}

I have covered the JS interop feature multiple on my YouTube channel: Keep it simple, stupid..

You can grab yourself a copy of my .NET 8 Blazor brand website which contains multiple uses of the JS interop.

My free NuGet packages contain great examples of this feature as well: Get them for FREE

The Role of JavaScript in Blazor WASM

kis.stupid — Tue, 02 Apr 2024 18:57:59 +0000

I have heard the following statement multiple times:

"Blazor's (C#) code is transpiled to JavaScript code to run in the browser..."

While this is not correct, that thought is not too far-fetched for multiple reasons:

In the past there have been recompilations of C# code to the web.
The JS interop feature, how else would that work?
WebAssembly can't manipulate the DOM, only JavaScript can.

I will cover the JS interop feature in an upcoming article and I will dedicate another YouTube video to it on my channel: Keep it simple, stupid. but let's gain some conceptual understanding first.

JavaScript

Every major web browser runs a "JavaScript engine" also known as a "ECMAScript engine" alongside their browser engine. The latter is also known as a rendering engine or a layout engine and transforms e.g. HTML documents into an interactive visual representation (DOM).

JavaScript engines started out as interpreters which would execute code line-by-line or statement-by-statement after translating the source code into machine code (intermediate code). Nowadays, JavaScript engines use just-in-time (JIT) compilation which arguably uses the best of both worlds, interpreter vs. compiler.

Do not confuse the above with the transpiling of e.g. ECMAScript 6 (ES6) into ES5 code. This is the conversion of JavaScript's ES6+ syntax into its ES5 equivalent to be backwards compatible with older browsers.

A well-known ECMAScript engine is Google's V8 JavaScript engine which is used in the browser but also for Node.js and Deno runtime systems. So, JavaScript engines are not solely used for browsers.

ECMAScript engines can execute code (Angular, React, Vue, ...) within the same (security) sandbox as regular JavaScript code.

Ever since (2017) some of these engines support WebAssembly and can now execute the assembly code in that same security sandbox.

Browser APIs

The major browser also provide a large number of Web APIs for your web app to interact with browser features. Commonly used web browser APIs are the "Fetch API", "Geolocation API", "File API", "Share API", "Local Storage", ...

The browser APIs are mostly called from JavaScript code but are not limited to JavaScript. That said, to use these in a Blazor app, we can use the JavaScript Interop feature (which was supposed to be the subject of this article).

WebAssembly

WASM brings high-performing, assembly-like programming to the web as portable, binary-code to be executed client-side. WASM implementations typically either use ahead-of-time (AOT) or just-in-time (JIT) compilation.

WASM executes apps / app modules within a sandboxed environment separated from the host runtime. Interactions between the apps and its hosting environment can only happen through set APIs.

More than 40 programming languages can be compiled to WebAssembly executables. Most WASM implementations aimed at the web and some are general-purpose implementations.

"If WASM+WASI existed in 2008, we wouldn't have needed to create Docker. That's how important it is. WebAssembly on the server is the future of computing." - Solomon Hykes, a co-founder of Docker.

Lastly, interesting to note is that it:

supports multithreading and garbage collection ;
cannot directly manipulate the browser's DOM, requires JavaScript;

By reading all of the above, we can make assumptions on how Blazor and JavaScript work together but let's dig in.

Blazor WebAssembly

Blazor WASM allows for running highly-interactive, single-page C# web applications in the browser on a WASM-based .NET runtime. The runtime and other dependencies needs to be downloaded and initialized to run a standalone Blazor WASM app. All this is handled by the Blazor script: blazor.web.js.

This WASM-based .NET runtime has a rather large file size to download which does not result in a great user experience. Blazor optimizes this by:

caching these dependencies for future runs;
strips away unused code (IL trimmer);
using the just-in-time (JIT) interpreter at execution;
...

By default, ahead-of-time (AOT) compilation is disabled. Enabling this comes down to the need to optimize for package size, performance or supported features.

With AOT disabled, the Blazor app runs in the browser by using a .NET intermediate language (IL) interpreter implemented in WebAssembly with partial just-in-time (JIT) runtime support.
With AOT compilation enabled, the Blazor app's C# code precompiles into binary-code (WebAssembly) before browser execution.

What have(n't) we learned so far?

The C# code compiled as assembly code can be executed in the same (security) sandboxed environment as regular JavaScript code but (still) requires JavaScript to manipulate the browser's DOM.

How does Blazor WASM manipulate the DOM?

We learned that the Blazor script: blazor.web.js is responsible for downloading and initializing the (WASM-based) .NET runtime. It's not clear whether this is also responsible for DOM interactions.

Blazor maintains render-trees (representations) of the DOM in-memory to render its components. On component update or a re-render, an old and new render-trees are compared to one another, the difference is communicated to JavaScript (using interop?) functionality to update the DOM. This sound similar like React.js' shadow DOM or a virtual DOM.

Why would we need the JS interop?

JavaScript is the front runner for building interactive, client-side web apps and has grown a large, fast-evolving ecosystem around it. I have been an active participant in using JavaScript-heavy projects from hobby to professional.

The JavaScript ecosystem has an enormous amount of already built functionality and it can do anything from dynamically updating the layout on static web pages to full-fledged, highly-interactive, single-page web apps. So, there is a lot of knowledge and function to be learned, borrowed, re-used, ...

Thanks to the modern-web framework like React, Angular, Vue, ... and its data-binding functionality, we don't have to concern ourselves too much with manually manipulating the DOM. This allows us to focus on building features, organizing our project structure etc. and to increase our productivity with all its tooling.

While building awesome web apps with Angular, React and Svelte, I often wondered why I was still using JavaScript since the code didn't resemble Vanilla JavaScript or jQuery anymore. But, I had a strong preference for the structure that Angular and Nest.js offered and soon after for reasons that I described in an earlier blog post, I switched to Blazor WASM & .NET Web API.

While using Angular, I sometimes used jQuery or other JS libraries and a ton of NPM packages. Among other functionality, I didn't rebuild the already provided Bootstrap jQuery functionality and not all JS libraries worked smoothly with Angular. Just like it is with Blazor, while I can easily rebuild e.g. Bootstrap's dropdown functionality, the accordions and maybe the carousels, I don't have to. Especially that last one can be time-consuming to figure out and rebuild so I rather leverage the already built functionality while not having it scattered across my codebase.

Long story short, I implement the JS interop feature for e.g. auto-starting carousels and other components that would be too time-consuming to rebuild.

Another reason I implement the JS interop is to access the browser APIs like navigator.share or the local storage and more useful client-side, browser functionality.

I have covered the JS interop feature multiple on my YouTube channel: Keep it simple, stupid. and I will dedicate another upcoming video and article to it.

Or you can grab yourself a copy of my .NET 8 Blazor brand website which contains multiple uses of the JS interop.

Thank you for taking the time & interest in my work.

Kind regards, Auguste @ kiss-code

Sources:

Pitfalls of Hosting Background Workers as Azure App Service

kis.stupid — Sat, 02 Mar 2024 10:06:31 +0000

I hope you had a better day than me...

I spent my day looking at this:

ERROR - Container backgroundworker_x didn't respond to HTTP pings on port: 8080, failing site start.

What is that supposed to be?

A .NET 8 background worker service hosted on an Azure App Service (Linux container).
Should run only once every 24 hours.
Has "Always on" (waste).
Has "Health checks off".

What's wrong?

It recycles every 10 minutes due to supposed error.
It suddenly restarts and interrupts any ongoing work.

What rabbit holes did I look into?

Exposing that port, extending amount of time to start, ... (not the problem)
Investigating health checks. (shouldn't be the problem)
Investigating alternatives like WebJobs (for Windows container), ...
...

I slightly panicked when I wondered if this behavior was also happening on my other App Services that host APIs or Blazor apps. These do idle after a while of inactivity but sudden restarts wouldn't be great.

Why are those not facing the same issue? Well, these are webapps "initialized successfully and ready to serve requests"

So my simple, hacky solution is to convert my background worker services into web projects by changing the Sdk="Microsoft.NET.Sdk.Worker" to Sdk="Microsoft.NET.Sdk.Web" and slightly modify the "Progam.cs". And, I added a health check endpoint just in case.

The WebJobs approach might have been better but not available on my Linux App Service.

Azure Functions but has been quite a struggle so far.

Do you know better ways to host Background Worker Services and run them (CRON) periodically? Let me know!

When HR makes software engineering tests

kis.stupid — Tue, 13 Feb 2024 14:13:57 +0000

Cultural fit? As a software developer, this should be my only politically loaded, public post on LinkedIn...

I just declined a "technical" test for a software role due to it becoming my second encounter with TestGorilla, a Dutch HR company that makes "Pre-Employment Testing Software".

They claim to be bias-free, scientifically validated, objective, reliable and fair.

I first encountered them on UpWork with a job post to take and assess their software engineering tests. I hope this isn't what they mean by "scientifically validated".

I gave it a shot, expecting an objective software engineering test. I never got to that part if there was one...

It started off with a pre-test "reading comprehension". Which was a quiz with only one "correct" answer per statement.

A few statements stood out with themes of "climate", "gender", ...

The statements were phrased suggestively and some hypothetical. These stood out:

"... ice caps melting could potentially rise sea levels by a few meters"
"... gender bias against women by A.I. ..."
But ... only one correct answer per statement. So, more like an "agree or fail" test possibly fishing for political, cultural or ethical stances, disguised as "reading comprehension".

My objections to this:

What do I really know about these topics? I accept the world not to be flat but do I have any evidence of that? Nope. I'm just a simple guy with software development as my craft. Why / how should I know or care? Why ask me about potential world issues?

I understand a thing or two about A.I. but why do you need me to denounce this occurrence? Why this one?

My passion is to create, to build and to solve problems. It involves some critical-thinking to make things functionally accurate. Being critical means that you may not just accept everything, just because.

Anyhow, this form of an "agree or fail" test may not result in the promised "bias-free" outcome. It may "expose" some traits. I understand that compliance and agreeableness likely are attractive traits to a manager, team or employer. But, I doubt the critical-thinking quality or genuinity of the passing candidates.

I demanded TestGorilla to remove my personal information and my test answers as this smells too much like the "Facebook Cambridge Analytica Scandal" which abused (e.g. quiz) data for political advertising.

And, I find it an unfortunate way of sneaking "climate-alarmism", gender topics, and other wokeisms into the technical professions as a politically loaded quiz.

What do you think?

My secret to advancing software skills

kis.stupid — Sat, 18 Nov 2023 14:44:28 +0000

As mentioned in my previous posts, working together with an experienced developer or on your own hobby projects can rapidly improve your software skills.

However, this learning curve also flattens after a while. Without proper guidance while developing your hobby projects, you'll only learn from it the hard way. This isn't bad but it might take you much longer than it needs to.

Content creators can be a invaluable to your developer journey! Some provide you with isolated how-to's, others update you on the news within the space, ...

On the "Keep it simple, stupid." YouTube channel, I continuously work on real-world apps while exploring & leveraging the latest .NET features and Azure cloud services.

I share with you how I implement these, with real use cases and how I architect entire end-to-end solutions from start to finish. I also share the code for you to learn from or for you to adapt to fit your requirements.

My most effective method to advance my software skills.

By repurposing someone else's well-crafted code , you can get a deeper understanding of why and how the author solves certain problems. How they structure their projects and more. By immersing yourself into it with the proper curiosity and willingness to learn, you'll adopt great practices and advance your overall knowledge on software development.

How I would I know? Well, I've been developing daily for over 11 years, started out as a self-taught programmer, learned a thing or two in college, learned more on the job. In some jobs, I was on my own, in others I had the privilege to work with peer developers. Besides that, I am always working on hobby projects and learning from those slowly but surely.

Yet, the impact of immersing myself into other's inspirational work have taken me way beyond what I could learn up until that point. Not only is that work the result of decades of experience of the author but their invested time and attention to detail, makes it a work of art and an invaluable resource to learn from.

That's exactly what I aim to offer with my content! I put a lot of time, effort and thought into making valuable resources to either learn from, act as an alternative solution / perspective or to be molded into someone's work.

I'm pleased to see that it is doing exactly that for a variety of developers:

If you are interested in my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Subscribe to my newsletter to stay up-to-date & receive discounts.

2 growth hacks to boost your software skills

kis.stupid — Tue, 14 Nov 2023 14:56:23 +0000

In my experience, the two most impactful actions you can take to boost your developer journey, are:

building hobby projects;
learning from a relevant peer developer.

If you can find the time to build hobby projects, it's highly recommended! This way you can trial-n-error, refactor, restructure your project to your hearts content, learn what works and what doesn't. And, it presents you with the perfect opportunity to try-out new features and libraries.

This way, you'll be one step ahead when assigned to architect / build sustainable projects on the work floor. And you'll have those projects to show off & talk about when applying for jobs. It also great to gain trust about your expertise with your employer. And just maybe they'll let you skip that tricky coding test ;).

The second luxury is a relevant peer developer, likely someone who does the above. A strategical programmer, who can teach you strong basics but also the latest and greatest. Someone who doesn't shy away from opportunities to innovate.

If you don't have these luxuries, tech YouTubers, content- and course creators can be a great substitute. One day, you will be that peer developer if you aren't already.

What else do you think can fast-track growth as a developer? Let me know!

Which hobby projects to build?

This can vary depending on which type of software developer you are but these project types are highly recommended to have built:

your portfolio website;
your digital resume;
your (tech) blog.

These are the best types of projects to share and showcase your work, experience and knowledge. To build these, you either build everything yourself and gain a better understanding of full-stack web development. Or you learn about the technology, tools and topics to help you build the project. To name a few: a headless CMS, JAM-stack, a full CMS like WordPress, ...

Once you've built one or all of the above, you might be ready to build more challenging projects. Projects that solve real world problems, these can range from solutions that help out your local dog shelter to improving processes of small businesses in your area up to solutions to increase the revenue of companies.

Think about gathering data from external APIs, which data storage to use, which cloud components and which protocols to communicate over. Try to integrate third-party libraries, technology to boost your app's capabilities and to impress others ;). Diving into topics like "Clean Architecture" or "Clean Code" can also greatly benefit you down the road.

Did I forget something important? Let me know!

I have built multiple portfolio websites with different technologies through the past. I have also built a digital, printable resume and I recently built my own brand website with tech blog.

If you want a head start, you can grab yourself a copy here. To repurpose that to your own brand, portfolio or blog website.

One of the great killers of software projects

kis.stupid — Tue, 07 Nov 2023 22:14:06 +0000

One of the great killers of software projects, its potential and the commitment of (future) assigned developers, is going fast and making a mess in the process. The video at the bottom, describes tactical vs. strategical programming in a nutshell.

What can a developer do to combat this?

A first, would be to educate oneself on topics revolving clean code and clean architecture. More specifically, in the principles and patterns resulting in such practices. Although there are many books and video's to learn from, working with a peer developer who applies the above, can be invaluable.

Think critically about the code you write, "Think twice, code once.". Improvements can range from the usage of logical operators to leveraging external solutions, productivity-boosting tooling, ...

You can often write it with less lines of code and improve its readability for your teammates. Aim to leave a codebase in better shape than you found it. Take it one step or one ticket at a time, separate yourself from the "code monkeys".

Optimize and fully utilize your tooling for increased productivity while minimizing code smells or bug potential. This encompasses the features of your programming language, frameworks, IDE plugins and beyond automated release cycles. Don't "half-ass" or refuse to evolve the above since that will only decrease productivity over time. There are plenty of proven systems to adopt, no need to reinvent these.

I can see how, from a business perspective, tactical programming might appear to be praised in the short term but will lead to technical debt in the long term. Sooner rather than later. As tactical programming has its perks, it's the lesser advisable approach to be used beyond a concept phase.

What can an employer or project manager do to combat this?

Hire proven, quality competence for your back-end systems. As quantity in years might improve your odds, it's unfortunately not a guarantee. Recruiting for battle-tested programming language frameworks might improve the odds. Once obtained, it's an idea to pair them up with rookies on a new project, when possible.

In time, your development team might live by great coding practices, delivering highly maintainable projects which in turn frees up time for bullet-proof technical decision making. Don't allow for bad practices to train your rookies, as described in the video below.

Entertain your developer's requests for improvements or refactoring. Involve them (more) in crucial technical decision phases. Phases to tackle structural or procedural improvements should have a place in any software project. Not to be shrugged off as "unbillable". It pays in the long run by preventing frustrated developers and dissatisfied clients.

If possible, don't take on existing projects another tactical development team already ran through until they could no more. You're likely to repeat the cycle the video describes. If you do, be very transparent about it to your development team or new hires. It's dirty work.

You don't have to take my word for it, watch the video, it describes many software projects. Clean Code - Uncle Bob

If you are interested to see my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Subscribe to my newsletter to stay up-to-date & receive discounts.

A glimpse of my software development journey

kis.stupid — Tue, 07 Nov 2023 17:43:12 +0000

Hi, I'm Auguste from the "Keep it simple, stupid." YouTube channel. This channel started out as video documentation for my own software hobby projects. To share how I build my projects.

Before I realized, the channel hit over 340 subscribers organically. Nowadays, I'm taking the 'knowledge sharing' more serious and do so more frequently. To be of as much value as I can.

Over 11 years ago, I started out on the attic typing over YouTube video's to build my first full-stack web projects. These days, I'm happy to return the favor. I'm passionate about creating and innovating with an insatiable hunger for learning. That's why I'm an early adopter of cloud technologies, obtained an extra degree in artificial intelligence, ...

My favorite quote:

"An expert is a person who has made all the mistakes that can be made in a very narrow field." - Niels Bohr

What is yours?

How did I end up in the .NET space?

I made the jump to .NET when Blazor WASM arrived. I jumped from Angular + Nest.JS to Blazor + Web API. I have used React, Svelte, jQuery, Knockout.js, ... as well but ...

In a professional environment, I prefer structured frameworks to build sustainable codebases. Structure, good practices & standardization help produce predictable codebases resulting in maintainable projects.

Nest.JS did provide most of the above but soon our go-to ORM package lost maintainers while containing bugs, Webpack glitching every now and then, our projects containing too many configuration files, NPM giving us more work than expected etc. .NET's out-of-the box ORM, authentication & authorization plus LINQ and other tooling, started looking more and more attractive.

In Nest.JS we could already organize & test our codebases better thanks to the modular setup and dependency injection capabilities. We could separate our concerns better with the supported mono-repo setup. .NET provides all that and more.

It had long been the wet-dream since Node.JS came out, to re-use code between front-end and back-end. Unfortunately, that has never been easy to do nor to have front-end & back-end projects in one mono-repo.

In a .NET solution it is very easy to setup a mono-repo with multiple projects. Whether those projects are client-side or server-side, does not matter.

That said, the re-using of code between front- and back-end is usually limited to constants, helper classes & DTOs.

Nest.JS and a .NET Web API are structured similarly with similar features & with good practices borrowed from other languages or frameworks. The jump was easier than expected and I never looked back.

I am glad to have participated in one of the fastest evolving programming ecosystems which is the JavaScript ecosystem. And this experience is still very relevant for my daily web developing activities as I can leverage the powerful JavaScript browser APIs in Blazor.

In the early days, .NET was too overwhelming for many novice developers. Nowadays, it's way more accessible. And Blazor is an absolute gem to use!

How about you?

How about you? I'm interested to hear about your journey in the software space & your experience and your experiences.

If you are interested in my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Subscribe to my newsletter to stay up-to-date & receive discounts.

What are you working on?

kis.stupid — Fri, 03 Nov 2023 12:46:25 +0000

What are you working on?

If you can find the time to build hobby projects, it's highly recommended! This way you can trial-n-error, refactor, restructure your project to your heart's content, and learn what works and what doesn't.

So what are you working on? What is your preferred way of learning web / app development or software architecture?

I learn better by doing, I need to delve into topics to gain the experience of applying those. While building, I attempt to tackle all the questions that I have around the topic. I prefer a strategic approach to programming rather than a tactical approach. "Think twice, code once", but that's a topic for another post.

On the work floor, I ask a lot of questions to get quick feedback, even if it makes me look less intelligent.
These questions sometimes are self-evident for the team members who have been on the project for some time, but not for the newcomers. I confess that I sometimes blurt things out to see what sticks, to get that instant feedback or to at least make everyone think twice if they hadn't already.

I'm currently working on the 'EmailCampaigns' module for my kiss-code.com brand website. One of the things that it will do, is to automatically deliver you the content you are interested in, e.g.: kiss-code.com/products.

While there are great tools out there to do this, I'm stubborn and attempt to build everything myself. It takes a lot of time without guarantees to success. But it's a way for me to completely immerse myself in new fields like e-commerce or marketing.

When I see existing tools, I think:

"How do they make this work?"
"Could / should I make a small, customized version of this?"
"What metrics do I need to collect & how?".

I don't just do that for fun, I often do need a customized version of it for my current projects. So, I try to build my project as re-usable as possible. Existing of end-to-end modules, packages / libraries, ...

What about you?

If you are interested in my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube.

Subscribe to my newsletter to stay up-to-date & receive discounts.

Misconception about 'AllowedHosts' in a .NET C# Web API

kis.stupid — Mon, 09 Oct 2023 18:46:24 +0000

Did you ever come across the "AllowedHosts": "*" setting in a server-side .NET project and wondered what it does?
I have. I did my due diligence on the subject, but once in production, I was proven wrong.

What is 'AllowedHosts'?

It is the configuration for the ASP.NET Core host filtering middleware.
With this setting, you can specify one or more host names from which your project allows incoming HTTP requests. Requests without a matching host name will be refused.

A host name is the domain name of the target server, the request is sent to.

Let's say you have an API running on https://www.weather-api.com. The host name would be weather-api.com. You could specify to only allow requests with that host name.

{
    AllowedHosts: "weather-api.com"
}

Or to allow multiple host names semicolon delimited.

{
    AllowedHosts: "weather-api.com;v1.weather-api.com;v2.weather-api.com"
}

Or use a wildcard.

{
    AllowedHosts: "*.weather-api.com"
}

The above will allow requests with a correct host name and disallow requests without matching host names.
A host name is set on a request as an HTTP header: Host: weather-api.com.

Doesn't this sound similar as CORS to you?

What is CORS?

In short, the ASP.NET Core CORS (Cross Origin Resource Sharing) middleware can be configured to allow requests originating from different domains to interact with server-side .NET project.

By default, without this middleware, a server-side project only allows same-origin requests. These are requests originating from the same domain as the one, the server-side project is running on.

So, the CORS middleware can be configured to enable cross-origin requests from applications deployed on a different domain. The originating domain name is also set on a request as an HTTP header: Origin: https://www.morning-walk.com.

The origin header is set to the domain, the request originated from

Allowing requests from the above origin can be configured as follows:


app.UseCors(options =>
        options.WithOrigins("https://www.morning-walk.com")
            .AllowAnyMethod()
            .AllowAnyHeader());

What's the difference?

Requests made by a browser usually sets both the Host and Origin headers. Requests made by tools like Postman or by someone running a project locally, will only set the Host header or none of the above.

When there is no Origin header present, the CORS middleware will not intervene. The host filtering middleware could intervene and return a 400 Bad Request when the host name does not match.

Got it! Both middlewares can allow or disallow requests based on their HTTP header. So ... I can protect my API from unwanted origins and unwanted hosts?

Not entirely ... Unfortunately the host filtering middleware cannot be used in the same way as the CORS middleware. The host filtering middleware allows any request as long as the Host header is correctly pointing to its target server.

Setting "AllowedHosts": "*" or "AllowedHosts": "weather-api.com" would not make much of a difference if the goal is to block requests.

Once in production, inspecting the HTTP headers:

Request 1:

Host: weather-api.com
Origin: https://www.morning-walk.com

Request 2:

Host: weather-api.com
Origin: https://kiss-code.com

Do you see how you could block requests based on its origin but not based on the host?

Misconception

I assumed the host name and origin name would come from the same domain, which is wrong. I approached the host filtering in the same way as the CORS configuration. I assumed the values below and tried to filter hosts based on it.

Request 1:

Host: morning-walk.com
Origin: https://www.morning-walk.com

Request 2:

Host: kiss-code.com
Origin: https://kiss-code.com

If you are interested in more of my work, you can find it:

on my website: kiss-code.com/products
on my Patreon
on YouTube

Subscribe to my newsletter to stay up-to-date & receive discounts.