This is one of my first own apps which I have been created. In the past I used GetX as a state management and also for a lot more stuff. I decided to abandon GetX and go further with Riverpod. For all other things there are always a lot of alternatives e.g. Autorouter for routing. The app is a simple shopping list with only a few screens, but with a backend using Laravel, so it can be used anywhere. I decided to use Laravel over Firebase mainly because it's really free. I show here some screen shots. The language used in the app is German, because it's intended only to use inside of the family.&nbsp;&nbsp;See also my <a href="https://www.youtube.com/watch?v=ckoCpbTdfXk&amp;ab_channel=OlyPhotographer" target="_blank" rel="noopener noreferrer">video</a>…&nbsp;&nbsp;<figure class="table"><table><tbody><tr><td style="background-color:hsl(0, 0%, 90%);text-align:center;"><figure class="image image-style-align-center image_resized" style="width:87.1%;"><img src="/uploads/simulator_screenshot_D2_B1_CAE_3_BB_24_41_EA_81_D9_FE_4_DF_1_A6385_F_3f18974711.png"><figcaption>Entry screen</figcaption></figure></td><td style="background-color:hsl(0, 0%, 90%);text-align:center;"><figure class="image image-style-align-center image_resized" style="width:82.02%;"><img src="/uploads/Simulator_Screen_Shot_i_Phone_14_2022_10_16_at_10_17_41_06286a4fd7.png"><figcaption>List of articles to pick, the list can be reordered by dragging.</figcaption></figure>&nbsp;</td><td style="background-color:hsl(0, 0%, 90%);text-align:center;"><figure class="image image-style-align-center image_resized" style="width:84.59%;"><img src="/uploads/simulator_screenshot_DFB_0_F9_BA_27_AD_415_F_AE_1_C_2_FC_0_DE_5_DE_6_C4_553ce20a00.png"><figcaption>Details</figcaption></figure></td></tr></tbody></table></figure>&nbsp;&nbsp;<figure class="table"><table><tbody><tr><td style="background-color:hsl(0, 0%, 90%);text-align:center;"><figure class="image image_resized" style="width:90.14%;"><img src="/uploads/simulator_screenshot_60316_B28_40_E1_4_B90_9452_672_EBB_79_EE_6_A_fa7bfc06dd.png"><figcaption>Possible actions on the right side, on the left side the action is delete</figcaption></figure>&nbsp;</td><td style="background-color:hsl(0, 0%, 90%);"><figure class="image image_resized" style="width:89.05%;"><img src="/uploads/simulator_screenshot_5_B6_C057_A_D611_43_CC_9213_019_F84_E5560_B_a2a00422d2.png"><figcaption>Edit details, one can upload also an image, set the category or change the retailer</figcaption></figure></td><td style="background-color:hsl(0, 0%, 90%);"><figure class="image image_resized" style="width:82.74%;"><img src="/uploads/simulator_screenshot_958662_B4_A8_EC_4_C73_815_F_6_B16_CFC_06380_1cbb36320b.png"><figcaption>By clicking on the icon on the right side, one can set this entry to “purchased” on the top of the screen, on the right side one can filter the list to show only the items which must be picked, already are picked or are not activated.</figcaption></figure></td></tr></tbody></table></figure><figure class="table"><table style="background-color:hsl(0, 0%, 90%);"><tbody><tr><td><figure class="image image-style-align-right image_resized" style="width:93.07%;"><img src="/uploads/simulator_screenshot_4_DD_42_B91_09_C3_4_A8_C_BD_4_B_ED_6811_E12653_cbe0a912b8.png"><figcaption>Filtered for all already picked entries, one can set them to every status wanted, by simply click on the right icon.</figcaption></figure>&nbsp;&nbsp;</td><td><figure class="image image_resized" style="width:93.71%;"><img src="/uploads/simulator_screenshot_624_DEB_12_12_DD_438_C_91_B0_0_EC_2_E55_B8_A78_562a1bacd1.png"><figcaption>The list of all inactivated entries, here empty</figcaption></figure></td><td><figure class="image image_resized" style="width:83.96%;"><img src="/uploads/simulator_screenshot_BCBF_3_BF_1_3364_46_E5_8_D03_0224238_A5276_946aa67a4c.png"><figcaption>It's also possible to print the list</figcaption></figure></td></tr></tbody></table></figure>&nbsp;<figure class="table"><table style="background-color:hsl(0, 0%, 90%);"><tbody><tr><td><figure class="image image_resized" style="width:88.05%;"><img src="/uploads/simulator_screenshot_192739_CD_B100_4_E81_960_A_D172_F894_A6_CC_71437f4c69.png"><figcaption>List of categories. A category which belongs to entries cannot be deleted. Here one can add, maintain category</figcaption></figure></td><td><figure class="image image_resized" style="width:88.22%;"><img src="/uploads/simulator_screenshot_0_D743_E18_855_A_43_DB_88_D4_F3_AC_36426704_fc0aa52510.png"><figcaption>Details of a category, it's possible to add images</figcaption></figure></td><td><figure class="image image_resized" style="width:81.07%;"><img src="/uploads/simulator_screenshot_8881_F555_3_BA_0_43_E1_B7_BD_E4_D0_CCC_9_AFFC_332277f09b.png"><figcaption>The list of available retailers, only activated retailers will be shown on the entry screen. Retailers can be added and maintained from this screen.</figcaption></figure></td></tr></tbody></table></figure>I decided not to offer the possibility to maintain countries and currencies in the app but in the backend.&nbsp;<h3>Backend view:</h3>&nbsp;View on the categories<figure class="image"><img src="/uploads/image_ef6da891b7.png"></figure>&nbsp;Countries&nbsp;<figure class="image"><img src="/uploads/image_d06e3d8fb8.png"></figure>All others tables have similar backend screens.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cheers….&nbsp;&nbsp;

