CrankBerry Blog » Tools

crankSlider the Jquery DIV and Image Slider Script

Jerry Low — Mon, 30 May 2011 22:10:36 +0000

I was looking for a simple Jquery DIV slider the other day and took a while before I found anything but they were too heavy and clunky. I just decided the best way was to write my own. Sometimes you may want a slider for not just images but for Divs as well, that way you can include other elements inside the div or create more animations inside.

Without further ado head over here to grab the crankSlider Jquery Div and Image Slider.

USB for web developer

Jerry Low — Fri, 27 Aug 2010 17:43:49 +0000

The other day I was working on a friend's machine, and since he didn't have the tools and programs I needed to commence my crazy development, I had to whip out my "stick". My USB stick that is. I plugged it in, and within minutes I was slicing, coding, and uploading. He asked me, "how'd you do that?". All I could reply was, "magic", but in fact you all might know by now, it's not magic. I have kept a USB with me for the last few years that has kept programs for mobile web development work. Today I will share with you the apps I have installed.

The USB

Before you can get started you'll have to get a USB flash drive (if you don't have one already). For the capacity, you'll want something 4 GB or more. The apps won't take up the whole 4 GB but having the extra space will be beneficial. As for the physical size, you'll want something easy to carry but hard to lose, so find something that you'll be comfortable carrying around all the time.

The Setup

First of all you'll want the launcher to organize everything on your USB. The launcher is a free software called PortableApps and can be found at: http://portableapps.com/apps.

The Apps

After you have installed the launcher you can get all the apps. Here's a list of all the apps I used. You can pick and choose as you may have your own preference.

HTML Editor – Notepad++
http://portableapps.com/apps/development/notepadpp_portable
The first and most important thing to have is a HTML editor. I vary between Dreamweaver and Notepad++ on my desktop so using Notepad++ on my USB was no surprise. Its light and has a nice color scheme.

Server – XAMPP
http://portableapps.com/apps/development/xampp
If you're coding with a database or using server-side scripting you'll need a server to do so. I'm used to WAMP but using XAMPP is not bad either. A great portable alternative.

Browser – FireFox
http://portableapps.com/news/2010-08-12_-_firefox_portable_4.0_beta_3
Should I explain more? This is Firefox, FIREFOX!

FTP – Filezilla
http://portableapps.com/apps/internet/filezilla_portable
If you need to FTP your files there's the great Filezilla. I use Filezilla on my desktop already because its free and easy to use with constant updates. Its pretty much the same for the portable version.

Graphic – GIMP
http://portableapps.com/apps/graphics_pictures/gimp_portable
Working from graphics to coding cannot be easier with the great Photoshop alternative, GIMP!

Optional Apps

Compression – 7 ZIP
http://portableapps.com/apps/utilities/7-zip_portable
Zip and unzip files with ease on the go.

Tablet – On Screen Keyboard
http://portableapps.com/apps/accessibility/on-screen_keyboard_portable
If you're working on a tablet machine that doesn't have a native on screen keyboard, this is the right tool for you.

Automated MySQL database backup with PHP and cronjob

Jerry Low — Fri, 16 Apr 2010 17:04:36 +0000

At some point of working on your website you'll want to back up you MySQL database. This is they key for all of you building dynamic sites. If one day your server goes down or something you may have the files backed up but without the database you'll have to start from scratch again. If you operate a very slow-paced site then manual back up is fine but if you want to backup your database daily then it becomes tedious. I, myself is lazy so I came up with a PHP and Cronjob solution to automatically backup MySQL database.

Automating It

What you need? The first thing you need to know how to do it set cronjobs. If you don't know how to do that you can learn how to set cronjobs here. The cronjob is what will automate your server to run the script and how often to run it.

The Files

All you'll need is two files to make this work. The first file, mysqldump.php can be grabbed from CreativeFactory.it. The next thing you need is my backup.php file. Just create a file called backup.php and dump the following script inside.

//The File Name You Want To Use
$fileName = 'Filename';

//Global
$sqlhost = 'localhost';
$sqluser = 'db_user';
$sqlpass = 'db_password';
$sqldb = 'db_name';

//**********************************
//You Don't Need to Edit This
//**********************************

//Today's Timestamp
$today_ts = strtotime("now");

$backupDate = date('y.m.d.h.i', $today_ts);
$backupFile = $backupDate.'- '.$fileName.'.txt';

//Connect to mysql server
$connessione = @mysql_connect($sqlhost,$sqluser,$sqlpass);

//Include class
require_once('mysqldump.php');

//Create new instance of MySQLDump
$dumper = new MySQLDump($sqldb);

//If you want to write the MySQL dump to file
$dumper->writeDump($backupFile);

The Setup

Configure the first file variables of the script and then just leave the rest. Put the backup.php and mysqldump.php in the same folder where you want the back up files to be dumped. Set the cronjob to run backup.php you don't need to worry about mysqldump.php. That's it, it'll automatically backup.

Possible Problems

The problems that you may experience is the MySQL privileges. If your account doesn't have enough privilege then you may not be able to properly query the database. Another problem maybe the CHMOD of the folder you're backing up to. You need to have write access into that folder.

Recovering from Backup

