CSS only solution to sticky problems (position : sticky)

Sticky position

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

These elements will behave just like a relatively positioned element until the viewport scrolls such that the element would be less than a specified position from the top. Then, it will be fixed to the specified position from the top until the viewport is scrolled back passed this threshold.

Sticky positioning is commonly used for the headings, navigation and well almost anything.

How we have been implementing sticky element?

Developers have been implementing sticky elements using a variation of techniques. All the implementations I have see in the wild so far are jQuery based.

For example:

These techniques involves CSS and JavaScript. Where CSS is used to style the initial rendering position and jQuery JavaScript is used to alter the position as user interact with the page.

When I worked on BBC iWonder: Interactive Guides we took a different approach and implemented sticky position ourselves using native JavaScript. This is because implementing sticky element is simple. We needed to cover a wide ranges of devices and browsers existing solutions does not cover all the edge case issues sometimes found on native browsers on devices.

The Sticky future

Developers are dependent on browser capabilities provided by vendors. This is where things are improving as of writing the W3C CSS3 Position Spec are being implemented by browser vendors. At present less then 9% of browsers have implemented this feature.

How to implement sticky elements using CSS only?

In near future developers would not need JavaScript and all can be done using CSS.

For example:
#one { position: sticky; top: 100px; }

This will cause element to behave just like a relatively positioned element until the viewport scrolls such that the element would be less than 100px from the top. Then, it will be fixed to 100px from the top until the viewport is scrolled back passed this threshold.

You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

I do not believe we can completely remove JavaScript any out of the solution. For example in scenarios where the position is unknown, we’ll still need JavaScript to compute dynamic position.

Until all major browsers vendors have implemented the support for position:sticky developers will need to use a Polyfill or roll their own version.

Create a WordPress Administrator user account using SQL

I have worked to restore a WordPress site from backup. Having looked at the database, I do not have access administrator access, so I have decided to write-up SQL script  to create a WordPress Administrator user account using SQL.

I know  probably a lot of other people have documented this. I am going to post it here so that I can find this when I need this in future…

Scaling WordPress (ProductiveMuslim.com)

Almost two years ago, I re-joined the ProductiveMuslim Team as WordPress Developer (Volunteer). I say re-joined because I did get involved with the project for a very limited period during my university years.

Over the last two years, I have seen the number of unique visitors to ProductiveMuslim go from 20k/month to 90k/month average.

Scaling WordPress (ProductiveMuslim.com) - Audience Overview
Scaling WordPress (ProductiveMuslim.com) – Audience Overview

The challenge of Scaling WordPress

One of the many challenges a developer face is scaling the app to support the growing business. ProductiveMuslim is no exception to this.

Since 2011 we have migrated from one hosting company to another. Brother Raneez who has been part of the team a lot longer than me, reminded the migration saga on twitter recently.

ProductiveMuslim.com outgrown servers capacity very quickly, which lead to site going down at times. At times there were certain plugins (I am looking at you redirection plugin) been responsible for generating extra loads on the server. Sometimes servers just could not cope with the demand.

Each time we migrated, we considered all options available to us. Like most organisations we struggled to find a hosting solution that has track record of supporting and scaling WordPress platform other than WordPress.com. Like many startup ProductiveMuslim also needed to think about the cost of hosting.

Unexpected Migration

I have been a developer for over 15 years now, and never had to touch any production servers. While I almost always developed against developer sandbox optimised for development use. I always had skilled sysadmins do their magic on production servers for me.

When I thought of resolving this scaling issue I thought I would make attempt to solve the scaling problem myself.  I proposed to @AbuProductive to try DigitalOcean. This was the first time I had to learn the black art of sysadmins to manage production servers. Having worked with sandbox meant I was already experienced in managing servers. So I created a test server for testing new features.

About month into using the new test server, the live site went down. This was result of an DDOS attack via vulnerability found in our theme. The theme was bundled with a vulnerable version of TimThumb image resizing script (more on the TimThumb fiasco). It was not easy to recover simply by restarting the server (as we used to do).

Pressure to get the site live quickly meant test server  was no longer a test server. I  configured it into a production server, and site was live soon after. We had few hiccups but managed to get it going.

Being able to see through entire month of Ramadan 2013 (July 2013) with over 135k of unique visitors was evident of incidental success. By no means it was end of the scaling problem. We still had occasional hiccups  with server I could not figure out the root cause of the issue.

Fact of the matter is ProductiveMuslim is growing so fast that it’s now become extremely challenging for volunteer like myself to maintain it. It’s time for another migration.

Rise of Fully Managed WordPress hosting

While we at ProductiveMuslim were struggling with servers, there was another interesting things was happening on the other side of atlantic. A new breed of Fully Managed WordPress Hosting companies have been emerging. Two such companies are WP Engine and Synthesis.

Mid December 2013 we signed up to WP Engine and completed migration on 1st January 2014.

Watch out for the next post for my experience of migrating to WP Engine.

How strange and foolish is Insaan

“How strange and foolish is Insaan. He loses his health in gaining wealth. Then to regain health he wastes his wealth. He ruins his present while worrying about his future, but weeps in the future by recalling his past. He lives as though death shall never come to him, but he dies in a way as if he were never born.” – Ali ibn Abu Talib

33 Useful WordPress Plugins Released In The Last Three Months

33 Useful WordPress Plugins Released In The Last Three Months

There is a huge sea of WordPress plugins that released almost every hour throughout the world but only a few are actually useful and give something new besides what other existing plugins are offering. From these few plugins that are new and useful that released in the last three months I hope will make your WordPress experience better and easier.

via Useful WordPress Plugins Released In The Last Three Months.