Install Archidroid v3.0.0 experimental ROM on the Galaxy S3 (GT-I9300)

XDA-forums original Archidroid thread for Samsung Galaxy S3 (GT-I9300): [ROM] [4.4.4] [CyanogenMod] [Linaro 4.9] [Excellent] [06/09/14] ArchiDroid V2.5.3

Currently the stable version is version 2.3.5, and I wanted to go with the 3.0.1 experimental version, and here’s how to do just that:

1. Go to the Archidroid’s github repository: i9300-cm-experimental

2. And download the repository zip: direct download zip of i9300-cm-experimental

3. After the download is finished, unzip the archive.

4. Download 7zip from here: 7zip.org

5. After you’ve extracted the i9300-cm-experimental zip archive, go into the directory, select everything (Ctrl+A shortcut) and right click and select 7zip > Add to archive… and select Compression Level: Fastest and the Compression method: Deflate and click ok. Continue reading

Youtube and Vimeo responsive – elastic videos with CSS and HTML


The idea behind responsive videos is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box.

The main trick with elastic videos is to make use of the padding property which is the magic that styles a box with an intrinsic ratio. This is because we’re using it to set the padding to a percentage value, based on the width of the containing block.

First you will need to add the following CSS code to your wordpress theme style sheet. You can do this inside of your theme options, if your themes allows for custom CSS code to be added, or if not, then you will need to use the built-in wordpress editor to add this code at the bottom of your style.css or stylesheet.css default css file associated with your theme (go to Appearance > Editor > Styles (Stylesheet(style.css) or if supported Appearance > Edit CSS option).

CSS code for responsive / elastic Youtube embed

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Second, you will have to take each iframe Youtube video or Vimeo embed code that you want to make responsive and wrap it around with HTML code as illustrated below.

HTML source code for responsive / elastic Youtube embed

</pre>
<div class="video-container"><center>
 <iframe src="http://www.youtube.com/embed/KQ6zr6kCPj8?rel=0" frameborder="0" width="560" height="315"></iframe></center></div>
<pre>

At this point, the responsive YouTube iframe embedings are working, your videos should be responsive / elastic, and ready to view on Tablet devices and Mobile handsets. To verify this works use a test post and copy/paste the code above and hit Preview. Next, click on the browser “Restore Down” button in the top right corner of your screen, and begin re-sizing the browser window so that you can see in real-time how the iframe containing the video adjust to the new canvas dimensions.

Inspiration and much thanks to John from avexdesigns , and the original master  – Thierry –  from alistapart.

If you’ve enjoyed this post and found it useful, spread the love and share the knowledge.

Thank you!

Display wordpress page generation/load time statistics

You might have seen blogs around that display statistics about the time it took for the page to be generated / loaded . If you’re interested in implementing such a functionality in your own blog I’ll present you below with the way to achieve that along with the source code that does that. The majority of the work is based on Viper007Bond original post, but we’ve added a small enhancement to it.

We’ll be displaying the total time it took for the page to be generated considering php and mysql queries, and to do that we first need to define a variable inside the wp-config.php in order for that to work. Therefor open your wp-config.php file and add the following line to it:

define( 'SAVEQUERIES', true );

Now that that’s done, we’ll be moving on to the actual calculations and display of the load time information. Typically you’d add the code and have the information be displayed in your theme’s footer.php file. So take a look inside your wordpress theme directory and look for the file called footer.php and open it for edit and in-between the

<?php ?>

tags paste the code snippet below:

if (current_user_can('level_10'))
{
global $wpdb;

// Get the total page generation time
$totaltime = timer_stop( false, 22 );

// Calculate the time spent on MySQL queries by adding up the time spent on each query
$mysqltime = 0;
// if there are indeed mysql queries then
if ($wpdb-&gt;queries != null)
foreach ( $wpdb-&gt;queries as $query )
$mysqltime = $mysqltime + $query[1];

// The time spent on PHP is the remainder
$phptime = $totaltime - $mysqltime;

// Create the percentages
$mysqlper = number_format_i18n( $mysqltime / $totaltime * 100, 2 );
$phpper = number_format_i18n( $phptime / $totaltime * 100, 2 );

// Output the stats
echo 'Page generated in ' . number_format_i18n( $totaltime, 4 ) . " seconds ( {$phpper}% PHP, {$mysqlper}% MySQL )";
}

At this point you are good to go. Save your footer.php file and refresh any page of your blog.

At the bottom, in the footer section of your theme, you will see the newly added text that will read something like:

Page generated in 0.1352 seconds ( 94.00% PHP, 6.00% MySQL )

Now, consider the fact that the above code will only display this information for users that are admins, and not for regular users. Should you wish to display this information to everyone, simply delete the highlighted lines in the code snipped displayed above.

Also, take into account, that by enabling SAVEQUERIES (Save queries for analysis) in your config.php, there will be a small performance penalty involved, since this is mostly used for debugging purposes (but still…it’s COOL 🙂 ).

Oh, and by the way, if you’re wondering how to have code with highlighted syntax on your blog, then feel free to checkout the SyntaxHighlighter Evolved plugin.

Install / upgrade to latest Nginx without compiling from source

Nginx server update without compiling

You can install the Nginx package from the regular Ubuntu/Debian repositories, but the versions there are generally lagging behind the current stable/development releases.

In this post, I’ll show you how to install/upgrade the latest stable or development version through Ubuntu’s package manager without having to compile Nginx from source!

1. Ubuntu guide:

1.1 Switch to root:

 sudo -i 

1.2 Update your local list of packages:

 apt-get update

1.3 Install the python-software-properties package:

 apt-get install python-software-properties

1.4 Add the Nginx Launchpad Repository:

1.4.1 Option 1 (the easy way using add-apt-repository):

 add-apt-repository ppa:nginx/development

or if you want the latest stable release use

 add-apt-repository ppa:nginx/stable

1.4.2 Option 2:

1.4.2.1 Add the repository to your sources.list using the following command:

 echo "deb http://ppa.launchpad.net/nginx/development/ubuntu $(lsb_release -cs) main" >> /etc/apt/sources.list

or if you want the latest stable release use

 echo "deb http://ppa.launchpad.net/nginx/release/ubuntu $(lsb_release -cs) main" >> /etc/apt/sources.list

Note: lsb_release -cs will grab your current ubuntu install codename

1.4.2.2 get and add the repository public key:

 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys C300EE8C

1.5 Update your local list of packages again:

 sudo apt-get update

1.6 Check current Nginx version:

 nginx -v
nginx version: nginx/1.2.4

1.7 Now, you can install (actually upgrade) the latest version of Nginx just like any other package (we must use forced install otherwise it will fail):

1.7.1 To upgrade:

 apt-get upgrade nginx -f

When asked what to do with the Nginx configuration file /etc/nginx/nginx.conf select
N in orer to keep your current Nginx configuration file.

1.7.2 To install (if not performing an upgrade):

 apt-get install nginx -f

1.8 When the install is done, check your current version of nginx:

 nginx -v

It should read: nginx version: nginx/1.3.8

1.9 Now just to be on the safe side and make sure everything is ok, restart the nginx service followed by a reload of the configuration to make sure statuses are OK:

 service nginx restart
service nginx reload

You are done!
Things on Debian are a little bit different since we cannot use the add-apt-repository ppa:nginx/development command since add-apt-repository is a Ubuntu specific utility that comes along in the python-software-properties packages, however since nginx isn’t all that different for Debian from Ubuntu, we can use Ubuntu development repositories to install the nginx development version bu manually modifying the sources.list file.

2.1 Switch to root:

 sudo -i

2.2 Open for edit your sources.list repositories:

 nano /etc/apt/sources.list

2.3 And add the following line at the bottom of the file:

 deb http://ppa.launchpad.net/nginx/development/ubuntu lucid main

Note: for latest stable version use

 deb http://ppa.launchpad.net/nginx/stable/ubuntu lucid main

or

 deb http://ppa.launchpad.net/nginx/development/ubuntu quantal main

Note: for latest stable version use

 deb http://ppa.launchpad.net/nginx/stable/ubuntu quantal main

Note: check out ubuntu develoment codenames here if you want to use others: https://wiki.ubuntu.com/DevelopmentCodeNames if you’d like to use a different ubuntu version repository.

2.3 Next, download and add the repository private key:

  apt-key adv --keyserver keyserver.ubuntu.com --recv-keys C300EE8C

2.4 Update your local list of packages:

 apt-get update

2.5 Check current Nginx version:

 nginx -v
nginx version: nginx/1.2.8

2.6 Perform the Nginx webserver upgrade (use forced version):

2.6.1 To upgrade:

 apt-get upgrade nginx -f

When asked what to do with the Nginx configuration file /etc/nginx/nginx.conf select
N in order to keep your current Nginx configuration file.

2.6.2 To install (if not performing an upgrade):

 apt-get install nginx -f

2.7 When the install is done, check your current version of Nginx:

 nginx -v
It should read: nginx version: nginx/1.3.8

2.8 Now just to be on the safe side and make sure everything is ok, restart the Nginx service followed by a reload of the configuration to make sure statuses are OK:

 service nginx restart
service nginx reload

You are done!

3. Now to see the status of your current services type in the following:

 service --status-all

Guide tested on:

Distributor ID: Ubuntu
Description:    Ubuntu 12.10
Release:        12.10
Codename:       quantal

  AND

Distributor ID: Debian
Description:    Debian GNU/Linux 6.0.6 (squeeze)
Release:        6.0.6
Codename:       squeeze

Post inspired from Clay Richardson.

10 killer video tutorials to get you started with Thesis 2.0 WordPress Theme

Note: all credits and rights belong to the creators of the “Build your own Business Website” who have made these Thesis 2.0 tutorial series free and available to everyone.

Thesis 2.0 Video Tutorial – Part 1 – Introduction to the new concepts behind the framework

Thesis 2.0 Video Tutorial – Part 2 – The New Thesis Interface – theme settings page and skin editor walk-through

Thesis 2.0 Video Tutorial – Part 3 – Create a 2 Column Layout

Thesis 2.0 Video Tutorial – Part 4 – Create a 4 Column “Fat Footer”

Thesis 2.0 Video Tutorial – Part 5 – Add a Clickable Image and a Menu to the Header

Thesis 2.0 Video Tutorial – Part 6 – Create a Custom Menu Style

Thesis 2.0 Video Tutorial – Part 7 – Create a Custom Header Style for the Home Page

Thesis 2.0 Video Tutorial – Part 8 – Style the Backgrounds

Thesis 2.0 Video Tutorial – Part 9 – How to create a widget like feature box with a image slider and a call to action.

Thesis 2.0 Video Tutorial – Part 10 – Questions and answers

For more Thesis 2.0 video tutorials, feel free to check out the Free Video Tutorials section on the Build Your Own Business Website.

Also if you’d like to browse the entire tutorial list on the Vimeo website you can do so by navigating to “Seminar – Thesis 2.0 Launch Party“.