One of my own apps

Flutter shopping list

I decided to learn Flutter/Dart (again). Some year before I started the first trial with Flutter, but had some problems to understand the architecture and all the widgets. Now I started a new trial by using &nbsp;youtube videos from <a href="https://www.youtube.com/c/dbestech," target="_blank" rel="noopener noreferrer">https://www.youtube.com/c/dbestech</a><a href="https://www.youtube.com/c/dbestech,">,</a> which I really like and which I can only recommend. One need a lot of time to follow the course, when you want to code along which always should be done.The App is Shop App, it contains a lot of different widgets and techniques and it's built on a API (Laravel backend), but with the knowledge you will get, it's easy also to use e.g. Strapi as the backend.&nbsp; The course is well structured the teacher speaks a very understandable English, even for a non-native speaker. He is not coding without explaining what he is doing and why. It's really astonishing that there are people which invest so much time without to get a monetary benefit.Here are some screen shots of pages you will create during the course, at the end there are a lot more.<figure class="table"><table><tbody><tr><td><figure class="image image-style-align-center image_resized" style="width:85.54%;"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_03_at_15_19_13_c18f07bc83.png"></figure></td><td><figure class="image image-style-align-center image_resized" style="width:85.26%;"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_03_at_15_28_53_d8c7af4bae.png"></figure></td><td><figure class="image image-style-align-center image_resized" style="width:91.6%;"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_03_at_15_31_16_78c801a561.png"></figure></td></tr></tbody></table></figure>I have not yet finished the course which lasts for more then 25 hours, but the first 13 hours :-)&nbsp;Now the app evolves. Adding a Laravel based backend (the code can be taken from the GitHub repo from the author), it took me several hours to install on my Mac. In the past I used Laravel also for some projects, but decided later to go a different route, because it's difficult to handle several programming languages as a single developer. As a JS programmer it's much easier to use node.js for the backend.&nbsp;&nbsp;With the local backend the access to the data is way faster and we can create the sign up and sign in functionality on Flutter.&nbsp;<figure class="table"><table><tbody><tr><td><figure class="image"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_15_at_08_48_32_2eb079cb1d.png"></figure></td><td><figure class="image"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_15_at_08_47_43_7151d228dc.png"></figure></td><td><figure class="image"><img src="/uploads/Simulator_Screen_Shot_i_Phone_12_Pro_2022_06_15_at_08_47_34_af2ab4cba7.png"></figure></td></tr></tbody></table></figure>It really needs a lot of time to code along with the author, but it's the best way for learning. It's also important to think about the solution and trying out things by yourself.&nbsp; &nbsp;&nbsp;August 2022,In the meantime we added also GeoLocations, Paypal and a lot more. It's very interesting but I decided now to start developing my own apps. Flutter is amazing and I will stay with it.&nbsp;&nbsp;&nbsp;&nbsp;

