学科:Web前端
相关链接 | |
---|---|
软件开发 | Subject:Ruby Subject:设计师 |
设计/技术赏
编辑- 20 Things I Learned About Browsers and the Web, Built by Fi (www.f-i.com) for the Google Chrome Team. 很赞的电子书形式。
- The Story of send, by Google
- Connected China,碉堡了
- Beercamp 2012
- Конец света с Сотмаркетом,幻灯片形式的主页
- http://expo.getbootstrap.com/ —— 一些使用 bootstrap 框架的网站的展示,设计页面时可以拿来激发一下创意
- http://www.hitcon.org/2013/ —— 台湾骇客年会 页面
游戏
编辑- Bombermine - Massively Bomberman Online with up to 1000 players on the single map.
- BrowserQuest - mozilla demo,像素风迷你RPG游戏,在GitHub上开源
- http://html5rubik.com/ ,可以玩的3D魔方
- FullScreenMario.com
IE限定
编辑- Cut the Rope http://www.cuttherope.ie/
- Contre Jour http://www.contrejour.ie/
Chrome 限定
编辑- 寻找奥兹国 http://www.findyourwaytooz.com/
- Chrome Experiments http://www.chromeexperiments.com/
- Angry Birds Chrome
前沿开发工具
编辑- livecoding.io - helps you sketch with code, right in your browser.
- Light Table http://www.lighttable.com - 借助创新的交互方式创建网站、游戏
- Brackets http://brackets.io - an open source code editor for web designers and front-end developers. “沉浸式”编码,HTML、CSS 修改即时刷新,创新的 JS Debugging 方式
- http://tridiv.com - Tridiv is a web-based editor for creating 3D shapes in CSS
经典Demo
编辑- Ink File Picker + Aviary https://www.inkfilepicker.com/products/aviary/ - HTML 5 照片处理
- Old School Cassette Player with HTML5 Audio,HTML5 Audio demo,仿真磁带效果
- Mac OS X Lion CSS3 by Alessio Atzeni,Mac登录效果,Dock,窗口等等
- Responsive CSS3 Slider Without Javascript* by Ian Hansson (@teapoted)
- CSS3 Tutorial: Create A Sleek On/Off Button by Thoriq Firdaus
fun
编辑资源
编辑Javascript
编辑- TodoMVC - Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more
- AngularJS - HTML enhanced for web apps! —— Google维护的静态模板引擎
- Modernizr - Feature detect HTML5 and CSS3 features, with handy css and javascript hooks so you can progressively enhance to your heart's content.
- Rainbow - Javascript Code Syntax Highlighting
- NVD3 - 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.
- Chosen - a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly.
- impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
- Ember.js - Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. 有“Cocoa for the web”之称。
- jQuery Masonry - A dynamic layout plugin for jQuery. The flip-side of CSS floats. 你有一堆 float 的元素,这个插件会自动将这些元素按类似瀑布流的方式布局。
- JavaScript 异常档案 http://errors.totorojs.org/wiki/
- https://github.com/dobtco/jquery-resizable-columns Resizable table columns for jQuery.
- https://github.com/luis-almeida/unveil A very lightweight jQuery plugin to lazy load images
- https://github.com/BBC-News/Imager.js - 响应式图片解决方案
- Modernizr http://modernizr.com - a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
- http://YouMightNotNeedjQuery.com - Examples of how to do common event, element, ajax and utility operations with plain javascript.
- https://github.com/filamentgroup/tablesaw - A group of plugins for responsive tables.
CSS
编辑- CSSDeck - CSS版的dribbble
- typo.css - 中文网页重设与排版
- CSS Infos - CSS属性大全
- CSS Values,CSS属性取值
- http://purecss.io/ Prue, A set of small, responsive CSS modules that you can use in every web project.
html
编辑- HTML5 Rocks - A resource for open web HTML5 developers,强推,非常棒的站点,内容很不错
- HTML5 Bookmarks - daily news articles and bookmarks
- CoffeeKup is markup as CoffeeScript. 用CoffeeScript写html
- Google HTML/CSS Style Guide
- Media Query Snippets - A growing list of media queries for your responsible web design work.
- HTML5 Doctor - helping you implement HTML5 today
other
编辑- Font Awesome -The iconic font designed for use with Twitter Bootstrap
- Adobe® Edge Web Fonts - Edge Web Fonts is a free service that provides access to a large library of fonts for your web site. It’s one of the Edge Tools & Services from Adobe. Use of the fonts is free and unlimited, see the terms for details.
- oEmbed - oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
- Fontello - easy icon font composer
- WebPlatformTools.org - WebPlatformTools.org is a curated collection of free online web design and development services and tools that don't require local installation or registration to use.
- CodeMirror - a JavaScript component that provides a code editor in the browser.
- Browserhacks http://browserhacks.com/ - An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
- Easing Functions Cheat Sheet http://easings.net
- North - 一份创建现代 Web 项目的最佳实践指南
社区
编辑- JavascriptOO - JS 库分类查询站
- http://www.unheap.com/ - jQuery 插件收集站,分类齐备
- http://thecodeplayer.com/ Learn HTML5, CSS3, Javascript - video style tutorials
其他
编辑- WebPlatform.org,W3C牵头的文档社区
- JavaScript - MDN,MZ的知识库真心不错。
- CSS形状
- https://github.com/jtyjty99999/mobileTech —— 移动开发大量的整理与总结
- Fix Bad value X-UA-Compatible once and for all http://www.validatethis.co.uk/news/fix-bad-value-x-ua-compatible-once-and-for-all/ —— 如得票最高的评论一样,这个优化本身并不好,但其手段很有参考价值