性能测试工具sysbench简介

[不指定 2011/06/29 13:23 | by ipaddr ]

sysbench是一款开源的多线程性能测试工具，可以执行CPU/内存/线程/IO/数据库等方面的性能测试。数据库目前支持MySQL/Oracle/PostgreSQL。本文只是简单演示一下几种测试的用法，后续准备利用sysbench来对MySQL进行一系列的测试。具体的一些参数设置，需要根据不同的测试要求来进行调整。

下载
http://sourceforge.net/projects/sysbench/

OS | 评论(0) | 引用(0) | 阅读(4851)

解决netstat中TIME_WAIT过多的问题

[不指定 2011/06/16 09:45 | by ipaddr ]

调节内核参数：
net.ipv4.tcp_tw_reuse = 1
net.ipv4.tcp_fin_timeout = 30

如果，你的服务器，和所有可能的客户，都不处于NAT环境，还可以打开
net.ipv4.tcp_tw_recycle = 1

这里要注意一点，普通公网的机器不能起用回收，否则会导致问题。
参考：

http://zhangle.is-a-geek.org/2010/11/tcp_tw_recycle%E5%92%8Cnat/


如发现系统存在大量TIME_WAIT状态的连接，通过调整内核参数解决，
vim /etc/sysctl.conf
编辑文件，加入以下内容：
net.ipv4.tcp_syncookies = 1
net.ipv4.tcp_tw_reuse = 1
net.ipv4.tcp_tw_recycle = 1
net.ipv4.tcp_fin_timeout = 30
然后执行 /sbin/sysctl -p 让参数生效。

net.ipv4.tcp_syncookies = 1 表示开启SYN Cookies。当出现SYN等待队列溢出时，启用cookies来处理，可防范少量SYN攻击，默认为0，表示关闭；
net.ipv4.tcp_tw_reuse = 1 表示开启重用。允许将TIME-WAIT sockets重新用于新的TCP连接，默认为0，表示关闭；
net.ipv4.tcp_tw_recycle = 1 表示开启TCP连接中TIME-WAIT sockets的快速回收，默认为0，表示关闭。
net.ipv4.tcp_fin_timeout 修改系?默认的 TIMEOUT 时间

SA | 评论(0) | 引用(0) | 阅读(13121)

百万级PHP网站架构工具箱

[不指定 2011/06/15 19:33 | by ipaddr ]

　　在了解过世界最大的PHP站点，Facebook的后台技术后，今天我们来了解一个百万级PHP站点的网站架构：Poppen.de。Poppen.de是德国的一个社交网站，相对Facebook、Flickr来说是一个很小的网站，但它有一个很好的架构，融合了很多技术，如 Nigix、MySql、CouchDB、Erlang、Memcached、RabbitMQ、PHP、Graphite、Red5以及Tsung。

　　Poppen.de目前有200万注册用户数、2万并发用户数、每天20万条私有消息、每天25万登录次数。而项目团队有11个开发人员，两个设计，两个系统管理员。该站点的商业模式采用免费增值模式，用户可以使用搜索用户、给好友发送消息、上载图片和视频等功能。

　　如果用户想享受不受限制发送消息和上载图片，那么就得根据需要支付不同类型的会员服务，视频聊天及网站其他服务也采用同样的策略。

　　Nginx

　　Poppen.de 所有的服务都是基于Nginx服务上的。前端有两台Nginx服务器在高峰期提供每分钟15万次请求的负载，每个机器已经有四年寿命，并且只有一个CPU 和3GB RAM。Poppen.de拥有三台独立的图像服务器，由三台Nginx服务器为*.bilder.poppen.de提供每分钟8万次请求服务。

　 　Nginx 架构中一个很酷的设计就是有很多请求是由Memcached处理的，因此请求从缓存中获取内容而不需要直接访问PHP机器。比如，用户信息页(user profile)是网站需要密集处理的内容，如果把用户信息页全部缓存到Memcached上，那么请求直接从Memcached上获取内容。 Poppen.de的Memcached每分钟可以处理8000次请求。

