Posts Tagged 'Format'

September 16, 2014

CSS3 Tips and Tricks – Generated Content Without jQuery

If you guys have read any of my past blogs, you know how much I LOVE jQuery, but every good developer knows that if there’s an easier or more efficient way of doing something: DO IT. With all the new developments with CSS3, HTML5, etc. etc., sometimes we have to get back to basics to relearn how to do things more efficiently, so here it goes!

Nearly every website has some form of 2.0/dynamic/generated content nowadays, and if your site doesn’t… well, it probably should catch up! I’ll show you how with some new CSS tricks and how it can reduce a lot of overhead of including the entire jQuery library (which would save you approximately 84kb per page load, assuming you have no other asynchronous/client side functionality you need).

I’ll start off with an easy example, since I know most of you take these examples and let your creativity run wild for your own projects. (Note to self: start a “Code Gone Wild” series.)

Usually this is the part where I say “First, let’s include the jQuery library as always.” Not this time, let’s break the rules!

FIRST, start off your document like any other (with the basic structure, set your DOCTYPE appropriately, i.e. strict vs transitional):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Wow, you can already tell this generated content’s going to be a TON easier than using jQuery (for those of you whom aren’t already jQuery fans).

Now let’s add in a div there; every time we hover over that div, we’re going to display our generated content with CSS. Inside of our div, we’re going to place a simple span, like so:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
     <div class=”slisawesome”>
          <span data-title="Hello Cassandra!">What’s my name?</span>
     </div>
</body>
</html>

As you can see, the span content contains a simple question and the data-title attribute contains the answer to that question.

Now let’s just make this div a little bit prettier before we get into the fancy stuff.

Add some style to the <head> section of our document:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
</style>

Now you should have something that looks like this:

This is good; this is what you should have. Now let’s make the magic happen and add the rest of our CSS3:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
</style>

Now, right now, your page should still look like this:

That’s okay! We still have ONE more step to go:

<style>
     .slisawesome  {
          /* Will TOTALLY be making another blog about the cool CSS gradients soon */
          background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
          padding: 20px;  /* give the box some room to breathe */
          width: 125px;  /* give it a fixed width since we know how wide it should be  */
          margin: 100px auto;  /* move it away from the top of the screen AND center it */
          border: 1px solid black;  /* this is just a little border */
          position: relative;  /* this is to help with our generated content positioning */
     }
     .slisawesome span::before {
          content:attr(data-title); /* assigning the data-title attribute value to the content */
          opacity: 0; /* hiding data-title until we hover over it */
          position: absolute; /* positioning our data-title content */
          margin-top: 50px; /* putting more space between our question and answer */
 
          /* Fancy transitions for our data-title when we hover over our question */
          /* which I’m TOTALLY going to write another blog for ;) If you guys want, of course */
          -webkit-transition:opacity 0.4s; /* determines the speed of the transition */
          transition:opacity 0.4s; /* determines the speed of the transition */
     }
     /* Drum Roll --------- Here’s our hover magic */
     .slisawesome span:hover::before{
          opacity:1;
     }
     /* Okay… that was a little anticlimactic… losing cool points */
</style>

Despite my anticlimactic adding of “the magic,” we just added a :hover that will show full opacity when we hover, so refresh your page and try it out! You should see something like this when you hover over THE QUESTION:

Of course you could REALLY start getting fancy with this by adding some php variables for the logged in user, or perhaps make it dynamic to location, time, etc. The possibilities are endless, so go… go and expand on this awesome generated content technique!

-Cassandra

January 12, 2011

'What\'s with These "Quote" Things?'

'We\'ve' . "all $een" . 'this' . $problem . 'before' . $and->it . ((1==1) ? 'seems' : 'dosen\'t seem') . sprintf('about time to %s things', 'clarify');

PHP string handling can be a tough concept to wrangle. Developers have many options: single / double quotes, concatenation and various string manipulation functions. The choices you make have a significant impact on the readability and performance of your script. Let's meet the line-up:

The Literal
Single quotes are used to define a string whose contents should be taken literally. What this means is that PHP will not attempt to expand any content contained between the ' '.

This is the way to tell your favorite Hypertext Preprocessor, "That little guy? Don't worry about that little guy."

In most cases this is the de-facto standard for strings. However, when a decent number of variables become involved it tends to become difficult to keep your quotes accounted for. When combining simple strings with variables and single quotes, the "." operator is needed between each variable/string. That "." is known as the concatenation operator.

Input:
$date = 'Yesterday';
$location = 'outside';
$item = array ( 'description' => 'lovely', 'name' => 'butterfly');
$content = $date . ' I went ' . $location . ' and caught a ' . $item['description'] . ' ' . $item['name'];

Output: Yesterday I went outside and caught a lovely butterfly

The Interpreted
Using double quotes will cause PHP to look a little closer into the string to find anywhere it can "read between the lines." Variables and escape characters will be expanded, so you can reference them inline without the need for concatenation. This can be useful when creating strings which include pre-defined variables.

Input:
$file = 'example.jpg'
$content = "<a href=\"http://www.example.com/$file\">$file</a>"

Output: <a href="http://www.example.com/example.jpg">example.jpg</a>

In previous versions of PHP there was a significant performance difference between the use of single v. double quotes. In later versions performance variations are negligible. The decision of one over the other should focus on feature and readability concerns.

The Thoughtful
Unlike single and double quotes, the sprintf function comes to the table with a few cards up its sleeve. When provided with a formatting "template" and arguments, sprintf will return a formatted string.

Input:
$order = array ( 'item' => 'RC Helicopters', 'status' => 'pending');
$content = sprintf('Your order of %s is currently %s', $order['item'], $order['status']);

Output: Your order of RC Helicopters is currently pending

When constructing a complex string such as XML documents, sprintf allows the developer to view the string with placeholders rather than a mish-mash of escaped quotes and variables. In addition sprintf is able to specify the type of variable, change padding/text alignment, and even change the order in which it displays the variables.

The debate over the most efficient method of string definition has raged for years and will likely continue ad infinitum. However, when the benchmarks show their performance as almost identical, it leaves you with one major question: What works the best for your implementation? Typically my scripts will contain all of the methods above, and often a combination of them.

print(sprintf('The %s important thing is that %s give them all a try and see for %s', 'most', 'you', 'yourself'));

-Phil

Subscribe to format