A few days ago I saw this video about <a href="https://www.surfline.com/">Surfline</a>'s <a href="https://www.youtube.com/watch?v=xecRZIM6Vlg">LOTUS Surf Forecasting System</a>.
They have hundreds of webcams around the world, and they analyze the streams to understand and predict the quality of the waves.
<a href="https://www.youtube.com/watch?v=xecRZIM6Vlg"><img src="/images/surfline-lotus.png" alt="surfline-lotus" /></a>
Surfline does not seem to have any webcams where I live (Southern
Mediterranean), which is understandable, given the questionable quality of the surf.
But the beach is still a big attraction, and there are plenty of webcams pointed at it.
I've been <a href="https://github.com/jesusgollonet/opencv-clip-cutter"> playing with computer vision
</a> lately and want to give some basic wave detection a try. The first step is capturing streams from beach webcams, but they usually appear in sites which are slow and full of ads.
<a href="https://streamlink.github.io/">Streamlink </a>
is a great tool for that. It allows you to watch streams in VLC and provides a Python API that gives access to the stream data.
If the stream you care about is in a popular platform, like twitch or youtube
(or many others!) chances are there is <a href="https://streamlink.github.io/plugins.html">streamlink plugin</a> for it. Usage in this case is as simple as
<pre><code class="language-bash">streamlink https://www.twitch.tv/merewether_slsc best 
</code></pre>
If there is no plugin, you can look for the <code>m3u8</code> file in the page source and pass it to streamlink.
<pre><code class="language-bash">streamlink 'https://hd-auth.skylinewebcams.com/live.m3u8?a=rniaof33h8kqu8muddr7t086v3' best 
</code></pre>
Some sites do have some protection against this, but it hasn't been too hard to get around it.
Streamlink allows you to pass cookies and headers to the request, so what I've done to figure out what headers were needed was to copy the curl
request from the network panel and tweak them so they have the correct streamlink format for the <code>--http-header</code> option.
<img src="/images/image_2024-04-30-11-22-11.png" alt="image_2024-04-30-11-22-11" />
In the couple of sites I tried, it has been enough to simply pass the origin
header to streamlink, so from
<pre><code class="language-bash">curl 'https://hd-auth.skylinewebcams.com/live.m3u8?a=rniaof33h8kqu8muddr7t086v3'
...
 -H 'origin: https://www.skylinewebcams.com' \
...
</code></pre>
to
<pre><code class="language-bash">streamlink --http-header 'origin=https://www.skylinewebcams.com' 'https://hd-auth.skylinewebcams.com/live.m3u8?a=rniaof33h8kqu8muddr7t086v3' best 
</code></pre>
<img src="/images/image_2024-04-30-11-25-04.png" alt="image_2024-04-30-11-25-04" />
And I will leave it at that, as I just saw there might be some waves to catch
today! 🏄

Watching the Surf in VLC with Streamlink

