Dojo-dhamaadka hore: mashaariicda lagu tababaro xirfadaha horumariyaha (5 cusub + 43 jir)

1. Клон Notion

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

www.notion.so

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

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

Maqaalka waxaa lagu turjumay iyadoo ay taageerayaan EDISON Software, kaas oo разрабатывает приложения и сайтыMarkaasay maal gashanaya bilowga.

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МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Gunno: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Fiiro gaar ah: halkan GitHub example repository.

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

lakabka

www.reddit.com/r/layer

Lakabku waa bulsho halkaas oo qof walba uu ku sawiri karo pixel "board" la wadaago. Fikradda asalka ah waxay ku dhalatay Reddit. Bulshada r/Layer waa hal-abuurka la wadaago, in qof kastaa uu noqon karo hal-abuur, waxna ku biirin karo qadiyad guud.

Waxa aad baran doonto marka aad samaynayso mashruuca lakabkaaga:

• Sida shiraac JavaScript u shaqeeyo Ogaanshaha sida loo isticmaalo shiraac waa xirfad muhiim u ah codsiyo badan.
• Sida loo isku xidho ogolaanshaha isticmaalaha. Isticmaale kastaa waxa uu sawiri karaa hal pixel 15kii daqiqiba isaga oo aan u baahnayn in uu galo.
• Samee fadhiyada buskudka

Caanoor

squoosh.app

Squoosh waa codsi isku-duubid muuqaal leh oo leh doorashooyin badan oo horumarsan.

GIF 20 MB

Markaad abuurto noocaaga Squoosh waxaad baran doontaa:

• Sida loogu shaqeeyo cabbirrada sawirka
• Baro aasaaska Drag'n'Drop API
• Faham sida API-ga iyo dhagaystayaashu u shaqeeyaan
• Sida loo geliyo loona dhoofiyo faylasha

Fiiro gaar ah: Compressor sawirku waa maxalli Muhiim ma aha in xog dheeraad ah loo diro server-ka. Waxaad ku haysan kartaa kombaresarada guriga, ama waxaad ku isticmaali kartaa server-ka, doorashadaada.

Xisaabiye

Kaalay? Dhab ahaantii? Xisaabiyaha? Haa, dhab ahaan, xisaabiye. Fahamka aasaaska hawlgallada xisaabta iyo sida ay u wada shaqeeyaan waa xirfad muhiim u ah fududaynta codsiyadaada. Dhawaan ama hadhow waa inaad wax ka qabataa tirooyinka oo sida ugu dhaqsaha badan ayaa fiican.

jarodburchill.github.io/CalculatorReactApp

Markaad sameysato xisaabiyahaaga waxaad baran doontaa:

• La shaqee tirooyinka iyo hawlaha xisaabta
• Ku celceli dhagaystayaasha dhacdada API
• Sida loo habeeyo curiyeyaasha, faham qaababka

Gurguurte (matoorka raadinta)

Qof kastaa waxa uu isticmaalay makiinad wax raadis ah, markaa maxaad adigu u samayn wayday? Gurguurto ayaa loo baahan yahay si loo raadiyo macluumaadka. Qof kastaa wuu isticmaalaa maalin kasta iyo baahida loo qabo tignoolajiyadan iyo khabiirada takhasuska leh ayaa kori doona oo keliya waqti ka dib.

Google search engine

Waxa aad ku baran doonto adiga oo abuuraya matoorka raadintaada:

• Sida gurguurta u shaqeeyaan
• Sida loo tusmeeyo boggaga iyo sida loo kala sareeyo iyadoo la qiimeynayo iyo sumcadda
• Sida loo kaydiyo goobaha la tilmaansaday ee kaydka xogta iyo sida loola shaqeeyo kaydka xogta

Ciyaartoyga muusiga (Spotify, Apple Music)

Qof kastaa wuu dhagaysta muusiga - waa qayb ka mid ah nolosheena. Aan abuurno ciyaaryahan muusik si aan sifiican ugu fahano sida makaanikada aasaasiga ah ee madal muusiga casriga ah u shaqeyso.

Spotify

Waxa aad ku baran doonto adiga oo abuuraya madal muusik kuu gaar ah:

