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 ๐Ÿ™‚

Personal Encryptor CLI v1.1.0 Released

It’s been a good seven months since I released the initial version of the PersonalEncryptorCLI project and in that time I’ve had more than a handful of emails asking me about the utility. Most of these were asking if I could/would be creating a Desktop version, i.e. something with a GUI. It seems only geeks like the Command Line – who knew ๐Ÿ˜‰

Well the answer is yes, but I needed to clear the remaining issue that I had identified with version 1.0.0 – the need for the recipient to know the context of the encrypted content, i.e. whether it was a text file, an image or a Word document.

This was due to the initial release of the utility requiring the filename to be specified during the decryption process – including it’s extension. Now, if the user didn’t know that it was a Word document, how would they know to specify a filename with a .docx (or .doc) extension?

Sure, the sender could include that in the email (or some other mechanism) but this is information leakage and this could potentially assist so-called ‘bad actors’ in determining the contents – regardless of whether they would access the actual contents or not.

Well, today I managed to get a couple of hours to test update the code to include the original filename in the Encrypted Packet (the value being encrypted of course). During the decryption process this value is extracted and used to create the file for the decrypted data to be written to.

There have been a couple of tweaks to the project Readme.md file to handled the changes to the command line options for the decryption operation but it’s fairly trivial – just dropping the filename from the output path parameter.

“But what if I have encrypted packages that were created with the previous version – which don’t contain the filename?”

Don’t fret – I have a few of these too so the code will use a temporary filename in this instance (hopefully you remembered/know what the file was!).

I’ll be decrypting my now-legacy data and re-encrypting with the new version of the utility – you may want to do the same ๐Ÿ˜‰

You can access the main project page here or the new 1.1.0 release here.

Now that the desks are clear – I can turn my attention to the Desktop client which may or may not look something like this:

Online Tool of the Month – realfavicongenerator.net

Following the migration of this website to WordPress I installed the ‘redirection’ pluginย in an effort to handle the difference in the url structure used by Squarespace (my previous host/platform). This plugin allows me to redirect users using the old Url to the correct content and also see any 404 errors for resources I may have missed.

While reviewing this 404 log I noticed a few rather odd entries, such as

  • apple-touch-icon-precomposed.png and
  • apple-touch-icon.png.

Knowing that I never had such content on the site before I did a bit of Googling and found that these are favicons (the little square logos that reside on your browser tabs) that Apple’s Safari browser will attempt to load along with your page.

Now that I knew what the problem was, how do i fix it? I mean, I had a favicon on the site – why couldn’t Safari just use that one?

After a bit more searching I found the Real Favicon Generator site where I was able to enter the Url of my site and it would generate a report on what it found (or didn’t find as the case maybe).

This is actually for another site I manage but the result is similar to when I ran it on this site

Now, that’s a lot of red but fear not – help is at hand. As the sites name eludes, it is also able to generate the appropriate icons as well. But how will I get these into WordPress – it only has the facility to allow me to specify a single favicon file.

Well – as well as the testing of the site and generation of the icons, there is also a WordPress plugin which makes things super easy.

With the plugin installed, navigate to the Appearance menu and select ‘Favicon’.

Select your desired image, they recommend 260x260px but mine was 150x150px and it looks fine for my purposes.

Click Generate and you will be taken to an editor page which allows you to tweak a few colours and settings – I didn’t bother with this, I just clicked the ‘Generate your Favicons and HTML code’ button at the bottom of the page.

And that’s it – I re-scanned the site and (unsurprisingly enough) everything was now green – and the 404 errors are no longer appearing in the redirection logs.

Online Tool of the Month – unixtimestamp.com

As developers we know that one of the biggest problems when working with data is handling dates. It’s such a simple thing surely yet many of us fall foul of formatting issues and time zone offsets – and that’s when the date is actually human readable!

I remember when I first encountered a Unix Timestamp in the ‘LastUpdated’ column of a database table and thinking, ‘what the hell is that?!’.

Bear in mind that this was back in the days before the internet and before I had any real experience with Unix/Linux systems – every Windows application I had seen prior to this had it’s dates stored in the DD/MM/YYYY hh:mm:ss format.

Being faced with something like ‘1519571567‘ was a bit confusing to say the least – unless you know that this represents ‘the number of seconds since midnight (UTC) 1st January 1970‘ where would you even start to know what this meant?

Even now that I now what this is, it is always a bit of a pain point to me when I’m developing or debugging something with a date in this format;

  • What time does the timestamp in that database field represent?
  • What time is it now expressed as a unix timestamp?
  • etc

Over the years I’ve come to fall back on Dan’s Tools Epoch Unix Time Stamp Converter.

The fairly simple interface is great as it doesn’t get in you way and lets you don what you came to do.

To the left of the screen is the current timestamp (or at least the timestamp from when the page was loaded) and how this would be displayed if translated to a number of other standards.

