{"slug":"sveltekit","title":"SvelteKit","date":"2022-01-17T00:00:00.000Z","excerpt":"About to start the calendar maker","tags":["code","project"],"html":"

I started playing around with sveltekit and tailwind CSS today. I was going to work on making the calendar creator but didn’t get too far.

","css":{"code":"","map":null},"head":"","readingTime":"1 min read","relatedPosts":[{"slug":"studio","title":"Studio","date":"2022-03-17T00:00:00.000Z","excerpt":"I own calendar.studio","tags":["code","project"],"html":"

I guess Google domains was in beta, but they’re out of it now. I got an email from them offering a 30% discount on the first year. I was looking for a domain for the calendar maker and saw calendar.studio. Youtube has youtube studio, so maybe that’s a good name.

","css":{"code":"","map":null},"head":"","readingTime":"1 min read"},{"slug":"theming","title":"Theming","date":"2022-02-17T00:00:00.000Z","excerpt":"Remaking the calendar maker","tags":["code","design","project"],"html":"

I remade the calendar maker using Attractions, and it looks pretty nice so far. A few things it’s missing are dark mode and grid/layout utilities.

You can use SASS to override the default styles of components, but it doesn’t quite work. For example, the Tabs colors can be modified using the $main, $disabled, and $off-state variables, but you can’t make it pure black. When I set it, the final computed style is a medium grey, so I can’t get the active tab to be brighter than the inactive ones using my dark theme.

There aren’t any column/row/grid components, so I’ve been doing it manually. Maybe I could use some other library. It seems like there’s no margin on a lot of elements, e.g. buttons and form elements.

I thought I could use the Table element to display the Events (holidays/birthdays), but the table only accepts and displays text data. I decided to make another function that finds the table and replaces the last column of text with an img element whose src is the text. This seems to work fine, but maybe I should just have a custom Element that displays the info in a nice container and then stack those items in a flex column. This may make it easier to add click listeners to each event as well.

There was an issue I was having with the dropzone. The box was resizing to the shape of the inner text, which was very short if the wrong image type was dragged. If you hovered over the edge of the dropzone, the box would show the error and shrink the size. But then your mouse wasn’t hovering anymore, so it would grow to full size again. Then it would show the error and shrink, etc.

It turns out it was because I was using display: flex on most of my elements in the form, including the dropzone. I made a wrapper for the dropzone and set it to display: block instead which fixed it.

Also, there aren’t many options for changing the CSS of the Attractions components other than color. There’s some border radius, but not much size stuff. I’m thinking I may go back to Bulma on future projects.

I’ve uploaded the new version to cmaker.ihtfy.com.

","css":{"code":"","map":null},"head":"","readingTime":"2 min read"},{"slug":"workout","title":"Workout","date":"2021-03-16T00:00:00.000Z","excerpt":"I made a workout tracker","tags":["code","project"],"html":"

workout.ihtfy.com #

A couple of months ago, I made a website to track some basic calisthenics:

Situps
Squats
Pushups
Planks
Pullups

The goal was to motivate myself to merely continue exercising. In the past, I would often try to do a set number each day, or try to increase some metric each workout. The goal here is simply to beat your average. The average is total reps divided by total days, so if you take a break, you’ll see your average start to decay. It also means you won’t have to keep up with an exponentially growing goal.

Adding and Subtracting Reps#

$\"workout$

Originally, I was just using a spreadsheet to type in the reps as I completed them. This worked, but I wanted to have buttons that I could click rather than backspacing and retyping each number. There are +5 and -1 buttons for each exercise, so you can easily “add nickels” and “subtract pennies” to get your exact count quickly.

The data is stored in your browser’s localStorage which persists when you restart your browser or computer, but it doesn’t sync across devices.

Show or Hide Lines#

$\"Toggle$

You can toggle different exercises on and off, but note that the Average line is still using the original y-axes scale; its scale is locked to the default behind the scenes.

There is an option to manually edit the data points. It uses JSON format, so be careful to follow the pattern and not add extra commas, brackets, or leading zeros.

Edit the Data#

$\"edit$

Try it out, or see the source code

","css":{"code":"","map":null},"head":"","readingTime":"2 min read"}]}

workout.ihtfy.com#

Adding and Subtracting Reps#

Show or Hide Lines#

Edit the Data#

workout.ihtfy.com #

SvelteKit

Related posts