DEV Community: connor miller

An Attempt to Make a Tiny Social Site for Stoners

connor miller — Sat, 24 Dec 2022 16:56:24 +0000

As I continue to work on my code projects, I started to keep notes alongside my work so I can talk through problems and identify when it is time to walk away from the computer. This is not a tutorial, but instead a peek into my thought process as I educate myself.

We are going to make a tiny social media site for stoners using Svelte and Firebase. Here are some baseline ideas:

Authentication. I want people to be able to sign in through Twitter, but i may get more users if authentication is as anonymous as possible, especially with a throwaway app like this one. So, as much as I want to get fancy, let’s use e-mail link authentication (passwordless).
Behavior. I like the idea of seeing an anonymized heatmap of where people are stoned. This requires asking for location data which I am not too familiar with. Maybe there is a way to do this even more simply. We also could have people just log timestamps as to when they are high, and it would be like a Downdetector type thing showing times of day people are stoned.

Now that I write this, it is entirely possible to make this with something like a Google Sheet. How would we render the heatmap information in real time, though?

So, the most valuable information we can get is time and anonymized location.

Data Structure

Users
Sessions
- Session Location
- Session Time

Quick Test on AppSheet

This feels like something I can potentially prototype in Google Appsheet. Let’s try that first.

What’s funny is that right now I know more about Svelte and Firebase than I do AppSheet. I’m not sure if I have as much control as I’d like considering how much AI magic is being used. I cannot guarantee that I am going to get the output I want.

Ok, this definitely does not look like what we want.

Let’s just go back to Svelte. I think we know enough of what we want to do. However, I think I should definitely watch some videos of people using AppSheet to see what kind of social apps I can make.

[ ... ]

Hours later and I still find myself in AppSheet because it intrigues me and I feel like I should be able to make what I’m imagining here. I know I would probably make more progress if I switched to Svelte but I have the luxury of spending time to familiarize myself with AppSheet.

This is looking a little bit better.

Unfortunately, it looks like this is optimized for individual use. I don’t think it’s the best for doing the social things that I’m hoping to accomplish. Unless I’m missing something.

We are yak shaving at this point so I think it’s finally time to pivot to Svelte.

Svelte

My worry about Svelte is UI, but I guess I can worry about that later. We are definitely equipped enough to build front end first, which is what I think I’m going to do. Once we have that dummy app up and running, I think it will be a better time to apply Firebase to the backend. So, let’s focus primarily on frontend first.

This video inspired me to get started today:

[ ... ]

Initial frontend is looking good.

Location may have to come later, but it will look something like this:

Google Maps Platform Documentation | Geocoding API | Google Developers

[ ... ]

Alright, now we are jumping into passwordless sign in.

This is the error I’ve been stuck on for a couple hours. Can’t figure it out. This may be the time to gut the things that don’t work and to consider a different way for folks to log in.

[ ... ]

The good news is that anonymous login works, but this does not offer the functionality I am looking for.

[ ... ]

Anonymous login is working well enough, the thing I want to do to end today is to get Firestore up and running.

[ ... ]

We have Firestore functionality! I am on a roll. I think this is enough for today, as I will have to eat dinner soon.

For shits and giggles let’s try to deploy.

LATER

Deploying turned out to be a shit show, spent two hours running around trying to figure that out. It looks like the main problem is that my app has server-side-rendering (SSR) which means I need to host some Firebase Cloud Functions in order for my app to run. This sounds involved so I’m going to wait to do this another time.

https://github.com/jthegedus/svelte-adapter-firebase

This github provides what I think is the most likely solution to my problem.

LATER

Came home after smoking weed and drinking wine and solved the deploy issue immediately. Lmao, we have a silly little prototype up and running.

[ ... ]

And now it doesn’t work again.

LATER

Fixed it. Basically I had to disable SSR for the compile, allowing me to upload a static site. I implemented the svelte static site adapter and wrote a snippet of code in the +layout.js file of my routes.

I will also need to read this:

Using Environment Variables With SvelteKit

TO DO:

[ ] Give users the ability to delete their own posts.
[ ] Create functionality to only be able to post three times every hour.

12/22/22

