cleanup images

This commit is contained in:
Niccolo Borgioli 2024-12-01 17:20:16 +01:00
parent a8995c7428
commit 65eb4bb712
20 changed files with 26 additions and 203 deletions

View File

@ -17,18 +17,6 @@ Here are some small features that may not be apparent to the newer devs that lev
4. Syncing settings 4. Syncing settings
5. Reformatting 5. Reformatting
<figure>
![](images/cards-1024x567.jpg)
<figcaption>
Photo by [Matt Flores](https://unsplash.com/@matdflo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
## Double Shift ## Double Shift
For many including myself this is the primary way to navigate code and files. Simply press shift two times, type in the file, class or function you are searching for and press enter. This is by far the quickest and most accurate way to navigate code in any Editor or IDE I've tried so far. For many including myself this is the primary way to navigate code and files. Simply press shift two times, type in the file, class or function you are searching for and press enter. This is by far the quickest and most accurate way to navigate code in any Editor or IDE I've tried so far.

View File

@ -14,18 +14,6 @@ Since [React](https://reactjs.org/) 16.8 was published in February Hooks are now
All the code shown can be found here: [https://git.nicco.io/cupcakearmy/guide-react-hooks](https://git.nicco.io/cupcakearmy/guide-react-hooks) All the code shown can be found here: [https://git.nicco.io/cupcakearmy/guide-react-hooks](https://git.nicco.io/cupcakearmy/guide-react-hooks)
<figure>
![](images/matt-artz-353210-unsplash-1024x780.jpg)
<figcaption>
wrenches - new tools
</figcaption>
</figure>
#### What we will look at today #### What we will look at today
1. Class Components vs Functional Components 1. Class Components vs Functional Components

View File

@ -11,18 +11,6 @@ coverImage: './images/tobias-fischer-PkbZahEG2Ng-unsplash-scaled.jpg'
Backing up a mongo instance is more confusing than it should be. Maybe you have run into a `the input device is not a TTY` or you simply don't know how to do it? Here are two 1-Liner to backup and restore a running mongo instance. Backing up a mongo instance is more confusing than it should be. Maybe you have run into a `the input device is not a TTY` or you simply don't know how to do it? Here are two 1-Liner to backup and restore a running mongo instance.
<figure>
![](images/tobias-fischer-PkbZahEG2Ng-unsplash-1024x497.jpg)
<figcaption>
Photo by [Tobias Fischer](https://unsplash.com/@tofi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/database?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
## Setup ## Setup
First we define our mongo instance like below. Notice that instead of mapping the data directory onto our filesystem we have a native volume. First we define our mongo instance like below. Notice that instead of mapping the data directory onto our filesystem we have a native volume.

View File

@ -1,6 +1,7 @@
--- ---
title: "Be your own (tiny) image CDN" title: 'Be your own (tiny) image CDN'
date: "2023-04-28" date: '2023-04-28'
coverImage: './images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg'
--- ---
Today, I want to share how to create and host your own image transformation service, much like the known [Imgix](https://imgix.com/) and [Cloudinary](https://cloudinary.com/). The aim is to have a powerful transformation server for images that caches, so images only need to be computed once. Today, I want to share how to create and host your own image transformation service, much like the known [Imgix](https://imgix.com/) and [Cloudinary](https://cloudinary.com/). The aim is to have a powerful transformation server for images that caches, so images only need to be computed once.
@ -9,7 +10,7 @@ The building blocks will be [imgproxy](https://github.com/imgproxy/imgproxy) and
<figure> <figure>
![](images/meagan-carsience-QGnm_F_nd1E-unsplash1-1024x683.jpg) ![](images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg)
<figcaption> <figcaption>

View File

@ -15,18 +15,6 @@ Recently I've been taking my tin foil hat a bit more seriously and since I mostl
TLDR: I wrote this [cleaning script](https://gist.github.com/CupCakeArmy/51070b311e6fd0a3f2d793bee3350ede) (tested only on macOS) to remove all duplicates from the [Google Takeout](https://takeout.google.com/) folders. TLDR: I wrote this [cleaning script](https://gist.github.com/CupCakeArmy/51070b311e6fd0a3f2d793bee3350ede) (tested only on macOS) to remove all duplicates from the [Google Takeout](https://takeout.google.com/) folders.
<figure>
![](images/rayan-almuslem-1302778-unsplash-1024x683.jpg)
<figcaption>
Photo by [Rayan Almuslem](https://unsplash.com/photos/_aPYcEKtDQ0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/camera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
The process seemed easy at first. Google offers an awesome tools for exporting data out of their servers. It's called [Takeout](https://takeout.google.com/). So basically you select the Google Photos service and let them create the archives. Then after a few hours you can download them. The process seemed easy at first. Google offers an awesome tools for exporting data out of their servers. It's called [Takeout](https://takeout.google.com/). So basically you select the Google Photos service and let them create the archives. Then after a few hours you can download them.
Now at the time I had ~40gb worth of pictures and videos saved in Googles cloud, however the archives I downloaded where about ~90gb. I started looking into it and a lot of photos where duplicates and edited versions that google was keeping. In addition the folders where full of JSON metadata. Now at the time I had ~40gb worth of pictures and videos saved in Googles cloud, however the archives I downloaded where about ~90gb. I started looking into it and a lot of photos where duplicates and edited versions that google was keeping. In addition the folders where full of JSON metadata.

View File

@ -9,7 +9,7 @@ tags:
- 'npm' - 'npm'
- 'pnpm' - 'pnpm'
- 'yarn' - 'yarn'
coverImage: './images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash-scaled.jpg' coverImage: './images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg'
--- ---
If you are a JS developer you probably use NPM multiple times a day without thinking about it. It's the default package manager which ships with node. If you are a JS developer you probably use NPM multiple times a day without thinking about it. It's the default package manager which ships with node.
@ -24,18 +24,6 @@ If you are having troubles with pnpm try using `pnpm i shamefully-flatten`. Than
For the lazy readers: [Jump to the conclusion here](#conclusion). For the lazy readers: [Jump to the conclusion here](#conclusion).
<figure>
![](images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg)
<figcaption>
Photo by [Ruchindra Gunasekara](https://unsplash.com/@ruchindra?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
You might wonder now: why? _Why should I bother reading this when NPM works perfectly_? Is this just another run to the latest framework? Don't worry: there are actual reasons you might want to switch. You might wonder now: why? _Why should I bother reading this when NPM works perfectly_? Is this just another run to the latest framework? Don't worry: there are actual reasons you might want to switch.
#### Speed!!... or the lack of it? #### Speed!!... or the lack of it?

View File

@ -1,13 +1,13 @@
--- ---
title: "How to search in the JAM" title: 'How to search in the JAM'
date: "2020-12-06" date: '2020-12-06'
categories: categories:
- "coding" - 'coding'
tags: tags:
- "jam-stack" - 'jam-stack'
- "lunr" - 'lunr'
- "search" - 'search'
- "svelte" - 'svelte'
--- ---
So a lot (me included) now are building JAM stack landing pages, shops, full-stack apps, etc. and while you can have a backend of course not all of them have. For those who don't: **How do we search?** So a lot (me included) now are building JAM stack landing pages, shops, full-stack apps, etc. and while you can have a backend of course not all of them have. For those who don't: **How do we search?**
@ -23,7 +23,7 @@ We will look at the following:
<figure> <figure>
![Telescope](images/uriel-soberanes-gCeH4z9m7bg-unsplash-991x1024.jpg) ![Telescope](images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg)
<figcaption> <figcaption>

View File

@ -22,7 +22,7 @@ Trying to be everything at the same time comes at a cost. And that is generally
<figure> <figure>
![](images/pawel-nolbert-xe-ss5Tg2mo-unsplash-1024x740.jpg) ![](images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg)
<figcaption> <figcaption>
@ -44,7 +44,7 @@ A few weeks ago [Nextcloud 21](https://nextcloud.com/blog/nextcloud-hub-21-out-w
<figure> <figure>
![](images/Screenshot-2021-03-23-at-10.58.31-1-1024x325.png) ![](images/Screenshot-2021-03-23-at-10.58.31.png)
<figcaption> <figcaption>

View File

@ -17,18 +17,6 @@ I don't want to spy on people, nor set cookies and annoy people with consent ban
This is important to mention as the next steps could sound a bit nefarious otherwise. This is important to mention as the next steps could sound a bit nefarious otherwise.
Data collected on this site is 100% anonymous and [GDPR](https://gdpr.eu/) compliant. Data collected on this site is 100% anonymous and [GDPR](https://gdpr.eu/) compliant.
<figure>
![](images/luke-chesser-JKUTrJ4vK00-unsplash-1024x683.jpg)
<figcaption>
Photo by [Luke Chesser](https://unsplash.com/@lukechesser?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/data?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
Since Matomo is the de facto way to go, I spun up the Matomo server with my trusted docker-traefik setup and was up and running in no time. Since Matomo is the de facto way to go, I spun up the Matomo server with my trusted docker-traefik setup and was up and running in no time.
( I'll share the config files if anyone is interested at the bottom. ) ( I'll share the config files if anyone is interested at the bottom. )

View File

@ -1,6 +1,7 @@
--- ---
title: 'Monitor your self hosted services for free' title: 'Monitor your self hosted services for free'
date: '2022-07-07' date: '2022-07-07'
coverImage: './images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg'
tags: tags:
- self-host - self-host
- monitoring - monitoring
@ -8,18 +9,6 @@ tags:
Monitoring services requires external resources, as monitoring your server(s) from the server itself does not make sense. Renting a whole server for monitoring is a bit of a resources (and money) waste. Monitoring services requires external resources, as monitoring your server(s) from the server itself does not make sense. Renting a whole server for monitoring is a bit of a resources (and money) waste.
<figure>
![](images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg)
<figcaption>
Photo by [Daniele Franchi](https://unsplash.com/@daniele_franchi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/radar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
## Getting a free VM ## Getting a free VM
Luckily we can leverage the free tiers of many cloud providers. This gives us a free option and stability as they tend to be very reliable. Below is a list of free tiers available form the big 3 players. All of them offer a free VM per month, which is more than sufficient for our needs. Luckily we can leverage the free tiers of many cloud providers. This gives us a free option and stability as they tend to be very reliable. Below is a list of free tiers available form the big 3 players. All of them offer a free VM per month, which is more than sufficient for our needs.

View File

@ -115,6 +115,6 @@ const App = () => <div>
There is a little codesanbox below with all the code if you wanna try for yourself (you should! 😉) There is a little codesanbox below with all the code if you wanna try for yourself (you should! 😉)
<iframe src="https://codesandbox.io/embed/code-splitting-1x3s3?autoresize=1&amp;fontsize=14&amp;module=%2Fsrc%2FApp.jsx" title="Code Splitting" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> <iframe src="https://codesandbox.io/embed/code-splittings3?autoresize=1&amp;fontsize=14&amp;module=%2Fsrc%2FApp.jsx" title="Code Splitting" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
This concludes todays look at how to reduce the bundle size and use code splitting in react. Note that this does not work with server side rendering. This concludes todays look at how to reduce the bundle size and use code splitting in react. Note that this does not work with server side rendering.

View File

@ -12,18 +12,6 @@ coverImage: './images/guillaume-bolduc-259596-unsplash-scaled.jpg'
If you find yourself writing long docker-compose files because you need to specify the same things over and over again inside of the single services: **fear no more**! If you find yourself writing long docker-compose files because you need to specify the same things over and over again inside of the single services: **fear no more**!
<figure>
![](images/guillaume-bolduc-259596-unsplash-1024x741.jpg)
<figcaption>
Photo by [Guillaume Bolduc](https://unsplash.com/photos/uBe2mknURG4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/container?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
_Without further ado:_ _Without further ado:_
``` ```

View File

@ -14,18 +14,6 @@ We all have used OAuth at some point. Whether with SSOs or a simple authorizatio
I am going to assume some basic OAuth knowledge. [Here](https://medium.com/@darutk/the-simplest-guide-to-oauth-2-0-8c71bd9a15bb) is a basic explanation. [This](https://aaronparecki.com/oauth-2-simplified/) is a quick more in depth article. I am going to assume some basic OAuth knowledge. [Here](https://medium.com/@darutk/the-simplest-guide-to-oauth-2-0-8c71bd9a15bb) is a basic explanation. [This](https://aaronparecki.com/oauth-2-simplified/) is a quick more in depth article.
<figure>
![](images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-1024x484.jpg)
<figcaption>
Photo by [Jielin Chen](https://unsplash.com/@jerrychan0328?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/fence?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
#### Quick refresher on implicit vs code flows #### Quick refresher on implicit vs code flows
As mentioned above there are [multiple flows](https://oauth.net/2/) in the [OAuth2 spec](https://tools.ietf.org/html/rfc6749), but in reality only the **_code_** and **_implicit_** are really used. The big difference between the two ist that in the **_code_** flow the there is a pre-shared password. This requires a backend, so the code flow cannot be used in SPAs. As mentioned above there are [multiple flows](https://oauth.net/2/) in the [OAuth2 spec](https://tools.ietf.org/html/rfc6749), but in reality only the **_code_** and **_implicit_** are really used. The big difference between the two ist that in the **_code_** flow the there is a pre-shared password. This requires a backend, so the code flow cannot be used in SPAs.
@ -66,7 +54,7 @@ Below is a diagram by [Auth0](https://auth0.com/) which helped me understand the
<figure> <figure>
![](images/auth-sequence-auth-code-pkce-1024x833.png) ![](images/auth-sequence-auth-code-pkce.png)
<figcaption> <figcaption>

View File

@ -21,18 +21,6 @@ The languages that came to mind were Rust, Go, Kotlin and Swift and I wanted to
What follows are the experiences I made as a mostly TS/JS/Python developer going into Go and learning as I went along. I did not have prior Go experience except some hello world examples here and there. What follows are the experiences I made as a mostly TS/JS/Python developer going into Go and learning as I went along. I did not have prior Go experience except some hello world examples here and there.
<figure>
![](images/mark-autumns-Ssr26I0QWVY-unsplash-1024x683.jpg)
<figcaption>
Bridge
</figcaption>
</figure>
## Setup ## Setup
I code on macOS so setup was easy: just run `brew install go` and be done with it. Or so I thought so. The whole `GOPATH` and `GOROOT` is not as straight forward. To this day I have not completely comprehended what they do so I will not even try explain it. I set mine to the following and everything worked after that. I code on macOS so setup was easy: just run `brew install go` and be done with it. Or so I thought so. The whole `GOPATH` and `GOROOT` is not as straight forward. To this day I have not completely comprehended what they do so I will not even try explain it. I set mine to the following and everything worked after that.

View File

@ -21,18 +21,6 @@ Today we will have a look at how telegram bots are written and show some base co
2. A bot that has **persistence** and will save a list of items we can add. 2. A bot that has **persistence** and will save a list of items we can add.
3. (bonus round) Dockerize the bot for running it everywhere. 3. (bonus round) Dockerize the bot for running it everywhere.
<figure>
![](images/arseny-togulev-1513013-unsplash-1024x576.jpg)
<figcaption>
Photo by [Arseny Togulev](https://unsplash.com/@tetrakiss?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/robot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
#### Here we go 🤖 #### Here we go 🤖
The first thing we need is a bot. To register one you need to talk to the [@BotFather](https://telegram.me/BotFather) (with your normal telegram account). Then simply enter the `[/newbot](tg://bot_command?command=newbot)` command. You will be asked the name and the @handle for your bot. The handle need to end in `bot`. The first thing we need is a bot. To register one you need to talk to the [@BotFather](https://telegram.me/BotFather) (with your normal telegram account). Then simply enter the `[/newbot](tg://bot_command?command=newbot)` command. You will be asked the name and the @handle for your bot. The handle need to end in `bot`.
@ -54,7 +42,7 @@ Response after successful bot registration
<figure> <figure>
![](images/IMG_0160-1024x436.jpeg) ![](images/IMG_0160.jpeg)
<figcaption> <figcaption>
@ -277,7 +265,7 @@ def main():
//... //...
``` ```
![](images/IMG_1711-653x1024.jpeg) ![](images/IMG_1711.jpeg)
I believe telegram bots can be a great alternative if a full fledged app is an overkill. There are a lot of featured that where not mentioned here, especially custom keyboards. I believe telegram bots can be a great alternative if a full fledged app is an overkill. There are a lot of featured that where not mentioned here, especially custom keyboards.

View File

@ -16,18 +16,6 @@ Today: yet another ES6 feature that I think most people don't know about.
> >
> [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) > [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
<figure>
![](images/alina-grubnyak-1254785-unsplash-1024x683.jpg)
<figcaption>
Photo by [Alina Grubnyak](https://unsplash.com/@alinnnaaaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
Let's dive right in! 🏄‍♂️ Let's dive right in! 🏄‍♂️
#### Basic example: #### Basic example:

View File

@ -1,6 +1,7 @@
--- ---
title: 'Use Traefik and RegExp to bypass AdBlockers' title: 'Use Traefik and RegExp to bypass AdBlockers'
date: '2022-01-10' date: '2022-01-10'
coverImage: './images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg'
categories: categories:
- 'general' - 'general'
- 'security' - 'security'
@ -19,18 +20,6 @@ The problem was that my AdBlocker was not letting request through and since most
**FYI**: All the data collected on this site are accessible and visible to anyone [here](https://spectare.nicco.io/share/Xklie3UU/Nicco). **FYI**: All the data collected on this site are accessible and visible to anyone [here](https://spectare.nicco.io/share/Xklie3UU/Nicco).
<figure>
![](images/hyeryi-sVk8nrCQ06g-unsplash-1024x683.jpg)
<figcaption>
Photo by [逸 韩](https://unsplash.com/@hyeryi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/intersection?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
## The issue ## The issue
Lets have a look at the typical Umami code: Lets have a look at the typical Umami code:

View File

@ -15,18 +15,6 @@ This guide and the examples will be based on [Ora](https://github.com/cupcakearm
We will not touch on the [controversial](https://www.eff.org/deeplinks/2021/12/chrome-users-beware-manifest-v3-deceitful-and-threatening) manifest version 3. We'll stick to version 2. We will not touch on the [controversial](https://www.eff.org/deeplinks/2021/12/chrome-users-beware-manifest-v3-deceitful-and-threatening) manifest version 3. We'll stick to version 2.
<figure>
![](images/markus-spiske-8CWoXxaqGrs-unsplash-1024x683.jpg)
<figcaption>
Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/lego?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
## The Basics ## The Basics
Let's dive right in! A browser extensions is basically a series of small "websites". Logic is written in Javascript, styled in CSS, etc. This also means that we can use Vanilla JS, React, Svelte, whatever you prefer. Let's dive right in! A browser extensions is basically a series of small "websites". Logic is written in Javascript, styled in CSS, etc. This also means that we can use Vanilla JS, React, Svelte, whatever you prefer.

View File

@ -16,18 +16,6 @@ Recently Drone released it 1.0 version update. It came with a cleaner and more u
**TL;DR** Get the code: [https://github.com/CupCakeArmy/drone-deploy](https://github.com/CupCakeArmy/drone-deploy) **TL;DR** Get the code: [https://github.com/CupCakeArmy/drone-deploy](https://github.com/CupCakeArmy/drone-deploy)
<figure>
![](images/asoggetti-418839-unsplash-1024x684.jpg)
<figcaption>
Photo by [asoggetti](https://unsplash.com/photos/rSFxBGpnluw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/drone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
</figcaption>
</figure>
This should be a starting point to guide you in the right direction towards writing your first drone plugin. **It's easier than it might seems**. Let's go 🚀 This should be a starting point to guide you in the right direction towards writing your first drone plugin. **It's easier than it might seems**. Let's go 🚀
#### What do we want to achieve? #### What do we want to achieve?

View File

@ -2,6 +2,6 @@
title: Rest title: Rest
date: '2024-11-29' date: '2024-11-29'
--- ---
import ContactLinks from '../../components/Links.astro' import Links from '../../components/ContactLinks.astro'
<ContactLinks/> <Links/>