鱼漂 (一直漂)

Here the dump of my ultimate collection of online Web development resources and directory, oriented for the Front-End user Interface (UI).

HTML5 and all related open standards are moving fast, but for now, building a whole Website/WebApp on top of that can be very inconsistent, especially across various browsers experiences.

So… how to embrace new awesome web technologies ?

Now, as Web Developers and Designers, we have to build on top of more stable framework. It’s here that come JavaScript jQuery, acting like interface into browser’s implementations. That how we can expect more stability and consistency.

There is not only JS, building a state-of-the-art webSite. That now like making a big movie, with hundred specialized tasks and jobs…

From A to Z, this is huge ! Even if i think we don’t need to be an expert for all… (Thus we try) ^^

Best things in life are free, time to learn !

LEARNING HTML 5, CODING AND DESIGN

• Awesome HTML5 Dashboard by Mozilla
• WhatWG Developers, A clear technical specification of HTML5 for Web developers
• ★ StackOverflow : Welcome to Q&A for professional and enthusiast programmers
• ★ Addyosmani, jQuery & JavaScript articles and tutorials for the community
• Sohtanaka, jQuery & JavaScript articles and tutorials for the community
• ★ Nettuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites. We cover HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails.
• Codrops, tutorials and web resources
• WebAppers, best Open Source Resources for Web Developers
• Tutorialzine – PHP MySQL jQuery CSS Tutorials, Resources and Freebies
• Mozilla JavaScript guide for developers
• WebDev and jQuery wiki codes snippets, compiled by myself ;)

SERVER SIDE SOFTWARES

• ★ Node.js is a server-side JavaScript environment that uses an asynchronous event-driven model. This allows Node.js to get excellent performance based on the architectures of many Internet applications. Sources and live demo.
• PhantomJS is a server-side headless WebKit with JavaScript API. It has fast and native support for various web standards : DOM handling, CSS selector, JSON, Canvas, and SVG
• Lighttpd is a lightweight open-source web server. News, documentation, benchmarks, bugs, and download. Lighttpd powers several popular Web 2.0 sites like YouTube, wikipedia and meebo.
• NGinx, high performance and lightweight web server as well as a reverse proxy and e-mail platform
• The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems
• ★ PHP :  Hypertext Preprocessor. Server-side HTML embedded scripting language. It provides web developers with a full suite of tools for building dynamic websites
• FFmpeg – Tools to record, convert, stream and play multimedia content including libavcodec and libavformat, two libraries used by many other open source projects
• And… Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom, CoffeeScript, D, …

PHP FRAMEWORKS AND TOOLS

• ★ WordPress is web software you can use to create a beautiful website or blog
• Drupal is an open source content management platform (CMS).
  Come for the software, stay for the community
• Centurion is a new open-source CMS delivered as a flexible PHP5 Content Management Framework. We simplify the use of Zend Framework, which is ZF extended. Our components are generic, simple, clear and reusable.
• phpBB is a free flat-forum bulletin board software solution
• ★ SimplePie : Super-fast, easy-to-use, RSS and Atom feed parsing in PHP
• ★ PHPthumb, PHP image manipulation library
• ★ PHPMailer is a fully featured email transfer class for PHP
• A simple, open, server-to-server web-hook-based pubsub (publish/subscribe) protocol as an extension to Atom and RSS. Parties (servers) speaking the PubSubHubbub protocol can get near-instant notifications

DATABASE MANAGEMENT

• ★ Apache CouchDB provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests and allow document-oriented database that can be queried and indexed in a MapReduce fashion using JavaScript. CouchDB also offers incremental replication with bi-directional conflict detection and resolution. Sources.
• MonoQL is an AJAX web application to manage MySQL databases. MonoQL will provide all major features of phpMyAdmin for MySQL, including database & table design, data browsing & editing, advanced querying & more
• MariaDB is a community-developed branch of the MySQL database, under GPL status, as opposed to any uncertainty of MySQL license status under its current ownership by Oracle.
• ★ SQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine.
• SQL online designer editor

