Hey Dude – where’s my online tool?

Over the past 18 months I’ve been posting details of various online tools that I’ve encountered – but not this month I’m afraid.

Why? Well, frankly I’ve run out! I’ve got nothing!

I’ve been hard at work but haven’t actually found the need for an online tool that I haven’t used before.

Now that’s not to say that there aren’t any tools out there – it’s just that I didn’t need them, not this month anyway.
Next month may be different but I think it’s probably best to drop the ‘of the month’ banner and just categorise them as ‘Online Tool’

If you know of a tool that I’ve not featured and think I, as a .NET / Xamarin developer may find useful then feel free to use the contact page to point me in it’s direction.

Online Tool of the Month – converter.telerik.com

Telerik shouldn’t be a new name to you but if it is then I suggest you head on over to their main site, https://www.telerik.com, and have a look.

This post relates to there Code Converter utility which I found a need for recently while maintaining a clients VB.NET application.

Although I used to develop mainly in VB.NET I am now predominantly working in C# and as anyone who has used both languages will tell you, flipping between one and the other is not exactly painless.

On this particular occasion I had an idea how I could fix the issue with the clients application code – but my idea was in C# – enter the Telerik Code Convertor.

The UI is simple – two text panes, one on the left for the language you want to convert and the other for the convertion output, a button to switch between converting from C# or VB.NET and a button to perform the conversion.

Simply set the appropriate ‘from’ language, enter the code to convert and then click the big red ‘Convert Code’ button. The converted code is displayed in the left-hand pane.

The tool is quite forgiving and won’t complain about missing brackets or semi-colons but remember – ‘Garbage In – Garbage Out’.

Online Tool of the Month – base64-image.de

I recently had a need to create HTML email templates for a project which needed to include a couple of images, e.g. the company logo and feature image. I have of course done this in the past and just linked to the required assets on the hosting website – but this time is was different.

This time the website was potentially not accessible from outside of the local intranet and the requirement was to embed the images directly into the message.

One way to do this is to encode the images to a base64 string and use the resulting text, with a ‘data:image/jpeg;base64,‘ prefix in the src attribute of the image tag – something like this;

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXh....." />

Now all I needed to do was encode the images.

I could of course have written a quick app to get the image bytes and encode them as a base64 string – but why reinvent the wheel.

A quick Google search took me to https://www.base64-image.de/ where you can simply drag and drop your images and it will generate the base64 string for you – even providing options to copy preformatted text to use in image tags and CSS background urls.

When it comes to using these encoded strings there is something that you should be aware of and that is file size.

I ran into problems with some email clients not rendering properly because the message, with the additional embedded images, was too large. I had to use resize the images a bit and then ensure that I enabled ‘Image Optimisation’ during the encoding process to get them as small as possible without losing too much quality.

Online Tool of the Month – FakeNumber.org

I don’t know about you but I get a little hacked off when I want to sign up for a simple something but have to give up so much of my personal data that I sometimes just look elsewhere.

Now I’m not talking about my name or even my email address, but why would a service want my home address when I’m not going to be sent any physical goods or my telephone number …. at all? Depending on the service/company I may see the need for this information and will provide it if it is really needed – but a lot of the time this information is just going to be sold on or used for sales calls that I neither signed up for or wanted.

With email it’s quite easy and like many people I may use email aliases on my domain, e.g. randomname@onthefencedevelopment.com when I know I’m going to receive relevant emails and randomname@mailinator.com when I know it’s pretty much just an activation email or whitepaper link that will be sent.

I can make up a postal address which will actually go nowhere (I have actually used the address of the company I’m subscribing too in the past) but what about the phone number?

Well, I could just spin one of the top of my head but what about the poor devil who may be at the end of that random, but valid, number?

Well, that’s where Fake Number comes in.

Using this simple tool you can generate numbers which are guaranteed to be non-working (but will pass any format validations that a site may implement).

You can generate numbers for US, UK, Canada, Australia, Hungary and Iceland.

Depending on the country you can generate landline, mobile or freephone numbers and know that they are not going to end up with someone being swamped with called because your data was sold on.

Online Tool of the Month – unminify.com

Minification and bundling of Javascript and CSS files is obviously a good idea when you are deploying your websites to production – but if you want to use a third-party, minified, resource and want/need to look at the unminified version – it can be a bit of a pain.

I recently purchased a theme for a website which came as a set of CSS, Javascript and image files. There were a number of pages which demonstrated the theme and it was pretty much what I wanted – but not quite, I needed to make a few very minor changes.

These changes were limited to styles which specified ‘hero blocks’ with image backgrounds. I didn’t need a block with an aircraft in the background – I needed one with a camper van.

