#7ef
#e7f
#ef7
#fff
#000
Decided to go for a CMYK Color scheme - Reminds me a lot of printer colors. Thought it was fun and maybe retroish. Maybe just plain ugly, but I think it's cool. I was just playing around with 3 digit color codes starting at #fff and changing a couple of numbers. After I found a color I liked (#ef7 was the first one) I just took all the permutations of the 3 characters and picked the ones I liked. Likely this is going to get expanded when I need to make graphs.
| Color Code | Color Name | Sample |
|---|---|---|
#7ef |
cyan | |
#e7f |
magenta | |
#ef7 |
yellow | |
#fff |
white | |
#000 |
black | |
For displaying my financials I thought it'd be fun to spruce it up with some flying emojis in the background 😄. You can see the effect I am going for at burrito.place. I ended up using tsParticles which is a JavaScript library which seems to handle this kind of thing quite nicely. It allows you to specify images for the particles as well. I used the Twitter Emojis from iconify. The performance seems acceptable to me. However I can tell it is tough on machines. My MBP always spins up the fans real fast. I am guessing there is some GPU rendering or something that is not entirely optimized.
Before ending up on this library I tried a few approaches. Initially I tried to use pure CSS since I thought it would be a performance advantage. It definitely is possible to get it to work, but I thought the performance was bad. In particular I saw a lot of frames skipping. The code to accomplish it was also quite ugly. Once I realized how ugly it was going to be, realized JS was probably going to be the way. So next I tried JS, and found someone doing something very similar. At first I thought this was perfect. But I played with the code for a bit and realized man the performance was not so good once the page started to rollover. So I ditched this too. However I kind of like this javascript one still, its's almost more fun and means there is not code dependency. I might end up switching back to this. Let me know what you think.
Here are some of the experiments I ran, let me know if you like any of these better than what is on burrito.place
{
fpsLimit: 60,
detectRetina: true,
particles: {
move: {
enable: true
},
number: {
value: 100
},
size: {
random: {
enable: true,
minimumValue: 10
},
value: 30
},
shape: {
options: {
images: [{
src: 'https://api.iconify.design/twemoji:burrito.svg',
width: 100,
height: 100
},
{
src: 'https://api.iconify.design/twemoji:taco.svg',
width: 100,
height: 100
}
]
},
type: "image"
}
}
}I did more thinking on this and for now I am shelving the idea. Instead I will just use git and GitHub Actions. However this seems super overkill. But I think it should work okay.
CERTBOT IS DOPE: https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04