跳至內容

學科:Web前端

來自維基學院
相關連結
軟體開發 Subject:Ruby Subject:設計師

設計/技術賞

[編輯 | 編輯原始碼]


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

[編輯 | 編輯原始碼]

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.
  • 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 項目的最佳實踐指南

入門連結

數據統計