Now I could have simply renamed my images to match the existing assets, but when they are called something like ‘airplane_x500.png‘ I don’t think that’s a great idea. I certainly would not do it in code – create a class file called airplane.cs and implement a camper van inside it!

So, I needed to update the CSS – and herein lies the rub. The CSS file in question was minified (others did have the original version in the bundle – this one did not).

I could have contacted the designer and request the unminified asset but I really didn’t want to go through the hassle of this with no guarantee of receiving the file.

Enter Unminify.com, a simple website which does exactly what it says it’s going to to – take minified resources and reverse the minification process.

The UI is pretty simple and self explanatory – simply paste your minified text into the central text area….

… click the Unminify button …

Job Done 🙂

Online Tool of the Month – SelfSignedCertificate

In this day and age everything needs to be encrypted to prevent nefarious access to our data. Whether it’s our banking or medical records, our online email inboxes or our browsing and searching habits.

So, when developing websites or APIs I always start with an SSL enabled configuration – and in Visual Studio that’s a pretty easy thing to do, it’s just a checkbox really.

When deploying websites to production servers I, like millions of others, use LetsEncrypt to generate and renew my SSL certificates.

But what about that gap between Development and Production? I am of course talking about ‘Test Servers’.

I’m currently working on a few ASP.NET Core projects that will ultimately be deployed to Linux servers and in order to test this type of deployment I normally like to use a Virtual Machine (VM). This give me good flexibility and allows me to deploy to locally hosted systems with the ability to easily rollback configuration changes etc through the use of snapshots.

But what about the SSL certificate? I can’t use LetsEncrypt because the VM won’t be externally accessible for their system to interogate and validate. What I need is a Self Signed Certficate that I can install on my development system and the VM.

With a Self Signed Certificate in place I can deploy and test my software using SSL thus ensuring that the Test environment matches Production and that there are no sneaky bugs loitering around.

Now – you can use a Powershell command like this:

New-SelfSignedCertificate -DnsName "www.onthefencedevelopment.com" -CertStoreLocation "cert:LocalMachineMy"

Or an OpenSSL command like this (if you have OpenSSL installed):

openssl req -x509 -newkey rsa:4096 -sha256 -keyout mysecurecerti.key -out mysecurecertificate.crt -subj “/CN=onthefencedevelopment.com” -days 600

But do you really want to have to look up all the command line parameters every time you need a certificate? Of course not.

