Front-end dojo. նախագծեր մշակողների հմտությունները վերապատրաստելու համար (5 նոր + 43 հին)

1. Клон Notion

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

www.notion.so

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

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

Հոդվածը թարգմանվել է EDISON Software-ի աջակցությամբ, որը разрабатывает приложения и сайтыԻսկ ներդրումներ է կատարում ստարտափներում.

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

4. Клон Gifsky

Գիֆսկի конвертирует видео в GIF используя функцииառատ для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

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

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

Նշում: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

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

React Native cryptocurrency tracker

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

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

Նշում: Այստեղ GitHub example repository.

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

շերտ

www.reddit.com/r/layer

Շերտը համայնք է, որտեղ բոլորը կարող են պիքսել նկարել ընդհանուր «տախտակի» վրա: Նախնական գաղափարը ծնվել է Reddit-ում։ R/Layer համայնքը փոխաբերություն է ընդհանուր ստեղծագործության համար, որ յուրաքանչյուրը կարող է լինել ստեղծող և նպաստել ընդհանուր գործին:

Ինչ դուք կսովորեք ձեր սեփական Layer նախագիծը ստեղծելիս.

• Ինչպես է աշխատում JavaScript կտավը Իմանալը, թե ինչպես վարել կտավը, շատ ծրագրերում կարևոր հմտություն է:
• Ինչպես համակարգել օգտվողի թույլտվությունները: Յուրաքանչյուր օգտատեր կարող է նկարել մեկ պիքսել յուրաքանչյուր 15 րոպեն մեկ՝ առանց մուտք գործելու:
• Ստեղծեք թխուկների նիստեր:

Squoosh

squoosh.app

Squoosh-ը պատկերների սեղմման ծրագիր է՝ բազմաթիվ առաջադեմ տարբերակներով:

GIF 20 ՄԲ

Ստեղծելով Squoosh-ի ձեր սեփական տարբերակը՝ դուք կսովորեք.

• Ինչպես աշխատել պատկերների չափերի հետ
• Իմացեք Drag'n'Drop API-ի հիմունքները
• Հասկացեք, թե ինչպես են աշխատում API-ն և իրադարձությունների ունկնդիրները
• Ինչպես վերբեռնել և արտահանել ֆայլեր

Նշում: Պատկերի կոմպրեսորը տեղական է: Անհրաժեշտ չէ լրացուցիչ տվյալներ ուղարկել սերվերին: Դուք կարող եք ունենալ կոմպրեսորը տանը, կամ կարող եք օգտագործել այն սերվերի վրա՝ ձեր ընտրությամբ:

Հաշվիչ

Արի։ Լուրջ? Հաշվիչ? Այո, ճիշտ, հաշվիչ: Հասկանալը մաթեմատիկական գործողությունների հիմունքները և ինչպես են դրանք աշխատում միասին, կարևոր հմտություն է ձեր դիմումները պարզեցնելու համար: Վաղ թե ուշ դուք ստիպված կլինեք գործ ունենալ թվերի հետ և որքան շուտ, այնքան լավ։

jarodburchill.github.io/CalculatorReactApp

Ստեղծելով ձեր սեփական հաշվիչը՝ դուք կսովորեք.

• Աշխատեք թվերի և մաթեմատիկական գործողությունների հետ
• Պրակտիկա ունկնդիրների API-ի հետ
• Ինչպես դասավորել տարրերը, հասկանալ ոճերը

Սողուն (որոնման համակարգ)

Բոլորն օգտագործել են որոնման համակարգ, ուստի ինչու չստեղծել ձերը: Տեղեկատվության որոնման համար անհրաժեշտ են սողուններ: Բոլորն օգտագործում են դրանք ամեն օր, և այս տեխնոլոգիայի և մասնագետների պահանջարկը ժամանակի ընթացքում միայն կաճի:

Google որոնողական համակարգ

Ինչ դուք կսովորեք՝ ստեղծելով ձեր սեփական որոնողական համակարգը.

• Ինչպես են աշխատում սողունները
• Ինչպես ինդեքսավորել կայքերը և ինչպես դրանք դասակարգել ըստ վարկանիշի և հեղինակության
• Ինչպես պահել ինդեքսավորված կայքերը տվյալների բազայում և ինչպես աշխատել տվյալների բազայի հետ

Երաժշտական ​​նվագարկիչ (Spotify, Apple Music)

Բոլորը երաժշտություն են լսում, դա պարզապես մեր կյանքի անբաժանելի մասն է: Եկեք ստեղծենք երաժշտական ​​նվագարկիչ՝ ավելի լավ հասկանալու համար, թե ինչպես է աշխատում ժամանակակից երաժշտական ​​հոսքային հարթակի հիմնական մեխանիզմը:

Spotify

Ինչ դուք կսովորեք՝ ստեղծելով ձեր սեփական երաժշտական ​​հոսքային հարթակը.

