WorldWildWebDev.com

Astronomy picture of the day

Astronomy picture of the day – Progressive web app with Blazor and Azure Functions hosted in Azure Static Web Apps. Powered by NASA Open API APOD. You can checkout the repository here or browser the live site here.

Analyze ASP.NET Core with your React SPA in SonarCloud

Analyze ASP.NET Core with your React SPA in SonarCloud SonarCloud is well known cloud based tool for Static Code Analysis which supports most of the popular programming languages – JavaScript, TypeScript, Python, C#, Java and counting. The tool is also known as SonarQube which is the self hosted version of the analyzer. SonarCloud is completely free for public repositories and SonarQube is even…

Static Code Analysis for your .NET projects

What is Static Code Analysis Every developer wants to write predictive, maintainable and high quality software. Unfortunately that’s not always the case because of our human nature – we do make mistakes. That’s why we try to automate all the things related to software development lifecycle: testing, deploying, running applications. But what about the codebase? What do we do to enforce minimally…

Autohub – Vehicle history management made easy

Single page application with React and Semantic UI as frontend. ASP.NET Core backend with PostgreSQL database. Deployed to Ubuntu server with GitLab and Ansible.

Checkout the project at GitLab!

Dashboard page showcase

  Reports page

Vehicle histories page

  Vehicles page

Vehicle details page

Node.js Restful API template with TypeScript, Fastify and MongoDB

Why

Have you recently started a new Node.js API project? Did you use some template or started the project from scratch? I was asking the same questions myself and I was looking for minimal boilerplate for a while. There were so many options that it was hard to pick one. Most of them are using Express.js, others are using ES5 or lack test setup. So I decided to spin one on my own and reuse it in…

Configure your dev Windows machine with Ansible

Ansible is well known it the IT operations fields with its fantastic automation abilities. You can do whatever you want with Windows too if it’s a Powershell, bat script or one of the more than one hundred? modules. I will use it to configure my personal machine and save the hustle every time I step on new one. It’s not a big deal to install a few programs but I’m sure this will repay in the long…

New selfhosted e-commerce website for Barstol, local provider for chairs. Technologies used: WordPress, WooCommerce.

Ivoli consult – счетоводна къща

Уеб сайт за счетоводна къща. За съжаление вече неактивен.

The black page – made for fun

This project came from and for joke. Made only for fun.

Driveaholic – auto blog

I’ve always been into cars and one day decided to experiment creating new auto blog. Never got time to release and maintain it.

As a developer you've probably already met Visual Studio Code Microsoft's lightweight code editor. If you haven't, you definitely should try it. Today I'm going to share my VS extensions with a missing feature which I recently found - sharing extensions, themes and configuration. What happens if you step on a new machine? You have to customize all your key binding, download all your plugins and setup your theme preferences. And you probably want to sync that across all your devices. Keep reading to find out the sweet solution. Before that I will share all my productive plugins which make my day. They are separated by categories.

C# extensions

C# - Full IntelliSense for C#. A MUST for .NET developers

C# Extensions - Pretty nice addition to the C# extension. Providing quick scaffolding of classes, interfaces etc.

C# XML Documentation Comments - Most of the Visual Studio's users are very familiar with. Type "/// + TAB" and you get nice documentation for your classes and members.

.NET Core Test explorer - Browse, run and debug tests directly in the editor.

Nuget package manager - No need of explanation.

Git extensions

Git History - This extension gives you full feature Git client in the IDE. Search commits, merge and compare branches and more.

gitignore - Remove files from source code tracking from the file context menu.

GitLens - Track authors, dates directly in the file.

JavaScript extensions

TSLint - Analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.

Babel JavaScript - Syntax highlighting for today's JavaScript.

Debugger for Chrome - Debug your JS app directly in the browser.

ESLint - Linting utility for JavaScript and JSX.

Npm IntelliSense - You get npm modules autocomplete in import statements.

IntelliCode for VS — Aset of capabilities that provide AI-assisted development. Still in preview, but worth trying. 

Utilities extensions

REST client - Allows you to send HTTP request and review responses.

Path IntelliSense - Plugin that auto completes filenames.

VS Live Share - Real-time collaborative development.

Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Auto Rename Tag - Auto rename paired HTML/XML tag.

VSCode great icons - File specific icons for improved visual grepping.

SQLTools - Execute queries, auto complete, bookmarks etc.

Docker - Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.

PHP IntelliSense - Advanced PHP IntelliSense.

More?

Cobalt2 theme

 - Using Cobalt2 theme feels so good. In addition it's considered the best theme for your eye balls.

Settings sync

- This is the missing peace of the puzzle. There isn't default support of VS Code for this type of synchronization.  This extension will save all your custom settings, themes and extensions. Whatever you switch PCs or just start with new one, setup is as quick as 5 minutes and you have your favorite extensions and settings synced. Reallyyy cool.

Ansible is a configuration management, provisioning, and deployment tool which is quickly gaining popularity in the DevOps areas. Managing and working on various platforms including Microsoft Windows. What makes Ansible stand out of other configuration management tools is that it's agentless. Which means no software is required on the target host. Ansible uses SSH for communication with Unix based hosts and WinRM for Windows hosts. Recent announcement from Microsoft's team is an upcoming fork of OpenSSH for Windows, which would make things ever smoother for DevOps teams managing Windows infrastructure. In this post we will get started with Ansible by:

Setup of the control machine

Configure Windows server in order to receive commands from Ansible

