Fear of failure is a ticket to mediocrity. If you’re not failing from time to time, you’re not pushing yourself. And if you’re not pushing yourself, you’re coasting. – Eric Zorn
In February I wrote a blog on Open Source and WordPress theme and decided that I will submit a theme to WordPress.org. And now I am back with another blog on my WordPress theme Kafal. It’s a pleasure to inform you all the readers that my theme passed the review process and accepted in the WordPress.org repository. Theme ‘Kafal‘ is now live and have been downloaded 1500+ times and currently active on 200+ blogs/websites. I am that much happy about it that every day at least 5 times I check the theme details in WP.org.
It was all started in February when I don’t have much work besides my academics. At that time I was craving for the work. Then after a lot of research, I published the blog on Open Source and making a theme. At that time I was already a member of WordPress slack. I think slack is the best place to start your journey. In this blog, I’m going to share my experience, what I’ve learned during this period.
I started my HTML career with
<!Doctype html>, which means started with HTML5 but never understand what the difference between the HTML 4 and HTML5. In this theme, I’ve used new semantic elements from HTML5 like
WordPress provides many APIs and I’ve used many of them. This time what was new for me is the Theme Customization API. Added live preview option for custom options like ‘Header Color’ and ‘Blog Title & Tagline’ etc. That’s a cool API for designing good UX for theme users.
Previously while developing a theme I’ve never bothered on using escaping and sanitizing functions. If you check my first theme ‘Makes me Wonder’ that I’ve created in my second year, I’ve never used any escaping function. Or if I’ve used it then it must be a code that I’ve copied from SO or codex. But now whenever a code that involves DB or User inputs, the first thing that comes to my mind is escaping and sanitization of the data. Writing a poor code with less security can lead to an XSS attack to the site.
I have learnt much more things about the coding style, that I can’t recall at this time but I will surely share them in future.
Theme Customization API and Bootswatch themes
Created theme repository named ‘Solitude‘ and started working on it. I wanted it to be like the best of its type. And started designing the theme. I am a great fan of Bootswatch, as they provide cool themes for the Bootstrap. I wanted to create a theme that you can change the theme variant with these Bootswatch themes. So I downloaded different Bootswatch themes and integrated them into the theme with the Theme Customization API. You can change your bootstrap theme with the different variant of Bootstrap. But due to lack of design skills and other works, I stopped working on the theme ‘Solitude’. This theme has more options but it lags in design and has a poor coding style. I will work in this theme maybe in future.
Using _s (underscores)
After ‘Solitude’ it was a leap of 2 months when I started again working on the theme. This time with more enthusiasm, more energy. But when it comes to writing the same code again just for scaffolding it’s kind of a heavy task for me. So now this time what I did was, I forked ‘_s(underscores)‘ the starter theme created by Automattic for hacking. Created my own branch and started hacking the theme.
By the way, I’ll not prefer using _s if you are just starting out in WordPress and don’t know the basics.
Using basic testing methods & build tools
I wrote a blog on Integrating Travis CI with WordPress Theme. Using build tools and CI(continuous Integration) is must for the projects because a single human error can be a huge problem. So we teach machines to check our code and warn us about our mistakes. I’ve used Travis CI to test my theme, if it is passing the WordPress coding standards or not. There are also some plugins that can test your themes with the WordPress coding standards like ‘Theme Check‘. These tools will help is making a good theme with Coding Standards.
Various Open Source Licenses
When I first submitted my theme on 19th June(Trac ticket), the ticket closed 2 days after that on 21st June. That was a quick review by one of the theme reviewer team lead @poena. The theme got rejected because of having more than 5 different errors. The first and most important error was declaring the license of the theme.
I was aware that for uploading to WordPress.org the theme should have an open source license GPLv3 or compatible. But I haven’t declared it. By saying theme I also mean the assets used in the theme like images, libraries etc. You can check the conversation over the ticket and check all the links she provided about theme development.
For learning about the licenses choosealicense.com is a good source.
Setting Realistic Deadlines
Without a deadline, a side project may become garbage because it will never be completed. What I learned is that setting a realistic deadline increases the productivity. Be it our assignments, project reports etc. Even we start studying just before the exams. Moving out from the comfort zone, doing the projects that you love & stop procrastination. I have also set a deadline for the theme and yes because of that I have a commit in git with ‘Hackathon’ (check the dates) 😛
Everybody wants to help you just ask
I am not an active member in WordPress Slack but I often open it and read the conversation happened. I always learn something new every time I open it. The volunteers always try to give you the right piece of information even if you ask silly questions.
WordPress is a community that has lots of nice peoples always willing to share their knowledge. If you have any question just ask it and you will definitely get an answer. Want a demo, check the trac tickets 44111 and 44006. 😉
Yes, you read it right Patience. Patience after submitting my theme for the second time, a new ticket was assigned to me. Silence for 2 months. Nothing happened until my theme got on the top of the review. It needs a lot of patience to see your theme on the review queue.
On 8 August finally, @kafleg as a reviewer is assigned to my theme. This time it(theme) was having 3-4 small issues. So I finished working on them and updated new changes. After that, I was waiting for the reviewer’s another reply on the theme. This time I the reply was this:
That was an ‘Aha’ moment, I was like telling everybody that my theme got selected and check out the link and email. I am very happy to see my theme on WP.org.
Rivers know this: there is no hurry. We shall get there some day.”
It sounds awesome when you think that lots of users are using your theme. The piece of code we have written is worth something. Giving back to the community, is it what is Open Source is all about?
Now the happiness is, seeing the badge of Theme Developer in My Profile.
Have any views about this, please let me know in the comment section.
This blog is an attempt to show the trend graph to compare the popularity of different CMS platforms via Google Trends. For the comparison I’ve picked 5 Top CMS’s.
Top 5 CMS’s:
Interest Over Time
We can see the growth of WordPress over the time. It is the most famous CMS and blogging platform.
We can see the Rise and Fall of different Platforms. Specially Joomla, it has an instant rise in popularity after release in september 2005, where around february 2006 it was on the Top. But we can clearly see the Fall of Joomla from 2009.
Blogger was released prior to every CMS but lost its popularity over time as the WordPress started gain in popularity. Still Blogger is the second most used platform for Blogging.
Where Drupal and Magento are not being that much popular as other platforms. The popularity of these two platforms also falling over time.
Interest By Region
Top countries that uses WordPress :
- Bangladesh (100)
- Nepal (95)
- Pakistan 64)
- Netherlands (61)
- Singapore (61)
Top countries that uses Magento :
- India (100)
- Nepal (76)
- Netherlands (75)
- Estonia (60)
- Bangladesh (59)
Top countries that uses Joomla :
- Netherlands (100)
- Greece (94)
- Kenya (90)
- Switzerland (86)
- Ukraine (78)
Top countries that uses Blogger :
- Malaysia (100)
- Indonesia (76)
- Cambodia (51)
Top countries that uses Drupal :
- Cuba (100)
- Belgium (14)
- India (10)
Facts from the Data:
- WordPress tops among all these Platforms.
- Each year on November to December every platform has a fall on use.
- Very less people uses Drupal.
- Nepal and Bangladesh are on top 5 for two different platforms WordPress and Magento.
Explore more at Google Trends.
No one can destroy IRON; but its own rust can. Likewise no one can destroy us; but our own mindset can. Our THOUGHTS can change our Life.
Apache and Nginx
Apache and Nginx are the two most popular Web Servers powering the Internet. The most popular in between them is Apache. While 49% of the total web still uses Apache for powering their websites, and Nginx shares 33.7% traffic.
But on researching more about them I found that Nginx surpasses Apache in many factors. Internet is using Nginx more on the top sites. Stats says that Nginx shares 51.6% traffic on top 100,000 sites while Apache shares 30.7%.
And the Top 1,000 sites of the world or you can say Busiest sites uses the nginx server (53.8%) where Apache lacks behind to only 19.2% of its share on traffic.
Because of too many reasons I’ve moved my server from Apache to Nginx. One of the reason was the traffic hike during the Scintilla Selfie Contest. When because of some unexpected traffic my server crashed. And was down for around 1 hour.
Internet is full of all the info about the differences and features of these two web servers but I haven’t find a website that ensures about the performance of the Nginx server. So I decided to do some load test on both of the Servers.
System Specification –
- Operating System – Amazon Linux AMI
- RAM – 1GB
- PHP 5.6
- MySQL 5.5
- WordPress 4.7.4 with Comet Cache plugin
- GZip enabled in both servers
Apache Stack Specification –
- Httpd 2.4
- supports http1.1
Nginx Stack Specification –
- Nginx 1.10
- supports http2.0
Tests Configuration :
For load tests I’ve used Loader.io. They provide 3 types of load tests for websites. For single domain the services are free, but if you want to test too many websites then they have some premium charges.
- Maintain client load
- Clients per second
- Clients per test
Test 1 – Maintain client load
|0-250||1 min||100%||10 sec|
In this test loader performs a increasing clients test from 0-250 clients over a span of 1 min. you can clearly see that in Apache Configuration the error rate is 23.8% where in the Nginx setup it is about 2.3 %. also the apache fails in between of the tests with timeouts. where the Nginx is started failing at 50th sec to 60th sec.
Point Table – Nginx : 1 :: Apache : 0
Test 2 – Clients per test
|0-250||1 min||100%||10 sec|
This test is for determining that how many clients the server can handle at a time. Apache fails after 10 sec for even for serving 3 clients per sec. where on an average we can say Nginx is handling 4 clients per sec. with a peek of 7 clients per second.
Point Table – Nginx : 2 :: Apache : 0
Test 3 – Clients per second
|250/sec||1 min||100%||10 sec|
This test is for determining that how many request per second a server can handle. You can see that on requesting 250 request in a second the server doesn’t respond for 10 sec. and then fails with 100% error threshold. Where Nginx work as a shock absorber in this test, and respond to some of the requests that it can handle. It is like making a queue for the requests and sending them to the current free worker process. And hold them till the working process free some memory.
The reason why Apache failed when getting too many requests is because Apache uses a prefork method for serving. Means it creates processes for each request. Because of getting too many requests at a single time and with a lack of memory(only 1GB RAM) it asked for too much memory and crashed. This is what happened on that day, because of occupying too much memory by Apache and MySQL I was not able to access my server via SSH at that time.
Whereas the Nginx server work as a Shock Absorber and create a queue for all the requests and serve them with their token number. Some of the requests from them got higher then 10sec of Timeout threshold so they are represented in the graph with orange color.
Apache error threshold 100% where Nginx 47.1%.
Point Table – Nginx : 3 :: Apache : 0
You can clearly see that Nginx gave better performance then the Apache Web Server. But still it can be optimized for more performance. By adding Cache tools because Nginx serves Static files much better than any other server.
We can also optimize the Nginx server performance :
- Pagespeed module for Nginx by Google
- Minifying CSS/JS
- Using a better Cache Plugin for generating static files because Nginx surpasses almost every server in serving static files.
Next Challenge :
For the next challenge I am thinking for using Nginx as a proxy server for Apache. Because I have read somewhere that The most powerful combination is that using Nginx in front of the Apache with cache enabled.
Also there is another combination of Varnish and Apache. Where Varnish is not a Web Server but it can be used as reverse proxy and caching static pages. It is used by lot of websites like GitHub.com etc.
Also because I’ve analysed that PHP-FPM is using too much memory. Where Apache is good option for using with PHP and Nginx is better at serving Static Files it will be a better option to use them together.
Links to all the test with full report :
When I added SSL into my website last time, It was not as much secure as it should be. It was some of the Obsolete Ciphers that can make some vulnerabilities. And so I got a “B” Certificate.
Now with a proper configuration and Enabling “HTTP2” in my site I have got new Rating for website and that’s an “A+”.
You can also generate a good configuration from the Mozilla’s SSL Configuration generator website where they provide many options for creating a configuration that can get you an A+ rating 🙂 .
Scintilla Selfie Contest Finalists:
Top 10 Girls
|1||Sparsh bhatla||CSE 2nd yr|
|2||Raveena Chauhan||ECE 3rd yr|
|3||Shailja Goswami||EE 1st yr|
|4||Akshita Basera||CSE 2nd yr|
|5||Purna Sharma||ME 3rd yr|
|6||Akansha bhatt||CE 4th yr|
|7||Juhi Bisht||CHE 4th yr|
|8||Rekha Chandola||EE 2nd yr|
|9||Shreya Darmora||CSE 3rd yr|
|10||Jyoti joshi||ME 3rd yr|
Top 10 Boys
|1||Karan Saxena||ECE 1st yr|
|2||Jayant Joshi||ECE 4th yr|
|3||ArjunSingh Chauhan||CE 3rd yr|
|4||Vishal Nautiyal||M.Tech 2nd yr|
|5||Abhishek mishra||CHE 4th yr|
|6||Yogesh kapri||ECE 3rd yr|
|7||Rahul mungali||CHE 3rd yr|
|8||Shekhar Bisht||EE 4th yr|
|9||Grijeshwar tiwari||CE 3rd yr|
|10||Bhriguraj||CE 2nd yr|
If you have any query Contact on Scintilla Facebook Page.
I have recently migrated my website from http to https( secure http). All the non-secure HTTP requests are now redirected to HTTPS. On migrating the Site I faced many problems and learnt a lot. So here’s the list of steps to perform in making the web more secure :
Selecting SSL Provider :
The first step is deciding your SSL provider. Many SSL Providers are present in the market like Comodo, Symentac, Verizon, Namecheap etc. They all charge a lot of money but also provide Extended Validation, means not only secure but also proves your legal identity as “operational and physical presence of website owner“.
For normal use you just need a Domain level Certificate. From Namecheap you can buy an SSL certificate in 600₹ for 1 year(Single Domain). For EV Certificate(Extended Validation) it’s good to buy a Certificate, but for Domain level I suggest you to use Let’s Encrypt. Let’s Encrypt is Free! and it is free because of it’s Sponsers like Google, Facebook, Mozilla, Automattic etc. So I am going with Let’s Encrypt.
Installing SSL Certificate :
Installing SSL Certificate is an easy task if your Hosting Provider support Let’s Encrypt. You can check the name of your hosting provider on the list. For non-supporting hosting providers we have certbot. You have to select your software and system. While Installing do redirect all of your traffic to https permanently. It’s an essential step because now you have two versions of your site.
After installing just make sure if SSL is working properly from SSL Labs.
Testing new URLs :
Mixed Content :
If your website is using some hard-coded HTTP links then the browser may show a warning for mixed content. Sometime Browser’s hides the padlock if they find any mixed content. You can check your URL for non-secure content at JitBit.
Make hard-coded links more robust by changing links:
//google.com . In WordPress you can install SSL Insecure Content Fixer Plugin.
Getting your Facebook likes back :
Facebook and google treat http and https links differently. Likes and Shares for a URL are for that Unique URL any change, and you will lose all your likes and shares count. Because of migrating you are now using different link so all your Facebook counts will change to “zero”.
How to get back all of your likes, you can use plugins like Warefare Plugin(expansive) of do it manually :
- Changing .htaccess : In Facebook’s documentation they give a solution, to redirect Facebook’s crawler to the old URL. I’ve found a solution in Stack Overflow. You have to add FaceBot to the exception list of redirection. You can find your .htaccess file in your document root. CertBot uses the virtual host method instead. Both do the same thing but .htaccess method is less preferred.
- Point og:url meta tag to old url : If you are using any kind of SEO tool or creating meta tags your self you have to change all the og:url tag to the http version again.
So if you are using Jetpack SEO tool then Jeremy Herve created a gist for you. I am using Yoast SEO. I’ve created a small plugin for changing links in Yoast SEO.
- Scraping : By doing both steps above you don’t get back your likes instantly but after 30 days. Facebook crawls each url after every 30 days of sharing the link. So my first step was going to open graph debug tools and fetch new info for every URL. But the problem was, many sites are too large that fetching each link is not possible.
For overcoming this problem, I researched on “How to scrap links by script”. I’ve found a solution in Stack Overflow and tweaked it a bit with file operations. You have to make a list of your URLs in a file and pass through the script. Use your Website Sitemaps for getting all the links of your Web Site.
External Links :
Any external links to your previous http links will take your SEO juice away, So it’s good to change them all.
If you are using Google Webmaster tools, add new urls with https. Don’t delete previous urls. Submit sitemaps, and request indexing.
Facebook page and Google Analytics is the another place you want to change the link to your site.
Getting the Certificates :
- Go to SSLforFree.
- Enter your website link to create SSL certificate.
- Verify your ownership of website.
- Download Certificates.zip.
- Upload ZIP to your hosting instance.
Configuring SSL :
- Extract ZIP.
- Move certificate.crt file to
- Move private.key to
- Now change configuration in ssl.conf
$ sudo /etc/httpd/conf.d/ssl.conf
- Find These lines and change accordingly :
Now Restart apache server and try opening your website with https enabled.
This method has some issues for mobile Certification and show insecure origin for mobile users. So I prefer to not go this way for adding SSL to your website. This was just my trial and error approach for installing the certificate.
Next Post Migrating from http to https