• Ինչպես աշխատել API-ի հետ: օգտագործել API Spotify-ից կամ Apple Music-ից
• Ինչպես խաղալ, դադարեցնել կամ հետ վերադառնալ հաջորդ/նախորդ ուղու վրա
• Ինչպես փոխել ծավալը
• Ինչպես կառավարել օգտվողների երթուղին և բրաուզերի պատմությունը

Ֆիլմերի որոնման հավելված՝ օգտագործելով React (կեռիկներ)

Առաջին բանը, որից կարող եք սկսել, React-ի միջոցով ֆիլմերի որոնման հավելված ստեղծելն է: Ստորև ներկայացնում ենք պատկերը, թե ինչպիսին կլինի վերջնական հավելվածը.

Ի՞նչ կսովորես
Ստեղծելով այս հավելվածը՝ դուք կբարելավեք ձեր React հմտությունները՝ օգտագործելով համեմատաբար նոր Hooks API-ը: Օրինակ նախագիծը օգտագործում է React բաղադրիչներ, բազմաթիվ կեռիկներ, արտաքին API և, իհարկե, որոշ CSS ոճավորում:

Tech stack և առանձնահատկություններ

• Արձագանքեք կեռիկներով
• ստեղծել-արձագանքել-ծրագիր
• JSX
• CSS

Առանց որևէ դասի օգտագործման՝ այս նախագծերը ձեզ տալիս են կատարյալ մուտքի կետ ֆունկցիոնալ React-ում և անպայման կօգնեն ձեզ 2020 թվականին։ դու կարող ես գտնել նախագծի օրինակ այստեղ. Հետևեք հրահանգներին կամ դարձրեք այն ձեր սեփականը:

Զրույցի հավելված Vue-ի հետ

Մեկ այլ հիանալի նախագիծ, որը կարող եք անել, դա զրույցի հավելված ստեղծելն է՝ օգտագործելով իմ սիրելի JavaScript գրադարանը՝ VueJS: Հավելվածը կունենա հետևյալ տեսքը.

Ի՞նչ կսովորես
Այս ձեռնարկում դուք կսովորեք, թե ինչպես ստեղծել Vue հավելված զրոյից՝ ստեղծելով բաղադրիչներ, կառավարել վիճակը, ստեղծել երթուղիներ, միանալ երրորդ կողմի ծառայություններին և նույնիսկ կարգավորել նույնականացումը:

Tech stack և առանձնահատկություններ

• Vue
• vuex
• Vue երթուղիչ
• Vue CLI
• Pusher
• CSS

Սա իսկապես հիանալի նախագիծ է Vue-ով սկսելու կամ ձեր առկա հմտությունները բարելավելու համար՝ 2020 թվականին զարգացման մեջ մտնելու համար: դու կարող ես գտնել ձեռնարկ այստեղ.

Գեղեցիկ եղանակային հավելված Angular 8-ով

Այս օրինակը կօգնի ձեզ ստեղծել եղանակի գեղեցիկ հավելված՝ օգտագործելով Angular 8:

Ի՞նչ կսովորես
Այս նախագիծը ձեզ կսովորեցնի զրոյից հավելվածներ կառուցելու արժեքավոր հմտություններ՝ դիզայնից մինչև մշակում, մինչև տեղակայման համար պատրաստ հավելված:

Tech stack և առանձնահատկություններ

• Անկյուն 8
• Firebase- ը
• Սերվերի կողմից մատուցում
• CSS Grid-ով և Flexbox-ով
• Բջջային բարեկամական և հարմարվողականություն
• Մութ ռեժիմ
• Գեղեցիկ ինտերֆեյս

Այն, ինչ ես իսկապես սիրում եմ այս համապարփակ նախագծում, այն է, որ դուք առանձին չեք ուսումնասիրում իրերը: Փոխարենը, դուք սովորում եք զարգացման ողջ գործընթացը՝ դիզայնից մինչև վերջնական տեղակայում:

To-Do հավելված՝ օգտագործելով Svelte

Svelte-ը նման է բաղադրիչի վրա հիմնված մոտեցման նոր երեխային. առնվազն նման է React-ին, Vue-ին և Angular-ին: Եվ սա 2020 թվականի ամենաթեժ նոր ապրանքներից մեկն է:

To-Do հավելվածները պարտադիր չէ, որ ամենաթեժ թեման լինեն, բայց դա իսկապես կօգնի ձեզ կատարելագործել ձեր Svelte հմտությունները: Այն այսպիսի տեսք կունենա.

Ի՞նչ կսովորես
Այս ձեռնարկը ցույց կտա ձեզ, թե ինչպես ստեղծել հավելված Svelte 3-ի միջոցով՝ սկզբից մինչև վերջ: Դուք կօգտագործեք բաղադրիչներ, ոճավորում և իրադարձությունների մշակիչներ

Tech stack և առանձնահատկություններ