To recover you database just log into your phpMyAdmin, open the database you want to recover. Select the import tab and just browse for the file. If I recall the file itself should overwrite tables that are already in place if not then you may have to drop all the tables first.

Google Wave Invitations – Does it work for you?

Jerry Low — Tue, 01 Dec 2009 17:25:37 +0000

Well, the Google Wave has been out for a couple months now and I'm still not sure what's so crazy about this thing. Either way, I've got some invites sitting here, if you're interested in joining the crazy crowd and seeing what this new Google product is all about just leave me a line. Try it out and then let me know how it has worked or not worked for you!

My Take on Google Wave

Google Wave isn't all that I had anticipated, or maybe I was expecting a lot. When it was first introduced it showed people communicating and working on projects together. It was like a shared community online to… work on things. So far I have not used it for such. I'm not going to go in details and put out a review as everybody probably sees a different use for this application. Let me know, how has Google Wave changed your life?

I believe Google Wave is one of those web application made to compliment with the Chrome OS that Google will be releasing. The Wave will play a key role in the work and communication aspect for the OS, just like how all their online applications are.

Get a Google Wave Invite

Once again, get an invite – leave a line or message.

Websites you should have bookmarked if you're a webmaster

Jerry Low — Mon, 02 Nov 2009 22:58:37 +0000

If you not only own your website but also develop and maintain it yourself then you should understand how hard it is if there weren't some already developed tools and web resources to help you with your work. Here I've listed some of my favourite development resource sites and should be yours too for your developing moments. If you don't have them all bookmarked yet, DO IT NOW!

Typetester

Typetester is a website which allows you to test out fonts to see how they compare to to each other. This will allow you to test the font live and choose the one you want to use on your site.

BrowserShots

This is the resource for ultimate cross-browser compatibility building. BrowserShots allows you to take screenshots of your website so you can see what it looks like through various browsers and operating systems.

W3C Validator

Run your site through W3C validator and it'll tell you if your HTML and Javascript codes are well structured. Good for building clean and proper codes.

View Like Us

View Like Us complements BrowserShots very well. This web tool allows you to quickly test your website viewport in various resolution sizes including Wii and iPhone screen resolutions.

Lorem Ipsum

If you're just starting to build new sites, the best thing to have to fluff up your site is dummy text. Use the Lorem Ipsum generator to create various length of text to fill in those pages.

Shaboopie

If you're not designing your own site and have no resources to hire somebody to do so then you should check out Shaboopie as they have a large selection for free vector logos to use.

Icon Archive

Just like the excuse you have above, if you have no time to draw and you need great icons, just go to Icon Archive. They have a huge selection of free icons and the site is so easy to navigate.

Best Web Frameworks

Best Web Frameworks is one of my favourites. Just select the web language you're using and check popular frameworks and compatibility.

Pixlr

If you ever need to edit any images but don't have Photoshop handy, or Photoshop at all then you should use Pixlr. It is practically a tamed version of Photoshop online.

What great things do you have in your pocket (nothing disgusting ok!)? Comment and share with the rest of the group.

Update To Free Online Favicon Generator/Converter Tool

Jerry Low — Mon, 26 Oct 2009 23:01:31 +0000

Seems like there were a couple bugs in the Online Favicon Generator Tool but I worked things out and things should be running smoothly now. Saving is and loading is still very simple.

Once again a screenshot of the tool:

If you have forgotten and didn't see the link above here it is again.
Free Online Favicon Generator/Converter Tool

Online Favicon Generator/Converter

Jerry Low — Fri, 16 Oct 2009 19:35:12 +0000

Its not like it hasn't been done before, but here it is again, my take on the Online Favicon Generator/Converter. It was just a fun project I was working on myself. Here's a free tool for you to create, edit and save your favicon. Supporting image formats such as PNG, GIF, BMP, JPG, and ICO files. There's also some simple tools for you to make some quick edits without firing up the Ol'Photoshop. Go ahead and try it out, create your own favicon.

Save and Load Online

I've added the function to save and load favicons directly from Crankberry Blog. You don't need to sign up. Just do your work, press save and two 4 character key code will be loaded for you. Next time you come back just load the key codes and you'll be ready to go. Keep the key codes in the save slot and you can update your old version without memorizing ten thousand different codes. This is a new thing I'm trying out which I'll be using for later projects. Let me know how it works out for you.

Tools Available

There are some simple tools available for your convenience. You can import different image formats or start from scratch. There's a paint brush tool, eraser and color dropper for simple editing and touch ups.

Attaching Favicon to Website

Once you have created and saved a copy of your favicon in your web directory you'll have to place the following code in your website. I always use the two following codes in my header between code.

Try out the tool and don't be afraid to send me any comments and feedback.

The Tool

If you didn't catch the link in the text here it is again:
Online Favicon Generator/Converter

CSS rounded corners with borders

Jerry Low — Thu, 08 Oct 2009 19:15:02 +0000

An upgrade has been made to my CSS rounded corners generator, now not only does it use no images, cross browser compliant but now with additional borders option. Add that all up and you have a cross browser, no image, bordered CSS rounded corners generator. Of course that name is too long so we'll just stick with the old one.

Forgotten the link to the tool?

No worries: CSS Rounded Corners Generator