https://ebastos.dev/tags/process/ Recent content in Process on Eri Bastos Hugo en-us Sun, 10 May 2026 00:00:00 +0000 https://ebastos.dev/2026/05/follow-the-process-kinda-of/ Sun, 10 May 2026 00:00:00 +0000 https://ebastos.dev/2026/05/follow-the-process-kinda-of/ <div class="audio-player"> <div class="audio-player-header"> <svg class="audio-player-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 18v-6a9 9 0 0 1 18 0v6"/> <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/> </svg> <span class="audio-player-label">Listen to this post</span> </div> <div class="audio-player-controls"> <button class="audio-play-btn" aria-label="Play audio"> <svg class="audio-icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg> <svg class="audio-icon-pause" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> </button> <span class="audio-time audio-time-current">0:00</span> <div class="audio-progress-wrap"> <div class="audio-progress-bar"> <div class="audio-progress-fill"></div> </div> <input type="range" class="audio-progress-input" min="0" max="100" value="0" step="0.1" aria-label="Seek audio"> </div> <span class="audio-time audio-time-duration">0:00</span> <div class="audio-volume-wrap"> <button class="audio-volume-btn" aria-label="Toggle mute"> <svg class="audio-icon-volume" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="currentColor"/> <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/> <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/> </svg> <svg class="audio-icon-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="currentColor"/> <line x1="23" y1="9" x2="17" y2="15"/> <line x1="17" y1="9" x2="23" y2="15"/> </svg> </button> </div> </div> <audio class="audio-element" preload="metadata" src="https://ebastos.dev/uploads/audio/follow_the_process.mp3"></audio> </div> <script> (function(){ var player = document.currentScript.previousElementSibling; var audio = player.querySelector('.audio-element'); var playBtn = player.querySelector('.audio-play-btn'); var iconPlay = player.querySelector('.audio-icon-play'); var iconPause = player.querySelector('.audio-icon-pause'); var timeCurrent = player.querySelector('.audio-time-current'); var timeDuration = player.querySelector('.audio-time-duration'); var progressFill = player.querySelector('.audio-progress-fill'); var progressInput = player.querySelector('.audio-progress-input'); var volumeBtn = player.querySelector('.audio-volume-btn'); var iconVolume = player.querySelector('.audio-icon-volume'); var iconMuted = player.querySelector('.audio-icon-muted'); function formatTime(s){ if(!s || isNaN(s)) return '0:00'; var m = Math.floor(s/60); var sec = Math.floor(s%60); return m+':'+(sec<10?'0':'')+sec; } playBtn.addEventListener('click', function(){ if(audio.paused){ audio.play(); } else { audio.pause(); } }); audio.addEventListener('play', function(){ iconPlay.style.display='none'; iconPause.style.display='block'; }); audio.addEventListener('pause', function(){ iconPlay.style.display='block'; iconPause.style.display='none'; }); audio.addEventListener('loadedmetadata', function(){ timeDuration.textContent = formatTime(audio.duration); progressInput.max = audio.duration || 100; }); audio.addEventListener('timeupdate', function(){ if(!audio.duration) return; timeCurrent.textContent = formatTime(audio.currentTime); var pct = (audio.currentTime / audio.duration)*100; progressFill.style.width = pct+'%'; progressInput.value = audio.currentTime; }); progressInput.addEventListener('input', function(){ audio.currentTime = parseFloat(this.value); }); var lastVolume = 1; volumeBtn.addEventListener('click', function(){ if(audio.muted || audio.volume === 0){ audio.muted = false; audio.volume = lastVolume || 1; } else { lastVolume = audio.volume; audio.muted = true; } updateVolumeIcon(); }); function updateVolumeIcon(){ var muted = audio.muted || audio.volume === 0; iconVolume.style.display = muted ? 'none' : 'block'; iconMuted.style.display = muted ? 'block' : 'none'; } audio.addEventListener('ended', function(){ iconPlay.style.display='block'; iconPause.style.display='none'; progressFill.style.width = '0%'; progressInput.value = 0; timeCurrent.textContent = '0:00'; }); })(); </script> <p>One of my colleagues used the expression “in a previous life” when referring to jobs he held in the past. I love that, so I will borrow it for this post.</p>