Tuesday, February 13, 2018

Domain Not Propagating

Isnt it frustrating sometimes, when for whatever reason, you had to update your DNS records for your domain and it takes forever to propagate. I had to go through this recently. One of the domains I manage expired, and we renewed after two days. Unfortunately, the registrar had parked the domain, pointing it to another location temporarily. This meant that after the renewal, we had to wait for 24 to 48 hours for the domain to fully propagate.

I then had to do a fix that ensured that some other servers who talked to that domain could still access the server it pointed to, even though the domain was not fully propagated to them. It involves a simple fix for windows systems.

  1. Open notepad as administrator
  2. Open C:\Windows\System32\Drivers\etc\hosts (assuming that windows is installed on the C drive)
  3. Scroll to the end of file and add two new lines (press Enter twice)
  4. Enter the IP Address, leave a space then the domain name
  5. Do the same for necessary subdomains where needed, e.g www
  6. Save and close the file
Great! you are done.

Wednesday, October 12, 2016

Resize or Crop Image before Upload Using HTML5 File API

I've always loved how Whatsapp, Facebook, Twitter and all the major social network platforms maintained sanity of uploaded profile pictures through the use of instant resize at upload time. Of course not only profile pictures need to be made to conform to a specific dimension, if you find other scenarios during development when you need to ensure that your images are of a specific height and width, or aspect ratio then this article will help you do just that. You may also just want to give the user ability to resize before final upload, this article will help you do just that.

Step 1: Download CropperJs Plugin
There are lots of plugins that could help to achieve our objective, and I've tried a few. I find this one very robust and easier to use. Here's the github link

Step 2: Import the CropperJs Plugin
Using your script tag, import the downloaded plugin's Javascript file and link the CSS file too. Note, that for speedy loading, CSS files should be loaded in the head section, while Javascript files should be loaded just before closing the BODY tag. Also ensure that JQuery library is included in your project.

<link href="css/cropper.css" rel="stylesheet" />
<script src="js/cropper.min.js"></script>

Step 3: Add Required HTML Tags

<input id="the-file-input" type="file" accept="image/*">
<div id="PreviewImage"></div>
<button type="button" id="SaveImageBtn" >Save Image</button>

  • The file input control with Id = the-file-input will be used to select the image
  • The div with id = PreviewImage will be the cropping area
  • The button with id = SaveImageBtn will be used to trigger the upload process

Step 3:  Add JavaScript Code

