Dojo ya mbele: miradi ya kufunza ustadi wa wasanidi programu (5 wapya + 43 wa zamani)

1. Клон Notion

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

www.notion.so

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

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

Nakala hiyo ilitafsiriwa kwa usaidizi wa Programu ya EDISON, ambayo разрабатывает приложения и сайтыNa kuwekeza katika kuanzisha.

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

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Kumbuka: Hapa GitHub example repository.

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

tabaka

www.reddit.com/r/layer

Safu ni jumuiya ambapo kila mtu anaweza kuchora pikseli kwenye "ubao" ulioshirikiwa. Wazo la asili lilizaliwa kwenye Reddit. Jumuiya ya r/Layer ni sitiari ya ubunifu wa pamoja, kwamba kila mtu anaweza kuwa mbunifu na kuchangia jambo la kawaida.

Utajifunza nini unapounda mradi wako wa Tabaka:

• Jinsi JavaScript canvas inavyofanya kazi Kujua jinsi ya kutumia turubai ni ujuzi muhimu katika programu nyingi.
• Jinsi ya kuratibu ruhusa za watumiaji. Kila mtumiaji anaweza kuchora pikseli moja kila baada ya dakika 15 bila kuingia.
• Unda vipindi vya kuki.

Squoosh

programu ya squoosh

Squoosh ni programu ya kubana picha iliyo na chaguzi nyingi za hali ya juu.

GIF 20 MB

Kwa kuunda toleo lako mwenyewe la Squoosh utajifunza:

• Jinsi ya kufanya kazi na saizi ya picha
• Jifunze misingi ya Drag'n'Drop API
• Elewa jinsi API na wasikilizaji wa tukio hufanya kazi
• Jinsi ya kupakia na kuhamisha faili

Kumbuka: Compressor ya picha ni ya ndani. Sio lazima kutuma data ya ziada kwa seva. Unaweza kuwa na compressor nyumbani, au unaweza kuitumia kwenye seva, chaguo lako.

Calculator

Njoo? Kwa umakini? Kikokotoo? Ndiyo, hasa, calculator. Kuelewa misingi ya shughuli za hesabu na jinsi zinavyofanya kazi pamoja ni ujuzi muhimu wa kurahisisha programu zako. Hivi karibuni au baadaye utalazimika kushughulika na nambari na mapema bora.

jarodburchhill.github.io/CalculatorReactApp

Kwa kuunda calculator yako mwenyewe utajifunza:

• Fanya kazi na nambari na shughuli za hesabu
• Fanya mazoezi na API ya wasikilizaji wa hafla
• Jinsi ya kupanga vipengele, kuelewa mitindo

Kitambaa (Injini ya utafutaji)

Kila mtu ametumia injini ya utafutaji, kwa nini usiunde yako mwenyewe? Watambaji wanahitajika ili kutafuta maelezo. Kila mtu anazitumia kila siku na mahitaji ya teknolojia hii na wataalamu yataongezeka tu baada ya muda.

Injini ya utafutaji ya Google

Utajifunza nini kwa kuunda injini yako ya utafutaji:

• Jinsi watambaji hufanya kazi
• Jinsi ya kuorodhesha tovuti na jinsi ya kuzipanga kwa ukadiriaji na sifa
• Jinsi ya kuhifadhi tovuti zilizoorodheshwa kwenye hifadhidata na jinsi ya kufanya kazi na hifadhidata

Kicheza muziki (Spotify, Apple Music)

Kila mtu anasikiliza muziki - ni sehemu muhimu ya maisha yetu. Hebu tuunde kicheza muziki ili kuelewa vyema jinsi mitambo ya msingi ya jukwaa la kisasa la utiririshaji muziki inavyofanya kazi.

Spotify

Utajifunza nini kwa kuunda jukwaa lako la utiririshaji muziki:

