Diéssica Gurskas

Learning vim: From VS Code to neovim (Part 1)

2024-09-29T14:00:15+00:00
I’ve been a VS Code user for years, but today, I am giving vim (motions & editor) another try. Why? +
I love keyboard navigation, and vim motions invite you to use your entire keyboard not only to type, going beyond the Ctrl+Shift+Command+Fn+^+{+/ hell.</li> +
neovim’s plugin ecosystem is GOLD for keyboard enthusiasts e.g. stevearc/oil.nvim</a>.</li> +
There’s a gap between my terminal and VS Code. No matter what extensions I throw at it, I can’t bridge it. Since I spend a lot of time in the terminal anyway, why not edit in it too?</li> +</ul> +
Disclaimer: Not a beginner tutorial. Rather a (hopefully inspiring) diary of my vim journey. But if you're curious, I've dropped some learning resources below. +
Today I learned</h2> +
which vim editor?</h3> +
Many editors support vim motions, including VS Code itself. Technically, I could just make my VS Code more keyboard-centric</a> without switching editors. But right now, I’m exploring neovim</a>, and learning vim motions across both VS Code and neovim. neovim is cute: small, fast, portable, extendable, widely supported, and not again owned by Microsoft. +
vim kinda has 4 modes</h3> +
- command-line mode (:</code> key): execute commands on vim, mostly editor-related, e.g. saving files, exiting vim.</li> +</ul> +Traditional text editors offer ways to do the above in a permanent “insert mode”, but vim separates that across modes. Many mistakes happen because you’re not in the mode you thought you were, it helped me that the “normal” mode cursor looks different than the other modes. +the normal mode</h3> +There’s nothing normal about the normal mode, so I will say again: in vim’s normal mode, keys turn into “motions” (move you around the file) and “operators” (act on text, e.g. deleting, finding, replacing). Think of it as a mode with permanently enabled “Cmd” or “Ctrl” keys which you use to move around in a regular text editor (I hope?). + +navigating up (k), down (j), left (h), right (k). (Try not to press l with your pinky finger</a>)</li> + creating new lines under the cursor (o) and above (O)</li> + jumping to next word (w), end of the word (e), or previous word (b)</li> + jumping around lines of code with gg (line 0), G (end of file), {line number you wanna go to}G, {N}j to go down N lines, {N}k to go up N lines</li> + inserting before cursor (i), inserting after cursor (a), insert in the beginning of line (I) or end of line (A)</li> + jumping to beginning of the line (0), end of line ($), or beginning of word (_)</li> + replacing a char (r) or word (R), deleting current character (x), deleting (d) e.g. a line (dd), next word (dw), previous word (db), basically a lot of the commands I’ve already learned above</li> + searching within a line with f(character), plus next (n) and previous (N) occurrence</li> + undo (u), redo (ctl+r). Pretty damn important, you make mistakes all the time.</li> +</ol> +I practiced these commands in roughly that order, moving on once I felt mostly accurate, though still slow. It might seem like a lot, but it’s easier when it’s about muscle memory and not memorizing a cheatsheet. Once you start combining motions and operators, things get fun. For example: I already use j</code> to move down, could 10j</code> jump down 10 lines? Yes (first I tried j10</code> lol). Deleting 3 words backwards? d3b</code>. +little vim config</h3> +Feeling a bit lost in my editor, had to change some things. I said earlier I was curious about the ecosystem, but now I’m a little overwhelmed. For now, keeping it minimal: +-- ~/.config/nvim/init.lua +local o = vim.opt + +o.number = true -- Print the line number in front of each line +o.syntax = "on" -- When this option is set, the syntax with this name is loaded. +o.mouse = "a" -- Enable the use of the mouse. "a" you can use on all modes +o.termguicolors = true +</code></pre> +(By the way, neovim uses Lua for configuration, if you’re wondering where the good old vimrc went…) +References for SLOW DIGESTION ONLY</h2> + +Everything you need to know about vim (GitHub)</a></li> + CLI vimtutor (see above), or Web interactive vim tutorial</a></li> + QuickRef vim cheatsheet</a> / - Graphical vi-vim Cheat Sheet and Tutorial</a></li> + “vim as your editor” (YouTube), by ThePrimeagen</a></li> +</ul> +That’s all for now</h2> +Back in my teenage years, I tried to learn vim and quickly gave up. Coding was already confusing enough, and I figured, “what’s the point of typing faster if I don’t even know what to type?”. Which was pretty wise, in hindsight. Pretty sure I peaked in wisdom right there. + Jokes aside (it was not a joke), I’m still far from hyper-productive on vim. But I wrote this blog post with it, felt focused and felt plenty of fun, which is productive enough I guess? Whether this is novelty, or the vim advantage, only time will tell. Plenty of people go from VS Code to neovim and then back again. Who knows. +Now, the text column width on this editor has been full screen since I started this post, and I’m on the edge of installing zen-mode.nvim</a>. Just gotta figure out what is this lazy nvim vs. packer thing. + :wq +


Misc(ellaneous)
2024-09-20T11:02:00+00:00
Open to work 🕊️</h2>
+Beyond my silly online presence, I’m a multidisciplinary creative partner in projects</strong> and can likely assist you from idea to launch! With over a decade of experience as a computer programmer, I’ve honed my skills in web development, led engineering teams, managed projects, and even designed UI/UX. Just get in touch :-)</p>
+Get in touch</h2>
+I’m happy to hear from most humans on most things. Say hi!</p>
+
+Bluesky</a> for silly stuff.</li>
+
Plain text email</a></strong>: hey@diessi.ca</a>.</li>
+
Signal</a></strong> for serious stuff. ⭐ Preferred as it’s encrypted ⭐</strong>
+
+Don’t have my Signal? Please email me with your name and your reason to contact me.</li>
+</ul>
+</li>
+</ul>
+Metadata</h2>
+
+    
+    
+    
+    
+    </a>
+    
+    </a>
+</div>
+This is my independent home on the internet. On my blog, I try to share knowledge and perspectives on what I find interesting – sometimes computers. When I write, please assume IMHO</a>/IMNHSO</a> and openness for dialogue.</p>
+
You may receive my blog updates by subscribing to my RSS Feed</a>.</p>
+
License & Attribution</h3>
+
+Pages are statically generated with Zola</a> as engine.</li>
+
88x31 buttons by The 88x31 GIF Collection</a>.</li>
+
All my content licensed under CC BY-SA 4.0</a>.</li>
+</ul>
+Your Privacy</h3>
+
+No analytics tracking. No cookies.</li>
+Third-parties usage: Hosted by GitHub Pages</a> behind Cloudflare</a> as CDN.</li>
+</ul>
+


We Misunderstand Learning
2024-09-19T13:13:42+00:00
We misunderstand learning.</em> We think learning happens as we consume information, so we insist on consumption, hoping it will make sense. Reading sparks new ideas—yet often we merely seek out validation for the ones we already have. We misunderstand learning.</em> We cling to theory like a lifeline, as though it can stand on its own, while overlooking the experimental space where it transforms: practice. Perhaps we gamify it. (Unlearning our addictions is another matter entirely.) We escape the confusion that must linger–it slips us that lingering isn’t forever. We misunderstand learning.</em> Through edutainment, we satisfy the illusion of smooth progress, estimated reading times, chapter after chapter. True learning is too disjointed, unpredictable, and fraught with setbacks. We obsess over minimising gaps between repetitions, but are these gaps learning breaks, or learning itself? I recall the first time I picked up a guitar: my fingers aching to stretch, shredding like crazy against the strings. The morning after, I played the chord—not through conscious effort or passion, but because my fingers developed dexterity and calluses overnight. We misunderstand learning.</em> Technique matters, yes, but some processes of embedding patterns are handled by our bodies in their own time. Others always seem to have it easier, so we feel ashamed. I won’t lie–some do have it easier. But most often we don’t know, we weren’t there to see behind the ease, and nobody’s quite vulnerable these days.</p>
+
We misunderstand learning, but once, we were in intimate touch with it. Back when we hadn’t yet been subjected to environments of comparison, deadlines, narrow molds, and had our complexities and neuro-diversities amassed into pure functions. I’m still not immune to this. At times, learning as an adult feels like a endless chase of the instinctive dance of curiosity it once was. Throw at it: Pomodoro timers, habit trackers and productivity hacks. Yet, it’s only when I sit down to an unmysterious learning practice and truly welcome confusion, chaos, and seeming non-productivity that I feel like I can dance with curiosity again, and learn.</p>
+


Fetch a npm package on GitHub without npm install
2024-08-25T16:30:00+00:00
The other day, a npm package was released broken to a private GitHub registry and it wouldn’t install:</p>
+> npm install @company/my-package
+</span>This error happened while installing the dependencies of @company/my-package@0.0.34
+</span>
+</span>another-package is not in the npm registry, or you have no permission to fetch it.
+</span></code></pre>
+The error message is clear: the released package @company/my-package</code> I’m trying to install depends on a package another-package</code> expected to exist in the npm registry somewhere. But another-package</code> is not there. I already knew those packages came from a monorepo, so likely another-package</code> was only an internal dependency in the monorepo, left unreleased. I wanted to inspect the package contents before releasing any fix to be sure, but couldn’t rely on npm install</code> for that. There used to be an option to download npm packages via GitHub UI, but that’s no longer the case.</p>
+Finding the package tarball</h2>
+One can read the package’s metadata to find a download URL for the package’s latest version. Here’s how:</p>
+
+
+(For private GitHub registries) Grab a classic GitHub token</a> with packages:read</code> permissions (hereafter {GITHUB_TOKEN}</code>).</p>
+</li>
+

+The URL of a npm package published to GitHub is https://npm.pkg.github.com/{PACKAGE_NAME}</code>. Use that to fetch the package metadata, which contains the package tarball URL.</p>
+</li>
+</ol>
+
></span> curl </span>-L</span> -H </span>"Authorization: Bearer {GITHUB_TOKEN}" "https://npm.pkg.github.com/@company%2Fmy-package" </span>|  </span>grep</span> -o </span>'"tarball":"[^"]*"'
+</span>"tarball"</span>:</span>"https://npm.pkg.github.com/download/@company/my-package/0.0.34/3d0304f38791214b09ec92a2262ca1697f"
+</span></code></pre>
+
+Download the package using the tarball URL.</li>
+</ol>
+></span> curl </span>-L</span> -H </span>"Authorization: Bearer {GITHUB_TOKEN}" "https://npm.pkg.github.com/download/@company/my-package/0.0.34/3d0304f38791214b09ec92a2262ca1697f" </span>| </span>tar</span> zx
+</span></code></pre>
+That will download the package to your current folder, and you may inspect the package contents now. :-)</p>
+


The Bitter Reality of Ebooks and the Kindle Model
2023-08-16T13:55:00+00:00
A few years back, I jumped into the world of ebooks to broaden my reading without stacking so many physical books. I went with the ever-popular Kindle; yet the full weight of “owning” ebooks, particularly from Amazon, was not something I understood.</p>
+…Until I decided to break up with Amazon, despite its convenience. You know the drill: Amazon exploits workers</a>, aggressively avoids taxes</a>, dominates markets</a>, and I was just itching to explore alternative bookstores. The hiccup? My Kindle was firmly rooted and entangled in Amazon’s ecosystem. Without Amazon, I could no longer conveniently or legally</em> read books on my Kindle, and without Kindle, I could not legally read books I once purchased on Amazon.</p>
+
Here’s what I’ve learned while attempting to part ways.</p>
+
It all begins with “DRM”</h2>
+Digital Rights Management (“DRM”) might not be a household term, yet its fingerprints are everywhere. Ever wondered how we consume content via proprietary software, rather than owning the content?</strong></p>
+
Think Spotify (you never own the music), Netflix (you never own the film), Adobe Creative Cloud (you never own the software), Steam (you never own the game), and Amazon Kindle (you never own the ebook). You download those proprietary software on your device, not the content itself. While you may have a license to the content, but it’s not truly</em> yours.</p>
+The use and distribution of the copyrighted content provided by those services (and many others) are restricted by DRM (“Digital Rights Management</em>”) technologies, implemented in various ways, increasingly restrictive and controversial</a>. While DRM aims to address the legitimate need of copyright protection, it fundamentally reshapes the landscape of intellectual consumption, often at the expense of user privacy and freedom. For example:</p>
+

+
+Content Sharing</strong>: DRM often limits, or restricts altogether, the ability to share, lend and gift content outside of the same ecosystem.</p>
+</li>
+
+Content Portability</strong>: DRM can authorise content to only a specific set of devices or apps, and restrict the supported file formats (even to a proprietary format). That limits content migration across platforms, technologies and devices that better suit you.</p>
+</li>
+</ul>
+
The points above reveal an alarming side-effect: dependency on the ecosystem, or "vendor lock-in</b>", which is detrimental to individual freedom and market competition. When content is tightly bound to the platform, disengaging becomes challenging. And when you're limited to sharing only within an ecosystem, your social circle gets roped in too. Kinda seem like cute digital mutualism until it's a toxic relationship you can't leave.</p>
+
+
+Content Perpetuity</strong>: DRM cannot guarantee perpetual access to content. If a service or platform discontinues the content or themselves entirely, you may simply lose what you purchased. In fact, that has already happened</a>, more than once</a> or twice</a>.</p>
+</li>
+

+Content Geographical Restrictions</strong>: DRM can prevent access to certain content based on location. With the internet alone, we could technically provide equal access to cultural and educational resources – DRM kills that.</p>
+</li>
+

+Content Offline Access</strong>: DRM often requires online</em> authentication or periodic online checks. Not very nice in low connectivity areas or during travel.</p>
+</li>
+

+Personal Identification</strong>: DRM requires authentication to consume content. By withholding identifiable information, DRM systems may also monitor behavior and consumption patterns and then profile you. You’ve got nothing to hide</a>? Well, perhaps it at least bothers you to have to login? (And if that keeps going on we might soon have login on physical books too?! And there will be no refresh token cookie irl?!?????)</a></p>
+</li>
+</ul>
+
All those “side-effects” (given they are actually unintended 😉) of copyright protection through DRM conveniences corporations. Corporations may not only protect their profit but also actively profit</em> through DRM, charging high customer cost while delivering zero customer value.</p>
+
Finally, because DRM implementations vary so much, it’s nearly impossible to determine your rights without diving into lengthy terms of use agreements. The restrictions are rather obscured by clever marketing – you’ll soon see.</p>
+
Leaving Amazon, and failing</h2>
+Do you still remember I was trying to break up with Kindle? I get too hung up sometimes but let’s not forget why we’re both here, right!!?!</p>
+
First things first, let me make it clear – I did not want to give up ebooks. It’d been a pleasure to be able to dive into new literature and keep only the gems in my bedroom bookshelf. And I could also carry a multitude of stories effortlessly during my travels.</p>
+
Secondly, I had no intention of trashing my Kindle. It was a fully functional piece of hardware, and it worked well.</p>
+
So here was my grand plan: I’d log out of my Amazon account on the Kindle, and source my ebooks somewhere else. Seems pretty straightforward, right? But the hurdles kicked in right from the very first step.</p>
+FuN fACt: Kindle sales are not very profitable to Amazon</a>, as they hope to make up for it with e-book and app sales.</p>
+
As it turns out, signing out of my Amazon account meant every single piece of content I’d ever acquired through Kindle would vanish into thin air. On Kindle, your books are tied to your Amazon account.</p>
+
That was an unforeseen repercussion. I naïvely expected to hold rights over books I’d purchased regardless of whether they were digitally or physically distributed. So I was disappointed and surprised – with myself, the state of things; both. And yes, I clearly had not read Kindle terms of use back when I got into the ecosystem (otherwise you wouldn’t be reading this! 😉).</p>
+
FINALLY reading Kindle Terms of Use</h3>
+The latest Kindle Store Terms of Use</a></strong> (Last updated: November 30, 2022), determines a set of restrictions you buy into when you decide to buy Kindle and Kindle content, DRM-protected or not. The “Use of Kindle Content” section states a couple of DRM-ish things:</p>
+

+ebooks are meant to be consumed only on Kindle, or Kindle apps.</li>
+</ol>
+Upon your download or access of Kindle Content and payment of any applicable fees (including applicable taxes), the Content Provider grants you a non-exclusive right to view, use, and display such Kindle Content an unlimited number of times (for Subscription Content, only as long as you remain an active member of the underlying membership or subscription program), solely through a Kindle Application or as otherwise permitted as part of the Service, solely on the number of Supported Devices specified in the Kindle Store</b>, and solely for your personal, non-commercial use. [...]</p>
+
+when you click “Buy Now”1</a></sup>, you are actually buying a license i.e. renting.</li>
+</ol>
+Kindle Content is licensed, not sold, to you by the Content Provider. [...]</p>
+
Coming from DRM-based services like Spotify or Netflix, where you subscribe for access to a collection of music or film, the Kindle model might be a surprise.</p>
+
Within the Kindle ecosystem, you are able to buy individual</em> content, which does evoke a stronger sense of direct ownership. Yet, when you do so, you’re essentially obtaining a license: every ebook is an one-off payment to a mini-subscription. And that was absolutely not straightforward or intuitive to me.</p>
+
+you may not lend or sell your ebooks.</li>
+</ol>
+Unless specifically indicated otherwise, you may not sell, rent, lease, distribute, broadcast, sublicense, or otherwise assign any rights to the Kindle Content or any portion of it to any third party [...]</p>
+
+your books might disappear anytime.</li>
+</ol>
+We may change, suspend, or discontinue the Service, in whole or in part, including adding or removing Subscription Content from a Service, at any time without notice.</p>
+(Funny enough, I checked Wayback Machine</a> and noticed that one was amended around March 2015, after reports of disappearing ebooks years before. 🤷)</p>
+
…And embracing the sacrifice</h3>
+Delving into the Kindle’s terms brought the truth crashing down on me: I never really had a choice to transition away from Amazon while retaining my content. Severing ties with Kindle came at a cost I hadn’t anticipated, and I felt very exploited for it.</p>
+
Some might argue I actually</em> had the “choice” to enter Kindle’s ecosystem. And sure, it’s true – I did it willingly, no one coerced me into becoming a Kindle user. But, hey, there’s a nuanced reality here you can’t brush aside: we make our individual choices within systems</em>. There’s an entire environment lying behind the notion of individual choice.</p>
+
Systems can be designed to subtly exert control or exploit personal choice in ways that aren’t always apparent. You can’t look at individual choice alone overseeing the environment in which those decisions are made. In no defensiveness, blaming on individual choice is, I dare to say, exactly how exploitative systems maintain their facade of legitimacy. And I don’t think being exploited or not should be a choice to be made.</p>
+
Yeah, a bitter pill to swallow, but a new plan has to emerge out of my anger: to log out of my Amazon account, and therefore leave books I’ve purchased behind</strong>, and use Kindle only as an e-reader, not a shop.</p>
+Leaving Amazon, and failing less</h2>
+After logging out of my Amazon account, I’m left with an anonymised Kindle (I hope). At this point I wonder if I even have the right to keep the hardware I’ve purchased, but so far nobody hasn’t taken it away from me. 😉 So, how can I rebuild my e-book library?</p>
+Using Kindle with other bookstores</h3>
+Before buying ebooks elsewhere, one needs to understand what file formats are supported by Kindle. The file formats supported by Kindle are MOBI, PRC, PDF, and primarily the proprietary AZW, and the files may or may not be DRM-protected depending on the publisher. Only Amazon sells AZW books2</a></sup></strong>. So my options are:</p>
+

+MOBI. But no bookstores sell them these days.</li>
+
PDF. But formatting sucks for reading books.</li>
+PRC. I don’t know what that is.</li>
+</ul>
+So I have no options. \😎/ Bookstores sell EPUB</a> books, an open standard well supported by all e-readers in the market but Kindle</strong>. Fortunately, you can manually convert EPUB books into one of the Kindle-compatible formats above. Unfortunately, if the book is DRM-protected (very likely!), you would need to strip out DRM before conversion which is downright illegal LMAOOOOOO</strong>!!!!! This drives me CRAZY, but let’s move on.</p>
+
For ebook format conversions, Amazon fortunately offers Kindle Previewer</a>, a publishing software, but it’s just a little too bloated for my goal. So I went with Calibre</a>, a free and open source e-book manager that does it all. It works wonders!</p>
+
If you keep your Amazon account, importing EPUB into is easier with Send to Kindle</a>. It's a more convenient option but it often messes up with the book formatting.</p>
+
Ultimately, using non-Amazon ebooks on a Kindle device can involve various technical and legal considerations, especially when dealing with DRM-protected content. DRM-free book shopping is also limited – DRM is</em> an industry standard! So using a Kindle without Amazon is not just very inconvenient, it’s barely legal.</strong> 😉</p>
+
The most promising plan seems to be tossing  Kindle altogether, and choose an open standard e-reader with less hostile DRM platforms, but that’s for another time.</p>
+
Amazon caters for publishers, not consumers</h2>
+It all makes sense when you put it all together. When traditional publishing giants contemplated the world of e-readers and online stores, they had to be a bit careful about it. With physical distribution, they already had a model that offered a clear sense of ownership and control. Then, remember the music industry’s digital transformation, marked by piracy and revenue decline3</a></sup>? Obviously publishers would be wary of a similar fate.</p>
+
But in comes a compelling offer from Amazon: a tight grip on digital ownership of books, and a shortcut into an already profitable book marketplace. All or nothing. A captivating promise of control and access which publishers, late to digital transformation, did not pass up. And so seamlessly, Amazon paved the way towards market dominance. 👏</p>
+
Today, Amazon also positions itself as a platform for emerging writers and attracts independent publishers. So does Spotify for musicians, and Steam for game developers. For both publishers and consumers, content discovery is what’s great about such platforms, despite their license model.</p>
+
Alternatives like Bandcamp (music) and GOG.com (games) also promote publishers’ content. In contrast, their DRM-free4</a></sup> model ethically caters to both consumers and publishers: the consumer has direct ownership to content, and publishers get their content secured, even earning more5</a></sup>. How does that work? Fingerprinting content files (i.e. watermarks), but above all, cultivating consumer trust and transparency, and a sense of community and support for artists.</p>
+
Final words</h2>
+While writing this, an analogy came to mind.</p>
+
Picture when you buy a physical book from a store. You know that book will patiently await you right where you left it and not vanish into thin air, whether you frequent the store or it eventually shuts down. That store is unaware of your identity. It doesn’t know when you open or close the book, nor does it know which passages you’ve highlighted. You can even lend the book to a friend, regardless of whether they shop at the same store or if the store recognizes them. And that both of you can go buy books elsewhere later with no strings attached.</p>
+
But I know that’s kinda corny. It’s an oversimplification. Digital content IS different, and copying files is far easier technically than producing physical copies. We do have new challenges.</p>
+
Yet, while the analogy might not outright invalidate DRM as a solution, it can serve as a reminder of the current asymmetry of our digital rights today. A nudge to the way our essential rights are exploited within the current framework of digital copyright protection. And, ultimately, it extends an invitation to reimagine it from the ground up. Perhaps looking at how other platforms like Bandcamp have already done so brilliantly, perhaps radically starting at copyright itself.</p>
+Keep reading</h2>
+…on how despite massive technical effort and corporate interest, DRM is a flawed security model.</p>
+
+Open Rights Group: Digital Rights Management</a></li>
+
Defective by Design: Guide to DRM-Free Literature</a></li>
+
Defective by Design: DRM FAQ</a></li>
+
Comparison of e-readers: File format support</a></li>
+
DRM is Toxic to Culture</a></li>
+</ul>
+^{1</sup>
+As of 16/08/2023, Amazon’s checkout button for Kindle ebooks is labeled “Buy Now”.</p>
+</div>
+}^2</sup>
+“Kindle User Guide 4th Edition</a>, p. 39</p>
+</div>
+
^3</sup>
+Ulrich Dolata, “The Digital Transformation
+of the Music Industry: The Second Decade: From Download to Streaming” (2020)</a>, p. 7</p>
+</div>
+
^4</sup>
+See Are Bandcamp’s download formats DRM-free?</a> and GOG 2022 UPDATE #2: OUR COMMITMENT TO DRM-FREE GAMING</a>.</p>
+</div>
+
^5</sup>
+In comparison to Spotify, whose profit margin for publishers is often questioned. See Ben Sinano: Musicians Say Streaming Doesn’t Pay. Can the Industry Change?</a>.</p>
+</div>
+