• Sida loola shaqeeyo API-ga ka isticmaal API Spotify ama Apple Music
• Sida loo ciyaaro, u hakiyo ama dib loogu celiyo jidka ku xiga/hore
• Sida loo beddelo mugga
• Sida loo maareeyo marinka isticmaalaha iyo taariikhda browserka

Abka raadinta filimada iyadoo la isticmaalayo React (qabo leh)

Waxa ugu horreeya ee aad ku bilaabi karto waa inaad abuurto app raadinta filimada adoo isticmaalaya React. Hoos waxaa ku yaal sawirka sida codsiga u dambeeya u ekaan doono:

Maxaad baran doontaa
Markaad dhisto abkan, waxaad horumarin doontaa xirfadahaaga falcelinta adiga oo isticmaalaya Hooks API-ga cusub. Mashruucu tusaale ahaan wuxuu adeegsadaa qaybaha React, qabsatooyin badan, API dibadeed, iyo dabcan qaar ka mid ah habaynta CSS.

Xirmada farsamada iyo sifooyinka

• Ku falcelinta qabsatooyinka
• abuur-falcelin-app
• Jsx
• CSS

Adigoon isticmaalin wax xiisado ah, mashaariicdani waxay ku siinayaan meesha ugu fiican ee laga galo falcelinta shaqaynaysa waxayna hubaal ahaan ku caawin doonaan 2020. waad heli kartaa tusaale ahaan mashruuca halkan. Raac tilmaamaha ama ka dhig mid adiga kuu gaar ah.

Kala hadal App-ka Vue

Mashruuc kale oo weyn oo adiga ah inaad sameyso waa inaad abuurto app chat adoo isticmaalaya maktabadda JavaScript ee aan jeclahay: VueJS. Codsigu wuxuu u ekaan doonaa sidan:

Maxaad baran doontaa
Casharradan, waxaad ku baran doontaa sida loo sameeyo app-ka Vue ee xoqan - abuurista qaybaha, maaraynta gobolka, samaynta wadooyin, ku xidhidh adeegyada qolo saddexaad, iyo xataa maaraynta aqoonsiga.

Xirmada farsamada iyo sifooyinka

• Vue
• vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

Kani runtii waa mashruuc aad u wanaagsan in lagu bilaabo Vue ama lagu horumariyo xirfadahaaga jira si aad u gasho horumarka 2020. waad heli kartaa casharrada halkan.

App cimilo qurxoon oo leh Angular 8

Tusaalahan ayaa kaa caawin doona inaad abuurto app cimilo qurux badan adoo isticmaalaya xagal 8:

Maxaad baran doontaa
Mashruucani wuxuu ku bari doonaa xirfado qiimo leh oo ku saabsan dhisidda codsiyada laga bilaabo eber - laga bilaabo naqshadeynta ilaa horumarinta, dhammaan habka loo diro codsiga diyaarsan.

Xirmada farsamada iyo sifooyinka

• Xaglo-toosiye 8
• Dab-damis
• Samaynta dhinaca server-ka
• CSS oo leh Grid iyo Flexbox
• Mobile saaxiibtinimo iyo la qabsiga
• Habka mugdiga ah
• Interface qurux badan

Waxa aan runtii ka jecelahay mashruucan wax walba leh waa in aadan si gooni ah wax u baran. Taa bedelkeeda, waxaad baraneysaa dhammaan habka horumarinta, laga bilaabo naqshadeynta ilaa ugu dambeyn.

Si aad u sameyso codsiga adoo isticmaalaya Svelte

Svelte waa sida ilmaha cusub ee habka ku salaysan qaybaha - ugu yaraan la mid ah React, Vue iyo Angular. Tanina waa mid ka mid ah alaabada cusub ee ugu kulul 2020.

Barnaamijyada wax-qabadku maaha mawduuca ugu kulul, laakiin waxay runtii kaa caawin doontaa inaad kobciso xirfadahaaga Svelte. Waxay u ekaan doontaa sidan:

Maxaad baran doontaa
Casharkaan ayaa ku tusi doona sida loo sameeyo arji adigoo isticmaalaya Svelte 3, bilow ilaa dhamaad. Waxaad isticmaali doontaa qaybaha, habaynta, iyo maamulayaasha dhacdada

Xirmada farsamada iyo sifooyinka

• Svelte 3
• Qeybaha
• Habaynta CSS
• ES6 syntax

