1. Klon tanggapan
Aplikasi Notion disukai ramai; ia membolehkan anda mengoptimumkan aliran kerja anda, bekerja dengan dokumen, menjadualkan tugas dan menyegerakkan data antara peranti.
Perkara yang anda akan pelajari dengan mencipta klon Notion:
- . Pengguna boleh "merebut dengan tetikus" boleh diseret elemen dan letakkannya boleh dijatuhkan Kawasan.
- Bagaimana untuk menyegerakkan data dalam masa nyata antara komputer dan telefon pintar anda.
- Kami membenarkan pengguna membuat, membaca, mengemas kini dan memadam rekod, dengan itu melatih kemahiran CRUD.
Artikel tersebut telah diterjemahkan dengan sokongan Perisian EDISON, yang Dan .
2. Repl.it klon
Repl.it ialah alat untuk penyuntingan kod kolaboratif masa nyata. Anda boleh memilih beberapa bahasa: JavaScript, Python, Go dan jalankan kod terus dalam penyemak imbas. Sangat berguna untuk tunjuk cara pantas dan temu bual kod.
Perkara yang anda akan pelajari dengan mencipta klon Repl.it:
- Bagaimana untuk menjalankan dan melaksanakan kod (sebelah pelayan) dalam penyemak imbas (sebelah pelanggan).
- Baca data input (kod sumber) dan paparkan hasil pelaksanaan.
- Cara membuat fail dan folder di web dan menyimpan hasilnya.
- Bagaimana untuk menyerlahkan sintaks kod.
3. Klon Foto Google
Foto Google ialah perkhidmatan untuk menyimpan dan berkongsi foto.
Mana-mana aplikasi foto moden boleh melaksanakan fungsi asas: muat naik, pangkas, dsb. Orang ramai ingin mencipta avatar mereka sendiri dan berkongsi foto kucing, jadi anda perlu dapat bekerja dengan imej.
Perkara yang anda akan pelajari dengan membuat klon Google Photos:
- Bagaimana untuk mencipta imej responsif pada telefon, tablet, komputer riba dan juga skrin TV gergasi.
- Cara mengendalikan muat naik imej, terutamanya imej besar (>1MB) dan muat naik pukal.
- Proses fail imej, pangkas dan ubah saiz foto untuk lakaran kecil atau semasa membuka galeri.
- Bonus: bagaimana untuk menyimpan imej dalam awan atau pangkalan data tempatan.
4. Klon Gifsky
menukar video kepada GIF menggunakan fungsi untuk palet bingkai silang yang cekap dan anti-aliasing temporal. Hasilnya ialah GIF dengan beribu-ribu bunga setiap bingkai.
Perkara yang anda akan pelajari dengan mencipta klon Gifski:
- Bagaimana untuk menukar fail video (.mp4 kepada .gif).
- Cara menggunakan API HTML Seret dan Lepas.
- Cara pengoptimuman dan pemprosesan imej berfungsi.
Nota: dan berada di GitHub!
5. Memantau kadar mata wang kripto
Penjejak mata wang kripto asli React
Perkara yang akan anda pelajari dengan mencipta penjejak kadar mata wang:
- Cara bekerja dengan API dan menerima data dari jauh dari API.
- Bagaimana untuk memaparkan data sebagai senarai.
- Bonus: Jika anda berminat, saya baru-baru ini menulis untuk mata wang kripto dengan React Native.
Nota: di sini ialah .
Pilihan projek daripada penerbitan terdahulu.
Layer
Lapisan ialah komuniti di mana semua orang boleh melukis piksel pada "papan" kongsi. Idea asal dilahirkan di Reddit. Komuniti r/Layer ialah metafora untuk kreativiti bersama, bahawa semua orang boleh menjadi pencipta dan menyumbang kepada tujuan bersama.
Perkara yang anda akan pelajari apabila membuat projek Layer anda sendiri:
- Bagaimana kanvas JavaScript berfungsi Mengetahui cara mengendalikan kanvas ialah kemahiran kritikal dalam banyak aplikasi.
- Bagaimana untuk menyelaraskan kebenaran pengguna. Setiap pengguna boleh melukis satu piksel setiap 15 minit tanpa perlu log masuk.
- Buat sesi kuki.
Squoosh
Squoosh ialah aplikasi pemampatan imej dengan banyak pilihan lanjutan.
GIF 20 MB
Dengan mencipta versi Squoosh anda sendiri, anda akan belajar:
- Bagaimana untuk bekerja dengan saiz imej
- Ketahui asas API Drag'n'Drop
- Fahami cara API dan pendengar acara berfungsi
- Cara memuat naik dan mengeksport fail
Nota: Pemampat imej adalah tempatan. Ia tidak perlu menghantar data tambahan ke pelayan. Anda boleh mempunyai pemampat di rumah, atau anda boleh menggunakannya pada pelayan, pilihan anda.
Kalkulator
Ayuh? Serius? Kalkulator? Ya, betul-betul, kalkulator. Memahami asas operasi matematik dan cara ia berfungsi bersama adalah kemahiran kritikal untuk memudahkan aplikasi anda. Lambat laun anda perlu berurusan dengan nombor dan lebih cepat lebih baik.
Dengan mencipta kalkulator anda sendiri, anda akan belajar:
- Bekerja dengan nombor dan operasi matematik
- Berlatih dengan API pendengar acara
- Bagaimana untuk menyusun elemen, memahami gaya
Crawler (Enjin carian)
Semua orang telah menggunakan enjin carian, jadi mengapa tidak membuat enjin carian anda sendiri? Crawler diperlukan untuk mencari maklumat. Semua orang menggunakannya setiap hari dan permintaan untuk teknologi dan pakar ini hanya akan berkembang dari semasa ke semasa.
Enjin carian Google
Perkara yang anda akan pelajari dengan mencipta enjin carian anda sendiri:
- Cara crawler berfungsi
- Bagaimana untuk mengindeks tapak dan cara meletakkannya mengikut rating dan reputasi
- Cara menyimpan tapak yang diindeks dalam pangkalan data dan cara bekerja dengan pangkalan data
Pemain muzik (Spotify, Apple Music)
Semua orang mendengar muzik - ia hanya sebahagian daripada kehidupan kita. Mari cipta pemain muzik untuk lebih memahami cara mekanik asas platform penstriman muzik moden berfungsi.
Spotify
Perkara yang akan anda pelajari dengan mencipta platform penstriman muzik anda sendiri:
- Bagaimana untuk bekerja dengan API. gunakan API daripada Spotify atau Apple Music
- Cara bermain, jeda atau undur ke trek seterusnya/sebelumnya
- Bagaimana untuk menukar kelantangan
- Cara mengurus penghalaan pengguna dan sejarah penyemak imbas
Apl carian filem menggunakan React (dengan cangkuk)
Perkara pertama yang anda boleh mulakan ialah membuat aplikasi carian filem menggunakan React. Di bawah ialah imej tentang rupa permohonan akhir:
Apa yang akan anda pelajari
Dengan membina apl ini, anda akan meningkatkan kemahiran React anda dengan menggunakan API Hooks yang agak baharu. Projek contoh menggunakan komponen React, banyak cangkuk, API luaran, dan sudah tentu beberapa penggayaan CSS.
Timbunan dan ciri teknologi
- Bertindak balas dengan cangkuk
- buat-reaksi-aplikasi
- JSX
- CSS
Tanpa menggunakan sebarang kelas, projek ini memberi anda titik masuk yang sempurna ke dalam React berfungsi dan pasti akan membantu anda pada tahun 2020. awak boleh cari . Ikut arahan atau buat sendiri.
Apl Sembang dengan Vue
Satu lagi projek hebat untuk anda lakukan ialah mencipta aplikasi sembang menggunakan perpustakaan JavaScript kegemaran saya: VueJS. Aplikasi akan kelihatan seperti ini:
Apa yang akan anda pelajari
Dalam tutorial ini, anda akan belajar cara membuat aplikasi Vue dari awal - mencipta komponen, keadaan pengendalian, mencipta laluan, menyambung kepada perkhidmatan pihak ketiga dan juga mengendalikan pengesahan.
Timbunan dan ciri teknologi
- Vue
- vuex
- Penghala Vue
- Paparan CLI
- Pusher
- CSS
Ini adalah projek yang sangat bagus untuk bermula dengan Vue atau meningkatkan kemahiran sedia ada anda untuk memasuki pembangunan pada tahun 2020. awak boleh cari .
Apl cuaca yang cantik dengan Angular 8
Contoh ini akan membantu anda membuat aplikasi cuaca yang cantik menggunakan Angular 8:
Apa yang akan anda pelajari
Projek ini akan mengajar anda kemahiran berharga dalam membina aplikasi dari awal - dari reka bentuk hingga pembangunan, sehingga ke aplikasi sedia untuk digunakan.
Timbunan dan ciri teknologi
- Sudut 8
- Firebase
- Penyampaian sisi pelayan
- CSS dengan Grid dan Flexbox
- Mesra mudah alih dan kebolehsuaian
- Mod gelap
- Antara muka yang cantik
Apa yang saya sangat suka tentang projek yang merangkumi semua ini ialah anda tidak mengkaji sesuatu secara berasingan. Sebaliknya, anda mempelajari keseluruhan proses pembangunan, daripada reka bentuk hingga penggunaan terakhir.
Aplikasi To-Do menggunakan Svelte
Svelte adalah seperti kanak-kanak baharu dalam pendekatan berasaskan komponen - sekurang-kurangnya serupa dengan React, Vue dan Angular. Dan ini adalah salah satu produk baharu yang paling hangat untuk tahun 2020.
Apl Tugasan tidak semestinya topik paling hangat, tetapi ia benar-benar akan membantu anda mengasah kemahiran Svelte anda. Ia akan kelihatan seperti ini:
Apa yang akan anda pelajari
Tutorial ini akan menunjukkan kepada anda cara membuat aplikasi menggunakan Svelte 3, dari awal hingga akhir. Anda akan menggunakan komponen, penggayaan dan pengendali acara
Timbunan dan ciri teknologi
- Lembut 3
- Komponen
- Menggayakan dengan CSS
- sintaks ES 6
Tidak banyak projek permulaan Svelte yang bagus, jadi saya dapati .
Apl e-dagang menggunakan Next.js
Next.js ialah rangka kerja paling popular untuk membina aplikasi React yang menyokong pemaparan sebelah pelayan di luar kotak.
Projek ini akan menunjukkan kepada anda cara membuat aplikasi e-dagang yang kelihatan seperti ini:
Apa yang akan anda pelajari
Dalam projek ini, anda akan belajar cara membangun dengan Next.jsβmembuat halaman dan komponen baharu, mengekstrak data dan gaya serta menggunakan aplikasi Seterusnya.
Timbunan dan ciri teknologi
- Seterusnya.js
- Komponen dan Halaman
- Persampelan data
- Stylization
- Penyerahan Projek
- SSR dan SPA
Ia sentiasa bagus untuk mempunyai contoh dunia sebenar seperti apl e-dagang untuk mempelajari sesuatu yang baharu. Awak boleh .
Blog berbilang bahasa penuh dengan Nuxt.js
Nuxt.js adalah untuk Vue, Next.js adalah untuk React: rangka kerja yang hebat untuk menggabungkan kuasa pemaparan sebelah pelayan dan aplikasi satu halaman
Aplikasi akhir yang anda boleh buat akan kelihatan seperti ini:
Apa yang akan anda pelajari
Dalam projek contoh ini, anda akan belajar cara membuat tapak web yang lengkap menggunakan Nuxt.js, daripada persediaan awal hingga penggunaan terakhir.
Ia mengambil kesempatan daripada banyak ciri hebat yang Nuxt tawarkan, seperti halaman dan komponen, dan penggayaan dengan SCSS.
Timbunan dan ciri teknologi
- Nuxt.js
- Komponen dan Halaman
- Modul sekatan cerita
- Hagfish
- Vuex untuk pengurusan negeri
- SCSS untuk penggayaan
- Nuxt middlewares
, yang merangkumi banyak ciri Nuxt.js yang hebat. Saya secara peribadi suka bekerja dengan Nuxt jadi anda harus mencubanya kerana ia juga akan menjadikan anda pembangun Vue yang hebat.
Blog dengan Gatsby
Gatsby ialah penjana tapak statik yang sangat baik menggunakan React dan GraphQL. Ini adalah hasil projek:
Apa yang akan anda pelajari
Dalam tutorial ini, anda akan belajar cara menggunakan Gatsby untuk mencipta blog yang akan anda gunakan untuk menulis artikel anda sendiri menggunakan React dan GraphQL.
Timbunan dan ciri teknologi
- Gatsby
- Bertindak
- GraphQL
- Pemalam dan tema
- MDX/Markdown
- CSS Bootstrap
- Templat
Jika anda pernah ingin memulakan blog, tentang cara membuatnya menggunakan React dan GraphQL.
Saya tidak mengatakan WordPress adalah pilihan yang tidak baik, tetapi dengan Gatsby anda boleh membina tapak web berprestasi tinggi menggunakan React - yang merupakan gabungan yang menakjubkan.
Blog dengan Gridsome
Gridsome untuk Vue... Okey, kami sudah mempunyai ini dengan Next/Nuxt.
Tetapi perkara yang sama berlaku untuk Gridsome dan Gatsby. Kedua-duanya menggunakan GraphQL sebagai lapisan data mereka, tetapi Gridsome menggunakan VueJS. Ini juga merupakan penjana tapak statik yang menakjubkan yang akan membantu anda mencipta blog yang hebat:
Apa yang akan anda pelajari
Projek ini akan mengajar anda cara membuat blog ringkas untuk bermula dengan Gridsome, GraphQL dan Markdown. Ia juga merangkumi cara untuk menggunakan aplikasi melalui Netlify.
Timbunan dan ciri teknologi
- menyeramkan
- Vue
- GraphQL
- Penurunan harga
- Bersih
Ini sememangnya bukan tutorial yang paling komprehensif, tetapi ia merangkumi konsep asas Gridsome dan .
Pemain audio seperti SoundCloud menggunakan Quasar
Quasar ialah satu lagi rangka kerja Vue yang boleh digunakan untuk mencipta aplikasi mudah alih. Dalam projek ini anda akan mencipta aplikasi pemain audio, sebagai contoh:
Apa yang akan anda pelajari
Walaupun projek lain tertumpu terutamanya pada aplikasi web, projek ini akan menunjukkan kepada anda cara membuat aplikasi mudah alih menggunakan rangka kerja Vue dan Quasar.
Anda sepatutnya sudah menjalankan Cordova dengan Android Studio/Xcode dikonfigurasikan. Jika tidak, manual mempunyai pautan ke tapak web Quasar di mana mereka menunjukkan kepada anda cara untuk menyediakan segala-galanya.
Timbunan dan ciri teknologi
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponen UI
, menunjukkan keupayaan Quasar untuk mencipta aplikasi mudah alih.
Borang kad kredit
Bentuk kad kredit yang menarik dengan interaksi mikro yang lancar dan menyeronokkan. Termasuk pemformatan nombor, pengesahan dan pengesanan jenis kad automatik. Ia dibina pada Vue.js dan juga responsif sepenuhnya. (Awak boleh lihat .)
Perkara yang akan anda pelajari:
- Memproses dan mengesahkan borang
- Mengendalikan acara (contohnya, apabila medan berubah)
- Fahami cara memaparkan dan meletakkan elemen pada halaman, terutamanya maklumat kad kredit yang muncul di bahagian atas borang
Grafik bar
Histogram ialah carta atau graf yang mewakili data kategori dengan bar segi empat tepat dengan ketinggian atau panjang berkadar dengan nilai yang diwakilinya.
Mereka boleh digunakan secara menegak atau mendatar. Carta bar menegak kadangkala dipanggil carta garis.
Perkara yang akan anda pelajari:
- Paparkan data dengan cara yang tersusun dan boleh difahami
- Selain itu: Ketahui cara menggunakan elemen
canvasdan cara melukis elemen dengannya
anda boleh mencari data populasi dunia. Mereka disusun mengikut tahun.
Animasi Hati Twitter
Kembali pada tahun 2016, Twitter memperkenalkan animasi yang menakjubkan ini untuk tweetnya. Sehingga 2019, ia masih kelihatan sebagai bahagian, jadi mengapa tidak buat sendiri?
Perkara yang akan anda pelajari:
- Bekerja dengan atribut CSS
keyframes - Memanipulasi dan menghidupkan elemen HTML
- Gabungkan JavaScript, HTML dan CSS
Repositori GitHub yang boleh dicari
Tiada yang menarik di siniβrepositori GitHub hanyalah senarai yang dimuliakan.
Matlamatnya adalah untuk memaparkan repositori dan membenarkan pengguna menapisnya. guna untuk mendapatkan repositori untuk setiap pengguna.
Halaman profil GitHub -
Perkara yang akan anda pelajari:
- Terima data daripada API
- Paparkan data daripada API
- Tapis dan tunjukkan data yang berkaitan untuk setiap carian
- Pilihan: Jika anda bersedia menghadapi cabaran, gunakan , dibina menggunakan GraphQL. .
Sembang gaya Reddit
Sembang ialah cara komunikasi yang popular kerana kesederhanaan dan kemudahan penggunaannya. Tetapi apakah yang benar-benar memacu bilik sembang moden? WebSockets!
Perkara yang akan anda pelajari:
- Gunakan WebSockets, komunikasi masa nyata dan kemas kini data
- Bekerja dengan tahap akses pengguna (contohnya, pemilik saluran sembang mempunyai peranan
admin, dan orang lain di dalam bilik -user) - Memproses dan mengesahkan borang - ingat, tetingkap sembang untuk menghantar mesej adalah
input - Buat dan sertai sembang yang berbeza
- Bekerja dengan mesej peribadi. Pengguna boleh bersembang dengan pengguna lain secara peribadi. Pada asasnya, anda akan mewujudkan sambungan WebSocket antara dua pengguna.
Navigasi gaya jalur
Apa yang menjadikan navigasi ini unik ialah bekas popover berubah agar sesuai dengan kandungan. Terdapat keanggunan pada peralihan ini berbanding dengan gelagat tradisional membuka dan menutup popover baharu.
Perkara yang akan anda pelajari:
- Gabungkan animasi CSS dengan peralihan
- Malapkan kandungan dan gunakan kelas aktif pada elemen terapung
Pacman
Cipta versi Pacman anda sendiri. Ini adalah cara yang bagus untuk mendapatkan idea tentang cara permainan dibangunkan dan memahami asasnya. Gunakan rangka kerja JavaScript, React atau Vue.
Awak akan belajar:
- Bagaimana elemen bergerak
- Bagaimana untuk menentukan kekunci yang hendak ditekan
- Bagaimana untuk menentukan momen perlanggaran
- Anda boleh pergi lebih jauh dan menambah kawalan pergerakan hantu
Anda akan dapati contoh projek ini GitHub
Pengurusan pengguna
Projek GitHub
Mencipta aplikasi jenis CRUD untuk pentadbiran pengguna akan mengajar anda asas pembangunan. Ini amat berguna untuk pembangun baharu.
Awak akan belajar:
- Apakah penghalaan
- Cara mengendalikan borang kemasukan data dan menyemak perkara yang telah dimasukkan oleh pengguna
- Cara bekerja dengan pangkalan data - buat, baca, kemas kini dan padam tindakan
Memeriksa cuaca di lokasi anda
Projek GitHub
Jika anda ingin membuat apl, mulakan dengan apl cuaca. Projek ini boleh disiapkan menggunakan Swift.
Selain mendapat pengalaman membina aplikasi, anda akan belajar:
- Bagaimana untuk bekerja dengan API
- Cara menggunakan geolokasi
- Jadikan aplikasi anda lebih dinamik dengan menambahkan input teks. Di dalamnya, pengguna akan dapat memasukkan lokasi mereka untuk menyemak cuaca di lokasi tertentu.
Anda memerlukan API. Untuk mendapatkan data cuaca, gunakan OpenWeather API. Maklumat lanjut tentang OpenWeather API.
Tetingkap sembang
Tetingkap sembang saya dalam tindakan, buka dalam dua tab penyemak imbas
Mencipta tetingkap sembang ialah cara terbaik untuk bermula dengan soket. Pilihan timbunan teknologi adalah besar. Node.js, sebagai contoh, adalah sempurna.
Anda akan belajar cara soket berfungsi dan cara melaksanakannya. Ini adalah kelebihan utama projek ini.
Jika anda seorang pembangun Laravel yang ingin bekerja dengan soket, baca saya
GitLab CI
Jika anda baru dalam penyepaduan berterusan (CI), bermain-main dengan GitLab CI. Sediakan beberapa persekitaran dan cuba jalankan beberapa ujian. Ia bukan projek yang sangat sukar, tetapi saya pasti anda akan belajar banyak daripadanya. Banyak pasukan pembangunan kini menggunakan CI. Mengetahui cara menggunakannya adalah berguna.
Awak akan belajar:
- Apakah itu GitLab CI
- Bagaimana untuk mengkonfigurasi
.gitlab-ci.ymlyang memberitahu pengguna GitLab apa yang perlu dilakukan - Cara menggunakan ke persekitaran lain
Penganalisis laman web
Buat pengikis yang menganalisis semantik tapak web dan mencipta penilaiannya. Sebagai contoh, anda boleh menyemak teg alt yang hilang dalam imej. Atau semak sama ada halaman tersebut mempunyai tag meta SEO. Pengikis boleh dibuat tanpa antara muka pengguna.
Awak akan belajar:
- Bagaimanakah pengikis berfungsi?
- Cara membuat pemilih DOM
- Bagaimana untuk menulis algoritma
- Jika anda tidak mahu berhenti di situ, buat antara muka pengguna. Anda juga boleh membuat laporan pada setiap tapak web yang anda semak.
Pengesanan sentimen pada rangkaian sosial
Pengesanan sentimen pada media sosial ialah cara terbaik untuk diperkenalkan kepada pembelajaran mesin.
Anda boleh mulakan dengan menganalisis hanya satu rangkaian sosial. Semua orang biasanya bermula dengan Twitter.
Jika anda sudah mempunyai pengalaman dengan pembelajaran mesin, cuba kumpulkan data daripada rangkaian sosial yang berbeza dan gabungkannya.
Awak akan belajar:
- Apakah pembelajaran mesin
Klon Trello
Apa yang anda akan pelajari:
- Organisasi laluan pemprosesan permintaan (Penghalaan).
- Seret dan lepas.
- Cara membuat objek baharu (papan, senarai, kad).
- Memproses dan menyemak data input.
- Dari sisi pelanggan: cara menggunakan storan tempatan, cara menyimpan data ke storan tempatan, cara membaca data dari storan tempatan.
- Dari sisi pelayan: cara menggunakan pangkalan data, cara menyimpan data dalam pangkalan data, cara membaca data dari pangkalan data.
, dibuat dalam React+Redux.
Panel pentadbir
Aplikasi CRUD yang mudah, sesuai untuk mempelajari asas. Jom belajar:
- Buat pengguna, urus pengguna.
- Berinteraksi dengan pangkalan data - buat, baca, edit, padam pengguna.
- Mengesahkan input dan bekerja dengan borang.
Penjejak mata wang kripto (apl mudah alih asli)
Apa-apa sahaja: Swift, Objective-C, React Native, Java, Kotlin.
Jom belajar:
- Cara aplikasi asli berfungsi.
- Bagaimana untuk mendapatkan semula data daripada API.
- Cara reka letak halaman asli berfungsi.
- Cara bekerja dengan simulator mudah alih.
. Jika anda mendapati sesuatu yang lebih baik, tulis dalam komen.
Jika anda berminat, ini dia .
Sediakan konfigurasi webpack anda sendiri dari awal
Secara teknikal, ini bukan aplikasi, tetapi ia adalah tugas yang sangat berguna untuk memahami cara pek web berfungsi dari dalam. Kini ia tidak akan menjadi "kotak hitam", tetapi alat yang boleh difahami.
Keperluan:
- Susun es7 hingga es5 (asas).
- Susun jsx ke js - atau - .vue ke .js (anda perlu belajar pemuat)
- Sediakan pelayan pembangun webpack dan muat semula modul panas. (vue-cli dan create-react-app menggunakan kedua-duanya)
- Gunakan Heroku, now.sh atau Github, ketahui cara menggunakan projek webpack.
- Sediakan prapemproses kegemaran anda untuk menyusun css - scss, less, stylus.
- Ketahui cara menggunakan imej dan svg dengan webpack.
Klon berita penggodam
Setiap Jedi dikehendaki membuat Hackernews sendiri.
Apa yang anda akan pelajari sepanjang perjalanan:
- Bagaimana untuk berinteraksi dengan API hackernews.
- Cara membuat aplikasi satu halaman.
- Bagaimana untuk melaksanakan ciri seperti melihat ulasan, ulasan individu, profil.
- Organisasi laluan pemprosesan permintaan (Penghalaan).
Tudushechka
Serius? Tudushka? Terdapat beribu-ribu daripada mereka. Tetapi percayalah, ada sebab untuk populariti ini.
Apl Tudu ialah cara terbaik untuk memastikan anda memahami asasnya. Cuba tulis satu aplikasi dalam Javascript vanila dan satu dalam rangka kerja kegemaran anda.
belajar:
- Buat tugasan baharu.
- Semak bahawa medan telah diisi.
- Tapis tugas (selesai, aktif, semua). guna
filterΠΈreduce. - Fahami asas Javascript.
Senarai seret dan lepas boleh disusun
Sangat membantu untuk difahami .
Jom belajar:
- Seret dan lepas API
- Cipta UI yang kaya
Klon Messenger (apl asli)
Anda akan memahami cara kedua-dua aplikasi web dan aplikasi asli berfungsi, yang akan membezakan anda daripada jisim kelabu.
Apa yang akan kita kaji:
- Soket web (mesej segera)
- Cara aplikasi asli berfungsi.
- Cara templat berfungsi dalam aplikasi asli.
- Mengatur laluan pemprosesan permintaan dalam aplikasi asli.
Penyunting teks
Tujuan penyunting teks adalah untuk mengurangkan usaha pengguna yang cuba menukar pemformatan mereka kepada penanda HTML yang sah. Penyunting teks yang baik membolehkan pengguna memformat teks dengan cara yang berbeza.
Pada satu ketika, semua orang telah menggunakan editor teks. Jadi kenapa tidak ?
Klon Reddit
ialah pengagregatan berita sosial, penarafan kandungan web dan tapak perbincangan.
Reddit mengambil sebahagian besar masa saya, tetapi saya terus bergaul dengannya. Mencipta klon Reddit ialah cara yang berkesan untuk mempelajari pengaturcaraan (semasa menyemak imbas Reddit pada masa yang sama).
Reddit memberikan anda yang sangat kaya. Jangan tinggalkan sebarang ciri atau lakukan perkara secara sembarangan. Dalam dunia sebenar dengan pelanggan dan pelanggan, anda tidak boleh bekerja secara sembarangan, atau anda akan kehilangan pekerjaan anda dengan cepat.
Pelanggan pintar akan segera menyedari bahawa kerja itu dilakukan dengan buruk dan akan mencari orang lain.
Menerbitkan pakej NPM sumber terbuka
Jika anda menulis kod Javascript, kemungkinan besar anda menggunakan pengurus pakej. Pengurus pakej membenarkan anda menggunakan semula kod sedia ada yang telah ditulis dan diterbitkan oleh orang lain.
Memahami kitaran pembangunan penuh pakej akan memberikan pengalaman yang sangat baik. Terdapat banyak perkara yang anda perlu tahu semasa menerbitkan kod. Anda perlu memikirkan tentang keselamatan, versi semantik, skalabiliti, konvensyen penamaan dan penyelenggaraan.
Pakej boleh jadi apa sahaja. Jika anda tidak mempunyai idea, cipta Lodash anda sendiri dan terbitkannya.
Lodash:
Mempunyai sesuatu yang telah anda lakukan dalam talian meletakkan anda 10% di atas orang lain. mengenai sumber terbuka dan pakej.
Kurikulum percumaCodeCamp
freeCodecamp telah mengumpul banyak .
freeCodeCamp ialah organisasi bukan untung. Ia terdiri daripada platform pembelajaran berasaskan web interaktif, forum komuniti dalam talian, bilik sembang, penerbitan Sederhana dan organisasi tempatan yang berhasrat menjadikan pembangunan web pembelajaran boleh diakses oleh semua orang.
Anda akan lebih layak untuk pekerjaan pertama anda jika anda berjaya menyelesaikan keseluruhan kursus.
Buat pelayan HTTP dari awal
Protokol HTTP adalah salah satu protokol utama yang melaluinya kandungan bergerak di Internet. Pelayan HTTP digunakan untuk menyampaikan kandungan statik seperti HTML, CSS dan JS.
Keupayaan untuk melaksanakan protokol HTTP dari awal akan mengembangkan pengetahuan anda tentang cara sesuatu berinteraksi.
Sebagai contoh, jika anda menggunakan NodeJs, maka anda tahu bahawa Express menyediakan pelayan HTTP.
Untuk rujukan, lihat jika anda boleh:
- Sediakan pelayan tanpa menggunakan mana-mana perpustakaan
- Pelayan mesti menyediakan kandungan HTML, CSS dan JS.
- Melaksanakan penghala dari awal
- Pantau perubahan dan kemas kini pelayan
Jika anda tidak tahu mengapa, gunakan dan cuba buat pelayan HTTP dari awal.
Apl desktop untuk nota
Kita semua mengambil nota, bukan?
Mari buat aplikasi nota. Aplikasi perlu menyimpan nota dan menyegerakkannya dengan pangkalan data. Bina apl asli menggunakan Electron, Swift atau apa sahaja yang anda suka dan perkara yang sesuai untuk sistem anda.
Jangan ragu untuk menggabungkan ini dengan cabaran pertama (editor teks).
Sebagai bonus, cuba segerakkan versi desktop anda dengan versi web.
Podcast (Klon mendung)
Siapa yang tidak mendengar podcast?
Cipta aplikasi web dengan fungsi berikut:
- Buat akaun
- Cari Podcast
- Nilai dan langgan podcast
- Berhenti dan main, tukar kelajuan, fungsi ke hadapan dan ke belakang selama 30 saat.
Cuba gunakan API iTunes sebagai titik permulaan. Jika anda mengetahui sumber lain, sila siarkan dalam ulasan.
Tangkapan skrin
hello! Saya sedang merakam skrin saya sekarang!
Buat desktop atau aplikasi web yang membolehkan anda menangkap skrin anda dan menyimpan klip sebagai .gif
di sini ialah bagaimana untuk mencapai ini.
sumber
Sumber: www.habr.com