This article records the treasure chest of a program ape.

The main content of this article is some used libraries, tools, routines, or front-end organizations of concern, etc. Anyway, the front-end Swiss Army knife is the best way to summarize this article.

You can contact me in the following ways:

directory

The body of the

The front organization

Although mixed two foreign companies, but labor English this skill point or gray… So, I focus on the site mainly in Chinese

The name of the Recommend index Remarks/Instructions
Git U u u u u Labor and management know this is not a pure front-end community… However, as the largest gay community in the world, countless front-end projects have been launched here without Git.
MDN U u u u u Without explanation, there are countless resources waiting to be explored
Awesomes.cn U u u u do Countrymen maintain a front-end repository, deep on Github
MOOC (Massive Open Online Courses) U u u u do Lots of online computer courses. Although the primary, intermediate majority, but there is no lack of masterpieces worth tasting
W3Cplus U u u u do Great Desert (author of Graphic CSS3) in the domestic influence bar Sass expert level
Baidu Web Front End R&D Department U u u u It really deserves the name “research and development”. FIS, UEditor, etc
The front-end stew U u u do There’s a lot of community on the front end, and it’s a pretty good stew
Institute of geeks U u u Similar to MOOCs, but much more complex and varied
Div.IO U u u The main content is the latest front-end library and cutting edge technology
Tencent full AlloyTeam U u u Tencent Web front-end team

The front-end blog

It is worth a long time to occupy the pit of the front personal blog, are I often concerned about

Blog set up

usehexo/jekyll + GitPageFront-end static blogging that is pretty easy. Use Markdown to write articles and then push them to Git

CSS

The name of the Recommend index Remarks/Instructions
LoadersCSS U u u u do Using CSS technology to realize loading animation; I want to be familiar with and understandKeyframes, Animation, Transform, TransitionThe children’s shoes can directly read its source code (only a thousand lines of code), read even if the bird 🙂
WeUI U u u u do A set of basic style library consistent with wechat’s native visual experience is tailored for wechat Web development, so that users’ perception of use is more unified
HINT.css U u u u A very small prompt box effect
Hover.css U u u u Many mouse Hover state effect, you can give the product to learn 🙂
csscss U u u u Used to check CSS code redundancy
purecss U u u do A small, responsive CSS library, Yahoo! ‘

Browse the JS

The name of the Recommend index Remarks/Instructions
Echarts U u u u u Easy to use, the key is to support the chart display is very much, highly recommended
Swiper U u u u u There are many libraries of this kind of effect, but few documents are that professional
fullPage U u u u do Very easy to use full screen sliding library, see demo understand
PhotoSwipe U u u u do “No dependencies”
Vuejs U u u u do Prefer its author… So workers are looking at the source code to learn
Highcharts U u u u The Chinese version of Highcharts, another chart library, is really powerful, but it doesn’t look good… PS: the official website does not look good, dirty feet
videojs U u u do Use whatever video you need right nowLet videojs handle the problem of bird style and interaction unity 🙂
clipboard U u u do Only 2KB in size, with clipboard function, which is not cool, but Safari does not support…
impress.js U u do It’s a good way to write powerpoint, and I wrote one for itImpress. Js early experience
Cropper U u do Chinese development of picture cutting library

Swiper/PhotoSwipe/fullPageWith these three libraries, the common H5 page in wechat is no problem at all

NodeJS

As a large front-end or even multi-terminal, Node is absolutely necessary

The active community and ease of deployment are the main reasons I love Node

The recommended Package

Here are some interesting packages that the front end needs to know about
The name of the Recommend index Remarks/Instructions
anywhere U u u u u Make your current directory the root of a static file server anytime and anywhere
supervisor U u u u u Monitor Node code and restart automatically. A supervisor program for running nodejs programs
nodemon U u u u u Monitor Node code and restart automatically. Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2 U u u u u Is a Node application process manager with load balancing function
async U u u u do A process control toolkit that provides direct and powerful asynchronous functionality
lodash U u u u do JS tool libraryUnderscore.jsA fork of the
socket.io U u u u do It is expected that Node’s real-time framework chat room, page games and so on are more suitable for high real-time requirements
Mongoose U u u u do Make it easier for NodeJS to manipulate Mongodb databases; Attach aMongoose Learning Reference document
koa U u u u do Express is well known to all Players of Node, but koA is much less popular, with a slightly higher threshold than Ex. It is highly recommended to use generator to avoid tedious nested callback functionsOfficial article tutorial
Shipit U u u u do A powerful automated deployment tool. Shipit is very similar to Gulp in many ways, and its core is the mission system.
node-inspector U u u u do The Node debugger is similar to Chrome’s JS debugger
winston U u u u do One of the most popular log libraries for the Node service
thenify-all U u u u Pull out the asynchronous methods as the Promise of all the selected functions in an object
PhantomJS U u u u Generally used to capture screenshots and no interface testing can also be used to operate DOM and network monitoring, very fun libraryQuick Start
Mocha U u u u The most commonly used testing framework in Node; It supports various Assert Libs for Nodes; Support asynchronous and synchronous testing, and support a variety of ways to export results; It also supports running JS code tests directly on the Browser.
everyauth U u u u OAuth’s integrated solution
shelljs U u u do Shelljs is a shell tool based on Node. Its Api is extremely simple
hashids U u u do It is used for encryption and decryption by userID
colors U u do Fancy gadgets for printingconsole.logThere are better presentation styles

