How To Load CSS & Javascript Using Javascript / jQuery

[cc lang=”javascript”]
// load jquery UI CSS theme
$(“head”).append(“”);
var css = $(“head”).children(“:last”);
css.attr({
rel: “stylesheet”,
type: “text/css”,
href: “//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/smoothness/jquery-ui.css”
});

// load jquery UI and if available, run autocomplete
if (typeof jQuery().ui === ‘undefined’ || jQuery.ui === null) {
$.getScript(“//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js”, function() {
loadJobTitles();
});
}
else {
loadJobTitles();
}
[/cc]

Scalable Cloud Web / App Hosting

Managing a scalable and high availability website is a lot of work and expensive. That’s why many startups get started with cloud-based web hosting like Amazon Web Services, which proved to be very scalable for Instagram. But, it can still be a bit expensive when you’re not sure your app with take off. PHPFog is a similar scalable PHP web hosting service that is cheap and looks like a good alternative when you’re just getting started. Check it out at

https://www.phpfog.com/pricing

Pure CSS Arrow (No Images)

[cc lang=”html”]
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-bottom: 5px solid black;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #f00;
}

.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;

border-left: 60px solid green;
}

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-right:10px solid blue;
}

[/cc]

and here are a bunch of other CSS shapes

http://www.cssportal.com/css3-shapes/

or just use this CSS Triangle Generator

http://apps.eky.hk/css-triangle-generator/

Sending Text & HTML Email in PHP

Set up your email message with text/html boundaries as follows:
[cc lang=”php”]
–$boundary
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit

Text email content goes here

–$boundary
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

HTML email content goes here

–$boundary–
[/cc]

Let’s say the message above is in the variable $message.

Set headers and send email.

[cc lang=”php”]
$boundary = uniqid(“”, true);
$additional_headers = “Mime-Version: 1.0rn”;
$additional_headers .= “Content-Type: multipart/alternative; boundary=$boundary” . “rn”;

mail($to, $subject, $message, $additional_headers, $additional_parameters);
[/cc]

If the user’s email client supports HTML, it will show the HTML version, otherwise, it’ll show the text version.

Using eval() to Evaluate a PHP Script in Another PHP Script

Let’s say you have a PHP script called message.php with the following contents:

[cc lang=”php”]
Hello, $name;
[/cc]

You can evaluate this code by reading it into a variable as using the eval() function as follows:

[cc lang=”php”]
$name = “David”;
$fh = fopen(“message.php”, ‘r’);
$message = fread($fh, filesize(“message.php”));
eval(“$message = “$message”;”);
echo $message; // prints Hello, David
[/cc]

Highly Scalable Website Architectures

I’ve always wondered why my SQL Server 2000 database with only 15,000 records would be so slow to display search results compared to Google search.  While it’s practically impossible to recreate the custom hardware and web servers Google uses to power Google.com, there are many alternatives that can still get you high performance at relatively low cost. Following are some links to how Instagram, which was recently bought by Facebook for $1B, scaled their service on a budget.

http://instagram-engineering.tumblr.com/post/13649370142/what-powers-instagram-hundreds-of-instances-dozens-of

http://techcrunch.com/2012/04/12/how-to-scale-a-1-billion-startup-a-guide-from-instagram-co-founder-mike-krieger/

http://highscalability.com/blog/2012/4/9/the-instagram-architecture-facebook-bought-for-a-cool-billio.html

To learn more about how other companies scale their websites, visit http://highscalability.com.

Cross-Browser CSS Gradients

CSS gradients are great and much better and easier to use than gradient images. However, the CSS code to created them can get a bit complicated. Here’s a CSS Gradient Generator that makes this super easy and supports color stops and many preset gradients.

http://www.colorzilla.com/gradient-editor/

If you already have some CSS for your gradients, you can copy and paste it (import it) to generator cross-browser CSS for your gradients.

Also, make sure to enable IE 9 support if you still need it.

Also, remove “filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3d2f6′, endColorstr=’#ffffff’,GradientType=0 ); /* IE6-8 */” since that messes up IE 9.

Free, Open Source Web Fonts

There’s no doubt that the type of fonts you choose for your website can make a big impact on its look.  The problem is many nice fonts are expensive and embedding them in a website requires converting them to the right formats and including them in your CSS correctly. One free alternative is to use Google Web Fonts which, at the time of this posting, has 501 font families. It’s super easy to add to a website by just copying and pasting.

To learn more, visit http://www.google.com/webfonts