Front-end dojo: projekte om ontwikkelaarvaardighede op te lei (5 nuwe + 43 oud)

1. Клон Notion

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

www.notion.so

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

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

Die artikel is vertaal met die ondersteuning van EDISON Software, wat разрабатывает приложения и сайтыEn belê in nuwe ondernemings.

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

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Let wel: Hier GitHub example repository.

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

laag

www.reddit.com/r/layer

Laag is 'n gemeenskap waar almal 'n pixel op 'n gemeenskaplike "bord" kan teken. Die oorspronklike idee is op Reddit gebore. Die r/laag-gemeenskap is 'n metafoor vir mede-skepping, dat almal 'n skepper kan wees en bydra tot 'n gemeenskaplike saak.

Wat jy sal leer wanneer jy jou Layer-projek skep:

• Hoe JavaScript-doek werk, om te weet hoe om doek te gebruik, is 'n kritieke vaardigheid in baie toepassings.
• Hoe om gebruikerstoestemmings (gebruikerstoestemmings) te koördineer. Elke gebruiker kan elke 15 minute een pixel teken sonder om aan te meld.
• Skep koekiesessies.

Squoosh

squoosh.app

Squoosh is 'n beeldkompressie-app met baie gevorderde opsies.

Gif 20 mb

Deur jou eie weergawe van Squoosh te skep, sal jy leer:

• Hoe om met beeldgroottes te werk
• Bemeester die basiese beginsels van die Drag'n'Drop API
• Verstaan ​​hoe API's en gebeurtenisluisteraars werk
• Hoe om lêers op te laai en uit te voer

Let wel: die beeldkompressor is plaaslik. Dit is nie nodig om bykomende data na die bediener te stuur nie. Jy kan 'n kompressor op jou eie hê, of jy kan op 'n bediener, van jou keuse.

sakrekenaar

Komaan? Ernstig? Sakrekenaar? Ja, dit is reg, 'n sakrekenaar. Om die basiese beginsels van wiskundige bewerkings te verstaan ​​en hoe dit saamwerk, is 'n kritieke vaardigheid om jou toepassings te vereenvoudig. Vroeër of later sal jy met getalle te doen kry en hoe gouer hoe beter.

jarodburchill.github.io/CalculatorReactApp

Deur jou eie sakrekenaar te skep, sal jy leer:

• Werk met getalle en wiskundebewerkings
• Oefen met die gebeurtenis luisteraars API
• Hoe om elemente te rangskik, verstaan ​​die style

Kruiper (soekenjin)

Almal het 'n soekenjin gebruik, so hoekom skep jy nie jou eie nie? Kruipers word gebruik om inligting te soek. Almal gebruik dit elke dag en die vraag na hierdie tegnologie en spesialiste sal mettertyd net groei.

Google soekenjin

Wat sal jy leer deur jou eie soekenjin te skep:

• Hoe crawlers werk
• Hoe om webwerwe te indekseer en hoe om hulle volgens gradering en reputasie te rangskik
• Hoe om geïndekseerde werwe in 'n databasis te stoor en hoe om met 'n databasis te werk

Musiekspeler (Spotify, Apple Music)

Almal luister na musiek – dit is net 'n integrale deel van ons lewe. Kom ons bou 'n musiekspeler om beter te verstaan ​​hoe die basiese meganika van 'n moderne musiekstroomplatform werk.

Spotify

Wat jy sal leer deur jou eie musiekstroomplatform te skep:

• Hoe om met die API te werk. gebruik API's van Spotify of Apple Music
• Hoe om te speel, stop of terugspoel na die volgende/vorige liedjie
• Hoe om die volume te verander
• Hoe om gebruikersroetering en blaaiergeskiedenis te bestuur

Flieksoek-app met React (met hake)

Die eerste ding waarmee jy kan begin, is om 'n flieksoek-app met React te bou. Hieronder is 'n prent van hoe die finale toepassing sal lyk:

Wat sal jy leer
Deur hierdie toepassing te bou, sal u u React-vaardighede verbeter deur die relatief nuwe Hooks API te gebruik. Die voorbeeldprojek gebruik React-komponente, baie hake, 'n eksterne API, en natuurlik 'n paar CSS-stilering.

Tegniese stapel en kenmerke

• Reageer met hake
• skep-reageer-app
• jsx
• CSS

Sonder om enige klasse te gebruik, gee hierdie projekte jou die perfekte toegangspunt tot funksionele React en sal jou beslis in 2020 help. jy kan vind voorbeeldprojek hier. Volg die instruksies of maak dit jou eie.