API AND ONLINE DATA

• ProgrammableWeb, Most Popular Web Services and API Directory
• The following Google services provide APIs that implement the Google Data Protocol. Each API has its own set of guides and resources, including information about using client libraries
• Yahoo! Developer Network – APIs & Tools
• Yahoo! Pipes An interactive feed aggregator and manipulator
• ★ The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services

ONLINE CODE AND MEDIA EDITING

• ★ CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.
• Cloud9 IDE – by javascripter for javascripters
• ★ jsFiddle – Simple and powerfull online editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
• Akshell, a server-side JavaScript development and hosting. Create web apps in JavaScript right from your browser
• JSONeditor, easy editing of json strings
• ★ TinyMCE is a powerful WYSIWYG editor control for web browsers such as MSIE or Mozilla that enables the user to edit HTML content in a more user friendly way
• Ext Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment.
• ★ Wireframes / UI Design  From static wireframes to rapid prototypes, web developers can do it all with LucidChart. Collaborate with your client and design team in real-time to cut down on iterations.
• Balsamiq Mockups, online sketch helping you in your design
• Color Scheme Designer 3
• ★ Pixlr, Photoshop like image editing direct in your browser
• Aviary, free online photo editor. Plus Aviary API for developers
• Favicon Generator

CODE RESOURCES AND VERSION CONTROL

• ★ GitHub is the best way to collaborate with others. Fork, send pull requests and manage all your public and private git repositories.
• Git is an extremely fast, efficient, distributed version Source Code Management tool ideal for the collaborative development of software.
• Google Code est destiné aux développement relatif à Google. L’entreprise y diffuse des codes sous licence libre ainsi que la liste des API utilisables
• The Google Libraries API is a content distribution network (CDN) and loading architecture for the most popular, open-source JavaScript libraries
• Code Snippets, Snipplr Social Snippet Repository

JAVASCRIPT FRAMEWORKS FOR DESKTOP

• ★ jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Sources, API, API Browser, Fancy Doc.
• ★ The official jQuery User Interface (UI) library (Demos and Doc). Sources, Themes Roller, Download.
• YUI 2 — Yahoo! User Interface Library
• Mootools, a super lightweight web2.0 JavaScript framework
• Prototype provides class-style Object Oriented and AJAX
• Dojo unbeatable JavaScript Tools – The Dojo Toolkit
• ★ EXT4, the industry’s most advanced JavaScript framework for building the next generation of cross-platform web apps.
• PHP.js, PHP functions implemented client-side in JavaScript

JAVASCRIPT FRAMEWORKS FOR MOBILE AND TOUCH

• ★ jQuery Mobile : Touch-Optimized Web Framework for Smartphones & Tablets
  A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Sources.
• Zepto.js is a minimalist inlinable framework for mobile WebKit browsers, with a jQuery-like chaining syntax. Sources.
• MicroJS : Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit !
• ★ PhoneGap : Embed your code and access core functions on Android, iPhone and Blackberry using JavaScript. Sources.
• ★ Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices
• JQtouch, a jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. Sources.
• DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touchscreen devices

JQUERY PLUGINS

• jQuery Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element with or without infinite scrolling enabled
• This jQuery plugin is an on-demand plugin loader, also known as a Lazy loader
• TweenJS : A simple but powerful tweening / animation library for Javascript
• Css3-like Easings for jQuery animations
• Spritely is a jQuery plugin for creating dynamic character and background animation (Pan, Scroll, Sprite)
• jQuery File Upload User Interface Plugin 4.4.1
• JQuery Slideshow/Carousel Plugin. Sources.
• Supersized – Full Screen Background/Slideshow jQuery Plugin
• jQuery Masonry is a layout plugin for jQuery that arranges elements vertically then horizontally according to a grid, minimizing gaps. Sources.
• jQuery simple Layout Demo that manage slidable and resizable, multi-pane
• Flexigrid – jQuery datagrid plugin
• Isotope, an exquisite jQuery plugin for magical layouts Reveal & hide items with filtering Re–order items with sorting Dynamic, intelligent layouts
• The Super Gestures jQuery plugin records gestures made by the user’s mouse. This is great for touch interface web applications
• jQuery MouseWheel is a plugin that adds cross-browser mouse wheel support
• AutoSuggest jQuery Plugin, add some auto-completing functionality
• qTip is an advanced tooltip plugin it provides you with tonnes of features like rounded corners and speech bubble tips
• jQuery Charts and graphic tool
• jQuery Tools – The missing UI library for the Web

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/

