Mohsin Rasool - Website Optimization Expert

Let's Make your 'Website' Secure, Fast loading, Optimized for Search Engines & Responsive for Mobile Devices

Take Full Page Screenshot in FireFox with No Addons like a Boss

by Leave a Comment

I just discovered this awesome technique of taking full page screenshot of any webpage of any Width and Height (regardless of your display screen size) using Firefox in Mobile View or Responsive Design Mode (official name).

Here is how to do it:

  1. Open the URL of the webpage you want take screenshot
  2. Turn on Mobile View or Responsive Design Mode (by pressing Ctrl + Shift + M)
  3. Edit the Width and Heights to your desired dimensions , just double click the area (highlighted and numbered-1 in screenshot below) where it lists current width and height and enter your own, and then click somewhere on the page to let it take effect.
  4. You are ready, hit the Screenshot/Camera Button (highlighted as #2 in screenshot below) and you will have your screenshot ready to be downloaded or automatically downloaded to your downloads.
Take full page screenshot with Firefox
Take full page screenshot with Firefox

My Calculator is Now NodeJs instead of Google or Excel

by Leave a Comment

Wow funny thing I noticed today that I have been using NodeJS, in terminal for doing my calculations and arithmetic operations. Then I realized how I have always been using different methods and tools on my laptop to perform quick arithmetic calculations.

NodeJs is My Handy Calculator

At start it was usual system calculator. Then I started to use Spreadsheet most of the time for performing calculations when I learned basic maths operations and functions available in spreadsheets. After sometime Google, became my favorite calculator for fast arithmetic operations.

Just recently on my Ubuntu system I caught NodeJs fever and have been playing with any NMP package I could find and play with on Javascript. And wow the new use case which I found today was that, I have been using Node in my terminal for performing quick calculations. I am posting it to share with the world so if you find doing your calculations using something other than conventional or system calculator, don’t panic, it is normal 😀

SASS & SCSS to Super Charge CSS Skills

by Leave a Comment

CSS is becoming complex day by day and as projects become bigger so gets the stylesheet and its CSS styles. To manage and keep track of your CSS stylesheets is not that easy as it used to be in the early days.

CSS preprocessors are here to rescue and SASS (with new syntax SCSS called Sassy CSS easy to follow for CSS users). I have tried many times to go with CSS preprocessors like LESS or SASS but have not been able to stick to it as my projects were not that complex or I did not need to add more tools into my workflow. But recent weeks I have been using SASS and I am finding it so useful and it is here to rescue me for bigger and long term projects to help me manage and keep track of CSS stuff.

Here is good tutorial to follow if you are new to SASS and want to give it a try:

http://code.tutsplus.com/tutorials/a-wordpress-development-process-using-sass-and-compass–cms-21861

On Ubuntu it was easy to get started by just adding RUBY with RVM. Following tutorial by Ryan Bigg at his blog at this blog post: http://ryanbigg.com/2010/12/ubuntu-ruby-rvm-rails-and-you/

Enjoy your adventure with Ruby installation challenges , and SASSing your CSS 🙂

Bluefish Editor – Text Editor for Programmers

by Leave a Comment

I am loving the Bluefish Editor, it is like just a Lightweight IDE. I am learning about it and will keep this post to keep track of interesting things I learn about it and add to my WorkFlow. Currently I am using Ubuntu 14.04 with Bluefish Editor and Firefox autoreload extenstion. It is really helpful work flow for faster development.

Most useful thing of Bluefish editor is shortcut:Ctrl+Shift+Enter after Entering some html element tag first letter like e.g. p (then hit above shortcut key, and you will have

 

with cursor at right position to get started to write in it.)

It can even extend p.myclass to <p class=”myclass”></p> and p#myid to related syntax. For quick great tutorial about this. Check out this URL:

http://www.troubleshooters.com/linux/bluefish/

Short cuts to browse files in Bluefish Editor:

  1. Alt + 1 to first tab, and so on
  2. To move between multiple windows Unity shortcut for Ubuntu is : Alt + ` (just the key above your TAB key)
  3. more to come

Other Bluefish Editor Settings:

  • Changed Dir Base to www folder in sidebar panel.. by right clicking on any (www folder in my case) and then selecting “Set as Base Dir”

FireFox Responsive Web Design View RWD

by Leave a Comment

My younger brother, also a programmer 🙂 , shared with me this little nifty keyboard short-cut  and introduced to Mozilla Firefox’s awesome Responsive Design View. I am happy to share it with my readers and for my future reference.

In the past I had to use plug-ins, or resize window manually. But Firefox has made it so simple and so great.

1. Keyboard shortcut is : Ctrl + Shift + M  (when you are on FireFox)

2. And Your Firefox will tranform itself to awesome responsive design viewer, you can check different views and enjoy.

Also it really helps to test bigger screens sizes even on smaller screens. It really helps the developer to create responsive web design from their own laptop and quickly check the different screen views without needing any manual window resizing or third party sluggish plugins.

See my site in different views in below screenshots:

mobile-view
Iphone/Mobile View
Medium Screen like Tablets/Ipads View
Medium Screen like Tablets/Ipads View
Full Screen View on Bigger Screens
Full Screen View on Bigger ScreensRespo

Surprise – The Biggest Bonus So Far & Joy of Working

by 1 Comment

Yesterday, an interesting thing happened. A first time client of us, who trusted his website to us to build as per his mockups and ideas, sent me extra bonus on the top of the job… and Man it was the biggest percentage of Bonus I have ever gotten!

Guess what percentage? 5% of the original project amount? 10%, 25% ? 50%? Yes it was 50%!!!

My first thought was that client forgot the interim payment he had already made, lol for few seconds it was test of my integrity and honesty (Thank God I was able to cope my greedy instinct and was going to let him know that) so I opened the customer support center… and there I read awesome reply already posted by him. Let me quote:

With regards to payment, I am delighted with the work you have provided and the help you have given. Therefore, I am very happy to pay a 50% bonus for your work. I trust you find that acceptable and that we can continue to use you for our ongoing work.

I was really delighted to read above quote, as it gives you satisfaction on multiple levels. Yes you get happy to know that more money is in your account, but you also get happy that your work is accepted and appreciated and valued by your clients. This encourages more quality in your future work. I thanked him for his bonus and he kindly replied:

No problem Mohsin – it’s a pleasure. You have been extremely patient with the length of time this project has taken, and very helpful in the advice you have given. PLUS – you and your team seem to be able to design to our exact specifications… all without complaint! So that’s appreciated 😉

Now that is awesome, it proves that if you focus on your passion and work, you do not have to worry about the money. You just focus on creating wealth (value) and money will follow. Money should never be the goal but the value creation and wealth creation (oh yeah if you want to know what the heck is difference b/w Wealth & Money then read Paul  Graham’s essay link is below.) I sign off now with Paul’s link and happy reading Paul’s essay & Good luck with your wealth creation.

* Paul Graham’s Essay: Wealth http://www.paulgraham.com/wealth.html

Thanks,
Mohsin

Added Good Looking Pricing Table to MagicBox Website

by Leave a Comment

Hi,

I have added new pricing table for our newly launched WordPress plugin called Conversion MagicBox Plugin. Three types of pricing is offered as per your needs. Checkout here www.MagicBoxPlugin.com
Please let me know if you have any questions, or tips to improve the site or plugin.
Thanks,
Mohsin
Ps. Do not forgot to watch the video on that site, LOL can you catch the exact moment where my English died, and I had to take long awkward pause…:) (yeah creating own videos for business are hard compared to personal fun videos. But glad that I was able to do this one.)

Thank You WordPress

by Leave a Comment

I use WordPress daily in my own business as well as most of the time our clients also choose WordPress and ask us to build their website based on WordPress.

I cannot thank enough to WordPress and whole WordPress team to make this great product open source and free.

I learn something new daily about this great project of its own kind on the internet.

Just today I installed Android App by WordPress and really loving it, this makes posting to my blog so easy.

Also today I was sharing with my team that MEDIA section in WordPress 3.5 is so lovely. Oh also those new Publish and Update buttons also so cool in WP 3.5.

Thank you WordPress, thank you very much. Wishing you all best year 2013.

Regards,
Mohsin

Top Ubuntu Free Softwares We Use Everyday in Our Internet Business

by Leave a Comment

Here is a quick list of little software, goodies and apps I use daily and love them:

1. Tasque – A Task Manager – Compatible to Remember the Milk Service. Light Weight, and very easy to add new tasks using Keyboard.. No need to ever use a Mouse to click.

2. GColor2 – Desktop Color Picker – Lightweight utility to get HTML and RGB color from anywhere on your screen. Great from Web Designers to get color ideas.

3. Take ScreenShot – Ubuntu Built-in Utility to take screenshot of whole window, or selected area. I use it almost every day to take shots and send to clients to make my point. You can find it in under Applications > Accessories > Take Screenshot

4. Artha – An Offline English Dictionary & Thesaurus – Wow I love this little friend, it has what every conventional dictionary tool misses i.e. If you enter wrong spelling, just like Google, it will give you options saying: Did You Mean…and give you options to choose from.

5. Blobby Volly Game – A cute little game to kill time when you need to. I really love this little fascinating game. Best when played by two players.

6. CheckGMail – A little app like Gmail Notifier, keeps you updated about your Gmail emails, good for quick overview of what is coming in there. Just search in “Application Software Center” in Ubunut for CheckGMAIL and click Install. Set it to be loaded on Start-up to run every moment to monitor your inbox.

7. VLC Media Player– My all time favorite one and only one Media player for all media needs. If you stick to this player for a week. You are going to love it for life.

Other applications include FireFox the great, Skype, Chrome, Open Office, GIMP and FileZilla.

Best Regards,

Mohsin