　　架构中有三个Nginx图像服务器提供本地图像缓存，用户上载 图像到一个中央文件服务器。当向这三个Nginx之一中请求图像时，如果服务器本地中没有存在该图像，则从中央文件服务器下载到该服务器上作缓存并提供服务。这种负载均衡的分布式图像服务器架构设计可以减轻主要存储设备的负载。

　　PHP-FPM

　　该网站运行在PHP- FPM上。共有28台双CPU、6GB内存的PHP机器，每个机器上运行100个PHP-FPM的工作线程。使用启用了APC的PHP5.3.x。 PHP5.3可以降低CPU和内存使用率的30%以上。

　　程序代码是基于Symfony1.2框架之上开发的。一是可以使用外部资源，二是能够提高项目开发进度，同时在一个著名的框架上可以让新开发人员更容易加入到团队中来。虽然没有任何事情都是十全十美的，但可以从Symfony框架中得到很多好处，让团队可以更多的精力放在Poppen.de的业务开发上去。

　　网站性能优化使用XHProf，这是Facebook开源出来的一个类库。这个框架非常容易个性化和配置，能够可以缓存大部分高代价的服务器计算。

　　MySQL

　　MySQL是网站主要的RDBMS。网站又几个MySql服务器：一台4CPU、32GB的服务器存储用户相关信息，如基本信息、照片描述信息等。这台机器已经使用了4 年，下一步计划会使用共享集群来替换它。目前仍基于这个系统上进行设计，以简化数据访问代码。根据用户ID进行数据分区，因为网站中大部分信息都是以用户为中心的，如照片、视频、消息等。

　　有三台服务器按主-从-从配置架构提供用户论坛服务。一台从服务器负责网站自定义消息存储，到现在有 2.5亿条消息。另外四台机器为主-从配置关系。另外由4台机器配置成NDB族群专门服务于密集型写操作数据，如用户访问统计信息。

　　数据表设计尽量避免关联操作，尽可能缓存最多的数据。当然，数据库的结构化规范已经完全被破坏掉了。因此，为了更容易搜索，数据库设计创建了数据挖掘表。大部分表是MyISAM型表，可以提供快速查找。现在的问题是越来越多的表已经全表锁住了。Poppen.de正考虑往XtraDB存储引擎上迁移。

　　Memcached

　　网站架构中Memcached应用相当多，超过45GB的高速缓存和51个节点。缓存了Session会话、视图缓存以及函数执行缓存等。架构中有一个系统当记录被修改时可以自动地把数据更新到缓存中去。未来改善缓存更新的可能方案是使用新的Redis Hash API或者MongoDB。

　　RabbitMQ

　 　在 2009年中开始在架构中使用RabbitMQ。这是一个很好的消息解决方案，便于部署和集中到这个架构中去，在LVS后运行了两台RabbitMQ服务器。在上个月，已经把更多的东西集成到该队列中，意味着同一时刻有28台PHP服务器每天要处理50万次请求。发送日志、邮件通知、系统消息、图像上载等更多的东西到这个队列中。

　　应用PHP-FPM中的fastcgi_finish_request()函数集成队列消息，可以把消息异步发送到队列中。当系统需要给用户发送HTML或JSON格式响应时，就调用这个函数，这样用户就没有必要等到PHP脚本清理。

　　这个系统可以改善架构资源管理。例如，在高峰期服务每分钟可以处理1000次登录请求。这表示有1000并发更新用户表保存用户的登录时间。由于使用了队列机制，可以按相反的顺序来运行这些查询。如果需要提高处理速度，只需要增加更多的队列处理者即可，甚至可以增加更多的服务器到这集群中去，而不需要修改任何配置和部署新节点。

　　CouchDB

