From 2013 to 2014, THE author made use of his spare time to do some open source projects. Most of the open source projects were based on the actual business needs of enterprises, so the author felt it was necessary to make a summary and review, in the review process, I hope to be helpful to everyone. In the future, the author’s open source projects will be put in this article. If you want to learn, you can communicate more.
1. Lightweight cache library based on indexedDB encapsulation
Github address: github.com/MrXujiang/x…
Learning Materials:
Xu Xiaoxi: summary of browser cache library design
Others: Support NPM installation or UMD import (NPM username @alex_xu)
2. Lightweight cache library based on localStorage encapsulation
Github address: github.com/MrXujiang/d…
LocalStorage /indexedDB
Others: Supports NPM installation or UMD import
3. Free graph bed server based on Node development
Github address: github.com/MrXujiang/f…
Learning Materials:
Xu Xiaoxi: How to use nodeJs to develop your own chart bed application?
Others: Support local deployment, remote test server deployment, configuration of private map bed
4. Node-based CMS system
Github address: github.com/MrXujiang/X…
Learning Materials:
- Implementing a CMS full stack project from 0 to 1 based on nodeJS (part 1)
- Implementing a CMS full stack project from 0 to 1 based on nodeJS
- Implement server startup details of a CMS full stack project from 0 to 1 based on nodeJS
Others: You can customize your own blog or content publishing platform based on this system
5. React based lightweight extensible component library
Github address: github.com/MrXujiang/x…
Learning Materials:
Xu Xiaoxi: How to teach you to build the front-end team component system from 0 to 1
NPM address: www.npmjs.com/package/@al…
6. Lightweight packaging of jquery library
Github address: github.com/MrXujiang/X… Others: Support for extensions, custom plug-in methods, native javascript wrapped object-oriented jquery class library.
Learning Materials:
How to write your own JS library in less than 200 lines of code
7. Native file upload component
Github address: github.com/MrXujiang/x…
Learning Materials:
Xu Xiaoxi: 3 minutes to teach you to use native JS to achieve a progress monitoring file upload preview component
Others: Es6 can be used for further encapsulation in later stage
8. React +redux+ Redux-Thunk +localStorage
Github address: github.com/MrXujiang/r…
Learning Materials:
Xu Xiaoxi: Thoroughly master Redux and develop a React project
Others: Thoroughly master the development mode of Redux. The task management platform uses localStorage, and the data can be stored for a long time
9. Build an interesting crawler platform based on Apify+ Node + React /vue
Github address: github.com/MrXujiang/c…
Learning Materials:
Build an interesting crawler platform based on Apify+ Node + React /vue
Others: A scalable web crawler template for JavaScript, can be based on the platform to achieve any website image crawling, full screen screenshots and other functions. And can be based on this secondary development.
React+Koa implements a visual editor for h5 pages
Github address: github.com/MrXujiang/h…
Learning Materials:
Xu Xiaoxi: Implement an H5 page visual editor based on React+Koa
Others: H5-Dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a simple, professional, reliable, and unlimited H5 landing page best practices. React is the main technology stack, and NodeJS is used in the background.
11. Open source VISUAL editor of PC pages -PC-Dooring
Github address: github.com/MrXujiang/p…
Learning Materials:
Xu Xiaoxi: Build a PC page editor PC-dooring from scratch
Page: other PC Maker, PC Editor. Make the PC as easy as building blocks. | let as simple as the building blocks of Web pages design, easy to set up PC Page, Web site, PC Web site.
12. Open source full stack CMS system -simpleCMS
Github address: github.com/MrXujiang/s…
Learning Materials:
Xu Xiaoxi: How to build a lightweight and natural support SSR personal blog system from zero
Other: SimpleCMS is an open source CMS system for individuals/teams to quickly develop blogs or knowledge sharing platforms, similar to Hexo or WorldPress, but they often require a complex setup process. We minimize the complexity and have detailed deployment tutorials. You only need one server. You can easily have your own blogging platform.
13. Open source simple drag library – RC-Drag
Github address: github.com/MrXujiang/r…
Learning Materials:
Xu Xiaoxi: How to achieve component drag, zoom, multi-control point expansion and drag data report
Other: The An React Component for drag and resize, and supports drag and zoom on mobile devices. | lightweight drag zoom Component based on the React, and drag and drop support mobile device scaling.
14. 趣图－qt
Online address: h5.dooring.cn/qt
Learning Materials:
Xu Xiaoxi: hand in hand teach you a can generate douyin style GIF production platform
Others: Etutograph is a lightweight online tool for generating tiktok-style motion effects. It supports one-click export of GIF GIF, manual uploading of pictures to generate GIF GIF and other functions.
15. Online triangle code generator -cssTriangle
Online address: h5. Dooring. Cn/tool/cssTri…
Learning Materials:
Xu Xiaoxi: How to handlift an online CSS triangle generator
Other: visual production of triangle CSS code, support 3 various shapes and angles of the 3 Angle, do not need to type a line of code.
Looking forward to
In the later stage, the author will output more practical open source projects and frameworks in data visualization and engineering. If you have any other questions or requirements, please feel free to communicate with the author. More technology dry goods, big front-end technology combat, welcome wechat search interesting talk front end, break through the front-end bottleneck.
less code is everything.