Dojo bahagian hadapan: projek untuk melatih kemahiran pembangun (5 baharu + 43 lama)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Artikel tersebut telah diterjemahkan dengan sokongan Perisian EDISON, yang разрабатывает приложения и сайтыDan melabur dalam syarikat permulaan.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonus: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

gifski конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Nota: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Bonus: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Nota: di sini ialah GitHub example repository.

Подборка проектов из предыдущих публикаций.

Layer

www.reddit.com/r/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.app

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.

jarodburchill.github.io/CalculatorReactApp

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

Приложение для поиска фильмов с помощью React (с хуками)

Первое, с чего вы могли бы начать, — это создать приложение для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть финальное приложение:

Apa yang akan anda pelajari
Создавая это приложение, вы улучшите свои навыки React, используя сравнительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стили CSS.

Технический стек и фичи

• React с hook’ами
• buat-reaksi-aplikasi
• JSX
• CSS

Без использования каких-либо классов, эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году. Вы можете найти пример проекта здесь. Следуйте инструкциям или сделайте все на собственный вкус.

Приложение чата с помощью Vue

Еще один отличный проект для вас — создать приложение чата, используя мою любимую библиотеку JavaScript: VueJS. Приложение будет выглядеть примерно так:

Apa yang akan anda pelajari
Из этого руководства вы узнаете, как сделать приложение Vue с нуля — создавать компоненты, обрабатывать состояния, создавать маршруты, подключаться к сторонним сервисам и даже обрабатывать аутентификацию.

Технический стек и фичи

• Vue
• vuex
• Penghala Vue
• Paparan CLI
• Pusher
• CSS

Это действительно отличный проект, чтобы начать работать с Vue или улучшить свои существующие навыки, чтобы заняться разработкой в 2020 году. Вы можете найти туториал здесь.

Красивое приложение для просмотра погоды с Angular 8

Этот пример поможет вам создать красивое приложение для просмотра погоды с помощью Angular 8:

Apa yang akan anda pelajari
Этот проект научит вас ценным навыкам при создании приложений с нуля — начиная с проектирования и заканчивая разработкой, вплоть до готового к развертыванию приложения.

Технический стек и фичи

• Sudut 8
• Firebase
• Рендеринг на стороне сервера
• CSS с сеткой и Flexbox
• Mobile friendly и адаптивность
• Mod gelap
• Красивый интерфейс

Что мне действительно очень нравится в этом всеобъемлющем проекте, так это то, что вы не изучаете вещи изолированно. Вместо этого вы изучаете весь процесс разработки — от проектирования до окончательного развертывания.

To-Do приложение с помощью Svelte

Svelte это как новый ребенок в компонентном подходе — по крайней мере, похожий на React, Vue и Angular. И это одна из самых горячих новинок на 2020 год.

To-Do приложения не обязательно являются самой горячей темой, но это действительно поможет вам оттачивать свои навыки Svelte. Это будет выглядеть так:

Apa yang akan anda pelajari
Из этого туториала вы узнаете, как создать приложение с помощью Svelte 3, от начала до конца. Вы будете использовать компоненты, стилизацию и обработчики событий

Технический стек и фичи

• Svelte 3
• Komponen
• Стилизация с помощью CSS
• Синтаксис ES 6

Существует не так много хороших стартовых проектов по Svelte, поэтому я нашел этот хороший вариант для начала.

Приложение для электронной коммерции с помощью Next.js

Next.js является самым популярным фреймворком для создания приложений React, которые поддерживают рендеринг на стороне сервера из коробки.

Этот проект покажет вам, как создать приложение для электронной коммерции, которая выглядит следующим образом:

Apa yang akan anda pelajari
В этом проекте вы узнаете, как разрабатывать с помощью Next.js — создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.

Технический стек и фичи

• Seterusnya.js
• Компоненты и страницы
• Persampelan data
• Stylization
• Развертывание проекта
• SSR и SPA

Всегда здорово иметь реальный пример, такой как приложение для электронной коммерции, чтобы узнать что-то новое. Вы можете найти туториал здесь.

Полноценный мультиязычный блог с Nuxt.js

Nuxt.js для Vue, тоже что и Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений
Последнее приложение, которое вы можете создать, будет выглядеть так:

Apa yang akan anda pelajari

В этом примере проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js — от начальной настройки до окончательного развертывания.

Он использует множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.

Технический стек и фичи

• Nuxt.js
• Компоненты и страницы
• Storyblock модуль
• Миксины
• Vuex для управления состоянием
• SCSS для стилизации
• Nuxt middlewares

Это действительно крутой проект, который включает в себя множество замечательных возможностей Nuxt.js. Я лично люблю работать с Nuxt, так что вам стоит попробовать его, так как это также сделает вас отличным разработчиком Vue.

Блог с Gatsby

Gatsby — отличный генератор статических сайтов, использующий React и GraphQL. Это результат проекта:

