mirror of
https://github.com/cupcakearmy/nicco.io.git
synced 2024-12-21 23:56:26 +00:00
cleanup images
This commit is contained in:
parent
a8995c7428
commit
65eb4bb712
@ -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
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
@ -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)
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
wrenches - new tools
|
||||
|
||||
</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
#### What we will look at today
|
||||
|
||||
1. Class Components vs Functional Components
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
First we define our mongo instance like below. Notice that instead of mapping the data directory onto our filesystem we have a native volume.
|
||||
|
||||
@ -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
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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.
|
||||
|
||||
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.
|
||||
|
||||
@ -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).
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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.
|
||||
|
||||
#### Speed!!... or the lack of it?
|
||||
|
||||
@ -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:
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ Trying to be everything at the same time comes at a cost. And that is generally
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
@ -44,7 +44,7 @@ A few weeks ago [Nextcloud 21](https://nextcloud.com/blog/nextcloud-hub-21-out-w
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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.
|
||||
( I'll share the config files if anyone is interested at the bottom. )
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
@ -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! 😉)
|
||||
|
||||
<iframe src="https://codesandbox.io/embed/code-splitting-1x3s3?autoresize=1&fontsize=14&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&fontsize=14&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.
|
||||
|
||||
@ -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**!
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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:_
|
||||
|
||||
```
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
Bridge
|
||||
|
||||
</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
## 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.
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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 🤖
|
||||
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
<figcaption>
|
||||
|
||||
@ -277,7 +265,7 @@ def main():
|
||||
//...
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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! 🏄♂️
|
||||
|
||||
#### Basic example:
|
||||
|
||||
@ -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).
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
Lets have a look at the typical Umami code:
|
||||
|
||||
@ -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.
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
@ -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)
|
||||
|
||||
<figure>
|
||||
|
||||
|
||||
|
||||
<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 🚀
|
||||
|
||||
#### What do we want to achieve?
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
title: Rest
|
||||
date: '2024-11-29'
|
||||
---
|
||||
import ContactLinks from '../../components/Links.astro'
|
||||
import Links from '../../components/ContactLinks.astro'
|
||||
|
||||
<ContactLinks/>
|
||||
<Links/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user