Long Time No See
2023-06-30T11:19:00+00:00
In the past three years, a wild mix of stuff dragged me away from writing. More time 🌳 offline ⛰️, which was great. Then a demanding role in a small team, the chaotic grip of a global pandemic, increasing perfectionism, and a blossoming and ultimately collapsing relationship – which all conspired to shake up my pursuits and thrust me into an introspective whirlwind. And as if that wasn’t difficult enough, I lost two years’ worth of drafts in a backup blunder.</p>
+
Whenever I attempted to restart, I found myself entangled in a web of what still resonated with me and what no longer did. But hey, listing more excuses would only scratch the surface. I recognize now, after seeing how little it takes for me to be back, that parts of me were simply in disarray. Yet, as I come together again, so does my motivation to reclaim what I enjoy, and make time for it despite the busyness and excuses.</p>
+So, last night, I did what I do best: I embarked on an in-one-sitting endeavor! I migrated this blog to Zola</a> (a speedy static generator written in Rust), so this WeBpAg3 remains therefore static and snappy af, joining the <512 kB club</a>. Letting my creativity flow with Tailwind</a>, I gave my WeBpAg3 an extravagant-outrageous look, and made sure it’s accessible. I rewrote my introduction like a million times. I sifted through my writings, organising and archiving some, and lo and behold!: I stumbled upon those lost drafts hidden away in the depths of my physical backups. Pretty thrilling.</em>  As a friend once told me, good things happen when good things happen</strong>.</p>
+
Long time no see! It all feels quite nice, if you ask me. 😉</p>
+


What I've Learned by Simply Journaling
2020-04-20T00:10:15+00:00
In 2018, circumstances inevitably changed and I began taking up much more in life. I was under stress, regardless of being on the safe side, and the patterns that kept me grounded were no longer holding up.</p>
+Back then, seeing the big picture was unattainable with the stress snowballing and skewing my perspective. Dwelling in my head, paving the way to learned helplessness</a>, I decided to try out journaling.</p>
+
More than a year later, I can finally say alles gut</em>. Although circumstances haven’t changed much, I certainly handle them better. I keep journaling as of today, and am excited to share my setup and (hopefully) motivating takeaways!</p>
+
How I Journal</h2>
+I did not go for the traditional diary format. I decided to Bullet Journal, a flexible journal method founded in quick lifelogging by means of a pen, paper, and bullet points.</p>
+
Pen and paper pull me out of my head and let me continuously evolve my notebook as my needs change, since there is no predefined template. As for bullet points, we all know their efficacy: hasty logging and later reviewing at a glimpse.</p>
+Method</h3>
+Peek into Bullet Journal official page</a> for an overview, as I won't dive into the framework basics.</p>
+
The Bullet Journal framework is made out of four fundamental “collections”: Index, Daily Log, Monthly Log, and Future Log, plus custom collections you find valuable. After a while of tinkering around, I came to some insights and tweaks.</p>
+

+
+Index</strong> turned out useful when I added custom collections, as those usually end up scattered across the journal and thus hard to find.</p>
+</li>
+

+Daily Logs</strong> is where I keep track of notes, events, tasks, thoughts, and ideas. (All mixed together, which portrays a day accurately if you ask me.) I recommend using signifiers and nesting (for a tree-like view) in bullet points to convey meaning with ease, as Bullet Journal suggests.</p>
+</li>
+

+Monthly Log</strong> didn’t work for me. I steer towards weekly or quarterly ranges. Also, my online calendar is more practical so I couldn’t bother drawing calendars every month.</p>
+</li>
+
+Future Logs</strong> are useful to migrate tasks or events to upcoming months, for when you don’t get something done but can’t “nevermind” it either.</p>
+</li>
+</ul>
+
As for custom collections, the Bullet Journal ecosystem is huge! I’ve seen stuff of all kinds out there: finance/sleep/food/water trackers, recipes, trip planning, doodles, and whatnot. Yet, these are the ones I always come back to:</p>
+
+Diaries</strong>: longer diary entries or brain dumps without the limitation of bullet points, for when I feel like it.</li>
+
Habit Trackers</strong>: a simple daily tracker to monitor or develop habits across weeks, e.g. meditation, alcohol intake, call family.</li>
+
Weekly Logs</strong>: my weekly variation of “Monthly Log”, with upcoming events and small goals for the week. Usually done on Sunday or Monday.</li>
+
Quarterly Logs</strong>: my quarterly variation of “Monthly Log”, with upcoming events and big goals for the quarter.</li>
+Year Retrospective</strong>: a straightforward year review regarding what did and did not go well, what to keep or let go from last year etc.
+I journal spontaneously throughout the day, but mostly in mornings or evenings. I do it every day, even when I don’t feel like it. In the long run, that’s gotten me to fathom my anxieties by having them logged as well as what was up days before. It goes a long way to flip through logs of piled up chores, social isolation, binge drinking, and sleep deprivation, to later find yourself taking down “I am anxious. Can’t do shit”.</li>
+</ul>
+Be that as it may, I don’t keep it all gloomy. With my throughput in mind, I may also soften up my daily logs with receipts from exquisite restaurants I come across, cute post-its from friends, or even silly useless quotes from fortune cookies.</p>
+
At last, I have to say I’m not really a big planner so you can see that’s not what I optimise my journal for. All I strive for is a little awareness of whatever I’m doing for the time being. I enjoy a spontaneous and organic life, and that’s gotten me far enough to make me happy.</p>
+Pen & Paper</h3>
+</picture>
+
+My 2019 journal (left) and 2020 journal (right).</figcaption></figure>
+In 2019, I used an A5+ (slightly wider than regular A5) dot-grid notebook. It’s bulky to carry around but I don’t regret it: the pages are wide enough to encourage writing. The quality of its pleasing yellow paper is outstanding, thick enough to prevent ink from leaking through. I ended 2019 with a few pages empty.</p>
+
This year, I went for something more portable: an A6 dot-grid notebook. It took me a while to get used to the size constraints, and I’ve been certainly more straightforward with my logs. I am pretty sure I will have no pages left this time. (Wondering what was the advantage of it all as I’m not going anywhere anyway thanks to COVID-19.)</p>
+
As for pens, I use different colours of a 0.4 mm fineliner.</p>
+What I’ve Learned</h2>
+I'd not assume these stem necessarily from the way I set myself up. Audio or video recordings, traditional diary, and other journal formats are worth exploring and might help just as well.</p>
+
+
+Less overwhelm, more time.</strong> To truly chill out when life gets overwhelming, you gotta plan ahead. Especially in already busy weeks, I use my journal to put down chores I commit to get done, prioritising what I signify as deadline-sensitive. Before, with my tendency to overfocus, I’d take up activities without planning and end up neglecting my responsibilities and needs. Imagine how far this can go!</p>
+</li>
+

+Emotional awareness.</strong> I’ve gained a grasp of the phenomenology of my emotions and the lens through which I see life, markedly my cognitive distortions on stressful days. Attitudes like pessimism inevitably surface as you jot down negative thoughts all the time. Being mindful allowed me to reframe negative views, and turn obstacles into opportunities.</p>
+</li>
+

+Better retainment.</strong> It’s easy to fall into the trap of “I have a bad memory” when one has been busy and mooning for so long. Leading a busy life mindlessly is not what I strive for, and journaling only feeds into that: I hold dear people, moments, promises, and no longer miss so many appointments (planning helped here too!).</p>
+</li>
+

+Constant assessment.</strong> Journaling is a tool to assess the present as well as the past and the future. By peeping into where I’ve been, what did/didn’t go well, or who I have been with, for instance, I can ponder more sensibly on my growth and relationships. Early feedback on my own life, sort of, to leverage self-improvement in relationships, health, work, and so on.</p>
+</li>
+</ul>
+
Pitfalls</h3>
+
+
+Perfectionism.</strong> Obsession over constant logging or perfection is right at the door for you to slip into. On social media (Pinterest, YouTube), everyone’s journal seems visually-appealing every day without fail. Even Bullet Journal, a method dead straightforward, can be a rabbit hole. Remind yourself to solve your problem in a way that enhances your daily life, not burdens it. You gain absolutely nothing from buying into slices of life people sell online.</p>
+</li>
+

+Habit-building.</strong> When not a habit, journaling is just another chore. Make it effortless and engaging: establish a routine (if that’s your thing), designate it a place where it’s always within reach, or tailor the framework to your needs. If you enjoy drawing once in a while, why not? If you have no patience for 29872 different pen colours, why do it? If you want to write about your day with your partner in bullet points instead of coming up with a best-seller love story, who cares?</p>
+</li>
+

+Procrastination.</strong> Journaling constantly nudges you to look back at your life and how you’ve been spending your time and energy. That can be challenging and won’t change. For starters, you might come to the unpleasant realisation that you self-sabotage, or that a certain relationship is fading away. If you are avoidant, you will most likely put off journaling often; not because of the method or routine, but fear of what you may find – fertile soil for procrastination.</p>
+</li>
+

+For pen & paper… No backup</strong>. Some companies have tried, but what’s hand-written won’t sync with a cloud server. You do carry the weight if traveling or taking it to work, and it’s probably gone if you spill coffee on it. I, though, think the trade-off is worth it and haven’t looked back.</p>
+</li>
+</ul>
+
Final Takeaway 🥡</h2>
+I am all for simplicity, yet that didn’t keep my mind from boggling when I realised such a simple tool turned out to be a game-changer. Starting off was not easy, but the benefits showed up and kept me motivated – a rewarding feeling I wouldn’t expect so hastily while building a new habit. Today, it’s just effortless and natural.</p>
+
Ultimately, I hope this stimulates you to try journaling in whatever way and to deem simple tools as helpful to uncomplicate and improve our lives.</p>
+
References</h2>
+
+Learn Bullet Journal</a></li>
+</ul>
+


How to Spy on a React Prop with Jest
2019-10-31T14:15:42+00:00
When we want to test whether a prop has been called, mocking the prop in the component is usually the preferred way. This is how it goes with Jest</a> and Enzyme</a>:</p>
+
const </span>buy </span>= </span>jest</span>.</span>fn</span>();
+</span>const </span>wrapper </span>= </span>enzyme</span>.</span>shallow</span>(<button onClick={buy}></span>Buy</span></</span>button</span>></span>);
+</span>
+</span>wrapper</span>.</span>simulate</span>(</span>"click"</span>);
+</span>
+</span>expect</span>(</span>buy</span>)</span>.</span>toBeCalled</span>();
+</span></code></pre>
+You may also want to spy on the prop directly, when the component is tested along with a provider passing down its props.</p>
+
const </span>wrapper </span>= </span>enzyme</span>.</span>shallow</span>(
+</span>  <ClickProvider>
+</span>    <button></span>Buy</span></</span>button</span>>
+</span>  </span></</span>ClickProvider</span>>
+</span>);
+</span>const </span>buy </span>= </span>jest</span>.</span>spyOn</span>(</span>wrapper</span>.</span>instance</span>()</span>.</span>props</span>, </span>"onClick"</span>);
+</span>
+</span>wrapper</span>.</span>simulate</span>(</span>"click"</span>);
+</span>
+</span>expect</span>(</span>buy</span>)</span>.</span>toBeCalled</span>();
+</span></code></pre>
+I am using Enzyme however you should be able to spy on similarly using other testing libraries – just make sure you are spying on a function in the props coming from the component prototype (as in wrapper.instance()</code>).</p>
+
That’s all. Just posting it here cuz I couldn’t find it easily anywhere else.</p>
+


Setup for Audio Interface with Guitar Rig 5 on macOS Mojave
2019-08-18T22:19:05+00:00
Setting up Guitar Rig 5</a> on macOS Mojave seems not to be straightforward.</p>
+
Although I had gotten the signals to be sent from my guitar to the audio interface and from the interface to Guitar Rig, somehow it’d still not work. Instead of using my audio interface as the input and output</strong> device on Guitar Rig, I had to set up an “aggregate device”.</p>
+
This how you can do it too.</p>
+
(My specs, just so you know:)</p>
+
macOS</span> Mojave Version 10.10.14
+</span>Guitar</span> Rig Pro 5.2.2
+</span>Audio</span> Interface Steinberg UR22mkII
+</span></code></pre>
+Audio MIDI setup</h2>
+
+
+Open “Audio MIDI setup” in your Mac. (It’s a tiny secret sound manager shipped along with the system, you’ll find it.)</p>
+</li>
+

+At the very bottom of the app, there is a small + (“plus”) button wherein you should select “Create an aggregate device”</em>.</p>
+</li>
+
+Set up your “aggregate device” with your 1) audio inteface and 2) speakers/headphones/whatever – which should be all shown up there, given the setup is correct. Remember to give your device a remarkable name – I suggest FUCK COMPUTERS AND AUDIO</em>.</p>
+</li>
+</ol>
+</picture>
+My custom device in Audio MIDI Setup on macOS.</figcaption></figure>
+
+Go back to Guitar Rig. In the context menu “File”, go to “Audio and MIDI Settings”</em>. In the “Audio” tab, select your aggregate device as the device</strong>, instead of only the audio interface as you were doing before; then configure input/output as expected in the “Routing” tab.</li>
+</ol>
+Should work! If it doesn’t, this guide by Native Instruments on how to troubleshoot audio</a> and others guides on the website might help. Depending on your audio interface, make sure the right driver setup is in place – you can try out ASIO4ALL</a>.</p>
+
+
If it still doesn’t work, I am sorry and prolly have no idea. Have fun.</p>
+


OMG Climate: Reflecting Together on the Climate Catastrophe
2019-05-30T11:39:14+00:00
</picture>
+Credits: NASA’s Scientific Visualization Studio/Kathryn Mersmann.</figcaption></figure>
+Planet Earth, May 2019. The UK has announced a state of emergency for climate change</a> and Canada considers the same</a>; we are more confident about our model to capture rising global temperatures</a>, and students all around the world walk out of school protesting the lack of climate action</a>. Yet, not enough of us are genuinely concerned about the role we’ve played on this catastrophe.</p>
+
A Saturday afternoon of May and a few square meters in Berlin were what a couple of people needed to open– and voluntarily discuss how we impact the Planet to change and how those changes impact us. Topics ranged from radical solarpunk utopia to more down-to-earth and short-term ideas within our generation’s reach today: musings about climate change awareness, sustainability policies for companies, traveling sustainably, tech tools for political change, and how to get out of our bubbles and active listen to other realities.</p>
+
In this post, I’ll be sharing my personal notes on that engaging and constructive afternoon. There will be, also, references at the end of this post so you can keep yourself posted.</p>
+
Pitching and picking topics for discussion</h2>
+OMG Climate</strong> is an unconference, meaning that attendees proactively come up with the agenda and topics to be discussed. To kick it off, we got instructed to pitch topics for discussion that’d be prioritised also by ourselves into tracks, attended based off our preferences. Everyone was expected to have at least a certain knowledge, even if rather tacit, about the challenges we’re facing right now with the climate emergency.</p>
+
These were the tracks of the first OMG Climate:</p>
+
+Track 1</strong>: “Low-carbon travel” / “Green Mafia” / “How do you sleep at night? Coping with climate anxiety”</li>
+
Track 2</strong>: “Tech tools for political action” / “Circular economies: Re-use and tech” / “Company sustainability policy template”</li>
+Track 3</strong>: “Solarpunk, imagination and excitement” / “CO2 Offsets as an API and tracking carbon” / “Climate change awareness in developing countries”</li>
+</ul>
+We had enough attendees for tracks to make for productive discussions. Listening and talking to one another, while facilitated by a volunteer, did the job on keeping up an constructive flow between finding root causes and ways to take action.</p>
+</picture>
+During the "Green Mafia" discussion.</figcaption></figure>
+I’ve joined “Low-carbon travel”, “Green mafia”, and “Climate change awareness in developing countries”, so these are the ones I have more insights about. Towards the end, we all got together to wrap it up, and I have to say: all tracks were interesting, so don’t restrain yourself to this post!</p>
+
The following notes don't reflect directly what's happened or everything that's been said in the event, it's rather my personal perspective. They are also somewhat vague, but I hope you can benefit from them somehow.</p>
+Low-carbon travel</h2>
+Air travel, even when occasional, has an environmental impact</a> difficult to make up for no matter how many bamboo toothbrushes we gift our friends, how often we commute by bike or how vegan is our diet.</p>
+
With low airplane ticket prices getting more popular than ever and enabling people to travel more, how can we make traveling sustainable when not traveling to begin with</em> is not an option? That was the question we kicked off the “low-carbon travel” discussion with.</p>
+
Meeting notes</h3>
+</picture>
+Collective sketch notes about the low-carbon travel track</figcaption></figure>
+
+In our circle, everyone seemed to have access to the privilege that is air flying.</li>
+
We began exploring traveling by breaking it down into traveling for work vs. pleasure.</li>
+
Ground travel</strong> might be an option; however, it’s rather time-consuming and hence less appealing in a capitalist society where time translates to money. How can we shift the paradigm?</li>
+
Instead of seeing longer trips as wasted time, we should begin seeing the journey as part of the trip.</li>
+
Traveling less</strong>: We often optimise our trips to visit as many places as possible; instead, we can optimise for depth and start going to fewer places for a longer time. Think: going to a European country and making the most of it, instead of going to 999 different countries just because they are 1-hour-flight away from each other.</li>
+Share practical solutions for people to make trade-offs, EcoCost</strong></a> rather than overwhelming scientific evidence.</li>
+
What if companies supported employees whose carbon footprint is the least?</li>
+
Green travel agencies and flying policies.</li>
+
Search engines for flights obviously don’t suggest alternative ways to get to a place when a plane is definitely not the best option.</li>
+
BVG</a> app, on the other hand, recommends walking instead of taking public transport sometimes.</li>
+
Transport apps could also order route options by the least environmental impact.</li>
+
The car industry should be ashamed of its climate record.</li>
+
The train industry is not modernised and integrated, rather rigid.</li>
+
Investment on 10 km of autobahn could pay off the renovation for bike lanes all over Berlin.</li>
+
Globalisation vs. environmental footprint: IT workers immigrating usually go back to their countries often since they have the need and resources. I asked whether there was data available on how that situation in particular could’ve increased our carbon emissions coming from aviation.</li>
+
Business trips by train are possible only among those who have the privilege of a flexible work schedule, such as freelancers.</li>
+
Making the most out of idle time: we tend to be more creative in idle times, while in a train; not hunching over a keyboard or in an office environment.</li>
+
“Fast-moving home/office” as an alternative to turn the journey time into productive time.</li>
+
Frequent flyer levy</strong>: A fairer tax system according to how often people fly. Those that fly more should pay more. (More information: A Free Ride</a>)</li>
+
Airline campaigns often promote the image that everyone should become part of a group of young, urban frequent flyers, visiting another city every few weeks for very low costs.</li>
+</ul>
+Action points</h3>
+
+everyone to shift mindsets in regard to traveling.</li>
+
everyone to vote instead of buying a bamboo toothbrush.</li>
+
everyone to use and promote tools with different options of transport within a route, instead of blindly going to specific train or flight websites.</li>
+
everyone to keep consuming local goods.</li>
+
airline companies to stop promoting flying as a status symbol.</li>
+travel agencies to work out more sustainable ways to travel and consider it in their branding.</li>
+</ul>
+Green Mafia</h2>
+How corporate interests and ideologues work to undermine science and make countries doubt about the risks of climate change? Think what stopped Australia, 25 years ago, to act on climate change</a>.</p>
+
We should fight back! We mused about beating off lobby groups representing the coal, car, oil, electricity, and aluminium industries using their same sneaky techniques, as a Green Mafia</strong>. An intriguing and fun topic!</p>
+
The brainstorming served as a tool to get a grasp on the way those mafias function, and discuss whether the ethical approach is always the way to go when facing a crisis.</p>
+
Meeting notes</h3>
+</picture>
+Collective sketch notes about the Green Mafia track</figcaption></figure>
+
+Leverage civil disobedience and tools of intimidation to influence green policies for the climate, fight extreme wealth and weaken existing mafias such as the oil industry.</li>
+
How far should one go with non-ethical practices, such as blackmailing or public shaming of those who harm the planet?</li>
+
What’s ethics after all?</li>
+
Could we use illegal money to fund our causes?</li>
+
Could we use legal money to fund our cases? There are ways to get money from the state in licit ways such as from green parties.</li>
+
What if we made the green cause as profitable for the mafia as oil?</li>
+
Sell a belief system, or use an existing one such as “harmony with nature”.</li>
+Cyber hacking/hijacking internet algorithms to spread awareness instead of climate change denial and fake news as it happens today.</li>
+</ul>
+Awareness in developing countries</h2>
+The rich, the poor and the Earth.</p>
+World’s richest 10% produce half of the global carbon emissions, while the poorest half contribute a mere 10%</a>; but climate change affects the poorest people the most. Moreover, developing countries are the most responsible for climate change now, and vulnerable too.1</a></sup></p>
+
Coming from a developing country, I was looking forward to this topic! Apart from Brazil, we had people from India too. There was a range of issues that could be tackled within this track, such as the risk of massive displacements of people in developing countries, the need of support to adapt, environment destruction for the sake of economic prosperity, how to approach climate change education etc.</p>
+
Meeting notes</h3>
+
+We are building awareness</strong>, not “teaching” others about climate change.</li>
+
Climate change is an existential threat to life, but it seems rather remote if you think about poverty, disease and economic stagnation. How do we educate children for the long-term if, for some of them, not showing up at school tomorrow means not eating at all?</li>
+
How do we let them know about the risk of massive displacements of people who have no resources whatsoever to move?</li>
+
Just by existing in a developed country in Europe, our carbon footprint is more impactful than any developing country.</li>
+
Indigenous people are already defenders and protectors of the environment more than we will ever be in our generation.</li>
+Economic development is a priority in developing countries, and politicians may ignore environmental impact for the sake of it. (See Brazil’s natural resources open for business, says Bolsonaro</a>)</li>
+
Developing countries idealisation of economic development, influenced by “developed world standards”: tall buildings and industries all over the place, where often we don’t see the green implications of “success”.</li>
+
What about a model of development thats puts together the simple living of developing countries with the green development of developed ones?</li>
+
How waste affects developing countries; example of Philippines to sail garbage back to Canada</a>.</li>
+
We could shift the discussion to think about environmental impact in terms of social classes instead of countries. After all, rich lifestyles and “status” in general damage the environment in untold ways.</li>
+
The Swadeshi movement</a> brought back self-manufactured clothing in India to boycott foreign goods, a part of a movement to liberate India from British control and industrialisation.</li>
+
When teaching, consider what’s in people’s context, reach and language instead of what’s “out there”.</li>
+
We should actively listen more to those communities and what’s happening in those countries. Sometimes, instead of thinking that there is something to be taught, we should rather learn from their realities so we can bring about a meaningful conversation.</li>
+
This is a problem not to be approached by technology, remotely. It’s rather about Politics and Education.</li>
+</ul>
+Action points</h3>
+
+everyone to assure inclusivity, cooperation and engagement across boundaries, first and foremost</strong>.</li>
+countries to keep cooperating efforts internationally</em> through policies, institutional frameworks for development and investments in infrastructure.</li>
+</ul>
+Conclusion</h2>
+Well-led communities that strive for welcoming environments enable the best out of people. OMG Climate has shown that – its unconference format</a> got everyone to take responsibility and engage towards constructive and meaningful discussions about climate change.</p>
+
</picture>
+Final presentations wrapping up the tracks.</figcaption></figure>
+Although most of us had a tech background, everyone seemed aware: tech alone will not solve all problems, but we are eager to address them either way.</p>
+Learn about Climate Change</h2>
+
+Reddit: /r/climatechange</a> and /r/globalwarming</a></li>
+
The Guardian on Climate Change</a></li>
+
Global inequalities in CO₂ emissions</a></li>
+
We’re (still) not being alarmist enough about climate change</a></li>
+</ul>
+More on OMG Climate</h2>
+
+OMG Climate Event page</a></li>
+
OMG Climate Medium website</a></li>
+
#OMGCLIMATE on Twitter</a></li>
+
ClimateAction.tech</a></li>
+</ul>
+^1</sup>
+Climate Change and Development in Three Charts</a></p>
+</div>
+