Something about Flutter

Flutter

I decided to try out Quasar.js 2 and Vue.js 3 together with capacitor to create an app for my IOS devices. Some times ago I made my first trials with older versions of Quasar and Vue. I stopped then with the upcoming of Vue 3, because I really disliked the composition API. Now since we got the new script setup, which makes things much easier, I decided to give it a new chance.What helped me a lot are the postings from <a href="https://www.youtube.com/c/MakeAppswithDanny/featured" target="_blank" rel="noopener noreferrer">Danny Connel</a> and also <a href="https://www.youtube.com/c/LukeDiebold/videos" target="_blank" rel="noopener noreferrer">Luke Diebold</a> on Twitter but also their videos on Youtube.Developing a real app is somewhat a challenge. You need not only a development environment like VSCode but also XCode on a Mac, you also need an Apple developer account and the settings are a little bit complicated. Of course you don't need all of them to start, it's enough to start with as basic quasar setup and VSCode. Quasar has a lot of components which can be used directly and you can use more or less any JS library and Vue extensions. So, I also started with Pinia as the new and easy to use state management. The fact is that you don't even need Pinia for state management. Danny Connel shows in a video that this can be done with Vue 3. The App is a simple “Memories” app where the user can add an entry, with a title, description a date and an image. I made this app first with React and Ionic and decide then to do the same with Vue and Quasar. Ionic and Quasar have a lot of high quality components. The only thing I really dislike is that Quasar using Materialdesign generally, so an app on an IOS device looks the same as on an Android device.&nbsp;&nbsp;The story continues…

An app based on this combo

Quasar 2 and Vue.js 3

