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(s) of the Month – For Finding Lat/Lng

I’ve recently been engaged by a client to write the mobile applications for his website (more on that in later posts) which plots ‘points of interest’ on a map. That probably sounds a little familiar as I have already developed the FillLPG for Android application which displays the location of LPG stations around the UK – and increasingly into Europe.

Working with mapping applications is always a challenge, but an enjoyable one for me as I find maps such an engaging medium. One recurring challenge for me is that I don’t speak ‘Latitude and Longitude’ so when I need to test my code, e.g. load the map for a certain location and perform a ‘nearby’ search, I have to determine some suitable coordinates.

There are a few online tools out there but I always use one of a couple that I’ve found to be useful

Of the two LatLong.net looks the more modern interface with simple but powerful search capabilities. Enter a place name or Postcode (that’s a ZIP code for you US readers) and the map is displayed and a pin in the appropriate location with it’s coordinates clearly displayed (Lat/Lng and GPS).

If you want to find the coordinates of a specific location then you just need to pan & zoom the map until the location is in view and then simply click it with the mouse.

Couldn’t be easier really and this is all I need most of the time.

Sometimes though, I need a little more and while FindLatitudeAndLongitude.com may look a bit dated there is a lot of power there. For instance, while you can do everything that the previous site can do, if you can find the Menu panel (highlighted in the screenshot) you will see that you can perform all manner of searches and reverse look-ups.

Using the ‘Lat/Lng to Address’ search it is possible to zoom into a map, select a location (probably a house or business) and resolve the full address by clicking the ‘Load’ button. I’ve found this feature to be very powerful – for development and personal use (sometimes you just need a postcode for your SatNav).

 

 

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.

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 of the Month – Polyfill.io

Browser compatibility is a pain – and that’s a fact. But when your client says, “we need to support IE9 and upwards” you can feel the dread come over you.

Well, fear not as help is at hand in the form of Polyfill.io, a CDN hosted service which will serve up a custom set of polyfills to fill those functionality  gaps in whatever browser makes the call.

Need some of those ‘Math’ or ‘console’ functions that are so readily available in non-IE browsers? Well, Polyfill.io has your back.

Add a single line of code to your mark up and voila – you’re good to go. Remember, before you start panicking about large request sizes the CDN will tailor the response to only those features that the current browser is lacking, which is pretty neat.

From the feature list on their site it is easy to see what is included naively in each browser and what can be polyfilled.

But there’s more – what if you only wanted a single feature, say ‘Function.name’, in IE9/10&11. Even though the service will return a tailored set of polyfills it is possible to view the detection and polyfill scripts for any feature by clicking on the ‘hamburger’ menu to the right of the feature – this takes you to the appropriate location in the Github repo (yep, this is all open source stuff).

The downside to using a CDN though is that if it goes down (and it did once for a client of mine) then it could leave your site somewhat ‘hobbled’ depending on the features you were relying on

Online Tools of the Month – ASafaWeb.com & SecurityHeaders.io

It has come to my attention that ‘ASafaWeb’ has now reached ‘End of Life’ and is no longer accessible. The site developer, Troy Hunt, has posted on his blog the reasoning behind his decision.

We all know that we should be developing with security in mind right from the point of File > New, ensuring that our ASP.NET web applications are configured correctly. The problem is that there are so many configuration settings that can be tweaked and this can become overwhelming.

I heard Troy Hunt speaking on a podcast a while ago talking about a site he had created which would probe a target URL and report back with anything it found, i.e. information that a hacker could potentially use to hack your site. The site is called, ASafaWeb (it makes sense if you read it out loud) and is essentially a service which can determine ‘remotely detectable’ configuration issues with your website, i.e. what it maybe leaking to the world.

By it’s very nature the service requires that the target site is remotely accessible, i.e. you cannot scan your development environment running on http://localhost but there are a number of way around this. Personally I push my web applications to Azure and then target the https://project-name.azurewebsites.net url.

Entering the target email and clicking ‘Scan’ will result in a comprehensive report being generated which covers, (among other things), Custom Errors, Elmah, Clickjacking and Secure Cookies. For each test there is a status indicating whether it Passed, Failed or (for whatever reason) Not Tested along with details of what was tested, why it is important, possible solutions and links to additional resources.

The screenshots show the results for Troys ‘Hack Yourself First‘ website which is uses as a test case for his Pluralsight course of the same name – an excellent watch by the way!

As good as ASafaWeb is there are still potential issues that it doesn’t test for – a line has to be drawn somewhere.

This is where securityheaders.io comes in. Many of us give little thought to the request headers that our browsers send out or the response headers it receives back – but to a potential hacker they can reveal a lot about the inner workings of your site.

Again, the service just requires a target URL to scan and returns details about the headers it received, missing headers (and why they are important) and an overall site rating (from A+ to F).

While there is no guarantee that your site won’t get hacked, these services will help you identify a number of key attack vectors and help minimise your risk – hopefully the hackers will move along to someone less well protected.

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.

Online Tool of the Month: .NET Fiddle

I frequently find myself spinning up Visual Studio to create a simple Console Application just to hack out a small piece of functionality. In an attempt to not adversely affect the code I’m actually working on or having to step through the application to the required point, I create a simple project to quickly try things out.

Dot Net Fiddle User Interface

Examples include testing Regular Expressions and Linq queries.

Well I’ve been using .NET Fiddle (think JSFiddle for .NET) for a while now and it’s a great little tool for quickly trying these things out.

Not limited to C# Console Applications, .NET Fiddle also lets you write Script, MVC and Nancy projects using VB.NET or F#.

With the Auto Run option set to Yes the code is compiled whenever a change is detected so it’s ideal for my needs – outputting to the Console and quickly validating my code.

Compiler errors are displayed as normal and there is limited support for Nuget packages as well.

Best of all – it’s free to use and you don’t even need to sign up. What’s not to like?