　　日志存储CouchDB运行在一台机器上。在这台机器上可以根据模块/行为进行日志查询 /分组，或者根据错误类型等等。这对定位问题非常有用。在使用日志聚合服务CouchDB之前，不得不逐台登录到PHP服务器上设法日志分析定位问题，这是非常麻烦的。而现在把所有的日志集中到队列中保存到CouchDB中，可以集中进行问题检查和分析。

　　Graphite

　　网站使用Graphite采集网站实时信息并统计。从请求每个模块/行为到Memcached的命中和未命中、RabbitMQ状态监控以及Unix负载等等。Graphite服务平均每分钟有4800次更新操作。实践已经证实要监测网站发发生什么是非常有用的，它的简单文本协议和绘图功能可以方便地即插即 用的方式用于任何需要监控的系统上。

　　一件很酷的事情是使用Graphite同时监控了网站的两个版本。一月份部署了Symfony框架新版本，以前代码作为一个备份部署。这就意味着网站可能会面临性能问题。因此可以使用Graphite来对两个版本在线进行对比。

　　发现新版本上的Unix负载表较高，于是使用XHProf对两个版本进行性能分析，找出问题所在。

　　Red5

　　网站为用户也提供了两种类型的视频服务，一种是用户自己上载的视频，另外一种是视频聊天，用户视频互动和分享。到2009年年中，每月为用户提供17TB的流量服务。

　　Tsung

　　Tsung 是一个Erlang编写的分布式基准分析工具。在Poppen.de网站中主要用于HTTP基准分析、MySQL与其他存储系统(XtraDB)的对比分析。用一个系统记录了主要的MySQL服务器的流量，再转换成Tsung的基准会话。然后对该流量进行回放，由Tsung产生数以千计的并发用户访问实验室的服务器。这样就可以在实验环境中与真实场景非常接近。

SA | 评论(0) | 引用(0) | 阅读(5452)

mk-table-sync - Synchronize MySQL table data efficiently

[不指定 2011/06/15 13:52 | by ipaddr ]

主从数据一致性校验的利器: mk-table-sync
http://www.maatkit.org/doc/mk-table-sync.html

Usage: mk-table-sync [OPTION...] DSN [DSN...]

mk-table-sync synchronizes data efficiently between MySQL tables.

This tool changes data, so for maximum safety, you should back up your data before you use it. When synchronizing a server that is a replication slave with the --replicate or --sync-to-master methods, it always makes the changes on the replication master, never the replication slave directly. This is in general the only safe way to bring a replica back in sync with its master; changes to the replica are usually the source of the problems in the first place. However, the changes it makes on the master should be no-op changes that set the data to their current values, and actually affect only the replica. Please read the detailed documentation that follows to learn more about this.

Sync db.tbl on host1 to host2:

  mk-table-sync --execute h=host1,D=db,t=tbl h=host2

Sync all tables on host1 to host2 and host3:

  mk-table-sync --execute host1 host2 host3

Make slave1 have the same data as its replication master:

  mk-table-sync --execute --sync-to-master slave1

Resolve differences that mk-table-checksum found on all slaves of master1:

  mk-table-sync --execute --replicate test.checksum master1

Same as above but only resolve differences on slave1:

  mk-table-sync --execute --replicate test.checksum \     --sync-to-master slave1

Sync master2 in a master-master replication configuration, where master2's copy of db.tbl is known or suspected to be incorrect:

  mk-table-sync --execute --sync-to-master h=master2,D=db,t=tbl

Note that in the master-master configuration, the following will NOT do what you want, because it will make changes directly on master2, which will then flow through replication and change master1's data:

  # Don't do this in a master-master setup!   mk-table-sync --execute h=master1,D=db,t=tbl master2
DB | 评论(0) | 引用(0) | 阅读(8177)

Best “must know” open sources to build the new Web

[不指定 2011/06/13 12:51 | by ipaddr ]
http://www.b2bweb.fr/molokoloco/best-must-know-ressources-for-building-the-new-web-%E2%98%85/

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

 

 

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

 

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 ;)

Net | 评论(0) | 引用(0) | 阅读(9575)
分页： 1/1 第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]