Forem: Nathan Renfroe

Introducing SunPuff :: FUN ON IPFS

Nathan Renfroe — Tue, 08 Oct 2024 21:51:34 +0000

This is a submission for the The Pinata Challenge

What I Built

This challenge came at just the right time for me. When I saw The Pinata Challenge, the idea immediately came to me for a simple app that would allow users to drag and drop files and get an IPFS cid that they could share with friends. I stayed up till almost midnight Oct 4, working on the prototype for my file sharing app, that turned into and image and meme sharing app. Some where between then and the next morning I got the idea to create a little game of connect 4, with game progress that could be saved and loaded over IPFS.
And the connect 4 game board gave me the idea for and art board.

So yeah, that. And the perfect name, SUNPUFF. This app is all about sending puffs of brightness, and is fun for friends and family! One of the things that I loved to bring to this app was my years of design and developing experience. The color palette, and font CAPITALIZATION where all very intentional, I hope I am not the only one that thinks the sunpuff design is beautiful.

Demo

SUNPUFF can be accessed on gitlab pages, or you can try it on codepen below.

SUNPUFF IMAGES - SHARE IMAGES AND MEMES WITH FRIENDS!

Fun Memes to try viewing
(These images have been uploaded and optimized with pinata api)

bafkreifri3eb2cgelcz4oepz25uu4ndg7vuvizp5o7ezlou3mmgtyhajhm
bafkreieyrheqtu6nx2p2zoymkfdcr4n4zylbufdbusxqjmll2fyyu2zg2q

SUNPUFF CONNECT FOUR - PLAY CONNECT 4 WITH FRIENDS!

Find someone to play with!

SUNPUFF ART - CREATE AND SHARE ART WITH FRIENDS!

Made with SUNPUFF ART

QmSE8DC2C1g4dBPgKcAbnG485cb8iNHPP4ywjjqkpK8eXj - tree
QmeyKdoqnirXcaxiCS6P27NVjZbMxt1WZ54CgiRcA1UMQx - face?

My Code

I want to give a full disclosure all of the JavaScript to make my app work was generated by MICROSOFT COPILOT. (also some of the css)
If I was skilled at writing javascript this project would have been much easier, instead I spent hours sending prompts to copilot to fix things that should have been a given. This is my favorite way to develop new apps, I get to have fun testing them, copilot does all the behind-the-scenes work to make everything work.

My code can be found in the SUNPUFF repo on gitlab. HTML, CSS, and JS for web app can be found in the "PUFFAPP" folder, docs on my dev journey and how I used ai can be found in the "DOCS" folder

More Details

Each sunpuff app uses pinata api to save and load data on ipfs.

A thought on accessibility, I thought it would be cool to develop some kind of telegram or discord bot for this to enable faster and easier sharing. Right now there is just the website and users have to share ipfs cid's in their favorite messaging app.

Fun Colorful Codepens

Nathan Renfroe — Fri, 04 Oct 2024 23:24:19 +0000

Hi, as a designer color is really important to me.

Over the last two years I have collected and create a few color palettes. But that is not the topic of today's post.

Today I wanted to share a few fun color pens that I made.

Let’s go…

(Note: Some of these might not be compatible on mobile.)

1. RGB Color Sliders

What can I say about this. First off before we go any farther I should say that I use Microsoft Copilot to help me with the finer details of CSS and JS.

Ok what are some cool features of this. Playing with the sliders updates the page background color and the text input values for RGB instantly. This works bidirectionally if you want to type a value in rather than play with the slider.

2. Color Calculator

Who doesn’t love a basic calculator? This one has a cool feature that allows you to type or paste a color hex code into the answer display to change the color!

3. Random Color Palettes with JS

Speaking of color palettes. Here is a random color palette generator. I created this just for fun. I know I use AI a lot to help me create projects. But when it comes to color palettes, AI or a random color palette generator is not something I use. It might have its use cases, but a lot of my design projects are very dear to me and I try to be intentional about the colors I use.

4. Black and White clock face

Very beautiful simple cock face. Would make a great screen saver. Click to toggle light and dark theme.

5. SunBible app frame with Color theme options

This is a project that I have worked on for many years. I built this from the ground up, and package it as a desktop app with electron. You can view the entire code for it on GitHub

6. ABC’s Infinite Snap Scroll with Color animation

Well thank you for scrolling to the end of this article. If you like scrolling I got you covered.

I would love to connect with you in the comments. Let me know what you like, maybe give me an idea for another fun project.

Best Note-Taking Apps (2021): Part 2 Note Taking Apps that support Markdown.

