Zen Coding – a mighty way of short coding HTML CSS XML XSL
// October 17th, 2011 // No Comments » // PHP
Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL and other structured code formats. The tools have been incorporated into a number of high-profile text editors, some plug-ins developed by the Zen Coding team and others implemented independently. However, Zen Coding is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.
It’s an ultimate coder’s companion that can generate complex, redundant code structure like a charm. If you need to write a lot of these codes everyday it can certainly deduce your effort to a good level.
And it isn’t only a decent abbreviation engine, provides some very useful actions for HTML-coder’s every day needs, like: Wrap with Abbreviation, Tag Balancing, Toggle Comment, Remove Tag etc.
Expand Abbreviations
Zen Coding uses a specific syntax in order to expand small snippets of code, similar to CSS selectors, into full-fledged HTML code. For example, the sequence
div#page>div.logo+ul#navigation>li*5>a
is expanded into:
<div id="page">
<div></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Check this technology out: http://code.google.com/p/zen-coding/
My Favorite Android Apps and Games
// October 17th, 2011 // 1 Comment » // Android
Advanced Task Manager:Use Advanced Task Manager to end applications, speed up phone, and save battery!
ConnectBot: ConnectBot is a powerful open-source Secure Shell (SSH) client.
Zero Clipboard Multi Instance
// October 11th, 2011 // No Comments » // HZBRL
Ever wanted to let your user copy any text from your site to their clipboard without making them select the text and press Ctrl+C?
The Zero Clipboard provides an easy way to copy any text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. The “Zero” signifies that the library is invisible and the user interface is left entirely up to you.
This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.
For more info:
http://code.google.com/p/zeroclipboard/
http://code.google.com/p/zeroclipboard/wiki/Instructions
Well I have seen a lot many posts and questions about how to use multiple Zero Clipboard in a single page to copy multiple text. Here is the elixir:
<html>
<head>
<title>Zero Clipboard Test</title>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script language="JavaScript">
function toClipboard(me,strMsg) {
var clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
clip.setText(strMsg);
clip.addEventListener('complete', function (client, text) {
alert("Copy Ok: "+text);
});
clip.glue(me);
}
</script>
<style>
.copiable{float:left;}
</style>
</head>
<body>
<div class="copiable" onmouseOver="toClipboard(this,'11')">
<input type="button" value="copy(11)"/>
</div>
<div class="copiable" onmouseOver="toClipboard(this,'22')">
<input type="button" value="copy(22)"/>
</div>
<div class="copiable" onmouseOver="toClipboard(this,'33')">
<input type="button" value="copy(33)"/>
</div>
</body>
</html>
Posterous API Cross-site JSONP Wrapper
// September 13th, 2011 // 2 Comments » // Javascript, jQuery, PHP
Did you ever try to use Posterous API from your site using only javascript? Like Facebook, Tweeter and other platforms have their javascript api, Posterous just yet don’t support JSONP calls. They provide their responses in both XML and JSON format but just don’t accept a callback parameter that is required to perform JSONP calls. So at this moment their is no official way to use their API through javascript.
To counter this problem use this elixir:
http://posterous-jsonp.appspot.com/ provides a wrapper for calling the Posterous APIs. You just need to send any API request to http://posterous-jsonp.appspot.com/ instead of http://posterous.com/
Example:
Instead of http://posterous.com/api/2/sites/arifulbd/posts/63703528/photos/ use http://posterous-jsonp.appspot.com/api/2/sites/arifulbd/posts/63703528/photos/?callback=mycallback
Code Sample:
$.getJSON("http://posterous-jsonp.appspot.com/api/2/sites/arifulbd/posts/63703528/photos/?callback=?",
function(data) {
console.log(data);
}
);
Crop and Save image through PHP using Jcrop
// June 9th, 2011 // 5 Comments » // Javascript, jQuery, PHP
Jcrop is the quick and easy way to add image cropping functionality to your web application. Here is an example of its basic use and also a php server side script (elixir from me) that will save the cropped image for you.
<?php
/**
* Jcrop image cropping plugin for jQuery
* Cropping and saving script
* From Codelixir
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$jpeg_quality = 90;
$src = 'images/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = imagecreatetruecolor($_POST['tw'], $_POST['th']);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$_POST['tw'],$_POST['th'],$_POST['w'],$_POST['h']);
imagejpeg($dst_r,time().'.jpg',$jpeg_quality);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}
// If not a POST request, display page below:
?><html>
<head>
<title>Jcrop</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script language="Javascript">
$(function(){
$('#cropbox').Jcrop({
//aspectRatio: 1,
onChange: showPreview,
onSelect: showPreview,
onSelect: updateCoords
});
$('.preview').click(function(){
$('.preview').parent().css('border','2px solid black');
$(this).parent().css('border','2px solid red');
$('#th').val($(this).parent().height());
$('#tw').val($(this).parent().width());
})
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
$('.preview').each(function(){
$(this).parent().width(coords.w*$(this).parent().attr('factor'));
$(this).parent().height(coords.h*$(this).parent().attr('factor'));
var rx = $(this).parent().width() / coords.w;
var ry = $(this).parent().height() / coords.h;
$(this).css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
});
}
}
</script>
</head>
<body>
<div id="outer">
<div class="jcExample">
<div class="article">
<h1>Jcrop</h1>
<!-- This is the image we're attaching Jcrop to -->
<img src="images/flowers.jpg" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="tw" name="tw" />
<input type="hidden" id="th" name="th" />
Select a crop image size below then click: <input type="submit" value="Crop Image" />
</form>
</div>
<div style="width:100px;height:100px;overflow:hidden;border: 2px solid black;margin: 2px;" factor=1>
<img src="images/flowers.jpg" class="preview" />
</div>
<div style="width:200px;height:200px;overflow:hidden;border: 2px solid black;margin: 2px;" factor=2>
<img src="images/flowers.jpg" class="preview" />
</div>
<div style="width:300px;height:300px;overflow:hidden;border: 2px solid black;margin: 2px;" factor=3>
<img src="images/flowers.jpg" class="preview" />
</div>
</div>
</div>
</body>
</html>
Here is the example source: source zip
Firebug and Logging
// May 27th, 2011 // 1 Comment » // Javascript
Firebug and Logging
Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that you can call from your own web pages.
Your new friend, console.log
The easiest way to write to the Firebug console looks like this: console.log("hello world")
You can pass as many arguments as you want and they will be joined together in a row, like console.log(2,4,6,8,"foo",bar).
Logging object hyperlinks
console.log and its related functions can do a lot more than just write text to the console. You can pass any kind of object to console.log and it will be displayed as a hyperlink. Elements, functions, arrays, plain ol’ objects, you name it. Clicking these links will inspect the object in whatever tab is most appropriate.
String formatting
console.log can format strings in the great tradition of printf. For example, you can write console.log("%s is %d years old.", "Bob", 42).
Color coding
In addition to console.log, there are several other functions you can call to print messages with a colorful visual and semantic distinction. These include console.debug, console.info, console.warn, and console.error.
Timing and profiling
Firebug gives you two easy ways to measure JavaScript performance. The low-fi approach is to call console.time("timing foo") before the code you want to measure, and then console.timeEnd("timing foo") afterwards. Firebug will then log the time that was spent in between.
The high-fi approach is to use the JavaScript profiler. Just call console.profile() before the code you want to measure, and then console.profileEnd() afterwards. Firebug will log a detailed report about how much time was spent in every function call in between.
Stack traces
Just call console.trace() and Firebug will write a very informative stack trace to the console. Not only will it tell you which functions are on the stack, but it will include the value of each argument that was passed to each function. You can click the functions or objects to inspect them further.
Nested grouping
Sometimes a flat list of messages can be difficult to read, so Firebug gives you a solution for indenting in the console. Just call console.group("a title") to start a new indentation block, and then console.groupEnd() to close the block. You can create as many levels of indentation as you please.
Object inspection
How many times have you hand-written code to dump all of the properties of an object, or all of the elements in an HTML fragment? With Firebug, you’ll never write that code again.
Calling console.dir(object) will log an interactive listing of an object’s properties, like a miniature version of the DOM tab. Calling console.dirxml(element) on any HTML or XML element will print a lovely XML outline, like a miniature version of the HTML tab.
Be assertive
Assertions are a wonderful way to ensure that your code stays rock-solid in the face of change. Firebug provides a set of handy assertion functions, and writes very informative error messages to the console when your assertions fail.
Now the Elixir is here:
If your console.log statements are not commented up before deployment, it is likely to miss one easily then a javascript error will be presented whenever a person visits the site with the site with no Firebug or has it disabled. Just use this handy function everywhere instead of console.log and get cured:
log=function(txt){
if(typeof console!='undefined' && typeof console.log!='undefined')
console.log(txt);
}
From now on instead of console.log(“Hi there”); use log(“Hi there”);
FB getLoginUrl with extended permissions
// May 27th, 2011 // 2 Comments » // Facebook
You are trying to get the facebook login dialog with extended permissions, used this code found everywhere:
$loginUrl = $facebook->getLoginUrl(array( 'req_perms' => 'email,user_birthday,status_update,publish_stream,user_photos,user_videos,offline_access' ));
but no luck right? So here is the Elixir, have it:
$loginUrl = $facebook->getLoginUrl(array( 'scope' => 'email,user_birthday,status_update,publish_stream,user_photos,user_videos,offline_access' ));
Or, to be completely safe use this(no harm!):
$loginUrl = $facebook->getLoginUrl(array( 'req_perms' => 'email,user_birthday,status_update,publish_stream,user_photos,user_videos,offline_access', 'scope' => 'email,user_birthday,status_update,publish_stream,user_photos,user_videos,offline_access' ));