• Jinsi ya kufanya kazi na API. tumia API kutoka Spotify au Apple Music
• Jinsi ya kucheza, kusitisha au kurudi nyuma hadi wimbo unaofuata/uliotangulia
• Jinsi ya kubadilisha sauti
• Jinsi ya kudhibiti uelekezaji wa mtumiaji na historia ya kivinjari

Programu ya utaftaji wa sinema kwa kutumia React (na ndoano)

Jambo la kwanza unaweza kuanza nalo ni kuunda programu ya kutafuta filamu kwa kutumia React. Ifuatayo ni picha ya jinsi programu ya mwisho itakavyoonekana:

Utajifunza nini
Kwa kuunda programu hii, utaboresha ujuzi wako wa React kwa kutumia API mpya kiasi ya Hooks. Mradi wa mfano hutumia vipengee vya React, ndoano nyingi, API ya nje, na bila shaka mtindo fulani wa CSS.

Msururu wa teknolojia na vipengele

• Kuitikia kwa kulabu
• tengeneza programu
• JSX
• CSS

Bila kutumia madarasa yoyote, miradi hii inakupa mahali pazuri pa kuingia katika React ya utendaji na hakika itakusaidia katika 2020. unaweza kupata mfano mradi hapa. Fuata maagizo au uifanye yako mwenyewe.

Piga gumzo na Vue

Mradi mwingine mzuri kwako kufanya ni kuunda programu ya gumzo kwa kutumia maktaba ninayopenda ya JavaScript: VueJS. Maombi yataonekana kama hii:

Utajifunza nini
Katika somo hili, utajifunza jinsi ya kutengeneza programu ya Vue kutoka mwanzo - kuunda vipengele, hali ya kushughulikia, kuunda njia, kuunganisha kwa huduma za watu wengine, na hata kushughulikia uthibitishaji.

Msururu wa teknolojia na vipengele

• Vue
• vuex
• Kipanga njia
• Angalia CLI
• Pusher
• CSS

Huu ni mradi mzuri sana wa kuanza na Vue au kuboresha ujuzi wako uliopo ili kujiendeleza mnamo 2020. unaweza kupata mafunzo hapa.

Programu nzuri ya hali ya hewa na Angular 8

Mfano huu utakusaidia kuunda programu nzuri ya hali ya hewa kwa kutumia Angular 8:

Utajifunza nini
Mradi huu utakufundisha ustadi muhimu katika kuunda programu kutoka mwanzo - kutoka kwa muundo hadi usanidi, hadi programu iliyo tayari kutumwa.

Msururu wa teknolojia na vipengele

• Angular 8
• Moto
• Utoaji wa upande wa seva
• CSS na Gridi na Flexbox
• Simu ya kirafiki na kubadilika
• Темный е
• Kiolesura kizuri

Ninachopenda sana kuhusu mradi huu unaojumuisha yote ni kwamba husomi mambo peke yako. Badala yake, unajifunza mchakato mzima wa ukuzaji, kutoka kwa muundo hadi uwekaji wa mwisho.

Programu ya Kufanya kwa kutumia Svelte

Svelte ni kama mtoto mpya kwenye mbinu inayotegemea vipengele - angalau sawa na React, Vue na Angular. Na hii ni moja ya bidhaa mpya moto zaidi kwa 2020.

Programu za Kufanya si lazima ziwe mada motomoto zaidi, lakini zitakusaidia sana kuboresha ujuzi wako wa Svelte. Itakuwa kama hii:

Utajifunza nini
Mafunzo haya yatakuonyesha jinsi ya kuunda programu kwa kutumia Svelte 3, kuanzia mwanzo hadi mwisho. Utatumia vipengele, mitindo, na vidhibiti tukio

Msururu wa teknolojia na vipengele

• Suluhu 3
• Vipengele
• Styling na CSS
• Sintaksia ya ES 6

Hakuna miradi mingi nzuri ya kuanzisha Svelte, kwa hivyo nimepata hii ni chaguo nzuri kuanza na.

