# A1: CDNJS/new-website ## Table of Contents - [組員](#組員) - [開源專案 CDNJS](#開源專案-cdnjs) - [專案簡介](#專案簡介) - [報告紀錄](#報告紀錄) - [Release Note](#release-note) - [Latest version (v1.1.0)](#latest-version-v110) - [所需技能](#所需技能) - [專案貢獻](#專案貢獻) - [貢獻列表](#-貢獻列表) - [詳細說明](#-詳細說明) 1. [協助加 library (cdnjs/cdnjs)](#1-協助加-library-cdnjscdnjs) - [Add darkroomjs@2.0.1 w/ git auto-update](#merged-add-darkroomjs201-w-git-auto-update-11272) - [Add ftscroller@0.7.0 w/ git auto-update](#merged-add-ftscroller070-w-git-auto-update-11273) - [其他加的libraries cdnjs/cdnjs/pulls/sufuf3](#其他加的libraries-cdnjscdnjspullssufuf3) 2. [協助優化 CDNJS 網頁 (cdnjs/new-website)](#2-協助優化-cdnjs-網頁-cdnjsnew-website) - [Add link to request for library update and report outdated library](#-add-link-to-request-for-library-update-and-report-outdated-library-160) - [Display total search results](#-display-total-search-results-177) - [Adding breadcrumbList to home, libraries](#-adding-breadcrumblist-to-home-libraries-178) 3. [優化 Fix Format 程式碼 (cdnjs/cdnjs)](#3-優化-fix-format-程式碼-cdnjscdnjs) - [Update license(s) of fixFormat to adapt license name #11305](#update-licenses-of-fixformat-to-adapt-license-name-11305) 4. [Features we want to add](#4-features-we-want-to-add) - [Unifying coding style](#unifying-coding-style) - [Restructing project structor](#restructing-project-structor) - [Including Frontend Framework (eg. React, Angular …)](#including-frontend-framework-eg-react-angular-…) - [心得與遇到的問題](#心得與遇到的問題) - [傅珊蓉](#傅珊蓉) - [江柏廷](#江柏廷) - [唐敬](#唐敬) ## **組員** ### Contributors <div class="content-center"> <table class="a1-member-table"> <tr> <th><a href="https://github.com/sufuf3">傅珊蓉</a></th> <th><a href="http://qas612820704.github.io/">江柏廷</a></th> <th><a href="https://github.com/natetang">唐敬</a></th> </tr> <tr> <td> <a href="https://github.com/sufuf3"> <img class="a1-avatar" src="https://avatars2.githubusercontent.com/u/8349587?v=3&s=400" /> </a> </td> <td> <a href="https://qas612820704.github.io/"> <img class="a1-avatar" src="https://avatars0.githubusercontent.com/u/8502252?v=3&s=400" /> </a> </td> <td> <a href="https://github.com/natetang"> <img class="a1-avatar" src="https://avatars0.githubusercontent.com/u/21237426?v=3&s=400" /> </a> </td> </tr> </table> </div> ## **開源專案 CDNJS** <table> <tr> <td><b>Name</b></td> <td>cdnjs/cdnjs, cdnjs/new-website</td> </tr> <tr> <td><b>Home Page</b></td> <td><a href="https://cdnjs.com">https://cdnjs.com</a></td> </tr> <tr> <td><b>Describe</b></td> <td>Website of cdnjs.com</td> </tr> </table> ![Imgur](http://i.imgur.com/NokHah8.png) ### 專案簡介 CDNJS is a free and open source project to organize all the famous web front-end development resources and provide them to the developers with faster CDN infrastructure without usage limitation and fee. CDNJS help individual library/framework developers spread their projects, and help web developers to supercharge their websites! With the great and free CDN service, developers can focus on the project and website development, without spending time worrying about how to setup a CDN for the project or website assets. Make web development easier, people's websites and the WWW faster and safer. ref: https://github.com/cdnjs/cdnjs#introduction ## **報告紀錄** ### Release Note | Date | Video | Slide | | ---- | ----- | ----- | | 05/08| Nope |[First Slide](https://hackmd.io/p/Bkm7IZXJZ#/)| | 05/15| [v1.0.0](https://youtu.be/VvLpzArDYRY) | [Google Doc](https://docs.google.com/presentation/d/1PQd-W8-rn2Vd-Ii3HVizpDhnDye0g5eaHdV7DlJCUw0/edit#slide=id.g21ae4eabfa_2_44) | | 06/05| [v1.1.0](https://youtu.be/cO219E-CwZA) | <i class="fa fa-arrow-up" aria-hidden="true"></i> Same | ### Latest version (v1.1.0) {%youtube cO219E-CwZA %} ## **所需技能** * Systems Tools * **Git** * **Nodejs** * Web Programing * Front-end * **jQuery** * Back-end * **Express** ## **專案貢獻** (The Problems Expected to Solve and Achievement) ### **- 貢獻列表** 1. **協助加 library** (cdnjs/cdnjs) - [x] <code><i class="fa fa-code-fork" aria-hidden="true"></i> merged</code> Add darkroomjs@2.0.1 w/ git auto-update [#11272](https://github.com/cdnjs/cdnjs/pull/11272) <code><i class="fa fa-share" aria-hidden="true"></i> Close</code> Pull request for issue: [#11187](https://github.com/cdnjs/cdnjs/issues/11187) - [x] <code><i class="fa fa-code-fork" aria-hidden="true"></i> merged</code> Add ftscroller@0.7.0 w/ git auto-update [#11273](https://github.com/cdnjs/cdnjs/pull/11273) <code><i class="fa fa-share" aria-hidden="true"></i> Close</code> Pull request for issue: [#11060](https://github.com/cdnjs/cdnjs/issues/11060) - [x] 其他加的libraries [cdnjs/cdnjs/pulls/sufuf3](https://github.com/cdnjs/cdnjs/pulls/sufuf3) <code><i class="fa fa-share" aria-hidden="true"></i> Close 53</code> <code><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Open 15</code> 2. **協助優化 CDNJS 網頁** (cdnjs/new-website) - [x] Add link to request for library update and report outdated library [#160](https://github.com/cdnjs/new-website/pull/160) Pull request for issues: [#145](https://github.com/cdnjs/new-website/issues/145), [#71](https://github.com/cdnjs/new-website/issues/71) - [x] Display total search results [#177](https://github.com/cdnjs/new-website/pull/177) Pull request for issue: [#176](https://github.com/cdnjs/new-website/issues/176) - [x] Adding breadcrumbList to home, libraries [#178](https://github.com/cdnjs/new-website/pull/178) Pull request for issue: [#143](https://github.com/cdnjs/new-website/issues/143) 3. **優化 Fix Format 程式碼** (cdnjs/cdnjs) - [x] Update license(s) of fixFormat to adapt license name [#11305](https://github.com/cdnjs/cdnjs/pull/11305) 4. **Features we want to add** - [ ] Unifying coding style - [ ] Restructing project structor - [ ] Including Frontend Framework (eg. React, Angular ...) ### **- 詳細說明** ### 1. 協助加 library (cdnjs/cdnjs) #### <code><i class="fa fa-code-fork" aria-hidden="true"></i> merged</code> Add darkroomjs@2.0.1 w/ git auto-update [#11272](https://github.com/cdnjs/cdnjs/pull/11272) <code><i class="fa fa-share" aria-hidden="true"></i> Close</code> Pull request for issue: [#11187](https://github.com/cdnjs/cdnjs/issues/11187) ![](https://i.imgur.com/iBj4pj9.png) #### <code><i class="fa fa-code-fork" aria-hidden="true"></i> merged</code> Add ftscroller@0.7.0 w/ git auto-update [#11273](https://github.com/cdnjs/cdnjs/pull/11273) <code><i class="fa fa-share" aria-hidden="true"></i> Close</code> Pull request for issue: [#11060](https://github.com/cdnjs/cdnjs/issues/11060) ![](https://i.imgur.com/T1h95Xj.png) #### 其他加的libraries [cdnjs/cdnjs/pulls/sufuf3](https://github.com/cdnjs/cdnjs/pulls/sufuf3) <code><i class="fa fa-share" aria-hidden="true"></i> Close 53</code> <code><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Open 15</code> ![](https://i.imgur.com/k0ly8dH.png) ### 2. 協助優化 CDNJS 網頁 (cdnjs/new-website) #### - Add link to request for library update and report outdated library [#160](https://github.com/cdnjs/new-website/pull/160) <code><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Open</code> Pull request for issues: [#145](https://github.com/cdnjs/new-website/issues/145), [#71](https://github.com/cdnjs/new-website/issues/71) * 程式碼：https://github.com/cdnjs/new-website/pull/160/files * 顯示request for library update and report outdated library的Button link ![image](https://cloud.githubusercontent.com/assets/8349587/26565446/ec5c4efe-451d-11e7-89a9-8ce4d909bbce.png) * Update 部份之轉導向到 GitHub 頁面的 issue repuest template ![image](https://cloud.githubusercontent.com/assets/8349587/26565511/6dc5450e-451e-11e7-8b9b-c0019f416ce3.png) * Outdate 轉導向到 GitHub 頁面的 issue repuest template ![image](https://cloud.githubusercontent.com/assets/8349587/26565520/801f891c-451e-11e7-93ca-5d413b135da3.png) --- #### - Display total search results [#177](https://github.com/cdnjs/new-website/pull/177) <code><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Open</code>Pull request for issue: [#176](https://github.com/cdnjs/new-website/issues/176) * 程式碼：https://github.com/cdnjs/new-website/pull/177/files * 調整後畫面： ![](https://cloud.githubusercontent.com/assets/8502252/25861695/134304f6-3518-11e7-9342-960b248b61f4.png) --- #### - Adding breadcrumbList to home, libraries [#178](https://github.com/cdnjs/new-website/pull/178) <code><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Open</code>Pull request for issue: [#143](https://github.com/cdnjs/new-website/issues/143) * 程式碼：https://github.com/cdnjs/new-website/pull/178/files * 調整後畫面： ![](https://cloud.githubusercontent.com/assets/8502252/25911991/5e7b7932-35e8-11e7-8df0-8437f843603b.png) ### 3. **優化 Fix Format 程式碼** (cdnjs/cdnjs) #### Update license(s) of fixFormat to adapt license name [#11305](https://github.com/cdnjs/cdnjs/pull/11305) * 程式碼：https://github.com/cdnjs/cdnjs/pull/11305/files 可以讓以下4種license(s)符合原本需求的格式 1. `"license": "GPLv2",` --> `"license": "GPL-2.0",` 2. ```js "licenses": [ { "name": "MIT license", "type": "MIT" }, { "name": "GPL", "type": "GPLv2" } ], ``` --> ```js "licenses": [ "MIT", "GPL-2.0" ] ``` 3. ```js "license": [ { "name": "GPL", "type": "GPLv2" } ], ``` --> ```js "license": "GPL-2.0" ``` 4. ```js "licenses": [ "MIT", "GPLv2" ] ``` --> ```js "licenses": [ "MIT", "GPL-2.0" ] ``` ### 4. **Features we want to add** #### Unifying coding style <code><i class="fa fa-question-circle" aria-hidden="true"></i> New issues</code> [#174](https://github.com/cdnjs/new-website/issues/174), Adding coding style checker like eslint? #### Restructing project structor <code><i class="fa fa-question-circle" aria-hidden="true"></i> New issues</code> [#175](https://github.com/cdnjs/new-website/issues/175), Restructing webServer.js. ex: separate routes to a route dir #### Including Frontend Framework (eg. React, Angular ...), Move to a better frontend framework (like React?), [#166](https://github.com/cdnjs/new-website/issues/166) @bhargav175大大(Contributor) 開的 `issue` @PeterDaveHello 是 Maintainer 以下是**不負責中文翻譯**的討論 - Discuss: <i style="color:green;" class="fa fa-user" aria-hidden="true"></i> bhargav175 : 再用 `jQuery` 就落伍拉! 會滅一切的! 用 `React` 結構化 可讀性都比較好 <i style="color:blue;" class="fa fa-user" aria-hidden="true"></i> PeterDaveHello : 東巴! 改變太大會沒有 Contributor 的, 現在主要著重在修現有網頁的 `bug` <i style="color:blue;" class="fa fa-user" aria-hidden="true"></i> PeterDaveHello : ㄜ... 不過還是可以做看看 <i style="color:green;" class="fa fa-user" aria-hidden="true"></i> bhargav175 : 好吧 QQ! 那我會繼續改善網頁, 而我同時也會盡快做一個用 `React` 的 demo 我在等 @bhargav175 的 React 第一版之後進行參與 ## **心得與遇到的問題** ### **傅珊蓉** 參與開源專案後，發現在 GitHub 上根本就是個國際交流的平台，不會的東西，會有人協助你一起完成。就像 GitHub 在6/2的 [blog](https://github.com/blog/2372-announcing-an-open-data-set-on-the-open-source-community) 統計的調查說的在 GitHub 上參與專案是一件令人興奮的事情，而且大多數都是很友善的！而在參與後，會是希望能夠幫助到他人一起加入並協助貢獻，讓專案愈來愈好！這也是促進許多專案進步的來源！:smile: ### **江柏廷** 在參與 `Open Source` 之前, 我覺得最重要的是 `熱血` 以及 `貢獻` 的心, 可是最後發現還是要看 `Maintainer` 買不買單, 我發了兩個 issues , [#174](https://github.com/cdnjs/new-website/issues/174), [#175](https://github.com/cdnjs/new-website/issues/175), 主要想改進 coding style 以及 project sturct, 讓他長的統一以及漂亮一點, 但是似乎都沒有什麼回應, 可能是 Nodejs 的特性版本翻新太快吧, 沒跟上就落伍了, 對於這個 `project`的改動太快 總歸來說, 就是 `project` 的走向最後還是得看 `Maintainer` 的想法, 畢竟他必須對這個 `project` 負責, 必定會有其中的考量, 然後我們在其中給予實質的幫助 ### **唐敬** 我是在上這堂課之後，才開始參與開源專案，在此之前，我連 github 都不太會用。多虧了這堂課，讓我學到如何真正的去參與一個專案，郵件溝通，以及看專案的需求進而去解決問題並送 Pull Request。 這次參與的 cdnjs 是比較偏前端的東西，雖然不是自己的專長，但因為他開源，所以討論很多而且可以學得很快，我想這也是開源的最大好處吧，世界各地的人都會來教你、互相討論。 ![](http://twimg.edgesuite.net/images/ReNews/20170319/640_845bd80b9bf82098f94f258c197fb7a9.jpg) <style> #doc > .content-center { text-align: center; } #doc > .content-center table { display: initial; width: initial; } .a1-member-table th, .a1-member-table td { text-align: center; } img.a1-avatar { width: 100px; position: relative; } img.a1-avatar:hover { animation: shakeit 0.1s infinite; } @keyframes shakeit { 25% { left: -1px; } 75% { left: 1px; } } </style>