Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Workout Tracker PWA

workout.olzhasar.com

Post reply on HN
Print view View original

41–50 of 51 posts

Re: Show HN: Workout Tracker PWA

#41

Post by conor_f »

Another interesting thing in this space is Traindown[1]. It's simply Markdown for your exercises. As an example for those who need convincing to go to a link, this could be a simple workout:

  @ Mar 03 2024 08:00
  
  # Unit: kg
  # Bodyweight: 70
  
  Squat:
    40 12r
    65 8r 2s
    40 12r
  
  Assisted Pull Up:
    bw-20 12r
    bw-5 6r
    bw 2r
It's much more free-form than this, which is a bonus for me and allows me to track metadata such as weight, time of day I'm exercising at, or general mood/feeling about the workout. I can ultimately just take these plain markdown files from the app (I use a basic Android app that visualizes this Markdown[2]), import them and do whatever processing I like in Python.

Highly recommended!

[1] https://traindown.com/

[2]https://github.com/traindown/transponder

Re: Show HN: Workout Tracker PWA

#42

Post by mvkel »

olzhasar wrote: post #30
mvkel wrote: post #21

Nice and clean! As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA. I realized pretty quickly that the PWA world still feels like a hacky mess, with weird CSS rules to make it feel more, but never fully, native. Most of the issues from way back in the pre-App-Store days remain. For example, double tapping on the screen triggers a zoom, and there's no way to disa…

Thanks for the feedback! This a hobby project for now, so I tried to do it in a cheapest way possible, and PWA looked like a good approach, as there is no need to buy developer subscription. Have you used Swift to develop your IOS app or any cross-platform solution?

Makes total sense!

I basically did whatever chatgpt told me, which was Swift with UIKit, and Storyboards for the interface design.

Took me a bit to learn some of the conventions and syntax, but they've come a long way in making it much more intuitive for web dev folks.

Re: Show HN: Workout Tracker PWA

#43

Post by mvkel »

NorwegianDude wrote: post #22
mvkel wrote: post #21

Nice and clean! As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA. I realized pretty quickly that the PWA world still feels like a hacky mess, with weird CSS rules to make it feel more, but never fully, native. Most of the issues from way back in the pre-App-Store days remain. For example, double tapping on the screen triggers a zoom, and there's no way to disa…

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

It's not a viewport meta tag. It's { touch-action: manipulation; }.

And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example.

Thanks for your... encouragement?

Re: Show HN: Workout Tracker PWA

#44

Post by fodkodrasz »

beretguy wrote: post #26
NorwegianDude wrote: post #22

Earlier quoted context omitted.

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

> That's objectively BS and 100 % skill issue on your side. Why so aggressive?

It is 100% a skill issue (in communications skills)

Re: Show HN: Workout Tracker PWA

#47

Post by anon373839 »

mvkel wrote: post #21

Nice and clean! As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA. I realized pretty quickly that the PWA world still feels like a hacky mess, with weird CSS rules to make it feel more, but never fully, native. Most of the issues from way back in the pre-App-Store days remain. For example, double tapping on the screen triggers a zoom, and there's no way to disa…

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it.

That can be disabled: https://stackoverflow.com/questions/59732074/disable-double-...

Actually, all of the layout and gesture jank problems in web apps can be fixed, but it does take some effort. I’m tempted to put in the time to open-source a reference for this, but then I cynically wonder if Apple would then find a way to break it. ;)

Re: Show HN: Workout Tracker PWA

#48

Post by anon373839 »

mvkel wrote: post #43
NorwegianDude wrote: post #22

Earlier quoted context omitted.

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

It's not a viewport meta tag. It's { touch-action: manipulation; }. And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example. Thanks for your... encouragement?

Try:

  * { touch-action: manipulation; }
While you're at it:

  * { 
      user-select: none; 
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none; 
  }
Then, you can override these if needed for specific elements.

Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like:

  html {   
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
  }

  body { 
    height: 100svh;
    width: 100vw;
    overflow: hidden;
    touch-action: none;
    position: fixed;
  }
The idea is to never let html or body exceed the size of the viewport, lock them down completely, and then enable overflow scrolling only in the divs that need it. This also eliminates pull-to-refresh when the app is used inside the browser. (If you want PTR functionality in the app, of course you can watch for overscroll on a particular div and implement it yourself. But your app skeleton will stay put.)

Re: Show HN: Workout Tracker PWA

#49

Post by Player6225 »

conor_f wrote: post #41

Another interesting thing in this space is Traindown[1]. It's simply Markdown for your exercises. As an example for those who need convincing to go to a link, this could be a simple workout: @ Mar 03 2024 08:00 # Unit: kg # Bodyweight: 70 Squat: 40 12r 65 8r 2s 40 12r Assisted Pull Up: bw-20 12r bw-5 6r bw 2r It's much more free-form than this, which is a bonus for me and allows me to track metadata such as weight, t…

There it is! I've been looking for something like this!

I've been using my own homebrewed toml spec, but since I am more experienced with code than training, I was concerned if it would still work well as I become more experienced. Not sure if I'll use this, but good to see another interpretation of this kind of data!

Re: Show HN: Workout Tracker PWA

#50

Post by mvkel »

anon373839 wrote: post #48
mvkel wrote: post #43

Earlier quoted context omitted.

It's not a viewport meta tag. It's { touch-action: manipulation; }. And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example. Thanks for your... encouragement?

Try: * { touch-action: manipulation; } While you're at it: * { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } Then, you can override these if needed for specific elements. Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like: html { height: 100svh; overflow: hidden; overscroll-behavior: none; position: fixed…

Thanks for sharing these! Locking down the size of the viewport did the trick
Post reply on HN