# TIL #1

> Collection of things I learnt

**Published by:** [Nero One](https://paragraph.com/@n1/)
**Published on:** 2022-12-25
**Categories:** journal, til
**URL:** https://paragraph.com/@n1/til-1

## Content

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.PrompthuntA cool way to experiment with prompts. Curated gallery and easy-to-create professional-looking images. Powered by Dall-e, Midjourney and Stable Diffusion prompthunt.comLygiaShader 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 Figmalygia.xyzNodeToyShader 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.coLandingfolioCreate 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.TailbitsThis 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.comStudy Tailwind GridDid some study on the Tailwind grid, using their grid and grid-columns-3 to create some Bento-ish designLink to the Tailwind Play https://play.tailwindcss.com/MHnWP0dos3Clear Node REPL historySometimes 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_historyThis will empty the .node_repl_history :)ReactFlowReact 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 MakerEnding 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.appAnd 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! 🙏🙏

## Publication Information

- [Nero One](https://paragraph.com/@n1/): Publication homepage
- [All Posts](https://paragraph.com/@n1/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@n1): Subscribe to updates
- [Twitter](https://twitter.com/0xNeroOne): Follow on Twitter

## Optional

- [Collect as NFT](https://paragraph.com/@n1/til-1): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@n1/til-1/collectors): See who has collected this post