Search Engine Optimization 2018 round 1

Search Engine Optimiwation 2018 round 1 preview

While browsing developer portfolios for inspiration, I ran into a post by Rafael Caferati (link below). My interest in SEO runs nowhere as deep as his, yet anyone in this business should know the basics. In the 2000s I ran a "flash blog" on this domain which was generating around 500 visits a day at its peak.

My Blogging days went down the drain with the demise of Flash, and my Google Ranking plummeted along with it. Googling "sakri" would lead a user to my website around page 8. To rectify this grave injustice I:

All this took some effort, but it's started to pay off :

I'm actually doing better on Bing and Duck Duck Go than google :D

The current goal is to reclaim my throne for "sakri" from the wikipedia article (Sakri : a census town in the Dhule District of India), and actually increase visibility to the point where I no longer have to search for projects (yes, a man can dream ;) )

As promised here's the article that sparked this :

Rafael Caferatis on SEO

Discuss this article on Reddit (I'll get notified) :

Fluffy Morphing Cloud on Codepen

fluffy morphing cloud pen preview

I've been kicking this idea around, and wanted to generate some fluffy clouds for an upcoming game. The idea is to crete two random "cloud" shapes, then morph between them to simulate a "cartoonish" fluffy cloud with the illusion of "real" cloud behaviour.

The cloud shapes are generated by plotting points along an egg shape, using a random radius. This results in random enough shapes, without having to worry about intersecting lines. To somewhat flatten my clouds, I used an egg shape instead of a plain circle.

Here's a pen explaining the shape generation:

Random cloud shape generator on Codepen

random circular shape preview random egg shape preview

The "fluff" are just circles placed along a grid over the cloud shape. Cells which are inside the cloud shapes path are stored. The final animation creates two such grids, and interpolates between the two. When the morph is compplete, a new "target" cloud is generated.

check it out (don't hesitate to click the like button ;) )

Fluffy Morphing CLoud on Codepen

Update! I've also used this on my 404 page in 404 lines of code :)

Discuss this article on Reddit (I'll get notified) : Stats Module!

stats module celebration preview

I needed an excuse to add some data visualization widgets to the site (because I'd like such projects). The spur of the moment solution was an app showing useless information about a visitors "visit stats".

stats module celebration preview

This evolved into a tongue in cheek effort to persuade increased interaction. The data viz widgets are all built from scratch with Html5 Canvas, are lightweight and performant. A pie chart shows 'cards visit' data, a line chart shows 'clicks history' and a list of progress bars shows 'badges' or 'achievements' : upon reaching 100% the user is treated to a 'pixel confetti' animation.

For such a small project, I chose to go with Vue.js

The "pixel guy avatar" changes his expression as the total percentage increases, also the "stats module" button prompts different messages during and after celebrations.

Visit the standalone version here (with 'cheat buttons') :

Stats Module Standalone

Visit my 'home app' for the full experience ;) home page

See the source code on github :

Discuss this article on Reddit (I'll get notified) : 2018 is live!

sakri dot net is live

As the saying goes : "busy developers have crap portfolios". This rang true for the first 18 years of this website. It's been a biannual ritual, I brainstorm, get amped up, start coding, inevitably find myself drowning in work and eventually give up. This time, after a long 4 year project, I consciously took out time to build something I should be happy with for a few years to come.

That was the goal anyway, a personal website is like an oil painting that never dries, because there's always something that can be improved. With the mad circus that is the daily changing world of Javascript, it's a hair pulling exercise, fortunately I have no hair.

The starting point was : "show the world what I'm good at and actually enjoy coding". That's my one floor elevator pitch. At conferences, "inspirational speakers" love to "reveal" the big secret : "you only get the kind of work that you have already done". I want to build components, data visualizations and interactive features using the Html5 Canvas and SVG. I'm happy to work on projects with your regular features, but ideally interesting visuals, animations and interactions should play a major role.

Another starting point was to make a website that isn't yet another parallax scrollers paradise. I've had this comment several times : "it's neat and unique, but why don't you just go for a regular site with some scrolling effects?". Because I'm bored of those. In the old wild wild west spaghetti days of Flash, things were unusable, killed your cpu, confused and frustrated users, but designers and developers had the freedom to experiment, and it wasn't boring. I'd love for the good parts of that to return.

I've put a lot of effort into this, I hope you like it.

For a more indepth article on the site, please click : write up

If you have any feedback, questions : Please comment on Reddit (I'll get notified) :