Toon posts:

Ik heb avondklokverklaring-app gemaakt

Pagina: 1
Acties:

  • melvinroest
  • Registratie: Januari 2021
  • Laatst online: 28-01-2021
@mods: ik had het in het Themaforum (Coronavirus) geplaatst als ik daar toegang tot had.

Hoi Tweakers,

Ik zit normaal op Hacker News en dacht ik doe een Show HN maar dan in Nederland, dus via Tweakers :P

In mijn omgeving kwam ik en vrienden wat mensen tegen die moeite hadden met het digitaal invullen van de avondklokverklaring (dit is de uitleg). Hopelijk zal dat wat makkelijker gaan met de web app. Dat is de intentie in ieder geval.

De avondklok zit er alweer voor de helft op, en ik hoop dat het 9 feb voorbij is, maar mocht er iemand nog een digitale verklaring in willen vullen

Hoe goed bedoeld ook, spam, reclame voor eigen producten, is hier niet toegestaan.

Nu door naar het leukste gedeelte van de post!

De tech:
Alles wordt client-side gegenereerd, en dat vond ik wel een leuke uitdaging om het puur client-side te houden. Ik vermoed dat het wat makkelijker geweest was om via een client-server model te werken, vooral voor het genereren van PDFs, maar dit is schaalbaarder? :D

Wat ik heb gebruikt:
* ReactJS
* Local Storage (voor state, Redux was teveel toeters en bellen voor dit project)
* IndexedDB (om PDF op te slaan)
* Nginx
* Docker (waarom daemonizen via systemd als het ook via Docker kan? :') )
* Digital Ocean

Wat leuke libraries:
* pdf-lib (voor PDF generatie)
* react-pdf (voor PDF weergave op mobiel)

Meest obscure technische challenge: het dealen met PDFs!
Zo is het bijvoorbeeld onmogelijk om cross-mobile/browser een werkende download knop te hebben voor de gegenereerde PDF. Chrome op iOS vertikt het. Hetzelfde geldt voor het weergeven van PDFs, met react-pdf was het enigszins te doen maar iframes, objects en embeds hadden allemaal hun eigen cross-mobile/browser kwalen.

Maar de leukste challenge is het volgende stuk code!

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const orientation = await getOrientationJpgPromise(fileStringBase64);
const orientationOptions = getOrientationOptions(orientation);

const originX = page.getWidth() / 2;
const originY = page.getHeight() / 2;
page.pushOperators(
  pushGraphicsState(),
  concatTransformationMatrix(1, 0, 0, 1, originX, originY), //translate
  concatTransformationMatrix(
    Math.cos(orientationOptions.rotateCW), //rotate
    -Math.sin(orientationOptions.rotateCW),
    Math.sin(orientationOptions.rotateCW),
    Math.cos(orientationOptions.rotateCW),
    0,
    0
  ),
  concatTransformationMatrix(1, 0, 0, 1, -1 * originX, -1 * originY) //put back
);
page.drawImage(jpgImage, {
  x: originX - jpgDims.width / 2,
  y: originY - jpgDims.height / 2,
  width: jpgDims.width,
  height: jpgDims.height,
});


De browser negeert de orientatie van hoe de mobiel een foto neemt. Het gevolg: elke foto wordt in landscape mode opgeslagen! Dit stuk code zorgt ervoor dat het de orientatie vindt en de juiste lineaire algebra gebruikt om op de juiste manier naar de portrait mode te roteren. Dit is de tweede keer dat ik dit soort wiskunde moest gebruiken in een front-end project. Heb ik toch nog iets aan mijn wiskunde vakken van vroeger ;-)

Feedback is welkom!

[Voor 10% gewijzigd door Ardana op 28-01-2021 16:01]




Google Pixel 7 Sony WH-1000XM5 Apple iPhone 14 Samsung Galaxy Watch5, 44mm Sonic Frontiers Samsung Galaxy Z Fold4 Insta360 X3 Nintendo Switch Lite

Tweakers is samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer onderdeel van DPG Media B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee