Text rotation for all

Jonathan Snook has posted a nice nugget on text rotation with CSS that takes a nice bit of markup like this:

  2. <div class="example-date">
  3. <span class="day">31</span>
  4. <span class="month">July</span>
  5. <span class="year">2009</span>
  6. </div>

and converts it to:

all via the CSS:
  2. -webkit-transform: rotate(-90deg); 
  3. -moz-transform: rotate(-90deg);
  4. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
If you have better solution, just tell me !
0 comments
Labels:

Even designers are using CSS3?...

Sean Martell is my hero. He did the Bespin logos and a bunch of the Mozilla works in general. When Ben and I were in Toronto we got to see him at work at his WACOM tablet, and it is a sight to behold.

I wish I could do that kind of design work, but for me it isn't to be.... my design is left to code :

Anyway, he has been working a lot on the Fennec (Firefox mobile) design and just
wrote about using CSS3 to build flexible UI elements without recutting UI graphics all over:

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space. Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there. Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.

Hold the phone… whats this? Firefox 3.5 enables a new slew of fun CSS3 design styles eh? Rounded edges eh? Embedded fonts eh?

gears turning, monkeys typing, hamsters running *

What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

Here are some nice dark toggles:


with code looking like:

CSS:
  2. .toggleONleft {
  3. font-family: ‘DroidSans-Bold’;
  4. text-transform:uppercase;
  5. padding: 0px 8px 0px 12px;
  6. -moz-border-radius-topleft: 0.5em;
  7. -moz-border-radius-bottomleft: 0.5em;
  8. -webkit-border-top-left-radius: 0.5em;
  9. -webkit-border-bottom-left-radius: 0.5em;
  10. border-top: 4px solid #aaa;
  11. border-left: 4px solid #ccc;
  12. border-right: 4px solid #ccc;
  13. border-bottom: 4px solid #ccc;
  14. -moz-border-top-colors:#aaa #bbb #ccc #ddd;
  15. -moz-border-left-colors:#aaa #bbb #ccc #ddd;
  16. -moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
  17. -moz-border-right-colors:#aaa #bbb #ccc #ddd;
  18. background-color: #ddd;
  19. display: inline;
  20. }
  22. .toggleOFFright {
  23. font-family: ‘DroidSans-Bold’;
  24. text-transform:uppercase;
  25. color:#414141;
  26. padding: 0px 12px 0px 8px;
  27. -moz-border-radius-topright: 0.5em;
  28. -moz-border-radius-bottomright: 0.5em;
  29. -webkit-border-top-right-radius: 0.5em;
  30. -webkit-border-bottom-right-radius: 0.5em;
  31. border-top: 4px solid #ccc;
  32. border-left: 4px solid #ccc;
  33. border-right: 4px solid #ccc;
  34. border-bottom: 4px solid #aaa;
  35. -moz-border-top-colors:#aaa #fff #fff #fff;
  36. -moz-border-right-colors:#aaa #dedede #efefef #fafafa;
  37. -moz-border-left-colors:#aaa #dedede #efefef #fafafa;
  38. -moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
  39. background-color: #fff;
  40. display: inline;
  41. }

If you have better solution, just tell me !
0 comments
Labels: ,

PHP for Microsoft Ajax Library

The Microsoft AJAX Library is a pure-JavaScript library that's used by ASP.NET AJAX but is also available as a separate download. Because it's pure JavaScript, it's not tied to ASP.NET on the backend. PHP for MS AJAX is code to help you make use of the Microsoft AJAX Library from PHP applications. With this first Alpha release, it simply supports exposing PHP classes as AJAX-enabled web services, just as in ASP.NET applications. In fact, the generated proxies are identical to what you get from ASP.NET, meaning you can have full interoperability.

Hello World

The service on the backend so to speak:


HTML:
  1. <?php
  3. require_once '../../dist/MSAjaxService.php';
  5. class HelloService extends MSAjaxService
  6. {
  7. function SayHello($name)
  8. {
  9. return "Hello, " . $name . "!";
  10. }
  11. }
  12. $h = new HelloService();
  13. $h->ProcessRequest();

And the front end that will talk to it:



  4. <title>Hello, World!</title>
  5. <script type="text/javascript" src="../../MicrosoftAjaxLibrary/MicrosoftAjax.js"></script> 
  6. <script type="text/javascript" src="HelloService.php/js"></script>
  7. </head>
  9. Name: <input id="name" type="text" />
  10. <input type="button" value="Say Hello" onclick="button_click(); return false;" />
  11. <br />
  12. Response from server: <span id="response"></span>
  13. </body>
  14. <script type="text/javascript">
  15. function button_click() {
  16. HelloService.SayHello($get('name').value, function (result) {
  17. $get('response').innerHTML = result;
  18. });
  19. }
  20. </script>
  21. </html>