HTML5 VIDEO PLAYERS

• ★ Popcorn.js is an event system for HTML5 Video, with strong syntactic sugar for chaining < video > methods and adding events to the timeline. (From Mozilla)
• LeanBack Player HTML5 Video Player with Subtitle-Support (From Google)
• A single URL for your video. Vid.ly keep up to date with the thousands of smart phones, features phones, and tablets on the market and which type of video they support. When a mobile device visits your vid.ly url we deliver up the correct video format

JAVASCRIPT AUDIO PROCESSING AND VISUALISATION

• ★ Using HTML5 and Flash, SoundManager V2 provides reliable, simple and advanced, cross-platform audio under a single API
• DSP, sound Digital Signal Processing for JavaScript
• The Radiolab Hyper Audio Player v1, brought to you by WNYC Radiolab, SoundCloud and Mozilla Drumbeat
• jPlayer, a jQuery HTML5 Audio / Video Library with comprehensive API

JAVASCRIPT GRAPHICS AND 3D

• ★ Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins
• ★ Javascript 3D Engine : ThreeJS by Mr Doob
  The aim of the project is to create a lightweight 3D engine with a very low level of complexity — in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.
• Shader Toy, online shaders visualizer and editor (2D/3D)
• PhiloGL, a WebGL Framework for Data Visualization, Creative Coding and Game Development
• What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL
• WebGL frameworks listed by the Khronos Group
• EaselJS, a JavaScript library for working with the html5 canvas element. Sources.
• Free JavaScript Game Frameworks To Create A Web-Based Fun
• Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web (SVG). If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
• jQuery SVG plugin that lets you interact with an SVG canvas
• Display live data on your site Google chart tools are powerful, simple to use and free. Try out our rich gallery of interactive charts and data tools.
• Arbor.js, a graph visualization library exploring nodes and relations and using web workers and jQuery

JAVASCRIPT BROWSERS INTERFACES (HTML5)

• ★ Modernizr – Feature detect HTML5 and CSS3 features, with handy css and javascript hooks so you can progressively enhance to your heart’s content. Sources. Useful list of cross-browser Polyfills
• HTML5Shiv : The latest HTML5 JavaScript shim for IE to recognise and style the HTML5 elements
• Polyfills : A way of getting the browser to behave and support the latest specifications. This is a collection of code snippets that support different native features of browsers using JavaScript (and if required, Flash in some cases).
• YepNopeJS : An Asynchronous Conditional Resource Loader helping detecting browser missing features. Sources.
• jQuery CSS3 Finalise : Tired of adding prefix for each browser when it comes to the new CSS3 attributes ?
• ★ Amplify.js : Store, request and pub/sub. Amplify API  goal is to simplify all forms of data handling by providing a unified API for various data sources. Amplify’s store component handles persistent client-side storage, using standards like localStorage and sessionStorage, but falling back on non-standard implementations for older browsers. Sources.
• History.js gracefully supports the HTML5 History/State APIs
• Socket.IO aims to make realtime apps possible in every browser and mobile device

JAVASCRIPT TOOLS

• ★ Minimal templating with {{mustaches}} in JavaScript
• json:select(), CSS-like selectors for JSON
• HeadJS, Asynchronus JavaScript loading. The only script in your <HEAD>
• JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
• Responsive image, an Experiment with Mobile-First Images that Scale Responsively & Responsibly
• UglifyJS JavaScript API, to compress JavaScript code
• Dhteumeuleu, interactive DOM scripting and DHTML open-source demos, powered with native JavaScript
• Backbone give your JS App some Models, Views, Collections, and Events
  Backbone supplies structure to JavaScript-heavy applications by providing models key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

