Hi, I’m your front Octopus, a super cat who doesn’t like fish and doesn’t like cats

Introduction to the

It’s been nearly five years since the frontend Octopus joined GitHub in 2016.

Many people are not in the habit of browsing GitHub, so there will always be asymmetric information about open source, and I don’t know what good front-end open source projects are worth learning.

Perhaps the biggest gap between the preliminary front-end and the advanced front-end is caused by poor information.

Since 2018, I’ve been in the habit of checking GitHub every day, usually in the morning before work or during my lunch break.

It’s worth learning what good front-end projects are open sourced every day and what the mainstream front-end stacks are using.

Therefore, I also collect a lot of good open source projects, and recommend them to you here. There will be one to three essential articles pushed every week.

I hope you can learn more programming knowledge, improve programming skills and find the fun of programming in the process of browsing and learning these open source projects recommended by the front Octopus.

GitHub is dedicated to exploring the best front-end open source projects on GitHub to smooth out your front-end information asymmetric, including JavaScript, Vue, React, Node, applets, Flutter, Deno, HTML, CSS, data structures and algorithms, etc.

Here is the fifth installment of Front-end GitHub.

Today I’m going to bring you front-end code specifications from several major manufacturers.

Front-end code specification

Code tens of millions of lines, the first line of security; Front end is not standard, colleagues two lines of tears.

tencent

Contains a lot of content:

PC side topics: quick start, file directory, page header, universal title, universal foot, statistical code, compatibility testing

Topics on mobile: Quick start, file directory, page header, REM layout, Common Foot, statistical code, Shared components, compatibility requirements

Double terminal official website: quick start, page jump

Tgideas.qq.com/doc/index.h…

But some of the content is business specific and not generic.

jingdong

Compared to Tencent code specifications, I recommend the concave-convex laboratory code specifications, more complete.

HTML specification

The agreement is based on official documents such as W3C and Apple Developers, combined with the team’s daily business requirements and the team’s experience summarized and refined in the daily development process.

The picture specification

Understand the characteristics of various picture formats, and make picture specifications according to the characteristics, including but not limited to picture quality conventions, picture introduction methods, picture combination processing, etc.

The CSS specification

Unify the syntactical style of team CSS code writing and SASS precompiled language, provide common media query statements and browser private attribute references, and standardize common module references from the business level.

Naming conventions

Standardize the naming habits of the team from the “directory naming”, “picture naming”, “ClassName” naming and so on, and enhance the readability of the team code.

JavaScript code

Unify the team’s JS syntax style and writing habits, reduce the probability of program errors, which also includes ES6 syntax norms and best practices.

Bump Lab: guide.aotu. IO /index.html

JavaScript

Contains: Type, object, Array, string, function, property, variable, promotion, comparison operator & equals, Block, comment, whitespace, comma, semicolon, type conversion, naming rule, Accessor, constructor, event, module, jQuery, ECMAScript 5 Compatibility, Tests, Performance, Resources, JavaScript Style Guide notes

Airbnb Javascript Style Guide: github.com/airbnb/java…

baidu

JavaScript coding specification, HTML, CSS, Less, E-JSON data transfer standard, module and loader, package structure, Project directory structure, Chart library standard, React coding specification.

For example, indent

  • [Mandatory] Use4A space as an indentation level is not allowed2A blank space ortabCharacters.
  • [] compulsoryswitchUnder thecase 和 defaultAn indent level must be added.
// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}

// bad
switch (variable) {

case '1':
    // do...
    break;

case '2':
    // do...
    break;

default:
    // do...

}
Copy the code

Specification document: github.com/ecomfe/spec…

Netease Coding specification:

The CSS specification: A set of rules and methods that help you structure and manage styles

HTML specification: A series of suggestions and methods to help you build concise and rigorous structures

Engineer specification: workflow and team collaboration specification for front-end page development engineers

But there’s more:

nec.netease.com/standard

JavaScript Standard Style

In addition to many corporate organizations, many individuals also use specifications in projects.

Github.com/standard/st…

Vue

Here is the official vUe-specific code style guide.

If you are using Vue in your projects, this guide is a good reference to avoid errors, glitches, and anti-patterns.

However, we are not convinced that everything in the style guide is ideal for all teams or projects.

So it is advisable to make meaningful deviations based on past experience, surrounding technology stacks, and personal values.

Official Style Guide: cn.vuejs.org/v2/style-gu…

es6

How to apply ES6’s new syntax to coding practices, combine it with traditional JavaScript syntax, and write sensible, easy to read and maintain code.

Es6 programming style: es6.ruanyifeng.com/#docs/style

Bootstrap

The content includes HTML and CSS.

HTML

Syntax, HTML5 DOCType, language properties, IE compatibility mode, character encoding, introduction of CSS and JavaScript files, utility is king, attribute order, Boolean properties, reducing the number of tags, JavaScript generated tags.

CSS

Syntax, declaration order, do not use @import, Media Query location, prefixed attributes, one-line rule declarations, property declarations in shorthand, nesting in Less and Sass, operators in Less and Sass, comments, class Naming, selectors, code organization.

Bootstrap coding specification: codeguide.bootcss.com/

ESLint

Most front-end projects today use the assembles of JavaScrip T and JSX inspection tools.

Found the problem

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors, and you can run ESLint as part of a continuous integration pipeline.

Auto repair

Many problems found by ESLint can be fixed automatically. ESLint fixes recognisable syntax, so you don’t encounter errors introduced by traditional find and replace algorithms.

custom

Preprocessing code, using a custom parser, and writing your own rules to use with ESLint’s built-in rules. You can customize ESLint to work exactly the way your project wants it to.

ESLint: eslint.org/

ESLint Chinese version: eslint.bootcss.com/

Prettier

Prettier is an “independent” code formatting tool.

In short, this tool makes output code consistent in style.

This is what most front-end projects use today.

Prettier: Prettier. IO /

The last

Ok, the fifth issue of [front-end GitHub] content has been talked about, more exciting please see the following warehouse address:

Original address: github.com/FrontEndGit…

For tips on how to find good open source projects, check out these two articles: Tips on how to find good open Source projects on GitHub, and tips on how to find good open Source projects that you probably don’t even know how to do on GitHub.

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement!

If you search “front-end GitHub” on wechat and reply “ebook”, you will get 160 front-end elite books.

Past pure text

  • With all due respect, you probably don’t even know how to do GitHub search

  • GitHub’s most popular, most worthy front-end learning data structures and algorithms project! No one of

  • The world’s most popular WEB development learning route! No one! It received nearly 1W likes on GitHub in 3 days

  • Github star 1.6W+, programmers must be aware of the “hidden rules” again popular, had known that would not be bald