Posts
Repository of convenient terminal commands
This article will be filled with convenient terminal commands for my own reference.
Logs Check latest logs in linux Navigation journalctl -xe Go back to previous location cd - Other List all services service --status-all Permissions Show read / write permissions as numbers find . -maxdepth 1 -printf "%m %f\\n" Services See under which user a service is running ps -ef
Posts
Github OAuth redirect_uri_mismatch for .NET App behind a Nginx Reverse Proxy
Let’s say we have a .NET app running on an virtual machine. The app uses Github OAuth for authentication. Inside the virtual machine, the app runs on http://127.0.0.1:5000. The app should be available on https://example.com, so I have created an entry in nginx to send all requests towards https://example.com to http://127.0.0.1:5000:
server { server\_name example.org www.example.org; listen 80; listen 443; location / { proxy\_pass https://127.0.0.1:5001/; } } So this works. My website can be reached from https://example.
Posts
Host a static Angular build in an Azure App Service
Building an Angular app usually results in a bunch of files, mainly consisting of Javascript files, CSS files, and an index.html.
An Azure App Service normally wants to host an application using a startup command for a specific stack (PHP, Node, Python, etc.).
Technically, you could run your Angular app as a Node app. In that case you would run npm run start or ng serve as the startup command.
Posts
Log errors to Azure Application Insights from an Angular app
As there is no software without bugs, we must always assume there are bugs in our software. Subsequently, it would be very nice if we would be aware of those bugs as well. We cannot always be aware of all the bugs in our software, but we can be aware of all exceptions that occur in our software, using logging and telemetrics services.
One of those services is Azure’s Application Insights which, among doing many other things, can collect browser exceptions coming from Javascript-based single page applications and provide much useful information about them.
Posts
Prevent your blob storage from storing too many blobs
I host my Angular websites using Azure and I use Application Insights to find and report errors. Normally, the exception gets logged, but Angular builds usually have minified javascript, making it hard to debug the origin of an error.
Luckily, Azure support uploading the sourcemaps of a minified Javascript bundle to a Azure Blob Storage Container, which can then be used by Azure’s Application Insights to un-minify the stack trace of an error.
Posts
Easy full-width embedded Google Maps in php
Just an easy full-width embedded Google Maps snippet image/svg+xml for my own reference:
<!-- In PHP --> <iframe src=" <?php $search\_terms = rawurlencode("3 Abbey Road, London, GB NW8 9AY"); $src = "https://www.google.com/maps?q=2880%20" . $search\_terms . "&t=&z=15&ie=UTF8&iwloc=&output=embed"; echo $src; ?>" width="600" height="500" style="border:0; width: 100% !important;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowfullscreen="" loading="lazy"> </iframe> <!-- Or, in raw HTML --> <iframe src="https://www.google.com/maps?q=2880%203%20Abbey%20Road%2C%20London%2C%20GB%20NW8%209AY&t=&z=15&ie=UTF8&iwloc=&output=embed" style="border: 0px none; width: 100% !
Posts
Render children in an Angular wrapper component using ng-content
In my past experience with React, I have always used props.children to render children inside a wrapper or style component. It would look something like this:
// Wrapper component: function WrapperComponent(props) { return <div class="wrapper">{{ props.children }}</div> } // Usage: function AppComponent() { return <WrapperComponent><div id="child">I'm a child</div></Wrapper> } Now, as I’m working with Angular, I needed to do the same thing. However, I could never find the correct way to do it.
Posts
A very simple animated skeleton gist
Just for my own reference, I will publish the skeleton css gist image/svg+xml I use in many of my projects here. It is very easy to use and very easy to extend with new shapes. You can check the --card and --rounded modifiers image/svg+xml for inspiration.
In Sass:
.skeleton { display: inline-block; height: 1em; position: relative; overflow: hidden; background-color: #dddbdd; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(#fff, 0) 0, rgba(#fff, 0.
Posts
Preserve line breaks from a textarea in Wordpress
Today, I have added some customization settings to a Wordpress website. One of these settings consisted of a textarea input that would be used to enter and display an address. When I wanted to display the address, however, the address was displayed as one single line where it should have been displayed on three lines (Street + number, postal code, city).
// Incorrect code: <?php $address = get\_theme\_mod('address', ''); if ($address) { echo $address; } ?
Posts
How to add a search bar to an Upptime status page
Upptime image/svg+xml is a very neat tool that allows you to track the status of your websites and creates Github issues whenever a site has downtime. The extra neat aspect of Upptime is that it works entirely on Github. No hosting or cloud provider is necessary whatsoever, it all runs using Github Actions and Github Pages.
Upptime is not perfect (yet) though. It misses some features that would make it perfect for me.