Search
Angular (以前稱Angular 2) 允許你使用 TypeScript / JavaScript 的能力開發很棒的 Web 應用程式。是否使用 Angular 知識來建構 Web 應用程式也可以編譯成在任何 iOS 或 Android 設備上運行的原生手機應用程式？
Ionic 框架允許你這樣做！使用你現有的 Angular 、HTML、JS和 CSS 知識，並建構你的原生手機應用程式！
https://softnshare.com/ionic-2-the-practical-guide-to-building-ios-android-apps/
💡 เมื่อเราได้เรียนรู้วิธีการเขียนเว็บมาสักพักแล้ว ไม่ว่าจะเป็นพื้นฐานที่สำคัญ เช่น HTML, CSS และ JavaScript แล้วเราอยากจะอยากไปลองใช้ Library หรือ Framework เจ๋ง ๆ ที่ช่วยในการเขียนเว็บ อย่าง React ต้องรู้อะไรบ้าง ??
.
👉 ซึ่งไอเจ้า React เนี่ยมันมีพื้นฐานจาก JavaScript นั่นเอง เราจึงจำเป็นต้องรู้ Concept ที่สำคัญ ๆ ก่อนจะไปใช้งานเจ้า React นั่นเอง
.
มีอะไรบ้าง?? ไปดูกันเลยจ้า 🔥
.
⚙️ Basic Data Structure
Data Structure เป็นหัวใจหลักในการเขียนโปรแกรม ดังนั้นเราต้องเรียนรู้ Data Structure ประเภทต่าง ๆ ให้เข้าใจก่อน ตัวอย่างเช่น การรับ-ส่ง Request จาก API มายัง JS เราก็ต้องมีวิธีที่จะจัดการกับโครงสร้างของข้อมูลที่ดึงมาจาก API เพื่อให้เราสามารถนำข้อมูลนั้นไปใช้ได้ตามต้องการ
.
🌟 DOM
DOM หรือ Document Object Model เป็นการปรับเปลี่ยนโครงสร้าง HTML ให้เป็นแบบ Object โดยให้ JavaScript สามารถจัดการกับ HTML ผ่านโครงสร้างของ DOM ได้นั่นเอง ซึ่งเจ้า React จะใช้โครงสร้าง DOM เป็นหลัก เพื่อสร้างการโต้ตอบบนหน้าเว็บที่สะดวกยิ่งขึ้น ตัวอย่างเช่น เมื่อคลิกปุ่มสามารถแสดงข้อความ หรือเปลี่ยนสีของข้อความนั่นเอง
.
🚚 API
API ย่อมาจาก Application Program Interface ซึ่งเราต้องมีพื้นฐานการใช้งาน API เพื่อนำข้อมูลมาใช้บนหน้าเว็บนั่นเอง อาจจะไม่ต้องถึงกับสร้าง API ใช้ก็ได้นะ เพียงแค่รู้โครงสร้าง และวิธีการดึงมาใช้งานพื้นฐานก็พอแล้ว !!
.
🔧 Axios / Fetch
เครื่องมือสำคัญที่ช่วยให้เราดึง API ต่าง ๆ มาใช้งานได้ง่ายมากขึ้นนั่นเอง !! ซึ่งเป็นสิ่งสำคัญมาก ๆ ในการพัฒนาหน้าเว็บ เพราะมันจะช่วยให้เราสามารถรับ-ส่งข้อมูลแบบไดมามิก และเชื่อมต่อระหว่าง Back-end ได้ง่าย
.
📚 ES6+
สิ่งสำคัญคือเราต้องเรียนรู้วิธีเขียน JavaScript มาตรฐานใหม่ ซึ่งจะช่วยให้โค้ดของเรามีรูปแบบที่อ่านง่ายมากขึ้น !! ซึ่งใน React ที่จะนิยมใช้ ได้แก่ Template Literals, Arrow Functions, Promise, Async / Await, const & let vs var และ Spread Operator นั่นเอง
.
🗂️ JS Array Methods
เมื่อเราสามารถดึงข้อมูลจาก API มาใช้ได้แล้วนั้น เราก็ต้องรู้จักวิธีจัดการกับข้อมูลนั้น ๆ ด้วยนะ ซึ่งมันจะง่ายขึ้นถ้าเรารู้จักใช้ความสามารถของ Array Methods ต่าง ๆ ซึ่งที่นิยมใช้กัน ได้แก่ map(), forEach(), find(), และ filter() เป็นต้น บอกเลยว่าถ้าใช้พวกนี้เป็น ทำให้ชีวิตง่ายขึ้นแน่นอน!! 5555
.
อะทั้งหมดนี้คือ Concept JavaScript พื้นฐานที่สำคัญที่คนเขียน React ต้องมีนะ หวังว่าเพื่อน ๆ จะชอบกันน้าาาา ใครมีอะไรเพิ่มเติมคอมเมนต์ไว้ได้เลย 🥰
.
📑 Source : https://lorenzejay.hashnode.dev/javascript-concepts-you-should-know-before-jumping-into-react-or-any-other-frontend-framework
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
รู้หรือไม่ !! มี Tools เจ๋ง ๆ ที่ช่วยให้เราทำแอปบนเดสก์ท็อปด้วยนะ นั่นคือ Electron.js นั่นเอง !!
.
และวันนี้แอดจะพาเพื่อน ๆ มาทำความรู้จักกับเจ้านี่กัน ว่ามันคืออะไร มีรายละเอียดยังไง หากพร้อมแล้วไปอ่านกันเลยจ้าาา ~~
.
⭐ Electron.js เป็น Framework แบบ Open-Source ซึ่งพัฒนาโดย GitHub ใช้สำหรับพัฒนาแอปพลิเคชันบนเดสก์ท็อปด้วยภาษา JavaScript, HTML, CSS และ Node JS เอาเป็นว่าใครที่เขียนเว็บมาบ้างแล้ว ก็สามารถใช้งานเจ้านี่ได้ง่าย ๆ เลย
.
✨ หลักการทำงานของ Electron.js
.
Electron.js จะใช้แนวคิดการทำงานของ Chromium ซึ่งจะแบ่งเป็น 2 ส่วนคือ Main Process และ Renderer Process
.
🔸 Main Process - เป็นส่วนที่ช่วยรับ-ส่ง Request ระหว่าง Browser Windows นั่นเอง โดยจะรองรับการทำงานของ GUI และช่วยจัดการในส่วนของ Memory ไม่ว่าจะเป็นการ Destruction และ Handle เพื่อป้องกันการ Memory Leak นั่นเอง
.
🔸 Renderer Process - เมื่อได้รับ Request จาก Main Process เจ้านี่ก็จะทำการแสดงผล UI แต่ละหน้า โดยการรันไฟล์ HTML, CSS และ JavaScript ของเรานั่นเอง
.
Electron.js ดียังไงนะ ?
.
🌟 1) พัฒนาได้ง่าย - เพียงแแค่ใช้ภาษาที่เราคุ้นเคยกันอยู่แล้ว ไม่ว่าจะเป็น HTML, CSS, หรือ JavaScript Dev แบบเรา ๆ ไม่ต้องเรียนรู้นานก็สามารถพัฒนาแอปพลิเคชันบนระบบปฏิบัติการต่าง ๆ ได้ง่ายเลย
.
🌟 2) มีประสิทธิภาพ - เนื่องจาก JavaScript เป็นภาษาที่มีประสิทธิภาพมาก ๆ มีการใช้กันอย่างกว้างขวาง ซึ่งมันสามารถแก้ไขข้อบกพร่อง และเพิ่มประสิทธิภาพของแอปพลิเคชันได้อย่างง่ายดาย
.
🌟 3) อัปเดตได้อย่างอัตโนมัติ - แอปพลิเคชันที่ถูกพัฒนาด้วย Electron.js มีการทำ autoUpdater สามารถอัปเดตได้ด้วยตัวเองอย่างอัตโนมัติทันทีเมื่อมีเวอร์ชันใหม่ ๆ ออกมานั่นเอง
.
🌟 4) รองรับ Closs-Platform - แอปพลิเคชันที่ถูกพัฒนาบน Electron.js สามารถรันบนระบบปฏิบัติการต่าง ๆ ได้เลย ไม่ว่าจะเป็น Windows, macOS และ Linux
.
🌟 5) มี Community สำหรับ Dev - Electron.js เป็น Open-Soure ที่มีผู้คนใช้กันเยอะมาก และมีแหล่งความรู้มากมายให้เหล่า Dev ได้ศึกษา แถมยังมีการพัฒนา Lib และ Tools ต่าง ๆ เพื่อช่วยเพิ่มประสิทธิภาพอีกด้วย
.
💥 ส่วนใครอยากลองใช้งานคลิกเลย >> https://www.electronjs.org/
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
本次的教學主題是用 GSAP 製作直播互動動態效果，哲宇將會手把手帶大家製作彈跳表情符號、emoji 彈幕還有留言與點選動態等效果。
現在許多電商、遊戲甚至課程平台都有了直播的功能，如何透過網頁特效動態來為互動加分，讓使用者好有參與感，就來跟哲宇一起切磋切磋吧。
(1:50:13) 哲宇大型 debug 現場
#GSAP
--
追蹤老闆的 IG：https://www.instagram.com/bosscodingplease/
Hahow 線上課程：
動畫互動網頁程式入門 (HTML/CSS/JS) 👉 https://bit.ly/3i6OTEU
動畫互動網頁特效入門（JS/CANVAS）👉https://bit.ly/3i3sCYy
互動藝術程式創作入門 (Creative Coding) 👉 https://bit.ly/3yliGiV
Creative Coding 台灣站：https://bit.ly/3iQ8iZF
現在學習知識的渠道越來越多，無論對於零基礎或是有經驗的工程師，想要持續成長應該看書還是看影片來的更有效率呢？
主要會和你分享我過去從新手到資深的過程中，如何持續保持進步及學習的經驗
也許這個經驗可以幫助到你，也歡迎留言和我分享你的看法
相信彼此分享不同的學習見解，能讓對於想要更精進自己程式開發功力的人有很大的幫助
===章節===
00:00 哪一個有效律?
00:36 寫程式如同寫作
05:14 書是最便宜的資源
10:14 折扣碼操作示範
===蝦皮購書折扣碼===
折扣碼：FLAGNIC36
時間：2021-03-29 ~ 2021-06-29
折扣碼：FLAGNIC79
時間：2021-06-30 ~ 2021-09-30
折扣碼： FLAGNIC11
時間：2021-10-01~ 2021-12-31
===前陣子在看的推薦書單===
（零基礎）
- 白話演算法！培養程式設計的邏輯思考
- Python 刷提鍛鍊班
（中高階）
- 設計模式之禪(第2版)
- 無瑕的程式碼－整潔的軟體設計與架構篇
- 單元測試的藝術
- 演算法之美：隱藏在資料結構背後的原理(C++版)
- Kent Beck的實作模式
（Ruby）
- Writing Efficient Ruby Code
（成長思考）
- 圖解．實戰 麥肯錫式的思考框架：讓大腦置入邏輯，就能讓90%的困難都有解！
- 師父：那些我在課堂外學會的本事
- 高勝算決策：如何在面對決定時，降低失誤，每次出手成功率都比對手高?
- 窮查理的普通常識
- 懶人圖解簡報術：把複雜知識變成一看就秒懂的圖解懶人包
- 寫作，是最好的自我投資
喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#寫程式 #前端 #後端
## 影片觀看說明
由於問題較多，大家的問題也可能是你的問題，建議可以先閱讀下方的「問題總匯」區，找到時間碼 Time code 之後跳轉到自己想聽的部分，會比較有效率哦
本影片 Q&A 留言是抓取
【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一次蒐集 Q&A)】https://youtu.be/BGaDN9wxbKE
## 影片中提到的專案
簡單用 React 撰寫的留言爬取篩選功能，可以自己抓去玩
https://github.com/niclin/youtube-comment-filter
## 問題總匯
00:00 開場
01:26 QA-1 - 林天寸
一直很喜歡妳的頻道，不單單是因為工程師，當然也有部分原因是自己也是走工程師這條路的。
前一年2020年開始，其實是我剛轉職工程師的第一年，在滿多地方都遇到不小的問題，在troubleshooting上面也是有許多瓶頸的。
後來除了白天上班，下班看書跟休息，偶然間看到你的影片[工程師如何自我進修]，才開始慢慢用計畫的方式取代橫衝猛幹。
不得不說，規劃時間真的是比起技術性的功力還更有成效。因為它讓你適時的放鬆跟加強，然後在工作上面才更有長進，雖然很幹話，但我2020的下半年是這樣做的。
目前在準備考取網路管理的證照CCNA，計畫是走network這一塊，還有很多要磨練的。希望也能多看你產出跟network的影片，這是私心話啦，哈哈。
02:57 QA-2 - 仔仔
1.學程式會建議從前端或是後端哪個開始學會比較好?
2.一開始投履歷如何判斷一家公司是可以成長的，而不是進去3，5年後還是那個跟剛進去程度相差不遠的自己差不多
3.跟程式相關的產業有很多(像是製造業到博弈)，可以請Nic分析一下各產業的狀況嗎?以及進去各產業前須要具備哪些程式語言或能力?
4.投履歷時看到一些公司列出所需程式語言和工具一大堆，是不是代表你沒完全具備就不要投履歷了，還是可以請Nic給個意見哪些部分還是可以投看看
5.都說工程師又宅又不會說話，為什麼Nic可以交到女朋友?
10:40 QA-3 - ANDREW NG KAR EARN
如果当写编程语言遇到瓶颈，有什么方法可以有效地避免自己陷入钻牛角尖的情况？
11:46 QA-4 - JS Lin
如果NIC現在選擇能馬上精通一項語言會是哪個？會想用來做什麼PJ？
13:13 QA-5 - Rick0
成為 team leader 後無法直接在技術上有更深入的研究和突破，這樣的變化是否值得?
是否會擔心這樣在技術上跟不上其他人，甚至被下屬看輕呢?
14:39 QA-6 - Henry蔡
因為最近是寒假期間，
我開始考慮下學期的修課，
想請教nic大大，
應該在有什麼樣的基礎上，
開始學design patterns？
我目前是碩士生，
大學非資工本科，
學過Python，
也跟過一些網路影片實作過Flask+PostgreSQL，
大學學過資料結構演算法，
但不到得心應手的程度...
16:07 QA-7 - 黃柏瑋
如何同時Handle好好幾件事
我怎麼覺得上班，然後下班假日寫寫side project後就沒啥時間了🤔🤔🤔
17:24 QA-8 - 乾太
我想問一下這年頭轉行斜槓 VTuber 還有沒有搞頭A？
18:10 QA-9 - uuu06222
之前開始關注你有知道你有面試過人的經驗, 想問一下站在面試官的角度...
面試官會不會比較注重作品需要呈現那些東西, 或是有沒有什麼禁忌是不能碰的嗎?
20:07 QA-10 - Joery Lin
想請教您對於對於給你很多成長和照顧的公司，倘若您有一個更好的機會，無論薪水或未知挑戰都大於現在公司。
您將如何做選擇，或許現在公司會給你加薪留下你。
因為自己曾放棄了許多機會
21:37 QA-11 - YangTing Zheng
Q1: 想問通常一個產品開發的週期都多長呢？負責維運和開發的工作內容是否會差很多？
Q2: 想請您簡單介紹一下資工系學生的出路/工作內容？(如PM.SA.DBA.PG.RD.MIS…或是還有其他的？）
24:16 QA-12 - RTB
Hello World
24:18 QA-13 - Barry
目前是公司MIS 很想轉職成後端工程師，但在面試上面都都時常失敗
常常在問技術關卡時就被問倒了，總覺得 要準備的東西非常的龐大
毫無準備的頭緒，總覺得一直寫side project也不是辦法
26:49 QA-14 - 因地制夷
想請教Nic 有在做投資嗎? ex 股票 想聽一些投資心得
27:13 QA-15 - 比歐
想請教 Nic 大，
在之後的工程師生涯中之後有甚麼規劃或想法嗎?
例如:開發產品創業，或是開班授課、轉做顧問之類的。
28:14 QA-16 - yongming jia
请问新手如何学编程，学完去做什么？怎么自己创业？谢谢🙏
29:33 QA-17 - Minghao Chang
是否能請您推薦用來開發的筆電？（正好最近要汰換電腦），想從今年開始養成寫side project的習慣，謝謝。
30:31 QA-18 - Guan Jun Chen
想知道像Nic這麼厲害的工程師，年薪大概落在哪裡
30:46 QA-19 - Sheng Jiang
想請問Nic，如果非資工背景但是對寫程式有熱情，想轉職當軟體工程師，會建議如何起步?
補充：像是什麼樣的人適合自學，什麼樣的人適合去補習，或者補習跟自學的情況各有哪些優劣?
謝謝Nic
## 結尾
31:49 感想
喜歡影片的話！可以幫忙點個喜歡以及分享、訂閱唷！😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#QA #工程師 #在地上滾的工程師 #前端 #後端 #轉職
自學html css js 所以還很菜，給砲但要記得順便給建議感謝哈哈。 HTML · css · javascript. ... <看更多>
html css js 在 認識HTML CSS JavaScript 網頁前端開發三劍客 - YouTube 的美食出口停車場
支持我們製作更多好內容，訂閱ALPHA Camp 頻道 https://bitly.com/336Vb06▻亞洲最完整 JavaScript 全端開發課程 https://alpha.camp/dnevx▻AC ... ... <看更多>