Programu ya e-commerce kwa kutumia Next.js

Next.js ndio mfumo maarufu zaidi wa kuunda programu za React ambazo zinaauni utoaji wa upande wa seva nje ya kisanduku.

Mradi huu utakuonyesha jinsi ya kuunda programu ya e-commerce ambayo inaonekana kama hii:

Utajifunza nini
Katika mradi huu, utajifunza jinsi ya kutengeneza Next.js—kuunda kurasa na vipengee vipya, kutoa data, na mtindo na kupeleka programu Inayofuata.

Msururu wa teknolojia na vipengele

• Ijayo
• Vipengele na Kurasa
• Sampuli za data
• Mtindo
• Usambazaji wa Mradi
• SSR na SPA

Daima ni vyema kuwa na mfano wa ulimwengu halisi kama programu ya e-commerce ili kujifunza kitu kipya. Unaweza pata mafunzo hapa.

Blogu kamili ya lugha nyingi na Nuxt.js

Nuxt.js ni ya Vue, Next.js ni nini kwa React: mfumo mzuri wa kuchanganya nguvu ya uwasilishaji wa upande wa seva na programu za ukurasa mmoja.
Programu ya mwisho unayoweza kuunda itaonekana kama hii:

Utajifunza nini

Katika sampuli ya mradi huu, utajifunza jinsi ya kuunda tovuti kamili kwa kutumia Nuxt.js, kuanzia usanidi wa awali hadi utumaji wa mwisho.

Inachukua fursa ya vipengele vingi vya kupendeza ambavyo Nuxt inapeana, kama vile kurasa na vijenzi, na kuweka mitindo kwa SCSS.

Msururu wa teknolojia na vipengele

• Nuxt.js
• Vipengele na Kurasa
• Moduli ya kizuizi cha hadithi
• Hagfish
• Vuex kwa usimamizi wa serikali
• SCSS kwa styling
• Nuxt middlewares

Huu ni mradi mzuri sana, ambayo inajumuisha vipengele vingi muhimu vya Nuxt.js. Binafsi napenda kufanya kazi na Nuxt kwa hivyo unapaswa kuijaribu kwani itakufanya pia kuwa msanidi mzuri wa Vue.

Blogu na Gatsby

Gatsby ni jenereta bora ya tovuti tuli kwa kutumia React na GraphQL. Hii ndio matokeo ya mradi:

Utajifunza nini

Katika somo hili, utajifunza jinsi ya kutumia Gatsby kuunda blogu ambayo utatumia kuandika makala yako mwenyewe kwa kutumia React na GraphQL.

Msururu wa teknolojia na vipengele

• Gatsby
• Tenda
• GraphQL
• Plugins na mandhari
• MDX/Markdown
• Bootstrap CSS
• Mifumo

Ikiwa umewahi kutaka kuanzisha blogi, huu ni mfano mzuri juu ya jinsi ya kuifanya kwa kutumia React na GraphQL.

Sisemi WordPress ni chaguo mbaya, lakini ukiwa na Gatsby unaweza kuunda tovuti zenye utendaji wa juu ukitumia React - ambayo ni mchanganyiko wa kushangaza.

Blogu na Gridsome

Gridsome kwa Vue... Sawa, tayari tulikuwa na hii na Next/Nuxt.
Lakini ndivyo ilivyo kwa Gridsome na Gatsby. Wote hutumia GraphQL kama safu yao ya data, lakini Gridsome hutumia VueJS. Hii pia ni jenereta ya kushangaza ya tovuti tuli ambayo itakusaidia kuunda blogi nzuri:

Utajifunza nini

Mradi huu utakufundisha jinsi ya kuunda blogu rahisi ili kuanza na Gridsome, GraphQL na Markdown. Pia inashughulikia jinsi ya kupeleka programu kupitia Netlify.

Msururu wa teknolojia na vipengele

• Gridsome
• Vue
• GraphQL
• Mchapishaji
• Netify

