Din ukes programmingsutfording

Hva jobber du med denne uken? Har du en kul utfording du prøver å løse?

Jeg sitter og leser til en eksamen som er rett rundt hjørne. Og tradisjonen tro er det da selvsagt en million andre ting som plutselig blir MEGA interessant. I går fikk jeg idéen om å lage en wysiwyg (what you see is what you get) editor i react. Tenkte jeg kunne bruke det til å skrive notater under studiene. Da kan jeg lagre notater på en nettside, kanskje dokumenter litt av læringsporsessen, og ikke mist (kanskje kun) gjøre hele noteringsprosessen litt mer gøyal. Jeg er jo da selvsagt veldg tidlig i prosessen, men prøver nå å finne ut om det lar seg gjøre på en relativt sikker måte.

Tenkte å starte med noe som dette:

  • Definere et markeringsspråk, feks: £type£ Denne setningen skal være av type.
  • Ta input string, splitte den på hver type, mappe setning påfølgende type-definisjon til et html element med JSX, <type> {setning} </type>.
  • Mapping fra £type£ til <type></type> blir selvsagt ikke direkte. Ser for meg at jeg lager en switch hvor jeg mapper et egendefinert type-navn til en funksjon som pakker en string inn i en html tag.
  • Outpute html-elementet til en div.

Ja, det her er ikke så veldig gjennomtenkt, men uansett så blir nok det ukens (+++) utfording (i tilegg til eksamenslesning da). Hva jobber du med denne uken?

1 Like

Kult! (og ambisiøst :stuck_out_tongue: ) Hvis du får det til er det mange som blir glade tror jeg. Jeg kikka etter slike for et par år sida, og det var ikke lett å finne noe som funka bra ut av boksen. Endte opp med å bruke tinymce i stedet. (Ikke at du trenger å lage noe såpass avansert for at det skal være et kult prosjekt altså :wink: )

Trenger du dette språket? Hørtes lettere ut å bare lagre trestrukturen direkte som json eller noe sånt. Eller er det mer i retning markdown du tenker?


Mitt prosjekt denne uken var å sette opp discourse, men det var lettere enn jeg hadde forventa, så nå må jeg finne på noe annet. Sitter og funderer på en artikkel jeg har lyst til å skrive. Den skal handle om feiltolerante workers. Utfordringa blir å få det kort nok til at det ikke blir en bok :stuck_out_tongue:

Ja, lagde konto for tinymce selv, men følte det ble litt mye greier. Sett for meg at en langt simplere variant holder for øyeblikket.

Godt spørsmål! Jeg har nok sett for meg noe nærmere markdown, ja. Men ikke gjort noen vurdering egentlig, hoppet litt ut i det. Så for meg at den skulle fungere noe likt som den editoren vi skriver i her (minus endel features), sett fra brukerens perspektiv.

Har ikke vært borti konseptet workers enda, sett ordet poppe opp her og der, men aldri undersøkt videre. Har du en god 3-linjers forklaring?

Ah da skjønner jeg, det høres mer overkommelig ut også. Post oppdateringer her da hvis du vil, hadde vært gøy å følge fremgangen!

Med worker så mener jeg egentlig bare en bakgrunnsprosess, så feks i en webapp så vil du kanskje prosessere tunge jobber i bakgrunnen uten at man må vente på at jobben blir ferdig før sida lastes.

1 Like

Kult prosjekt @nuanced! Lykke til, si ifra om du trenger tips/hjelp :smiley:

Jeg ble litt inspirert av cracking-the-cryptic sin sudoku app, men syntes den hadde en keitete måte å fylle inputs, også ser det ut som at de har gjort noen litt rare implementasjonsvalg, så jeg tenkte jeg skulle prøve meg på en egen vri. Det jeg ønsker meg er en variant der man velger nummer først og så velger celler man ønsker å putte nummere inn i (enten som verdi eller notat). Når man har valgt et nummer vil alle celler med samme verdi eller hvor nummeret er notert bli markert, da fungerer min mønster-hjerne bedre, og jeg klarer lettere se hvor et nummer kan og ikke kan være. + litt annet snacks (som auto-fjerning av noterte verdier som blir ugyldige når man fyller inn en verdi)

Skal også løse dette med react, men usikker på om jeg vil bruke redux for å håndtere staten faktisk (selvom jeg digger redux), tenker mer en ECS (Entity Component System) variant, som jeg tror blir mer fleksibelt og lettere.

Kanskje litt ambisiøst dette også, har lyst til å finne ut av hvordan jeg skal gjøre dette fra bunn av selv, uten så alt for mye research :stuck_out_tongue:

2 Likes

Oi, det høres veldig kult ut. Klikka litt inn på siden, og enig det var ikke veldig intuitiv måte å skrive “notater” på. Hørtes ut som en kul utfording da, lager man kode for å generere nye startsposisjoner selv, eller finnes det kanskje en algoritme for det?

Det hadde vært fett hvis du fikk til da! :smiley:

Hmm, aldri hørt om ECS-før. Spennende! Hadde vært gøy med en oppdatering hvis du kommer litt i gang. Så skal jeg lese litt om ECS i mellomtiden :wink:

Det finnes algoritmer for å generere puzzles også ja, men mange lages manuelt også, tenker foreløpig en løsning med noen definerte puzzles man kan velge mellom, eller at man kan legge inn sin egen puzzle :slight_smile:

ECS er veldig mye brukt i spill og simuleringer, det er primært et arkiteturprinsipp som prefererer data fremfor modeller.
Kort sagt er tanken at man har en verden med entiteter som har egenskapene sine definert i ulike komponenter. Så er det systemene som jobber på komponenteneentitetene.
For eksempel vil et Rendereringsystem stå for rendering av alle entiteter som har komponentene shader og posisjon, også vil et Kollisjonssystem stå for å hindre kollisjoner mellom alle entiteter som har komponentene posisjon og størrelse.

I sudoku prosjektet vil det være ett system pr regel i sudoku (og andre regler som ikke er i classic sudoku), ett system for å håndtere input, ett for å håndtere highlighting av celler, osv.
For eksempel vil Highlight være en komponent som settes på entiteter som er celler.

Fortsatt usikker på om dette vil gå i det hele tatt, i prinsippet skal jo et system stå for rendering også, noe som ikke helt passer med React. Hadde man laget et mer typisk spill ville jo rendering systemet rendret til en canvas. Men her må jo isåfall et rendering system generere JSX som stappes inn i en container, tror kanskje det blir vanskelig å få til uten å knekke React, så det blir nok en liten variant her :stuck_out_tongue:

1 Like