1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Məqalə EDISON Software şirkətinin dəstəyi ilə tərcümə edilmişdir Və .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Bonus: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Qeyd: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Qeyd: Burada .
Подборка проектов из предыдущих публикаций.
qat
Layer, hər kəsin paylaşılan "lövhədə" piksel çəkə biləcəyi bir cəmiyyətdir. Orijinal ideya Reddit-də yaranıb. r/Layer icması hər kəsin yaradıcı ola biləcəyi və ümumi işə töhfə verə biləcəyi paylaşılan yaradıcılığın metaforasıdır.
Öz Layer layihənizi yaratarkən nə öyrənəcəksiniz:
- JavaScript kətan necə işləyir Kətanı necə idarə etməyi bilmək bir çox tətbiqlərdə mühüm bacarıqdır.
- İstifadəçi icazələrini necə əlaqələndirmək olar. Hər bir istifadəçi daxil olmadan hər 15 dəqiqədə bir piksel çəkə bilər.
- Kuki sessiyaları yaradın.
Squoosh
Squoosh bir çox inkişaf etmiş variantları olan bir şəkil sıxma proqramıdır.
GIF 20 MB
Öz Squoosh versiyanızı yaratmaqla siz öyrənəcəksiniz:
- Şəkil ölçüləri ilə necə işləmək olar
- Drag'n'Drop API əsaslarını öyrənin
- API və hadisə dinləyicilərinin necə işlədiyini anlayın
- Faylları necə yükləmək və ixrac etmək olar
Qeyd: Şəkil kompressoru yerlidir. Serverə əlavə məlumat göndərmək lazım deyil. Kompressoru evdə əldə edə bilərsiniz və ya onu öz seçiminizə görə serverdə istifadə edə bilərsiniz.
Kalkulyator
Hadi? Ciddi? Kalkulyator? Bəli, dəqiq, kalkulyator. Riyaziyyat əməliyyatlarının əsaslarını və onların birlikdə necə işlədiyini başa düşmək tətbiqlərinizi sadələşdirmək üçün vacib bir bacarıqdır. Gec-tez siz rəqəmlərlə məşğul olmalı olacaqsınız və nə qədər tez bir o qədər yaxşıdır.
Öz kalkulyatorunuzu yaratmaqla siz öyrənəcəksiniz:
- Rəqəmlər və riyazi əməliyyatlarla işləmək
- Hadisə dinləyiciləri API ilə məşq edin
- Elementləri necə təşkil etmək, üslubları başa düşmək
Crawler (Axtarış motoru)
Hər kəs axtarış motorundan istifadə edib, bəs niyə öz axtarış motorunuzu yaratmayasınız? Məlumat axtarmaq üçün taramaçılar lazımdır. Hər kəs onlardan hər gün istifadə edir və bu texnologiyaya və mütəxəssislərə tələbat yalnız zamanla artacaq.
Google axtarış motoru
Öz axtarış motorunuzu yaratmaqla nə öyrənəcəksiniz:
- Tarayıcılar necə işləyir
- Saytları necə indeksləşdirmək və onları reytinq və reputasiya ilə necə sıralamaq olar
- İndekslənmiş saytları verilənlər bazasında necə saxlamaq və verilənlər bazası ilə işləmək
Musiqi pleyeri (Spotify, Apple Music)
Hər kəs musiqiyə qulaq asır - bu, sadəcə olaraq həyatımızın ayrılmaz hissəsidir. Müasir musiqi axını platformasının əsas mexanikasının necə işlədiyini daha yaxşı başa düşmək üçün musiqi pleyeri yaradaq.
Spotify
Öz musiqi axını platformanızı yaratmaqla nə öyrənəcəksiniz:
- API ilə necə işləmək olar. Spotify və ya Apple Music-dən API istifadə edin
- Növbəti/əvvəlki treki necə oynamaq, dayandırmaq və ya geri çəkmək
- Səs səviyyəsini necə dəyişdirmək olar
- İstifadəçi marşrutunu və brauzer tarixini necə idarə etmək olar
React ilə film axtarış proqramı (qarmaqlar ilə)
Başlaya biləcəyiniz ilk şey React ilə film axtarış proqramı yaratmaqdır. Aşağıda son tətbiqin necə görünəcəyinə dair bir şəkil verilmişdir:
Nə öyrənəcəksən
Bu proqramı qurmaqla siz nisbətən yeni Hooks API-dən istifadə edərək Reaksiya bacarıqlarınızı təkmilləşdirəcəksiniz. Nümunə layihə React komponentlərindən, çoxlu qarmaqlardan, xarici API-dən və əlbəttə ki, bəzi CSS üslublarından istifadə edir.
Texniki yığın və xüsusiyyətlər
- Qarmaqlarla reaksiya verin
- yaratmaq-reaksiya-app
- JSX
- CSS
Heç bir dərsdən istifadə etmədən bu layihələr sizə funksional React-ə mükəmməl giriş nöqtəsi verir və 2020-ci ildə mütləq sizə kömək edəcəkdir. Sən tapa bilərsən . Təlimatlara əməl edin və ya özünüz edin.
Vue ilə söhbət proqramı
Sizin üçün başqa bir gözəl layihə mənim sevimli JavaScript kitabxanamdan istifadə edərək söhbət proqramı yaratmaqdır: VueJS. Tətbiq bu kimi görünəcək:
Nə öyrənəcəksən
Bu dərslikdə siz Vue tətbiqini sıfırdan necə yaratmağı öyrənəcəksiniz - komponentlər yaradın, vəziyyətləri idarə edin, marşrutlar yaradın, üçüncü tərəf xidmətlərinə qoşulun və hətta autentifikasiyanı idarə edin.
Texniki yığın və xüsusiyyətlər
- Vue
- vuex
- vue marşrutlaşdırıcısı
- CLI görünüşü
- Pusher
- CSS
Bu, Vue ilə başlamaq və ya 2020-ci ildə inkişafa başlamaq üçün mövcud bacarıqlarınızı təkmilləşdirmək üçün həqiqətən əla layihədir. Sən tapa bilərsən .
Angular 8 ilə gözəl hava proqramı
Bu nümunə Angular 8 istifadə edərək gözəl hava proqramı yaratmağınıza kömək edəcək:
Nə öyrənəcəksən
Bu layihə sizə sıfırdan tətbiqlər yaratmaqda dəyərli bacarıqları öyrədəcək - dizayndan inkişafa, istifadəyə hazır proqrama qədər.
Texniki yığın və xüsusiyyətlər
- Bucaqlı 8
- Firebase
- Server tərəfinin göstərilməsi
- Grid və Flexbox ilə CSS
- Mobil uyğunluq və uyğunlaşma
- Temnyy rejim
- Gözəl interfeys
Bu hərtərəfli layihədə həqiqətən bəyəndiyim şey şeyləri təcrid olunmuş şəkildə öyrənməməyinizdir. Bunun əvəzinə dizayndan son yerləşdirməyə qədər bütün inkişaf prosesini öyrənirsiniz.
Svelte ilə To-Do proqramı
Svelte komponent yanaşmasında yeni uşaq kimidir - ən azı React, Vue və Angular-a bənzəyir. Və bu, 2020-ci ilin ən isti yeni məhsullarından biridir.
Görüləcək proqramlar mütləq ən isti mövzu deyil, lakin onlar həqiqətən Svelte bacarıqlarınızı inkişaf etdirməyə kömək edəcəklər. Bu belə görünəcək:
Nə öyrənəcəksən
Bu dərslik sizə Svelte 3-dən istifadə edərək, əvvəldən sona qədər proqram yaratmağı göstərəcək. Siz komponentlərdən, üslubdan və hadisə idarəedicilərindən istifadə edəcəksiniz
Texniki yığın və xüsusiyyətlər
- Svelte 3
- Components
- CSS ilə üslub
- Sintaksis ES6
Çox yaxşı Svelte başlanğıc layihələri yoxdur, ona görə də tapdım .
Next.js ilə elektron ticarət proqramı
Next.js qutudan kənar server tərəfində göstərilməsini dəstəkləyən React proqramlarının yaradılması üçün ən populyar çərçivədir.
Bu layihə sizə bu kimi görünən e-ticarət tətbiqini necə yaratacağınızı göstərəcək:
Nə öyrənəcəksən
Bu layihədə siz Next.js ilə necə inkişaf edəcəyinizi öyrənəcəksiniz—yeni səhifələr və komponentlər yaradın, verilənləri əldə edin və Next tətbiqini stilləşdirin və yerləşdirin.
Texniki yığın və xüsusiyyətlər
- Sonrakı.js
- Komponentlər və Səhifələr
- Məlumatların seçilməsi
- Styling
- Layihənin Yerləşdirilməsi
- SSR və SPA
Yeni bir şey öyrənmək üçün e-ticarət proqramı kimi real həyat nümunəsinə sahib olmaq həmişə əladır. Bacararsan .
Nuxt.js ilə tam çoxdilli bloq
Nuxt.js Vue üçün, Next.js React üçün olduğu kimi: server tərəfində göstərmə və tək səhifə proqramlarını birləşdirmək üçün əla çərçivə
Yarada biləcəyiniz son tətbiq belə görünəcək:
Nə öyrənəcəksən
Bu nümunə layihədə siz Nuxt.js-dən istifadə edərək ilkin quraşdırmadan son yerləşdirməyə qədər tam veb-saytın necə qurulacağını öyrənəcəksiniz.
O, Nuxt-un təqdim etdiyi səhifələr və komponentlər və SCSS ilə üslub kimi bir çox gözəl funksiyalardan istifadə edir.
Texniki yığın və xüsusiyyətlər
- Nuxt.js
- Komponentlər və Səhifələr
- hekayə bloku modulu
- Qarışıqlar
- Dövlət idarəçiliyi üçün Vuex
- Üslub üçün SCSS
- Nuxt orta proqramları
, Nuxt.js-in bir çox əla xüsusiyyətlərini özündə cəmləşdirir. Mən şəxsən Nuxt ilə işləməyi sevirəm, ona görə də sınamalısan, çünki bu, həm də sizi əla Vue tərtibatçısına çevirəcək.
Gatsby ilə bloq yazın
Gatsby React və GraphQL istifadə edən əla statik sayt generatorudur. Bu layihənin nəticəsidir:
Nə öyrənəcəksən
Bu dərslikdə siz React və GraphQL istifadə edərək öz məqalələrinizi yazmaq üçün istifadə edəcəyiniz bloq yaratmaq üçün Gatsby-dən necə istifadə edəcəyinizi öyrənəcəksiniz.
Texniki yığın və xüsusiyyətlər
- Qetsbi
- Reaksiya
- QrafikQL
- Pluginlər və mövzular
- MDX/Markdown
- Bootstrap CSS
- Templates
Əgər nə vaxtsa blog açmaq istəmisinizsə, React və GraphQL istifadə edərək bunu necə etmək olar.
Mən demirəm ki, WordPress pis seçimdir, lakin Gatsby ilə siz React-dən istifadə edərək yüksək performanslı veb-saytlar yarada bilərsiniz – bu heyrətamiz birləşmədir.
Gridsome ilə bloq yazın
Vue üçün Gridsome… Yaxşı, Next/Nuxt ilə bizdə artıq var idi.
Ancaq eyni şey Gridsome və Gatsby üçün də keçərlidir. Hər ikisi məlumat təbəqəsi kimi GraphQL-dən istifadə edir, lakin Gridsome VueJS-dən istifadə edir. O, həmçinin gözəl bloqlar yaratmağınıza kömək edəcək zəhmli statik sayt generatorudur:
Nə öyrənəcəksən
Bu layihə sizə Gridsome, GraphQL və Markdown ilə başlamaq üçün sadə bloq yaratmağı öyrədəcək. O, həmçinin Netlify vasitəsilə tətbiqi necə yerləşdirməyi izah edir.
Texniki yığın və xüsusiyyətlər
- torlu
- Vue
- QrafikQL
- Markdown
- Netlif
Bu, əlbəttə ki, ən tam dərslik deyil, lakin Gridsome və əsas anlayışlarını əhatə edir .
Quasar istifadə edərək SoundCloud-a bənzər audio pleyer
Quasar, mobil proqramlar yaratmaq üçün istifadə edilə bilən başqa bir Vue çərçivəsidir. Bu layihədə siz audio player proqramı yaradacaqsınız, məsələn:
Nə öyrənəcəksən
Digər layihələr əsasən veb proqramlara diqqət yetirsə də, bu sizə Vue və Quasar çərçivələrindən istifadə edərək mobil tətbiqetmənin necə qurulacağını göstərəcək.
Artıq Android Studio/Xcode quraşdırılmış işləyən Cordova-ya sahib olmalısınız. Əgər yoxsa, təlimatda hər şeyi necə qurmaq lazım olduğunu göstərən Quasar veb saytına keçid var.
Texniki yığın və xüsusiyyətlər
- Quasar
- Vue
- Cordova
- dalğa sörfçü
- UI Komponentləri
, mobil proqramlar yaratmaq üçün Quasarın imkanlarını nümayiş etdirir.
Форма кредитной карты
Hamar və xoş mikro qarşılıqlı əlaqə ilə sərin kredit kartı forması. Nömrənin formatlaşdırılması, yoxlanılması və avtomatik kart növünün aşkarlanması daxildir. O, Vue.js üzərində qurulub və eyni zamanda tam cavabdehdir. (Sən görə bilərsən .)
Nə öyrənəcəksiniz:
- Formaları emal edin və yoxlayın
- Hadisələri idarə edin (məsələn, sahələr dəyişdikdə)
- Səhifədə elementləri, xüsusən də formanın yuxarısında görünən kredit kartı məlumatlarını necə göstərmək və yerləşdirmək lazım olduğunu anlayın
bar chart
Histoqram, yüksəklikləri və ya uzunluqları təmsil etdikləri dəyərlərə mütənasib olan düzbucaqlı çubuqlarla kateqoriyalı məlumatları təmsil edən bir qrafik və ya qrafikdir.
Onlar şaquli və ya üfüqi olaraq tətbiq oluna bilər. Şaquli qrafa bəzən xətt diaqramı adlanır.
Nə öyrənəcəksiniz:
- Məlumatları strukturlaşdırılmış və başa düşülən şəkildə göstərin
- Əlavə olaraq: Elementdən necə istifadə edəcəyinizi öyrənin
canvasvə onunla elementləri necə çəkmək olar
dünya əhalisi haqqında məlumat tapa bilərsiniz. İllərə görə sıralanır.
Анимация сердечка Twitter
Hələ 2016-cı ildə Twitter öz tvitləri üçün bu heyrətamiz animasiya təqdim etdi. 2019-cu ildən etibarən o, hələ də hissə kimi görünür, niyə özünüz bir hissə yaratmayasınız?
Nə öyrənəcəksiniz:
- CSS atributu ilə işləyin
keyframes - HTML elementlərini manipulyasiya edin və canlandırın
- JavaScript, HTML və CSS-i birləşdirin
Репозитории GitHub с функцией поиска
Burada qəşəng bir şey yoxdur - GitHub depoları sadəcə təriflənmiş siyahıdır.
Məqsəd depoları göstərmək və istifadəçiyə onları filtrləməyə imkan verməkdir. istifadə edin hər bir istifadəçi üçün depolar əldə etmək.
GitHub profil səhifəsi -
Nə öyrənəcəksiniz:
- API-dən məlumat alın
- API-dən məlumatları göstərin
- Hər axtarış üçün müvafiq məlumatları süzün və göstərin
- İsteğe bağlı: Əgər çətinliyə hazırsınızsa, istifadə edin , GraphQL istifadə edərək qurulmuşdur. .
Чаты в стиле Reddit
Çatlar sadəliyi və istifadəsi asanlığı ilə məşhur ünsiyyət üsuludur. Bəs müasir söhbət otaqlarını həqiqətən nə gücləndirir? WebSockets!
Nə öyrənəcəksiniz:
- WebSockets, real vaxt rabitəsi və məlumat yeniləmələrindən istifadə edin
- İstifadəçi giriş səviyyələri ilə işləmək (məsələn, söhbət kanalının sahibinin rolu var
admin, və otaqdakı digərləri -user) - Formaları emal edin və yoxlayın - unutmayın, mesaj göndərmək üçün söhbət pəncərəsidir
input - Müxtəlif söhbətlər yaradın və qoşulun
- Şəxsi mesajlarla işləyin. İstifadəçilər digər istifadəçilərlə şəxsi söhbət edə bilərlər. Əslində, siz iki istifadəçi arasında WebSocket bağlantısı quracaqsınız.
Навигация в стиле Stripe
Bu naviqasiyanı unikal edən, popover konteynerinin məzmuna uyğunlaşmaq üçün çevrilməsidir. Yeni popoverin açılması və bağlanmasının ənənəvi davranışı ilə müqayisədə bu keçiddə bir zəriflik var.
Nə öyrənəcəksiniz:
- CSS animasiyalarını keçidlərlə birləşdirin
- Məzmunu azaldın və üzən elementə aktiv sinif tətbiq edin
Pacman
Öz Pacman versiyasını yaradın. Bu, oyunların necə inkişaf etdirildiyi barədə fikir əldə etmək və əsasları başa düşmək üçün əla bir yoldur. JavaScript çərçivəsi, React və ya Vue istifadə edin.
Siz öyrənəcəksiniz:
- Elementlər necə hərəkət edir
- Hansı düymələrin basılacağını necə müəyyən etmək olar
- Toqquşma anını necə təyin etmək olar
- Siz daha da irəli gedə və xəyal hərəkətinə nəzarət əlavə edə bilərsiniz
Bu layihənin bir nümunəsini tapa bilərsiniz Github
istifadəçi idarəçiliyi
Layihə Github
İstifadəçi administrasiyası üçün CRUD tipli proqram yaratmaq sizə inkişafın əsaslarını öyrədəcək. Bu, xüsusilə yeni tərtibatçılar üçün faydalıdır.
Siz öyrənəcəksiniz:
- Marşrutlaşdırma nədir
- Məlumat daxiletmə formalarını necə idarə etmək və istifadəçinin nə daxil etdiyini yoxlamaq
- Verilənlər bazası ilə necə işləmək - hərəkətləri yaratmaq, oxumaq, yeniləmək və silmək
Проверка погоды в вашем местоположении
Layihə Github
Proqramlar yaratmaq istəyirsinizsə, hava proqramı ilə başlayın. Bu layihə Swift istifadə edərək tamamlana bilər.
Tətbiq yaratmaq təcrübəsi qazanmaqdan əlavə, aşağıdakıları öyrənəcəksiniz:
- API ilə necə işləmək olar
- Geolokasiyadan necə istifadə etmək olar
- Mətn daxiletməsini əlavə etməklə tətbiqinizi daha dinamik edin. Orada istifadəçilər müəyyən bir məkanda hava vəziyyətini yoxlamaq üçün öz yerlərini daxil edə biləcəklər.
Sizə API lazımdır. Hava məlumatlarını əldə etmək üçün OpenWeather API istifadə edin. OpenWeather API haqqında ətraflı məlumat.
Окно чата
Söhbət pəncərəm işləyir, iki brauzer nişanında açın
Söhbət pəncərəsi yaratmaq rozetkalarla işə başlamaq üçün mükəmməl bir yoldur. Texnoloji yığının seçimi böyükdür. Məsələn, Node.js mükəmməldir.
Soketlərin necə işlədiyini və onları necə həyata keçirəcəyini öyrənəcəksiniz. Bu layihənin əsas üstünlüyü budur.
Əgər siz rozetkalarla işləmək istəyən Laravel tərtibatçısınızsa, mənim oxuyun
GitLab CI
Davamlı inteqrasiyada (CI) yenisinizsə, GitLab CI ilə oynayın. Bir neçə mühit qurun və bir neçə test keçirməyə çalışın. Bu, çox çətin layihə deyil, amma əminəm ki, ondan çox şey öyrənəcəksiniz. Bir çox inkişaf qrupu indi CI-dən istifadə edir. Onu necə istifadə edəcəyinizi bilmək faydalıdır.
Siz öyrənəcəksiniz:
- GitLab CI nədir
- Necə konfiqurasiya etmək olar
.gitlab-ci.ymlGitLab istifadəçisinə nə edəcəyini söyləyir - Digər mühitlərə necə yerləşdirmək olar
Анализатор сайтов
Veb saytların semantikasını təhlil edən və onların reytinqini yaradan bir kazıyıcı hazırlayın. Məsələn, şəkillərdə çatışmayan alt teqləri yoxlaya bilərsiniz. Və ya səhifədə SEO meta teqlərinin olub olmadığını yoxlayın. Bir kazıyıcı istifadəçi interfeysi olmadan yaradıla bilər.
Siz öyrənəcəksiniz:
- Sıyırıcı necə işləyir?
- DOM seçicilərini necə yaratmaq olar
- Alqoritmi necə yazmaq olar
- Əgər orada dayanmaq istəmirsinizsə, istifadəçi interfeysi yaradın. Siz həmçinin yoxladığınız hər bir vebsaytda hesabat yarada bilərsiniz.
Определение настроений в социальных сетях
Sosial mediada hisslərin aşkarlanması maşın öyrənməsi ilə tanış olmaq üçün əla yoldur.
Yalnız bir sosial şəbəkəni təhlil etməklə başlaya bilərsiniz. Hər kəs adətən Twitter ilə başlayır.
Əgər siz artıq maşın öyrənmə təcrübəniz varsa, müxtəlif sosial şəbəkələrdən məlumat toplamağa və onları birləşdirməyə çalışın.
Siz öyrənəcəksiniz:
- Maşın öyrənməsi nədir
Клон Trello
Nə öyrənəcəksiniz:
- Sorğuların emalı marşrutlarının təşkili (Routing).
- İşarələ və Yerləşdir.
- Yeni obyektləri necə yaratmaq olar (lövhələr, siyahılar, kartlar).
- Daxil olan məlumatların işlənməsi və yoxlanılması.
- Müştəri tərəfdən: yerli yaddaşdan necə istifadə etmək, məlumatları yerli yaddaşa necə saxlamaq, yerli yaddaşdan məlumatları necə oxumaq.
- Server tərəfdən: verilənlər bazalarından necə istifadə edilməli, verilənlər bazasında məlumatların saxlanması, verilənlər bazasından verilənlərin oxunması.
, React+Redux-da hazırlanmışdır.
Панель админа
Əsasları öyrənmək üçün ideal olan sadə CRUD proqramı. Gəlin öyrənək:
- İstifadəçilər yaradın, istifadəçiləri idarə edin.
- Verilənlər bazası ilə qarşılıqlı əlaqə - istifadəçiləri yaratmaq, oxumaq, redaktə etmək, silmək.
- Daxiletmənin təsdiqlənməsi və formalarla işləmək.
Трекер криптовалют (нативное мобильное приложение)
Hər şey: Swift, Objective-C, React Native, Java, Kotlin.
Gəlin öyrənək:
- Doğma tətbiqlər necə işləyir.
- API-dən məlumatları necə əldə etmək olar.
- Doğma səhifə tərtibatları necə işləyir.
- Mobil simulyatorlarla necə işləmək olar.
. Daha yaxşı bir şey tapsanız, şərhlərdə yazın.
Əgər maraqlanırsınızsa, buradadır .
Настроить собственный конфиг webpack с нуля
Texniki olaraq, bu bir proqram deyil, lakin veb paketinin içəridən necə işlədiyini başa düşmək üçün çox faydalı bir işdir. İndi o, “qara qutu” deyil, başa düşülən bir vasitə olacaq.
tələblər:
- es7-dən es5-ə qədər tərtib edin (əsaslar).
- jsx-i js - və ya - .vue to .js-ə tərtib edin (yükləyiciləri öyrənməli olacaqsınız)
- Webpack dev serverini və isti modulun yenidən yüklənməsini qurun. (vue-cli və create-react-app hər ikisindən istifadə edir)
- Heroku, now.sh və ya Github istifadə edin, veb paket layihələrini necə yerləşdirməyi öyrənin.
- CSS - scss, daha az, stylus tərtib etmək üçün sevimli preprosessorunuzu qurun.
- Veb paketi ilə şəkillərdən və svglərdən necə istifadə edəcəyinizi öyrənin.
Клон Hackernews
Hər bir Jedi öz Hackernews-u yaratmalıdır.
Yol boyu nə öyrənəcəksiniz:
- Hackernews API ilə necə qarşılıqlı əlaqə qurmaq olar.
- Tək səhifə tətbiqetməsini necə yaratmaq olar.
- Şərhlərə baxmaq, fərdi şərhlər, profillər kimi funksiyaları necə həyata keçirmək olar.
- Sorğuların emalı marşrutlarının təşkili (Routing).
Тудушечка
Ciddi? Tudushka? Onların minlərləsi var. Amma inanın ki, bu populyarlığın bir səbəbi var.
Tudu proqramı əsasları başa düşməyinizə əmin olmaq üçün əla bir yoldur. Bir proqram vanil Javascript-də və birini sevimli çərçivədə yazmağa çalışın.
Öyrən:
- Yeni tapşırıqlar yaradın.
- Sahələrin doldurulduğunu yoxlayın.
- Tapşırıqları süzün (tamamlandı, aktiv, hamısı). istifadə edin
filterиreduce. - Javascript-in əsaslarını anlayın.
Сортируемый drag and drop список
Anlamaq üçün çox faydalıdır .
Gəlin öyrənək:
- API sürükləyin və buraxın
- Zəngin UI yaradın
Клон мессенджера (нативное приложение)
Həm veb proqramların, həm də yerli tətbiqlərin necə işlədiyini başa düşəcəksiniz, bu da sizi boz kütlədən fərqləndirəcək.
Nə öyrənəcəyik:
- Veb yuvaları (ani mesajlar)
- Doğma tətbiqlər necə işləyir.
- Şablonlar yerli tətbiqlərdə necə işləyir.
- Doğma tətbiqlərdə sorğunun emal marşrutlarının təşkili.
Mətn redaktoru
Mətn redaktorunun məqsədi öz formatlarını etibarlı HTML işarəsinə çevirməyə çalışan istifadəçilərin səylərini azaltmaqdır. Yaxşı mətn redaktoru istifadəçilərə mətni müxtəlif yollarla formatlamağa imkan verir.
Nə vaxtsa hər kəs mətn redaktorundan istifadə edib. Bəs niyə olmasın ?
Клон Reddit
sosial xəbərlərin toplanması, veb məzmun reytinqi və müzakirə saytıdır.
Reddit vaxtımın çox hissəsini alır, amma mən onunla vaxt keçirməyə davam edirəm. Reddit klonunun yaradılması proqramlaşdırmanı öyrənmək üçün effektiv üsuldur (eyni zamanda Reddit-ə baxarkən).
Reddit sizə çox zəngin təqdim edir. Heç bir xüsusiyyəti buraxmayın və ya təsadüfən işlər görməyin. Müştərilər və müştərilərlə real dünyada siz təsadüfi işləyə bilməzsiniz, əks halda işinizi tez itirəcəksiniz.
Ağıllı müştərilər dərhal işin pis aparıldığını anlayacaq və başqasını tapacaqlar.
Публикация пакета NPM с открытым исходным кодом
Javascript kodunu yazsanız, paket menecerindən istifadə etmək şansınız var. Paket meneceri digər insanların yazıb dərc etdiyi mövcud kodu təkrar istifadə etməyə imkan verir.
Paketin tam inkişaf dövrünü başa düşmək çox yaxşı təcrübə təmin edəcəkdir. Kodu dərc edərkən bilməli olduğunuz bir çox şey var. Siz təhlükəsizlik, semantik versiya, miqyaslılıq, adlandırma konvensiyaları və texniki xidmət haqqında düşünməlisiniz.
Paket hər şey ola bilər. İdeyanız yoxdursa, öz Lodash-ınızı yaradın və dərc edin.
Lodaş:
İnternetdə etdiyiniz bir işə sahib olmaq sizi digərlərindən 10% üstün edir. açıq mənbələr və paketlər haqqında.
Учебный план freeCodeCamp
freeCodecamp çox şey toplayıb .
freeCodeCamp qeyri-kommersiya təşkilatıdır. O, interaktiv veb-əsaslı öyrənmə platforması, onlayn icma forumu, söhbət otaqları, Orta nəşrlər və öyrənmə veb inkişafını hər kəs üçün əlçatan etmək niyyətində olan yerli təşkilatlardan ibarətdir.
Bütün kursu başa vurmağı bacarsanız, ilk işiniz üçün daha uyğun olacaqsınız.
Создайте HTTP-сервер с нуля
HTTP protokolu məzmunun İnternetdə hərəkət etdiyi əsas protokollardan biridir. HTTP serverləri HTML, CSS və JS kimi statik məzmuna xidmət etmək üçün istifadə olunur.
HTTP protokolunu sıfırdan həyata keçirə bilmək işlərin necə qarşılıqlı əlaqəsi haqqında biliklərinizi genişləndirəcək.
Məsələn, NodeJ-lərdən istifadə edirsinizsə, Express-in HTTP serverini təmin etdiyini bilirsiniz.
İstinad üçün, edə bildiyinizə baxın:
- Heç bir kitabxanadan istifadə etmədən server qurun
- Server HTML, CSS və JS məzmununa xidmət etməlidir.
- Routerin sıfırdan həyata keçirilməsi
- Dəyişiklikləri izləyin və serveri yeniləyin
Səbəbini bilmirsinizsə, istifadə edin və HTTP server yaratmağa çalışın sıfırdan.
Десктопное приложение для заметок
Biz hamımız qeyd edirik, elə deyilmi?
Gəlin qeydlər proqramı yaradaq. Tətbiq qeydləri saxlamalı və verilənlər bazası ilə sinxronizasiya etməlidir. Electron, Swift və ya istədiyiniz və sisteminiz üçün nə işlədiyini istifadə edərək yerli proqram yaradın.
Bunu ilk problemlə (mətn redaktoru) birləşdirə bilərsiniz.
Bonus olaraq, masaüstü versiyanızı veb versiya ilə sinxronlaşdırmağa cəhd edin.
Подкасты (клон Overcast)
Kim podkastlara qulaq asmır?
Aşağıdakı funksiyaları olan veb tətbiqi yaradın:
- Hesab yarat
- Podkastları axtarın
- Qiymətləndirin və podkastlara abunə olun
- Dayan və oyna, sürəti, irəli və geri funksiyalarını 30 saniyə dəyişdir.
Başlanğıc nöqtəsi kimi iTunes API istifadə etməyə çalışın. Başqa resursları bilirsinizsə, şərhlərdə yazın.
Ekran görüntüsü
Salam! Hazırda ekranımı çəkirəm!
Ekranınızı çəkməyə və klipi kimi saxlamağa imkan verən masaüstü və ya veb proqramı yaradın .gif
Burada buna necə nail olmaq olar.
İnformasiya qaynaqları
Mənbə: www.habr.com