A Shower Of ThoughtsWhere I write about frontend web development, guitars, music, films, games, and anything else I'm interested in2023-03-31T00:00:00Zhttps://blog.berbaquero.com/Bernardo Baquero Standbaquerober@gmail.comMy 2017's Lists and Numbers2017-12-31T00:00:00Zhttps://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/<p>At the end of the year, I like putting lists together and reviewing numbers for the things I managed to keep track of during the year. This is a fun way for me to look back at 2017 through the things I enjoy the most — music, films, concerts, traveling, and games!</p>
<!-- excerpt -->
<h2 id="traveling">Traveling <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#traveling">#</a></h2>
<p>In 2017 I visited to 10 cities in 7 contries. To get to these cities and back, I traveled twice by train, 6 times by car, and 7 times by plane.</p>
<ol>
<li>Brussels, Belgium</li>
<li>Liege, Belgium</li>
<li><a href="https://www.instagram.com/p/BW5lZ9fAxVi/">Luxembourg, Luxembourg</a></li>
<li>Cologne, Germany</li>
<li><a href="https://www.instagram.com/p/BXY8Ro_A9eg/">Dubrovnik, Croatia</a></li>
<li><a href="https://www.instagram.com/p/Bbh4sl0nF6j/">New York City, USA</a></li>
<li>Chicago, USA</li>
<li>Iowa City, USA</li>
<li>Paris, France</li>
<li>Bogotá, Colombia</li>
</ol>
<p>This year I finally visited <a href="https://mobile.twitter.com/berbaquero/status/930927028429381632">New York City</a>, which is, next to Tokyo, among the cities I've always wanted to visit the most. It was definitely the traveling highlight of the year for me.</p>
<h2 id="concerts">Concerts <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#concerts">#</a></h2>
<p>I attended 10 live shows, for 9 different artists, across 5 different cities in 3 countries.</p>
<ol>
<li><a href="https://mobile.twitter.com/berbaquero/status/829467165434707973">Dream Theater — Tilburg</a></li>
<li>Between The Buried And Me — Amsterdam</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/840331226233880580">Devin Townsend — Amsterdam</a></li>
<li>Haken — Amsterdam</li>
<li>Fatboy Slim — Amsterdam</li>
<li>Snarky Puppy — Eindhoven</li>
<li>The Shattered Fortress — Tilburg</li>
<li>La Yegros — Luxembourg</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/907712211665211392">LCD Soundsystem — Amsterdam</a></li>
<li>Dream Theater — New York City</li>
</ol>
<p>Dream Theater were the first and last live shows I attended during the year. Neat!</p>
<h2 id="music">Music <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#music">#</a></h2>
<p>I used Spotify almost exclusively to listen to music during 2017.</p>
<p>I listened for a total of 29699 minutes of music during the whole year, which is the same as 495 hours, or 20.6 days. I honestly feel surprised it was this little.</p>
<p>The artist I listened to the most was The Dear Hunter.</p>
<p>The song I listened to the most was <a href="https://mobile.twitter.com/berbaquero/status/901009222770585600"><em>People Who Eat Darkness</em></a> by Steven Wilson.</p>
<p>Overall, my favourite album of the year was <strong>To The Bone</strong> by Steven Wilson, followed by Arcade Fire's <strong>Everything Now</strong>.</p>
<h2 id="films">Films <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#films">#</a></h2>
<p>According to my <a href="https://letterboxd.com/berbaquero/films/diary/for/2017/">Film Diary in Letterboxd</a>, which I tried to keep accurate through the whole year, <strong>I watched 57 films</strong> in 2017.</p>
<p>Out of those, 32 of them I watched at home, 15 on the cinema, and 9 while travelling (of which 4 were while on a plane).</p>
<p>Out of those, <a href="https://letterboxd.com/berbaquero/film/blade-runner-2049/"><strong>Blade Runner 2049</strong></a> was my favourite film of the year, with <a href="https://mobile.twitter.com/berbaquero/status/934273366441254913"><strong>Coco</strong></a> being a close second.</p>
<p>23 of these films I watched on Netflix.</p>
<p>I feel like I didn't watch as many films as I would have liked, so that's something I'll try to improve on next year. This year I also signed-up for Amazon Prime Video, so I hope it makes for more films to watch during next year.</p>
<h2 id="games">Games <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#games">#</a></h2>
<p>This year I played 31 games, and finished 13 of those.</p>
<p>22 of them were on PS4, 3 on Switch, 4 on Nintendo 2DS, 1 on SNES (Classic Mini), 1 on iOS, and 1 with emulation.</p>
<p>1 of them was a replay.</p>
<h3 id="finished%3A">Finished: <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#finished%3A">#</a></h3>
<ol>
<li>Titan Souls — PS4</li>
<li>Final Fantasy XV — PS4</li>
<li>Journey — PS4</li>
<li>FF XV: A King's Tale — PS4</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/840992176666529793">Inside — PS4</a></li>
<li><a href="https://mobile.twitter.com/berbaquero/status/854433355101765632">Kingdom Hearts 1.5 Final Mix — PS4</a></li>
<li>Kingdom Hearts 2.0 Final Mix — PS4</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/871797350137819136">Monument Valley 2 — iOS</a></li>
<li>Unravel — PS4</li>
<li>Life Is Strange — PS4</li>
<li>Mario Kart 7 — Nintendo 2DS</li>
<li>Super Mario 3D Land — Nintendo 2DS</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/923904368642019328">Super Mario Odyssey</a> — Switch</li>
</ol>
<h3 id="played">Played <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#played">#</a></h3>
<ol>
<li>Doom — PS4</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/887752793481781248">Yakuza 0 — PS4</a></li>
<li><a href="https://mobile.twitter.com/berbaquero/status/884460391648178176">Final Fantasy XII: The Zodiac Age — PS4</a></li>
<li>Tearaway: Unfolded — PS4</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/840638167682301953">Abzú — PS4</a></li>
<li>Super Mario Bros. 3 — NES Emulation</li>
<li>Yoshi's Island: Super Mario World 2 — SNES Classic Mini</li>
<li>Kingdom Hearts: Birth By Sleep — PS4</li>
<li>Guacamelee — PS4, replay</li>
<li>Hyper Light Drifter — PS4</li>
<li><a href="https://mobile.twitter.com/berbaquero/status/897578073939484673">Sonic Mania — PS4</a></li>
<li>The Legend of Zelda: A Link Between Worlds — Nintendo 2DS</li>
<li>Mario And Luigi: Superstar Saga — Nintendo 2DS</li>
<li>Rocket League — PS4 + Switch</li>
<li>Downwell — PS4</li>
<li>Street Fighter V — PS4</li>
<li>Tricky Towers — PS4</li>
<li>Mario Kart 8 DX — Switch</li>
</ol>
<p><a href="https://mobile.twitter.com/berbaquero/status/874728563651612672"><strong>Rocket League</strong> is easily the one game I played the most during the year</a>.</p>
<p>And without a doubt <a href="https://mobile.twitter.com/berbaquero/status/935681352065720320"><strong>Super Mario Odyssey</strong></a> is my favourite game of the year.</p>
<h2 id="highlights-of-2017">Highlights of 2017 <a class="direct-link" href="https://blog.berbaquero.com/posts/2017/12/my-2017-lists-and-numbers/#highlights-of-2017">#</a></h2>
<ul>
<li>Visiting the US was something I always wanted to do, and this year I finally got the chance to do it for the first time. It was a great experience altogether, specially NYC!</li>
<li>In preparation for visiting Japan (hopefully next year!) <a href="https://mobile.twitter.com/berbaquero/status/865470360543666176">I started learning Japanese</a>!</li>
<li>In Dubrovnik, I rode a water motor ski for the first time — it was pretty exciting. Also, stressful.</li>
<li>At work, I was promoted to Technical Lead for my Frontend development team.</li>
<li>The biggest one was getting engaged with my girlfriend Andrea. I proposed to her in the middle of the Brookly Bridge in New York - a culmination of personal goals coming together right there and then.</li>
</ul>
Reeddit, 6 Years Old2018-11-20T00:00:00Zhttps://blog.berbaquero.com/posts/2018/11/reeddit-6-years-old/<p>6 years ago today, I gathered the courage to put Reeddit out there. To share it with other people. It was my first serious attempt at building a complete, frontend-only web-app.</p>
<p><a href="https://reedditapp.com/">Reeddit</a> is basically an alternative way to browse reddit.com’s content. While I love to read and browse reddit.com, I never really liked their UI- specially on their mobile site, which was really cumbersome and ugly, at least back then.</p>
<p>Also, I wanted to become a proper web frontend developer! I had worked with Java for almost 4 years by then and sure, I had to work with HTML and CSS over the years, but it always felt like I was only scratching the surface, and JavaScript had always completely eluded me.</p>
<p>So this was, in my mind, the perfect way to address those things: I would design and build the reddit UI that I’d love to use, and by doing so, I would learn as much as I could about what frontend development really was, learn the proper foundation— JS included.</p>
<p>In the span of ~5 months, working a couple of hours every week after work and a bit more each weekend, I built a responsive, single-page web-app for <em>just reading reddit</em>. And by doing so, I had learnt so, so much about building things for the browser; how to tame the DOM (thanks to jQuery/Zepto!) and the Cascade, the Box Model, how to use Flexbox (so shiny and new back then!). And I had more or less built the alternative reddit client that I wanted.</p>
<p>But that was supposed to be it! I built it for me. So I could use it myself. I didn't consider publishing it on the web— not initially.</p>
<p>But after showing what I had done so far to a friend from work, he told me "you should put it out there! It's nice!", to which I said that wasn't in my plans because I didn't think it was good enough for people to use it and much less like it. And then he said "if you already find it useful or good for yourself, there will be others who will agree and use it as well".</p>
<p>And that made me realize: if there was a single person who finds Reeddit, uses it, likes it, and continues using it, that'd be a huge satisfaction for me. Enough of a reward.</p>
<p>So for a couple of days I worked on making Reeddit a bit more "presentable", and made sure it worked fine in all the browsers I had installed, which were desktop and mobile Safari, Chrome, Opera, and Firefox.</p>
<p>And finally, on November 20th, 2012, I shared it with the world; first with my Twitter and Facebook network (<a href="https://twitter.com/berbaquero/status/270813753489104896">announcement tweet</a>), and then on reddit itself (<a href="https://www.reddit.com/r/webdev/comments/13od81/this_is_reeddit_a_minimal_elastic_and_readonly/">thread on r/webdev</a>).</p>
<p>I considered also showing it to Hacker News, but decided not to because I thought it was <em>definitely</em> not HN-worthy and that it would be shat upon if I did share it there. So I didn't. Silly me.</p>
<p>The reception on twitter and reddit was pretty much what I expected and hoped; people gave me good feedback, suggestions, and compliments. It was great. It felt good to share what I had worked on and to see it being well-received. I figured the cycle was complete. That the project was over as it had served its original purpose.</p>
<p>But it was far from over.</p>
<p>Less than 2 months later, during the first week of January 2013, <a href="https://twitter.com/cheeaun">someone</a> :) shared <a href="https://news.ycombinator.com/item?id=5012698">Reeddit on Hacker News</a>, and I only found out about it because after waking up that morning, I saw I was getting a lot notifications from people making tweets about Reeddit! All because of the weird machine that is Hacker News top posts.</p>
<p>So, I learned that there's a bunch of twitter bots that automatically tweet when a HN post receives certain amount of votes; here's <a href="https://twitter.com/newsyc50/status/287610168714338305">reeddit getting 50 votes</a> and here's <a href="https://twitter.com/newsyc100/status/287699254066167808">reeddit getting 100 votes</a>. And I guess people that follows these bots started reacting to those tweets and checking and tweeting about Reeddit. Then HN's post reached the top 2 spot on the frontpage.</p>
<p>And then it quickly reached the top of HackerNews' frontpage. Gulp.</p>
<p>The buzz generated by HN and Twitter was picked up by some big websites:</p>
<ul>
<li><a href="https://twitter.com/Designmodo/status/287660276067737602">Designmodo tweeted about Reeddit</a>.</li>
<li><a href="https://venturebeat.com/2013/01/05/ugly-ol-reddit-gets-a-spiffy-new-ui-with-reedit/">Venture Beat published an article</a> <a href="https://twitter.com/VentureBeat/status/287646148003500033">and tweeted about Reeddit</a>.</li>
<li><a href="https://mashable.com/2013/01/07/reeddit-reddit/">Mashable published a video article about Reddit</a> — although the actual video doesn't seem to work anymore. Boo.</li>
</ul>
<p>And best of all, <a href="https://twitter.com/alexisohanian/status/287695285088575489">Alexis Ohanian himself tweeted about Reeddit</a>.</p>
<p>It was crazy.</p>
<p>Those were a very awesome couple of days. It made the whole thing so incredibly rewarding. Much more than it already was.</p>
<p>But it was not over.</p>
<p>Even after the online buzz faded out, I learned of another benefit from it; I started getting approached by a few companies that were interested on me joining them as a frontend developer. One of them was a big one, and I couldn't believe it. And even though none of those worked out –as I would have had to move to a city I didn't really want to– the fact there was interest in my profile as <em>frontend developer</em> gave me the confidence to persue that path completely, and apply for Frontend Dev jobs in Amsterdam, which is what I really wanted.</p>
<p>Very fittingly, while using Reeddit myself one day and browsing the Amsterdam subreddit, I stumbled upon a post from someone sharing a job opening in the city, to which I replied with interest. Long (sub)story short, it was the experience and knowledge that I got from building Reeddit, and the confidence that its reception got gave me, what ultimately resulted and me getting a great job and moving to Amsterdam.</p>
<p>Afterwards, I continuously used Reeddit as my code playground, trying new things while fixing its bugs or adding new features, experimenting with new frameworks or libraries, or just applying the new things I'd learned at work. I believe I learned Sass/SCSS by migrating Reeddit's styles to it.</p>
<p>Reeddit has also received some open-source contributions during these years, which has always made so happy, humble, and very thankful, and has inspired me to give back— even though I don't do it as much as I should.</p>
<p>But it's been a while since I've done any work on Reeddit. I still love the product, but I feel like I've moved on from the codebase.</p>
<p>For almost 2 years now, I haven't really improved Reeddit. It got an improvement some weeks ago via a Pull Request on GitHub (yay open source!) but that's been pretty much it since years.</p>
<p>And it's actually a great feeling to see something you haven't had to support for a long time is still working fine. Of course, that's partially also thanks to Reddit itself not breaking its public API and to a very stable GitHub Pages service. But it's ultimately a testament to how wonderful The Web as a platform really is. How things that haven't been touched for years are still perfectly usable and accessible. I love it and don't take it for granted.</p>
<p>And I will try to make sure that my now-6-year-old Reeddit web-app stays usable and accessible in the future; but it's time to officially feature-freeze Reeddit.</p>
<p>It's time to move on.</p>
<p>To Reeddit 2.</p>
<p>--</p>
<p>Footnotes:</p>
<ul>
<li>The first improvement to Reeddit after releasing it was done just around 30 minutes after sharing it on reddit and getting the suggestion to show previews for image posts, in the comments view.</li>
<li>For some time at the beginning of the published codebase, all the JS code was wrapped in a single jQuery/Zepto <code>$.ready()</code> function.</li>
<li>Firefox had no support for Flexbox back then, so I had to do some sort of browser detection and use Floats instead. Yikes.</li>
<li>Reeddit's UI was inspired by <strong>HNMobile</strong>, now known as HackerWeb, by <a href="https://twitter.com/cheeaun">@cheeaun</a>. When I used HNMobile for the first time on my iPhone 4S, I remember being blown away by the fact a web-app could look and feel so smooth and <em>native</em>.</li>
<li>Yes, I'm building a <a href="https://mobile.twitter.com/berbaquero/status/1065009473360674816">new version of Reeddit</a>!</li>
</ul>
My List and Numbers of 20182018-12-31T00:00:00Zhttps://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/<p>Same as the previous years, here’s a bunch of lists and numbers from the things I did in 2018.</p>
<p>While writing this, I’ve realised that looking back at my own Twitter feed is a perfect way to recollect lots of the my year’s highlights. And here I was thinking of using Twitter less, heh.</p>
<h2 id="places">Places <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#places">#</a></h2>
<p>I visited 5 cities in 4 countries. To get there and back, I traveled by train twice, and flew ten times.</p>
<ol>
<li><a href="https://twitter.com/berbaquero/status/995025549432107008">London, England</a>. First time visiting. It’s uttely massive, so I felt like I didn’t have the chance to see enough of it. What I did see was great.</li>
<li>Berlin, Germany.</li>
<li>Barcelona, Spain. Twice!</li>
<li>Cartagena and</li>
<li>Bogotá, Colombia. <a href="https://twitter.com/berbaquero/status/1074735529390944256?s=20">The food! <3</a>.</li>
</ol>
<h2 id="concerts">Concerts <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#concerts">#</a></h2>
<ol>
<li>Steven Wilson @ AFAS, Amsterdam</li>
<li><a href="https://twitter.com/berbaquero/status/995365415814680576?s=20"><strong>Hamilton</strong> @ Victorian Palace Theater, London</a>. This is one of this year’s highlights. It was an incredible experience that I’d love to revisit.</li>
<li><a href="https://twitter.com/berbaquero/status/1006298335668592642">Arcade Fire @ AHOY, Rotterdam</a></li>
<li>Motherwolf @ Melkweg, Amsterdam</li>
<li><a href="https://twitter.com/berbaquero/status/1059037826812203009?s=20">CHVRCHES @ Tivoli, Utrecht</a></li>
<li>Nightwish @ Ziggo Dome, Amsterdam</li>
</ol>
<h2 id="films">Films <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#films">#</a></h2>
<p>I love films. Going to the movies, watching films at home. Reading about them. Learning from them. This year, I decided to get a <a href="https://www.cineville.nl/en/card">Cinevillepass</a>, which basically allows me to watch films unlimitedly across 50+ movie theaters in The Netherlands for a monthly subscription. It’s awesome, and it really made me go out to the movies more. I watched 25 films using the Cineville pass.</p>
<p>I also became a Pro member of <a href="https://letterboxd.com/pro/">Letterboxd</a>, mostly to support the website and its service, as it has become my favourite place to geek out about films. And as it turns out, Pro members get a nice Stats page per year. <a href="https://letterboxd.com/berbaquero/year/2018/">Here’s my 2018 Stats for Films</a>:</p>
<ul>
<li>
<p>In total, <a href="https://letterboxd.com/berbaquero/films/diary/for/2018/">I watched 78 films</a> — 63 of those were films I hadn’t watched before, and the remaining 15 were rewatches. It amounted to 149 hours of movie-watching, or a bit more than 6 days.</p>
</li>
<li>
<p>I watched 5 of these films during a flight.</p>
</li>
<li>
<p>28 of these films I watched on Netflix.</p>
</li>
<li>
<p>My favourite film of the 2018 is <a href="https://letterboxd.com/film/spider-man-into-the-spider-verse/"><strong>Spider-Man: Into The Spider-Verse</strong></a>. I was anticipating it since <a href="https://twitter.com/berbaquero/status/1004396060687716353?s=20">I watched the first teaser halfway through the year</a> and it absolutely blew my already-high expectations. It’s perfect.</p>
<ul>
<li>My runner up is <a href="https://letterboxd.com/film/roma-2018/">Roma</a>; as a fan of Alfonso Cuarón, this feels like his magnum opus. A technical masterpiece.</li>
</ul>
</li>
</ul>
<h2 id="games">Games <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#games">#</a></h2>
<p>This year I stumbled upon <a href="https://www.igdb.com/">IGDB.com</a>, which is trying to be a mix of IMDb + Letterboxd but for gaming. I decided to use it as a way to keep track of my games.</p>
<p>Here’s the list of <a href="https://www.igdb.com/users/bbs/lists/played-in-2018">all the games I played</a> and <a href="https://www.igdb.com/users/bbs/lists/finished-in-2018">the games I finished</a> in 2018.</p>
<p>From the moment I finished it, I had no doubt; <a href="https://twitter.com/berbaquero/status/991670391063105536">my favourite game of 2018 is <strong>God Of War</strong></a>.</p>
<p>My favourite games of the 2018 are:</p>
<ol>
<li><strong>God Of War</strong>.</li>
<li><a href="https://twitter.com/berbaquero/status/1039281549559164928?s=20">Marvel’s Spider-Man</a></li>
<li><a href="https://twitter.com/berbaquero/status/958832958546182144?s=20">Celeste</a></li>
<li><a href="https://twitter.com/berbaquero/status/1013909542697144320">Hollow Knight</a></li>
<li><a href="https://twitter.com/berbaquero/status/1032178869112066049?s=20">Guacamelee 2</a></li>
</ol>
<h2 id="music">Music <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#music">#</a></h2>
<p>I feel like I listened to so much music, so many different stuff that it’s a bit tricky to recollect. These is what pops out as I write this, as my favourite music this year:</p>
<ul>
<li><a href="https://twitter.com/berbaquero/status/966264851919134721?s=20">Celeste OST — Rena Laine</a></li>
<li><a href="https://songwhip.com/album/the-reign-of-kindo/happy-however-after">Happy However After — The Reign Of Kindo</a></li>
<li><a href="https://songwhip.com/album/chvrches/love-is-dead"><strong>Love Is Dead — CHVRCHES</strong></a></li>
<li><a href="https://twitter.com/berbaquero/status/1012618430703382528?s=20">The Now Now — Gorillaz</a></li>
</ul>
<p>At this point, Love Is Dead is tied with The Now Now for my favourite album of 2018.</p>
<h2 id="work">Work <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#work">#</a></h2>
<p>This year I left my job of 4.4 years, and the first one I got in The Netherlands, to join a promising and exciting scale-up to continue working and growing as a Frontend Developer in <a href="https://tiqets.com/en/about"><strong>Tiqets</strong></a>. I decided to work 36 hours (so a day off every 2 weeks) and it’s being a bliss and I’ve learned a lot. Here’s to more of that for 2019!</p>
<p>I also started development of and <a href="https://twitter.com/berbaquero/status/1065009473360674816?s=20">announced Reeddit 2</a>. Hope to release it in early 2019.</p>
<h2 id="other">Other <a class="direct-link" href="https://blog.berbaquero.com/posts/2018/12/my-list-and-numbers-from-2018/#other">#</a></h2>
<ul>
<li>I walked on ice! When the canals in Amsterdam froze early in the year, we got to walk on them. It was incredible, and scary!</li>
<li>I bought a new <a href="https://shop.fender.com/en-NL/electric-guitars/american-original-50s-telecaster/0110132850.html?clickref=1100l6qn2tRG&aff_id=10l1110">Telecaster guitar</a> which pushed me to get better at guitar playing and inspired me to learn more about music theory, specially. Hopefully I’ll make it something out of it in 2019.</li>
<li>I visited Efteling, which is like a Dutch version of Disneyland, sort of. Was wonderful.</li>
</ul>
<p><strong>Here’s to an even better 2019</strong>.</p>
New song from Tool2019-08-07T00:00:00Zhttps://blog.berbaquero.com/posts/2019/08/new-song-from-tool/<p>After 13 years (!), <a href="https://twitter.com/Tool/status/1159071693685633025">Tool has released a new song</a>, <em><a href="https://songwhip.com/song/tool/fear-inoculum">"Fear Inoculum"</a></em>.</p>
<p>This is surreal on its own; for a long time it felt like there was just not going to be new Tool music ever. But the best part is that it's only one song from their soon-to-be-released new album. Incredible.</p>
<p>I've listened to the new song a bunch of times today. I'm so excited, I'm just going to put my unordered thoughts around this in a list:</p>
<ul>
<li>In Apple Music, this track is listed as the 1st one of the new album's tracklist, with the rest just named Track 2, Track 3, etc. since their titles have not been revealed yet.<br />
This might just be an Apple Music quirk, but it could also mean this is the album opener.</li>
<li>If this is the album opener, it would mark the first time in Tool's discography that the opener is also the titular song.</li>
<li>The song itself is just fantastic! It sounds exotic, introspective, and then intense and cathartic. Very progressive.</li>
<li>The first half reminds me a lot of <em>Disposition</em> and <em>Reflection</em>. And <a href="https://songwhip.com/song/tool/disposition">Disposition</a> is one of my favourite Tool songs.</li>
<li>Actually, there's a section where I thought I was listening to Reflection, because of the drum patterns. Possibly a callback!</li>
<li>Maynard's singing is phenomenal. Very emotional and dynamic performance.</li>
<li>One of my favourite things about Tool is their song endings; they're so bombastic, full of energy. And here they've done it again. Powerful ending.</li>
<li>It's so, so good to listen to Danny Carey's fantastic new rythms and unreal drumming. He's in such great form here.</li>
<li>I had no idea they were releasing a single before the new album's release. This caught me by suprise this morning!</li>
<li>The excitement and anticipation for the new album has grown immensely after today!</li>
</ul>
Firefox Add-Ons that should be built into the browser already!2019-08-23T00:00:00Zhttps://blog.berbaquero.com/posts/2019/08/firefox-add-ons/<p>One of the many great things about The Web and web browsers is the inherent ability of users to extend the browser's abilities and functionalities via extensions/add-ons, which ultimately improve our experience and agency on the web and empower us as its users.</p>
<p>Popular browser extensions can often end up becoming native browser features; e.g, <a href="https://getfirebug.com/">Firebug</a>, one of the most important and influential Add-ons in Firefox for web development, has been integrated into Firefox natively (in its Developer Tools).</p>
<p>Through the <a href="https://testpilot.firefox.com/">Test Pilot program</a>, Mozilla created a bunch of Add-ons with the aim of eventually taking the learnings and best results and build them into a better Firefox. Even though Test Pilot is now over, it gave us some truly fantastic functionality in Firefox via these Add-ons.</p>
<p>I really like some of those Add-ons, so I wanted to talk about them because I believe you would find them useful as well.</p>
<p>The thuth is the majority of regular users will not dive deep enough into the browser's capabilities in order to take advantage of Add-ons in general. That's why I think these following Add-ons should be baked into Firefox by default already, so everyone can easily start using them from the get go.</p>
<p>While we wait for that, they are available to us right now, of course. So take a look and improve your browsing:</p>
<h2 id="containers"><a href="https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/">Containers</a> <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/08/firefox-add-ons/#containers">#</a></h2>
<p>I see Containers as sort of an evolution of "Private / Incognito" mode. When you open a Private/Incognito tab, whatever you do in there stays isolated from your normal browsing, and when you close the Private tab, any storage set by any site you visited gets deleted.</p>
<p>Containers work similarly- any Container tab's activity stays isolated from your normal browsing or from any other Container profiles. But unlike Private tabs, Container tabs don't delete the sites data when you close them. This is a good thing, because it allows you to easily maintain different online profiles in the same browser.</p>
<p><a href="https://support.mozilla.org/en-US/kb/containers">Read more about Containers here</a>.</p>
<p>Some of the things I like using Containers for is:</p>
<ol>
<li>A "Work" container, so opening gmail.com on a Work tab will open my work email, while opening gmail.com on a normal tab opens my personal email. Any other service I use for work, I open it in the Work container.</li>
<li>A "Shopping" container, where you exclusively browser web shops such as Amazon, keeping your shopping behaviour separate from the rest of your regular browsing.</li>
<li>Having a specific "Facebook" container, where any visits to facebook.com will automatically open a Facebook container tab, so Facebook cannot keep track of your browsing behaviour elsewhere.
<ul>
<li>This one is such a great idea that <a href="https://addons.mozilla.org/en-US/firefox/addon/facebook-container/">Mozilla published a separate Add-on specifically for it</a>, and <a href="https://twitter.com/berbaquero/status/1161674501857447936">it's just great</a>.</li>
</ul>
</li>
</ol>
<p>Containers represent a concrete example of Mozilla's focus and effort of protecting users' privacy online; they should be baked into Firefox already!</p>
<h2 id="snooze-tabs"><a href="https://addons.mozilla.org/en-US/firefox/addon/snoozetabs/">Snooze Tabs</a> <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/08/firefox-add-ons/#snooze-tabs">#</a></h2>
<p>I like to treat tabs as a sort of "to do" item; read this, watch that, listen to this, try that. And once I'm done with that "task", I can just close the tab.<br />
So naturally, I've never liked having endless amounts of tabs opened while I work, as it feels overwhelming and distracting- "so many things to do!".</p>
<p>This is why Snooze Tabs is such a brilliant utility.</p>
<p>Just hit the Snooze button in the topbar, and choose a time and date. <em>The current tab will then inmediately close, only to be automatically re-opened at the specified date and time</em>.</p>
<p>It's a super quick way to easily manage your browsing activity, and one of the most valuable tools for my productivity.</p>
<h2 id="side-view"><a href="https://addons.mozilla.org/en-US/firefox/addon/side-view/">Side View</a> <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/08/firefox-add-ons/#side-view">#</a></h2>
<p>Whenever I'm developing a web page, it's natural that I'd have to test it on narrow(er) viewports, for mobile and tablet scenarios (I even built a <a href="https://ventana.glitch.me/">super simple utility</a> for quickly doing so). Side View provides a convenient way to do that, while also potentially enhancing your browsing experience and productivity outside of development.</p>
<p>This super neat add-on adds a button on the location bar and top bar, and a context menu option that will <em>open the current tab within the browser's sidebar</em>. It also requests the site with a "mobile-like" User Agent string, which combined with the sidebar's generally narrow width, results in (most) websites rendering in their mobile version.</p>
<p>Navigation to the same domain stays within Side View, and anything else opens in the current normal tab. This enables enhanced browsing possibilities, such as:</p>
<ul>
<li>Opening lists-of-links sites (reddit, twitter) in Side View and opening their links in the normal tab.</li>
<li>Comparing (shopping) items, one in the normal tab, one in the Side View.</li>
<li>Email in Side View, links from emails in normal tab.</li>
<li>YouTube or Twitch in Side View, while doing anything more involved in the normal tab.</li>
</ul>
<p>Unfortunately, it doesn't play well with <a href="https://blog.berbaquero.com/posts/2019/08/firefox-add-ons/#containers">Containers</a>; even if a page in on a Container, once it's sent to Side View it will not longer be "contained"- it will just be on the regular/default browser context.</p>
<p>Overall it provides a neat way to browse and use the web, and it's definitely a great tool for testing responsive-designed websites.</p>
<hr />
<p><em>Update 11-02-2021: updated link to one of the apps as previous one was broken.</em></p>
Apple Arcade is fantastic. Mostly.2019-10-04T00:00:00Zhttps://blog.berbaquero.com/posts/2019/10/apple-arcade/<ul>
<li>From the beginning I loved the fact that this is not a streaming-based service, which I really don't like at all. It makes so much sense to simply allow customers to download and play the games without worries of internet connection.</li>
<li>Being able to connect my DualShock 4 so easily is huge. And lots of game actually show the correct buttons (cross, circle, square) in their UI which is neat. It makes so much sense for Apple to allow DS4 and Xbox One controllers; if you have a PS4 or an XB1, Arcade becomes much more attractive from the start.
<ul>
<li>I just wished it was easier to <em>disconnect</em> the DualShock when I'm done.</li>
</ul>
</li>
<li>It's not very clear to me how the cloud saves / progress sync works. Is it based on Game Center? AppleID?
<ul>
<li>It would be nice if there was a hub for managing save states. Or that games themselves confirmed in their own UIs about cloud syncing, otherwise.</li>
</ul>
</li>
<li>Games like Rayman Mini send an interesting message to me about Arcade: the service could easily host a full-fledge game like Rayman Origins/Legends, but because of the "mobile-gaming" constraints - like no garantee of a gamepad - they have to be shrinked into smaller-scale experiences. But maybe that's a good thing.</li>
<li>The service is only going to get better when it's available on macOS and specially tvOS. But maybe then the games will feel too "small".</li>
<li>The sweet selling-point of Arcade is that all its games (going to be) playable on iPhones, iPads, Macs, and Apple TVs. But would it make sense at some point to have "big scale" games only for Macs or TVs?</li>
<li>I'm curious how often will Apple introduce new games into the service. The launch roster is excellent and very long already!</li>
<li>Maybe this information is available somewhere that I missed, but it would be nice to know how are developers being compesated for having their games in the service. Hopefully it's not based on time spent on a particular game!</li>
</ul>
<h2 id="favourite-games-so-far">Favourite games so far <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/10/apple-arcade/#favourite-games-so-far">#</a></h2>
<ul>
<li><strong>Rayman Mini</strong>: the style of Rayman Origins/Legends is gorgeous, and the auto-running mechanics feel quite flexible, and allow for a lot of puzzle-platforming.</li>
<li><strong>Bleak Sword</strong>: simple and straighforward combat design, but with a nice challenging curve, and with lots of enemy variety. I don't think I could enjoy it <em>without</em> the DualShock, however; the touch controls are a bit quirky, I thought.</li>
<li><strong>Sayonara Wild Hearts</strong>: the presentation and aesthetics and stunning. And the sheer amount of gameplay variety across stages (and even during the same stage) is quite impressive. Unfortunately my progress hasn't been saved in the first 2 ocassions, "forcing" me to start all over. Still, it's so enjoyable I have no problem going back!</li>
</ul>
Satelite beta2019-11-20T00:00:00Zhttps://blog.berbaquero.com/posts/2019/11/satelite-beta/<p><strong><a href="https://beta.satelite.app/">Try the Satelite beta out now!</a></strong></p>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://blog.berbaquero.com/img/satelite-dark.png" />
<img src="https://blog.berbaquero.com/img/satelite-light.png" alt="Screenshot of Satelite in dark mode" />
</picture>
<p>One year ago today, as part of <a href="https://blog.berbaquero.com/posts/2018/11/reeddit-6-years-old/">"celebrating" the 6th anniversary</a> of <a href="https://reedditapp.com/">Reeddit</a>'s release, <a href="https://mobile.twitter.com/berbaquero/status/1065009473360674816">I announced I was working on "Reeddit 2"</a>.</p>
<p>It's been a whole year since then, and I have surely but very slowly been working on the successor to Reeddit.</p>
<p>But since <em>today marks the 7-year anniversary of Reeddit's release</em>, I have decided to just put the result of my work so far out there!</p>
<p>As mentioned at the start, <em>Reeddit 2 is actually named <strong>Satelite</strong></em>.</p>
<p>One of the many lessons I learned with Reeddit was that "Reeddit" is not a good name for a Reddit client; people were always misspelling it, or thinking that "reddit" had been misspelt. Furthermore, <code>.app</code> domains became available every since, and I wanted to get one!</p>
<h2 id="satelite">Sate<em>lite</em> <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/11/satelite-beta/#satelite">#</a></h2>
<p>"Satelite" is Español for..."Satellite", but it's also a reflection of my effort to offer a <em>lite</em> (as in, lean and fast) Reddit experience, specially compared with reddit.com's own experience.</p>
<h2 id="why-though%3F">Why though? <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/11/satelite-beta/#why-though%3F">#</a></h2>
<p>I built the original Reeddit out of the desire to have a better way to browse and read Reddit on my mobile and tablet, since back then they had a really lackluster mobile experience.</p>
<p>Turns out that while they improved this a lot in modern reddit.com, they are now annoyingly pushing their native apps while using it.</p>
<p><em>I built Reeddit, and now Satelite, because I wanted a simpler, faster, mobile-friendly way to browse and use reddit on the web</em>.</p>
<h2 id="what's-new%3F">What's new? <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/11/satelite-beta/#what's-new%3F">#</a></h2>
<p>The biggest change in comparison to the original Reeddit is that Satelite requires your reddit account to work. So you get your subscriptions and multireddits (I call them Channels), and you can <em>save</em> and <em>vote</em> posts. You can also un/subscribe to subreddits and create new Channels as well.</p>
<p>I will soon start working on taking more advantage of having the accounts, so you can comment on posts, and reply on comments and other pretty common stuff.</p>
<h2 id="feedback%2C-please!">Feedback, please! <a class="direct-link" href="https://blog.berbaquero.com/posts/2019/11/satelite-beta/#feedback%2C-please!">#</a></h2>
<p>I would love for you to <a href="https://beta.satelite.app/">try Satelite out</a> and send me any suggestion you might have or bug report you might find.</p>
Issues with HDMI, Apple's USB-C dongle, and my MacBook Pro.2020-03-20T00:00:00Zhttps://blog.berbaquero.com/posts/2020/03/macbook-hdmi-adapter-issue/<p>I was having issues with my MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) when trying to connect my external screen with its HDMI cable via Apple's <a href="https://support.apple.com/en-us/HT207806">USB-C Digital AV Multiport Adapter</a> a.k.a. dongle.</p>
<p>Basically, the MacBook wouldn't recognize the HDMI connection via the dongle, no matter which of the 2 ports I was using. Sometimes, not even the power charging would work, neither directly to the MacBook nor via the dongle.</p>
<p>I tried with another dongle of the same kind, and it didn't work either. And both dongles worked fine on another, similar MacBook model. It didn't seem to be a dongle issue.</p>
<p>This seem to indicate it was an issue with my MacBook itself. It could a hardware-software issue.</p>
<p>After <a href="https://duckduckgo.com/">DuckDuckGoing</a> for driver-related issues, I found this <a href="https://support.apple.com/en-us/HT201295">Apple Support Page about resetting the System Management Controller</a>. It provided the solution to my problem.</p>
<h2 id="solution">Solution <a class="direct-link" href="https://blog.berbaquero.com/posts/2020/03/macbook-hdmi-adapter-issue/#solution">#</a></h2>
<p><strong>Resetting the controller that handles the management of the USB-C connection a.k.a System Management Controller (SMC) fixed my issue.</strong></p>
<p>These are the steps I took for my MacBook Pro (extracted and paraphrased from the article linked above. Might be different steps depending on your specific MacBook model):</p>
<ol>
<li>Shut down the MacBook.</li>
<li>When it's off, <em>press and hold</em> the <strong>left-side <kbd>control</kbd> + <kbd>option</kbd> + <kbd>shift</kbd> keys</strong>.</li>
<li>While holding those keys pressed, <em>press and hold</em> the <strong>power key</strong> (on the upper right corner of the keyboard) to turn the MacBook back on.</li>
<li><em>Keep those 4 keys pressed for 10 seconds</em>.</li>
<li>After those 10 seconds, release all the keys. The MacBook should bootup like usual, and the problem should be solved. It was at least for me.</li>
</ol>
<p>Afterwards, both the HDMI connection and the power charging worked fine again, all from one dongle.</p>
useDelayedDebounce react hook2020-09-24T00:00:00Zhttps://blog.berbaquero.com/posts/2020/09/use-delayed-debounce/<p>For whenever you need to react to a repeatedly-and-rapidly-fired event, but only <em>some time after the last event occurred</em>.</p>
<p>For example, when you only want to make a request based on the value of a <code><input type=“text”></code> but don’t want to send the request every time the user types each character.</p>
<h2 id="usedelayeddebounce.ts"><code>useDelayedDebounce.ts</code> <a class="direct-link" href="https://blog.berbaquero.com/posts/2020/09/use-delayed-debounce/#usedelayeddebounce.ts">#</a></h2>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="token comment">/**<br /><span class="highlight-line"> * Receives a value that is the result of a repeatedly-and-rapidly-fired event</span><br /><span class="highlight-line"> * and returns the value at the time after the last of those events ocurred.</span><br /><span class="highlight-line"> *</span><br /><span class="highlight-line"> * @param originalValue value to debounce off</span><br /><span class="highlight-line"> * @param delay amount of milliseconds to delay after the last event ocurred</span><br /> */</span><br /><span class="highlight-line"><span class="token keyword">export</span> <span class="token keyword">function</span> useDelayedDebounce<span class="token operator"><</span><span class="token constant">V</span><span class="token operator">></span><span class="token punctuation">(</span>originalValue<span class="token operator">:</span> <span class="token constant">V</span><span class="token punctuation">,</span> <span class="token literal-property property">delay</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">V</span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// set the initial debounced value based on the original one,</span></span><br /><span class="highlight-line"> <span class="token comment">// and keep it in this hook's state</span></span><br /><span class="highlight-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>debouncedValue<span class="token punctuation">,</span> setDebouncedValue<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>originalValue<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token comment">// Declare the side-effect that will handle the debouncing.</span></span><br /><span class="highlight-line"> <span class="token comment">// Will execute when the component is mounted.</span></span><br /><span class="highlight-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span></span><br /><span class="highlight-line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">const</span> handler <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// The debounced value will only be updated after the delay has passed.</span></span><br /><span class="highlight-line"> <span class="token function">setDebouncedValue</span><span class="token punctuation">(</span>originalValue<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token comment">// Clean-up. Will execute when the component unmounts.</span></span><br /><span class="highlight-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// Cancel the current timeout if it hasn't triggered.</span></span><br /><span class="highlight-line"> <span class="token comment">// If the original value changes before the delay time happens,</span></span><br /><span class="highlight-line"> <span class="token comment">// then this cancellation will prevent the debounced value from being updated.</span></span><br /><span class="highlight-line"> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>handler<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span><br /><span class="highlight-line"> <span class="token comment">// Side-effect will execute when the original value changes</span></span><br /><span class="highlight-line"> <span class="token comment">// (which should be "a lot and very quickly" for this whole hook to be useful).</span></span><br /><span class="highlight-line"> <span class="token punctuation">[</span>originalValue<span class="token punctuation">]</span></span><br /><span class="highlight-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token keyword">return</span> debouncedValue<span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<h2 id="usage-example">Usage Example <a class="direct-link" href="https://blog.berbaquero.com/posts/2020/09/use-delayed-debounce/#usage-example">#</a></h2>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">const</span> debouncedTextInput <span class="token operator">=</span> useDelayedDebounce<span class="token operator"><</span>string<span class="token operator">></span><span class="token punctuation">(</span>textQuery<span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"><span class="token comment">// side effect that fetches a thing with the text field's value as input</span></span><br /><span class="highlight-line"><span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token function">makeFetch</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">,</span> debouncedTextInput<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>debouncedTextInput<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>
<p>In this usage (contrived) example, the side effect that will make the fetch will run only after 500 milliseconds have passed after the user stopped updating the text field. So no matter how quickly the user is typing, deleting, and otherwise updating the text field value, the request will only be made half a second after the user <em>stopped</em> updating it.</p>
The best from last-gen consoles; screenshots, video captures, and photo mode.2020-11-15T00:00:00Zhttps://blog.berbaquero.com/posts/2020/11/consoles-screenshot-video-photo-mode/<p>This week I bought a controller for my Nintendo Switch and only when I started using it I realized there was no “capture” button in it. That meant not being able to take a screenshot or save a video recording of the games.</p>
<p>Only then I realised how important this feature was to me.</p>
<p>The new generation of home game consoles started this week - <em>current-gen</em> became <em>last-gen</em>, and <em>next-gen</em> became <em>current-gen</em> - with the releases of Xbox Series X and PlayStation 5. And they bring lots of promises for what "the new current-gen" is supposed to mean.</p>
<p>But just now, after not having a “capture” button on my controller, I looked back and realised what the most meaningful features from last-gen were to me: having the ability to take a snapshot of a nice looking or memorable moment of a game, while it’s happening, knowing that it will allow you to re-live it as much as you want in the future without having to actually replay the game and having to attempt to reproduce the moment is a brilliant feature which I love.</p>
<p>Combine that with Photo Mode - which granted, not every game has one - and you get a winner combo of game memories preservation and in-gaming photography.</p>
<p>More and more games are including Photo Modes that allow you to pause the game at any moment during gameplay and manipulate the camera, lightning, which characters are visible in the shot, and many more things, all in order to provide tools for taking great game moments. I love it.</p>
<p>I have spent a long time just doing “game photography” - which at the same time, makes me appreciate more the artwork, art style, graphics quality and in general the visuals of the games.</p>
<p>And being able to record videos has allowed me to re-watch great story moments and standout gaming experiences - beating a difficult boss, completing a challenge, or finishing a great set-piece - it’s a great way to go back to the game without having to actually play it again (which sometimes I simply don’t have the time to do, as much as I’d like!).</p>
<p>Besides the same promises of even-better looking, higher-fidelity game visuals that come with every new generation of consoles, it’s this peripheral kind of features that end up being the more important legacies of a console and its time.</p>
Quickly toggle Dark Mode on macOS via Automator2021-02-11T00:00:00Zhttps://blog.berbaquero.com/posts/2021/02/quick-dark-mode-toggle-automator-macos/<p>I like having a fast way to toggle Dark Mode, preferrably via the keyboard.<br />
Turns out it's very simple to set this up without needing any third-party app:</p>
<ol>
<li>Open <strong>Automator.app</strong>. Included in macOS.</li>
<li>Create new Application. Either via the initial popup or by going to <em>File → New</em> in the top menu.</li>
<li>Find and add the <em>"Change System Appearance"</em> action. Either by double-clicking on it or dragging it into the right panel.</li>
<li>Make sure the <em>Change Appearance</em> action is set to <strong>Toggle Light / Dark</strong>.</li>
<li>Save the app as "Toogle Dark Mode" and put it in the Applications directory.</li>
</ol>
<p>That's it! Opening this app will simply toggle Dark Mode immediately.</p>
<p>Combined with Spotlight (or Alfred) and you can quick-n-easy Dark Mode toggling via the keyboard.</p>
More iPad, less MacBook2022-10-17T00:00:00Zhttps://blog.berbaquero.com/posts/2022/10/more-ipad-less-macbook/<p>I’ve realised that most of the things I used to do and enjoyed doing on my laptop, I do them now on my tablet.</p>
<p>I think it started with the pandemic lockdown. Working from home all the time - which was something I was very happy with - came with an unexpected disadvantage: after spending my day working - sitting on my desk using the company laptop - I didn’t feel like using my own laptop at all, afterwards. The laptop had become a tool for work and I didn’t want to use it for anything else because it just reminded me of work.</p>
<p>Now, this is not to say I don’t enjoy my job or anything like that. I very much love it, specially now that I get to do it from home. But the fact that I do it at home means that it’s a bit harder to separate work from my personal life, and in my mind, having a separate device and form factor (the tablet) for my personal projects and tasks makes it easier to provide that healthy separation.</p>
<p>But even more than that, I enjoy the extra portability of the tablet over the laptop. The iPad Pro is lighter and a bit smaller than the laptop - 11” vs. 14” respectively in my case. Which allows me to do my things pretty much anywhere in the house.</p>
<p>Most importantly, the touch screen. I know none of this is new and it’s in fact taken for granted by everyone since these technologies have been ubiquitous for a long time now, but being able to do my <em>computing</em> on a touch screen feels fresh, <em>fun and engaging</em> in a way that a keyboard and mouse is not.</p>
<p>Coding is the only thing that I still prefer to do on a laptop, because it’s still more comfortable and effective than on a tablet, or possible at all. Trying to do it on the iPad is extra difficult since you cannot have normal access to any programming language or development environment on it. There are ways: either using a Terminal-like app to connect and write to an external device which is doing the actual processing of the code is one. A more straightforward approach is using Web IDEs like <a href="https://glitch.com/">glitch.com</a>, <a href="https://codesandbox.io/">codesandbox.io</a>, <a href="https://github.dev/">github.dev</a>, and <a href="https://vscode.dev/">vscode.dev</a> from the browser. You still need to connect a keyboard to make this comfortable enough, but it gets you closer to “the real thing”.</p>
<p>Perhaps a good native code editor already exists for iPadOS and I’m just not aware of it - one that still would need to connect to an external machine that does the code processing, but that at least makes the code-editing experience feel truly native on the iPad. My ideal scenario, however, would be a completely touch screen-centered interface for “writing” code without actually needing your keyboard as much or at all - perhaps only for naming your variables - and where everything else is done by using the touch-screen and its interactions to the fullest, for a more “interactive” and engaging experience.</p>
<p>All in all, using the iPad feels more instant, more engaging, and even though its operating system is very strict and constrained when compared with a desktop-class OS, I’ve actually enjoyed the simplicity that comes with that.</p>
<p>Maybe at some point I’ll get to completely move everything to the tablet - all iPad, no MacBook.</p>
Easier dark-mode CSS with Sass2023-03-28T00:00:00Zhttps://blog.berbaquero.com/posts/2023/03/sass-dark-mode/<p>When offering a dark-mode for a website, you probably want to offer an "automatic" or "system" option which follows the OS-level user preference for dark mode instead of explicitly forcing a light or dark mode.<br />
This way, visitors can choose:</p>
<ol>
<li><code>dark</code>: for always dark-mode</li>
<li><code>light</code>: for always light-mode</li>
<li><code>auto</code>: for automatically switching between dark/light based on operating-system setting.</li>
</ol>
<p>Writing the CSS for dark-mode that covers these options currently requires a lot of boilerplate, however. With the setup and the Sass mixin I'm sharing next, it should hopefully be easier to handle this.</p>
<p><em>Note: we're not focusing on the mechanics of how to switch between these options using JavaScript in this post. We're focusing on the CSS implementation specifically.</em></p>
<h2 id="the-setup">The setup <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/sass-dark-mode/#the-setup">#</a></h2>
<p>On your document, you're going to add a <code>data-theme</code> attribute to the root <code><html></code> whose value will be the currently chosen option:</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token comment"><!-- always dark-mode --></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">data-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"><span class="token comment"><!-- automatic / based on system preference --></span></span><br /><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">data-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span></code></pre>
<p>Again, how you chose to update this value on your pages is outside of the scope of this post.</p>
<h2 id="the-sass-mixin">The Sass Mixin <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/sass-dark-mode/#the-sass-mixin">#</a></h2>
<p>Here's the mixin that takes care of everything:</p>
<pre class="language-scss"><code class="language-scss"><span class="highlight-line"><span class="token keyword">@mixin</span> <span class="token selector">on-dark-mode </span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token selector">html[data-theme="auto"] <span class="token parent important">&</span> </span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">@content</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"> <span class="token selector">html[data-theme="dark"] <span class="token parent important">&</span> </span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token keyword">@content</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<p>And here's how to use it:</p>
<pre class="language-scss"><code class="language-scss"><span class="highlight-line"><span class="token selector">.some-component </span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token comment">// base / light-mode styles</span></span><br /><span class="highlight-line"> <span class="token property">--bg-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg-color<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span></span><br /><span class="highlight-line"></span><br /><span class="highlight-line"> <span class="token comment">// dark-mode styles</span></span><br /><span class="highlight-line"> <span class="token keyword">@include</span> <span class="token selector">on-dark-mode </span><span class="token punctuation">{</span></span><br /><span class="highlight-line"> <span class="token property">--bg-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token punctuation">}</span></span><br /><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<p>I use this mixin in any Sass project I work on, and so far it has worked nicely!</p>
<h3 id="limitations%3A-can't-be-used-for-root%2Fhtml-styles">Limitations: can't be used for root/html styles <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/sass-dark-mode/#limitations%3A-can't-be-used-for-root%2Fhtml-styles">#</a></h3>
<p>The only downside to this mixin (that I'm aware of) is that it can't be used for declaring dark-mode styles in the <code>:root</code> or <code>html</code> element;<br />
it only works for decendants of it, starting with <code>body</code>.</p>
<p>This means it can't be used to define a set of "global" colors as Custom Properties to be updated based on dark-mode, for instance.</p>
<h2 id="the-future%3A-simpler-implementation">The future: simpler implementation <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/sass-dark-mode/#the-future%3A-simpler-implementation">#</a></h2>
<p>Hopefully sometime later in 2023 we will be able to <a href="https://thinkdobecreate.com/articles/simplified-dark-mode-with-style-queries/">use style queries to simplify and shorten the code needed for robust dark-mode support</a>.</p>
ZapKeys2023-03-31T00:00:00Zhttps://blog.berbaquero.com/posts/2023/03/zapkeys/<ul>
<li><a href="https://zapkeys.berbaquero.com/">Homepage</a></li>
<li><a href="https://www.npmjs.com/package/zapkeys">npm</a></li>
<li><a href="https://github.com/berbaquero/zapkeys">GitHub</a></li>
</ul>
<p>ZapKeys is a JavaScript UI utility that makes it super easy and quick to add keyboard shortcuts to any page.</p>
<h2 id="try-it-now">Try it now <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/zapkeys/#try-it-now">#</a></h2>
<p>The easiest way to see it in action is by pressing the <kbd>F</kbd> key now, on this page!</p>
<h2 id="what-it-does%3A-a-different-approach-to-shortcuts">What it does: a different approach to shortcuts <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/zapkeys/#what-it-does%3A-a-different-approach-to-shortcuts">#</a></h2>
<p>Instead of requiring visitors/customers to learn and memorize some set of keypress combinations for your website, ZapKeys simply shows a key or key-sequence above each interative element on the page. They can then press the key/sequence and the corresponding element's interaction will be triggered.</p>
<p>So buttons and links will be clicked, forms fields will be focused on, etc. All without needing a pointer device or mouse.</p>
<h2 id="how-it-works">How it works <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/zapkeys/#how-it-works">#</a></h2>
<p>When it's activated by the end-user - by pressing the preconfigured activation key - ZapKeys grabs all the currently-visible interactive elements of the page (buttons, links, form-fields) and adds an overlay with a unique key/sequence over each element. Then, when one of the key-sequences is pressed, the corresponding element's interaction is triggered.</p>
<h2 id="the-easiest-setup">The easiest setup <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/zapkeys/#the-easiest-setup">#</a></h2>
<p>My goal was to make setting it up as easy as possible; with the default configuration and in the simplest implementation, you only need to:</p>
<ol>
<li>
<p>Include ZapKeys' CSS, and</p>
</li>
<li>
<p>Import the JS module and initialize it:</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token comment"><!-- On your HTML --></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><br /><span class="highlight-line"> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span></span><br /><span class="highlight-line"> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/zapkeys@0.2.1/dist/index.css<span class="token punctuation">"</span></span></span><br /><span class="token punctuation">/></span></span><br /><span class="highlight-line"></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br /><span class="highlight-line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> ZapKeys <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"https://unpkg.com/zapkeys@0.2.1/dist/zapkeys.esm.js"</span><span class="token punctuation">;</span></span><br /><span class="highlight-line"> <span class="token keyword">const</span> zapkeys <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ZapKeys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// default config - pressing 'F' will activate the shortcuts</span></span><br /><span class="highlight-line"> zapkeys<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><br /></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
</li>
</ol>
<p><strong>That's it!</strong> This is <em>exactly</em> the setup used in <a href="https://zapkeys.berbaquero.com/">ZapKeys' homepage</a>.</p>
<p>Naturally there's more configuration options to customise ZapKeys - you can check those on the <a href="https://www.npmjs.com/package/zapkeys">npm page</a>. It's also available for bundling via <code>npm i zapkeys</code> or <code>yarn add zapkeys</code>.</p>
<h2 id="years-in-the-making">Years in the making <a class="direct-link" href="https://blog.berbaquero.com/posts/2023/03/zapkeys/#years-in-the-making">#</a></h2>
<p>I started working on this utility around five years ago!</p>
<p>I was inspired by <a href="https://support.apple.com/en-us/HT210539#numberoverlays">Number overlays in Voice Control for macOS</a> which was announced around that time. I thought that while it would be difficult to make it work by voice on the browser, it was nice how Voice Control added a visual indicator for each element that you could interact with. I figured the next best thing was to make it work with the keyboard instead.</p>
<p>While looking for existing libraries that implemented this solution I only found "traditional" shortcut libraries. But then I found <a href="https://vimium.github.io/">Vimium</a> which has a feature that's pretty much what I had in mind, but wasn't a library that I could use on my own sites. That's when I decided to build it myself.</p>
<p>At some point it was working well enough in both <a href="https://satelite.app/">Satelite</a> and on this website so I considered it finished. Later I published it in npm as "Teclas" but I never worked on announcing or actually sharing it, I think partially because I didn't like the name.</p>
<p>Years later I came up with the new name and thought about renaming it and publishing it. But then I didn't. And more time passed.</p>
<p>Only a few days ago I found a bug which prompted me to update it with the fix and get it ready for publishing, actually for real this time, fr fr.</p>
<p><a href="https://tsdx.io/">TSDX</a> made it very easy to get ZapKeys ready as a npm library.</p>
<p>And here we are! ⚡</p>