We finally added the custom url, which was bugging because the instructions from Firebase are out of date (or simply just different for Namecheap?). Once I started writing “@” in the “Host” field on Namecheap instead of the typed out url, the connection went through. How am I supposed to know this? I say this as I clearly remember the few other times I’ve tried to use a custom URL and have experienced the same problem.

I'd share the final result, but this project is neither secure nor scalable. I learned a lot, and while I will probably be sharing this silly little toy with my friends, I think I need to tighten the security and make sure I'm not paying out the ass for services like the Google Maps Geocoding.

An Attempt to Make a Journal App with Svelte and Firebase

connor miller — Sat, 24 Dec 2022 16:05:24 +0000

I write my journals and to-do lists in a very specific way in Evernote. It would be cool to use this opportunity to learn Svelte.

12/12/22

This is a first stab at what I want the front end to look like, but I realize I need an editable carousel of cards in order for this to function how I want it to.

Right now I am having trouble making the connection between Svelte and Firebase. I think next time I need to get an example (I know I can probably find some on Glitch).

[ ... ]

Next thing I need to do is figure out how to set up authentication, which I think will be a little bit easier now that I know where the bits and bobs go.

To Do:

[ ] Set up authentication
[ ] Submit blog posts to Firestore properly

12/13/22

MORNING

Helpful Firebase auth video w/ Svelte that I should look at tonight.

Right now I am looking at YouTube videos that will help me when I revisit this project later in the evening.

Though I would like to get creative with Logins, for now I will just be using email and password because it is standard.

Here are the weeds that I was expecting, and the thing I need to be careful about before going to work - setting up the hierarchies of my components so that I can use Firebase when needed. Where should I put my Firebase config file? How can I make sure it is not redundant? Worried about breaking something.

It looks like I will import what I need from the Firebase.js file using the import functions that look like this:

import { auth, userDoc } from './Firebase' //tweak as needed

Figuring out all these routes will take some troubleshooting that I currently don’t have time for, so I’ll save this for the evening.

To Do:

[ ] Consolidate Journal.svelte so that the Firebase config information is moved to a more global location where both Journal.svelte and Login.svelte can access it.

AFTERNOON

I have pieced together some code that logs in with a username and password, and it posts to the Firestore database. This is great, and a miracle it was done in my current state. I currently can’t log out, nor can I create new accounts. This isn’t too pressing to me, as long as we have me, the main user, to build out the rest of the functionality of this project. And that, is the journal UI.

[ ... ]

Okay, so it got way too complicated and I had to start from scratch, and now I am so confused and nothing seems to be working the way I need it to. So! Time for a break. I think in order to get the information that I need, I NEED to block out an hour or so just to follow this tutorial:

I think where I am getting tripped up is that I am trying to keep my code tidy and modular and the files aren’t communicating with each other very well from component to component. There is probably some syntax or something I’m missing since I don’t really know how files relate to each other, or it’s just convoluted. I think following the tutorial tomorrow might help at least a little bit.

12/14/22

EARLY MORNING

Holy shit it’s 2am and I found the error - I had capitalized “Svelte” in “.svelte” when I shouldn’t have.

And now I have successfully logged in because I put the code in the right order, lmao.

And now we have assembled it in such a way that we can log in and out of my account! Success success and it’s only 3am!

I think this needs to be a place to stop since we have achieved our win. This is something for another time, but I think we can refine it further if we learn about stores.

AFTERNOON

Trying to figure out the simplest way to move forward. It would be cool to have a WYSIWYG editor but I may just stick with a textarea now just to keep things simple. We can always refine and add complexity later.

[ ... ]

Success! We can write to the database, no problem. Now on puzzling how I want to read my previous entries. I can visualize it in my mind, but I am not sure what the easiest solution would be.

[ ... ]

Okay, we are getting there! We can see our old entries, though they stay on the screen even after you log out. It’s now a matter of figuring out stores and states, which I think may be beyond my purview for today.

This blog post has been turning out to be useful:

Building a CRUD application using Svelte and Firebase - LogRocket Blog

12/15/22

Self-educating on stores before I try to mess with them too much.

This video is actually really helpful and gives me a clearer idea of how I am going to use stores to handle user sessions in my project. Basically the components will need to react to when the user is logged in.

12/16/22

MORNING