• Սվալ 3
• Բաղադրիչներ
• Styling CSS-ով
• ES 6 շարահյուսություն

Շատ լավ Svelte մեկնարկային նախագծեր չկան, այնպես որ ես գտա սա լավ տարբերակ է սկսելու համար.

Էլեկտրոնային առևտրի հավելված՝ օգտագործելով Next.js-ը

Next.js-ը React հավելվածներ ստեղծելու ամենահայտնի շրջանակն է, որոնք աջակցում են սերվերի կողմից արտապատկերում:

Այս նախագիծը ցույց կտա ձեզ, թե ինչպես ստեղծել էլեկտրոնային առևտրի հավելված, որն ունի հետևյալ տեսքը.

Ի՞նչ կսովորես
Այս նախագծում դուք կսովորեք, թե ինչպես զարգացնել Next.js-ի միջոցով՝ ստեղծել նոր էջեր և բաղադրիչներ, հանել տվյալներ և ոճավորել և տեղադրել Next հավելվածը:

Tech stack և առանձնահատկություններ

• Հաջորդ. Js
• Բաղադրիչներ և էջեր
• Տվյալների նմուշառում
• Ստիլիզացիա
• Ծրագրի տեղակայում
• ԽՍՀ և ԲՀՊՏ

Միշտ հիանալի է ունենալ իրական օրինակ, ինչպիսին է էլեկտրոնային առևտրի հավելվածը՝ նոր բան սովորելու համար: Դու կարող ես գտնել ձեռնարկը այստեղ.

Լիարժեք բազմալեզու բլոգ Nuxt.js-ի հետ

Nuxt.js-ը Vue-ի համար է, ինչն է Next.js-ը React-ի համար. հիանալի շրջանակ սերվերի կողմից մատուցման և մեկ էջանոց հավելվածների հզորությունը համատեղելու համար:
Վերջնական հավելվածը, որը կարող եք ստեղծել, կունենա հետևյալ տեսքը.

Ի՞նչ կսովորես

Այս նմուշի նախագծում դուք կսովորեք, թե ինչպես ստեղծել ամբողջական կայք՝ օգտագործելով Nuxt.js-ը՝ սկզբնական կարգավորումից մինչև վերջնական տեղակայում:

Այն օգտվում է Nuxt-ի առաջարկած շատ հիանալի հնարավորություններից, ինչպիսիք են էջերը և բաղադրիչները, ինչպես նաև ոճավորումը SCSS-ով:

Tech stack և առանձնահատկություններ

• Nuxt.js
• Բաղադրիչներ և էջեր
• Storyblock մոդուլ
• Հագաձուկ
• Vuex պետական ​​կառավարման համար
• SCSS ոճավորման համար
• Nuxt Middlewares

Սա իսկապես հիանալի նախագիծ է, որը ներառում է Nuxt.js-ի շատ հիանալի հնարավորություններ: Ես անձամբ սիրում եմ աշխատել Nuxt-ի հետ, այնպես որ դուք պետք է փորձեք այն, քանի որ այն նաև ձեզ կդարձնի հիանալի Vue մշակող:

Բլոգ Գեթսբիի հետ

Գեթսբին հիանալի ստատիկ կայքի գեներատոր է՝ օգտագործելով React և GraphQL: Սա նախագծի արդյունքն է.

Ի՞նչ կսովորես

Այս ձեռնարկում դուք կսովորեք, թե ինչպես օգտագործել Գեթսբին բլոգ ստեղծելու համար, որը կօգտագործեք ձեր սեփական հոդվածները գրելու համար՝ օգտագործելով React և GraphQL:

Tech stack և առանձնահատկություններ

• Գեթսբին
• Արձագանքել
• GraphQL
• Փլագիններ և թեմաներ
• MDX / Markdown
• Bootstrap CSS
• Templates

Եթե ​​երբևէ ցանկացել եք բլոգ բացել, սա հիանալի օրինակ է այն մասին, թե ինչպես դա անել՝ օգտագործելով React և GraphQL:

Ես չեմ ասում, որ WordPress-ը վատ ընտրություն է, բայց Գեթսբիի հետ դուք կարող եք ստեղծել բարձր արդյունավետությամբ կայքեր՝ օգտագործելով React-ը, ինչը զարմանալի համադրություն է:

Բլոգ Gridsome-ի հետ

Gridsome Vue-ի համար... Լավ, մենք արդեն ունեցել ենք սա Next/Nuxt-ի հետ:
Բայց նույնը վերաբերում է Գրիդսոմին և Գեթսբիին: Երկուսն էլ օգտագործում են GraphQL որպես իրենց տվյալների շերտ, բայց Gridsome-ն օգտագործում է VueJS: Սա նաև զարմանալի ստատիկ կայքի գեներատոր է, որը կօգնի ձեզ ստեղծել հիանալի բլոգեր.

Ի՞նչ կսովորես

