Diary of A Developer

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 t...

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 syste...

Background HTTP Request and Response Header are very cool components of the web. They allow for transmission of some intricate information concerning how the a particular request should be handled. Sometimes however, developers "abuse" the system and hijack this feature for transmitting small amounts of data to and from the webserver. I am one of these system abusers, lol. It just happens that sometimes, our software solutions give us little choice than to do some awkward things. Before you start castigating yourself, its not really a bad practice, so far you only send little amount of text data. Issue Most of my web apps now run on Javascript front-ends, and this comes with its own challenges. I developed a software that sends data to the server to generate a PDF file and the server responds with the filename of the file generated for the client to download. As you could rightly guess, things worked quite perfectly until I migrated to production. The frontend now res...

Background Whether it is shortage of required skills, platform unavailability or even laziness, anything could make you want to cut some corners in development. And please get me right, by cutting corners I do not mean writing code that is cumbersome and difficult to maintain or leaving out important possible outcomes to favour low turnaround times. There's this popular quote that drives this best practice home: Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live. Issue We had this project I was working on with a team. Its kind of like a payment aggregator, functioning in similar manner as your regular payment gateways like Paypal, UPL, Interswitch. You can find the project here ( a1pay.net ). I was the front-end guy, which meant that I was basically responsible for presentation. However, in a twist of events, I was also saddled with handling the POST request from our 3rd party payment gateways, consume an alrea...

Small Feature, Excellent Idea Collapsible Widgets are a simple feature that can easily make a site or application exciting. It could just be the simple thing that adds that wow effect to your project. You can hardly find any of my work where this isn't implemented. All these projects; asset.bz , a1school.net , buysellairtime.com and many others proudly fly the banners of this wonderful feature. Collapsible widgets also provide an avenue for front-end flexibility and space management Implementation I won't bore you with any more rants, lets get down to how you can get this implemented. First you add two html elements, an header and a div  like we have below <div class="panel"> <header class="panel-heading"> Widget Header Text </header> <div class="panel-body"> </div> </div> In order to make things a little more exciting, you may also want to include the following...

Introduction Datatables from datatables.net are so lovely, especially with the responsive extension that you can enable by including dataTables.responsive.js in your project. I particularly find fascinating the combination of search / filtering, pagination, ordering and exporting features which are available right 'out-of-the-box'. Issue Well, as great as datatables are, you will find it difficult if not impossible to develop a system with acceptable user-experience using bare-bone datatables implementation. In my own case, because I was porting my superb Asset and Inventory Management Application found at asset.bz to the mobile platforms using PhoneGap, I needed the user to be able to tap on any record in order to perform some pre-define operations like editing, approvals etc. Solution Apparently, the solution isn't far fetched. The sample code below would do the job nicely: // HTMLTableData is your array of records to be displayed in the data table ...

Background: datatables.js is a very awesome tool that enables data to be presented in tabular format (ASP.Net developers prefer to call this grid). Its currently the best free data-to-table tool available (my personal opinion). Since I ran into it, I immediately got stuck and cannot but use it in each of my projects. Issue: There are several issues with datatables.js. Many of them however stem from knowledge gap, because the tool is quite robust, it would take a long time to exhaust the documentation and fully learn the plugin. In my own case, I wanted to add custom controls to each datatable row. These three controls would be for ordering the row and editing the record. Solution: We would need images to use as these controls. I normally get images online sometimes. Although, I find it easier to create simple icons using CorelDraw. After fetching your data, simply loop through each item to add the html tag for your control image to the element. Finally, render the datatabl...

Background: For most PHP developers, the technique of posting data from one page to a different page is not a difficult thing. In fact, in PHP development, this technique is learnt by beginners. In ASP.Net however, it doesn't work the same way. The ASP.Net platform is designed to implicitly post data to itself and developers need not manually trap posted data themselves. Issue: This simplistic development approach implemented by ASP.Net poses a problem where one needs to for one reason or the other, post to the ASP.Net page from another ASP.Net page, a PHP page, from JavaScript or even Python, ruby, and any other server side platform you can imagine. In my own case, I was using dropzone.js to implement drag-and-drop file upload for an application. I would have to post to a server side platform using JavaScript. For some reasons, I didn't want to use PHP, even though PHP would work seamlessly. The platform available for me was ASP.Net, but remember; ASP.Net doesn't...

Background If you ever wish to add WYSIWYG functionality to your web project, summernote.js is probably your best bet! It will convert your textarea control to a fully functional WYSIWYG control with ability to gain access to the content of the control in HTML format. Implementation To change a simple textarea control to a WYSIWYG control, $( '#summernote' ).summernote(); To fetch the HTML content of the control: var sHTML = $( '.summernote' ).code(); Wishing you all the best as you try this out.

Background Today I had a set if divs I created using AngularJs ng-repeat. My challenge was that there was a button in each div that triggered a modal pop-up when clicked. The content of the modal was supposed to be updated from the corresponding element that generated the particular button that was clicked. Hmm... Solution Taking advantage of the ng-click attribute and $index, I added this to the button element ng-click="SetSelected($index)" $index is a powerful reference that allows us to pass the index of the element that generated the current control to a function.  That way, I was able to fetch the correct element from the original array of elements that generated the set of controls!  Isn't Angular sweet?

Background I've always had issues working with diverse date formats using javascript till when recently I found this great resource at www.datejs.com . It was a welcome relief as it could parse almost all the date formats I wanted to parse. Today, however, I ran into a snag! The .isAfter() function stated in the datejs documentation wasn't just working for me. I kept getting error "method not found". Solution After lots of trial and research, I found out that the link posted on the datejs website most recent build is actually not the most recent build and several methods were not available in that. In case you have a similar issue, please download the most recent build from http://www.datejs.com/build/date.js and get your headache alleviated totally! It worked for me.

Background: I had this clever multiselect control for listing items that the user could select many entries from at any given time. I even made it look cool by implementing the Bootstrap Multiselect Plugin by David Stutz. However, when it was time to fetch the values of selected elements, I thought of looping through the elements to pull their values into an array. This would be inefficient and consume a lot of overhead! Solution: Turns out simply calling the javascript val() function on a multiselect returns an array of all values selected! e.g $('#selProgrammes').val() could return ["1", "2", "4", "6"] for example. Isn't it cool!

Background I used to know the grep command in Linux as a powerful file searching utility. Its so powerful that it even helps search the content of files. I had a challenge today, I needed to populate a select control with the ordinals of certain numbers, precisely the number of floors in a building. Because I already have the number of floors in a public variable which is an array object, I do not wish to reach out to the server to fetch this value again, in order to save execution time; especially for end users with slower links. Solution $scope.Hostels is my public array object and it has the following structure: { "ID": 1, "ClientiD": 2, "HostelName": "sample string 3", "HostelLocationID": 4, "Description": "sample string 5", "Gender": "sample string 6", "Cordinate": "sample string 7", "Istertiary": true, "IsSecondary": true, ...