1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
Straipsnis buvo išverstas su EDISON Software pagalba, kuri Ir .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Premija: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Pastaba: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Premija: Если вам интересно, я недавно написал на криптовалюту с React Native.
Pastaba: Čia .
Подборка проектов из предыдущих публикаций.
sluoksnis
Sluoksnis yra bendruomenė, kurioje kiekvienas gali nupiešti pikselį bendroje „lentoje“. Pirminė idėja gimė Reddit. R/Layer bendruomenė yra bendro kūrybiškumo metafora, kad kiekvienas gali būti kūrėjas ir prisidėti prie bendro tikslo.
Ką išmoksite kurdami savo sluoksnio projektą:
- Kaip veikia „JavaScript“ drobė Žinoti, kaip valdyti drobę, yra svarbus daugelio programų įgūdis.
- Kaip suderinti vartotojo leidimus. Kiekvienas vartotojas gali nupiešti po vieną pikselį kas 15 minučių neprisijungdamas.
- Sukurkite slapukų seansus.
Squoosh
„Squoosh“ yra vaizdo glaudinimo programa su daugybe išplėstinių parinkčių.
GIF 20 MB
Kurdami savo Squoosh versiją išmoksite:
- Kaip dirbti su vaizdų dydžiais
- Išmokite Drag'n'Drop API pagrindus
- Supraskite, kaip veikia API ir įvykių klausytojai
- Kaip įkelti ir eksportuoti failus
Pastaba: Vaizdo kompresorius yra vietinis. Nebūtina siųsti papildomų duomenų į serverį. Kompresorių galite turėti namuose arba naudoti serveryje, savo nuožiūra.
skaičiuoklė
Nagi? Rimtai? Skaičiuoklė? Taip, tiksliai, skaičiuotuvas. Suprasti matematinių operacijų pagrindus ir jų veikimą kartu yra labai svarbus įgūdis norint supaprastinti programas. Anksčiau ar vėliau teks susitvarkyti su skaičiais ir kuo anksčiau, tuo geriau.
Sukurdami savo skaičiuotuvą sužinosite:
- Darbas su skaičiais ir matematinėmis operacijomis
- Praktikuokite su įvykių klausytojų API
- Kaip išdėstyti elementus, suprasti stilius
Tikrinimo programa (paieškos variklis)
Visi naudojosi paieškos varikliu, tad kodėl gi nesukūrus savo? Informacijos paieškai reikalingi skaitytuvai. Visi juos naudoja kasdien, o šios technologijos ir specialistų paklausa laikui bėgant tik augs.
Google paieškos sistema
Ko išmoksite kurdami savo paieškos variklį:
- Kaip veikia skaitytuvai
- Kaip indeksuoti svetaines ir kaip jas reitinguoti pagal reitingą ir reputaciją
- Kaip saugoti indeksuotas svetaines duomenų bazėje ir kaip dirbti su duomenų baze
Muzikos grotuvas („Spotify“, „Apple Music“)
Visi klauso muzikos – tai tiesiog neatsiejama mūsų gyvenimo dalis. Sukurkime muzikos grotuvą, kad geriau suprastume, kaip veikia pagrindinė šiuolaikinės muzikos srautinio perdavimo platformos mechanika.
"Spotify"
Ko išmoksite kurdami savo muzikos srautinio perdavimo platformą:
- Kaip dirbti su API. naudokite API iš „Spotify“ arba „Apple Music“.
- Kaip paleisti, pristabdyti arba atsukti į kitą / ankstesnį takelį
- Kaip pakeisti garsumą
- Kaip valdyti naudotojo maršrutą ir naršyklės istoriją
Filmų paieškos programa naudojant „React“ (su kabliukais)
Pirmas dalykas, nuo kurio galėtumėte pradėti, yra sukurti filmų paieškos programą naudojant „React“. Toliau pateikiamas vaizdas, kaip atrodys galutinė programa:
Ką išmoksi
Sukūrę šią programą pagerinsite savo React įgūdžius naudodami palyginti naują Hooks API. Pavyzdiniame projekte naudojami „React“ komponentai, daug kabliukų, išorinė API ir, žinoma, tam tikras CSS stilius.
Technika ir funkcijos
- Reaguokite kabliukais
- sukurti-reaguoti-programą
- JSX
- CSS
Nenaudojant jokių klasių, šie projektai suteikia jums puikų įėjimo tašką į funkcinę React ir tikrai padės jums 2020 m. tu gali rasti . Vykdykite instrukcijas arba sukurkite ją savo.
Pokalbių programa su „Vue“.
Kitas puikus projektas, kurį galite padaryti, yra sukurti pokalbių programą naudojant mano mėgstamą „JavaScript“ biblioteką: „VueJS“. Programa atrodys maždaug taip:
Ką išmoksi
Šioje pamokoje sužinosite, kaip sukurti „Vue“ programą nuo nulio – kurti komponentus, tvarkyti būseną, kurti maršrutus, prisijungti prie trečiųjų šalių paslaugų ir net tvarkyti autentifikavimą.
Technika ir funkcijos
- Vue
- „Vuex“
- Vue maršrutizatorius
- Viu CLI
- Stumtuvas
- CSS
Tai tikrai puikus projektas norint pradėti dirbti su „Vue“ arba patobulinti turimus įgūdžius, kad 2020 m. tu gali rasti .
Gražių orų programa su Angular 8
Šis pavyzdys padės sukurti nuostabią orų programą naudojant Angular 8:
Ką išmoksi
Šis projektas išmokys jus vertingų įgūdžių kuriant programas nuo nulio – nuo projektavimo iki kūrimo ir iki diegimui paruoštos programos.
Technika ir funkcijos
- Kampinis 8
- "Firebase"
- Serverio pusės atvaizdavimas
- CSS su tinkleliu ir „Flexbox“.
- Patogus mobiliesiems ir prisitaikantis
- Tamsus režimas
- Graži sąsaja
Šiame visa apimančiame projekte man labai patinka tai, kad dalykų nestudijuoji atskirai. Vietoj to, jūs išmoksite visą kūrimo procesą nuo projektavimo iki galutinio diegimo.
To-Do programa naudojant Svelte
„Svelte“ yra tarsi naujas vaikas pagal komponentų metodą – bent jau panašus į „React“, „Vue“ ir „Angular“. Ir tai yra vienas karščiausių naujų produktų 2020 m.
To-Do programos nebūtinai yra karščiausia tema, tačiau jos tikrai padės patobulinti savo Svelte įgūdžius. Tai atrodys taip:
Ką išmoksi
Ši pamoka parodys, kaip sukurti programą naudojant Svelte 3 nuo pradžios iki pabaigos. Naudosite komponentus, stilių ir įvykių tvarkykles
Technika ir funkcijos
- Švelnus 3
- Komponentai
- Stilius su CSS
- ES 6 sintaksė
Gerų Svelte starterių projektų nėra daug, tad radau .
El. prekybos programa naudojant Next.js
Next.js yra populiariausia sistema, skirta kurti React programas, kurios palaiko serverio pusės atvaizdavimą.
Šis projektas parodys, kaip sukurti el. prekybos programą, kuri atrodytų taip:
Ką išmoksi
Šiame projekte sužinosite, kaip kurti naudojant Next.js – kurti naujus puslapius ir komponentus, išgauti duomenis ir stilių bei įdiegti Next programą.
Technika ir funkcijos
- Kitas.js
- Komponentai ir puslapiai
- Duomenų atranka
- Stilingas
- Projekto diegimas
- SSR ir SPA
Visada puiku turėti realų pavyzdį, pvz., el. prekybos programą, kad išmoktumėte ko nors naujo. Tu gali .
Visavertis daugiakalbis tinklaraštis su Nuxt.js
Nuxt.js skirtas Vue, o Next.js skirtas React: puiki sistema serverio atvaizdavimo ir vieno puslapio programų galiai derinti
Galutinė programa, kurią galite sukurti, atrodys taip:
Ką išmoksi
Šiame pavyzdiniame projekte sužinosite, kaip sukurti visą svetainę naudojant Nuxt.js, nuo pradinės sąrankos iki galutinio diegimo.
Jis naudojasi daugeliu puikių „Nuxt“ siūlomų funkcijų, pvz., puslapių ir komponentų bei stiliaus su SCSS.
Technika ir funkcijos
- Nuxt.js
- Komponentai ir puslapiai
- Storyblock modulis
- Eglė žuvis
- Vuex valstybės valdymui
- SCSS stiliaus formavimui
- Nuxt tarpinės programinės įrangos
, kuriame yra daug puikių Nuxt.js funkcijų. Man asmeniškai patinka dirbti su „Nuxt“, todėl turėtumėte tai išbandyti, nes tai taip pat pavers jus puikiu „Vue“ kūrėju.
Tinklaraštis su Gatsby
„Gatsby“ yra puikus statinių svetainių generatorius, naudojant „React“ ir „GraphQL“. Tai yra projekto rezultatas:
Ką išmoksi
Šioje pamokoje sužinosite, kaip naudoti „Gatsby“ kuriant tinklaraštį, kurį naudosite rašydami savo straipsnius naudodami „React“ ir „GraphQL“.
Technika ir funkcijos
- Gatsby
- Reaguoti
- „GraphQL“
- Papildiniai ir temos
- MDX / Markdown
- „Bootstrap CSS“
- šablonai
Jei kada nors norėjote sukurti tinklaraštį, kaip tai padaryti naudojant React ir GraphQL.
Nesakau, kad „WordPress“ yra blogas pasirinkimas, tačiau naudodami „Gatsby“ galite sukurti didelio našumo svetaines naudodami „React“ – tai nuostabus derinys.
Tinklaraštis su Gridsome
Gridsome for Vue... Gerai, mes jau turėjome tai su Next/Nuxt.
Tačiau tas pats pasakytina apie Gridsome ir Gatsby. Abu naudoja „GraphQL“ kaip duomenų sluoksnį, tačiau „Gridsome“ naudoja „VueJS“. Tai taip pat nuostabus statinis svetainių generatorius, kuris padės sukurti puikius tinklaraščius:
Ką išmoksi
Šis projektas išmokys jus sukurti paprastą tinklaraštį, kad galėtumėte pradėti naudotis „Gridsome“, „GraphQL“ ir „Markdown“. Taip pat aprašoma, kaip įdiegti programą per „Netlify“.
Technika ir funkcijos
- Graudu
- Vue
- „GraphQL“
- Akcijos kainos
- „Netlify“
Tai tikrai nėra pati išsamiausia pamoka, tačiau ji apima pagrindines Gridsome ir .
SoundCloud panašus garso grotuvas naudojant Quasar
„Quasar“ yra dar viena „Vue“ sistema, kurią galima naudoti kuriant mobiliąsias programas. Šiame projekte sukursite garso grotuvo programą, pavyzdžiui:
Ką išmoksi
Nors kituose projektuose daugiausia dėmesio skiriama žiniatinklio programoms, šis parodys, kaip sukurti mobiliąją programą naudojant Vue ir Quasar sistemą.
„Cordova“ jau turėtų veikti su sukonfigūruota „Android Studio“ / „Xcode“. Jei ne, vadove yra nuoroda į Quasar svetainę, kurioje parodyta, kaip viską nustatyti.
Technika ir funkcijos
- kvazaras
- Vue
- Cordova
- „WaveSurfer“.
- UI komponentai
, demonstruojantis Quasar galimybes kuriant mobiliąsias programas.
Форма кредитной карты
Šauni kreditinės kortelės forma su sklandžia ir malonia mikro sąveika. Apima skaičių formatavimą, patikrinimą ir automatinį kortelės tipo aptikimą. Jis sukurtas Vue.js ir taip pat visiškai reaguoja. (Jūs galite pamatyti .)
Ką išmoksite:
- Apdorokite ir patvirtinkite formas
- Tvarkyti įvykius (pavyzdžiui, kai keičiasi laukai)
- Supraskite, kaip pateikti ir įdėti elementus puslapyje, ypač kredito kortelės informaciją, kuri rodoma formos viršuje
juostinė diagrama
Histograma yra diagrama arba grafikas, vaizduojantis kategoriškus duomenis su stačiakampėmis juostomis, kurių aukščiai arba ilgiai yra proporcingi jų nurodytoms reikšmėms.
Jie gali būti naudojami vertikaliai arba horizontaliai. Vertikali juostinė diagrama kartais vadinama linijine diagrama.
Ką išmoksite:
- Pateikite duomenis struktūrizuotu ir suprantamu būdu
- Papildomai: išmokite naudoti elementą
canvasir kaip juo piešti elementus
galite rasti pasaulio gyventojų duomenis. Jie surūšiuoti pagal metus.
Анимация сердечка Twitter
2016 m. „Twitter“ pristatė šią nuostabią animaciją savo „tweet“ žinutėms. Nuo 2019 m. ji vis dar atrodo kaip dalis, tad kodėl gi nesukūrus jos pačiam?
Ką išmoksite:
- Darbas su CSS atributu
keyframes - Manipuliuoti ir animuoti HTML elementus
- Sujunkite JavaScript, HTML ir CSS
Репозитории GitHub с функцией поиска
Čia nėra nieko įmantraus – „GitHub“ saugyklos yra tik pašlovintas sąrašas.
Tikslas yra rodyti saugyklas ir leisti vartotojui jas filtruoti. Naudokite gauti saugyklas kiekvienam vartotojui.
„GitHub“ profilio puslapis –
Ką išmoksite:
- Gaukite duomenis iš API
- Rodyti duomenis iš API
- Filtruokite ir rodykite atitinkamus kiekvienos paieškos duomenis
- Pasirenkama: jei laukiate iššūkio, naudokite , sukurta naudojant GraphQL. .
Чаты в стиле Reddit
Pokalbiai yra populiarus bendravimo būdas dėl savo paprastumo ir lengvo naudojimo. Bet kas iš tikrųjų skatina šiuolaikinius pokalbių kambarius? WebSockets!
Ką išmoksite:
- Naudokite „WebSockets“, ryšį realiuoju laiku ir duomenų atnaujinimus
- Dirbkite su vartotojo prieigos lygiais (pavyzdžiui, pokalbių kanalo savininkas turi vaidmenį
admin, ir kiti esantys kambaryje -user) - Apdorokite ir patvirtinkite formas – atminkite, kad pokalbio langas yra žinutės siuntimui
input - Kurkite ir prisijunkite prie įvairių pokalbių
- Darbas su asmeninėmis žinutėmis. Vartotojai gali kalbėtis su kitais vartotojais privačiai. Iš esmės jūs užmegsite „WebSocket“ ryšį tarp dviejų vartotojų.
Навигация в стиле Stripe
Šis naršymas unikalus yra tas, kad iššokantis konteineris transformuojamas, kad atitiktų turinį. Šis perėjimas pasižymi elegancija, palyginti su tradiciniu elgesiu atidarant ir uždarant naują iššokantįjį.
Ką išmoksite:
- Derinkite CSS animaciją su perėjimais
- Pritemdykite turinį ir pritaikykite aktyvią klasę slankiajam elementui
pacman
Sukurkite savo Pacman versiją. Tai puikus būdas sužinoti, kaip kuriami žaidimai, ir suprasti pagrindus. Naudokite „JavaScript“ sistemą, „React“ arba „Vue“.
Tu išmoksi:
- Kaip juda elementai
- Kaip nustatyti, kuriuos klavišus reikia paspausti
- Kaip nustatyti susidūrimo momentą
- Galite eiti toliau ir pridėti vaiduoklio judėjimo valdiklius
Rasite šio projekto pavyzdį GitHub
Vartotojo valdymas
Projektas GitHub
Sukūrę CRUD tipo programą, skirtą vartotojų administravimui, išmokysite kūrimo pagrindų. Tai ypač naudinga naujiems kūrėjams.
Tu išmoksi:
- Kas yra maršrutas
- Kaip tvarkyti duomenų įvedimo formas ir patikrinti, ką vartotojas įvedė
- Kaip dirbti su duomenų baze – kurti, skaityti, atnaujinti ir ištrinti veiksmus
Проверка погоды в вашем местоположении
Projektas GitHub
Jei norite kurti programas, pradėkite nuo orų programos. Šį projektą galima užbaigti naudojant „Swift“.
Be to, kad įgysite patirties kuriant programą, išmoksite:
- Kaip dirbti su API
- Kaip naudoti geografinę vietą
- Padarykite savo programą dinamiškesnę pridėdami teksto įvestį. Jame vartotojai galės įvesti savo buvimo vietą, norėdami patikrinti orus konkrečioje vietoje.
Jums reikės API. Norėdami gauti orų duomenis, naudokite OpenWeather API. Daugiau informacijos apie OpenWeather API.
Окно чата
Mano pokalbio langas veikia, atidarytas dviejuose naršyklės skirtukuose
Pokalbių lango sukūrimas yra puikus būdas pradėti naudoti lizdus. Techninės įrangos pasirinkimas yra didžiulis. Pavyzdžiui, Node.js yra tobulas.
Sužinosite, kaip veikia lizdai ir kaip juos įdiegti. Tai yra pagrindinis šio projekto privalumas.
Jei esate „Laravel“ kūrėjas, norintis dirbti su lizdais, skaitykite mano
„GitLab CI“
Jei nesate naujokas nuolatinės integracijos (CI), žaiskite su GitLab CI. Nustatykite kelias aplinkas ir pabandykite atlikti keletą bandymų. Tai nėra labai sunkus projektas, bet esu tikras, kad iš jo daug pasimokysite. Daugelis kūrėjų komandų dabar naudoja CI. Žinoti, kaip juo naudotis, yra naudinga.
Tu išmoksi:
- Kas yra GitLab CI
- Kaip sukonfigūruoti
.gitlab-ci.ymlkuri nurodo „GitLab“ vartotojui, ką daryti - Kaip įdiegti kitose aplinkose
Анализатор сайтов
Sukurkite grandiklį, kuris analizuoja svetainių semantiką ir sukuria jų įvertinimą. Pavyzdžiui, galite patikrinti, ar vaizduose nėra alt žymų. Arba patikrinkite, ar puslapyje yra SEO metažymų. Grandiklis gali būti sukurtas be vartotojo sąsajos.
Tu išmoksi:
- Kaip veikia grandiklis?
- Kaip sukurti DOM parinkiklius
- Kaip parašyti algoritmą
- Jei nenorite sustoti, sukurkite vartotojo sąsają. Taip pat galite sukurti ataskaitą apie kiekvieną tikrintą svetainę.
Определение настроений в социальных сетях
Sentimentų aptikimas socialinėje žiniasklaidoje yra puikus būdas susipažinti su mašininiu mokymusi.
Galite pradėti analizuodami tik vieną socialinį tinklą. Paprastai visi pradeda nuo Twitter.
Jei jau turite mašininio mokymosi patirties, pabandykite rinkti duomenis iš skirtingų socialinių tinklų ir juos sujungti.
Tu išmoksi:
- Kas yra mašininis mokymasis
Клон Trello
Ką išmoksite:
- Užklausų apdorojimo maršrutų organizavimas (Routing).
- Vilkite ir upuść
- Kaip sukurti naujus objektus (lentas, sąrašus, korteles).
- Įvesties duomenų apdorojimas ir tikrinimas.
- Iš kliento pusės: kaip naudotis vietine saugykla, kaip įrašyti duomenis į vietinę saugyklą, kaip nuskaityti duomenis iš vietinės saugyklos.
- Iš serverio pusės: kaip naudotis duomenų bazėmis, kaip išsaugoti duomenis duomenų bazėje, kaip nuskaityti duomenis iš duomenų bazės.
, pagamintas React+Redux.
Панель админа
Paprasta CRUD programa, puikiai tinkanti pagrindams mokytis. Mokykimės:
- Kurti vartotojus, valdyti vartotojus.
- Bendraukite su duomenų baze – kurkite, skaitykite, redaguokite, ištrinkite vartotojus.
- Įvesties patvirtinimas ir darbas su formomis.
Трекер криптовалют (нативное мобильное приложение)
Viskas: „Swift“, „Objective-C“, „React Native“, „Java“, „Kotlin“.
Pasimokykime:
- Kaip veikia vietinės programos.
- Kaip gauti duomenis iš API.
- Kaip veikia vietiniai puslapių išdėstymai.
- Kaip dirbti su mobiliaisiais simuliatoriais.
. Jei rasite ką nors geresnio, parašykite komentaruose.
Jei jus domina, tai čia .
Настроить собственный конфиг webpack с нуля
Techniškai tai nėra programa, tačiau tai labai naudinga užduotis norint suprasti, kaip žiniatinklio paketas veikia iš vidaus. Dabar tai bus ne „juodoji dėžė“, o suprantama priemonė.
reikalavimai:
- Sukompiliuokite es7 į es5 (pagrindai).
- Sukompiliuokite jsx į js arba - .vue į .js (turėsite išmokti krautuvų)
- Nustatykite žiniatinklio paketo kūrėjo serverį ir karštojo modulio įkėlimą iš naujo. („Vue-cli“ ir „create-react-app“ naudoja abu)
- Naudokite Heroku, now.sh arba Github ir sužinokite, kaip įdiegti žiniatinklio paketo projektus.
- Nustatykite savo mėgstamą pirminį procesorių, kad kompiliuotų css – scss, less, stylus.
- Sužinokite, kaip naudoti vaizdus ir SVG su žiniatinklio paketu.
Клон Hackernews
Kiekvienas Jedi privalo sukurti savo „Hackernews“.
Ko išmoksite pakeliui:
- Kaip bendrauti su hackernews API.
- Kaip sukurti vieno puslapio programą.
- Kaip įdiegti tokias funkcijas kaip komentarų peržiūra, atskiri komentarai, profiliai.
- Užklausų apdorojimo maršrutų organizavimas (Routing).
Тудушечка
Rimtai? Tudushka? Jų yra tūkstančiai. Bet patikėkite manimi, tokiam populiarumui yra priežastis.
Tudu programa yra puikus būdas įsitikinti, kad suprantate pagrindus. Pabandykite parašyti vieną programą vanilla Javascript ir vieną savo mėgstamoje sistemoje.
Mokytis:
- Kurkite naujas užduotis.
- Patikrinkite, ar laukai užpildyti.
- Filtruoti užduotis (baigtos, aktyvios, visos). Naudokite
filterиreduce. - Suprasti Javascript pagrindus.
Сортируемый drag and drop список
Labai naudinga suprasti .
Mokykimės:
- Drag and drop API
- Sukurkite turtingą vartotojo sąsają
Клон мессенджера (нативное приложение)
Suprasite, kaip veikia ir žiniatinklio, ir vietinės programos, o tai išskirs jus iš pilkosios masės.
Ką mes studijuosime:
- Interneto lizdai (momentiniai pranešimai)
- Kaip veikia vietinės programos.
- Kaip šablonai veikia vietinėse programose.
- Užklausų apdorojimo maršrutų organizavimas vietinėse programose.
Teksto redaktorius
Teksto rengyklės paskirtis – sumažinti vartotojų pastangas, bandančias konvertuoti savo formatavimą į tinkamą HTML žymėjimą. Geras teksto rengyklė leidžia vartotojams formatuoti tekstą įvairiais būdais.
Tam tikru momentu visi naudojo teksto rengyklę. Taigi kodėl gi ne ?
Клон Reddit
yra socialinių naujienų kaupimo, interneto turinio įvertinimo ir diskusijų svetainė.
„Reddit“ užima didžiąją dalį mano laiko, bet aš ir toliau dalyvauju. „Reddit“ klono kūrimas yra efektyvus būdas išmokti programuoti (tuo pačiu metu naršant „Reddit“).
Reddit suteikia jums labai turtingą. Neatmeskite jokių funkcijų ir nedarykite dalykų atsitiktinai. Realiame pasaulyje su klientais ir klientais negalite dirbti atsitiktinai arba greitai prarasite darbą.
Sumanūs klientai iš karto supras, kad darbas atliktas prastai ir susiras kitą.
Публикация пакета NPM с открытым исходным кодом
Jei rašote „Javascript“ kodą, greičiausiai naudojate paketų tvarkyklę. Paketų tvarkyklė leidžia pakartotinai naudoti esamą kodą, kurį parašė ir paskelbė kiti žmonės.
Viso paketo kūrimo ciklo supratimas suteiks labai gerą patirtį. Yra daug dalykų, kuriuos reikia žinoti skelbiant kodą. Turite galvoti apie saugumą, semantines versijas, mastelį, pavadinimų suteikimo taisykles ir priežiūrą.
Pakuotė gali būti bet kokia. Jei neturite idėjos, sukurkite savo „Lodash“ ir paskelbkite ją.
Lodash:
Kai ką nors nuveikėte internete, esate 10 % aukščiau kitų. apie atviruosius šaltinius ir paketus.
Учебный план freeCodeCamp
freeCodecamp surinko daug .
freeCodeCamp yra ne pelno siekianti organizacija. Jį sudaro interaktyvi žiniatinklio mokymosi platforma, internetinis bendruomenės forumas, pokalbių kambariai, „Medium“ leidiniai ir vietinės organizacijos, kurios ketina padaryti mokymosi žiniatinklio kūrimą prieinamą visiems.
Jei pavyks baigti visą kursą, būsite daugiau nei kvalifikuoti pirmajam darbui.
Создайте HTTP-сервер с нуля
HTTP protokolas yra vienas iš pagrindinių protokolų, per kurį turinys keliauja internete. HTTP serveriai naudojami statiniam turiniui, pvz., HTML, CSS ir JS, aptarnauti.
Gebėjimas įdiegti HTTP protokolą nuo nulio praplės jūsų žinias apie dalykų sąveiką.
Pavyzdžiui, jei naudojate NodeJ, žinote, kad Express teikia HTTP serverį.
Norėdami gauti informacijos, pažiūrėkite, ar galite:
- Nustatykite serverį nenaudodami jokių bibliotekų
- Serveris turi aptarnauti HTML, CSS ir JS turinį.
- Maršrutizatoriaus įdiegimas nuo nulio
- Stebėkite pakeitimus ir atnaujinkite serverį
Jei nežinote kodėl, naudokite ir pabandykite sukurti HTTP serverį nuo nulio.
Десктопное приложение для заметок
Mes visi užsirašome užrašus, ar ne?
Sukurkime užrašų programą. Programa turi išsaugoti pastabas ir sinchronizuoti juos su duomenų baze. Sukurkite savąją programą naudodami Electron, Swift ar bet ką, kas jums patinka ir kas tinka jūsų sistemai.
Nedvejodami derinkite tai su pirmuoju iššūkiu (teksto rengyklė).
Kaip premiją pabandykite sinchronizuoti darbalaukio versiją su žiniatinklio versija.
Подкасты (клон Overcast)
Kas neklauso podcast'ų?
Sukurkite žiniatinklio programą su šiomis funkcijomis:
- Sukurti paskyrą
- Ieškoti podcast'ų
- Įvertinkite ir užsiprenumeruokite podcast'us
- Sustabdyti ir žaisti, keisti greitį, pirmyn ir atgal funkcijas 30 sekundžių.
Pabandykite naudoti iTunes API kaip atskaitos tašką. Jei žinote kokių nors kitų šaltinių, rašykite komentaruose.
Ekrano nuotrauka
Sveiki! Šiuo metu filmuoju savo ekraną!
Sukurkite darbalaukio arba žiniatinklio programą, kuri leidžia užfiksuoti ekraną ir išsaugoti klipą kaip .gif
Čia kaip tai pasiekti.
Informacijos šaltiniai
Šaltinis: www.habr.com