For web developer

Archive for the ‘Goodies’ Category

All Google Widgets In One Place: Google Web Elements

leave a comment

Google Web Elements is a fresh website where you can find all Google widgets in one place & easily add any of them to your websites.

The website simply offers a similar customization interface for each widget and generates the JavaScript code for embedding them.

Google Web Elements

It currently presents 8 widgets:

Calendar (for sharing your Google Calendar with your readers)
Conversation (a comment replacement where users can have a conversation)
Custom Search (custom Google search engine)
Maps (easier Google Maps integration)
News (latest Google News articles)
Presentations (for sharing Google Docs presentations)
Spreadsheets (for sharing Google Docs spreadsheets)
Youtube News (Youtube news videos from a selected list of publishers)

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with ,

High Quality Controls & Widgets for Prototype.js

leave a comment

Control Suite is a set of 6 high quality widgets and controls built with the Prototype JavaScript framework.

Each script is well tested, highly extensible and unobstrusive.

Select Multiple Textbox With Prototype

Suite has these widgets and controls:

Tab
Modal
TextArea
Select Multiple
Rating
Progress Bar

Different approach to star rating:

Prototype Star Rating

Suite is very well documented. You can easily reach the details of the APIs and this makes the product much more usable.

Requirements: Prototype JavaScript Library
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with , ,

JavaScript Widgets Library: Meteora

leave a comment

Meteora is set of cross-browser widgets and controls for quickly creating rich and customizable web applications without programming excessive JavaScript that is painful to debug in every browser.

JavaScript Widget Library

Meteora is based on the great mootools framework (version 1.11) and scripts that already work with mootools can be used with Meteora too!

To see some nice demos of this JavaScript widget library, check:

Editor widget
File browser widget
Table sort widget

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with , , ,

Maqetta – Open Source & Web-Based WYSIWYG Editor For Creating HTML5 Interfaces

leave a comment

Maqetta is a web-based WYSIWYG application which focuses on easing the process of creating HTML5 web pages.

The project is open source, does not require any plugins to run and can be used as a hosted service or by installing locally.

Its interface works with drag 'n' drops, there is support for desktop-like functions like undo/redo, preview in browser, save/save as and much more.

Maqetta HTML5 WYSIWYG App

This version of Maqetta has the best support for Dojo library and enables you to insert the widgets/controls (like buttons, accordion menus, calendar, etc.) of the library instantly.

The application makes getting feedback for the pages developed easier with the ability to create multiple reviews (for ex: for each version). The developer simply selects the pages to be reviewed and the system automatically sends e-mail invitations to reviewers. And, reviewers can either share their thoughts as text comments and/or on-screen graphical annotations (rectangles, ovals, arrows and text).

Maqetta has much more integrated features like the ability to create wireframes with the help of a sketch theme, mobile authoring tools and more.

Requirements: Java Version 5+ (for installing locally)
Compatibility: All Modern Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with ,

A JavaScript Library For In-Browser Code Editing: CodeMirror

leave a comment

CodeMirror is a JavaScript library that can convert any element on a web page into an interface for editing code.

It supports most of the popular languages (HTML, CSS, PHP, Python, Ruby, Java, C#, SQL, XML, etc.) and works cross-browser.

CodeMirror

There are many options offered like enabling undo, line numbers, the behaviour of "tab" and "enter" commands.

Also, with the help of its API, the editor can be totally manipulated.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with

WYSIWYG Editor With A File Manager: elRTE

leave a comment

elRTE is an open source and feature-rich WYSIWYG editor that is built using jQuery UI.

It performs all standard functions of an editor and has all the extras like undo-redo, advanced table management, creating a custom HTML element with a custom style + inserting it quickly and more.

elRTE WYSIWYG Editor

The interface is controlled via a single CSS file and can be customized pretty easily.

It has a built-in "save" button which can be attached to a JS function that saves the content that is pretty useful for helping users not to lose their content.

elRTE can be integrated with any file manager, however, there is elFinder, a file manager that has ready-to-use integration (can be used standalone too).

Requirements: jQuery, jQuery UI
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with

Extensible jQuery WYSIWYG Editor – CLEditor

leave a comment

CLEditor is a lightweight jQuery plugin for adding WYSIWYG HTML editors on web pages.

The plugin works by converting a standard textarea element and it is cross browser.

CLEditor - jQuery WYSIWYG HTML Editor

It is fully customizable like adding/removing/updating controls, enable/disable the use of CSS and much more.

Also, the WYSIWYG editor can be controlled with a set of methods provided.

CLEditor is very well-documented and comes with optional add-ons like "table plugin (visually displays tables inserted)" and "icon plugin (for seeing the smileys inserted)".

Requirements: jQuery
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with ,

Free JavaScript WYSIWYG Editor: TinyEditor

leave a comment

TinyEditor is a lightweight (8kb) JavaScript WYSIWYG editor that is free to use in both personal & commercial projects.

It is a standalone script (does not require any JS frameworks) & converts any given textarea to an editor

TinyEditor

The can be easily customized by updating the parameters (like removing some of the controls). And it is possible to style it via CSS:

TinyEditor can be resized, a starting content can be defined, set to generate HTML or XHTML code & more..

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with

Slick MooTools WYSIWYG Editor: MooEditable

leave a comment

MooEditable is a MooTools plugin that instantly converts a textarea field into a WYSIWYG editor.

It has a slick interface & comes with only the frequently used items like text formatting, lists, inserting images/links & undo/redo.

The plugin can also switch between design & HTML modes.

If you'd like to improve it further or customize to your needs,  It has a very detailed documentation.

MooTools WYSIWYG Editor

Requirements: MooTools
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with

Lightweight And Free HTML Editor: WMD

leave a comment

WMD is a lightweight HTML editor which is ideal for blog comments, forum posts & basic content management.

It can be implemented into any textarea with one line of code & with an extra line, live preview functionality can be implemented.

Lightweight HTML Editor: wmd

This is not a WYSIWYG editor. Rather, it is a WYSIWYM Markdown editor (what you see Is what you mean).

WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets.

Markdown: a simple markup language that’s as easy to read and write as plain-text email.

Requirements: No Requirements
Compatibility: All Major Browsers

Written by kisyrua

May 7th, 2011 at 8:03 am

Posted in Widgets

Tagged with ,