DEV Community: Juan Barahona

bitsize #1: What is an asynchronous operation?

Juan Barahona — Fri, 09 Jul 2021 17:05:54 +0000

There is already tons of awesome articles and guides explaining asynchronous programming, one more is probably only going to contribute to the mess, instead I want to try a different approach: the image above gives you a bitsized explanation that might be a good starting point to fully understand other in deep guides, or probably a good finalizer that makes everything you already know fit harmoniously 🤞

Personal Recommendations

And also, these are the related posts (of tons I have read) that I personally liked a lot, you will definitely learn a lot from them:

If you liked this post and want to show you support to build more on these, follow me @huunab, thanks!

Introduction to Software Development

Juan Barahona — Mon, 24 Aug 2020 18:02:57 +0000

In this article we are going to explore this huge and passionate world of software development by demystifying what it really is and how can we get started in this field.
So, let's start with the most important part:

What is Software?

Yes, in simple words software is just a set of instructions to make your computer do whatever you want, wow that you know what it is, you may be asking:

How can we build Software?

If software is set of instructions, then to build it we need a way to write those instructions. We humans communicate with each other by using languages and turns out we also use them to communicate instructions to our computers although we call them programming languages.

What is a programming language?

In short, a programming language is just like any other language, a structured system with a set of rules that lets us build sentences we can use to communicate instructions to our computer.

Just like we have several languages to communicate with each other, we do have several programming languages from which to choose, among them, we have two big categories we need to know:

High-level and Low-level programming languages

Even if I said we have several programming languages, it turns out that the only language the computer can understand is called Machine Code which is a Low-level programming language and it looks like this:

8B542408 83FA0077 06B80000 0000C383 FA027706 B8010000 
00C353BB 01000000 B9010000 008D0419 83FA0376 078BD989 
C14AEBF1 5BC3

Although it may seem exciting to learn and start programming software in that way, it is not the most productive option and indeed it is the most difficult. That is the reason because we have created High-level programming languages which are closer to our understanding and are easier to learn, they look like this:

Console.WriteLine("Hello World!"); 
Console.WriteLine("The current time is " + DateTime.Now);

As you can see most of the words are easy to understand and is this characteristic that makes possible the development of those pieces of Software we see nowadays that changes almost every day to meet our needs.

But if the computers can only understand machine code how can we write instructions in high-level languages? The answers are Compilers:

What is a compiler?

In the software world, a compiler is basically a translator who takes the code you have written in your language of choice and converts it into machine code, that way computers can run your instructions, awesome right?

Languages and compilers are the building blocks to create software and we are going to talk more about them in future posts, but now it's time to understand that nowadays to build software we need more than building blocks. To build them, we need entire ecosystems, this can sound scary and complex, but they actually make our lives and jobs easier.

Development Ecosystem

Let's explain in simply words what is a development ecosystem and its components:

Languages: A structured system with a set of rules that helps us to communicate instructions to our computer.
Runtimes: In essence, it is a piece of software the lets you run your code in the target machine, it is part of the "Compiling
Process" that makes your code understandable by the computer.
Frameworks: An already working and highly flexible software that lets you personalize it by letting you attach to it your own code so you can make software on top of it.
Libraries: Reusable general-purpose pieces of code that you can use repeatedly to speed up development
Tools: A set of other pieces of ready-to-use software that improves the quality of life of the development process

Hey! where my compiler? The "Compiling process" is more complex today, different compilers can be in separate places, they can fall under the tools category and they can also be part of the runtimes. More on this on future posts.

That seems a lot, do I need to install all those things?

Fortunately no! Nowadays we have something called SDK or software development kit that is an all-in-one package we can install to have the entire ecosystem into our machines.

.NET Ecosystem

.NET is one of those ecosystems that is easy to use, multiplatform, open source and with it you can build almost every software you can imagine.

Getting started with this ecosystem is something that will take you 10 minutes or less, the official tutorial will guide you through step by step but in short you need to:

1️⃣ Download and install the .NET SDK but make sure you download the .NET Core version as it is the newest one.

2️⃣ Create a folder where you want to store you project.

3️⃣ Open that folder into your Terminal.

