为Web前端开发人员准备的一批新的资源和工具

   <h3><a href="/misc/goto?guid=4958521906346593264">Moqups </a></h3>    <p><a href="/misc/goto?guid=4958521906346593264"><img alt="Moqups " src="https://simg.open-open.com/show/7fdda50663e77e1f2d37d5a385597da6.jpg" /></a></p>    <p>Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.</p>    <h3><a href="/misc/goto?guid=4958521906453295199">iView</a></h3>    <p><a href="/misc/goto?guid=4958521906453295199"><img alt="iView" src="https://simg.open-open.com/show/1325ff48c76db56c2f0c25f32e1dd306.jpg" /></a></p>    <p>iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.<br /> </p>    <h3><a href="/misc/goto?guid=4958521906565344614">Lettering.JS</a></h3>    <p><a href="/misc/goto?guid=4958521906565344614"><img alt="Lettering.JS" src="https://simg.open-open.com/show/c2bbcdff1711642260e7064271197acc.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521594853714048">gridster.js</a></h3>    <p><a href="/misc/goto?guid=4958521594853714048"><img alt="gridster.js" src="https://simg.open-open.com/show/9f0faa08c67b827c7f7d7448915df18a.jpg" /></a></p>    <p>This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.</p>    <h3><a href="/misc/goto?guid=4958521595568170396">Flex</a></h3>    <p><a href="/misc/goto?guid=4958521595568170396"><img alt="Flex" src="https://simg.open-open.com/show/8eaf9057e16b64f96cf13ed39c12f54f.jpg" /></a></p>    <p>Flex is an idea inspired by the old flash homepage on Adidas.com. Searching google for anything that resembled that effect, lead Jason English to a few plugins that were similar, but not the same. Saw one person say it was “quite impossible”, thought he would be a fun challenge.</p>    <h3><a href="/misc/goto?guid=4958521906741051580">JZoopraxiscope</a></h3>    <p><a href="/misc/goto?guid=4958521906741051580"><img alt="JZoopraxiscope" src="https://simg.open-open.com/show/bf9d4e60c0b73ce48d1fda17147727bc.jpg" /></a></p>    <p>JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope.</p>    <h3><a href="/misc/goto?guid=4958521906843882623">NVD3</a></h3>    <p><a href="/misc/goto?guid=4958521906843882623"><img alt="NVD3" src="https://simg.open-open.com/show/63e2eaa178475e2f2492eb4558e8f875.jpg" /></a></p>    <p>This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.</p>    <h3><a href="/misc/goto?guid=4958521595255856922">iosSlider – Touch Enabled jQuery Horizontal Slider Plugin</a></h3>    <p><a href="/misc/goto?guid=4958521595255856922"><img alt="iosSlider – Touch Enabled jQuery Horizontal Slider Plugin" src="https://simg.open-open.com/show/38461bb8babe634098a3313dbd54c96f.jpg" /></a></p>    <p>iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.</p>    <h3><a href="/misc/goto?guid=4958521906985717757">Zoomooz.js</a></h3>    <p><a href="/misc/goto?guid=4958521906985717757"><img alt="Zoomooz.js" src="https://simg.open-open.com/show/434ef5e768945460d8b75c763bcd8655.jpg" /></a></p>    <p>Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.</p>    <h3><a href="/misc/goto?guid=4958521595764760200">Holder.js</a></h3>    <p><a href="/misc/goto?guid=4958521595764760200"><img alt="Holder.js" src="https://simg.open-open.com/show/4365c09c73d6c2ae9e93ebd65389264e.jpg" /></a></p>    <p>Holder renders image placeholders entirely on the client side. It works both online and offline, and offers a chainable API to style and create placeholders with ease.</p>    <h3><a href="/misc/goto?guid=4958521907128721644">Pondasee: Front-end starter kit combined with the power of SCSS & Compass</a></h3>    <p><a href="/misc/goto?guid=4958521907128721644"><img alt="Pondasee: Front-end starter kit combined with the power of SCSS & Compass" src="https://simg.open-open.com/show/373cb5bd68211962410b195dbaedf0f5.jpg" /></a></p>    <p>Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point. Pondasee made with Compass dan SCSS language. Nested rules, variables, mixins, selector inheritance in Scss/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and maintain.</p>    <h3><a href="/misc/goto?guid=4958521907235781222">MaxImage 2.0 – jQuery Cycle plugin as Fullscreen Background Slideshow</a></h3>    <p><a href="/misc/goto?guid=4958521907235781222"><img alt="MaxImage 2.0 – jQuery Cycle plugin as Fullscreen Background Slideshow" src="https://simg.open-open.com/show/be77a99ba7ad7262cf26c6824ac0dc11.jpg" /></a></p>    <p>Introducing the first fullscreen background slideshow plugin that allows you to use jQuery Cycle plugin as a Fullscreen Slideshow. It supports almost all of jQuery Cycle’s functions, transitions, etc.</p>    <h3><a href="/misc/goto?guid=4958521907333361734">forkit.js</a></h3>    <p><a href="/misc/goto?guid=4958521907333361734"><img alt="forkit.js" src="https://simg.open-open.com/show/a31d7e644355085728c1995dc431ddcb.jpg" /></a></p>    <p>An experimental animated ribbon which reveals a curtain of additional content.</p>    <h3><a href="/misc/goto?guid=4958337921552167425">Lightbox2</a></h3>    <p><a href="/misc/goto?guid=4958337921552167425"><img alt="Lightbox2" src="https://simg.open-open.com/show/73974623d3bc8f1d6abf3ba6af514345.jpg" /></a></p>    <p>Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.</p>    <h3><a href="/misc/goto?guid=4958521907488385648">Create.js</a></h3>    <p><a href="/misc/goto?guid=4958521907488385648"><img alt="Create.js" src="https://simg.open-open.com/show/1d4a282ec5fd11f841cb8e6768bdfe1a.jpg" /></a></p>    <p>Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.</p>    <h3><a href="/misc/goto?guid=4958521907584434277">gauge.js</a></h3>    <p><a href="/misc/goto?guid=4958521907584434277"><img alt="gauge.js" src="https://simg.open-open.com/show/85c385dd861e76b8699795b98516ede1.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521907687538999">Responsive Grid System</a></h3>    <p><a href="/misc/goto?guid=4958521907687538999"><img alt="Responsive Grid System" src="https://simg.open-open.com/show/224153a2be98d5972b2218579853804a.jpg" /></a></p>    <p>The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.</p>    <h3><a href="/misc/goto?guid=4958521907788651857">jQuery UI Touch Punch</a></h3>    <p>Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.</p>    <h3><a href="/misc/goto?guid=4958347774448715826">Sidetap</a></h3>    <p><a href="/misc/goto?guid=4958347774448715826"><img alt="Sidetap" src="https://simg.open-open.com/show/0c3664a39c7dad4d174e3125dd2da61a.jpg" /></a></p>    <p>Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.</p>    <h3><a href="/misc/goto?guid=4958521907920859706">Custom HTML elements for modern browsers</a></h3>    <p>In order to allow for the recognition and parsing of custom HTML tags, X-Tag utilizes a special CSS event mechanism to listen for the creation/parsing of new custom elements (details here). This event is fired and processed by X-Tag regardless of whether the element is present in the source of the document, added by setting innerHTML, or generated dynamically using document.createElement. When the element is initially created, X-Tag inflates it and calls the onCreate lifecycle function. X-Tag also provides an onInsert lifecycle function that is run each time the element is injected into the DOM.</p>    <h3><a href="/misc/goto?guid=4958346891307100925">Photon</a></h3>    <p><a href="/misc/goto?guid=4958346891307100925"><img alt="Photon" src="https://simg.open-open.com/show/86b056451be20840dc6afd60beab2863.jpg" /></a></p>    <p>Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. It’s rather processor-intensive, so please use responsibly.</p>    <h3><a href="/misc/goto?guid=4958521908063664010">ResponsiveAeon</a></h3>    <p><a href="/misc/goto?guid=4958521908063664010"><img alt="ResponsiveAeon" src="https://simg.open-open.com/show/451f022fb598481c2bf39f60f385896d.jpg" /></a></p>    <p>This’s the new version from HTML5 NewAeon Framework. Now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript.</p>    <h3><a href="/misc/goto?guid=4958326719033978631">Enyo</a></h3>    <p><a href="/misc/goto?guid=4958326719033978631"><img alt="Enyo" src="https://simg.open-open.com/show/3d828b2804d121a1f70ba2f4023ed406.jpg" /></a></p>    <p>At the heart of Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.</p>    <p>Each piece of an Enyo application is a Component, and Components are constructed out of other Components.</p>    <p>For example, it’s easy to combine an < input > tag and a < label > tag into a LabeledInput Component, which you can use (and reuse) as one atomic piece. But that’s just the beginning. Larger pieces of functionality — a color picker, a fancy report generator, or an entire painting application — can also be packaged as reusable components.</p>    <p>Use the Enyo encapsulation model to divide and conquer large projects. No particular piece of an application need be especially complex. Because combining Components is central to Enyo’s design, it’s natural to factor complex code into smaller pieces. And because Enyo is modular, all these pieces tend to be reusable — within one project, across your projects, or even by other Enyo developers, if you choose.</p>    <h3><a href="/misc/goto?guid=4958345912089952915">The Annotator</a></h3>    <p>The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable. Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.</p>    <h3><a href="/misc/goto?guid=4958521908243875220">jQuery.my: jQuery plugin that binds HTML with JS objects. In real-time.</a></h3>    <p><a href="/misc/goto?guid=4958521908243875220"><img alt="jQuery.my: jQuery plugin that binds HTML with JS objects. In real-time." src="https://simg.open-open.com/show/9c5e96c3ebbb783361047f7e795ba203.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521908341611196">FlexSlider 2</a></h3>    <p><a href="/misc/goto?guid=4958521908341611196"><img alt="FlexSlider 2" src="https://simg.open-open.com/show/74288fdc527987b9976663e009cf2fe4.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521908439509976">ViniSketch Designer</a></h3>    <p><a href="/misc/goto?guid=4958521908439509976"><img alt="ViniSketch Designer" src="https://simg.open-open.com/show/33c26aca9dd17f34f35dc6bafa3076de.jpg" /></a></p>    <p>Powerful visual editors for designing your application’s GUI and dataflow; and code editors to keep your development under control. An advanced multitarget engine for managing your application for each device you’re targeting. </p>    <h3><a href="/misc/goto?guid=4958521594740884578">Repo.js</a></h3>    <p><a href="/misc/goto?guid=4958521594740884578"><img alt="Repo.js" src="https://simg.open-open.com/show/c66e7bd43d1c3202c9e43a5f82eb093a.jpg" /></a></p>    <p>Repo.js is a light-weight jQuery Plugin that lets you easily embed a Github repo onto your site. As a plugin or library author this is a great way to showcase the contents of a repo on a project page.</p>    <h3><a href="/misc/goto?guid=4958521908585231045">jqmPhp</a></h3>    <p><a href="/misc/goto?guid=4958521908585231045"><img alt="jqmPhp" src="https://simg.open-open.com/show/40dd0be135417a93d91b89dc4f43d10c.jpg" /></a></p>    <p>jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.</p>    <h3><a href="/misc/goto?guid=4958521908697185827">PaperFold for iOS</a></h3>    <p><a href="/misc/goto?guid=4958521908697185827"><img alt="PaperFold for iOS" src="https://simg.open-open.com/show/75723be97361cbaba33d382a4e6d4176.jpg" /></a></p>    <p>PaperFold is a simple iOS control that allows hiding of views on the left and right side of the screen by dragging the middle view. The left view supports only 1 fold. The right view supports variable number of folds.</p>    <h3><a href="/misc/goto?guid=4958521908792578832">jVectorMap</a></h3>    <p><a href="/misc/goto?guid=4958521908792578832"><img alt="jVectorMap" src="https://simg.open-open.com/show/f92c627673df19866d90e6baa105b80c.jpg" /></a></p>    <p>jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers</p>    <h3><a href="/misc/goto?guid=4958521908905429767">Cage app</a></h3>    <p><a href="/misc/goto?guid=4958521908905429767"><img alt="Cage app" src="https://simg.open-open.com/show/2dd66cb2ebe8470b1abdeeeb00af8a07.jpg" /></a></p>    <p>ollaboration just got a whole lot easier. A simple way for designers and teams to share, manage and approve their creative work.</p>    <h3><a href="/misc/goto?guid=4958521909006791016">Flickrshow 7.2</a></h3>    <p><a href="/misc/goto?guid=4958521909006791016"><img alt="Flickrshow 7.2" src="https://simg.open-open.com/show/30041bed7779737bd063d5b6ffc4ae6f.jpg" /></a></p>    <p>Flickrshow is a very simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, and Internet Explorer 6.</p>    <h3><a href="/misc/goto?guid=4958521909106611350">Jam</a></h3>    <p>For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.</p>    <h3><a href="/misc/goto?guid=4958349332079886289">Mousetrap</a></h3>    <p><a href="/misc/goto?guid=4958349332079886289"><img alt="Mousetrap" src="https://simg.open-open.com/show/9ca6b0e4d403d697644ab023def09af0.jpg" /></a></p>    <p>Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.6kb minified and gzipped and 3kb minified.</p>    <h3><a href="/misc/goto?guid=4958346887528756533">RefineSlide</a></h3>    <p><a href="/misc/goto?guid=4958346887528756533"><img alt="RefineSlide" src="https://simg.open-open.com/show/926658b51ef6b058710e479c41088553.jpg" /></a></p>    <p>RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it’s probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.</p>    <h3><a href="/misc/goto?guid=4958521909294192098">EpicEditor</a></h3>    <p><a href="/misc/goto?guid=4958521909294192098"><img alt="EpicEditor" src="https://simg.open-open.com/show/00b4b54a6f5c1641f23795df1150a4a8.jpg" /></a></p>    <p>EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.</p>    <h3><a href="/misc/goto?guid=4958329381251973437">PDF.JS</a></h3>    <p><a href="/misc/goto?guid=4958329381251973437"><img alt="PDF.JS" src="https://simg.open-open.com/show/66db5bbc8734a117e56bd4831613e70d.jpg" /></a></p>    <p>pdf.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance.</p>    <p>pdf.js is community-driven and supported by Mozilla Labs. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.</p>    <h3><a href="/misc/goto?guid=4958521909442716352">Backbone.Notifier</a></h3>    <p><a href="/misc/goto?guid=4958521909442716352"><img alt="Backbone.Notifier" src="https://simg.open-open.com/show/8322de94bd01c25e84331d4f91abe7d8.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958349332901788566">Recline </a></h3>    <p><a href="/misc/goto?guid=4958349332901788566"><img alt="Recline " src="https://simg.open-open.com/show/15e76d5ebe5092e471888b127c291269.jpg" /></a></p>    <p>Building on Backbone, Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).</p>    <h3><a href="/misc/goto?guid=4958521909585986060">Brackets</a></h3>    <p><a href="/misc/goto?guid=4958521909585986060"><img alt="Brackets" src="https://simg.open-open.com/show/1f01ef8e7f96d5041c41ccad81d551b7.jpg" /></a></p>    <p>With features like Live Development and Quick Edit, Brackets streamlines development without getting in your way.</p>    <h3><a href="/misc/goto?guid=4958338175196780124">Foundation 3</a></h3>    <p><a href="/misc/goto?guid=4958338175196780124"><img alt="Foundation 3" src="https://simg.open-open.com/show/6f886a97919d9ff687368f2ce8f0a853.jpg" /></a></p>    <p>Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.</p>    <h3><a href="/misc/goto?guid=4958521909725992988">Laravel</a></h3>    <p>Laravel is a clean and classy framework for PHP web development. Freeing you from spaghetti code, Laravel helps you create wonderful applications using simple, expressive syntax. Development should be a creative experience that you enjoy, not something that is painful. </p>    <h3><a href="/misc/goto?guid=4958521909822857806">tación.JS: A jQuery Mobile framework for creating real-time presentations</a></h3>    <p><a href="/misc/goto?guid=4958521909822857806"><img alt="tación.JS" src="https://simg.open-open.com/show/8d2f1eaa6c623e1dbd130563579f0136.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521909917119698">Streak</a></h3>    <p><a href="/misc/goto?guid=4958521909917119698"><img alt="Streak" src="https://simg.open-open.com/show/4b46a95e24fa617b2671336e86bb824e.jpg" /></a></p>    <p>Streak was born out of the frustration of constantly having to switch between our inbox and separate systems. Our goal is to take the work out of managing the processes you do everyday.</p>    <h3><a href="/misc/goto?guid=4958521910028068333">Mahatma Gantti: A simple PHP Gantt Class</a></h3>    <p><a href="/misc/goto?guid=4958521910028068333"><img alt="Mahatma Gantti: A simple PHP Gantt Class" src="https://simg.open-open.com/show/a0ba62ceb37213706aa7255076cf1786.jpg" /></a></p>    <h3><a href="/misc/goto?guid=4958521910130944335">Infinite-social-wall</a></h3>    <p><a href="/misc/goto?guid=4958521910130944335"><img alt="Infinite-social-wall" src="https://simg.open-open.com/show/7f25db68f5dc8b39a838f333caddf66b.jpg" /></a></p>    <p>An infinite social stream based on RSS feeds with a MySQL backend.</p>    <h3><a href="/misc/goto?guid=4958521594951403049">HTML5 Sortable</a></h3>    <p><a href="/misc/goto?guid=4958521594951403049"><img alt="HTML5 Sortable" src="https://simg.open-open.com/show/04de1e0d46da72205b069e935e6bc913.jpg" /></a></p>    <p>TML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.</p>