How to create a Radial Gradient in Objective-C (iOS)


I got bored of working on my PC software project today and decided to dust off my iOS / Objective-C skills again. I’ve not had too many opportunities to sharpen my Objective-C skills and I’m even learning Swift 2 at the moment.

In my PC app, I created a beautiful login screen using a radial-gradient as the background image and I thought: why not recreate something similar using Objective-C. So, I went hunting. StackOverflow and the Apple Developer site led me to the solution below.

To create the radial background, the approach I used was to create a custom UIVew class (obviously, this class extends the UIView class). To do this, from your XCode project, select “File” > “New…” > “File”

Screen Shot 2015-10-27 at 13.58.15

When prompted, select “Cocoa Touch Class” and click “Next”

Screen Shot 2015-10-27 at 13.58.33

Enter the name of your class and make sure that it extends the  UIView  class.

Screen Shot 2015-10-27 at 13.58.33

This done, place the following code in the .m file (the class implementation) for your UIView class.

Make sure to replace  OORadialGradientView  with the name of your own class.

This would give you a class that, by default, adds a radial gradient (from yellow to orange) to any view that it’s attached to. Now, this is all nice and dandy but you won’t see anything yet. To see the effects of your gradient, you need to make use of the class.

Open your storyboard and then do one of two things. Either click directly on the blank space within the default ViewController or, open the Document outline. The document outline button is at the bottom left corner of the Standard Editor. Click this icon and in the Document Outline, select the first “View” element making sure you achieve the following effect:

Screen Shot 2015-10-27 at 14.10.28

This done, move to the identity inspector on the right side of your IDE.

Screen Shot 2015-10-27 at 14.12.24

In the Custom Class field (where “UIView” is written), type in the name of your newly created class. And voila! You’re done.

You can checkout your handiwork by running the project in any simulator of your choice.

Screen Shot 2015-10-27 at 14.15.30

And when rotated in landscape mode:

Screen Shot 2015-10-27 at 14.15.43

Feel free to tweak the numerical values in your Gradient class to adjust the display and colors as you please.

I’ve added this class and would be adding quite a few more to this github project.


Using regex to strip specific html tags using JavaScript

Screen Shot 2015-10-13 at 14.44.44

A few weeks back I had to tackle a problem. I’ve been working on a set of JavaScript based eBook readers with not a few constraints involved because of the target market. One of the features I needed to implement was the ability to highlight text using various colors. Sure, this wasn’t a big deal but I had a nightmare because the output wasn’t coming out as expected.

Here’s what I was getting:

Screen Shot 2015-10-13 at 14.41.42

as opposed to this:

Screen Shot 2015-10-13 at 14.42.53

And where was the problem? In the HTML that contained the contents of the page. We have a process in-house that does some nifty stuff and converts our PDF files to HTML, thus, helping us retain paging, number of words per line and lines per page.

What this process does is not so important as its output. Here’s the html that generated the “skippy” highlights:

Screen Shot 2015-10-13 at 14.44.44

Notice how each word on the highlighted line is wrapped by a “span” tag? That’s the issue! The highlight code, in trying not to interfere with the page’s markup just picks words inside tags and wraps them with a tag and adds a custom highlight css class.

Here’s the markup that would generate the “smooth” highlight:

Screen Shot 2015-10-13 at 14.45.43

See the difference?

So, after months of ignoring the problem and reporting to management that it’s a small issue, I finally came around to fixing it and solved it with quite a few lines of CoffeeScript code:

Here’s the JavaScript equivalent:

And voila! My headache was solved! Looks easy but I had to scour StackOverflow for this and I just thought I’d save myself the headache of looking for this all over again at a later time.

Generating Amazon S3 file upload Policy in Node.js


I recently (by recently, I mean two days ago) had to upload files – images to be precise – to a newly created Amazon S3 bucket. After going through a few documents online and following instructions (at least, I think I did), I had my environment (MEAN – MongoDb, Express, AngularJS and Node.js) setup for the upload.

On trying the upload, Amazon returned an error telling me the policy I was using was not the same as that which they generated. Apparently, I did something wrong somewhere so I sought to right my wrong. I found a valuable script on github (though for the life of me, I can’t seem to remember the name of the project) and here’s what I distilled it down to:

To use this, I just issue a  GET  request of the form:  http://localhost:3000/s3_policy?subFolder=folder_name&mimeType=image/png

Creating Base64 Encoded String from an Image in Node.js


I’ve been writing a lot of MEAN (MongoDb, Express, AngularJS and Express) code lately and the latest in the series of hurdles I’ve been able to cross of recent has been generating the Base64 encoded version of an image file.

I had just added a new endpoint to an API I was working on and it included photos of users. For the web app, I was happy to just get the url of the photo and have the browser request it when needed but the API consumers (Android and iOS mobile devs) thought differently. The wanted to have the image as a base64 encoded string and so I reached out to Google.

Using this StackOverflow question and answer as my base, this is the function I eventually arrived at:

It should be noted that there are a few differences between my solution and that on StackOverflow.

  • First, I’ve created a function which expects a callback.
  • Secondly, line 6 makes use of  http.request  instead of  http.createClient  and  client.request . This is because  http.createClient  has been deprecated in my version of Express (4.0.0)

Disabling Automatic App Updates in OSX Yosemite


It’s been a while since I blogged and I’m happy to be back here. I’ve been composing the start of my “next post” for a couple of weeks now but I never thought it would be something as trivial as this. Ever since I got my Macbook, I’ve not been able to get my internet modem to work (I need to go to the nearest support centre for my Service provider, soon) and so I’ve been using the data on my LG smartphone.

I’m a pretty heavy data user (about 25gb a month in bandwidth consumption) and so I wasn’t surprised that I had to resubscribe my 2GB mobile data plan a few times over during the month of June.

Yesterday, however, something surprising (at the time) happened. I got a text from my network carrier that I had 200MB of data left. My macbook was connected to my phone’s hotspot but I was doing nothing on the internet, I was just going through some code trying to catch a bug. Less than 5 minutes after the first SMS, I got three more telling me I had 100MB then 10MB left and the last one told me I’d exhausted the data available on my plan.

At first, I thought the carrier must be nuts, but lo and behold, I noticed that my Launchpad icon had a bar underneath it that was about half full and then it hit me! The OS was installing updates behind my back (or in this case, right under my nose).

I opened up app store and went to the updates page and sure enough, I saw there there were updates available for the OS, XCode, iMovie and Parallels. XCode and iMovie had downloaded almost a third of the available size (about 600MB each). That’s when I realised that I had to turn off automatic updates.

Long story short, I followed advice provided here and in case it’s no longer available, I’ve taken the liberty of posting it here too.

It’s for OS X Mavericks but it worked for me too.

To change the App Store’s settings, head to System Preferences > App Store. Here, you’ll see a number of app-related options.


While many users will still want the App Store to automatically check for new updates, and perhaps even download them in the background, users who want to determine when these updates are installed will want to uncheck the box next to “Install app updates.”

For users who want to keep automatic updates enabled, the Mac App Store features a new list that shows all updates installed in the last 30 days. Along with its iOS 7 companion, this list is the easiest way to keep track of which apps are getting updated on your Mac. Even if you disable automatic app updates, this list will remain in place, providing a handy history of your recent updates.

Configuring Apache Virtual Hosts on OSX Yosemite


Having recently made the switch to OSX, I had some difficulties accessing my projects (which I created using my Windows PC). My dev workspace is on my Dropbox, so having them on the Mac was no problem. I’d tried to setup Apache (which came installed with OSX Yosemite) but came unstuck so I ditched the process.

Then I stumbled on this post that showed me how to configure Virtual Hosts using XAMPP on OSX. Long story short, it saved my life! Literally. And so I don’t forget how to do this, and also for others out there, making the transition (however temporal) from Windows to OSX, I’ve reblogged about 95% of the post

Enable VirtualHosts

The first thing you’ll need to do is open the file /Applications/XAMPP/xamppfiles/etc/httpd.conf  in your favourite text editor. Look for the following lines:

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

Create your VirtualHosts

Open the file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf . Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

This step is necessary to ensure that http://localhost still points at XAMPP’s htdocs  directory once we’ve created our custom VirtualHosts. Personally I don’t use the htdocs directory a lot, but occasionally it’s useful to have somewhere to perform quick tests.

