Dev. To /sayanide/be…

Often have a friend to recommend a good code library, recently saw this article, are very good code library, for everyone to learn reference.

It’s always great to have lots of resources on hand 📚.

As a coder, we need to focus on features and best practices rather than writing boilerplate code over and over again. Eliminating useless work and investing time in learning to use the right tools or knowing how to use useful resources can greatly help us save time.

In this article, we’ll take a look at some of the GitHub libraries that can greatly improve your WEB development skills and help you write better code.

Node.js Best Practices

This library is a great place to keep track of the Node world and learn best practices as you use it. With 40K Stars and 133 contributors, the library is updated almost daily.

The library summarizes and collates the best practices of the higher-ranked Node.js, including Node.js + Docker best practices. It currently has over 80 best practices, style guides and structural advice.

Some common best practices include:

  • Organize projects better
  • Error handling practices
  • Code Style practices
  • Testing and overall quality practices
  • Carry out production practice and so on

Click to jump to the warehouse

HTML5 Boilerplate

HTML5 Boilerplate is a professional front-end template for building fast, robust and adaptable Web applications or websites.

The project is the product of years of iterative development and community knowledge. It doesn’t impose a specific development philosophy or framework, so you’re free to build code the way you want.

Includes predefined features like the following:

  • Normalize.css
  • jQuery with CDN
  • Apache Server Configs
  • usefulCSSHelper classes
  • Default styles, performance optimizations, etc

Depending on what you want to use and how to use it, just copy and paste the required files into your project directory. This gives you a configured template to speed up development.

Click to jump to the warehouse

RealWorld

Mastering the core concepts and ideologies of a new framework is not frustrating.

If you don’t understand the concept correctly, you’ll need to read the documentation, run the sample code, disassemble the sample application and put it back together, install the CLI locally, and so on, which can be frustrating and time-consuming.

RealWorld allows you to choose any front end (React,Angular2, etc.) and any back end (Node, Django, etc.) and integrate them together to see real-world examples of applications.

Since these implementations are stack related, they are obviously not interchangeable, but they still follow the same functionality and UX specifications.

Some common integration examples:

  • Angular + ngrx + nx
  • ClojureScript + re-frame
  • React / MobX
  • Go + Gin
  • NestJS + TypeORM/Prisma

You can find endless examples in the warehouse. Go for it!

Click to jump to the warehouse

You Don’t Know JS Yet

This is a series of books that delve into the core mechanics of the JavaScript language.

All the books are free and you can read them online anytime.

The authors suggest reading in this order:

  • Get Started
  • Scope & Closures
  • Objects & Classes (not yet started)
  • Types & Grammar (Not yet started)
  • Sync & Async (not started yet)
  • ES.Next & Beyond (Not yet started)

Click to jump to the warehouse

Airbnb JavaScript Guide

This is a very precise and professional style guide from Airbnb.

This tutorial will help you understand JavaScript in depth by digging into the basics and snippets of code.

Some of the hot topics covered in this guide are as follows:

  • Arrow function
  • Variable ascension
  • deconstruction
  • annotation
  • performance
  • test

Click to jump to the warehouse

Storybook

Storybook is a development environment for UI components that allows you to browse the component library, see the different states of each component, and interactively develop and test components.

Storybook runs outside the app, which allows you to develop UI components independently, making them more reusable, testable, and faster to develop. You can build quickly without worrying about application-specific dependencies.

It comes with a CLI and code samples to familiarize you with Storybook.

Click to jump to the warehouse

Front-End-Checklist

Front-end-checklist is an exhaustive list of all the elements that need to be present or tested before a website or HTML page can be put to use.

It is a repository based on front-end Web development with a greater focus on performance, security, SEO, and more.

All items in the front-end-Checklist are necessary for most projects, but some elements can be omitted.

Include:

  • 📖 Documents or articles
  • 🛠 Online tool/test tool
  • 📹 Media or video content

Click to jump to the warehouse

Inspiration and Resources

The inspiration for this article comes from Tech Sapien and all his amazing work. The image 📷 in the library is taken from the same place.

conclusion

All of the libraries mentioned above aren’t the only resources available, and I’m sure there are plenty of amazing projects out there. These are some of the resources THAT I find useful and that I often indulge in.

Don’t forget to click Star🌟 for these libraries. ✌🏼 to all the wonderful contributors for creating such a useful resource for us

Finally:

If there is a wrong translation, please correct, hope to help.

Give this article a thumbs up/a Star to encourage me: github.com/YvetteLau/B…