Things are getting a little bit hairy as the app becomes more complex. My current problem is properly using stores - my data is doubling, I’m not rendering things to the DOM properly and I am losing steam on troubleshooting this.

In the interest of completing something, or at least operating within my wheelhouse, I am not thinking in “simplify” mode. That is, how can I create a workable product with the things I know how to build and troubleshoot, without introducing the complexity of stores.

[ ... ]

We have success! Using stores, I am now able to reactively update my posts and things in the app. When I post a submission, the page updates since the store is updated. This is a huge win! I think we are in the tidying mode, since core functionality exits.

The major thing on my mind now is a delete function, specifically for my own peace of mind especially as I am in development. Ugh, let’s write some to do’s:

TO DO:

[x] Delete old posts
[x] Order posts by submission time and date
[x] Show submission timestamp

12/17/22

A reasonable thing to fix this evening is to figure out how to get new posts to display and behave properly. Right now if I put a new submission, it comes up as undefined, and if I try to delete it, it gets jammed. Let’s take a look!

[ ... ]

Yay, we fixed it! It works! We had to write some redundant code, but I think I can live with it.

[ ... ]

Alright, we are half an hour in and I have successfully added timestamps, and we are beginning to figure out how to order and sort them. It’s a bit messy, but I know how to make queries that are ordered by timestamp. Right now, similar to the problem above, there are just some machinations that aren’t displaying the data in the order I want. JS management problem.

[ ... ]

Alright, we sorted out that problem (the problem was redundant code), which we can probably consolidate at another time. I think we got a surprising amount of work done in 40 minutes.

12/19/22

Ok this project feels done. Next one I am going to try is to make a tiny social networking site for cannabis.

Another Attempt to Make a 2D VTuber

connor miller — Tue, 04 Oct 2022 17:41:14 +0000

In my last post I assembled my first 2D vtuber. Inspired by how well it turned out, I decided to immediately try again with a couple upgrades:

Eyes. This rig will have pupils that look around.
Hair. My last rig was essentially bald. This one will have flowing hair that I will configure with hair physics.
Mouth. The mouth will be broken up into different parts so that we can have more sophisticated speech movements.

Also, I simplified the stack from last time, mainly just eliminating GIMP from the process. I read that Procreate can sometimes format .psd files in a way that Live2D doesn't like, but I have not experienced this yet (I think).

Software

Procreate for iPad ($10)
Live2D Cubmism (Free 42 day Trial, $15/mo after)
Vtube Studio Pro on Steam, iPhone (Free Trial Version, Pro Version $20)

Drawing in Procreate

My goal was to make a vtuber that would be easy to rig down the line, so I prioritized the design for functionality rather than beauty. Instead of wasting time trying to figure out how to draw anime eyes and perfect hair, I drew the simplest versions I could. Now that I had a stronger understanding of what each part needed to look like in order for me to animate it properly,I could separate all the layers in a way that would save time in Live2D later.

This time around, I made sure to separate individual parts as much as possible: left and right eyeballs kept separate, irises kept separate, front and back hair pieces kept separate. I learned that the more parts you have isolated, the easier it is to manipulate them in Live2D.

Time Lapse of Drawing Vtuber Rig 002 in Procreate - YouTube

youtube.com

Rigging in Live2D

After the vtuber assets were drawn, it was time to rig them in Live2D. There are three main steps:

Assign parts to the right folders.
Create meshes.
Set parameters for how each part will move.

This is a major oversimplification, but this is how my brain is understanding the process so far. In my next couple vtubers, I imagine my learned rigging process will get more particular.

Unfortunately, certain layers on my vtuber (cheeks, eye shine) went missing during rigging. After some quick Googling, I determined that I lose those parts because 1) I didn't mesh them properly and/or 2) they were lost when I made the texture atlas. I sincerely don't know what happened, but next time I am going to try and manually mesh parts to see if it makes any kind of difference.

I am learning that the rigging process is definitely the most tedious bit. There is a lot of assigning layers to body parts, then carefully tweaking their movements with "parameters" in Live2D, which are essentially keyframes.

This time, I put a little more elbow grease into designing the mouth. The mouth was divided up into lips, teeth, and tongue, with each one moving independently for maximum control. I googled "Mouth Rigging for Vtubers" and found this helpful resource from vtuber Kira Omori.