Hakika haya sio mafunzo ya kina zaidi, lakini inashughulikia dhana za msingi za Gridsome na Markdown inaweza kuwa mahali pazuri pa kuanzia.

Kicheza sauti kama cha SoundCloud kwa kutumia Quasar

Quasar ni mfumo mwingine wa Vue ambao unaweza kutumika kuunda programu za rununu. Katika mradi huu utaunda programu ya kicheza sauti, kwa mfano:

Utajifunza nini

Ingawa miradi mingine inalenga zaidi programu za wavuti, hii itakuonyesha jinsi ya kuunda programu ya simu kwa kutumia Vue na mfumo wa Quasar.
Unapaswa tayari kuwa na Cordova inayoendesha na Android Studio/Xcode iliyosanidiwa. Ikiwa sivyo, mwongozo una kiungo cha tovuti ya Quasar ambapo wanakuonyesha jinsi ya kusanidi kila kitu.

Msururu wa teknolojia na vipengele

• Robo
• Vue
• Cordova
• WaveSurfer
• Vipengele vya UI

Mradi mdogo, inayoonyesha uwezo wa Quasar wa kuunda programu za simu.

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

Muundo mzuri wa kadi ya mkopo na mwingiliano laini na wa kufurahisha. Inajumuisha uumbizaji wa nambari, uthibitishaji na utambuzi wa aina ya kadi kiotomatiki. Imejengwa kwenye Vue.js na pia inajibu kikamilifu. (Unaweza kuona hapa.)

fomu ya kadi ya mkopo

Utajifunza nini:

• Mchakato na uthibitishe fomu
• Kushughulikia matukio (kwa mfano, wakati sehemu zinabadilika)
• Elewa jinsi ya kuonyesha na kuweka vipengele kwenye ukurasa, hasa maelezo ya kadi ya mkopo ambayo yanaonekana juu ya fomu

grafu ya baa

Histogram ni chati au grafu inayowakilisha data ya kategoria yenye pau za mstatili zenye urefu au urefu sawia na thamani zinazowakilisha.

Wanaweza kutumika kwa wima au kwa usawa. Chati ya upau wima wakati mwingine huitwa chati ya mstari.

Utajifunza nini:

• Onyesha data kwa njia iliyopangwa na inayoeleweka
• Zaidi ya hayo: Jifunze jinsi ya kutumia kipengele canvas na jinsi ya kuteka vipengele nayo

Hapa unaweza kupata data ya idadi ya watu duniani. Wao hupangwa kwa mwaka.

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

Huko nyuma mnamo 2016, Twitter ilianzisha uhuishaji huu wa kushangaza kwa tweets zake. Kufikia 2019, bado inaonekana kama sehemu, kwa nini usiunde mwenyewe?

Utajifunza nini:

• Fanya kazi na sifa ya CSS keyframes
• Dhibiti na uhuishe vipengele vya HTML
• Kuchanganya JavaScript, HTML na CSS

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

Hakuna kitu cha kupendeza hapa - hazina za GitHub ni orodha iliyotukuzwa tu.
Lengo ni kuonyesha hazina na kuruhusu mtumiaji kuzichuja. Tumia API rasmi ya GitHub kupata hazina kwa kila mtumiaji.

Ukurasa wa wasifu wa GitHub - github.com/indreklasn

Utajifunza nini:

• Pokea data kutoka kwa API
• Onyesha data kutoka kwa API
• Chuja na uonyeshe data muhimu kwa kila utafutaji
• Hiari: Ikiwa unatafuta changamoto, tumia API v4, iliyojengwa kwa kutumia GraphQL. Ikiwa unataka kujifunza GraphQL, nenda kwenye mojawapo ya makala zangu zilizopita.

Чаты в стиле Reddit

Gumzo ni njia maarufu ya mawasiliano kutokana na urahisi na urahisi wa matumizi. Lakini ni nini hasa huchochea vyumba vya mazungumzo vya kisasa? WebSockets!