Klets-app met Vue

Nog 'n wonderlike projek vir jou is om 'n kletstoepassing te bou deur my gunsteling JavaScript-biblioteek te gebruik: VueJS. Die toepassing sal iets soos volg lyk:

Wat sal jy leer
In hierdie tutoriaal sal jy leer hoe om 'n Vue-toepassing van nuuts af te maak - skep komponente, hanteer state, skep roetes, koppel aan derdeparty-dienste, en hanteer selfs stawing.

Tegniese stapel en kenmerke

• Vue
• vuex
• Vue router
• Kyk CLI
• Pusher
• CSS

Dit is 'n wonderlike projek om met Vue te begin of om jou bestaande vaardighede te verbeter om in 2020 in ontwikkeling te kom. jy kan vind tutoriaal hier.

Pragtige weer-app met Angular 8

Hierdie voorbeeld sal jou help om 'n pragtige weer-app te bou deur Angular 8 te gebruik:

Wat sal jy leer
Hierdie projek sal jou waardevolle vaardighede leer in die bou van toepassings van nuuts af - van ontwerp tot ontwikkeling, tot by 'n gereed-vir-ontplooiing toepassing.

Tegniese stapel en kenmerke

• Hoek 8
• Firebase
• Bedienerkant-weergawe
• CSS met Grid en Flexbox
• Mobiele vriendelik en aanpasbaarheid
• Donker modus
• Pragtige koppelvlak

Wat ek regtig baie van hierdie omvattende projek hou, is dat jy dinge nie in isolasie bestudeer nie. In plaas daarvan leer jy die hele ontwikkelingsproses van ontwerp tot finale ontplooiing.

To-Do app met Svelte

Svelte is soos die nuwe kind in die komponentbenadering - ten minste soortgelyk aan React, Vue en Angular. En dit is een van die warmste nuwe produkte vir 2020.

Doen-toepassings is nie noodwendig die gewildste onderwerp nie, maar hulle sal jou regtig help om jou Svelte-vaardighede te slyp. Dit sal so lyk:

Wat sal jy leer
Hierdie handleiding sal jou wys hoe om 'n toepassing met Svelte 3 te skep, van begin tot einde. Jy sal komponente, stilering en gebeurtenishanteerders gebruik

Tegniese stapel en kenmerke

• Snel 3
• Komponente
• Stileer met CSS
• Sintaksis ES6

Daar is nie baie goeie Svelte-beginnersprojekte nie, so ek het gevind dit is 'n goeie plek om te begin.

E-handelsprogram met Next.js

Next.js is die gewildste raamwerk vir die bou van React-toepassings wat bedienerkant-weergawe uit die boks ondersteun.

Hierdie projek sal jou wys hoe om 'n e-handelsprogram te skep wat soos volg lyk:

Wat sal jy leer
In hierdie projek sal jy leer hoe om met Next.js te ontwikkel—skep nuwe bladsye en komponente, herwin data, en styl en ontplooi 'n Next-toepassing.

Tegniese stapel en kenmerke

• Volgende.js
• Komponente en bladsye
• Datasteekproefneming
• Stylisering
• Projek-ontplooiing
• SSR en SPA

Dit is altyd wonderlik om 'n werklike voorbeeld soos 'n e-handel-toepassing te hê om iets nuuts te leer. Jy kan vind tutoriaal hier.

Volledige veeltalige blog met Nuxt.js

Nuxt.js is vir Vue, soos Next.js is vir React: 'n wonderlike raamwerk vir die kombinasie van bediener-kant-weergawe en enkelbladsy-toepassings
Die laaste toepassing wat jy kan skep, sal soos volg lyk:

Wat sal jy leer

In hierdie voorbeeldprojek sal jy leer hoe om 'n volledige webwerf met Nuxt.js te bou, van aanvanklike opstelling tot finale ontplooiing.

Dit maak gebruik van baie van die oulike kenmerke wat Nuxt bied, soos bladsye en komponente, en stilering met SCSS.

Tegniese stapel en kenmerke

• Nuxt.js
• Komponente en bladsye
• storieblok module
• Mengsels
• Vuex vir staatsbestuur
• SCSS vir stilering
• Nuxt middelware

Dit is 'n baie oulike projek., wat baie van die wonderlike kenmerke van Nuxt.js insluit. Ek persoonlik hou daarvan om met Nuxt te werk, so jy moet dit probeer, want dit sal jou ook 'n wonderlike Vue-ontwikkelaar maak.

