Front-end resources

• Design Trend
• Style Guides
• UI/UX Checklist and Design Principal
• Fonts
• SEO
• Performance
• Service worker
• AMP
• Site / Content Generator
• Critical CSS
• CSS In Js
• Prototyping and Design
• Web Components
• Methodology

Design Trend

• Article - Logo Trend 2016: 2016年LOGO設計趨勢報告發布！

Style Guides

• astrum: A lightweight pattern library designed to be included with any web project.
• iframify: Auto gen iframe to solve UI broken
• Front-End Style-Guides: Definition, Requirements, Component Checklist
• documentcss: Create live style guides with interactive examples, that change as your design does.
• Frontify: Software for Brand Style Guides, Design Workflows & Visual Collaboration
• Brand AI: Create a hosted style guide, and integrate with your existing workflows and tools.
• Pivotal: Pivotal UI is a collection of React and CSS components styled for the Pivotal brand.

UI/UX Checklist and Design Principal

• The 23-Point UX Design Checklist
• Good User Interface: The 75 GoodUI ideas that we are about to show you, are being actively A/B tested by us and others.
• UX Project Checklist
• Tutorial: The Nine States of Design

Fonts

• Webfont: It's a tool to test and analyze webfonts that you intend to use in your websites or projects.
• Typio: Font inspiration with example
• Font Flame: Font Flame ambitiously tries to solve a problem most typography lovers have, namely font pairing.
• Google Fonts
• typeanything: customize the most necessary font settings for your next project

SEO

• SEO Checklist

Performance

• Tutorial: Web Font Loading Patterns: Web font load­ing may seem com­pli­cated, but it is ac­tu­ally quite sim­ple if you use these font load­ing pat­terns.
• Perf Rocks: Web performance matters
• PerfTool: Collect information about your website and display it in an easy-to-digest manner.

Service worker

• Example
• Introduction
• Step by Step
• Caching best practices & max-age gotchas
• Plugin
  • https://github.com/GoogleChrome/sw-precache
  • https://github.com/GoogleChrome/sw-toolbox

AMP

• https://ampbyexample.com/
• https://www.ampproject.org/docs/get_started/create_page.html

Site / Content Generator

• Static Site
• Simple Micro Generator
• JSON Server
• Photos Story Site Generator
• http://cdmedia.github.io/cms.js/

Critical CSS

• critical: Extract & Inline Critical-path CSS in HTML pages
• criticalCSS: Finds the Above the Fold CSS for your page, and outputs it into a file
• penthouse: Critical Path CSS Generator
• PostCSS BaseCSS: PostCSS plugin which extracts basic CSS rules for inlining them in your index.html, similar to critical CSS.
• PostCSS Criticall CSS: Critical CSS for use with CSS Modules.
• loadCSS: A function for loading CSS asynchronously

CSS In Js

• css-in-js: React: CSS in JS techniques comparison.
• babel-plugin-css-in-js: A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to
• Aphrodite: Inline Styles that work

Prototyping and Design

• Designing Interations
• https://labs.invisionapp.com/craft
• https://www.uxpin.com/
• https://marvelapp.com/
• https://www.sketchapp.com/
• http://www.adobe.com/hk_zh/products/experience-design.html
• https://www.weld.io/
• https://proto.io/

Web Components

• Custom Elements: Explore the world of Web Components

Methodology

• Maintainable CSS