reMarked.js - A Client-Side HTML To Markdown Converter In JavaScript

reMarked.js is a client-side HTML to Markdown converter.  Markdown is a great way to format texts for the internet. Without much experience an easy to read text is written — without the bloat of HTML tags.

However, this comes — like so many things — with a cost: performance will suffer and CPU is wasted since normally Markdown would have to convert your texts to HTML for every page impression. Only some way of caching could prevent this.

That is exactly the point where reMarked.js comes into play: Write texts in Markdown and save them in HTML. You won’t need a copy of the original Markdown input, since Markdownify can convert the saved HTML back to Markdown. And because page impressions are far more often than write actions, this gives you a simple way to increase your page’s performance.

Another benefit for a CMS or similar software is that now only one format of text is saved — HTML.  The user can now choose whether to write texts in plain HTML or use a full fledged WYSIWYG editor.  Of course he can write in Markdown.

The ultimate goal is integration with existing WYSIWYG html editors (eg: TinyMCE, CKeditor, Loki, CLeditor) to produce Markdown output. There are currently no WYSIWYG editors for markdown, only WYSIWYM, which still require knowledge of markdown syntax and its many quirky flavors.

 

Requirements: None
Demo: http://leeoniya.github.com/reMarked.js/
License: MIT License

UltraREPL - A JavaScript Development Environment Within JavaScript

UltraREPL is a JavaScript development environment, not just a toy or a simple debugger. Developing JS code inside of JavaScript itself enables a lot of powerful options that are otherwise difficult or cumbersome. The problem is Node's existing REPL doesn't provide the tools needed to take advantage of this potential, and there's not really any other options aside from (albeit awesome) browser based environments like Ace.

UltraREPL is designed to work with zero configuration as long as Node is installed. To get it you can clone it from this repo or simply install it with npm.

Requirements: Node.js
Demo: https://github.com/Benvie/Node.js-Ultra-REPL
License: MIT License

FlashJS - A JavaScript Library To Write ActionScript Code Into HTML

