1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Gotar bi piştgiriya Nermalava EDISON, ku tê wergerandin û herweha .
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.
- Как работают оптимизация и обработка изображений.
Têbînî: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Têbînî: vir .
Подборка проектов из предыдущих публикаций.
pel
Layer civakek e ku her kes dikare li ser "board"ek hevpar pixelek bikişîne. Fikra orîjînal li Reddit çêbû. Civaka r/Layer metelokek ji afirîneriya hevpar e, ku her kes dikare bibe afirîner û beşdarî dozek hevpar bibe.
Dema ku hûn projeya xweya Layerê çêbikin hûn ê fêr bibin:
- Canvas JavaScript çawa dixebitîne Zanîna ku meriv kanavek çawa dixebitîne di gelek serlêdanan de jêhatîbûnek krîtîk e.
- Meriv çawa destûrên bikarhêner hevrêz dike. Her bikarhênerek dikare her 15 hûrdem carekê pîxelek bikişîne bêyî ku têkeve.
- Danişînên cookie çêbikin.
Squoosh
Squoosh bi gelek vebijarkên pêşkeftî serîlêdanek berhevkirina wêneyê ye.
GIF 20 MB
Bi afirandina guhertoya xweya Squoosh hûn ê fêr bibin:
- Meriv çawa bi mezinahiyên wêneyê re dixebite
- Bingehên Drag'n'Drop API fêr bibin
- Fêm bikin ka guhdarên API û bûyerê çawa dixebitin
- Meriv çawa pelan barkirin û hinarde dike
Têbînî: Kompresora wêneyê herêmî ye. Ne hewce ye ku daneyên zêde ji serverê re bişînin. Hûn dikarin kompresor li malê hebin, an hûn dikarin wê li ser serverek, bijartina xwe bikar bînin.
Kalker
Haydê? Bi giranî? Hesabker? Erê, tam, hesabkerek. Fêmkirina bingehên operasyonên matematîkê û ka ew çawa bi hev re dixebitin jêhatîbûnek krîtîk e ji bo hêsankirina serîlêdanên we. Zû an dereng hûn ê neçar bimînin ku bi hejmaran re mijûl bibin û zûtir ew çêtir.
Bi afirandina hesabkera xwe hûn ê fêr bibin:
- Bi hejmar û operasyonên matematîkê re bixebitin
- Bi API-ya guhdarên bûyerê re pratîk bikin
- Meriv çawa hêmanan saz dike, şêwazan fam dike
Crawler (Motora Lêgerînê)
Her kesî motorek lêgerînê bikar aniye, ji ber vê yekê çima ya xwe biafirînin? Crawler hewce ne ku ji bo agahdariyê bigerin. Her kes wan her roj bikar tîne û daxwaza vê teknolojiyê û pispor tenê bi demê re dê mezin bibe.
motora lêgerînê ya Google
Tiştê ku hûn ê bi afirandina motora lêgerîna xwe fêr bibin:
- Crawler çawa dixebitin
- Meriv çawa malperan navnîş dike û meriv çawa wan ji hêla nirx û navûdengê ve rêz dike
- Meriv çawa malperên pêvekirî di databasê de hilîne û meriv çawa bi databasê re dixebite
Lîstika muzîkê (Spotify, Apple Music)
Her kes li muzîkê guhdarî dike - ew tenê beşek bingehîn a jiyana me ye. Ka em lîstikvanek muzîkê biafirînin da ku çêtir fam bikin ka mekanîka bingehîn a platformek weşana muzîka nûjen çawa dixebite.
Spotify
Ya ku hûn ê bi afirandina platforma xweya weşana muzîkê fêr bibin:
- Meriv çawa bi API-ê re dixebite. API-ê ji Spotify an Apple Music bikar bînin
- Meriv çawa dileyze, rawestîne an vedigere ser şopa din / berê
- Meriv çawa voluman biguhezîne
- Meriv çawa rêvekirina bikarhêner û dîroka gerokê birêve dibe
Serlêdana lêgerîna fîlimê bi karanîna React (bi çengelan)
Yekem tiştê ku hûn dikarin pê dest pê bikin ev e ku hûn bi karanîna React serîlêdana lêgerîna fîlimê biafirînin. Li jêr wêneyek e ku dê serlêdana paşîn çawa xuya bike:
Hûn ê çi fêr bibin
Bi avakirina vê sepanê, hûn ê bi karanîna Hooks API-ya nisbeten nû ve jêhatîbûnên xwe yên React çêtir bikin. Projeya nimûne hêmanên React, gelek hook, API-yek derveyî, û bê guman hin şêwazên CSS-ê bikar tîne.
Stack û taybetmendiyên teknîkî
- Bi çengan re reaksiyonê bikin
- biafirînin-reaksiyonê-app
- JSX
- CSS
Bêyî karanîna dersan, ev proje xala têketina bêkêmasî ya React-a fonksiyonel didin we û bê guman dê di sala 2020-an de ji we re bibin alîkar. hûn dikarin bibînin . Talîmatan bişopînin an wê ji xwe re bikin.
App Chat bi Vue re
Projeyek din a girîng a ku hûn bikin ev e ku hûn bi karanîna pirtûkxaneya JavaScript-a min a bijare: VueJS serîlêdanek danûstendinê biafirînin. Serlêdan dê tiştek bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa serîlêdanek Vue ji sifrê çêdike - çêkirina pêkhateyan, birêvebirina dewletê, afirandina rêgezan, girêdana bi karûbarên sêyemîn re, û tewra bi erêkirinê re.
Stack û taybetmendiyên teknîkî
- Vue
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ev projeyek bi rastî pir girîng e ku hûn bi Vue re dest pê bikin an jî jêhatîyên xwe yên heyî baştir bikin da ku di sala 2020-an de bikevin pêşkeftinê. hûn dikarin bibînin .
Serlêdana hewayê ya xweşik bi Angular 8
Ev mînak dê ji we re bibe alîkar ku hûn bi karanîna Angular 8 serîlêdanek hewa xweş biafirînin:
Hûn ê çi fêr bibin
Ev proje dê di avakirina serîlêdanan ji sifirê de jêhatîbûnên hêja fêrî we bike - ji sêwiranê heya pêşkeftinê, heya serîlêdanek amade-amade.
Stack û taybetmendiyên teknîkî
- goşeyî 8
- Firebase
- Rendering aliyê server
- CSS bi Grid û Flexbox
- Mobile dostane û adaptability
- Modeya tarî
- Navbera xweş
Tiştê ku ez bi rastî ji vê projeyek tevhev hez dikim ev e ku hûn tiştan ji hev venaxwînin. Di şûna wê de, hûn tevahiya pêvajoya pêşkeftinê fêr dibin, ji sêwiranê heya bicîhkirina dawîn.
Serlêdana To-Do bi karanîna Svelte
Svelte mîna zarokê nû ye li ser nêzîkatiya bingehîn - bi kêmanî mîna React, Vue û Angular. Û ev yek ji germtirîn hilberên nû yên 2020-an e.
Serlêdanên To-Do ne hewce ne mijara herî germ in, lê ew ê bi rastî ji we re bibe alîkar ku hûn jêhatîbûnên xwe yên Svelte xweş bikin. Ew ê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Ev tutorial dê nîşanî we bide ka meriv çawa bi karanîna Svelte 3, ji destpêkê heya dawiyê, serîlêdanek biafirîne. Hûn ê hêman, şêwaz, û rêvebirên bûyerê bikar bînin
Stack û taybetmendiyên teknîkî
- Svelte 3
- Components
- Styling bi CSS
- Hevoksaziya ES 6
Pir projeyên destpêkê yên Svelte yên baş tune ne, ji ber vê yekê min dît .
Serlêdana e-bazirganî ya ku Next.js bikar tîne
Next.js çarçoweya herî populer e ji bo avakirina serîlêdanên React-ê ku piştgirîya pêşkêşkera ji qutiyê dike.
Ev proje dê nîşanî we bide ka meriv çawa serîlêdanek e-bazirganiya ku bi vî rengî xuya dike biafirîne:
Hûn ê çi fêr bibin
Di vê projeyê de, hûn ê fêr bibin ka meriv çawa bi Next.js-ê re pêşve diçe — rûpel û hêmanên nû biafirîne, daneyan derxîne, û şêwazê xwe bide û serîlêdanek Next saz bike.
Stack û taybetmendiyên teknîkî
- Paşê.js
- Parçe û Rûpel
- Sampling Data
- Ylêkirin
- Pêşxistina Projeyê
- SSR û SPA
Her gav xweş e ku meriv mînakek cîhana rastîn mîna serîlêdana e-bazirganiyê hebe ku tiştek nû fêr bibe. Hûn dikarin .
Bi Nuxt.js re blogek pirzimanî ya bêkêmasî
Nuxt.js ji bo Vue-yê ye, Next.js ji bo React-ê çi ye: çarçoveyek girîng a ji bo berhevkirina hêza pêşkêşker-side û serîlêdanên yek-rûpelê
Serlêdana dawî ya ku hûn dikarin biafirînin dê bi vî rengî xuya bike:
Hûn ê çi fêr bibin
Di vê projeya nimûneyê de, hûn ê fêr bibin ka meriv çawa bi karanîna Nuxt.js, ji sazkirina destpêkê heya bicîhkirina paşîn, malperek bêkêmasî biafirîne.
Ew ji gelek taybetmendiyên xweş ên ku Nuxt pêşkêşî dike sûd werdigire, wek rûpel û pêkhate, û şêwazkirina bi SCSS.
Stack û taybetmendiyên teknîkî
- Nuxt.js
- Parçe û Rûpel
- Modula Storyblock
- Hagfish
- Vuex ji bo rêveberiya dewletê
- SCSS ji bo şêwazê
- Nuxt navîn
, ku gelek taybetmendiyên Nuxt.js-ê yên mezin dihewîne. Ez bi xwe hez dikim ku bi Nuxt re bixebitim ji ber vê yekê divê hûn wiya biceribînin ji ber ku ew ê we jî bike pêşdebirek Vue ya mezin.
Blog bi Gatsby re
Gatsby hilberînerek malpera statîk a hêja ye ku React û GraphQL bikar tîne. Ev encama projeyê ye:
Hûn ê çi fêr bibin
Di vê tutoriyê de, hûn ê fêr bibin ka meriv çawa Gatsby bikar tîne da ku blogek biafirîne ku hûn ê bikar bînin da ku gotarên xwe bi karanîna React û GraphQL binivîsin.
Stack û taybetmendiyên teknîkî
- gatsby
- Bersivkirin
- GraphQL
- Plugins û mijarên
- MDX / Markdown
- Bootstrap CSS
- Sêwiran
Ger we carî xwest ku hûn blogek dest pê bikin, li ser ka meriv wê çawa bi karanîna React û GraphQL çêbike.
Ez nabêjim WordPress vebijarkek xirab e, lê bi Gatsby re hûn dikarin malperên bi performansa bilind bi karanîna React-ê ava bikin - ku têkiliyek ecêb e.
Blog bi Gridsome
Gridsome ji bo Vue... Baş e, me berê jî ev bi Next/Nuxt re hebû.
Lê heman tişt ji bo Gridsome û Gatsby jî rast e. Her du GraphQL wekî qata daneya xwe bikar tînin, lê Gridsome VueJS bikar tîne. Ev jî çêkerek malpera statîk a ecêb e ku dê ji we re bibe alîkar ku hûn blogên mezin biafirînin:
Hûn ê çi fêr bibin
Ev proje dê fêrî we bike ka meriv çawa blogek hêsan biafirîne da ku bi Gridsome, GraphQL û Markdown dest pê bike. Di heman demê de ew vedigire ka meriv çawa serîlêdanek bi navgîniya Netlify ve tê bicîh kirin.
Stack û taybetmendiyên teknîkî
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Ev bê guman ne dersa herî berfireh e, lê ew têgehên bingehîn ên Gridsome û vedihewîne .
Lîstika dengî ya mîna SoundCloud-ê ku Quasar bikar tîne
Quasar çarçoveyek din a Vue ye ku dikare ji bo afirandina sepanên mobîl were bikar anîn. Di vê projeyê de hûn ê serîlêdanek lîstikvanê bihîstwerê biafirînin, mînakî:
Hûn ê çi fêr bibin
Dema ku projeyên din bi giranî li ser sepanên webê hûr dibin, ev yek dê nîşanî we bide ka meriv çawa bi karanîna Vue û çarçoweya Quasar serîlêdanek mobîl biafirîne.
Pêdivî ye ku hûn jixwe Cordova bi Android Studio/Xcode ve hatî mîheng kirin. Heke ne, manual girêdanek bi malpera Quasar re heye ku ew nîşanî we didin ka meriv çawa her tiştî saz dike.
Stack û taybetmendiyên teknîkî
- quasar
- Vue
- Cordova
- WaveSurfer
- Pêkhateyên UI
, kapasîteyên Quasar ji bo çêkirina sepanên mobîl nîşan dide.
Форма кредитной карты
Şêweyek qerta krediyê ya xweş bi danûstendinên mîkro-heval û xweş. Formatkirina hejmarê, verastkirin û tespîtkirina tîpa qerta otomatîkî vedihewîne. Ew li ser Vue.js hatî çêkirin û di heman demê de bi tevahî bersivdar e. (Hûn dikarin bibînin .)
Tiştê ku hûn ê fêr bibin:
- Formên pêvajoyê bikin û rast bikin
- Bûyeran bi rê ve bibin (mînak, dema ku zevî diguherin)
- Fêm bikin ka meriv çawa hêmanan li ser rûpelê nîşan dide û bi cîh dike, nemaze agahdariya qerta krediyê ya ku li jorê formê xuya dike
grafika bar
Histogram nexşeyek an grafîkek e ku daneyên kategorîk bi barên çargoşe yên bi bilindî an dirêjiyên ku li gorî nirxên ku ew temsîl dikin temsîl dike.
Ew dikarin vertîkal an horîzontal bêne sepandin. Nexşeya barkêşê ya vertical carinan wekî nexşeyek rêzê tê gotin.
Tiştê ku hûn ê fêr bibin:
- Daneyên bi rengek çêkirî û têgihîştî nîşan bidin
- Zêdetir: Fêr bibe ka meriv çawa hêmanê bikar tîne
canvasû çawa hêmanên bi wê xêzkirin
hûn dikarin daneyên nifûsa cîhanê bibînin. Ew li gorî salê têne dabeş kirin.
Анимация сердечка Twitter
Di sala 2016-an de, Twitter ev anîmasyona ecêb ji bo tweetên xwe destnîşan kir. Ji sala 2019-an de, ew hîn jî beş xuya dike, ji ber vê yekê çima xwe yek biafirînin?
Tiştê ku hûn ê fêr bibin:
- Bi taybetmendiya CSS re bixebitin
keyframes - Hêmanên HTML-ê manîpule bikin û zindî bikin
- JavaScript, HTML û CSS tevlihev bikin
Репозитории GitHub с функцией поиска
Li vir tiştek ecêb tune - repoyên GitHub tenê navnîşek rûmetdar in.
Armanc ew e ku depoyan nîşan bide û destûrê bide bikarhêner ku wan fîlter bike. Bikaranîn ji bo her bikarhênerek depoyan bigirin.
Rûpelê profîla GitHub -
Tiştê ku hûn ê fêr bibin:
- Daneyên ji API-ê bistînin
- Daneyên ji API-ê nîşan bide
- Ji bo her lêgerînê daneyên têkildar Parzîne û nîşan bide
- Vebijarkî: Heke hûn ji bo dijwariyek amade ne, bikar bînin , bi karanîna GraphQL ve hatî çêkirin. .
Чаты в стиле Reddit
Chat ji ber sadebûn û karanîna wan rêyek ragihandinê ya populer e. Lê çi bi rastî odeyên chatê yên nûjen dişewitîne? WebSockets!
Tiştê ku hûn ê fêr bibin:
- WebSockets, ragihandina rast-dem û nûvekirina daneyan bikar bînin
- Bi astên gihîştina bikarhêner re bixebitin (mînak, xwediyê kanalek chatê xwedî rol e
admin, û yên din di odeyê de -user) - Formên pêvajoyê bikin û rast bikin - ji bîr mekin, pencereya chatê ya şandina peyamê ye
input - Sohbetên cihêreng biafirînin û tevlî bibin
- Bi peyamên kesane re bixebitin. Bikarhêner dikarin bi bikarhênerên din re bi taybetî biaxivin. Di bingeh de, hûn ê di navbera du bikarhêneran de têkiliyek WebSocket saz bikin.
Навигация в стиле Stripe
Ya ku vê navîgasyonê bêhempa dike ev e ku konteynera popover li gorî naverokê diguhere. Di vê veguheztinê de li gorî tevgera kevneşopî ya vebûn û girtina popoverek nû xweşikbûnek heye.
Tiştê ku hûn ê fêr bibin:
- Anîmasyona CSS-ê bi veguherînan re tevlihev bikin
- Naveroka tarî bikin û çîna çalak li ser hêmana pêvekirî bicîh bikin
Pacman
Guhertoya xweya Pacman biafirînin. Ev rêgezek girîng e ku meriv ramanek ka lîstik çawa têne pêşve xistin û bingehîn fam bikin. Çarçoveyek JavaScript, React an Vue bikar bînin.
Hûn ê fêr bibin:
- Çawa hêman diherikin
- Meriv çawa destnîşan dike ku kîjan bişkojkan pêl bike
- Meriv çawa dema pevçûnê diyar dike
- Hûn dikarin bêtir biçin û kontrolên tevgera ghost lê zêde bikin
Hûn ê mînakek vê projeyê bibînin GitHub
rêveberiya bikarhêner
Projeyê GitHub
Afirandina serîlêdanek celebek CRUD ji bo rêveberiya bikarhêner dê bingehên pêşkeftinê fêrî we bike. Ev bi taybetî ji bo pêşdebirên nû bikêr e.
Hûn ê fêr bibin:
- Routing çi ye
- Meriv çawa formên têketina daneyê digire û kontrol dike ka bikarhêner çi têxe
- Meriv çawa bi databasê re dixebite - çalakiyan biafirînin, bixwînin, nûve bikin û jêbirin
Проверка погоды в вашем местоположении
Projeyê GitHub
Heke hûn dixwazin sepanan biafirînin, bi sepanek hewayê dest pê bikin. Ev proje dikare bi karanîna Swift were qedandin.
Digel bidestxistina ezmûna avakirina serîlêdanê, hûn ê fêr bibin:
- Meriv çawa bi API-ê re dixebite
- Meriv çawa erdnîgarî bikar tîne
- Bi lê zêdekirina têketina nivîsê serîlêdana xwe dînamîktir bikin. Di wê de, bikarhêner dê karibin têkevin cîhê xwe da ku hewa li cîhek taybetî kontrol bikin.
Hûn ê hewceyê API-ê bibin. Ji bo ku daneyên hewayê bistînin, OpenWeather API bikar bînin. Zêdetir agahdarî di derbarê OpenWeather API de.
Окно чата
Pencereya chatê ya min di çalakiyê de, di du tabloyên gerokê de veke
Afirandina pencereyek danûstendinê rêyek bêkêmasî ye ku meriv bi soketan dest pê bike. Hilbijartina stacka teknolojiyê pir mezin e. Node.js, wek nimûne, bêkêmasî ye.
Hûn ê fêr bibin ka soket çawa dixebitin û meriv çawa wan bicîh tîne. Ev avantaja sereke ya vê projeyê ye.
Ger hûn pêşdebirek Laravel in ku dixwazin bi soketan re bixebitin, min bixwînin
GitLab CI
Heke hûn di entegrasyona domdar (CI) de nû ne, bi GitLab CI-ê re bilîzin. Çend hawîrdoran saz bikin û çend ceribandinan biceribînin. Ew ne projeyek pir dijwar e, lê ez bawer im hûn ê gelek tiştan jê fêr bibin. Gelek tîmên pêşveçûnê niha CI bikar tînin. Dizanin ku meriv wê çawa bikar bîne kêrhatî ye.
Hûn ê fêr bibin:
- GitLab CI çi ye
- Çawa mîheng bikî
.gitlab-ci.ymlku ji bikarhênerê GitLab re dibêje ka çi bike - Meriv çawa li hawîrdorên din belav dike
Анализатор сайтов
Scraperek çêbikin ku semantîka malperan analîz dike û rêjeya wan diafirîne. Mînakî, hûn dikarin di wêneyan de tagên alt yên wenda kontrol bikin. An jî kontrol bikin ka rûpelê meta tagên SEO hene. Scraper dikare bêyî navberek bikarhênerek were afirandin.
Hûn ê fêr bibin:
- Scraper çawa dixebite?
- Meriv çawa hilbijêrên DOM-ê biafirîne
- Meriv çawa algorîtmayek dinivîse
- Ger hûn nexwazin li wir rawestin, navgînek bikarhênerek çêbikin. Her weha hûn dikarin li ser her malpera ku hûn kontrol dikin raporek çêbikin.
Определение настроений в социальных сетях
Tespîtkirina hestê li ser medyaya civakî rêyek girîng e ku meriv fêrbûna makîneyê were nas kirin.
Hûn dikarin bi analîzkirina tenê yek tora civakî dest pê bikin. Her kes bi gelemperî bi Twitter-ê dest pê dike.
Ger we jixwe ezmûna fêrbûna makîneyê heye, biceribînin ku daneyan ji torên civakî yên cihêreng berhev bikin û wan berhev bikin.
Hûn ê fêr bibin:
- fêrbûna makîneyê çi ye
Клон Trello
Tiştê ku hûn ê fêr bibin:
- Rêxistinkirina rêyên pêvajokirina daxwazê (Routing).
- Kaş bikin û bavêjin.
- Meriv çawa hêmanên nû (tablo, navnîş, kart) diafirîne.
- Pêvajo û kontrolkirina daneyên têketinê.
- Ji hêla xerîdar ve: meriv çawa hilanîna herêmî bikar tîne, meriv çawa daneyê li hilanîna herêmî hilîne, meriv çawa daneyên ji hilana herêmî dixwîne.
- Ji hêla serverê ve: meriv çawa databasan bikar tîne, meriv çawa daneyê di databasê de hilîne, meriv çawa daneyan ji databasê dixwîne.
, di React + Redux de hatî çêkirin.
Панель админа
Serlêdanek CRUD ya hêsan, ji bo fêrbûna bingehîn îdeal e. Ka em fêr bibin:
- Bikarhêneran biafirînin, bikarhêneran birêve bibin.
- Bi databasê re têkilî daynin - bikarhêneran biafirînin, bixwînin, biguherînin, jêbirin.
- Rastkirina têketinê û xebata bi forman.
Трекер криптовалют (нативное мобильное приложение)
Tiştek: Swift, Objective-C, React Native, Java, Kotlin.
Ka em bixwînin:
- Serlêdanên xwemalî çawa dixebitin.
- Meriv çawa daneyên ji API-ê vedigire.
- Pîvana rûpela xwemalî çawa dixebitin.
- Meriv çawa bi simulatorên mobîl re dixebite.
. Ger hûn tiştek çêtir bibînin, di şîroveyan de binivîsin.
Heke hûn eleqedar in, li vir e .
Настроить собственный конфиг webpack с нуля
Ji hêla teknîkî ve, ev ne serîlêdanek e, lê ew karekî pir bikêr e ku meriv fam bike ka webpack çawa ji hundur dixebite. Naha ew ê ne "qutiya reş", lê amûrek têgihîştî be.
Hewce:
- Es7 ber es5 (bingehîn) berhev bikin.
- Jsx li js - an - .vue .js berhev bikin (divê hûn barkeran fêr bibin)
- Pêşkêşkara dev webpack û nûvekirina modula germ saz bikin. (vue-cli û create-react-app herduyan bikar tînin)
- Heroku, now.sh an Github bikar bînin, fêr bibin ka meriv çawa projeyên webpackê bicîh dike.
- Pêşprocessorê xweya bijare saz bikin ku css berhev bike - scss, kêmtir, stîlus.
- Fêr bibe ka meriv çawa wêne û svgs bi webpackê re bikar tîne.
Клон Hackernews
Her Jedi pêdivî ye ku Hackernews-a xwe çêbike.
Tiştê ku hûn ê di rê de fêr bibin:
- Meriv çawa bi hackernews API-ê re têkilî daynin.
- Meriv çawa serîlêdanek rûpelek yekane biafirîne.
- Meriv çawa taybetmendiyên wekî dîtina şîroveyan, şîroveyên kesane, profîlan bicîh tîne.
- Rêxistinkirina rêyên pêvajokirina daxwazê (Routing).
Тудушечка
Bi giranî? Tudushka? Bi hezaran ji wan hene. Lê ji min bawer bikin, sedemek vê populerbûnê heye.
Serlêdana Tudu rêgezek girîng e ku hûn pê ewle bibin ku hûn bingehîn fam dikin. Biceribînin yek serîlêdanê di vanilla Javascript de û yek jî di çarçoveya xweya bijare de binivîsin.
Fêrbûn:
- Karên nû çêbikin.
- Kontrol bikin ka qad hatine dagirtin.
- Karên Parzûnê (qediyayî, çalak, hemî). Bikaranîn
filterиreduce. - Bingehên Javascript fêm bikin.
Сортируемый drag and drop список
Ji bo fêmkirinê pir alîkar e .
Ka em fêr bibin:
- API-ê kaş bikin û bavêjin
- UI-yên dewlemend biafirînin
Клон мессенджера (нативное приложение)
Hûn ê fêm bikin ka hem serîlêdanên malperê û hem jî serîlêdanên xwemalî çawa dixebitin, ku dê we ji girseya gewr veqetîne.
Ya ku em ê bixwînin:
- Soketên Webê (peyamên tavilê)
- Serlêdanên xwemalî çawa dixebitin.
- Di serîlêdanên xwemalî de şablon çawa dixebitin.
- Di serîlêdanên xwemalî de rêyên hilanîna daxwazê organîze dikin.
Edîtorê nivîsê
Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.
В какой-то момент каждый использовал текстовый редактор. Так почему бы не ?
Клон Reddit
— это агрегация социальных новостей, рейтинг веб-контента и сайт для обсуждений.
Reddit — занимает большую часть моего времени, но я продолжаю зависать на нем. Создание клона Reddit — это эффективный способ изучения программирования (при одновременном просмотре Reddit).
Reddit предоставляет вам очень богатый. Не упускайте какие-либо функции и не делайте как попало. В реальном мире с клиентами и покупателями, вы не сможете работать как попало, или вы быстро потеряете работу.
Умные клиенты сразу же догадаются, что работа выполняется плохо, и найдут кого-то другого.
Публикация пакета NPM с открытым исходным кодом
Если вы пишите код на Javascript, скорее всего, вы используете менеджер пакетов. Менеджер пакетов позволяет повторно использовать существующий код, который написали и опубликовали другие люди.
Понимание полного цикла разработки пакета даст очень хороший опыт. Есть много вещей, которые вам нужно знать при публикации кода. Вам нужно подумать о безопасности, семантическом управлении версиями, масштабируемости, соглашениях об именах и обслуживании.
Пакет может быть любым. Если у вас нет идеи, создайте свой собственный Lodash и опубликуйте его.
Lodash:
Наличие чего-то, что вы сделали в Интернете, ставит вас на 10% выше других. об открытых источниках и пакетах.
Учебный план freeCodeCamp
freeCodecamp собрал очень .
freeCodeCamp — это некоммерческая организация. Она состоит из интерактивной обучающей веб-платформы, онлайн-форума сообщества, чатов, публикаций Medium и местных организаций, которые намереваются сделать доступным для всех изучение веб-разработки.
Вы будете более чем квалифицированы для своей первой работы, если вам удастся завершить весь курс.
Создайте HTTP-сервер с нуля
Протокол HTTP является одним из основных протоколов, по которым контент попадает в Интернете. HTTP-серверы используются для обслуживания статического контента, такого как HTML, CSS и JS.
Возможность реализовать протокол HTTP с нуля расширит ваши знания о том, как все взаимодействует.
Например, если вы используете NodeJs, то вы знаете что Express предоставляет HTTP-сервер.
Для справки, посмотрите, сможете ли вы:
- Настроить сервер без использования каких-либо библиотек
- Сервер должен обслуживать содержимое HTML, CSS и JS.
- Внедрение маршрутизатора с нуля
- Следить за изменениями и обновлять сервер
Если вы не знаете с чего, воспользуйтесь и попытайтесь создать HTTP-сервер ji serî de.
Десктопное приложение для заметок
Мы все делаем заметки, не так ли?
Давайте создадим приложение для заметок. Приложению необходимо сохранять заметки и синхронизировать их с базой данных. Создайте нативное приложение с помощью Electron, Swift или чего-то еще, что вам нравится, и что подходит для вашей системы.
Не стесняйтесь сочетать это с первым челленджом(текстовый редактор).
В качестве бонуса попробуйте синхронизировать десктопную версию с веб-версией.
Подкасты (клон Overcast)
Кто не слушает подкасты?
Создайте веб-приложение со следующими функциями:
- Hesabek çêbikin
- Поиск подкастов
- Оценивать и подписываться на подкасты
- Остановка и воспроизведение, изменение скорости, функции вперед и назад на 30 секунд.
В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.
Girtina Screen
Привет! Я снимаю свой экран прямо сейчас!
Создайте десктопное или веб-приложение, которое позволит вам захватить ваш экран и сохранить клип как .gif
vir , как добиться этого.
Çavkaniyên
Source: www.habr.com