Այս նախագիծը կսովորեցնի ձեզ, թե ինչպես ստեղծել պարզ բլոգ Gridsome, GraphQL և Markdown-ի հետ սկսելու համար: Այն նաև ընդգրկում է, թե ինչպես տեղադրել հավելվածը Netlify-ի միջոցով:

Tech stack և առանձնահատկություններ

• Մռայլ
• Vue
• GraphQL
• Markdown
• Netlify

Սա, իհարկե, ամենաընդգրկուն ձեռնարկը չէ, բայց այն ներառում է Gridsome և Markdown-ը կարող է լավ մեկնարկային կետ լինել.

SoundCloud-ի նման աուդիո նվագարկիչ՝ օգտագործելով Quasar

Quasar-ը մեկ այլ Vue շրջանակ է, որը կարող է օգտագործվել բջջային հավելվածներ ստեղծելու համար: Այս նախագծում դուք կստեղծեք աուդիո նվագարկիչի հավելված, օրինակ.

Ի՞նչ կսովորես

Մինչ մյուս նախագծերը հիմնականում կենտրոնանում են վեբ հավելվածների վրա, այս մեկը ձեզ ցույց կտա, թե ինչպես ստեղծել բջջային հավելված՝ օգտագործելով Vue-ն և Quasar Framework-ը:
Դուք արդեն պետք է ունենաք, որ Cordova-ն աշխատում է Android Studio/Xcode-ով կազմաձևված: Եթե ​​ոչ, ձեռնարկը ունի հղում դեպի Quasar կայքը, որտեղ նրանք ցույց են տալիս, թե ինչպես կարելի է կարգավորել ամեն ինչ:

Tech stack և առանձնահատկություններ

• Quasar
• Vue
• Կորդովա
• WaveSurfer
• UI բաղադրիչներ

Փոքր նախագիծ, ցուցադրելով Quasar-ի կարողությունները բջջային հավելվածներ ստեղծելու համար։

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

Վարկային քարտի հիանալի ձև՝ հարթ և հաճելի միկրո-փոխազդեցություններով: Ներառում է թվերի ձևաչափում, ստուգում և քարտի տեսակի ավտոմատ հայտնաբերում: Այն կառուցված է Vue.js-ի վրա և նաև լիովին արձագանքող է: (Դու կարող ես տեսնել այստեղ.)

վարկային քարտ-ձև

Ինչ կսովորեք.

• Ձևաթղթերի մշակում և վավերացում
• Կառավարել իրադարձությունները (օրինակ, երբ դաշտերը փոխվում են)
• Հասկացեք, թե ինչպես ցուցադրել և տեղադրել տարրեր էջում, հատկապես կրեդիտ քարտի տեղեկությունները, որոնք հայտնվում են ձևի վերևում

Բար գրաֆիկ

Հիստոգրամը գծապատկեր կամ գրաֆիկ է, որը ներկայացնում է դասակարգային տվյալներ ուղղանկյուն ձողերով, որոնց բարձրությունը կամ երկարությունը համաչափ է իրենց ներկայացվող արժեքներին:

Նրանք կարող են կիրառվել ուղղահայաց կամ հորիզոնական: Ուղղահայաց գծապատկերը երբեմն կոչվում է գծային գծապատկեր:

Ինչ կսովորեք.

• Ցուցադրել տվյալները կառուցվածքային և հասկանալի ձևով
• Լրացուցիչ. Իմացեք, թե ինչպես օգտագործել տարրը canvas և ինչպես նկարել տարրեր դրա հետ

Այստեղ դուք կարող եք գտնել աշխարհի բնակչության տվյալները: Դրանք դասավորված են ըստ տարիների։

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

Դեռևս 2016 թվականին Twitter-ը ներկայացրեց այս զարմանալի անիմացիան իր թվիթների համար։ 2019 թվականի դրությամբ այն դեռևս մաս է թվում, ուստի ինչու՞ ինքներդ չստեղծել մեկը:

Ինչ կսովորեք.

• Աշխատեք CSS հատկանիշով keyframes
• Շահարկել և շարժել HTML տարրերը
• Միավորել JavaScript-ը, HTML-ը և CSS-ը

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

Այստեղ ոչ մի շքեղ բան չկա. GitHub-ի պահոցները պարզապես փառաբանված ցուցակ են:
Նպատակն է ցուցադրել պահեստները և թույլ տալ օգտվողին զտել դրանք: Օգտագործեք պաշտոնական GitHub API յուրաքանչյուր օգտագործողի համար պահեստներ ստանալու համար:

GitHub պրոֆիլի էջ - github.com/indreklasn

Ինչ կսովորեք.

• Ստացեք տվյալներ API-ից
• Ցուցադրել տվյալները API-ից
• Զտել և ցուցադրել համապատասխան տվյալներ յուրաքանչյուր որոնման համար
• Լրացուցիչ. Եթե դուք պատրաստ եք մարտահրավերի, օգտագործեք API v4, կառուցված GraphQL-ի միջոցով: Եթե ​​ցանկանում եք սովորել GraphQL, գնացեք իմ նախորդ հոդվածներից մեկը.