I've Sensory-Deprived Myself In a Tank
2018-12-02T08:01:00+00:00
I struggle every day trying not to be one step ahead. Living everywhere else but the present and leaping through time have become part of how my brain is wired, so I often find myself not experiencing much anymore.</p>
+A while ago, a friend told me about his sensory-deprivation experience in some kind of pool, the so-called Isolation Tank</em></a>. No sight, no hearing, no touch, no taste, no smell – the idea of getting absolutely no input from anywhere struck me as a way to get my perception back on track. I decided to try it out.</p>
+
On a sunny Saturday of November, I, along with my endless stream of thoughts, floated for 1 hour straight in a soundproof egg-shaped tub shallowly filled up with salt water. This is my report.</p>
+
Getting In</h2>
+With my bathing suit on and no expectations of anything, I showered, got into the tub and sealed down its cover. My body floated easily on that water that thermically felt like my own skin, and a relaxing sound was playing in the background up to the moment my surroundings got all pitch-black.</p>
+
The first 15 minutes were all about withstanding how restlessly my mind wanted to get out of there. I’ve had done meditation before, but 1 hour was something else</em>. I recalled I worked 8 hours a day, 5 days a week, and therefore I should be making the most out of my Saturday instead. Leisure time! In modern life, that usually means stimulation by means of binge-drinking with friends, uplifting music, delicious food, watching heart-breaking movies…. Quite the opposite of soul-crushingly doing nothing.</p>
+
The mind just plays a lot of games on you all the time. It tricked me into being physically</em> irritated by the water, its salt, that bogus zero-gravity environment, and that I’d be better off giving up for my own survival</em>  – at least, that was how my body anxiously (over-)reacted to it. But there was actually no physiological danger or whatsoever; truth be told, I was way safer than I had ever been throughout that week. I quit panicking.</p>
+
I came upon different phases of denial, approval and mind-numbness from that onwards. Saw myself bringing up problems and drifting them away. Tried to work out situations I had no control over. Missed music, so made my own by tapping on the water. Went hyper-focused on how I had performed socially last week to what was going to happen in the next few weeks when I eventually hand over my old apartment’s keys to that spiteful Hausmeister who hates my German.</p>
+
My thoughts just went on super randomly. After a while, I could draw the exact line where each one ended, and got mindful about my weary physical overreactions to them.</p>
+
Towards the end, I sank into something else: weightlessness, timelessness, solitude were emerging from that isolation. Things started losing shape. Didn’t perceive water. I was either a floating head or a floating body. I had to touch my thighs, boobs, neck just to relieve myself from the uncertainty that being so relaxed made me feel about where I was.</p>
+
I wanted to come back down to Earth from wherever I was, and, surprisingly, to be myself</strong> – the way I was. Then time was up.</p>
+Getting Out</h2>
+I showered again to wash the salt off. The spa provided a relaxation lounge that was essential to ease the transition, since I had neither desire nor need (important!) to rush anywhere. Hung out there for 1 hour.</p>
+
The readjusting was an interesting and unexpected phase to me. Had an apple and felt how crispy in sound and taste it was. Drank a glass of water and sensed it going right down through</em>. Read a book and couldn’t make sense of why we humans have ever brought up speed reading techniques in the first place.</p>
+Stepping out of the spa, I got savagely welcomed by a gloomy afternoon1</a></sup> undergoing that life I was used to every day. A lot was happening out there: lights of apartments being turned on and out, cars groaning, people running around, traffic noise, the cozy energy of having my friend by my side, sharper textures of the sidewalks’ cobblestones, and the joy of a having a sky whose amount of stars doesn’t depend on the many times we screw up as human beings, thankfully.</p>
+
Berlin-Schöneberg is quite chill so that’s helped to readjust. I was sensible and my thoughts were vivid and receptive – pretty much the actual poetic mood I strive for, where I settle and listen to what’s being said in order to write it down. A mood that is “highly disturbed by Philosophy”, as Goethe brilliantly summed up to Schiller once:</p>
+
“I am still hoping for poetic hours, and philosophy, in my case, disturbs the poetic mood, probably because it drives me into the object, for I am never able to keep myself in a purely speculative mood, but have immediately to try and form a distinct conception, and on this account at once fly out into nature. […]</em>2</a></sup></p>
+
I had finally my mind drifted towards just as much of the world as it was going on.</p>
+
Lessons Learned</h2>
+My poetic mood didn’t last much – it wore off the day after.</p>
+
I’ve realized how much we are externally stimulated and easily adapt to it as if it were natural. On top of that, we are internally stimulated by our worries and whatnot: have I paid my taxes? Am I persuading a career? Does my family still love even though I am thousands of kilometers from them? Have I been eating healthy enough?</p>
+
It turns out it’s clear why we don’t feel much anymore. Our brain gets wired to parallelising stimuli, and we have less and less coming from our body to the head than the other way around. Apart from that, our experience of the world is barely passive: we actively generate it</strong> with our biases, mental models, what and how much we consume. Mind shortcuts are crucial, but might restrain us from genuinely experiencing life, getting us to either ignore ou hyper-focus unconsciously.</p>
+I, now, have a better grasp of what Erling Kagge meant in Silence: In the Age of Noise</a>, written after he had spent fifty days walking solo in Antarctica: “Everything seemed completely flat and white. […] Eventually, in complete isolation, I began to notice that nothing was completely flat after all. The ice and snow formed small and large abstract shapes. The uniform whiteness was transformed into countless shades of white. […]”</em></p>
+
Meditation is the absolute protagonist here, but floating got me into a different flow, and faster. The topic of sensory deprivation</a> is definitely worth-exploring. Think like: If you ditch sugar for a while, it tastes sweeter afterwards. ;-)</p>
+
This is pretty much what floating offers: sensory starvation and you on your own</strong>. You may waste your time and never get to anything, or make even most out of that 1 hour than me.</p>
+
Personally, I can’t wait to do nothing again.</p>
+

+^{1</sup>
+Just another Autumn day in Berlin.</p>
+</div>
+}^2</sup>
+Goethe (and Friedrich Schiller). Correspondence Between Schiller and Goethe from 1794 to 1805</a>. Translated by George H. Calvert.</p>
+</div>
+


How I Lock My Bike in Berlin
2018-08-30T07:00:00+00:00
1 year with a bike in Berlin,  and counting...</p>
+
I bought a bike 2 months after moving to Berlin, and a really good lock 1 day after.</p>
+With no clue about the theft scene in Europe – Berlin, in special –, I did myself some research on /r/berlin</a>, /r/bycicling</a> and a few other places around the internet. What I did find out? Well, the numbers on bike theft are quite concerning</a>.</p>
+
Nevertheless, after witnessing some people getting their bikes stolen, I feel privileged to say that it’s been more than 1 year I’ve got my bike</strong>. If that is because of my good lock or my good luck, I’ll never know.</p>
+
But I can tell you about the lock.</p>
+
My lock setup</h2>
+I generally agree that you should invest as much as you can afford in your lock setup. I’ve put a considerable amount of money on mine because I deeply</em> care – in other words, I have no psychological resilience when it comes to bicycles so losing mine would definitely get me in tears.</p>
+
If you care about numbers without any trustable source, I've seen recommended somewhere that you should be investing between 10%-20% of the bike price in a lock. 🤷</p>
+Therefore, considering the price of having to go home by feet and with tears in my eyes, I did the best I could and went for the Kryptonite Evolution Mini-7 with Double Loop Cable</a> (highly recommend you to check their website for more information).</p>
+
I make sure my bike’s frame and both wheels</strong> are locked to a fixed rack – cemented into the ground, ideally.</p>
+
</picture>
+My tiny yellow bike parked and properly locked at the office's parking space! Locking up the U-lock to the front wheel instead is a good alternative. Also, I often wrap the steel cable through the rack.</figcaption></figure>
+I had considered the Kryptnonite's New York Fahgettaboutdit</a>, but I found it way too heavy and the safety factor difference didn't pay off for me at that time. I'd recommend it if an extra weight is no problem for you though.</p>
+
For I still have my bike after 1 year, I am honestly happy with my choice. The lock came with:</p>
+

+Three keys with an unique number. For your information, Kryptonite has a system where every key gets a number</a>, so you can order replacements online in case you mess up.</li>
+
A handy mount made by Kryptonite: Transit FlexFrame U-Bracket</a> (not visible in the photo because it’s in the top tube), so I don’t have to carry the U-lock in my backpack or whatever.</li>
+
Manuals that I didn’t read and got recycled.</li>
+
1 year coverage according to the Kryptonte’s Anti-theft Program</a>, because the security rating is high enough.</li>
+</ul>
+I’ve read a couple complaints about the lock not fitting both the wheel and frame to most city racks, however I’ve managed to do it in most racks around Berlin. It’s definitely not the most flexible and spacious lock, but thieves would love some extra space to do their work too, so I think it’s just the size it should be after all.</p>
+In the worst-case scenario, there is always the Sheldon Method lock strategy</a> – or its modified version</a> – anyway!</p>
+
What bike locks are about</h2>
+When looking for a lock, instead of (only) asking yourself what’s the best lock ever, ask “How much trouble am I putting a thief into with my lock strategy?”</em>.</p>
+
It hasn’t been enough stressed that locks do NOT prevent determined thieves with their lock pics, cable cutters, bolt cutters and angle grinders to steal you bike. Period.</p>
+
Locks do, though, make it harder for thieves to pick</em> your bike, by increasing the “risk” factor in the risk/reward calculation done before they attempt to steal.</p>
+
It’s all about making it harder</strong>. And how do you do that? By having a diverse</em> lock setup, and, just as important: by being extremely careful on where and how to park.</p>
+
Don’t think just U-lock: saddle locks, wheel locks might be worth-checking too! One awesome lock is just one at the end of the day, and the more tools the thief needs to carry out, the better.</p>
+Looking further</h2>
+Some articles I’ve read last year and that might be interesting if you own a bike and want to learn more on how to keep it safe.</p>
+
+Best Bike Lock</a>: Review of several bike locks and learnings on how to pick a good one.</li>
+
How to Lock your Bike</a>: Great tips on where to park your bike and what to lock it to.</li>
+</ul>
+There are a lot of cool videos out on YouTube too, e.g. “How to Lock your Bike” from GCN</a>.</p>
+
Have a nice ride! 🚲</p>
+