Both Supervisor and Nodemon monitor Node code, making it necessary to develop Node programs after every code modification

I have used all of the above libraries, and even many of them are necessary for project development and various specific scenarios. Welcome to communicate with me if you have any questions

Node Learning Guide

Build project construction

Gulp+Webpack: learning- Gulp

Gulp data collection: use-gulp

Webpack related article CSS Modules

Webpack: webpack-howto

The name of the Recommend index Remarks/Instructions
Webpack U u u u u The project-building tools are too complex and powerful to be thoroughly studied by the management.Selected readingHow Webpack and React work?
Gulp U u u u u Gulp is a tool for realizing automatic development of Web front-end based on Node. Study Materials attachedGulpBook
Gitlab CI U u u u A set of based onGitlabContinuous integration services
Bower U u u u A package manager for the Web

Gulp recommended package

The most basic libraries of Gulp are not listed in the table below, including:

  • Gulp-concat joins/merges files
  • Gulp-cssshrink Compressed CSS files
  • Gulp-uglify JS file compression

Selected reading

The following content does not include NodeJS and interview related, I have prepared bird separately

Front end of the interview

The name of the Recommend index Remarks/Instructions
The story of being an interviewer at LinkedIn U u u u u The article is full of pertinent advice and ideas and is recommended reading
Desert: To the front end interviewer U u u u u This article does not touch on any interview questions.
Front end test U u u u do Git Git Git Git Git Git Gitstart17k+

Tools/Software

Web

APP

The following list of apps is platform – independent

The name of the Recommend index Remarks/Instructions
Impression of notes U u u u u Free account fully adequate, cross-platform cross-terminal recording software
Android
The name of the Recommend index Remarks/Instructions
Millet desktop U u u u u How beautiful, how beautiful is not to talk about, the key is no advertising
iPhone
The name of the Recommend index Remarks/Instructions
Monkey U u u u Monkey is a GitHub third-party client for the iPhone. Show developer rankings on GitHub, as well as warehouse rankings

Mac

It is never too late to pursue beautiful things. Last year, the company gave a Mac to be used as a test and development machine, and began to work under the Mac. The Windows? Can’t go back to the bird…

The name of the Recommend index Remarks/Instructions
Homebrew U u u u u The ape can’t do his job without it…HomebrewmakeOS XMore perfect. usegemTo install thegems, withbrewTo deal with the dependency packages
BrowseShot U u u u u I am using the webpage screenshot tool, highly recommended
Mark eel U u u u do MarkMan, a very powerful annotation and measurement tool. The free version of daily work is perfectly satisfying,It is highly recommended
WebStorm U u u u do Super front-end IDE function, not much introduction, who uses who knows
Atom U u u u Before July 2015, my favorite editor in a desktop environment was Sublime. But then came Atom, for which I wrote an articleUse the minutes
Wireshark U u u do To be honest, it’s hard to get used to without Fiddler on a Mac, but there are more powerful alternatives
SourceTree U u u do Git a good use of the client tool, the focus is to support Chinese 🙂
focus booster U u u Because I care more about time management, so this software is necessary for my working time
Mou End to end Little refreshing Markdown editor

Linux

The name of the Recommend index Remarks/Instructions
oh-my-zsh U u u u u Terminal partyA must-use tool, highly recommended
tree U u u u Linux lists the contents of a directory in a hierarchical tree
oneapm U u u u Powerful operation and maintenance tools, providing a variety of monitoring clients; Collection, analysis, display and other functions; PS: I use server monitoring (free of charge)
httpie U u u do An HTTP client in a CLI is easy to use and read

Chrome Extension

Git

Redis

MongoDB

The name of the Recommend index Remarks/Instructions
Mongoose U u u u u Make it easier for NodeJS to manipulate Mongodb databases. Attach aMongoose Learning Reference document

The squalid

Put some of your more useful development clutter here

The name of the Recommend index Remarks/Instructions
. Gitignore file U u u u Describes gitignore templates for projects in different languages
Codebabes U u u Learn programming website. The point is that for every test, the fucking girl takes off one piece of clothing… PS: To climb the wall oh ~
ReadmeSample Do things The first step to getting big ispackagingSo come and have a lookREADMEPS: Why are labor and management so boring?

Front end dazzling skills -_ dazzle crazy yandiao fried day site _

The name of the Recommend index Remarks/Instructions
windows93 U u u u do Win93 simulation desktop, ideas, experience and the overall effect is more interesting
GeekTyper U u u u do A playful and geeky site, albeit one created as a prank: the site needs to climb the wall
Mapbox U u u u Very diao open source project, with convenient JSAPI(and SDK). However, the free version can only taste, limited traffic. PS: The site needs to climb the wall
SuperScrollorama U u u do Fun and good-looking animation library, link is SuperScrollorama show page
parallax.js U u u A parallax engine on the official website, on computers and mobile phones have a good experience
The ink knife End to end An online mobile app prototyping tool. Designed to help product managers quickly prototype mobile applications that can be displayed on mobile devices.

The following is aPull the redSummary of front-end skills chart:

Improve ing, slowly put the good stuff from Evernote and browser bookmarks into here, and welcome PR, thank you.