Чаты в стиле Reddit

Չաթերը հաղորդակցման հանրաճանաչ միջոց են՝ շնորհիվ իրենց պարզության և օգտագործման հեշտության: Բայց ի՞նչն է իրականում վառում ժամանակակից զրուցարանները: WebSockets!

Ինչ կսովորեք.

• Օգտագործեք WebSockets, իրական ժամանակի հաղորդակցություն և տվյալների թարմացումներ
• Աշխատեք օգտատերերի մուտքի մակարդակների հետ (օրինակ, զրույցի ալիքի սեփականատերը դեր ունի adminև սենյակում գտնվող մյուսները - user)
• Ձևաթղթերի մշակում և վավերացում. հիշեք, հաղորդագրություն ուղարկելու զրույցի պատուհանն է input
• Ստեղծեք և միացեք տարբեր զրույցներին
• Աշխատեք անձնական հաղորդագրությունների հետ: Օգտատերերը կարող են առանձին զրուցել այլ օգտատերերի հետ: Ըստ էության, դուք կստեղծեք WebSocket կապ երկու օգտվողների միջև:

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

Այս նավիգացիան յուրահատուկ է դարձնում այն, որ popover կոնտեյները փոխակերպվում է բովանդակությանը համապատասխանելու համար: Այս անցումը նրբագեղություն ունի՝ համեմատած նոր պոպովերի բացման և փակման ավանդական վարքագծի հետ:

Ինչ կսովորեք.

• Միավորել CSS անիմացիաները անցումներով
• Պղտորել բովանդակությունը և կիրառել ակտիվ դասը լողացող տարրի վրա

Pacman

Ստեղծեք Pacman-ի ձեր սեփական տարբերակը: Սա հիանալի միջոց է պատկերացում կազմելու, թե ինչպես են խաղերը մշակվում և հասկանալու հիմունքները: Օգտագործեք JavaScript շրջանակ, React կամ Vue:

Դուք կսովորեք:

• Ինչպես են շարժվում տարրերը
• Ինչպես որոշել, թե որ ստեղները սեղմել
• Ինչպես որոշել բախման պահը
• Դուք կարող եք ավելի հեռու գնալ և ավելացնել ուրվականների շարժման կառավարումը

Դուք կգտնեք այս նախագծի օրինակը պահոցում GitHub

օգտագործողների կառավարում

Ծրագիր պահոցում GitHub

Օգտագործողի ադմինիստրացիայի համար CRUD տիպի հավելված ստեղծելը ձեզ կսովորեցնի զարգացման հիմունքները: Սա հատկապես օգտակար է նոր մշակողների համար:

Դուք կսովորեք:

• Ինչ է երթուղավորումը
• Ինչպես կարգավորել տվյալների մուտքագրման ձևերը և ստուգել, ​​թե ինչ է մուտքագրել օգտվողը
• Ինչպես աշխատել տվյալների բազայի հետ՝ ստեղծել, կարդալ, թարմացնել և ջնջել գործողություններ

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

Ծրագիր պահոցում GitHub

Եթե ​​ցանկանում եք ստեղծել հավելվածներ, սկսեք եղանակային հավելվածից: Այս նախագիծը կարող է ավարտվել Swift-ի միջոցով:

Հավելված ստեղծելու փորձ ձեռք բերելուց բացի, դուք կսովորեք.

• Ինչպես աշխատել API-ի հետ
• Ինչպես օգտագործել աշխարհագրական դիրքը
• Դարձրեք ձեր հավելվածն ավելի դինամիկ՝ ավելացնելով տեքստային մուտքագրում: Դրանում օգտատերերը կկարողանան մուտքագրել իրենց գտնվելու վայրը՝ որոշակի վայրում եղանակը ստուգելու համար։

Ձեզ անհրաժեշտ կլինի API: Եղանակի տվյալներ ստանալու համար օգտագործեք OpenWeather API-ը: Լրացուցիչ տեղեկություններ OpenWeather API-ի մասին այստեղ.

Окно чата

Իմ զրույցի պատուհանը գործում է, բացեք զննարկչի երկու ներդիրում

Զրույցի պատուհանի ստեղծումը կատարյալ միջոց է վարդակների հետ սկսելու համար: Tech stack-ի ընտրությունը հսկայական է: Node.js-ը, օրինակ, կատարյալ է:

Դուք կսովորեք, թե ինչպես են աշխատում վարդակները և ինչպես դրանք իրականացնել: Սա այս նախագծի հիմնական առավելությունն է։

Եթե ​​դուք Laravel ծրագրավորող եք, ով ցանկանում է աշխատել վարդակների հետ, կարդացեք իմ статью

