diff --git a/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md b/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md index 68a14cb..8d6ce54 100644 --- a/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md +++ b/src/content/blog/5-jetbrains-tipsntricks-i-wish-id-known-sooner.md @@ -17,18 +17,6 @@ Here are some small features that may not be apparent to the newer devs that lev 4. Syncing settings 5. Reformatting -
- -![](images/cards-1024x567.jpg) - -
- -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) - -
- -
- ## 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. diff --git a/src/content/blog/a-practical-introduction-to-react-hooks.md b/src/content/blog/a-practical-introduction-to-react-hooks.md index 3ead4fe..38901ba 100644 --- a/src/content/blog/a-practical-introduction-to-react-hooks.md +++ b/src/content/blog/a-practical-introduction-to-react-hooks.md @@ -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) -
- -![](images/matt-artz-353210-unsplash-1024x780.jpg) - -
- -wrenches - new tools - -
- -
- #### What we will look at today 1. Class Components vs Functional Components diff --git a/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md b/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md index bfc589b..1a407e7 100644 --- a/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md +++ b/src/content/blog/backup-mongodb-inside-of-docker-the-right-way.md @@ -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. -
- -![](images/tobias-fischer-PkbZahEG2Ng-unsplash-1024x497.jpg) - -
- -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) - -
- -
- ## 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. diff --git a/src/content/blog/be-your-own-tiny-image-cdn.md b/src/content/blog/be-your-own-tiny-image-cdn.md index b975986..d20b9fd 100644 --- a/src/content/blog/be-your-own-tiny-image-cdn.md +++ b/src/content/blog/be-your-own-tiny-image-cdn.md @@ -1,6 +1,7 @@ --- -title: "Be your own (tiny) image CDN" -date: "2023-04-28" +title: 'Be your own (tiny) image CDN' +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. @@ -9,7 +10,7 @@ The building blocks will be [imgproxy](https://github.com/imgproxy/imgproxy) and
-![](images/meagan-carsience-QGnm_F_nd1E-unsplash1-1024x683.jpg) +![](images/meagan-carsience-QGnm_F_nd1E-unsplash1.jpg)
@@ -52,7 +53,7 @@ services: IMGPROXY_ENFORCE_AVIF: true IMGPROXY_ONLY_PRESETS: true IMGPROXY_PRESETS: default=resizing_type:fit,sm=size:250:250,md=size:500:500,lg=size:1000:1000 - + proxy: image: nginx ports: diff --git a/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md b/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md index 67547a2..0f6f2b1 100644 --- a/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md +++ b/src/content/blog/cleanup-downloaded-google-photos-takeout-archives.md @@ -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. -
- -![](images/rayan-almuslem-1302778-unsplash-1024x683.jpg) - -
- -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) - -
- -
- 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. diff --git a/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md b/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md index 1b2604d..cc91f40 100644 --- a/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md +++ b/src/content/blog/going-beyond-npm-meet-yarn-pnpm.md @@ -9,7 +9,7 @@ tags: - 'npm' - 'pnpm' - '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. @@ -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). -
- -![](images/ruchindra-gunasekara-GK8x_XCcDZg-unsplash.jpg) - -
- -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) - -
- -
- 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? diff --git a/src/content/blog/how-to-search-in-the-jam.md b/src/content/blog/how-to-search-in-the-jam.md index a2d405a..31cbe31 100644 --- a/src/content/blog/how-to-search-in-the-jam.md +++ b/src/content/blog/how-to-search-in-the-jam.md @@ -1,13 +1,13 @@ --- -title: "How to search in the JAM" -date: "2020-12-06" -categories: - - "coding" -tags: - - "jam-stack" - - "lunr" - - "search" - - "svelte" +title: 'How to search in the JAM' +date: '2020-12-06' +categories: + - 'coding' +tags: + - 'jam-stack' + - 'lunr' + - 'search' + - '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?** @@ -23,7 +23,7 @@ We will look at the following:
-![Telescope](images/uriel-soberanes-gCeH4z9m7bg-unsplash-991x1024.jpg) +![Telescope](images/uriel-soberanes-gCeH4z9m7bg-unsplash.jpg)
diff --git a/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md index 934bd92..3f00b16 100644 --- a/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md +++ b/src/content/blog/leaving-nextcloud-from-heaven-to-the-depths-of-seafile.md @@ -22,7 +22,7 @@ Trying to be everything at the same time comes at a cost. And that is generally
-![](images/pawel-nolbert-xe-ss5Tg2mo-unsplash-1024x740.jpg) +![](images/pawel-nolbert-xe-ss5Tg2mo-unsplash.jpg)
@@ -44,7 +44,7 @@ A few weeks ago [Nextcloud 21](https://nextcloud.com/blog/nextcloud-hub-21-out-w
-![](images/Screenshot-2021-03-23-at-10.58.31-1-1024x325.png) +![](images/Screenshot-2021-03-23-at-10.58.31.png)
diff --git a/src/content/blog/matomo-vs-ublock-origin.md b/src/content/blog/matomo-vs-ublock-origin.md index 6e955d1..f419463 100644 --- a/src/content/blog/matomo-vs-ublock-origin.md +++ b/src/content/blog/matomo-vs-ublock-origin.md @@ -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. Data collected on this site is 100% anonymous and [GDPR](https://gdpr.eu/) compliant. -
- -![](images/luke-chesser-JKUTrJ4vK00-unsplash-1024x683.jpg) - -
- -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) - -
- -
- 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. ) diff --git a/src/content/blog/monitor-your-self-hosted-services-for-free.md b/src/content/blog/monitor-your-self-hosted-services-for-free.md index 61d9822..adf2ed0 100644 --- a/src/content/blog/monitor-your-self-hosted-services-for-free.md +++ b/src/content/blog/monitor-your-self-hosted-services-for-free.md @@ -1,6 +1,7 @@ --- title: 'Monitor your self hosted services for free' date: '2022-07-07' +coverImage: './images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg' tags: - self-host - 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. -
- -![](images/daniele-franchi-g2fJ7d7eKSM-unsplash.jpg) - -
- -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) - -
- -
- ## 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. diff --git a/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md b/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md index 68aab9b..4f83a89 100644 --- a/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md +++ b/src/content/blog/react-code-splitting-made-simple-easily-reduce-bundle-js.md @@ -115,6 +115,6 @@ const App = () =>
There is a little codesanbox below with all the code if you wanna try for yourself (you should! 😉) - + 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. diff --git a/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md b/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md index d4b61ba..d40bf13 100644 --- a/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md +++ b/src/content/blog/reduce-docker-compose-files-with-yaml-magic.md @@ -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**! -
- -![](images/guillaume-bolduc-259596-unsplash-1024x741.jpg) - -
- -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) - -
- -
- _Without further ado:_ ``` diff --git a/src/content/blog/step-up-oauth-security-with-pkce.md b/src/content/blog/step-up-oauth-security-with-pkce.md index 633322b..2efec6f 100644 --- a/src/content/blog/step-up-oauth-security-with-pkce.md +++ b/src/content/blog/step-up-oauth-security-with-pkce.md @@ -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. -
- -![](images/jielin-chen-pKQIpxzq0ZQ-unsplash-e1562783699383-1024x484.jpg) - -
- -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) - -
- -
- #### 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. @@ -66,7 +54,7 @@ Below is a diagram by [Auth0](https://auth0.com/) which helped me understand the
-![](images/auth-sequence-auth-code-pkce-1024x833.png) +![](images/auth-sequence-auth-code-pkce.png)
diff --git a/src/content/blog/tales-of-learning-go-from-ts.md b/src/content/blog/tales-of-learning-go-from-ts.md index 78193fb..9266fba 100644 --- a/src/content/blog/tales-of-learning-go-from-ts.md +++ b/src/content/blog/tales-of-learning-go-from-ts.md @@ -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. -
- -![](images/mark-autumns-Ssr26I0QWVY-unsplash-1024x683.jpg) - -
- -Bridge - -
- -
- ## 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. diff --git a/src/content/blog/telegram-bots-are-easy.md b/src/content/blog/telegram-bots-are-easy.md index 9e18157..37062fa 100644 --- a/src/content/blog/telegram-bots-are-easy.md +++ b/src/content/blog/telegram-bots-are-easy.md @@ -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. 3. (bonus round) Dockerize the bot for running it everywhere. -
- -![](images/arseny-togulev-1513013-unsplash-1024x576.jpg) - -
- -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) - -
- -
- #### 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`. @@ -54,7 +42,7 @@ Response after successful bot registration
-![](images/IMG_0160-1024x436.jpeg) +![](images/IMG_0160.jpeg)
@@ -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. diff --git a/src/content/blog/the-powerful-es6-proxy-object.md b/src/content/blog/the-powerful-es6-proxy-object.md index f1fdc20..a1aac5a 100644 --- a/src/content/blog/the-powerful-es6-proxy-object.md +++ b/src/content/blog/the-powerful-es6-proxy-object.md @@ -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) -
- -![](images/alina-grubnyak-1254785-unsplash-1024x683.jpg) - -
- -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) - -
- -
- Let's dive right in! 🏄‍♂️ #### Basic example: diff --git a/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md b/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md index 4afb9ad..fa6a55c 100644 --- a/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md +++ b/src/content/blog/use-traefik-and-regexp-to-bypass-adblockers.md @@ -1,6 +1,7 @@ --- title: 'Use Traefik and RegExp to bypass AdBlockers' date: '2022-01-10' +coverImage: './images/hyeryi-sVk8nrCQ06g-unsplash-scaled.jpg' categories: - 'general' - '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). -
- -![](images/hyeryi-sVk8nrCQ06g-unsplash-1024x683.jpg) - -
- -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) - -
- -
- ## The issue Lets have a look at the typical Umami code: diff --git a/src/content/blog/write-cross-browser-extensions-without-the-tears.md b/src/content/blog/write-cross-browser-extensions-without-the-tears.md index 2b1401d..8aa12ea 100644 --- a/src/content/blog/write-cross-browser-extensions-without-the-tears.md +++ b/src/content/blog/write-cross-browser-extensions-without-the-tears.md @@ -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. -
- -![](images/markus-spiske-8CWoXxaqGrs-unsplash-1024x683.jpg) - -
- -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) - -
- -
- ## 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. diff --git a/src/content/blog/write-your-own-drone-plugin-from-scratch.md b/src/content/blog/write-your-own-drone-plugin-from-scratch.md index a6cddce..ed90cfa 100644 --- a/src/content/blog/write-your-own-drone-plugin-from-scratch.md +++ b/src/content/blog/write-your-own-drone-plugin-from-scratch.md @@ -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) -
- -![](images/asoggetti-418839-unsplash-1024x684.jpg) - -
- -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) - -
- -
- 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? diff --git a/src/content/page/rest.mdx b/src/content/page/rest.mdx index ec093a6..97ade2f 100644 --- a/src/content/page/rest.mdx +++ b/src/content/page/rest.mdx @@ -2,6 +2,6 @@ title: Rest date: '2024-11-29' --- -import ContactLinks from '../../components/Links.astro' +import Links from '../../components/ContactLinks.astro' - +