InitializeCropper = function () {
        $WorkingImage = $("#ImageToCrop");        
        var CropperSize = 200; //size of the crop box
            aspectRatio: 1 / 1, //aspect ratio of the crop box
            data: {
                width: CropperSize,
                height: CropperSize

function renderImage(file) {
        var reader = new FileReader();
        reader.onload = function (event) {
            the_url = event.target.result
            $('#PreviewImage').html("<img id='ImageToCrop' src='" + the_url + "' />")

  $("#the-file-input").change(function () {

        $('#SaveImageBtn').click(function () {
            var ImageDataURL = $WorkingImage.cropper('getCroppedCanvas').toDataURL('image/jpeg');

Remember that your JavaScript code needs to be enclosed in script tags if they are within your HTML.

Step 4: Save Your Cropped Image
If you open your HTML file in the browser, at this point, you should be able to select an image file and crop as desired. The next step required is to upload cropped image and save in the server. Notice the SaveImageURL method called above inside the SaveImageBtn click event? Its commented out, but that's where the uploading takes place. The image DataURL string will be sent to the server through an Ajax call. I will provide sample codes for Client and Server side in my next post. Meanwhile, enjoy this cropping process first.

This method is in use within a live project at http://www.osigla.com.ng/clinical/


Thursday, April 7, 2016

T-SQL: Prudent use of Select ... As

Every database developer using T-SQL will agree that the Select ... As feature allows one to easily grab values into a variable. However, after I got my fingers burnt recently, I had to share this to remind everyone how important it is to exercise prudence with its usage. Given the table below, assuming its an SQL table named Students.

1Fade Ayomi105
2Oluwayomi Ojo96
3Kemi Mide84

And given the SQL statements below which performs certain operations on the table given above

declare @StudentAge int;
select @StudentAge = Age from Students where Id = 1;
set @StudentAge = Age * 2;
select @StudentAge = Age from Students where Id = 5;
select @StudentAge as AgeSelected;

So what would AgeSelected resolve to according to the provided information? Ordinarily, one would expect AgeSelected to be NULL however, since @StudentAge carried a value initially, and the row described in the where clause do not exist in the table, @StudentAge will retain its previous value of 20 and therefore AgeSelected will be 20.

To prevent logical errors like this in code, always ensure to initialize the value of your variable. For instance you could modify the code above by adding the following code after line 3.

set @StudentAge = null;
Then go ahead to test for null after line 4 (which would now be line 5 when you have added the new line). Better still, just enclose the entire line 4 and 5 in if exists block. This ensures that line 5 only runs if the where condition is able to find a matching row. If you are a culprit of this oversight with code in production, ensure you immediately rewrite your codes, I know you'll not want embarrassment from this.

Wednesday, April 6, 2016

Determine Appropriate Font-Size for Text iTextSharp

I use CorelDraw a lot to lay out my reports before writing the iTextSharp code to generate them. It gives me a fair idea of how to position report elements and keeps me from doing guesses or trial and error. This was the case when I worked on the ID Card project for Delta State University: I had the ID card neatly laid out and the school loved the design.

Now, everyone knows we normally have long names in Nigeria. My design template had a name that was 10 characters long and I used 28pt points for this text. What I wanted to achieve however is that, for names that will not be able to fit into the maximum space allowed for the name text at the 28pt used in the design template, the system should use the maximum font size that will permit the name to fit in the space available. Its a simple problem, but wasn't so easy to resolve.


 public Font GetSafeFont(string DisplayText, Font FontToUse, float SafeLength, float StartingSize)
            /* Display Text: The text you wish to display in your PDF using iTextSharp 
             * FontToUse: The ideal Font definition for this text e.g  FontFactory.GetFont("Avenir Next", 15.5f, Font.BOLD, new BaseColor(16, 99, 166))
             * SafeLenght: Maximum allowed lenght for the display text according to your design template
             * StartingSize: The ideal Font size for the DisplayText
            float FontSize = StartingSize, CurrentLenght;
            FontToUse.Size = StartingSize;
            Chunk NameChunk = new Chunk(DisplayText, FontToUse);
            //ensure that displaytext doesnt exceed safe lenght by finding the largest possible font size
            CurrentLenght = NameChunk.GetWidthPoint();
            while (CurrentLenght > SafeLength)
                FontSize -= 0.5f;
                NameChunk.Font.Size = FontSize;
                CurrentLenght = NameChunk.GetWidthPoint();
            Font NewFont = FontToUse;
            NewFont.Size = FontSize;
            return NewFont;

Friday, January 22, 2016

Creatives for Beauty Sanctuary

This is a creative set for Beauty Sanctuary beauty shop. I hope it gives you some inspiration too.

Thursday, January 21, 2016

Implementing Token-based Authentication for Service-based Web Applications

With the magical things developers can achieve with JavaScript these days, there is almost no reason to develop on the web without JavaScript. The drawbacks of the traditional web development approaches are just too unbearable. JavaScript introduces superb user experience with AJAX and developers can now update an element on a page without post back!

Although JavaScript solves  most of the developer's head ache, it introduces its own issues. Foremost of these are security flaws of which we have the 3 giants: XSS, CSRF and SQL Injection.

I remember implementing a solution for a leading financial company in Nigeria, and though I insisted on stringent security measures for the Web API, the guy in charge maintained that there was no need for it, and the project went ahead without it. Yes! there are lots of systems trusted by the public that are in use without adequate security. I'm afraid these are time bombs waiting to explode. The effect of not adequately securing a system can be very disastrous, ranging from Identity Theft, to denial of service and other issues. No matter how minute, you do not want your organisation to suffer any of it.

Securing Your Web-API Using Tokens
I'm assuming here that you have good knowledge of your database, server side language like PhP, C# or Python and JavaScript. In later posts, I will break down the steps and provide sample codes, this post only outlines the solution (note that no solution is 100% bullet proof, the best guard against hacking is being security conscious, keeping up to date with trends and fixing loop holes immediately). The steps are outlined below:

  1. After users are authenticated with their usernames and passwords, an encrypted token (named UserToken) is generated with expiry date/time set and returned to the client in the response header. This UserToken is unique and saved in the database along with the expiry date for the UserToken and the UserId of the user for which its meant. UserToken validity normally should not be less than 5 minutes, and not more than one hour
  2. Thereafter, for every request initiated from the client, the client must include this UserToken in the request header
  3. The server will first confirm that:
    • The UserToken is valid and active (i:e not yet expired)
    • The UserToken belongs to the user that initiated the request
  4. If these conditions are met, the UserToken validity is extended and request is processed
  5. It any of the conditions isn’t met, the server returns 401 error

Other Considerations
  1. If you do not wish to allow multiple login by the same user concurrently on different devices, in order to increase security, we may have to expire a UserToken once the user logs into another device.
  2. You may also decide to tie the userAgent to the UserToken, to ensure that only the browser that was authenticated can generate subsequent requests.

Logo Design for Fashion Bags Store

MWoB is a fashion bags store in Nigeria. This logo concept was created using deep Turquoise as the primary colour.