Ma jiraan mashaariic badan oo wanaagsan oo Svelte bilaabay, sidaas darteed waan helay tani waa doorasho wanaagsan in lagu bilaabo.

E-ganacsiga app isticmaalaya Next.js

Next.js waa qaabka ugu caansan ee lagu dhisayo arjiyada React ee taageera dhinaca server-ka ka bixinta sanduuqa.

Mashruucani wuxuu ku tusi doonaa sida loo sameeyo e-ganacsiga e-commerce oo sidan u eg:

Maxaad baran doontaa
Mashruucan, waxaad ku baran doontaa sida loo horumariyo Next.js—abuuro bogag iyo qaybo cusub, soo saar xogta, iyo qaabka oo geyso codsi Xiga.

Xirmada farsamada iyo sifooyinka

• Xiga
• Qaybaha iyo bogagga
• Muunad xogta
• Habaynta
• Dejinta Mashruuca
• SSR iyo HBS

Had iyo jeer aad ayay u fiican tahay in la haysto tusaale adduunka dhabta ah sida abka e-commerce si aad wax cusub u barato. Waad awoodaa ka hel casharka halkan.

Bloog luuqado badan ku hadasha oo dhamaystiran oo leh Nuxt.js

Nuxt.js waxaa loogu talagalay Vue, waxa Next.js loogu talagalay React: qaab-dhismeedka weyn ee isku dhafka awoodda samaynta dhinaca server-ka iyo codsiyada hal bog ah
Codsiga ugu dambeeya ee aad abuuri karto wuxuu u ekaan doonaa sidan:

Maxaad baran doontaa

Mashruucan muunada ah, waxaad ku baran doontaa sida loo sameeyo degel dhammaystiran iyadoo la isticmaalayo Nuxt.js, laga bilaabo habaynta bilowga ilaa dejinta u dambaysa.

Waxay ka faa'iidaysanaysaa qaar badan oo ka mid ah sifooyinka wanaagsan ee Nuxt ay tahay inay bixiso, sida boggaga iyo qaybaha, iyo habaynta SCSS.

Xirmada farsamada iyo sifooyinka

• Nuxt.js
• Qaybaha iyo bogagga
• Sheeko xannibaad module
• Hagfish
• Vuex ee maamulka gobolka
• SCSS ee habaynta
• Nuxt middlewares

Tani waa mashruuc aad u fiican, oo ay ku jiraan waxyaabo badan oo Nuxt.js weyn ah. Anigu shakhsi ahaan waan jeclahay la shaqaynta Nuxt marka waa inaad isku daydaa maadaama ay sidoo kale kaa dhigi doonto horumariye weyn oo Vue ah.

Blog la Gatsby

Gatsby waa koronto-dhaliye heer sare ah oo taagan iyadoo la adeegsanayo React iyo GraphQL. Tani waa natiijada mashruuca:

Maxaad baran doontaa

Casharradan, waxaad ku baran doontaa sida loo isticmaalo Gatsby si aad u samaysato blog aad u isticmaali doonto inaad ku qorto maqaalladaada adigoo isticmaalaya React iyo GraphQL.

Xirmada farsamada iyo sifooyinka

• gatsby
• Diido
• GraphQL
• Plugins iyo mawduucyada
• MDX/Markdown
• Bootstrap CSS
• Tilmaamo

Haddii aad waligaa rabtay inaad bilowdo blog, это отличный пример того, как сделать его, используя React и GraphQL.

Ma dhahayo WordPress waa doorasho xun, laakiin Gatsby waxaad ku dhisi kartaa mareegaha waxqabadka sare leh adoo isticmaalaya React - taas oo ah isku-dar la yaab leh.

Blog leh Gridsome

Gridsome for Vue... Hagaag, waxaan horey u haysanay kan Next/Nuxt.
Laakiin isku mid ayaa run u ah Gridsome iyo Gatsby. Labaduba waxay u isticmaalaan GraphQL sida lakabka xogta, laakiin Gridsome waxay isticmaashaa VueJS. Tani sidoo kale waa koronto-dhaliye deg-deg ah oo cajiib ah oo kaa caawin doona inaad abuurto baloogyo waaweyn:

Maxaad baran doontaa

Mashruucani wuxuu ku bari doonaa sida loo sameeyo blog fudud si aad uga bilowdo Gridsome, GraphQL iyo Markdown. Waxa kale oo ay dabooshaa sida loo geeyo codsiga Netlify.