Apa yang akan anda pelajari

В этом руководстве вы узнаете, как использовать Gatsby для создания блога, который вы будете использовать для написания своих собственных статей, используя React и GraphQL.

Технический стек и фичи

• Gatsby
• Bertindak
• GraphQL
• Плагины и темы
• MDX/Markdown
• Bootstrap CSS
• Templat

Если вы когда-нибудь хотели завести блог, это отличный пример того, как сделать его, используя React и GraphQL.

Я не говорю, что WordPress является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React — что является удивительной комбинацией.

Блог с Gridsome

Gridsome для Vue… Хорошо, у нас уже было это с Next/Nuxt.
Но то же самое верно для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:

Apa yang akan anda pelajari

Этот проект научит вас, как создать простой блог, чтобы начать работу с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.

Технический стек и фичи

• menyeramkan
• Vue
• GraphQL
• Penurunan harga
• Bersih

Это, конечно, не самый полный туториал, но он охватывает основные понятия Gridsome и Markdown и может стать хорошей отправной точкой.

Аудио плеер, похожий на SoundCloud, с помощью Quasar

Quasar — это еще один фреймворк Vue, который можно использовать для создания мобильных приложений. В этом проекте вы создадите приложение аудио-плеера, например:

Apa yang akan anda pelajari

В то время как другие проекты сосредоточены в основном на веб-приложениях, этот покажет вам, как создать мобильное приложение с использованием Vue и фреймворка Quasar.
У вас уже должна быть работающая Cordova с настроенной Android Studio/Xcode. Если нет, то в руководстве есть ссылка на веб-сайт Quasar, где они показывают, как все настроить.

Технический стек и фичи

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Компоненты

Небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений.

Форма кредитной карты

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 di sini.)

borang kad kredit

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 canvas dan cara melukis elemen dengannya

ia adalah anda boleh mencari data populasi dunia. Mereka disusun mengikut tahun.

Анимация сердечка 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

Репозитории GitHub с функцией поиска

Tiada yang menarik di sini—repositori GitHub hanyalah senarai yang dimuliakan.
Matlamatnya adalah untuk memaparkan repositori dan membenarkan pengguna menapisnya. guna API GitHub rasmi untuk mendapatkan repositori untuk setiap pengguna.

Halaman profil GitHub - github.com/indreklasn

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 API v4, dibina menggunakan GraphQL. Jika anda ingin mempelajari GraphQL, pergi ke salah satu artikel saya sebelum ini.

Чаты в стиле 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.

Навигация в стиле Stripe

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 dalam repositori GitHub

Pengurusan pengguna

Projek dalam repositori 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

Проверка погоды в вашем местоположении

Projek dalam repositori 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 di sini.

Окно чата

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 artikel

GitLab CI

Source

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

Анализатор сайтов

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.

Определение настроений в социальных сетях

Source

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

Клон Trello

Klon Trello dari Indrek Lasn.

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.

Berikut adalah contoh repositori, dibuat dalam React+Redux.

Панель админа

Repositori Github.

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.

Трекер криптовалют (нативное мобильное приложение)

Repositori Github.

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.

Cuba API ini. Jika anda mendapati sesuatu yang lebih baik, tulis dalam komen.

Jika anda berminat, ini dia inilah tutorial.

Настроить собственный конфиг webpack с нуля

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.

Ini adalah sumber yang menakjubkan untuk pemula yang lengkap.

Клон Hackernews

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).

Тудушечка

TodoMVC.

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.

Сортируемый drag and drop список

Repositori Github.

Sangat membantu untuk difahami seret dan lepas api.

Jom belajar:

• Seret dan lepas API
• Cipta UI yang kaya

Клон мессенджера (нативное приложение)

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 buat sendiri?

Клон Reddit

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 API. 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.

API Reddit

Публикация пакета NPM с открытым исходным кодом

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: lodash.com

Mempunyai sesuatu yang telah anda lakukan dalam talian meletakkan anda 10% di atas orang lain. Berikut adalah beberapa sumber yang berguna mengenai sumber terbuka dan pakej.

Учебный план freeCodeCamp

Kurikulum FCC

freeCodecamp telah mengumpul banyak kursus pengaturcaraan yang komprehensif.

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.

Создайте HTTP-сервер с нуля

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 Pergi sahaja dan cuba buat pelayan HTTP Kedi dari awal.

Десктопное приложение для заметок

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.

Подкасты (клон Overcast)

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.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

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 sedikit tipsbagaimana untuk mencapai ini.

sumber

• 5 lagi projek latihan berani untuk pembangun (Lapisan, Squoosh, Kalkulator, Perangkak Laman Web, Pemain Muzik)
• 9 projek untuk mengasah kemahiran Front-End anda
• Enam tugas untuk pembangun Front-End
• Latihan yang menyeronokkan untuk pembangun
• 8 projek pendidikan
• Satu lagi senarai projek untuk diamalkan

Sumber: www.habr.com