To the right is where you can either enter a date (using clearly marked fields to prevent ambiguity) or a unit timestamp.

Entering the timestamp from a few lines above and clicking ‘Convert’ generated the following:

While entering the date I’m currently writing this blog post returns the following:

This is essentially a copy of the output of the left hand panel but displaying the output for the entered value. The value is also converted into a number of different formats, e.g. ISO 8601 & RFC2822.

I’ve found this to be a helpful little tool when working with Unix Timestamps and be sure to checkout the other date related utilities in the top menu bar, e.g. Timezone Converter and Week of the Year.

Parsing Console Application Arguments using CommandLineParser

When we open Visual Studio and click File > New we are greeted with a huge list of project templates to choose from. Now and then we may opt for a simple Console Application for a quick one off utility, e.g. post processing some .csv files or images.

Similarly we have all used command line utilities which require numerous arguments and switches to ‘tune’ exactly what we want it to do, e.g. git or tar.

Well I’m looking to create a Command Line utility that will allow users to encrypt and decrypt textual messages.

Why? I hear you ask – well check out my thoughts on the UK Governments attempts to get WhatsApp to create a backdoor.

The utility will allow users to

  • Generate Public/Private Key Pairs
  • Encrypt textual messages, packaging them for sending to the intended recipient
  • Decrypt packaged messages

Each action will require/allow a number of parameters to be set to specified key bit lengths, key names, output locations and of course the message to be encrypted or decrypted.

Something like this:

C:Encryptor generateKeys -n Daves -o C:UsersDaveMyKeys

which would create a key pair files called DavesPrivateKey.xml and DavesPublicKey.xml in C:UsersDaveMyKeys

But what is the best way to do this?

We could handle it in the Program.Main method by locating arguments and setting their values, like this
https://gist.github.com/OnTheFenceDevelopment/d08bb935661c91d3a11dac50daacbb09.js

But that’s a bit nasty and relies on each parameter having a value and that it’s been specified in the correct way to allow casting etc. There has to be a better way .. well there is and it comes in the form of a nuget package called, suitably enough, CommandLineParser.

Now, I didn’t find the documentation (the ReadMe.md on the projects Github page) that helpful and it took a lot of trial and error to work out how to use it for my needs. When I got to grips with it though – I was impressed.

After installing the CommandLineParser via nuget I needed to create a new class to define each operation, i.e. GenerateKeys, Encrypt and Decrypt.

Each class is decorated with a ‘Verb’ attribute – this defines the action – while the properties are decorated with ‘Option’ attributes.
https://gist.github.com/OnTheFenceDevelopment/30640f89914a961bf0d2f81995e36c19.js

So the above code defines the Generate Keys action and provides options for Key Length, Name and Output Folder. Notice that the Key Length will default to 2048 bits if not specified by the user. It is also possible to make options mandatory and the operation will fail if they are not specified.

When the Console Application project was created a Program.cs class was added containing a single method called Main. I’ve modified the signature to return an integer instead of a void as I think it is good practice to return exit codes from command line utility.

https://gist.github.com/OnTheFenceDevelopment/2725e47e2482535a681e2b794901fcc0.js

To test the configuration I can right-click on the project file, open the Properties page and click on the ‘Debug’ option. Enter suitable values into the ‘Command Line Arguments’ as below

and then run the application (I had a breakpoint on the return statement within the GenerateKeyPair method).

If the parser fails for any reason then it will automatically generate the required output and error ‘gracefully’.

Try dropping the value for one of the options and rerunning the application – below I dropped the DavesMessage value from the -n parameter:

Obviously I want to add another couple of Option configurations and this is easy enough to do – take a look at the sample app in the github repo, in particular the Program.cs file, to see how this is done. Alternatively you can keep track of this application when it hits GitHub as I will be open sourcing the code.

Online Tool of the Month – BuiltWith

Have you ever looked at a website and thought ‘I wonder what that’s written in’? Well, even if you haven’t I certainly have which is why I was interested to hear about BuiltWith.

Simply put, BuiltWith puts websites under the microscope and produces a detailed report about what it sees.

From Webservers and SSL Certificate providers through programming languages, Javascript libraries, content management systems and advertising platforms it sees it all. The produced report contains links to allow you to see technology trends across the Internet which may well assist with infrastructure decisions for your next project.

Pointing BuiltWith at this site I was able to see that not only were the current technologies being listed, including the current version numbers where applicable, but it also reported that 56 technologies had been removed since July 2012 (I migrated from SquareSpace to WordPress fairly recently).

Registering for a free account would allow me to see much more detail and view historical data but for now I have found the open version sufficient for my needs.

 

Online Tool of the Month – QuickType

I was recently working on a freelance project which required interaction with a 3rd party webservice that returned a JSON result.

