1. Begrip kloon
De Notion-applicatie is bij velen geliefd; hiermee kunt u uw workflow optimaliseren, met documenten werken, taken plannen en gegevens tussen apparaten synchroniseren.
Wat je leert door een Notion-kloon te maken:
- . De gebruiker kan “grijpen met de muis” sleepbaar element en plaats het erin af te vallen zone.
- Hoe u gegevens in realtime kunt synchroniseren tussen uw computer en smartphone.
- We stellen gebruikers in staat records aan te maken, te lezen, bij te werken en te verwijderen, waardoor ze CRUD-vaardigheden trainen.
Het artikel is vertaald met de steun van EDISON Software, dat En .
2. Vernieuw de kloon
Repl.it is een tool voor het realtime bewerken van code in samenwerking. Je kunt verschillende talen kiezen: JavaScript, Python, Go en de code rechtstreeks in de browser uitvoeren. Zeer handig voor snelle demo's en code-interviews.
Wat u leert door een Repl.it-kloon te maken:
- Code uitvoeren en uitvoeren (serverzijde) in de browser (clientzijde).
- Lees invoergegevens (broncode) en geef het uitvoeringsresultaat weer.
- Hoe u bestanden en mappen op internet kunt maken en de resultaten kunt opslaan.
- Codesyntaxis markeren.
3. Google Foto's kloon
Google Foto's is een dienst voor het opslaan en delen van foto's.
Elke moderne fototoepassing kan basisfuncties uitvoeren: uploaden, bijsnijden, enz. Mensen willen hun eigen avatars maken en foto's van katten delen, dus je moet met afbeeldingen kunnen werken.
Wat u leert door een Google Foto's-kloon te maken:
- Hoe u responsieve afbeeldingen kunt maken op telefoons, tablets, laptops en zelfs gigantische tv-schermen.
- Hoe u met afbeeldingsuploads omgaat, vooral grote afbeeldingen (>1 MB) en bulkuploads.
- Verwerk afbeeldingsbestanden, snij foto's bij en wijzig het formaat ervan voor miniaturen of bij het openen van een galerij.
- bonus: hoe u afbeeldingen in de cloud of lokale database opslaat.
4. Gifsky-kloon
converteert video naar GIF met behulp van functies voor efficiënte cross-frame paletten en tijdelijke anti-aliasing. Het resultaat is een GIF met duizenden bloemen per frame.
Wat je leert door een Gifski-kloon te maken:
- Videobestanden converteren (.mp4 naar .gif).
- Hoe u de HTML-API met slepen en neerzetten gebruikt.
- Hoe beeldoptimalisatie en -verwerking werken.
Opmerking: en staat op GitHub!
5. Het monitoren van cryptocurrency-tarieven
Reageer Native cryptocurrency-tracker
Wat u leert door een valutakoerstracker te maken:
- Hoe u met de API kunt werken en gegevens op afstand kunt ontvangen via de API.
- Gegevens weergeven als een lijst.
- bonus: Als je geïnteresseerd bent, schreef ik onlangs voor cryptocurrency met React Native.
Opmerking: Hier .
Een selectie van projecten uit eerdere publicaties.
Verschillende Lagen
Layer is een community waar iedereen een pixel op een gedeeld ‘bord’ kan tekenen. Het oorspronkelijke idee werd geboren op Reddit. De r/Layer-gemeenschap is een metafoor voor gedeelde creativiteit, dat iedereen een schepper kan zijn en kan bijdragen aan een gemeenschappelijk doel.
Wat u leert als u uw eigen Layer-project maakt:
- Hoe JavaScript-canvas werkt Weten hoe u een canvas moet bedienen, is in veel toepassingen een cruciale vaardigheid.
- Hoe gebruikersmachtigingen te coördineren. Elke gebruiker kan elke 15 minuten één pixel tekenen zonder in te loggen.
- Creëer cookiesessies.
Squoosh
Squoosh is een beeldcompressietoepassing met veel geavanceerde opties.
GIF-bestand 20 MB
Door je eigen versie van Squoosh te maken, leer je:
- Hoe u met afbeeldingsformaten kunt werken
- Leer de basisprincipes van de Drag'n'Drop API
- Begrijp hoe de API en gebeurtenislisteners werken
- Hoe bestanden te uploaden en exporteren
Opmerking: De beeldcompressor is lokaal. Het is niet nodig om extra gegevens naar de server te sturen. U kunt de compressor thuis hebben, of u kunt hem op een server gebruiken, naar keuze.
Calculator
Kom op? Ernstig? Rekenmachine? Ja precies, een rekenmachine. Het begrijpen van de basisprincipes van wiskundige bewerkingen en hoe ze samenwerken, is een cruciale vaardigheid om uw toepassingen te vereenvoudigen. Vroeg of laat krijg je te maken met cijfers en hoe eerder hoe beter.
Door uw eigen rekenmachine te maken, leert u:
- Werken met cijfers en wiskundige bewerkingen
- Oefen met de gebeurtenislisteners-API
- Hoe elementen te rangschikken, stijlen te begrijpen
Crawler (zoekmachine)
Iedereen heeft wel eens een zoekmachine gebruikt, dus waarom zou u niet uw eigen zoekmachine maken? Crawlers zijn nodig om informatie te zoeken. Iedereen gebruikt ze elke dag en de vraag naar deze technologie en specialisten zal in de loop van de tijd alleen maar groeien.
Google-zoekmachine
Wat u leert door uw eigen zoekmachine te maken:
- Hoe crawlers werken
- Hoe sites te indexeren en hoe ze te rangschikken op basis van beoordeling en reputatie
- Hoe u geïndexeerde sites in een database kunt opslaan en hoe u met de database kunt werken
Muziekspeler (Spotify, Apple Music)
Iedereen luistert naar muziek - het is gewoon een integraal onderdeel van ons leven. Laten we een muziekspeler maken om beter te begrijpen hoe de basismechanismen van een modern muziekstreamingplatform werken.
Spotify
Wat je leert door je eigen muziekstreamingplatform te creëren:
- Hoe te werken met de API. gebruik API van Spotify of Apple Music
- Hoe u het volgende/vorige nummer kunt afspelen, pauzeren of terugspoelen
- Hoe u het volume kunt wijzigen
- Hoe u gebruikersroutering en browsergeschiedenis beheert
Filmzoek-app met React (met hooks)
Het eerste waarmee u kunt beginnen, is een filmzoek-app maken met React. Hieronder ziet u een afbeelding van hoe de uiteindelijke toepassing eruit zal zien:
Wat ga je leren
Door deze app te bouwen, verbeter je je React-vaardigheden door de relatief nieuwe Hooks API te gebruiken. Het voorbeeldproject gebruikt React-componenten, veel hooks, een externe API en natuurlijk wat CSS-stijl.
Tech-stack en functies
- Reageer met haken
- maak-reageer-app
- JSX
- CSS
Zonder gebruik te maken van klassen bieden deze projecten u het perfecte toegangspunt tot functionele React en zullen ze u zeker helpen in 2020. je kunt vinden . Volg de instructies of maak er uw eigen van.
Chat-app met Vue
Een ander geweldig project dat je kunt doen is het maken van een chat-app met behulp van mijn favoriete JavaScript-bibliotheek: VueJS. De applicatie zal er ongeveer zo uitzien:
Wat ga je leren
In deze zelfstudie leert u hoe u een Vue-app helemaal opnieuw kunt maken: componenten maken, de status afhandelen, routes maken, verbinding maken met services van derden en zelfs de authenticatie afhandelen.
Tech-stack en functies
- Vue
- vuex
- Vue-router
- CLI-weergave
- Pusher
- CSS
Dit is echt een geweldig project om aan de slag te gaan met Vue of om je bestaande vaardigheden te verbeteren om in 2020 in ontwikkeling te komen. je kunt vinden .
Mooi weer-app met Angular 8
Dit voorbeeld helpt u een mooi weer-app te maken met Angular 8:
Wat ga je leren
Dit project leert u waardevolle vaardigheden bij het vanaf het begin bouwen van applicaties - van ontwerp tot ontwikkeling, helemaal tot een applicatie die klaar is voor gebruik.
Tech-stack en functies
- Hoekig 8
- Firebase
- Rendering aan de serverzijde
- CSS met Grid en Flexbox
- Mobielvriendelijk en aanpassingsvermogen
- Donkere modus
- Mooie interface
Wat ik zo leuk vind aan dit allesomvattende project, is dat je de dingen niet geïsoleerd bestudeert. In plaats daarvan leer je het hele ontwikkelingsproces, van ontwerp tot uiteindelijke implementatie.
To-Do-applicatie met Svelte
Svelte is als de nieuweling op het gebied van de componentgebaseerde aanpak - in ieder geval vergelijkbaar met React, Vue en Angular. En dit is een van de populairste nieuwe producten voor 2020.
To-Do-apps zijn niet per se het populairste onderwerp, maar het zal je echt helpen je Svelte-vaardigheden aan te scherpen. Het zal er als volgt uitzien:
Wat ga je leren
Deze tutorial laat je zien hoe je een applicatie maakt met Svelte 3, van begin tot eind. Je gebruikt componenten, styling en gebeurtenishandlers
Tech-stack en functies
- Slanke 3
- Onderdelen
- Stijlen met CSS
- ES 6-syntaxis
Er zijn niet veel goede Svelte-startprojecten, zo ontdekte ik .
E-commerce-app met Next.js
Next.js is het populairste raamwerk voor het bouwen van React-applicaties die kant-en-klare weergave op de server ondersteunen.
Dit project laat zien hoe u een e-commercetoepassing maakt die er als volgt uitziet:
Wat ga je leren
In dit project leert u hoe u met Next.js kunt ontwikkelen: nieuwe pagina's en componenten maken, gegevens extraheren en een Next-toepassing vormgeven en implementeren.
Tech-stack en functies
- Next.js
- Componenten en pagina's
- Gegevensbemonstering
- stilisatie
- Projectimplementatie
- SSR en SPA
Het is altijd geweldig om een voorbeeld uit de praktijk te hebben, zoals een e-commerce-app, om iets nieuws te leren. Jij kan .
Volwaardige meertalige blog met Nuxt.js
Nuxt.js is voor Vue, wat Next.js is voor React: een geweldig raamwerk voor het combineren van de kracht van server-side rendering en applicaties van één pagina
De uiteindelijke toepassing die u kunt maken, ziet er als volgt uit:
Wat ga je leren
In dit voorbeeldproject leert u hoe u een volledige website kunt maken met Nuxt.js, van de eerste installatie tot de uiteindelijke implementatie.
Het maakt gebruik van veel van de coole functies die Nuxt te bieden heeft, zoals pagina's en componenten, en styling met SCSS.
Tech-stack en functies
- Nuxt.js
- Componenten en pagina's
- Verhaalblokmodule
- Hagfish
- Vuex voor staatsbeheer
- SCSS voor styling
- Nuxt middlewares
, die veel geweldige Nuxt.js-functies bevat. Persoonlijk werk ik graag met Nuxt, dus je moet het eens proberen, want het zal je ook een geweldige Vue-ontwikkelaar maken.
Bloggen met Gatsby
Gatsby is een uitstekende statische sitegenerator die React en GraphQL gebruikt. Dit is het resultaat van het project:
Wat ga je leren
In deze zelfstudie leert u hoe u Gatsby kunt gebruiken om een blog te maken die u kunt gebruiken om uw eigen artikelen te schrijven met React en GraphQL.
Tech-stack en functies
- Gatsby
- Reageren
- GraphQL
- Plug-ins en thema's
- MDX/Markdown
- Bootstrap-CSS
- templates
Als je ooit een blog hebt willen beginnen, over hoe u het kunt maken met React en GraphQL.
Ik zeg niet dat WordPress een slechte keuze is, maar met Gatsby kun je krachtige websites bouwen met React - wat een geweldige combinatie is.
Bloggen met Gridsome
Gridsome voor Vue... Oké, dit hadden we al met Next/Nuxt.
Maar hetzelfde geldt voor Gridsome en Gatsby. Beiden gebruiken GraphQL als gegevenslaag, maar Gridsome gebruikt VueJS. Dit is ook een geweldige statische sitegenerator waarmee je geweldige blogs kunt maken:
Wat ga je leren
Dit project leert je hoe je een eenvoudige blog kunt maken om aan de slag te gaan met Gridsome, GraphQL en Markdown. Het behandelt ook hoe u een applicatie via Netlify kunt implementeren.
Tech-stack en functies
- Rasterwerk
- Vue
- GraphQL
- Markdown
- Netlify
Dit is zeker niet de meest uitgebreide tutorial, maar het behandelt de basisconcepten van Gridsome en .
SoundCloud-achtige audiospeler met Quasar
Quasar is een ander Vue-framework dat kan worden gebruikt om mobiele applicaties te maken. In dit project maak je een audiospeler-applicatie, bijvoorbeeld:
Wat ga je leren
Terwijl andere projecten zich vooral richten op webapplicaties, laat dit je zien hoe je een mobiele applicatie kunt maken met behulp van Vue en het Quasar-framework.
Cordova zou al moeten draaien met Android Studio/Xcode geconfigureerd. Zo niet, dan bevat de handleiding een link naar de Quasar-website waar ze laten zien hoe je alles instelt.
Tech-stack en functies
- Quasar
- Vue
- Cordova
- golfsurfer
- UI-componenten
, waarmee Quasar's mogelijkheden voor het creëren van mobiele applicaties worden gedemonstreerd.
Creditcardformulier
Een coole creditcardvorm met soepele en plezierige micro-interacties. Inclusief nummeropmaak, verificatie en automatische kaarttypedetectie. Het is gebouwd op Vue.js en is ook volledig responsief. (Je kan zien .)
Wat je leert:
- Formulieren verwerken en valideren
- Gebeurtenissen afhandelen (bijvoorbeeld wanneer velden veranderen)
- Begrijp hoe u elementen op de pagina kunt weergeven en plaatsen, vooral de creditcardgegevens die bovenaan het formulier verschijnen
staafdiagram
Een histogram is een diagram of grafiek die categorische gegevens weergeeft met rechthoekige balken waarvan de hoogte of lengte evenredig is aan de waarden die ze vertegenwoordigen.
Ze kunnen verticaal of horizontaal worden toegepast. Een verticaal staafdiagram wordt ook wel een lijndiagram genoemd.
Wat je leert:
- Geef gegevens op een gestructureerde en begrijpelijke manier weer
- Bovendien: leer hoe u het element kunt gebruiken
canvasen hoe je er elementen mee kunt tekenen
U kunt gegevens over de wereldbevolking vinden. Ze zijn gesorteerd op jaar.
Twitter-hartanimatie
In 2016 introduceerde Twitter deze geweldige animatie voor zijn tweets. Anno 2019 ziet het er nog steeds goed uit, dus waarom zou je er niet zelf een maken?
Wat je leert:
- Werken met CSS-attribuut
keyframes - Manipuleer en animeer HTML-elementen
- Combineer JavaScript, HTML en CSS
Doorzoekbare GitHub-opslagplaatsen
Er is hier niets bijzonders: GitHub-repository's zijn slechts een veredelde lijst.
Het doel is om de repositories weer te geven en de gebruiker in staat te stellen deze te filteren. Gebruik om opslagplaatsen voor elke gebruiker te verkrijgen.
GitHub-profielpagina -
Wat je leert:
- Ontvang gegevens van API
- Gegevens uit API weergeven
- Filter en toon relevante gegevens voor elke zoekopdracht
- Optioneel: Als je zin hebt in een uitdaging, gebruik dan , gebouwd met GraphQL. .
Chats in Reddit-stijl
Chats zijn een populair communicatiemiddel vanwege hun eenvoud en gebruiksgemak. Maar wat is de werkelijke brandstof voor moderne chatrooms? WebSockets!
Wat je leert:
- Gebruik WebSockets, realtime communicatie en data-updates
- Werk met gebruikerstoegangsniveaus (de eigenaar van een chatkanaal heeft bijvoorbeeld de rol
admin, en anderen in de kamer -user) - Verwerk en valideer formulieren - onthoud dat het chatvenster voor het verzenden van een bericht is
input - Maak en neem deel aan verschillende chats
- Werk met persoonlijke berichten. Gebruikers kunnen privé met andere gebruikers chatten. In wezen brengt u een WebSocket-verbinding tot stand tussen twee gebruikers.
Navigatie in streepstijl
Wat deze navigatie uniek maakt, is dat de popover-container transformeert om bij de inhoud te passen. Deze overgang heeft een elegantie in vergelijking met het traditionele gedrag van het openen en sluiten van een nieuwe popover.
Wat je leert:
- Combineer CSS-animaties met overgangen
- Dim inhoud en pas actieve klasse toe op zwevend element
Pacman
Creëer je eigen versie van Pacman. Dit is een geweldige manier om een idee te krijgen van hoe games worden ontwikkeld en de basisprincipes te begrijpen. Gebruik een JavaScript-framework, React of Vue.
Je leert:
- Hoe elementen bewegen
- Hoe u kunt bepalen welke toetsen u moet indrukken
- Hoe het moment van botsing te bepalen
- Je kunt verder gaan en controle over spookbewegingen toevoegen
U vindt een voorbeeld van dit project GitHub
gebruikersbeheer
Project GitHub
Door een CRUD-type applicatie voor gebruikersbeheer te maken, leert u de basisprincipes van ontwikkeling. Dit is vooral handig voor nieuwe ontwikkelaars.
Je leert:
- Wat is routering
- Hoe om te gaan met gegevensinvoerformulieren en te controleren wat de gebruiker heeft ingevoerd
- Hoe u met de database werkt: acties maken, lezen, bijwerken en verwijderen
Het weer op uw locatie bekijken
Project GitHub
Als je apps wilt maken, begin dan met een weer-app. Dit project kan worden voltooid met behulp van Swift.
Naast dat je ervaring opdoet met het bouwen van een applicatie, leer je:
- Hoe te werken met de API
- Hoe geolocatie te gebruiken
- Maak uw applicatie dynamischer door tekstinvoer toe te voegen. Daarin kunnen gebruikers hun locatie invoeren om het weer op een specifieke locatie te bekijken.
Je hebt een API nodig. Gebruik de OpenWeather API om weergegevens te verkrijgen. Meer informatie over de OpenWeather-API.
Chatvenster
Mijn chatvenster in actie, geopend in twee browsertabbladen
Het creëren van een chatvenster is de perfecte manier om aan de slag te gaan met sockets. De keuze aan tech-stacks is enorm. Node.js is bijvoorbeeld perfect.
Je leert hoe sockets werken en hoe je ze kunt implementeren. Dit is het belangrijkste voordeel van dit project.
Als je een Laravel-ontwikkelaar bent die met sockets wil werken, lees dan mijn
GitLab-CI
Als je nieuw bent bij continue integratie (CI), speel dan eens met GitLab CI. Zet een paar omgevingen op en probeer een paar tests uit te voeren. Het is geen heel moeilijk project, maar ik weet zeker dat je er veel van zult leren. Veel ontwikkelteams gebruiken nu CI. Het is nuttig om te weten hoe u het moet gebruiken.
Je leert:
- Wat is GitLab CI
- Hoe te configureren
.gitlab-ci.ymldie de GitLab-gebruiker vertelt wat hij moet doen - Hoe te implementeren in andere omgevingen
Website-analysator
Maak een schraper die de semantiek van websites analyseert en hun beoordeling creëert. U kunt bijvoorbeeld controleren op ontbrekende alt-tags in afbeeldingen. Of controleer of de pagina SEO-metatags heeft. Een scraper kan worden gemaakt zonder gebruikersinterface.
Je leert:
- Hoe werkt een schraper?
- Hoe DOM-selectors te maken
- Hoe een algoritme te schrijven
- Als u daar niet wilt stoppen, maak dan een gebruikersinterface. U kunt ook een rapport maken over elke website die u bezoekt.
Sentimentdetectie op sociale netwerken
Sentimentdetectie op sociale media is een geweldige manier om kennis te maken met machine learning.
U kunt beginnen met het analyseren van slechts één sociaal netwerk. Iedereen begint meestal met Twitter.
Als je al ervaring hebt met machine learning, probeer dan gegevens van verschillende sociale netwerken te verzamelen en deze te combineren.
Je leert:
- Wat is machinaal leren
Trello-kloon
Wat je gaat leren:
- Organisatie van aanvraagverwerkingsroutes (Routing).
- Slepen en neerzetten.
- Hoe nieuwe objecten te maken (borden, lijsten, kaarten).
- Verwerken en controleren van invoergegevens.
- Vanaf de clientkant: hoe u lokale opslag gebruikt, hoe u gegevens opslaat in de lokale opslag, hoe u gegevens uit de lokale opslag leest.
- Van de serverkant: hoe databases te gebruiken, hoe gegevens in de database op te slaan, hoe gegevens uit de database te lezen.
, gemaakt in React+Redux.
Administratie Paneel
Een eenvoudige CRUD-applicatie, ideaal om de basis te leren. Laten we leren:
- Gebruikers aanmaken, gebruikers beheren.
- Communiceer met de database - maak, lees, bewerk en verwijder gebruikers.
- Invoer valideren en werken met formulieren.
Cryptocurrency-tracker (native mobiele app)
Alles: Swift, Objective-C, React Native, Java, Kotlin.
Laten we studeren:
- Hoe native applicaties werken.
- Gegevens ophalen uit de API.
- Hoe native pagina-indelingen werken.
- Hoe te werken met mobiele simulatoren.
. Als je iets beters vindt, schrijf dan in de reacties.
Als je geïnteresseerd bent, hier is het .
Stel uw eigen webpack-configuratie helemaal opnieuw in
Technisch gezien is dit geen applicatie, maar het is een zeer nuttige taak om te begrijpen hoe webpack van binnenuit werkt. Nu zal het geen ‘black box’ zijn, maar een begrijpelijk instrument.
vereisten:
- Compileer es7 tot es5 (basis).
- Compileer jsx naar js - of - .vue naar .js (je zult laders moeten leren)
- Stel de webpack-ontwikkelserver en het herladen van de hot-module in. (vue-cli en create-react-app gebruiken beide)
- Gebruik Heroku, now.sh of Github en leer hoe u webpack-projecten kunt implementeren.
- Stel uw favoriete preprocessor in om css te compileren - scss, less, stylus.
- Leer hoe u afbeeldingen en SVG's kunt gebruiken met webpack.
Hackernews-kloon
Elke Jedi is verplicht zijn eigen Hackernews te maken.
Wat je onderweg leert:
- Hoe te communiceren met de hackernews-API.
- Hoe u een toepassing met één pagina maakt.
- Hoe u functies kunt implementeren zoals het bekijken van opmerkingen, individuele opmerkingen en profielen.
- Organisatie van aanvraagverwerkingsroutes (Routing).
Tudushechka
Ernstig? Toedoesjka? Er zijn er duizenden. Maar geloof me, er is een reden voor deze populariteit.
De Tudu-app is een geweldige manier om ervoor te zorgen dat u de basisbeginselen begrijpt. Probeer één applicatie in standaard Javascript te schrijven en één in je favoriete framework.
Leren:
- Creëer nieuwe taken.
- Controleer of de velden zijn ingevuld.
- Filter taken (voltooid, actief, alles). Gebruik
filterиreduce. - Begrijp de basisprincipes van Javascript.
Sorteerbare drag-and-drop-lijst
Zeer nuttig om te begrijpen .
Laten we leren:
- API voor slepen en neerzetten
- Creëer rijke gebruikersinterfaces
Messenger-kloon (native app)
Je begrijpt hoe zowel webapplicaties als native applicaties werken, waardoor jij je onderscheidt van de grijze massa.
Wat gaan we bestuderen:
- Websockets (instant messages)
- Hoe native applicaties werken.
- Hoe sjablonen werken in native applicaties.
- Het organiseren van aanvraagverwerkingsroutes in native applicaties.
Teksteditor
Het doel van een teksteditor is om de moeite te verminderen van gebruikers die proberen hun opmaak om te zetten in geldige HTML-opmaak. Met een goede teksteditor kunnen gebruikers tekst op verschillende manieren opmaken.
Iedereen heeft wel eens een teksteditor gebruikt. Dus waarom niet ?
Reddit-kloon
is een site voor sociale nieuwsaggregatie, beoordeling van webinhoud en discussie.
Reddit neemt het grootste deel van mijn tijd in beslag, maar ik blijf er mee bezig. Het maken van een Reddit-kloon is een effectieve manier om te leren programmeren (terwijl je tegelijkertijd door Reddit bladert).
Reddit biedt je een zeer rijke. Laat geen functies achterwege en doe dingen niet lukraak. In de echte wereld met klanten en klanten kun je niet lukraak werken, anders verlies je snel je baan.
Slimme klanten zullen onmiddellijk beseffen dat de klus slecht wordt geklaard en zullen iemand anders zoeken.
Een open source NPM-pakket publiceren
Als u Javascript-code schrijft, is de kans groot dat u een pakketbeheerder gebruikt. Met een pakketbeheerder kunt u bestaande code hergebruiken die andere mensen hebben geschreven en gepubliceerd.
Het begrijpen van de volledige ontwikkelingscyclus van een pakket zal een zeer goede ervaring opleveren. Er zijn veel dingen die u moet weten bij het publiceren van code. U moet nadenken over beveiliging, semantisch versiebeheer, schaalbaarheid, naamgevingsconventies en onderhoud.
Het pakket kan van alles zijn. Als je geen idee hebt, maak dan je eigen Lodash en publiceer deze.
Lodash:
Als je iets online hebt gedaan, sta je 10% boven anderen. over open source en pakketten.
gratis CodeCamp-curriculum
freeCodecamp heeft veel verzameld .
freeCodeCamp is een non-profitorganisatie. Het bestaat uit een interactief webgebaseerd leerplatform, een online communityforum, chatrooms, mediumpublicaties en lokale organisaties die leerwebontwikkeling voor iedereen toegankelijk willen maken.
Als je de hele opleiding weet af te ronden, ben je meer dan gekwalificeerd voor je eerste baan.
Creëer een geheel nieuwe HTTP-server
Het HTTP-protocol is een van de belangrijkste protocollen waarmee inhoud op internet wordt verzonden. HTTP-servers worden gebruikt om statische inhoud zoals HTML, CSS en JS weer te geven.
Als u het HTTP-protocol helemaal opnieuw kunt implementeren, vergroot u uw kennis van hoe dingen op elkaar inwerken.
Als u bijvoorbeeld NodeJs gebruikt, weet u dat Express een HTTP-server biedt.
Kijk ter referentie of u het volgende kunt doen:
- Zet een server op zonder gebruik te maken van bibliotheken
- De server moet HTML-, CSS- en JS-inhoud weergeven.
- Een router helemaal opnieuw implementeren
- Houd wijzigingen bij en update de server
Als je niet weet waarom, gebruik dan en probeer een HTTP-server te maken helemaal opnieuw.
Desktop-app voor notities
We maken allemaal aantekeningen, nietwaar?
Laten we een notitie-app maken. De applicatie moet notities opslaan en deze synchroniseren met de database. Bouw een native app met Electron, Swift of wat je maar wilt en wat werkt voor jouw systeem.
Combineer dit gerust met de eerste uitdaging (teksteditor).
Probeer als bonus uw desktopversie te synchroniseren met de webversie.
Podcasts (bewolkte kloon)
Wie luistert er niet naar podcasts?
Maak een webapplicatie met de volgende functionaliteit:
- авести аккаунт
- Podcasts zoeken
- Beoordeel en abonneer je op podcasts
- Stop en speel, verander de snelheid, vooruit- en achteruitfuncties gedurende 30 seconden.
Probeer de iTunes API als uitgangspunt te gebruiken. Als u andere bronnen kent, kunt u deze in de reacties plaatsen.
Schermopname
Hallo! Ik ben nu mijn scherm aan het filmen!
Maak een desktop- of webapp waarmee u uw scherm kunt vastleggen en de clip kunt opslaan als .gif
Hier hoe je dit kunt bereiken.
bronnen
Bron: www.habr.com