Using this as a guide, I marked the parameters for about half of these mouth forms. I could have gotten more in-depth and intricate, but again it was incredibly tedious and I think I will have more patience next time.

Hair physics was also a new addition, and its implementation was relatively simple. I just chose the layers that I wanted to have their own physics, meaning they would bounce or sway when the character moved. I used the tutorial below to figure out my hair physics.

Key Takeaways

I now understand the 2D vtuber creation process better, which will allow me to plan out my time more effectively in the creation of more vtubers. I now have a couple characters in procreate that I'm drawing - my next creations will hopefully look a little bit cooler than vtuber 002, but now I know what goes into properly separating layers and what they should ideally do in Live2D cubism.

There are many 2D vtubers that move so well that they look like they are 3D models. I'm going to watch more tutorials to see how to get this desired effect. I am most impressed by the work of Kira Omori, who I referenced above. Their vtuber creations look very clean, professional, and 3D (despite them being 2D in actuality. Achieving this level of refinement will definitely take practice and patience.

Here is a demo of the final working rig:

An Attempt to Make a 2D VTuber Rig

connor miller — Tue, 13 Sep 2022 22:11:12 +0000

This past weekend I wanted to see how quickly I could make a vtuber from scratch. "Vtuber" is short for "Virtual YouTuber", however most vtubers I watch nowadays are on Twitch or TikTok. You may have seen some of them around the internet, like girldm.

Here's a short clip of the end result:
// Detect dark theme var iframe = document.getElementById('tweet-1569797061729730562-351'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1569797061729730562&theme=dark" }

Software:

Procreate for iPad ($10)
Live2D Cubmism (Free 42 day Trial, $15/mo after)
Prpr Live (Free)

First, I drew my character concept in Procreate. I really like the "Hellboy" comics, so I drew basically fanart of the character. I intentionally didn't add a lot of clothing or lots of hair so that I would have lets parts to animate later down the line.

Character concept

Next, I needed to make the official character model. This would be the one that I would eventually use in my rigging software. I didn't know exactly what I was doing, but I knew that for animation later I would have do divide all of the different parts of the character into different layers using a photo editor. Granted, I could do this completely in Procreate, but it felt way more natural to me to separate most of the parts on my desktop computer.

So, I watched a YouTube video on what parts I needed to sketch out and separate, and made a sketch 2.0. You can see the time lapse of the drawing below.

// Detect dark theme var iframe = document.getElementById('tweet-1569800388517429249-949'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1569800388517429249&theme=dark" }

Model and Procreate layers.

Next, I exported the file as a .psd and opened this with GIMP. The model was basically all drawn, but I needed to copy and edit the layers so that the things that I drew symmetrically in Procreate so that each individual part had its own layer. This mean duplicating the layers, deleting respective halves of things. In the future, I think I will do a better job at this.

GIMP edit

I exported the file as .psd again, and now I was ready to rig! I dutifully followed this 8 part YouTube series on how to do just that, and I highly recommend giving it a look.

I used Live2D Cubism to rig my model, per the recommendation of the YouTube tutorial I was following. The main obstacle here was time and patience. For each part of your character model, you had to name and assign folders and layers and hierarchies. The first half of my Live2D work was making sure everything was assigned to the right folder, then I assigned Warp Deformers and Rotators, which are basically the puppet strings for controlling your rig.

Live 2D rigging

In this step, I realized that I should have separated a lot more of my layers, specifically the individual eyes and eyebrows. Further, mouth animation requires the mouth to be divided in 4+ parts so that it can mimic the many different shapes of human speech. I concluded that I would learn the nuances of mouth rigging another day, and for the time being I just wanted to get a quick-and-dirty vtuber up and running.

After assigning all the deformers, I had to go into each part of my vtuber's model and define how the model would change in response to facial input. Another way to say this is that I was assigning keyframes, so that my rig could transition expressions and movements from point A to point B. This was also tedious and time consuming. I broke up the work over 2-3 days.

Rigging parameters

I took some shortcuts in the interest of time (skipping hair physics, pupil movement, clothing physics, or nuanced mouth movement). I was impatient, which I think is my preferred learning mode for a first stab at a project. When I do this again, I'll have a better idea of what needs more time and attention, and I can plan accordingly.