CLIENT SIDE AND EMULATING

• BrowserShot, check Browser Compatibility, Cross Platform Browser Test
• Test everything… Enter a URL you want to test
• Android browser emulator
• Iphone browser emulator
• Opera browser emulator
• ★ Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

CSS3 and FONTS

• ★ CSS3 Maker and generator
• Create amazing WebKit CSS3 animations with ease.  Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.
• CSSwarp – CSS Text to Path Generator
• Gradient Editor, a powerful Photoshop-like CSS gradient editor from ColorZilla
• ★ Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API (open source license)
• @font-face Kit Generator, convert fonts for the Web
• Typetester, compare fonts for the screen
• Media Queries. a collection of responsive web designs
• Pattern TAP, Users Interface (UI) components

WEBSITE (FULL) TEMPLATES

• ★ HTML5 Boilerplate A rock-solid base HTML/CSS/JS template for HTML5 awesome, for a fast, robust and future-proof site.
  After more than three years in iterative development, you get the best of the best practices baked in : cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. Sources.
• HTML5 starter pack is a clean & ordered directory structure that fit for most projects, a few of the most common files (html, css, js), as well as a basic Photoshop web design template, again with an groups structure fit for most projects.
• ★ Initializr is an HTML5 templates generator to help you getting started with an HTML5 project, in 15 seconds !
• Animated Portfolio Gallery with jQuery
• Making a Slick MobileApp Website with jQuery & CSS
• How to Build an RSS Reader with jQuery Mobile
• ★ Building Single Page Applications With jQuery’s Best Friends (Backbone, Underscore, …)
• Google TV Optimized Templates, to make website optimization for TV easier, we are providing templates – 2 in HTML5 and 2 in Flash – that developers can download and modify with their own content and style. The HTML5 version of these templates are utilizing the Google TV UI library, jQuery based and Closure based. The UI library can be used independent of the templates.

I know this is a monkey list ! Keep calm, you don’t have to read all… at least if you click on all starred links, it’s cool ;)

PS : Come take a look to my browser start page portal, giving WebDev an efficient access to Web resources… And don’t forget #TAG searches in this site :)

PS2 : Thanks a lot to #FOWD providing me wifi connection and inspiration ;)

How to determine which MySQL High-Availability solution is best?

What is really tricky with MySQL is the number of possible HA solutions. From the simplest the most complex let’s list the most common ones:

- MySQL replication with manual failover
- Master-Master with MMM manager
- Heartbeat/SAN
- Heartbeat/DRBD
- NDB Cluster

These technologies are by far, not a one size fits all and many deployments use combination of solutions. I will not cover ScaleDB and Continuent because I know almost nothing of these solutions. There are many more questions you need to ask yourself before being able to pick the right one. Below, I listed the most common questions, I might have missed some.

1. What level of HA do you need?

Since all the technologies do not offer the same level of availability, this is a first important sorting factor. Here are estimates of the level of availability offered by the various solutions.

From the table, if your requirements are for 99.99%, you are restricted to NDB Cluster while if it is only 99% you have more options. I recall that the level of availability is hard to estimate and subject to debate. These are the usually accepted level of availability for these technologies.

2. Can you afford to lose data?

Obviously, if you are concerned about loss of data, you are most likely using the InnoDB storage engine, since MyISAM is not transactional and do not sync data to disk. Similarly, MySQL replication is an asynchronous process and although it is fairly fast at transferring data between the master and the slaves, there is a window of time where data loss is possible.

If you can afford to lose some data, you can consider “MySQL replication” and “Master-Master with MMM manager” otherwise, you can only consider the other three solutions.

3. Does your application use MyISAM only features?

There are some features like Full text indexes and GIS indexes that are supported only by MyISAM. The HA solutions that work well with MyISAM are “MySQL replication” and “Master-Master with MMM manager”. Depending on the application, the MyISAM Full text indexes might be replaced by another search engine like Sphinx in order to remove the restriction. There is no HA solution other than the ones based on replication that handles GIS indexes.

