1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в 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.
Ескертпе: осында .
Подборка проектов из предыдущих публикаций.
қабат
Қабат – барлығы ортақ «тақтада» пиксельді сала алатын қауымдастық. Бастапқы идея Reddit сайтында дүниеге келген. r/Layer қауымдастығы - бұл әр адам жасаушы бола алатын және ортақ іске үлес қоса алатын ортақ шығармашылықтың метафорасы.
Өзіңіздің қабат жобасын жасау кезінде сіз нені үйренесіз:
- JavaScript кенеп қалай жұмыс істейді Кенепті қалай басқару керектігін білу көптеген қолданбаларда маңызды дағды болып табылады.
- Пайдаланушы рұқсаттарын қалай үйлестіруге болады. Әрбір пайдаланушы жүйеге кірмей-ақ әр 15 минут сайын бір пиксельді сала алады.
- Cookie сеанстарын жасаңыз.
Squoosh
Squoosh - көптеген кеңейтілген опциялары бар кескінді қысу қолданбасы.
GIF 20 МБ
Squoosh-тың жеке нұсқасын жасау арқылы сіз мыналарды үйренесіз:
- Сурет өлшемдерімен қалай жұмыс істеуге болады
- Drag'n'Drop API негіздерін үйреніңіз
- API және оқиға тыңдаушылары қалай жұмыс істейтінін түсініңіз
- Файлдарды қалай жүктеуге және экспорттауға болады
Ескертпе: Кескін компрессоры жергілікті. Серверге қосымша деректерді жіберу қажет емес. Сіз компрессорды үйде аласыз немесе оны серверде пайдалана аласыз, өз таңдауыңыз бойынша.
Калькулятор
Жарайды? Шынайы ма? Калькулятор? Иә, дәл, калькулятор. Математикалық операциялардың негіздерін және олардың қалай бірге жұмыс істейтінін түсіну қолданбаларды жеңілдету үшін маңызды дағды болып табылады. Ерте ме, кеш пе, сандармен күресуге тура келеді, соғұрлым тезірек жақсы.
Өзіңіздің калькуляторыңызды жасау арқылы сіз мыналарды үйренесіз:
- Сандармен және математикалық амалдармен жұмыс
- Оқиға тыңдаушыларының API интерфейсімен жаттығу
- Элементтерді қалай орналастыру керек, стильдерді түсіну
Crawler (іздеу жүйесі)
Барлығы іздеу жүйесін пайдаланды, сондықтан неге өз іздеу жүйесін жасамасқа? Ақпаратты іздеу үшін сканерлер қажет. Әркім оларды күнделікті пайдаланады және бұл технология мен мамандарға сұраныс уақыт өте келе өседі.
Google іздеу жүйесі
Жеке іздеу жүйесін жасау арқылы сіз нені үйренесіз:
- Тексерушілер қалай жұмыс істейді
- Сайттарды қалай индекстеу керек және оларды рейтингі мен беделі бойынша қалай бағалауға болады
- Мәліметтер базасында индекстелген сайттарды қалай сақтауға болады және мәліметтер қорымен қалай жұмыс істеу керек
Музыка ойнатқышы (Spotify, Apple Music)
Әр адам музыка тыңдайды - бұл біздің өміріміздің ажырамас бөлігі ғана. Қазіргі музыкалық ағындық платформаның негізгі механикасы қалай жұмыс істейтінін жақсырақ түсіну үшін музыка ойнатқышын жасайық.
Spotify
Өзіңіздің музыкалық ағындық платформаңызды жасау арқылы не үйренесіз:
- API интерфейсімен қалай жұмыс істеу керек. Spotify немесе Apple Music-тен API пайдаланыңыз
- Келесі/алдыңғы жолды ойнату, кідірту немесе кері айналдыру
- Дыбыс деңгейін қалай өзгертуге болады
- Пайдаланушы маршрутын және шолғыш тарихын қалай басқаруға болады
React көмегімен фильм іздеу қолданбасы (ілмектері бар)
Бастауға болатын бірінші нәрсе - React көмегімен фильм іздеу қолданбасын жасау. Төменде соңғы қолданба қалай көрінетінінің суреті берілген:
Сіз не үйренесіз
Бұл қолданбаны құру арқылы сіз Hooks API салыстырмалы жаңа нұсқасын пайдалану арқылы React дағдыларыңызды жетілдіресіз. Мысал жобада React компоненттері, көптеген ілгектер, сыртқы API және, әрине, кейбір CSS стилі қолданылады.
Техникалық стек және мүмкіндіктер
- Ілмектермен әрекет ету
- create-реакция-бағдарлама
- JSX
- CSS
Ешбір сабақтарды қолданбай, бұл жобалар сізге функционалдық React бағдарламасына тамаша кіру нүктесін береді және 2020 жылы сізге міндетті түрде көмектеседі. таба аласыз . Нұсқауларды орындаңыз немесе оны өзіңіз жасаңыз.
Vue көмегімен чат қолданбасы
Сіз үшін тағы бір тамаша жоба - менің сүйікті JavaScript кітапханасы: VueJS арқылы чат қолданбасын жасау. Қолданба келесідей болады:
Сіз не үйренесіз
Бұл оқулықта Vue қолданбасын нөлден бастап жасауды үйренесіз - құрамдастарды жасау, күйді өңдеу, маршруттарды жасау, үшінші тарап қызметтеріне қосылу және тіпті аутентификацияны өңдеу.
Техникалық стек және мүмкіндіктер
- Vue
- vuex
- Vue маршрутизаторы
- Vue CLI
- Итергіш
- CSS
Бұл Vue-мен жұмысты бастауға немесе 2020 жылы дамуға жету үшін бар дағдыларыңызды жақсартуға арналған шынымен тамаша жоба. таба аласыз .
Angular 8 көмегімен әдемі ауа райы қолданбасы
Бұл мысал Angular 8 көмегімен әдемі ауа райы қолданбасын жасауға көмектеседі:
Сіз не үйренесіз
Бұл жоба сізге нөлден бастап қолданбаларды құрудың құнды дағдыларын үйретеді - дизайннан әзірлеуге дейін, қолдануға дайын қолданбаға дейін.
Техникалық стек және мүмкіндіктер
- 8-бұрыш
- Firebase
- Сервер жағынан көрсету
- Grid және Flexbox бар CSS
- Мобильді ыңғайлы және бейімделгіштік
- Қараңғы режим
- Әдемі интерфейс
Бұл жан-жақты жобаның маған ұнайтыны - сіз заттарды оқшаулап зерттемейсіз. Оның орнына сіз дизайннан бастап түпкілікті орналастыруға дейінгі барлық әзірлеу процесін үйренесіз.
Svelte көмегімен орындалатын істер қолданбасы
Svelte компонентке негізделген тәсілдегі жаңа балаға ұқсайды - кем дегенде React, Vue және Angular-ға ұқсас. Бұл 2020 жылғы ең жаңа өнімдердің бірі.
Do-do қолданбалары міндетті түрде ең қызық тақырып емес, бірақ ол шын мәнінде сіздің Svelte дағдыларыңызды жетілдіруге көмектеседі. Ол келесідей болады:
Сіз не үйренесіз
Бұл оқулық сізге Svelte 3 көмегімен бағдарламаны басынан аяғына дейін қалай жасау керектігін көрсетеді. Сіз құрамдастарды, сәндеуді және оқиға өңдегіштерін пайдаланасыз
Техникалық стек және мүмкіндіктер
- Svelte 3
- Құрамдастар
- CSS көмегімен сәндеу
- ES 6 синтаксисі
Көптеген жақсы Svelte стартер жобалары жоқ, сондықтан мен таптым .
Next.js көмегімен электрондық коммерция қолданбасы
Next.js - серверлік рендерингті қораптан тыс қолдайтын React қолданбаларын құруға арналған ең танымал құрылым.
Бұл жоба сізге келесідей электрондық коммерция қолданбасын қалай жасау керектігін көрсетеді:
Сіз не үйренесіз
Бұл жобада Next.js көмегімен әзірлеуді үйренесіз — жаңа беттер мен құрамдастарды жасау, деректерді шығару және мәнерлеу және Келесі қолданбаны орналастыру.
Техникалық стек және мүмкіндіктер
- Келесі.js
- Құрамдас бөліктер мен беттер
- Деректерді іріктеу
- Сәндеу
- Жобаны орналастыру
- SSR және SPA
Жаңа нәрсені үйрену үшін электрондық коммерция қолданбасы сияқты нақты мысалдың болуы әрқашан тамаша. Сен істе аласың .
Nuxt.js көмегімен толыққанды көптілді блог
Nuxt.js — Vue үшін, Next.js — React үшін: серверлік рендеринг пен бір беттік қолданбалардың күшін біріктіруге арналған тамаша құрылым.
Сіз жасай алатын соңғы қолданба келесідей болады:
Сіз не үйренесіз
Бұл үлгі жобада Nuxt.js арқылы толық веб-сайтты жасау жолын үйренесіз, бастапқы орнатудан бастап соңғы орналастыруға дейін.
Ол Nuxt ұсынатын беттер мен құрамдас бөліктер және SCSS көмегімен сәндеу сияқты көптеген керемет мүмкіндіктерді пайдаланады.
Техникалық стек және мүмкіндіктер
- Nuxt.js
- Құрамдас бөліктер мен беттер
- Storyblock модулі
- Ақ балық
- Vuex мемлекеттік басқаруға арналған
- Сәндеуге арналған SCSS
- Nuxt аралық бағдарламалары
, ол көптеген керемет Nuxt.js мүмкіндіктерін қамтиды. Мен Nuxt-пен жұмыс істегенді жақсы көремін, сондықтан сіз оны сынап көруіңіз керек, өйткені ол сізді керемет Vue әзірлеушісі етеді.
Гэтсбимен блог
Гэтсби - React және GraphQL көмегімен тамаша статикалық сайт генераторы. Бұл жобаның нәтижесі:
Сіз не үйренесіз
Бұл оқулықта сіз React және GraphQL көмегімен өз мақалаларыңызды жазу үшін пайдаланатын блог жасау үшін Gatsby-ді қалай пайдалану керектігін үйренесіз.
Техникалық стек және мүмкіндіктер
- Гатсби
- жауап
- GraphQL
- Плагиндер мен тақырыптар
- MDX/Markdown
- Bootstrap CSS
- үлгілер
Егер сіз бұрыннан блог ашқыңыз келсе, React және GraphQL көмегімен оны қалай жасауға болады.
Мен WordPress-ті жаман таңдау деп айтпаймын, бірақ Гэтсбидің көмегімен сіз React көмегімен жоғары өнімді веб-сайттарды жасай аласыз - бұл таңғажайып комбинация.
Gridsome-мен блог
Vue үшін Gridsome... Жарайды, бізде бұл Next/Nuxt-те болған.
Бірақ Гридзом мен Гэтсбиге де солай. Екеуі де деректер қабаты ретінде GraphQL пайдаланады, бірақ Gridsome VueJS пайдаланады. Бұл сонымен қатар тамаша блогтар жасауға көмектесетін керемет статикалық сайт генераторы:
Сіз не үйренесіз
Бұл жоба Gridsome, GraphQL және Markdown бағдарламаларын бастау үшін қарапайым блог жасауды үйретеді. Ол сондай-ақ Netlify арқылы қолданбаны қолдану жолын қамтиды.
Техникалық стек және мүмкіндіктер
- Торлы
- Vue
- GraphQL
- шамасы
- Netlify
Бұл, әрине, ең жан-жақты оқу құралы емес, бірақ ол Gridsome және негізгі түсініктерді қамтиды. .
Quasar көмегімен SoundCloud тәрізді аудио ойнатқыш
Quasar - мобильді қосымшаларды жасау үшін пайдалануға болатын тағы бір Vue құрылымы. Бұл жобада сіз аудио ойнатқыш қолданбасын жасайсыз, мысалы:
Сіз не үйренесіз
Басқа жобалар негізінен веб-қосымшаларға бағытталғанымен, бұл Vue және Quasar негізін пайдаланып мобильді қосымшаны қалай жасау керектігін көрсетеді.
Сізде Android Studio/Xcode конфигурациясымен жұмыс істейтін Cordova болуы керек. Олай болмаса, нұсқаулықта Quasar веб-сайтына сілтеме бар, онда олар барлығын қалай орнату керектігін көрсетеді.
Техникалық стек және мүмкіндіктер
- Квазар
- Vue
- Кордова
- WaveSurfer
- UI құрамдастары
, мобильді қосымшаларды жасау үшін Quasar мүмкіндіктерін көрсету.
Форма кредитной карты
Тегіс және жағымды микро өзара әрекеттесуі бар керемет несие картасының пішіні. Нөмірді пішімдеуді, тексеруді және карта түрін автоматты түрде анықтауды қамтиды. Ол Vue.js негізінде жасалған және сонымен бірге толық жауап береді. (Сен көре аласын .)
Нені үйренесіз:
- Пішіндерді өңдеу және тексеру
- Оқиғаларды өңдеу (мысалы, өрістер өзгергенде)
- Беттегі элементтерді, әсіресе пішіннің жоғарғы жағында көрсетілетін несие картасы ақпаратын көрсету және орналастыру жолын түсініңіз
гистограмма
Гистограмма - бұл олар көрсететін мәндерге пропорционал биіктіктері немесе ұзындығы бар тікбұрышты жолақтары бар категориялық деректерді көрсететін диаграмма немесе график.
Оларды тігінен немесе көлденеңінен қолдануға болады. Тік бағаналы диаграмма кейде сызықтық диаграмма деп аталады.
Нені үйренесіз:
- Деректерді құрылымдалған және түсінікті түрде көрсету
- Қосымша: Элементті пайдалану жолын үйреніңіз
canvasжәне онымен элементтерді қалай салу керек
Сіз дүние жүзіндегі халық туралы мәліметтерді таба аласыз. Олар жыл бойынша сұрыпталады.
Анимация сердечка Twitter
2016 жылы Twitter өзінің твиттері үшін осы таңғажайып анимацияны ұсынды. 2019 жылғы жағдай бойынша ол әлі де бөлік болып көрінеді, сондықтан неге оны өзіңіз жасамасқа?
Нені үйренесіз:
- CSS атрибутымен жұмыс істеу
keyframes - HTML элементтерін өңдеу және анимациялау
- JavaScript, HTML және CSS біріктіріңіз
Репозитории GitHub с функцией поиска
Мұнда қызықты ештеңе жоқ — GitHub реполары жай ғана дәріптелген тізім.
Мақсат - репозиторийлерді көрсету және пайдаланушыға оларды сүзуге мүмкіндік беру. Қолдану әрбір пайдаланушы үшін репозиторийлерді алу.
GitHub профиль беті -
Нені үйренесіз:
- API деректерін алыңыз
- API деректерін көрсету
- Әрбір іздеу үшін сәйкес деректерді сүзіп, көрсетіңіз
- Қосымша: Егер сіз сынаққа дайын болсаңыз, пайдаланыңыз , GraphQL көмегімен құрастырылған. .
Чаты в стиле Reddit
Чат - қарапайымдылығы мен пайдаланудың қарапайымдылығына байланысты танымал байланыс тәсілі. Бірақ заманауи чат бөлмелерін шынымен не қуаттайды? WebSockets!
Нені үйренесіз:
- 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 пайдаланушысына не істеу керектігін айтады - Басқа орталарға қалай орналастыру керек
Анализатор сайтов
Веб-сайттардың семантикасын талдайтын және олардың рейтингін жасайтын қырғышты жасаңыз. Мысалы, суреттердегі балама тегтердің жоқтығын тексеруге болады. Немесе бетте SEO мета тегтері бар-жоғын тексеріңіз. Скреперді пайдаланушы интерфейсінсіз жасауға болады.
Сіз білесіз:
- Скрепер қалай жұмыс істейді?
- DOM селекторларын қалай жасауға болады
- Алгоритмді қалай жазу керек
- Егер сіз мұнымен тоқтағыңыз келмесе, пайдаланушы интерфейсін жасаңыз. Сондай-ақ, сіз тексеретін әрбір веб-сайтта есеп жасай аласыз.
Определение настроений в социальных сетях
Әлеуметтік желіде көңіл-күйді анықтау машиналық оқытумен танысудың тамаша тәсілі болып табылады.
Бір ғана әлеуметтік желіні талдаудан бастауға болады. Барлығы әдетте Twitter-ден бастайды.
Егер сізде машиналық оқыту тәжірибесі бар болса, әртүрлі әлеуметтік желілерден деректерді жинап, оларды біріктіріп көріңіз.
Сіз білесіз:
- Машиналық оқыту дегеніміз не
Клон Trello
Нені үйренесіз:
- Сұраныстарды өңдеу маршруттарын ұйымдастыру (Routing).
- Жылжыту.
- Жаңа объектілерді құру жолы (тақталар, тізімдер, карточкалар).
- Енгізілген деректерді өңдеу және тексеру.
- Клиент тарапынан: жергілікті жадты қалай пайдалану керек, деректерді жергілікті жадқа қалай сақтау керек, жергілікті жадтан деректерді қалай оқу керек.
- Сервер жағынан: мәліметтер қорын қалай пайдалану керек, мәліметтер базасында деректерді сақтау, мәліметтер қорынан деректерді оқу.
, React+Redux жүйесінде жасалған.
Панель админа
Қарапайым CRUD қолданбасы, негіздерді үйренуге өте ыңғайлы. Үйренейік:
- Пайдаланушыларды жасаңыз, пайдаланушыларды басқарыңыз.
- Мәліметтер қорымен әрекеттесу – пайдаланушыларды жасау, оқу, өңдеу, жою.
- Енгізілген деректерді тексеру және пішіндермен жұмыс істеу.
Трекер криптовалют (нативное мобильное приложение)
Кез келген нәрсе: Swift, Objective-C, React Native, Java, Kotlin.
Оқып көрейік:
- Жергілікті қолданбалар қалай жұмыс істейді.
- API-ден деректерді алу жолы.
- Негізгі бет макеттері қалай жұмыс істейді.
- Мобильді тренажерлармен қалай жұмыс істеу керек.
. Егер сіз жақсы нәрсені тапсаңыз, түсініктемелерде жазыңыз.
Егер сізді қызықтырса, міне .
Настроить собственный конфиг webpack с нуля
Техникалық тұрғыдан бұл қолданба емес, бірақ бұл веб-пакеттің ішінен қалай жұмыс істейтінін түсіну үшін өте пайдалы тапсырма. Енді бұл «қара жәшік» емес, түсінікті құрал болады.
талаптар:
- es7-ден es5-ке дейін құрастырыңыз (негіздер).
- jsx файлын js - немесе - .vue үшін .js құрастырыңыз (жүктеушілерді үйренуіңіз керек)
- Webpack dev серверін және ыстық модульді қайта жүктеуді орнатыңыз. (vue-cli және create-react-app екеуін де пайдаланады)
- Heroku, now.sh немесе Github пайдаланыңыз, веб-пакет жобаларын қолдану жолын үйреніңіз.
- CSS - scss, less, стилус компиляциялау үшін сүйікті препроцессорыңызды орнатыңыз.
- Веб-пакетпен кескіндерді және svg файлдарын қалай пайдалану керектігін біліңіз.
Клон Hackernews
Әрбір Джеди өзінің Hackernews жасауы керек.
Жолда не үйренесіз:
- Hackernews API интерфейсімен қалай әрекеттесуге болады.
- Бір беттік қосымшаны қалай жасауға болады.
- Түсініктемелерді қарау, жеке пікірлер, профильдер сияқты мүмкіндіктерді қалай жүзеге асыруға болады.
- Сұраныстарды өңдеу маршруттарын ұйымдастыру (Routing).
Тудушечка
Шынайы ма? Тудушка? Олардың мыңдағаны бар. Бірақ маған сеніңіз, бұл танымалдылықтың себебі бар.
Tudu қолданбасы - негіздерді түсінгеніңізге көз жеткізудің тамаша тәсілі. Бір қолданбаны ванильді Javascript тілінде және біреуін таңдаулы фреймворкте жазып көріңіз.
Үйреніңіз:
- Жаңа тапсырмаларды жасаңыз.
- Өрістердің толтырылғанын тексеріңіз.
- Тапсырмаларды сүзгілеу (орындалды, белсенді, барлығы). Қолдану
filterиreduce. - Javascript негіздерін түсіну.
Сортируемый drag and drop список
Түсінуге өте пайдалы .
Үйренейік:
- API сүйреп апарыңыз
- Бай пайдаланушы интерфейсін жасаңыз
Клон мессенджера (нативное приложение)
Сіз веб-қосымшалардың да, жергілікті қолданбалардың да қалай жұмыс істейтінін түсінесіз, бұл сізді сұр массадан ажыратады.
Біз нені зерттейміз:
- Веб-розеткалар (жедел хабарламалар)
- Жергілікті қолданбалар қалай жұмыс істейді.
- Үлгілер жергілікті қолданбаларда қалай жұмыс істейді.
- Жергілікті қолданбаларда сұрауды өңдеу маршруттарын ұйымдастыру.
Мәтін өңдегіші
Мәтіндік редактордың мақсаты - пайдаланушылардың пішімдеуді жарамды 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
осында бұған қалай қол жеткізуге болады.
Ақпарат көздері
Ақпарат көзі: www.habr.com