<h1>Canon R5</h1>Ich habe mir diese Kamera nach dem Verkauf meiner Olympusausrüstung angeschafft.Ich wollte wieder eine Kamera die nicht nur eine bessere Auflösung bietet sondern auch mit höheren ISO Werten klar kommt. Ich habe es schade gefunden,dass bei der EM1-3, Olympus es nicht geschafft hat der EM1-3 einen adäquaten C-AF zu spendieren wie er in der EM1-X implementiert wurde. Argumentiert wurde dies durch das Fehlen des zusätzlichen dedizierten AF Prozessors, wie er in der EM1-X vorhanden ist.Nur was bedeutet das?&nbsp;Einen richtig guten C-AF für BIF gibt es nur wenn man sich einen kleinen Ziegelstein anschafft?Mit der R5 kam auch die R6 heraus, die R6 hat "nur" ca. 20MPix, gut - reicht meistens auch, 30MP wären halt ideal gewesen. Leider wurden auch noch andere Sachen unnötig abgespeckt. So zum Beispiel die C-Modes bei Video, wie auch die Frameraten bei 4K.Ich bin mit der Bildqualität mehr als zufrieden. Auch das 24-105 STM ist qualitativ sehr gut, ich habe mich deshalb entschieden das 24-240mm zu kaufen, zuerst war das 24-105mm f4 L Objektiv geplant, aber das 24-240 ist schon sehr universell und kann gut als quasi Immerdrauf verwendet werden wenn man nicht geplant fotografieren geht und nur ein Objektiv mitnehmen will..Im Moment sieht dann das zur Verfügung stehende Objektivsortiment wie folgt aus:<ul style="list-style-type:square;"><li>RF 15-35mm f2.8 L IS USM</li><li>RF 24-240mm f4.0-6.4 IS USM</li><li>RF 600mm f11 IS STM</li><li>RF 100-500mm F4.5-7.1 L IS USM</li><li>RF 35mm F1.8 MACRO IS STM</li><li>RF 100mm F2.8 Macro IS USM</li></ul>Das 100-500mm ist natürlich nicht wirklich ein Ersatz für das 600mm STM, man kann diese beiden Linsen nicht miteinander vergleichen. Weder von der Brennweite, der Anwendbarkeit, Lichtstärke noch vom Preis. Es wäre natürlich schön gewesen wenn das 100-500mm eine Blende von 6.4 bei 500mm zum gleichen Preis gehabt hätte, nun, leider ist das nicht so. Aber auch so ist das Zoom halt doch etwas Lichtstärker als die Festbrennweite und dennoch recht kompakt. Das Objektiv ist qualitativ sehr hochwertig, die Schärfe in allen Brennweiten sehr gut, der AF superschnell. An der R5 mit dem 1.6 Cropmode kommt man am langen Ende auf 800mm.&nbsp;Ich habe mir noch den 1.4 TC bestellt, damit kommt man mit dem 100-500mm bei voller Auflösung auf 700mm, der Nachteil - man kann den TC nur ab 300mm verwenden, das bedeutet man muss das Objektiv auch auf diese Brennweite ausfahren und kann es dann bei angesetztem TC nicht mehr weiter einfahren. Schade!&nbsp;Hier ein Beispiel ohne TC.<figure class="image"><img src="/uploads/aa0aa3aa_7f65_4739_b1fd_da1e89715c37_281bee2bb3.jpg"></figure>Das 100mm Makro war der letzte Zugang, ich hoffe es im kommenden Frühling öfter einzusetzen.&nbsp;

die hochauflösende DSLM

Canon R5

<blockquote>Prerequisites: You need a GitHub repo from your app. This is also essential for deployments of changes in your app.</blockquote>You need root access for your VPS. Open a terminal and change to the folder /etc/nginx/sites-enabled. Commonly there is only a file named default.&nbsp; Edit this file by using nano with "sudo nano default".You need to change the values, yourdomain.com to your real domain name and also adjust the root folder and the “your_lets_encrypt_folder”. I'm using only ssl connections, because nowadays nothing else will really work.We need the proxy pass, because our app will run under localhost:3000.<pre><code class="language-plaintext">server {
# Listen HTTPS
 listen 443 ssl;
 listen [::]:443 ssl;
 server_name yourdomain.com;

 # the app is inside 
 root /var/www/blog;

 # Add index.php to the list if you are using PHP
 index index.html index.htm;

 location / {
 proxy_pass http://localhost:3000;
 proxy_http_version 1.1;

 proxy_set_header X-Forwarded-Host $host;
 proxy_set_header X-Forwarded-Server $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 proxy_set_header Host $http_host;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "Upgrade";
 }