Utajifunza nini:

• Tumia WebSockets, mawasiliano ya wakati halisi na masasisho ya data
• Fanya kazi na viwango vya ufikiaji wa mtumiaji (kwa mfano, mmiliki wa kituo cha gumzo ana jukumu admin, na wengine chumbani - user)
• Mchakato na uthibitishe fomu - kumbuka, dirisha la gumzo la kutuma ujumbe ni input
• Unda na ujiunge na gumzo tofauti
• Fanya kazi na ujumbe wa kibinafsi. Watumiaji wanaweza kuzungumza na watumiaji wengine kwa faragha. Kimsingi, utakuwa unaanzisha muunganisho wa WebSocket kati ya watumiaji wawili.

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

Kinachofanya urambazaji huu kuwa wa kipekee ni kwamba chombo cha popover hubadilika ili kutoshea maudhui. Kuna uzuri wa mpito huu ikilinganishwa na tabia ya jadi ya kufungua na kufunga popover mpya.

Utajifunza nini:

• Changanya uhuishaji wa CSS na mabadiliko
• Fifisha maudhui na utumie darasa linalotumika kwenye kipengele kilichoelea

pac mtu

Unda toleo lako mwenyewe la Pacman. Hii ni njia nzuri ya kupata wazo la jinsi michezo inavyotengenezwa na kuelewa misingi. Tumia mfumo wa JavaScript, React au Vue.

Utajifunza:

• Jinsi vipengele vinasonga
• Jinsi ya kuamua ni funguo zipi za kubonyeza
• Jinsi ya kuamua wakati wa mgongano
• Unaweza kwenda mbali zaidi na kuongeza udhibiti wa harakati za roho

Utapata mfano wa mradi huu katika hazina GitHub

usimamizi wa mtumiaji

Mradi katika hazina GitHub

Kuunda programu ya aina ya CRUD kwa usimamizi wa mtumiaji itakufundisha misingi ya maendeleo. Hii ni muhimu hasa kwa watengenezaji wapya.

Utajifunza:

• Uelekezaji ni nini
• Jinsi ya kushughulikia fomu za kuingiza data na angalia ni nini mtumiaji ameingiza
• Jinsi ya kufanya kazi na hifadhidata - kuunda, kusoma, kusasisha na kufuta vitendo

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

Mradi katika hazina GitHub

Ikiwa unataka kuunda programu, anza na programu ya hali ya hewa. Mradi huu unaweza kukamilika kwa kutumia Swift.

Mbali na kupata uzoefu wa kujenga programu, utajifunza:

• Jinsi ya kufanya kazi na API
• Jinsi ya kutumia geolocation
• Fanya programu yako iwe ya nguvu zaidi kwa kuongeza maandishi. Ndani yake, watumiaji wataweza kuingia eneo lao ili kuangalia hali ya hewa katika eneo maalum.

Utahitaji API. Ili kupata data ya hali ya hewa, tumia OpenWeather API. Maelezo zaidi kuhusu API ya OpenWeather hapa.

Окно чата

Dirisha langu la gumzo likifanya kazi, fungua katika vichupo viwili vya kivinjari

Kuunda dirisha la gumzo ndiyo njia bora ya kuanza na soketi. Uchaguzi wa stack ya teknolojia ni kubwa. Node.js, kwa mfano, ni kamili.

Utajifunza jinsi soketi zinavyofanya kazi na jinsi ya kuzitekeleza. Hii ndiyo faida kuu ya mradi huu.

Ikiwa wewe ni msanidi programu wa Laravel ambaye anataka kufanya kazi na soketi, soma yangu nakala

GitLab CI

Chanzo

