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

Okay, maybe like me, you have experienced this frustration at one time or the other: A perfectly designed website with great layout still looking out of place. Trust me, the culprit most times are just website images that do not blend with the site's primary colours. Images used in our website design are usually sourced from several places and they come with different colour themes. Injecting these pictures directly into our design automatically creates confusion in the design. So how do we resolve this? Solution In order to ensure that your images do not create confusion in the design, the images you use need to be readjusted to harmonize with the primary colour(s) of your design. There are several ways to achieve this, I'll illustrate one of the simplest approach in this post using Adobe Photoshop. Open the image in Photoshop Navigate the menu: Image - Adjustments - Photo Filter  In the Use area, select Color Select your website's primary colour in the Color Di...

Background First, I hope everyone knows that the form element in HTML is not a presentation tag but a functionality tag. I had to spell that out just so we are all clear. I've found that many web developers, me inclusive, often find ourselves entangled in usage of multiple redundant form elements on a page. Rather than clean out this clog, we simply leave it because " it after-all causes no one harm ". I was soon to to learn otherwise ... I was redesigning the interface for a legacy ASP.NET 3.5 webforms application ( only God knows how we survived the ages when this technology was the de-facto. I so much hate the tight coupling between then presentation and logic layers ). In order to jump-start the work, I quickly pasted the HTML from a previous project into the master page and updated the CSS and JavaScript references, then I copied the form tag including all the Content Placeholders from the old master page into the content area. After this, I noticed I ...

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

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