본문 바로가기
프로그램개발/ClientSide(JavaScript,Angular,Vue)

Frontend UI Development Guide

by 크레도스 2014. 6. 19.



  • Guides
  • Architecture
  • Workflow
    • Video: Javascript Development Workflow of 2013 by Paul Irish + Slides
    • Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.
    • Grunt is a task-based command line build tool for JavaScript projects.
    • Brunch is an assembler for HTML5 applications. It‘s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.
    • Front-end Process - Flat Builds and Automation
    • CSSCSS: A CSS redundancy analyzer that analyzes redundancy.
    • Helium: JavaScript tool to scan your site and show unused CSS.
    • JSLint for detecting errors or problems by static analysis of JavaScript programs.
    • JSHint for more flexible static analysis of JavaScript programs.
    • JSLint Error Explanations for explanations of the warnings given by JSLint and JSHint.
    • ImageOptim-CLI: Make lossless optimisation of images part of your automated build process.
    • jpegoptim: Utility to optimize/compress JPEG files.
    • Pngcrush is an optimizer for PNG (Portable Network Graphics) files.
    • Glue is a simple command line tool to generate CSS sprites.
    • Roots A light, super fast, and intuitive build system meant for rapid advanced front end development.
    • Sparky.js is a client-side application scaffold which helps those who want to have organized structure in their app, but don't want to subscribe to a particular client-side MVC framework.
    • Mimosa is a batteries included web development workflow tool that will get you coding in seconds rather than hunting down plugins and wrangling config for hours.
    • Automaton: Task automation tool built in JavaScript.
    • Cartero: A modular client side asset manager.
    • Mod is a task-based workflow tooling for web, it help developers quickly build robust and high-performance web applications.
    • Wraith is a screenshot comparison tool.
  • Weekly & Daily Resources
  • Programming & Markup Languages
  • Frameworks
  • Cross Browser
  • Cross Device
  • Patterns & Snippets
  • DOM Manipulation
    • xui: a super micro tiny dom library for authoring html5 mobile web applications.
    • Tire offers a more lightweight alternative to libraries such as jQuery, Prototype and Zepto.
  • Typography
  • Services (Free & Commercial)
  • Animation
    • Velocity.js: Re-implementation of jQuery's $.animate() that adds 20x the speed while also drastically improving the UI animation workflow.
    • Stylie
    • animate.less, is a bunch of cool, fun, and cross-browser animations converted into LESS for you to use in your Bootstrap projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
    • Canvas Advanced Animation Toolkit is an scene graph director-based animation framework for javascript based in the concept of a timeline.
    • tween.js: Super simple, fast and easy to use tweening engine which incorporates optimised Robert Penner's equations.
    • Janis is a lightweight Javascript framework that provides simple animations via CSS transitions for modern browsers on the web as well as mobile devices.
    • Rekapi: A keyframe animation library for JavaScript
    • CanvasScript3 is a Javascript library for the new HTML5 Canvas with an interface similar to ActionScript3. This library enables Sprite Groups, Layers, Mouse Events, Keyboard Events, Bitmap Effects, Tween Animations etc.
    • Shifty is a tweening engine built in JavaScript. It is designed to fit any number of tweening needs.
    • emile.js is a no-frills stand-alone CSS animation JavaScript framework.
    • Firmin: a JavaScript animation library using CSS transforms and transitions.
    • $fx(): A compact, lightweight Javascript Library for animation.
    • Keanu is a micro-lib for animation on Canvas/JS.
    • jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.
    • GreenSock Animation Platform is a suite of tools for scripted animation.
    • scripty2 is an open source JavaScript framework for advanced HTML-based user interfaces. Or simply put, scripty2 helps you build a more delicious web.
    • Animator.js: JavaScript animation library.
    • Processing.js: is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
    • jQuery Transit: Super-smooth CSS3 transformations and transitions for jQuery.
    • Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.
    • Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5.
    • Year Of Moo: Angular.js Animations
    • animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
    • Approach
    • Magic is a CSS3 framework with many animations, it's simple to use and many animations are cross-browser compatible.
  • Widgets
  • Visualization
  • Validation & Forms
    • Mention.js Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin
    • ALAJAX
    • Parsley.js: Validate your forms, frontend, without writing a single line of javascript!
    • mailcheck.js: A jQuery plugin that suggests a right domain when your users misspell it in an email address.
    • one-validation is a collection of regular ｅxpressions for general validation purposes.
    • nextVal is an easy-to-use, flexible and robust form validation plugin for jQuery.
    • Fields.js creates collections of fields. Each field is constantly evaluated for validity, and is accessible through the collection.
    • IV.js was created to provide a intutive way to provide validation filters that are useful in processing user input.
    • Ladda: A UI concept which merges loading indicators into the action that invoked them.
    • jQuery Super Labels
  • Transitions
  • Numbers
  • Time and Dates
    • moment.js: A 5.5kb javascript date library for parsing, validating, manipulating, and formatting dates.
    • XDate
    • Pikaday
  • Search
    • Fullproof
    • lunr.js is a simple full text search engine for your client side applications.
  • Testing
  • Template Engines
  • Routing And URLs
  • Rich Text Editors
  • Code Viewers & Editors
  • Refactoring
  • Performance
  • Modularity & Loaders
  • Package Management
    • bower
    • volo
    • parcel is easy package management using a file server and path conventions, with built in support for Amazon S3. It is designed to encode package metadata, including name, version and OS within a path. The conventions allow this metadata to be queried, without the need for a database.
    • jam.js
    • component
  • Image Manipulation
  • HTTP
  • WebSocket
    • Specification
    • socket.io aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms.
    • engine.io is the implementation of transport-based cross-browser/cross-device bi-directional communication layer for Socket.IO.
    • SockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between the browser and the web server.
  • Error Handling & Debugging
  • Documentation
    • DevDocs is an all-in-one API documentation reader with a fast, organized, and consistent interface.
    • dexy is a free-form literate documentation tool for writing any kind of technical document incorporating code.
    • docco is a quick-and-dirty, hundred-line-long, literate-programming-style documentation generator.
    • styledocco generates documentation and style guide documents from your stylesheets.
    • Ronn builds manuals. It converts simple, human readable textfiles to roff for terminal display, and also to HTML for the web.
    • dox is a JavaScript documentation generator written with node. Dox no longer generates an opinionated structure or style for your docs, it simply gives you a JSON representation, allowing you to use markdown and JSDoc-style tags.
    • YUIDoc is a Node.js application that generates API documentation from comments in source, using a syntax similar to tools like Javadoc and Doxygen.
    • coddoc is a jsdoc parsing library. Coddoc is different in that it is easily extensible by allowing users to add tag and code parsers through the use of coddoc.addTagHandler and coddoc.addCodeHandler. coddoc also parses source code to be used in APIs.
    • sphinx a tool that makes it easy to create intelligent and beautiful documentation
    • Using JSDoc
  • Windows 8 Style
  • Video & Audio
    • SublimeVideo: Modular Video Player Framework.
    • Video.js: The open source HTML5 video player.
    • FlowPlayer: The video player for the web.
    • longtailVideo: dual-mode HTML5 & Flash player.
    • howler.js
    • Stratus 2 soundcloud player
    • jPlayer is the completely free and open source (MIT) media library written in JavaScript.
    • MediaElement.js: HTML5 audio and video players in pure HTML and CSS.
    • audio.js is a drop-in javascript library that allows HTML5’s "audio" tag to be used anywhere.
  • Library Collections
    • Unheap: A tidy repository of jQuery plugins
    • jster
    • MicroJS helps you discover the most compact-but-powerful microframeworks.
    • JSPkg: reference library and package manager
    • jquer.in is a curated collection of jQuery plugins.
  • Other Front End Collections
  • Chat
  • Prototyping
  • JSON
    • JSON Query Language is a query and processing language specifically designed for the popular JSON data model.
    • Oboe.js makes it really easy to start using json from a response before the ajax request completes; or even if it never completes.
  • Presentations
  • Scrolling
  • Keyboard
  • Tables & DataGrids
  • Security
  • Layout
    • Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest.
    • CollagePlus: This plugin for jQuery will arrange your images to fit exactly within a container.
    • Masonry JavaScript Cascading grid layout library
  • Jobs & Hiring
  • Misc


    • 저작자표시 비영리 변경금지 (새창열림)

    '프로그램개발 > ClientSide(JavaScript,Angular,Vue)' 카테고리의 다른 글

    김영보선생님의 객체지향 이야기  (0) 2014.06.26
    오픈튜토리얼 자바스크립트 강좌  (0) 2014.06.20
    JavaScript 의 핵심 키워드 2가지  (0) 2014.06.09
    정순,역순 정렬하는 방법  (0) 2014.06.07
    JavaScript 공부 방법  (0) 2014.04.30

    관련글

    티스토리툴바