While connecting to the service and fetching the data was a fairly trivial task, looking at the data being returned it was clear that a lot of POCO/DTO classes were going to be required.

Obviously these are easy to create but they are time consuming and prone to the odd typo. I then remembered a labour saving service called QuickTypeย which would take the returned JSON and generate the C# code for me – I just needed to pull it into my project.

When you navigate to the QuickType site you are presented with some sample input data in the left panel and the resulting C# code in the main panel. There are also some options in the panel to the top right that we will need to tweak.

In the screenshot below I’ve pasted in some JSON which was generated by another online service called, oddly enough, JSON Generatorย (I’ll probably feature this tool next month). I’ve also used the ‘Target Language’ dropdown to select C#, specified a Namespace and collection type to use (List<T>).

 

As you can see (notwithstanding the truncated lines which are an artefact of my screen capture tool), not only has QuickType generated the main Person class, it has detected and created the ‘Friend’ class along with some serialisation and conversion classes (with methods inside of which can be extracted and used as required – or discarded).

It has also added JsonProperty attributes to the properties (assuming NewtonSoft.Json) and provided usage details

 

Now obviously there is no voodoo at work here – creating these classes is pretty trivial – but this is a great time saving tool which can free up your development time to actually develop instead of churning out this mundane code.

Online Tool(s) of the Month: Lorem Ipsum

I’m sure that many of us have used the Lorem Ipsum site to generate some dummy text to use as a placeholder in a webpage or similar. Just something that looks like real text but with no meaning whatsoever. This is ideal if you want to show something to a client when you don’t have the actual copy text yet or you want to play around with some CSS during development.

The thing is, that standard Lorem Ipsum is a little …. well dry to say the least. Yes it is supposed to be meaningless so why should it matter right? Well, just because that’s the way it’s always been doesn’t mean it can’t change.

Enter Bacon Ipsum! Yes, all the goodness of Lorem Ipsum but with a meaty twist ๐Ÿ˜‰

Bacon ipsum dolor amet meatball kielbasa bresaola, frankfurter pork chicken meatloaf. Bresaola porchetta meatball, pork chop cupim venison shankle ground round meatloaf shank filet mignon beef ribs pancetta hamburger ham. Drumstick pork chop chicken tri-tip, capicola frankfurter ham ground round shank venison bresaola prosciutto chuck leberkas fatback. Turkey shoulder tail cow. Bacon beef ribs shank ham hock tail. Filet mignon prosciutto capicola boudin tongue.

You can choose between ‘All Meat’ or ‘Meat and Filler’ – there’s even a ‘spicy’ version for the heat seekers out there.

Any of course, Ipsum isn’t just for text – nope, you can (sort of) have Image Ipsum too. Need a sample food image 300px x 200px? No problem, just head over to Lorem Pixel.

Refresh Page for new Image

Of course, it’s not all about food – you can choose from numerous categories; City, Animals, Business, Cats (naturally), transport and more.

I’ve found these sites pretty useful in recent projects where I didn’t have the required assets to hand. Instead of spending time hunting around for images or suitable text from a clients website, I just grab some content from these services and carry on with the task at hand – development.

Windows 10 (and 7) Built-In MD5 Checksum Calculator

I recently paved my main development workstation after it started misbehaving (slow start up, some applications not opening consistently etc) and am trying to be careful about what I install on it going forward.

Previously I had all manner of applications, games (including Steam) and utilities installed and the chances of finding what was causing the problems was pretty remote. There could of course be multiple culprits.

Today I needed to install MySQL Workbench so I headed off to download it and noticed the MD5 checksum beneath the link. Now, I don’t always check these and maybe this is why my workstation ended up in a bit of a mess. But with a view to keeping this system as clean as I can I decided to make a point going forward of checking these checksums when they are available.

The “problem” is which utility do you use to calculate the checksum of the downloaded file?

If you Google for ‘MD5 checker’ you will see a number of utilities and while I have no reason to doubt the integrity of any of these I stopped short of installing any of them.

Obviously each download was accompanied by it’s MD5 checksum so that I could verify the file but after freely installing all manner of utilities in the past I was a little bit wary this time around.

Now, MD5 is not a new thing and you would think that Windows 10 would have some form of utility built in that would calculate the hash – and there is. Apparently it is also available in Windows 7 but I no longer have any systems running Win7 so I cannot verify that.

Open a command prompt and enter the following:

CertUtil -hashfile <path to file> MD5

Depending on the size of the file it may take a few seconds to run the calculation but if successful the MD5 hash will be displayed as below.

It is also possible to generate checksums for other hash algorithms by replacing the MD5 parameter used above with any of the following (note that if you don’t specify a value then SHA1 is used by default):

  • MD2
  • MD4
  • MD5
  • SHA1
  • SHA256
  • SHA384
  • SHA512

So, if all you need is to determine the checksum of a downloaded file then there really isn’t any reason to install yet another utility to do so.