Xirmada farsamada iyo sifooyinka

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Runtii tani maaha casharka ugu dhamaystiran, laakiin waxay dabooshaa fikradaha aasaasiga ah ee Gridsome iyo Markdown waxay noqon kartaa bar bilow wanaagsan.

Ciyaartoyga codka ah ee SoundCloud oo isticmaalaya Quasar

Quasar waa qaab kale oo Vue ah oo loo isticmaali karo in lagu abuuro codsiyada moobiilka. Mashruucan waxaad ku abuuri doontaa cod-ciyaartoy cod ah, tusaale ahaan:

Maxaad baran doontaa

Iyadoo mashaariicda kale ay inta badan diiradda saaraan codsiyada webka, kani wuxuu ku tusi doonaa sida loo sameeyo arjiga mobaylka iyadoo la adeegsanayo Vue iyo qaabka Quasar.
Waa inaad hore u haysataa Cordova oo ku shaqaynaysa Android Studio/Xcode habaysan. Haddi aysan ahayn, buuggu waxa uu xidhiidh la leeyahay mareegaha Quasar halkaas oo ay ku tusinayaan sida wax walba loo dejiyo.

Xirmada farsamada iyo sifooyinka

• qusar
• Vue
• Cordova
• WaveSurfer
• Qaybaha UI

Mashruuc yar, Muujinaya awoodaha Quasar ee abuurista codsiyada mobaylada.

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

Qaab kaar kredit ah oo qabow oo leh is dhexgalka yar yar ee fudud oo lagu raaxaysto. Waxa ku jira qaabaynta lambarka, xaqiijinta iyo ogaanshaha nooca kaadhka tooska ah. Waxay ku dhisan tahay Vue.js waxayna sidoo kale si buuxda uga jawaabtay. (Waad arki kartaa halkan.)

credit-card-form

Waxaad baran doontaa:

• Habraaca oo ansixi foomamka
• Xakamee dhacdooyinka (tusaale ahaan, marka goobuhu isbedelaan)
• Faham sida loo soo bandhigo oo u dhig walxaha bogga, gaar ahaan macluumaadka kaadhka deynta ee ka muuqda foomka dushiisa

Garaafka garaafka

Histogram-ku waa jaantus ama garaaf ka tarjumaya xog gaar ah oo leh baarar leydi ah oo leh dherer ama dherer u dhigma qiyamka ay matalaan.

Waxaa lagu dabaqi karaa si toos ah ama toosan. Shaxda bar toosan waxaa mararka qaarkood loo yaqaannaa jaantuska.

Waxaad baran doontaa:

• U muuji xogta si habaysan oo la fahmi karo
• Intaa waxaa dheer: Baro sida loo isticmaalo curiyaha canvas iyo sida loo sawiro canaasiirta

waa waxaad ka heli kartaa xogta dadweynaha adduunka. Waxaa lagu kala soocaa sanadka.

Анимация сердечка Twitter

Dib ugu noqoshada 2016, Twitter waxay soo bandhigtay animation-kan cajiibka ah ee tweets-keeda. Laga bilaabo 2019, wali waxay u muuqataa qaybta, markaa maxaad adigu u abuurin mid ka mid ah?

Waxaad baran doontaa:

• Ku shaqee sifada CSS keyframes
• Maarayso oo dhaqan geli walxaha HTML
• Isku-dar JavaScript, HTML iyo CSS

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

Ma jiraan wax qurux badan halkan — Kaydka GitHub waa kaliya liis la ammaanay.
Hadafka waa in la soo bandhigo kaydadka oo loo oggolaado isticmaaluhu inuu shaandheeyo. Isticmaal GitHub API ee rasmiga ah si aad u hesho kayd isticmaale kasta.

Bogga profile GitHub - github.com/indreklasn

Waxaad baran doontaa:

• Ka hel xogta API
• Muuji xogta API
• Shaandhee oo tus xogta ku habboon raadinta kasta
• Ikhtiyaar: Haddii aad u socoto tartan, isticmaal API v4, la dhisay iyadoo la isticmaalayo GraphQL. Haddii aad rabto inaad barato GraphQL, aad mid ka mid ah maqaaladeydii hore.

Чаты в стиле Reddit

