Noty – HTML5 Notes Widget
Noty is the name of the HTML5 application I developed for the recent HTML5 competition hosted at Nettuts. Unfortunately I did not win, but I did learn a lot about HTML5 and related technologies.
It is available for purchase at CodeCanyon.
Noty is a simple widget for taking notes about the current page. A potential use is taking notes on a blog post for commenting later.
Noty uses several HTML5 and related technologies, using the browser’s native functionality wherever possible. It is designed to work in modern browsers.
- Drag-and-Drop support via the browser’s native API . You can save excerpts from the page simply by highlighting text and dragging to the widget.
- Persistent storage of notes for browsers that support it. Notes are saved in the user’s borwser for future visits.
- Sharing of notes with link via Email or Twitter
- Automatic URL shortening for sharing via bit.ly
- Ability to scroll directly to the source of a note on the page (not available in Internet Explorer)
- Fancy CSS3 effects (box-shadow, gradients and transitions)
- Fully semantic HTML5 markup
- Collapsable widget, remembering the state for the next page. This is useful in case the widget covers part of the page.
- Tested to work in current versions of Chrome, Firefox, Internet Explorer and Safari
Record HTML Canvas Animations to Video
Sometimes it might be useful to be able to record your canvas animation to a video format. Maybe you want to use your JavaScript skills to create fancy effects for a video. You could use some kind of screen capturing program and crop the video, but I'll show you how to do it with code!
Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.
Let's start with our simple animation. You can see it in action here.
Create Callbacks Using __invoke
The __invoke magic method (available as of PHP 5.3) is used to make an object callable as if it were a regular function. The combines the usefulness of objects with the simplicity of functions. One application of this feature is creating callback functions that can be passed around like objects. This is common practice in other languages like JavaScript, and can be very useful. This tutorial will show you how to create a callback function using the __invoke method.
Deciphering Magic Methods in PHP
Deciphering Magic Methods in PHP | Nettuts+
PHP provides a number of ‘magic’ methods that allow you to do some pretty neat tricks in object oriented programming. These methods, identified by a two underscore prefix (__), function as interceptors that are automatically called when certain conditions are met. Magic methods provide some extremely useful functionality, and this tutorial will demonstrate each method’s use.
Read full tutorial at Nettuts+
Round Robin Tournament Scheduler
Here's a snippet I wrote for a project that I thought might come in handy for someone else. It generates a schedule for a round robin tournament. I found some other snippets to do this, but I found them overly complicated or lacking in other ways.
Here's an example of what this code does:
< ?php $players = range(1, 8); echo 'Original List: ' . PHP_EOL; print_r($players); echo PHP_EOL; echo 'Round Robin Schedule: ' . PHP_EOL; print_r(generateRRSchedule($players)); ?>
Output:
Original List:
Array
(
[0] => 1
[1] => 2
[2] => 3
[3] => 4
[4] => 5
[5] => 6
[6] => 7
[7] => 8
)
Round Robin Schedule:
Array
(
[0] => Array
(
[0] => Array
(
[0] => 1
[1] => 8
)
[1] => Array
(
[0] => 2
[1] => 7
)
[2] => Array
(
[0] => 3
[1] => 6
)
[3] => Array
(
[0] => 4
[1] => 5
)
)
(...)
)PHP: Recursive Functions
A recursive function is a function that calls itself. This is useful for certain applications. This short tutorial will show an example of a recursive function in action.
Let's say we have the following array of categories. Normally this might be stored in a database, but we'll use an array here for simplicity.
/* Example category hierarchy: Tutorials - PHP -- OOP -- Tips - JavaScript -- Basics -- Frameworks --- jQuery --- MooTools News - PHP - Wordpress */ $cats = array(); $cats[1] = array('parent' => 0, 'title' => 'Tutorials'); $cats[2] = array('parent' => 1, 'title' => 'PHP'); $cats[3] = array('parent' => 2, 'title' => 'OOP'); $cats[4] = array('parent' => 2, 'title' => 'Tips'); $cats[5] = array('parent' => 1, 'title' => 'JavaScript'); $cats[6] = array('parent' => 5, 'title' => 'Basics'); $cats[7] = array('parent' => 5, 'title' => 'Frameworks'); $cats[8] = array('parent' => 7, 'title' => 'jQuery'); $cats[9] = array('parent' => 7, 'title' => 'MooTools'); $cats[10] = array('parent' => 0, 'title' => 'News'); $cats[11] = array('parent' => 10, 'title' => 'PHP'); $cats[12] = array('parent' => 10, 'title' => 'Wordpress');
In this case, a good application of a recursive function would be to display a breadcrumbs display of a particular category. In the example, we use the key 'parent' to identify the category that a subcategory belongs to, or 0 for the main categories.
Categories
- General (6)
- News (4)
- Projects (11)
- Lock My Stuff (2)
- Noty (1)
- TempServers (8)
- Software (8)
- Tips & Tutorials (46)
Archives
Links
Meta