Blog met Gatsby

Gatsby is 'n wonderlike statiese werfgenerator wat React en GraphQL gebruik. Dit is die resultaat van die projek:

Wat sal jy leer

In hierdie tutoriaal sal jy leer hoe om Gatsby te gebruik om 'n blog te skep wat jy sal gebruik om jou eie artikels met React en GraphQL te skryf.

Tegniese stapel en kenmerke

• gatsby
• reageer
• Grafiek
• Inproppe en temas
• MDX/Markdown
• Bootstrap CSS
• templates

As jy ooit 'n blog wou begin, dit is 'n goeie voorbeeld hoe om dit te maak met React en GraphQL.

Ek sê nie WordPress is 'n slegte keuse nie, maar met Gatsby kan jy hoëprestasie-webwerwe bou deur React te gebruik - wat 'n wonderlike kombinasie is.

Blog met Gridsome

Gridsome vir Vue ... Goed, ons het dit reeds gehad met Next/Nuxt.
Maar dieselfde geld vir Gridsome en Gatsby. Albei gebruik GraphQL as hul datalaag, maar Gridsome gebruik VueJS. Dit is ook 'n wonderlike statiese werfgenerator om jou te help om wonderlike blogs te skep:

Wat sal jy leer

Hierdie projek sal jou leer hoe om 'n eenvoudige blog te skep om met Gridsome, GraphQL en Markdown te begin. Dit verduidelik ook hoe om 'n toepassing deur Netlify te ontplooi.

Tegniese stapel en kenmerke

• Grinsom
• Vue
• Grafiek
• Markdown
• netifiseer

Dit is beslis nie die mees volledige tutoriaal nie, maar dit dek die basiese konsepte van Gridsome en Markdown en kan 'n goeie beginpunt wees.

Oudiospeler soortgelyk aan SoundCloud met Quasar

Quasar is nog 'n Vue-raamwerk wat gebruik kan word om mobiele toepassings te bou. In hierdie projek sal jy 'n klankspeler-toepassing skep, byvoorbeeld:

Wat sal jy leer

Terwyl ander projekte hoofsaaklik op webtoepassings fokus, sal hierdie een jou wys hoe om 'n mobiele toepassing te bou met behulp van Vue en die Quasar-raamwerk.
Jy behoort reeds 'n werkende Cordova met Android Studio/Xcode opgestel te hê. Indien nie, het die handleiding 'n skakel na die Quasar webwerf waar hulle jou wys hoe om alles op te stel.

Tegniese stapel en kenmerke

• Quasar
• Vue
• Cordova
• golfsurfer
• UI-komponente

klein projek, wat Quasar se vermoëns demonstreer om mobiele toepassings te bou.

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

Koel kredietkaartvorm met gladde en mooi mikro-interaksies. Sluit nommerformatering, validering en outomatiese kaarttipe-opsporing in. Dit is gebou op Vue.js en reageer ook ten volle. (Jy kan sien hier.)

kredietkaartvorm

Wat sal jy leer:

• Verwerk en valideer vorms
• Hanteer gebeure (byvoorbeeld wanneer velde verander)
• Verstaan ​​hoe om elemente op die bladsy te vertoon en te plaas, veral kredietkaartinligting wat bo-op die vorm is

staafgrafiek

'n Staafgrafiek is 'n grafiek of grafiek wat kategoriese data voorstel met reghoekige stawe met hoogtes of lengtes wat eweredig is aan die waardes wat hulle verteenwoordig.

Hulle kan vertikaal of horisontaal toegepas word. 'n Vertikale staafgrafiek word soms 'n lyngrafiek genoem.

Wat sal jy leer:

• Vertoon data op 'n gestruktureerde en verstaanbare manier
• Opsioneel: Leer hoe om die element te gebruik canvas en hoe om elemente daarmee te teken

Hier jy kan wêreldbevolkingsdata vind. Hulle word volgens jaar gesorteer.

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

Terug in 2016 het Twitter hierdie wonderlike animasie vir hul tweets bekendgestel. Vanaf 2019 lyk dit steeds ordentlik, so hoekom skep jy nie self een nie?

Wat sal jy leer:

• Werk met CSS-kenmerk keyframes
• Manipuleer en animeer HTML-elemente
• Kombineer JavaScript, HTML en CSS

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

Daar is niks ongewoon hier nie - die GitHub-bewaarplekke is net 'n verheerlikte lys.
Die doel is om die bewaarplekke te vertoon en die gebruiker toe te laat om dit te filter. Gebruik amptelike GitHub API om bewaarplekke vir elke gebruiker te kry.