Sheekaysigu waa hab caan ah oo isgaadhsiineed taas oo ay ugu wacan tahay fudaydnimadooda iyo isticmaalkooda. Laakiin maxaa runtii sii hurinaya qolalka lagu sheekeysto ee casriga ah? WebSockets!

Waxaad baran doontaa:

• Adeegso WebSockets, isgaadhsiinta wakhtiga-dhabta ah iyo cusboonaysiinta xogta
• La shaqee heerarka gelitaanka isticmaalaha (tusaale, milkiilaha kanaalka wada sheekaysiga ayaa leh doorka admin, iyo kuwa kale ee qolka - user)
• Habka oo ansixi foomamka - xasuusnoow, daaqadda wada sheekaysiga ee fariinta diritu waa input
• Abuur oo ku biir sheekoyin kala duwan
• La shaqee fariimaha gaarka ah. Isticmaalayaashu waxay si gaar ah ula hadli karaan isticmaalayaasha kale. Asal ahaan, waxaad samayn doontaa isku xirka WebSocket ka dhexeeya laba isticmaale.

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

Maxaa ka dhigaya marin-hayntan mid gaar ah waa in weelka boodboodka ahi isu beddelo inuu ku habboon yahay waxa ku jira. Waxaa jira xarrago u ah kala-guurkan marka loo eego hab-dhaqanka soo jireenka ah ee furitaanka iyo xidhitaanka popover cusub.

Waxaad baran doontaa:

• Isku dhafka CSS animations iyo wareejinta
• Nuxurka hoos u dhig oo ku dabaq fasalka firfircoon cunsur sabeeyey

Pacman

Samee noocaaga Pacman Tani waa hab fiican oo lagu helo fikrad ah sida ciyaaraha loo horumariyo oo loo fahmo aasaaska. Isticmaal qaabka JavaScript, React ama Vue.

Waxaad baran doontaa:

• Sida curiyayaasha u dhaqaaqaan
• Sida loo go'aamiyo furayaasha la riixayo
• Sida loo go'aamiyo xilliga isku dhaca
• Waad sii socon kartaa oo waxaad ku dari kartaa kontaroolada dhaqdhaqaaqa rooxaanta

Waxaad ka heli doontaa tusaale mashruucan ee kaydka GitHub

maamulka isticmaalaha

Mashruuca ee kaydka GitHub

Abuuritaanka arjiga nooca CRUD ee maamulka isticmaalaha waxay ku bari doontaa aasaaska horumarka. Tani waxay si gaar ah faa'iido u leedahay horumarinta cusub.

Waxaad baran doontaa:

• Waa maxay habayntu
• Sida loo maareeyo foomamka galitaanka xogta oo loo hubiyo waxa isticmaaluhu galay
• Sida loola shaqeeyo xogta xogta - abuur, akhri, cusboonaysii oo tirtir tallaabooyinka

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

Mashruuca ee kaydka GitHub

Haddii aad rabto inaad abuurto abka, ku bilow app cimilada. Mashruucan waxaa lagu dhamayn karaa iyadoo la isticmaalayo Swift.

Marka laga soo tago inaad khibrad u leedahay dhisidda arji, waxaad baran doontaa:

• Sida loola shaqeeyo API-ga
• Sida loo isticmaalo geolocation
• Ka dhig codsigaaga mid firfircoon adiga oo ku daraya gelinta qoraalka Dhexdeeda, isticmaalayaashu waxay awood u yeelan doonaan inay galaan goobtooda si ay u eegaan cimilada meel gaar ah.

Waxaad u baahan doontaa API Si aad u hesho xogta cimilada, isticmaal OpenWeather API. Macluumaad dheeraad ah oo ku saabsan OpenWeather API halkan.

Окно чата

Daaqadda sheekaysiga ee aan ku shaqaynayo, waxay ku furan tahay laba tab browser

Abuuritaanka daaqada wada sheekaysiga waa habka ugu fiican ee lagu bilaabi karo saldhigyada. Doorashada xirmooyinka teknoolojiyadda ayaa aad u weyn. Node.js, tusaale ahaan, waa qumman yahay.

Waxaad baran doontaa sida saldhigyadu u shaqeeyaan iyo sida loo hirgeliyo. Tani waa faa'iidada ugu weyn ee mashruucan.

Haddii aad tahay horumariye Laravel oo raba inuu ku shaqeeyo saldhigyada, akhri my maqaal

