Wen/Chen Hao
Source: Best "must know" open sources to build the new Web. I personally feel that this collection paste integration is quite complete.
Learning HTML 5 programming and design
- ★HTML5 Rocks: Major Feature Groups: HTML5 resources (HTML5 demo, tutorial). Source Code
- Very goodHTML5 Dashboard-Mozilla: the effect is amazing.
- WhatWG Developers, A clear HTML5 Technical Specification.
- ★StackOverflow: Well-known technical Q & A forum.
- ★Addyosmani, JQuery and JavaScript document tutorial
- Sohtanaka, JQuery and JavaScript articles and tutorials
- ★Nettuts +It is a website for Web developers and designers. It provides various technical tutorials and articles covering HTML, CSS, Javascript, CMS's, PHP, and Ruby on Rails.
- Codrops, Tutorials and web resources
- WebAppers, The best open source resources
- Tutorizine-PHP MySQL jQuery CSS tutorials, resources and gifts
- Mozilla JavaScript guide
- Codes snippetsSome code snippets collected by the author
Server Software
- ★Node. jsIs the JavaScript environment on the server, which uses the asynchronous event-driven mode. It enables Node. js to achieve very good performance in many Internet application architectures. Source code and real-time demonstration.
- PhantomJSWebKit is also a server-side JavaScript API. It supports various Web standards: DOM processing, CSS selector, JSON, Canvas, and SVG
- LighttpdA lightweight open-source Web server. News, documents, benchmarks, bugs, and download. Lighttpd support several well-known Web 2.0 websites, such as YouTube, wikipedia, and meebo.
- NGinxIs a lightweight Web server with extremely high performance. It is much higher than Apache. It took six years to go to Version 1.0.
- Apache HTTP ServerIs a popular Web server that supports multiple popular operating systems.
- ★PHPIt may be the most popular dynamic Web scripting language for servers.
- Of course, there areRuby,Python,Erlang,Perl,Java,. NET,Android,C ++,Go,Fantom,CoffeeScript,D,...
PHPFrameworks and tools
- ★WordPressIs an open source software based on the blog system. See how WordPress wins.
- DrupalIs a Content Management System (CMS ).
- CenturionIs a new open-source CMS, a flexible PHP5 Content Management Framework. With Zend Framework, its components adhere to General, simple, clear, and reusable design principles.
- PhpBBAn open-source forum (Discuz in China! More)
- ★SimplePie: Ultra-fast, easy to use, RSS and Atom feed PHP parsing.
- ★PHPthumb, PHP image processing Library
- ★PHPMailerPowerful full-featured PHP email Library
- PubSubHubbubProtocol, a simple, open, server-to-server pubsub (publish/subscribe) protocol-extensions of Atom and RSS.
- For more information, see-20 PHP libraries and 9 powerful free PHP libraries.
Database
- ★Apache CouchDBIs a document-oriented database management system. It provides a REST interface that uses JSON as the data format to operate on it, and can manipulate the organization and presentation of documents through views .. Source code.
- MonoQLIs a MySQL database management tool developed using PHP + ExtJS. The interface is very similar to a desktop application. It supports most common functions, including table design, data browsing/editing, data import/export, and advanced query.
- MariaDBIs a branch of MySQL, developed by Monty Widenius, the founder of MySQL. GPL is used to defend against license issues of all Oracle MySQL databases. Since Oracle's acquisition of SUN, the Community has never stopped worrying about the future of MySQL.
- ★SQLiteUnlike the Common Client/Server structure examples, the SQLite engine is not an independent process for communications between programs, but a major part of the connection to programs. Therefore, the main communication protocol is direct API calls in programming languages. This plays a positive role in total consumption, latency, and overall simplicity. The entire database (definition, table, index, and data itself) is stored in a single file on the host. Its simple design is completed by locking the entire data file at the beginning of a transaction. Library implements most SQL-92 standards, including transactions, which represent atomicity, consistency, isolation and durability (ACID), triggers and most complex queries. No type check is performed. You can insert a string into an integer column. Some users find that this is an innovation that makes the database more useful, especially when used together with non-type scripting languages. Other users think this is the main drawback.
- SQL online design editorThe picture in this section is like the online editor. An online tool for drawing database charts. Very powerful.
APIAnd Online Data
- ProgrammableWeb, The most popular Web Services and API directory.
- Google Data ProtocolA group of Google service data service APIs.
- Yahoo! Developer Network-APIs and Tools
- Yahoo! PipesVisualized online programming tool is a service used to filter, convert, and aggregate web content.
- ★TheYahoo! Query LanguageA web page query tool similar to SQL.
Online code and media Editor
- ★CodeRun StudioA cross-platform integrated development environment based on the JavaScript language. It is based on the design concept of cloud computing, allowing developers to easily develop, debug, and deploy network applications on the browser side. (See Coderun.com online development IDE.)
- Cloud9 IDE-Develop a Web IDE for JavaScript programs built based on Node. JS. It has a very fast text editor that supports coloring and display of JavaScript, HTML, CSS and these mixed codes.
- ★JsFiddle-Javascript online running display framework. This tool can effectively help web Front-end developers to effectively share and demonstrate front-end effects. It is simple and powerful (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
- Akshell,A cloud service that uses JavaScript on the server and online IDE To help developers develop applications quickly. It also provides cloud hosting, so deployment is real-time.
- JSONeditor, A good JSON Editor
- ★TinyMCEA lightweight browser-based WYSIWYG editor that supports various popular browsers and is written in JavaScript.
- Ext DesignerIs a desktop application tool that helps you quickly develop ExtJS-based user interfaces.
- ★LucidChart, An online Chart Drawing Software Based on the latest html5 technology, which is powerful and fast. To run this software, you must support html5 browsers.
- Balsamiq MockupsA powerful tool for product designers to draw line diagrams or product prototype interfaces.
- Color Scheme Designer3-a free online coloring Tool
- ★PixlrIs a free online image processing website from Sweden based on Flash. In addition to the operation interface and functions close to Photoshop, it is also a multi-language version that supports Simplified Chinese. (I used to introduce cool shell)
- AviaryIs an HTML5-based online image processing tool that can easily post-process images. Aviary API
- Favicon Generator,Online favicon (16 × 16) production tool.
Code resource and Version Control
- ★GitHubIs an Internet-based access service for projects that use the Git version control system.
- GitIs a distributed version control/Software Configuration Management software created by Linus to better manage Linux kernel development. It is extremely fast and efficient. It uses a distributed version library without the support of server software, making it extremely convenient to publish and exchange source code.
- Google CodeGoogle's official developer website contains APIs, development tools, and Development Technology references for various development technologies.
- Google Libraries APIGoogle deploys excellent JavaScript frameworks on its CDN and uses the Google Libraries API on our website to accelerate loading of JavaScript frameworks.
- SnipplrAn open source Code sharing community, known as Code 2.0. Unlike a general source code sharing website, it is not aimed at large website source code, but some programming code skills.
JavaScriptDesktop Application Framework
- ★JQueryIt is a fast and simple JavaScript library, which simplifies the HTML file traversing, event processing, animation, Ajax interaction, thus facilitating the rapid development of Web Page production. Source code, API, API browsing, very good documentation.
- ★OfficialJQuery User Interface (UI) library(Demonstration and documentation). Source Code, Themes Roller, Download.
- YUI 2-Yahoo! User Interface Library
- Mootools, A super lightweight web2.0 JavaScript framework
- PrototypeProvides object-oriented Javascript and AJAX
- DojoThe Dojo Toolkit is a powerful object-oriented JavaScript framework that cannot be defeated. It consists of three modules: Core, Dijit, and DojoX. Core provides operations such as Ajax, events, packaging, CSS-based querying, animations, and JSON. Dijit is a template-based web ui control library that can be replaced. DojoX includes some innovative/novel code and controls: DateGrid, charts, offline applications, cross-browser Vector Plotting, etc.
- ★Ext JS 4, The most powerful JavaScript framework in the industry.
- PHP. js, An open-source JavaScript library, which tries to implement PHP functions in JavaScript. Import in your projectPHP. JSLibrary, you can use your favorite PHP functions on the Static Page.
JavaScriptMobile and touch frameworks
- ★JQuery Mobile: JQuery version on mobile phones and tablets. JQuery Mobile not only brings jQuery core libraries to mainstream Mobile platforms, but also releases a complete and unified jQuery Mobile UI framework. Supports mainstream mobile platforms around the world. The jQuery Mobile development team said: we are very excited to develop this project. Mobile Web requires a cross-browser framework so that developers can develop real mobile Web websites. We will do our best to meet this demand. Sources.
- Zepto. jsZepto. js is a JavaScript framework that supports mobile WebKit browsers and has jQuery-compatible syntax. 2-5 k Library, through a good API to handle the vast majority of basic work. Sources.
- MicroJS: Microjs website applications list many lightweight Javascript class libraries and frameworks, which are small and mostly smaller than 5kb. In this way, you do not need to load a JS framework because you only need a function.
- ★PhoneGap: It is an open-source mobile application development platform. It can be used only in HTML and JavaScript to create applications that can run on multiple mobile devices. Sources.
- ★Sencha TouchSencha Touch is an HTML5 framework that supports multiple smartphone platforms (iPhone, Android, and BlackBerry. Sencha Touch can make your Web apps look like Native apps. The beautiful user interface components and rich data management are fully compatible with Android and Apple iOS devices based on the latest HTML5 and CSS3 WEB standards.
- JQtouchIs a jQuery plug-in. It is mainly used to implement some JavaScript libraries on the Webkit browser on the mobile phone, including animations, list navigation, default application styles, and other common UI effects. Sources.
- DHTMLX TouchJavaScript framework for mobile and Touch devices. DHTMLX Touch creates mobile web applications based on html5. It is not just a set of UI gadgets, but a complete framework that allows you to create cross-platform web applications for mobile and Touch devices. It is compatible with mainstream web browsers. Applications created with DHTMLX Touch can run smoothly on iPad, iPhone, and Android smartphones.
JQueryPlug-ins
- WaypointsJQuery is a plug-in used to capture various rolling events, such as browsing the content without pages, or fixing an element to prevent scrolling. Supports mainstream browser versions.
- Lazy loaderThe plug-in can implement delayed loading of images. When a webpage is relatively long, only images in the user's window will be loaded first. Images outside the window will not be loaded until you drag the scroll bar, this effectively avoids slow loading due to too many images.
- TweenJS: A simple and powerful Javascript library for tweening/animation.
- EasingsJQuery animation plug-in similar to Css3
- SpritelyThis plug-in can create the same animation effect as flash, for example, a flying bird and a dynamic scrolling background on the page.
- File Upload,JQuery File Upload plug-in 4.4.1
- Slideshow/CarouselPlug-in. Sources.
- Supersized-Full screen background/slide plugin
- MasonryI am a very cool automatic typographical plug-in. This jQuery tool can automatically Arrange Horizontal and vertical elements based on the grid, surpassing the original css. Sources.
- JQuery is simpleLayoutDemonstration, management of various sidebar, can change the size of the layout.
- Flexigrid-JQuery data table plugin
- IsotopeIs definitely an incredibleJQueryPlug-ins that you can use to create dynamic and intelligent la S. You can hide, display, and filter projects, re-sort, sort, and even more.
- Super GesturesThe jQuery plug-in can implement the mouse gesture function.
- MouseWheelDeveloped by Brandon Aaron.JQueryPlug-in used to add support for cross-browser mouse wheel.
- AutoSuggestThe jQuery plug-in allows you to add automatic functions.
- QTipA prettyJQueryTooltip plug-in. This plug-in is quite powerful.
- JQueryCharts and graphicUsed to create charts.
- JQuery Tools-Missing UI library
Other jQuery Resources
- Http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
- Http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
- Http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
- Http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
- Http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
- Http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
- Http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
- Http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
- Http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
- Http://gestureworks.com/features/open-source-gestures/
- Http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
- Http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/
HTML5Video Player
- ★Popcorn. jsIs an HTML5 Video framework. It provides easy-to-use APIs to synchronize interactive content, making operations on the attributes, methods, and events of HTML5 Video elements easy to use. (From Mozilla)
- LeanBack PlayerThe HTML5 video player does not rely on any JavaScript framework. Supports full-screen playback and volume control to play multiple videos on the same page. (From Google)
- Vid. lyProvides the Conversion Function for your uploaded videos and creates a short URL for the converted videos. Through Vid. ly, so that your video can be played on 14 different browsers and devices. You don't need to worry about the device that will be used by the person who wants to browse the video, in order to avoid incompatibility between the competition of various software giants and bring huge troubles to users, the short website allows you to share videos through Twitter, Facebook, and other methods. Vid. ly can also be embedded into other webpages through html code. The free Vid. ly account space is 1 GB, and the free account has no restrictions on playback or browsing.
JavaScriptAudio Processing and Visualization
- ★Use HTML5 and Flash,SoundManager V2It only uses a single API to provide reliable, simple, and powerful cross-platform audio processing.
- DSP, JavaScript voice Digital Signal Processing
- The RadiolabHyper Audio PlayerV1: WNYC Radiolab, SoundCloud, and Mozilla Drumbeat
- JPlayerA jQuery HTML5 audio/video library with complete functions
JavaScriptGraphics and 3D
- ★Processing. jsIt is an open programming language that can implement application of program images, animations, and interactions without using Flash or Java applets. It uses Web standards without any plug-ins.
- ★Javascript 3D engine:ThreeJSDeveloped by Mr Doob, a lightweight 3D engine that can be used by dummies without the need to know details. This engine can use <canvas>, <svg>, and WebGL.
- Shader Toy, An online coloring tool Editor (2D/3D) using WebGL ). the online application architecture allows you to get started without downloading any software. shader Toy contains a large number of practical pasters, such as light tracing, scene distance rendering, sphere, tunnel, deformation, and post-processing special effects.
- PhiloGL, Sencha's PhiloGL is one of the first WebGL development tools and provides a high level of functionality to build WebGL applications. Sencha created several demos to describe the framework's interactive 3D virtualization capabilities, such as 3D view of global temperature changes.
- WebGL InspectorLike Firebug and other Web debugging tools, this is a debugging tool for WebGL.
- WebGL frameworksA list of WebGL frameworks collected by Khronos Group.
- EaselJS, A JavaScript library using html5 canvas. Sources.
- JavaScript Game FrameworksList of free JS game frameworks. For more information, see the JS game framework list.
- Rapha rjlIs a small JavaScript library used to simplify the work of displaying vector graphs on pages. You can use it to draw various charts on the page and cut and rotate images. See Javascript vector map Lib-Rapha ë l
- JQuery SVGThe plug-in allows you to interact with SVG canvas.
- Google chart tools-Refer to the usage of Google APIs on this site for statistical charts.
- Arbor. jsIs a JavaScript framework for visualized data graphics created using webworkers and jQuery. It provides an efficient and force-directed Layout Algorithm for graphic organization and screen refresh processing.
JavaScriptBrowser Interface (HTML5)
- ★Modernizr-It is a function detection class library designed for HTML5 and CSS3. It can provide more convenient front-end optimization solutions based on the browser's support for HTML5 and CSS3. sources. A useful list of cross-browser Polyfills
- HTML5Shiv: This project aims to enable IE to recognize HTML5 elements.
- Polyfills: This project collects some code snippets using Javascript to support special features of different browsers, and some code requires Flash.
- YepNopeJS: An asynchronous conditional loader. Sources.
- JQueryCSS3 Finalise: Are you tired of adding a prefix to the CSS3 attribute of Each browser?
- ★Amplify. js: One set for web Application Data Management and Application CommunicationJQuery Component Library. Provides easy-to-use APIs. Amplify aims to simplify data processing in various formats by providing a unified program interface for various data sources. The storage components of Amplify use the localStorage and sessionStorage standards to process the storage information of the client, which may cause problems for some old browsers. Amplify 'adds some additional features to jQuery's ajax Method request. Sources.
- History. jsSupports HTML5 History/State APIs
- Socket. IOWeb socket programming.
JavaScriptTools
- ★{{Mustaches} Small JavaScript template engine.
- Json: select (), Css json Selector
- HeadJS, Asynchronous JavaScript loading. Its biggest feature is that it can not only execute in order, but also concurrently load js.
- JsDoc ToolkitAs an auxiliary tool, you only need to add corresponding annotations to JavaScript code according to the Conventions, and then it can automatically generate API documents based on these annotations.
- Responsive imageA pilot project to process responsive layouts images.
- UglifyJSIt is a Javascript parsing, compression, and formatting Tool Based on NodeJS. It supports Javascript platforms of any CommonJS module system.
- DhteumeuleuInteractive DOM scripts and DHTML open-source demos.
- BackboneIt is a front-end JS Code MVC Framework and is used by the famous 37 signals to build their mobile clients. It cannot replace Jquery and the existing Template library. Instead, they work together to build complex web front-end interactive applications. If the project involves a large amount of javascript code and implements many complex front-end interaction functions, you will first think of separating data from presentation. Jquery selector and callback can be used to easily achieve this. However, it is necessary for the structured organization of a large number of code for rich client WEB applications. Backbone provides the javascript code Organization function. Backbone mainly includes models, collections, views, events, and controller.
Client and Simulator
- BrowserShotChecks the compatibility of browsers and tests cross-browser splitters.
- Test everything... Enter a URL you want to test ......
- Android browserSimulator
- IPhone browserSimulator
- Opera browserSimulator
- ★FirebugAndFirefoxIntegration, you can view and debug your Web page.
CSS3And Font Library
- ★CSS3 MakerCCS3 Generator
- Easy to createCSS3 animations.Sencha Animator is a desktop application that can create CSS3 animations for WebKit browsers and touch mobile devices.
- CSSwarp-CSS text distortion generator
- Gradient Editor, A powerful Photoshop-style CSS gradient compiler. From ColorZilla
- ★Google Web FontsYou can use the Google Web Fonts API to browse all Fonts.
- @ Font-face Kit Generator, Converts fonts to Web
- Typetester, Compare the font.
- Media Queries. A set of responsive web designs.
- Pattern TAP, UI component.
Website (FULL)Template
- ★HTML5 BoilerplateIt is an HTML5/CSS/js template and is the best practice for cross-browser normalization, performance optimization, and stable optional functions such as cross-origin Ajax and Flash. Project developers call it a collection of skills to meet your needs for developing a cross-browser and future-oriented website. Sources.
- HTML5 starter packIs a clean and organized directory structure, which is suitable for many projects, some commonly used files, and simple Photoshop design templates.
- ★InitializrIs an HTML5 template builder that helps you create an HTML5 project within 15 seconds.
- Animated Portfolio Gallery(Tutorial)
- Slick MobileApp WebsiteIf you use jQuery and CSS to create a mobile app website.
- RSS ReaderIf you use jQuery Mobile to create an RSS Reader
- ★Single Page ApplicationsFriends who use jQuery (Backbone, Underscore ,...) Create a single page.
- Google TV Optimized TemplatesTraditional TVs have already begun to integrate with the Internet, but the industry is still exploring at this stage. For this reason, the web page will change its structure in the future. Google TV Optimized Templates is an open-source software made of HTML/JavaScript, just like its name is a Web page template Optimized for Google TV, which features a remote control as a prerequisite for operation, this allows users to control the operation without entering any text. In the future, in addition to dedicated remote controls, smart phones will also be used to control Google TV through W-iFi. The left side of the Optimized Templates interface displays the category, and the right side displays the films under the category, video Playback, switching, and full screen display can be completed through the arrow keys, Backspace, and Enter keys on the keyboard to facilitate future website developers to take a look. HTML5 templates use Google TV UI library, jQuery, and Closure.
