您可以在一個下午完成的 10 個具有挑戰性的編碼項目

 

項目迫使您比任何教程更好地學習概念。

然而，許多編碼項目需要幾天或幾週才能完成。您可能會失去動力並失去動力。

這篇文章是關於快速獲勝的。

通過這些可以在一個下午完成的小項目來增強動力。開始、實施和完成。快速完成項目將極大地提高你的自尊和技能。

一張紙條

這些不是初學者項目。對於編碼新手來說，它們被認為是“延伸”目標。

相反，這篇文章的目標受眾是想要快速伸展肌肉併升級的現有開發人員。

列表

以下是您在一個下午完成的 10 個具有挑戰性的項目想法：

1. 在命令行上實施Connect Four 。允許兩名玩家通過鍵盤輸入動作進行比賽。成功檢測玩家何時獲勝。讓用戶清除/重新啟動遊戲。
2. 為某些公共信息構建 API。例如，我想構建一個一級方程式 API，其中包含有關車手、車隊、汽車、賽道等的信息。API 應包括身份驗證和授權。也可以考慮添加速率限制。
3. 創建一個可以模擬擲骰子的 lambda 函數。允許從任何地方通過 HTTPS 請求調用該函數（經過授權）。可能支持 n 面骰子。
4. 構建您的第一個移動應用程序。讓兩個用戶競賽，看看他們在 10 秒內可以點擊按鈕多少次。數一下水龍頭。或者，允許兩個用戶在不同的設備上連接並通過後端比較分數。甚至可能支持歷史最高分榜！
5. 訂閱實時交通數據（這是來自紐約市的數據）。選擇一個車站並實現“火車10分鐘後到達”的Google地圖功能。現在支持用戶選站。
6. 使用 websocket 構建聊天應用程序。在瀏覽器中向用戶顯示新的聊天消息。不要將消息存儲在任何地方。像SocketIO這樣的工具將有助於解決棘手的問題。
7. 使用Plaid API提取您自己的銀行數據。將結果寫入電子表格。按照您喜歡的方式設置它們的格式，以便您可以自動制定每月預算。
8. 以接近金屬語言（如 Rust）實現 JSON 加載/轉儲。現在，嘗試同時處理 JSON 的各個部分。例如：{"hello": ["a": {...}, "b": {...}, "c": {...}]}可能會中斷a、b和 的並發路徑c。生成 JSON 的速度有多快？
9. 拉取一個大數據集——比如歷史天氣/氣候數據— 成為可視化和分析工具。過去 100 年來，堪薩斯州 托皮卡 每年 11 月 6 日的氣溫平均值、中位數和標準差是多少？數據中有趨勢嗎（即全球氣溫上升）？
10. 找到適合您選擇的語言的聲音庫。創建一個程序，可以記錄用戶的聲音，用效果對其進行操作，然後重播。

來源: https://blog.developerpurpose.com/10-challenging-coding-projects-you-can-do-in-an-afternoon-d9caaf82bf20

繼續閱讀 >

20 個高級編碼項目，讓您了解複雜的概念

 

項目是最好的學習方式。

自己構建一些東西會比閱讀它或做教程學到更多。你會更好地記住這些概念。當它不起作用時，你會弄清楚該怎麼做。

在網上，有大量的項目想法供新開發人員展示他們的初學者技能。但經驗豐富的開發人員也可以從一些副項目中受益！

以下列出了 20 個項目創意，可幫助您增長軟件開發知識。

列表