Enter the Self Signed Certificate Generator (https://www.selfsignedcertificate.com/) which will generate a suitable certificate with a single click on the mouse.

Simply navigate to https://www.selfsignedcertificate.com and enter the domain you want to generate the certificate for and click the big green Generate button.

The tool will then display a page allowing you to download the certificate and key files as well as providing additional information about configuring the Apache web server to use the new certificate and how to generate the same certificate from the command line (if you really wanted to).

Now, assuming that you have configured your system recognise the domain, e.g. edited your hosts file, and even though your web browser will complain that it cannot verify the origin of the certificate you should be able to navigate to your website using HTTPS, e.g. https://mytestsite.onthefencedevelopment.com, and it should work just fine.

If you really wanted to keep your browser happy you can export the certificate via the browser and import it into your local certificate store. There are plenty of tutorials out there on how to do this but this one is as good as any other I’ve found.

So there you have it – generating Self Signed Certificates the easy way.

Online Tool of the Month – ExtensionMethod.Net

OK – not really a tool, more of a resource but I hope you will like it.

As you may know my language of choice is C# and since version 3.0 developers have been able to add functionality to existing types without actually modifying the type itself by using Extension Methods.

We are all used to the String methods such as ToUpper() and ToLower() – but what if you wanted to truncate a string to a specified length and apply a ‘…’ suffix?

Well, you could of course write a private method in the class you want to perform this operation or create a static class with static methods to do the job for you. Both perfectly valid ways of achieving the same result but extension methods are somewhat cleaner in my opinion (if you ignore the ‘they are’t object oriented’ argument).

Now you can read all about Extension Methods using the above link but as with things like RegEx, there is not always a need to reinvent the wheel and the ExtensionMethod.Net website is basically a collection of user submitted methods which address common needs (or even the not so-common ones).

The site isn’t limited to just C# methods either – there are submissions for VB, F#, Swift, Kotlin and Javascript.

You can search or filter the methods by language, target object (e.g. System.String) and author.

Once you have found something you like you can view the code and, most of the time, see usage examples.

From there it is just a quick copy/paste to bring the code into your project – where you will more than likely want to tweak it slightly (because that’s what we do right?) and you’re good to go.

N.B. If you like the sound of the ‘Truncate’ method I mentioned above, you can find it here.

Online Tool of the Month – MakeAppIcon

I’ve been developing a couple of Xamarin applications recently and while the default application icons are better than nothing you will of course need to replace these with custom graphics before going live.

Now I’m no designer so I’ve used Fiverr to find suitable resources for a number of previous projects (websites, logos and menu icons) and have done so for these mobile apps. In return for about £10 I received nice, clean icon designs which I’d never have been able to put together myself – £10 well spent in my opinion as I can spend the time coding instead 🙂

Anyway, having the design is one thing – creating the required assets for each platform is another. Android and iOS both require numerous versions of the image with specific dimensions. Android requires these to be placed in a specific folder structure while iOS requires specific file name formats for the assets to be used correctly.

Creating these manually is a bit of a pain and time consuming – surely there must be an easier way!

Enter MakeAppIcon which makes creating these assets a breeze. Assuming you have a suitable source file, I use a 1024×1024 png file, this handy tool will create all the possible permutations required for Android and iOS – many of these you may not need but at least you have them if you need them.

When you goto the site it’s not that easy to see what you need to do – there are ads for their paid products and the free service does not jump out at you. Currently you need to turn your attention to the panel with the toaster.

Select your source image and it will start to process it – which can take a few minutes (this is a free service remember). When it has finished you will be asked for your email address so that it can send you your icons.

Now, I normally don’t like doing this but on this occasion I decided to go ahead – and I can confirm that I’ve not received any SPAM etc as a result (not even to push their paid products!).

After a few minutes an email will arrive containing icons from ldpi to xxxhdpi for Android and every size for iOS from 20×20 to 83.5×83.5 (@1x, @2x and @3x as appropriate). There’s even Play Store and iTunes artwork.

All you have to do now is import them into your project and your are good to go 🙂

Online Tool of the Month – MockUPhone.com

While preparing my previous post I needed to generate some mobile device mockups showing my Xamarin.Forms app running in Android and iOS.

In the past I have normally cobbled these together using Paint.Net, a device bezel image and overlaying the screenshot onto it. Not pretty but it worked and looked fine.

However, the bezel images I had were rather old and I wanted to freshen things up a bit so went off in search of some new ones – only to come across MockUPhone.com.

MockUPhone is a free online service which will take your screenshots (I generate mine using Android and iOS simulators) and apply a variety of device bezels, e.g. Pixel 2, HTC One, iPhone 8 & iPhone X.

If I had a gripe then it would be that the images were not the same size for each platform which meant that I had to resize one of them to match the other but as I was going to be merge matched screenshots for Android and iOS into a single image this was hardly a hardship.

It is also worth noting that they offer another service called ‘ShotBot‘ which is an App Store screenshot designer for Android and iOS. It requires a login and I’ve not tried it myself (yet) as I already had my App Store listings ready to so – but when I need another one, I’ll be sure to take a run at this.

Online Tool of the Month – webhook.site

If you’ve ever worked with a third party API that uses Webhooks you will appreciate the power and flexibility that they provide. Instead of having to poll for updates yourself you can rely on the API to call you instead.

I first came across webhooks when developing a web application that implemented Stripe as it’s payment gateway for monthly/annual subscription payments.

In this instance the webhooks would fire when specific events occurred; e.g.

  • Payment was successful
  • Payment failed (and will be retried)
  • Subscription Cancelled (manually or after repeated, automated attempts for payment have failed)

Long polling for this information would be a nightmare and having the webhook contact an endpoint on your API removes this headache – but does introduce another.

When I was developing the webhook callback endpoints it was difficult to see what data was being passed in the request. Stripe’s API documentation was good but there is nothing like actually seeing the data for yourself.

Attempting to route calls from a remote webhook to my development environment was somewhat problematic and I never quite managed to get it working. In the end I created a simple WebAPI service that I deployed to a virtual private server which would receive the webhook request (as JSON) and simply email it to me. Simple effective but a bit of a pain.

Recently I was looking at integrating an existing product with JIRA for another client and low and behold, it’s API provided webhooks – but before dusting off my WebAPI project I took a look to see if there were any alternatives out there – and, not surprisingly there was.

Enter webhook.site – a simple but powerful web application that basically adds a lot of polish to the quick and dirty solution I had previously developed.

When you navigate to the site it will generate a unique url that you can use to configure the webhook.

Then you can either wait for something to hit it (if you are debugging something live) or fire up your development environment and go through the process that will trigger the webhook to fire. Some services, like Stripe, provide a function to allow you to simply trigger the webhook with dummy data.

Once the webhook.site endpoint receives the request it will display the request and it’s payload.

This will prove invaluable if you are trying to debug inconsistent data operations and webhook failures.

Maybe it was a typo in a property name, maybe a data type mis-match, but without being able to actually see the data being sent it is impossible to determine what is going wrong.