Shash7's blog

Seems like I keep getting more inquiries on picking programming as a career choice from the young'uns as I get older.

The most common question I have heard is "Are the prospects good for IT right now?". Now I would like to cringe and show the other person my middle finger but being well versed in the arts of social jiu jitsu I hold my firm as I tell them(usually) why would they even ask me that if its their passion.

But I digress. Lets move on to the mudda.

Pros of being a programmer

Pretty sweet salary. Can live off comfortably even while working part time.

You can ideally find work anywhere in the world if you're good enough.

The world is your digital oyster! Hack around IOT stuff, make a webapp to plan your schedule. Having an in-depth technical knowledge about IT stuff helps a lot nowadays.

Much more easier to become a programmer. Tons of (free)resources are available online.

Cons of being a programmer

Its unhealthy. Sitting in front of a computer every day for the rest of your life will eventually fuck up your back/arms/eyes etc.

The community which is friendly, is too PC. Make of that what you will.

Not a lot of good rolemodels in the industry.

You will need to invest a lot of time on a semi-regular basis just to catch up with the new stuff being created by the community.

Note: All this won't apply if you don't like programming.

function(comments) { comments.map(function(comment) { console.log(comment); }); }

If the code above is enough to send you running for the hills, programming is a bad career choice.

Lets talk about wordpress

Wordpress is a pain to develop for. The looping mechanism sucks, most template functions output html and there seems to be no consistency in naming functions.

This is where the broken glass theory shines. A lot of design decisions taken in developing PHP early on were complete crap not to mention the inconsisties in naming conventions. This design philosophy somewhat carried over onto wordpress.

Wordpress sucks, PHP sucks.

Now that we have got that out of our way, lets talk about making websites in wordpress.

After working for over six months at True, I have come up with a plan on making better websites with wordpress

Don't use the default archive pages. Use a custom wp_query()

Use ACF. Worth every cent.

Use BackupBuddy for deployments

Make a new html template for every page. Namespace your page specific css with the classname generated by wordpress inside the body tage.

For advanced functionalities, use a custom post type. If you want a archive page, just make a new template and run a custom loop instead of relying on the default loop.

Based on these guidelines, I created a custom starter theme based on the _s theme.

If you haven't tried out browserstack for browser testing, you're missing out! They have improved by leaps and bounds since I first started using them. The interface is extremely smooth and the emulation devices are pretty snappy too.

Its been a long time since I've blogged. I went to New Zealand during New Year's, visited Wilson's Prom during the summer and overall had a blast during the summer. Its actually feels sad that this will probably the last heat spell of the summer.

I am not a big fan of cold weather. This could be because I come from a place where the average daytime temperature is 40+

Which is a shame because nine out of twelve months, Melbourne is pretty friggin cold.

Floating in the bay at Mordialloc I calculated how many could I enjoy like this. Two more weekends this summer plus around six on an average every summer. I reckon I'll live atleast to 50 and total comes out to 180.

The way we were

I've made some major changes to this blog

Changed fonts to Karla.

Added photoset support via https://github.com/stylehatch/photoset-grid

Modified the particle effect and added a light blue overlay on top of the blog.

Made photoset posts extra wide on mobile and made the overall width of the blog to 82% for mobile devices.

Other minor changes.

Photoset is a great way to set images in tumblr. Just drag the images and they will adjust in a grid layout. Right now, I am posting old photos from my previous trips just because they look so fantastic on my blog.

MYOB sucks. Their database design is the worst, using Y and N in some places to denote boolean values. They also don't have a sql database. It looks like some sort of a no-sql database cobbered together under 12 hours.

Also, they don't support joins. Understandable as they don't implement an sql database BUT the api they expose mimics an sql database. This leads to all sorts of inconsistencies and fuckups.

In the next couple of weeks lightgrid will go through a massive overhaul. There are some basic things lightgrid is missing which are present in other frameworks. Right now it seems like all frontend frameworks are comparing themselves against bootstrap.

Now I've never been a fan of bootstrap. It is clunky, bloated and packed with unnecessary styles. That being said, we made a decision at the agency I work at to remove all the unecessary includes from bootstrap. This is actually a good solution as the grid system bundled along with it is one of the best but the extra styles are unnecessary and add a lot of bloat.

Back to lightgrid, these are the things to implement now:

Make the grid system like bootstrap's but remove the container requirement and use calc() for the gutter instead of padding

Use the newer normalize.css and hook up more configurable variables to it.