Nathan Renfroe — Mon, 08 Feb 2021 16:19:32 +0000

Note: This post was originally published to medium. https://medium.com/tech-with-nonresistant/best-note-taking-apps-2021-part-2-note-taking-apps-that-support-markdown-54c99d516a69 You can only ready part 1 on medium at: https://medium.com/tech-with-nonresistant/best-note-taking-apps-2021-e67e89eb0c27

I know I just wrote about some of my favorite or best note-taking apps. But since then(I know it wasn’t that long ago), I fell in love with note-taking apps that support Markdown. So here I go…

1. SimpleNote

Simple Note was the only note-taking app I mentioned in my last post that supports Markdown. I know I said I didn’t really like it that much. But it does depend on what you are looking for. All around it is a great note-taking app even if ups don’t want to take notes in Markdown. Here are some things this note-taking app gets right:

SimpleNote is cross-platform meaning you can get it on all your devices.
SimpleNote is free.
SimpleNote syncs your notes.

2. Notable

Notable is similar to SimpleNote. It's free and they have a desktop app. But…
This is where things start to get different. They currently don’t have a mobile app. And they don’t sync your notes. Notable would defiantly be the app to use if you take a lot of notes in Markdown. The way they display Markdown is a step-up from SimpleNote. They also auto-complete some things. They support searching through and organizing your notes. But it is defiantly a little more for technical users as you have to be in charge of where your notes are stored locally.
Some other things they support:

KaTeX expressions
Mermaid diagrams

3. Bear

Bear is cool. But it cost money and is only available for apple devices. You can even dictate notes from your apple watch. Currently, the only Apple device I have is a MacBook. And another reason I am not likely to use Bear is that it is not an entirely free app. Also, their support for taking notes in Markdown is not one of their strong points.

4. Inkdrop

Inkdrop is cool, and they have apps for every platform. But Inkdrop is not a free app, so I haven’t tried it. From the looks of it. It looks like they make it easy to organize notes in different notebooks and you can also add tags to notes too.

5. Notion

Wow. I got to say Notion is amazing. I can’t believe I have never heard of it before. They support Markdown. But that is not it. It is easy to drag and drop your notes to create columns and it is easy to embed content from the web. It is an amazing free app that you can get on Windows, Mac, and your mobile devices.

6. Ulysses

Ulysses is another cool note-taking app that supports markdown. It is advertised as “The Ultimate Writing App for Mac, iPad, and iPhone”. You can even publish to WordPress and Medium right from within the app. But Ulysses is not free.

7. Slite

Wow. Slite is pretty cool. It is free and it works great with slack. So if you have a team on slack Slite would be a great application for your team to take notes. It is fairly similar to Notion in that you can drag each line of your notes around, but you can’t create columns.

8. Standard Note

This app is cool too. But it is not free. It supports Markdown among other things.

Worth Mentions:

There are so many other great applications out there for editing markdown. They are not necessarily for taking notes, but I thought I would mention them anyway.
VS Code. This is a developer tool.
Dillinger. It is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor.
Typora. A truly minimal markdown editor.

Why would you want a note-taking app that supports markdown?

It depends on who you are. Some people like to takes notes in Markdown.

Even if you are not someone who knows markdown, many of these note-taking apps are great. You don’t need to know markdown to use them.

There was a time when I didn’t care if the note-taking app I used supported markdown. But now that I know markdown. There is no going back. This was such a fun post to write because I discovered so many amazing apps for taking notes.

What is one reason you like to take notes in markdown?

One reason I personally like to take notes in markdown is just that formatting the text is easier, and faster. (Plus markdown supports things like code blocks something that word processors and other note-taking apps don’t support.)

So in closing what is the best note-taking app that supports markdown?

If you are looking for a free app, that is also simple and easy to use. I would say SimpleNote. If you are a little more tech-savvy and want to be in control of storing and syncing your notes I would say Notable.

(Notion is also amazing, and cool. Too amazing for my brain to comprehend. Anyway moving on.)

If you only use Apple devices and are willing to pay something I would say use Bear or Ulysses.

If you are willing to pay something and have more than just Apple devices I would say use Inkdrop. It looks to be by far the best note-taking app. But I don’t know I haven’t tried it.

Will, I use any of them?

I certainly can’t use all the note-taking apps I mentioned. And choosing one to make my main app will be hard they are all so amazing. But I will defiantly be using one or more of these amazing note-taking apps. How about you?

Well, that is it for today. I hope you enjoyed reading. If you know of any great note-taking apps that support markdown that I left out feel free to share in the comments.