Install Chocolatey and SQL Server

Ansible requires PowerShell version 3.0 and .NET Framework 4.0 or newer to function on older operating systems like Server 2008 and Windows 7. If you covered the requirements, let's get started with the first step.

Setup Ansible control machine

As previously mentioned Ansible is agentless, but we need control machine - machine which talks to all of our hosts.

Ansible can't run on Windows but there's a trick

Currently Ansible can only be installed on Unix based machines, but If you are using Windows as your primary OS, you can install Ubuntu subsystem. Read this for further installation details. If you are non Windows user please continue reading.

Install Ansible

After the installation of Ubuntu subsystem on Windows (if you had so), lets continue with the installation of Ansible by opening terminal. Install Ubuntu repository management: [code]$ sudo apt-get install software-properties-common [/code] Lets update our system: [code]$ sudo apt-get update [/code] Add Ansible repository: [code]$ sudo apt-add repository ppa:ansible/ansible [/code] Then Install Ansible: [code]$ apt-get install ansible [/code] Add Python package manager: [code]$ apt install python-pip [/code] Add Python WinRM client: [code]$ pip install "pywinrm=0.3.0"[/code] Install XML parser: [code]$ pip install xmltodict[/code] If every thing went OK you should be able to get the current version: [code]$ ansible --version[/code] So far, so good. Lets continue with configuration of the tool.

Configure Ansible

Inventory - list of the hosts

Inventory.yml is the main configuration file of your hosts addresses separated in groups with descriptive names. Let's create that file and set the example below: [code]$ vi inventory.yml [/code] Enter the IP addresses for your group: [code] [dbservers] 80.69.0.159 80.69.0.160 [webservers] 80.69.0.161 80.69.0.162 [/code]

Configure the connection

We are a few steps away from establish connection to the remote servers. Let's configure the connection itself - credentials, ports, type of connection. The convention is to name the file based on your group of hosts. For example you have web servers: webservers.yml or dbservers.yml for the DB servers. If you want all of your inventory to use that same configuration file you can name it all.yml. We will use all.yml as all servers will have same credentials and connection type. Let's begin by creating folder: [code]$ mkdir group_vars [/code] Create the file and edit it: [code]$ vi group_vars/db.yml [/code] Add the following: [code] ansible_user: ansible_user ansible_password: your_password_here ansible_port: 5985 ansible_connection:winrm ansible_winrm_transport: basic ansible_winrm_operation_timeout_sec: 60 ansible_winrm_read_timeout_sec: 70 [/code] This credentials will be used to access the remote machine with connection set to WinRM basic authentication. We will create them in the next section. We use basic authentication but for your production environment you probably want to use more secure schema. See this article for more info. 

Configure windows hosts

Our windows hosts need to be configured before execute any commands on it. The following PowerShell script will do:

Create the Ansible user we defined in all.yml

Add the user to the Administrators group

Set WinRM authentication to basic and allow unencrypted connections

Add Firewall rule for WinRM with your control machine IP address

Open PowerShell and execute the script: [code] NET USER ansible_user "your_password_here" /ADD NET LOCALGROUP "Administrators" "ansible_user" /ADD Set-Item -Path WSMan:\localhost\Service\Auth\Basic -Value $true Set-Item -Path WSMan:\localhost\Service\AllowUnencrypted -Value $true netsh advfirewall firewall add rule name="WinRM" dir=in action=allow protocol=TCP localport=5985 remoteip=10.10.1.2 [/code] After the execution is completed we can try to ping our host from the control machine to check that everything is OK. We ping only the DB servers: [code]$ ansible dbservers -i inventory.yml -m win_ping [/code]

Write our first playbook

Getting back to our Ansible control machine and add a playbook - set of task or plays which together form playbook. The target is to add Chocolatey which is the community driven package manager for Windows. After that we will add SQL Server and reboot the server. Ansible has many modules for Windows which support a lot of functionalities out of the box. They are prefixed with "win_" ex. win_feature. You can check here. Let's continue with the creation of the playbook file: [code]$ vi choco-playbook.yml [/code] In file enter the following: [code] --- - hosts: dbservers tasks: - name: Install Chocolatey raw: Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) - name: Install SQL Server win_chocolatey: name: sql-server-2017 state: present - name: Reboot to apply changes win_reboot: reboot_timeout: 3600 [/code] Execute the playbook by typing: [code]$ ansible-playbook dbservers -i inventory.yml choco-playbook.yml [/code] You will see each task running and returning status of execution and after reboot we are all ready!

Conclusion

Today we are more dependent than ever on many web apps in our daily tasks. In order to manage them quicker and better, how do you usually organize them? Having bookmarks or use to type URLs? What if I tell you that there is app to rule them all? It's called Station – it's been on the market for a while, but recently they released the app on Linux. The main idea behind the app is to group all your web apps into one place and have easy access to them by one click. It has more than 100+ apps already and continue to add more. I few months ago I have requested Mega and ManageWP as apps and they added them in very short time. Still there is a thing that I miss: Remembering your apps for your account so you won't have to add them each time you logon to a new computer. Probably there is a reason not having that as a feature yet, but you definitely should try it.

If Bootstrap is great for user interfaces, well, Semantic UI is briliant. For React developers, there is library available offering already backed Semantic UI components. I decided to give it a try and spin it on the template Brady created which uses Bootstrap. The result? Less and more readable codebase. In addition I wrote only 1 line of CSS. Curious already? Get the fork from here.