1:31 AM. I’m having trouble disconnecting. Story of my life LOL. I had a good coding session, learning about SVG and masking and animations.
I’m figuring out how to animate the little spinny things in the cassette tape.
<!DOCTYPE html>
<html>
<head>
<title>MP3 to Casette</title>
<meta charset="UTF-8" />
<link rel="author" href="humans.txt" />
</head>
<body>
<div class="container">
<div class="window" style="width: 400px">
<div class="title-bar">
<div class="title-bar-text">My First Casette</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<section class="tabs">
<button class="tab-title" id="about">About</button>
<button class="tab-title active" id="music">Music</button>
<button class="tab-title" id="mailing">Mailing Address</button>
<button class="tab-title" id="payment">Payment</button>
<article class="tab-content" for="about">
<img style="width: 100%" src="/cassette.jpg" />
<p>Found grandma's casette player?</p>
<p>Wish you were an 80's kid?</p>
<p>Get your very own casette mixtape mailed to your door!</p>
</article>
<article class="tab-content active" for="music">
<p>Upload casette audio files</p>
<p>Drag & Drop an audio file or click the button</p>
<div class="labelled-image-container">
<img class="silhouette side-a" src="/cassette.svg" />
<span class="cassette-side-label">A</span>
<span class="cassette-label" id="cassette-label-a"></span>
</div>
<section class="field-row buffer">
<input id="side-a" type="file" accept="audio/*"/>
<label for="side-a" class="custom-file-upload">
Upload Side A
</label>
</section>
<div class="labelled-image-container">
<img class="silhouette side-b" src="/cassette.svg" />
<span class="cassette-side-label" class="cassette-side-label">B</span>
<span class="cassette-label" id="cassette-label-b"></span>
</div>
<section class="field-row buffer">
<input id="side-b" type="file" accept="audio/*"/>
<label for="side-b" class="custom-file-upload">
Upload Side B
</label>
</section>
<svg id="cassette-tape">
<mask id="spinner-mask">
<rect x="0" y="0" width="500" height="500" fill="white" />
<g id="spinners">
<path id="left-spinner" d="m 24.287838,27.548938 c 0.05988,-0.64098 0.243439,-1.240182 0.524057,-1.777642 l 0.796454,0.56427 0.767691,-1.052612 -0.810351,-0.573857 c 0.840878,-0.89714 2.015991,-1.464736 3.303835,-1.51855 l -0.09413,1.011421 1.296832,0.12064 0.09413,-1.011418 c 1.255738,0.2906 2.306004,1.065136 2.966648,2.102093 l -0.902126,0.41457 0.560455,1.17609 0.886864,-0.40762 c 0.17651,0.580021 0.246567,1.202805 0.186882,1.843785 -0.05969,0.64098 -0.24324,1.240181 -0.523861,1.777641 l -0.761036,-0.539123 -0.736377,1.074333 0.743618,0.526893 c -0.840874,0.897134 -2.015988,1.464634 -3.303822,1.518844 l 0.08258,-0.88765 -1.296846,-0.120642 -0.08258,0.887552 c -1.255931,-0.29079 -2.305999,-1.065429 -2.967039,-2.102291 l 0.828158,-0.380615 -0.525622,-1.191845 -0.84753,0.389519 c -0.176315,-0.580021 -0.246372,-1.2029 -0.186884,-1.843784 z" />
<path id="right-spinner" d="m 61.684849,27.611268 0.952415,0.21418 0.303513,-1.266991 -0.968857,-0.2178 c 0.430519,-1.15163 1.296639,-2.127827 2.464318,-2.673309 l 0.302536,0.969738 1.243408,-0.387955 -0.302536,-0.969738 c 1.270805,-0.21516 2.538482,0.0953 3.547256,0.798019 l -0.672973,0.729924 0.970031,0.869739 0.661629,-0.717689 c 0.386292,0.467304 0.690582,1.015236 0.882362,1.629699 0.191582,0.61456 0.252831,1.23832 0.200776,1.842415 l -0.910149,-0.204693 -0.265945,1.275113 0.889213,0.199993 c -0.430519,1.15163 -1.296829,2.127926 -2.464508,2.673503 l -0.265358,-0.850852 -1.243408,0.387852 0.265358,0.85105 c -1.270806,0.21507 -2.538483,-0.0955 -3.547455,-0.79821 l 0.61779,-0.669944 -0.943809,-0.897725 -0.632271,0.685696 c -0.386292,-0.467304 -0.690788,-1.015137 -0.882362,-1.6297 -0.191781,-0.614463 -0.252831,-1.238323 -0.200974,-1.842315 z" />
</g>
</mask>
<path id="cassette" d="M 91.590862,38.87093 V 4.454674 c 0,-1.328045 -1.076683,-2.404628 -2.404632,-2.404628 H 5.2245767 c -1.3279471,0 -2.4046292,1.076583 -2.4046292,2.404628 V 38.87093 l -0.6011572,0.601159 v 14.327583 l 0.6011572,0.504097 v 1.750244 c 0,1.327949 1.0766821,2.404633 2.4046292,2.404633 H 89.186231 c 1.327949,0 2.404632,-1.076683 2.404632,-2.404633 v -1.750244 l 0.601151,-0.504097 V 39.472089 Z M 26.465469,57.278048 c -1.244976,0 -2.254341,-1.009369 -2.254341,-2.254341 0,-1.244972 1.009365,-2.254341 2.254341,-2.254341 1.244974,0 2.254351,1.009369 2.254351,2.254341 0,1.244972 -1.009376,2.254341 -2.254351,2.254341 z m 8.949273,-1.502701 c -1.057507,0 -1.914624,-0.857315 -1.914624,-1.914619 0,-1.057312 0.857117,-1.914627 1.914624,-1.914627 1.057308,0 1.914623,0.857315 1.914623,1.914627 0,1.057304 -0.857315,1.914619 -1.914623,1.914619 z m 25.20673,0 c -1.057309,0 -1.914624,-0.857315 -1.914624,-1.914619 0,-1.057312 0.857315,-1.914627 1.914624,-1.914627 1.057502,0 1.914627,0.857315 1.914627,1.914627 0,1.057304 -0.857125,1.914619 -1.914627,1.914619 z m 8.818344,1.502701 c -1.245171,0 -2.254342,-1.009369 -2.254342,-2.254341 0,-1.244972 1.009171,-2.254341 2.254342,-2.254341 1.24517,0 2.254341,1.009369 2.254341,2.254341 0,1.244972 -1.009171,2.254341 -2.254341,2.254341 z" mask="url(#spinner-mask)" />
</svg>
</article>
<article class="tab-content" for="mailing">
<div class="field-row">
<label for="email">E-Mail</label>
<input id="email" name="email" type="text"/>
</div>
<div class="field-row">
<label for="name">Name</label>
<input id="name" name="name" type="text"/>
</div>
<div class="field-row">
<label for="organization">Company</label>
<input id="organization" name="organization" type="text"/>
</div>
<div class="field-row">
<label for="address-line1">Address1</label>
<input id="address-line1" name="address-line1" type="text"/>
<label for="address-line2">
</div>
<div class="field-row">
<label for="address-line2">Address2</label>
<input id="address-line2" name="address-line2" type="text"/>
</div>
<div class="field-row">
<label for="city">City</label>
<input id="city" name="city" type="text"/>
</div>
<div class="field-row">
<label for="address-level1">State</label>
<input id="address-level1" name="address-level1" type="text"/>
</div>
<div class="field-row">
<label for="postal-code">Postal Code</label>
<input id="postal-code" name="postal-code" type="text"/>
</div>
<div class="field-row">
<label for="country-name">Country</label>
<input id="country-name" name="country-name" type="text"/>
</div>
</article>
<article class="tab-content" for="payment">
<div id="eth"></div>
<p>
Finalize your cassette tape by making a payment.
</p>
<button id="pay-eth"><img id="eth-icon-svg" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjQxN3B4IiB2aWV3Qm94PSIwIDAgMjU2IDQxNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+Cgk8Zz4KCQk8cG9seWdvbiBmaWxsPSIjMzQzNDM0IiBwb2ludHM9IjEyNy45NjExIDAgMTI1LjE2NjEgOS41IDEyNS4xNjYxIDI4NS4xNjggMTI3Ljk2MTEgMjg3Ljk1OCAyNTUuOTIzMSAyMTIuMzIiLz4KCQk8cG9seWdvbiBmaWxsPSIjOEM4QzhDIiBwb2ludHM9IjEyNy45NjIgMCAwIDIxMi4zMiAxMjcuOTYyIDI4Ny45NTkgMTI3Ljk2MiAxNTQuMTU4Ii8+CgkJPHBvbHlnb24gZmlsbD0iIzNDM0MzQiIgcG9pbnRzPSIxMjcuOTYxMSAzMTIuMTg2NiAxMjYuMzg2MSAzMTQuMTA2NiAxMjYuMzg2MSA0MTIuMzA1NiAxMjcuOTYxMSA0MTYuOTA2NiAyNTUuOTk5MSAyMzYuNTg2NiIvPgoJCTxwb2x5Z29uIGZpbGw9IiM4QzhDOEMiIHBvaW50cz0iMTI3Ljk2MiA0MTYuOTA1MiAxMjcuOTYyIDMxMi4xODUyIDAgMjM2LjU4NTIiLz4KCQk8cG9seWdvbiBmaWxsPSIjMTQxNDE0IiBwb2ludHM9IjEyNy45NjExIDI4Ny45NTc3IDI1NS45MjExIDIxMi4zMjA3IDEyNy45NjExIDE1NC4xNTg3Ii8+CgkJPHBvbHlnb24gZmlsbD0iIzM5MzkzOSIgcG9pbnRzPSIwLjAwMDkgMjEyLjMyMDggMTI3Ljk2MDkgMjg3Ljk1NzggMTI3Ljk2MDkgMTU0LjE1ODgiLz4KCTwvZz4KPC9zdmc+" id="eth-icon-svg">
<span class="button-text">Pay with Ethereum</span>
</button>
</article>
</section>
<section class="field-row" style="justify-content: flex-end">
<button id="previous">Previous</button>
<button id="next">Next</button>
</section>
</div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>(This code contains 364 words which means I gotta write 2364 words, not 2000)
So yeah. The green cassette svgs are going to be where the user can drag n’ drop their .mp3 .wav .ogg or whatever. They’re green because that’s how the .svg file is saved. I did that for testing purposes, to make sure I am ending up with a CSS styled SVG instead of just a SVG image.
Today I learned that SVGs can be added to the page in either <img> tags, or <svg> tags. If using <svg> tags, CSS can style the svg paths and other shapes. Super cool!
I am stumped on how to resize the cassette in the <svg> tag though. I’ll figure it out eventually.
Another cool thing I learned about was svg masks and clips.
Clips are just a vector in which everything on the inside is visible, and the outside is invisible. Masks on the other hand are more powerful. Masks can do what clips do, but they’re a color and a vector. In this case, I used a mask to make the section on the inside of the spinners transparent. A white mask means that the contents will be shown.
A black mask means that everything below it will be invisible. A white mask means that everything under it will be visible. White and black working together result in a cassette with spinners that are able to be animated!
Then there will be a little play /pause/stop icon which the user can click to preview the file they just uploaded.
While the music plays, the spinners will spin. That’s what I’m figuring out how to animate right now. I got them to rotate a bit, but the pivot point is all wrong.
I’ll figure that out tomorrow afternoon. Right now I gotta wrap this up and go to sleep.
Just watched Better Call Saul Season 3 episode 9. Holy shit, the scene where Kim gets in a car accident is so realistic. It reminds me of how it was when I crashed and hit my head while longboarding. I didn’t remember the impact, I just remember falling, then getting up.
Props to the producers for that jumpscare!
I sold a Weiss Schwarz Hatsune Miku booster pack. Pretty cool! Well I suppose I best get some sleep so I can take care of mailing that out in the morning.
It’s the morning. I slept soundly, woke up at 7AM stiff and tired. I think today I’m going to take it easy, since tomorrow I want to walk to the grocery store. I want to feel rested for that.
I sold two items. The booster pack goes to the UK. Shipping was $2.45 but there’s no way I can track it unless I pay $13. The buyer only paid around $10 total so that’s not happening. I’ve got today’s shipments packaged up and ready to walk to the mailbox. Just waiting on the 8:30AM cutoff.
Watching Didgeridoo performance videos while I wait and write.
How does she make those squaking sounds?!
I want a didgeridoo. I’ve got my eyes on DG doo portable didgeridoos. There are a few on eBay for a little less than on the mfg website. Anyway, It’s not that I really want to carry it around with me, I just want something compact for storage purposes. Heck, maybe I will want to carry it around with me once I get it.
It’s a lot of money though. Hopefully there comes a day when I can buy one!
Speaking of things that I want to buy… A bicycle is the number one thing that I need in order to level up in life. A bicycle will make getting into town waaaay easier as compared to how things are right now.
I’m going to need a way to get down to Dragon’s Parlor Games once it opens back up for play.
My idea to fund a bicycle is to start a savings fund. I started a jar, and put $10 in change that I had sitting around. $10 seems like a good amount to place in there from time to time. Really any amount is good, I’m just using $10 increments as a way to keep track of how much money I have. I’ll use a separate jar for amounts less than $10.
Right now I got approximately $20 in that jar. I say approximately because ~$10 of that $20 is in Ethereum. I put a little piece of paper in there with a 12 character backup seed. Unlike USD, I can count on ETH holding it’s value! I like to forget about paper wallets, then come across them in the future and be pleasantly surprised at how the value has appreciated.
At around the 4:15 mark, this performance gets amazingly rhythmic! If I were in the audience, I’d be inclined to pick up one of those $10 CDs.
I like how street musicians rely on the honor system to sell their CDs. There are so many eyes around, that it keeps everyone honest. I’m so grateful for street musicians. A busy place is improved to such a huge amount by street music. I always try to tip when I can.
I forgot to wish my best friend happy birthday on his birthday! Oh no! I feel terrible. I felt terrible when so few of my friends or family wished me happy birthday on my birthday. Now I just did that to my best friend! I feel guilty!
I tried to make it up to him. I made a jibjab video with his and my face on it and wished him a happy belated birthday.
Hopefully we get to play video games tonight! It’s not every week that he gets his Tuesday and Wednesday off.
As I finished up my morning walk, I heard a thumping sound coming from an overturned kiddy pool that my mom used when she raised ducks and chickens. I thought it could be a young porcupine, coyote, skunk, racoon– one of the many critters that has been spotted around here.
I figured it must be trapped, so I grabbed a stick and this is what happened.
Oh no, I’m being tempted to join the darkside of the internet– Facebook.
Facebook Shops were just launched… As disgusting as Facebook is, this could be a good opportunity for business growth. I hear people talk about Facebook marketplace pretty often, but I’ve never participated.
I think I’m going to do it. My target audience is probably on Facebook more than they are on eBay.
Hey this is perfect timing. I want to keep today’s work light so I can minimize stress and play video games this evening. I also want to walk to the grocery store tomorrow morning, so I want to get a good night sleep.
The perfect timing is that Facebook Shops just launched, and I can get in on it. I’ll set up a Facebook account, then a Facebook Shop, then I’ll be done working for the day. That should be a good workload for the day, and not too stressful. That’s the plan, anyway.
I wonder if I can use an alias, rather than my real name? I doubt it. This is Facebook we’re talking about.
Well, it’s a test pilot. If it sucks, if sales are nonexistent, I can back out.
On a related note, Amazon refuses to re-activate my seller account. They say they don’t reactivate seller accounts older than 3 months or something like that. Weird.
The support staff suggested that I make a new account using a different e-mail. How strange! That’s okay though. I’ve wanted to get my amazon account switched over to chris@grimtech.net for a long time. I suppose this is a golden opportunity to do that, and get a seller account started.
Ok then, To the moon!
But first, I have to write more. I also have to study Japanese.
I haven’t been using my Pomodoro timer for writing today. That was the plan, and that’s what I’m doing.
It feels alright I guess. It’s nice to not have to worry about doing yoga every 25 minutes. However, I think I could use a break every 25 to simply get up and stretch my legs.
I did yoga this morning while I walked. Every few laps I would do a sun salutation. Even when I half-ass yoga, it still makes me feel pretty good. I have to keep that in mind and half-ass it more often than not doing it at all.
Just had a good stretch.
I came up with an idea for creating artificial scarcity on my listings, simply.
monit instead of Zabbix. Zabbix great and wonderful and all that, but it’s a pain to set up and configure.
“If the process is long, it’s wrong”
Elon Musk
I think Elon said that as a quote to someone else. I don’t remember who that someone is.
Anyway, the zabbix idea is taking too long to implement. I should be able to set up web checking software in 25 minutes, so I can get back to the things that make money.
Honestly a part of why I’m steering away from Zabbix is the CPU cost. If I had a server in a closet, I’d gladly use Zabbix. I don’t have that. I have my laptop here, which annoyingly spools up it’s fans all the time.
If zabbix was the right choice for me and my eBay store, I’d have it running already. It’s really just too powerful of a tool for what I need. I need a free alternative to Happyapps.io. I simply need an e-mail when a watched product is sold out. That’s it, and monit can do that for me.
I’ll see if I can set up a monit instance and the Facebook Shop today. I’ll get monit running, set up a SMTP bridge so it can e-mail me, and then I’ll configure some checks on some products which I want to always be in stock.
That’s the plan. Keepin’ it simple today. As much as I’d like to jump right into my mp3 to cassette project, I have to draw a line and take care of myself. No web development today!
I think I have a listing that is out of stock right now. I should be getting an alert of some kind, but alas, I have not done the work needed to have that alert!
I’ll figure it out. I got dis!
I saw the mail carrier arrive at my house today at 10:30. I think they were dropping off my latest Amazon food order which took 4 weeks to arrive. To be clear, it’s Amazon’s fault, due to their inability to scale during the COVID-19 fiasco. They’re just driving a regular mini van with a USPS magnet or sticker slapped on the side.
I suppose it makes sense. The vehicles specifically made for mail carriers might be obsolete, now that there are fuel efficient, hybrid, and all-electric vehicles available. Maybe it has something to do with the rural area in which I live, and a regular minivan is a better choice for fuel economy because there is more distance between each stop.
There’s a Tesla ad which features a guy who drives a Model S to deliver the mail.
I dunno how he affords that, but from reading the comments, apparently it makes sense because he’s saving a shit ton of money by not having to buy gas.
Oh fuck, now I’m on youtube. I see a great video that I know I’ll be watching sometime today.
I haven’t watched it yet. I’m saving it for later but this is precisely something I have been wondering. Unlike Dragon, Starship has no abort system, and I’ve wondered why not.
My biggest concern about Starship is how it lands. What if it lands upright, but then immediately tips over? I’m pretty sure it would explode at that point, killing everybody inside. I can’t be the only one who has thought of this. There’s gotta be some sort of explanation for this. I can’t wait to watch the video and find out!
43. I choose to have the strength to move on to healthier relationships.
44. I deserve to have good things in life.
45. I release myself from anger.
I’m grateful for Tim Dodd the Everyday Astronaut. Im’ so excited to watch that video he produced. He does a great job and it’s obvious that he pours his heart and soul into his work. I especially enjoy watching Tim’s live streams when he goes to various launch complexes and films life. He’s always got some extra input to add that the official broadcasts leave out.
I’m grateful for my LAMY Al-Star fountain pen. It’s got a metal housing, it feels great in my hand, it’s a joy to write with.
@TODO add affiliate shopping link to LAMY Al-Star
I’m 100% sure I’ve been grateful for both of those things in the past, but that’s perfectly fine! It’s good to remind myself about the things that are important to me.
I’m grateful for the beautiful singing girl Hatsune Miku. I was over at my Miku shrine when I got up and stretched, and I took a close look at the streamer that I picked off the floor from the Bomb Factory in Dallas. July 6 2018 I was there for Miku Expo! That is a fact and I’ll always have that memory to cherish.
I took a long look at my Miku figurine and I just had to sqeee with joy!
Excelsior!