If you have better solution, just tell me !


0 comments
Labels: ,

FirePHP: Tying together Firebug and PHP

FirePHP solves the problem of AJAX debugging by sending debug information along with the response. To avoid breaking the response content, the debug information is placed into special HTTP response headers.

This works for all types of requests, not just AJAX requests, which means you can even debug requests for images that are dynamically generated by a PHP script. You can use FirePHP in your development environment, or use it to track down bugs that only appear on your production site.This is what Christoph Dorn has to say about FirePHP in his recent writeup.He goes into detail on how you can setup the Firebug plugin, and how you use it from within PHP:


  2. // use an ini file to turn it on and off
  3. $settings = @parse_ini_file('settings.ini');
  5. if ($settings['FirePHP'] == 'Enabled') {
  6. FB::setEnabled(true);
  7. } else {
  8. FB::setEnabled(false);
  9. }
  10. // log away!
  11. FB::log('This is a log message');
  12. // selectively log
  13. if (Debug::getOption('DisableCache')) {
  14. // code to disable cache
  15. FB::info('Cache has been disabled!');
  16. } else {
  17. // default code
  18. }

Check out the article for more info.

In related news, Zend just stepped it up a notch with their new Zend Server that fits in nicely with the cloud

If you have better solution, just tell me !

0 comments
Labels:

Showing progress with the Safari 4 multiple file upload

Andrea Giammarchi has taken the new Safari 4 implementation of multi input file upload functionality and has written an article on how to write the client and server to enable this.He shares the new XHR implementation:


  2. var xhr = new XMLHttpRequest,
  3. upload = xhr.upload;
  4. upload.onload = function(){
  5. console.log("Data fully sent");
  6. };
  7. xhr.open("post", page, true);
  8. xhr.send(binaryData);

and the delves into a PHP server backend that groks things like X-File-Size and X-File-Name.

Then, he shows the client side code to push this all forward and packages it all up:

If you have better solution, just tell me !
0 comments
Labels: ,

Using Base64 encoded images on IE too

Being able to use data: URIs to do interesting things such as inline images is incredibly useful.

IE 8 added support for data URIs but what about older versions of IE (which are still far too prevalent)?

This nice PHP script shows how you can send back data URIs for those who support it, and for older IE, use the message/rfc822 mime type that email clients often use to encode images:

  2. header('Content-type:message/rfc822'); 
  3. MIME-Version: 1.0
  4. Content-Type: multipart/related; boundary="NEXT_MHTML_DATA_PART"
  5. --NEXT_MHTML_DATA_PART
  6. Content-Location: 
  7. Content-Transfer-Encoding: quoted-printable
  8. Content-Type: text/html; charset="utf-8"
  9. <!-- put the HTML in here including a for loop displaying: -->
  10. <div class="img" style="background-image:url(MHTML_IMG<?php echo $index?>)"></div>
  11. --NEXT_MHTML_DATA_PART
  12. Content-Location: MHTML_IMG<?php echo $index?> <!-- for each index -->
  13. Content-Transfer-Encoding: base64
  14. Content-Type: image/png
  15. <!-- the image data here -->
  16. --NEXT_MHTML_DATA_PART
  17. Content-Location: END_OF_MHTML_FILE
  18. Content-Transfer-Encoding: base64
  19. Content-Type: image/png
  20. IE_NEED_THIS_TO_END_DATA

If you have better solution, just tell me!
0 comments
Labels:

Chroma Hash: Interesting visualization of your password

Matt Thompson has created a fun little jQuery plugin called Chroma-Hash that "dynamically visualizes secure text-field values using ambient color bars":
Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •'s, so others can't read it. Unfortunately, neither can you—you can't tell if you got your password right until you click "Log In".

Here is a snippet of the magic:


  2. $(this).css({position: 'absolute',
  3. left: position.left + width - 2,
  4. top: position.top,
  5. height: height + "px",
  6. width: 8 + "px",
  7. margin: 5 + "px",
  8. marginLeft: -8 * (i + 1) + "px"
  9. }
  10. );
  11. });
  13. var id = $(this).attr('id');
  14. var md5 = hex_md5($(this).val());
  15. var colors = md5.match(/([\dABCDEF]{6})/ig);
  16. $(".chroma-hash").stop();
  18. chromaHashesForElement(this).each(function(i) {
  19. $(this).animate({backgroundColor:"#" +
  20. colors[i]});
  21. });

If you have better solution, just tell me !

0 comments
Labels: ,