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

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

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

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

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

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

Keep Height of Second Div column same as First Div

by

Hi,

In responsive web design, I often encounter this issue, and solve it with jQuery. However this time, it was little different took much time to get it right.. So i am posting here for future reference:

<code>

<script>
jQuery(document).ready(function($){
var currentHeight = 0;

$(window).load(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
});

$(window).resize(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
$(window).trigger('resize');
});

});
</script>
</code>

I had two column layout, with responsive slider at the left, and a div in the right.

As slider keeps changing its height, right div looked bad. So using above code, we can use Jquery which does:

1. Take size of slider (on load as real property in css is not set, and you need to let the page rendered to get the rendered height)

2. Now we have two functions, one changes the height of right div on first page load. And second does the same thing but on every time when window resizes… to keep the height same on every window resize/reload.

Using PTCL & WordPress – Two Unusual Issues I Faced Today

by

Now I would say GOOGLE & GoTrusted VPN rescued me.

Issue #1: Client Site will not Open at PTCL My ISP
A very loyal client of mine, who outsources all programming of her business to me, was having issues with order checkouts. I needed to look into this and fix it asap.

I could see that site was working fine as using proxy I could see it working fine. Problem was that I could not login to it and do the job as public proxies are unsafe…

I skyped my younger brother, Ismail, that can he open this site in his pc in office. He replied that site was not opening there too as they too were using PTCL. I told him my situation… he said why not use VPN and get rid of PTCL stuff. WOW, even I have paid membership with VPN for clients’ youtube work (as Youtube is banned in Pakistan). I fired VPN and there I was able to access the site and figure the issues.

Issue #2: WordPress Gives 404 Error to 1ShoppingCart Thankyou Page return
Buyers of my client reported that after successful payment and order they are being redirected to NOT FOUND 404 page. My client was really upset that what could be the issue…

I double checked all the links, thank you page urls, and settings. Everything looked fine.

Then I did a test purchase and got same error as others 404 on actual URL. I could see the issue,
as there were GET POST data variables being sent by 1ShoppingCart which had conflicting variable name with WordPress’s builtin reserved names.

Next job was to compare all the reserved variables by WordPress and POST variables sent by 1SC, I was able to find both lists, quite long lists. Next goal was to compare and find exact matches.. I used my newly learned Linux ninja skills of text processing through bash. And was able to find the three possible matches and one of them was exact and that was ‘name’ variable!!!

Job was almost done, as next task was to ask WordPress let 1SC send ‘name’ variable and please do not mess with it. Simple solution was to unset the variable which I did by adding simple php unset code in WP-config file. And it solved the problem instantly!!!

For future reference, I will be posting the code and varaibles of both WP & 1SC in the PS of this post.

Thank you,
Mohsin

PS.

0. Problem URLs in WordPress with ‘name’ as in GET:
See working url:
https://mohsinrasool.com/surprise-the-biggest-bonus-so-far-joy-of-working/
404 Error on Above Page with name as GET
https://mohsinrasool.com/surprise-the-biggest-bonus-so-far-joy-of-working/?name=adfdaf

1. The code to add in wp-config.php
unset($_GET['name']);

2. List of 1ShoppingCart POST postback variables on successful order
address1
address2
cardtype
city
company
country
email1
fax
grandTotal
gst
secondaryphone
name
option1
option11
option21
orderID
price1
product1
quantity1
shipAddress1
shipAddress2
shipCity
shipCountry
shipname
shippingAmount
shippingMethod
shipState
shipZip
sku1
state
status
tax
Total
UserName1
phone
zip

3. List of WordPress reservered variable names

_ajax_nonce
_page
_per_page
_signup_form
_total
_url
_wp_http_referer
_wp_original_http_referer
_wp_unfiltered_html_comment
_wpnonce
_wpnonce-custom-header-upload
aa
action
action2
active_post_lock
add_new
add_new_users
addmeta
admin_bar_front
admin_color
admin_email
admin_password
admin_password2
ajax
align
allblogs
allusers
alt
approve_parent
approved
attachment
attachment_id
attachments
auth_cookie
author
author_name
autocomplete_type
auto_draft
auto-add-pages
autosave

background-attachment
background-color
background-position-x
background-repeat
banned_email_domains
blog
blog_name
blog_public
blog_upload_space
blogname
bulk_edit

c
calendar
cat
category_base
category_name
catslist
changeit
changes
charset
checkbox
checked
clear-recent-list
closed
comment
comment_approved
comment_author
comment_author_email
comment_author_url
comment_content
comment_date
comment_ID
comment_parent
comment_post_ID
comment_shortcuts
comment_status
comments_listing
comments_popup
confirmdelete
connection_type
content
context
cpage
create-new-attachment
createuser
customize_messenger_channel
customized
customlink-tab

date
date_format
date_format_custom
day
default-header
delete
delete_all
delete_all2
delete_comments
delete_option
delete_tags
delete_widget
deletebookmarks
deletecomment
deleted
deletemeta
deletepost
description
detached
dismiss
display_name
do

edit_date
email
error
exact
excerpt

features
feed
fetch
fheight
file
fileupload_maxk
filter
find_detached
first_comment
first_comment_author
first_comment_url
first_name
first_page
first_post
found_post_id
fwidth

global_terms_enabled
GLOBALS
gmt_offset
guid

height
hh
hidden
hidden_aa
hidden_jj
hidden_mm
hidden_mn
hidden_hh
history
hostname
hour
html-upload

id
ID
ids
id_base
illegal_names
insert-gallery
insertonlybutton
interim-login
item-object
item-type

jj
json
json_data

key

last_name
limited_email_domains
link_id
link_image
link_name
link_rss
link_url
link_visible
linkcheck
locale
locked
log
logged_in_cookie

m
media
media_type
menu
menu_items
menu-item
menu-item-attr-title
menu-item-classes
menu-item-db-id
menu-item-description
menu-item-object
menu-item-object-id
menu-item-parent-id
menu-item-position
menu-item-target
menu-item-title
menu-item-type
menu-item-url
menu-item-xfn
menu-locations
menu-name
message
meta
metakeyinput
metakeyselect
metavalue
minute
mm
mn
mode
monthnum
more
move
multi_number

name
nav-menu-locations
new
new_role
new_slug
new_title
newcat
newcomment_author
newcomment_author_email
newcomment_author_url
newcontent
newuser
nickname
no_placeholder
noapi
noconfirmation
noredir
number

offset
oitar
option
option_page
order
orderby

p
pb
page
page_columns
page_id
page_options
paged
pagegen_timestamp
pagename
parent_id
pass1
pass2
password
permalink_structure
photo_description
photo_src
phperror
ping_status
plugin
plugin_status
pointer
position
post
post_category
post_data
post_format
post_ID
post_id
post_mime_type
post_password
post_status
post_title
post_type
post_view
postid
posts
preview
primary_blog
private_key
ps
public_key
publish
pwd

query

reassign_user
reauth
redirect
redirect_to
ref
referredby
registration
registrationnotification
rememberme
remove-background
removeheader
removewidget
reset-background
resetheader
review
rich_editing
robots
role

s
same
save
savewidget
savewidgets
screen
scrollto
search
second
section
selectall
selection
send
send_password
sentence
short
show_sticky
sidebar
sidebars
signup_for
signup_form_id
site_id
site_name
sitename
size
skip-cropping
spam
spammed
src
ss
stage
start
static
status
sticky
subdomain_install
submit
subpost
subpost_id
super_admin

tab
tag
tag_ID
tag-name
tag_base
tags_input
tax
tax_input
tag-name
target
taxonomy
tb
term
text-color
the-widget-id
theme
theme_status
thumb
timezone_string
time_format
time_format_custom
title
thumbnail_id
trash
trashed
type

undismiss
unspam
unspammed
untrash
untrashed
url
update_home_url
updated
upgrade
upload_filetypes
upload_space_check_disabled
use_ssl
user
user_id
user_login
user_name
username
users

verify-delete
version
visibility
visible

w
weblog_title
welcome_email
welcome_user_email
widget_id
widget_number
widget-id
widget-recent-comments
widget-rss
width
withcomments
withoutcomments
wp_customize
wp_http_referer
wp_screen_options
wp-preview
WPLANG
x1
y1
year

Giving Access to Specific Bucket in AWS using IAM

by

Hi,

If you are using Amazon S3 for storage, I recommend using IAM to create users with specific access to S3 only or to some specific bucket only. It is great way to give to your developer or client or partner access to specific bucket in your S3 without allowing access to whole Amazon or AWS or S3 account.

Using IAM service in AWS, you can create groups and users with specific permissions. In my case:

  1. I created a group called: test
  2. then added: testuser as a user in the group
  3. Used following policy for the group to give access to only ‘test’ bucket

Policy Code for Specific Bucket View/Download/Upload/Delete Access:
Enable AWS Management Console access to an Amazon S3 bucket:
[code language=”css”]{
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:GetBucketLocation", "s3:ListAllMyBuckets"],
"Resource": "arn:aws:s3:::*"
},
{
"Effect": "Allow",
"Action": ["s3:ListBucket" ],
"Resource": [ "arn:aws:s3:::test"]
},
{
"Effect": "Allow",
"Action": [ "s3:PutObject", "s3:GetObject", "s3:DeleteObject"],
"Resource": [ "arn:aws:s3:::test/*"]
}
]
}[/code]

For Programmatic Access, following IAM policy grants programmatic read-write access to the test bucket:

[code language=”css”] {
"Statement": [
{
"Effect": "Allow",
"Action": ["s3:ListBucket" ],
"Resource": [ "arn:aws:s3:::test"]
},
{
"Effect": "Allow",
"Action": [ "s3:PutObject", "s3:GetObject", "s3:DeleteObject"],
"Resource": [ "arn:aws:s3:::test/*"]
}
]
}[/code]

 

Source: http://blogs.aws.amazon.com/security/post/Tx3VRSWZ6B3SHAV/Writing-IAM-Policies-How-to-grant-access-to-an-Amazon-S3-bucket