Working Better with Git for a Clear History
2018-08-04T07:00:00+00:00
Your teammate worked on a few improvements in all forms of the company’s website. At some point you, also a programmer, are asked for a code review.</p>
+
This is the feature branch’s commit history</strong> you get in the Pull Request:</p>
+[290xx26]</span> Resolve merge conflicts
+</span>[9efxxf2]</span> Refactor event listener for form fields
+</span>[5d9xx5a]</span> Update snapshots
+</span>[948xxfa]</span> Update dispatch event
+</span>[f5xxea1]</span> WIP
+</span>[f8xxaae]</span> Revert change
+</span>[49xxf55e]</span> Revert changes
+</span>[02xxdf1]</span> Update snapshots
+</span>[21xx329]</span> Pass down prop
+</span>[28xxa865]</span> Fix onChange event and add minimal design  in form
+</span>[cfxx37c]</span> U[date snapshots
+</span>[cfxx36c]</span> Update form to handle onChange event for autofill
+</span>[242xx25]</span> Fix another bug with onChange
+</span>[f7xx738]</span> Update form component
+</span>[09xx868]</span> Update snapshots
+</span></code></pre>
+It seems like a lot, when actually those improvements are simply 1) fixing a bug with event handling and 2) introducing a minimal style to them. It just that it takes time to visualise that.</p>
+Indeed, committing often to a branch is a good practice1</a></sup> and commits are supposed to be low-level rather than huge. However, a commit is applicable when you have a meaningful, self-contained batch of work to log to the history – and updating Jest snapshots is not it.</p>
+
How about the following history?</p>
+
[9efxxf2]</span> Refactor event listener for form fields
+</span>[cfxx37c]</span> Add minimal design in form
+</span>[cfxx36c]</span> Update form to handle onChange event for autofill
+</span></code></pre>
+That history communicates in a clear way what</strong> in the codebase has been changed in order to get the improvements done. If you want to know how</strong> it’s changed, it’s just a matter of checking out a particular commit.</p>
+Why a clear history matters</h2>
+Apart from facilitating code reviews, since reviewers could grasp the context of the changes right at the first glimpse, a clear Git history is healthy for the project</strong>.</p>
+
When commits started to reflect one’s workflow rather than the work done itself, the history turns into a mess of both meaningful and meaningless logs, hard to navigate through and undo changes (since commits are “checkpoints” of work). It’s highly likely that, as time goes by, developers will stop caring about the source code history as the powerful resource it is.</p>
+
*The final Git history should reflect your work</em> not the way you worked.</em></p>
+
You begin to lose the benefit of source code management with a messy history, which was supposed to reflect how the codebase evolved over time.</p>
+A better relationship with Git</h2>
+There are very common comprehensible reasons – yet not excuses at all! – for developers to unnecessarily commit. I can think of:</p>
+
+“I had to update snapshots/fix unit test/code formatting/a typo in something I introduced.”</li>
+
“I had to merge master.”</li>
+
“I wanted to save my work.”</li>
+“I don’t necessarily follow a clear flow – I am productive when I work in iterative way and usually do a lot of things at once.”</li>
+</ol>
+They can all be worked out by developing a better relationship with Git itself. That might take a while at first, but when it’s part of your daily workflow, you barely think about it at all. (I promise!)</em></p>
+First, let’s talk Git rebasing</h3>
+Git rebase</a> is a very powerful tool to reorganise your commits. It does a lot, so I won’t get deep into it.</p>
+
The command git rebase</code> has an important tool you should get comfortable with: interactive rebase</strong>. Let’s say we want to reorganise the latest 3 commits:</p>
+
git</span> rebase</span> --interactive</span> HEAD</span>~</span>3
+</span></code></pre>
+HEAD</code> points to the current branch in your Git repository. You can use @ as an alias as well: @~3</code>, or the commit hash.</p>
+
Interactive rebase will provide you a text interface with the list of the commits (in this case, within the range HEAD~3..HEAD</code>) that are about to be rebased and actions you can apply to them:</p>
+pick </span>[</span>242xx25</span>]</span> Fix another bug with onChange
+</span>pick </span>[</span>f7xx738</span>]</span> Update form component
+</span>pick </span>[</span>09xx868</span>]</span> Update snapshots
+</span>
+</span># Rebase 242xx25..09xx868 onto 242xx25
+</span>#
+</span># Commands:
+</span>#  p, pick = use commit
+</span>#  r, reword = use commit, but edit the commit message
+</span>#  e, edit = use commit, but stop for amending
+</span>#  s, squash = use commit, but meld into previous commit
+</span>#  f, fixup = like "squash", but discard this commit's log message
+</span>#  x, exec = run command (the rest of the line) using shell
+</span>#
+</span># These lines can be re-ordered; they are executed from top to bottom.
+</span>#
+</span># If you remove a line here THAT COMMIT WILL BE LOST.
+</span>#
+</span># However, if you remove everything, the rebase will be aborted.
+</span>#
+</span># Note that empty commits are commented out
+</span></code></pre>
+pick</code> just means that commit is included. It's the default.</p>
+
Editing that file (either by applying actions to commits or reordering them) and closing it will reapply those commits to the branch. We’ll explore some scenarios where that is useful.</p>
+Rebase instead of merge</h3>
+The branch that you branched from has been updated (let’s call it master</code>), so you need to fetch latest changes and merge that into yours with git pull</code>. Instead of merging and introducing an ugly new commit for that, you can rebase and pretend that nothing ever happened in the first place.</p>
+git</span> pull origin master</span> --rebase
+</span></code></pre>
+"Why isn't that the default then?", you might ask. I'd guess they didn't want to make a feature that rewrites history part of the default behaviour.</p>
+Squash commits when you can</h3>
+You need to fix a typo, update a test, or include anything else that should have actually been part of a commit previously introduced. You can create a new commit and later squash it to the initial one with rebase.</p>
+git</span> commit</span> -m </span>"Update contact form tests"
+</span>git</span> rebase</span> -i</span> HEAD</span>~</span>2 </span># act on top of latest 2 commits
+</span></code></pre>
+Interactive rebase will show up, and you can mark that “Update contact form tests” as the commit to be squashed into a previous one by changing pick to s</code> (squash).</p>
+
The squashed commit has to come exactly before the commit you want to squash into, so you might have to some reordering.</p>
+Fix up and save time</h4>
+Using the --fixup</code> flag along with the commit hash of the previous commit will mark a commit as a fix of an existing one</strong>. Then, when you rebase with --autosquash</code>, they will… well, automatically get squashed.</p>
+
Let’s say we have fixed a typo in the commit i2r923</code>:</p>
+git</span> commit</span> --fixup</span> i2r923
+</span>git</span> rebase</span> --autosquash</span> 9ef00f2  </span># one commit before above
+</span></code></pre>
+You can configure Git to use the --autosquash</code> flag by default when rebasing. I do that so you can check my dotfiles</a> if you're curious.</p>
+
Quite often, you’ll know how far you’re traveling from the current commit (HEAD). Instead of specifying hashes, you can just use HEAD</code> as a reference to previous commits:</p>
+
git</span> commit</span> --fixup</span> HEAD            </span># fix 1 commit before HEAD
+</span>git</span> rebase</span> --autosquash -i</span> HEAD</span>~</span>1  </span># squash latest 2 commits
+</span></code></pre>
+Stash to save your work in progress</h3>
+You want to check or change other branch’s files, but don’t want to commit unfinished work either. You can stash your work in progress</strong> (“WIP”):</p>
+git</span> stash
+</span></code></pre>
+That stores everything from your working directory into stash. It’s so useful in my day-to-day work that I honestly often cry using it.</p>
+On how to get your work back, name your WIPs, or stash specific files, refer to the docs on Git staging</a>. No way I am better at explaining than the documentation itself!</p>
+
Commit selected chunks of your work</h3>
+Remember the “I work in a very messy way, iterating between features” excuse? This helps. (It helped me yesterday when I refactored and introduced something new to it – should not be done altogether! –  at the same time without noticing.)</p>
+
Besides only adding a specific file to your commit with git add</code>, you may want to add only a chunk of the file’s code</strong> to a commit. That can be achieved with the --patch</code> flag:</p>
+git</span> add</span> --patch
+</span></code></pre>
+That’s another interface you’ll have to get comfortable with. You can also try out its --interactive</code> option.</p>
+Using VS Code?</h4>
+VS Code has a powerful built-in Git editor that allows you to add chunks of code to a commit. To stage specific lines to commit later, open VS Code’s Git editor, select the lines of code you feel should go into a commit, and “Stage selected changes” by right-clicking on it.</p>
+</picture>
+Changed the whole thing but want to commit only a chunk of it? VS Code has got you covered.</figcaption></figure>
+The Command Palette</a> also has a “Git: Stage selected changes” option.</p>
+
Rename commit messages for meaning</h3>
+You had a look at the final history and found out your commit messages need some love. To change your latest commit (HEAD), you can just do git commit --amend</code>; for other commits, you’ll have to rebase.</p>
+
Let’s say you want to fix the latest 5 commits:</p>
+git</span> rebase</span> -i</span> @</span>~</span>5
+</span></code></pre>
+That will open up the interactive rebase</strong> you’re already familiar with. Find the commit you want, change pick to e</code> (edit), and save and close the file; after Git rewinds to that commit, edit its message with git commit --amend</code>, and run git rebase --continue</code> when you’re done.</p>
+Got a clear history? Push it!</h2>
+
+Commit Often, Perfect Later, Publish Once.1</a></sup></p>
+</blockquote>
+
Make sure that your branch has got a clear, readable and meaningful history…</p>
+
git</span> log</span> --oneline
+</span></code></pre>
+Then push it into the remote repository!</p>
+git</span> push origin head
+</span></code></pre>
+ If you have already pushed (Y THO???!), you can (carefully) use the force option (-f</code>) to rewrite the remote history.</p>
+Extra: Fixing the first history</h2>
+Remember the first history? We can fix it. It’s definitely harder to change it after it’s done, but totally doable with rebase -i</code>. A possible solution would be:</p>
+squash </span>[</span>290xx26</span>]</span> Resolve merge conflicts
+</span>pick </span>[</span>9efxxf2</span>]</span> Refactor event listener for form fields
+</span>squash </span>[</span>5d9xx5a</span>]</span> Update snapshots
+</span>squash </span>[</span>948xxfa</span>]</span> Update dispatch event
+</span>delete </span>[</span>f5xxea1</span>]</span> WIP
+</span>delete </span>[</span>f8xxaae</span>]</span> Revert change
+</span>delete </span>[</span>49xxf55e</span>]</span> Revert changes
+</span>squash </span>[</span>02xxdf1</span>]</span> Update snapshots
+</span>squash </span>[</span>21xx329</span>]</span> Pass down prop
+</span>pick </span>[</span>28xxa865</span>]</span> Fix onChange event and add minimal design  in form
+</span>squash </span>[</span>cfxx37c</span>]</span> U[date snapshots
+</span>pick </span>[</span>cfxx36c</span>]</span> Update form to handle onChange event for autofill
+</span>fixup </span>[</span>242xx25</span>]</span> Fix another bug with onChange
+</span>squash </span>[</span>f7xx738</span>]</span> Update form component
+</span>squash </span>[</span>09xx868</span>]</span> Update snapshots
+</span></code></pre>
+Be mindful about your decisions and make sure you are not losing work along the way</strong>. I deleted commits unused commits (WIP then reverted), squashed “fix” and “update tests” commits, and then picked only those that are meaningful batches of work.</p>
+
I could have also split Fix onChange event and add minimal design  in form</code> into two separate commits… But that’s for a future post.</p>
+Final considerations</h2>
+Nowadays, I can say for sure that Git helps me to work better. Those techniques you’ve learned are all part of my daily workflow.</p>
+
There is always something I don’t know about Git though, so I keep exploring. I recommend you do to do the same, and you can start right from your command line:</p>
+git</span> help</span> -w</span> reset
+</span></code></pre>
+Finally, if somehow you don’t feel comfortable with moving around your work from the command line, I’d recommend Git GUI clients2</a></sup> – they are powerful and simplify visualising branches and its commits, especially when it gets tough3</a></sup>.</p>
+
I hope you have better, more sane, work days after that!</p>
+
^1</sup>
+Commit Often, Perfect Later, Publish Once: Git Best Practices</a> by Seth Robertson.</p>
+</div>
+
^2</sup>
+Some clients I can think of: GitHub’s Git client</a> (free), Git Kraken</a> (free), Git Tower</a> (paid).</p>
+</div>
+
^{3</sup>
+It will get tough, because source code management is not easy. Anyhow, it’s always tougher when you care about things anyway. Easiest thing is not to care about anything at all.</p>
+</div>
+}


Computer and Human Languages
2018-06-20T18:06:00+00:00
Basic knowledge of computer languages (mainly JavaScript) is assumed.</p>
+
Some time ago, a friend of mine asked how skilled I’d say I was with JavaScript. I told him I was fluent</em>.</p>
+
– Fluent? What does it mean to be fluent?</em></p>
+
– Well, think Portuguese.</em> – We both speak Portuguese — I don’t know every word, but I do know the language enough to express anything I need somehow.</em></p>
+
It turned out that “fluent” was just the perfect word.</p>
+

+Fluency is a powerful and straightforward concept to express your ability with a language. When it comes to human languages</strong>, it’s the ability to fully communicate your intentions to a human; for computer languages</strong>, the ability to fully communicate your intentions to a computer.</p>
+
That line of thought is shared in one of the most important and revolutionary introductory books to Computer Science. In Structure and Interpretation of Computer Programs</em>, right before introducing Lisp (the programming language used throughout the book) a similar analogy is made:</p>
+
+Just as our everyday thoughts are usually expressed in our natural language (such as English, French, or Japanese), and descriptions of quantitative phenomena are expressed with mathematical notations, our procedural thoughts will be expressed in Lisp. 1</a></sup></p>
+</blockquote>
+
For both kinds of languages, the levels are the same: one cannot</em> communicate; can poorly</em> do it (beginner); can</em> do it (native/fluent), or can brilliantly</em> do it (think book authors, public speakers, and Software Engineers in a senior level).</p>
+
Why do they match so well?</h2>
+They match because the linguistics of computer and natural languages wonderfully intersect. Both consist of syntax</strong>, semantics</strong> and pragmatics</strong> functions, found in the core of theoretical linguistics.</p>
+
In their ecosystem, we can also find syntax trees</strong> and different style guides</strong>.</p>
+Syntax</h3>
+Syntax</strong> is the set of rules that govern how language elements are combined to form a valid expression.</p>
+In English, the basic rule is that elements like nouns, verbs and punctuation marks must follow the subject-verb-object order</a> to produce a valid sentence. In JavaScript, a programming language, to produce a valid conditional statement, elements such as if</code>, parenthesis, braces, comparison operators (===</code>, <=</code> ) must be combined in a certain order too.</p>
+
In the same way that “Do they car a put?” (??) is not valid English, the following code is not valid JavaScript:</p>
+
if </span>{</span>1 </span>=== </span>2</span>} (
+</span>  </span>return </span>true
+</span>)
+</span>// => SyntaxError: missing ( before condition
+</span>
+</span>add x y </span>= </span>x </span>+ </span>y  </span>// u can't use elm's lambda syntax on js, no
+</span></code></pre>
+And just like a pedant friend would do when you write shitty English, the computer will throw a syntax error when running your program. Forgot closing a brace? Wrote an if</code> statement condition using curly braces instead of parenthesis? Well, SyntaxError</code>!</p>
+
This, however, is valid JavaScript:</p>
+if </span>(</span>1 </span>=== </span>2</span>) {
+</span>    </span>return </span>true
+</span>} </span>// "if (1 === 2) return true" is also fine!
+</span>
+</span>const </span>add </span>= </span>(</span>x</span>, </span>y</span>) </span>=> </span>x </span>+ </span>y
+</span></code></pre>
+In HTML there are syntax rules too. Adding a div</code> inside ul</code>, for instance, is invalid. An unordered list in HTML (ul</code>) only allows list items as children, such as li</code> – and div</code> is not one.</p>
+
Languages have different degrees of syntax strictness, which is what usually makes some harder to grasp than others. Think the German language</strong> – German imposes very strict rules for articles: they may vary in number, gender, and function. English, on the other hand, has a definite (the) and an indefinite article (a/an) – and that’s it.</p>
+
The same applies to computer languages: some happen to be extremely strict when it comes to syntax, while others are designed for greater syntactic flexibility, letting you achieve the same result in different ways. Think semicolons</strong>: they are optional when ending statements in JavaScript, but mandatory in C.</p>
+Semantics</h3>
+Semantics</strong> is what the language expression evaluates to. In human languages, expressions evaluate to thoughts, questions, answers; while computers evaluate expressions to CPU instructions that comprise a program’s flow.</p>
+
Consider the following English statement:</p>
+
+The ant ran over the car.</p>
+</blockquote>
+
I don’t know what ants you are familiar with, but even though the sentence contains the necessary elements in correct order and grammar, that doesn’t make sense. The statement is syntactically correct</strong> but semantically wrong</strong> – we can’t conceive a meaning from it.</p>
+
(“The car ran over the ant”</em>, however, would be definitely more acceptable to our ears.)</p>
+
We can relate semantics to computer languages in several ways (like “solving the wrong problem”, basically), but the “semantic” word bubbles up more often when we think about HTML. Consider the following markup:</p>
+<</span>span</span>>What is a fruit?</</span>span</span>>
+</span><</span>div</span>>
+</span>    A fruit is something that humans eat. Some examples of fruits are:
+</span>    watermelon, pineapple and apples.
+</span></</span>div</span>>
+</span></code></pre>
+The elements span</code> and div</code> do exist in the language and are validly marked in this case (I didn’t do >div<</code>, right?), so the browser will understand and show it accordingly to the user. The syntax is correct; yet, span</code> and divs</code> are non-semantic elements, so computers won’t get any meaning from it. Again, syntactically correct</strong> but semantically wrong</strong>.</p>
+
That text, though, is clearly a title and a paragraph. With a bit of HTML knowledge, we can communicate this in a meaningful way to computers! The language provides elements to achieve that.</p>
+
The following code improves the previous markup for better semantics.</p>
+<</span>h1</span>>What is a fruit?</</span>h1</span>>
+</span><</span>p</span>>
+</span>    A fruit is something that humans eat. Some examples of fruits are:
+</span>    watermelon, pineapple and apples.
+</span></</span>p</span>>
+</span></code></pre>
+The element h1</code> is being used to communicate the main title, and p</code> communicates the paragraph. Both syntax and semantics make sense now!</p>
+Pragmatics</h3>
+Pragmatics</strong> is what the language expression evaluates to within its interactional context – which might totally affect semantics and syntax.</p>
+
In a natural language, the context is essentially built around the cultural aspects of the speaker, place, time, manner, and several others unpredictable aspects that humans introduce when communicating.</p>
+
For computer languages, we can see pragmatics as the methodology or implementation used when approaching a problem: composition vs. inheritance, functional vs. imperative, picking a Design Pattern etc.</p>
+
Consider the following examples:</p>
+
+A child saying that the food is horrible to a beginner that started cooking just recently.</li>
+
A new joiner in the company filters items in an JavaScript array using forEach</code>, but the team expected filter</code> to be used – a more functional approach.</li>
+
A programmer implements Fibonacci with recursion instead of iteration.</li>
+Your friend uses a very erudite language to add a cake recipe on the internet.</li>
+</ul>
+What do they all have in common? By themselves, they are neither right or wrong – unless</em> you consider the context in which they were approached in.</p>
+
Having either syntax or semantic skills won’t help you understand what’s wrong, since pragmatics is more about what’s appropriate</strong> within a context. Some approaches are more elegant, antiquated, or dialect-based than others, and we can only tell how valid they are considering what we are trying to achieve.</p>
+
Syntax trees</h3>
+Both kinds of languages can be represented using syntax trees, a concept that reuses the mathematical concept of partially ordered sets</a>.</p>
+
Human languages are analysed through the Concrete Syntax Tree (“CST”), a context-free analysis that tells us about the function of each language token (word, punctuation etc) used.</p>
+
This is the Concrete Syntax Tree for the previous sentence, “The water drank a glass of Mary.”</em>:</p>
+
</picture>
+Concrete Syntax Tree for a sentence in a human language, where "S" stands for "sentence", "N" for "noun", "V" for "verb", and P for "phrase". See Wikipedia on Parse Trees</a> for more information.</figcaption></figure>
+Computer languages are also represented using syntax trees! When the code (high-level) gets translated into instructions for the computer (low-level), a program called compiler</em> make uses of them. The Concrete Syntax Trees for a program contains a lot of detailed information, from whitespaces to language expressions, so you can imagine a CST for a real-world JavaScript program as something really lengthy.</p>
+
What compilers do might be tough to understand at first, but think of this program inside us that converts languages to meaning – our internal compiler</i></b>. Kids improve their compilers while communicating with their families, so every day they get to understand their mother language even more. If you understand English yet struggle with German, we can say your German compiler is pretty bad and has to be improved</i>.</p>
+
The compiler simplifies the CST down to the expressions that truly represent the program after syntax analysis. That’s where the Abstract Syntax Tree</strong> (AST) comes in: the syntax tree that actually lies at the heart of semantic definitions!</p>
+
Let’s consider the following JavaScript program:</p>
+let </span>x </span>= </span>0
+</span>
+</span>if </span>(</span>x</span>) {
+</span>    </span>x</span>++
+</span>}
+</span></code></pre>
+This is the Abstract Syntax Tree for it:</p>
+</picture>
+Abstract Syntax Tree for a JavaScript program.</figcaption></figure>
+It’s really about the essentials when considering language grammar. If a whitespace means nothing in a language, that won’t show up in the AST.</p>
+Compare that against a Concrete Syntax Tree for another program of similar size</a>, which is way more detailed, and therefore more useful in a language-specification level.</p>
+
Style guides</h3>
+When the same expression can be written in several ways because the language is not strict enough about it, style guides aim to answer the question of which style to go for</strong>. Curiously, style guides of writing are just as useful for programmers as they are for journalists!</p>
+
Let’s say I’m telling someone my favourite fruits. I could do it in different ways:</p>
+My favourite fruits are watermelon</span>, </span>bananas and strawberries</span>.
+</span>
+</span>// or using the Oxford comma
+</span>My favourite fruits are watermelon</span>, </span>bananas</span>, </span>and strawberries</span>.
+</span></code></pre>
+The Oxford comma comes from the Oxford Style Guide</a>.</p>
+
In JavaScript, you can write a JavaScript object</a> in different ways too:</p>
+
const </span>hero </span>= </span>{
+</span>    firstName: </span>"Ada"</span>,
+</span>    lastName: </span>"Lovelace"</span>,
+</span>    birthYear: </span>1815</span>,
+</span>    superPower: </span>"computers"</span>,
+</span>}
+</span>
+</span>// or comma-first style
+</span>const </span>hero </span>= </span>{
+</span>    firstName: </span>"Ada"</span>,
+</span>    lastName: </span>"Lovelace"</span>,
+</span>    birthYear: </span>1815</span>,
+</span>    superPower: </span>"computers"</span>,
+</span>}
+</span></code></pre>
+Either way, there’s no definite rule</strong>. They mean the same, only changing their style of writing.</p>
+Some examples of style guides are Airbnb’s Style guide</a>, for writing JavaScript; and Chicago style guide</a>, for general writing.</p>
+
Where they don’t match</h2>
+
+The programmer, like the poet, works only slightly removed from pure thought-stuff. He builds his castles in the air, from air, creating by exertion of the imagination. […] Yet the program construct, unlike the poet’s words, is real in the sense that it moves and works, producing visible outputs separately from the construct itself. It prints results, draws pictures, produces sounds, moves arms. 2</a></sup></p>
+</blockquote>
+
Even with all the similarities, programming languages are still artificial, while human languages are natural. Computers are rigorous, won’t allow you to be ambiguous, and only get what you mean if you put it the right way.</p>
+
You won’t have filler words in a computer language, because computers don’t benefit from your thought process. Humans do benefit, though, and I’d even say that those communication imperfections is what connects us to others.</p>
+
Apart from that, a programming language is an interface between you and a computer, while a natural language is an interface between you and another human being.</strong> You are communicating to a computer, but as a human – and you probably won’t be the only one doing it.</p>
+
Writing in a way that’s meaningful for both is therefore part of the writing process – and probably the most demanding one.</p>
+
Final thoughts</h2>
+Just like experienced programmers look at documentation and easily apply language features to create pieces of software, fluent English speakers would look at the dictionary and easily come up with phrases.</p>
+
Because both computer and natural languages share linguistic structures, speaking about programming skills in terms of fluency works just as well.</p>
+
After all, fluency is all about how easily our intentions are expressed with a language.</p>
+

+As a next reading,  I'd highly recommend  Exploring the Linguistics Behind Regular Expressions</a> if you are interested in the linguistics of computer languages.</p>
+

+Follow the discussion thread on Reddit</a></p>
+
^{1</sup>
+“Programming in Lisp” in “Structure and Interpretation of Computer Programs”</em>, 1979.</p>
+</div>
+
^{2</sup>
+Fred Brooks. “The Mythical Man-Month: Essays on Software Engineering”</em>, 1975, page 7.</p>
+</div>
+}}


React and Form Management: Is Redux Form Worth It?
2018-05-21T18:14:00+00:00
This is an improvement over my answer to a question in a Brazilian forum: "is using Redux for forms worth it?</a>", in Portuguese. It assumes previous knowledge with React and Redux, and also mentions Redux Form</a>, a library for managing forms in React.</p>
+
It depends.</p>
+
I know “it depends” is far from an interesting answer, yet that’s the perfect-generic answer to any “is using X worth it?”</em> question. It really depends, yes, but more often you don’t need that.</p>
+
Last year I picked Redux Form to build a multi-step form wizard, each step containing different forms, with its own fields and validations (some of them asynchronous!). In the end, all forms would be merged into one JavaScript object to be sent at some point.</p>
+
So, I’d like to share my experiences and hopefully help you to figure it out what your problem is, and help you to decide by telling you how I’ve solved mine.</p>
+
Where Redux Form thrives</h2>
+Redux Form</a> is useful for larger and more complex forms where ease of development</strong>, high control</strong> (especially), consistency</strong>, and persistence</strong> (especially) are required. There are advantages from:</p>
+

+the state form being in the Redux store, and</li>
+Redux Form’s abstraction itself.</li>
+</ol>
+Which are two different things. You might need both, just one, or none at all.</p>
+Ease of development</h3>
+Considering you are using Redux Form’s Field</a> and wrap your form in its higher-order component</a> – you’re done. Your form will work out of the box.</p>
+
Yes, you could also get to build forms in a productive way with only React, but I think it's still worth-mentioning that Redux Form makes it really painless.</p>
+
High control</h3>
+You can manipulate forms from anywhere in the application: you trigger Redux actions provided by Redux Form and that’s all. No need to create your own Redux reducers and actions.</p>
+
Redux Form is also flexible on what can be an input. Anything works as a field</strong>: custom 3rd-party inputs, a regular HTML input, a fancy select component without any standard form element at all… Just pass the right props to it.</p>
+
You can set up validation at the form and field level, supporting either synchronous or asynchronous validation. The errors triggered are also in the store – which makes it sweet to give useful feedbacks for users from anywhere, and also to debug! 👌</p>
+Consistency</h3>
+All forms have the same data structure so you’d have the exact same information for every form and its fields, such as field values, field/form validity and further information (is the field touched? Pristine? Dirty?) in the Redux store.</p>
+
Of course you can build forms consistently just by using React itself, but using Redux Form definitely enforces it.</p>
+Persistence</h3>
+Since the state is already in the Redux store, Redux Form is easily pluggable with tools from the ecosystem.</p>
+Let’s say you want to save drafts from user’s inputs so people can finish and submit the form later. Redux Form + redux-persist</a> make it pretty easy: the rehydrate process in the Redux store autofills the UI like magic!</p>
+
Where Redux Form might die</h2>
+In the thread, someone mentioned the article Redux Form is dead.</a> TL;DR</b>: It's not fucking dead, as any library, framework and whatsoever that has an "X is dead" post for it.</p>
+
Let’s not forget that the JavaScript community is flooded with “X is dead” articles for everything in the ecosystem. That post, in particular, mentions valid points to consider such as ephemerality of the state (quoting Dan Abramov), performance issues within Redux Form, and the project maintenance/activity. I will go through them a bit.</p>
+
Form data in the Redux store</h3>
+Dan Abramov</a>, creator of Redux, said</a>: “Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. […]”.</em></p>
+
Which is completely accurate. Where your state should live in your app depends entirely on its ephemerality</strong> – how trivial it is for the application as a whole when it comes to reading, updating it and so on.</p>
+
In the post, that quote is used to support the claim that Redux Form fucks up when stores all form data in the Redux store by default – a pretty bold design decision</strong> for sure.</p>
+
However, Dan did not write that in stone – he never does and he’s clear about it. That should serve as an encouragement for developers to think better about where your application’s states should go into. So, yes, you should think twice – and that doesn’t kill Redux Form.</p>
+
The state of a form wizard, whose input data persists until the end of the steps (in a session or local level, for instance), whose inputs may trigger UI changes, whose inputs gets touched and changed by external components, it’s definitely not as ephemeral as the state of a newsletter sign up or a contact form</strong>. In the former, the form state is important for the whole application. Just notice that’s a very specific case.</p>
+
Performance issues</h3>
+Redux Form has reached a well-optimised (see redux-form #529</a> and redux-form #1405</a>) state.</p>
+
When it comes to performance, though, you should never rest easy anyway. If you measure and find that your forms are slow, you should find bottlenecks and optimise from that.</p>
+
Project activity</h3>
+Regarding the project activity, it is something to consider when deciding, and should always be. Is it active? Are there people maintaining it? Can YOU help to maintain it?</p>
+Yes, Erik (the author) has recently started working on another solution called Final Form</a>, which moves the form state out of the Redux store. However, Redux Form is mature, still well maintained (check GitHub</a>, and he even said it himself on Reddit</a>), and its documentation is great.</p>
+
Final words</h2>
+Only if the state of your form is non-trivial enough to live in the Redux store, I’d give it a chance for Redux Form, especially</strong> if you are considering making your own solution. Redux Form has suffered and evolved a lot and nowadays it has a very stable and mature API you can count on, I’d say.</p>
+Other React form management solutions you should definitely be looking at are Formik</a> and react-final-form</a>, by Redux Form’s author. They don’t rely on Redux for state management and are most likely what you need now – or not.</p>
+
The price is the abstraction, of course, it always is. 🙄 However, their everyday API is indeed minimal though, just be prepared to go through the documentation when you need to achieve specific stuff. In return, don’t forget you’ll get a consistent and solid structure to build forms upon.</p>
+
Have fun building forms! 🎉</p>
+


T. T. T.
2018-04-01T23:36:00+00:00

+Put up in a place

+where it's easy to see

+the cryptic admonishment

+      T. T. T.

+When you feel how depressingly

+slowly you climb,

+it’s well to remember that

+      Things Take Time.
+</i></p>
+
Piet Hein</p>
+


Writing Mode in VS Code
2018-02-28T02:30:00+00:00
I’m a big fan of writing. I’m also a big fan of using my code editor</strong> and Markdown</strong> for that!</p>
+
+My "writing mode" in VS Code, with the dark theme enabled.</figcaption></figure>
+Code editors are usually packed with a bunch of useful features, such as multi-selection, syntax highlighting, a file tree easy to operate, and sometimes even Markdown support</a> – which I need for writing my articles, notes, to-do lists, and absolutely everything I can write using Markdown. I love having a consistent workflow and that’s crucial to me, so why not?</p>
+
After configuring my editor of choice, VS Code, to get rid of the coding mode clutter (and also after an important update on its zen mode</a> ❤️), I’ve finally achieved a totally distraction-free writing experience!</p>
+
Setting up the “Writing Mode”</h2>
+1. User Settings</h3>
+There are some important details to achieve total focus on writing. No line numbers, word wrap enabled, comfortable line height, no rulers, are some of them.</p>
+
Since I only write in Markdown, I only set up those settings (and other tweaks) specifically for that language.</p>
+// github.com/diessica/dotfiles/blob/master/vscode/settings.json
+</span>{
+</span>  </span>....
+</span>
+</span>  </span>"[markdown]"</span>: {
+</span>    </span>// force centering in zen mode
+</span>    </span>"zenMode.centerLayout"</span>: </span>true</span>,
+</span>    </span>// use the beautiful duospace font when available
+</span>    </span>"editor.fontFamily"</span>: </span>"iA Writer Duospace, monospace"</span>,
+</span>    </span>// enable word wrap, since horizontal scroll while writing isn't human
+</span>    </span>"editor.wordWrap"</span>: </span>true</span>,
+</span>    </span>// i don't need line numbers, i'm not coding
+</span>    </span>"editor.lineNumbers"</span>: </span>"off"</span>,
+</span>    </span>// light by default, but can be easily toggled to dark
+</span>    </span>"workbench.colorTheme"</span>: </span>"Default Light+"</span>,
+</span>    </span>// i don't need rules, i'm not coding
+</span>    </span>"editor.rulers"</span>: [],
+</span>    </span>// larger text, to improve focus on writing
+</span>    </span>"editor.fontSize"</span>: </span>14</span>,
+</span>    </span>// more comfortable line height
+</span>    </span>"editor.lineHeight"</span>: </span>25</span>,
+</span>    </span>// disable editor suggestions based on previous words
+</span>    </span>"editor.quickSuggestions"</span>: </span>false</span>,
+</span>  },
+</span>
+</span>  </span>...
+</span>}
+</span></code></pre>
+You can learn more about this file by checking the docs on "User and Workspace Settings"</a>.</p>
+
Now, toggle zen mode</strong> in VS Code (see Keybindings</a>, or View > Toggle Zen Mode</code>) and check if that fits you!</p>
+
2. Theme</h3>
+Honestly, I think the default themes provided by VS Code do a great job. I use Dark+ as the dark theme; for light themes, either Quiet Light or Solarized Light.</p>
+
If you don't like them, feel free to pick anything else, since most themes provide sufficient Markdown support anyway. Just don't procrastinate – a good theme won't make you a better writer.</p>
+3. Font</h3>
+My font of choice for writing is the Duospace</a>, designed by the people behind the text editor iaWriter</a>. It’s a free and beautiful font shaped for the perfect writing experience.</p>
+
4. Extensions</h3>
+
+Spell Checker</a> catches your spelling errors.</li>
+
Word Count</a> helps you to not to be too wordy.</li>
+
Markdown All in One</a> gives you some extra power to play with Markdown files.</li>
+
Paste Image</a> lets you directly paste images from clipboard to files.</li>
+</ul>
+Extra tips</h2>
+
+VS Code’s Markdown Preview</a> is your friend – use it when you’re done with writing!</li>
+
Configure the spell checker for your language, there are dictionary extensions for that available in the marketplace</a>. I also have the Brazilian Portuguese package</a> installed, for instance.</li>
+
Like extensions? Keep exploring! The extension alex</a>, for instance, catches insensitive, inconsiderate writing in texts.</li>
+
Learn the Markdown keybindings provided by the All in One extension for a better workflow.</li>
+</ul>
+Happy writing! 🌟</p>
+


My Hacking Adventure in Lithuania
2018-02-15T00:00:00+00:00

+Exploring the country where my surname came from and hacking collaboratively at Science Hack Day Vilnius!</p>
+</div>
+
I love to hack stuff, and, this year, I’ve been pushing myself to do more of that along with people.</p>
+That’s how I found a hackathon called Science Hack Day, a weekend event with the goal of “making weird, silly or serious things with science”1</a></sup> in collaboration with others. Although I missed the Berlin edition for just a few days after it happened in November, another event was about to come – this time, in Lithuania</strong>, where my surname “Gurskas” came from.</p>
+
There it was the perfect replacement: the Science Hack Day Vilnius 2018</a> would be my great excuse to explore the country where my grandfather was born.</p>
+
Right on the last minute, I got a bedroom in a cheap hotel booked, and my flight and event tickets ready. All set for the hacking adventure!</p>
+
Welcome to Vilnius</h2>
+Approximately 2 hours from Berlin by plane, there I was: Vilnius, the capital of Lithuania. A modest city, so small you can pretty much explore everything by feet.</p>
+
Temperatures were more negative than in Berlin. Winter, and the city wasn’t the most colourful either, so the atmosphere was somewhat dark – even though the snow was painting all buildings, houses, and streets in a shining white.</p>
+
The cold was totally dismissible as soon as I met the Lithuanians, warm and welcoming people who seemed to lead a simple life.</p>
+Science Hack Day Vilnius 2018</h2>
+</picture>
+Trophies for different prize categories. (Photo: Raitis Gocentas</a>)</figcaption></figure>
+A Science Hack Day is a 2-day event run by volunteers. Since it’s a hackathon, it’s pretty hectic and leaves you exhausted at the end. However, also since it’s a hackathon, it’s remarkably rewarding at the end.</p>
+
These were my days!</p>
+First Day</h3>
+Early on Saturday, I walked to Technarium</a>, where the event would happen. It’s a laid-back and community-operated hackerspace in Vilnius, where technology enthusiasts work or co-work on their projects and share knowledge. My perfect habitat, sort of.</p>
+
</picture>
+Technarium. (Photo: Raitis Gocentas</a>)</figcaption></figure>
+I found a seat in the middle of a diverse crowd of enthusiasts: kids, teenagers, and adults (in which you could also find scientists and professors). I had forgotten to adjust my clock to the local timezone when I arrived in Lithuania – 1 hour ahead of Berlin –, so I was kinda late and the talks on open science had already started.</p>
+
With honestly no idea on how all that’d end up (a feeling I’m used to, since I always do unexpected stuff to myself anyway), I was watching the talks and telling myself that the worst that could happen was that I’d have no idea and no team, and would end up just exploring what others were building. It didn’t sound any bad at all! Being around creative people is always appreciated anyway.</p>
+</picture>
+Electronic hackable badge and some stickers I got for joining the event! The badge features a WiFi-enabled micro-controller and MicroPython, for some hardware hacking fun. Check the badge's GitHub repository</a>.</figcaption></figure>
+After the talks, it was time for people to pitch about their potential projects. Most ideas involved Biology, Programming, Physics, Chemistry – anything related to (science) hacking! One of the ideas, from a team of 3 guys, was to build an audio visualiser.</p>
+
“We need a Python engineer who understands some audio engineering”</em>, they said, in Lithuanian (thanks person who was real-time translating everything!). Luckily, in a beautiful coincidence, I love music, Python, and also have been playing with spectrum analysis for audio visualisation in the last year – so I decided to take a shot and ask them to join the team.</p>
+
They said they had no idea how to get the input from a microphone, and that they knew more about the hardware part, Arduino, and manipulating those machines in the hackerspace to come up with a cool design for our project. I’m just bad at things that require manual work that isn’t with the keyboard, so my manual help would be typing Python for 2 days on my laptop. They accepted it. So far, we had:</p>
+
+the idea;</li>
+
an Arduino Nano;</li>
+
a power supply;</li>
+
long LED strip lights;</li>
+an acrylic sheet.</li>
+</ul>
+Since Arduino Nano isn’t powerful enough for that computation, it’d be only used for data acquisition, and the spectrometer would live in our Python program in my laptop, computing the Fourier transform of the audio signals.</p>
+By the end of the day, we managed to get input from the microphone, analyse its signals in the frequency domain with Python, and start mapping that data to be sent to our Arduino over a serial interface. Some libraries we played with were: pyaudio</a>, numpy</a>, pyserial</a>, matplotlib</a>.</p>
+
Second Day</h3>
+Now with the clock correctly set (thanks to my friend that asked what timezone I was in, otherwise I wouldn’t ever know), I was on my way to Technarium again, walking over and under snow in that early Sunday morning.</p>
+A day in the Science Hack Day Vilnius was a day with Lithuanian hearty lunch, black coffee, and hard work around kind people. (By the way, if you ever end up there, try the kibinai</a> – I ate one filled with spinach and will never forget how it smelled and tasted.)</p>
+
Most people there were Lithuanians and I didn’t know anything about their language besides “labas vakaras”2</a></sup> (“good evening”), so I felt like an outsider sometimes. My teammates and other Lithuanians in the event – including kids –, though, were friendly and spoke English flawlessly, and fortunately even translated some stuff into English for me.</p>
+
Curious fact:</b> A teenager at the event told me that my surname was "wrong" – in Lithuania, single women get a different surname suffix, so my name should be Gurskaite ("skaite" suffix, instead of –kas). In Brazil, of course, they didn’t know that and only cloned my grandfather’s surname – with the "kas" suffix, since he was a man: Gurskas.</p>
+
More talks in the morning on open hardware and software. They introduced everyone to GitHub, and many people, even students, were already familiar with it. The importance given to open source was impressive! That made me really happy.</p>
+
Time flew on the second day! We had got the data we needed, and the next step was to decide on what would be more fun: to map amplitudes from the maximum frequency to RGB values for all LEDs, or map each LED to a frequency and change its colour depending on the amplitude? We picked up the latter, and got our LEDs to blink.</p>
+

+One of my teammates was learning Programming. He told me he didn’t know what programming languages to really sit down and learn</em>, as seen that there were a lot of them out there. True, and a nice question! I gave him a biased answer, of course: “go for Python or JavaScript”. My reasons? Way more fun. Besides beginner-friendly, those languages have the most interesting, welcoming and lively ecosystems I know these days.</p>
+

+We were running out of time. While 2 of my teammates were building the LED tower, the other and I were testing the code and trying to improve our algorithm, everything at the same time. Eventually, we got our LEDs to blink the way we wanted them to, and the clock pointed 18:00 sharp. Time for presenting</strong>!</p>
+</picture>
+Project showing how lasers work. It emitted sounds too! (Photo: Raitis Gocentas</a>)</figcaption></figure>
+Teams came up with a lot of cool things! Projects related to lasers, contactless payment systems security tests, shopping-cart-rocket launch</a> (#SpaceXLithuania!), plant-watering automation, posters with LEDs crafted by kids celebrating the 100th year of the Lithuanian as an independent country… And ours, of course.</p>
+
</picture>
+Two of my teammates (one's missing!) and me. I was  weirdly concentrated uttering different notes to show how LEDs reacted to frequencies. (Photo: Raitis Gocentas</a>)</figcaption></figure>
+There were different category prizes, and we won as the Best Data Hack</strong>!</p>
+
I got the honor to take home not just this LED-powered trophy below, but also a memorable experience I had the pleasure to share with people I didn’t know in a country I didn’t know.</p>
+</picture>
+A trophy for the Best Data Hack 2018 and a Raspberry Pi. Our prizes for having fun!</figcaption></figure>
+The Hack Day ended with a science show by N2</a>! Lots of fun with liquid nitrogen and eating cookies at temperatures close to the absolute zero. My teammates, Physics students, knew a lot of the science behind that stuff so I got some extra explanations! (I have to say, though, that one of my greatest learnings of that day was to not to chew those cookies slowly – they stick to your tongue in a TORTURING way.)</p>
+
</picture>
+Playing with fire. Literally. (Photo: Raitis Gocentas</a>)</figcaption></figure>
+It’s always truly amazing to experience closely how creative and curious humans are! The event was awesome, well-organised, and, last but not least, fun</em>. Organisers provided us all the materials (food included!), borrowing me even the single USB-C adapter they had!</p>
+
Clearly, the only intent behind Science Hack Days is for people to share and learn</strong> openly. And that has been achieved just right.</p>
+Final words</h2>
+Open knowledge is one of the most valuable things in this world. I have no doubt.</p>
+
I’m happy to have picked such an eccentric travel destination for my weekend, and really grateful for everything I saw and everyone I’ve met on the way.</p>
+</picture>
+I don't feel my fingertips anymore since I did that. Writing in the snow: definitely NOT encouraged!</figcaption></figure>
+Lithuania was freezing, yes, but people were warm.</p>
+^1</sup>
+From the Science Hack Day’s Wikipedia page</a>.</p>
+</div>
+
^{2</sup>
+Special thanks to my father, who taught me that, otherwise I wouldn’t know anything really.</p>
+</div>
+}


Creativity
2018-02-05T21:25:00+00:00
In a life where, by default, there’s no meaning at all, I value creating above all. If I’m creating, that’s a meaningful day.</p>
+
Lately, I’ve been pondering on the phenomenon of creativity and why creative people are so inspiring to be around. They just broaden my perception of the universe profoundly. What really happens?</p>
+The Phenomenon</h2>
+In an interview in the late 1990s1</a></sup>, Steve Jobs said something that years later would be seen as one of the most simple but accurate definitions of creativity:</p>
+

+Creativity is just connecting things.</p>
+</blockquote>
+
And he followed with something I couldn’t help but relate: “When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. […]”</em>.</p>
+
In the wake of being called creative, I was used to responding with the most unfair answer ever: “But everything I did was mixing stuff from here and there!?!“. It turns out, however, that “mixing stuff” actually describes precisely the process creative people go through.</p>
+And when Steve Jobs said that, he was mixing stuff as well! He most likely got inspired by James Webb Young’s conception of idea, presented in his book A Technique for Producing Ideas</a>, from the 1940s.</p>
+

+An idea is nothing more nor less than a new combination of old elements [and] the capacity to bring old elements into new combinations depends largely on the ability to see relationships.</p>
+</blockquote>
+For James to suggest that, well, guess what? He was inspired by Pareto</a>'s idea of the "speculator", a personality type characterized by a constant preoccupation with the possibilities of new combinations of old elements. (Which sort of proves his own point on "ideas as a combination of old elements".)</p>
+
Creatives are just so overloaded with elements to mix that those overflow and flow out of their heads, and they can’t help but inspire everyone around.</p>
+
They reframe experiences and mix their elements to be synthesised into something valuable and unique. From songs, painting, programming to scientific theories – all of them comes from mixtures</strong>. When the mixture feels good, either as a homogeneous or heterogeneous result, it’s then a creation</em>.</p>
+
The Creation, The Weird</h2>
+</picture>
+Creativity</a>, by Alex Norris.</figcaption></figure>
+When the creation distances itself too much from its origin elements (which are things people are already aware of, most likely), it’s perceived as weird</strong>, rather than authentic. But that’s when we truly innovate! To come up with the weird, though, we have to limit ourselves to certain existing elements – an outstanding habit people like Alan Turing had.</p>
+Alan Turing was an inspiring computer scientist. Among other cool stuff, he proposed humans to consider the question "Can computers think?"</a>, and also designed cryptanalytical machines</a>, crucial to cracking German encoded communication during the World War II. Cool stuff!</p>
+
As described by James Wilkinson, who worked closely with him, Turing avoided looking at previous work on a topic just so he could invent something truly original, truly weird</strong>.</p>
+
”Turing had a strong predilection for working things out from first principles, usually in the first instance without consulting any previous work on the subject, and no doubt it was this habit which gave his work that characteristically original flavor.“</em> 2</a></sup></p>
+
Finally, the ones who release their creations end up turning into painters, mathematicians, writers, architects, sculptors, programmers, musicians. It’s a process that happens in absolutely every realm of thinking and work.</p>
+
And you know what?</p>
+
…It’s Been Shown by Nature</h2>
+When Young and Steve Jobs pointed out that the creative process wasn’t magic, they, again, didn’t do anything “new” either. That definition has been shown by Nature for a long time, and, as early as 450 B.C, the philosopher Anaxagoras</a> described it:</p>
+

+Wrongly do the Greeks suppose that something3</a></sup> begins or ceases to be; for nothing comes into being or is destroyed; but all is an aggregation or secretion of pre-existing things; so that all becoming might more correctly be called becoming mixed, and all corruption, becoming separate.</p>
+</blockquote>
+
That might remember you of the Law of Conservation of Mass, later defined by the chemist Antoine Lavoisier.</p>
+
Just like in the creative process, Nature has always found a way out of its problems by coming up with solutions from pre-existing elements. Even the Planet Earth has transformed from a violent, molten rock to a supporter of life by using what the Universe had already provided!</p>
+
Its process of creation was the same as the human’s creative process for the discovery of fire, the invention of the wheel, shitty and</em> useful startup ideas, the Pink Floyd’s Echoes song, and all quotes in this post: mixing, connecting, combining “stuff”. From the Planet Earth to what you’re reading right now, the laws that ruled their creations were, in essence, the same.</p>
+
^1</sup>
+Steve Jobs. “Steve Jobs: The Next Insanely Great Thing”</a>. WIRED. January 1996.</p>
+</div>
+
^2</sup>
+James H. Wilkinson, “Some Comments from a Numerical Analyst”</a>, 1970. Turing Award</a> lecture, Journal of the ACM</em>. February 1971.</p>
+</div>
+
^{3</sup>
+I’ve deliberately changed “aught”, an archaic English word, to “something” for the sake of readability.</p>
+</div>
+}


Dental Health and Habits
2017-12-21T08:58:09+00:00
Brushing teeth is a good habit. An easy-to-build one, I’d say, thanks to the immediate reward given by the refreshing sensation. After brushing, you feel</em> clean right away.</p>
+
On the other hand, flossing teeth isn’t a habit as easy to build. After flossing, what comes to mind is how dirty your teeth still were even though you just brushed, not how cleaner they became. There’s no such thing as a fresh sensation in your mouth.</p>
+
When you finish brushing your teeth, they’re still dirty – no doubt. However, it’s still gratifying, since you’re fooled by the menthol ability to trigger the cooling sensation. (Hence the human inclination to brushing rather than flossing!?)</em></p>
+In terms of dental health, though, flossing teeth is more effective on cleaning than brushing1</a></sup>, even if it doesn’t feel like it.</strong> There’s no immediate reward in flossing, but definitely a long-term one.</p>
+
What am I trying to say? Apart from dental health advice, that sort of reminds me that we shouldn’t rely on feeling instantaneously compensated as a fuel to build habits. After all, some things just need the long-term to pay off; for we to benefit from them.</p>
+
^1</sup>
+I’ve read that at some point in my life but don’t remember where. You can find some resources out there, such as “What’s More Important: Flossing or Brushing?</a>”. Anyway, I think we’re safe assuming that flossing is, at least, as important</em> as brushing.</p>
+</div>
+


Expressive JavaScript Conditionals (for Humans)
2017-10-30T00:00:00+00:00
Conditionals! As programmers, we write at least one every day. Easy to write, horrible to read, and sometimes it seems as though there’s no way to work around that.</p>
+
Today, I’m happy to share some patterns I’ve learned over time and have spread heavily in code reviews. Let’s rethink conditionals to make the most out of a language’s power of expression – in the case of this article, JavaScript.</p>
+Patterns for Conditionals</h2>
+First, to put you in the mood, a quote from Literate Programming1</a></sup>, by Donald Knuth.</p>
+

+The practitioner of literate programming can be regarded as an essayist, whose main concern is with exposition and excellence of style. Such an author, with thesaurus in hand, chooses the names of variables carefully and explains what each variable means. He or she strives for a program that is comprehensible because its concepts have been introduced in an order that is best for human understanding, using a mixture of formal and informal methods that reinforce each other.</p>
+</blockquote>
+
That sums up the approach for this post: purely aimed at how to write code for people to read</strong>. Performance doesn’t matter now, since 1) that’s not the goal and 2) I don’t believe in premature optimisation.</p>
+
I’ll briefly talk about each pattern, but what’s more important here is to read the code carefully and get something out of it (as if it were poetry or something!).</p>
+1. Variables that hold conditions</h3>
+When your condition is made up of an expression (or many of them), you can store it within meaningful-named variables.</p>
+
Let’s say, to illustrate, that our program holds some data about a fruit and we have to check whether that fruit is a banana. We could do this:</p>
+const </span>fruit </span>= </span>{
+</span>    colors: [</span>"yellow"</span>, </span>"green"</span>],
+</span>    sweet: </span>true</span>,
+</span>}
+</span>
+</span>if </span>(</span>fruit</span>.</span>sweet </span>=== </span>true </span>&& </span>fruit</span>.</span>colors</span>.</span>some</span>((</span>color</span>) </span>=> </span>color </span>=== </span>"yellow"</span>)) {
+</span>    </span>alert</span>(</span>"do your stuff 🍌"</span>)
+</span>    </span>return </span>"is banana"
+</span>}
+</span></code></pre>
+Or we could store our conditions in variables!</p>
+const </span>fruit </span>= </span>{
+</span>    colors: [</span>"yellow"</span>, </span>"green"</span>],
+</span>    sweet: </span>true</span>,
+</span>}
+</span>
+</span>const </span>isSweet </span>= </span>fruit</span>.</span>sweet </span>=== </span>true </span>// or just `fruit.sweet`
+</span>const </span>isYellow </span>= </span>fruit</span>.</span>colors</span>.</span>some</span>((</span>color</span>) </span>=> </span>color </span>=== </span>"yellow"</span>)
+</span>const </span>isBanana </span>= </span>isYellow </span>&& </span>isSweet
+</span>
+</span>if </span>(</span>isBanana</span>) {
+</span>    </span>alert</span>(</span>"do your stuff 🍌"</span>)
+</span>    </span>return </span>"is banana"
+</span>}
+</span></code></pre>
+Not all conditions need to be in a variable. fruit.sweet</code>, for instance, is quite expressive by its own.</p>
+
This way, if we or our workmates need to know what makes a fruit a banana in our program, it’s just a matter of checking out the variable itself. The logic for how conditions evaluate will be there, behind a meaningful name.</p>
+
It’s even more useful for composing and reusing conditions.</p>
+Filtering arrays</h4>
+In the previous example, all variables were conditions based on the fruit</code> object, for didactic purposes. Commonly, though, those variables actually store (pure) functions that take any fruit and test against it. I'm changing that to fit this example.</p>
+
Let’s say we’ve got an array of fruits and we need to filter all the bananas out of it.</p>
+const </span>fruits </span>= </span>[
+</span>    {
+</span>        colors: [</span>"yellow"</span>, </span>"green"</span>],
+</span>        sweet: </span>true</span>,
+</span>    },
+</span>    {
+</span>        colors: [</span>"red"</span>],
+</span>        sweet: </span>false</span>, </span>// don't know what kind of fruit this'd be
+</span>    },
+</span>]
+</span>
+</span>const </span>isSweet </span>= </span>(</span>fruit</span>) </span>=> </span>fruit</span>.</span>sweet </span>=== </span>true
+</span>
+</span>const </span>isYellow </span>= </span>(</span>fruit</span>) </span>=> </span>fruit</span>.</span>colors</span>.</span>some</span>((</span>color</span>) </span>=> </span>color </span>=== </span>"yellow"</span>)
+</span>
+</span>const </span>isBanana </span>= </span>(</span>fruit</span>) </span>=> </span>isSweet</span>(</span>fruit</span>) </span>&& </span>isYellow</span>(</span>fruit</span>)
+</span>
+</span>const </span>bananas </span>= </span>fruits</span>.</span>filter</span>(</span>isBanana</span>)
+</span></code></pre>
+So expressive! I love the way that I can read that last line and even a kid (a non-programmer one!) can understand. (Yes, I’ve tried that.)</em></p>
+
The currying technique would help introduce expressiveness without the verbosity for isBanana</code>. An optional appendix at the end of the article elaborates more on that, if you’re curious.</p>
+
That’s it. Hold on to that one though – it’s the foundation for what’s next.</p>
+2. Define value conditionally</h3>
+Still considering the variables from the example above, this could also be done:</p>
+const </span>myFruit </span>= </span>isYellow </span>&& </span>isSweet </span>&& </span>"banana"
+</span>return </span>myFruit
+</span></code></pre>
+The value for the myFruit</code> variable will only be assigned to “banana” if those conditions are true. Pretty useful for when values are defined conditionally!</p>
+
That saves you from if (isYellow && isSweet) [...]</code>, and it’s quite expressive, I’d say. An expressive expression. 👌</p>
+3. Define value conditionally with fallback</h3>
+</picture>
+xkcd: Conditionals</a></figcaption></figure>
+What if we want something else in case it’s not a banana? Instead of an if (isBanana) [...]</code> with else</code>, go for the ternary operator</a>.</p>
+
const </span>isBanana </span>= </span>isYellow </span>&& </span>isSweet
+</span>const </span>myFruit </span>= </span>isBanana </span>? </span>"is banana" </span>: </span>"is other stuff"
+</span>return </span>myFruit
+</span></code></pre>
+Some additional but important advice I’d give regarding ternary expressions:</p>
+
+Make them as compound as possible.</li>
+
Do NOT nest them. Don’t pretend the nesting is readable – it’s not even human to do that.</li>
+Don’t avoid writing if</code> statements because you want to look smart.</li>
+</ul>
+4. Check for all conditions</h3>
+We’ve (finally) found out that checking for isYellow</code> and isSweet</code> isn’t enough to make sure the fruit is a banana. After all, yellow pepper is both sweet and yellow and it’s still not a banana, right?</p>
+
Right. We then add more checks to the isBanana</code> variable, and this time they’re ugly ones: they check whether the fruit is either from Brazil or Ecuador, both top banana producing countries.</p>
+const </span>fruit </span>= </span>{
+</span>    colors: [</span>"yellow"</span>, </span>"green"</span>],
+</span>    sweet: </span>true</span>,
+</span>    countries: [
+</span>        {
+</span>            name: </span>"Brazil"</span>,
+</span>            topProducer: </span>true</span>, </span>// i'm brazilian and therefore biased
+</span>        },
+</span>        {
+</span>            name: </span>"Ecuador"</span>,
+</span>            topProducer: </span>false</span>,
+</span>        },
+</span>    ],
+</span>}
+</span>
+</span>const </span>isSweet </span>= </span>fruit</span>.</span>sweet </span>=== </span>true </span>// or just `fruit.sweet`
+</span>const </span>isYellow </span>= </span>fruit</span>.</span>colors</span>.</span>some</span>((</span>color</span>) </span>=> </span>color </span>=== </span>"yellow"</span>)
+</span>const </span>isBrazilian </span>= </span>fruit</span>.</span>countries</span>.</span>find</span>((</span>i</span>) </span>=> </span>i</span>.</span>name </span>=== </span>"Brazil"</span>)
+</span>const </span>isEcuadorian </span>= </span>fruit</span>.</span>countries</span>.</span>find</span>((</span>i</span>) </span>=> </span>i</span>.</span>name </span>=== </span>"Ecuador"</span>)
+</span>const </span>isBanana </span>= </span>isYellow </span>&& </span>isSweet </span>&& </span>isBrazilian </span>&& </span>isEcuadorian
+</span>
+</span>if </span>(</span>isBanana</span>) {
+</span>    </span>alert</span>(</span>"do your stuff!11 🍌"</span>)
+</span>    </span>console</span>.</span>log</span>(</span>"now this is really a banana"</span>)
+</span>}
+</span></code></pre>
+Did you see how big isBanana</code> is getting? We’d have to start breaking lines in those &&</code> to improve readability, which, personally, I don’t like doing.</p>
+
If refactoring the booleans into new variables isn’t an option anymore, what about storing the conditions in an array and testing every item for truthiness</em>?</p>
+Use the power of array’s every</code></a>:</p>
+
const </span>isBanana </span>= </span>[</span>isYellow</span>, </span>isSweet</span>, </span>isEcuadorian</span>, </span>isBrazilian</span>]</span>.</span>every</span>(</span>Boolean</span>) </span>// or `x => x === true`
+</span></code></pre>
+Repetitive friendly reminder: don't store every condition in a variable. Remember you can always add the condition itself to the array.</p>
+
You can even turn that into a snippet:</p>
+const </span>all </span>= </span>(</span>arr</span>) </span>=> </span>arr</span>.</span>every</span>(</span>Boolean</span>)
+</span>
+</span>const </span>isBanana </span>= </span>all</span>([</span>isYellow</span>, </span>isSweet</span>, </span>isEcuadorian</span>, </span>isBrazilian</span>])
+</span></code></pre>
+I don’t know how useful that looks for you, but, in everyday work, I really appreciate doing it.</p>
+5. Check for any condition</h3>
+What if we’ve got crazy and we’re fine considering something a banana when it’s either yellow, Brazilian or sweet?</p>
+Use the power of array’s some</code></a>:</p>
+
const </span>isBanana </span>= </span>[</span>isYellow</span>, </span>isSweet</span>, </span>isBrazilian</span>]</span>.</span>some</span>(</span>Boolean</span>) </span>// or `x => x === true`
+</span></code></pre>
+Yeah, yeah, I know, you can just use the OR operator</a>.</p>
+
If any of them evaluates to true, profit! – it’s a banana. 🍌</p>
+
const </span>any </span>= </span>(</span>arr</span>) </span>=> </span>arr</span>.</span>some</span>(</span>Boolean</span>)
+</span>
+</span>const </span>isBanana </span>= </span>any</span>([</span>isYellow</span>, </span>isSweet</span>, </span>isBrazilian</span>])
+</span></code></pre>
+In other words, being a Brazilian means you’re a banana! It doesn’t sound any bad to me honestly.</p>
+Pretty similar to Ramda’s either</code></a>. 😎</p>
+
6. Early return</h3>
+We want something special for when the banana is Brazilian! else</code> conditions would do the trick, wouldn’t they?</p>
+const </span>fruit </span>= </span>{
+</span>    colors: [</span>"yellow"</span>, </span>"green"</span>],
+</span>    sweet: </span>true</span>,
+</span>    countries: [
+</span>        {
+</span>            name: </span>"Brazil"</span>,
+</span>            topProducer: </span>true</span>, </span>// i'm brazilian and therefore biased
+</span>        },
+</span>        {
+</span>            name: </span>"Ecuador"</span>,
+</span>            topProducer: </span>false</span>,
+</span>        },
+</span>    ],
+</span>}
+</span>
+</span>const </span>isSweet </span>= </span>fruit</span>.</span>sweet </span>=== </span>true </span>// or just `fruit.sweet`
+</span>const </span>isYellow </span>= </span>fruit</span>.</span>colors</span>.</span>some</span>((</span>color</span>) </span>=> </span>color </span>=== </span>"yellow"</span>)
+</span>const </span>isBrazilian </span>= </span>fruit</span>.</span>countries</span>.</span>find</span>((</span>i</span>) </span>=> </span>i</span>.</span>name </span>=== </span>"Brazil"</span>)
+</span>const </span>isEcuadorian </span>= </span>fruit</span>.</span>countries</span>.</span>find</span>((</span>i</span>) </span>=> </span>i</span>.</span>name </span>=== </span>"Ecuador"</span>)
+</span>const </span>isBanana </span>= </span>isYellow </span>&& </span>isSweet
+</span>
+</span>if </span>(</span>isBanana </span>&& </span>isBrazilian</span>) {
+</span>    </span>// first true case!
+</span>    </span>alert</span>(</span>"i am a brazilian banana i love football 🍌"</span>)
+</span>} </span>else if </span>(</span>isBanana </span>&& </span>isEcuadorian</span>) {
+</span>    </span>alert</span>(</span>"i am an ecuadorian banana do not mess with me 🍌"</span>)
+</span>} </span>else </span>{
+</span>    </span>alert</span>(</span>"a normal banana from somewhere else"</span>)
+</span>}
+</span></code></pre>
+Alternatively, THOOOUGH, we can early return (nothing at all, i.e. undefined</code>), which will make our code stops its flow at that point</strong>.</p>
+if </span>(</span>isBanana </span>&& </span>isBrazilian</span>) {
+</span>    </span>alert</span>(</span>"i am a brazilian banana i love football 🍌"</span>)
+</span>    </span>return </span>// sTAAAAHP!!!1
+</span>}
+</span>
+</span>if </span>(</span>isBanana </span>&& </span>isEcuadorian</span>) {
+</span>    </span>alert</span>(</span>"i am an ecuadorian banana do not mess with me 🍌"</span>)
+</span>    </span>return </span>// DON'T GO ANY FURTHER, JAVASCRIPT!11
+</span>}
+</span>
+</span>// or do, whatever
+</span>alert</span>(</span>"a normal banana from somewhere else"</span>)
+</span></code></pre>
+Those checks could also be refactored into a variable named isBrazilianBanana</code>. I found it too much for this example though, so this is just a friendly reminder that your conditions can always be composable.</p>
+
Keep in mind that early returns might make the flow of your program confusing. Different from when you’re using else</code> conditions, it’s not explicit that the conditionals are from the same logical group anymore.</p>
+7. Check for the same variable</h3>
+Let’s get the colour of the fruits! Each fruit has one.</p>
+
Hmmm… Different cases that require different handling, but all handled cases depend on the same thing. What do we do? We conditionally check for its value and handle the case depending on that.</p>
+const </span>getFruitColor </span>= </span>(</span>fruit</span>) </span>=> </span>{
+</span>    </span>if </span>(</span>fruit </span>=== </span>"banana"</span>) {
+</span>        </span>return </span>"is yellow"
+</span>    } </span>else if </span>(</span>fruit </span>=== </span>"apple"</span>) {
+</span>        </span>return </span>"is red"
+</span>    } </span>else if </span>(</span>fruit </span>=== </span>"orange"</span>) {
+</span>        </span>return </span>"is orange"
+</span>    }
+</span>}
+</span>
+</span>getFruitColor</span>(</span>"banana"</span>) </span>// => is yellow
+</span></code></pre>
+This code would benefit from early returns, and, of course, the switch</code> statement.</p>
+
Or we don’t. Because, alternatively, we can create a getter function (getFruitColor</code>) that:</p>
+
+inputs a key (fruit</code>), and</li>
+outputs the value that was assigned to that key in a specific map (fruitColors</code>).</li>
+</ol>
+Like this:</p>
+const </span>fruitColors </span>= </span>{
+</span>    banana: </span>'is yellow'
+</span>    </span>apple</span>: </span>'is red'</span>,
+</span>    orange: </span>'is orange'</span>,
+</span>}
+</span>
+</span>const </span>getFruitColor </span>= </span>fruit </span>=> </span>fruitColors</span>[</span>fruit</span>]
+</span>
+</span>getFruitColor</span>(</span>'banana'</span>) </span>// fruitColors['banana'] => is yellow
+</span></code></pre>
+Simplifying, since that map isn’t useful outside of the getter itself anyway:</p>
+const </span>getFruitColor </span>= </span>fruit </span>=> </span>({
+</span>    banana: </span>'is yellow'
+</span>    </span>apple</span>: </span>'is red'</span>,
+</span>    orange: </span>'is orange'</span>,
+</span>}[</span>fruit</span>]
+</span>
+</span>getFruitColor</span>(</span>'banana'</span>) </span>// => is yellow
+</span></code></pre>
+This is a very common technique I first saw on a blog post from Angus Croll</a> in 2010. I love the simplicity of it.</p>
+
Nowadays there’s even more freedom with this technique, considering features such as computed property names for objects</a>. But don’t get too creative with that! Go for what’s more readable and expressive for you AND</strong> the people you work with.</p>
+
Appendix: Currying, because verbosity isn’t expressiveness</h3>
+This is an additional reading and requires familiarity with curried functions. For further reading on the currying technique, I recommend the "Currying" chapter</a> of the book Mostly Adequate Guide to Functional Programming, or A Beginner’s Guide to Currying</a>, as a more beginner-friendly introduction.</p>
+
Let’s reconsider:</p>
+

+the problem from the 1st, where we had an array of fruits and had to create a function that checks whether the fruit passed to it was a banana, and</li>
+the all</code> util from the 4th pattern.</li>
+</ol>
+Check for all conditions, revisited</h4>
+Imagine if we had a lot of conditions for isBanana</code>. We could use &&</code> or even all</code>.</p>
+const </span>isBanana </span>= </span>(</span>fruit</span>) </span>=>
+</span>    </span>isBanana</span>(</span>fruit</span>) </span>&&
+</span>    </span>isSweet</span>(</span>fruit</span>) </span>&&
+</span>    </span>isEcuadorian</span>(</span>fruit</span>) </span>&&
+</span>    </span>isBrazilian</span>(</span>fruit</span>)
+</span>// or
+</span>const </span>isBanana </span>= </span>(</span>fruit</span>) </span>=>
+</span>    </span>all</span>([
+</span>        </span>isYellow</span>(</span>fruit</span>),
+</span>        </span>isSweet</span>(</span>fruit</span>),
+</span>        </span>isEcuadorian</span>(</span>fruit</span>),
+</span>        </span>isBrazilian</span>(</span>fruit</span>),
+</span>    ])
+</span></code></pre>
+It’s meaningful, easy to read, but introduces too much verbosity. The currying technique could help us introduce more meaning without being verbose. With some changes in the all</code> util, that could be boiled down to:</p>
+const </span>isBanana </span>= </span>all</span>([</span>isSweet</span>, </span>isYellow</span>, </span>isEcuadorian</span>, </span>isBrazilian</span>])
+</span>// no explicit fruit here, and still works!
+</span>const </span>bananas </span>= </span>fruits</span>.</span>filter</span>(</span>isBanana</span>)
+</span></code></pre>
+Notice we’re not explicitly passing fruit anymore. How do we do that? By making all</code> a curried function. There are some ways to achieve that, here’s one:</p>
+const </span>all </span>= </span>(</span>conditions</span>) </span>=> </span>(</span>currentItem</span>) </span>=>
+</span>    </span>conditions</span>.</span>map</span>((</span>condition</span>) </span>=> </span>condition</span>(</span>currentItem</span>))</span>.</span>every</span>(</span>Boolean</span>)
+</span></code></pre>
+It takes the array of conditions and returns a function that takes the current item and calls each condition with that (as argument</em>!). At the end, we check whether they all evaluated to true. It’s not magic, it’s CURRYING!!!112</a></sup></p>
+
That’s, of course, a simplistic implementation, which has costed me an array (from map</code>). What’s important to get is how we play with function arguments under the hood</strong> to achieve currying.</p>
+
You can curry your functions using Ramda’s curry</code></a> (or Lodash’s, whatever); or, if you’re interested on that as an util, Ramda’s all</code></a> and its source</a> are really worth-checking!</p>
+
Final considerations</h2>
+By striving for conditionals as expressions other than statements, you write code in a functional</strong> approach. Code with a clearer sense of what it’s being checked without having to unearth to its foundations. Code that’s easier and faster for people to reason about.</p>
+
But if your code is fine with an if</code> rather than an object lookup or a ternary operator, just stick to it.</strong></p>
+
It’d break the whole purpose of this post if those patterns were used for looking smart. However, if refactoring your conditionals with them would lead to a more expressive codebase, go for it! Play with the patterns, compound them</strong>. Use your creativity to communicate well.</p>
+
It’s a language, after all.</p>
+^1</sup>
+A programming paradigm first introduced by Donald Knuth, with the goal of providing an alternative, human, perspective on the programmer’s motivation. Read the article</a>.</p>
+</div>
+
^{2</sup>
+It may seem more magic than currying sometimes.</strong> JavaScript isn’t a purely functional language, so such techniques aren’t as popular as they are in Haskell community, for instance. Simplicity conflicts with easiness here.</p>
+</div>
+}


UI Components that Abstract Mistakes
2017-10-14T18:06:00+00:00
2017, October 14th.</p>
+A cloudy day 1</a></sup> of Autumn in Berlin, probably something else in the place you live, and</em> you’ve read the same date twice and</em> this introduction actually doesn’t matter. But let me tell you about something that matters.</p>
+
Everything is made up of <div></code>s and <span></code>s again, utterly hidden behind abstractions proudly called components. No one seems to remember (or do they?)</em> the difference between p</code> and span</code>, let alone the point of using section</code> rather than div</code>.</p>
+
Bad decisions – to not just to say bad and even invalid HTML markup – are buried in components developers find awesome to compose user interfaces with. The web, and people, pay the price.</p>
+

+Creating components</h2>
+From now on, to explain my point, I'll be assuming some familiarity with React</a> (a JavaScript library), although this applies to any kind of component abstraction.</p>
+
Let’s say you just started a brand new React web app. You need to create a button at some point, and, because it’s reused in other parts of the app, has custom styles and also a fancy icon, you decide to introduce a component with all that abstracted out. Nice! You could do it like this:</p>
+
const </span>Button </span>= </span>({ </span>onClick</span>, </span>children </span>}) </span>=> </span>(
+</span>    </span><</span>span class</span>=</span>"my-horrible-button" </span>onClick</span>=</span>{</span>onClick</span>}</span>>
+</span>        </span><</span>i class</span>=</span>"my-terrible-font-awesome-icon"</span>></span></i>
+</span>        {</span>children</span>}
+</span>    </span></</span>span</span>>
+</span>)
+</span></code></pre>
+The user interface is then composed as the following:</p>
+<</span>h1</span>>Brazilian Bananas (1 kg)</</span>h1</span>>
+</span><</span>p</span>>Sweet and healthy bananas!</</span>p</span>>
+</span><</span>p</span>>Absolutely the best.</</span>p</span>>
+</span><</span>Button </span>onClick</span>={</span>() </span>=> </span>alert</span>(</span>'🍌'</span>)</span>}</span>>Buy $0.99</</span>button</span>>
+</span></code></pre>
+It looks good! You were born for this, weren’t you?</p>
+
Quite easy to miss what’s wrong when components are just used like that. A button, isn’t it? The engineering team can easily grasp what that means and what that does, after all.</p>
+
It could also be a <FormLabel /></code> or <Paragraph /></code> as span</code> elements, or div</code>s all over that place. Although they all work, mistakes are abstracted in components.</p>
+
I specifically talk about markup as the mistake throughout this article, however it could be anything really. Components look inoffensive when you're using them.</p>
+The web isn’t your abstraction</h2>
+Now that HTML is all abstracted through JavaScript libraries and frameworks (which is not wrong), I wonder whether developers only went for semantic elements for the sake of making markup more readable for themselves. With React, your <Header></code> now may be a div</code>. Out of the abstraction, though, you’d think twice before going for a div</code> to make a header – you’d rather use HTML5’s header</code>.</p>
+
Because of the abstraction, output markup isn’t something we talk that much about anymore.</strong></p>
+Did we really get the benefits of HTML5 and why new elements were introduced? Why button</code>? 2</a></sup> What’s header</code> useful for? Why should one use section</code> at all?</p>
+
By the way, do you know how many occurrences of header</code>,  article</code>,  section</code> I've found on Netflix's landing page? Zero.  It's all div soup.</p>
+
Matter of fact is that browser engines and people – nothing less than the ones who you really write code for – won’t ever know about your abstractions. A screen reader won’t know your “button” is actually a button3</a></sup>. (They will definitely get to know the span</code> though, and that won’t help.)</p>
+
</picture>
+xkcd: Tags</a></figcaption></figure>
+Also, it’s never been easier to write invalid markup without even realizing it! After React, it seems acceptable to place a button</code> inside an anchor link, and even giant elephants inside span</code>. Has anyone ever thought why they are considered invalid markup in the first place?</p>
+Don’t make it hard</h2>
+Browsers and assistive technologies are smarter than ever4</a></sup>, indeed, yet they still count on developers to write code they can understand and people can benefit from. By doing so, you make it easy for:</p>
+

+people</strong>, who will be able to navigate around the website, skipping over navigation sections or quickly jumping from one article to another5</a></sup>.</li>
+
yourself</strong>, so you don’t have to reimplement default browser behaviours.</li>
+</ol>
+Therefore, please: don’t waste features that technologies try to give users, and developers, out of the box.</p>
+
Remember who you write code for.</p>
+^{1</sup>
+If I had managed to publish this yesterday, the day would be sunny. I’ve missed the opportunity to make the article seems a little happier.</p>
+</div>
+}^2</sup>
+The button element was first introduced in HTML4. (Source</a>)</p>
+</div>
+
^3</sup>
+What’s wrong with using a non-semantic element as a button? Well, if the button is accessible, nothing really. But doing so demands extra work</a> that nobody is up for, besides that fact that you can’t actually create a button</a>.</p>
+</div>
+
^4</sup>
+Technologies may even process <span class="tel">123-456-7890</span></code> as a telephone, and allow for automatic dialling of it. See microformat</a> for more information.</p>
+</div>
+
^5</sup>
+Why not, right? After all, article</code>s are for independent pieces of content, e.g., an user-submitted comment or a forum post. (Source</a>)</p>
+</div>
+


Tchau
2017-05-13T16:12:00+00:00
de Viamão, Brasil para Berlim, Alemanha. 🇩🇪</p>
+
+– Tu tem que ver o que é pra ti, sabe? Se tu ficar aí, tu provavelmente vai ficar nessa mesma por bastante tempo. É isso que tu quer?</em></p>
+
– Não, meu sonho sempre foi morar fora, do país.</em></p>
+
– O meu também é. Esse é o meu foco, pra sempre. Eu nunca tirei isso da mente.</strong></p>
+</blockquote>
+
A memória parece distante agora, mas não faz muito tempo que eu tive essa conversa. 30 de Março de 2016. Já faz um pouco mais de um ano. Falávamos de indecisões, insatisfações e mudanças, quando sonhos vieram à tona.</p>
+
Sonhos.</strong> Pessoalmente, penso neles como desejos fixos que habitam a nossa consciência junto a outros desejos, mais efêmeros, e que, assim que você os deixa de lado (nem que seja um pouco), inconvenientemente voltam a te atormentar; lembrar que eles ainda estão lá e não são como os outros desejos.</p>
+

+
+Esse é o meu foco, pra sempre. Eu nunca tirei isso da mente.</p>
+</blockquote>
+
Palavras minhas. Confesso, me assustam. Ou melhor, me assustavam. O que me assusta mais agora é o fato de eu ter lido isto em menos de um ano depois:</p>
+
+I’m personally very happy to say that after everything we’ve heard and seen, we think you’re a great match for us and would love for you to join our team here in Berlin.</p>
+</blockquote>
+
([…] Pessoalmente, estou muito feliz de dizer que, depois de tudo que nós ouvimos e vimos, achamos que você tem tudo a ver com a gente e gostaríamos que se juntasse ao nosso time aqui em Berlim!)</em></p>
+
O que seria para sempre o meu foco, o desejo que eu descorri por 30 linhas no meu LG R510 em uma carta de maio de 2012, aquilo que eu nunca havia tirado da mente, naquele momento surgia como uma oportunidade. Eu topei.</p>
+
Foram vários passos antes disso, e eu lembro de estar ansiosa antes de cada um deles. Encontrei pessoas maravilhosas durante o caminho, com um coração tão grande como o meu. Tanto na vida quanto nessa entrevista em particular.</p>
+
Nas entrevistas, o processo simplesmente fluiu. Penso e gosto de pensar que é o que acontece quando os aspectos técnicos são vistos como meros meios necessários para aquilo que realmente importa: criar.</p>
+
Desde aquele momento até hoje, o dia do meu voo, o tempo pareceu nunca passar em alguns momentos, e, em outros, passar rápido demais. Mesmo com a percepção confusa do tempo, tenho certeza de que poder enviar a mensagem abaixo é algo que eu não imaginava para tão cedo.</p>
+

+
Just got the call! […] That’s an important moment of my life for sure. I’m just, you know, happy. Thank you for this.</em></p>
+</p>
+
The call</em>. A ligação se referia a do Consulado Geral da Alemanha de Porto Alegre que recebi no dia 8 de maio, dizendo o que esperei 2 semanas (ou toda a minha vida?) para ouvir. O meu visto estava aprovado.</strong> Ali estava, sem dúvidas, um momento importante da minha vida.</p>
+
Do resto do telefonema, confesso, não lembro muito. Minha maior memória desses instantes foi a de andar com o coração cheio até o centro de Porto Alegre como se fosse a última vez. E foi, pelo menos por um bom tempo.</p>
+

+Um sonho pode, afinal, terminar de 2 maneiras: sendo abandonado ou realizado.</p>
+
Meu caso é o segundo, e, sinceramente, não está fácil acreditar. Se você me disser que a partir de hoje eu já não moro mais onde cresci, que meu voo hoje é só de ida, essa informação será processada de forma que ela não faça sentido na minha realidade. Eu não vou acreditar.</p>
+
Por outro lado, nesse momento da minha vida em que a gratidão transcende o mérito, acredito em várias outras coisas. A principal é que sou o resultado do fenômeno que acontece quando a oportunidade encontra o anseio: alguém, no passado, acreditou em mim; alguém, no presente, acredita em mim. E eu não as deixei decepcionar.</p>
+

+Hoje estou voando para Berlim, a capital da Alemanha, para fazer o que amo na HelloFresh</a>, que me ajudou em todo o processo. Sou grata por isso, por tudo.</p>
+
Quanto à realidade, não é que eu não tenha medo. Eu tenho. Eu tive medo em todas as vezes que ousei. Desde o primeiro emprego que fui atrás no Brasil (no tédio do meu Ensino Médio), dos projetos além do meu conhecimento, até o meu primeiro emprego fora do Brasil… eu tive medo em todos eles.</p>
+
Eu só jamais deixaria o sonho terminar do outro jeito, então eu topei tudo mesmo assim.</p>
+


Choose Life  🇩🇪
2017-05-12T19:15:00+00:00
Choose life. Choose a job. Choose a career. Choose relocation. Choose giving life a fresh</em>1</a></sup> beginning. Choose an one-way flight ticket. Choose fitting your entire life in a 23 kg suitcase. Choose getting rid of all your crap. Choose a higher Human Development Index. Choose being thousands of kilometers far away. Choose devastating your loved ones. Choose different bureaucracies you still don’t understand. Choose calling another place home. Choose not fitting in (you never did anyway!)</em>. Choose saying goodbye to places, food and friends, then choose new places, food, and friends. Choose memories. Choose developing new tastes. Choose being forced to develop social skills. Choose ignorance. Choose mundane and boring activities as exciting adventures. Choose not speaking your mother language. Choose limited self-expression. Choose missing the food from your country, and especially your mum’s. Choose letting part of your heart be elsewhere. Choose adapting 24/7. Choose wondering what the fuck you are doing. And choose getting the answer as soon as you go outside. Choose not understanding jokes from natives. Choose recognising you can do anything, anywhere. Choose not knowing if you should. Choose the bittersweet feeling of moving abroad. Choose to be afraid. Choose your future. Choose life.</p>
+
But why wouldn’t I want to do a thing like that?</p>
+
I chose to choose life. And the reasons? There are no reasons. Who needs reasons when you’ve got Berlin?2</a></sup></p>
+
^1</sup>
+See HelloFresh</a>, which helped me relocating to Berlin.</p>
+</div>
+
^2</sup>
+The entire essay is inspired by Mark Renton’s “Choose Life” speech from Trainspotting</a>, a movie that makes me think a lot about life choices.</p>
+</div>
+


A Minimal Workspace on macOS
2017-05-04T19:45:57+00:00
Ask me for a screenshot of my desktop and all you get is a wallpaper – if I’m using any. Everything else is hidden, unless actually requested by me.</p>
+
That’s the way I work on macOS. The minimal way.</p>
+</video>
+My macOS desktop. This + Spotlight = life. 😎</figcaption></figure>
+In my workspace, there are no desktop items, app icons, time clock, battery percentage, transition delays, distracting animations, dashboards or context menus.</p>
+
Too much information makes it easy for me to get stimulated and then distracted. So I like it minimal.</p>
+
Recipe for the minimal 👌</h2>
+Get rid of everything you can</strong>. Hide. Disable. Assume everything is useless, not useful. (I actually use this approach for life.)</em></p>
+
You’ll get frustrated sometimes, because there are simple things you want so bad to get rid of but then found out it’s impossible unless you hack things. SRLSY GOTTA LOVE APPLE 😍😍😍</p>
+
Well, let’s begin! Follow the steps below and type the commands in a terminal</strong>. If you’re not familiar with a terminal, I’m pretty sure it’s possible to find those settings in “System Preferences” as well.</p>
+
(…But I highly recommend you to open a terminal and start typing around because SRSLY USING A TERMINAL IS LIKE KNOWLEDGE AND POWER 4 UR ENTIRE LIFE!!!!!!!!)</em></p>
+Hide your desktop</h3>
+It’s easier to live without than to live with it. Disable it and it won’t be something you have to clean up anymore!</p>
+defaults</span> write com.apple.finder CreateDesktop</span> -bool</span> false
+</span></code></pre>
+Hide your dock</h3>
+It’ll be only shown when you hover it.</p>
+defaults</span> write com.apple.dock autohide</span> -bool</span> true
+</span></code></pre>
+Other cool things you can do too to keep your dock clean are:</p>
+# Minimize windows into their application's icon
+</span>defaults</span> write com.apple.dock minimize-to-application</span> -bool</span> true
+</span>
+</span># Wipe all (default) app icons from the Dock
+</span>defaults</span> write com.apple.dock persistent-apps</span> -array
+</span></code></pre>
+Because I initialise apps from Spotlight, I really don’t mind not having any app in my dock. Sometimes I ask myself why do I have a dock at all. 🤔</p>
+
And… Launchpad. WHY?????? 😭</p>
+
Hide your menu bar</h3>
+It’ll be only shown when you hover it.</p>
+
defaults</span> write NSGlobalDomain _HIHideMenuBar</span> -bool</span> true
+</span></code></pre>
+I really like this one, but if you feel it's too radical for you, try hiding only menu bar icons with Vanilla</a> (recommended) or Bartender</a>.</p>
+
Disable dashboard</h3>
+Why does it even exist? 😒</p>
+# Disable Dashboard
+</span>defaults</span> write com.apple.dashboard mcx-disabled</span> -bool</span> true
+</span>
+</span># Don't show Dashboard as a Space
+</span>defaults</span> write com.apple.dock dashboard-in-overlay</span> -bool</span> true
+</span></code></pre>
+Disable and/or speed up animations</h3>
+Saving some time because I don’t think those really add anything to my user experience on macOS.</p>
+# Disable window animations and Get Info animations
+</span>defaults</span> write com.apple.finder DisableAllAnimations</span> -bool</span> true
+</span>
+</span># Remove the auto-hiding Dock delay
+</span>defaults</span> write com.apple.dock autohide-delay</span> -float</span> 0
+</span>
+</span># Remove the animation when hiding/showing the Dock
+</span>defaults</span> write com.apple.dock autohide-time-modifier</span> -float</span> 0
+</span>
+</span># Don't animate opening applications from the Dock
+</span>defaults</span> write com.apple.dock launchanim</span> -bool</span> false
+</span>
+</span># Speed up Mission Control animations
+</span>defaults</span> write com.apple.dock expose-animation-duration</span> -float</span> 0.1
+</span></code></pre>
+Finally, restart system stuff:</p>
+killall</span> Finder</span>; </span>killall</span> Dock</span>; </span>killall</span> SystemUIServer
+</span></code></pre>
+And that’s it! 🎉 Life-changing commands for sure. Now just don’t forget cleaning your actual desk too.</p>
+For more on the way I work, my dotfiles</a> are worth-checking!</p>
+
Sorry for using too many emojis. Just shipped this feature here on my blog and I can't help myself! 😬</p>
+


I Travelled to Photographs
2017-04-19T10:13:00+00:00
February was ending.</p>
+
Usually, such thing would mean regular summer days. However, it wasn’t summer or even a regular day – this was something else.</p>
+
February 25th was winter. In that cold afternoon, I ended up into a place I’ll never forget: photographs from my phone’s gallery.</p>
+

+My steps were slow.</p>
+
Red bricks erected the walls of houses built on top of an equally red-bricked avenue.</p>
+
The windows of the houses were made of a wood strategically white-colored to match the brick’s white grouts. With such detail, it was pretty easy to forgive the toughness those bricks carried.</p>
+
Houses ended themselves in grey roofing shingles. The roofs were all hipped. Houses with hip roofs, gotta love them!</em>, I thought to myself. (Imagine the “V” letter upside down on top of a square – that’s a house with a hip roof.)</p>
+
Showing a winter that was already leaving, dark trees with dry twigs were in contrast against a white sky – the whitest I’d ever seen in my life. Damn!</em> The whole picture looked like a painting, while the white sky worked as the canvas board on which all that was drawn.</p>
+
I remember walking and trying to get everything I could, until a freezing wind blew abruptly into my face. It was February, though. From where I come, February meant summer, not freezing winds. Why was February that cold?</p>
+
In an attempt to clear things up, I told myself what I believed that was true: You’re just looking at photographs from your phone’s gallery. There’s no need to get this excited!</em> Ok. So I was home and looking at the “Wallpapers” album I had on my phone.</p>
+
A moment later, I found myself facing a large and wonderful canal, in which someone was solitary paddling a boat to somewhere. What a view.</em></p>
+
Then, self-awareness hit me again: Wait. Isn’t my smartphone in my pocket?</em> How could I be possibly looking at photographs on it?</p>
+
I immediately started touching my entire body in a desperate hunt for my phone. And there it was. In my fucking coat. It wasn’t really possible for me to see photographs on my phone – that shit was in my pocket all the time.</p>
+
Besides, why would I be wearing a coat on summer? And, if I was already wearing a coat, how could I be still cold? How inappropriate were my clothes for that weather? Only a person who sensed that winter solely with the eyes would underestimate its coldness like that!</p>
+
The boat was really leaving through the canal. The view wasn’t photographs. What was all that, then?</p>
+
I got my phone from my pocket, turned off airplane mode, and opened the Maps app. Come on, where am I?</em></p>
+
“Noorder Amstelkanaal”, I read. Wow.</em></p>
+
All of a sudden, February 25th was a cold winter in Amsterdam. My very first one.</p>
+
</picture>
+Someone solitary paddling a boat to somewhere in Noorder Amstelkanaal, an Amsterdam's canal.</figcaption></figure>
+I guess I travelled to photographs.</p>
+


Catalysis
2017-04-13T11:27:00+00:00
As a High School student, I remember always finding Chemistry something between the boring and intriguing. Still, it isn’t hard to find myself wondering about the science concepts I’ve learned at that time.</p>
+
Lately, I’ve been particularly thinking about catalysis</em>.</p>
+

+In Chemistry, catalysis is the acceleration of a reaction due to the participation of a substance – the “catalyst”.</p>
+
The way a catalyst induces a reaction to happen faster is intriguing. Curiously, it neither gives the reaction more energy nor change its environmental conditions. Catalysts have an even better strategy: they lower the amount of energy required</strong> for the reaction to take place.</p>
+
</picture>
+Uncatalyzed reaction (solid) vs. catalyzed reaction (dashed). The highest point is the energy required for the reaction to happen. </figcaption></figure>
+In a catalysed reaction, then, the same product is obtained for less energy. Bringing this concept to our lives is quite thought-provoking.</p>
+
Sometimes it isn’t possible for us to achieve something because it demands more</em> time or energy than what we currently have. To deal with this, we then try looking for them in our lives – which mostly means depriving yourself of things.</p>
+
However, matter of fact is that optimising isn’t always about getting rid of things in your life. If we think of catalysis, we can manage it differently.</p>
+
What if the problem weren’t the lack of energy or time, but that we’re in need of too much</em> of them in order to get things done? Having a catalyst would totally figure it out</strong>. Without something that pushes us forward, we’ll always require more energy for the product we want to get.</p>
+
At this point, you may think your catalyst is your motivation. Motivation is out of our control though – which makes it a goal, not a source. It’s also too ephemeral, and a catalyst mustn’t ever be consumed by an unique reaction, just like in Chemistry. We can’t count on being motivated!</p>
+
So it goes more like what habitual and practical</em> things in life would give you productivity for less. Is it everyday meditation? A partner by your side? Self-confidence? Inspiring weekends without thinking of work at all? Eating healthy? Going out for a walk every day?</p>
+
You have to mind what pushes your forward. Catalysts themselves cannot make a reaction happen that wouldn’t happen on its own, but they sure make it occur under less extreme conditions. It’s an improvement when you’re already motivated.</p>
+
So, what’s your catalyst?</p>
+


Don't Blame it on React or Redux
2017-03-18T13:49:00+00:00
What most people don’t know when they first get into Redux is that, just like React, Redux itself is meant to be simple</strong>. And as seen that simplicity is a goal, both React and Redux won’t</em> and don’t want</em> to tell you how to solve everything.</p>
+
They won’t tell you how to deal with side effects, or what HTTP request library you should use. That’s completely delegated to the JavaScript ecosystem.</p>
+
React and Redux alone don’t do much for really complex web applications.</strong></p>
+
React indirectly delegates state management problems to solutions like Flux. On the other hand, Redux, for instance, delegates dealing with async stuff or even the too-much-boilerplate</em> problem that people complain.</p>
+
But what motivates React and Redux to be that way?</strong> Some reasons I can think of are:</p>
+
+Both libraries are highly focused on their principles, not the built-in stuff. The efficiency of them is on the why</em> and how</em>, not the what</em>.</li>
+
They aim to be a great fit for both simple and</em> large applications, so the “plug-in-play” approach is followed. (A framework wouldn’t ever do everything a programmer needs anyway…)</li>
+Diversity of solutions. Because React and Redux are more like “plug-in-play”, the “plugins” (tools, libraries, middlewares) will evolve by themselves. For instance: axios</a>, a HTTP request library, will evolve in parallel to Redux itself – which certainly make things move forward faster!</li>
+</ul>
+
+If your application’s state is messy, don’t blame it on React. If you find yourself writing too much boilerplate, don’t blame it on Redux. React and Redux don’t really do much</strong>, but this is by design.</p>
+
React is awesome not just because it makes it possible to turn a large and complex application into simple components.</p>
+
Redux is awesome not just because it makes it effortless to deal with and share state throughout an application.</p>
+
They’re also awesome because of their great and diverse ecosystem</strong>. So, when you buy into React or Redux, it’s better for you to buy into their ecosystem too.</p>
+


var that = this? Nah.
2017-03-15T09:00:00+00:00
Tried JavaScript for some minutes? You probably already wrote the following.</p>
+var </span>that </span>= </span>this</span>;
+</span></code></pre>
+(Or one of its variants, such as var self = this</code>.)</p>
+
That’s a pretty common pattern when you found yourself in a situation where:</p>
+
+you have a function nested inside of an object’s method, and</li>
+
you want to access the object’s properties, but</li>
+JavaScript’s this</code> is bound in an unexpected way.</li>
+</ol>
+
+Workarounding unexpected callback scope is one of the main situations where developers write var self = this</code>.</p>
+
Let’s assume a piece of code with a callback function.</p>
+function </span>Requester</span>(</span>data</span>, </span>req</span>) {
+</span>  </span>this</span>.</span>data </span>= </span>data</span>;
+</span>
+</span>  </span>req</span>.</span>done</span>(</span>function </span>() {
+</span>    </span>console</span>.</span>log</span>(</span>this</span>.</span>data); </span>// undefined
+</span>  });
+</span>}
+</span></code></pre>
+You’d expect this.data</code> to be the data</code> argument. Yet, JavaScript tells you that it is actually undefined</code>.</p>
+
So, because Stack Overflow says so, you do the following:</p>
+function </span>Requester</span>(</span>data</span>, </span>req</span>) {
+</span>  </span>this</span>.</span>data </span>= </span>data</span>;
+</span>  </span>var </span>self </span>= </span>this</span>; </span>// NOOOOOoOooo
+</span>
+</span>  </span>req</span>.</span>done</span>(</span>function </span>() {
+</span>    </span>console</span>.</span>log</span>(</span>self</span>.</span>data);
+</span>  });
+</span>}
+</span></code></pre>
+And never stops doing it in your life.</p>
+
Still do it? I’m flattered to tell you that you don’t need that extra variable anymore</strong>.</p>
+Arrow functions</h2>
+Go with arrow functions</a> instead. Besides having a shorter syntax, arrow functions bind to the parent scope by default.</p>
+
The scope that was firstly intuitive to you will work as expected now.</p>
+
function </span>Requester</span>(</span>data</span>, </span>req</span>) {
+</span>  </span>this</span>.</span>data </span>= </span>data</span>;
+</span>
+</span>  </span>req</span>.</span>done</span>(() </span>=> </span>{
+</span>    </span>console</span>.</span>log</span>(</span>this</span>.</span>data); </span>// intuitive as hell!
+</span>  });
+</span>}
+</span></code></pre>
+You can count on them most of the time, but they also have unexpected behaviour in more advanced cases. After all, you're dealing with the `this` keyword. So don't just go around refactoring all anonymous functions into arrow ones and expecting everything to work.</p>
+You may also .bind()</code>!</h2>
+If for some reason (such as no support for IE</a>) you can’t use them, check JavaScript’s bind</code></a>. It’s not as awesome as arrow functions, but does the job.</p>
+
function </span>Requester</span>(</span>data</span>, </span>req</span>) {
+</span>  </span>this</span>.</span>data </span>= </span>data</span>;
+</span>
+</span>  </span>req</span>.</span>done</span>(
+</span>    </span>function </span>() {
+</span>      </span>console</span>.</span>log</span>(</span>this</span>.</span>data);
+</span>    }</span>.</span>bind</span>(</span>this</span>)
+</span>  );
+</span>}
+</span></code></pre>
+


Shared Variables Between JavaScript and CSS
2017-01-15T15:00:00+00:00
Because it assures consistency throughout the project and avoids magic numbers</a>, sharing variables between JavaScript and CSS code may help you to keep your project codebase tidy and easier to reason about.</p>
+

+
For this article, when talking about CSS, the word “variable” may mean custom property</a> or custom media query</a>.</p>
+</p>
+
Getting Started</h2>
+First, create a object</strong> containing your variables and export it.</p>
+
My JS file containing the object will be called variables.js</code>.</p>
+export default </span>{
+</span>  mainColor: </span>"#000"</span>,
+</span>  secondaryColor: </span>"#fff000"</span>,
+</span>  fullHeight: </span>"100vh"</span>,
+</span>};
+</span></code></pre>
+No magic is needed to use those variables in your JS files – just import</code> them when you need it. But in order to communicate those variables to your CSS files and use them with var()</code>, some magic is needed.</p>
+For this, I will be using cssnext</a>, a PostCSS plugin, and injecting that object into our stylesheets as custom properties</strong>.</p>
+
Webpack example:</p>
+
import </span>cssNext </span>from </span>"postcss-cssnext"</span>;
+</span>import </span>myVars </span>from </span>"./variables"</span>;
+</span>
+</span>module</span>.</span>exports </span>= </span>{
+</span>  </span>// Entry, loaders, plugins...
+</span>
+</span>  </span>postcss</span>: () </span>=> </span>[
+</span>    </span>cssNext</span>({
+</span>      features: {
+</span>        customProperties: { variables: </span>myVars </span>},
+</span>      },
+</span>    }),
+</span>  ],
+</span>};
+</span></code></pre>
+
+Since I’m just using postcss-cssnext</a> API, it’s also possible to do it with the build tool of your choice. Check docs on passing options to cssnext features</a>.</p>
+</p>
+
Getting Real-world with Breakpoints</h2>
+Sharing breakpoints between JavaScript and your stylesheets is a great real-world example.</p>
+
It’s time for variables.js</code> to grow then!</p>
+export </span>const </span>properties </span>= </span>{
+</span>  mainColor: </span>"#000"</span>,
+</span>  secondaryColor: </span>"#fff000"</span>,
+</span>  fullHeight: </span>"100vh"</span>,
+</span>};
+</span>
+</span>export </span>const </span>mediaQueries </span>= </span>{
+</span>  secondaryColor: </span>"#fff000"</span>,
+</span>  desktop: </span>"(min-width: 1024px)"</span>,
+</span>  tablet: </span>"(min-width: 768px)"</span>,
+</span>  mobile: </span>"(min-width: 320px)"</span>,
+</span>};
+</span></code></pre>
+Because it’s not possible to create a media query containing a custom property, we need to inject mediaQueries</code> as custom media queries</strong>.</p>
+
Let’s update the previous Webpack example in order to let cssnext to know about both custom media queries and properties.</p>
+import </span>cssNext </span>from </span>"postcss-cssnext"</span>;
+</span>import </span>{ </span>properties</span>, </span>mediaQueries </span>} </span>from </span>"./variables"</span>;
+</span>
+</span>module</span>.</span>exports </span>= </span>{
+</span>  </span>// Entry, loaders, plugins...
+</span>
+</span>  </span>postcss</span>: () </span>=> </span>[
+</span>    </span>cssNext</span>({
+</span>      features: {
+</span>        customProperties: { variables: </span>properties </span>},
+</span>        customMedia: { extensions: </span>mediaQueries </span>},
+</span>      },
+</span>    }),
+</span>  ],
+</span>};
+</span></code></pre>
+Done! Some usage examples for CSS, JS and even React are provided below.</p>
+
Usage</h3>
+CSS Example</h4>
+Using custom properties and custom media queries according to settings from variables.js</code> file.</p>
+.banner </span>{
+</span>  </span>background</span>: </span>red</span>;
+</span>  </span>height</span>: </span>var</span>(</span>--fullHeight</span>); </span>/* Custom property */
+</span>
+</span>  @media (</span>--desktop</span>) {
+</span>    </span>/* Custom media query */
+</span>    </span>width</span>: </span>50</span>%</span>;
+</span>  }
+</span>}
+</span></code></pre>
+JavaScript example</h4>
+
+Example below uses enquire.js</a> library.</p>
+</p>
+
import </span>enquire </span>from </span>"enquire.js"</span>;
+</span>import </span>{ </span>customMedia </span>} </span>from </span>"./variables"</span>;
+</span>
+</span>enquire
+</span>  </span>.</span>register</span>(</span>customMedia</span>.</span>tablet</span>, () </span>=> </span>{
+</span>    </span>console</span>.</span>log</span>(</span>"Matched tablet resolution"</span>);
+</span>  })
+</span>  </span>.</span>register</span>(</span>customMedia</span>.</span>mobile</span>, () </span>=> </span>{
+</span>    </span>console</span>.</span>log</span>(</span>"Matched mobile resolution"</span>);
+</span>  });
+</span></code></pre>
+React example</h4>
+Rendering a component only on desktop resolutions.</p>
+

+Example below uses react-responsive</a> library.</p>
+</p>
+
import </span>MediaQuery </span>from </span>"react-responsive"</span>;
+</span>import </span>{ </span>customMedia </span>} </span>from </span>"./variables"</span>;
+</span>
+</span>function </span>DesktopOnlyComponent</span>() {
+</span>  </span>/* (min-width: 1024px), according to variables.js */
+</span>
+</span>  </span>return </span>(
+</span>    <</span>MediaQuery </span>query</span>={</span>customMedia</span>.</span>desktop</span>}</span>>
+</span>      <</span>p</span>>My desktop-only component!</</span>p</span>>
+</span>    </</span>MediaQuery</span>>
+</span>  );
+</span>}
+</span></code></pre>
+Final Words</h2>
+A non-consistent front-end codebase is just messy.</p>
+
I really use this technique on everyday work, and it’s a cheap way to significantly improve the quality of the front-end codebase.</p>
+
So, don’t underestimate it! Besides breakpoints, there are infinite possibilities for this, such as project colors, layout dimensions and other shared stuff that can easily get out of hand while working on a large project.</p>
+


How to Exclude CSS, Images, Anything from Unit Tests
2016-11-19T09:54:29+00:00

+Your app needs all those require</code>, but your unit tests may not.</p>
+</div>
+
When developing web applications, we deal with assets that our JavaScript tests don’t have to be aware of.</p>
+If using Webpack, which enables different imports in your JavaScript files, you’ve configured loaders</a> that your test runner probably know nothing about. Therefore, that SVG image in your React component and the import</code>ed CSS will both be parsed like JavaScript in your tests. A lot of confusing errors will be thrown, of course.</p>
+
So let’s learn to exclude anything your unit tests, from styles (CSS, Sass), images (PNG, SVG), to other specific imports (like SVG images as React components</a>).</p>
+
Hook your require()</code> calls</h2>
+By intercepting require()</code> calls, you can make your testing framework ignore what you want</strong> to be ignored the way you want</strong> it to be ignored.</p>
+
It’s also useful in isomorphic setups.</p>
+Return an empty module</h3>
+It all comes to returning an empty module for unwanted imports. It looks like this:</p>
+module</span>.</span>exports </span>= </span>""</span>;
+</span></code></pre>
+Jest</h3>
+For Jest, configure moduleNameMapper</a> to return the empty module for specific extensions. Example:</p>
+
"</span>jest</span>"</span>: {
+</span>  </span>"</span>moduleNameMapper</span>"</span>: {
+</span>    </span>"</span>\\</span>.(css|jpg|png)$</span>"</span>: </span>"</span><rootDir>/empty-module.js</span>"
+</span>  }
+</span>}
+</span></code></pre>
+Other testing frameworks</h3>
+require-hacker</a> is an option for hooking require()</code> calls.</p>
+

+
You can also use built-in compilers (like moduleNameMapper in Jest or Mocha compilers</a>), or even only import ignore-styles</a> into your testing framework (which is preconfigured).</p>
+</p>
+
I’ll stick to require-hacker and custom configuration because there’s more flexibility.</p>
+
Get it from npm:</p>
+
npm</span> install require-hacker</span> --save-dev
+</span></code></pre>
+Configure</h4>
+Create a JavaScript file and set custom handlers for specific extensions using require-hacker’s hook()</a> method.</p>
+
Assuming you want to ignore CSS and PNG files, always return an empty module for them:</p>
+
import </span>requireHacker </span>from </span>"require-hacker"</span>;
+</span>requireHacker</span>.</span>hook</span>(</span>"png"</span>, () </span>=> </span>'module.exports = ""'</span>);
+</span>requireHacker</span>.</span>hook</span>(</span>"css"</span>, () </span>=> </span>'module.exports = ""'</span>);
+</span></code></pre>
+
+Because you’re smart, you’ll store all extensions in a variable and forEach</code> them, so there’s no need to repeat yourself. Example</a>.</p>
+</p>
+
Import into your test runner</h4>
+Let your favourite testing framework know about the require</code> hacking! Some examples, assuming a ignore-utils.js</code> file:</p>
+Mocha</h5>
+Add to your mocha.opts</a>, or use the --require</code> flag:</p>
+
mocha</span> --require</span> ./ignore-utils
+</span></code></pre>
+ava</h5>
+Add to your package.json</code>:</p>
+"</span>ava</span>"</span>: {
+</span>  </span>"</span>require</span>"</span>: [
+</span>    </span>"</span>./ignore-utils</span>"
+</span>  ]
+</span>}
+</span></code></pre>
+Now some files will be treated like shit in your JavaScript tests – which is AWESOME!</p>
+Bonus: React null component</h2>
+You don’t need to load that boring SVG icon of a house to test that critical feature in a React component, right?</p>
+Right.</em> In case you’re using svg-inline-loader</a>, which transform your SVG files into React components, you cannot just return an empty module because your test case would be actually expecting a React component. Things will break. Annoying errors will be shown.</p>
+
So, instead of returning an empty module for SVG files, return an empty React component. Let’s set a custom handler for that!</p>
+
Configure</h3>
+
+
This example uses require-hacker. For Jest, export a React null component and set it in moduleNameMapper</code>.</p>
+</p>
+import </span>requireHacker </span>from </span>"require-hacker"</span>;
+</span>
+</span>const </span>reactNullComponent </span>= </span>`
+</span>  require('react').createClass({
+</span>    render() {
+</span>      return null;
+</span>    }
+</span>  })
+</span>`</span>;
+</span>requireHacker</span>.</span>hook</span>(</span>"svg"</span>, () </span>=> </span>`module.exports = ${</span>reactNullComponent</span>}`</span>);
+</span></code></pre>
+Conclusion</h2>
+I’ve spent a lot of time figuring out how to make everything work, because:</p>
+
+At the beginning, it was quite confusing to get what was clearly going on.</li>
+There’s a ton of options out there (Webpack null loaders; ignore-styles</a>, which also provide custom handlers; babel-plugin-transform-require-ignore</a>…).</li>
+
I didn’t want to handle all the ignored extensions the same say.</li>
+</ol>
+Yeah… Sometimes our JavaScript unit tests just know too much.</p>
+


A Bit on Random Numbers in JavaScript
2016-11-15T16:50:00+00:00
Math.random()</code> is a JavaScript function that outputs a random number in the range [0, 1)</code> (from 0 up to 1, but doesn’t include 1). It’s the main source of randomness in JavaScript.</p>
+
Although the output looks random, it’s actually not.</p>
+Behind the Scenes</h2>
+Math.random()</code> uses a pseudo-random number generator</strong> (PRNG). Those algorithms work completely determined by a initial value called “seed”.</p>
+
+Given a seed, the sequence of random numbers is deterministic.</p>
+</blockquote>
+
Every PRNG requires a seed, which generally</em> is the current system time in milliseconds. Yeah, simple as that.</p>
+Speaking of JavaScript language, the PRNG algorithm to deal with the seed is left up to implementors1</a></sup>. The algorithm powering V8’s Math.random()</code> was very poor quality until last year (2015), and implementations between engines were pretty inconsistent.</p>
+
But the scenario has changed. Currently, JavaScript Engines such as SpiderMonkey, V8, Webkit and Chakra all implements Xorshift128+</a> algorithm2</a></sup>, faster than the previous one.</p>
+
Secure Randomness</h2>
+Although randomness was improved in most JavaScript engines, it isn’t trustworthy as seen that standard PRNGs are highly predictable after a certain period. That’s where Web Crypto API shines!</p>
+Web Cryptography API</a> introduces window.crypto.getRandomValues</code>, a cryptographically secure pseudo-random number generator (CSPNG), whose output is impossible or highly improbable to distinguish from a truly random one.</p>
+
Example</h3>
+// Array containing two 32-bit integers
+</span>const </span>arr </span>= new </span>Int32Array(</span>2</span>);
+</span>
+</span>// Override array integers with random values
+</span>const </span>random </span>= </span>crypto</span>.</span>getRandomValues</span>(</span>arr</span>);
+</span>
+</span>for </span>(</span>let </span>i </span>= </span>0</span>; </span>i </span>< </span>random</span>.</span>length; </span>i</span>++</span>) {
+</span>  </span>console</span>.</span>log</span>(</span>random</span>[</span>i</span>]);
+</span>}
+</span></code></pre>
+Of course it comes at a performance cost, so make sure you really need secure random numbers in your program.</a>
+Conclusion</h2>
+If you need apparent randomness–less and speed, you’d probably better off using Math.random()</code>. If you need high-quality randomness, such as in cryptography applications, hashing or statistics, go for a CSPNG such as window.crypto.getRandomValues</code> instead.</p>
+^1</sup>
+See ES2015 spec on Math.random()</code></a>.</p>
+</div>
+
^2</sup>
+Sources: SpiderMonkey</a>, V8</a>, Webkit</a>, Chakra</a>.</p>
+</div>
+


Horizontal and Vertical Align Anything with CSS
2016-11-06T19:10:01+00:00
Using translate()</code> is one of the easiest ways^[Flexbox also provides a great solution. See Solved by Flexbox: Vertical Centering</a>] to instantly horizontal and vertical align any element with CSS without knowing its dimensions.</p>
+
Vertical Align</h2>
+You probably know the “vertical align with just 3 lines of CSS</a>” trick, which uses translateY()</code>.</p>
+
.my-element </span>{
+</span>  </span>position</span>: </span>absolute</span>;
+</span>  </span>top</span>: </span>50</span>%</span>;
+</span>  </span>transform</span>: </span>translateY</span>(</span>-50</span>%</span>);
+</span>}
+</span></code></pre>
+Horizontal Align</h2>
+But did you know it’s also possible to use translate()</code> to horizontal align elements?</p>
+.my-element </span>{
+</span>  </span>position</span>: </span>absolute</span>;
+</span>  </span>left</span>: </span>50</span>%</span>;
+</span>  </span>transform</span>: </span>translateX</span>(</span>-50</span>%</span>);
+</span>}
+</span></code></pre>
+Vertical and Horizontal Align</h2>
+ Mixing both, we can horizontal and vertical align anything!</p>
+.my-element </span>{
+</span>  </span>position</span>: </span>absolute</span>;
+</span>  </span>left</span>: </span>50</span>%</span>;
+</span>  </span>top</span>: </span>50</span>%</span>;
+</span>  </span>transform</span>: </span>translateX</span>(</span>-50</span>%</span>) </span>translateY</span>(</span>-50</span>%</span>);
+</span>}
+</span></code></pre>
+
+See JSBin</a>.</p>
+</p>
+


A Better ES2015+ and JSX Workflow in VS Code
2016-10-30T00:00:00+00:00
Lately I’ve been trying VS Code</a>, a code editor based on Electron</a>. Since then, it really surprised me and it’s been a nice coding experience.</p>
+
But…</h2>
+By default, JS syntax highlighting and ES2015+ and JSX support don’t work as expected.</p>
+
I’ve tried to workaround it by using:</p>
+
+Atom grammar</a>. JSX support was pretty bad.</li>
+
A development branch of VS Code colorization</a>, which is delivered as an extension. Finally got JSX to work properly, but syntax highlighting was still missing something.</li>
+</ol>
+So, no success.</p>
+
Improving your VS Code workflow</h2>
+After much trial and error, I came up with a better JS workflow in VS Code.</p>
+1. Fix JS syntax highlighting</h3>
+Install the Sublime Babel extension</a> and make sure you’re using one of the suggested color themes. (I like Charcoal Oceanic Next</a>!)</p>
+
2. Use “JavaScript React” in .js files</h3>
+VS Code only uses “JavaScript React” syntax in .jsx</code> files. Add the following to your User (or Workspace) Settings:</p>
+"</span>files.associations</span>"</span>: {
+</span>  </span>"</span>*.js</span>"</span>: </span>"</span>javascriptreact</span>"
+</span>}
+</span></code></pre>
+3. Enable Emmet for JSX</h3>
+(That’s a plus!)</p>
+
VS Code uses Emmet by default, but doesn’t enable it for .jsx</code> files. Add the following to your User Settings:</p>
+"</span>emmet.syntaxProfiles</span>"</span>: {
+</span>  </span>"</span>javascript</span>"</span>: </span>"</span>jsx</span>"
+</span>}
+</span></code></pre>
+Let’s improve VS Code!</h2>
+There has been improvements for JS grammar</a> already, but it’s still not perfect.</p>
+
Fortunately, VS Code is an open source project</a></strong> and can be improved by developers like us! Let’s not leave it like this. Give useful feedback and help!</p>
+
Happy coding!</p>
+


I'm Tired of Beautiful-Looking User Interfaces
2016-10-23T12:50:35+00:00

+What if the user interface is more beautiful-looking than usable</strong>, understandable</strong>, and intuitive</strong>?</p>
+</div>
+
The visual aspects of an user interface play an essential role in organising information. Once you’ve got the resources, however, that turns out to be the easiest part of an Interface Design process.</p>
+
Sure we like things that look nice, but looking nice doesn’t compensate a bad product design. Visual communication should not compensate flaws.</strong></p>
+
If you spend most of the time looking for visual inspiration rather than conducting research, doing usability tests, and studying metrics such as business goals and conversion rates, you will probably come up with a interface that only looks beautiful.</p>
+
And I’m tired of beautiful-looking interfaces.</p>
+


Encadeamento de Métodos em JavaScript
2016-08-06T16:11:32+00:00
Popular em diversas bibliotecas JavaScript, o encadeamento de métodos (“method chaining”</em>) é uma técnica usada para invocar diversos métodos em um mesmo objeto.</p>
+
Com o objetivo de melhorar a legibilidade do código</strong>, a técnica é vastamente utilizada na API da jQuery, o que certamente influenciou na popularidade da biblioteca.</p>
+
Se você já utilizou jQuery, o estilo do código abaixo pode ser familiar:</p>
+
$</span>(</span>"#my-element"</span>)
+</span>  </span>.</span>css</span>(</span>"background"</span>, </span>"purple"</span>)
+</span>  </span>.</span>height</span>(</span>100</span>)
+</span>  </span>.</span>animate</span>({ height: </span>250 </span>})
+</span>  </span>.</span>find</span>(</span>"input"</span>)
+</span>  </span>.</span>fadeIn</span>(</span>200</span>)
+</span>  </span>.</span>val</span>(</span>""</span>)
+</span>  </span>.</span>end</span>();
+</span></code></pre>
+
+
No exemplo acima, uma única declaração faz várias coisas. No entanto, uma boa prática com method chaining</em> é fazer somente uma ação por declaração</strong>. ;-)</p>
+</p>
+
Perceba que vários métodos são invocados no objeto $('#my-element')</code>, sem a necessidade de repetí-lo. Já sem Method Chaining</em>, é necessário fazer a referência diversas vezes:</p>
+
const </span>myElement </span>= </span>$</span>(</span>"#my-element"</span>);
+</span>myElement</span>.</span>css</span>(</span>"background"</span>, </span>"purple"</span>);
+</span>myElement</span>.</span>height</span>(</span>100</span>);
+</span>myElement</span>.</span>fadeIn</span>(</span>200</span>);
+</span></code></pre>
+Exemplo</h2>
+Vamos criar um contador Counter</code>:</p>
+
class </span>Counter {
+</span>  </span>constructor</span>() {
+</span>    </span>this</span>.</span>value </span>= </span>0</span>;
+</span>  }
+</span>
+</span>  </span>increase</span>() {
+</span>    </span>this</span>.</span>value </span>+= </span>1</span>;
+</span>  }
+</span>
+</span>  </span>decrease</span>() {
+</span>    </span>this</span>.</span>value </span>-= </span>1</span>;
+</span>  }
+</span>
+</span>  </span>log</span>() {
+</span>    </span>console</span>.</span>log</span>(</span>this</span>.</span>value);
+</span>  }
+</span>}
+</span></code></pre>
+Agora, vamos instanciar um contador e usar seus métodos:</p>
+
const </span>counter </span>= new </span>Counter();
+</span>counter</span>.</span>increase</span>();
+</span>counter</span>.</span>log</span>(); </span>// => 1
+</span>counter</span>.</span>decrease</span>();
+</span>counter</span>.</span>log</span>(); </span>// => 0
+</span></code></pre>
+Perceba que é necessário fazer várias declarações para interagir com a instância, o que prejudica a legibilidade do código.</p>
+
E se tentarmos usar Method Chaining</em>…</p>
+
new </span>Counter()</span>.</span>increase</span>()</span>.</span>log</span>();
+</span>// > TypeError: Cannot read property 'log' of undefined
+</span></code></pre>
+Perceba que log()</code> está sendo executado em new Counter().increase()</code>, que, por sua vez, está retornando undefined</code>. Portanto, ainda não é possível interagir com Counter</code> dessa forma.</p>
+
Como Encadear Métodos</h2>
+Para evitar a repetição do objeto, é necessário que seus métodos retornem o próprio objeto.</p>
+
Veja este exemplo com Promises:</p>
+
getJSON</span>(</span>"users.json"</span>)
+</span>  </span>.</span>then</span>(</span>JSON</span>.</span>parse</span>)
+</span>  </span>.</span>then</span>((</span>response</span>) </span>=> </span>console</span>.</span>log</span>(</span>"Olha o JSON!"</span>, </span>response</span>))
+</span>  </span>.</span>catch</span>((</span>error</span>) </span>=> </span>console</span>.</span>log</span>(</span>"Falhou!"</span>, </span>error</span>));
+</span></code></pre>
+Isso só é possível pois os métodos then()</code> and catch()</code> sempre retornam outras promises. Assim, podemos dizer que as Promises são fluent APIs</strong>, tal como a jQuery.</p>
+
Quem Lembra do this</code>?</h3>
+Para os métodos serem encadeados, será necessário retornar o contexto (this</code>) em cada método.</p>
+

+Em JavaScript, this</code> sempre se refere ao contexto de execução de função.</p>
+</blockquote>
+
No caso de um método, que é uma função de um objeto, refere-se ao próprio objeto.</p>
+
Exemplo com Method Chaining Pattern</em></h4>
+Para implementar o encadeamento de métodos na classe Counter</code>, apenas retornamos seu contexto a cada método:</p>
+
class </span>Counter {
+</span>  </span>constructor</span>() {
+</span>    </span>this</span>.</span>value </span>= </span>0</span>;
+</span>  }
+</span>  </span>increase</span>() {
+</span>    </span>this</span>.</span>value </span>+= </span>1</span>;
+</span>    </span>return </span>this</span>; </span>// Aqui!
+</span>  }
+</span>  </span>decrease</span>() {
+</span>    </span>this</span>.</span>value </span>-= </span>1</span>;
+</span>    </span>return </span>this</span>; </span>// Aqui!
+</span>  }
+</span>  </span>log</span>() {
+</span>    </span>console</span>.</span>log</span>(</span>this</span>.</span>value);
+</span>    </span>return </span>this</span>; </span>// E aqui!
+</span>  }
+</span>}
+</span></code></pre>
+Agora, ao executar new Counter().increase()</code>, o retorno já não será mais undefined</code>.</p>
+
…E, portanto, é possível fazer method chaining</em>!</p>
+
new </span>Counter()
+</span>  </span>.</span>increase</span>()
+</span>  </span>.</span>log</span>() </span>// => 1
+</span>  </span>.</span>decrease</span>()
+</span>  </span>.</span>log</span>(); </span>// => 0
+</span></code></pre>
+Conclusão</h2>
+No universo de APIs orientadas a objetos, o encadeamento de métodos é uma técnica incrível se o seu objetivo é tornar o código mais expressivo e fluente.</p>
+
No geral, fluent APIs</em> são sim interessantes de se entender e implementar, e você pode ter certeza disso analisando o primeiro exemplo com jQuery do início deste artigo. É fantástico! Mas é importante entender que o encadeamento de métodos nem sempre tornará as coisas mais fáceis</strong> (debugar, por exemplo, se torna mais difícil), e, portanto, a maneira aparentemente “mágica” com que elas funcionam não deve ser sempre levada em consideração.</p>
+


SVG Images as React Components with Webpack
2016-08-02T22:00:00+00:00
If you’ve ever tried to load inline SVG (using svg-inline-loader</a>) into React, you know it seriously hurts people’s eyes.</p>
+
import </span>React </span>from </span>"react"</span>;
+</span>import </span>IconRemove </span>from </span>"./icons/remove.svg"</span>;
+</span>const </span>RemoveButton </span>= </span>() </span>=> </span>(
+</span>  <</span>button</span>>
+</span>    <</span>div </span>dangerouslySetInnerHTML</span>={</span>{ __html: </span>IconRemove </span>}</span>} </span>/>
+</span>    <</span>span</span>>Remove</</span>span</span>>
+</span>  </</span>button</span>>
+</span>);
+</span></code></pre>
+So what if it looked like this instead?</p>
+import </span>React </span>from </span>"react"</span>;
+</span>import </span>IconRemove </span>from </span>"./icons/remove.svg"</span>;
+</span>const </span>RemoveButton </span>= </span>() </span>=> </span>(
+</span>  <</span>button</span>>
+</span>    <</span>IconRemove </span>/>
+</span>    <</span>span</span>>Remove</</span>span</span>>
+</span>  </</span>button</span>>
+</span>);
+</span></code></pre>
+Much better, don’t you think?</p>
+That’s what svg-react-loader</a> does. It process your SVG file and returns a React component</strong>, which is compiled with Babel (more on this below).</p>
+
Using the Loader</h2>
+npm</span> install svg-react-loader</span> --save-dev
+</span></code></pre>
+
+Refer to Webpack docs</a> for more information on loaders usage. Also, make sure you have installed svg-react-loader’s dependencies</a>.</p>
+</p>
+
1. In Module Request</h3>
+The simplest method, although the configuration convention is preferred. Using svg-react-loader and babel-loader</a>, import your icon just like:</p>
+
import </span>IconRemove </span>from </span>"babel!svg-react!./icons/remove.svg"</span>;
+</span></code></pre>
+2. In Webpack Config File (Recommended)</h3>
+Add in your Webpack configuration file’s loaders</code> array.</p>
+
{
+</span>  test: </span>/</span>\.</span>svg</span>$</span>/</span>,
+</span>  loader: </span>'babel!svg-react'
+</span>}
+</span></code></pre>
+Import your icon just like:</p>
+
import </span>IconRemove </span>from </span>"./icons/remove.svg"</span>;
+</span></code></pre>
+Usage Examples</h2>
+Loader in module request method (1):</p>
+
import </span>React </span>from </span>"react"</span>;
+</span>import </span>IconRemove </span>from </span>"babel!svg-react!./icons/remove.svg"</span>;
+</span>const </span>RemoveButton </span>= </span>() </span>=> </span>(
+</span>  <</span>button</span>>
+</span>    <</span>IconRemove </span>/>
+</span>    <</span>span</span>>Remove</</span>span</span>>
+</span>  </</span>button</span>>
+</span>);
+</span></code></pre>
+Loader in Webpack config file method (2):</p>
+
import </span>React </span>from </span>"react"</span>;
+</span>import </span>IconRemove </span>from </span>"./icons/remove.svg"</span>;
+</span>const </span>RemoveButton </span>= </span>() </span>=> </span>(
+</span>  <</span>button</span>>
+</span>    <</span>IconRemove </span>/>
+</span>    <</span>span</span>>Remove</</span>span</span>>
+</span>  </</span>button</span>>
+</span>);
+</span></code></pre>
+A Note on SVG Loaders</h2>
+Sometimes, we don’t want all of our SVG files to be loaded as React components. If you use a SVG in a img</code> element, for example, it may lead to conflicts. Fortunately, you can avoid them by being more specific in test</code> regular expression:</p>
+
{
+</span>  test: </span>/</span>\.</span>inline</span>.</span>svg</span>$</span>/</span>,
+</span>  loader: </span>'babel!svg-react'
+</span>},
+</span>{
+</span>  test: </span>/</span>\.</span>jpe</span>?</span>g</span>$|\.</span>gif</span>$|\.</span>png</span>$|^</span>(?!</span>.</span>*\.</span>inline</span>\.</span>svg</span>$</span>)</span>.</span>*\.</span>svg</span>$</span>/</span>,
+</span>  loader: </span>'url'
+</span>}
+</span></code></pre>
+Now, only SVG files ending with .inline.svg</code> will be loaded as React components. You’re good to go!</p>
+


A Cascata das Variáveis do CSS
2016-05-30T22:00:00+00:00
Suporte</a> | Especificação</a></p>
+
Muito embora todos os seres humanos do Planeta Terra tenham odiado sua sintaxe, as variáveis finalmente chegaram ao CSS – e elas são mais poderosas do que você imagina!</p>
+
Motivação</h2>
+O desenvolvimento de grandes aplicações web implica inevitavelmente em grandes folhas de estilo, que devem ser organizadas de forma que facilite a manutenção. Muitos valores definidos para propriedades são repetidos, quando poderiam ser reutilizados e padronizados, de forma compartilhada, pela folha de estilo.</p>
+
Nesse contexto, surgem as variáveis no CSS, também chamadas de Custom Properties</em> – pois, tecnicamente, é isso que elas são.</p>
+Definição</h2>
+As Custom Properties</em> são propriedades CSS customizadas (ou seja, você configura o seu valor) iniciadas com --</code>, de nome case-sensitive</em>, e que são utilizadas no documento através da função var()</code>. Por serem propriedades, é importante compreender que seu comportamento é idêntico ao de uma propriedade qualquer do CSS (guarde essa informação!).</p>
+Exemplo</h3>
+:root {
+</span>  </span>--colorPrimary</span>: </span>purple</span>;
+</span>}
+</span>
+</span>a </span>{
+</span>  </span>color</span>: </span>var</span>(</span>--colorPrimary</span>);
+</span>}
+</span></code></pre>
+(Eu não conheço ninguém que gosta da ideia esplêndida do --</code>. Mas elas não vão deixar de iniciar com --</code> se você reclamar. Inclusive, isso já foi discutido o suficiente</a>.)</p>
+
A função var()</code></h2>
+Quem viabiliza o uso de Custom Properties</em>? Ela:</p>
+var</span>( <</span>custom-property-name</span>> [, <</span>declaration-value</span>> ]? )
+</span></code></pre>
+O primeiro parâmetro é o nome da propriedade, e o segundo, opcional, é o valor a ser usado como fallback</em> caso o primeiro argumento seja inválido (por exemplo: uma variável com 20px</code> sendo usada como valor de um background</code>, ou variável inexistente).</p>
+Escopo</h2>
+Cascata, especificidade, herança… Esses conceitos são muito importantes para entender o poder das variáveis do CSS – e do CSS no geral, eu diria.</p>
+
Aqui, uma das informações mais importantes deste artigo: As Custom Properties</em> seguem regras de cascata</strong> tal como qualquer outra propriedade do CSS.</p>
+
Por isso, quando quisermos que a variável esteja disponível “globalmente” (para todos os seletores), a declaramos no seletor :root</code>, que é o próprio documento HTML. Isso acontece pois o efeito cascata do CSS permite que todos seus descendentes herdem a propriedade.</strong> Legal, né?</p>
+
A propriedade customizada, tal como qualquer outra propriedade, pode ser sobreescrita através de seletores. Seu valor será definido de acordo com a especifidade</strong> deles.</p>
+

+
A implementação de Custom Properties</em> do CSSNext não segue regras de cascata. Apenas variáveis declaradas no :root</code> são válidas. :-(</p>
+</p>
+Exemplo</h3>
+:root {
+</span>  </span>--bgColor</span>: </span>indianred</span>;
+</span>}
+</span>
+</span>div </span>{
+</span>  </span>--bgColor</span>: </span>darkseagreen</span>;
+</span>}
+</span>
+</span>#wow </span>{
+</span>  </span>--bgColor</span>: </span>darkcyan</span>;
+</span>}
+</span>
+</span>* </span>{
+</span>  </span>background-color</span>: </span>var</span>(</span>--bgColor</span>);
+</span>}
+</span></code></pre>
+Nesse caso:</p>
+
+Todos os elementos são vermelhos.</li>
+
Exceto elementos div</code> e seus filhos, que seriam verdes.</li>
+Exceto o elemento com id wow</code> e seus filhos, que seriam ciano.</li>
+</ul>
+As últimas versões do Firefox e Chrome já implementaram as variáveis nativas do CSS. Se estiver utilizando algum desses navegadores, o exemplo abaixo ilustrará o funcionamento do CSS acima.</p>
+JS Bin on jsbin.com</a>
Diéssica Gurskas

Learning vim: From VS Code to neovim (Part 1)

Today I learned</h2> +

Misc(ellaneous)

License & Attribution</h3> + +Pages are statically generated with Zola</a> as engine.</li> +88x31 buttons by The 88x31 GIF Collection</a>.</li> +All my content licensed under CC BY-SA 4.0</a>.</li> +</ul> +Your Privacy</h3> + +No analytics tracking. No cookies.</li> +

Your Privacy</h3> + +No analytics tracking. No cookies.</li> +

We Misunderstand Learning

Fetch a npm package on GitHub without npm install

The Bitter Reality of Ebooks and the Kindle Model

Keep reading</h2> +…on how despite massive technical effort and corporate interest, DRM is a flawed security model.</p> +

Long Time No See

What I've Learned by Simply Journaling

What I’ve Learned</h2> +I'd not assume these stem necessarily from the way I set myself up. Audio or video recordings, traditional diary, and other journal formats are worth exploring and might help just as well.</p> +

References</h2> + +Learn Bullet Journal</a></li> +</ul> +

How to Spy on a React Prop with Jest

Setup for Audio Interface with Guitar Rig 5 on macOS Mojave

OMG Climate: Reflecting Together on the Climate Catastrophe

Awareness in developing countries</h2> +The rich, the poor and the Earth.</p> +

Action points</h3> + +everyone to assure inclusivity, cooperation and engagement across boundaries, first and foremost</strong>.</li> +

I've Sensory-Deprived Myself In a Tank

How I Lock My Bike in Berlin

Working Better with Git for a Clear History

Squash commits when you can</h3> +You need to fix a typo, update a test, or include anything else that should have actually been part of a commit previously introduced. You can create a new commit and later squash it to the initial one with rebase.</p> +

Stash to save your work in progress</h3> +You want to check or change other branch’s files, but don’t want to commit unfinished work either. You can stash your work in progress</strong> (“WIP”):</p> +

Computer and Human Languages

React and Form Management: Is Redux Form Worth It?

Persistence</h3> +Since the state is already in the Redux store, Redux Form is easily pluggable with tools from the ecosystem.</p> +

T. T. T.

Writing Mode in VS Code

My Hacking Adventure in Lithuania

Creativity

Dental Health and Habits

Expressive JavaScript Conditionals (for Humans)

5. Check for any condition</h3> +What if we’ve got crazy and we’re fine considering something a banana when it’s either yellow, Brazilian or sweet?</p> +

Check for all conditions, revisited</h4> +Imagine if we had a lot of conditions for isBanana</code>. We could use &&</code> or even all</code>.</p> +

UI Components that Abstract Mistakes

Tchau

Choose Life 🇩🇪

A Minimal Workspace on macOS

Hide your dock</h3> +It’ll be only shown when you hover it.</p> +

Disable and/or speed up animations</h3> +Saving some time because I don’t think those really add anything to my user experience on macOS.</p> +

I Travelled to Photographs

Catalysis

Don't Blame it on React or Redux

var that = this? Nah.

Shared Variables Between JavaScript and CSS

Usage</h3> +

Your Privacy</h3> +
+
No analytics tracking. No cookies.</li> +
Third-parties usage: Hosted by GitHub Pages</a> behind Cloudflare</a> as CDN.</li> +</ul> +

References</h2> +
+
Learn Bullet Journal</a></li> +</ul> +