Now you are ready to create your own VirtualHosts. After the default localhost that you just created, add:

In the above example you should replace “mysite.local” with your own hostname. This can be anything you wish, but make sure you choose a hostname that won’t conflict with a real domain name. Using a .local extension makes it obvious that the site is hosted locally rather than on a public web server.

The path to your website can point at any folder in your OS X user directory. I store most of my sites inside of Dropbox so that I can access them on both my home and work machines. If your path includes spaces, make sure you enclose it in quotes, like in my example.

Edit your hosts file

Once you’ve saved your httpd.conf  and httpd-vhosts.conf  files, the next step is to edit your OS X hosts file so it knows how to handle your new ServerName. The hosts file is used by OS X to map hostnames to IP addresses. In this case we want to map your new ServerName to the IP address, which is your localhost.

Fire up a Terminal instance, and at the prompt type the following command:

Enter your OS X password when prompted, and the hosts file will be opened in the nano text editor. You’ll see that the hosts file already contains some default hostname mappings (e.g. “ localhost”). Use your keyboard’s arrow keys to navigate to the bottom of the file and add your own mapping:

Save the host file using the key combo control+o, and pressing return when prompted to choose the filename. Close the file using control+x.

Restart Apache

So that your changes take effect, restart Apache. This can be done using XAMPP Control, which is found at /Applications/XAMPP/XAMPP .

Point your browser at http://mysite.local (or whatever ServerName you chose) and you should see your website. However, there’s a chance that instead you’ll be faced with a…

403 error

Because Apache runs as the ‘nobody’ user by default, it may not have adequate permission to browse your OS X user directory or some of its subdirectories, in which case you’ll see a 403 ‘access forbidden’ error when you try and view your development site. Similarly, you may find that although you can view your dev site, PHP throws errors when you attempt to write files or make directories on the filesystem.

To fix this you can configure Apache to run as your OS X user. Open /Applications/XAMPP/xamppfiles/etc/httpd.conf  and look for the following lines:

Change User to your OS X username, and save the file:

Restart Apache and you should now be able to navigate your site without any issues, including manipulating files and folders using PHP.

If you have problems viewing the XAMPP splash pages at http://localhost  now that Apache is running as your user (e.g. nothing happens when you try to set the language), then you’ll need to give your user read/write privileges on the file /Applications/XAMPP/xamppfiles/htdocs/xampp/lang.tmp .

Making the change I’ve described above carries certain security risks, and if you choose to run Apache as your OS X user then you’ll need to be quite certain that XAMPP is not accessible from outside your local network. From what I understand, XAMPP’s built in security features ensure that this is the case out-of-the-box, and it is straightforward to beef up security for additional piece of mind.

If you’re not convinced that it’s safe to let Apache run as your OS X user, another option is to change the permissions of your dev directories so that the ‘nobody’ or ‘_www’ user can read/write to them.I suspect that I would quickly tire of setting folder permissions, which is why I have opted to take the path of least resistance!

Installing SASS and Using SCSS Watcher for PHPStorm on OSX Yosemite


My OSX adventure continued today. I’d had no problems installing PHPStorm on my MacBook Air and after I installed Dropbox, all of my applications (hosted on Dropbox and created on a Windows machine) became available on my Mac.

I cloned a working project (Node.js and AngularJS) and wanted to modify it for a proof of concept application. The problem came when I had to modify the .scss  files in the project and have them watched so that they are recompiled whenever a change is made to any of them. PHPStorm’s SASS file watcher had worked brilliantly in my Windows environment but because I cloned an existing project, the settings for that project were also transferred to the new project (including the windows based file watchers).

Frustrated, I shutdown the laptop until I disembarked from the plane and fired it up again after two hours of waiting for my connecting flight. I scoured the web for a solution and while this question pointed me in the right way, my problem wasn’t solved.

I installed sass as the instructions on the website indicated but when I tried to test my installation using sass -v  , I got this error:

 Here’s how I solved the problem. Just two quick steps:

  • Install Rails. I did this using:  sudo gem install rails
  • Re-install Sass, using  sudo gem install sass

When I re-ran  sass -v , the output was correct.

I then restarted PHPStorm and tried to configure the SCSS File watcher and it worked like a breeze.