4️⃣ Create a new .NET project by executing in your Terminal the following command.

dotnet new

You will see two new files has been created in the directory you have created:

📝[yourfoldername].csproj 
📝 Program.cs

[Yourfoldername].csproj: Contains various configurations like what language and what framework you want to use.
Program.cs: Contains the code that will be executed when run.

5️⃣ Run the project by executing in your CMD the following command

dotnet run

You will see a Hello world! text appearing into your console. Congratulations! you have started in the world of Software development.

Conclusion

Software development is a great world to start working on and although nowadays there are many concepts and things to learn, if you look carefully at them, you will find they can become easy to understand. Especially because most of them were inspired by the daily things we see every day.

How to configure TailwindCSS with Blazor

Juan Barahona — Mon, 03 Aug 2020 15:17:41 +0000

🔥 A new version of this template has been released for .NET 6 Preview 3+, it support blazor + tailwindcss with hot reload and css isolation https://github.com/barahonajm/blazor-tailwindcss-template

In this guide we are going to fully integrate TailwindCSS with Blazor and the dotnet build system

Summary:

We are going to use Webpack to get TailwindCSS and bundle our CSS's files into one so we can import it into our index.html or _hosts.cshtml file.
We are going to create a Targets file to let the dotnet build system deal with the npm and webpack tasks so we can simple run dotnet build to have everything ready to use.

Requisites:

Nodejs and npm installed
Have a Blazor project created

Adding TailwindCSS and necessary configurations

First, we are going to create a new folder in our Blazor project called StaticAssets which will contain the following files:

📁StaticAssets
  📁css
    📝 file1.css
    📝 file2.css
    📝 main.css
  📝 package.json
  📝 tailwind.config.js
  📝 postcss.config.js
  📝 webpack.config.js
  📝 StaticAssets.targets

main.css

This file will be the entry point in our webpack configuration so it must import all your other css files which will likely contains your own rules composed on terms of TailwindCSS.

Here an example of what could be inside your file1.css

package.json

Contains our dependencies and the scripts that will be run by the dotnet build system.

The package.json file includes the following dependencies to helps us obtain a bundled css from webpack and avoid generation of empty js files

"mini-css-extract-plugin": "^0.9.0",   
"webpack-fix-style-only-entries": "^0.5.1"

postcss.config.js

Since tailwind is a postcss plugin we will need a postcss config file with the following contet:

For more information about TailwindCSS and PostCSS refer their official docs.

webpack.config.js

Contains the minimal configuration to take our main.css compile it and then export into our wwwroot/css folder so we can use the resulted file into our index.html or _Hosts.csthtml

StaticAssets.targets

Finally, this file will contain all the necessary configurations to integrate everything with dotnet build system, specifically:

Adds support to run npm install and webpack when you run dotnet build so you don't need to run it manually
Adds support for incremental build, so the above commands will only be executed if there are changes in any of the files inside StaticAssets folder

Adding everything into your Blazor project

Once the above files are created, we need to do a few more steps to fully integrate it into our Blazor project.

Modify your .csproj file

Your .csproj must contain the new targets file we have created, to do that we only need to import it at the end:

At this point you can already invoke dotnet build and you will notice that the npm install and webpack are executed too, this will generate a file called main.css inside your wwwroot/css folder.

Import main.css file into your index.html

Now that we have our main.css which contains our own rules as well as all tailwind rules, we can import it into our index.html which is in wwwroot folder.

Conclusion

With these steps you are going to be able to use the TailwindCSS utilities into .razor files without any problem, if want to create acss files that are composed in term of TailwindCSS just make sure to put it into StaticAssets folder and import into your main.css file.

The complete repository can be found here https://github.com/barahonajm/dotnet-core-samples

What are the best hours to post your tech tips on Twitter?

Juan Barahona — Fri, 17 Jul 2020 13:42:17 +0000

Just wanted to ask you, when do you think are the best hours or timeframes to post your content on Twitter?

From my quick tests during these days I found:

Mornings: Reported my article a 0 views increase, so not too good specially for people like me that does not have any followers.

Afternoons: Reported my article a 30 views increase, so looks like a better time.