# SSL Config
 ssl_certificate /etc/letsencrypt/live/your_lets_encrypt_folder/fullchain.pem;
 ssl_certificate_key /etc/letsencrypt/live/your_lets_encrypt_folder/privkey.pem;

}</code></pre>Now restart the nginx server<pre><code class="language-plaintext">sudo systemctl restart nginx</code></pre>You need to deploy your app from GitHub to your VPS. So change the folder to /var/www and create a folder named blog (or whatever you want)Adjust the authorization by using<pre><code class="language-plaintext">sudo chown your-username:www-data /blog -R</code></pre>Now you can clone your GitHub repo:<pre><code class="language-plaintext">git clone your_repo /blog</code></pre>Maybe you have to adjust the authorization again for the complete folder by repeating the step:<pre><code class="language-plaintext">sudo chown your-username:www-data /blog -R</code></pre>If you are using a .env file, then you have to add this file, please be aware that things should be different from dev to prod and never add the .env* files to your GitHub repo!You can add such a file simple by using sudo nano .envChange the folder to /var/www/blog.Now run&nbsp;<pre><code class="language-plaintext">npm run install</code></pre>you need to install all dependencies from your package.json fileAfter that, run<pre><code class="language-plaintext">npm run build</code></pre>to build you productive environmentYou can now test your app by running<pre><code class="language-plaintext">npm run start</code></pre>The next step ist to run the process by using a process manager like pm2. Maybe you need to install it with npm i -g pm2.Now let's start our Next.js app and name it “blog”<pre><code class="language-plaintext">pm2 start npm --name blog -- start</code></pre>We can check the process with<pre><code class="language-plaintext">pm2 list</code></pre><pre><code class="language-plaintext">┌─────┬─────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status 
├─────┼─────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────
│ 1 │ blog │ default │ N / A │ fork │ 17512 │ 2m │ 0 │ online 
└─────┴─────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────</code></pre>&nbsp;&nbsp;&nbsp;

using nginx as a server

Deploying a Next.js app to a VPS

I'm using Strapi V4 for this blog. It was not so easy to implement all my requirements, mainly due the circumstances that I don't know Strapi very well.The biggest advantage for me is the admin interface, so I didn't have to create this myself like with my other Node.js applications. This was always a very time consuming task and also rather boring.&nbsp;The interface could also be better with Strapi. For example, it would be nice to be able to use mass operations for changes and not only for deletions, or why not have the possibility to change an entry from true to false or vice versa by only clicking on the field.However, after a certain period of familiarization and after I have understood the concept so far, things become easier.&nbsp;For me it was very important to have refresh cookies and not only web tokens. The reason for that is that web tokens (especially in Strapi) have a very long validity. When storing these tokens in the local storage (which is a common solution) you exposing them to xss attacks - at least it's possible.&nbsp;Another problem to be aware is, that web tokens are valid until they expire, there is no practically solution to invalidate them. The only way is to change the secret key on the server, but then all tokens will become invalid, which is annoying for all users, because they lose all their sessions. A stolen token can be used until its expired and this is really dangerous. A token represents nothing else then the users credentials. This is one should be aware of.By using refresh cookies one can set the expiry period to a short value, e.g. 5 minutes. The refresh cookie can have a much longer expiry period, it's important to set the properties correct. This means:<ul><li>http only (so the content cannot read out by javascript)</li><li>samesite strict (the cookie will only sent back to the which has created it)</li><li>secure (the cookie content will be encrypted)</li></ul>With the correct settings it's hard to steal the refresh cookie.&nbsp;So I decided to implement refresh cookies in Strapi.&nbsp;&nbsp;&nbsp;For more informations see my repo on <a href="https://github.com/olyphotographer/strapi-refresh-tokens" target="_blank" rel="noopener noreferrer">Github</a><hr>Starting Strapi as a service using yarn<pre><code class="language-plaintext">pm2 start yarn --name strapi -- start</code></pre>

using Strapi as the backend

Strapi a headless CMS

<h1 style="margin-left:0px;text-align:center;">ENTDECKE JETZT DIE RIGI!</h1>&nbsp;Raus aus dem Alltag, rein in das Erlebnisreich Rigi. Jetzt ist die beste Zeit dazu. Mitten in der Zentralschweiz gelegen, ist die Rigi aus jeder Himmelsrichtung bestens erreichbar. Mit der Bergbahn geht’s hinauf, mitten in die imposante Bergwelt. Aussteigen, geniessen – ganz einfach.&nbsp;<figure class="image"><img src="/uploads/rigi_drohne_5f83dfd07f.jpeg"></figure>