I exported the Live2D model into the compatible format for our preview software, Prpr Live, which is a free download on steam. This software takes input from your camera to move the parts of your vtuber. It tracks your face and body movement, then finds those parts and parameters you assign in Live2D to make the character move. And viola - a fully functionally vtuber, ready to take the internet by storm.

Key Takeaways

I think a week is a reasonable amount of time for me to try and make another vtuber from beginning to end.
Each step is tedious. I recommend breaking up each step by program and taking breaks between each software change.
I need to dedicate time specifically for learning how to rig mouths in a way that is efficient and responsive.
Making a vtuber is fun! And I am happy that I am trying to get a handle on it more.

Useful Links

How to Make a 3D VTuber Avatar From Scratch, Part 0: Considerations https://www.youtube.com/watch?v=y5FfJ4btBN8
How to Make a 2D Vtuber Model https://www.youtube.com/watch?v=y7AIL_0ybLw
Live2D Full Guide and Tutorial [ Part 1/8 - Setting Up The Essentials ] 【VTuber/Artist】https://www.youtube.com/watch?v=kU7csuuEozA

An Attempt to Make US Congressional Trading Cards

connor miller — Sun, 05 Jun 2022 21:54:16 +0000

Ahoy! My name is Connor and I am a hobby programmer that likes to embark on "code as craft" projects. I do this as a way to gain practical knowledge, and to continuously teach myself new things about programming.

This weekend I started a project in which I tried to make US Congressional Trading Cards - that is, "Yu-Gi-Oh" style cards that contain legislators rather than monsters. And let's be honest - sometimes it's hard to tell the difference.

Finding Congressional data

First step was to find Congressional data. I went to Kaggle and found this spreadsheet, which was a rather small dataset that didn't even include legislator party information. Rather, it was a directory of links to other information sources.

Next, I went to the ProPublica Congress API, which contains up-to-date information on United States legislators. I got an API key and did some test pulls in Retool which proved to be successful and more of what I was looking for.

The ProPublica dataset contained a lot of useful information, like names, party affiliation, birthday and more, but it did not have profile photo URLs. Fortunately, I saw that each senator had a google_entity_id which I quickly learned was for the Google Knowledge Graph API. I enabled this service, and was able to use the entity_id to pull images for each senator from Google Knowledge Graph.

Frontend Design

Now that I had most of the data I needed, it was time to work on the front-end. I used Figma to design Yu-Gi-Oh card templates, and copied the CSS to assemble the cards in Glitch, an online IDE for students.

Current Problems: Bringing It All Together

I initially tried pulling the data from ProPublica by writing my own API GET requests using NodeJS. Four hours later, it was clear that I didn't know what I was doing, and I wasn't able to get usable data to populate the client. There were two main issues:

I have trouble getting data out of nested callback functions. This is something I have always struggled with in my hobby code projects. I know that learning more about Javascript Promises might help, but I felt like there might be easier solutions than working with NodeJS to get the data.
The data was delivered as a Buffer, which I didn't know how to convert properly. I don't really know what a Buffer data type is, and despite a lot of Googling, I was not able to convert the data into usable JSON. I troubleshooted this for the greater part of an afternoon before I decided to cut my losses and try something else.

Ideally, I would love to just make the requests to the API directly from the client using fetch, but to my knowledge this would expose my API Keys, which would be bad.

I took a nap, and when I woke thought this might be a good opportunity to use Google Firebase to solve my back-end woes. I instantiated Firebase in my project, then realized that I would need to get the ProPublica data into Google Firestore in order to use it, or I would need to construct a helper function that allowed me to request data from ProPublica through Firebase. If I remember correctly, Firebase allows me to securely make requests to my databases through the client, but it has been so long since I've used Firebase that I will need to re-educate myself on how it works.

That's where I am at as of today, 6/5/22. I know where to pull my data from, but I'm not sure exactly how to access it within my app. Further, I am going to need to figure out how to dynamically render that data on the front end. Using vanilla JS to do this sounds tedious - in previous projects I've used VueJS for this kind of thing, but again I will need to re-educate myself on how to use that framework.

