This particular trick comes in very handy for the mobile platforms. Instead of linking to your CSS and your images, you can use this method to embed the images inline within the CSS. This keeps the browser from having to make multiple calls, thus speeding up the load time of your application. You can also use this method within an IMG tag as well.
/* ***********************************************************
* START :::
* 64bit encodes images for CSS embedding
* Alternatively, if you are not using PNGs, you can specify the Mime Type
* PNG is the default mime
*********************************************************** */
function data_url($file, $mime='') {
$mime = empty($mime) ? 'image/png' : $mime;
$contents = file_get_contents($file);
$base64 = base64_encode($contents);
return ('data:' . $mime . ';base64,' . $base64);
}
/* ***********************************************************
* END :::
*********************************************************** */
In the CSS style sheet
You would need to either tell your server to process files with the .css extension or save your CSS files with the .php extension. It’s your call.
body { background-image: url('<?php echo data_url('http://domain.com/images/file.png'); ?>') no-repeat; }
/* output code would be something like */
body { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=') no-repeat; }
Within HTML img tags
<img src="<?php echo data_url('http://domain.com/images/file.png'); ?>" border=0 />
<!-- output code would be something like --> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAIAAACTCYeWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI5JREFUeNrs2sENACEIRUF1LY0mqRbb2OQPHUwexIu7qlbq3JmJxZ8VPMorr7zy8NZeeXhrrzw8vJtXHh4eHh7eU6c8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8fMj4kAQPDw8P76lTHh7ezSsPb+2Vh7f2yiv/7/mS8dHlo2d3dyz+CTAAYEXI+4xG4igAAAAASUVORK5CYII=" border=0 />
This is literally print_r() dressed up. I normally run this within my general $app object so to call it, I would use $app->debug($var). As with print_r(), it loops indefinitely using lists to format a readable layout in HTML. This helps the developer avoid having to view source and scroll…and scroll…and scroll to find the output of an array or object.
View Source
In the world of the Internet, as a developer, we need to protect ourselves from prying eyes. One of the easiest ways a hacker can crack your code is if you tell them what they did wrong. For that reason, it’s important to suppress errors from the public. But, this doesn’t mean we should eliminate the knowledge when an error occurs and what triggered it. For that reason, I have written a fairly simple class that will allow for error suppression, error debugging and error reporting.
View Source
I’ve recently come up with a need to allow users to view a list of options from which to choose. Do to screen restraints and readability, I opted to use the tabbing functionality I wrote about previously. In the process, however, I wrote some javascript that allows me to add the ‘pick and choose’ functionality to any pair of lists, or single list, I choose.
Single List Mode: This is real simple. The user has a list of items to select from. When the select the item, the ‘selected’ class is added to that item. When they de-select the item, the ‘selected’ class is removed. This is tracked with a hidden input element with the id ‘ls_update_list_array’.
Dual List Mode: When the user views ‘Categories Selected’ (in this case, shown by default), they will see a list of categories currently selected. Under ‘All Available Categories’, they get a complete list of categories to selected from (in this case, minus those categories already selected). We want the user to be able to either add to the list of ‘Currently Selected’ by clicking on the ‘All Categories’ list, or remove items by clicking on them under ‘Currently Selected’. When they click on an item in either list, it is moved from list to the other. This is tracked with a hidden input element with the id ‘ls_update_list_array’.
ls_update_list_array: This is provided simply to allow for an easy form post action. Rather than having Javascript determine when the form is posted and then grabbing the list as an array and blah, blah, blah, you get the list automatically on post.
View Source
As usual, I always need something special in jQuery. I’m always able to find plugins out there, but they never everything I want, the way I want it done. Each always falls short somewhere. It either limits my design flexibility, is buggy or is just flat-out bloated with way more code than is necessary.
I’ve written a tabs script for jQuery that is short and to the point while still allowing for design flexibility and ease. There’s nothing to it. Simply establish the tabs settings with your appropriate IDs and classes and you’re good to go. I’ve used on a few occasions and it has yet to fail me.
As usual, however, let me know if you have problems. I’ve supplied complete code for HTML, CSS and, of course, the jQuery/JavaScript.
View Source
I’m back with another chunk of code. This time, it’s my database class.
I got sick of coming across classes that didn’t have everything I needed, or didn’t do it correctly. One of my biggest problems was an inability to nest query calls within another query result’s output.
View Source
So you have a design and you have decided you want to use a jQuery accordion. You start to layout your design and implement the accordion only to find out that your design is going to cause problems with the standard accordion plug-ins.
The problem with the standard accordion is that they require the child and header elements to be nested within a parent.
View Source
I’ve worked hard to make tnyb.it‘s service valuable and easy to use. I continue to add features constantly and make existing features easier and easier to use. There are a number of ways you can call to the tnyb.it service to have your URLs shortened remotely.
URL Shortening
- http://tnyb.it/s?u=http://example.com
- http://tnyb.it/s?u=example.com
- http://tnyb.it/s?u=example.com&i=123 (associates url to your account)
- http://tnyb.it/s?u=example.com&i=123&h=Y (sets the URL to private & will not show in your RSS feed)
URL Previewing
- http://tnyb.it/p?u=http://tnyb.it/MTA
- http://tnyb.it/p?u=tnyb.it/MTA
- http://tnyb.it/p?u=MTA
Create Your Own Twitter/Facebook Share Links
- <a href=”http://tnyb.it/s?u=mylonganduglyurl.com&i=123&r=twitter”>Display Text</a>
(shortens URL & redirects to Twitter with page title and short URL)
- <a href=”http://tnyb.it/s?u=mylonganduglyurl.com&i=123&r=facebook”>Display Text</a>
(shortens URL & redirects to Facebook with page title and short URL)
UPDATED 08-10-2010:
- I’ve cleaned up a lot of code and organized the code a little better.
- One major improvement is the passing of element attributes. You can now pass an unlimited number of attributes. If there are any you want omitted from the actual element tag, you can add it to the $attributes_not_allowed array.
- I’ve added notes everywhere and hopefully they will assist you. If you find any bugs, feel free to post in comments and will fix them ASAP
As it states in the notes of the script, this is not for auto-generated forms. This is simply a means of developing forms with consistency. There are methods for parsing the $_POST array and injecting the $_POST variables and values in the $form object. It will auto-generate the variables given in a SQL statement inject those into the $form object. It will also insert a posted form into a specified database and table.
This is a continual work in progress as I create forms under different conditions. Check back as I will update the code as needed
If you have any problems or suggestions, leave comments.
You will see references to the a $db object in the code below. Go to the Database PHP Class to view the code.
View Source
With this script, you can easily load multiple JavaScript files in one call. The main purpose behind this is to simply cut down on the clutter in your source code.
The function can be called from anywhere and the files are specified in an array
View Source