FlashJS is JavaScript graphics and game development engine with API similar to Flash one.  It`s HTML5 game development tool, based on verified for years Flash methodology.  Just write ActionScript 3 code inside of <actionscript> tag.

FlashJS was born at the crossroad of HTML / CSS and beautiful Flash objective model that is known by many interactive developers and fits great for game development.  This library allows to develop HTML5 games and applications in the way that is similar to ordinary AS3 development.  FlashJS was designed to show maximum perfomance for HTML/CSS platforms.

Browser Support

FlashJS is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.

• Latest Safari
• Latest Google Chrome
• Firefox 4+
• Internet Explorer 9+
• Opera 11

Requirements: None
Demo: http://flashjs.com/#examples
License: Apache License v2.0

jQuery cssConsole - A Plugin To Transform DOM Element Into Console/Terminal-Like Input

cssConsole is a jQuery plugin that allows you to transform DOM element into console/terminal like input.

Browser Support

• Internet Explorer 6+
• Safari
• Firefox
• Chrome
• Opera

Requirements: jQuery
Demo: http://www.michalko…ssConsole/#examples
License: MIT License

Tres - A Mobile JavaScript Web Development Framework Built On Top Of Backbone.js

Tres is a framework for developing JavaScript applications, with a focus on mobile phones and tablets. It's built on top of Backbone.js.

Tres is a development suite, focused on mobile devices (phones, tablets). It features automatic compilation of template formats such as Haml, as well as transparent CoffeeScript and Compass support (and thus, Sass.).

The idea is you'd develop a mobile web app locally, package it, and then use it with whatever other back-end you want.

Tres also provides default/desirable styles for creating mobile applications, such as headers, lists, buttons, and other common mobile app design patterns.

It also provides helpful JavaScript classes to easily implement behaviour and connect the UI with real data from say, an API.

Requirements: None
Demo: http://tres.io/
License: MIT License

JavaScript Style Badge - A Visual Fingerprint Of Your Coding Preferences

JavaScript Style Badge is a visual fingerprint of your coding preferences (and is somewhat similar to the Geek Code). To create a badge, simply fill out a JavaScript-related questionnaire; you will be awarded with your very own visualization.

Requirements: None
Demo: http://jsstyle.github.com/
License: Free

Neat - A Grid Framework Made Using Sass And Bourbon With Em Units And Golden Ratios

Neat is an open source fluid grid framework built on top of Sass and Bourbon using em units and golden ratios.  It was created with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div's.

Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. Go ahead and resize your browser, we'll wait.  Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and even store these values in project-wide variables to DRY up your code.

Neat is a decisive and simple fluid grid framework that gets you up and running in minutes, minus the headaches and also is a lightweight fluid grid framework that comes with few handy SASS mixins and a ton of flexibility.

Requirements: None
Demo: http://thoughtbot.com/neat/
License: MIT License

jQuery MDMagick - The Most Simple And Easy Way To Integrate A Markdown HTML WYSIWYG

jQuery MDMagick is the most simple and easy to integrate a Markdown HTML WYSIWYG editor into your next project.

How It Works

A special control buttons will be added on top of the selected input field with commands like: bold, italic, link, list, title and a preview div will be added on the bottom of the selected input field with a Markdown previsualization of the selected input field content.

Requirements: jQuery
Demo: http://fguillen.github.com/MDMagick/
License: Creative Commons 3.0

Fuel UX - A JavaScript Library To Extend Twitter Bootstrap With Additional Lightweight Controls

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

The Fuel UX Philosophy

The Fuel UX aim is to provide a suite of related but independent projects that help web developers integrate, manage, and customize quality libraries and utilities to more efficiently develop, maintain, test, and distribute their projects. Any improvements or fixes we make to the open source projects used will be contributed upstream if they are useful to the rest of the community.

Fuel UX Controls

• Combobox - Combines input and dropdown for easy and flexible data selection.
• Datagrid - Renders data in a table with paging, sorting, and searching.
• Pillbox - Easily manage selected items with color-coded text labels.
• Search - Combines input and button for integrated search interaction.
• Spinner - Provides convenient numeric input with increment and decrement buttons.

Features

• Fuel UX provides all of the styles and plugins from the revolutionary Twitter Bootstrap project, with the following additions:
• Fuel UX JavaScript controls (with unit tests) see them live
• Combobox - combines input and dropdown for easy and flexible data selection
• Datagrid - renders data in a table with paging, sorting, and searching
• Pillbox - manages selected items with color-coded text labels
• Search - combines input and button for integrated search interaction
• Spinner - provides convenient numeric input with increment and decrement buttons
• One-step installation and updates through volo
• AMD compatibility for modular structure and deployment optimization
• Grunt-based build script to easily create custom distribution files
• Namespaced CSS (just add a fuelux class) for safe use on existing sites

Requirements: Twitter Bootstrap
Demo: http://exacttarget.github.com/fuelux/
License: MIT License

Typeset.css - A No-Nonsense CSS Typography Reset For Styling User-Generated Content

Typeset.css is a no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content. 

Typeset.css is a CSS file (typeset.css) that includes all the styles you need to ensure content on your site is styled. Styles are only applied to areas that have a parent element with the class typeset, so it can be target content-specific markup.

Common user-generated content includes anchors, bold and italic text.  Also common phrase tags are <code>, strong and emphasis (much like bold and italic).

Typeset.css is not a CSS framework for styling the layout and design of your website - just specific blocks of content (e.g., blog posts, comments, forum content) that includes paragraphs, lists, code snippets, and so on.

When to use this

Any time you have stripped a browser’s default styles or haven’t specified styles for content elements, use Typeset.css. It’s great for:

• Blog posts
• Articles
• Comments
• Helper text in web apps
• Any other content blocks on a page

Never again add content to your web page just to find that you don’t have a consistent style for it.  Typeset was originally created for user-generated content on UserVoice feedback forums (here’s an example UserVoice forum), and then expanded to work with content generated by UserVoice-powered knowledge base articles (example article). Because users create these articles using a WYSIWYG editor with HTML-editing capabilities, we needed to make sure we had a base set of styles for any content-related markup.

Requirements: None
Demo: http://joshuarudd.github.com/typeset.css/
License: MIT License

Modest Maps - A JavaScript Library For Designers And Developers Who Want To Use Interactive Maps

Modest Maps is a small, extensible, and free library for designers and developers who want to use interactive maps in their own projects. It provides a core set of features in a tight, clean package with plenty of hooks for additional functionality.  It also has a nice collection of plugins to complement it, which can be found at the Modest Maps plugins page.

It doesn't try to include every possible map control or layer type. It's designed to be a simple platform to build upon. The code is well-designed, tested and deployed widely - thousands of maps already use the toolkit. And while we aim for the highest performance and compatibility with new technology, it is tested against older browsers, including Internet Explorer.

Browser Support

Compatible with Firefox, Chrome, Opera, iOS, Android, and Internet Explorer 7-9.

Requirements: None
Demo: http://modestmaps.com/
License: BSD

Fine Uploader - A JavaScript Library For File Uploading Without The Hassle

Fine Uploader (a.k.a valums file-uploader) is a JavaScript library (also available for Twitter Bootstrap) for file uploading without the hassle.  This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading into their website.

Uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome, and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.

Server support

You can use any server technology. We have already seen implementations with: ASP.NET,  ColdFusion,  Java, Node.js,  Perl,  PHP and  Python

Browser support

Tested in IE7+ (not IE10 yet), Firefox, Safari (OS X), and Chrome. Safari for Windows is not supported, nor is IE6 or earlier. It does not use Flash, jQuery, or any external libraries.

Requirements: None
Demo: http://fineuploader.com/fine-uploader-demo.html
License: MIT License or GPLv2

Simple Grid - A Basic Lightweight Responsive Grid With Mobile Support

Simple Grid was created for developers who need abarebones grid. Simple Grid works well with 1140pxlayouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Features

• Responsive - Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.
• Lightweight - Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.
• 1140px - No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.
• 12 Column - The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Requirements: None
Demo: http://thisisdallas.github.com/Simple-Grid/
License: MIT License

jQuery Kwicks - A Plugin Providing Sexy Sliding Panels With An Emphasis On Navigational Interaction

Kwicks for jQuery is a plugin providing sexy sliding panels with an emphasis on navigational interaction. Kwicks was originally a port of a MooTools effect (of the same name), but has since evolved into a highly configurable and versatile UI component.

Browser Support

Kwicks is supported in the following browsers:

• Chrome 12+
• FF 3.6+
• IE7+
• Opera 11+
• Safari 5+

Requirements: jQuery
Demo: http://devsmash.com/projects/kwicks/examples/horizontal
License: MIT License

JavaScript InfoVis Toolkit - Tools For Creating Interactive Data Visualizations For The Web

JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.   The toolkit implements advanced features of information visualization like TreeMaps, an adapted visualization of trees based on the SpaceTree, a focus+context technique to plot Hyperbolic Trees, a radial layout of trees with advanced animations (RGraph) and other visualizations.

Requirements: None
Demo: http://philogb.github.com/jit/demos.html
License: MIT License

Rekapi - A Keyframe Animation Library For JavaScript

Rekapi is a helpful library for making beautiful <canvas> and DOM animations. Here are some examples of what can be made with Rekapi:

• An animated graph.
• Confetti!
• Tweening Octocat.
• You can even make pie charts.

Rekapi is also a powerful tool for building animation apps. Examples of what can be built:

• Stylie.
• API sandbox.
• Easing formula tester.

Rekapi can also export your DOM animations to CSS3 @keyframes for enhanced performance. If you don't want to deal with timelines and tweening yourself, Rekapi is the library for you!

Requirements: Underscore, Shifty, Rekapi
Demo: http://rekapi.com/
License: MIT License

jBAR - A jQuery Plugin For A Call To Action Bar

jBar is a simple and lightweight jQuery notification banner I’ve created which is an alternative to the Hellobar. It allows you to create a simple call to action and bring it forward for the user to see at the top of your website. The user can then toggle the visibility of the bar by clicking the ribbon.

Requirements:
Demo: http://demo.toddmotto.com/jbar/jbar-1.php
License: Free

MagicNav.js - A jQuery Plugin For Generating Nav Links From Page Elements

MagicNav.js is a jQuery plugin for generating navigation links from page elements.  It can easily generate links from elements on your page. For example, generate links to all the articles on a page by linking to the article’s h1’s, and put them in a nav element on the page with an id of article-nav.

Requirements: jQuery
Demo: http://johnpolacek.github.com/MagicNav.js/
License: MIT License or GPL

Chibi - A Tiny JavaScript Micro-framework

Chibi is a tiny JavaScript micro-framework.  Id you think it's OK to serve up 30KB of framework over 3G just to manipulate a couple of DOM elements?  Of course you don't because that's an asshat move and you're no asshat.  You'll probably instead use a couple of lines of vanilla JavaScript, perhaps a little CSS :active with transitions, all while riding a unicorn bareback through a double rainbow, no hands.

Working on something a wee bit more complex? Unlike fat, grown-up frameworks, Chibi focuses on just the essentials, melted down and mixed with optimization rainbows to create a really light micro-framework that allows you to do awesome things, asshatory free.

Features

• Chibi is really tiny: 5KB minified, 2KB gzipped, small enough to stick inline on single page web apps, saving an extra HTTP request.
• Supports modern desktop and mobile browsers including Chrome, Firefox, Internet Explorer, Opera and Safari (see Browser Support below).
• Even supports creaky old browsers like IE6.
• No animation cruft, instead use CSS transitions like a nice person.
• In modern browsers, Chibi typically executes DOM manipulation 20% to 50% faster than grown-up frameworks.
• The lumpy, chewy bits
• Chibi's polyfill for document.querySelectorAll() is limited to browser CSS support and is not as fast as some dedicated selector engines. This means no input[type=text] or p:nth-child(even) selectors with IE6. Fortunately modern browser don't need this polyfill.
• Ancient browsers that support neither document.querySelectorAll() nor window.getComputedStyle can bugger off.

Browser Support

Chibi has been tested with and supports the following browsers:

• Android Browser 2.1 or higher
• Blackberry Browser 6 or higher
• Chrome
• Chrome Android
• Firefox 3.5 or higher
• Firefox Mobile
• Internet Explorer 6 or higher
• Internet Explorer Mobile 9 or higher
• Opera 10 or higher
• Opera Mini
• Opera Mobile 10 or higher
• Safari 3.2 or higher
• Safari Mobile 3.2 or higher
• Symbian^3 Browser or higher

Requirements: None
Demo: https://github.com/kylebarrow/chibi
License: MIT License

Templayed.js - The Fastest And Smallest Mustache Compliant JavaScript Templating Library

Templayed.js is a JavaScript library which is the fastest and smallest Mustache compliant JavaScript templating library written in 1733 bytes (uncompressed).

You can view the results at Mustache JS engine rumble: Mustache.js vs Handlebars.js vs Hogan.js vs templayed.js in which Templayed.js is pointed out as the fastest library in ALL browsers!

Requirements: None
Demo: http://archan937.github.com/templayed.js/
License: MIT License