GitLab CI

Աղբյուր

Եթե ​​դուք նոր եք շարունակական ինտեգրման մեջ (CI), խաղացեք GitLab CI-ի հետ: Ստեղծեք մի քանի միջավայր և փորձեք կատարել մի քանի թեստ: Դա այնքան էլ բարդ նախագիծ չէ, բայց ես վստահ եմ, որ դուք շատ բան կսովորեք դրանից: Շատ մշակող թիմեր այժմ օգտագործում են CI: Իմանալով, թե ինչպես օգտագործել այն, օգտակար է:

Դուք կսովորեք:

• Ինչ է GitLab CI-ն
• Ինչպես կարգավորել .gitlab-ci.ymlորը GitLab օգտագործողին ասում է, թե ինչ անել
• Ինչպես տեղակայվել այլ միջավայրերում

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

Պատրաստեք քերիչ, որը վերլուծում է կայքերի իմաստաբանությունը և ստեղծում դրանց վարկանիշը: Օրինակ, դուք կարող եք ստուգել պատկերների մեջ բացակայող alt պիտակները: Կամ ստուգեք, արդյոք էջն ունի SEO մետա պիտակներ: Քերիչը կարող է ստեղծվել առանց օգտագործողի միջերեսի:

Դուք կսովորեք:

• Ինչպե՞ս է աշխատում քերիչը:
• Ինչպես ստեղծել DOM ընտրիչներ
• Ինչպես գրել ալգորիթմ
• Եթե ​​դուք չեք ցանկանում կանգ առնել այնտեղ, ստեղծեք օգտվողի միջերես: Դուք կարող եք նաև հաշվետվություն ստեղծել ձեր ստուգած յուրաքանչյուր կայքում:

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

Աղբյուր

Սոցիալական ցանցերում զգացմունքների հայտնաբերումը հիանալի միջոց է մեքենայական ուսուցմանը ծանոթանալու համար:

Դուք կարող եք սկսել միայն մեկ սոցիալական ցանցի վերլուծությունից: Բոլորը սովորաբար սկսում են Twitter-ից:

Եթե ​​արդեն ունեք մեքենայական ուսուցման փորձ, փորձեք տվյալներ հավաքել տարբեր սոցիալական ցանցերից և համատեղել դրանք։

Դուք կսովորեք:

• Ինչ է մեքենայական ուսուցումը

Клон Trello

Trello կլոն Ինդրեկ Լասնից:

Ինչ դուք կսովորեք.

• Հարցումների մշակման երթուղիների կազմակերպում (Routing).
• Քաշել և թողնել:
• Ինչպես ստեղծել նոր օբյեկտներ (տախտակներ, ցուցակներ, քարտեր):
• Մուտքային տվյալների մշակում և ստուգում:
• Հաճախորդի կողմից. ինչպես օգտագործել տեղական պահեստը, ինչպես պահպանել տվյալները տեղական պահեստում, ինչպես կարդալ տվյալները տեղական պահեստից:
• Սերվերի կողմից. ինչպես օգտագործել տվյալների բազաները, ինչպես պահպանել տվյալները տվյալների բազայում, ինչպես կարդալ տվյալները տվյալների բազայից:

Ահա պահեստի օրինակ, պատրաստված React+Redux-ում:

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

Github պահեստ.

Պարզ CRUD հավելված, որն իդեալական է հիմունքները սովորելու համար: Եկեք սովորենք.

• Ստեղծեք օգտվողներ, կառավարեք օգտվողներին:
• Շփվել տվյալների բազայի հետ՝ ստեղծել, կարդալ, խմբագրել, ջնջել օգտվողներին:
• Ներածման վավերացում և ձևաթղթերի հետ աշխատելը:

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

Github պահեստ.

Ամեն ինչ՝ Swift, Objective-C, React Native, Java, Kotlin:

Եկեք ուսումնասիրենք.

• Ինչպես են աշխատում հայրենի հավելվածները:
• Ինչպես ստանալ տվյալներ API-ից:
• Ինչպես են աշխատում հայրենի էջի դասավորությունները:
• Ինչպես աշխատել բջջային սիմուլյատորների հետ:

Փորձեք այս API-ն. Եթե ​​ավելի լավ բան եք գտնում, գրեք մեկնաբանություններում։

Եթե ​​դուք հետաքրքրված եք, ահա այն ահա ձեռնարկը.

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

Տեխնիկապես սա հավելված չէ, բայց շատ օգտակար խնդիր է հասկանալ, թե ինչպես է վեբ փաթեթը աշխատում ներսից: Այժմ դա կլինի ոչ թե «սև արկղ», այլ հասկանալի գործիք։

պահանջները:

• Կազմել es7-ը es5-ին (հիմքերը):
• Կազմել jsx-ը js - կամ - .vue to .js (դուք պետք է սովորեք բեռնիչներ)
• Կարգավորեք webpack մշակողի սերվերը և տաք մոդուլի վերաբեռնումը: (vue-cli և create-react-app օգտագործում են երկուսն էլ)
• Օգտագործեք Heroku-ն, now.sh-ը կամ Github-ը, սովորեք, թե ինչպես տեղադրել webpack նախագծերը:
• Ստեղծեք ձեր նախընտրած նախապրոցեսորը՝ css-ը կազմելու համար՝ scss, less, stylus:
• Իմացեք, թե ինչպես օգտագործել պատկերներ և svgs վեբ փաթեթով:

Սա զարմանալի ռեսուրս է լրիվ սկսնակների համար:

Клон Hackernews

Յուրաքանչյուր ջեդայից պահանջվում է ստեղծել իր սեփական Hackernews-ը:

Այն, ինչ դուք կսովորեք ճանապարհին.

• Ինչպես շփվել hackernews API-ի հետ:
• Ինչպես ստեղծել մեկ էջի հավելված:
• Ինչպես իրականացնել այնպիսի գործառույթներ, ինչպիսիք են մեկնաբանությունները, անհատական ​​մեկնաբանությունները, պրոֆիլները դիտելը:
• Հարցումների մշակման երթուղիների կազմակերպում (Routing).

Тудушечка

TodoMVC.

Լուրջ? Տուդուշկա? Դրանք հազարավոր են։ Բայց հավատացեք, որ այս ժողովրդականությունը պատճառ ունի.
Tudu հավելվածը հիանալի միջոց է համոզվելու, որ դուք հասկանում եք հիմունքները: Փորձեք գրել մեկ հավելված վանիլային Javascript-ով և մեկը՝ ձեր նախընտրած շրջանակում:

Իմացեք.

• Ստեղծեք նոր առաջադրանքներ:
• Ստուգեք, որ դաշտերը լրացված են:
• Զտել առաջադրանքները (ավարտված, ակտիվ, բոլորը): Օգտագործեք filter и reduce.
• Հասկանալ Javascript-ի հիմունքները:

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

Github պահեստ.

Շատ օգտակար է հասկանալու համար քաշել և թողնել api-ն.

Եկեք սովորենք.

• Քաշեք և թողեք API-ն
• Ստեղծեք հարուստ միջերեսներ

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

Դուք կհասկանաք, թե ինչպես են աշխատում և՛ վեբ հավելվածները, և՛ հայրենական հավելվածները, որոնք ձեզ կառանձնացնեն գորշ զանգվածից։

Այն, ինչ մենք կուսումնասիրենք.

• Վեբ վարդակներ (ակնթարթային հաղորդագրություններ)
• Ինչպես են աշխատում հայրենի հավելվածները:
• Ինչպես են կաղապարները աշխատում բնիկ հավելվածներում:
• Ներքին հավելվածներում հարցումների մշակման երթուղիների կազմակերպում:

Տեքստի խմբագիր

Տեքստային խմբագրիչի նպատակն է նվազեցնել օգտատերերի ջանքերը, որոնք փորձում են իրենց ձևաչափումը վերածել վավեր HTML նշագրման: Լավ տեքստային խմբագրիչը թույլ է տալիս օգտվողներին ձևաչափել տեքստը տարբեր ձևերով:

Ինչ-որ պահի բոլորն օգտագործել են տեքստային խմբագրիչ: Ուրեմն ինչու ոչ ստեղծեք այն ինքներդ?

Клон Reddit

Փակցնելուց սոցիալական նորությունների հավաքագրման, վեբ բովանդակության վարկանիշի և քննարկման կայք է:

Reddit-ը խլում է իմ ժամանակի մեծ մասը, բայց ես շարունակում եմ շփվել դրա վրա: Reddit-ի կլոնի ստեղծումը ծրագրավորում սովորելու արդյունավետ միջոց է (միաժամանակ Reddit-ը զննարկելիս):

Reddit-ը ձեզ տրամադրում է շատ հարուստ API. Բաց մի թողեք որևէ հատկանիշ և մի արեք պատահական բաներ: Հաճախորդների և հաճախորդների հետ իրական աշխարհում դուք չեք կարող պատահաբար աշխատել, այլապես արագ կկորցնեք ձեր աշխատանքը:

Խելացի հաճախորդները անմիջապես կհասկանան, որ աշխատանքը վատ է արվում և կգտնեն մեկ ուրիշին:

Reddit API

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

Եթե ​​դուք գրում եք Javascript-ի կոդ, հավանական է, որ դուք օգտագործում եք փաթեթի կառավարիչ: Փաթեթի կառավարիչը թույլ է տալիս նորից օգտագործել գոյություն ունեցող ծածկագիրը, որը այլ մարդիկ գրել և հրապարակել են:

Փաթեթի ամբողջական զարգացման ցիկլը հասկանալը շատ լավ փորձ կապահովի: Շատ բաներ կան, որ դուք պետք է իմանաք կոդը հրապարակելիս: Դուք պետք է մտածեք անվտանգության, իմաստային տարբերակման, մասշտաբայնության, անվանման կոնվենցիաների և պահպանման մասին:

Փաթեթը կարող է լինել ցանկացած: Եթե ​​գաղափար չունեք, ստեղծեք ձեր սեփական Lodash-ը և հրապարակեք այն:

Լոդաշ. lodash.com

Առցանց ինչ-որ բան ունենալը ձեզ 10%-ով ավելի է դասում մյուսներից: Ահա մի քանի օգտակար ռեսուրսներ բաց աղբյուրների և փաթեթների մասին։

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

FCC ուսումնական ծրագիր

freeCodecamp-ը շատ բան է հավաքել ծրագրավորման համապարփակ դասընթաց.

freeCodeCamp-ը շահույթ չհետապնդող կազմակերպություն է: Այն բաղկացած է ինտերակտիվ վեբ վրա հիմնված ուսուցման հարթակից, առցանց համայնքային ֆորումից, զրուցարաններից, Միջին հրապարակումներից և տեղական կազմակերպություններից, որոնք մտադիր են ուսուցման վեբ մշակումը հասանելի դարձնել բոլորին:

Դուք ավելի քան որակավորված կլինեք ձեր առաջին աշխատանքի համար, եթե կարողանաք ավարտել ամբողջ դասընթացը:

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

HTTP արձանագրությունը հիմնական արձանագրություններից մեկն է, որի միջոցով բովանդակությունը շարժվում է ինտերնետում: HTTP սերվերներն օգտագործվում են ստատիկ բովանդակություն սպասարկելու համար, ինչպիսիք են HTML, CSS և JS:

HTTP արձանագրությունը զրոյից ներդնելու հնարավորությունը կընդլայնի ձեր գիտելիքներն այն մասին, թե ինչպես են փոխազդում:

Օրինակ, եթե դուք օգտագործում եք NodeJs, ապա դուք գիտեք, որ Express-ը տրամադրում է HTTP սերվեր:

Հղման համար տեսեք, արդյոք կարող եք.

• Ստեղծեք սերվեր՝ առանց որևէ գրադարան օգտագործելու
• Սերվերը պետք է սպասարկի HTML, CSS և JS բովանդակություն:
• Երթուղիչի ներդրում զրոյից
• Վերահսկել փոփոխությունները և թարմացնել սերվերը

Եթե ​​չգիտեք, թե ինչու, օգտագործեք Գնա լանգ և փորձեք ստեղծել HTTP սերվեր Թեյատուփ զրոյից.

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

Բոլորս էլ նշումներ ենք անում, չէ՞:

Եկեք ստեղծենք նշումների հավելված: Հավելվածը պետք է պահպանի նշումները և համաժամացնի դրանք տվյալների բազայի հետ: Ստեղծեք բնօրինակ հավելված՝ օգտագործելով Electron-ը, Swift-ը կամ այն, ինչ ձեզ դուր է գալիս, և ինչն է աշխատում ձեր համակարգի համար:

Ազատորեն համադրեք սա առաջին մարտահրավերի հետ (տեքստային խմբագիր):

Որպես բոնուս՝ փորձեք համաժամացնել ձեր աշխատասեղանի տարբերակը վեբ տարբերակի հետ:

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

Ո՞վ չի լսում փոդքասթներ:

Ստեղծեք վեբ հավելված հետևյալ ֆունկցիոնալությամբ.

• Ստեղծել հաշիվ
• Որոնել Podcasts
• Գնահատեք և բաժանորդագրվեք փոդքասթներին
• Կանգնեք և խաղացեք, փոխեք արագությունը, առաջ և հետադարձ գործառույթները 30 վայրկյան:

Փորձեք օգտագործել iTunes API-ն որպես ելակետ: Եթե ​​գիտեք որևէ այլ ռեսուրս, խնդրում ենք տեղադրել մեկնաբանություններում:

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

Էկրանի նկարահանում

Բարեւ Ձեզ! Ես նկարահանում եմ իմ էկրանը հենց հիմա:

Ստեղծեք աշխատասեղան կամ վեբ հավելված, որը թույլ է տալիս լուսանկարել ձեր էկրանը և պահել հոլովակը որպես .gif

Այստեղ որոշ խորհուրդներինչպես հասնել դրան:

Տեղեկատվության աղբյուրներ

• Մշակողի համար ևս 5 համարձակ վերապատրաստման նախագծեր (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 նախագիծ՝ բարելավելու ձեր Front-End հմտությունները
• Վեց առաջադրանք Front-End ծրագրավորողի համար
• Զվարճալի պրակտիկա ծրագրավորողի համար
• 8 ուսումնական նախագիծ
• Նախագծերի ևս մեկ ցուցակ, որոնց վրա պետք է զբաղվել

Source: www.habr.com