1. Begrebsklon
Notion-applikationen er elsket af mange; den giver dig mulighed for at optimere din arbejdsgang, arbejde med dokumenter, planlægge opgaver og synkronisere data mellem enheder.
Hvad du lærer ved at oprette en Notion-klon:
- . Brugeren kan "gribe med musen" trækbar element og placer det i faldbar zone.
- Sådan synkroniserer du data i realtid mellem din computer og smartphone.
- Vi giver brugerne mulighed for at oprette, læse, opdatere og slette poster og derved træne CRUD-færdigheder.
Artiklen er oversat med støtte fra EDISON Software, som og .
2. Repl.it klon
Repl.it er et værktøj til real-time kollaborativ koderedigering. Du kan vælge flere sprog: JavaScript, Python, Go og køre koden direkte i browseren. Meget nyttig til hurtige demoer og kodeinterviews.
Hvad du vil lære ved at oprette en Repl.it-klon:
- Sådan køres og udføres kode (server-side) i browseren (klient-side).
- Læs inputdata (kildekode) og vis udførelsesresultatet.
- Sådan opretter du filer og mapper på nettet og gemmer resultaterne.
- Sådan fremhæves kodesyntaks.
3. Google Fotos Klon
Google Fotos er en tjeneste til lagring og deling af billeder.
Enhver moderne fotoapplikation kan udføre grundlæggende funktioner: uploade, beskære osv. Folk vil gerne skabe deres egne avatarer og dele billeder af katte, så du skal kunne arbejde med billeder.
Hvad du lærer ved at oprette en Google Fotos-klon:
- Sådan skaber du responsive billeder på telefoner, tablets, bærbare computere og endda gigantiske tv-skærme.
- Sådan håndteres billeduploads, især store billeder (>1MB) og masseuploads.
- Bearbejd billedfiler, beskær og tilpas fotos til thumbnails eller når du åbner et galleri.
- bonus: hvordan man gemmer billeder i skyen eller den lokale database.
4. Gifsky-klon
konverterer video til GIF ved hjælp af funktioner for effektive krydsramme-paletter og tidsmæssig anti-aliasing. Resultatet er en GIF med tusindvis af blomster pr. ramme.
Hvad du vil lære ved at oprette en Gifski-klon:
- Sådan konverteres videofiler (.mp4 til .gif).
- Sådan bruger du Træk og slip HTML API.
- Sådan fungerer billedoptimering og -behandling.
Note: og er på GitHub!
5. Overvågning af kryptovalutakurser
React Native cryptocurrency tracker
Hvad du vil lære ved at oprette en valutakurstracker:
- Sådan arbejder du med API'et og modtager data eksternt fra API'et.
- Sådan vises data som en liste.
- bonus: Hvis du er interesseret, skrev jeg for nylig for kryptovaluta med React Native.
Note: her .
Et udvalg af projekter fra tidligere publikationer.
lag
Layer er et fællesskab, hvor alle kan tegne en pixel på et fælles "bræt". Den oprindelige idé blev født på Reddit. R/Layer-fællesskabet er en metafor for fælles kreativitet, at alle kan være skabere og bidrage til en fælles sag.
Hvad du vil lære, når du opretter dit eget Layer-projekt:
- Sådan fungerer JavaScript-lærred At vide, hvordan man betjener et lærred, er en kritisk færdighed i mange applikationer.
- Hvordan man koordinerer brugertilladelser. Hver bruger kan tegne en pixel hvert 15. minut uden at skulle logge ind.
- Opret cookie-sessioner.
Squoosh
Squoosh er en billedkomprimeringsapplikation med mange avancerede muligheder.
GIF 20 MB
Ved at oprette din egen version af Squoosh lærer du:
- Sådan arbejder du med billedstørrelser
- Lær det grundlæggende i Drag'n'Drop API
- Forstå, hvordan API'en og begivenhedslyttere fungerer
- Sådan uploader og eksporterer du filer
Note: Billedkompressoren er lokal. Det er ikke nødvendigt at sende yderligere data til serveren. Du kan have kompressoren derhjemme, eller du kan bruge den på en server efter eget valg.
Lommeregner
Kom nu? Helt seriøst? Lommeregner? Ja, præcis, en lommeregner. At forstå det grundlæggende i matematiske operationer, og hvordan de fungerer sammen, er en afgørende færdighed for at forenkle dine applikationer. Før eller siden bliver du nødt til at forholde dig til tal og jo før jo bedre.
Ved at lave din egen lommeregner lærer du:
- Arbejd med tal og matematiske operationer
- Øv dig med begivenhedslytters API
- Hvordan man arrangerer elementer, forstår stilarter
Crawler (søgemaskine)
Alle har brugt en søgemaskine, så hvorfor ikke oprette din egen? Crawlere er nødvendige for at søge efter information. Alle bruger dem hver dag, og efterspørgslen efter denne teknologi og specialister vil kun vokse over tid.
Google søgemaskine
Hvad du vil lære ved at oprette din egen søgemaskine:
- Sådan fungerer crawlere
- Hvordan man indekserer websteder, og hvordan man rangerer dem efter vurdering og omdømme
- Hvordan man gemmer indekserede websteder i en database, og hvordan man arbejder med databasen
Musikafspiller (Spotify, Apple Music)
Alle lytter til musik – det er bare en integreret del af vores liv. Lad os skabe en musikafspiller for bedre at forstå, hvordan den grundlæggende mekanik i en moderne musikstreamingplatform fungerer.
Spotify
Hvad du vil lære ved at skabe din egen musikstreamingplatform:
- Sådan arbejder du med API. bruge API fra Spotify eller Apple Music
- Sådan afspilles, pauses eller spoles tilbage til næste/forrige nummer
- Sådan ændres lydstyrken
- Sådan administreres brugerrouting og browserhistorik
Filmsøgningsapp med React (med kroge)
Den første ting, du kan starte med, er at bygge en filmsøgningsapp med React. Nedenfor er et billede af, hvordan den endelige app vil se ud:
Hvad vil du lære
Ved at bygge denne applikation vil du forbedre dine React-færdigheder ved at bruge den relativt nye Hooks API. Eksempelprojektet bruger React-komponenter, masser af kroge, en ekstern API og selvfølgelig noget CSS-styling.
Teknisk stak og funktioner
- Reager med kroge
- skabe-reagerer-app
- jsx
- CSS
Uden at bruge nogen klasser giver disse projekter dig den perfekte indgang til funktionelle React og vil helt sikkert hjælpe dig i 2020. du kan finde . Følg instruktionerne eller gør den til din egen.
Chat-app med Vue
Et andet godt projekt for dig er at bygge en chat-app ved hjælp af mit foretrukne JavaScript-bibliotek: VueJS. Applikationen vil se nogenlunde sådan ud:
Hvad vil du lære
I denne vejledning lærer du, hvordan du laver en Vue-app fra bunden – opret komponenter, håndterer tilstande, opret ruter, opretter forbindelse til tredjepartstjenester og håndterer endda godkendelse.
Teknisk stak og funktioner
- Vue
- vuex
- Vue-router
- CLI -visning
- Pusher
- CSS
Dette er et rigtig godt projekt til at komme i gang med Vue eller forbedre dine eksisterende færdigheder for at komme i udvikling i 2020. du kan finde .
Smuk vejr-app med Angular 8
Dette eksempel hjælper dig med at bygge en smuk vejr-app ved hjælp af Angular 8:
Hvad vil du lære
Dette projekt vil lære dig værdifulde færdigheder i at bygge applikationer fra bunden - fra design til udvikling, hele vejen til en klar til implementering.
Teknisk stak og funktioner
- Vinkel 8
- Firebase
- Rendering på serversiden
- CSS med Grid og Flexbox
- Mobilvenlig og tilpasningsdygtig
- Mørk tilstand
- Красивый интерbillede
Det, jeg virkelig godt kan lide ved dette omfattende projekt, er, at man ikke studerer tingene isoleret. I stedet lærer du hele udviklingsprocessen fra design til endelig implementering.
To-Do app med Svelte
Svelte er som det nye barn i komponenttilgangen - i det mindste ligner React, Vue og Angular. Og dette er et af de hotteste nye produkter for 2020.
To-Do-apps er ikke nødvendigvis det hotteste emne, men de vil virkelig hjælpe dig med at finpudse dine Svelte-færdigheder. Det vil se sådan ud:
Hvad vil du lære
Denne vejledning viser dig, hvordan du opretter et program ved hjælp af Svelte 3, fra start til slut. Du vil bruge komponenter, styling og event handlere
Teknisk stak og funktioner
- Svelte 3
- Komponenter
- Styling med CSS
- Syntaks ES6
Der er ikke mange gode Svelte starter projekter, så jeg fandt .
E-handelsapp med Next.js
Next.js er den mest populære ramme til at bygge React-apps, der understøtter server-side-rendering ud af boksen.
Dette projekt viser dig, hvordan du opretter en e-handelsapplikation, der ser sådan ud:
Hvad vil du lære
I dette projekt lærer du, hvordan du udvikler med Next.js – opret nye sider og komponenter, hent data og stil og implementer en Next-applikation.
Teknisk stak og funktioner
- Next.js
- Komponenter og sider
- Datasampling
- Stilisering
- Projektimplementering
- SSR og SPA
Det er altid dejligt at have et virkeligt eksempel som en e-handelsapp for at lære noget nyt. Du kan .
Fuld flersproget blog med Nuxt.js
Nuxt.js er for Vue, ligesom Next.js er for React: en fantastisk ramme til at kombinere server-side rendering og enkeltside applikationer
Den sidste applikation, du kan oprette, ser sådan ud:
Hvad vil du lære
I dette eksempelprojekt lærer du, hvordan du bygger et komplet websted ved hjælp af Nuxt.js, fra den første opsætning til den endelige implementering.
Det udnytter mange af de fede funktioner, som Nuxt har at tilbyde, såsom sider og komponenter og styling med SCSS.
Teknisk stak og funktioner
- Nuxt.js
- Komponenter og sider
- storyblock-modul
- Mixins
- Vuex til statsforvaltning
- SCSS til styling
- Nuxt mellemvare
, som indeholder mange af de fantastiske funktioner i Nuxt.js. Jeg elsker personligt at arbejde med Nuxt, så du bør prøve det, da det også vil gøre dig til en fantastisk Vue-udvikler.
Blog med Gatsby
Gatsby er en fantastisk statisk webstedsgenerator, der bruger React og GraphQL. Dette er resultatet af projektet:
Hvad vil du lære
I denne tutorial lærer du, hvordan du bruger Gatsby til at oprette en blog, som du vil bruge til at skrive dine egne artikler ved hjælp af React og GraphQL.
Teknisk stak og funktioner
- Gatsby
- Reagerer
- GraphQL
- Plugins og temaer
- MDX/Markdown
- Bootstrap CSS
- Skabeloner
Hvis du nogensinde har ønsket at starte en blog, hvordan man laver det ved hjælp af React og GraphQL.
Jeg siger ikke, at WordPress er et dårligt valg, men med Gatsby kan du bygge højtydende hjemmesider ved hjælp af React – hvilket er en fantastisk kombination.
Blog med Gridsome
Gridsome for Vue... Okay, det havde vi allerede med Next/Nuxt.
Men det samme gælder for Gridsome og Gatsby. Begge bruger GraphQL som deres datalag, men Gridsome bruger VueJS. Det er også en fantastisk statisk webstedsgenerator, der hjælper dig med at skabe fantastiske blogs:
Hvad vil du lære
Dette projekt vil lære dig, hvordan du opretter en simpel blog for at komme i gang med Gridsome, GraphQL og Markdown. Den forklarer også, hvordan man implementerer en applikation gennem Netlify.
Teknisk stak og funktioner
- Gridsomt
- Vue
- GraphQL
- markdown
- netify
Dette er bestemt ikke den mest komplette tutorial, men den dækker de grundlæggende begreber i Gridsome og .
Lydafspiller svarende til SoundCloud ved hjælp af Quasar
Quasar er en anden Vue-ramme, der kan bruges til at bygge mobile apps. I dette projekt vil du oprette en lydafspillerapplikation som:
Hvad vil du lære
Mens andre projekter hovedsageligt fokuserer på webapps, vil denne vise dig, hvordan du bygger en mobilapp ved hjælp af Vue og Quasar-rammen.
Du burde allerede have en fungerende Cordova med Android Studio/Xcode opsat. Hvis ikke, har manualen et link til Quasar-webstedet, hvor de viser dig, hvordan du sætter alt op.
Teknisk stak og funktioner
- Quasar
- Vue
- Cordova
- bølgesurfer
- UI-komponenter
, der demonstrerer Quasars evner til at bygge mobile applikationer.
Kreditkortformular
En cool kreditkortform med glatte og behagelige mikro-interaktioner. Inkluderer nummerformatering, verifikation og automatisk korttypegenkendelse. Den er bygget på Vue.js og er også fuldt responsiv. (Du kan se .)
Hvad du lærer:
- Behandle og validere formularer
- Håndter hændelser (f.eks. når felter ændres)
- Forstå, hvordan du viser og placerer elementer på siden, især de kreditkortoplysninger, der vises øverst i formularen
Søjlediagram
Et histogram er et diagram eller en graf, der repræsenterer kategoriske data med rektangulære søjler med højder eller længder, der er proportionale med de værdier, de repræsenterer.
De kan påføres lodret eller vandret. Et lodret søjlediagram kaldes undertiden et linjediagram.
Hvad du lærer:
- Vis data på en struktureret og forståelig måde
- Derudover: Lær, hvordan du bruger elementet
canvasog hvordan man tegner elementer med det
du kan finde data om verdens befolkning. De er sorteret efter år.
Twitter Heart Animation
Tilbage i 2016 introducerede Twitter denne fantastiske animation til sine tweets. Fra 2019 ser det stadig ud, så hvorfor ikke oprette en selv?
Hvad du lærer:
- Arbejd med CSS-attribut
keyframes - Manipuler og animer HTML-elementer
- Kombiner JavaScript, HTML og CSS
Søgbare GitHub-depoter
Der er ikke noget fancy her – GitHub-depoter er bare en glorificeret liste.
Målet er at vise depoterne og give brugeren mulighed for at filtrere dem. Brug for at få arkiver til hver bruger.
GitHub profilside -
Hvad du lærer:
- Modtag data fra API
- Vis data fra API
- Filtrer og vis relevante data for hver søgning
- Valgfrit: Hvis du er klar til en udfordring, så brug , bygget ved hjælp af GraphQL. .
Reddit stil chats
Chats er en populær måde at kommunikere på på grund af deres enkelhed og brugervenlighed. Men hvad brænder egentlig moderne chatrum? WebSockets!
Hvad du lærer:
- Brug WebSockets, realtidskommunikation og dataopdateringer
- Arbejd med brugeradgangsniveauer (f.eks. har ejeren af en chatkanal rollen
adminog andre i rummet -user) - Behandle og valider formularer - husk, chatvinduet for at sende en besked er
input - Opret og deltag i forskellige chats
- Arbejd med personlige beskeder. Brugere kan chatte med andre brugere privat. Grundlæggende vil du etablere en WebSocket-forbindelse mellem to brugere.
Navigation i stribet stil
Det, der gør denne navigation unik, er, at popover-beholderen transformeres, så den passer til indholdet. Der er en elegance ved denne overgang sammenlignet med den traditionelle adfærd med at åbne og lukke en ny popover.
Hvad du lærer:
- Kombiner CSS-animationer med overgange
- Dæmp indhold, og anvend aktiv klasse på flydende element
Pacman
Lav din egen version af Pacman. Dette er en fantastisk måde at få en idé om, hvordan spil udvikles og forstå det grundlæggende. Brug en JavaScript-ramme, React eller Vue.
Du vil lære:
- Hvordan elementer bevæger sig
- Sådan bestemmer du, hvilke taster der skal trykkes på
- Sådan bestemmes kollisionsøjeblikket
- Du kan gå længere og tilføje spøgelsesbevægelseskontroller
Du finder et eksempel på dette projekt GitHub
brugerstyring
Projekt GitHub
Oprettelse af en CRUD-applikation til brugeradministration vil lære dig det grundlæggende i udvikling. Dette er især nyttigt for nye udviklere.
Du vil lære:
- Hvad er routing
- Hvordan man håndterer dataindtastningsformularer og kontrollerer, hvad brugeren har indtastet
- Sådan arbejder du med databasen - opret, læs, opdater og slet handlinger
Tjek vejret på din placering
Projekt GitHub
Hvis du vil oprette apps, skal du starte med en vejr-app. Dette projekt kan gennemføres ved hjælp af Swift.
Ud over at få erfaring med at bygge en applikation, vil du lære:
- Sådan arbejder du med API
- Sådan bruger du geolocation
- Gør din applikation mere dynamisk ved at tilføje tekstinput. I den vil brugere være i stand til at indtaste deres placering for at tjekke vejret på et bestemt sted.
Du skal bruge en API. For at få vejrdata skal du bruge OpenWeather API. Flere oplysninger om OpenWeather API.
Chat vindue
Mit chatvindue i aktion, åben i to browserfaner
Oprettelse af et chatvindue er den perfekte måde at komme i gang med sockets. Udvalget af tech stack er enormt. Node.js er for eksempel perfekt.
Du lærer, hvordan stikkontakter fungerer, og hvordan du implementerer dem. Dette er den største fordel ved dette projekt.
Hvis du er en Laravel-udvikler, der gerne vil arbejde med sockets, så læs min
GitLab CI
Hvis du er ny til kontinuerlig integration (CI), skal du lege med GitLab CI. Konfigurer et par miljøer, og prøv at køre et par tests. Det er ikke et særligt svært projekt, men jeg er sikker på, at du vil lære meget af det. Mange udviklingsteams bruger nu CI. Det er nyttigt at vide, hvordan man bruger det.
Du vil lære:
- Hvad er GitLab CI
- Sådan konfigureres
.gitlab-ci.ymlsom fortæller GitLab-brugeren, hvad han skal gøre - Sådan implementeres til andre miljøer
Website analysator
Lav en skraber, der analyserer semantikken på websteder og opretter deres vurdering. For eksempel kan du tjekke for manglende alt-tags i billeder. Eller tjek om siden har SEO-metatags. En skraber kan oprettes uden en brugergrænseflade.
Du vil lære:
- Hvordan virker skraberen?
- Sådan opretter du DOM-vælgere
- Hvordan man skriver en algoritme
- Hvis du ikke vil stoppe der, skal du oprette en brugergrænseflade. Du kan også oprette en rapport på hver hjemmeside, du tjekker.
Følelsesdetektering på sociale netværk
Følelsesregistrering på sociale medier er en fantastisk måde at blive introduceret til maskinlæring.
Du kan starte med kun at analysere ét socialt netværk. Alle starter normalt med Twitter.
Hvis du allerede har erfaring med maskinlæring, så prøv at indsamle data fra forskellige sociale netværk og kombinere dem.
Du vil lære:
- Hvad er maskinlæring
Trello klon
Hvad vil du lære:
- Organisering af anmodningsbehandlingsruter (Routing).
- Træk og slip.
- Sådan opretter du nye objekter (tavler, lister, kort).
- Behandling og kontrol af inputdata.
- Fra klientsiden: hvordan man bruger lokal lagring, hvordan man gemmer data til lokal lagring, hvordan man læser data fra lokal lagring.
- Fra serversiden: hvordan man bruger databaser, hvordan man gemmer data i databasen, hvordan man læser data fra databasen.
, lavet i React+Redux.
Admin panel
En simpel CRUD-applikation, ideel til at lære det grundlæggende. Lad os lære:
- Opret brugere, administrer brugere.
- Interager med databasen - opret, læs, rediger, slet brugere.
- Validering af input og arbejde med formularer.
Cryptocurrency tracker (native mobilapp)
Alt: Swift, Objective-C, React Native, Java, Kotlin.
Lad os studere:
- Sådan fungerer native applikationer.
- Sådan henter du data fra API'et.
- Sådan fungerer native sidelayouts.
- Sådan arbejder du med mobile simulatorer.
. Hvis du finder noget bedre, så skriv i kommentarerne.
Hvis du er interesseret, så er den her .
Konfigurer din egen webpack-konfiguration fra bunden
Teknisk set er dette ikke en applikation, men det er en meget nyttig opgave at forstå, hvordan webpack fungerer indefra. Nu bliver det ikke en "sort boks", men et forståeligt værktøj.
Krav:
- Kompiler es7 til es5 (grundlæggende).
- Kompiler jsx til js - eller - .vue til .js (du bliver nødt til at lære indlæsere)
- Konfigurer webpack-udviklerserver og genindlæsning af hotmodul. (vue-cli og create-react-app bruger begge)
- Brug Heroku, now.sh eller Github, lær hvordan du implementerer webpack-projekter.
- Konfigurer din foretrukne præprocessor til at kompilere css - scss, less, stylus.
- Lær, hvordan du bruger billeder og svgs med webpack.
Hackernews klon
Hver Jedi er forpligtet til at lave sine egne Hackernews.
Hvad du lærer undervejs:
- Sådan interagerer du med hackernews API.
- Sådan opretter du en enkeltsideapplikation.
- Sådan implementeres funktioner såsom visning af kommentarer, individuelle kommentarer, profiler.
- Organisering af anmodningsbehandlingsruter (Routing).
Tudushechka
Helt seriøst? Tudushka? Der er tusindvis af dem. Men tro mig, der er en grund til denne popularitet.
Tudu-appen er en fantastisk måde at sikre dig, at du forstår det grundlæggende. Prøv at skrive en applikation i vanilla Javascript og en i din yndlingsramme.
Lære:
- Opret nye opgaver.
- Tjek at felterne er udfyldt.
- Filtrer opgaver (afsluttede, aktive, alle). Brug
filterиreduce. - Forstå det grundlæggende i Javascript.
Sorterbar træk og slip liste
Meget nyttigt at forstå .
Lad os lære:
- Træk og slip API
- Opret omfattende brugergrænseflader
Messenger-klon (native app)
Du vil forstå, hvordan både webapplikationer og native applikationer fungerer, hvilket vil adskille dig fra den grå masse.
Hvad vi vil studere:
- Web-sockets (instant messages)
- Sådan fungerer native applikationer.
- Sådan fungerer skabeloner i native applikationer.
- Organisering af anmodningsbehandlingsruter i native applikationer.
Tekst editor
Formålet med en teksteditor er at reducere indsatsen for brugere, der forsøger at konvertere deres formatering til gyldig HTML-markup. En god teksteditor giver brugerne mulighed for at formatere tekst på forskellige måder.
På et tidspunkt har alle brugt en teksteditor. Så hvorfor ikke ?
Reddit klon
er en social nyhedsaggregering, webindholdsvurdering og diskussionsside.
Reddit tager det meste af min tid, men jeg fortsætter med at hænge ud på det. Oprettelse af en Reddit-klon er en effektiv måde at lære programmering på (mens du browser på Reddit på samme tid).
Reddit giver dig en meget rig. Udelad ikke nogen funktioner eller gør ting tilfældigt. I den virkelige verden med kunder og kunder kan du ikke arbejde tilfældigt, ellers vil du hurtigt miste dit job.
Smarte kunder vil straks indse, at arbejdet bliver udført dårligt og vil finde en anden.
Udgivelse af en open source NPM-pakke
Hvis du skriver Javascript-kode, er der stor sandsynlighed for, at du bruger en pakkehåndtering. En pakkehåndtering giver dig mulighed for at genbruge eksisterende kode, som andre har skrevet og udgivet.
At forstå den fulde udviklingscyklus for en pakke vil give en meget god oplevelse. Der er mange ting, du skal vide, når du udgiver kode. Du skal tænke på sikkerhed, semantisk versionering, skalerbarhed, navnekonventioner og vedligeholdelse.
Pakken kan være hvad som helst. Hvis du ikke har en idé, så lav din egen Lodash og udgiv den.
Lodash:
At have noget, du har lavet online, sætter dig 10 % over andre. om åbne kilder og pakker.
freeCodeCamp Curriculum
freeCodecamp har samlet en masse .
freeCodeCamp er en non-profit organisation. Den består af en interaktiv webbaseret læringsplatform, et online community-forum, chatrum, Medium-publikationer og lokale organisationer, der har til hensigt at gøre læringswebudvikling tilgængelig for alle.
Du vil være mere end kvalificeret til dit første job, hvis du formår at gennemføre hele forløbet.
Opret en HTTP-server fra bunden
HTTP-protokollen er en af de vigtigste protokoller, hvorigennem indhold bevæger sig på internettet. HTTP-servere bruges til at levere statisk indhold såsom HTML, CSS og JS.
At kunne implementere HTTP-protokollen fra bunden vil udvide din viden om, hvordan tingene interagerer.
For eksempel, hvis du bruger NodeJs, så ved du, at Express leverer en HTTP-server.
For reference, se om du kan:
- Konfigurer en server uden at bruge nogen biblioteker
- Serveren skal servere HTML-, CSS- og JS-indhold.
- Implementering af en router fra bunden
- Overvåg ændringer og opdater serveren
Hvis du ikke ved hvorfor, så brug og prøv at oprette en HTTP-server fra starten.
Desktop-app til noter
Vi tager alle noter, gør vi ikke?
Lad os oprette en note-app. Applikationen skal gemme noter og synkronisere dem med databasen. Byg en indbygget app ved hjælp af Electron, Swift eller hvad du nu kan lide, og hvad der virker for dit system.
Kombiner gerne dette med den første udfordring (teksteditor).
Som en bonus kan du prøve at synkronisere din desktopversion med webversionen.
Podcasts (overskyet klon)
Hvem lytter ikke til podcasts?
Opret en webapplikation med følgende funktionalitet:
- Opret en konto
- Søg efter podcasts
- Bedøm og abonner på podcasts
- Stop og spil, skift hastighed, frem og tilbage funktioner i 30 sekunder.
Prøv at bruge iTunes API som udgangspunkt. Hvis du kender til andre ressourcer, bedes du skrive i kommentarerne.
Skærmbillede
Hej! Jeg er ved at filme min skærm lige nu!
Opret en desktop- eller webapp, der giver dig mulighed for at fange din skærm og gemme klippet som .gif
her hvordan man opnår dette.
kilder
Kilde: www.habr.com