Ikiwa wewe ni mpya kwa ujumuishaji endelevu (CI), cheza na GitLab CI. Sanidi mazingira machache na ujaribu kufanya majaribio kadhaa. Sio mradi mgumu sana, lakini nina hakika utajifunza mengi kutoka kwake. Timu nyingi za maendeleo sasa zinatumia CI. Kujua jinsi ya kuitumia ni muhimu.

Utajifunza:

• GitLab CI ni nini
• Jinsi ya kusanidi .gitlab-ci.ymlambayo inamwambia mtumiaji wa GitLab nini cha kufanya
• Jinsi ya kupeleka kwa mazingira mengine

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

Tengeneza kikwazo ambacho huchambua semantiki za tovuti na kuunda ukadiriaji wao. Kwa mfano, unaweza kuangalia kwa kukosa tagi za alt kwenye picha zako. Au angalia ikiwa ukurasa una vitambulisho vya meta vya SEO. Scraper inaweza kuundwa bila interface ya mtumiaji.

Utajifunza:

• Je, scraper inafanya kazi vipi?
• Jinsi ya kuunda wateule wa DOM
• Jinsi ya kuandika algorithm
• Ikiwa hutaki kuacha hapo, tengeneza kiolesura cha mtumiaji. Unaweza pia kuunda ripoti kwenye kila tovuti unayoangalia.

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

Chanzo

Utambuzi wa hisia kwenye mitandao ya kijamii ni njia nzuri ya kujulishwa kujifunza kwa mashine.

Unaweza kuanza kwa kuchambua mtandao mmoja tu wa kijamii. Kila mtu kwa kawaida huanza na Twitter.

Ikiwa tayari una uzoefu wa kujifunza kwa mashine, jaribu kukusanya data kutoka kwa mitandao tofauti ya kijamii na kuichanganya.

Utajifunza:

• Kujifunza kwa mashine ni nini

Клон Trello

Trello clone kutoka Indrek Lasn.

Utajifunza nini:

• Shirika la njia za usindikaji wa ombi (Routing).
• Buruta na uangushe.
• Jinsi ya kuunda vitu vipya (bodi, orodha, kadi).
• Inachakata na kukagua data ya pembejeo.
• Kutoka kwa upande wa mteja: jinsi ya kutumia hifadhi ya ndani, jinsi ya kuhifadhi data kwenye hifadhi ya ndani, jinsi ya kusoma data kutoka kwa hifadhi ya ndani.
• Kutoka upande wa seva: jinsi ya kutumia hifadhidata, jinsi ya kuhifadhi data kwenye hifadhidata, jinsi ya kusoma data kutoka kwa hifadhidata.

Hapa kuna mfano wa hazina, imetengenezwa kwa React+Redux.

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

Hifadhi ya Github.

Programu rahisi ya CRUD, bora kwa kujifunza misingi. Hebu tujifunze:

• Unda watumiaji, dhibiti watumiaji.
• Wasiliana na hifadhidata - tengeneza, soma, hariri, futa watumiaji.
• Kuthibitisha pembejeo na kufanya kazi na fomu.

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

Hifadhi ya Github.

Chochote: Swift, Objective-C, React Native, Java, Kotlin.

Hebu tujifunze:

• Jinsi maombi asilia yanavyofanya kazi.
• Jinsi ya kupata data kutoka kwa API.
• Jinsi mipangilio ya ukurasa asili inavyofanya kazi.
• Jinsi ya kufanya kazi na simulators za simu.

Jaribu API hii. Ikiwa unapata kitu bora, andika kwenye maoni.

Ikiwa una nia, hii hapa hapa kuna mafunzo.

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

Kitaalam, hii sio programu, lakini ni kazi muhimu sana kuelewa jinsi webpack inavyofanya kazi kutoka ndani. Sasa haitakuwa "sanduku nyeusi", lakini chombo kinachoeleweka.

Mahitaji:

• Unganisha es7 hadi es5 (misingi).
• Unganisha jsx hadi js - au - .vue hadi .js (itabidi ujifunze vipakiaji)
• Sanidi seva ya dev ya pakiti ya wavuti na upakiaji upya wa moduli moto. (vue-cli na create-react-app tumia zote mbili)
• Tumia Heroku, now.sh au Github, jifunze jinsi ya kupeleka miradi ya vifurushi vya wavuti.
• Sanidi kichakataji upendacho ili kukusanya css - scss, less, stylus.
• Jifunze jinsi ya kutumia picha na svg na webpack.

Hii ni rasilimali ya kushangaza kwa Kompyuta kamili.

Клон Hackernews

Kila Jedi anahitajika kutengeneza Hackernews yake mwenyewe.

Utajifunza nini njiani:

• Jinsi ya kuingiliana na API ya hackernews.
• Jinsi ya kuunda programu ya ukurasa mmoja.
• Jinsi ya kutekeleza vipengele kama vile kutazama maoni, maoni ya mtu binafsi, wasifu.
• Shirika la njia za usindikaji wa ombi (Routing).

Тудушечка

TodoMVC.

Kwa umakini? Tudushka? Kuna maelfu yao. Lakini niniamini, kuna sababu ya umaarufu huu.
Programu ya Tudu ni njia nzuri ya kuhakikisha kuwa unaelewa mambo ya msingi. Jaribu kuandika programu moja katika Javascript ya vanilla na moja katika mfumo wako unaopenda.

Jifunze:

• Unda majukumu mapya.
• Angalia kama sehemu zimejazwa.
• Chuja kazi (zilizokamilika, zinazotumika, zote). Tumia filter и reduce.
• Kuelewa misingi ya Javascript.

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

Hifadhi ya Github.

Inasaidia sana kuelewa buruta na udondoshe api.

Hebu tujifunze:

• Buruta na udondoshe API
• Unda UIs tajiri

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

Utaelewa jinsi programu zote za wavuti na programu asilia zinavyofanya kazi, ambayo itakuweka kando na misa ya kijivu.

Tutajifunza nini:

• Soketi za wavuti (ujumbe wa papo hapo)
• Jinsi maombi asilia yanavyofanya kazi.
• Jinsi violezo hufanya kazi katika programu asilia.
• Kupanga njia za usindikaji wa ombi katika programu asilia.

Mhariri wa maandishi

Madhumuni ya kihariri cha maandishi ni kupunguza juhudi za watumiaji kujaribu kubadilisha umbizo lao kuwa lau sahihi ya HTML. Mhariri mzuri wa maandishi huruhusu watumiaji kuunda maandishi kwa njia tofauti.

Wakati fulani, kila mtu ametumia mhariri wa maandishi. Hivyo kwa nini si unda mwenyewe?

Клон Reddit

Reddit ni mkusanyiko wa habari za kijamii, ukadiriaji wa maudhui ya wavuti na tovuti ya majadiliano.

Reddit huchukua muda wangu mwingi, lakini ninaendelea kubarizi juu yake. Kuunda clone ya Reddit ni njia bora ya kujifunza upangaji (huku ukivinjari Reddit kwa wakati mmoja).

Reddit hukupa tajiriba sana API. Usiache vipengele vyovyote au kufanya mambo bila mpangilio. Katika ulimwengu wa kweli ukiwa na wateja na wateja, huwezi kufanya kazi bila mpangilio, au utapoteza kazi yako haraka.

Wateja wenye busara watatambua mara moja kuwa kazi hiyo inafanywa vibaya na watapata mtu mwingine.

Reddit API

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

Ukiandika msimbo wa Javascript, kuna uwezekano kwamba unatumia kidhibiti kifurushi. Kidhibiti kifurushi hukuruhusu kutumia tena msimbo uliopo ambao watu wengine wameandika na kuchapisha.

Kuelewa mzunguko kamili wa ukuzaji wa kifurushi kutatoa uzoefu mzuri sana. Kuna mambo mengi unayohitaji kujua unapochapisha msimbo. Unahitaji kufikiria juu ya usalama, toleo la kisemantiki, ukubwa, kanuni za kutaja na matengenezo.