GitHub-profielbladsy github.com/indreklasn

Wat sal jy leer:

• Kry data van API
• Vertoon data vanaf API
• Filter en wys relevante data vir elke soektog
• Opsioneel: As jy gereed is om die oproep te aanvaar, gebruik API v4, geskep met behulp van GraphQL. As jy GraphQL wil leer, gaan na een van my vorige artikels.

Чаты в стиле Reddit

Geselsies is 'n gewilde manier om te kommunikeer vanweë hul eenvoud en gebruiksgemak. Maar wat is eintlik die krag van moderne kletskamers? web sockets!

Wat sal jy leer:

• Gebruik WebSockets, pas intydse kommunikasie en data-opdaterings toe
• Werk met gebruikerstoegangsvlakke (byvoorbeeld, die eienaar van 'n kletskanaal het die rol adminen ander in die kamer user)
• Verwerk en valideer vorms - onthou, die kletsboks vir die stuur van 'n boodskap is input
• Skep en sluit aan by verskillende kletse
• Werk met privaat boodskappe. Gebruikers kan privaat met ander gebruikers kommunikeer. In wese sal jy 'n WebSocket-verbinding tussen twee gebruikers tot stand bring.

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

Die uniekheid van hierdie navigasie is dat die opspringhouer transformeer om by die inhoud te pas. Daar is 'n elegansie aan hierdie oorgang in vergelyking met die tradisionele gedrag om 'n nuwe popover oop te maak en toe te maak.

Wat sal jy leer:

• Kombineer CSS-animasies met oorgange
• Skaker inhoud en pas aktiewe klas toe op drywende element

Pacman

Skep jou eie weergawe van Pacman. Dit is 'n goeie manier om 'n idee te kry van hoe speletjies ontwikkel word, om die basiese beginsels te verstaan. Gebruik 'n JavaScript-raamwerk, React of Vue.

Jy sal leer:

• Hoe elemente beweeg
• Hoe om te bepaal watter sleutels om te druk
• Hoe om die oomblik van botsing te bepaal
• Jy kan verder gaan en bewegingsbeheer vir spoke byvoeg

'n Voorbeeld van hierdie projek kan gevind word in die bewaarplek GitHub

gebruikersbestuur

Project in die bewaarplek GitHub

Die skep van 'n CRUD-tipe toepassing vir gebruikersadministrasie sal jou die basiese beginsels van ontwikkeling leer. Dit is veral nuttig vir beginner ontwikkelaars.

Jy sal leer:

• Wat is roetering
• Hoe om data-invoervorms te hanteer en te valideer wat die gebruiker ingevoer het
• Hoe om met die databasis te werk - skep, lees, werk op en skrap aksies

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

Project in die bewaarplek GitHub

As jy toepassings wil skep, begin met 'n weertoepassing. Hierdie projek kan met Swift gedoen word.

Benewens die opdoen van ervaring in die skep van 'n toepassing, sal jy leer:

• Hoe om met die API te werk
• Hoe om geoligging te gebruik
• Maak jou toepassing meer dinamies deur teksinvoer by te voeg. Daarin sal gebruikers hul ligging kan invoer om die weer op 'n spesifieke plek na te gaan.

Jy sal 'n API nodig hê. Gebruik die OpenWeather API om weerdata te kry. Meer inligting oor die OpenWeather API hier.

Окно чата

My kletsvenster in aksie, maak oop in twee blaaieroortjies

Die skep van 'n kletsvenster is die perfekte manier om met voetstukke te begin. Die keuse van tegniese stapel is groot. Node.js is byvoorbeeld wonderlik.

Jy sal leer hoe voetstukke werk en hoe om dit te implementeer. Dit is die grootste voordeel van hierdie projek.

As jy 'n Laravel-ontwikkelaar is wat met voetstukke wil werk, lees asseblief my 'n artikel

GitLab CI

Bron

As jy nuut is met deurlopende integrasie (CI), speel rond met GitLab CI. Stel 'n paar omgewings op en probeer 'n paar toetse uitvoer. Dit is nie 'n baie moeilike projek nie, maar ek is seker jy sal baie daaruit leer. Baie ontwikkelingspanne gebruik tans CI. Om te weet hoe om dit te gebruik, is nuttig.

Jy sal leer:

• Wat is GitLab CI
• Hoe om te konfigureer .gitlab-ci.ymlwat die GitLab-gebruiker vertel wat om te doen
• Hoe om na ander omgewings te ontplooi

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

Maak 'n skraper wat die semantiek van webwerwe ontleed en hul ranglys skep. Byvoorbeeld, jy kan kyk vir ontbrekende alt-tags op beelde. Of kyk of die bladsy SEO-metamerkers het. Scraper kan sonder 'n gebruikerskoppelvlak geskep word.

Jy sal leer:

• Hoe die skraper werk
• Hoe om DOM-keurders te skep
• Hoe om 'n algoritme te skryf
• As jy nie daar wil stop nie, skep 'n gebruikerskoppelvlak. Jy kan ook 'n verslag skep vir elke webwerf wat jy nagaan.

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

Bron

Die bepaling van sosiale media-sentiment is 'n goeie manier om vertroud te raak met masjienleer.

Jy kan begin deur net een sosiale netwerk te ontleed. Gewoonlik begin almal met Twitter.

As jy reeds ondervinding het met masjienleer, probeer om data van verskillende sosiale netwerke in te samel en dit te kombineer.

Jy sal leer:

• Wat is masjienleer

Клон Trello

Trello-kloon deur Indrek Lasn.

Wat jy sal leer:

• Organisasie van versoekverwerkingsroetes (Routing).
• Sleep en los.
• Hoe om nuwe voorwerpe (borde, lyste, kaarte) te skep.
• Verwerking en validering van insetdata.
• Van die kliënt se kant af: hoe om plaaslike berging te gebruik, hoe om data in plaaslike berging te stoor, hoe om data vanaf plaaslike berging te lees.
• Van die bedienerkant af: hoe om databasisse te gebruik, hoe om data in die databasis te stoor, hoe om data vanaf die databasis te lees.

Hier is 'n voorbeeldbewaarplekgemaak met React+Redux.

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

Github-bewaarplek.

'n Eenvoudige CRUD-app, perfek om die basiese beginsels te leer. Kom ons leer:

• Skep gebruikers, bestuur gebruikers.
• Interaksie met die databasis - skep, lees, redigeer, vee gebruikers uit.
• Invoervalidering en werk met vorms.

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

Github-bewaarplek.

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

Kom ons studeer:

• Hoe inheemse toepassings werk.
• Hoe om data van API af te haal.
• Hoe inheemse bladsyuitlegte werk.
• Hoe om met mobiele simulators te werk.

Probeer hierdie API. Vind beter - skryf in die kommentaar.

Indien belangstel, hier hier is 'n tutoriaal.

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

Tegnies is dit nie 'n toepassing nie, maar 'n baie nuttige taak om te verstaan ​​hoe webpack van binne af werk. Nou sal dit nie 'n "swart boks" wees nie, maar 'n verstaanbare hulpmiddel.

vereistes:

• Stel es7 tot es5 saam (basies).
• Stel jsx saam na js - of - .vue na .js (jy sal laaiers moet leer)
• Stel webpack dev-bediener op en warm module herlaai. (vue-cli en create-react-app gebruik albei)
• Gebruik Heroku, now.sh of Github, leer hoe om webpack-projekte te ontplooi.
• Stel jou gunsteling voorverwerker op om css saam te stel - scss, less, stylus.
• Leer hoe om beelde en svgs met webpack te gebruik.

Dit is 'n wonderlike hulpbron vir volledige beginners.

Клон Hackernews

Daar word van elke Jedi vereis om hul eie Hackernews te maak.

Wat jy langs die pad sal leer:

• Hoe om met die hackernews API te kommunikeer.
• Hoe om 'n enkelbladsy-toepassing te skep.
• Hoe om sulke kenmerke te implementeer soos die kyk van opmerkings, individuele opmerkings, profiele.
• Organisasie van versoekverwerkingsroetes (Routing).

Тудушечка

TodoMVC.

Ernstig? Tudushka? Daar is duisende van hulle. Maar glo my, daar is 'n rede vir sulke gewildheid.
Die Tudu-toepassing is 'n goeie manier om seker te maak jy verstaan ​​die basiese beginsels. Probeer om een ​​toepassing in vanielje Javascript en een in jou gunsteling raamwerk te skryf.

Leer:

• Skep nuwe take.
• Gaan veldvoltooiing na.
• Filtreer take (voltooi, aktief, almal). Gebruik filter и reduce.
• Verstaan ​​die basiese beginsels van Javascript.

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

Github-bewaarplek.

Baie nuttig om te verstaan sleep en los API.

Kom ons leer:

• Sleep en los API
• Skep ryk UI's

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

Jy sal verstaan ​​hoe beide webtoepassings en inheemse toepassings werk, wat jou van die grys massa sal onderskei.

Wat ons gaan bestudeer:

• Websokke (kitsboodskappe)
• Hoe inheemse toepassings werk.
• Hoe sjablone werk in inheemse toepassings.
• Organisering van versoekverwerkingsroetes in inheemse toepassings.

Teksredakteur

Цель текстового редактора — уменьшить усилия пользователей, пытающихся преобразовать их форматирование как валидную разметку HTML. Хороший текстовый редактор позволяет пользователям форматировать текст по-разному.

В какой-то момент каждый использовал текстовый редактор. Так почему бы не создать его самостоятельно?

Клон Reddit

reddit — это агрегация социальных новостей, рейтинг веб-контента и сайт для обсуждений.

Reddit — занимает большую часть моего времени, но я продолжаю зависать на нем. Создание клона Reddit — это эффективный способ изучения программирования (при одновременном просмотре Reddit).

Reddit предоставляет вам очень богатый API. Не упускайте какие-либо функции и не делайте как попало. В реальном мире с клиентами и покупателями, вы не сможете работать как попало, или вы быстро потеряете работу.

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

Reddit API

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

Если вы пишите код на Javascript, скорее всего, вы используете менеджер пакетов. Менеджер пакетов позволяет повторно использовать существующий код, который написали и опубликовали другие люди.

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

Пакет может быть любым. Если у вас нет идеи, создайте свой собственный Lodash и опубликуйте его.

Lodash: lodash.com

Наличие чего-то, что вы сделали в Интернете, ставит вас на 10% выше других. Вот некоторые полезные ресурсы об открытых источниках и пакетах.

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

FCC curriculum

freeCodecamp собрал очень всеобъемлющий курс по программированию.

freeCodeCamp — это некоммерческая организация. Она состоит из интерактивной обучающей веб-платформы, онлайн-форума сообщества, чатов, публикаций Medium и местных организаций, которые намереваются сделать доступным для всех изучение веб-разработки.

Вы будете более чем квалифицированы для своей первой работы, если вам удастся завершить весь курс.

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

Протокол HTTP является одним из основных протоколов, по которым контент попадает в Интернете. HTTP-серверы используются для обслуживания статического контента, такого как HTML, CSS и JS.

Возможность реализовать протокол HTTP с нуля расширит ваши знания о том, как все взаимодействует.

Например, если вы используете NodeJs, то вы знаете что Express предоставляет HTTP-сервер.

Для справки, посмотрите, сможете ли вы:

• Настроить сервер без использования каких-либо библиотек
• Сервер должен обслуживать содержимое HTML, CSS и JS.
• Внедрение маршрутизатора с нуля
• Следить за изменениями и обновлять сервер

Если вы не знаете с чего, воспользуйтесь Go lang и попытайтесь создать HTTP-сервер joggie van die begin af.

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

Мы все делаем заметки, не так ли?

Давайте создадим приложение для заметок. Приложению необходимо сохранять заметки и синхронизировать их с базой данных. Создайте нативное приложение с помощью Electron, Swift или чего-то еще, что вам нравится, и что подходит для вашей системы.

Не стесняйтесь сочетать это с первым челленджом(текстовый редактор).

В качестве бонуса попробуйте синхронизировать десктопную версию с веб-версией.

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

Кто не слушает подкасты?

Создайте веб-приложение со следующими функциями:

• Maak 'n rekening oop
• Поиск подкастов
• Оценивать и подписываться на подкасты
• Остановка и воспроизведение, изменение скорости, функции вперед и назад на 30 секунд.

В качестве отправной точки попробуйте использовать iTunes API. Если вы знаете какие-либо другие ресурсы, напишите в комментариях.

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

Sketmskoot

Привет! Я снимаю свой экран прямо сейчас!

Создайте десктопное или веб-приложение, которое позволит вам захватить ваш экран и сохранить клип как .gif

Hier 'n paar wenke, как добиться этого.

bronne

• Nog 5 gewaagde ontwikkelaaropleidingsprojekte (Layer, Squoosh, Sakrekenaar, Webwerfkruiper, Musiekspeler)
• 9 projekte om jou voorste vaardighede op te skerp
• Ses take vir die Front-End-ontwikkelaar
• Vermaaklike praktyk vir die ontwikkelaar
• 8 studieprojekte
• Nog 'n lys van projekte om aan te werk

Bron: will.com