When I revisit this project, I think the most important thing for me to focus on is how to get a single senator's data onto the trading card template. First, I'll noodle around with Firsebase to see if I can make those API calls with helper functions and send them to my app. Then I'll spend some experimenting with the easiest way to render that data on the card template.

You can check out the app so far here:
Code: https://glitch.com/edit/#!/congressional-trading-cards
Preview: https://congressional-trading-cards.glitch.me/

Three Questions to Ask Yourself When Running an Online Community

connor miller — Wed, 25 May 2022 17:12:28 +0000

Ahoy! My name is Connor and I manage a community of communities - that is, I work with over 5k admins who manage online spaces with member counts ranging from 500 to 800k. Every week they come to me with questions like "What are the best practices for running online communities?"

Here are the three questions I ask that helps clarify next steps for growing and enriching your online community.

What is the value that your community offers?

Every community provides value to its members, which is likely why the community was founded in the first place. Identifying the specific value that your community provides helps clarify what events, resources, and opportunities you may want to pursue.

Some example value that online communities offer:

Hanging Out. These social communities draw people in to find likeminded friends. A community like this may optimize for mixer events or gaming, as folks come to these communities for casual networking.
Professional Development. These communities unite industry professionals with amateurs. If you work in a specific industry (e.g. tech, design, boating), odds are that you experience problems that select few people understand. A community like this may offer portfolio/resume reviews, AMA panels, and skills workshops.
Common Interest/Hobby. These communities are enthusiastic fans of a particular thing (e.g. Anime, Legos, Gardening). These folks likely want to be immersed in content regarding their favorite pastime, or they are looking for other superfans to discuss the intricacies of their hobby. A community like this may offer show-and-tell opportunities, watch-together events, and co-make sessions.

If you have a community where members are confused as to why they are there, consider dropping a survey asking "When you first joined this community, what were you expecting?" Sometimes this will reveal that the value of your server was not (for example) finding friends, but instead finding deals on consoles. If the majority of people joining your server are looking for a specific thing, you will certainly want to adapt, adjust, and double down on whatever that specific thing is.

What is the reason someone would return to your community?

"Retention" is a measure of how many people join a community and end up staying there. One rule of thumb you can use is to ask yourself "How many newcomers return to my community within a week or so?". If you have a community surrounding a popular topic (e.g. Houseplants), but none of the members contribute or talk to each other, it would be hard to convince a newcomer to return.

I find that having regular events with your community, no matter how small, shows a newcomer that the community is alive, maintained, and engaged. For example, imagine the Houseplants community hosting a monthly "Help My Plants are Dying" workshop, both experts and amateurs will return to learn, give advice, or be entertained.

In my own server, I host a weekly Crossword Hour where we collectively work on a crossword together. Attendance grows from month to month as members of my community see that this is a predictable and regular occurrence that people enjoy. Folks are more likely to engage with us when they expect us to show up at certain times.

Whether your events are weekly, monthly, or quarterly, establishing a regular, consistent, and predictable rhythm of stuff to do will give newcomers a reason to return. I like to think of events as the pulse of any online community - it shows people that the interactions are alive and well.

What are you building together?

One of my favorite online experiences was Twitch Plays Pokémon in 2014, where 80k viewers watched and played a single game of Pokemon Red together. Once complete, the event was heavily documented and became a kind of lore for the people who witnessed it. The event created an artifact of the collective experience - the thousands of people that played together contributed to the story.

This example may be "very online" and hard to understand, so I'll offer another example: one event that I host with my online communities is a "Draw Together" event. Here, we use Magma Studio to draw on a blank canvas together. It gets chaotic very quickly (imagine simultaneously working on a Photoshop file with ten other people) and the results are often a bit... avant garde. But, the creations themselves are artifacts, that convey the message "Hey, here is proof that we spent time together, and what a good time it was."

These artifacts serve as souvenirs that remind folks of the time they spent with their community. Often, community managers have a difficult time measuring the "success" of their online communities. For myself, I measure success through the creation of artifacts like certificates, paintings, and leaderboards. When considering artifacts, try to think of the easiest way to attach a memory of a great event to a tangible (ish) souvenir.

Hopefully this helps you develop some actionable strategies for increasing member count or engagement in your online community - again, these are far from all the questions you can ask yourself, but they are some of the most common that I recommend as I coach folks through community maintenance.