This blog is handcrafted with markdown files in vim. Up until now, posting
images was a prohibitive dance of putting the image on a certain folder and
figuring out the relative path, posting it into markdown and then adjusting a
few times until I got it right.
Which is the reason why I never posted any.
Yesterday I implemented <a href="img-paste.vim">https://github.com/img-paste-devs/img-paste.vim</a> <a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a>
and now I can paste images directly.
If you see the below image, it works!
<img src="/images/image_2024-04-25-13-52-54.png" alt="image_2024-04-25-13-52-54" />
<h2>Demo</h2>
Now the steps to add an image to a post are:
<ul>
<li>Copy the image to the clipboard: I usually use <code>Cmd+Ctrl+Shift+4</code> on a mac</li>
<li>Go to the markdown file in vim</li>
<li>Press <code>&lt;Leader&gt;p</code> to paste the image (my leader key is comma, so in my case, <code>,p</code>)</li>
</ul>
This will create a png file in the directory you specify, and add the right
markdown syntax to the file.
Here is a quick video explaining how it works:
<a href="http://www.youtube.com/watch?v=QAdq7jXObEo"><img src="http://img.youtube.com/vi/QAdq7jXObEo/0.jpg" alt="A video of how i paste and preview images in markdown using vim" /></a>
<h2>Some Notes</h2>
Instructions on the plugin page are clear. Here are a couple of adjustments I
had to make to match to my workflow
<h3>Correct the image path</h3>
By default, the plugin stores the image in an <code>img</code> subdirectory inside the same folder
as the markdown file. In my case I wanted to move it to my /public/images folder at the root of my
site.
<pre><code class="language-vim">let g:mdip_imgdir = '../public/images'
</code></pre>
I have added that to <a href="https://github.com/jesusgollonet/website/blob/develop/.vimrc.local">a <code>.vimrc.local</code> file In the root of the project</a>, since this
configuration is specific to this project.
<h3>Rewrite URLs</h3>
The above variable creates a url that is relative to the markdown file, which is
perfect for when you're previewing the markdown file with an external tool or
withing github.
But in Next.js (which is what I use for this website), the /public folder is served as
the root of the website (so /public/images is just /images).
To solve this, I added <a href="https://github.com/jesusgollonet/website/blob/7f6047d94e824fc9c3087b986c830a11de339c01/build/lib/posts.ts#L25C1-L31C5">a simple regex that rewrites the links when rendering</a>
<h3>Further</h3>
Here's a few improvements I'm thinking of:
<ul>
<li>The obvious next step is to add the ability to make it work with image paths to
avoid having to only do it through the clipboard.</li>
<li>More in general, I would love to be able to paste a url and get the markdown
tags automatically, ideally being smart enough to know if it's a url, a local
file or even a youtube embed (TIL <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#videos"> there's no good way to embed youtube videos </a>)</li>
</ul>
And that's it. If you have comments questions or suggestions please let me know!
<a href="https://twitter.com/jesusgollonet">@jesusollonet</a> on twitter (or pretty much
anywhere) or email me at here.
<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
Oh god I had to add the markup to this link manually!! Next one. <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a>
</li>
</ol>
</section>

Pasting images in Markdown using Vim

As I have started getting back into the rhythm of coding more or less daily, I have been paying
attention to my workflow. My favorite piece on the topic is Simon Willison's masterful
<a href="https://simonwillison.net/2022/Jan/12/how-i-build-a-feature/"> How I build a feature </a>, which provides a detailed guide on building software including everything from tests to documentation and publishing.
While I'm very far from such heights, I have been almost invariably applying his first point:
<blockquote>
Everything starts with an issue
</blockquote>
I'm mostly applying this to personal projects, but even then using github issues
has proven extremely helpful:
<ul>
<li>They serve as TODO list for me. Especially handy when applied on projects that
I pick up every few weeks/months.
e.g:</li>
</ul>
<pre><code class="language-bash">gh issue list

ID TITLE LABELS UPDATED
#50 content: add /now page about 26 days ago
#49 cli: prompt save or discard post after editing about 2 months ago
#48 cli: check if server is running and optionally start about 3 months ago
#47 investigate how to share lib/posts between cli and website about 3 months ago
#46 fe: add syntax highlighting to inline code blocks about 3 months ago
#45 fe: break down diary page into components about 3 months ago
#39 cli: load configuration from entrypoint instead of inside new-post about 4 months ago
#33 cli: list out features + mvp about 4 months ago
#21 Simple web editor about 10 months ago
</code></pre>
<ul>
<li>I can add extra context in the form of comments (e.g: when finding relevant
links for a given topic).</li>
<li>They add a fun touch of gamification to my work.</li>
</ul>
In parallel, I have been using the <a href="https://cli.github.com"> gh cli </a> more and
more, and have stumbled upon a workflow that I find almost soothing in its
assemply line quality. The steps are pretty obvious. For every feature (or problem, bug, investigation...), I:
<ul>
<li>create a new issue</li>
<li>work on issue, and eventually fix it.</li>
<li>create pr</li>
<li>merge pr</li>
</ul>
Each of the steps maps perfectly to a gh command:
<ol>
<li>
Create an issue in github:
<pre><code class="language-bash">gh issue create -t 'Fix scroll in the homepage'
</code></pre>
</li>
<li>
Start working on it
<pre><code class="language-bash">gh issue develop &lt;issue number&gt; -c
</code></pre>
This is my favorite one. The <code>develop</code> command creates a branch named like the issue id and title. E.g: (e.g: <code>12-fix-scroll-in-the-homepage</code>). You can get the issue number using <code>gh issue list</code>. The <code>-c</code> flag means checkout the branch.
Commit, push, commit, push... done?
</li>
<li>
When the issue is ready, I'll create a PR. I will confess this part is superfluous when working on my own. I don't add any extra details to the PR, and seldomly review the changes, but I still do it in order to instill good practices for team settings.
<pre><code class="language-bash">gh pr create -t &quot;my pr title&quot;
</code></pre>
</li>
<li>
Then merge I the branch and delete de PR and branch.
<pre><code class="language-bash">gh pr merge &lt;pr number&gt; -r -d
</code></pre>
<code>-r</code> is for rebase and <code>-d</code> deletes the branch (local and remote) after merging.
</li>
</ol>

gh cli zen workflow

I have started a project in Python, which I'm not particularly familiar with. I
thought it would be useful to include in the git repo relevant shell commands to
remember what I've done, and then wondered if it was possible to have shell history
but limited to a specific directory.
Turns out this is trivial with <a href="https://github.com/ellie/atuin">atuin</a>, which
records your shell history to a sqlite database and provides additional context.
Assuming you're in the directory you want to check your history for:
<pre><code class="language-bash">$ atuin search --cwd $(pwd) term
</code></pre>

Directory specific shell history

For the next 8 weeks, I'm going to follow an extremely minimal strength training
plan of 4 exercises:
<ol>
<li>Pull ups</li>
<li>Split squats</li>
<li>Push ups</li>
<li>Step ups</li>
</ol>
I'm going to do 3 sets for each, pairing 1-2 and 3-4. The number of reps is
still being figured out (I'm 2 weeks in), but anywhere from 5 to 15, depending
on the exercise. Since I don't have weights at home, I'll increase the rep range
by 5-10% per week.
In total I'm aiming to being done in under 25 minutes, including 5 min warmup,
and if there's any time left I'll do a jump rope finisher.
This is extremely small and and simple. And even though the exercises are
reasonably full body, it no doubt leaves stuff on the table. The
reasons why I still think it's worth comitting to are:
<ul>
<li>I still need to make training a habit. I've started many times but there's
always something that gets me back to the starting line. This is small enough
that I can't say no to under almost any circumstance.</li>
<li>I need to build basic strength before getting into fancier exercises. There's
no shortage of Skate/Surf specific content on instagram and youtube, but after
trying a few things, it's clear to me that I need a solid foundation.</li>
<li>As a fulltime working dad, that also wants to skate and BMX and surf (and many
other things!), I need to be extremely smart with time management.</li>
<li>It can't interfere with random bmx/skate sessions throughout the week. There's
nothing more frustrating than not being able to do your sport because you're too
sore from training.</li>
<li>I don't want to rely on a gym. Apart from pull ups. The rest of
exercises can literally be done anywhere.</li>
<li>Having fewer exercises and low volume should allow me to focus on movement
quality.</li>
<li>Any plan is better than no plan, and this is mine.</li>
</ul>

Minimally Viable Plan (Strength Training)

I have missed a couple of yoga sessions in the last 4 days. I missed last week's
weekly post and am late for this week. I was starting to question why even
write? I don't have much to share...
Which is what's on my mind, and isn't this about sharing exactly that?
So that's a post.

Back to blocked?

I have a bunch of <a href="https://github.com/jesusgollonet/dotfiles/blob/master/zsh/aliases"> alliases in my shell
</a>. When
coding in vim, I frequently run whatever file I'm working on from vim's command
mode,
<pre><code class="language-vim">:!node %
</code></pre>
often by just mapping a key combo to run it.
<pre><code class="language-vim">:map ,r :w\|!node %&lt;CR&gt;
</code></pre>
A problem I often run into is that vim's command mode
doesn't know about my shell aliases. So if I have an alias like this in .zshrc
<pre><code class="language-bash">alias python=python3
</code></pre>
When running <code>:!python %</code> from vim, I get something like
<pre><code class="language-vim">zsh:1: command not found: python

shell returned 127
</code></pre>
My aliases used to be defined in .zshrc, but this file is not sourced when
running a command from vim's command mode. The solution is to <a href="https://github.com/jesusgollonet/dotfiles/blob/master/zsh/zshenv">move your
aliases to <code>~/.zshenv</code>
</a>, which is
sourced.
Note there's no need to load ~/.zshenv from ~/.zshrc, as it's part of the <a href="https://zsh.sourceforge.io/Intro/intro_3.html">
default zsh startup sequence </a>
and therefore loaded by default.

Shell aliases in vim command mode

Even later than usual. Was thinking of skipping this week, but my Gestalt sense
didn't let me sleep (good job on labelling the weeklies with successive numbers).
I have continued to record sessions and have started uploading my quick edits to <a href="https://www.youtube.com/@jesus_gollonet"> youtube </a>.
So far I've uploaded a couple of raw sessions with empty / non interesting parts
remmoved, and I love having the ability of checking them whenever / wherever.
The main goal is to check and help with progression. But I also think video
editing is a very useful skill to have.
Regarding that, iMovie is both great and terrible. It's at hand, and you can
slice clips in no time, but then you want to do simple things like a slight
rotation to correct horizon and you need to open Keynote (!!!). Have been
checking out Filmora and it seems very promising.
I've been thinking about video analysis, I have the feeling it can be
tremendoussly useful, even without specialized biomechanics knowledge. I haven't
found a free app to test it out, but thinking about the features (load and
display a couple of videos side by side, play/pause/skip forward, slow motion,
draw simple lines on top), it sounds like something so apt for openframeworks it
could even be a beginner tutorial. I have downloaded xcode and oF for the first
time in many years. I might give it a try if I can find time.
20-30 min of Yoga continues to be my only workout other than skate/bike. Last
Friday was the first time I've skipped since I started, but only because I
fell asleep on a Yin Yoga session after dinner and drinks at 3am.
Save, publish, and Yoga. Until next week.

Week 4

I had to chuckle at this:
<blockquote>
...you really can drive to the skatepark and it’s like a gym
</blockquote>
<blockquote>
...you primarily have skateboarders who come from homes where their parents would drive them to a sporting environment.
</blockquote>
From this <a href="https://www.skateism.com/ben-koppl-hates-being-famous-online/">interview with Ben
Koppl</a>, my
favorite skater which unsurprisingly seems to be an interesting person. He's
talking about the changing demographics of skateboarding.
I feel strongly that treating skateboarding more like a regular sport is a
great thing (it's the reason why I'm even considering it at 46!), and I'm 100% a
parent that drives his kids to the skatepark, but I love his point about
skateboarding starting as a mode of transportation, and a way for kids that have
nothing else to do or want to avoid their neighbourhood to have a tool to do
that while pushing their creativity...
The full interview is interesting, I enjoyed his non-negative take on kids
perferring short instagram clips vs video parts (which I've often seen mourned
about in BMX circles), and the early youtube days.

Parents that drive their kids to a skatepark

Ok let's get this published on <del>the Monday</del> Tuesday.
So now I have a problem, whenever I go to a skatepark, I have to choose between
the skateboard and bike. So far I've been basically splitting the time based on
what I feel like doing, often switching every 20 minutes. Trying to progress on
both is going to make it slower but oh well.
Been early to a public skatepark a couple of mornings, setting up the tripod and
sessioning some things. I've already spotted a couple of bad habits from that
(rotated shoulders when ollieing, butt not back enough on manuals on the
bike...), so plan to do it more.
I'm also looking for fun ways to put those into mini edits. The idea is similar
to what I'm doing here. Capture quickly, edit so that it's not super boring and
always publish. <a href="https://www.instagram.com/p/CsjGAF3Is2L/">Here's one</a>
Inspired by <a href="https://www.instagram.com/p/CsEcOPjNfix/">the daily push flick analysis
videos</a> I started researching better
ways to do video analysis, and daydreaming about automating / AI-ing some parts
of the process. Maybe
On the workout front, Yoga continues, and I started doing 5 minutes of jump rope
(which I've stopped for a few days as I hurt my knee on Sunday). I'm listening
again to the <a href="https://hubermanlab.com/dr-andy-galpin-how-to-assess-improve-all-aspects-of-your-fitness/">Huberman and Andy Galpin Fitness assessment
episode</a>
and plan on doing some assessment this week.
That's mostly it, skating, recording and doing informal analysis, and
obsessing over fitness.
Talk soon.

Week 3

Oh my god. Wednesday!
Last week was slower in all fronts.
Finished my 3 weeks of 20 minutes of Yoga a day. Last couple of days it
got really late and I did Yin Yoga instead. I'm resisting calling it 'cheating',
as I've invariably found it helpful when I've done it in the past, and I like to
think of myself as a strong proponent of less Yang more Yin, but yep, that is a
thought that has been had..
I have been going back and forth with what to do next, and I still don't have a
decision. I'm low-key terrified of losing momentum, as it is so hard to return.
I also want to start doing more, for some definition of more, but always in a
way that doesn't risk breaking the habit. Continuing Yoga for the moment.
Had the first couple of sessions on a skateboard. Taking it easy as it's
significantly tougher on joints and tendons, but I'm glad with where I'm at.
Managed to drop in on a couple of ramps without giving it 2 seconds, which was
really encouraging. It's been at least 10, if not 12 years since I last skated,
Couple of shy starts at Python. Getting past the environment setup/conventions,
and looking forward to starting the fun part.
Anyway, Save, publish... here's to a better one.

Week 2

I'm going to start a weekly recap to keep writing/publishing momentum. This
is written in haste as a quick capture of things I'm up to so don't expect too
much.
I decided to extend the 20 min of daily yoga to 3 weeks, and haven't missed a
day so far. Duration is low enough that I don't need any rest days, and even if
I'm tired I can get myself to do it. I'm also using instagram stories as
outsourced accountability and that's been working wonders.
The main impulse I've struggled with controlling is adding more time, more exercises, starting
cardio... Doing too much too soon is the killer of any fitness initiative so
I'll keep the commitment to 20 min.
Interestingly, even with such small time I can already feel some benefits. I was
at the skatepark early in the week and then over the weekend trying similar
tricks and the second time I could definitely feel better strength and
stability. It could well be something else but I wouldn't be surprised if the
yoga already has an effect.
I got a tripod and have started recording sessions at the skatepark. Curious to see if it can
help me progress better, as the few times I've recorded myself in the past have
demonstrated just how different things feel in your head vs from the outside
(and you can guess which one is nicer).
I also got a skateboard! That used to be my main thing growing up, and I re-picked it
up ocassionally in BCN (late twenties) and Amsterdam (mid thirties). I hadn't
considered it in the last few years due to some knee and ankle issues, but a friend lent me one for 10
minutes a few days ago and I could feel way more confident than last time I
tried 2 years ago, so got a super cheap second-hand complete and plan to
take it slowly.
Damn it's Tuesday already, so here's a list of a few other things I'm up to:
<ul>
<li>Using <a href="https://www.instagram.com/jesusgollonet/"> instagram as a raw visual diary </a>, and deliberately capturing stuff I used to be shy/embarrassed about.</li>
<li>Starging to feel a bit more comfortable with fakie on the BMX (and recording!)</li>
<li>Cooking quite a bit (and recording!)</li>
<li>After getting burned by <a href="https://twitter.com/jesusgollonet/status/1652386580387045376">a stupid typescript rabbithole</a> I <a href="https://github.com/jesusgollonet/website/blob/main/build/posts/2023-04-30_a-typescript-rabbit-hole.md">shelved a blog entry</a>
and haven't writen anything here, which is one reason why I'm starting this
weekly series.</li>
<li>After a few mindblowing experiences with ChatGPT I've finally tarted to dive
properly into AI. The <a href="https://www.deeplearning.ai/courses/#short-courses">prompt engineering
course</a> is proving super
valuable.</li>
<li>Relatedly, it seems like the <a href="https://twitter.com/jesusgollonet/status/1654536311661797384"> time finally came
</a> for me to get
into Python. A lot of the material on openAI seems to have decent Typescript or
js support but the native tongue is definitely Python, so there we go.</li>
</ul>
And there's more. Seems like there's a lot of momentum in many areas, so let's
see how long we can keep it.
Talk soon!

Week 1

The hardest part of exercising is getting back to it once you inevitably fall off
the wagon.
I started the year on a good streak of almost 2 months doing
reasonably regular exercise, including 2 to 3 days a week of strength and
at least one of low HR cardio. But then I got a new job, a stressful first
project and some other life events. So it's been a couple of months off again.
I have not completely stopped moving. I've been hitting the skatepark <a href="https://www.instagram.com/p/CrftUXQIhgZ/">on
a BMX with my kids</a> almost every week, but as I'm learning, the consistency
and focus of an actual workout is the key to improving, especially well into your 40s <a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a>.
There's the part where you need to get motivated enough to start again, but even
harder is the part where you need to re-adjust your expectations. You
were able to do X pull-ups, run Y kilometers, and now it's less.
So I've started with low expectations. 20 minutes of yoga every day for a week.
I need to work on a bit of low back pain and just get mobility in order, then
I'll get back to strength and cardio.
This is day 3. 🤞
<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
Beth Lewis said something in <a href="https://www.youtube.com/watch?v=t48iqNwS6PY">The Art of Stability</a> that stuck with me:
<blockquote>
Don't let your sport get in the way of your training.
</blockquote>
<a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a>
</li>
</ol>
</section>

Resuming exercise

<img src="/public/images//image_2024-04-24-15-48-24.png" alt="image_2024-04-24-15-48-24" />
I have been meaning to get back to writing in public for many years, but I always get blocked at different stages:
What engine do I use? Do I host myself or do I go for a managed option? Should I keep it just professional or is it ok to get personal? Single blog for all my interests or a few thematic ones? And &quot;who would even care&quot;? etc.
When the urge comes back, I start making decisions but then I run out of time
and let it sleep for another few months.
And it's been checks notes 8 years since <a href="https://github.com/jesusgollonet/software-over-the-rainbow/blob/master/build/source/_posts/2015-04-21-this-undefined-es6-arrow-functions.markdown">I last published an
entry</a>
but more like 12 years since the last time I blogged
with any regularity (here's <a href="https://github.com/jesusgollonet/software-over-the-rainbow/tree/master/build/source/_posts">the archives of my old blog</a> ).
I've had some periods of activity on <a href="https://twitter.com/jesusgollonet">Twitter</a> and <a href="https://www.instagram.com/jesusgollonet/">Instagram</a> (I'm currently loving it!) and even tried <a href="https://dev.to/jesusgollonet">a different platform</a>, but I'd like to have a place where I can explore freely.
I'm not getting blocked this time. I'm not even going to edit this one before
publishing. Wait what was the way to deploy this again?
If you're reading this, I managed to figure it out :)

Diary