Kifurushi kinaweza kuwa chochote. Ikiwa huna wazo, unda Lodash yako mwenyewe na ulichapishe.

Lodash: lodash.com

Kuwa na kitu ambacho umefanya mtandaoni kunakuweka 10% juu ya wengine. Hapa kuna rasilimali muhimu kuhusu vyanzo wazi na vifurushi.

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

Mtaala wa FCC

freeCodecamp imekusanya mengi kozi ya kina ya programu.

freeCodeCamp ni shirika lisilo la faida. Inajumuisha jukwaa shirikishi la kujifunza kwa msingi wa wavuti, jukwaa la jumuiya mtandaoni, vyumba vya mazungumzo, machapisho ya Kati, na mashirika ya ndani ambayo yananuia kufanya maendeleo ya mtandao wa kujifunza kufikiwa na kila mtu.

Utakuwa na sifa zaidi ya kazi yako ya kwanza ikiwa utaweza kumaliza kozi nzima.

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

Itifaki ya HTTP ni mojawapo ya itifaki kuu ambazo maudhui husafirishwa kwenye mtandao. Seva za HTTP hutumiwa kutoa maudhui tuli kama vile HTML, CSS, na JS.

Kuweza kutekeleza itifaki ya HTTP kutoka mwanzo kutapanua ujuzi wako wa jinsi mambo yanavyoingiliana.

Kwa mfano, ikiwa unatumia NodeJs, basi unajua kwamba Express hutoa seva ya HTTP.

Kwa kumbukumbu, angalia ikiwa unaweza:

• Sanidi seva bila kutumia maktaba yoyote
• Seva lazima itoe maudhui ya HTML, CSS na JS.
• Utekelezaji wa router kutoka mwanzo
• Fuatilia mabadiliko na usasishe seva

Ikiwa hujui kwa nini, tumia Nenda tu na jaribu kuunda seva ya HTTP Caddy kutoka mwanzo.

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

Sisi sote tunaandika, sivyo?

Wacha tuunde programu ya madokezo. Programu inahitaji kuhifadhi madokezo na kuyasawazisha na hifadhidata. Unda programu asili kwa kutumia Electron, Swift, au chochote unachopenda na kinachofanya kazi kwa mfumo wako.

Jisikie huru kuchanganya hii na changamoto ya kwanza (kihariri cha maandishi).

Kama bonasi, jaribu kusawazisha toleo lako la eneo-kazi na toleo la wavuti.

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

Ni nani asiyesikiliza podikasti?

Unda programu ya wavuti yenye utendaji ufuatao:

• Fungua akaunti
• Tafuta Podikasti
• Kadiria na ujiandikishe kwa podikasti
• Simamisha na ucheze, badilisha kasi, vitendaji vya mbele na vya nyuma kwa sekunde 30.

Jaribu kutumia API ya iTunes kama sehemu ya kuanzia. Ikiwa unajua rasilimali nyingine yoyote, tafadhali chapisha kwenye maoni.

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

Kukamata skrini

Habari! Ninarekodi skrini yangu sasa hivi!

Unda eneo-kazi au programu ya wavuti inayokuruhusu kunasa skrini yako na kuhifadhi klipu kama .gif

Hapa vidokezo kadhaajinsi ya kufikia hili.

Vyanzo

• Miradi 5 zaidi ya mafunzo ya uthubutu kwa msanidi programu (Safu, Squoosh, Kikokotoo, Kitambazaji cha Tovuti, Kicheza Muziki)
• Miradi 9 ya kuboresha ujuzi wako wa Front-End
• Kazi sita za msanidi wa Front-End
• Mazoezi ya kufurahisha kwa msanidi programu
• Miradi 8 ya elimu
• Orodha nyingine ya miradi ya kufanya mazoezi

Chanzo: mapenzi.com