Research into a flexbox based grid system(won't be released in the earliest 3.x.x release though)

Add better media queries(again, based on bootstrap's breakpoints)

Almost forgot I joined True Agency in late august.

Have you tried IFTTT?

Did you know they have a pretty kickass API called the maker channel?

For monashjobs, we wired up the API with facebook and twitter so whenever someone posts a job listing, it automatically created a new facebook post and tweet based on the job posting.

Now how awesome is that!

I participated in Unihack 2015 and made this.

We are still expanding upon it but the basic idea is to make every image on the internet taggable, a bit like how facebook does it

Currently it only supports images hosted on imgur but we are going to make changes to it(once I get some time heh)

At my university campus there are loads of free food events happening around. Unfortunately, I tend to miss most of them because of my lecture’s timings.

I always wondered how many are happening in a particular day because there are so many groups and societies who organize them. Unfortunately there is no central location where these events are posted.

So over the last week I created a nodejs app which collects the last 20 posts of these groups and pages using the facebook api and searches for keywords like ‘free’, ‘bbq’, ‘pizza’, ‘beer’, etc.

Here’s the tech behind it.

The architecture is a bit different behind this compared to my other side projects. The frontend is a pure html page on bitballoon and it gets the data via a rest api exposed by my nodejs server hosted on openshift.

First, it gets the posts and scans them for relevant keywords. Then it assigns a score of 0.5 to every keyword. Keywords like ‘free’ get a score of 1.

Then all the scores are added up and a a decreasing function is used. So 0.5 + 0.5 + 0.5 is not 1.5 but rather 1.0022

This is to combat keyword stuffing. It works surprisingly well too. The average score almost flatlines at about 1.6

Then I filter out posts who’s score is below 1. Then finally, I run another function to extract the time and location from the text and then all that data is saved in the mongodb database.

Turns out, there is a lot of room for improvement.

Strike 1

The first implementation was not bad. It did work but in the process, it caught a lot of unwanted junk.

The best analogy I can give is that of a fishing ship which catches sardines but also catches a lot of other non-edible fishes. Only problem being that sardines constitute less than 50% of the catch.

Take an example of this sample post:

There is FREE ENTRY for any University student to the Blue Diamond Stakes today. Pre-drinks start at the Racecourse Hotel at 11:30 where you can drown all of your post-Beach Day blues..

It matched ‘free’ and ‘drinks’. Bam, strike #1

Strike 2

There was clearly a need to refine the algorithm. The scoring system needed a revamp.

So we have two scores. One is the score we get from the parser and the other one is the compare score which is a constant(1)

So : score > compare score (Which means the post is about free food)

I realized the compare score needs to be refined. Having a static value of 1 or even 1.5 doesn't change anything. Using our previous analogy, it just makes our net smaller or larger. We need to refine our net.

This time I observed there is correlation between the length of post and the its actual score. So I made the compare score a dynamic value.

Now the formula to compute the compare score is like this:

var quantifier = 1;

quantifier + ((quantifier / 16) * postLength / 64);

This bring a value of slightly greater than 1 if the length of the post is short but brings up a bigger value(slightly exponential) if the post length is larger.

After putting this in production, it works like a charm. Now it filters out most of the useless posts.

An interesting UX problem I came across today. Wondering why I never recognized it.

Alright so today's post starts with an introduction to getting started with openshift, so that I won't forget how to set it up in the future.

Install ruby > install rhc > set git > create a new app via rhc or the openshift online console > If you haven't already - setup rhc > Try git clone > if it doesn't work - rhc sshkey (to generate new keys and upload them automatically) | Or - re-install git and do everything again.

Depending on your current setup, it should take from 10 minutes to 2 days of brain numbing madness.

There was a guy in the beginning. Let’s call him Herb.

Herb is your typical introverted geek who loves to code. He becomes shy in front of strangers and especially girls.

So place this guy in a testosterone filled environment and he goes back in his shell. And that is what exactly happened with him when he found himself in a nightclub on Friday night.

Enter Mark. This guy was a bit short and quite honestly, had nothing special about him. But oh boy was this guy loaded with pizzazz. This guy comes in an hour late but when he comes, holy shit do you see the ladies swooning on him.

And so Mark and Herb were talking in a quiet corner of the club when a sexy Russian walks past by. Mark apparently knows her and he introduces her to Herb. After she walks by, he asks Mark how did he know her to which he replies he doesn't know her.

“Are you serious”

“Yeah man I have never seen her in my life”

“So why did she talk to you like you know her”

“Because I whispered to her ‘You look really sexy, have you ever been in an orgy?”

At this point, Herb had a wild crazy expression of a person who had just discovered water.

Sometimes when designing new things, I need to go back and retrospect my past work.

That is when I came across this

And that is when I remembered I stopped blogging.

This calls for a new design. But this is more of a revitalization of the old blog theme.

The new redesign takes elements from the old theme and removes unnecessary clutter. The header font is still montserrat mainly because it complements georgia Merriweather so beautifully.

The most drastic yet minimal change would be the color scheme. In the past, I used to write down hex codes on a pad. Now after making colorbook, it has become an indispensable tool for designing color schemes. Also, since I started using LESS, managing different color codes and other random variables has become much easier.

Another tool I used is gulpjs. My whole workflow is automated to minify and automatically inline css inside html. 

The result : It is better than the old one while still retaining its style and simplicity.

Last night, I was at a pub with a good friend of mine. We were discussing what is the next best thing in tech. In a semi-drunken stupor, I replied that we are not going through a revolution with tech, only evolution.

Sounds really cheesy but here is what I have observed.

Mobile phones have been around since the 1980s. They aren't going to go away anytime soon. But the way we interact with the device has changed. Earlier, we had hard physical buttons which has been replaced by touchscreens.

Maybe in the future we will have holograms and voice only interaction for some devices. But the medium will stay.

Recently, I had a hard time configuring my domain on appfog. There were two seperate problems along the way. One was properly setting up the a record along with the cname and the other was redirecting naked urls to www urls. This is how I did it.

Set up appfog

Setting up appfog is a piece of cake. Just dowload their 'af' gem and login into appfog. From there, push and update your app in the desired infrastructure.

Set up your domain

For this post, I will be using the www domain name. It doesn't matter whether your domain starts with www or non-www(usually called a canonical domain) so just decide beforehand which type of domain do you prefer.

Unlike other hosting providers, appfog doesn't provide a dns server. So you need to set up an A record and a CNAME record with your domain provider.

For the A record, add the domain in appfog's console. Like this :

See the second domain? That's mine. The third one is min too but I will explain it later on. You will be provided a default domain which is the first one in the screenshot. Add your domain and click on update.

Now see the two ip addresses next to the A record on the screenie? You need to add those as two different A records on your domain provider's console(or whatever it is called)

Next, add the CNAME record. The C in CNAME stands for canonical btw. I bought my domain from bigrock which is pretty nifty. My settings page looks like this :

Remember to NOT add the www when adding the A record. Now when adding the CNAME record, add the url next to the CNAME record in the appfog console as your CNAME value and add the www version of your url in CNAME. One last thing. I added the third domain because I couldn't redirect from my domain provider's console. So I set up the non-www url and redirected all the non-www traffic to the www-domain from my app itself.

Done? Dns propogation for A and CNAME records usually take between 1-4 hours so go outside and chill out.

Now your www-yourdomain-com will be working. That's fine but when you type yourdomain-com without the www, it won't work. That's because you need to add a 301(it means permanent) redirect from your .yourdomain-com to www-yourdomain-com There are a couple of ways to do this.

Your domain provider has a facility to redirect domains. Simply set the redirect from your domain provider's console.

If you are using apache, checkout the online guides on how to add redirects in .htaccess

Or if you are like me and hack around in nodejs, add this snippet of code before all your other routes.

app.get('*', function(req, res, next) { if (req.headers.host.slice(0, 3) != 'www') { res.redirect('http://www.' + req.headers.host + req.url, 301); } else { next(); } });

This code snippet is meant for expressjs but it can work on standard nodejs http as well. The best part about this snippet is that it will redirect all paths to the correct domain.

gulpjs is a new kind of taskrunner. It is like gruntjs but much better. The work of a taskrunner is to automate simple tasks like minifying files, compiling preprocessor css like less, etc.

This is how I started using gulpjs

gulpjs

As I said before, gulpjs is a taskrunner. It is based on streams the technicalities of which are beyond me but that means it is extremely fast. But better than this, the api of gulpjs is straightforward meaning you can get up and started within minutes.

This is how my gulpfile looks like :

var gulp = require('gulp'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); gulp.task('compress', function() { gulp.src('assets/js/*.js') .pipe(uglify()) .pipe(concat("all.js")) .pipe(gulp.dest('dist')); }); gulp.task('default', ['compress']);

Pretty simple huh? gulpjs is much easier to use and this was one of the main reasons I started using it instead of gruntjs

Getting started

First, you will need nodejs. Once installed, start npm via the command prompt and install gulpjs globally. This is because you can start calling it anywhere.

npm install -g gulp

Done? Now, add devDependencies in your package.json which should be in your project's root. For this example, I am using gulp-uglify and gulp-concat. The required task is to minify and then concat all javascript files. package.json :

{ "name": "example", "version": "0.1.0", "author": "shash7", "devDependencies" : { "gulp-uglify": ">= 0.2.0", "gulp-concat": ">= 2.1.7" } }

Now give the command 'npm install' inside the project root (where you package.json will be residing) After installing, make a file named gulpfile.js inside the project root.

// Dependencies var gulp = require('gulp'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); // The actual task. Note the pipe function gulp.task('compress', function() { gulp.src('assets/js/*.js') .pipe(uglify()) .pipe(concat("all.js")) .pipe(gulp.dest('dist')); }); // The default task gulp.task('default', ['compress']);

After adding the dependencies, you will need to create a task. I have named my task compress which is exactly what it does. gulpjs needs a task called default which will be executed when you run the file. Inside the default task, call your task inside an array. If you want, you can also bind a callback function. When everything is done, simply call gulp in your project's root

gulp