1. 使用庫構建 OAuth 2 授權服務器。根據 OAuth 規範實施各種流程。
2. 從網絡上抓取數據。清理。將其加載到數據分析工具中。然後，構建一些可視化。例如，嘗試製作維基百科文章的詞云。
3. 為具有數據庫、緩存層、nginx/Apache 服務器、後端 API 和 JavaScript 前端的 Web 應用程序創建 Dockerfile 和 docker-compose.yml。
4. 編寫一個 bash/zsh 腳本來遍歷目錄、迭代文件並對這些文件運行一些命令。確保腳本可以接受參數和設置標誌。
5. 開發一個前端組件，用於打開彈出窗口、接受用戶輸入並將信息傳遞回主頁。另外，嘗試開發一個iframe可以嵌入網站並傳回信息的程序。
6. 設置安全會話 cookie（僅限服務器），其中包含有關用戶允許的操作的信息（作為 JWT）。
7. 使用 HMAC 對數據進行簽名，在兩個 API 之間來回傳遞敏感信息。
8. 實現一個使用並發/線程快速完成矩陣的數獨求解器。
9. 以接近金屬的語言實現一個支持使用手動內存分配從左側和右側彈出的隊列。
10. 針對人口普查數據運行回歸模型來預測美國人口。
11. 獲取一個 Raspberry Pi 並實現一個簡單的 Web 服務器，以通過 API 請求打開/關閉燈。
12. 編寫和編排 Airflow 任務以從 Twitter 中提取最近的推文（使用計劃或命令），同時針對各種 Twitter 句柄。將推文保存到數據存儲中。添加映射縮減步驟進行分析的獎勵積分。
13. 構建時間序列數據庫和 API，用於接受和存儲來自應用程序的日誌。使用某種類型的隊列處理並發請求。實施 Elasticsearch 進行快速搜索。
14. 為命令行編寫並安裝您自己的簡單程序。將您的程序添加到$PATH. 獎勵積分：在線託管並支持wget，，curl甚至brew install
15. 將上述任何/所有項目部署到主要雲提供商（AWS、GCP、Azure、Digital Ocean 等），並了解各種雲服務如何協同工作、配置實例等。看看是否可以設置 CI/CD到雲端。（警告：如果你不小心的話，這可能會很昂貴，所以一定要做好研究！）
16. 為您的應用程序編寫單元、集成和端到端測試。練習快速運行的模擬、參數化和小型測試。在 CI 提供商（如 CircleCI、TravisCI、Jenkins 等）上運行測試。
17. 學習 PostGIS 並開始針對地理空間數據運行 SQL 命令。以 GeoJSON 格式返回數據。使用 MapboxJS 之類的東西來渲染結果。
18. 公開數據集的 GraphQL API。或者，將 Apollo 數據層添加到前端項目以緩衝對 REST API 的請求。
19. 創建一個在井字遊戲中總是獲勝或平局（永遠不會失敗）的人工智能。可以使用簡單的最小-最大算法來贏得比賽。使用所有可能的用戶輸入以編程方式測試您的 API（基本上，玩所有可能的遊戲）。
20. 編寫一個程序，打開圖像，找到最流行的顏色，對該顏色執行洪水填充到另一種顏色，然後寫入輸出。現在，讓程序同時處理許多圖像。

來源: https://blog.developerpurpose.com/20-advanced-coding-projects-to-expose-you-to-complex-concepts-1c8924490007

繼續閱讀 >

該如何更換 SSL 憑證

 一個突然，我們的監控跳出了通知

!!

查了才發現原來是 SSL 過期了，時間過得還真快啊～（嘆

繼續閱讀 >

更好的使用 "git checkout"

什麼是 git switch 和 git restore？

Git 版本 2.23 加入了兩個指令，他原理與 checkout 命令類似，但不完全相同。

為了更深入地理解，我們來看看他們的作用。

什麼是 checkout?

checkout : 切換分支或恢復工作樹文件

Git 2.23 做了另外兩個命令來區分其取代他。

兩個新命令

• switch：切換分支
• restore：恢復工作樹文件

您現在可以專門針對更合適的情況編寫。

如果想切換分支，可以使用:

$ git switch develop
# 與 'git checkout develop' 相同

$ git switch -c new-branch
# 同 'git checkout -b new-branch'

如果想恢復文件，也可以使用:

$ git restore README.md
# 與 'git checkout -- README.md' 相同 

$ git restore --staged README.md
# 與 'git reset HEAD README.md' 相同



現在我們可以用更語意的方式使用 GIT 了:)

參考: https://materokatti.medium.com/do-not-use-git-checkout-anymore-aa73c0a43c13

繼續閱讀 >

text-align: justify - CSS 對齊屬性

事情是這樣的，客戶問我可不可以把網頁的內容文字都對齊呢？ 當然沒問題啊！

加了 text-align: justify 一切搞定！

沒加的長這樣

加了以後！！

打完收工～

順帶一提，之前不支援的 Apple Safari 已支援。

繼續閱讀 >

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

 事情是這樣的，最近在網頁上一直出現這種錯誤：

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

只好來研究一下該如何解決，順帶一提，我是使用 Nuxt.js

錯誤訊息如下

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

後來找一找發現我碰到的問題跟這個人很類似

https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re

For me this error happened cuz get Array list in AsyncData and rendered <tr> tags by v-for, i put v-for codes in <client-only> blocks and problem solved

我試著把 v-for 包進去 <client-only> 裡面也確實獲得解決，如果有更好的解法再麻煩告知了，這是我遇到問題以及解決的方法做個紀錄。

繼續閱讀 >

nginx 設定 50x 錯誤頁面

 事情是這樣的，本人待的小公司因為沒有 load balance 的機制(成本考量)，因此在 Server 重新 build 的時候網站會呈現掛點狀態(?不意外吧)，為了解決這樣的問題，所以決定要做一個 error page 去告訴敷衍使用者 :)

需求: 當伺服器改版或錯誤時，需要做一個頁面讓使用者知道我們的服務沒有問題

nginx 設定如下

        # 升級頁面
        proxy_intercept_errors on;
        error_page   500 502 503 504  /index.html;
        location = /index.html {
            root /home/ubuntu/www/;
        }
        location ~ \.(mp3|mp4) {
                root /home/ubuntu/www/media/;
        }

接著把靜態頁面放進去www資料夾裡面，搞定！

繼續閱讀 >