GitLab CI

Xigasho

Haddii aad ku cusub tahay is dhexgalka joogtada ah (CI), la ciyaar GitLab CI. Deji dhowr deegaan oo isku day inaad sameyso dhowr imtixaan. Ma ahan mashruuc aad u adag, laakiin waxaan hubaa inaad wax badan ka baran doonto. Kooxo badan oo horumarineed ayaa hadda isticmaalaya CI. Ogaanshaha sida loo isticmaalo ayaa faa'iido leh.

Waxaad baran doontaa:

• Waa maxay GitLab CI
• Sida loo habeeyo .gitlab-ci.ymlkaas oo u sheegaya isticmaalaha GitLab waxa la sameeyo
• Sida loo geeyo deegaan kale

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

Samee xoqoxo falanqeeya semantiga mareegaha oo abuuraya qiimayntooda. Tusaale ahaan, waxaad ka eegi kartaa calaamadaha alt tags ee maqan. Ama hubi haddii boggu leeyahay tags meta SEO ah. xoqan waxaa la abuuri karaa iyada oo aan la isticmaalin interface.

Waxaad baran doontaa:

• Sidee buu u shaqeeyaa xoqid?
• Sida loo abuuro doorasha DOM
• Sida loo qoro algorithm
• Haddii aadan rabin inaad halkaas ku joogsato, samee interface interface. Waxaad sidoo kale ka abuuri kartaa warbixin shabakad kasta oo aad hubiso.

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

Xigasho

Ogaanshaha dareenka ee warbaahinta bulshada waa hab fiican oo lagu baro barashada mashiinka.

Waxaad ku bilaabi kartaa adiga oo falanqeynaya hal shabakad bulsho. Qof kastaa wuxuu caadi ahaan ku bilaabmaa Twitter.

Haddii aad khibrad u leedahay barashada mashiinka, isku day inaad xogta ka ururiso shabakadaha bulshada ee kala duwan oo aad isku darto.

Waxaad baran doontaa:

• Waa maxay barashada mashiinka

Клон Trello

Trello clone oo ka socda Indrek Lasn.

Waxaad baran doontaa:

• Habaynta codsiyada habaynta wadooyinka (Routing).
• Jiid oo tuur
• Sida loo sameeyo walxo cusub (loox, liis, kaarar).
• Hagaajinta iyo hubinta xogta gelinta
• Laga soo bilaabo dhinaca macmiilka: sida loo isticmaalo kaydinta maxaliga ah, sida loo kaydiyo xogta kaydinta maxaliga ah, sida loo akhriyo xogta kaydinta maxaliga ah.
• Laga soo bilaabo dhinaca serverka: sida loo isticmaalo database-yada, sida loo kaydiyo xogta database, sida loo akhriyo xogta database.

Halkan waxaa ah tusaale kayd, oo lagu sameeyay React+Redux.

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

Kaydka Github

Codsi fudud oo CRUD ah, oo ku habboon barashada aasaaska. Aan barano:

• Abuur isticmaalayaasha, maamul isticmaalayaasha
• La falgal xogta xogta - abuur, akhri, wax ka beddel, tirtir isticmaalayaasha.
• Xaqiijinta gelinta iyo la shaqaynta foomamka.

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

Kaydka Github

Wax kasta: Swift, Ujeedo-C, Dhalad falcelin, Java, Kotlin.

Aan barano:

• Sida codsiyada asalka ahi u shaqeeyaan.
• Sida xogta API looga soo ceshado
• Sida qaabaynta bogga hooyo u shaqeeyaan.
• Sida loogu shaqeeyo mobaylada mobaylada.

Isku day API kan. Haddii aad hesho wax ka fiican, ku qor faallooyinka.

Haddii aad xiisaynayso, waa kan halkan waa cashar.

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

Farsamo ahaan, kani maaha codsi, laakiin waa hawl aad u faa'iido badan in la fahmo sida xirmada webka uga shaqeyso gudaha. Hadda ma noqon doonto "sanduuqa madow", laakiin waa qalab la fahmi karo.

Shuruudaha:

• Isku-dubarid es7 ilaa es5 ( aasaasiga ah).
• U diyaari jsx ilaa js - ama - .vue .js (waa inaad barataa loaders)
• Deji server dev xirmo iyo module kulul dib u dejinta. (vue-cli iyo create-react-app isticmaal labadaba)
• Isticmaal Heroku, now.sh ama Github, baro sida loo geeyo mashaariicda xirmada webka.
• Diyaarso soo-sameeyaha aad jeceshahay si aad u ururiso css - scss, less, stylus.
• Baro sida loo isticmaalo sawirada iyo svgs-ga oo wata xirmada webka.

Tani waa kheyraad cajiib ah oo loogu talagalay bilawga dhamaystiran.

Клон Hackernews

Jedi kasta waxaa looga baahan yahay inuu sameeyo Hackernews u gaar ah.

Waxaad ku baran doontaa inta aad jidka ku jirto:

• Sida loola falgalo hackernews API.
• Sida loo sameeyo hal bog codsi.
• Sida loo hirgeliyo sifooyinka sida daawashada faallooyinka, faallooyinka shakhsi ahaaneed, profiles.
• Habaynta codsiyada habaynta wadooyinka (Routing).

Тудушечка

TodoMVC.

Dhab ahaantii? Tudushka? Waxaa jira kumanaan iyaga ka mid ah. Laakiin i rumayso, waxaa jirta sabab caannimadan.
App-ka Tudu waa hab fiican oo lagu hubinayo inaad fahantay aasaaska. Isku day inaad hal codsi ku qorto vaniljka Javascript iyo mid qaabka aad ugu jeceshahay.

Baro:

• Abuur hawlo cusub
• Hubi in beeruhu ay buuxsameen.
• Shaandhee hawlaha (dhamaystiran, firfircoon, dhammaan). Isticmaal filter и reduce.
• Faham aasaaska Javascript.

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

Kaydka Github

Aad bay u caawinaysaa in la fahmo jiid oo tuur api.

Aan barano:

• Jiid oo tuur API
• Abuur UI qani ah

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

Waxaad fahmi doontaa sida ay u shaqeeyaan codsiyada webka iyo codsiyada asalka ah, kuwaas oo kaa sooci doona cufka cawl.

Waxaan baran doonaa:

• saldhigyada mareegaha (farriimaha degdega ah)
• Sida codsiyada asalka ahi u shaqeeyaan.
• Sida habraacyadu ugu shaqeeyaan codsiyada asalka ah.
• Abaabulida dariiqyada socodsiinta codsiga ee codsiyada waddaniga ah.

Tafatiraha qoraalka

Ujeedada tifaftiraha qoraalka waa in la yareeyo dadaalka isticmaalayaasha isku dayaya inay u beddelaan qaabeyntooda calaamad HTML sax ah. Tafatiraha qoraalka wanaagsan wuxuu u oggolaanayaa isticmaaleyaasha inay u qaabeeyaan qoraalka siyaabo kala duwan.

Mararka qaarkood, qof kastaa wuxuu isticmaalay tifaftiraha qoraalka. Haddaba maxaa diidaya Abuur naftaada?

Клон Reddit

Reddit waa ururinta wararka bulshada, qiimaynta nuxurka mareegaha iyo goobta doodaha.

Reddit waxay qaadataa inta badan waqtigayga, laakiin waan sii wadaa inaan la joogo. Abuuritaanka Reddit clone waa hab wax ku ool ah oo lagu barto barnaamijka (inta aad isku mar baadhayso Reddit).

Reddit waxay ku siinaysaa qani aad u badan API. Ha ka tagin wax sifo ah ama ha u samayn wax si xun. Dunida dhabta ah ee macaamiisha iyo macaamiisha, ma shaqeyn kartid si aan macquul ahayn, ama waxaad si degdeg ah u waayi doontaa shaqadaada.

Macaamiisha caqliga leh waxay isla markiiba ogaan doonaan in shaqada loo qabtay si liidata oo ay heli doonaan qof kale.

Reddit API

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

Haddii aad qorto koodka Javascript, fursada inaad isticmaasho maareeyaha xirmada. Maamulaha xirmada wuxuu kuu ogolaanayaa inaad dib u isticmaasho kood jira oo ay dadka kale qoreen oo daabaceen.

Fahamka wareegga horumarka buuxa ee xirmo ayaa ku siin doona khibrad aad u wanaagsan. Waxaa jira waxyaabo badan oo aad u baahan tahay inaad ogaato markaad kood daabacayso. Waxaad u baahan tahay inaad ka fikirto amniga, nooca semantic, scalability, heshiisyada magacaabista iyo dayactirka.

