1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» ลากได้ элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
บทความนี้ได้รับการแปลโดยได้รับการสนับสนุนจาก EDISON Software ซึ่ง และ .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- โบนัส: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
หมายเหตุ: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- โบนัส: Если вам интересно, я недавно написал на криптовалюту с React Native.
หมายเหตุ: ที่นี่ .
Подборка проектов из предыдущих публикаций.
ชั้น
Layer คือชุมชนที่ทุกคนสามารถวาดพิกเซลบน "กระดาน" ที่ใช้ร่วมกันได้ แนวคิดดั้งเดิมเกิดขึ้นที่ Reddit ชุมชน r/Layer เป็นคำอุปมาของความคิดสร้างสรรค์ร่วมกัน ซึ่งทุกคนสามารถเป็นผู้สร้างและมีส่วนร่วมในสาเหตุที่มีร่วมกัน
สิ่งที่คุณจะได้เรียนรู้เมื่อสร้างโปรเจ็กต์เลเยอร์ของคุณเอง:
- JavaScript Canvas ทำงานอย่างไร การรู้วิธีใช้งาน Canvas ถือเป็นทักษะที่สำคัญในหลาย ๆ แอปพลิเคชัน
- วิธีประสานงานการอนุญาตของผู้ใช้ ผู้ใช้แต่ละคนสามารถวาดหนึ่งพิกเซลทุกๆ 15 นาทีโดยไม่ต้องเข้าสู่ระบบ
- สร้างเซสชันคุกกี้
Squoosh
Squoosh เป็นแอปพลิเคชั่นบีบอัดรูปภาพที่มีตัวเลือกขั้นสูงมากมาย
กิฟ 20 MB
ด้วยการสร้าง Squoosh เวอร์ชันของคุณเอง คุณจะได้เรียนรู้:
- วิธีทำงานกับขนาดรูปภาพ
- เรียนรู้พื้นฐานของ Drag'n'Drop API
- ทำความเข้าใจวิธีการทำงานของ API และตัวฟังเหตุการณ์
- วิธีอัพโหลดและส่งออกไฟล์
หมายเหตุ: โปรแกรมบีบอัดรูปภาพเป็นแบบโลคัล ไม่จำเป็นต้องส่งข้อมูลเพิ่มเติมไปยังเซิร์ฟเวอร์ คุณสามารถมีคอมเพรสเซอร์ที่บ้านหรือจะใช้บนเซิร์ฟเวอร์ก็ได้ตามที่คุณต้องการ
เครื่องคิดเลข
มาเร็ว? อย่างจริงจัง? เครื่องคิดเลข? ใช่แล้ว เครื่องคิดเลขนั่นเอง การทำความเข้าใจพื้นฐานของการดำเนินการทางคณิตศาสตร์และวิธีการทำงานร่วมกันเป็นทักษะที่สำคัญในการทำให้แอปพลิเคชันของคุณง่ายขึ้น ไม่ช้าก็เร็วคุณจะต้องจัดการกับตัวเลขและยิ่งเร็วเท่าไรก็ยิ่งดีเท่านั้น
ด้วยการสร้างเครื่องคิดเลขของคุณเอง คุณจะได้เรียนรู้:
- ทำงานกับตัวเลขและการดำเนินการทางคณิตศาสตร์
- ฝึกฝนกับ Event Listeners API
- วิธีจัดองค์ประกอบ ทำความเข้าใจสไตล์
โปรแกรมรวบรวมข้อมูล (เครื่องมือค้นหา)
ทุกคนเคยใช้เครื่องมือค้นหามาก่อน ดังนั้นทำไมไม่สร้างเครื่องมือค้นหาของคุณเองล่ะ โปรแกรมรวบรวมข้อมูลจำเป็นต้องค้นหาข้อมูล ทุกคนใช้มันทุกวัน และความต้องการเทคโนโลยีและผู้เชี่ยวชาญนี้จะเพิ่มมากขึ้นเมื่อเวลาผ่านไป
เครื่องมือค้นหาของ Google
สิ่งที่คุณจะได้เรียนรู้จากการสร้างเครื่องมือค้นหาของคุณเอง:
- โปรแกรมรวบรวมข้อมูลทำงานอย่างไร
- วิธีจัดทำดัชนีไซต์และวิธีจัดอันดับไซต์ตามคะแนนและชื่อเสียง
- วิธีจัดเก็บไซต์ที่จัดทำดัชนีไว้ในฐานข้อมูลและวิธีการทำงานกับฐานข้อมูล
เครื่องเล่นเพลง (Spotify, Apple Music)
ทุกคนฟังเพลง - มันเป็นเพียงส่วนสำคัญในชีวิตของเรา มาสร้างเครื่องเล่นเพลงเพื่อทำความเข้าใจกลไกพื้นฐานของแพลตฟอร์มสตรีมเพลงสมัยใหม่กันดีกว่า
Spotify
สิ่งที่คุณจะได้เรียนรู้จากการสร้างแพลตฟอร์มสตรีมเพลงของคุณเอง:
- วิธีทำงานกับ API ใช้ API จาก Spotify หรือ Apple Music
- วิธีเล่น หยุดชั่วคราว หรือย้อนกลับไปยังเพลงถัดไป/ก่อนหน้า
- วิธีเปลี่ยนระดับเสียง
- วิธีจัดการการกำหนดเส้นทางผู้ใช้และประวัติเบราว์เซอร์
แอพค้นหาภาพยนตร์โดยใช้ React (พร้อมตะขอ)
สิ่งแรกที่คุณสามารถเริ่มต้นได้คือสร้างแอปค้นหาภาพยนตร์โดยใช้ React ด้านล่างนี้เป็นภาพของแอปพลิเคชันขั้นสุดท้ายจะมีลักษณะดังนี้:
คุณจะได้เรียนรู้อะไร
ด้วยการสร้างแอปนี้ คุณจะพัฒนาทักษะ React ของคุณได้โดยใช้ Hooks API ที่ค่อนข้างใหม่ โปรเจ็กต์ตัวอย่างใช้ส่วนประกอบ React, hooks จำนวนมาก, API ภายนอก และแน่นอนว่าต้องมีสไตล์ CSS บางอย่าง
กองเทคโนโลยีและคุณสมบัติต่างๆ
- ทำปฏิกิริยากับตะขอ
- สร้าง-react-app
- JSX
- CSS
โปรเจ็กต์เหล่านี้ช่วยให้คุณมีจุดเริ่มต้นที่สมบูรณ์แบบเข้าสู่ Functional React โดยไม่ต้องใช้คลาสใดๆ และจะช่วยคุณได้อย่างแน่นอนในปี 2020 คุณสามารถหา . ทำตามคำแนะนำหรือทำให้เป็นของคุณเอง
แอพแชทกับ Vue
อีกหนึ่งโปรเจ็กต์ที่ยอดเยี่ยมสำหรับคุณคือการสร้างแอปแชทโดยใช้ไลบรารี JavaScript ที่ฉันชื่นชอบ: VueJS แอปพลิเคชันจะมีลักษณะดังนี้:
คุณจะได้เรียนรู้อะไร
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างแอป Vue ตั้งแต่เริ่มต้น - การสร้างส่วนประกอบ การจัดการสถานะ การสร้างเส้นทาง การเชื่อมต่อกับบริการของบริษัทอื่น และแม้แต่การจัดการการรับรองความถูกต้อง
กองเทคโนโลยีและคุณสมบัติต่างๆ
- ดู
- vuex
- Vue เราเตอร์
- วิวคลิ
- ผู้ยื่น
- CSS
นี่เป็นโครงการที่ยอดเยี่ยมมากสำหรับการเริ่มต้นกับ Vue หรือพัฒนาทักษะที่มีอยู่เพื่อพัฒนาในปี 2020 คุณสามารถหา .
แอพพยากรณ์อากาศที่สวยงามด้วย Angular 8
ตัวอย่างนี้จะช่วยคุณสร้างแอปพยากรณ์อากาศที่สวยงามโดยใช้ Angular 8:
คุณจะได้เรียนรู้อะไร
โปรเจ็กต์นี้จะสอนทักษะอันมีค่าในการสร้างแอปพลิเคชันตั้งแต่เริ่มต้น - ตั้งแต่การออกแบบจนถึงการพัฒนา ไปจนถึงแอปพลิเคชันที่พร้อมปรับใช้
กองเทคโนโลยีและคุณสมบัติต่างๆ
- 8 เชิงมุม
- Firebase
- การแสดงผลฝั่งเซิร์ฟเวอร์
- CSS พร้อม Grid และ Flexbox
- เป็นมิตรกับมือถือและการปรับตัว
- โหมดมืด
- อินเทอร์เฟซที่สวยงาม
สิ่งที่ฉันชอบจริงๆ เกี่ยวกับโปรเจ็กต์ที่ครอบคลุมทั้งหมดนี้ก็คือ คุณไม่ได้ศึกษาสิ่งต่างๆ เดี่ยวๆ แต่คุณได้เรียนรู้กระบวนการพัฒนาทั้งหมดตั้งแต่การออกแบบไปจนถึงการใช้งานขั้นสุดท้าย
แอปพลิเคชันสิ่งที่ต้องทำโดยใช้ Svelte
Svelte เปรียบเสมือนเด็กใหม่ที่ใช้แนวทางแบบอิงคอมโพเนนต์ - อย่างน้อยก็คล้ายกับ React, Vue และ Angular และนี่คือหนึ่งในผลิตภัณฑ์ใหม่ที่มาแรงที่สุดในปี 2020
แอป To-Do ไม่จำเป็นต้องเป็นหัวข้อที่ร้อนแรงที่สุด แต่จะช่วยให้คุณฝึกฝนทักษะ Svelte ได้อย่างแท้จริง มันจะมีลักษณะเช่นนี้:
คุณจะได้เรียนรู้อะไร
บทช่วยสอนนี้จะแสดงวิธีสร้างแอปพลิเคชันโดยใช้ Svelte 3 ตั้งแต่ต้นจนจบ คุณจะใช้ส่วนประกอบ สไตล์ และตัวจัดการเหตุการณ์
กองเทคโนโลยีและคุณสมบัติต่างๆ
- สเวลต์ 3
- ส่วนประกอบ
- จัดแต่งทรงผมด้วย CSS
- ไวยากรณ์ ES 6
มีโครงการเริ่มต้น Svelte ดีๆ อยู่ไม่มากนัก ดังนั้นฉันจึงพบว่า .
แอปอีคอมเมิร์ซโดยใช้ Next.js
Next.js เป็นเฟรมเวิร์กที่ได้รับความนิยมมากที่สุดสำหรับการสร้างแอปพลิเคชัน React ที่รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ทันที
โปรเจ็กต์นี้จะแสดงวิธีสร้างแอปพลิเคชันอีคอมเมิร์ซที่มีลักษณะดังนี้:
คุณจะได้เรียนรู้อะไร
ในโปรเจ็กต์นี้ คุณจะได้เรียนรู้วิธีพัฒนาด้วย Next.js—สร้างเพจและส่วนประกอบใหม่ แยกข้อมูล จัดรูปแบบและปรับใช้แอปพลิเคชัน Next
กองเทคโนโลยีและคุณสมบัติต่างๆ
- เน็กซ์.เจส
- ส่วนประกอบและหน้า
- การสุ่มตัวอย่างข้อมูล
- stylization
- การปรับใช้โครงการ
- SSR และสปา
เป็นเรื่องดีเสมอที่มีตัวอย่างจากโลกแห่งความเป็นจริง เช่น แอปอีคอมเมิร์ซเพื่อเรียนรู้สิ่งใหม่ๆ คุณสามารถ .
บล็อกหลายภาษาเต็มรูปแบบพร้อม Nuxt.js
Nuxt.js มีไว้สำหรับ Vue และ Next.js มีไว้สำหรับ React: เฟรมเวิร์กที่ยอดเยี่ยมสำหรับการรวมพลังของการเรนเดอร์ฝั่งเซิร์ฟเวอร์และแอปพลิเคชันหน้าเดียว
แอปพลิเคชันสุดท้ายที่คุณสามารถสร้างได้จะมีลักษณะดังนี้:
คุณจะได้เรียนรู้อะไร
ในโปรเจ็กต์ตัวอย่างนี้ คุณจะได้เรียนรู้วิธีสร้างเว็บไซต์ที่สมบูรณ์โดยใช้ Nuxt.js ตั้งแต่การตั้งค่าเริ่มต้นไปจนถึงการใช้งานขั้นสุดท้าย
ใช้ประโยชน์จากฟีเจอร์เจ๋งๆ มากมายที่ Nuxt นำเสนอ เช่น เพจและส่วนประกอบ และการจัดสไตล์ด้วย SCSS
กองเทคโนโลยีและคุณสมบัติต่างๆ
- Nuxt.js
- ส่วนประกอบและหน้า
- โมดูลสตอรี่บล็อก
- ปลาแฮกฟิช
- Vuex สำหรับการจัดการของรัฐ
- SCSS สำหรับการจัดแต่งทรงผม
- มิดเดิลแวร์ Nuxt
ซึ่งมีคุณสมบัติที่ยอดเยี่ยมของ Nuxt.js มากมาย โดยส่วนตัวแล้วฉันชอบทำงานกับ Nuxt ดังนั้นคุณควรลองดูเพราะมันจะทำให้คุณเป็นนักพัฒนา Vue ที่ยอดเยี่ยมด้วย
บล็อกกับแกสบี้
Gatsby เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่ที่ยอดเยี่ยมโดยใช้ React และ GraphQL นี่คือผลลัพธ์ของโครงการ:
คุณจะได้เรียนรู้อะไร
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีใช้ Gatsby เพื่อสร้างบล็อกที่คุณจะใช้ในการเขียนบทความของคุณเองโดยใช้ React และ GraphQL
กองเทคโนโลยีและคุณสมบัติต่างๆ
- Gatsby
- เกิดปฏิกิริยา
- GraphQL
- ปลั๊กอินและธีม
- MDX/มาร์กดาวน์
- CSS บูตสแตรป
- แม่แบบ
หากคุณเคยต้องการที่จะเริ่มต้นบล็อก เกี่ยวกับวิธีการสร้างมันด้วย React และ GraphQL
ฉันไม่ได้บอกว่า WordPress เป็นตัวเลือกที่ไม่ดี แต่ด้วย Gatsby คุณสามารถสร้างเว็บไซต์ประสิทธิภาพสูงโดยใช้ React ซึ่งเป็นการผสมผสานที่น่าทึ่ง
บล็อกกับ Gridsome
Gridsome สำหรับ Vue... เอาล่ะ เรามีสิ่งนี้กับ Next/Nuxt แล้ว
แต่ Gridsome และ Gatsby ก็เช่นเดียวกัน ทั้งคู่ใช้ GraphQL เป็นชั้นข้อมูล แต่ Gridsome ใช้ VueJS นี่เป็นเครื่องมือสร้างไซต์คงที่ที่น่าทึ่งซึ่งจะช่วยคุณสร้างบล็อกที่ยอดเยี่ยม:
คุณจะได้เรียนรู้อะไร
โปรเจ็กต์นี้จะสอนวิธีสร้างบล็อกง่ายๆ เพื่อเริ่มต้นใช้งาน Gridsome, GraphQL และ Markdown นอกจากนี้ยังครอบคลุมถึงวิธีการปรับใช้แอปพลิเคชันผ่าน Netlify
กองเทคโนโลยีและคุณสมบัติต่างๆ
- น่าสยดสยอง
- ดู
- GraphQL
- Markdown
- netlify
นี่ไม่ใช่บทช่วยสอนที่ครอบคลุมที่สุดอย่างแน่นอน แต่ครอบคลุมแนวคิดพื้นฐานของ Gridsome และ .
เครื่องเล่นเสียงเหมือน SoundCloud โดยใช้ Quasar
Quasar เป็นอีกหนึ่งเฟรมเวิร์ก Vue ที่สามารถใช้ในการสร้างแอปพลิเคชันบนมือถือ ในโปรเจ็กต์นี้ คุณจะสร้างแอปพลิเคชันเครื่องเล่นเสียง เช่น:
คุณจะได้เรียนรู้อะไร
ในขณะที่โปรเจ็กต์อื่นๆ มุ่งเน้นไปที่เว็บแอปพลิเคชันเป็นหลัก แต่โปรเจ็กต์นี้จะแสดงวิธีสร้างแอปพลิเคชันมือถือโดยใช้ Vue และเฟรมเวิร์ก Quasar
คุณควรให้ Cordova ทำงานโดยกำหนดค่า Android Studio/Xcode ไว้แล้ว ถ้าไม่เช่นนั้น คู่มือจะมีลิงก์ไปยังเว็บไซต์ Quasar ซึ่งจะแสดงวิธีการตั้งค่าทุกอย่างให้คุณ
กองเทคโนโลยีและคุณสมบัติต่างๆ
- ดวงดาวที่ห่างจากโลกสีร้อยสิบพันปีแสง
- ดู
- คอร์โดวา
- เวฟเซิร์ฟเฟอร์
- ส่วนประกอบ UI
แสดงให้เห็นถึงความสามารถของ Quasar ในการสร้างแอปพลิเคชั่นบนมือถือ
Форма кредитной карты
รูปแบบบัตรเครดิตสุดเท่พร้อมการโต้ตอบแบบย่อยที่ราบรื่นและสนุกสนาน รวมถึงการจัดรูปแบบตัวเลข การตรวจสอบ และการตรวจจับประเภทการ์ดอัตโนมัติ มันถูกสร้างขึ้นบน Vue.js และยังตอบสนองได้อย่างเต็มที่อีกด้วย (คุณสามารถดู .)
สิ่งที่คุณจะได้เรียนรู้:
- ดำเนินการและตรวจสอบแบบฟอร์ม
- จัดการเหตุการณ์ (เช่น เมื่อฟิลด์เปลี่ยนแปลง)
- ทำความเข้าใจวิธีการแสดงและวางองค์ประกอบบนเพจ โดยเฉพาะข้อมูลบัตรเครดิตที่ปรากฏด้านบนของแบบฟอร์ม
กราฟแท่ง
ฮิสโตแกรมเป็นแผนภูมิหรือกราฟที่แสดงข้อมูลหมวดหมู่ด้วยแท่งสี่เหลี่ยมที่มีความสูงและความยาวเป็นสัดส่วนกับค่าที่แสดง
สามารถใช้ในแนวตั้งหรือแนวนอน แผนภูมิแท่งแนวตั้งบางครั้งเรียกว่าแผนภูมิเส้น
สิ่งที่คุณจะได้เรียนรู้:
- แสดงข้อมูลในลักษณะที่มีโครงสร้างและเข้าใจได้
- นอกจากนี้: เรียนรู้วิธีใช้องค์ประกอบ
canvasและวิธีการวาดองค์ประกอบด้วย
คุณสามารถค้นหาข้อมูลประชากรโลกได้ โดยจะจัดเรียงตามปี
Анимация сердечка Twitter
ย้อนกลับไปในปี 2016 Twitter ได้เปิดตัวแอนิเมชั่นที่น่าทึ่งนี้สำหรับทวีต ในปี 2019 มันยังคงดูเป็นส่วนหนึ่งอยู่ ดังนั้นทำไมไม่สร้างมันขึ้นมาเองล่ะ?
สิ่งที่คุณจะได้เรียนรู้:
- ทำงานกับแอตทริบิวต์ CSS
keyframes - จัดการและทำให้องค์ประกอบ HTML เคลื่อนไหว
- รวม JavaScript, HTML และ CSS
Репозитории GitHub с функцией поиска
ไม่มีอะไรพิเศษที่นี่ ที่เก็บ GitHub เป็นเพียงรายการที่น่ายกย่อง
เป้าหมายคือการแสดงที่เก็บและอนุญาตให้ผู้ใช้สามารถกรองได้ ใช้ เพื่อรับพื้นที่เก็บข้อมูลสำหรับผู้ใช้แต่ละคน
หน้าโปรไฟล์ GitHub -
สิ่งที่คุณจะได้เรียนรู้:
- รับข้อมูลจาก API
- แสดงข้อมูลจาก API
- กรองและแสดงข้อมูลที่เกี่ยวข้องสำหรับการค้นหาแต่ละครั้ง
- ทางเลือก: หากคุณต้องการความท้าทาย ให้ใช้ สร้างโดยใช้ GraphQL .
Чаты в стиле Reddit
การแชทเป็นวิธีการสื่อสารที่ได้รับความนิยมเนื่องจากความเรียบง่ายและใช้งานง่าย แต่อะไรคือสิ่งที่กระตุ้นให้เกิดห้องสนทนาสมัยใหม่ เว็บซ็อกเก็ต!
สิ่งที่คุณจะได้เรียนรู้:
- ใช้ WebSockets การสื่อสารแบบเรียลไทม์และการอัพเดตข้อมูล
- ทำงานกับระดับการเข้าถึงของผู้ใช้ (เช่น เจ้าของช่องแชทมีบทบาท
adminและคนอื่นๆ ในห้อง -user) - ประมวลผลและตรวจสอบแบบฟอร์ม - โปรดจำไว้ว่าหน้าต่างแชทสำหรับส่งข้อความคือ
input - สร้างและเข้าร่วมการแชทต่างๆ
- ทำงานกับข้อความส่วนตัว ผู้ใช้สามารถสนทนากับผู้ใช้รายอื่นเป็นการส่วนตัว โดยพื้นฐานแล้ว คุณจะต้องสร้างการเชื่อมต่อ WebSocket ระหว่างผู้ใช้สองคน
Навигация в стиле Stripe
สิ่งที่ทำให้การนำทางนี้ไม่ซ้ำใครคือคอนเทนเนอร์แบบป๊อปโอเวอร์จะแปลงให้พอดีกับเนื้อหา การเปลี่ยนแปลงนี้มีความสง่างามเมื่อเปรียบเทียบกับพฤติกรรมดั้งเดิมของการเปิดและปิดป๊อปโอเวอร์ใหม่
สิ่งที่คุณจะได้เรียนรู้:
- รวมภาพเคลื่อนไหว CSS เข้ากับการเปลี่ยนภาพ
- เนื้อหาสลัวและใช้คลาสที่ใช้งานกับองค์ประกอบลอย
Pacman
สร้าง Pacman เวอร์ชันของคุณเอง นี่เป็นวิธีที่ดีในการทำความเข้าใจว่าเกมได้รับการพัฒนาและเข้าใจพื้นฐานอย่างไร ใช้เฟรมเวิร์ก JavaScript, React หรือ Vue
คุณจะได้เรียนรู้:
- องค์ประกอบต่างๆ เคลื่อนที่อย่างไร
- วิธีกำหนดว่าจะกดปุ่มใด
- วิธีระบุโมเมนต์การชน
- คุณสามารถไปต่อและเพิ่มการควบคุมการเคลื่อนไหวของผีได้
คุณจะพบตัวอย่างของโครงการนี้ GitHub
การจัดการผู้ใช้
โครงการ GitHub
การสร้างแอปพลิเคชันประเภท CRUD สำหรับการดูแลระบบผู้ใช้จะสอนคุณเกี่ยวกับพื้นฐานของการพัฒนา สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับนักพัฒนาใหม่
คุณจะได้เรียนรู้:
- การกำหนดเส้นทางคืออะไร
- วิธีจัดการแบบฟอร์มป้อนข้อมูลและตรวจสอบว่าผู้ใช้กรอกอะไร
- วิธีทำงานกับฐานข้อมูล - สร้าง อ่าน อัปเดต และลบการดำเนินการ
Проверка погоды в вашем местоположении
โครงการ GitHub
หากคุณต้องการสร้างแอป ให้เริ่มด้วยแอปสภาพอากาศ โปรเจ็กต์นี้สามารถทำให้สำเร็จได้โดยใช้ Swift
นอกจากการได้รับประสบการณ์ในการสร้างแอปพลิเคชันแล้ว คุณจะได้เรียนรู้:
- วิธีทำงานกับ API
- วิธีใช้ตำแหน่งทางภูมิศาสตร์
- ทำให้แอปพลิเคชันของคุณมีชีวิตชีวามากขึ้นโดยการเพิ่มการป้อนข้อความ ในนั้นผู้ใช้จะสามารถป้อนตำแหน่งของตนเพื่อตรวจสอบสภาพอากาศในสถานที่เฉพาะได้
คุณจะต้องมี API หากต้องการรับข้อมูลสภาพอากาศ ให้ใช้ OpenWeather API ข้อมูลเพิ่มเติมเกี่ยวกับ OpenWeather API.
Окно чата
หน้าต่างแชทของฉันใช้งานจริง เปิดในสองแท็บเบราว์เซอร์
การสร้างหน้าต่างแชทเป็นวิธีที่สมบูรณ์แบบในการเริ่มต้นใช้งานซ็อกเก็ต ทางเลือกของกองเทคโนโลยีมีขนาดใหญ่มาก ตัวอย่างเช่น Node.js นั้นสมบูรณ์แบบ
คุณจะได้เรียนรู้วิธีการทำงานของซ็อกเก็ตและวิธีการใช้งาน นี่คือข้อได้เปรียบหลักของโครงการนี้
หากคุณเป็นนักพัฒนา Laravel ที่ต้องการทำงานกับซ็อกเก็ต โปรดอ่านของฉัน
GitLab CI
หากคุณยังใหม่ต่อการบูรณาการอย่างต่อเนื่อง (CI) ให้ลองใช้ GitLab CI ตั้งค่าสภาพแวดล้อมบางอย่างและลองทำการทดสอบสองสามรายการ ไม่ใช่โครงการที่ยากมาก แต่ฉันแน่ใจว่าคุณจะได้เรียนรู้มากมายจากโครงการนี้ ขณะนี้ทีมพัฒนาจำนวนมากใช้ CI การรู้วิธีใช้งานก็มีประโยชน์
คุณจะได้เรียนรู้:
- GitLab CI คืออะไร
- วิธีการกำหนดค่า
.gitlab-ci.ymlซึ่งบอกผู้ใช้ GitLab ว่าต้องทำอย่างไร - วิธีปรับใช้กับสภาพแวดล้อมอื่น
Анализатор сайтов
สร้างเครื่องมือขูดที่วิเคราะห์ความหมายของเว็บไซต์และสร้างการให้คะแนน ตัวอย่างเช่น คุณสามารถตรวจสอบแท็ก Alt ที่หายไปในรูปภาพได้ หรือตรวจสอบว่าหน้านั้นมีเมตาแท็ก SEO หรือไม่ สามารถสร้างมีดโกนได้โดยไม่ต้องมีส่วนติดต่อผู้ใช้
คุณจะได้เรียนรู้:
- มีดโกนทำงานอย่างไร?
- วิธีสร้างตัวเลือก DOM
- วิธีเขียนอัลกอริทึม
- หากคุณไม่ต้องการหยุดอยู่แค่นั้น ให้สร้างอินเทอร์เฟซผู้ใช้ คุณยังสามารถสร้างรายงานเกี่ยวกับแต่ละเว็บไซต์ที่คุณตรวจสอบได้
Определение настроений в социальных сетях
การตรวจจับความรู้สึกบนโซเชียลมีเดียเป็นวิธีที่ดีในการทำความรู้จักกับแมชชีนเลิร์นนิง
คุณสามารถเริ่มต้นด้วยการวิเคราะห์เครือข่ายโซเชียลเพียงเครือข่ายเดียว ทุกคนมักจะเริ่มต้นด้วย Twitter
หากคุณมีประสบการณ์เกี่ยวกับแมชชีนเลิร์นนิงอยู่แล้ว ให้ลองรวบรวมข้อมูลจากโซเชียลเน็ตเวิร์กต่างๆ แล้วรวมเข้าด้วยกัน
คุณจะได้เรียนรู้:
- การเรียนรู้ของเครื่องคืออะไร
Клон Trello
สิ่งที่คุณจะได้เรียนรู้:
- องค์กรของเส้นทางการประมวลผลคำขอ (Routing)
- ลากแล้ววาง.
- วิธีสร้างวัตถุใหม่ (บอร์ด รายการ การ์ด)
- การประมวลผลและตรวจสอบข้อมูลอินพุต
- จากฝั่งไคลเอ็นต์: วิธีใช้ที่จัดเก็บในตัวเครื่อง, วิธีบันทึกข้อมูลไปยังที่จัดเก็บในตัวเครื่อง, วิธีอ่านข้อมูลจากที่จัดเก็บในตัวเครื่อง
- จากฝั่งเซิร์ฟเวอร์: วิธีใช้ฐานข้อมูล, วิธีบันทึกข้อมูลในฐานข้อมูล, วิธีอ่านข้อมูลจากฐานข้อมูล
สร้างด้วย React+Redux
Панель админа
แอปพลิเคชัน CRUD ที่เรียบง่าย เหมาะสำหรับการเรียนรู้พื้นฐาน มาเรียนรู้กันเถอะ:
- สร้างผู้ใช้ จัดการผู้ใช้
- โต้ตอบกับฐานข้อมูล - สร้าง อ่าน แก้ไข ลบผู้ใช้
- ตรวจสอบอินพุตและการทำงานกับแบบฟอร์ม
Трекер криптовалют (нативное мобильное приложение)
อะไรก็ได้: Swift, Objective-C, React Native, Java, Kotlin
มาศึกษากันเถอะ:
- แอปพลิเคชันเนทิฟทำงานอย่างไร
- วิธีดึงข้อมูลจาก API
- เค้าโครงเพจดั้งเดิมทำงานอย่างไร
- วิธีทำงานกับเครื่องจำลองมือถือ
. หากคุณพบสิ่งที่ดีกว่าเขียนความคิดเห็น
หากสนใจก็นี่เลยครับ .
Настроить собственный конфиг webpack с нуля
ในทางเทคนิคแล้ว นี่ไม่ใช่แอปพลิเคชัน แต่เป็นงานที่มีประโยชน์มากในการทำความเข้าใจวิธีการทำงานของ webpack จากภายใน ตอนนี้มันจะไม่ใช่ "กล่องดำ" แต่เป็นเครื่องมือที่เข้าใจได้
คุณสมบัติผู้สมัคร:
- คอมไพล์ es7 ถึง es5 (พื้นฐาน)
- คอมไพล์ jsx เป็น js - หรือ - .vue เป็น .js (คุณจะต้องเรียนรู้ตัวโหลด)
- ตั้งค่าเซิร์ฟเวอร์ webpack dev และการโหลดโมดูลใหม่ (vue-cli และ create-react-app ใช้ทั้งคู่)
- ใช้ Heroku, now.sh หรือ Github เรียนรู้วิธีปรับใช้โปรเจ็กต์ webpack
- ตั้งค่าตัวประมวลผลล่วงหน้าที่คุณชื่นชอบเพื่อคอมไพล์ css - scss, less, stylus
- เรียนรู้วิธีใช้รูปภาพและ svgs กับ webpack
Клон Hackernews
เจไดทุกคนจำเป็นต้องสร้าง Hackernews ของตัวเอง
สิ่งที่คุณจะได้เรียนรู้ไปพร้อมกัน:
- วิธีโต้ตอบกับ hackernews API
- วิธีสร้างแอปพลิเคชันหน้าเดียว
- วิธีใช้งานคุณสมบัติต่างๆ เช่น การดูความคิดเห็น ความคิดเห็นส่วนบุคคล โปรไฟล์
- องค์กรของเส้นทางการประมวลผลคำขอ (Routing)
Тудушечка
อย่างจริงจัง? ทูดัชก้า? มีหลายพันคน แต่เชื่อฉันเถอะว่ามีเหตุผลที่ทำให้ได้รับความนิยมนี้
แอป Tudu เป็นวิธีที่ดีเยี่ยมในการทำให้แน่ใจว่าคุณเข้าใจพื้นฐานต่างๆ ลองเขียนแอปพลิเคชันหนึ่งตัวใน vanilla Javascript และอีกหนึ่งแอปพลิเคชันในเฟรมเวิร์กที่คุณชื่นชอบ
เรียนรู้:
- สร้างงานใหม่
- ตรวจสอบว่ากรอกข้อมูลครบถ้วนแล้ว
- กรองงาน (เสร็จแล้ว ใช้งานอยู่ ทั้งหมด) ใช้
filterиreduce. - ทำความเข้าใจพื้นฐานของ Javascript
Сортируемый drag and drop список
มีประโยชน์มากในการทำความเข้าใจ .
มาเรียนรู้กัน:
- ลากและวาง API
- สร้าง UI ที่สมบูรณ์
Клон мессенджера (нативное приложение)
คุณจะเข้าใจว่าทั้งเว็บแอปพลิเคชันและแอปพลิเคชันเนทิฟทำงานอย่างไร ซึ่งจะทำให้คุณแตกต่างจากกลุ่มสีเทา
เราจะศึกษาอะไร:
- ซ็อกเก็ตเว็บ (ข้อความโต้ตอบแบบทันที)
- แอปพลิเคชันเนทิฟทำงานอย่างไร
- เทมเพลตทำงานอย่างไรในแอปพลิเคชันเนทิฟ
- การจัดระเบียบเส้นทางการประมวลผลคำขอในแอปพลิเคชันดั้งเดิม
แก้ไขข้อความ
วัตถุประสงค์ของโปรแกรมแก้ไขข้อความคือเพื่อลดความพยายามของผู้ใช้ที่พยายามแปลงการจัดรูปแบบให้เป็นมาร์กอัป HTML ที่ถูกต้อง โปรแกรมแก้ไขข้อความที่ดีช่วยให้ผู้ใช้สามารถจัดรูปแบบข้อความได้หลายวิธี
เมื่อถึงจุดหนึ่ง ทุกคนต่างก็ใช้โปรแกรมแก้ไขข้อความ แล้วทำไมจะไม่ได้ ?
Клон Reddit
เป็นเว็บไซต์รวบรวมข่าวโซเชียล จัดอันดับเนื้อหาเว็บ และไซต์สนทนา
Reddit ใช้เวลาส่วนใหญ่ของฉัน แต่ฉันก็ยังออกไปเที่ยวกับมันต่อไป การสร้างโคลน Reddit เป็นวิธีที่มีประสิทธิภาพในการเรียนรู้การเขียนโปรแกรม (ขณะเรียกดู Reddit ในเวลาเดียวกัน)
Reddit ให้คุณรวยมาก. อย่าละทิ้งคุณลักษณะใดๆ หรือทำสิ่งที่บังเอิญ ในโลกแห่งความเป็นจริงกับลูกค้า คุณจะไม่สามารถทำงานแบบบังเอิญได้ ไม่เช่นนั้นคุณจะตกงานอย่างรวดเร็ว
ลูกค้าที่ฉลาดจะรู้ทันทีว่างานทำได้ไม่ดีและจะต้องไปหาคนอื่น
Публикация пакета NPM с открытым исходным кодом
หากคุณเขียนโค้ด Javascript มีโอกาสที่คุณจะใช้ตัวจัดการแพ็คเกจ ตัวจัดการแพ็คเกจอนุญาตให้คุณนำโค้ดที่มีอยู่ซึ่งผู้อื่นเขียนและเผยแพร่กลับมาใช้ซ้ำได้
การทำความเข้าใจวงจรการพัฒนาทั้งหมดของแพ็คเกจจะให้ประสบการณ์ที่ดีมาก มีหลายสิ่งที่คุณต้องรู้เมื่อเผยแพร่โค้ด คุณต้องคำนึงถึงความปลอดภัย การกำหนดเวอร์ชันเชิงความหมาย ความสามารถในการปรับขนาด รูปแบบการตั้งชื่อ และการบำรุงรักษา
แพ็คเกจจะเป็นอะไรก็ได้ หากคุณไม่มีไอเดีย สร้าง Lodash ของคุณเองแล้วเผยแพร่
โลดาช:
การมีบางสิ่งที่คุณทำทางออนไลน์จะทำให้คุณเหนือกว่าคนอื่นๆ ถึง 10% เกี่ยวกับโอเพ่นซอร์สและแพ็คเกจ
Учебный план freeCodeCamp
freeCodecamp ได้รวบรวมไว้มากมาย .
freeCodeCamp เป็นองค์กรไม่แสวงผลกำไร ประกอบด้วยแพลตฟอร์มการเรียนรู้บนเว็บเชิงโต้ตอบ ฟอรัมชุมชนออนไลน์ ห้องสนทนา สื่อสิ่งพิมพ์ขนาดกลาง และองค์กรท้องถิ่นที่มีจุดมุ่งหมายเพื่อให้ทุกคนสามารถเข้าถึงการพัฒนาเว็บไซต์การเรียนรู้ได้
คุณจะมีคุณสมบัติมากกว่าสำหรับงานแรกของคุณหากคุณสามารถสำเร็จหลักสูตรทั้งหมดได้
Создайте HTTP-сервер с нуля
โปรโตคอล HTTP เป็นหนึ่งในโปรโตคอลหลักที่ใช้เดินทางเนื้อหาบนอินเทอร์เน็ต เซิร์ฟเวอร์ HTTP ใช้เพื่อให้บริการเนื้อหาคงที่ เช่น HTML, CSS และ JS
ความสามารถในการใช้งานโปรโตคอล HTTP ตั้งแต่เริ่มต้นจะช่วยเพิ่มพูนความรู้ของคุณเกี่ยวกับวิธีการโต้ตอบของสิ่งต่าง ๆ
ตัวอย่างเช่น หากคุณใช้ NodeJs คุณจะรู้ว่า Express มีเซิร์ฟเวอร์ HTTP
เพื่อเป็นข้อมูลอ้างอิง ดูว่าคุณสามารถ:
- ตั้งค่าเซิร์ฟเวอร์โดยไม่ต้องใช้ไลบรารีใดๆ
- เซิร์ฟเวอร์จะต้องให้บริการเนื้อหา HTML, CSS และ JS
- การใช้เราเตอร์ตั้งแต่เริ่มต้น
- ติดตามการเปลี่ยนแปลงและอัพเดตเซิร์ฟเวอร์
หากคุณไม่รู้ว่าทำไมให้ใช้ และลองสร้างเซิร์ฟเวอร์ HTTP ตั้งแต่เริ่มต้น
Десктопное приложение для заметок
เราทุกคนจดบันทึกใช่ไหม?
มาสร้างแอปบันทึกกันเถอะ แอปพลิเคชันจำเป็นต้องบันทึกบันทึกย่อและซิงโครไนซ์กับฐานข้อมูล สร้างแอพแบบเนทีฟโดยใช้ Electron, Swift หรืออะไรก็ได้ที่คุณชอบ และแบบที่เหมาะกับระบบของคุณ
อย่าลังเลที่จะรวมสิ่งนี้เข้ากับความท้าทายแรก (โปรแกรมแก้ไขข้อความ)
เพื่อเป็นโบนัส ให้ลองซิงค์เวอร์ชันเดสก์ท็อปของคุณกับเวอร์ชันเว็บ
Подкасты (клон Overcast)
ใครไม่ฟังพอดแคสต์บ้าง?
สร้างเว็บแอปพลิเคชันด้วยฟังก์ชันการทำงานต่อไปนี้:
- สร้างบัญชี
- ค้นหาพอดแคสต์
- ให้คะแนนและสมัครรับพอดแคสต์
- หยุดและเล่น เปลี่ยนความเร็ว ฟังก์ชั่นเดินหน้าและถอยหลังเป็นเวลา 30 วินาที
ลองใช้ iTunes API เป็นจุดเริ่มต้น หากคุณรู้จักแหล่งข้อมูลอื่น ๆ โปรดโพสต์ในความคิดเห็น
จับภาพหน้าจอ
สวัสดี! ฉันกำลังถ่ายหน้าจออยู่ตอนนี้!
สร้างเดสก์ท็อปหรือเว็บแอปที่ให้คุณจับภาพหน้าจอและบันทึกคลิปเป็นได้ .gif
ที่นี่ ทำอย่างไรจึงจะบรรลุเป้าหมายนี้
แหล่งที่มา
ที่มา: will.com