4. What is the write load?

The HA solutions we present are not equal in term of their write capacity. Due to the way replication is implemented, only one thread on the slave can handle the write operations. If the replication master is multi-cores servers and is heavily writing using multiple threads, the slaves will likely not be able to keep up. Replication is not the only technology that put a strain on the write capacity, DRBD, a shared storage emulator for Linux, also reduce by about 30% (very dependent on hardware) the write capacity of a database server. In term of write capacity here are you choices.

5. For what level of growth are you planning?

Since NDB Cluster is an integrated sharding environment, if you are planning for a growth that will need sharding (splitting the database over multiple servers), then you might need to take a serious at that solution. If not, then, apart from the write capacity, all the solutions are approximately equal.

6. How qualified is your staff or support company?

There is a quite direct relationship between the level of availability and the complexity of the solution. In order to reach the promised level of availability, the staff maintaining the HA setup, either internal or external, must have the required level of expertise. The required expertise level is summarized in the table below.

7. How deep are your pocket?

The last aspect that needs to be considered is the budget, complexity is expensive. We will consider two types of setup. The first one is a basic proof of concept of the technology with the hardware tested, the data imported and basic testing and documentation. A proof of concept setup is a good way to get used to a technology and experiment with it in a test environment. The other type of setup we will consider is a full production setup that includes extensive testing, fire drills, full documentation, monitoring, alerting, backups, migration to production and post migration monitoring. Of course, it is the safest way to migrate an HA solution to production. All the times here are estimates based on field experience, the values presented here are fairly typical and contains some buffers for unexpected problems. Although an HA solution can be built remotely through a KVM over IP and adequate remote power management, an on site intervention with physical access to the servers is the preferred way, especially for the most complex solutions.

Editor’s Note: We’ve gotten many questions about the time estimates mentioned here. The above estimates shouldn’t be used to compare against any specific situation. Time will vary greatly depending on your project. For example, “setting up replication” can be as simple as CHANGE MASTER TO, and can take as little as a few minutes in some circumstances. Yves’s estimate is for a project to create a replication slave for HA purposes, not for “setting up replication.” There is a big difference between an HA project and a DBA task. – Baron Schwartz

作为一个Web开发人员，有时候也需要关注一下你的网站在移动设备上的表现，或者需要通过移动设备来管理网站。下面为你推荐7款免费的Android应用，有助于你更好的工作。

1.Firefox 4 Beta Mobile

2.AndFTP

AndFTP是Android手机上的支持FTP,SFTP,SCP,FTPS的客户端软件，可管理多个FTP服务器，自带文件浏览器和FTP文件浏览器，提供下载和上传的功能，可对文件进行重命名、删除、复制以及权限设置、创建目录等操作。

3.Android CodePad

Android CodePad是一个简单的源码浏览器，支持语法高亮显示，支持所有类C、类Bash和类XML的语言的语法高亮，可自动根据文件来选择不同的语法。

4.Devcheats

该软件为开发者提供了在手机上直接浏览各种开发工具的api手册，包括：php, python, ruby on rails, jquery, css, seo, apache, regular expressions, svn, bash, c++, drupal, gcc, gdb, html5, javascript, microformats, mysql, postgreesql, unix, wordpress.

5.CSS Reference

这是一个用来学习CSS所有的属性、包括语言、示例以及浏览器限制说明，提供CSS1和CSS2的属性列表，同时还包含了可直接浏览效果的例子：border-style, cursor, font-style, font-variant, font-weight, text-decoration and text-transform等属性.

6.W3C Cheatsheet

W3C Cheatsheet提供快速访问HTML5的有用信息。

7.Eval Your Java Script

该工具可让你测试JavaScript的执行情况，在编辑框中输入JavaScript代码，然后运行来获取结果。不过这工具我相信用起来非常费劲，在手机上输入JavaScript代码？别逗了！

原文出处：开源中国社区