Baakadu waxay noqon kartaa wax kasta. Haddii aadan fikrad lahayn, samee Lodash adiga kuu gaar ah oo daabac.

Lodash: lodash.com

Inaad haysato wax aad internetka ku samaysay waxay kaa dhigaysaa 10% ka sarreeya kuwa kale. Halkan waxaa ah kheyraad waxtar leh ku saabsan ilaha furan iyo baakadaha.

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

Manhajka FCC

FreeCodecamp wax badan ayuu soo ururiyay koorsada barnaamijka oo dhamaystiran.

freeCodeCamp waa urur aan faa'iido doon ahayn. Waxay ka kooban tahay madal wax barasho oo ku salaysan mareegaha is-dhexgalka, golaha bulshada onlaynka ah, qolalka lagu sheekeysto, daabacaado dhexdhexaad ah, iyo ururo maxalli ah kuwaas oo damacsan in ay ka dhigaan horumarinta mareegaha barashada qof kasta.

Waxaad noqon doontaa in ka badan oo aad u qalanto shaqadaada ugu horreysa haddii aad maamusho inaad dhammayso koorsada oo dhan.

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

Hab-maamuuska HTTP waa mid ka mid ah hab-maamuuska ugu muhiimsan ee nuxurku ugu socdaalo internetka. Adeegayaasha HTTP waxaa loo isticmaalaa in loogu adeego waxyaabaha taagan sida HTML, CSS, iyo JS.

Inaad awood u yeelatid inaad ka dhaqangeliso borotokoolka HTTP xoqan waxay ballaarin doontaa aqoontaada sida arrimuhu u falgalaan.

Tusaale ahaan, haddii aad isticmaasho NodeJs, markaa waxaad ogtahay in Express ay bixiso server HTTP ah.

Tixraac ahaan, eeg haddii aad awooddo:

• Samee server adoon isticmaalin wax maktabado ah
• Seerfarku waa inuu u adeegaa HTML, CSS iyo JS content.
• Hirgelinta router meel eber ah
• La soco isbeddelada oo cusboonaysii serverka

Haddii aadan garanayn sababta, isticmaal La soco iskuna day inaad abuurto server HTTP ah Caddy meel eber ah.

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

Dhammaanteen waan qornaa, ma aha?

Aan abuurno app note. Codsigu waxa uu u baahan yahay in uu kaydiyo qoraalada oo uu la mid dhigo kaydka xogta. U samee abka waddaniga ah adigoo isticmaalaya Electron, Swift, ama wax kasta oo aad jeceshahay iyo waxa u shaqeeya nidaamkaaga.

Dareen xornimo inaad tan ku darto caqabadda koowaad (tafatiraha qoraalka).

Gunno ahaan, isku day inaad ku dhejiso nooca desktop-kaaga iyo nooca shabakadda.

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

Yaa aan dhegaysan cajaladaha la soo bandhigay?

Samee arji shabakad leh shaqadan soo socota:

• Samee xisaab
• Raadi Podcasts
• Qiimee oo ku biir podcasts
• Joogso oo ciyaar, beddel xawaaraha, hawlaha hore iyo gadaal 30 ilbiriqsi.

Isku day inaad u isticmaasho iTunes API barta bilawga ah. Haddii aad taqaan wax kale oo kheyraad ah, fadlan ku dheji faallooyinka.

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

Qabashada shaashadda

Hello! Waxaan duubayaa shaashadayda hadda!

Samee desktop-ka ama app-ka webka kaas oo kuu ogolaanaya inaad qabsato shaashaddaada oo aad u kaydiso clip-ka sidii .gif

halkan talooyin qaarsida loo gaaro tan.

Ilaha

• 5 ka mid ah mashaariicda tababbarka dhiirranaanta leh ee horumariyaha (Layer, Squoosh, Calculator, Crawler Website, Player Music)
• 9 mashruuc si aad kor ugu qaaddo xirfadahaaga Front-End
• Lix hawlood oo loogu talagalay horumariyaha Front-End
• Dhaqanka madadaalada leh ee horumariyaha
• 8 mashruuc oo waxbarasho
• Liis kale oo mashruucyo ah oo lagu tababarto

Source: www.habr.com