Hey guys, Nero One here. I have been documenting my daily journals and what I learnt daily in my own discord channel and am now moving to obsidian. I found out it is rewarding, but figured it would be better if I start sharing with others. :)

So this journal series will be randomly updated with links and some notes of what I find interesting.

Prompthunt

A cool way to experiment with prompts. Curated gallery and easy-to-create professional-looking images. Powered by Dall-e, Midjourney and Stable Diffusion

prompthunt.com

Lygia

Shader Library. Reusable functions, performant and flexible. Can easily add to any project or framework. Might be looking into this in the future. Found this through a plugin (Noise & Texture) in Figma

lygia.xyz

NodeToy

Shader editor on the web, node-based programming, can preview 3D models

I found it cool because can use it with Three.js. I never tried this myself, but putting this one to try soon with R3F (React Three Fiber).

nodetoy.co

Landingfolio

Create landing pages easier, can get code to use in WebFlow and TailwindCSS. I'm more of Tailwind guy so this is really helpful.

landingfolio.com

Then i found out about Tailbits, from the same team that built this Landingfolio.

Tailbits

This one is more appealing to me haha. Because why? Tailwind Components!

They have several free ones, so we could take a look and try them. They also have a Pro plan where you could have access to other nice components. A good one. Will revisit it more often :)

tailbits.com

Study Tailwind Grid

Did some study on the Tailwind grid, using their grid and grid-columns-3 to create some Bento-ish design

Link to the Tailwind Play

https://play.tailwindcss.com/MHnWP0dos3

Clear Node REPL history

Sometimes I used NodeJS by running node and the history is always there. So I was looking for how to clear the history. The solution is this:

cd ~
echo > .node_repl_history

This will empty the .node_repl_history :)

ReactFlow

React Component to build node-based editor, flowchart or any node-related thing.

My first impression, WOW. I am a fan of node-based programming, so this is huge for me haha.

Perhaps I can create my own custom node-based app. or maybe I can use this for an interactive website in the future. maybe....

Haven't tried, but definitely will. :)

reactflow.dev

Hikari Riders Avatar Maker

Ending the day with a quick project to overlay Hikari Riders frame on their avatar. Previously it was done in Figma manually, and there have been several requests to do for their discord avatar.

Figured out it was better for me to build a tool for them to use themselves.

This is built using NextJS. Revisit and studied HTML Canvas and how to use it with React. I was using it back then for some project, but it was in vanilla HTML and CSS.

Check this one by Chris Achard on Youtube. Awesome tutorial :)

For drag and drop, I used react-dropzone

Had some problems making sure the image always fit, so I turned to StackOverflow for some solutions. Found a great one by the user name Supah.

So to offset the image, I did some sliders so they can offset their photo.

Then I deployed it to Vercel which you can use yourself too here:

hikari-avatar-gen.vercel.app

And that's it, all of this was on 24th Dec 2022. If you like this, please consider subscribing :)

p/s: this is not a daily update, perhaps more of a weekly/bi-weekly thing.

Thanks! 🙏🙏