atom.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <title>Diéssica Gurskas</title>
    <subtitle>My home in the internet where I muse about life and computers.</subtitle>
    <link rel="self" type="application/atom+xml" href="/atom.xml"/>
    <link rel="alternate" type="text/html" href="/"/>
    <generator uri="https://www.getzola.org/">Zola</generator>
    <updated>2024-09-29T14:00:15+00:00</updated>
    <id>/atom.xml</id>
    <entry xml:lang="en">
        <title>Learning vim: From VS Code to neovim (Part 1)</title>
        <published>2024-09-29T14:00:15+00:00</published>
        <updated>2024-09-29T14:00:15+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/learning-vim/"/>
        <id>/blog/learning-vim/</id>
        
        <content type="html" xml:base="/blog/learning-vim/">&lt;p&gt;I’ve been a VS Code user for years, but today, I am giving vim (motions &amp;amp; editor) another try.  Why?&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;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+^+{+&#x2F; hell.&lt;&#x2F;li&gt;
&lt;li&gt;neovim’s plugin ecosystem is GOLD for keyboard enthusiasts e.g.  &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;stevearc&#x2F;oil.nvim&quot;&gt;stevearc&#x2F;oil.nvim&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;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?&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p class=&quot;note&quot;&gt;Disclaimer: Not a beginner tutorial. Rather a (hopefully inspiring) diary of my vim journey. But if you&#x27;re curious, I&#x27;ve dropped some learning resources below.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;today-i-learned&quot;&gt;Today I learned&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;which-vim-editor&quot;&gt;which vim editor?&lt;&#x2F;h3&gt;
&lt;p&gt;Many editors support vim motions, including VS Code itself. Technically, I could just &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;vscode&#x2F;comments&#x2F;1enlqx1&#x2F;my_minimal_vscode_setup_heavily_inspired_by_neovim&#x2F;&quot;&gt;make my VS Code more keyboard-centric&lt;&#x2F;a&gt; without switching editors. But right now, I’m exploring &lt;a href=&quot;https:&#x2F;&#x2F;neovim.io&#x2F;&quot;&gt;neovim&lt;&#x2F;a&gt;, 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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;vim-kinda-has-4-modes&quot;&gt;vim kinda has 4 modes&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;insert mode (&lt;code&gt;i&lt;&#x2F;code&gt; key; also other keys, see “the normal mode”): where you type and insert text, just like a traditional text editor.&lt;&#x2F;li&gt;
&lt;li&gt;visual mode (&lt;code&gt;v&lt;&#x2F;code&gt; key): where you select&#x2F;highlight text visually, handy for copying&#x2F;deleting&#x2F;moving.&lt;&#x2F;li&gt;
&lt;li&gt;normal mode (&lt;code&gt;esc&lt;&#x2F;code&gt; key): where you navigate around the file, most of the time and most efficiently. Keys become “motions” and “operators” that move the cursor and act on text (deleting, finding, replacing).&lt;&#x2F;li&gt;
&lt;li&gt;command-line mode (&lt;code&gt;:&lt;&#x2F;code&gt; key): execute commands on vim, mostly editor-related, e.g. saving files, exiting vim.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;the-normal-mode&quot;&gt;the normal mode&lt;&#x2F;h3&gt;
&lt;p&gt;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?).&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;navigating up (k), down (j), left (h), right (k). (Try not to &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Touch_typing&quot;&gt;press l with your pinky finger&lt;&#x2F;a&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;creating new lines under the cursor (o) and above (O)&lt;&#x2F;li&gt;
&lt;li&gt;jumping to next word (w), end of the word (e), or previous word (b)&lt;&#x2F;li&gt;
&lt;li&gt;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&lt;&#x2F;li&gt;
&lt;li&gt;inserting before cursor (i), inserting after cursor (a), insert in the beginning of line (I) or end of line (A)&lt;&#x2F;li&gt;
&lt;li&gt;jumping to beginning of the line (0), end of line ($), or beginning of word (_)&lt;&#x2F;li&gt;
&lt;li&gt;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&lt;&#x2F;li&gt;
&lt;li&gt;searching within a line with f(character), plus next (n) and previous (N) occurrence&lt;&#x2F;li&gt;
&lt;li&gt;undo (u), redo (ctl+r). Pretty damn important, you make mistakes all the time.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;I practiced these commands in roughly that order, moving on once I felt &lt;em&gt;mostly accurate, though still slow&lt;&#x2F;em&gt;. 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 &lt;code&gt;j&lt;&#x2F;code&gt; to move down, could &lt;code&gt;10j&lt;&#x2F;code&gt; jump down 10 lines? Yes (first I tried &lt;code&gt;j10&lt;&#x2F;code&gt; lol). Deleting 3 words backwards? &lt;code&gt;d3b&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;little-vim-config&quot;&gt;little vim config&lt;&#x2F;h3&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;lua&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-lua &quot;&gt;&lt;code class=&quot;language-lua&quot; data-lang=&quot;lua&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;-- ~&#x2F;.config&#x2F;nvim&#x2F;init.lua
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;local &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;o &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;vim&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;opt
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;o&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;number &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;-- Print the line number in front of each line
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;o&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;syntax &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;on&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;-- When this option is set, the syntax with this name is loaded.
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;o&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;mouse &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;a&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;-- Enable the use of the mouse. &amp;quot;a&amp;quot; you can use on all modes
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;o&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;termguicolors &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;(By the way, neovim uses Lua for configuration, if you’re wondering where the good old vimrc went…)&lt;&#x2F;p&gt;
&lt;h2 id=&quot;references-for-slow-digestion-only&quot;&gt;References for SLOW DIGESTION ONLY&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;mhinz&#x2F;vim-galore#first-steps&quot;&gt;Everything you need to know about vim (GitHub)&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;CLI vimtutor (see above), or &lt;a href=&quot;https:&#x2F;&#x2F;openvim.com&#x2F;&quot;&gt;Web interactive vim tutorial&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;quickref.me&#x2F;vim&quot;&gt;QuickRef vim cheatsheet&lt;&#x2F;a&gt; &#x2F; - &lt;a href=&quot;http:&#x2F;&#x2F;www.viemu.com&#x2F;a_vi_vim_graphical_cheat_sheet_tutorial.html&quot;&gt;Graphical vi-vim Cheat Sheet and Tutorial&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=X6AR2RMB5tE&amp;amp;list=PLm323Lc7iSW_wuxqmKx_xxNtJC_hJbQ7R&quot;&gt;“vim as your editor” (YouTube), by ThePrimeagen&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;that-s-all-for-now&quot;&gt;That’s all for now&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;folke&#x2F;zen-mode.nvim&quot;&gt;zen-mode.nvim&lt;&#x2F;a&gt;. Just gotta figure out what is this lazy nvim vs. packer thing.&lt;&#x2F;p&gt;
&lt;p&gt;:wq&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Misc(ellaneous)</title>
        <published>2024-09-20T11:02:00+00:00</published>
        <updated>2024-09-20T11:02:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/misc/"/>
        <id>/misc/</id>
        
        <content type="html" xml:base="/misc/">&lt;h2 id=&quot;open-to-work-dove&quot;&gt;Open to work 🕊️&lt;&#x2F;h2&gt;
&lt;p&gt;Beyond my silly online presence, &lt;strong&gt;I’m a multidisciplinary creative partner in projects&lt;&#x2F;strong&gt; 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&#x2F;UX. Just get in touch :-)&lt;&#x2F;p&gt;
&lt;h2 id=&quot;get-in-touch&quot;&gt;Get in touch&lt;&#x2F;h2&gt;
&lt;p&gt;I’m happy to hear from most humans on most things. Say hi!&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;bsky.app&#x2F;profile&#x2F;diessica.bsky.social&quot;&gt;Bluesky&lt;&#x2F;a&gt; for silly stuff.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href=&quot;https:&#x2F;&#x2F;useplaintext.email&#x2F;&quot;&gt;Plain text email&lt;&#x2F;a&gt;&lt;&#x2F;strong&gt;: &lt;a href=&quot;mailto:hey+blog@diessi.ca&quot;&gt;hey@diessi.ca&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;&lt;a href=&quot;https:&#x2F;&#x2F;signal.org&quot;&gt;Signal&lt;&#x2F;a&gt;&lt;&#x2F;strong&gt; for serious stuff. &lt;strong&gt;⭐ Preferred as it’s encrypted ⭐&lt;&#x2F;strong&gt;
&lt;ul&gt;
&lt;li&gt;Don’t have my Signal? Please email me with your name and your reason to contact me.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;metadata&quot;&gt;Metadata&lt;&#x2F;h2&gt;
&lt;div class=&quot;flex flex-wrap not-prose&quot;&gt;
    &lt;img src=&quot;&#x2F;badges&#x2F;browser.png&quot; width=&quot;80&quot; height=&quot;41&quot; alt=&quot;Viewable with any browser&quot; &#x2F;&gt;
    &lt;!-- &lt;img src=&quot;&#x2F;badges&#x2F;js.png&quot; alt=&quot;JavaScript-free page&quot; &#x2F;&gt; --&gt;
    &lt;img src=&quot;&#x2F;badges&#x2F;screen.gif&quot; width=&quot;80&quot; height=&quot;41&quot; alt=&quot;Best viewed in hi-colors 800x600 screens&quot; &#x2F;&gt;
    &lt;img src=&quot;&#x2F;badges&#x2F;nocookie.png&quot; width=&quot;80&quot; height=&quot;41&quot; alt=&quot;This site is certified 100% cookie-free&quot; &#x2F;&gt;
    &lt;a href=&quot;https:&#x2F;&#x2F;diessi.ca&#x2F;atom.xml&quot;&gt;&lt;img src=&quot;&#x2F;badges&#x2F;rss.gif&quot; width=&quot;80&quot; height=&quot;41&quot;  alt=&quot;Valid RSS&quot; &#x2F;&gt;&lt;&#x2F;a&gt;
    &lt;img src=&quot;&#x2F;badges&#x2F;trapped.gif&quot; width=&quot;80&quot; height=&quot;41&quot; alt=&quot;Trapped inside da web&quot; &#x2F;&gt;
    &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;diessica&#x2F;diessica.github.io&quot;&gt;&lt;img src=&quot;&#x2F;badges&#x2F;github.gif&quot; width=&quot;80&quot; height=&quot;41&quot; alt=&quot;GitHub&quot; &#x2F;&gt;&lt;&#x2F;a&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;en.wiktionary.org&#x2F;wiki&#x2F;IMHO&quot;&gt;IMHO&lt;&#x2F;a&gt;&#x2F;&lt;a href=&quot;https:&#x2F;&#x2F;en.wiktionary.org&#x2F;wiki&#x2F;IMNSHO&quot;&gt;IMNHSO&lt;&#x2F;a&gt; and openness for dialogue.&lt;&#x2F;p&gt;
&lt;p&gt;You may receive my blog updates by subscribing to &lt;a href=&quot;https:&#x2F;&#x2F;diessi.ca&#x2F;atom.xml&quot;&gt;my RSS Feed&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;license-attribution&quot;&gt;License &amp;amp; Attribution&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;Pages are statically generated with &lt;a href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;&quot;&gt;Zola&lt;&#x2F;a&gt; as engine.&lt;&#x2F;li&gt;
&lt;li&gt;88x31 buttons by &lt;a href=&quot;https:&#x2F;&#x2F;cyber.dabamos.de&#x2F;88x31&#x2F;&quot;&gt;The 88x31 GIF Collection&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;All my content licensed under &lt;a href=&quot;https:&#x2F;&#x2F;creativecommons.org&#x2F;licenses&#x2F;by-sa&#x2F;4.0&#x2F;&quot;&gt;CC BY-SA 4.0&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;your-privacy&quot;&gt;Your Privacy&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;No analytics tracking. No cookies.&lt;&#x2F;li&gt;
&lt;li&gt;Third-parties usage: Hosted by &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;diessica&#x2F;diessica.github.io&quot;&gt;GitHub Pages&lt;&#x2F;a&gt; behind &lt;a href=&quot;https:&#x2F;&#x2F;www.cloudflare.com&#x2F;en-gb&#x2F;privacypolicy&#x2F;&quot;&gt;Cloudflare&lt;&#x2F;a&gt; as CDN.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>We Misunderstand Learning</title>
        <published>2024-09-19T13:13:42+00:00</published>
        <updated>2024-09-19T13:13:42+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/we-misunderstand-learning/"/>
        <id>/blog/we-misunderstand-learning/</id>
        
        <content type="html" xml:base="/blog/we-misunderstand-learning/">&lt;p&gt;&lt;em&gt;We misunderstand learning.&lt;&#x2F;em&gt; 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. &lt;em&gt;We misunderstand learning.&lt;&#x2F;em&gt; 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. &lt;em&gt;We misunderstand learning.&lt;&#x2F;em&gt; 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. &lt;em&gt;We misunderstand learning.&lt;&#x2F;em&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Fetch a npm package on GitHub without npm install</title>
        <published>2024-08-25T16:30:00+00:00</published>
        <updated>2024-08-25T16:30:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/fetch-npm-package-without-npm-install/"/>
        <id>/blog/fetch-npm-package-without-npm-install/</id>
        
        <content type="html" xml:base="/blog/fetch-npm-package-without-npm-install/">&lt;p&gt;The other day, a npm package was released broken to a private GitHub registry and it wouldn’t install:&lt;&#x2F;p&gt;
&lt;pre style=&quot;background-color:#282a36;color:#f8f8f2;&quot;&gt;&lt;code&gt;&lt;span&gt;&amp;gt; npm install @company&#x2F;my-package
&lt;&#x2F;span&gt;&lt;span&gt;This error happened while installing the dependencies of @company&#x2F;my-package@0.0.34
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;another-package is not in the npm registry, or you have no permission to fetch it.
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The error message is clear: the released package &lt;code&gt;@company&#x2F;my-package&lt;&#x2F;code&gt; I’m trying to install depends on a package &lt;code&gt;another-package&lt;&#x2F;code&gt; expected to exist in the npm registry somewhere. But &lt;code&gt;another-package&lt;&#x2F;code&gt; is not there. I already knew those packages came from a monorepo, so likely &lt;code&gt;another-package&lt;&#x2F;code&gt; 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 &lt;code&gt;npm install&lt;&#x2F;code&gt; for that. There used to be an option to download npm packages via GitHub UI, but that’s no longer the case.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;finding-the-package-tarball&quot;&gt;Finding the package tarball&lt;&#x2F;h2&gt;
&lt;p&gt;One can read the package’s metadata to find a download URL for the package’s latest version. Here’s how:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;(For private GitHub registries) Grab a &lt;a href=&quot;https:&#x2F;&#x2F;docs.github.com&#x2F;en&#x2F;authentication&#x2F;keeping-your-account-and-data-secure&#x2F;managing-your-personal-access-tokens#creating-a-personal-access-token-classic&quot;&gt;classic GitHub token&lt;&#x2F;a&gt; with &lt;code&gt;packages:read&lt;&#x2F;code&gt; permissions (hereafter &lt;code&gt;{GITHUB_TOKEN}&lt;&#x2F;code&gt;).&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;The URL of a npm package published to GitHub is &lt;code&gt;https:&#x2F;&#x2F;npm.pkg.github.com&#x2F;{PACKAGE_NAME}&lt;&#x2F;code&gt;. Use that to fetch the package metadata, which contains the package tarball URL.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; curl &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;-L&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -H &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Authorization: Bearer {GITHUB_TOKEN}&amp;quot; &amp;quot;https:&#x2F;&#x2F;npm.pkg.github.com&#x2F;@company%2Fmy-package&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;|  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;grep&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -o &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;&amp;quot;tarball&amp;quot;:&amp;quot;[^&amp;quot;]*&amp;quot;&amp;#39;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tarball&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;:&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;https:&#x2F;&#x2F;npm.pkg.github.com&#x2F;download&#x2F;@company&#x2F;my-package&#x2F;0.0.34&#x2F;3d0304f38791214b09ec92a2262ca1697f&amp;quot;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;Download the package using the tarball URL.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt; curl &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;-L&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -H &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Authorization: Bearer {GITHUB_TOKEN}&amp;quot; &amp;quot;https:&#x2F;&#x2F;npm.pkg.github.com&#x2F;download&#x2F;@company&#x2F;my-package&#x2F;0.0.34&#x2F;3d0304f38791214b09ec92a2262ca1697f&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;| &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;tar&lt;&#x2F;span&gt;&lt;span&gt; zx
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That will download the package to your current folder, and you may inspect the package contents now. :-)&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>The Bitter Reality of Ebooks and the Kindle Model</title>
        <published>2023-08-16T13:55:00+00:00</published>
        <updated>2023-08-16T13:55:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/the-bitter-reality-of-ebooks/"/>
        <id>/blog/the-bitter-reality-of-ebooks/</id>
        
        <content type="html" xml:base="/blog/the-bitter-reality-of-ebooks/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;…Until I decided to break up with Amazon, despite its convenience. You know the drill: Amazon &lt;a href=&quot;https:&#x2F;&#x2F;www.theguardian.com&#x2F;technology&#x2F;2020&#x2F;feb&#x2F;05&#x2F;amazon-workers-protest-unsafe-grueling-conditions-warehouse&quot;&gt;exploits workers&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;fairtaxmark.net&#x2F;tax-gap-of-silicon-six-over-100-billion-so-far-this-decade&#x2F;&quot;&gt;aggressively avoids taxes&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;www.bloomberg.com&#x2F;graphics&#x2F;2019-amazon-reach-across-markets&#x2F;&quot;&gt;dominates markets&lt;&#x2F;a&gt;, 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 &lt;em&gt;or legally&lt;&#x2F;em&gt; read books on my Kindle, and without Kindle, I could not legally read books I once purchased on Amazon.&lt;&#x2F;p&gt;
&lt;p&gt;Here’s what I’ve learned while attempting to part ways.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;it-all-begins-with-drm&quot;&gt;It all begins with “DRM”&lt;&#x2F;h2&gt;
&lt;p&gt;Digital Rights Management (“DRM”) might not be a household term, yet its fingerprints are everywhere. &lt;strong&gt;Ever wondered how we consume content via proprietary software, rather than owning the content?&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;em&gt;truly&lt;&#x2F;em&gt; yours.&lt;&#x2F;p&gt;
&lt;p&gt;The use and distribution of the copyrighted content provided by those services (and many others) are restricted by DRM (“&lt;em&gt;Digital Rights Management&lt;&#x2F;em&gt;”) technologies, &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Digital_rights_management#Technologies&quot;&gt;implemented in various ways, increasingly restrictive and controversial&lt;&#x2F;a&gt;. 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:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Sharing&lt;&#x2F;strong&gt;: DRM often limits, or restricts altogether, the ability to share, lend and gift content outside of the same ecosystem.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Portability&lt;&#x2F;strong&gt;: 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p class=&quot;note&quot;&gt;The points above reveal an alarming side-effect: dependency on the ecosystem, or &quot;&lt;b&gt;vendor lock-in&lt;&#x2F;b&gt;&quot;, which is detrimental to individual freedom and market competition. When content is tightly bound to the platform, disengaging becomes challenging. And when you&#x27;re limited to sharing only within an ecosystem, your social circle gets roped in too. Kinda seem like cute digital mutualism until it&#x27;s a toxic relationship you can&#x27;t leave.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Perpetuity&lt;&#x2F;strong&gt;: 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, &lt;a href=&quot;https:&#x2F;&#x2F;www.bbc.com&#x2F;news&#x2F;technology-47810367&quot;&gt;that has already happened&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;www.nytimes.com&#x2F;2009&#x2F;07&#x2F;18&#x2F;technology&#x2F;companies&#x2F;18amazon.html&quot;&gt;more than once&lt;&#x2F;a&gt; or &lt;a href=&quot;https:&#x2F;&#x2F;www.bekkelund.net&#x2F;2012&#x2F;10&#x2F;22&#x2F;outlawed-by-amazon-drm&#x2F;&quot;&gt;twice&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Geographical Restrictions&lt;&#x2F;strong&gt;: 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Offline Access&lt;&#x2F;strong&gt;: DRM often requires &lt;em&gt;online&lt;&#x2F;em&gt; authentication or periodic online checks. Not very nice in low connectivity areas or during travel.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Personal Identification&lt;&#x2F;strong&gt;: DRM requires authentication to consume content. By withholding identifiable information, DRM systems may also monitor behavior and consumption patterns and then profile you. &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Nothing_to_hide_argument&quot;&gt;You’ve got nothing to hide&lt;&#x2F;a&gt;? Well, perhaps it at least bothers you to have to login? &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Straw_man&quot;&gt;(And if that keeps going on we might soon have login on physical books too?! And there will be no refresh token cookie irl?!?????)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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 &lt;em&gt;actively profit&lt;&#x2F;em&gt; through DRM, charging high customer cost while delivering zero customer value.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;leaving-amazon-and-failing&quot;&gt;Leaving Amazon, and failing&lt;&#x2F;h2&gt;
&lt;p&gt;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!!?!&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Secondly, I had no intention of trashing my Kindle. It was a fully functional piece of hardware, and it worked well.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;FuN fACt: &lt;a href=&quot;https:&#x2F;&#x2F;www.bbc.com&#x2F;news&#x2F;technology-19907546&quot;&gt;Kindle sales are not very profitable to Amazon&lt;&#x2F;a&gt;, as they hope to make up for it with e-book and app sales.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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! 😉).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;finally-reading-kindle-terms-of-use&quot;&gt;FINALLY reading Kindle Terms of Use&lt;&#x2F;h3&gt;
&lt;p&gt;The latest &lt;strong&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.amazon.com&#x2F;gp&#x2F;help&#x2F;customer&#x2F;display.html?nodeId=201014950&quot;&gt;Kindle Store Terms of Use&lt;&#x2F;a&gt;&lt;&#x2F;strong&gt; (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:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;ebooks are meant to be consumed only on Kindle, or Kindle apps.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p class=&quot;note&quot;&gt;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), &lt;b&gt;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&lt;&#x2F;b&gt;, and solely for your personal, non-commercial use. [...]&lt;&#x2F;p&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;when you click “Buy Now”&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, you are actually buying a license i.e. renting.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p class=&quot;note&quot;&gt;Kindle Content is licensed, not sold, to you by the Content Provider. [...]&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Within the Kindle ecosystem, you are able to buy &lt;em&gt;individual&lt;&#x2F;em&gt; 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.&lt;&#x2F;p&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;you may not lend or sell your ebooks.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p class=&quot;note&quot;&gt;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 [...]&lt;&#x2F;p&gt;
&lt;ol start=&quot;4&quot;&gt;
&lt;li&gt;your books might disappear anytime.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p class=&quot;note&quot;&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;(Funny enough, I checked &lt;a href=&quot;https:&#x2F;&#x2F;web.archive.org&#x2F;&quot;&gt;Wayback Machine&lt;&#x2F;a&gt; and noticed that one was amended around March 2015, after reports of disappearing ebooks years before. 🤷)&lt;&#x2F;p&gt;
&lt;h3 id=&quot;and-embracing-the-sacrifice&quot;&gt;…And embracing the sacrifice&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Some might argue I &lt;em&gt;actually&lt;&#x2F;em&gt; 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 &lt;em&gt;within systems&lt;&#x2F;em&gt;. There’s an entire environment lying behind the notion of individual choice.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Yeah, a bitter pill to swallow, but a new plan has to emerge out of my anger: to log out of my Amazon account, &lt;strong&gt;and therefore leave books I’ve purchased behind&lt;&#x2F;strong&gt;, and use Kindle only as an e-reader, not a shop.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;leaving-amazon-and-failing-less&quot;&gt;Leaving Amazon, and failing less&lt;&#x2F;h2&gt;
&lt;p&gt;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?&lt;&#x2F;p&gt;
&lt;h3 id=&quot;using-kindle-with-other-bookstores&quot;&gt;Using Kindle with other bookstores&lt;&#x2F;h3&gt;
&lt;p&gt;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. &lt;strong&gt;Only Amazon sells AZW books&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;strong&gt;. So my options are:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;MOBI. But no bookstores sell them these days.&lt;&#x2F;li&gt;
&lt;li&gt;PDF. But formatting sucks for reading books.&lt;&#x2F;li&gt;
&lt;li&gt;PRC. I don’t know what that is.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;So I have no options. \😎&#x2F; Bookstores sell &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;EPUB&quot;&gt;EPUB&lt;&#x2F;a&gt; books, an open standard well supported by all e-readers in the market &lt;strong&gt;but Kindle&lt;&#x2F;strong&gt;. 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 &lt;strong&gt;which is downright illegal LMAOOOOOO&lt;&#x2F;strong&gt;!!!!! This drives me CRAZY, but let’s move on.&lt;&#x2F;p&gt;
&lt;p&gt;For ebook format conversions, Amazon fortunately offers &lt;a href=&quot;https:&#x2F;&#x2F;www.amazon.com&#x2F;gp&#x2F;feature.html?ie=UTF8&amp;docId=1000765261&quot;&gt;Kindle Previewer&lt;&#x2F;a&gt;, a publishing software, but it’s just a little too bloated for my goal. So I went with &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;kovidgoyal&#x2F;calibre&quot;&gt;Calibre&lt;&#x2F;a&gt;, a free and open source e-book manager that does it all. It works wonders!&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;If you keep your Amazon account, importing EPUB into is easier with &lt;a href=&quot;https:&#x2F;&#x2F;www.amazon.com&#x2F;gp&#x2F;sendtokindle&#x2F;email&quot;&gt;Send to Kindle&lt;&#x2F;a&gt;. It&#x27;s a more convenient option but it often messes up with the book formatting.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;em&gt;is&lt;&#x2F;em&gt; an industry standard! &lt;strong&gt;So using a Kindle without Amazon is not just very inconvenient, it’s barely legal.&lt;&#x2F;strong&gt; 😉&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;amazon-caters-for-publishers-not-consumers&quot;&gt;Amazon caters for publishers, not consumers&lt;&#x2F;h2&gt;
&lt;p&gt;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 decline&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;? Obviously publishers would be wary of a similar fate.&lt;&#x2F;p&gt;
&lt;p&gt;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. 👏&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Alternatives like Bandcamp (music) and GOG.com (games) also promote publishers’ content. In contrast, their DRM-free&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#4&quot;&gt;4&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; model ethically caters to both consumers and publishers: the consumer has direct ownership to content, and publishers get their content secured, even earning more&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#5&quot;&gt;5&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;. 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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-words&quot;&gt;Final words&lt;&#x2F;h2&gt;
&lt;p&gt;While writing this, an analogy came to mind.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;keep-reading&quot;&gt;Keep reading&lt;&#x2F;h2&gt;
&lt;p&gt;…on how despite massive technical effort and corporate interest, DRM is a flawed security model.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;wiki.openrightsgroup.org&#x2F;wiki&#x2F;Digital_Rights_Management&quot;&gt;Open Rights Group: Digital Rights Management&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.defectivebydesign.org&#x2F;guide&#x2F;ebooks&quot;&gt;Defective by Design: Guide to DRM-Free Literature&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.defectivebydesign.org&#x2F;faq&quot;&gt;Defective by Design: DRM FAQ&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Comparison_of_e-readers#File_format_support&quot;&gt;Comparison of e-readers: File format support&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;meshedinsights.com&#x2F;2017&#x2F;07&#x2F;09&#x2F;drm-is-toxic-to-culture&#x2F;&quot;&gt;DRM is Toxic to Culture&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;As of 16&#x2F;08&#x2F;2023, Amazon’s checkout button for Kindle ebooks is labeled “Buy Now”.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;s3-us-west-2.amazonaws.com&#x2F;customerdocumentation&#x2F;EM&#x2F;Kindle_User_Guide_EN-US.pdf&quot;&gt;“Kindle User Guide 4th Edition&lt;&#x2F;a&gt;, p. 39&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;3&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;3&lt;&#x2F;sup&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.sowi.uni-stuttgart.de&#x2F;dokumente&#x2F;forschung&#x2F;soi&#x2F;soi_2020_4_Dolata.digital.transformation.music.industry.pdf&quot;&gt;Ulrich Dolata, “The Digital Transformation
of the Music Industry: The Second Decade: From Download to Streaming” (2020)&lt;&#x2F;a&gt;, p. 7&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;4&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;4&lt;&#x2F;sup&gt;
&lt;p&gt;See &lt;a href=&quot;https:&#x2F;&#x2F;get.bandcamp.help&#x2F;hc&#x2F;en-us&#x2F;articles&#x2F;360013673153-Are-Bandcamp-s-download-formats-DRM-free-&quot;&gt;Are Bandcamp’s download formats DRM-free?&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;www.gog.com&#x2F;news&#x2F;bgog_2022_update_2b_our_commitment_to_drmfree_gaming&quot;&gt;GOG 2022 UPDATE #2: OUR COMMITMENT TO DRM-FREE GAMING&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;5&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;5&lt;&#x2F;sup&gt;
&lt;p&gt;In comparison to Spotify, whose profit margin for publishers is often questioned. See &lt;a href=&quot;https:&#x2F;&#x2F;www.nytimes.com&#x2F;2021&#x2F;05&#x2F;07&#x2F;arts&#x2F;music&#x2F;streaming-music-payments.html&quot;&gt;Ben Sinano: Musicians Say Streaming Doesn’t Pay. Can the Industry Change?&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Long Time No See</title>
        <published>2023-06-30T11:19:00+00:00</published>
        <updated>2023-06-30T11:19:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/long-time-no-see/"/>
        <id>/blog/long-time-no-see/</id>
        
        <content type="html" xml:base="/blog/long-time-no-see/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;So, last night, I did what I do best: I embarked on an in-one-sitting endeavor! I migrated this blog to &lt;a href=&quot;https:&#x2F;&#x2F;www.getzola.org&#x2F;documentation&#x2F;getting-started&#x2F;overview&#x2F;&quot;&gt;Zola&lt;&#x2F;a&gt; (a speedy static generator written in Rust), so this WeBpAg3 remains therefore static and snappy af, joining the &lt;a href=&quot;https:&#x2F;&#x2F;512kb.club&#x2F;&quot;&gt;&amp;lt;512 kB club&lt;&#x2F;a&gt;. Letting my creativity flow with &lt;a href=&quot;https:&#x2F;&#x2F;tailwindcss.com&#x2F;&quot;&gt;Tailwind&lt;&#x2F;a&gt;, 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. &lt;em&gt;Pretty thrilling.&lt;&#x2F;em&gt;  As a friend once told me, &lt;strong&gt;good things happen when good things happen&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Long time no see! It all feels quite nice, if you ask me. 😉&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>What I&#x27;ve Learned by Simply Journaling</title>
        <published>2020-04-20T00:10:15+00:00</published>
        <updated>2020-04-20T00:10:15+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/journaling/"/>
        <id>/blog/journaling/</id>
        
        <content type="html" xml:base="/blog/journaling/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Back then, seeing the big picture was unattainable with the stress snowballing and skewing my perspective. Dwelling in my head, paving the way to &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Learned_helplessness&quot;&gt;learned helplessness&lt;&#x2F;a&gt;, I decided to try out journaling.&lt;&#x2F;p&gt;
&lt;p&gt;More than a year later, I can finally say &lt;em&gt;alles gut&lt;&#x2F;em&gt;. 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!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-i-journal&quot;&gt;How I Journal&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;method&quot;&gt;Method&lt;&#x2F;h3&gt;
&lt;p class=&quot;note&quot;&gt;Peek into &lt;a href=&quot;https:&#x2F;&#x2F;bulletjournal.com&#x2F;pages&#x2F;learn&quot;&gt;Bullet Journal official page&lt;&#x2F;a&gt; for an overview, as I won&#x27;t dive into the framework basics.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Index&lt;&#x2F;strong&gt; turned out useful when I added custom collections, as those usually end up scattered across the journal and thus hard to find.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Daily Logs&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Monthly Log&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Future Logs&lt;&#x2F;strong&gt; are useful to migrate tasks or events to upcoming months, for when you don’t get something done but can’t “nevermind” it either.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;As for custom collections, the Bullet Journal ecosystem is huge! I’ve seen stuff of all kinds out there: finance&#x2F;sleep&#x2F;food&#x2F;water trackers, recipes, trip planning, doodles, and whatnot. Yet, these are the ones I always come back to:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Diaries&lt;&#x2F;strong&gt;: longer diary entries or brain dumps without the limitation of bullet points, for when I feel like it.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Habit Trackers&lt;&#x2F;strong&gt;: a simple daily tracker to monitor or develop habits across weeks, e.g. meditation, alcohol intake, call family.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Weekly Logs&lt;&#x2F;strong&gt;: my weekly variation of “Monthly Log”, with upcoming events and small goals for the week. Usually done on Sunday or Monday.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Quarterly Logs&lt;&#x2F;strong&gt;: my quarterly variation of “Monthly Log”, with upcoming events and big goals for the quarter.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Year Retrospective&lt;&#x2F;strong&gt;: 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”.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;pen-paper&quot;&gt;Pen &amp;amp; Paper&lt;&#x2F;h3&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2020&#x2F;bullet-journal.jpg&quot;  alt=&quot;Notebooks on desk. On the left: Camel brown notebook with bear symbol on cover. On the right: Forest green notebook with deer symbol on cover.&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;
My 2019 journal (left) and 2020 journal (right).&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.)&lt;&#x2F;p&gt;
&lt;p&gt;As for pens, I use different colours of a 0.4 mm fineliner.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-i-ve-learned&quot;&gt;What I’ve Learned&lt;&#x2F;h2&gt;
&lt;p class=&quot;note&quot;&gt;I&#x27;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.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Less overwhelm, more time.&lt;&#x2F;strong&gt; 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!&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Emotional awareness.&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Better retainment.&lt;&#x2F;strong&gt; 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!).&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Constant assessment.&lt;&#x2F;strong&gt; 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&#x2F;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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;pitfalls&quot;&gt;Pitfalls&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Perfectionism.&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Habit-building.&lt;&#x2F;strong&gt; 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?&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Procrastination.&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;For pen &amp;amp; paper… &lt;strong&gt;No backup&lt;&#x2F;strong&gt;. 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.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;final-takeaway-takeout-box&quot;&gt;Final Takeaway 🥡&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;references&quot;&gt;References&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;bulletjournal.com&#x2F;pages&#x2F;learn&quot;&gt;Learn Bullet Journal&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>How to Spy on a React Prop with Jest</title>
        <published>2019-10-31T14:15:42+00:00</published>
        <updated>2019-10-31T14:15:42+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/how-to-spy-on-a-prop-with-jest/"/>
        <id>/blog/how-to-spy-on-a-prop-with-jest/</id>
        
        <content type="html" xml:base="/blog/how-to-spy-on-a-prop-with-jest/">&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;jestjs.io&#x2F;&quot;&gt;Jest&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;airbnb.io&#x2F;enzyme&#x2F;&quot;&gt;Enzyme&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;buy &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;jest&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;fn&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;wrapper &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;enzyme&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;shallow&lt;&#x2F;span&gt;&lt;span&gt;(&amp;lt;button onClick={buy}&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Buy&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;wrapper&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;simulate&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;click&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;expect&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;buy&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;toBeCalled&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You may also want to spy on the prop directly, when the component is tested along with a provider passing down its props.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;wrapper &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;enzyme&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;shallow&lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;ClickProvider&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;button&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Buy&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;ClickProvider&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;buy &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;jest&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;spyOn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;wrapper&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;instance&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;props&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;onClick&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;wrapper&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;simulate&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;click&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;expect&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;buy&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;toBeCalled&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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 &lt;code&gt;wrapper.instance()&lt;&#x2F;code&gt;).&lt;&#x2F;p&gt;
&lt;p&gt;That’s all. Just posting it here cuz I couldn’t find it easily anywhere else.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Setup for Audio Interface with Guitar Rig 5 on macOS Mojave</title>
        <published>2019-08-18T22:19:05+00:00</published>
        <updated>2019-08-18T22:19:05+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/guitar-rig-macos-mojave-setup/"/>
        <id>/blog/guitar-rig-macos-mojave-setup/</id>
        
        <content type="html" xml:base="/blog/guitar-rig-macos-mojave-setup/">&lt;p&gt;Setting up &lt;a href=&quot;https:&#x2F;&#x2F;www.native-instruments.com&#x2F;en&#x2F;products&#x2F;komplete&#x2F;guitar&#x2F;guitar-rig-5-pro&#x2F;&quot;&gt;Guitar Rig 5&lt;&#x2F;a&gt; on macOS Mojave seems not to be straightforward.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;and output&lt;&#x2F;strong&gt; device on Guitar Rig, I had to set up an “aggregate device”.&lt;&#x2F;p&gt;
&lt;p&gt;This how you can do it too.&lt;&#x2F;p&gt;
&lt;p&gt;(My specs, just so you know:)&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;macOS&lt;&#x2F;span&gt;&lt;span&gt; Mojave Version 10.10.14
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Guitar&lt;&#x2F;span&gt;&lt;span&gt; Rig Pro 5.2.2
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Audio&lt;&#x2F;span&gt;&lt;span&gt; Interface Steinberg UR22mkII
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;audio-midi-setup&quot;&gt;Audio MIDI setup&lt;&#x2F;h2&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Open “Audio MIDI setup” in your Mac. (It’s a tiny secret sound manager shipped along with the system, you’ll find it.)&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;At the very bottom of the app, there is a small + (“plus”) button wherein you should select &lt;em&gt;“Create an aggregate device”&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;li&gt;
&lt;p&gt;Set up your “aggregate device” with your 1) audio inteface and 2) speakers&#x2F;headphones&#x2F;whatever – which should be all shown up there, given the setup is correct. Remember to give your device a remarkable name – I suggest &lt;em&gt;FUCK COMPUTERS AND AUDIO&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;guitar-rig-macos-mojave-setup&#x2F;audio-midi-setup.png&quot;  alt=&quot;Audio MIDI Setup app open showing audio device with both devices&#x27;&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;My custom device in Audio MIDI Setup on macOS.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;ol start=&quot;4&quot;&gt;
&lt;li&gt;Go back to Guitar Rig. In the context menu “File”, go to &lt;em&gt;“Audio and MIDI Settings”&lt;&#x2F;em&gt;. In the “Audio” tab, select your aggregate device as the &lt;strong&gt;device&lt;&#x2F;strong&gt;, instead of only the audio interface as you were doing before; then configure input&#x2F;output as expected in the “Routing” tab.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Should work! If it doesn’t, &lt;a href=&quot;https:&#x2F;&#x2F;support.native-instruments.com&#x2F;hc&#x2F;en-us&#x2F;articles&#x2F;210275885-I-Cannot-Get-Any-Sound-Output-from-GUITAR-RIG-5&quot;&gt;this guide by Native Instruments on how to troubleshoot audio&lt;&#x2F;a&gt; 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 &lt;a href=&quot;http:&#x2F;&#x2F;www.asio4all.org&#x2F;&quot;&gt;ASIO4ALL&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;guitar-rig-macos-mojave-setup&#x2F;guitar-rig.png&quot;  alt=&quot;Guitar Rig app showing its custom amps&quot;&gt;
&lt;p&gt;If it still doesn’t work, I am sorry and prolly have no idea. Have fun.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>OMG Climate: Reflecting Together on the Climate Catastrophe</title>
        <published>2019-05-30T11:39:14+00:00</published>
        <updated>2019-05-30T11:39:14+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/omg-climate/"/>
        <id>/blog/omg-climate/</id>
        
        <content type="html" xml:base="/blog/omg-climate/">&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;omg-climate&#x2F;global-warming-nasa.gif&quot; alt=&quot;NASA&#x27;s illustration of Planet Earth warming process across the years&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Credits: NASA’s Scientific Visualization Studio&#x2F;Kathryn Mersmann.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;Planet Earth, May 2019. &lt;a href=&quot;https:&#x2F;&#x2F;www.weforum.org&#x2F;agenda&#x2F;2019&#x2F;05&#x2F;the-uk-just-became-the-first-country-in-the-world-to-declare-a-state-of-emergency-on-climate-change&quot;&gt;The UK has announced a state of emergency for climate change&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;globalnews.ca&#x2F;news&#x2F;5280082&#x2F;what-is-a-climate-emergency-canada&#x2F;&quot;&gt;Canada considers the same&lt;&#x2F;a&gt;; we are &lt;a href=&quot;https:&#x2F;&#x2F;agupubs.onlinelibrary.wiley.com&#x2F;doi&#x2F;10.1029&#x2F;2018JD029522&quot;&gt;more confident about our model to capture rising global temperatures&lt;&#x2F;a&gt;, and &lt;a href=&quot;https:&#x2F;&#x2F;www.theguardian.com&#x2F;environment&#x2F;gallery&#x2F;2019&#x2F;may&#x2F;24&#x2F;student-climate-strikes-around-the-world&quot;&gt;students all around the world walk out of school protesting the lack of climate action&lt;&#x2F;a&gt;. Yet, not enough of us are genuinely concerned about the role we’ve played on this catastrophe.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;pitching-and-picking-topics-for-discussion&quot;&gt;Pitching and picking topics for discussion&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;strong&gt;OMG Climate&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;These were the tracks of the first OMG Climate:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Track 1&lt;&#x2F;strong&gt;: “Low-carbon travel” &#x2F; “Green Mafia” &#x2F; “How do you sleep at night? Coping with climate anxiety”&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Track 2&lt;&#x2F;strong&gt;: “Tech tools for political action” &#x2F; “Circular economies: Re-use and tech” &#x2F; “Company sustainability policy template”&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Track 3&lt;&#x2F;strong&gt;: “Solarpunk, imagination and excitement” &#x2F; “CO2 Offsets as an API and tracking carbon” &#x2F; “Climate change awareness in developing countries”&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;omg-climate&#x2F;discussion.jpg&quot; alt=&quot;People sitting in a circle, listening attentively to one&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;During the &quot;Green Mafia&quot; discussion.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;The following notes don&#x27;t reflect directly what&#x27;s happened or everything that&#x27;s been said in the event, it&#x27;s rather my personal perspective. They are also somewhat vague, but I hope you can benefit from them somehow.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;low-carbon-travel&quot;&gt;Low-carbon travel&lt;&#x2F;h2&gt;
&lt;p&gt;Air travel, even when occasional, has an &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Environmental_impact_of_aviation#Climate_change&quot;&gt;environmental impact&lt;&#x2F;a&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;With low airplane ticket prices getting more popular than ever and enabling people to travel more, how can we make traveling sustainable when &lt;em&gt;not traveling to begin with&lt;&#x2F;em&gt; is not an option? That was the question we kicked off the “low-carbon travel” discussion with.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;meeting-notes&quot;&gt;Meeting notes&lt;&#x2F;h3&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;omg-climate&#x2F;low-carbon.jpg&quot; alt=&quot;Piece of paper sticked to the wall with sketches&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Collective sketch notes about the low-carbon travel track&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;ul&gt;
&lt;li&gt;In our circle, everyone seemed to have access to the privilege that is air flying.&lt;&#x2F;li&gt;
&lt;li&gt;We began exploring traveling by breaking it down into traveling for work vs. pleasure.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Ground travel&lt;&#x2F;strong&gt; 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?&lt;&#x2F;li&gt;
&lt;li&gt;Instead of seeing longer trips as wasted time, we should begin seeing the journey as part of the trip.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Traveling less&lt;&#x2F;strong&gt;: 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.&lt;&#x2F;li&gt;
&lt;li&gt;Share practical solutions for people to make trade-offs, &lt;a href=&quot;http:&#x2F;&#x2F;ecocostsvalue.com&#x2F;&quot;&gt;&lt;strong&gt;EcoCost&lt;&#x2F;strong&gt;&lt;&#x2F;a&gt; rather than overwhelming scientific evidence.&lt;&#x2F;li&gt;
&lt;li&gt;What if companies supported employees whose carbon footprint is the least?&lt;&#x2F;li&gt;
&lt;li&gt;Green travel agencies and flying policies.&lt;&#x2F;li&gt;
&lt;li&gt;Search engines for flights obviously don’t suggest alternative ways to get to a place when a plane is definitely not the best option.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;bvg.de&quot;&gt;BVG&lt;&#x2F;a&gt; app, on the other hand, recommends walking instead of taking public transport sometimes.&lt;&#x2F;li&gt;
&lt;li&gt;Transport apps could also order route options by the least environmental impact.&lt;&#x2F;li&gt;
&lt;li&gt;The car industry should be ashamed of its climate record.&lt;&#x2F;li&gt;
&lt;li&gt;The train industry is not modernised and integrated, rather rigid.&lt;&#x2F;li&gt;
&lt;li&gt;Investment on 10 km of autobahn could pay off the renovation for bike lanes all over Berlin.&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;Business trips by train are possible only among those who have the privilege of a flexible work schedule, such as freelancers.&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;“Fast-moving home&#x2F;office” as an alternative to turn the journey time into productive time.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;Frequent flyer levy&lt;&#x2F;strong&gt;: A fairer tax system according to how often people fly. Those that fly more should pay more. (More information: &lt;a href=&quot;http:&#x2F;&#x2F;afreeride.org&#x2F;&quot;&gt;A Free Ride&lt;&#x2F;a&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;action-points&quot;&gt;Action points&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;everyone to shift mindsets in regard to traveling.&lt;&#x2F;li&gt;
&lt;li&gt;everyone to vote instead of buying a bamboo toothbrush.&lt;&#x2F;li&gt;
&lt;li&gt;everyone to use and promote tools with different options of transport within a route, instead of blindly going to specific train or flight websites.&lt;&#x2F;li&gt;
&lt;li&gt;everyone to keep consuming local goods.&lt;&#x2F;li&gt;
&lt;li&gt;airline companies to stop promoting flying as a status symbol.&lt;&#x2F;li&gt;
&lt;li&gt;travel agencies to work out more sustainable ways to travel and consider it in their branding.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;green-mafia&quot;&gt;Green Mafia&lt;&#x2F;h2&gt;
&lt;p&gt;How corporate interests and ideologues work to undermine science and make countries doubt about the risks of climate change? Think &lt;a href=&quot;https:&#x2F;&#x2F;www.theguardian.com&#x2F;environment&#x2F;planet-oz&#x2F;2015&#x2F;aug&#x2F;06&#x2F;how-australians-were-ready-to-act-on-climate-science-25-years-ago-and-what-happened-next&quot;&gt;what stopped Australia, 25 years ago, to act on climate change&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;Green Mafia&lt;&#x2F;strong&gt;. An intriguing and fun topic!&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;meeting-notes-1&quot;&gt;Meeting notes&lt;&#x2F;h3&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;omg-climate&#x2F;green-mafia.jpg&quot; alt=&quot;Piece of paper sticked to the wall with sketches&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Collective sketch notes about the Green Mafia track&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;How far should one go with non-ethical practices, such as blackmailing or public shaming of those who harm the planet?&lt;&#x2F;li&gt;
&lt;li&gt;What’s ethics after all?&lt;&#x2F;li&gt;
&lt;li&gt;Could we use illegal money to fund our causes?&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;What if we made the green cause as profitable for the mafia as oil?&lt;&#x2F;li&gt;
&lt;li&gt;Sell a belief system, or use an existing one such as “harmony with nature”.&lt;&#x2F;li&gt;
&lt;li&gt;Cyber hacking&#x2F;hijacking internet algorithms to spread awareness instead of climate change denial and fake news as it happens today.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;awareness-in-developing-countries&quot;&gt;Awareness in developing countries&lt;&#x2F;h2&gt;
&lt;p&gt;The rich, the poor and the Earth.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.theguardian.com&#x2F;environment&#x2F;2015&#x2F;dec&#x2F;02&#x2F;worlds-richest-10-produce-half-of-global-carbon-emissions-says-oxfam&quot;&gt;World’s richest 10% produce half of the global carbon emissions, while the poorest half contribute a mere 10%&lt;&#x2F;a&gt;; but climate change affects the poorest people the most. Moreover, developing countries are the most responsible for climate change now, and vulnerable too.&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;meeting-notes-2&quot;&gt;Meeting notes&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;We are &lt;strong&gt;building awareness&lt;&#x2F;strong&gt;, not “teaching” others about climate change.&lt;&#x2F;li&gt;
&lt;li&gt;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?&lt;&#x2F;li&gt;
&lt;li&gt;How do we let them know about the risk of massive displacements of people who have no resources whatsoever to move?&lt;&#x2F;li&gt;
&lt;li&gt;Just by existing in a developed country in Europe, our carbon footprint is more impactful than any developing country.&lt;&#x2F;li&gt;
&lt;li&gt;Indigenous people are already defenders and protectors of the environment more than we will ever be in our generation.&lt;&#x2F;li&gt;
&lt;li&gt;Economic development is a priority in developing countries, and politicians may ignore environmental impact for the sake of it. (See &lt;a href=&quot;https:&#x2F;&#x2F;www.climatechangenews.com&#x2F;2019&#x2F;01&#x2F;22&#x2F;brazils-natural-resources-open-business-bolsonaro-says&#x2F;&quot;&gt;Brazil’s natural resources open for business, says Bolsonaro&lt;&#x2F;a&gt;)&lt;&#x2F;li&gt;
&lt;li&gt;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”.&lt;&#x2F;li&gt;
&lt;li&gt;What about a model of development thats puts together the simple living of developing countries with the green development of developed ones?&lt;&#x2F;li&gt;
&lt;li&gt;How waste affects developing countries; example of &lt;a href=&quot;https:&#x2F;&#x2F;www.bangkokpost.com&#x2F;news&#x2F;world&#x2F;1666380&#x2F;philippines-duterte-says-to-sail-garbage-back-to-canada&quot;&gt;Philippines to sail garbage back to Canada&lt;&#x2F;a&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;The &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Swadeshi_movement&quot;&gt;Swadeshi movement&lt;&#x2F;a&gt; brought back self-manufactured clothing in India to boycott foreign goods, a part of a movement to liberate India from British control and industrialisation.&lt;&#x2F;li&gt;
&lt;li&gt;When teaching, consider what’s in people’s context, reach and language instead of what’s “out there”.&lt;&#x2F;li&gt;
&lt;li&gt;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.&lt;&#x2F;li&gt;
&lt;li&gt;This is a problem not to be approached by technology, remotely. It’s rather about Politics and Education.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;action-points-1&quot;&gt;Action points&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;everyone to assure inclusivity, cooperation and engagement across boundaries, &lt;strong&gt;first and foremost&lt;&#x2F;strong&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;countries to keep cooperating efforts &lt;em&gt;internationally&lt;&#x2F;em&gt; through policies, institutional frameworks for development and investments in infrastructure.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;Well-led communities that strive for welcoming environments enable the best out of people. OMG Climate has shown that – its &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Unconference&quot;&gt;unconference format&lt;&#x2F;a&gt; got everyone to take responsibility and engage towards constructive and meaningful discussions about climate change.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2019&#x2F;omg-climate&#x2F;presentation.jpg&quot; alt=&quot;Participant presenting using microphone, all sketch notes of the unconference sticked to the wall, on background&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Final presentations wrapping up the tracks.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;learn-about-climate-change&quot;&gt;Learn about Climate Change&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Reddit: &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;climatechange&#x2F;&quot;&gt;&#x2F;r&#x2F;climatechange&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;globalwarming&#x2F;&quot;&gt;&#x2F;r&#x2F;globalwarming&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.theguardian.com&#x2F;environment&#x2F;climate-change&quot;&gt;The Guardian on Climate Change&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ourworldindata.org&#x2F;co2-by-income-region&quot;&gt;Global inequalities in CO₂ emissions&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;anildash.com&#x2F;2018&#x2F;10&#x2F;03&#x2F;were-still-not-being-alarmist-enough-about-climate-change&#x2F;&quot;&gt;We’re (still) not being alarmist enough about climate change&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;more-on-omg-climate&quot;&gt;More on OMG Climate&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;ti.to&#x2F;omg&#x2F;climate&#x2F;&quot;&gt;OMG Climate Event page&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;omg-climate&quot;&gt;OMG Climate Medium website&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;search?q=%23omgclimate&amp;amp;src=typed_query&quot;&gt;#OMGCLIMATE on Twitter&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;climateaction.tech&#x2F;&quot;&gt;ClimateAction.tech&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.cgdev.org&#x2F;blog&#x2F;climate-change-and-development-three-charts&quot;&gt;Climate Change and Development in Three Charts&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>I&#x27;ve Sensory-Deprived Myself In a Tank</title>
        <published>2018-12-02T08:01:00+00:00</published>
        <updated>2018-12-02T08:01:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/isolation-tank/"/>
        <id>/blog/isolation-tank/</id>
        
        <content type="html" xml:base="/blog/isolation-tank/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;A while ago, a friend told me about his sensory-deprivation experience in some kind of pool, the so-called &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Isolation_tank&quot;&gt;&lt;em&gt;Isolation Tank&lt;&#x2F;em&gt;&lt;&#x2F;a&gt;. 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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;getting-in&quot;&gt;Getting In&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;em&gt;something else&lt;&#x2F;em&gt;. 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.&lt;&#x2F;p&gt;
&lt;p&gt;The mind just plays a lot of games on you all the time. It tricked me into being &lt;em&gt;physically&lt;&#x2F;em&gt; irritated by the water, its salt, that bogus zero-gravity environment, and that I’d be better off giving up &lt;em&gt;for my own survival&lt;&#x2F;em&gt;  – 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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;I wanted to come back down to Earth from wherever I was, and, surprisingly, &lt;strong&gt;to be myself&lt;&#x2F;strong&gt; – the way I was. Then time was up.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;getting-out&quot;&gt;Getting Out&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;em&gt;right down through&lt;&#x2F;em&gt;. Read a book and couldn’t make sense of why we humans have ever brought up speed reading techniques in the first place.&lt;&#x2F;p&gt;
&lt;p&gt;Stepping out of the spa, I got savagely welcomed by a gloomy afternoon&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;“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. […]&lt;&#x2F;em&gt;&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;p&gt;I had finally my mind drifted towards just as much of the world as it was going on.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;lessons-learned&quot;&gt;Lessons Learned&lt;&#x2F;h2&gt;
&lt;p&gt;My poetic mood didn’t last much – it wore off the day after.&lt;&#x2F;p&gt;
&lt;p&gt;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?&lt;&#x2F;p&gt;
&lt;p&gt;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: &lt;strong&gt;we actively generate it&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;I, now, have a better grasp of what Erling Kagge meant in &lt;a href=&quot;https:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;36243813-silence&quot;&gt;Silence: In the Age of Noise&lt;&#x2F;a&gt;, written after he had spent fifty days walking solo in Antarctica: &lt;em&gt;“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. […]”&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Meditation is the absolute protagonist here, but floating got me into a different flow, and faster. The topic of &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Sensory_deprivation&quot;&gt;sensory deprivation&lt;&#x2F;a&gt; is definitely worth-exploring. Think like: If you ditch sugar for a while, it tastes sweeter afterwards. ;-)&lt;&#x2F;p&gt;
&lt;p&gt;This is pretty much what floating offers: &lt;strong&gt;sensory starvation and you on your own&lt;&#x2F;strong&gt;. You may waste your time and never get to anything, or make even most out of that 1 hour than me.&lt;&#x2F;p&gt;
&lt;p&gt;Personally, I can’t wait to do nothing again.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;Just another Autumn day in Berlin.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;Goethe (and Friedrich Schiller). &lt;a href=&quot;https:&#x2F;&#x2F;archive.org&#x2F;stream&#x2F;correspondencebe01schi&#x2F;correspondencebe01schi_djvu.txt&quot;&gt;Correspondence Between Schiller and Goethe from 1794 to 1805&lt;&#x2F;a&gt;. Translated by George H. Calvert.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>How I Lock My Bike in Berlin</title>
        <published>2018-08-30T07:00:00+00:00</published>
        <updated>2018-08-30T07:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/how-i-lock-my-bike-in-berlin/"/>
        <id>/blog/how-i-lock-my-bike-in-berlin/</id>
        
        <content type="html" xml:base="/blog/how-i-lock-my-bike-in-berlin/">&lt;p class=&quot;summary&quot;&gt;1 year with a bike in Berlin,  and counting...&lt;&#x2F;p&gt;
&lt;p&gt;I bought a bike 2 months after moving to Berlin, and a really good lock 1 day after.&lt;&#x2F;p&gt;
&lt;p&gt;With no clue about the theft scene in Europe – Berlin, in special –, I did myself some research on &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;reddit&#x2F;&quot;&gt;&#x2F;r&#x2F;berlin&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;bicycling&#x2F;&quot;&gt;&#x2F;r&#x2F;bycicling&lt;&#x2F;a&gt; and a few other places around the internet. What I did find out? Well, &lt;a href=&quot;https:&#x2F;&#x2F;www.welovecycling.com&#x2F;wide&#x2F;2015&#x2F;11&#x2F;25&#x2F;european-bike-stealing-championships-in-numbers&#x2F;&quot;&gt;the numbers on bike theft are quite concerning&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Nevertheless, after witnessing some people getting their bikes stolen, I feel privileged to say that &lt;strong&gt;it’s been more than 1 year I’ve got my bike&lt;&#x2F;strong&gt;. If that is because of my good lock or my good luck, I’ll never know.&lt;&#x2F;p&gt;
&lt;p&gt;But I can tell you about the lock.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;my-lock-setup&quot;&gt;My lock setup&lt;&#x2F;h2&gt;
&lt;p&gt;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 &lt;em&gt;deeply&lt;&#x2F;em&gt; care – in other words, I have no psychological resilience when it comes to bicycles so losing mine would definitely get me in tears.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;If you care about numbers without any trustable source, I&#x27;ve seen recommended somewhere that you should be investing between 10%-20% of the bike price in a lock. 🤷&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;www.kryptonitelock.com&#x2F;en&#x2F;products&#x2F;product-information&#x2F;current-key&#x2F;000990.html&quot;&gt;Kryptonite Evolution Mini-7 with Double Loop Cable&lt;&#x2F;a&gt; (highly recommend you to check their website for more information).&lt;&#x2F;p&gt;
&lt;p&gt;I make sure my bike’s &lt;strong&gt;frame and both wheels&lt;&#x2F;strong&gt; are locked to a fixed rack – cemented into the ground, ideally.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;yellow-bike-lock.jpg&quot;  alt=&quot;Yellow bike in a parking space locked with a U-lock and a flexible steel cable.&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;My tiny yellow bike parked and properly locked at the office&#x27;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.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p class=&quot;note&quot;&gt;I had considered the &lt;a href=&quot;https:&#x2F;&#x2F;www.kryptonitelock.com&#x2F;en&#x2F;products&#x2F;product-information&#x2F;current-key&#x2F;997986.html&quot;&gt;Kryptnonite&#x27;s New York Fahgettaboutdit&lt;&#x2F;a&gt;, but I found it way too heavy and the safety factor difference didn&#x27;t pay off for me at that time. I&#x27;d recommend it if an extra weight is no problem for you though.&lt;&#x2F;p&gt;
&lt;p&gt;For I still have my bike after 1 year, I am honestly happy with my choice. The lock came with:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Three keys with an unique number. For your information, Kryptonite has a system where &lt;a href=&quot;https:&#x2F;&#x2F;kryptonite.zendesk.com&#x2F;hc&#x2F;en-us&#x2F;articles&#x2F;231011287-Finding-My-Key-Number-&quot;&gt;every key gets a number&lt;&#x2F;a&gt;, so you can order replacements online in case you mess up.&lt;&#x2F;li&gt;
&lt;li&gt;A handy mount made by Kryptonite: &lt;a href=&quot;https:&#x2F;&#x2F;www.kryptonitelock.com&#x2F;en&#x2F;products&#x2F;product-information&#x2F;current-key&#x2F;000730.html&quot;&gt;Transit FlexFrame U-Bracket&lt;&#x2F;a&gt; (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.&lt;&#x2F;li&gt;
&lt;li&gt;Manuals that I didn’t read and got recycled.&lt;&#x2F;li&gt;
&lt;li&gt;1 year coverage according to the &lt;a href=&quot;https:&#x2F;&#x2F;www.kryptonitelock.com&#x2F;en&#x2F;customer-service&#x2F;register-for-anti-theft.html&quot;&gt;Kryptonte’s Anti-theft Program&lt;&#x2F;a&gt;, because the security rating is high enough.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;In the worst-case scenario, there is always the &lt;a href=&quot;https:&#x2F;&#x2F;www.sheldonbrown.com&#x2F;lock-strategy.html&quot;&gt;Sheldon Method lock strategy&lt;&#x2F;a&gt; – or &lt;a href=&quot;http:&#x2F;&#x2F;www.802bikeguy.com&#x2F;2011&#x2F;07&#x2F;the-modified-sheldon-brown-bike-locking-strategy&#x2F;&quot;&gt;its modified version&lt;&#x2F;a&gt; – anyway!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;what-bike-locks-are-about&quot;&gt;What bike locks are about&lt;&#x2F;h2&gt;
&lt;p&gt;When looking for a lock, instead of (only) asking yourself what’s the best lock ever, ask &lt;em&gt;“How much trouble am I putting a thief into with my lock strategy?”&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Locks do, though, make it harder for thieves to &lt;em&gt;pick&lt;&#x2F;em&gt; your bike, by increasing the “risk” factor in the risk&#x2F;reward calculation done before they attempt to steal.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;It’s all about making it harder&lt;&#x2F;strong&gt;. And how do you do that? By having a &lt;em&gt;diverse&lt;&#x2F;em&gt; lock setup, and, just as important: by being extremely careful on where and how to park.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;looking-further&quot;&gt;Looking further&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;thewirecutter.com&#x2F;reviews&#x2F;best-bike-lock&#x2F;&quot;&gt;Best Bike Lock&lt;&#x2F;a&gt;: Review of several bike locks and learnings on how to pick a good one.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;thebestbikelock.com&#x2F;how-to-lock-your-bike&#x2F;&quot;&gt;How to Lock your Bike&lt;&#x2F;a&gt;: Great tips on where to park your bike and what to lock it to.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;There are a lot of cool videos out on YouTube too, e.g. &lt;a href=&quot;https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=IXNASUSivqg&quot;&gt;“How to Lock your Bike” from GCN&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Have a nice ride! 🚲&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Working Better with Git for a Clear History</title>
        <published>2018-08-04T07:00:00+00:00</published>
        <updated>2018-08-04T07:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/working-better-with-git-for-a-clear-history/"/>
        <id>/blog/working-better-with-git-for-a-clear-history/</id>
        
        <content type="html" xml:base="/blog/working-better-with-git-for-a-clear-history/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;This is the feature branch’s &lt;strong&gt;commit history&lt;&#x2F;strong&gt; you get in the Pull Request:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[290xx26]&lt;&#x2F;span&gt;&lt;span&gt; Resolve merge conflicts
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[9efxxf2]&lt;&#x2F;span&gt;&lt;span&gt; Refactor event listener for form fields
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[5d9xx5a]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[948xxfa]&lt;&#x2F;span&gt;&lt;span&gt; Update dispatch event
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[f5xxea1]&lt;&#x2F;span&gt;&lt;span&gt; WIP
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[f8xxaae]&lt;&#x2F;span&gt;&lt;span&gt; Revert change
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[49xxf55e]&lt;&#x2F;span&gt;&lt;span&gt; Revert changes
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[02xxdf1]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[21xx329]&lt;&#x2F;span&gt;&lt;span&gt; Pass down prop
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[28xxa865]&lt;&#x2F;span&gt;&lt;span&gt; Fix onChange event and add minimal design  in form
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[cfxx37c]&lt;&#x2F;span&gt;&lt;span&gt; U[date snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[cfxx36c]&lt;&#x2F;span&gt;&lt;span&gt; Update form to handle onChange event for autofill
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[242xx25]&lt;&#x2F;span&gt;&lt;span&gt; Fix another bug with onChange
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[f7xx738]&lt;&#x2F;span&gt;&lt;span&gt; Update form component
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[09xx868]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Indeed, committing often to a branch is a good practice&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;How about the following history?&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[9efxxf2]&lt;&#x2F;span&gt;&lt;span&gt; Refactor event listener for form fields
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[cfxx37c]&lt;&#x2F;span&gt;&lt;span&gt; Add minimal design in form
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;[cfxx36c]&lt;&#x2F;span&gt;&lt;span&gt; Update form to handle onChange event for autofill
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That history communicates in a clear way &lt;strong&gt;what&lt;&#x2F;strong&gt; in the codebase has been changed in order to get the improvements done. If you want to know &lt;strong&gt;how&lt;&#x2F;strong&gt; it’s changed, it’s just a matter of checking out a particular commit.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;why-a-clear-history-matters&quot;&gt;Why a clear history matters&lt;&#x2F;h2&gt;
&lt;p&gt;Apart from facilitating code reviews, since reviewers could grasp the context of the changes right at the first glimpse, &lt;strong&gt;a clear Git history is healthy for the project&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;*&lt;em&gt;The final Git history should reflect &lt;em&gt;your work&lt;&#x2F;em&gt; not the way you worked.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-better-relationship-with-git&quot;&gt;A better relationship with Git&lt;&#x2F;h2&gt;
&lt;p&gt;There are very common comprehensible reasons – yet not excuses at all! – for developers to unnecessarily commit. I can think of:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;“I had to update snapshots&#x2F;fix unit test&#x2F;code formatting&#x2F;a typo in something I introduced.”&lt;&#x2F;li&gt;
&lt;li&gt;“I had to merge master.”&lt;&#x2F;li&gt;
&lt;li&gt;“I wanted to save my work.”&lt;&#x2F;li&gt;
&lt;li&gt;“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.”&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;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. &lt;em&gt;(I promise!)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;first-let-s-talk-git-rebasing&quot;&gt;First, let’s talk Git rebasing&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;git-scm.com&#x2F;docs&#x2F;git-rebase&quot;&gt;Git rebase&lt;&#x2F;a&gt; is a very powerful tool to reorganise your commits. It does a lot, so I won’t get deep into it.&lt;&#x2F;p&gt;
&lt;p&gt;The command &lt;code&gt;git rebase&lt;&#x2F;code&gt; has an important tool you should get comfortable with: &lt;strong&gt;interactive rebase&lt;&#x2F;strong&gt;. Let’s say we want to reorganise the latest 3 commits:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; rebase&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --interactive&lt;&#x2F;span&gt;&lt;span&gt; HEAD&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;3
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;&lt;code&gt;HEAD&lt;&#x2F;code&gt; points to the current branch in your Git repository. You can use @ as an alias as well: &lt;code&gt;@~3&lt;&#x2F;code&gt;, or the commit hash.&lt;&#x2F;p&gt;
&lt;p&gt;Interactive rebase will provide you a text interface with the list of the commits (in this case, within the range &lt;code&gt;HEAD~3..HEAD&lt;&#x2F;code&gt;) that are about to be rebased and actions you can apply to them:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;242xx25&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Fix another bug with onChange
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;f7xx738&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update form component
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;09xx868&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Rebase 242xx25..09xx868 onto 242xx25
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Commands:
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  p, pick = use commit
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  r, reword = use commit, but edit the commit message
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  e, edit = use commit, but stop for amending
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  s, squash = use commit, but meld into previous commit
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  f, fixup = like &amp;quot;squash&amp;quot;, but discard this commit&amp;#39;s log message
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#  x, exec = run command (the rest of the line) using shell
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# These lines can be re-ordered; they are executed from top to bottom.
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# If you remove a line here THAT COMMIT WILL BE LOST.
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# However, if you remove everything, the rebase will be aborted.
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;#
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Note that empty commits are commented out
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;&lt;code&gt;pick&lt;&#x2F;code&gt; just means that commit is included. It&#x27;s the default.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;rebase-instead-of-merge&quot;&gt;Rebase instead of merge&lt;&#x2F;h3&gt;
&lt;p&gt;The branch that you branched from has been updated (let’s call it &lt;code&gt;master&lt;&#x2F;code&gt;), so you need to fetch latest changes and merge that into yours with &lt;code&gt;git pull&lt;&#x2F;code&gt;. Instead of merging and introducing an ugly new commit for that, you can rebase and pretend that nothing ever happened in the first place.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; pull origin master&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --rebase
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;&quot;Why isn&#x27;t that the default then?&quot;, you might ask. I&#x27;d guess they didn&#x27;t want to make a feature that rewrites history part of the default behaviour.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;squash-commits-when-you-can&quot;&gt;Squash commits when you can&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; commit&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -m &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Update contact form tests&amp;quot;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; rebase&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -i&lt;&#x2F;span&gt;&lt;span&gt; HEAD&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;2 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# act on top of latest 2 commits
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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 &lt;code&gt;s&lt;&#x2F;code&gt; (squash).&lt;&#x2F;p&gt;
&lt;p&gt;The squashed commit has to come exactly before the commit you want to squash into, so you might have to some reordering.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;fix-up-and-save-time&quot;&gt;Fix up and save time&lt;&#x2F;h4&gt;
&lt;p&gt;Using the &lt;code&gt;--fixup&lt;&#x2F;code&gt; flag along with the commit hash of the previous commit will &lt;strong&gt;mark a commit as a fix of an existing one&lt;&#x2F;strong&gt;. Then, when you rebase with &lt;code&gt;--autosquash&lt;&#x2F;code&gt;, they will… well, automatically get squashed.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s say we have fixed a typo in the commit &lt;code&gt;i2r923&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; commit&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --fixup&lt;&#x2F;span&gt;&lt;span&gt; i2r923
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; rebase&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --autosquash&lt;&#x2F;span&gt;&lt;span&gt; 9ef00f2  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# one commit before above
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;You can configure Git to use the &lt;code&gt;--autosquash&lt;&#x2F;code&gt; flag by default when rebasing. I do that so you can check &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;diessica&#x2F;dotfiles&#x2F;blob&#x2F;master&#x2F;git&#x2F;config&quot;&gt;my dotfiles&lt;&#x2F;a&gt; if you&#x27;re curious.&lt;&#x2F;p&gt;
&lt;p&gt;Quite often, you’ll know how far you’re traveling from the current commit (HEAD). Instead of specifying hashes, you can just use &lt;code&gt;HEAD&lt;&#x2F;code&gt; as a reference to previous commits:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; commit&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --fixup&lt;&#x2F;span&gt;&lt;span&gt; HEAD            &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# fix 1 commit before HEAD
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; rebase&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --autosquash -i&lt;&#x2F;span&gt;&lt;span&gt; HEAD&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;1  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# squash latest 2 commits
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;stash-to-save-your-work-in-progress&quot;&gt;Stash to save your work in progress&lt;&#x2F;h3&gt;
&lt;p&gt;You want to check or change other branch’s files, but don’t want to commit unfinished work either. You can &lt;strong&gt;stash your work in progress&lt;&#x2F;strong&gt; (“WIP”):&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; stash
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;On how to get your work back, name your WIPs, or stash specific files, refer to the &lt;a href=&quot;https:&#x2F;&#x2F;git-scm.com&#x2F;book&#x2F;en&#x2F;v1&#x2F;Git-Tools-Stashing&quot;&gt;docs on Git staging&lt;&#x2F;a&gt;. No way I am better at explaining than the documentation itself!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;commit-selected-chunks-of-your-work&quot;&gt;Commit selected chunks of your work&lt;&#x2F;h3&gt;
&lt;p&gt;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.)&lt;&#x2F;p&gt;
&lt;p&gt;Besides only adding a specific file to your commit with &lt;code&gt;git add&lt;&#x2F;code&gt;, you may want to add only a &lt;strong&gt;chunk of the file’s code&lt;&#x2F;strong&gt; to a commit. That can be achieved with the &lt;code&gt;--patch&lt;&#x2F;code&gt; flag:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; add&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --patch
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That’s another interface you’ll have to get comfortable with. You can also try out its &lt;code&gt;--interactive&lt;&#x2F;code&gt; option.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;using-vs-code&quot;&gt;Using VS Code?&lt;&#x2F;h4&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;vs-code-stage-selected-changes.png&quot; alt=&quot;Showing how to use &#x27;Stage Selected Changes&#x27; in VS Code&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Changed the whole thing but want to commit only a chunk of it? VS Code has got you covered.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;The &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;docs&#x2F;getstarted&#x2F;userinterface#_command-palette&quot;&gt;Command Palette&lt;&#x2F;a&gt; also has a “Git: Stage selected changes” option.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;rename-commit-messages-for-meaning&quot;&gt;Rename commit messages for meaning&lt;&#x2F;h3&gt;
&lt;p&gt;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 &lt;code&gt;git commit --amend&lt;&#x2F;code&gt;; for other commits, you’ll have to rebase.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s say you want to fix the latest 5 commits:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; rebase&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -i&lt;&#x2F;span&gt;&lt;span&gt; @&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span&gt;5
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;That will open up the &lt;strong&gt;interactive rebase&lt;&#x2F;strong&gt; you’re already familiar with. Find the commit you want, change pick to &lt;code&gt;e&lt;&#x2F;code&gt; (edit), and save and close the file; after Git rewinds to that commit, edit its message with &lt;code&gt;git commit --amend&lt;&#x2F;code&gt;, and run &lt;code&gt;git rebase --continue&lt;&#x2F;code&gt; when you’re done.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;got-a-clear-history-push-it&quot;&gt;Got a clear history? Push it!&lt;&#x2F;h2&gt;
&lt;blockquote&gt;
&lt;p&gt;Commit Often, Perfect Later, Publish Once.&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Make sure that your branch has got a clear, readable and meaningful history…&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; log&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --oneline
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Then push it into the remote repository!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; push origin head
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt; If you have already pushed (Y THO???!), you can (carefully) use the force option (&lt;code&gt;-f&lt;&#x2F;code&gt;) to rewrite the remote history.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;extra-fixing-the-first-history&quot;&gt;Extra: Fixing the first history&lt;&#x2F;h2&gt;
&lt;p&gt;Remember the first history? We can fix it. It’s definitely harder to change it after it’s done, but totally doable with &lt;code&gt;rebase -i&lt;&#x2F;code&gt;. A possible solution would be:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;290xx26&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Resolve merge conflicts
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;9efxxf2&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Refactor event listener for form fields
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;5d9xx5a&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;948xxfa&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update dispatch event
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;delete &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;f5xxea1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; WIP
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;delete &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;f8xxaae&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Revert change
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;delete &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;49xxf55e&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Revert changes
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;02xxdf1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;21xx329&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Pass down prop
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;28xxa865&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Fix onChange event and add minimal design  in form
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;cfxx37c&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; U[date snapshots
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;pick &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;cfxx36c&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update form to handle onChange event for autofill
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;fixup &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;242xx25&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Fix another bug with onChange
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;f7xx738&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update form component
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;squash &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;[&lt;&#x2F;span&gt;&lt;span&gt;09xx868&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;]&lt;&#x2F;span&gt;&lt;span&gt; Update snapshots
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;strong&gt;Be mindful about your decisions and make sure you are not losing work along the way&lt;&#x2F;strong&gt;. 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.&lt;&#x2F;p&gt;
&lt;p&gt;I could have also split &lt;code&gt;Fix onChange event and add minimal design  in form&lt;&#x2F;code&gt; into two separate commits… But that’s for a future post.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-considerations&quot;&gt;Final considerations&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;git&lt;&#x2F;span&gt;&lt;span&gt; help&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -w&lt;&#x2F;span&gt;&lt;span&gt; reset
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Finally, if somehow you don’t feel comfortable with moving around your work from the command line, I’d recommend Git GUI clients&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; – they are powerful and simplify visualising branches and its commits, especially when it gets tough&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;I hope you have better, more sane, work days after that!&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;sethrobertson.github.io&#x2F;GitBestPractices&#x2F;&quot;&gt;Commit Often, Perfect Later, Publish Once: Git Best Practices&lt;&#x2F;a&gt; by Seth Robertson.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;Some clients I can think of: &lt;a href=&quot;https:&#x2F;&#x2F;desktop.github.com&#x2F;&quot;&gt;GitHub’s Git client&lt;&#x2F;a&gt; (free), &lt;a href=&quot;https:&#x2F;&#x2F;www.gitkraken.com&#x2F;&quot;&gt;Git Kraken&lt;&#x2F;a&gt; (free), &lt;a href=&quot;https:&#x2F;&#x2F;www.git-tower.com&#x2F;&quot;&gt;Git Tower&lt;&#x2F;a&gt; (paid).&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;3&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;3&lt;&#x2F;sup&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Computer and Human Languages</title>
        <published>2018-06-20T18:06:00+00:00</published>
        <updated>2018-06-20T18:06:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/computer-and-human-languages/"/>
        <id>/blog/computer-and-human-languages/</id>
        
        <content type="html" xml:base="/blog/computer-and-human-languages/">&lt;p class=&quot;note&quot;&gt;Basic knowledge of computer languages (mainly JavaScript) is assumed.&lt;&#x2F;p&gt;
&lt;p&gt;Some time ago, a friend of mine asked how skilled I’d say I was with JavaScript. I told him I was &lt;em&gt;fluent&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;– &lt;em&gt;Fluent? What does it mean to be fluent?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;– &lt;em&gt;Well, think Portuguese.&lt;&#x2F;em&gt; – We both speak Portuguese — &lt;em&gt;I don’t know every word, but I do know the language enough to express anything I need somehow.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;It turned out that “fluent” was just the perfect word.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;Fluency is a powerful and straightforward concept to express your ability with a language. When it comes to &lt;strong&gt;human languages&lt;&#x2F;strong&gt;, it’s the ability to fully communicate your intentions to a human; for &lt;strong&gt;computer languages&lt;&#x2F;strong&gt;, the ability to fully communicate your intentions to a computer.&lt;&#x2F;p&gt;
&lt;p&gt;That line of thought is shared in one of the most important and revolutionary introductory books to Computer Science. In &lt;em&gt;Structure and Interpretation of Computer Programs&lt;&#x2F;em&gt;, right before introducing Lisp (the programming language used throughout the book) a similar analogy is made:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;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. &lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;For both kinds of languages, the levels are the same: one &lt;em&gt;cannot&lt;&#x2F;em&gt; communicate; &lt;em&gt;can poorly&lt;&#x2F;em&gt; do it (beginner); &lt;em&gt;can&lt;&#x2F;em&gt; do it (native&#x2F;fluent), or &lt;em&gt;can brilliantly&lt;&#x2F;em&gt; do it (think book authors, public speakers, and Software Engineers in a senior level).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;why-do-they-match-so-well&quot;&gt;Why do they match so well?&lt;&#x2F;h2&gt;
&lt;p&gt;They match because the linguistics of computer and natural languages wonderfully intersect. Both consist of &lt;strong&gt;syntax&lt;&#x2F;strong&gt;, &lt;strong&gt;semantics&lt;&#x2F;strong&gt; and &lt;strong&gt;pragmatics&lt;&#x2F;strong&gt; functions, found in the core of theoretical linguistics.&lt;&#x2F;p&gt;
&lt;p&gt;In their ecosystem, we can also find &lt;strong&gt;syntax trees&lt;&#x2F;strong&gt; and different &lt;strong&gt;style guides&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;syntax&quot;&gt;Syntax&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;strong&gt;Syntax&lt;&#x2F;strong&gt; is the set of rules that govern how language elements are combined to form a valid expression.&lt;&#x2F;p&gt;
&lt;p&gt;In English, the basic rule is that elements like nouns, verbs and punctuation marks must follow the &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Subject%E2%80%93verb%E2%80%93object&quot;&gt;subject-verb-object order&lt;&#x2F;a&gt; to produce a valid sentence. In JavaScript, a programming language, to produce a valid conditional statement, elements such as &lt;code&gt;if&lt;&#x2F;code&gt;, parenthesis, braces, comparison operators (&lt;code&gt;===&lt;&#x2F;code&gt;, &lt;code&gt;&amp;lt;=&lt;&#x2F;code&gt; ) must be combined in a certain order too.&lt;&#x2F;p&gt;
&lt;p&gt;In the same way that “Do they car a put?” (??) is not valid English, the following code is not valid JavaScript:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;} (
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true
&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; SyntaxError: missing ( before condition
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;add x y &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;+ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;y  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; u can&amp;#39;t use elm&amp;#39;s lambda syntax on js, no
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;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 &lt;code&gt;if&lt;&#x2F;code&gt; statement condition using curly braces instead of parenthesis? Well, &lt;code&gt;SyntaxError&lt;&#x2F;code&gt;!&lt;&#x2F;p&gt;
&lt;p&gt;This, however, is valid JavaScript:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1 &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true
&lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; &amp;quot;if (1 === 2) return true&amp;quot; is also fine!
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;add &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;x&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;y&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;+ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;y
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In HTML there are syntax rules too. Adding a &lt;code&gt;div&lt;&#x2F;code&gt; inside &lt;code&gt;ul&lt;&#x2F;code&gt;, for instance, is invalid. An unordered list in HTML (&lt;code&gt;ul&lt;&#x2F;code&gt;) only allows list items as children, such as &lt;code&gt;li&lt;&#x2F;code&gt; – and &lt;code&gt;div&lt;&#x2F;code&gt; is not one.&lt;&#x2F;p&gt;
&lt;p&gt;Languages have different degrees of syntax strictness, which is what usually makes some harder to grasp than others. Think the &lt;strong&gt;German language&lt;&#x2F;strong&gt; – 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&#x2F;an) – and that’s it.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;semicolons&lt;&#x2F;strong&gt;: they are optional when ending statements in JavaScript, but mandatory in C.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;semantics&quot;&gt;Semantics&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;strong&gt;Semantics&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;Consider the following English statement:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;The ant ran over the car.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;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 &lt;strong&gt;syntactically correct&lt;&#x2F;strong&gt; but &lt;strong&gt;semantically wrong&lt;&#x2F;strong&gt; – we can’t conceive a meaning from it.&lt;&#x2F;p&gt;
&lt;p&gt;(&lt;em&gt;“The car ran over the ant”&lt;&#x2F;em&gt;, however, would be definitely more acceptable to our ears.)&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;What is a fruit?&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    A fruit is something that humans eat. Some examples of fruits are:
&lt;&#x2F;span&gt;&lt;span&gt;    watermelon, pineapple and apples.
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The elements &lt;code&gt;span&lt;&#x2F;code&gt; and &lt;code&gt;div&lt;&#x2F;code&gt; do exist in the language and are validly marked in this case (I didn’t do &lt;code&gt;&amp;gt;div&amp;lt;&lt;&#x2F;code&gt;, right?), so the browser will understand and show it accordingly to the user. The syntax is correct; yet, &lt;code&gt;span&lt;&#x2F;code&gt; and &lt;code&gt;divs&lt;&#x2F;code&gt; are non-semantic elements, so computers won’t get any meaning from it. Again, &lt;strong&gt;syntactically correct&lt;&#x2F;strong&gt; but &lt;strong&gt;semantically wrong&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;The following code improves the previous markup for better semantics.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;What is a fruit?&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    A fruit is something that humans eat. Some examples of fruits are:
&lt;&#x2F;span&gt;&lt;span&gt;    watermelon, pineapple and apples.
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The element &lt;code&gt;h1&lt;&#x2F;code&gt; is being used to communicate the main title, and &lt;code&gt;p&lt;&#x2F;code&gt; communicates the paragraph. Both syntax and semantics make sense now!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;pragmatics&quot;&gt;Pragmatics&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;strong&gt;Pragmatics&lt;&#x2F;strong&gt; is what the language expression evaluates to within its interactional context – which might totally affect semantics and syntax.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Consider the following examples:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;A child saying that the food is horrible to a beginner that started cooking just recently.&lt;&#x2F;li&gt;
&lt;li&gt;A new joiner in the company filters items in an JavaScript array using &lt;code&gt;forEach&lt;&#x2F;code&gt;, but the team expected &lt;code&gt;filter&lt;&#x2F;code&gt; to be used – a more functional approach.&lt;&#x2F;li&gt;
&lt;li&gt;A programmer implements Fibonacci with recursion instead of iteration.&lt;&#x2F;li&gt;
&lt;li&gt;Your friend uses a very erudite language to add a cake recipe on the internet.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;What do they all have in common? By themselves, they are neither right or wrong – &lt;em&gt;unless&lt;&#x2F;em&gt; you consider the context in which they were approached in.&lt;&#x2F;p&gt;
&lt;p&gt;Having either syntax or semantic skills won’t help you understand what’s wrong, since pragmatics is more about what’s &lt;strong&gt;appropriate&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;syntax-trees&quot;&gt;Syntax trees&lt;&#x2F;h3&gt;
&lt;p&gt;Both kinds of languages can be represented using syntax trees, a concept that reuses the mathematical concept of &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Partially_ordered_set&quot;&gt;partially ordered sets&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;This is the Concrete Syntax Tree for the previous sentence, &lt;em&gt;“The water drank a glass of Mary.”&lt;&#x2F;em&gt;:&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;mary-glass-syntax-tree.png&quot;  alt=&quot;Concrete Syntax Tree of the sentence &#x27;The water drank a glass of Mary.&#x27;&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Concrete Syntax Tree for a sentence in a human language, where &quot;S&quot; stands for &quot;sentence&quot;, &quot;N&quot; for &quot;noun&quot;, &quot;V&quot; for &quot;verb&quot;, and P for &quot;phrase&quot;. See &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Parse_tree&quot;&gt;Wikipedia on Parse Trees&lt;&#x2F;a&gt; for more information.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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 &lt;em&gt;compiler&lt;&#x2F;em&gt; 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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;What compilers do might be tough to understand at first, but think of this program inside us that converts languages to meaning – our &lt;b&gt;internal &lt;i&gt;compiler&lt;&#x2F;i&gt;&lt;&#x2F;b&gt;. 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 &lt;i&gt;German compiler is pretty bad and has to be improved&lt;&#x2F;i&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;The compiler simplifies the CST down to the expressions that truly represent the program after syntax analysis. That’s where the &lt;strong&gt;Abstract Syntax Tree&lt;&#x2F;strong&gt; (AST) comes in: the syntax tree that actually lies at the heart of semantic definitions!&lt;&#x2F;p&gt;
&lt;p&gt;Let’s consider the following JavaScript program:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;0
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;++
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is the Abstract Syntax Tree for it:&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img width=&quot;400&quot; src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;abstract-syntax-tree.png&quot;  alt=&quot;Concrete Syntax Tree of the sentence &#x27;The water drank a glass of Mary.&#x27;&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Abstract Syntax Tree for a JavaScript program.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Compare that against &lt;a href=&quot;https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;cst&#x2F;cst&#x2F;master&#x2F;docs&#x2F;cst-example.png&quot;&gt;a Concrete Syntax Tree for another program of similar size&lt;&#x2F;a&gt;, which is way more detailed, and therefore more useful in a language-specification level.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;style-guides&quot;&gt;Style guides&lt;&#x2F;h3&gt;
&lt;p&gt;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 &lt;strong&gt;which style to go for&lt;&#x2F;strong&gt;. Curiously, style guides of writing are just as useful for programmers as they are for journalists!&lt;&#x2F;p&gt;
&lt;p&gt;Let’s say I’m telling someone my favourite fruits. I could do it in different ways:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;My favourite fruits are watermelon&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;bananas and strawberries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or using the Oxford comma
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;My favourite fruits are watermelon&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;bananas&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;and strawberries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;The Oxford comma comes from the &lt;a href=&quot;https:&#x2F;&#x2F;www.ox.ac.uk&#x2F;sites&#x2F;files&#x2F;oxford&#x2F;media_wysiwyg&#x2F;University%20of%20Oxford%20Style%20Guide.pdf&quot;&gt;Oxford Style Guide&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;In JavaScript, you can write a &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Guide&#x2F;Working_with_Objects&quot;&gt;JavaScript object&lt;&#x2F;a&gt; in different ways too:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;hero &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    firstName: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    lastName: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    birthYear: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1815&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    superPower: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;computers&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or comma-first style
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;hero &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    firstName: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    lastName: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    birthYear: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1815&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    superPower: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;computers&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Either way, &lt;strong&gt;there’s no definite rule&lt;&#x2F;strong&gt;. They mean the same, only changing their style of writing.&lt;&#x2F;p&gt;
&lt;p&gt;Some examples of style guides are &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;airbnb&#x2F;javascript&quot;&gt;Airbnb’s Style guide&lt;&#x2F;a&gt;, for writing JavaScript; and &lt;a href=&quot;http:&#x2F;&#x2F;www.chicagomanualofstyle.org&#x2F;home.html&quot;&gt;Chicago style guide&lt;&#x2F;a&gt;, for general writing.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;where-they-don-t-match&quot;&gt;Where they don’t match&lt;&#x2F;h2&gt;
&lt;blockquote&gt;
&lt;p&gt;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. &lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Apart from that, &lt;strong&gt;a programming language is an interface between you and a computer, while a natural language is an interface between you and another human being.&lt;&#x2F;strong&gt; You are communicating to a computer, but as a human – and you probably won’t be the only one doing it.&lt;&#x2F;p&gt;
&lt;p&gt;Writing in a way that’s meaningful for both is therefore part of the writing process – and probably the most demanding one.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-thoughts&quot;&gt;Final thoughts&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Because both computer and natural languages share linguistic structures, speaking about programming skills in terms of fluency works just as well.&lt;&#x2F;p&gt;
&lt;p&gt;After all, fluency is all about how easily our intentions are expressed with a language.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p class=&quot;note&quot;&gt;As a next reading,  I&#x27;d highly recommend  &lt;a href=&quot;https:&#x2F;&#x2F;medium.freecodecamp.org&#x2F;exploring-the-linguistics-behind-regular-expressions-596fab41146&quot;&gt;Exploring the Linguistics Behind Regular Expressions&lt;&#x2F;a&gt; if you are interested in the linguistics of computer languages.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;compsci&#x2F;comments&#x2F;8t413x&#x2F;computer_and_human_languages_the_linguistics_of&#x2F;&quot;&gt;Follow the discussion thread on Reddit&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;“Programming in Lisp” in &lt;em&gt;“Structure and Interpretation of Computer Programs”&lt;&#x2F;em&gt;, 1979.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;Fred Brooks. &lt;em&gt;“The Mythical Man-Month: Essays on Software Engineering”&lt;&#x2F;em&gt;, 1975, page 7.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>React and Form Management: Is Redux Form Worth It?</title>
        <published>2018-05-21T18:14:00+00:00</published>
        <updated>2018-05-21T18:14:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/react-and-form-management-is-redux-form-worth-it/"/>
        <id>/blog/react-and-form-management-is-redux-form-worth-it/</id>
        
        <content type="html" xml:base="/blog/react-and-form-management-is-redux-form-worth-it/">&lt;p class=&quot;note&quot;&gt;This is an improvement over my answer to a question in a Brazilian forum: &quot;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;frontendbr&#x2F;forum&#x2F;issues&#x2F;929&quot;&gt;is using Redux for forms worth it?&lt;&#x2F;a&gt;&quot;, in Portuguese. It assumes previous knowledge with React and Redux, and also mentions &lt;a href=&quot;https:&#x2F;&#x2F;redux-form.com&#x2F;&quot;&gt;Redux Form&lt;&#x2F;a&gt;, a library for managing forms in React.&lt;&#x2F;p&gt;
&lt;p&gt;It depends.&lt;&#x2F;p&gt;
&lt;p&gt;I know “it depends” is far from an interesting answer, yet that’s the perfect-generic answer to any &lt;em&gt;“is using X worth it?”&lt;&#x2F;em&gt; question. It really depends, yes, but more often you don’t need that.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;where-redux-form-thrives&quot;&gt;Where Redux Form thrives&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;redux-form.com&#x2F;&quot;&gt;Redux Form&lt;&#x2F;a&gt; is useful for larger and more complex forms where &lt;strong&gt;ease of development&lt;&#x2F;strong&gt;, &lt;strong&gt;high control&lt;&#x2F;strong&gt; (especially), &lt;strong&gt;consistency&lt;&#x2F;strong&gt;, and &lt;strong&gt;persistence&lt;&#x2F;strong&gt; (especially) are required. There are advantages from:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;the state form being in the Redux store, and&lt;&#x2F;li&gt;
&lt;li&gt;Redux Form’s abstraction itself.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Which are two different things. You might need both, just one, or none at all.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;ease-of-development&quot;&gt;Ease of development&lt;&#x2F;h3&gt;
&lt;p&gt;Considering you are using &lt;a href=&quot;https:&#x2F;&#x2F;redux-form.com&#x2F;7.3.0&#x2F;docs&#x2F;api&#x2F;field.md&#x2F;&quot;&gt;Redux Form’s Field&lt;&#x2F;a&gt; and wrap your form in its &lt;a href=&quot;https:&#x2F;&#x2F;redux-form.com&#x2F;7.3.0&#x2F;docs&#x2F;api&#x2F;reduxform.md&#x2F;&quot;&gt;higher-order component&lt;&#x2F;a&gt; – you’re done. Your form will work out of the box.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;Yes, you could also get to build forms in a productive way with only React, but I think it&#x27;s still worth-mentioning that Redux Form makes it really painless.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;high-control&quot;&gt;High control&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Redux Form is also flexible on what can be an input. &lt;strong&gt;Anything works as a field&lt;&#x2F;strong&gt;: 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.&lt;&#x2F;p&gt;
&lt;p&gt;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! 👌&lt;&#x2F;p&gt;
&lt;h3 id=&quot;consistency&quot;&gt;Consistency&lt;&#x2F;h3&gt;
&lt;p&gt;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&#x2F;form validity and further information (is the field touched? Pristine? Dirty?) in the Redux store.&lt;&#x2F;p&gt;
&lt;p&gt;Of course you can build forms consistently just by using React itself, but using Redux Form definitely enforces it.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;persistence&quot;&gt;Persistence&lt;&#x2F;h3&gt;
&lt;p&gt;Since the state is already in the Redux store, Redux Form is easily pluggable with tools from the ecosystem.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s say you want to save drafts from user’s inputs so people can finish and submit the form later. Redux Form + &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;rt2zz&#x2F;redux-persist&quot;&gt;redux-persist&lt;&#x2F;a&gt; make it pretty easy: the rehydrate process in the Redux store autofills the UI like magic!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;where-redux-form-might-die&quot;&gt;Where Redux Form might die&lt;&#x2F;h2&gt;
&lt;p class=&quot;note&quot;&gt;In the thread, someone mentioned the article &lt;a href=&quot;https:&#x2F;&#x2F;matwrites.com&#x2F;redux-form-is-dead&#x2F;&quot;&gt;Redux Form is dead.&lt;&#x2F;a&gt; &lt;b&gt;TL;DR&lt;&#x2F;b&gt;: It&#x27;s not fucking dead, as any library, framework and whatsoever that has an &quot;X is dead&quot; post for it.&lt;&#x2F;p&gt;
&lt;p&gt;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&#x2F;activity. I will go through them a bit.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;form-data-in-the-redux-store&quot;&gt;Form data in the Redux store&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&quot;&gt;Dan Abramov&lt;&#x2F;a&gt;, creator of Redux, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux&#x2F;issues&#x2F;1287#issuecomment-175351978&quot;&gt;said&lt;&#x2F;a&gt;: &lt;em&gt;“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. […]”.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Which is completely accurate. Where your state should live in your app depends entirely on its &lt;strong&gt;ephemerality&lt;&#x2F;strong&gt; – how trivial it is for the application as a whole when it comes to reading, updating it and so on.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;pretty bold design decision&lt;&#x2F;strong&gt; for sure.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;not as ephemeral as the state of a newsletter sign up or a contact form&lt;&#x2F;strong&gt;. In the former, the form state is important for the whole application. Just notice that’s a very specific case.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;performance-issues&quot;&gt;Performance issues&lt;&#x2F;h3&gt;
&lt;p&gt;Redux Form has reached a well-optimised (see &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;erikras&#x2F;redux-form&#x2F;issues&#x2F;529&quot;&gt;redux-form #529&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;erikras&#x2F;redux-form&#x2F;issues&#x2F;1405&quot;&gt;redux-form #1405&lt;&#x2F;a&gt;) state.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;project-activity&quot;&gt;Project activity&lt;&#x2F;h3&gt;
&lt;p&gt;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?&lt;&#x2F;p&gt;
&lt;p&gt;Yes, Erik (the author) has recently started working on another solution called &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;final-form&#x2F;final-form&quot;&gt;Final Form&lt;&#x2F;a&gt;, which moves the form state out of the Redux store. However, Redux Form is mature, still well maintained (&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;erikras&#x2F;redux-form&quot;&gt;check GitHub&lt;&#x2F;a&gt;, and he even said it himself &lt;a href=&quot;https:&#x2F;&#x2F;www.reddit.com&#x2F;r&#x2F;reactjs&#x2F;comments&#x2F;7fukt7&#x2F;introducing_react_final_form_high_performance&#x2F;dqf8lw1&#x2F;?utm_content=permalink&amp;amp;utm_medium=front&amp;amp;utm_source=reddit&amp;amp;utm_name=reactjs&quot;&gt;on Reddit&lt;&#x2F;a&gt;), and its documentation is great.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-words&quot;&gt;Final words&lt;&#x2F;h2&gt;
&lt;p&gt;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, &lt;strong&gt;especially&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;Other React form management solutions you should definitely be looking at are &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;jaredpalmer&#x2F;formik&quot;&gt;Formik&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;final-form&#x2F;react-final-form&quot;&gt;react-final-form&lt;&#x2F;a&gt;, by Redux Form’s author. They don’t rely on Redux for state management and are most likely what you need now – or not.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Have fun building forms! 🎉&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>T. T. T.</title>
        <published>2018-04-01T23:36:00+00:00</published>
        <updated>2018-04-01T23:36:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/ttt/"/>
        <id>/blog/ttt/</id>
        
        <content type="html" xml:base="/blog/ttt/">&lt;i&gt;
Put up in a place&lt;br &#x2F;&gt;
where it&#x27;s easy to see&lt;br &#x2F;&gt;
the cryptic admonishment&lt;br &#x2F;&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;T. T. T.&lt;br &#x2F;&gt;
&lt;p&gt;When you feel how depressingly&lt;br &#x2F;&gt;
slowly you climb,&lt;br &#x2F;&gt;
it’s well to remember that&lt;br &#x2F;&gt;
      Things Take Time.
&lt;&#x2F;i&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Piet Hein&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Writing Mode in VS Code</title>
        <published>2018-02-28T02:30:00+00:00</published>
        <updated>2018-02-28T02:30:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/writing-mode-in-vs-code/"/>
        <id>/blog/writing-mode-in-vs-code/</id>
        
        <content type="html" xml:base="/blog/writing-mode-in-vs-code/">&lt;p&gt;I’m a big fan of writing. I’m also a big fan of using my &lt;strong&gt;code editor&lt;&#x2F;strong&gt; and &lt;strong&gt;Markdown&lt;&#x2F;strong&gt; for that!&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;vs-code-writing-mode.png&quot; alt=&quot;Screenshot of the VS Code in the zen mode without any clutter&quot;&gt;
&lt;figcaption&gt;My &quot;writing mode&quot; in VS Code, with the dark theme enabled.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;docs&#x2F;languages&#x2F;markdown&quot;&gt;Markdown support&lt;&#x2F;a&gt; – 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?&lt;&#x2F;p&gt;
&lt;p&gt;After configuring my editor of choice, VS Code, to get rid of the coding mode clutter (and also after &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Microsoft&#x2F;vscode&#x2F;pull&#x2F;40757&quot;&gt;an important update on its zen mode&lt;&#x2F;a&gt; ❤️), I’ve finally achieved a totally distraction-free writing experience!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;setting-up-the-writing-mode&quot;&gt;Setting up the “Writing Mode”&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;1-user-settings&quot;&gt;1. User Settings&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Since I only write in Markdown, I only set up those settings (and other tweaks) specifically for that language.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; github.com&#x2F;diessica&#x2F;dotfiles&#x2F;blob&#x2F;master&#x2F;vscode&#x2F;settings.json
&lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;....
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;[markdown]&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; force centering in zen mode
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;zenMode.centerLayout&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; use the beautiful duospace font when available
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.fontFamily&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;iA Writer Duospace, monospace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; enable word wrap, since horizontal scroll while writing isn&amp;#39;t human
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.wordWrap&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; i don&amp;#39;t need line numbers, i&amp;#39;m not coding
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.lineNumbers&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;off&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; light by default, but can be easily toggled to dark
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;workbench.colorTheme&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Default Light+&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; i don&amp;#39;t need rules, i&amp;#39;m not coding
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.rulers&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: [],
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; larger text, to improve focus on writing
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.fontSize&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;14&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; more comfortable line height
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.lineHeight&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;25&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; disable editor suggestions based on previous words
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;editor.quickSuggestions&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  },
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;...
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;You can learn more about this file by checking the docs on &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;docs&#x2F;getstarted&#x2F;settings&quot;&gt;&quot;User and Workspace Settings&quot;&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Now, &lt;strong&gt;toggle zen mode&lt;&#x2F;strong&gt; in VS Code (see &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;docs&#x2F;getstarted&#x2F;keybindings&quot;&gt;Keybindings&lt;&#x2F;a&gt;, or &lt;code&gt;View &amp;gt; Toggle Zen Mode&lt;&#x2F;code&gt;) and check if that fits you!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;2-theme&quot;&gt;2. Theme&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;If you don&#x27;t like them, feel free to pick anything else, since most themes provide sufficient Markdown support anyway. Just don&#x27;t procrastinate – a good theme won&#x27;t make you a better writer.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;3-font&quot;&gt;3. Font&lt;&#x2F;h3&gt;
&lt;p&gt;My font of choice for writing is the &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;iaolo&#x2F;iA-Fonts&#x2F;tree&#x2F;master&#x2F;iA%20Writer%20Duospace&quot;&gt;Duospace&lt;&#x2F;a&gt;, designed by the people behind the text editor &lt;a href=&quot;https:&#x2F;&#x2F;ia.net&#x2F;writer&#x2F;&quot;&gt;iaWriter&lt;&#x2F;a&gt;. It’s a free and beautiful font shaped for the perfect writing experience.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;4-extensions&quot;&gt;4. Extensions&lt;&#x2F;h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=streetsidesoftware.code-spell-checker&quot;&gt;Spell Checker&lt;&#x2F;a&gt; catches your spelling errors.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=ms-vscode.wordcount&quot;&gt;Word Count&lt;&#x2F;a&gt; helps you to not to be too wordy.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=yzhang.markdown-all-in-one&quot;&gt;Markdown All in One&lt;&#x2F;a&gt; gives you some extra power to play with Markdown files.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=mushan.vscode-paste-image&quot;&gt;Paste Image&lt;&#x2F;a&gt; lets you directly paste images from clipboard to files.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;extra-tips&quot;&gt;Extra tips&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;docs&#x2F;languages&#x2F;markdown#_markdown-preview&quot;&gt;VS Code’s Markdown Preview&lt;&#x2F;a&gt; is your friend – use it when you’re done with writing!&lt;&#x2F;li&gt;
&lt;li&gt;Configure the spell checker for your language, there are dictionary extensions for that available in the &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;&quot;&gt;marketplace&lt;&#x2F;a&gt;. I also have &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=streetsidesoftware.code-spell-checker-portuguese-brazilian&quot;&gt;the Brazilian Portuguese package&lt;&#x2F;a&gt; installed, for instance.&lt;&#x2F;li&gt;
&lt;li&gt;Like extensions? Keep exploring! The extension &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=shinnn.alex&quot;&gt;alex&lt;&#x2F;a&gt;, for instance, catches insensitive, inconsiderate writing in texts.&lt;&#x2F;li&gt;
&lt;li&gt;Learn the Markdown keybindings provided by the All in One extension for a better workflow.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Happy writing! 🌟&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>My Hacking Adventure in Lithuania</title>
        <published>2018-02-15T00:00:00+00:00</published>
        <updated>2018-02-15T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/my-hacking-adventure-in-lithuania/"/>
        <id>/blog/my-hacking-adventure-in-lithuania/</id>
        
        <content type="html" xml:base="/blog/my-hacking-adventure-in-lithuania/">&lt;div class=&quot;summary&quot;&gt;
&lt;p&gt;Exploring the country where my surname came from and hacking collaboratively at Science Hack Day Vilnius!&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;I love to hack stuff, and, this year, I’ve been pushing myself to do more of that along with people.&lt;&#x2F;p&gt;
&lt;p&gt;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”&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; 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 &lt;strong&gt;Lithuania&lt;&#x2F;strong&gt;, where my surname “Gurskas” came from.&lt;&#x2F;p&gt;
&lt;p&gt;There it was the perfect replacement: the &lt;a href=&quot;http:&#x2F;&#x2F;vilnius.sciencehackday.org&#x2F;&quot;&gt;Science Hack Day Vilnius 2018&lt;&#x2F;a&gt; would be my great excuse to explore the country where my grandfather was born.&lt;&#x2F;p&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;welcome-to-vilnius&quot;&gt;Welcome to Vilnius&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;The cold was totally dismissible as soon as I met the Lithuanians, warm and welcoming people who seemed to lead a simple life.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;science-hack-day-vilnius-2018&quot;&gt;Science Hack Day Vilnius 2018&lt;&#x2F;h2&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-trophies.jpg&quot; alt=&quot;Trophies for different prize categories&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Trophies for different prize categories. (Photo: &lt;a href=&quot;http:&#x2F;&#x2F;makerraitis.com&quot;&gt;Raitis Gocentas&lt;&#x2F;a&gt;)&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;These were my days!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;first-day&quot;&gt;First Day&lt;&#x2F;h3&gt;
&lt;p&gt;Early on Saturday, I walked to &lt;a href=&quot;https:&#x2F;&#x2F;technarium.lt&#x2F;&quot;&gt;Technarium&lt;&#x2F;a&gt;, 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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-technarium.jpg&quot; alt=&quot;Technarium space&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Technarium. (Photo: &lt;a href=&quot;http:&#x2F;&#x2F;makerraitis.com&quot;&gt;Raitis Gocentas&lt;&#x2F;a&gt;)&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-badge.jpg&quot; width=&quot;800&quot; alt=&quot;Electronic hackable badge and stickers from Science Hack Day Vilnius 2018&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;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. &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Technariumas&#x2F;shd18badge&quot;&gt;Check the badge&#x27;s GitHub repository&lt;&#x2F;a&gt;.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;“We need a Python engineer who understands some audio engineering”&lt;&#x2F;em&gt;, 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.&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;the idea;&lt;&#x2F;li&gt;
&lt;li&gt;an Arduino Nano;&lt;&#x2F;li&gt;
&lt;li&gt;a power supply;&lt;&#x2F;li&gt;
&lt;li&gt;long LED strip lights;&lt;&#x2F;li&gt;
&lt;li&gt;an acrylic sheet.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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: &lt;a href=&quot;https:&#x2F;&#x2F;people.csail.mit.edu&#x2F;hubert&#x2F;pyaudio&#x2F;&quot;&gt;pyaudio&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;www.numpy.org&#x2F;&quot;&gt;numpy&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;pyserial&#x2F;pyserial&quot;&gt;pyserial&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;matplotlib.org&#x2F;&quot;&gt;matplotlib&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;second-day&quot;&gt;Second Day&lt;&#x2F;h3&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Kibinai&quot;&gt;kibinai&lt;&#x2F;a&gt; – I ate one filled with spinach and will never forget how it smelled and tasted.)&lt;&#x2F;p&gt;
&lt;p&gt;Most people there were Lithuanians and I didn’t know anything about their language besides “labas vakaras”&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; (“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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;&lt;b&gt;Curious fact:&lt;&#x2F;b&gt; A teenager at the event told me that my surname was &quot;wrong&quot; – in Lithuania, single women get a different surname suffix, so my name should be Gurskaite (&quot;skaite&quot; suffix, instead of –kas). In Brazil, of course, they didn’t know that and only cloned my grandfather’s surname – with the &quot;kas&quot; suffix, since he was a man: Gurskas.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;One of my teammates was learning Programming. He told me he didn’t know what programming languages to really &lt;em&gt;sit down and learn&lt;&#x2F;em&gt;, 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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;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. &lt;strong&gt;Time for presenting&lt;&#x2F;strong&gt;!&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-lasers.jpg&quot; alt=&quot;Laser project presentation&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Project showing how lasers work. It emitted sounds too! (Photo: &lt;a href=&quot;http:&#x2F;&#x2F;makerraitis.com&quot;&gt;Raitis Gocentas&lt;&#x2F;a&gt;)&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;Teams came up with a lot of cool things! Projects related to lasers, contactless payment systems security tests, &lt;a href=&quot;https:&#x2F;&#x2F;www.instagram.com&#x2F;p&#x2F;BfEKAXYH-iH&quot;&gt;shopping-cart-rocket launch&lt;&#x2F;a&gt; (#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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-spectrogram.jpg&quot; alt=&quot;Presenting the LED tower to the public&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Two of my teammates (one&#x27;s missing!) and me. I was  weirdly concentrated uttering different notes to show how LEDs reacted to frequencies. (Photo: &lt;a href=&quot;http:&#x2F;&#x2F;makerraitis.com&quot;&gt;Raitis Gocentas&lt;&#x2F;a&gt;)&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;There were different category prizes, and we won as the &lt;strong&gt;Best Data Hack&lt;&#x2F;strong&gt;!&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-prize.jpg&quot; width=&quot;800&quot; alt=&quot;A trophy for Best Data Hack 2018 and a Raspberry Pi&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;A trophy for the Best Data Hack 2018 and a Raspberry Pi. Our prizes for having fun!&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;The Hack Day ended with a science show by &lt;a href=&quot;http:&#x2F;&#x2F;n-2.lt&#x2F;en&#x2F;performances&#x2F;&quot;&gt;N2&lt;&#x2F;a&gt;! 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.)&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;sdhv18-n2-fire.jpg&quot; alt=&quot;N2 science show group playing with fire&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Playing with fire. Literally. (Photo: &lt;a href=&quot;http:&#x2F;&#x2F;makerraitis.com&quot;&gt;Raitis Gocentas&lt;&#x2F;a&gt;)&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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, &lt;em&gt;fun&lt;&#x2F;em&gt;. Organisers provided us all the materials (food included!), borrowing me even the single USB-C adapter they had!&lt;&#x2F;p&gt;
&lt;p&gt;Clearly, the only intent behind Science Hack Days is for people to &lt;strong&gt;share and learn&lt;&#x2F;strong&gt; openly. And that has been achieved just right.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-words&quot;&gt;Final words&lt;&#x2F;h2&gt;
&lt;p&gt;Open knowledge is one of the most valuable things in this world. I have no doubt.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;gurskas-snow.jpg&quot; alt=&quot;Gurskas written in snow&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;I don&#x27;t feel my fingertips anymore since I did that. Writing in the snow: definitely NOT encouraged!&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;Lithuania was freezing, yes, but people were warm.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;From the &lt;a href=&quot;&#x2F;blog&#x2F;my-hacking-adventure-in-lithuania&#x2F;%20https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Science_Hack_Day&quot;&gt;Science Hack Day’s Wikipedia page&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;Special thanks to my father, who taught me that, otherwise I wouldn’t know anything really.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Creativity</title>
        <published>2018-02-05T21:25:00+00:00</published>
        <updated>2018-02-05T21:25:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/creativity/"/>
        <id>/blog/creativity/</id>
        
        <content type="html" xml:base="/blog/creativity/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-phenomenon&quot;&gt;The Phenomenon&lt;&#x2F;h2&gt;
&lt;p&gt;In an interview in the late 1990s&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, Steve Jobs said something that years later would be seen as one of the most simple but accurate definitions of creativity:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Creativity is just connecting things.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;And he followed with something I couldn’t help but relate: &lt;em&gt;“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. […]”&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;www.goodreads.com&#x2F;book&#x2F;show&#x2F;534755.A_Technique_for_Producing_Ideas&quot;&gt;A Technique for Producing Ideas&lt;&#x2F;a&gt;, from the 1940s.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p class=&quot;note&quot;&gt;For James to suggest that, well, guess what? He was inspired by &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Vilfredo_Pareto&quot;&gt;Pareto&lt;&#x2F;a&gt;&#x27;s idea of the &quot;speculator&quot;, 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 &quot;ideas as a combination of old elements&quot;.)&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;mixtures&lt;&#x2F;strong&gt;. When the mixture feels good, either as a homogeneous or heterogeneous result, it’s then a &lt;em&gt;creation&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-creation-the-weird&quot;&gt;The Creation, The Weird&lt;&#x2F;h2&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img class=&quot;mx-auto&quot; src=&quot;..&#x2F;..&#x2F;media&#x2F;2018&#x2F;creativity.png&quot; width=&quot;500&quot; alt=&quot;Creativity comics&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;&lt;a href=&quot;http:&#x2F;&#x2F;dorrismccomics.com&#x2F;post&#x2F;64681231561&quot;&gt;Creativity&lt;&#x2F;a&gt;, by Alex Norris.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;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 &lt;strong&gt;weird&lt;&#x2F;strong&gt;, 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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;Alan Turing was an inspiring computer scientist. Among other cool stuff, he proposed humans to consider the question &lt;a href=&quot;http:&#x2F;&#x2F;phil415.pbworks.com&#x2F;f&#x2F;TuringComputing.pdf&quot;&gt;&quot;Can computers think?&quot;&lt;&#x2F;a&gt;, and also designed &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Bombe&quot;&gt;cryptanalytical machines&lt;&#x2F;a&gt;, crucial to cracking German encoded communication during the World War II. Cool stuff!&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;weird&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;”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.“&lt;&#x2F;em&gt; &lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;And you know what?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;it-s-been-shown-by-nature&quot;&gt;…It’s Been Shown by Nature&lt;&#x2F;h2&gt;
&lt;p&gt;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 &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Anaxagoras&quot;&gt;Anaxagoras&lt;&#x2F;a&gt; described it:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Wrongly do the Greeks suppose that something&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p class=&quot;note&quot;&gt;That might remember you of the Law of Conservation of Mass, later defined by the chemist Antoine Lavoisier.&lt;&#x2F;p&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;p&gt;Its process of creation was the same as the human’s creative process for the discovery of fire, the invention of the wheel, shitty &lt;em&gt;and&lt;&#x2F;em&gt; 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.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;Steve Jobs. &lt;a href=&quot;https:&#x2F;&#x2F;www.wired.com&#x2F;1996&#x2F;02&#x2F;jobs-2&#x2F;&quot;&gt;“Steve Jobs: The Next Insanely Great Thing”&lt;&#x2F;a&gt;. WIRED. January 1996.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;James H. Wilkinson, &lt;a href=&quot;http:&#x2F;&#x2F;www.jdl.ac.cn&#x2F;turing&#x2F;pdf&#x2F;p137-wilkinson.pdf&quot;&gt;“Some Comments from a Numerical Analyst”&lt;&#x2F;a&gt;, 1970. &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Turing_Award&quot;&gt;Turing Award&lt;&#x2F;a&gt; lecture, &lt;em&gt;Journal of the ACM&lt;&#x2F;em&gt;. February 1971.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;3&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;3&lt;&#x2F;sup&gt;
&lt;p&gt;I’ve deliberately changed “aught”, an archaic English word, to “something” for the sake of readability.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Dental Health and Habits</title>
        <published>2017-12-21T08:58:09+00:00</published>
        <updated>2017-12-21T08:58:09+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/dental-health-and-habits/"/>
        <id>/blog/dental-health-and-habits/</id>
        
        <content type="html" xml:base="/blog/dental-health-and-habits/">&lt;p&gt;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 &lt;em&gt;feel&lt;&#x2F;em&gt; clean right away.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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. &lt;em&gt;(Hence the human inclination to brushing rather than flossing!?)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;In terms of dental health, though, flossing teeth is more effective on cleaning than brushing&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, &lt;strong&gt;even if it doesn’t feel like it.&lt;&#x2F;strong&gt; There’s no immediate reward in flossing, but definitely a long-term one.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;I’ve read that at some point in my life but don’t remember where. You can find some resources out there, such as “&lt;a href=&quot;https:&#x2F;&#x2F;askthedentist.com&#x2F;flossing-or-brushing-more-important&#x2F;&quot;&gt;What’s More Important: Flossing or Brushing?&lt;&#x2F;a&gt;”. Anyway, I think we’re safe assuming that flossing is, at least, &lt;em&gt;as important&lt;&#x2F;em&gt; as brushing.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Expressive JavaScript Conditionals (for Humans)</title>
        <published>2017-10-30T00:00:00+00:00</published>
        <updated>2017-10-30T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/expressive-javascript-conditionals/"/>
        <id>/blog/expressive-javascript-conditionals/</id>
        
        <content type="html" xml:base="/blog/expressive-javascript-conditionals/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;patterns-for-conditionals&quot;&gt;Patterns for Conditionals&lt;&#x2F;h2&gt;
&lt;p&gt;First, to put you in the mood, a quote from Literate Programming&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, by Donald Knuth.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;That sums up the approach for this post: purely aimed at &lt;strong&gt;how to write code for people to read&lt;&#x2F;strong&gt;. Performance doesn’t matter now, since 1) that’s not the goal and 2) I don’t believe in premature optimisation.&lt;&#x2F;p&gt;
&lt;p&gt;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!).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;1-variables-that-hold-conditions&quot;&gt;1. Variables that hold conditions&lt;&#x2F;h3&gt;
&lt;p&gt;When your condition is made up of an expression (or many of them), you can store it within meaningful-named variables.&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;green&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;    sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;sweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;colors&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;color &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;do your stuff 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is banana&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Or we could store our conditions in variables!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;green&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;    sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;sweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or just `fruit.sweet`
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;colors&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;color &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;do your stuff 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is banana&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;Not all conditions need to be in a variable. &lt;code&gt;fruit.sweet&lt;&#x2F;code&gt;, for instance, is quite expressive by its own.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;It’s even more useful for composing and reusing conditions.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;filtering-arrays&quot;&gt;Filtering arrays&lt;&#x2F;h4&gt;
&lt;p class=&quot;note&quot;&gt;In the previous example, all variables were conditions based on the &lt;code&gt;fruit&lt;&#x2F;code&gt; object, for didactic purposes. Commonly, though, those variables actually store (pure) functions that take any fruit and test against it. I&#x27;m changing that to fit this example.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s say we’ve got an array of fruits and we need to filter all the bananas out of it.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruits &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;[
&lt;&#x2F;span&gt;&lt;span&gt;    {
&lt;&#x2F;span&gt;&lt;span&gt;        colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;green&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;        sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    },
&lt;&#x2F;span&gt;&lt;span&gt;    {
&lt;&#x2F;span&gt;&lt;span&gt;        colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;red&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;        sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; don&amp;#39;t know what kind of fruit this&amp;#39;d be
&lt;&#x2F;span&gt;&lt;span&gt;    },
&lt;&#x2F;span&gt;&lt;span&gt;]
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;sweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;colors&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;color &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;bananas &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruits&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So expressive! I love the way that I can read that last line and even a kid (a non-programmer one!) can understand. &lt;em&gt;(Yes, I’ve tried that.)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;The currying technique would help introduce expressiveness without the verbosity for &lt;code&gt;isBanana&lt;&#x2F;code&gt;. An optional appendix at the end of the article elaborates more on that, if you’re curious.&lt;&#x2F;p&gt;
&lt;p&gt;That’s it. Hold on to that one though – it’s the foundation for what’s next.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;2-define-value-conditionally&quot;&gt;2. Define value conditionally&lt;&#x2F;h3&gt;
&lt;p&gt;Still considering the variables from the example above, this could also be done:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myFruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;banana&amp;quot;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myFruit
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The value for the &lt;code&gt;myFruit&lt;&#x2F;code&gt; variable will only be assigned to “banana” if those conditions are true. Pretty useful for when values are defined conditionally!&lt;&#x2F;p&gt;
&lt;p&gt;That saves you from &lt;code&gt;if (isYellow &amp;amp;&amp;amp; isSweet) [...]&lt;&#x2F;code&gt;, and it’s quite expressive, I’d say. An expressive expression. 👌&lt;&#x2F;p&gt;
&lt;h3 id=&quot;3-define-value-conditionally-with-fallback&quot;&gt;3. Define value conditionally with fallback&lt;&#x2F;h3&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img width=&quot;250&quot; src=&quot;https:&#x2F;&#x2F;imgs.xkcd.com&#x2F;comics&#x2F;conditionals_2x.png&quot; alt=&quot;Conditionals, a comic from xkcd&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;&lt;a href=&quot;http:&#x2F;&#x2F;xkcd.com&#x2F;1652&quot;&gt;xkcd: Conditionals&lt;&#x2F;a&gt;&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;What if we want something else in case it’s not a banana? Instead of an &lt;code&gt;if (isBanana) [...]&lt;&#x2F;code&gt; with &lt;code&gt;else&lt;&#x2F;code&gt;, go for the &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Operators&#x2F;Conditional_Operator&quot;&gt;ternary operator&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myFruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;? &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is banana&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is other stuff&amp;quot;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myFruit
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Some additional but important advice I’d give regarding ternary expressions:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Make them as compound as possible.&lt;&#x2F;li&gt;
&lt;li&gt;Do NOT nest them. Don’t pretend the nesting is readable – it’s not even human to do that.&lt;&#x2F;li&gt;
&lt;li&gt;Don’t avoid writing &lt;code&gt;if&lt;&#x2F;code&gt; statements because you want to look smart.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;4-check-for-all-conditions&quot;&gt;4. Check for all conditions&lt;&#x2F;h3&gt;
&lt;p&gt;We’ve (finally) found out that checking for &lt;code&gt;isYellow&lt;&#x2F;code&gt; and &lt;code&gt;isSweet&lt;&#x2F;code&gt; 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?&lt;&#x2F;p&gt;
&lt;p&gt;Right. We then add more checks to the &lt;code&gt;isBanana&lt;&#x2F;code&gt; variable, and this time they’re ugly ones: they check whether the fruit is either from Brazil or Ecuador, both top banana producing countries.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;green&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;    sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    countries: [
&lt;&#x2F;span&gt;&lt;span&gt;        {
&lt;&#x2F;span&gt;&lt;span&gt;            name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Brazil&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;            topProducer: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; i&amp;#39;m brazilian and therefore biased
&lt;&#x2F;span&gt;&lt;span&gt;        },
&lt;&#x2F;span&gt;&lt;span&gt;        {
&lt;&#x2F;span&gt;&lt;span&gt;            name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ecuador&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;            topProducer: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;        },
&lt;&#x2F;span&gt;&lt;span&gt;    ],
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;sweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or just `fruit.sweet`
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;colors&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;color &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;countries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;name &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Brazil&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;countries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;name &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ecuador&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;do your stuff!11 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;now this is really a banana&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Did you see how big &lt;code&gt;isBanana&lt;&#x2F;code&gt; is getting? We’d have to start breaking lines in those &lt;code&gt;&amp;amp;&amp;amp;&lt;&#x2F;code&gt; to improve readability, which, personally, I don’t like doing.&lt;&#x2F;p&gt;
&lt;p&gt;If refactoring the booleans into new variables isn’t an option anymore, what about &lt;em&gt;storing the conditions in an array and testing every item for truthiness&lt;&#x2F;em&gt;?&lt;&#x2F;p&gt;
&lt;p&gt;Use the power of &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array&#x2F;every&quot;&gt;array’s &lt;code&gt;every&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;every&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Boolean&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or `x =&amp;gt; x === true`
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;Repetitive friendly reminder: don&#x27;t store every condition in a variable. Remember you can always add the condition itself to the array.&lt;&#x2F;p&gt;
&lt;p&gt;You can even turn that into a snippet:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;all &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;every&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Boolean&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;all&lt;&#x2F;span&gt;&lt;span&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;])
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;I don’t know how useful that looks for you, but, in everyday work, I really appreciate doing it.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;5-check-for-any-condition&quot;&gt;5. Check for any condition&lt;&#x2F;h3&gt;
&lt;p&gt;What if we’ve got crazy and we’re fine considering something a banana when it’s either yellow, Brazilian or sweet?&lt;&#x2F;p&gt;
&lt;p&gt;Use the power of &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Array&#x2F;some&quot;&gt;array’s &lt;code&gt;some&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;]&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Boolean&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or `x =&amp;gt; x === true`
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;Yeah, yeah, I know, you can just use the &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Operators&#x2F;Logical_Operators#Logical_OR_()&quot;&gt;OR operator&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;If any of them evaluates to true, profit! – it’s a banana. 🍌&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;any &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Boolean&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;any&lt;&#x2F;span&gt;&lt;span&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;])
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;In other words, being a Brazilian means you’re a banana! It doesn’t sound any bad to me honestly.&lt;&#x2F;p&gt;
&lt;p&gt;Pretty similar to &lt;a href=&quot;http:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;#either&quot;&gt;Ramda’s &lt;code&gt;either&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;. 😎&lt;&#x2F;p&gt;
&lt;h3 id=&quot;6-early-return&quot;&gt;6. Early return&lt;&#x2F;h3&gt;
&lt;p&gt;We want something special for when the banana is Brazilian! &lt;code&gt;else&lt;&#x2F;code&gt; conditions would do the trick, wouldn’t they?&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    colors: [&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;green&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span&gt;    sweet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    countries: [
&lt;&#x2F;span&gt;&lt;span&gt;        {
&lt;&#x2F;span&gt;&lt;span&gt;            name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Brazil&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;            topProducer: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; i&amp;#39;m brazilian and therefore biased
&lt;&#x2F;span&gt;&lt;span&gt;        },
&lt;&#x2F;span&gt;&lt;span&gt;        {
&lt;&#x2F;span&gt;&lt;span&gt;            name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ecuador&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;            topProducer: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;        },
&lt;&#x2F;span&gt;&lt;span&gt;    ],
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;sweet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;true &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or just `fruit.sweet`
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;colors&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;some&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;color &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;yellow&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;countries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;name &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Brazil&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;countries&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;name &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ecuador&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; first true case!
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;i am a brazilian banana i love football 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;else if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;i am an ecuadorian banana do not mess with me 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;else &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;a normal banana from somewhere else&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Alternatively, THOOOUGH, we can early return (nothing at all, i.e. &lt;code&gt;undefined&lt;&#x2F;code&gt;), which will make &lt;strong&gt;our code stops its flow at that point&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;i am a brazilian banana i love football 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; sTAAAAHP!!!1
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;i am an ecuadorian banana do not mess with me 🍌&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; DON&amp;#39;T GO ANY FURTHER, JAVASCRIPT!11
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or do, whatever
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;a normal banana from somewhere else&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;Those checks could also be refactored into a variable named &lt;code&gt;isBrazilianBanana&lt;&#x2F;code&gt;. I found it too much for this example though, so this is just a friendly reminder that your conditions can always be composable.&lt;&#x2F;p&gt;
&lt;p&gt;Keep in mind that early returns might make the flow of your program confusing. Different from when you’re using &lt;code&gt;else&lt;&#x2F;code&gt; conditions, it’s not explicit that the conditionals are from the same logical group anymore.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;7-check-for-the-same-variable&quot;&gt;7. Check for the same variable&lt;&#x2F;h3&gt;
&lt;p&gt;Let’s get the colour of the fruits! Each fruit has one.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;banana&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is yellow&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;    } &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;else if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is red&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;    } &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;else if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=== &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;orange&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;is orange&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;    }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;banana&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; is yellow
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;This code would benefit from early returns, and, of course, the &lt;code&gt;switch&lt;&#x2F;code&gt; statement.&lt;&#x2F;p&gt;
&lt;p&gt;Or we don’t. Because, alternatively, we can create a getter function (&lt;code&gt;getFruitColor&lt;&#x2F;code&gt;) that:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;inputs a key (&lt;code&gt;fruit&lt;&#x2F;code&gt;), and&lt;&#x2F;li&gt;
&lt;li&gt;outputs the value that was assigned to that key in a specific map (&lt;code&gt;fruitColors&lt;&#x2F;code&gt;).&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Like this:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruitColors &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    banana: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is yellow&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;apple&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is red&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    orange: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is orange&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruitColors&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;]
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;banana&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; fruitColors[&amp;#39;banana&amp;#39;] =&amp;gt; is yellow
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Simplifying, since that map isn’t useful outside of the getter itself anyway:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;({
&lt;&#x2F;span&gt;&lt;span&gt;    banana: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is yellow&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;apple&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is red&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    orange: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;is orange&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;}[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;]
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getFruitColor&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;banana&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; is yellow
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;This is a very common technique I first saw on a &lt;a href=&quot;https:&#x2F;&#x2F;javascriptweblog.wordpress.com&#x2F;2010&#x2F;03&#x2F;08&#x2F;caseagainstswitch&#x2F;&quot;&gt;blog post from Angus Croll&lt;&#x2F;a&gt; in 2010. I love the simplicity of it.&lt;&#x2F;p&gt;
&lt;p&gt;Nowadays there’s even more freedom with this technique, considering features such as &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Operators&#x2F;Object_initializer#Computed_property_names&quot;&gt;computed property names for objects&lt;&#x2F;a&gt;. But don’t get too creative with that! Go for what’s more readable and expressive for you &lt;strong&gt;AND&lt;&#x2F;strong&gt; the people you work with.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;appendix-currying-because-verbosity-isn-t-expressiveness&quot;&gt;Appendix: Currying, because verbosity isn’t expressiveness&lt;&#x2F;h3&gt;
&lt;p class=&quot;note&quot;&gt;This is an additional reading and requires familiarity with curried functions. For further reading on the currying technique, I recommend the &lt;a href=&quot;https:&#x2F;&#x2F;drboolean.gitbooks.io&#x2F;mostly-adequate-guide&#x2F;content&#x2F;ch4.html#cant-live-if-livin-is-without-you&quot;&gt;&quot;Currying&quot; chapter&lt;&#x2F;a&gt; of the book Mostly Adequate Guide to Functional Programming, or &lt;a href=&quot;https:&#x2F;&#x2F;www.sitepoint.com&#x2F;currying-in-functional-javascript&#x2F;&quot;&gt;A Beginner’s Guide to Currying&lt;&#x2F;a&gt;, as a more beginner-friendly introduction.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s reconsider:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;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&lt;&#x2F;li&gt;
&lt;li&gt;the &lt;code&gt;all&lt;&#x2F;code&gt; util from the 4th pattern.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;h4 id=&quot;check-for-all-conditions-revisited&quot;&gt;Check for all conditions, revisited&lt;&#x2F;h4&gt;
&lt;p&gt;Imagine if we had a lot of conditions for &lt;code&gt;isBanana&lt;&#x2F;code&gt;. We could use &lt;code&gt;&amp;amp;&amp;amp;&lt;&#x2F;code&gt; or even &lt;code&gt;all&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBanana&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; or
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;all&lt;&#x2F;span&gt;&lt;span&gt;([
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;),
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;),
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;),
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruit&lt;&#x2F;span&gt;&lt;span&gt;),
&lt;&#x2F;span&gt;&lt;span&gt;    ])
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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 &lt;code&gt;all&lt;&#x2F;code&gt; util, that could be boiled down to:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;all&lt;&#x2F;span&gt;&lt;span&gt;([&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isSweet&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isYellow&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isEcuadorian&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBrazilian&lt;&#x2F;span&gt;&lt;span&gt;])
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; no explicit fruit here, and still works!
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;bananas &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;fruits&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;filter&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isBanana&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Notice we’re not explicitly passing fruit anymore. How do we do that? By making &lt;code&gt;all&lt;&#x2F;code&gt; a curried function. There are some ways to achieve that, here’s one:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;all &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;conditions&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;currentItem&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;conditions&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;condition&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;condition&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;currentItem&lt;&#x2F;span&gt;&lt;span&gt;))&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;every&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Boolean&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It takes the array of conditions and returns a function that takes the current item and calls each condition with that (as &lt;em&gt;argument&lt;&#x2F;em&gt;!). At the end, we check whether they all evaluated to true. It’s not magic, it’s CURRYING!!!11&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;p&gt;That’s, of course, a simplistic implementation, which has costed me an array (from &lt;code&gt;map&lt;&#x2F;code&gt;). What’s important to get is how we play with &lt;strong&gt;function arguments under the hood&lt;&#x2F;strong&gt; to achieve currying.&lt;&#x2F;p&gt;
&lt;p&gt;You can curry your functions using &lt;a href=&quot;http:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;#all&quot;&gt;Ramda’s &lt;code&gt;curry&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; (or Lodash’s, whatever); or, if you’re interested on that as an util, &lt;a href=&quot;http:&#x2F;&#x2F;ramdajs.com&#x2F;docs&#x2F;#all&quot;&gt;Ramda’s &lt;code&gt;all&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ramda&#x2F;ramda&#x2F;blob&#x2F;master&#x2F;source&#x2F;all.js&quot;&gt;its source&lt;&#x2F;a&gt; are really worth-checking!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;final-considerations&quot;&gt;Final considerations&lt;&#x2F;h2&gt;
&lt;p&gt;By striving for conditionals as expressions other than statements, you write code in a &lt;strong&gt;functional&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;But if your code is fine with an &lt;code&gt;if&lt;&#x2F;code&gt; rather than an object lookup or a ternary operator, just stick to it.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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, &lt;strong&gt;compound them&lt;&#x2F;strong&gt;. Use your creativity to communicate well.&lt;&#x2F;p&gt;
&lt;p&gt;It’s a language, after all.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;A programming paradigm first introduced by Donald Knuth, with the goal of providing an alternative, human, perspective on the programmer’s motivation. &lt;a href=&quot;http:&#x2F;&#x2F;www.literateprogramming.com&#x2F;knuthweb.pdf&quot;&gt;Read the article&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;&lt;strong&gt;It may seem more magic than currying sometimes.&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>UI Components that Abstract Mistakes</title>
        <published>2017-10-14T18:06:00+00:00</published>
        <updated>2017-10-14T18:06:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/ui-components-that-abstract-mistakes/"/>
        <id>/blog/ui-components-that-abstract-mistakes/</id>
        
        <content type="html" xml:base="/blog/ui-components-that-abstract-mistakes/">&lt;p&gt;2017, October 14th.&lt;&#x2F;p&gt;
&lt;p&gt;A cloudy day &lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; of Autumn in Berlin, probably something else in the place you live, &lt;em&gt;and&lt;&#x2F;em&gt; you’ve read the same date twice &lt;em&gt;and&lt;&#x2F;em&gt; this introduction actually doesn’t matter. But let me tell you about something that matters.&lt;&#x2F;p&gt;
&lt;p&gt;Everything is made up of &lt;code&gt;&amp;lt;div&amp;gt;&lt;&#x2F;code&gt;s and &lt;code&gt;&amp;lt;span&amp;gt;&lt;&#x2F;code&gt;s again, utterly hidden behind abstractions proudly called components. No one seems to remember &lt;em&gt;(or do they?)&lt;&#x2F;em&gt; the difference between &lt;code&gt;p&lt;&#x2F;code&gt; and &lt;code&gt;span&lt;&#x2F;code&gt;, let alone the point of using &lt;code&gt;section&lt;&#x2F;code&gt; rather than &lt;code&gt;div&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;h2 id=&quot;creating-components&quot;&gt;Creating components&lt;&#x2F;h2&gt;
&lt;p class=&quot;note&quot;&gt;From now on, to explain my point, I&#x27;ll be assuming some familiarity with &lt;a href=&quot;https:&#x2F;&#x2F;reactjs.org&#x2F;&quot; title=&quot;React&quot;&gt;React&lt;&#x2F;a&gt; (a JavaScript library), although this applies to any kind of component abstraction.&lt;&#x2F;p&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;({ &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;onClick&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;children &lt;&#x2F;span&gt;&lt;span&gt;}) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;span class&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;my-horrible-button&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;onClick&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;onClick&lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;        &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i class&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;my-terrible-font-awesome-icon&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;i&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;        {&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;children&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;The user interface is then composed as the following:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Brazilian Bananas (1 kg)&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Sweet and healthy bananas!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Absolutely the best.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Button &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;onClick&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;alert&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;🍌&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Buy $0.99&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;It looks good! You were born for this, weren’t you?&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;It could also be a &lt;code&gt;&amp;lt;FormLabel &#x2F;&amp;gt;&lt;&#x2F;code&gt; or &lt;code&gt;&amp;lt;Paragraph &#x2F;&amp;gt;&lt;&#x2F;code&gt; as &lt;code&gt;span&lt;&#x2F;code&gt; elements, or &lt;code&gt;div&lt;&#x2F;code&gt;s all over that place. Although they all work, mistakes are abstracted in components.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;I specifically talk about markup as the mistake throughout this article, however it could be anything really. Components look inoffensive when you&#x27;re using them.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;the-web-isn-t-your-abstraction&quot;&gt;The web isn’t your abstraction&lt;&#x2F;h2&gt;
&lt;p&gt;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 &lt;code&gt;&amp;lt;Header&amp;gt;&lt;&#x2F;code&gt; now may be a &lt;code&gt;div&lt;&#x2F;code&gt;. Out of the abstraction, though, you’d think twice before going for a &lt;code&gt;div&lt;&#x2F;code&gt; to make a header – you’d rather use HTML5’s &lt;code&gt;header&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Because of the abstraction, output markup isn’t something we talk that much about anymore.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Did we really get the benefits of HTML5 and why new elements were introduced? Why &lt;code&gt;button&lt;&#x2F;code&gt;? &lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; What’s &lt;code&gt;header&lt;&#x2F;code&gt; useful for? Why should one use &lt;code&gt;section&lt;&#x2F;code&gt; at all?&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;By the way, do you know how many occurrences of &lt;code&gt;header&lt;&#x2F;code&gt;,  &lt;code&gt;article&lt;&#x2F;code&gt;,  &lt;code&gt;section&lt;&#x2F;code&gt; I&#x27;ve found on Netflix&#x27;s landing page? Zero.  It&#x27;s all div soup.&lt;&#x2F;p&gt;
&lt;p&gt;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 button&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;. (They will definitely get to know the &lt;code&gt;span&lt;&#x2F;code&gt; though, and that won’t help.)&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;https:&#x2F;&#x2F;imgs.xkcd.com&#x2F;comics&#x2F;tags.png&quot; alt=&quot;xkcd, comic #1444&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;&lt;a href=&quot;http:&#x2F;&#x2F;xkcd.com&#x2F;1144&quot;&gt;xkcd: Tags&lt;&#x2F;a&gt;&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;Also, it’s never been easier to write invalid markup without even realizing it! After React, it seems acceptable to place a &lt;code&gt;button&lt;&#x2F;code&gt; inside an anchor link, and even giant elephants inside &lt;code&gt;span&lt;&#x2F;code&gt;. Has anyone ever thought why they are considered invalid markup in the first place?&lt;&#x2F;p&gt;
&lt;h2 id=&quot;don-t-make-it-hard&quot;&gt;Don’t make it hard&lt;&#x2F;h2&gt;
&lt;p&gt;Browsers and assistive technologies are smarter than ever&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#4&quot;&gt;4&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, 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:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;people&lt;&#x2F;strong&gt;, who will be able to navigate around the website, skipping over navigation sections or quickly jumping from one article to another&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#5&quot;&gt;5&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;yourself&lt;&#x2F;strong&gt;, so you don’t have to reimplement default browser behaviours.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Therefore, please: don’t waste features that technologies try to give users, and developers, out of the box.&lt;&#x2F;p&gt;
&lt;p&gt;Remember who you write code for.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;The button element was first introduced in HTML4. (&lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Element&#x2F;button&quot;&gt;Source&lt;&#x2F;a&gt;)&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;3&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;3&lt;&#x2F;sup&gt;
&lt;p&gt;What’s wrong with using a non-semantic element as a button? Well, if the button is accessible, nothing really. But doing so demands &lt;a href=&quot;https:&#x2F;&#x2F;www.marcozehe.de&#x2F;2013&#x2F;04&#x2F;24&#x2F;easy-aria-tip-6-making-clickables-accessible&#x2F;&quot;&gt;extra work&lt;&#x2F;a&gt; that nobody is up for, besides that fact that &lt;a href=&quot;https:&#x2F;&#x2F;www.nczonline.net&#x2F;blog&#x2F;2013&#x2F;01&#x2F;29&#x2F;you-cant-create-a-button&#x2F;&quot;&gt;you can’t actually create a button&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;4&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;4&lt;&#x2F;sup&gt;
&lt;p&gt;Technologies may even process &lt;code&gt;&amp;lt;span class=&quot;tel&quot;&amp;gt;123-456-7890&amp;lt;&#x2F;span&amp;gt;&lt;&#x2F;code&gt; as a telephone, and allow for automatic dialling of it. See &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Microformat&quot;&gt;microformat&lt;&#x2F;a&gt; for more information.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;5&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;5&lt;&#x2F;sup&gt;
&lt;p&gt;Why not, right? After all, &lt;code&gt;article&lt;&#x2F;code&gt;s are for independent pieces of content, e.g., an user-submitted comment or a forum post. (&lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html5&#x2F;sections.html#the-article-element&quot;&gt;Source&lt;&#x2F;a&gt;)&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Tchau</title>
        <published>2017-05-13T16:12:00+00:00</published>
        <updated>2017-05-13T16:12:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/tchau/"/>
        <id>/blog/tchau/</id>
        
        <content type="html" xml:base="/blog/tchau/">&lt;p class=&quot;summary&quot;&gt;de Viamão, Brasil para Berlim, Alemanha. 🇩🇪&lt;&#x2F;p&gt;
&lt;blockquote class=&quot;epigraph -default-color&quot;&gt;
&lt;p&gt;– &lt;em&gt;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?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;– &lt;em&gt;Não, meu sonho sempre foi morar fora, do país.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;– &lt;strong&gt;O meu também é. Esse é o meu foco, pra sempre. Eu nunca tirei isso da mente.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Sonhos.&lt;&#x2F;strong&gt; 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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;blockquote&gt;
&lt;p&gt;Esse é o meu foco, pra sempre. Eu nunca tirei isso da mente.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;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:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;&lt;em&gt;([…] 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!)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;&lt;em&gt;Just got the call! […] That’s an important moment of my life for sure. I’m just, you know, happy. Thank you for this.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;The call&lt;&#x2F;em&gt;. 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. &lt;strong&gt;O meu visto estava aprovado.&lt;&#x2F;strong&gt; Ali estava, sem dúvidas, um momento importante da minha vida.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;Um sonho pode, afinal, terminar de 2 maneiras: sendo abandonado ou realizado.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;Hoje estou voando para Berlim, a capital da Alemanha, para fazer o que amo na &lt;a href=&quot;http:&#x2F;&#x2F;hellofresh.com&quot;&gt;HelloFresh&lt;&#x2F;a&gt;, que me ajudou em todo o processo. Sou grata por isso, por tudo.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Eu só jamais deixaria o sonho terminar do outro jeito, então eu topei tudo mesmo assim.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Choose Life  🇩🇪</title>
        <published>2017-05-12T19:15:00+00:00</published>
        <updated>2017-05-12T19:15:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/choose-life-in-berlin/"/>
        <id>/blog/choose-life-in-berlin/</id>
        
        <content type="html" xml:base="/blog/choose-life-in-berlin/">&lt;p&gt;Choose life. Choose a job. Choose a career. Choose relocation. Choose giving life a &lt;em&gt;fresh&lt;&#x2F;em&gt;&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt; 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 &lt;em&gt;(you never did anyway!)&lt;&#x2F;em&gt;. 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&#x2F;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.&lt;&#x2F;p&gt;
&lt;p&gt;But why wouldn’t I want to do a thing like that?&lt;&#x2F;p&gt;
&lt;p&gt;I chose to choose life. And the reasons? There are no reasons. Who needs reasons when you’ve got Berlin?&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;See &lt;a href=&quot;https:&#x2F;&#x2F;hellofresh.com&quot;&gt;HelloFresh&lt;&#x2F;a&gt;, which helped me relocating to Berlin.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;The entire essay is inspired by Mark Renton’s “Choose Life” speech from &lt;a href=&quot;http:&#x2F;&#x2F;www.imdb.com&#x2F;title&#x2F;tt0117951&quot;&gt;Trainspotting&lt;&#x2F;a&gt;, a movie that makes me think a lot about life choices.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Minimal Workspace on macOS</title>
        <published>2017-05-04T19:45:57+00:00</published>
        <updated>2017-05-04T19:45:57+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-minimal-workspace-on-macos/"/>
        <id>/blog/a-minimal-workspace-on-macos/</id>
        
        <content type="html" xml:base="/blog/a-minimal-workspace-on-macos/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;That’s the way I work on macOS. The minimal way.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;video class=&quot;aligncenter&quot; style=&quot;padding: 0; width: 100%;&quot; autoplay=&quot;autoplay&quot; loop=&quot;loop&quot;&gt;&lt;source type=&quot;video&#x2F;mp4&quot; src=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;macos_desktop.mp4&quot;&gt;&lt;&#x2F;video&gt;
&lt;figcaption&gt;My macOS desktop. This + Spotlight = life. 😎&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;In my workspace, there are no desktop items, app icons, time clock, battery percentage, transition delays, distracting animations, dashboards or context menus.&lt;&#x2F;p&gt;
&lt;p&gt;Too much information makes it easy for me to get stimulated and then distracted. So I like it minimal.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;recipe-for-the-minimal-ok-hand&quot;&gt;Recipe for the minimal 👌&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;strong&gt;Get rid of everything you can&lt;&#x2F;strong&gt;. Hide. Disable. Assume everything is useless, not useful. &lt;em&gt;(I actually use this approach for life.)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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 😍😍😍&lt;&#x2F;p&gt;
&lt;p&gt;Well, let’s begin! Follow the steps below and type the commands in a &lt;strong&gt;terminal&lt;&#x2F;strong&gt;. If you’re not familiar with a terminal, I’m pretty sure it’s possible to find those settings in “System Preferences” as well.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;(…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!!!!!!!!)&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h3 id=&quot;hide-your-desktop&quot;&gt;Hide your desktop&lt;&#x2F;h3&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.finder CreateDesktop&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; false
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;hide-your-dock&quot;&gt;Hide your dock&lt;&#x2F;h3&gt;
&lt;p&gt;It’ll be only shown when you hover it.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock autohide&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Other cool things you can do too to keep your dock clean are:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Minimize windows into their application&amp;#39;s icon
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock minimize-to-application&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Wipe all (default) app icons from the Dock
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock persistent-apps&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -array
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;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. 🤔&lt;&#x2F;p&gt;
&lt;p&gt;And… Launchpad. WHY?????? 😭&lt;&#x2F;p&gt;
&lt;h3 id=&quot;hide-your-menu-bar&quot;&gt;Hide your menu bar&lt;&#x2F;h3&gt;
&lt;p&gt;It’ll be only shown when you hover it.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write NSGlobalDomain _HIHideMenuBar&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;I really like this one, but if you feel it&#x27;s too radical for you, try hiding only menu bar icons with &lt;a href=&quot;(http:&#x2F;&#x2F;matthewpalmer.net&#x2F;vanilla&#x2F;&quot;&gt;Vanilla&lt;&#x2F;a&gt; (recommended) or &lt;a href=&quot;https:&#x2F;&#x2F;www.macbartender.com&quot;&gt;Bartender&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;disable-dashboard&quot;&gt;Disable dashboard&lt;&#x2F;h3&gt;
&lt;p&gt;Why does it even exist? 😒&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Disable Dashboard
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dashboard mcx-disabled&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Don&amp;#39;t show Dashboard as a Space
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock dashboard-in-overlay&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;disable-and-or-speed-up-animations&quot;&gt;Disable and&#x2F;or speed up animations&lt;&#x2F;h3&gt;
&lt;p&gt;Saving some time because I don’t think those really add anything to my user experience on macOS.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Disable window animations and Get Info animations
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.finder DisableAllAnimations&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; true
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Remove the auto-hiding Dock delay
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock autohide-delay&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -float&lt;&#x2F;span&gt;&lt;span&gt; 0
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Remove the animation when hiding&#x2F;showing the Dock
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock autohide-time-modifier&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -float&lt;&#x2F;span&gt;&lt;span&gt; 0
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Don&amp;#39;t animate opening applications from the Dock
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock launchanim&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -bool&lt;&#x2F;span&gt;&lt;span&gt; false
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;# Speed up Mission Control animations
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;defaults&lt;&#x2F;span&gt;&lt;span&gt; write com.apple.dock expose-animation-duration&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -float&lt;&#x2F;span&gt;&lt;span&gt; 0.1
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Finally, restart system stuff:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;bash&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-bash &quot;&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;killall&lt;&#x2F;span&gt;&lt;span&gt; Finder&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;killall&lt;&#x2F;span&gt;&lt;span&gt; Dock&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;killall&lt;&#x2F;span&gt;&lt;span&gt; SystemUIServer
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And that’s it! 🎉 Life-changing commands for sure. Now just don’t forget cleaning your actual desk too.&lt;&#x2F;p&gt;
&lt;p&gt;For more on the way I work, &lt;a href=&quot;http:&#x2F;&#x2F;github.com&#x2F;diessica&#x2F;dotfiles&quot;&gt;my dotfiles&lt;&#x2F;a&gt; are worth-checking!&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;Sorry for using too many emojis. Just shipped this feature here on my blog and I can&#x27;t help myself! 😬&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>I Travelled to Photographs</title>
        <published>2017-04-19T10:13:00+00:00</published>
        <updated>2017-04-19T10:13:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/archive/i-travelled-to-photographs/"/>
        <id>/blog/archive/i-travelled-to-photographs/</id>
        
        <content type="html" xml:base="/blog/archive/i-travelled-to-photographs/">&lt;p&gt;February was ending.&lt;&#x2F;p&gt;
&lt;p&gt;Usually, such thing would mean regular summer days. However, it wasn’t summer or even a regular day – this was something else.&lt;&#x2F;p&gt;
&lt;p&gt;February 25th was winter. In that cold afternoon, I ended up into a place I’ll never forget: photographs from my phone’s gallery.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;My steps were slow.&lt;&#x2F;p&gt;
&lt;p&gt;Red bricks erected the walls of houses built on top of an equally red-bricked avenue.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Houses ended themselves in grey roofing shingles. The roofs were all hipped. &lt;em&gt;Houses with hip roofs, gotta love them!&lt;&#x2F;em&gt;, I thought to myself. (Imagine the “V” letter upside down on top of a square – that’s a house with a hip roof.)&lt;&#x2F;p&gt;
&lt;p&gt;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. &lt;em&gt;Damn!&lt;&#x2F;em&gt; The whole picture looked like a painting, while the white sky worked as the canvas board on which all that was drawn.&lt;&#x2F;p&gt;
&lt;p&gt;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?&lt;&#x2F;p&gt;
&lt;p&gt;In an attempt to clear things up, I told myself what I believed that was true: &lt;em&gt;You’re just looking at photographs from your phone’s gallery. There’s no need to get this excited!&lt;&#x2F;em&gt; Ok. So I was home and looking at the “Wallpapers” album I had on my phone.&lt;&#x2F;p&gt;
&lt;p&gt;A moment later, I found myself facing a large and wonderful canal, in which someone was solitary paddling a boat to somewhere. &lt;em&gt;What a view.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Then, self-awareness hit me again: &lt;em&gt;Wait. Isn’t my smartphone in my pocket?&lt;&#x2F;em&gt; How could I be possibly looking at photographs on it?&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;p&gt;The boat was really leaving through the canal. The view wasn’t photographs. What was all that, then?&lt;&#x2F;p&gt;
&lt;p&gt;I got my phone from my pocket, turned off airplane mode, and opened the Maps app. &lt;em&gt;Come on, where am I?&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;“Noorder Amstelkanaal”, I read. &lt;em&gt;Wow.&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;p&gt;All of a sudden, February 25th was a cold winter in Amsterdam. My very first one.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;source media=&quot;(min-width: 63.125rem)&quot; srcset=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal.jpg&quot;&gt;&lt;source media=&quot;(min-width: 45rem)&quot; srcset=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal.jpg 2x, ..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal_medium.jpg 1x&quot; &gt;&lt;source media=&quot;(max-width: 45rem)&quot; srcset=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal.jpg 2x, ..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal_medium.jpg 1x&quot;&gt;&lt;img srcset=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal.jpg 2x, ..&#x2F;..&#x2F;media&#x2F;2017&#x2F;noorder-amstelkanaal_small.jpg 1x&quot; alt=&quot;Noorder Amstelkanaal&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Someone solitary paddling a boat to somewhere in Noorder Amstelkanaal, an Amsterdam&#x27;s canal.&lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;I guess I travelled to photographs.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Catalysis</title>
        <published>2017-04-13T11:27:00+00:00</published>
        <updated>2017-04-13T11:27:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/catalysis/"/>
        <id>/blog/catalysis/</id>
        
        <content type="html" xml:base="/blog/catalysis/">&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Lately, I’ve been particularly thinking about &lt;em&gt;catalysis&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;In Chemistry, catalysis is the acceleration of a reaction due to the participation of a substance – the “catalyst”.&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;strong&gt;lower the amount of energy required&lt;&#x2F;strong&gt; for the reaction to take place.&lt;&#x2F;p&gt;
&lt;figure class=&quot;text-center&quot;&gt;&lt;picture&gt;&lt;img src=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;catalysis-diagram.png&quot; srcset=&quot;..&#x2F;..&#x2F;media&#x2F;2017&#x2F;catalysis-diagram_2x.png 2x&quot; alt=&quot;Diagrama representando conhecimento como ele realmente é&quot;&gt;&lt;&#x2F;picture&gt;
&lt;figcaption&gt;Uncatalyzed reaction (solid) vs. catalyzed reaction (dashed). The highest point is the energy required for the reaction to happen. &lt;&#x2F;figcaption&gt;&lt;&#x2F;figure&gt;
&lt;p&gt;In a catalysed reaction, then, the same product is obtained for less energy. Bringing this concept to our lives is quite thought-provoking.&lt;&#x2F;p&gt;
&lt;p&gt;Sometimes it isn’t possible for us to achieve something because it demands &lt;em&gt;more&lt;&#x2F;em&gt; 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.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;What if the problem weren’t the lack of energy or time, but that we’re in need of &lt;em&gt;too much&lt;&#x2F;em&gt; of them in order to get things done? &lt;strong&gt;Having a catalyst would totally figure it out&lt;&#x2F;strong&gt;. Without something that pushes us forward, we’ll always require more energy for the product we want to get.&lt;&#x2F;p&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;p&gt;So it goes more like what &lt;em&gt;habitual and practical&lt;&#x2F;em&gt; 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?&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;So, what’s your catalyst?&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Don&#x27;t Blame it on React or Redux</title>
        <published>2017-03-18T13:49:00+00:00</published>
        <updated>2017-03-18T13:49:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/dont-blame-it-on-react-or-redux/"/>
        <id>/blog/dont-blame-it-on-react-or-redux/</id>
        
        <content type="html" xml:base="/blog/dont-blame-it-on-react-or-redux/">&lt;p&gt;What most people don’t know when they first get into Redux is that, just like React, Redux itself is meant to be &lt;strong&gt;simple&lt;&#x2F;strong&gt;. And as seen that simplicity is a goal, both React and Redux &lt;em&gt;won’t&lt;&#x2F;em&gt; and &lt;em&gt;don’t want&lt;&#x2F;em&gt; to tell you how to solve everything.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;React and Redux alone don’t do much for really complex web applications.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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 &lt;em&gt;too-much-boilerplate&lt;&#x2F;em&gt; problem that people complain.&lt;&#x2F;p&gt;
&lt;p&gt;But &lt;strong&gt;what motivates React and Redux to be that way?&lt;&#x2F;strong&gt; Some reasons I can think of are:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Both libraries are highly focused on their principles, not the built-in stuff. The efficiency of them is on the &lt;em&gt;why&lt;&#x2F;em&gt; and &lt;em&gt;how&lt;&#x2F;em&gt;, not the &lt;em&gt;what&lt;&#x2F;em&gt;.&lt;&#x2F;li&gt;
&lt;li&gt;They aim to be a great fit for both simple &lt;em&gt;and&lt;&#x2F;em&gt; large applications, so the “plug-in-play” approach is followed. (A framework wouldn’t ever do everything a programmer needs anyway…)&lt;&#x2F;li&gt;
&lt;li&gt;Diversity of solutions. Because React and Redux are more like “plug-in-play”, the “plugins” (tools, libraries, middlewares) will evolve by themselves. For instance: &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;mzabriskie&#x2F;axios&quot;&gt;axios&lt;&#x2F;a&gt;, a HTTP request library, will evolve in parallel to Redux itself – which certainly make things move forward faster!&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;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. &lt;strong&gt;React and Redux don’t really do much&lt;&#x2F;strong&gt;, but this is by design.&lt;&#x2F;p&gt;
&lt;p&gt;React is awesome not just because it makes it possible to turn a large and complex application into simple components.&lt;&#x2F;p&gt;
&lt;p&gt;Redux is awesome not just because it makes it effortless to deal with and share state throughout an application.&lt;&#x2F;p&gt;
&lt;p&gt;They’re also awesome because of &lt;strong&gt;their great and diverse ecosystem&lt;&#x2F;strong&gt;. So, when you buy into React or Redux, it’s better for you to buy into their ecosystem too.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>var that = this? Nah.</title>
        <published>2017-03-15T09:00:00+00:00</published>
        <updated>2017-03-15T09:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/var-that-this-nah/"/>
        <id>/blog/var-that-this-nah/</id>
        
        <content type="html" xml:base="/blog/var-that-this-nah/">&lt;p&gt;Tried JavaScript for some minutes? You probably already wrote the following.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;that &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;(Or one of its variants, such as &lt;code&gt;var self = this&lt;&#x2F;code&gt;.)&lt;&#x2F;p&gt;
&lt;p&gt;That’s a pretty common pattern when you found yourself in a situation where:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;you have a function nested inside of an object’s method, and&lt;&#x2F;li&gt;
&lt;li&gt;you want to access the object’s properties, but&lt;&#x2F;li&gt;
&lt;li&gt;JavaScript’s &lt;code&gt;this&lt;&#x2F;code&gt; is bound in an unexpected way.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;Workarounding unexpected callback scope is one of the main situations where developers write &lt;code&gt;var self = this&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s assume a piece of code with a callback function.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Requester&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;done&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; undefined
&lt;&#x2F;span&gt;&lt;span&gt;  });
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;You’d expect &lt;code&gt;this.data&lt;&#x2F;code&gt; to be the &lt;code&gt;data&lt;&#x2F;code&gt; argument. Yet, JavaScript tells you that it is actually &lt;code&gt;undefined&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;So, because Stack Overflow says so, you do the following:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Requester&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;var &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;self &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; NOOOOOoOooo
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;done&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;self&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data);
&lt;&#x2F;span&gt;&lt;span&gt;  });
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;And never stops doing it in your life.&lt;&#x2F;p&gt;
&lt;p&gt;Still do it? I’m flattered to tell you that &lt;strong&gt;you don’t need that extra variable anymore&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;arrow-functions&quot;&gt;Arrow functions&lt;&#x2F;h2&gt;
&lt;p&gt;Go with &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Functions&#x2F;Arrow_functions&quot;&gt;arrow functions&lt;&#x2F;a&gt; instead. Besides having a shorter syntax, arrow functions bind to the parent scope by default.&lt;&#x2F;p&gt;
&lt;p&gt;The scope that was firstly intuitive to you will work as expected now.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Requester&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;done&lt;&#x2F;span&gt;&lt;span&gt;(() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; intuitive as hell!
&lt;&#x2F;span&gt;&lt;span&gt;  });
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;You can count on them most of the time, but they also have unexpected behaviour in more advanced cases. After all, you&#x27;re dealing with the `this` keyword. So don&#x27;t just go around refactoring all anonymous functions into arrow ones and expecting everything to work.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;you-may-also-bind&quot;&gt;You may also &lt;code&gt;.bind()&lt;&#x2F;code&gt;!&lt;&#x2F;h2&gt;
&lt;p&gt;If for some reason (such as &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Functions&#x2F;Arrow_functions#Browser_compatibility&quot;&gt;no support for IE&lt;&#x2F;a&gt;) you can’t use them, check JavaScript’s &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Function&#x2F;bind&quot;&gt;&lt;code&gt;bind&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;. It’s not as awesome as arrow functions, but does the job.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;Requester&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;req&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;done&lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;      &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;data);
&lt;&#x2F;span&gt;&lt;span&gt;    }&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;bind&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  );
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Shared Variables Between JavaScript and CSS</title>
        <published>2017-01-15T15:00:00+00:00</published>
        <updated>2017-01-15T15:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/shared-variables-between-javascript-and-css/"/>
        <id>/blog/shared-variables-between-javascript-and-css/</id>
        
        <content type="html" xml:base="/blog/shared-variables-between-javascript-and-css/">&lt;p&gt;Because it assures consistency throughout the project and avoids &lt;a href=&quot;https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;Magic_number_(programming)&quot;&gt;magic numbers&lt;&#x2F;a&gt;, sharing variables between JavaScript and CSS code may help you to keep your project codebase tidy and easier to reason about.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;For this article, when talking about CSS, the word “variable” may mean &lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css-variables&#x2F;&quot;&gt;custom property&lt;&#x2F;a&gt; or &lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;2016&#x2F;WD-mediaqueries-4-20160126&#x2F;#custom-mq&quot;&gt;custom media query&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h2 id=&quot;getting-started&quot;&gt;Getting Started&lt;&#x2F;h2&gt;
&lt;p&gt;First, create a &lt;strong&gt;object&lt;&#x2F;strong&gt; containing your variables and export it.&lt;&#x2F;p&gt;
&lt;p&gt;My JS file containing the object will be called &lt;code&gt;variables.js&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  mainColor: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#000&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  secondaryColor: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#fff000&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  fullHeight: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;100vh&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;};
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;No magic is needed to use those variables in your JS files – just &lt;code&gt;import&lt;&#x2F;code&gt; them when you need it. But in order to communicate those variables to your CSS files and use them with &lt;code&gt;var()&lt;&#x2F;code&gt;, some magic is needed.&lt;&#x2F;p&gt;
&lt;p&gt;For this, I will be using &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;&quot;&gt;cssnext&lt;&#x2F;a&gt;, a PostCSS plugin, and injecting that object into our stylesheets as &lt;strong&gt;custom properties&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Webpack example:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;cssNext &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;postcss-cssnext&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myVars &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;variables&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;module&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;exports &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Entry, loaders, plugins...
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;postcss&lt;&#x2F;span&gt;&lt;span&gt;: () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;[
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;cssNext&lt;&#x2F;span&gt;&lt;span&gt;({
&lt;&#x2F;span&gt;&lt;span&gt;      features: {
&lt;&#x2F;span&gt;&lt;span&gt;        customProperties: { variables: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myVars &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;      },
&lt;&#x2F;span&gt;&lt;span&gt;    }),
&lt;&#x2F;span&gt;&lt;span&gt;  ],
&lt;&#x2F;span&gt;&lt;span&gt;};
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Since I’m just using &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;MoOx&#x2F;postcss-cssnext&quot;&gt;postcss-cssnext&lt;&#x2F;a&gt; API, it’s also possible to do it with the build tool of your choice. Check &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;usage&#x2F;#features&quot;&gt;docs on passing options to cssnext features&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h2 id=&quot;getting-real-world-with-breakpoints&quot;&gt;Getting Real-world with Breakpoints&lt;&#x2F;h2&gt;
&lt;p&gt;Sharing breakpoints between JavaScript and your stylesheets is a great real-world example.&lt;&#x2F;p&gt;
&lt;p&gt;It’s time for &lt;code&gt;variables.js&lt;&#x2F;code&gt; to grow then!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;export &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;properties &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  mainColor: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#000&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  secondaryColor: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#fff000&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  fullHeight: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;100vh&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;};
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;export &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;mediaQueries &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  secondaryColor: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#fff000&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  desktop: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;(min-width: 1024px)&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  tablet: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;(min-width: 768px)&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  mobile: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;(min-width: 320px)&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;};
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Because it’s not possible to create a media query containing a custom property, we need to inject &lt;code&gt;mediaQueries&lt;&#x2F;code&gt; as &lt;strong&gt;custom media queries&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Let’s update the previous Webpack example in order to let cssnext to know about both custom media queries and properties.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;cssNext &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;postcss-cssnext&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;properties&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;mediaQueries &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;variables&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;module&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;exports &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Entry, loaders, plugins...
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;postcss&lt;&#x2F;span&gt;&lt;span&gt;: () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;[
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;cssNext&lt;&#x2F;span&gt;&lt;span&gt;({
&lt;&#x2F;span&gt;&lt;span&gt;      features: {
&lt;&#x2F;span&gt;&lt;span&gt;        customProperties: { variables: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;properties &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;        customMedia: { extensions: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;mediaQueries &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;      },
&lt;&#x2F;span&gt;&lt;span&gt;    }),
&lt;&#x2F;span&gt;&lt;span&gt;  ],
&lt;&#x2F;span&gt;&lt;span&gt;};
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Done! Some usage examples for CSS, JS and even React are provided below.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h3&gt;
&lt;h4 id=&quot;css-example&quot;&gt;CSS Example&lt;&#x2F;h4&gt;
&lt;p&gt;Using custom properties and custom media queries according to settings from &lt;code&gt;variables.js&lt;&#x2F;code&gt; file.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;.banner &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;background&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;red&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--fullHeight&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Custom property *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  @media (&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--desktop&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Custom media query *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;javascript-example&quot;&gt;JavaScript example&lt;&#x2F;h4&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Example below uses &lt;a href=&quot;http:&#x2F;&#x2F;wicky.nillia.ms&#x2F;enquire.js&#x2F;&quot;&gt;enquire.js&lt;&#x2F;a&gt; library.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;enquire &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;enquire.js&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;customMedia &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;variables&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;enquire
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;register&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;customMedia&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;tablet&lt;&#x2F;span&gt;&lt;span&gt;, () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Matched tablet resolution&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;  })
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;register&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;customMedia&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;mobile&lt;&#x2F;span&gt;&lt;span&gt;, () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Matched mobile resolution&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;  });
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;react-example&quot;&gt;React example&lt;&#x2F;h4&gt;
&lt;p&gt;Rendering a component only on desktop resolutions.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Example below uses &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;contra&#x2F;react-responsive&quot;&gt;react-responsive&lt;&#x2F;a&gt; library.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;MediaQuery &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react-responsive&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;customMedia &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;variables&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;DesktopOnlyComponent&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* (min-width: 1024px), according to variables.js *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;MediaQuery &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;query&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;customMedia&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;desktop&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;My desktop-only component!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;MediaQuery&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  );
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;final-words&quot;&gt;Final Words&lt;&#x2F;h2&gt;
&lt;p&gt;A non-consistent front-end codebase is just messy.&lt;&#x2F;p&gt;
&lt;p&gt;I really use this technique on everyday work, and it’s a cheap way to significantly improve the quality of the front-end codebase.&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>How to Exclude CSS, Images, Anything from Unit Tests</title>
        <published>2016-11-19T09:54:29+00:00</published>
        <updated>2016-11-19T09:54:29+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/how-to-exclude-css-images-anything-from-unit-tests/"/>
        <id>/blog/how-to-exclude-css-images-anything-from-unit-tests/</id>
        
        <content type="html" xml:base="/blog/how-to-exclude-css-images-anything-from-unit-tests/">&lt;div class=&quot;summary&quot;&gt;
&lt;p&gt;Your app needs all those &lt;code&gt;require&lt;&#x2F;code&gt;, but your unit tests may not.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;When developing web applications, we deal with assets that our JavaScript tests don’t have to be aware of.&lt;&#x2F;p&gt;
&lt;p&gt;If using Webpack, which enables different imports in your JavaScript files, you’ve configured &lt;a href=&quot;https:&#x2F;&#x2F;webpack.github.io&#x2F;docs&#x2F;loaders.html&quot;&gt;loaders&lt;&#x2F;a&gt; that your test runner probably know nothing about. Therefore, that SVG image in your React component and the &lt;code&gt;import&lt;&#x2F;code&gt;ed CSS will both be parsed like JavaScript in your tests. A lot of confusing errors will be thrown, of course.&lt;&#x2F;p&gt;
&lt;p&gt;So let’s learn to exclude anything your unit tests, from styles (CSS, Sass), images (PNG, SVG), to other specific imports (like &lt;a href=&quot;https:&#x2F;&#x2F;diessi.ca&#x2F;blog&#x2F;svg-images-as-react-components-with-webpack&#x2F;&quot;&gt;SVG images as React components&lt;&#x2F;a&gt;).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;hook-your-require-calls&quot;&gt;Hook your &lt;code&gt;require()&lt;&#x2F;code&gt; calls&lt;&#x2F;h2&gt;
&lt;p&gt;By intercepting &lt;code&gt;require()&lt;&#x2F;code&gt; calls, you can make your testing framework ignore &lt;strong&gt;what you want&lt;&#x2F;strong&gt; to be ignored &lt;strong&gt;the way you want&lt;&#x2F;strong&gt; it to be ignored.&lt;&#x2F;p&gt;
&lt;p&gt;It’s also useful in isomorphic setups.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;return-an-empty-module&quot;&gt;Return an empty module&lt;&#x2F;h3&gt;
&lt;p&gt;It all comes to returning an empty module for unwanted imports. It looks like this:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;module&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;exports &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;jest&quot;&gt;Jest&lt;&#x2F;h3&gt;
&lt;p&gt;For Jest, configure &lt;a href=&quot;https:&#x2F;&#x2F;facebook.github.io&#x2F;jest&#x2F;docs&#x2F;configuration.html#modulenamemapper-object-string-string&quot;&gt;moduleNameMapper&lt;&#x2F;a&gt; to return the empty module for specific extensions. Example:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;jest&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;moduleNameMapper&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;\\&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;.(css|jpg|png)$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;lt;rootDir&amp;gt;&#x2F;empty-module.js&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;other-testing-frameworks&quot;&gt;Other testing frameworks&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;require-hacker&quot;&gt;require-hacker&lt;&#x2F;a&gt; is an option for hooking &lt;code&gt;require()&lt;&#x2F;code&gt; calls.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;You can also use built-in compilers (like moduleNameMapper in Jest or &lt;a href=&quot;https:&#x2F;&#x2F;mochajs.org&#x2F;#compilers&quot;&gt;Mocha compilers&lt;&#x2F;a&gt;), or even only import &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;bkonkle&#x2F;ignore-styles&quot;&gt;ignore-styles&lt;&#x2F;a&gt; into your testing framework (which is preconfigured).&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;I’ll stick to require-hacker and custom configuration because there’s more flexibility.&lt;&#x2F;p&gt;
&lt;p&gt;Get it from npm:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;npm&lt;&#x2F;span&gt;&lt;span&gt; install require-hacker&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --save-dev
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;configure&quot;&gt;Configure&lt;&#x2F;h4&gt;
&lt;p&gt;Create a JavaScript file and set custom handlers for specific extensions using require-hacker’s &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;halt-hammerzeit&#x2F;require-hacker#hookfile_extension-resolve&quot;&gt;hook()&lt;&#x2F;a&gt; method.&lt;&#x2F;p&gt;
&lt;p&gt;Assuming you want to ignore CSS and PNG files, always return an empty module for them:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;requireHacker &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;require-hacker&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;requireHacker&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;hook&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;png&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;module.exports = &amp;quot;&amp;quot;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;requireHacker&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;hook&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;css&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;module.exports = &amp;quot;&amp;quot;&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Because you’re smart, you’ll store all extensions in a variable and &lt;code&gt;forEach&lt;&#x2F;code&gt; them, so there’s no need to repeat yourself. &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;diessica&#x2F;e6a6ea601d2b19cdcc6881197b6b5c8d&quot;&gt;Example&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h4 id=&quot;import-into-your-test-runner&quot;&gt;Import into your test runner&lt;&#x2F;h4&gt;
&lt;p&gt;Let your favourite testing framework know about the &lt;code&gt;require&lt;&#x2F;code&gt; hacking! Some examples, assuming a &lt;code&gt;ignore-utils.js&lt;&#x2F;code&gt; file:&lt;&#x2F;p&gt;
&lt;h5 id=&quot;mocha&quot;&gt;Mocha&lt;&#x2F;h5&gt;
&lt;p&gt;Add to your &lt;a href=&quot;https:&#x2F;&#x2F;mochajs.org&#x2F;#mochaopts&quot;&gt;mocha.opts&lt;&#x2F;a&gt;, or use the &lt;code&gt;--require&lt;&#x2F;code&gt; flag:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;mocha&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --require&lt;&#x2F;span&gt;&lt;span&gt; .&#x2F;ignore-utils
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h5 id=&quot;ava&quot;&gt;ava&lt;&#x2F;h5&gt;
&lt;p&gt;Add to your &lt;code&gt;package.json&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;ava&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;require&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: [
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;.&#x2F;ignore-utils&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  ]
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now some files will be treated like shit in your JavaScript tests – which is AWESOME!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;bonus-react-null-component&quot;&gt;Bonus: React null component&lt;&#x2F;h2&gt;
&lt;p&gt;You don’t need to load that boring SVG icon of a house to test that critical feature in a React component, right?&lt;&#x2F;p&gt;
&lt;p&gt;&lt;em&gt;Right.&lt;&#x2F;em&gt; In case you’re using &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;sairion&#x2F;svg-inline-loader&quot;&gt;svg-inline-loader&lt;&#x2F;a&gt;, 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.&lt;&#x2F;p&gt;
&lt;p&gt;So, instead of returning an empty module for SVG files, return an empty React component. Let’s set a custom handler for that!&lt;&#x2F;p&gt;
&lt;h3 id=&quot;configure-1&quot;&gt;Configure&lt;&#x2F;h3&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;This example uses require-hacker. For Jest, export a React null component and set it in &lt;code&gt;moduleNameMapper&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;requireHacker &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;require-hacker&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;reactNullComponent &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;`
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;  require(&amp;#39;react&amp;#39;).createClass({
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;    render() {
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;      return null;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;    }
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;  })
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;`&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;requireHacker&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;hook&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, () &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;`module.exports = ${&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;reactNullComponent&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;}`&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;I’ve spent a lot of time figuring out how to make everything work, because:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;At the beginning, it was quite confusing to get what was clearly going on.&lt;&#x2F;li&gt;
&lt;li&gt;There’s a ton of options out there (Webpack null loaders; &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;bkonkle&#x2F;ignore-styles&quot;&gt;ignore-styles&lt;&#x2F;a&gt;, which also provide custom handlers; &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;morlay&#x2F;babel-plugin-transform-require-ignore&quot;&gt;babel-plugin-transform-require-ignore&lt;&#x2F;a&gt;…).&lt;&#x2F;li&gt;
&lt;li&gt;I didn’t want to handle all the ignored extensions the same say.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;Yeah… Sometimes our JavaScript unit tests just know too much.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Bit on Random Numbers in JavaScript</title>
        <published>2016-11-15T16:50:00+00:00</published>
        <updated>2016-11-15T16:50:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-bit-on-random-numbers-in-javascript/"/>
        <id>/blog/a-bit-on-random-numbers-in-javascript/</id>
        
        <content type="html" xml:base="/blog/a-bit-on-random-numbers-in-javascript/">&lt;p&gt;&lt;code&gt;Math.random()&lt;&#x2F;code&gt; is a JavaScript function that outputs a random number in the range &lt;code&gt;[0, 1)&lt;&#x2F;code&gt; (from 0 up to 1, but doesn’t include 1). It’s the main source of randomness in JavaScript.&lt;&#x2F;p&gt;
&lt;p&gt;Although the output looks random, it’s actually not.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;behind-the-scenes&quot;&gt;Behind the Scenes&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;code&gt;Math.random()&lt;&#x2F;code&gt; uses a &lt;strong&gt;pseudo-random number generator&lt;&#x2F;strong&gt; (PRNG). Those algorithms work completely determined by a initial value called “seed”.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Given a seed, the sequence of random numbers is deterministic.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Every PRNG requires a seed, which &lt;em&gt;generally&lt;&#x2F;em&gt; is the current system time in milliseconds. Yeah, simple as that.&lt;&#x2F;p&gt;
&lt;p&gt;Speaking of JavaScript language, the PRNG algorithm to deal with the seed is left up to implementors&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;. The algorithm powering V8’s &lt;code&gt;Math.random()&lt;&#x2F;code&gt; was very poor quality until last year (2015), and implementations between engines were pretty inconsistent.&lt;&#x2F;p&gt;
&lt;p&gt;But the scenario has changed. Currently, JavaScript Engines such as SpiderMonkey, V8, Webkit and Chakra all implements &lt;a href=&quot;https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Xorshift&quot;&gt;Xorshift128+&lt;&#x2F;a&gt; algorithm&lt;sup class=&quot;footnote-reference&quot;&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;, faster than the previous one.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;secure-randomness&quot;&gt;Secure Randomness&lt;&#x2F;h2&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;WebCryptoAPI&#x2F;&quot;&gt;Web Cryptography API&lt;&#x2F;a&gt; introduces &lt;code&gt;window.crypto.getRandomValues&lt;&#x2F;code&gt;, a cryptographically secure pseudo-random number generator (CSPNG), whose output is impossible or highly improbable to distinguish from a truly random one.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;example&quot;&gt;Example&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Array containing two 32-bit integers
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;arr &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= new &lt;&#x2F;span&gt;&lt;span&gt;Int32Array(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;2&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Override array integers with random values
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;random &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;crypto&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getRandomValues&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;arr&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;for &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;lt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;random&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;length; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;++&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;random&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;i&lt;&#x2F;span&gt;&lt;span&gt;]);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;Of course it comes at a performance cost, so make sure you really need secure random numbers in your program.&lt;&#x2F;a&gt;
&lt;h2 id=&quot;conclusion&quot;&gt;Conclusion&lt;&#x2F;h2&gt;
&lt;p&gt;If you need apparent randomness–less and speed, you’d probably better off using &lt;code&gt;Math.random()&lt;&#x2F;code&gt;. If you need high-quality randomness, such as in cryptography applications, hashing or statistics, go for a CSPNG such as &lt;code&gt;window.crypto.getRandomValues&lt;&#x2F;code&gt; instead.&lt;&#x2F;p&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;1&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;1&lt;&#x2F;sup&gt;
&lt;p&gt;See &lt;a href=&quot;https:&#x2F;&#x2F;tc39.github.io&#x2F;ecma262&#x2F;#sec-math.random&quot;&gt;ES2015 spec on &lt;code&gt;Math.random()&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;div class=&quot;footnote-definition&quot; id=&quot;2&quot;&gt;&lt;sup class=&quot;footnote-definition-label&quot;&gt;2&lt;&#x2F;sup&gt;
&lt;p&gt;Sources: &lt;a href=&quot;https:&#x2F;&#x2F;bugzilla.mozilla.org&#x2F;show_bug.cgi?id=322529&quot;&gt;SpiderMonkey&lt;&#x2F;a&gt;, &lt;a href=&quot;http:&#x2F;&#x2F;v8project.blogspot.com.br&#x2F;2015&#x2F;12&#x2F;theres-mathrandom-and-then-theres.html&quot;&gt;V8&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;bugs.webkit.org&#x2F;show_bug.cgi?id=151641&quot;&gt;Webkit&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Microsoft&#x2F;ChakraCore&#x2F;pull&#x2F;145&quot;&gt;Chakra&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Horizontal and Vertical Align Anything with CSS</title>
        <published>2016-11-06T19:10:01+00:00</published>
        <updated>2016-11-06T19:10:01+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/horizontal-and-vertical-align-anything-with-css/"/>
        <id>/blog/horizontal-and-vertical-align-anything-with-css/</id>
        
        <content type="html" xml:base="/blog/horizontal-and-vertical-align-anything-with-css/">&lt;p&gt;Using &lt;code&gt;translate()&lt;&#x2F;code&gt; is one of the easiest ways^[Flexbox also provides a great solution. See &lt;a href=&quot;https:&#x2F;&#x2F;philipwalton.github.io&#x2F;solved-by-flexbox&#x2F;demos&#x2F;vertical-centering&#x2F;&quot;&gt;Solved by Flexbox: Vertical Centering&lt;&#x2F;a&gt;] to instantly horizontal and vertical align any element with CSS without knowing its dimensions.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;vertical-align&quot;&gt;Vertical Align&lt;&#x2F;h2&gt;
&lt;p&gt;You probably know the “&lt;a href=&quot;http:&#x2F;&#x2F;zerosixthree.se&#x2F;vertical-align-anything-with-just-3-lines-of-css&#x2F;&quot;&gt;vertical align with just 3 lines of CSS&lt;&#x2F;a&gt;” trick, which uses &lt;code&gt;translateY()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;.my-element &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;position&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;absolute&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;top&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;transform&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;translateY&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;-50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;horizontal-align&quot;&gt;Horizontal Align&lt;&#x2F;h2&gt;
&lt;p&gt;But did you know it’s also possible to use &lt;code&gt;translate()&lt;&#x2F;code&gt; to horizontal align elements?&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;.my-element &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;position&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;absolute&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;left&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;transform&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;translateX&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;-50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;vertical-and-horizontal-align&quot;&gt;Vertical and Horizontal Align&lt;&#x2F;h2&gt;
&lt;p&gt;​ Mixing both, we can horizontal and vertical align anything!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;.my-element &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;position&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;absolute&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;left&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;top&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;transform&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;translateX&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;-50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;translateY&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;-50&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;%&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;See &lt;a href=&quot;http:&#x2F;&#x2F;output.jsbin.com&#x2F;dusesi&quot;&gt;JSBin&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Better ES2015+ and JSX Workflow in VS Code</title>
        <published>2016-10-30T00:00:00+00:00</published>
        <updated>2016-10-30T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-better-es2015-and-jsx-workflow-in-vs-code/"/>
        <id>/blog/a-better-es2015-and-jsx-workflow-in-vs-code/</id>
        
        <content type="html" xml:base="/blog/a-better-es2015-and-jsx-workflow-in-vs-code/">&lt;p&gt;Lately I’ve been trying &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&quot;&gt;VS Code&lt;&#x2F;a&gt;, a code editor based on &lt;a href=&quot;http:&#x2F;&#x2F;electron.atom.io&#x2F;&quot;&gt;Electron&lt;&#x2F;a&gt;. Since then, it really surprised me and it’s been a nice coding experience.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;but&quot;&gt;But…&lt;&#x2F;h2&gt;
&lt;p&gt;By default, JS syntax highlighting and ES2015+ and JSX support don’t work as expected.&lt;&#x2F;p&gt;
&lt;p&gt;I’ve tried to workaround it by using:&lt;&#x2F;p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=ms-vscode.js-atom-grammar&quot;&gt;Atom grammar&lt;&#x2F;a&gt;. JSX support was pretty bad.&lt;&#x2F;li&gt;
&lt;li&gt;A &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=ms-vscode.typescript-javascript-grammar&quot;&gt;development branch of VS Code colorization&lt;&#x2F;a&gt;, which is delivered as an extension. Finally got JSX to work properly, but syntax highlighting was still missing something.&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;So, no success.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;improving-your-vs-code-workflow&quot;&gt;Improving your VS Code workflow&lt;&#x2F;h2&gt;
&lt;p&gt;After much trial and error, I came up with a better JS workflow in VS Code.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;1-fix-js-syntax-highlighting&quot;&gt;1. Fix JS syntax highlighting&lt;&#x2F;h3&gt;
&lt;p&gt;Install the &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=joshpeng.sublime-babel-vscode&quot;&gt;Sublime Babel extension&lt;&#x2F;a&gt; and make sure you’re using one of the suggested color themes. (I like &lt;a href=&quot;https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=joshpeng.theme-charcoal-oceanicnext&quot;&gt;Charcoal Oceanic Next&lt;&#x2F;a&gt;!)&lt;&#x2F;p&gt;
&lt;h3 id=&quot;2-use-javascript-react-in-js-files&quot;&gt;2. Use “JavaScript React” in .js files&lt;&#x2F;h3&gt;
&lt;p&gt;VS Code only uses “JavaScript React” syntax in &lt;code&gt;.jsx&lt;&#x2F;code&gt; files. Add the following to your User (or Workspace) Settings:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;files.associations&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;*.js&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;javascriptreact&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;3-enable-emmet-for-jsx&quot;&gt;3. Enable Emmet for JSX&lt;&#x2F;h3&gt;
&lt;p&gt;(That’s a plus!)&lt;&#x2F;p&gt;
&lt;p&gt;VS Code uses Emmet by default, but doesn’t enable it for &lt;code&gt;.jsx&lt;&#x2F;code&gt; files. Add the following to your User Settings:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;json&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-json &quot;&gt;&lt;code class=&quot;language-json&quot; data-lang=&quot;json&quot;&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;emmet.syntaxProfiles&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;javascript&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;jsx&lt;&#x2F;span&gt;&lt;span style=&quot;color:#eeeeee;&quot;&gt;&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;let-s-improve-vs-code&quot;&gt;Let’s improve VS Code!&lt;&#x2F;h2&gt;
&lt;p&gt;There has been &lt;a href=&quot;https:&#x2F;&#x2F;code.visualstudio.com&#x2F;updates#_preview-typescript-javascript-grammar&quot;&gt;improvements for JS grammar&lt;&#x2F;a&gt; already, but it’s still not perfect.&lt;&#x2F;p&gt;
&lt;p&gt;Fortunately, VS Code is an &lt;strong&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Microsoft&#x2F;vscode&quot;&gt;open source project&lt;&#x2F;a&gt;&lt;&#x2F;strong&gt; and can be improved by developers like us! Let’s not leave it like this. Give useful feedback and help!&lt;&#x2F;p&gt;
&lt;p&gt;Happy coding!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>I&#x27;m Tired of Beautiful-Looking User Interfaces</title>
        <published>2016-10-23T12:50:35+00:00</published>
        <updated>2016-10-23T12:50:35+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/i-m-tired-of-beautiful-looking-interfaces/"/>
        <id>/blog/i-m-tired-of-beautiful-looking-interfaces/</id>
        
        <content type="html" xml:base="/blog/i-m-tired-of-beautiful-looking-interfaces/">&lt;div class=&quot;summary&quot;&gt;
&lt;p&gt;What if the user interface is more beautiful-looking than &lt;strong&gt;usable&lt;&#x2F;strong&gt;, &lt;strong&gt;understandable&lt;&#x2F;strong&gt;, and &lt;strong&gt;intuitive&lt;&#x2F;strong&gt;?&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Sure we like things that look nice, but looking nice doesn’t compensate a bad product design. &lt;strong&gt;Visual communication should not compensate flaws.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;And I’m tired of beautiful-looking interfaces.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Encadeamento de Métodos em JavaScript</title>
        <published>2016-08-06T16:11:32+00:00</published>
        <updated>2016-08-06T16:11:32+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/encadeamento-de-metodos-em-javascript/"/>
        <id>/blog/encadeamento-de-metodos-em-javascript/</id>
        
        <content type="html" xml:base="/blog/encadeamento-de-metodos-em-javascript/">&lt;p&gt;Popular em diversas bibliotecas JavaScript, o encadeamento de métodos (&lt;em&gt;“method chaining”&lt;&#x2F;em&gt;) é uma técnica usada para invocar diversos métodos em um mesmo objeto.&lt;&#x2F;p&gt;
&lt;p&gt;Com o objetivo de &lt;strong&gt;melhorar a legibilidade do código&lt;&#x2F;strong&gt;, a técnica é vastamente utilizada na API da jQuery, o que certamente influenciou na popularidade da biblioteca.&lt;&#x2F;p&gt;
&lt;p&gt;Se você já utilizou jQuery, o estilo do código abaixo pode ser familiar:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#my-element&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;css&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;background&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;purple&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;animate&lt;&#x2F;span&gt;&lt;span&gt;({ height: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;250 &lt;&#x2F;span&gt;&lt;span&gt;})
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;find&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;input&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;fadeIn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;200&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;val&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;end&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;No exemplo acima, uma única declaração faz várias coisas. No entanto, uma boa prática com &lt;em&gt;method chaining&lt;&#x2F;em&gt; é &lt;strong&gt;fazer somente uma ação por declaração&lt;&#x2F;strong&gt;. ;-)&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;Perceba que vários métodos são invocados no objeto &lt;code&gt;$(&#x27;#my-element&#x27;)&lt;&#x2F;code&gt;, sem a necessidade de repetí-lo. Já sem &lt;em&gt;Method Chaining&lt;&#x2F;em&gt;, é necessário fazer a referência diversas vezes:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myElement &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#my-element&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myElement&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;css&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;background&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;purple&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myElement&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;height&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;100&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myElement&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;fadeIn&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;200&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;exemplo&quot;&gt;Exemplo&lt;&#x2F;h2&gt;
&lt;p&gt;Vamos criar um contador &lt;code&gt;Counter&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#ff79c6;&quot;&gt;class &lt;&#x2F;span&gt;&lt;span&gt;Counter {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;constructor&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;increase&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;+= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;decrease&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;-= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value);
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Agora, vamos instanciar um contador e usar seus métodos:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;counter &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= new &lt;&#x2F;span&gt;&lt;span&gt;Counter();
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;counter&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;increase&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;counter&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 1
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;counter&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;decrease&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;counter&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 0
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Perceba que é necessário fazer várias declarações para interagir com a instância, o que prejudica a legibilidade do código.&lt;&#x2F;p&gt;
&lt;p&gt;E se tentarmos usar &lt;em&gt;Method Chaining&lt;&#x2F;em&gt;…&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;new &lt;&#x2F;span&gt;&lt;span&gt;Counter()&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;increase&lt;&#x2F;span&gt;&lt;span&gt;()&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;();
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; &amp;gt; TypeError: Cannot read property &amp;#39;log&amp;#39; of undefined
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Perceba que &lt;code&gt;log()&lt;&#x2F;code&gt; está sendo executado em &lt;code&gt;new Counter().increase()&lt;&#x2F;code&gt;, que, por sua vez, está retornando &lt;code&gt;undefined&lt;&#x2F;code&gt;. Portanto, ainda não é possível interagir com &lt;code&gt;Counter&lt;&#x2F;code&gt; dessa forma.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;como-encadear-metodos&quot;&gt;Como Encadear Métodos&lt;&#x2F;h2&gt;
&lt;p&gt;Para evitar a repetição do objeto, é necessário que seus métodos retornem o próprio objeto.&lt;&#x2F;p&gt;
&lt;p&gt;Veja este exemplo com Promises:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getJSON&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;users.json&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;JSON&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;parse&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Olha o JSON!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;))
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Falhou!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;error&lt;&#x2F;span&gt;&lt;span&gt;));
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Isso só é possível pois os métodos &lt;code&gt;then()&lt;&#x2F;code&gt; and &lt;code&gt;catch()&lt;&#x2F;code&gt; sempre retornam outras promises. Assim, podemos dizer que as Promises são &lt;strong&gt;fluent APIs&lt;&#x2F;strong&gt;, tal como a jQuery.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;quem-lembra-do-this&quot;&gt;Quem Lembra do &lt;code&gt;this&lt;&#x2F;code&gt;?&lt;&#x2F;h3&gt;
&lt;p&gt;Para os métodos serem encadeados, será necessário retornar o contexto (&lt;code&gt;this&lt;&#x2F;code&gt;) em cada método.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;Em JavaScript, &lt;code&gt;this&lt;&#x2F;code&gt; sempre se refere ao contexto de execução de função.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;No caso de um método, que é uma função de um objeto, refere-se ao próprio objeto.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;exemplo-com-method-chaining-pattern&quot;&gt;Exemplo com &lt;em&gt;Method Chaining Pattern&lt;&#x2F;em&gt;&lt;&#x2F;h4&gt;
&lt;p&gt;Para implementar o encadeamento de métodos na classe &lt;code&gt;Counter&lt;&#x2F;code&gt;, apenas retornamos seu contexto a cada método:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#ff79c6;&quot;&gt;class &lt;&#x2F;span&gt;&lt;span&gt;Counter {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;constructor&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;0&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;increase&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;+= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Aqui!
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;decrease&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;-= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; Aqui!
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;value);
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; E aqui!
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Agora, ao executar &lt;code&gt;new Counter().increase()&lt;&#x2F;code&gt;, o retorno já não será mais &lt;code&gt;undefined&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;…E, portanto, é possível fazer &lt;em&gt;method chaining&lt;&#x2F;em&gt;!&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;new &lt;&#x2F;span&gt;&lt;span&gt;Counter()
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;increase&lt;&#x2F;span&gt;&lt;span&gt;()
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 1
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;decrease&lt;&#x2F;span&gt;&lt;span&gt;()
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 0
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;conclusao&quot;&gt;Conclusão&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;No geral, &lt;em&gt;fluent APIs&lt;&#x2F;em&gt; 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 &lt;strong&gt;o encadeamento de métodos nem sempre tornará as coisas mais fáceis&lt;&#x2F;strong&gt; (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.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>SVG Images as React Components with Webpack</title>
        <published>2016-08-02T22:00:00+00:00</published>
        <updated>2016-08-02T22:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/svg-images-as-react-components-with-webpack/"/>
        <id>/blog/svg-images-as-react-components-with-webpack/</id>
        
        <content type="html" xml:base="/blog/svg-images-as-react-components-with-webpack/">&lt;p&gt;If you’ve ever tried to load inline SVG (using &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;sairion&#x2F;svg-inline-loader&quot;&gt;svg-inline-loader&lt;&#x2F;a&gt;) into React, you know it seriously hurts people’s eyes.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;RemoveButton &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;dangerouslySetInnerHTML&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span&gt;{ __html: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span&gt;}&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Remove&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;So what if it looked like this instead?&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;RemoveButton &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Remove&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Much better, don’t you think?&lt;&#x2F;p&gt;
&lt;p&gt;That’s what &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;jhamlet&#x2F;svg-react-loader&quot;&gt;svg-react-loader&lt;&#x2F;a&gt; does. It &lt;strong&gt;process your SVG file and returns a React component&lt;&#x2F;strong&gt;, which is compiled with Babel (more on this below).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;using-the-loader&quot;&gt;Using the Loader&lt;&#x2F;h2&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;npm&lt;&#x2F;span&gt;&lt;span&gt; install svg-react-loader&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --save-dev
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Refer to &lt;a href=&quot;https:&#x2F;&#x2F;webpack.github.io&#x2F;docs&#x2F;using-loaders.html#usage&quot;&gt;Webpack docs&lt;&#x2F;a&gt; for more information on loaders usage. Also, make sure you have installed &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;jhamlet&#x2F;svg-react-loader#dependencies&quot;&gt;svg-react-loader’s dependencies&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;1-in-module-request&quot;&gt;1. In Module Request&lt;&#x2F;h3&gt;
&lt;p&gt;The simplest method, although the configuration convention is preferred. Using svg-react-loader and &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;babel&#x2F;babel-loader&quot;&gt;babel-loader&lt;&#x2F;a&gt;, import your icon just like:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;babel!svg-react!.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;2-in-webpack-config-file-recommended&quot;&gt;2. In Webpack Config File (Recommended)&lt;&#x2F;h3&gt;
&lt;p&gt;Add in your Webpack configuration file’s &lt;code&gt;loaders&lt;&#x2F;code&gt; array.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  test: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  loader: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;babel!svg-react&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Import your icon just like:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;usage-examples&quot;&gt;Usage Examples&lt;&#x2F;h2&gt;
&lt;p&gt;Loader in module request method (1):&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;babel!svg-react!.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;RemoveButton &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Remove&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Loader in Webpack config file method (2):&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;.&#x2F;icons&#x2F;remove.svg&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;RemoveButton &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;IconRemove &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Remove&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;a-note-on-svg-loaders&quot;&gt;A Note on SVG Loaders&lt;&#x2F;h2&gt;
&lt;p&gt;Sometimes, we don’t want all of our SVG files to be loaded as React components. If you use a SVG in a &lt;code&gt;img&lt;&#x2F;code&gt; element, for example, it may lead to conflicts. Fortunately, you can avoid them by being more specific in &lt;code&gt;test&lt;&#x2F;code&gt; regular expression:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  test: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;inline&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  loader: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;babel!svg-react&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  test: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;jpe&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;?&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;g&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$|\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;gif&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$|\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;png&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$|^&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;(?!&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;*\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;inline&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;*\.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;svg&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&#x2F;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  loader: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;url&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Now, only SVG files ending with &lt;code&gt;.inline.svg&lt;&#x2F;code&gt; will be loaded as React components. You’re good to go!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Cascata das Variáveis do CSS</title>
        <published>2016-05-30T22:00:00+00:00</published>
        <updated>2016-05-30T22:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-cascata-das-variaveis-do-css/"/>
        <id>/blog/a-cascata-das-variaveis-do-css/</id>
        
        <content type="html" xml:base="/blog/a-cascata-das-variaveis-do-css/">&lt;p style=&quot;text-align: center&quot;&gt;&lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-variables&quot;&gt;Suporte&lt;&#x2F;a&gt; | &lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css-variables&#x2F;&quot;&gt;Especificação&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;p&gt;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!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;motivacao&quot;&gt;Motivação&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Nesse contexto, surgem as variáveis no CSS, também chamadas de &lt;em&gt;Custom Properties&lt;&#x2F;em&gt; – pois, tecnicamente, é isso que elas são.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;definicao&quot;&gt;Definição&lt;&#x2F;h2&gt;
&lt;p&gt;As &lt;em&gt;Custom Properties&lt;&#x2F;em&gt; são propriedades CSS customizadas (ou seja, você configura o seu valor) iniciadas com &lt;code&gt;--&lt;&#x2F;code&gt;, de nome &lt;em&gt;case-sensitive&lt;&#x2F;em&gt;, e que são utilizadas no documento através da função &lt;code&gt;var()&lt;&#x2F;code&gt;. Por serem propriedades, é importante compreender que seu comportamento é idêntico ao de uma propriedade qualquer do CSS (guarde essa informação!).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;exemplo&quot;&gt;Exemplo&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span&gt;:root {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--colorPrimary&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;purple&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;a &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;color&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--colorPrimary&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;(Eu não conheço ninguém que gosta da ideia esplêndida do &lt;code&gt;--&lt;&#x2F;code&gt;. Mas elas não vão deixar de iniciar com &lt;code&gt;--&lt;&#x2F;code&gt; se você reclamar. Inclusive, &lt;a href=&quot;http:&#x2F;&#x2F;www.xanthir.com&#x2F;blog&#x2F;b4KT0&quot;&gt;isso já foi discutido o suficiente&lt;&#x2F;a&gt;.)&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-funcao-var&quot;&gt;A função &lt;code&gt;var()&lt;&#x2F;code&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;Quem viabiliza o uso de &lt;em&gt;Custom Properties&lt;&#x2F;em&gt;? Ela:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;( &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;custom-property-name&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; [, &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;declaration-value&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; ]? )
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;O primeiro parâmetro é o nome da propriedade, e o segundo, opcional, é o valor a ser usado como &lt;em&gt;fallback&lt;&#x2F;em&gt; caso o primeiro argumento seja inválido (por exemplo: uma variável com &lt;code&gt;20px&lt;&#x2F;code&gt; sendo usada como valor de um &lt;code&gt;background&lt;&#x2F;code&gt;, ou variável inexistente).&lt;&#x2F;p&gt;
&lt;h2 id=&quot;escopo&quot;&gt;Escopo&lt;&#x2F;h2&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;Aqui, uma das informações mais importantes deste artigo: As &lt;em&gt;Custom Properties&lt;&#x2F;em&gt; seguem &lt;strong&gt;regras de cascata&lt;&#x2F;strong&gt; tal como qualquer outra propriedade do CSS.&lt;&#x2F;p&gt;
&lt;p&gt;Por isso, quando quisermos que a variável esteja disponível “globalmente” (para todos os seletores), a declaramos no seletor &lt;code&gt;:root&lt;&#x2F;code&gt;, que é o próprio documento HTML. Isso acontece pois &lt;strong&gt;o efeito cascata do CSS permite que todos seus descendentes herdem a propriedade.&lt;&#x2F;strong&gt; Legal, né?&lt;&#x2F;p&gt;
&lt;p&gt;A propriedade customizada, tal como qualquer outra propriedade, pode ser sobreescrita através de seletores. Seu valor será definido de acordo com a &lt;strong&gt;especifidade&lt;&#x2F;strong&gt; deles.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;A implementação de &lt;em&gt;Custom Properties&lt;&#x2F;em&gt; do CSSNext não segue regras de cascata. Apenas variáveis declaradas no &lt;code&gt;:root&lt;&#x2F;code&gt; são válidas. :-(&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;exemplo-1&quot;&gt;Exemplo&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span&gt;:root {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--bgColor&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;indianred&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--bgColor&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;darkseagreen&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;#wow &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--bgColor&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;darkcyan&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;* &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;background-color&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--bgColor&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Nesse caso:&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;Todos os elementos são vermelhos.&lt;&#x2F;li&gt;
&lt;li&gt;Exceto elementos &lt;code&gt;div&lt;&#x2F;code&gt; e seus filhos, que seriam verdes.&lt;&#x2F;li&gt;
&lt;li&gt;Exceto o elemento com id &lt;code&gt;wow&lt;&#x2F;code&gt; e seus filhos, que seriam ciano.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;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.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;a class=&quot;jsbin-embed&quot; href=&quot;http:&#x2F;&#x2F;jsbin.com&#x2F;meboki&#x2F;edit?html,output&quot;&gt;JS Bin on jsbin.com&lt;&#x2F;a&gt;&lt;script src=&quot;http:&#x2F;&#x2F;static.jsbin.com&#x2F;js&#x2F;embed.min.js?3.35.12&quot;&gt;&lt;&#x2F;script&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;manipulando-variaveis-css-com-javascript&quot;&gt;Manipulando variáveis CSS com JavaScript&lt;&#x2F;h2&gt;
&lt;p&gt;Outra informação valiosa sobre as variáveis do CSS é a possibilidade de acessá-las e alterá-las via JavaScript, usando a interface &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;CSSStyleDeclaration&quot;&gt;&lt;code&gt;CSSStyleDeclaration&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; para interagir com propriedades.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;exemplo-2&quot;&gt;Exemplo&lt;&#x2F;h3&gt;
&lt;p&gt;Considerando:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span&gt;:root {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--my-color&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;darkcyan&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;background-color&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--my-color&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Você pode obter o valor da propriedade &lt;code&gt;--my-color&lt;&#x2F;code&gt;, através do &lt;code&gt;window.getComputedStyle()&lt;&#x2F;code&gt; e &lt;code&gt;getPropertyValue()&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myColor &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getComputedStyle&lt;&#x2F;span&gt;&lt;span&gt;(document&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;body)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;getPropertyValue&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;--my-color&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;myColor&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; darkcyan
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Você pode alterar o valor da variável, através do &lt;code&gt;setProperty()&lt;&#x2F;code&gt; do &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;HTMLElement&#x2F;style&quot;&gt;objeto &lt;code&gt;style&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span&gt;document&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;body&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;style&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;setProperty&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;--my-color&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tomato&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Conheça o &lt;code&gt;CSSStyleDeclaration&lt;&#x2F;code&gt; abrindo o DevTools e digitando &lt;code&gt;getComputedStyle(document.body)&lt;&#x2F;code&gt; no console.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h2 id=&quot;curiosidades&quot;&gt;Curiosidades&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Você não pode armazenar nomes de propriedades do CSS como &lt;em&gt;Custom Properties&lt;&#x2F;em&gt;.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myProperty&lt;&#x2F;span&gt;&lt;span&gt;: overflow;
&lt;&#x2F;span&gt;&lt;span&gt;  var(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myProperty&lt;&#x2F;span&gt;&lt;span&gt;): &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;hidden&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Erro de sintaxe *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;…Em compensação, você pode armazenar qualquer outra coisa (e usá-las com JavaScript!):&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;--&lt;&#x2F;span&gt;&lt;span&gt;foo: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;x &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;5&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;width &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;10&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;ul&gt;
&lt;li&gt;Você não pode formar valores com variáveis.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myContainerWidth&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;300&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myContainerWidth&lt;&#x2F;span&gt;&lt;span&gt;) px; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Valor inválido *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* =&amp;gt; 300 px, em vez de 300px *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;…Ao menos que você use &lt;code&gt;calc()&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myContainerWidth&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;300&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;width&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;calc&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;var&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;--myContainerWidth&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;* &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;1&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* =&amp;gt; width: 300px; *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;consideracoes-finais&quot;&gt;Considerações Finais&lt;&#x2F;h2&gt;
&lt;p&gt;As &lt;em&gt;Custom Properties&lt;&#x2F;em&gt; abriram novas possibilidades para o uso de variáveis em folhas de estilo. Depois de diversas especificações e sintaxes (&lt;a href=&quot;https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;2013&#x2F;WD-css-variables-1-20130620&#x2F;#var-&quot;&gt;nem sempre foi &lt;code&gt;--&lt;&#x2F;code&gt;&lt;&#x2F;a&gt;, acredite!), elas estão finalmente em fase de implementação nos navegadores.&lt;&#x2F;p&gt;
&lt;p&gt;Tem interesse em se aprofundar em outras novas funcionalidades do CSS? Acompanhe a série &lt;a href=&quot;&#x2F;blog&#x2F;o-css-do-futuro&#x2F;&quot;&gt;O CSS do Futuro&lt;&#x2F;a&gt;!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>O CSS do Futuro</title>
        <published>2016-05-29T23:21:51+00:00</published>
        <updated>2016-05-29T23:21:51+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/o-css-do-futuro/"/>
        <id>/blog/o-css-do-futuro/</id>
        
        <content type="html" xml:base="/blog/o-css-do-futuro/">&lt;div class=&quot;summary&quot;&gt;
&lt;p&gt;Já existem &lt;a href=&quot;https:&#x2F;&#x2F;drafts.csswg.org&#x2F;&quot;&gt;especificações&lt;&#x2F;a&gt; garantindo funcionalidades incríveis para o CSS: variáveis; uma nova sintaxe para &lt;em&gt;media queries&lt;&#x2F;em&gt;; &lt;em&gt;nesting&lt;&#x2F;em&gt;; novos seletores, valores e propriedades. E você pode usá-las, &lt;strong&gt;hoje&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;p&gt;Neste artigo, introduzo uma série de artigos relacionados às principais funcionalidades do CSS do futuro, além da ferramenta &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;&quot;&gt;CSSNext&lt;&#x2F;a&gt;, que permite que você as utilize sem esperar o suporte do navegador.&lt;&#x2F;p&gt;
&lt;p&gt;(A fins didáticos, é possível assemelhar o CSSNext ao &lt;a href=&quot;https:&#x2F;&#x2F;babeljs.io&#x2F;&quot;&gt;Babel&lt;&#x2F;a&gt;, que, por sua vez, também permite desenvolver com o JavaScript do futuro ao transpilar o código JavaScript da próxima geração para um código suportado pelos navegadores atuais.)&lt;&#x2F;p&gt;
&lt;p&gt;Ao final desse artigo, você saberá como desenvolver, hoje, com o CSS do futuro.&lt;&#x2F;p&gt;
&lt;hr &#x2F;&gt;
&lt;h2 id=&quot;introducao-ao-postcss&quot;&gt;Introdução ao PostCSS&lt;&#x2F;h2&gt;
&lt;p&gt;O CSSNext está relacionado com PostCSS. Mas o que é o PostCSS, afinal?&lt;&#x2F;p&gt;
&lt;p&gt;O &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;postcss&#x2F;postcss&quot;&gt;PostCSS&lt;&#x2F;a&gt; é apenas uma ferramenta que permite (pré ou pós) processar o CSS através de plugins em JavaScript. Um desses plugins é o CSSNext – assim como, por exemplo, o &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;postcss&#x2F;autoprefixer&quot;&gt;Autoprefixer&lt;&#x2F;a&gt;, que trabalha na etapa de pós-processamento do CSS, adicionando &lt;em&gt;vendor prefixes&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;A transformação de estilos é viabilizada de forma integralmente &lt;strong&gt;agnóstica&lt;&#x2F;strong&gt;: nada é dito sobre como e com o que será feito. Com o PostCSS, você é responsável pelo workflow de processamento do estilo. É possível utilizar &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;jonathantneal&#x2F;precss&quot;&gt;funcionalidades pré-processadas&lt;&#x2F;a&gt; e&#x2F;ou &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;postcss&#x2F;sugarss&quot;&gt;sintaxe do Sass&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ben-eb&#x2F;cssnano&quot;&gt;minificar&lt;&#x2F;a&gt; e adicionar &lt;em&gt;vendor prefixes&lt;&#x2F;em&gt; – tudo de forma “plugável”!&lt;&#x2F;p&gt;
&lt;p&gt;Como o PostCSS nunca é utilizado sozinho, o próximo passo é plugar o CSSNext a ele.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;como-usar-o-cssnext&quot;&gt;Como usar o CSSNext&lt;&#x2F;h2&gt;
&lt;p&gt;Se você quiser apenas testar as funcionalidades dos novos módulos do CSS, você pode &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;playground&quot;&gt;brincar com o CSSNext no navegador&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;no-workflow&quot;&gt;No workflow&lt;&#x2F;h3&gt;
&lt;p&gt;Em um ambiente de desenvolvimento, é necessário usá-lo com o PostCSS. A &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;setup&#x2F;#usage&quot;&gt;documentação do CSSNext&lt;&#x2F;a&gt; guia você para configurá-lo em seu workflow, seja com Webpack, Browserify, Gulp, Grunt, […], ou interface de linha de comando.&lt;&#x2F;p&gt;
&lt;p&gt;Em todos os casos, a configuração se resume a passar um &lt;em&gt;array&lt;&#x2F;em&gt; com os processadores desejados para o PostCSS. Nesse caso, o processador a ser plugado é apenas o &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;postcss-cssnext&quot;&gt;postcss-cssnext&lt;&#x2F;a&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt; npm install postcss-cssnext&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; --save-dev
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;principais-funcionalidades&quot;&gt;Principais Funcionalidades&lt;&#x2F;h2&gt;
&lt;p&gt;Aprofunde-se nas principais funcionalidades do CSS do Futuro através dos artigos abaixo. Abra o &lt;a href=&quot;http:&#x2F;&#x2F;cssnext.io&#x2F;playground&#x2F;&quot;&gt;playground do CSSNext&lt;&#x2F;a&gt; e bons estudos!&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;&#x2F;blog&#x2F;a-cascata-das-variaveis-do-css&#x2F;&quot;&gt;A Cascata das Variáveis do CSS&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;Uma Nova Sintaxe Para Media Queries&lt;&#x2F;li&gt;
&lt;li&gt;Seletores CSS em Um Novo Nível&lt;&#x2F;li&gt;
&lt;li&gt;Manipulando Cores Com CSS&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Mass Deleting Files from Slack</title>
        <published>2016-04-17T00:10:15+00:00</published>
        <updated>2016-04-17T00:10:15+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/mass-deleting-files-from-slack/"/>
        <id>/blog/mass-deleting-files-from-slack/</id>
        
        <content type="html" xml:base="/blog/mass-deleting-files-from-slack/">&lt;p&gt;Slack comes with limited file storage, so you eventually run out of space. Deleting files isn’t easy though: there is no way to &lt;strong&gt;bulk delete&lt;&#x2F;strong&gt; them using the web interface.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Slack forces you to delete one by one.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;And although Slack can force humans, it can’t force JavaScript. So JavaScript to the rescue!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;how-to-delete-multiple-files-from-slack&quot;&gt;How to delete multiple files from Slack&lt;&#x2F;h2&gt;
&lt;p&gt;In order to free up space, you’ll need;&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;nodejs.org&#x2F;&quot;&gt;Node.js&lt;&#x2F;a&gt; version 5 or later;&lt;&#x2F;li&gt;
&lt;li&gt;A Slack token, which you can get from &lt;a href=&quot;https:&#x2F;&#x2F;api.slack.com&#x2F;docs&#x2F;oauth-test-tokens&quot;&gt;Slack API docs&lt;&#x2F;a&gt;;&lt;&#x2F;li&gt;
&lt;li&gt;A terminal.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h3 id=&quot;installing&quot;&gt;Installing&lt;&#x2F;h3&gt;
&lt;p&gt;Open your terminal and install &lt;code&gt;slack-delete-files&lt;&#x2F;code&gt; package globally using Node Package Manager:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt; npm install&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -g&lt;&#x2F;span&gt;&lt;span&gt; slack-delete-files
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;running&quot;&gt;Running&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt; slack-delete-files
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;You’ll be asked for your Slack token and whether you want to delete &lt;em&gt;all files&lt;&#x2F;em&gt; or only &lt;em&gt;files older than 30 days&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;done&quot;&gt;Done!&lt;&#x2F;h3&gt;
&lt;p&gt;Your space is probably back!&lt;&#x2F;p&gt;
&lt;p&gt;After deleting, you can uninstall the package:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;sh&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-sh &quot;&gt;&lt;code class=&quot;language-sh&quot; data-lang=&quot;sh&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;$&lt;&#x2F;span&gt;&lt;span&gt; npm uninstall&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt; -g&lt;&#x2F;span&gt;&lt;span&gt; slack-delete-files
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;&lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;diessica&#x2F;slack-delete-files&quot;&gt;Contribute on GitHub&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Fantástica Diversidade do Front-end</title>
        <published>2016-04-09T15:10:00+00:00</published>
        <updated>2016-04-09T15:10:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-fantastica-diversidade-do-front-end/"/>
        <id>/blog/a-fantastica-diversidade-do-front-end/</id>
        
        <content type="html" xml:base="/blog/a-fantastica-diversidade-do-front-end/">&lt;p class=&quot;summary&quot;&gt;Os diferentes perfis de desenvolvedores front-end é um tópico que frequente em fóruns de discussão. Quais perfis o mercado  espera? Como posso me definir enquanto desenvolvedor(a) front-end?&lt;&#x2F;p&gt;
&lt;p&gt;Vi, recentemente, uma &lt;a href=&quot;https:&#x2F;&#x2F;www.facebook.com&#x2F;careers&#x2F;jobs&#x2F;a0I1200000IALJQ&#x2F;&quot;&gt;vaga no Facebook para Front-end Engineer com foco em Acessibilidade&lt;&#x2F;a&gt;. Pensei “Foco em acessibilidade? Que específico!”, e, segundos depois, todas as discussões que já tive sobre os perfis de desenvolvedores front-end me vieram à mente.&lt;&#x2F;p&gt;
&lt;p&gt;Falar sobre esse assunto é falar sobre &lt;strong&gt;como interpretar vagas de emprego sem entrar em desespero&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;mesmo-papel-diversas-habilidades&quot;&gt;Mesmo Papel, Diversas Habilidades&lt;&#x2F;h2&gt;
&lt;p&gt;Estuda Motion Design a fim de desenvolver não só sites, mas experiências fantásticas? Estuda UX Design e práticas de Acessibilidade a fim de desenvolver produtos que engajam o máximo de pessoas possível? Estuda padrões de arquitetura de software a fim de desenvolver aplicações web complexas e escaláveis no client-side?&lt;&#x2F;p&gt;
&lt;p&gt;Você pode estudar e gostar todos; estudar mais um mais do que o outro; trabalhar com um, mas tender a outro; e pode até mesmo não focar em nenhum dos que eu citei acima. Em qualquer uma das possibilidades, você provavelmente &lt;strong&gt;não deixará de ser um profissional da área de front-end&lt;&#x2F;strong&gt; – mas terá, com certeza, um mercado específico e uma carreira que se basearão nas suas escolhas profissionais.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Existe uma diversidade incrível de habilidades na área de desenvolvimento front-end.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Somos o intermediário entre o back-end e o design&lt;&#x2F;strong&gt;, mas nosso papel é transformar o web design em uma experiência real. Essa (grande) responsabilidade faz com que desenvolvamos diversas habilidades, e algumas são inegavelmente desenvolvidas em maior ou menor nível. Nesse desnível, encontramos de &lt;em&gt;Motion Designers&lt;&#x2F;em&gt; a &lt;em&gt;JavaScript Developers&lt;&#x2F;em&gt;, cada um com seu espaço em times e projetos específicos.&lt;&#x2F;p&gt;
&lt;p&gt;E não há nada de errado nisso. O surgimento dessas especializações – que podem (e devem) ser escolhidas por você – é apenas um resultado da complexidade atual do desenvolvimento front-end.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;confie-nas-suas-habilidades&quot;&gt;Confie nas Suas Habilidades&lt;&#x2F;h2&gt;
&lt;p&gt;(ou “Você Não Precisa Ser o Candidato Perfeito Para Todas as Vagas de Front-end Existentes”.)&lt;&#x2F;p&gt;
&lt;p&gt;Por que eu disse que &lt;em&gt;falar sobre esse assunto é falar sobre como interpretar vagas de emprego sem entrar em desespero&lt;&#x2F;em&gt;?&lt;&#x2F;p&gt;
&lt;p&gt;Pense: Você é experiente, estuda com frequência, mas, ocasionalmente, procura vagas de emprego e se vê insuficiente. Ok, convenhamos, a possibilidade existe: você não estar atingindo os requisitos mínimos das vagas pode sim ser um sinal de que algo está errado. Mas provavelmente não é o caso.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Talvez você esteja procurando vagas para um perfil que não é o seu.&lt;&#x2F;strong&gt; Não precisamos aceitar ter expertises variadas como é exigido; afinal, muitas vagas na área de TI viram piada justamente por esse motivo. Desde que você entenda a multidisciplinaridade como mais valiosa que qualquer disciplina, apenas abrace o que prefere e se aprofunde, torne-se uma referência nisso.&lt;&#x2F;p&gt;
&lt;p&gt;No fim, suas preferências moldarão você como profissional. Elas farão com que você seja incluído(a) ou excluído(a) de várias oportunidades, o que, por consequência, moldará sua carreira.&lt;&#x2F;p&gt;
&lt;p&gt;Estude o que gosta, reconheça suas preferências, confie nas suas habilidades, e, então, procure vagas sem entrar em desespero.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;perfis-de-desenvolvedores-front-end&quot;&gt;Perfis de Desenvolvedores Front-end&lt;&#x2F;h2&gt;
&lt;p&gt;No &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;frontendbr&#x2F;forum&#x2F;issues&#x2F;32&quot;&gt;fórum do Front-end Brasil&lt;&#x2F;a&gt;, foi proposta a divisão de separar profissionais de front-end que desenvolvem a camada de apresentação dos que arquitetam aplicações que interagem com back-end. Concordo com a divisão. Tenho uma visão bem definida, com base nas exigências atuais do mercado internacional.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;dois-perfis-uma-proposta&quot;&gt;Dois Perfis: Uma Proposta&lt;&#x2F;h3&gt;
&lt;h4 id=&quot;front-end-developer&quot;&gt;Front-end Developer&lt;&#x2F;h4&gt;
&lt;p&gt;A ponte entre o design e o front-end. (“UI Developer” é um nome alternativo.)&lt;&#x2F;p&gt;
&lt;h5 id=&quot;habilidades&quot;&gt;Habilidades&lt;&#x2F;h5&gt;
&lt;ul&gt;
&lt;li&gt;Proficiência em HTML semântico, CSS e JavaScript a nível de desenvolvimento da camada de apresentação da aplicação.&lt;&#x2F;li&gt;
&lt;li&gt;Princípios e boas práticas de User Experience Design.&lt;&#x2F;li&gt;
&lt;li&gt;Princípios e boas práticas de Acessibilidade.&lt;&#x2F;li&gt;
&lt;li&gt;Proficiência em metodologias de organização do CSS como OOCSS, SMACSS e BEM.&lt;&#x2F;li&gt;
&lt;li&gt;Noções de User Interface Design.&lt;&#x2F;li&gt;
&lt;li&gt;Noções de Motion Design.&lt;&#x2F;li&gt;
&lt;li&gt;Noções de back-end, geralmente a nível de integração com CMS.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h5 id=&quot;responsabilidades&quot;&gt;Responsabilidades&lt;&#x2F;h5&gt;
&lt;ul&gt;
&lt;li&gt;Planejamento e desenvolvimento da camada de apresentação da aplicação.&lt;&#x2F;li&gt;
&lt;li&gt;Implementação do &lt;em&gt;live styleguide&lt;&#x2F;em&gt;, junto ao designer.&lt;&#x2F;li&gt;
&lt;li&gt;Metodologia e estrutura a ser usada no CSS.&lt;&#x2F;li&gt;
&lt;li&gt;Participação no processo de Design (pois &lt;a href=&quot;http:&#x2F;&#x2F;bradfrost.com&#x2F;blog&#x2F;post&#x2F;development-is-design&#x2F;&quot;&gt;&lt;em&gt;Development is Design&lt;&#x2F;em&gt;&lt;&#x2F;a&gt;).&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h4 id=&quot;front-end-engineer&quot;&gt;Front-end Engineer&lt;&#x2F;h4&gt;
&lt;p&gt;A ponte entre o front-end e o back-end. (Dependendo do projeto, “JavaScript Developer” pode ser mais apropriado.)&lt;&#x2F;p&gt;
&lt;h5 id=&quot;habilidades-1&quot;&gt;Habilidades&lt;&#x2F;h5&gt;
&lt;ul&gt;
&lt;li&gt;Proficiência em HTML e CSS, mas sua especialização é JavaScript.&lt;&#x2F;li&gt;
&lt;li&gt;Proficiência em Design Patterns e padrões de arquitetura de software.&lt;&#x2F;li&gt;
&lt;li&gt;Conhecimento de modelo cliente-servidor, HTTP, REST.&lt;&#x2F;li&gt;
&lt;li&gt;Princípios e boas práticas de Performance.&lt;&#x2F;li&gt;
&lt;li&gt;Princípios e boas práticas de Segurança.&lt;&#x2F;li&gt;
&lt;li&gt;Noções de estratégias de desenvolvimento, como Integração Contínua (CI).&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h5 id=&quot;responsabilidades-1&quot;&gt;Responsabilidades&lt;&#x2F;h5&gt;
&lt;ul&gt;
&lt;li&gt;Planejamento e desenvolvimento da aplicação JavaScript.&lt;&#x2F;li&gt;
&lt;li&gt;Automatização das tarefas.&lt;&#x2F;li&gt;
&lt;li&gt;&lt;em&gt;Tooling&lt;&#x2F;em&gt; da aplicação.&lt;&#x2F;li&gt;
&lt;li&gt;Implementação de uma metodologia de testes.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Não concordo com o nome “Front-end Designer”, &lt;a href=&quot;http:&#x2F;&#x2F;bradfrost.com&#x2F;blog&#x2F;post&#x2F;frontend-design&#x2F;&quot;&gt;sugerido pelo Brad Frost&lt;&#x2F;a&gt;. Ainda que desenvolvedores front-end participem do processo de design, tornar funcional a camada de apresentação é uma etapa do desenvolvimento de software – não do design. O fato do desenvolvimento front-end ser erroneamente considerado mais programação do que design, quando deveria ser os dois, é um argumento que não justifica o nome.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;qual-deles&quot;&gt;…Qual Deles?&lt;&#x2F;h3&gt;
&lt;p&gt;Normalmente temos um pouco dos dois, mas sempre um mais do que o outro. Nesse caso, uma boa maneira de explicitar o seu papel sem desmerecer o outro é falar sobre suas habilidades, em vez de se apegar a um rótulo.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Dificilmente um rótulo resumirá todo o seu conhecimento.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Eu não me apego a isso, por exemplo. Mesmo exercendo a função de Front-end Engineer atualmente, continuo me denominando “Front-end Developer”.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;a-vaga-ideal-para-suas-habilidades&quot;&gt;A Vaga Ideal Para Suas Habilidades&lt;&#x2F;h2&gt;
&lt;p&gt;É utópico esperar que todos desenvolvedores front-end sejam bons UX Designers, Motion Designers, JavaScript Developers… Isso não existe. As empresas procuram diferentes perfis de desenvolvedores front-end. &lt;strong&gt;E elas nem sempre sabem disso.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;As empresas não simplesmente procuram um Front-end Developer ou um Front-end Engineer. Existem vagas bastante híbridas, como Front-end Engineers &lt;em&gt;com foco&lt;&#x2F;em&gt; em UX ou Acessibilidade, ou até mesmo Front-end Developers &lt;em&gt;com noções&lt;&#x2F;em&gt; de arquiteturas como MVC. Plenamente possível e válido!&lt;&#x2F;p&gt;
&lt;p&gt;Cabe a você identificar se é ideal à vaga de emprego que quer se candidatar e se suas habilidades são compatíveis com a expectativa da empresa. À empresa, cabe a identificação do seu perfil, a fim de alocar você em um projeto e time que explorem suas habilidades.&lt;&#x2F;p&gt;
&lt;p&gt;É o cenário perfeito, pelo menos.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;lembre-se-da-nossa-essencia&quot;&gt;Lembre-se da Nossa Essência&lt;&#x2F;h2&gt;
&lt;p&gt;Independente de como você se posiciona e rotula, dos projetos que trabalha e do caminho que quer seguir, o front-end não deixará de orbitar ao redor da trinca &lt;strong&gt;HTML, CSS&lt;&#x2F;strong&gt; e &lt;strong&gt;JavaScript&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Enquanto você possuir interesse nessas três linguagens, os seus outros interesses apenas moldarão o seu caminho profissional.&lt;&#x2F;p&gt;
&lt;p&gt;E, temos sorte: na área de front-end, a diversidade de caminhos é fantástica.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>5 Bibliotecas Essenciais para Desenvolver React Apps</title>
        <published>2016-03-21T23:00:00+00:00</published>
        <updated>2016-03-21T23:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/5-bibliotecas-essenciais-para-desenvolver-react-apps/"/>
        <id>/blog/5-bibliotecas-essenciais-para-desenvolver-react-apps/</id>
        
        <content type="html" xml:base="/blog/5-bibliotecas-essenciais-para-desenvolver-react-apps/">&lt;p&gt;O conjunto de ferramentas, boilerplates e bibliotecas disponíveis formam um ecossistema incrível em torno do React.&lt;&#x2F;p&gt;
&lt;p&gt;No meio de tudo, existem ferramentas que são comuns – e essenciais – a diversas aplicações, independente de suas arquiteturas. Cito cinco delas.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;1-classnames&quot;&gt;1. &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;classnames&quot;&gt;classnames&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;Muitas vezes, no React, um estado representará um comportamento visual do componente (“selecionado”, “pressionado”, “focado”), normalmente associado a uma classe CSS.&lt;&#x2F;p&gt;
&lt;p&gt;Um botão e seus estados &lt;em&gt;disabled&lt;&#x2F;em&gt; e &lt;em&gt;hovered&lt;&#x2F;em&gt;, por exemplo, ficariam assim:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;button
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;submit&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;onMouseOver&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={...}
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;className&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;classNames&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;button&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;props&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span&gt;className, {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;button--disabled&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isDisabled&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;button--hovered&amp;#39;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;state&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;isHovered
&lt;&#x2F;span&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Perceba que o Classnames facilita a manipulação condicional de classes com React, removendo vários blocos de &lt;code&gt;if&lt;&#x2F;code&gt;&#x2F;&lt;code&gt;else&lt;&#x2F;code&gt; do seu código.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;2-react-router&quot;&gt;2. &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;react-router&quot;&gt;react-router&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;Se você está desenvolvendo uma &lt;em&gt;Single-page Application&lt;&#x2F;em&gt;, você precisará sincronizar a interface do usuário com a URL.&lt;&#x2F;p&gt;
&lt;p&gt;O React Router é a melhor solução de rotas para aplicações desenvolvidas com React, e isso se deve bastante a sua API declarativa e pensada para componentes.&lt;&#x2F;p&gt;
&lt;p&gt;Considere a seguinte configuração de rotas:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;render &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react-dom&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Router&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Route&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;browserHistory &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react-router&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;App &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;components&#x2F;App&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Homepage &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;screens&#x2F;Homepage&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;About &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;screens&#x2F;About&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Contact &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;screens&#x2F;Contact&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;render&lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Router &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;history&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;browserHistory&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Route &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;App&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;IndexRoute &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Homepage&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Route &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;about&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;About&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Route &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;path&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;contact&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;component&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Contact&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Route&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Router&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  document&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;getElementById&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;react-root&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)
&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Perceba que há uma instância inicial da rota e outras rotas aninhadas, formando uma hierarquia. Essa hierarquia é a essência do React Router.&lt;&#x2F;p&gt;
&lt;p&gt;Considere que temos um App (&lt;code&gt;App.js&lt;&#x2F;code&gt;):&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;React&lt;&#x2F;span&gt;&lt;span&gt;, { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Component &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;react&amp;#39;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span&gt;{ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;IndexLink&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;Link &lt;&#x2F;span&gt;&lt;span&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;#39;react-router&amp;#39;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ff79c6;&quot;&gt;class &lt;&#x2F;span&gt;&lt;span&gt;App &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;extends &lt;&#x2F;span&gt;&lt;span style=&quot;text-decoration:underline;font-style:italic;color:#8be9fd;&quot;&gt;Component &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;render&lt;&#x2F;span&gt;&lt;span&gt;() {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;nav&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;IndexLink &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;to&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Homepage&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;li&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;to&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;about&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;About&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Link&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;          &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;to&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;contact&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Contact&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Link&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;nav&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;          &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;this&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;props&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;children&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;        &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;      &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    )
&lt;&#x2F;span&gt;&lt;span&gt;  }
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;export default &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;App
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;&lt;strong&gt;Dica&lt;&#x2F;strong&gt;: O componente acima não tem um estado próprio, portanto, ele é um &lt;em&gt;Pure Component&lt;&#x2F;em&gt; (ou &lt;em&gt;Dumb Component&lt;&#x2F;em&gt;). Componentes sob estas condições podem – e devem – ser transformados em &lt;em&gt;Stateless Functional Components&lt;&#x2F;em&gt;. ^[Sugiro a leitura de &lt;a href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;@joshblack&#x2F;stateless-components-in-react-0-14-f9798f8b992d&quot;&gt;Functional Stateless Components in React 0.14&lt;&#x2F;a&gt;]&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;Uma explicação rápida: Todas as subrotas da rota do componente &lt;code&gt;App&lt;&#x2F;code&gt; (os &lt;code&gt;&amp;lt;Route&amp;gt;&lt;&#x2F;code&gt; dentro de &lt;code&gt;&amp;lt;Route&amp;gt;&lt;&#x2F;code&gt;) terão seus componentes transferidos como props para o componente &lt;code&gt;App&lt;&#x2F;code&gt; (e por isso o &lt;code&gt;this.props.children&lt;&#x2F;code&gt;) ao entrar na rota através do &lt;code&gt;&amp;lt;Link&amp;gt;&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;A &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;reactjs&#x2F;react-router&#x2F;tree&#x2F;1.0.x&#x2F;docs&quot;&gt;documentação do React Router&lt;&#x2F;a&gt; dispensa quaisquer outras explicações!&lt;&#x2F;p&gt;
&lt;h2 id=&quot;3-react-helmet&quot;&gt;3. &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;react-helmet&quot;&gt;react-helmet&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;Dificilmente você usará o React Router sem o Helmet. O Helmet te dá, no próprio componente, o controle do &lt;code&gt;head&lt;&#x2F;code&gt; do documento.&lt;&#x2F;p&gt;
&lt;p&gt;Um caso de uso simples é alterar o título do documento, útil quando a aplicação entra em uma nova rota:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;Helmet &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;title&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Carrinho de Compras&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;4-jsx-control-statements&quot;&gt;4. &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;jsx-control-statements&quot;&gt;jsx-control-statements&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;
&lt;p&gt;JSX facilita a escrita da marcação do componente e torna seu código mais fácil de ler e entender. Mas e quando a renderização do componente é condicional? E quando renderizamos componentes dinamicamente?&lt;&#x2F;p&gt;
&lt;p&gt;Seu código termina provavelmente assim:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;todos&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;map&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;function &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;todo&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span&gt;) {
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;return &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;TodoItem &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;todo&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;;
&lt;&#x2F;span&gt;&lt;span&gt;  })&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;E assim:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;{&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;condition &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;&amp;amp;&amp;amp; &lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;span&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Ou de uma das várias outras formas: condicionais inline, operações ternárias, funções para renderizar componentes condicionalmente… Práticas que, em grande escala, podem prejudicar a legibilidade do código. E é na &lt;strong&gt;legibilidade&lt;&#x2F;strong&gt; que o jsx-control-statements vence.&lt;&#x2F;p&gt;
&lt;p&gt;O primeiro exemplo, por exemplo, ficaria assim:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;tsx&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-tsx &quot;&gt;&lt;code class=&quot;language-tsx&quot; data-lang=&quot;tsx&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;For &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;each&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;todo&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;index&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;of&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;todos&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;}&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;TodoItem &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;todo&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;key&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;={&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;index&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;} &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;For&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;5-axios-ou-fetch-api&quot;&gt;5. &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;axios&quot;&gt;axios&lt;&#x2F;a&gt; ou Fetch API&lt;&#x2F;h2&gt;
&lt;p&gt;Não é uma dependência apenas de aplicações React, mas você provavelmente vai precisar de um cliente HTTP. (&lt;strong&gt;Um cliente HTTP de gente adulta&lt;&#x2F;strong&gt;, que não é o &lt;code&gt;$.ajax&lt;&#x2F;code&gt;.) Existem duas ótimas opções: &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;axios&quot;&gt;axios&lt;&#x2F;a&gt; e o fetch (“&lt;a href=&quot;https:&#x2F;&#x2F;fetch.spec.whatwg.org&#x2F;&quot;&gt;WHATWG Fetch API&lt;&#x2F;a&gt;”).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;axios&quot;&gt;axios&lt;&#x2F;h3&gt;
&lt;p&gt;Uma biblioteca maravilhosa.&lt;&#x2F;p&gt;
&lt;p&gt;A API do axios é completa: têm interceptadores de requisição, múltiplas requisições em paralelo… E suas requisições retornam lindas promises.&lt;&#x2F;p&gt;
&lt;p&gt;Fazendo uma requisição &lt;code&gt;POST&lt;&#x2F;code&gt;:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;import &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;axios &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;from &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;axios&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;axios
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;post&lt;&#x2F;span&gt;&lt;span&gt;(
&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;api&#x2F;pets&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;    { name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Bard&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, cat: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;    { headers: { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;X-Custom-Header&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;foobar&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;} }
&lt;&#x2F;span&gt;&lt;span&gt;  )
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;(() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Pet salvo com sucesso!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;))
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;));
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;fetch-api&quot;&gt;Fetch API&lt;&#x2F;h3&gt;
&lt;p&gt;O fetch, por outro lado, já é um &lt;em&gt;&lt;a href=&quot;https:&#x2F;&#x2F;fetch.spec.whatwg.org&#x2F;&quot;&gt;living standard&lt;&#x2F;a&gt;&lt;&#x2F;em&gt;, e, nesse momento, tem suporte básico nos navegadores Firefox, Chrome e Opera. É recomendado, no entanto, o uso de um &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;isomorphic-fetch&quot;&gt;polyfill&lt;&#x2F;a&gt;, por ser uma tecnologia ainda experimental.&lt;&#x2F;p&gt;
&lt;p&gt;A mesma requisição &lt;code&gt;POST&lt;&#x2F;code&gt; ficaria assim:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;fetch&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;&#x2F;api&#x2F;pets&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, {
&lt;&#x2F;span&gt;&lt;span&gt;  method: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;post&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;,
&lt;&#x2F;span&gt;&lt;span&gt;  headers: { &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;X-Custom-Header&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;foobar&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;  body: { name: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Bard&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, cat: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false &lt;&#x2F;span&gt;&lt;span&gt;},
&lt;&#x2F;span&gt;&lt;span&gt;})
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;then&lt;&#x2F;span&gt;&lt;span&gt;(() &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Pet salvo com sucesso!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;))
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;catch&lt;&#x2F;span&gt;&lt;span&gt;((&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#ffb86c;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;) &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;=&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;response&lt;&#x2F;span&gt;&lt;span&gt;));
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Você pode saber mais sobre o Fetch API no &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;API&#x2F;Fetch_API&quot;&gt;Mozilla Developer Network&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h2 id=&quot;consideracoes&quot;&gt;Considerações&lt;&#x2F;h2&gt;
&lt;p&gt;Embora eu tenha citado apenas cinco, existem diversas bibliotecas e componentes que descomplicam o processo de desenvolvimento de uma aplicação com React. Sem dúvidas, é um dos ecossistemas mais relevantes que front-end já teve.&lt;&#x2F;p&gt;
&lt;p&gt;Destaco que não cobri um tópico que, quando se trata de React, é bastante pertinente: formulários. &lt;strong&gt;Lidar com formulários no React é complicado.&lt;&#x2F;strong&gt; Nesse primeiro momento, resolvi deixar o tema de lado para não fugir da proposta do artigo.&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>O Til no JavaScript</title>
        <published>2015-10-31T00:00:00+00:00</published>
        <updated>2015-10-31T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/o-til-no-javascript/"/>
        <id>/blog/o-til-no-javascript/</id>
        
        <content type="html" xml:base="/blog/o-til-no-javascript/">&lt;p class=&quot;summary&quot;&gt;
&lt;p&gt;Incompreendido, o operador til (&lt;code&gt;~&lt;&#x2F;code&gt;) é um mistério que ninguém discute. Primeiro, pois é um operador bitwise, e, segundo, pois seus casos de uso são bastante misteriosos…&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h2 id=&quot;voce-consegue-dizer&quot;&gt;Você consegue dizer…&lt;&#x2F;h2&gt;
&lt;p&gt;em &lt;strong&gt;valor&lt;&#x2F;strong&gt; e &lt;strong&gt;tipo de dado&lt;&#x2F;strong&gt;, o que será impresso no console nas situações abaixo?&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;1&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;8.2&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;5.9&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span&gt;{});
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;5.5&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Tudo bem?&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Não sabe? &lt;em&gt;Well…&lt;&#x2F;em&gt;&lt;&#x2F;p&gt;
&lt;h2 id=&quot;o-operador-til&quot;&gt;O operador til&lt;&#x2F;h2&gt;
&lt;p&gt;Ou melhor, o operador &lt;em&gt;bitwise NOT&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;É importante falar isso pois é importante entender o que &lt;em&gt;bitwise&lt;&#x2F;em&gt; significa. Operadores bitwise são especiais em JavaScript: eles tratam todos seus operandos como uma sequência de 32 bits (0 e 1) – ou seja, trabalham com &lt;strong&gt;representações binárias&lt;&#x2F;strong&gt; (não decimais, como de praxe) de nossos operandos, e nos entregam valores númericos como se nada tivesse acontecido.&lt;&#x2F;p&gt;
&lt;p&gt;O &lt;em&gt;NOT&lt;&#x2F;em&gt; significa que todos os bits do operando serão invertidos (0 vira 1, 1 vira 0). Parece inútil quando não estamos trabalhando com números binários, mas as aplicações criativas tornam o operador mais interessante.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;regras-do&quot;&gt;Regras do &lt;code&gt;~&lt;&#x2F;code&gt;&lt;&#x2F;h3&gt;
&lt;ol&gt;
&lt;li&gt;Quando a expressão é &lt;code&gt;null&lt;&#x2F;code&gt; ou &lt;code&gt;undefined&lt;&#x2F;code&gt;… 0.&lt;&#x2F;li&gt;
&lt;li&gt;Objetos são convertidos para strings.&lt;&#x2F;li&gt;
&lt;li&gt;Strings são convertidas para números, se possível. Quando não é possível… 0.&lt;&#x2F;li&gt;
&lt;li&gt;Valores booleanos são tratados como números (0 para &lt;code&gt;false&lt;&#x2F;code&gt;, 1 para &lt;code&gt;true&lt;&#x2F;code&gt;).&lt;&#x2F;li&gt;
&lt;li&gt;&lt;em&gt;Floating-points&lt;&#x2F;em&gt; são convertidos excluindo a parte fracionada.&lt;&#x2F;li&gt;
&lt;li&gt;Todo número inteiro &lt;em&gt;n&lt;&#x2F;em&gt; é convertido para -(n + 1).&lt;&#x2F;li&gt;
&lt;&#x2F;ol&gt;
&lt;p&gt;As duas últimas regras são as mais importantes, pois elas implicam nas principais aplicações do operador. Já temos a resposta de alguns:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;8.2&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; -9
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;false&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; -1
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Tudo bem?&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; -1
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Os números foram convertidos de acordo com a fórmula -(n + 1). -9 é resultado de - 8 - 1, por exemplo.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;dupla-negacao&quot;&gt;Dupla negação&lt;&#x2F;h3&gt;
&lt;p&gt;Podemos usar dois operadores til (&lt;em&gt;double bitwise NOT&lt;&#x2F;em&gt;). Aqui, basta entender o trabalho do outro til: reinverter os bits.&lt;&#x2F;p&gt;
&lt;p&gt;Considerando &lt;code&gt;~n&lt;&#x2F;code&gt;, como anteriormente, temos -(n + 1) = &lt;strong&gt;- n - 1&lt;&#x2F;strong&gt;. Considerando &lt;code&gt;~~n&lt;&#x2F;code&gt;, temos -[-(n + 1)] = &lt;strong&gt;n + 1&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Perceba que as equações, quando somadas, se anulam. Pois essa é a grande sacada de usar dois operadores til! Temos, então:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;1&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 1
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;5.9&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 5
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~&lt;&#x2F;span&gt;&lt;span&gt;{}); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 0
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~~-&lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;5.5&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; -5
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;aplicacoes&quot;&gt;Aplicações&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;truncar-numeros&quot;&gt;Truncar números&lt;&#x2F;h3&gt;
&lt;p&gt;Pelo fato do operador converter removendo a parte fracionada, utilizá-lo para truncar números de forma fácil é a aplicação mais comum:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;7.8926152&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;integer &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= ~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;integer&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 7
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Embora o &lt;code&gt;~~&lt;&#x2F;code&gt; tenha sido, por muito tempo, usado no lugar de &lt;code&gt;Math.floor()&lt;&#x2F;code&gt;, o método mais parecido com ele que temos em JavaScript hoje é o &lt;a href=&quot;https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Math&#x2F;trunc&quot;&gt;&lt;code&gt;Math.trunc()&lt;&#x2F;code&gt;&lt;&#x2F;a&gt; do ES2015.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;converter-string-para-numero&quot;&gt;Converter string para número&lt;&#x2F;h3&gt;
&lt;p&gt;Uma aplicação simples que se baseia em uma das regras de funcionamento do til: converter strings para números sempre que possível; afinal, é com números que o operador trabalha.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;2&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;const &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;dataAsNumber &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= ~~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;data&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;dataAsNumber&lt;&#x2F;span&gt;&lt;span&gt;); &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;&#x2F; =&amp;gt; 2
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h3 id=&quot;verificar-a-existencia-de-um-item-no-array&quot;&gt;Verificar a existência de um item no array&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;women &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Joan of Arc&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Marie Curie&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;];
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;~&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;women&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;indexOf&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace was such an important woman!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;É difícil de compreender humanamente que o &lt;code&gt;if&lt;&#x2F;code&gt; está verificando se Ada Lovelace está incluída no array &lt;code&gt;women&lt;&#x2F;code&gt;, mas é exatamente isso que está acontecendo. Você entendeu a razão pela qual isso funciona?&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Poderíamos verificar sem o &lt;code&gt;~&lt;&#x2F;code&gt;, mas não funcionaria em casos em que o item do array é o primeiro (índice zero, e 0 retorna &lt;code&gt;false&lt;&#x2F;code&gt; como booleano). O operador til viabiliza essa verificação, em razão da conversão de um número inteiro &lt;em&gt;n&lt;&#x2F;em&gt; para -(n + 1).&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;O equivalente humano, utilizando &lt;a href=&quot;https:&#x2F;&#x2F;lodash.com&#x2F;&quot;&gt;Lodash&lt;&#x2F;a&gt; (&lt;code&gt;_&lt;&#x2F;code&gt;), seria:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;js&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-js &quot;&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span style=&quot;font-style:italic;color:#8be9fd;&quot;&gt;let &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;women &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;= &lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Joan of Arc&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;, &lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Marie Curie&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;];
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;if &lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;_&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ffffff;&quot;&gt;women&lt;&#x2F;span&gt;&lt;span&gt;)&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;contains&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;)) {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;console&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;.&lt;&#x2F;span&gt;&lt;span style=&quot;color:#8be9fd;&quot;&gt;log&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;Ada Lovelace was such an important woman!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;performance&quot;&gt;Performance&lt;&#x2F;h2&gt;
&lt;p&gt;Usar &lt;code&gt;~~&lt;&#x2F;code&gt; em vez de &lt;code&gt;Math.floor&lt;&#x2F;code&gt; ou &lt;code&gt;Math.trunc&lt;&#x2F;code&gt; é geralmente mais rápido. Dependendo da &lt;em&gt;JavaScript engine&lt;&#x2F;em&gt; do navegador e do caso de uso, no entanto, pode não fazer muita diferença e até ser mais lento. Veja o &lt;a href=&quot;http:&#x2F;&#x2F;jsperf.com&#x2F;tilde-vs-floor&quot;&gt;teste no JSPerf&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;De qualquer forma, a péssima performance de quem lê um código com o desumano &lt;code&gt;~&lt;&#x2F;code&gt; pode não valer o ganho de performance – que é ignorável de tão mínimo – em uma aplicação.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;consideracoes&quot;&gt;Considerações&lt;&#x2F;h2&gt;
&lt;p&gt;No geral, operadores bitwise, principalmente &lt;code&gt;~&lt;&#x2F;code&gt;, &lt;code&gt;|&lt;&#x2F;code&gt; e &lt;code&gt;&amp;amp;&lt;&#x2F;code&gt;, possuem aplicações interessantes e bastante criativas.&lt;&#x2F;p&gt;
&lt;p&gt;Quanto ao &lt;code&gt;~~&lt;&#x2F;code&gt;, não acredito que chegará a se popularizar como aconteceu com o &lt;code&gt;!!&lt;&#x2F;code&gt;, que converte para um valor booleano. Em anos, a prática com til nunca se tornou realmente popular, talvez pelo fato de ser um operador bitwise – e, portanto, pouco compreendido – e ter casos de uso bastante excêntricos.&lt;&#x2F;p&gt;
&lt;p&gt;Ficam à título de curiosidade suas aplicações bastante criativas. ;-)&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>O Que Há de Errado com a &quot;Cultura jQuery&quot;</title>
        <published>2015-09-20T09:56:05+00:00</published>
        <updated>2015-09-20T09:56:05+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/o-que-ha-de-errado-com-a-cultura-jquery/"/>
        <id>/blog/o-que-ha-de-errado-com-a-cultura-jquery/</id>
        
        <content type="html" xml:base="/blog/o-que-ha-de-errado-com-a-cultura-jquery/">&lt;p class=&quot;summary&quot;&gt;Este não é um artigo sobre jQuery. Este é um artigo sobre ferramentas, sim, mas é, principalmente, um artigo sobre &lt;b&gt;análise&lt;&#x2F;b&gt; e o protagonismo do desenvolvedor front-end nesse processo.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;resumo&quot;&gt;Resumo&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;strong&gt;Aplicações variam.&lt;&#x2F;strong&gt; Aprenda a definir a arquitetura da sua aplicação. Aprenda a reconhecer a necessidade de uma SPA (&lt;em&gt;Single Page Application&lt;&#x2F;em&gt;).&lt;&#x2F;p&gt;
&lt;p&gt;A “cultura jQuery” te afasta de tudo isso, e, portanto, distancia você do seu papel enquanto desenvolvedor front-end.&lt;&#x2F;p&gt;
&lt;hr&gt;
&lt;h2 id=&quot;introducao&quot;&gt;Introdução&lt;&#x2F;h2&gt;
&lt;p&gt;Se existe uma cultura nas agências digitais do Brasil que é unânime, é a cultura do jQuery. Não a cultura de utilizar todo o poder da biblioteca, no entanto, mas o hábito intrínseco de importar o &lt;code&gt;jqueryX.X.X.min.js&lt;&#x2F;code&gt; em todo projeto.&lt;&#x2F;p&gt;
&lt;p&gt;(Sim, em 2015.)&lt;&#x2F;p&gt;
&lt;p&gt;Sobre o que há de errado, serei sucinta, pois, para esse artigo, espero um público-alvo preguiçoso e acomodado.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;o-que-ha-de-errado&quot;&gt;O que há de errado&lt;&#x2F;h2&gt;
&lt;p&gt;…em usar jQuery em 2015? O que há de errado em importar jQuery ao iniciar o meu projeto?&lt;&#x2F;p&gt;
&lt;p&gt;Analisando superficialmente, &lt;strong&gt;nada&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Mas isso tem dado brecha a uma zona de conforto profunda e, na minha experiência, com raízes difíceis de arrancar. Essa cultura se expande e transcende aquilo que lhe deu origem. Portanto, perceba:&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Este não é um artigo sobre jQuery.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;A comunidade de AngularJS é um exemplo de que isso não é sobre jQuery. Muitos migraram dele ao Angular sem abandonar a cultura. O resultado? Bem, muito tem sido dito sobre código Angular legado, que ninguém quer dar manutenção. A escolha errada já foi feita, e isso é demasiadamente penoso para a manutenção de uma aplicação complexa.&lt;&#x2F;p&gt;
&lt;p&gt;O fato é que a &lt;strong&gt;cultura não mudou.&lt;&#x2F;strong&gt; Ainda se adota biblioteca ou framework em escala sem pensar duas vezes.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;aprendendo-a-evitar&quot;&gt;Aprendendo a evitar&lt;&#x2F;h2&gt;
&lt;p&gt;&lt;strong&gt;Deve-se saber quando abranger uma visão holística do projeto, e quando separar responsabilidades.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;A separação de responsabilidades se daria pela análise dos requisitos da aplicação e dos desafios gerados, que trazem consigo o que chamo de “subproblemas” (&lt;em&gt;necessidades que surgem durante a análise do desafio&lt;&#x2F;em&gt;), que devem ser solucionados separadamente. A visão holística ajudaria a estruturar os componentes de forma consistente em um sistema, definindo uma arquitetura.&lt;&#x2F;p&gt;
&lt;p&gt;Falando de desenvolvimento front-end moderno (e, portanto, falando de front-end &lt;strong&gt;modular&lt;&#x2F;strong&gt; e de unidades encapsuladas e independentes, os componentes), essa separação de responsabilidades torna-se ainda mais fácil! Vejamos, abaixo, alguns subproblemas que surgem durante a análise de requisitos, apenas para exemplificar o que quero dizer quando trato a decisão de ferramentas como uma solução para um subproblema.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Os exemplos a seguir não explicam o front-end modular na prática. Adianto, no entanto, ferramentas como &lt;a href=&quot;http:&#x2F;&#x2F;browserify.org&#x2F;&quot;&gt;Browserify&lt;&#x2F;a&gt; ou &lt;a href=&quot;https:&#x2F;&#x2F;webpack.github.io&#x2F;&quot;&gt;Webpack&lt;&#x2F;a&gt;, que fazem parte do &lt;em&gt;tooling&lt;&#x2F;em&gt; necessário.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;1-resiquicoes-ajax&quot;&gt;1. Resiquições Ajax&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;strong&gt;Subproblema&lt;&#x2F;strong&gt;: escrever Ajax em JavaScript é pouco intuitivo, difícil de ler e escrever.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Solução possível&lt;&#x2F;strong&gt;: encapsular, no componente um módulo como &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ded&#x2F;reqwest&quot;&gt;Reqwest&lt;&#x2F;a&gt; e &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;jakutis&#x2F;httpinvoke&quot;&gt;httpinvoke&lt;&#x2F;a&gt;. Você pode, inclusive, utilizar &lt;em&gt;apenas&lt;&#x2F;em&gt; o Ajax do &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;jquery&quot;&gt;jQuery&lt;&#x2F;a&gt; (e não o jQuery inteiro!).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;2-manipulacao-excessiva-do-dom&quot;&gt;2. Manipulação excessiva do DOM&lt;&#x2F;h3&gt;
&lt;p&gt;&lt;strong&gt;Subproblemas&lt;&#x2F;strong&gt;: manipular DOM com JavaScript pode ser bastante exaustivo. Também, manipular em um nível excessivo é extremamente custoso para a performance da aplicação.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Solução possível&lt;&#x2F;strong&gt;: &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;Matt-Esch&#x2F;virtual-dom&quot;&gt;Virtual DOM&lt;&#x2F;a&gt;, que está embutido em bibliotecas como &lt;a href=&quot;https:&#x2F;&#x2F;facebook.github.io&#x2F;react&#x2F;&quot;&gt;React&lt;&#x2F;a&gt; e &lt;a href=&quot;https:&#x2F;&#x2F;lhorie.github.io&#x2F;mithril&#x2F;&quot;&gt;Mithril&lt;&#x2F;a&gt;. Ou, se precisar mesmo do DOM, considere pacotes como &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ded&#x2F;qwery&quot;&gt;qwery&lt;&#x2F;a&gt; ou &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;bevacqua&#x2F;dominus&quot;&gt;Dominus&lt;&#x2F;a&gt;, junto com &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;domready&quot;&gt;domready&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;E se precisássemos de Ajax no React, por exemplo? &lt;a href=&quot;http:&#x2F;&#x2F;facebook.github.io&#x2F;react&#x2F;docs&#x2F;tutorial.html#getting-started&quot;&gt;Este mau exemplo&lt;&#x2F;a&gt; na documentação do React importa o jQuery inteiro. Como você faria? ;-)&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;sobre-arquitetura&quot;&gt;Sobre arquitetura&lt;&#x2F;h3&gt;
&lt;p&gt;Esse tópico deve ser tratado durante a visão holística do projeto, isso é, da aplicação enquanto sistema de componentes. O &lt;strong&gt;subproblema&lt;&#x2F;strong&gt; seria a necessidade de estrutura que uma aplicação requere.&lt;&#x2F;p&gt;
&lt;p&gt;Para isso, você não precisa usar aquilo que é tradicional (diretamente: &lt;strong&gt;você não precisa usar MVC&lt;&#x2F;strong&gt;). Existem outras implementações de arquiteturas que não a implementação feita pelo seu framework amado. Existem outras arquiteturas que não &lt;em&gt;Model-View-Controller&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Basicamente? Tenha um conhecimento decente de arquiteturas front-end (sugiro abrir a mente com &lt;a href=&quot;https:&#x2F;&#x2F;facebook.github.io&#x2F;react&#x2F;blog&#x2F;2014&#x2F;05&#x2F;06&#x2F;flux.html&quot;&gt;Flux&lt;&#x2F;a&gt;, que já possui bastante materiais e implementações da arquitetura disponíveís), e não um conhecimento aprofundado de MVC.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conclusao&quot;&gt;Conclusão&lt;&#x2F;h2&gt;
&lt;p&gt;Conheça o projeto e saiba como analisar seus requisitos. O resultado deve ser uma descrição explícita da sua aplicação, com subproblemas já reconhecidos e, então, soluções possíveis, todas envolvidas por uma solução possível maior, que é a da arquitetura (definida durante a análise holística). Parece chato, mas vira hábito e acaba funcionando muito bem.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;Lembre-se de que existem habilidades que a documentação de uma ferramenta &lt;em&gt;nunca&lt;&#x2F;em&gt;_ te ajudará a desenvolver.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;Com o tempo, você vai saber quando adotar um framework específico em escala, quando optar por bibliotecas monolíticas, e terá, inclusive, seus preferidos a ponto de não ter sempre que definir soluções possíveis para subproblemas que aplicações têm em comum.&lt;&#x2F;p&gt;
&lt;p&gt;(Em alguns projetos, você enxergará padrões, por exemplo: &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;ded&#x2F;qwery&quot;&gt;qwery&lt;&#x2F;a&gt;, &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;domready&quot;&gt;domready&lt;&#x2F;a&gt; e &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;lodash&quot;&gt;lodash&lt;&#x2F;a&gt; são usados juntos frequentemente.)&lt;&#x2F;p&gt;
&lt;p&gt;Um dia, no entanto, suas ferramentas falharão, outras ferramentas se adaptão melhor à realidade de seus projetos, e, então, o ciclo de análise recomeça. E você já sabe como proceder.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;seja-curioso&quot;&gt;Seja curioso&lt;&#x2F;h3&gt;
&lt;p&gt;No mais, seja curioso sobre arquiteturas de software, padrões de projeto, &lt;em&gt;tooling&lt;&#x2F;em&gt; — basta ser leitor(a). Seja curioso também sobre opiniões, principalmente quando elas tratam de desafios que ainda não tivemos. A &lt;strong&gt;visão crítica&lt;&#x2F;strong&gt; é ideal para abandonar a cultura jQuery.&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;O estudo permite que as soluções possíveis surjam mais intuitivamente.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;p&gt;A prática virá com os desafios, e nesses desafios é que deve entrar o seu protagonismo de apresentar soluções possíveis.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;notas&quot;&gt;Notas&lt;&#x2F;h2&gt;
&lt;p&gt;Esse é um rascunho de pensamentos que venho acumulando há algum tempo em razão de experiências de trabalho que tive, e confesso que eles podem ter sido apresentados de forma confusa, embora eu tenha me esforçado. Mas isso aqui não era para ser receita de bolo, de verdade! Até mesmo os exemplos citados não devem passar de exemplos.&lt;&#x2F;p&gt;
&lt;p&gt;A minha abordagem possui falhas, e uma deles é que exige de quem desenvolve um conhecimento vasto de ferramentas, quando se usava apenas uma para tudo. (Para isso, recomendo um recurso disponível no &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&quot;&gt;npm&lt;&#x2F;a&gt; e mecanismos de busca: a busca.)&lt;&#x2F;p&gt;
&lt;p&gt;Mas perceba que o conhecimento vasto é apenas de ferramentas. O conhecimento exigido pelas ferramentas em si acaba sendo menor do que o exigido por aquelas &lt;em&gt;all-in-one&lt;&#x2F;em&gt; como jQuery e AngularJS. O fato de encapsularmos dependências considerando a necessidade de cada componente no front-end é um modo de mantermos a curva de aprendizagem fragmentada.&lt;&#x2F;p&gt;
&lt;p&gt;De acordo com o que venho experimentando, desenvolver essa mentalidade tem retornado experiências maravilhosas e, inclusive, gerado menos código legado. Basta apenas aplicá-la à Engenharia de Software com bom senso.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;conteudo-sugerido&quot;&gt;Conteúdo sugerido&lt;&#x2F;h2&gt;
&lt;p&gt;Os complementos abaixo são apenas para despertar a curiosidade em relação aos conceitos apresentados neste artigo, e não devem substituir o estudo necessário para deixar de lado, na prática, a “cultura jQuery”.&lt;&#x2F;p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;jsperf.com&#x2F;virtual-dom-vs-real-dom&quot;&gt;JSPerf: Real DOM vs Virtual DOM&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;www.ebaytechblog.com&#x2F;2014&#x2F;10&#x2F;02&#x2F;dont-build-pages-build-modules&#x2F;&quot;&gt;Don’t Build Pages, Build Modules&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;www.infoq.com&#x2F;news&#x2F;2014&#x2F;05&#x2F;facebook-mvc-flux&quot;&gt;MVC Does Not Scale, Use Flux Instead&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;medium.com&#x2F;@milankinen&#x2F;good-bye-flux-welcome-bacon-rx-23c71abfb1a7&quot;&gt;Goodbye Flux, welcome Bacon&#x2F;rx?&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;E, humildemente, o meu próprio blog, pois pretendo falar mais sobre arquiteturas de aplicação e front-end modular (que adoro!) na teoria e prática.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;hr &#x2F;&gt;
&lt;p&gt;&lt;strong&gt;Se você entendeu a razão pela qual a “cultura jQuery” distancia você do seu papel, a mensagem foi entregue com sucesso.&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>A Guide to Favicons and Touch Icons</title>
        <published>2015-09-06T10:53:00+00:00</published>
        <updated>2015-09-06T10:53:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/a-guide-to-favicons-and-touch-icons/"/>
        <id>/blog/a-guide-to-favicons-and-touch-icons/</id>
        
        <content type="html" xml:base="/blog/a-guide-to-favicons-and-touch-icons/">&lt;div class=&quot;summary&quot;&gt;
&lt;p&gt;Favicon is a simplified visual element associated with a particular website, page or event, which you once found only in your browser’s address bar or bookmarks. Nowadays, the scenario is different: &lt;strong&gt;they are everywhere&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;
&lt;h2 id=&quot;introduction&quot;&gt;Introduction&lt;&#x2F;h2&gt;
&lt;p&gt;Favicons provide a important visual indicator to people, and help them to easily associate your content (which can be a &lt;em&gt;website&lt;&#x2F;em&gt;, a &lt;em&gt;particular page&lt;&#x2F;em&gt; or even &lt;em&gt;events&lt;&#x2F;em&gt; like a new message) when browsing.&lt;&#x2F;p&gt;
&lt;p&gt;Formerly, they, also called shortcut icons or bookmark icons, were just tiny pieces of art designed to help users to browse through their tabs or bookmarks. Today, shortcut icons can also provide an app-like link on operational systems (Windows 8, Android, OS X and so on), and should therefore be considered for achieving a pleasant cross-platform experience.&lt;&#x2F;p&gt;
&lt;p&gt;This is a guide for using favicons today, the right way. At the end of this article, I’m sure you’ll be excited about SVG favicons.&lt;&#x2F;p&gt;
&lt;!-- If you don&#x27;t want to understand such a thing, just [jump to the bulletproof solutions](#Bulletproof_favicons). --&gt;
&lt;h2 id=&quot;usage&quot;&gt;Usage&lt;&#x2F;h2&gt;
&lt;p&gt;Favicons in different dimensions are needed, so devices and browsers can pick the picture that fits best based on &lt;code&gt;sizes&lt;&#x2F;code&gt; attribute (little exception for Mozilla Firefox, which always gets the last favicon declared and scale it if necessary).&lt;&#x2F;p&gt;
&lt;p&gt;The images are not requested when not used. As said, browsers will get only what fits them best, therefore it’s important to provide the favicon in the required dimensions to avoid ugly scaled images.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;general&quot;&gt;General&lt;&#x2F;h3&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- I&amp;#39;m lazy --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Browser tabs --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-16x16.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;16x16&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Safari on OS X, IE10 Metro --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-32x32.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;32x32&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Google TV --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-96x96.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;96x96&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Chrome on Android --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-192x192.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;192x192&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;No need for &lt;code&gt;type=&quot;image&#x2F;png&quot;&lt;&#x2F;code&gt; when using HTML5.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;You’ll need to provide a manifest in order to Chrome on Android’s icon to work properly. See &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;diessica&#x2F;44ddce58c6094ce64d1d&quot;&gt;&lt;code&gt;manifest.json&lt;&#x2F;code&gt; example&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;manifest&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;manifest.json&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;lacking-of-png-support-on-ie-a-workaround&quot;&gt;Lacking of PNG support on IE: a workaround&lt;&#x2F;h4&gt;
&lt;p&gt;Internet Explorer until version 11 and Safari don’t support PNG favicons. However, you can provide a fallback for IE up to 9:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!--[if IE]&amp;gt; &amp;lt;link rel=&amp;quot;shortcut icon&amp;quot; href=&amp;quot;favicon.ico&amp;quot; &#x2F;&amp;gt; &amp;lt;![endif]--&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Notice the &lt;code&gt;shortcut&lt;&#x2F;code&gt;, which is a non-standard. Also, providing this fallback within a conditional comment is necessary; otherwise Chrome will use the ICO favicon, even if it supports PNG ones.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;&lt;strong&gt;I don’t recommend it&lt;&#x2F;strong&gt;, though, because IE 10 doesn’t support conditional comments (so it won’t get any favicon, as seen that it doesn’t support PNG too), and also because it encourages the use of the non-standard and confusing &lt;code&gt;shortcut&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Luckily, you can workaround everything just placing a &lt;code&gt;favicon.ico&lt;&#x2F;code&gt; in the root directory (the browser will look for it &lt;em&gt;automagically&lt;&#x2F;em&gt;). Then &lt;code&gt;link&lt;&#x2F;code&gt; only the PNG favicon and don’t worry.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;web-clip-bookmarks&quot;&gt;Web Clip bookmarks&lt;&#x2F;h3&gt;
&lt;p&gt;iOS users can add websites to their home screen – shortcuts called “Web Clip bookmarks”. The default icon is a thumbnail screenshot of the page, but developers can specify one instead.&lt;&#x2F;p&gt;
&lt;p&gt;You will need to provide a lot of dimensions in order to support both new devices and older (iOS6 and prior), however.&lt;&#x2F;p&gt;
&lt;p&gt;There’s a no-HTML way and a HTML way to provide those icons. It’s up to you.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;no-html-touch-icon-file&quot;&gt;No-HTML: Touch Icon file&lt;&#x2F;h4&gt;
&lt;p&gt;Add a &lt;code&gt;apple-touch-icon-*.png&lt;&#x2F;code&gt; file, where &lt;code&gt;*&lt;&#x2F;code&gt; is the size to the root directory, instead. iOS Safari will look for the appropriate icon size, and if it doesn’t find any that fits best, it’ll use &lt;code&gt;apple-touch-icon.png&lt;&#x2F;code&gt;.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;link-tags&quot;&gt;Link tags&lt;&#x2F;h4&gt;
&lt;p&gt;You can reuse the image of another favicon specifying a &lt;code&gt;href&lt;&#x2F;code&gt; (not possible while using the solution above).&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Non-retina iPhone pre iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;57x57&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-57x57.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Non-retina iPad pre iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;60x60&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-60x60.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;72x72&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-72x72.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Non-retina iPad iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;76x76&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-76x76.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Retina iPhone pre iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;114x114&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-114x114.png&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Retina iPhone iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;120x120&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-120x120.png&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Retina iPad pre iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;144x144&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-144x144.png&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Retina iPad iOS 7 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;152x152&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-152x152.png&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- iOS 8 --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;180x180&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;apple-touch-icon-180x180.png&amp;quot;
&lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Using &lt;code&gt;apple-touch-icon-precomposed&lt;&#x2F;code&gt; instead of &lt;code&gt;apple-touch-icon&lt;&#x2F;code&gt;, which prevents iOS icons defaults like rounded corners and reflective shine, isn’t necessary, as seen that there isn’t &lt;em&gt;shiny effects&lt;&#x2F;em&gt; on iOS 7 and up anymore.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;h3 id=&quot;windows-tiles&quot;&gt;Windows Tiles&lt;&#x2F;h3&gt;
&lt;p&gt;Tiles are icons that appear on the Start screen, linked as apps. By default, the image on the tile is the website’s favicon or a default IE11 logo.&lt;&#x2F;p&gt;
&lt;p class=&quot;note&quot;&gt;To cover a wide range of devices, use an image 1.8 times the standard tile size so the image can be scaled up or down as needed.&lt;&#x2F;p&gt;
&lt;p&gt;There’s a no-HTML way and a HTML way to provide those icons. It’s up to you, again.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;no-html-browser-config-file&quot;&gt;No-HTML: Browser config file&lt;&#x2F;h4&gt;
&lt;p&gt;Provide a &lt;code&gt;browserconfig.xml&lt;&#x2F;code&gt; file and save it at the root of your server. Internet Explorer 11 will automatically read the file when the user pins the website. See &lt;a href=&quot;https:&#x2F;&#x2F;gist.github.com&#x2F;diessica&#x2F;73a4d53cd26b4d35f410&quot;&gt;&lt;code&gt;browserconfig.xml&lt;&#x2F;code&gt; example&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;metadata-tags&quot;&gt;Metadata tags&lt;&#x2F;h4&gt;
&lt;p&gt;&lt;code&gt;msapplication-TileColor&lt;&#x2F;code&gt; is the background color of the tile, and &lt;code&gt;msapplication-TileImage&lt;&#x2F;code&gt; is the icon, which can be tiny (70 × 70px), square (150 × 150px), wide (310 × 150px) or large (310 × 310px).&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Windows Tile --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-TileColor&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;#000&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-TileImage&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tile-icon.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Different Windows Tiles (optional) --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-square70x70logo&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tile-icon_tiny.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-square150x150logo&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tile-icon_square.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-wide310x150logo&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tile-icon_wide.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;meta &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;name&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;msapplication-square310x310logo&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;content&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;tile-icon_large.png&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;bulletproof-favicons&quot;&gt;Bulletproof favicons&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;For Touch Icons, add &lt;code&gt;apple-touch-icon.png&lt;&#x2F;code&gt; and &lt;code&gt;apple-touch-icon-*.png&lt;&#x2F;code&gt; files, where &lt;code&gt;*&lt;&#x2F;code&gt; is the size, to the root directory.&lt;&#x2F;li&gt;
&lt;li&gt;For IE support, add a &lt;code&gt;favicon.ico&lt;&#x2F;code&gt; file with both 16 × 16px and 32 × 32px resources to the root directory.&lt;&#x2F;li&gt;
&lt;li&gt;For Windows Tiles, add a &lt;code&gt;browserconfig.xml&lt;&#x2F;code&gt; to the root directory.&lt;&#x2F;li&gt;
&lt;li&gt;For Chrome on Android icon, add a &lt;code&gt;manifest.json&lt;&#x2F;code&gt; to the root directory.&lt;&#x2F;li&gt;
&lt;li&gt;Add the following HTML to &lt;code&gt;&amp;lt;head&amp;gt;&lt;&#x2F;code&gt;:&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Chrome on Android --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-192x192.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;192x192&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;manifest&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;manifest.json&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Google TV --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-96x96.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;96x96&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Safari on OS X, IE10 Metro --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-32x32.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;32x32&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Browser tabs --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon-16x16.png&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;16x16&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Order matters here! Mozilla Firefox ignores &lt;code&gt;sizes&lt;&#x2F;code&gt; and always get the last favicon for the browser tabs. :-(&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;Or you can add all the favicons through &lt;code&gt;meta&lt;&#x2F;code&gt; and &lt;code&gt;link&lt;&#x2F;code&gt; tags.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;favicon-as-svg&quot;&gt;Favicon as SVG&lt;&#x2F;h2&gt;
&lt;p class=&quot;note&quot;&gt;
&lt;p&gt;Not encouraged as an unique solution, as seen that isn’t &lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&#x2F;#feat=link-icon-svg&quot;&gt;widely supported&lt;&#x2F;a&gt; yet.&lt;&#x2F;p&gt;
&lt;&#x2F;p&gt;
&lt;p&gt;I’m excited about this:&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;link &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;rel&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;icon&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;href&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;favicon.svg&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;sizes&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;any&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;image&#x2F;svg+xml&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;final-words&quot;&gt;Final words&lt;&#x2F;h2&gt;
&lt;p&gt;I’m sure you are now excited about SVG support for favicons. Providing a lot of different images is quite boring.&lt;&#x2F;p&gt;
&lt;p&gt;I encourage you to support favicons everywhere (or at least retina-ready ones), but unfortunately there’s no human-friendly way to do it nowadays. Use &lt;a href=&quot;https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;favicons&quot;&gt;favicons package&lt;&#x2F;a&gt; on npm or, if you are not comfortable with the command line, refer to &lt;a href=&quot;http:&#x2F;&#x2F;realfavicongenerator.net&quot;&gt;RealFaviconGenerator&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Don’t be lazy.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;references&quot;&gt;References&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;developer.android.com&#x2F;training&#x2F;tv&#x2F;index.html#favicons&quot;&gt;Android Documentation&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;developer.apple.com&#x2F;library&#x2F;ios&#x2F;documentation&#x2F;AppleApplications&#x2F;Reference&#x2F;SafariWebContent&#x2F;ConfiguringWebApplications&#x2F;ConfiguringWebApplications.html&quot;&gt;Apple Documentation&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;realfavicongenerator.net&#x2F;faq&quot;&gt;RealFaviconGenerator FAQ&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;mathiasbynens.be&#x2F;notes&#x2F;touch-icons&quot;&gt;Everything you always wanted to know about touch icons&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&#x2F;#feat=link-icon-svg&quot;&gt;SVG favicons support&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;caniuse.com&#x2F;#feat=link-icon-png&quot;&gt;PNG favicons support&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;http:&#x2F;&#x2F;iconhandbook.co.uk&#x2F;reference&#x2F;chart&#x2F;&quot;&gt;Icon handbook&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;a href=&quot;https:&#x2F;&#x2F;msdn.microsoft.com&#x2F;en-us&#x2F;library&#x2F;dn455106.aspx&quot;&gt;Creating custom tiles for IE11 websites&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Como Eu Vi a BrazilJS 2015</title>
        <published>2015-08-26T02:10:32+00:00</published>
        <updated>2015-08-26T02:10:32+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/como-eu-vi-a-braziljs-2015/"/>
        <id>/blog/como-eu-vi-a-braziljs-2015/</id>
        
        <content type="html" xml:base="/blog/como-eu-vi-a-braziljs-2015/">&lt;p&gt;É mais experiente que volto de mais uma BrazilJS, evento que acontece na cidade onde nasci desde &lt;a href=&quot;http:&#x2F;&#x2F;braziljs.com.br&#x2F;2012&quot;&gt;2012&lt;&#x2F;a&gt;. Aqui, compartilho não um relatório técnico das palestras, não acusações do que foi ruim ou bom, mas minhas visões, em conjunto, sobre a conferência e a comunidade.&lt;&#x2F;p&gt;
&lt;p&gt;Importante observar que &lt;strong&gt;não&lt;&#x2F;strong&gt; seleciono aqui a “nata” do evento. Não é minha intenção desmerecer qualquer acontecimento. Meu objetivo com esse texto é somente compartilhar o meu ponto de vista sobre o que penso que deve ser comentado.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;o-primeiro-dia&quot;&gt;O primeiro dia&lt;&#x2F;h2&gt;
&lt;p&gt;O meu dia começou localizando onde seria o evento. Neste ano, foi no BarraShoppingSul; um shopping que, considerando os outros da cidade, é de difícil acesso mesmo para quem mora há alguns quilômetros de Porto Alegre.&lt;&#x2F;p&gt;
&lt;p&gt;O Centro de Convenções, ao menos, foi fácil de achar, e o &lt;em&gt;check-in&lt;&#x2F;em&gt; ocorreu como esperado: pontual. As meninas que forneceram minha credencial estavam de ótimo humor — e olha que era um dos primeiros horários da manhã de sexta! Ano passado, o meu &lt;em&gt;check-in&lt;&#x2F;em&gt; foi feito pelo Jaydson, o que fez eu me perguntar onde estaria ele, se não credenciando os participantes do evento.&lt;&#x2F;p&gt;
&lt;p&gt;…E, na verdade, ele tinha se tornado um Power Ranger junto com o Felipe. E Power Rangers não fazem &lt;em&gt;check-in&lt;&#x2F;em&gt;. Descobri isso da pior maneira.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;uma-abertura-idiota&quot;&gt;Uma abertura idiota&lt;&#x2F;h3&gt;
&lt;p&gt;Dois desenvolvedores, os organizadores desse evento que trouxe mais de mil pessoas para o mesmo lugar, brincando de “lutinha” na frente de todo mundo, vestidos de Power Rangers só porque o JavaScript fez 20 anos. &lt;strong&gt;Essa foi a abertura da BrazilJS&lt;&#x2F;strong&gt;, e eu não mudaria nada.&lt;&#x2F;p&gt;
&lt;p&gt;Muita gente riu. Muita gente aplaudiu. Eu ri e aplaudi, e aplaudiria de novo, pois, sim, brincaram, mas também fizeram um trabalho muito sério. Ainda vestidos de Power Rangers, falaram um pouco da história da conferência e das expectativas para esse ano, finalizando com uma mensagem sobre a importância da diversidade e, sobretudo, do respeito.&lt;&#x2F;p&gt;
&lt;p&gt;Os eventos que se seguiram mostraram que, sim, o trabalho era sério.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;christian-heillman&quot;&gt;Christian Heillman&lt;&#x2F;h3&gt;
&lt;blockquote&gt;
&lt;p&gt;We are there for them. Not they for us.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Com uma camiseta do Brasil, Christian chegou com um dos assuntos mais importantes na atualidade, e que está dando muito o que falar: &lt;em&gt;pushing the web forward&lt;&#x2F;em&gt;. Palavras de protagonismo, reiteração do &lt;strong&gt;nosso papel&lt;&#x2F;strong&gt;, motivação para acreditar na web e no nosso trabalho, e, o mais importante: como isso deve ser feito. Falou, claro, sobre o ECMAScript 6, sobre o Babel, e fez uma análise de como resolvemos os problemas atualmente.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;We all know the DOM is slow, terrible and to blame for all our problems. Did we allot it to say that way and still be a problem as we &lt;strong&gt;abstracted its issues away?&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Acredito que essa essa frase foi pesada para muita gente, principalmente em quem está deprimido de tanto &lt;em&gt;estudar&lt;&#x2F;em&gt; soluções. Christian mostra que, ao trabalharmos com web, não somos apenas desenvolvedores ou designers (ao menos não deveríamos ser). Somos também &lt;strong&gt;web makers&lt;&#x2F;strong&gt;, e esse é o principal problema de simplesmente abstrair e deixar para lá.&lt;&#x2F;p&gt;
&lt;p&gt;É fácil entender a razão dessa abordagem. Heillman trabalha no time de desenvolvimento do Microsoft Edge, o novo e surpreendente navegador padrão do Windows 10, e esse é o ponto de vista dele enquanto &lt;em&gt;browser maker&lt;&#x2F;em&gt;: somos a representação máxima do protagonismo, e, por isso, desenvolver não deve limitar-se a &lt;em&gt;frameworks&lt;&#x2F;em&gt; ou &lt;em&gt;libraries&lt;&#x2F;em&gt;. Estamos em uma posição em que inovar sempre que possível é visto como uma contribuição, e ele ensina a entender esse ponto de vista desde a analogia feita logo nos primeiros slides. Não devemos esperar que a inovação venha apenas de grandes companhias.&lt;&#x2F;p&gt;
&lt;p&gt;Não disse para pararmos de usar ES6 com Babel. Não disse para usarmos ES6 em produção e beber água de coco na praia. Mas não é mentira que existem casos em que podemos, se assim desejarmos, relatar o que está de errado e o que faz falta, e é justamente aí que o nosso protagonismo é máximo.&lt;&#x2F;p&gt;
&lt;p&gt;Os argumentos foram reúnidos, as situações em que podemos nos tornar &lt;em&gt;web makers&lt;&#x2F;em&gt; foram apresentadas, e tudo em prol de provar o nosso protagonismo.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;You are a creator of the next web!&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Sem dúvidas, uma das melhores palestras que já assisti na minha vida. É difícil relatar uma interpretação detalhada sobre a mensagem do Christian, mas, aos que já se sentiram no dever de fazer a web um lugar melhor alguma vez e nunca deixaram de acreditar nessa mídia, acho que essas minhas palavras foram mais que o suficiente para compreender o pensamento dele. Simples e sensacional.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;use-lowlevel&quot;&gt;Use lowlevel&lt;&#x2F;h3&gt;
&lt;p&gt;Tive dificuldades em acompanhar o raciocínio do Douglas Campos algumas vezes, e noto que isso se deu em razão de ele não estar falando a língua nativa. Não entro aqui no mérito das palestras em Inglês ou Português (para mim tanto faz desde que o palestrante consiga passar a mensagem de forma fluente na língua escolhida), mas reforço a importância de fazer a escolha certa, pois a tua escolha afeta um público que está confiando na tua capacidade enquanto transmissor.&lt;&#x2F;p&gt;
&lt;p&gt;Douglas falou sobre compiladores, e engajou os desenvolvedores a entender &lt;em&gt;how things work under the hood&lt;&#x2F;em&gt;, explorando conceitos como AST (&lt;em&gt;Abstract Syntax Tree&lt;&#x2F;em&gt;), um assunto que está finalmente chamando a atenção em JavaScript, tanto que não foi a primeira vez que foi abordado na BrazilJS.&lt;&#x2F;p&gt;
&lt;p&gt;Acredito que o questionamento que o palestrante buscou provocar no público não teve êxito. Os 30 minutos, infelizmente, não foram bem aproveitados e não atenderam às perguntas que o Douglas tentou provocar e responder. Ficou a sensação de uma mensagem subentendida, no entanto:&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;It’s really important for us to take a look at the things we don’t necessarily like.&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;h3 id=&quot;javascript-at-spotify&quot;&gt;JavaScript at Spotify&lt;&#x2F;h3&gt;
&lt;p&gt;Felipe Ribeiro juntou os desafios encontrados durante a transição do Spotify (nativo com C++ para híbrido), e o resultado foi uma palestra bastante completa sobre arquitetura e engenharia de software. Diversificou bastante a programação da conferência, e mostrou que devemos analisar a necessidade de re-escrita de código em uma aplicação complexa sob uma ótica criteriosa que equilibra &lt;strong&gt;utilidade&lt;&#x2F;strong&gt;, &lt;strong&gt;valor&lt;&#x2F;strong&gt; e &lt;strong&gt;esforço necessário&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;desafios&quot;&gt;Desafios&lt;&#x2F;h4&gt;
&lt;p&gt;Os desafios foram bastante interessantes. Um deles foi o &lt;strong&gt;gerenciamento de memória&lt;&#x2F;strong&gt; no Spotify, já que se trata de uma aplicação que não é descartada com a mesma frequência de um site. Outro, a &lt;strong&gt;organização do código&lt;&#x2F;strong&gt;, que era excessivamente fragmentado, o que prejudicava a padronização (diferentes versões de módulos), manutenção (atualização em “efeito cascata”) e integração contínua do projeto.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;releases&quot;&gt;Releases&lt;&#x2F;h4&gt;
&lt;p&gt;O Spotify estabeleceu uma cultura colaborativa de testes (sempre gostei dessa abordagem!). Os empregados usam somente versões experimentais da aplicação, ajudando a testar e agilizar os &lt;em&gt;hotfixes&lt;&#x2F;em&gt;. O release é gradual, e é distribuído na medida em que a versão vai apresentando estabilidade aos usuários que já possuem acesso.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;a-saga-dos-12-topicos-de-acessibilidade&quot;&gt;A saga dos 12 tópicos de acessibilidade&lt;&#x2F;h3&gt;
&lt;p&gt;A primeira vez que conheci o Reinaldo Ferraz foi no Front in POA em 2012. Na época, acessibilidade era mais novidade para as pessoas do que Sass. Todos conheciam Sass, ninguém conhecia WCAG.&lt;&#x2F;p&gt;
&lt;p&gt;Lembro de ter sido uma das palestras mais marcantes e diferentes do evento, e não foi diferente na BrazilJS. Esta foi a mensagem que ficou:&lt;&#x2F;p&gt;
&lt;blockquote&gt;&lt;p&gt;&quot;Aplicar técnicas de acessibilidade em um site com usabilidade ruim é como passar batom em um porco. Não importa o quanto você passe, ele continuará sendo um porco.&quot;&lt;&#x2F;p&gt;&lt;footer&gt;— &lt;cite&gt;&lt;a href=&quot;http:&#x2F;&#x2F;webaim.org&#x2F;blog&#x2F;accessibility-lipstick-on-a-usability-pig&#x2F;&quot;&gt;Acessibility Lipstick on a Usability Pig&lt;&#x2F;a&gt;&lt;&#x2F;cite&gt;&lt;&#x2F;footer&gt;&lt;&#x2F;blockquote&gt;
&lt;h3 id=&quot;500-days-of-open-source&quot;&gt;500 days of open source&lt;&#x2F;h3&gt;
&lt;p&gt;Uma palestra que dividiu bastante o público. Na verdade, acredito que o Raphael Amorim deu o melhor dele para fazer o discurso significar exatamente o que ele queria que significasse. O Raphael sabe se comunicar muito bem, e paciência foi o único requisito para captar a mensagem.&lt;&#x2F;p&gt;
&lt;p&gt;Vi muita dedicação na apresentação que ele fez. Organizou os aprendizados e os desafios de seguir à risca &lt;a href=&quot;http:&#x2F;&#x2F;ejohn.org&#x2F;blog&#x2F;write-code-every-day&#x2F;&quot;&gt;a proposta do John Resig&lt;&#x2F;a&gt;, e os apresentou mostrando que “preencher grade de contribuições” ou “se sentir no dever todo dia” não é o suficiente para progredir. Inclusive, para quem acredita que isso é o suficiente, apresentou o &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;avinassh&#x2F;rockstar&quot;&gt;Rockstar&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Esse tipo de palestra é &lt;strong&gt;essencial&lt;&#x2F;strong&gt;, e eu não estou disposta a discutir isso com ninguém. Havia mais de mil pessoas no mesmo lugar, e, por mais que não pareça, é uma minoria que contribui ou gerencia algum projeto open source, e também é uma minoria que contribui há tempo o suficiente para passar por todos os desafios que o Raphael passou. Foi uma palestra sobre open source, mas também sobre esforço e saber o que está te movendo para se esforçar mais: &lt;strong&gt;criar&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;(Entendi o trocadilho no nome, a propósito.)&lt;&#x2F;p&gt;
&lt;h3 id=&quot;david-bryant&quot;&gt;David Bryant&lt;&#x2F;h3&gt;
&lt;blockquote&gt;
&lt;p&gt;Happy birthday, JavaScript!&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Terminou o primeiro dia de BrazilJS tal como o Christian o iniciou: fazendo-nos acreditar no que trabalhamos. David Bryant, que faz parte do &lt;a href=&quot;https:&#x2F;&#x2F;www.mozilla.org&#x2F;en-US&#x2F;about&#x2F;leadership&#x2F;&quot;&gt;&lt;em&gt;leadership team da Mozilla&lt;&#x2F;em&gt;&lt;&#x2F;a&gt;, falou sobre a evolução do JavaScript até o seu aniversário de 20 anos, e em como devemos acreditar na web em detrimento da plataforma nativa. Para isso, lembrou da palestra Nick Desaulniers, anterior a dele, que mostrava quanto esforço tem sido feito para que a web alcance a plataforma nativa.&lt;&#x2F;p&gt;
&lt;p&gt;David, representando a Mozilla, deixou óbvia a mensagem: &lt;em&gt;a web é a melhor plataforma&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;o-segundo-dia&quot;&gt;O segundo dia&lt;&#x2F;h2&gt;
&lt;h3 id=&quot;what-can-you-build-with-a-log&quot;&gt;What can you build with a log&lt;&#x2F;h3&gt;
&lt;p&gt;James começa explicando sua motivação: a impermancência e a centralização do conteúdo são coisas negativas da web. O que podemos fazer sobre isso? Ué, abrir o Vim, e construir meu cliente torrent, Flickr, Twitter…&lt;&#x2F;p&gt;
&lt;p&gt;O Substack é uma pessoa extremamente simples e humilde. É impossível não achá-lo, no mínimo, adorável. Um dos &lt;em&gt;live codings&lt;&#x2F;em&gt; mais fluídos e espontâneos que já assisti.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;reduce-seu-novo-melhor-amigo&quot;&gt;Reduce: seu novo melhor amigo&lt;&#x2F;h3&gt;
&lt;p&gt;A Ju Gonçalves explicou o uso do &lt;code&gt;reduce()&lt;&#x2F;code&gt; na prática. (Na prática mesmo, para sair da BrazilJS usando, caso nunca tenha usado.)&lt;&#x2F;p&gt;
&lt;p&gt;O tema escolhido complementou muito bem a palestra de programação funcional do Jacob Page, anterior a dela. O formato ficou perfeito para 30 minutos (a propósito, a ideia de abordar apenas o &lt;code&gt;reduce()&lt;&#x2F;code&gt; foi muito legal!), e deu para aprofundar bastante em algo que deve fazer parte do dia a dia. Só fiquei com a sensação de que 5 minutos a mais ajudariam ela a guiar os exemplos com mais calma. O tempo estava bastante inflexível nesse quesito.&lt;&#x2F;p&gt;
&lt;p&gt;Enfim, a Ju sabe o que faz. Não a conhecia pessoalmente ainda, mas conheço o trabalho e o entusiasmo dela e apostaria nela de longe, tal como a organização da conferência, sem dúvidas, fez.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;ecmascript-6-o-que-ha-de-novo-o-que-mudou-o-que-tem-de-bacana-ou-de-estranho&quot;&gt;ECMAScript 6: O que Há de Novo, O que Mudou, O que tem de Bacana ou de Estranho!&lt;&#x2F;h3&gt;
&lt;p&gt;Título engraçado.&lt;&#x2F;p&gt;
&lt;p&gt;Quem foi na BrazilJS do ano passado sabe muito bem quem é Jonathan Sampson. Em 2014, &lt;a href=&quot;https:&#x2F;&#x2F;youtu.be&#x2F;MMOZOkGfGGg?t=80&quot;&gt;ele deu um nó na cabeça do Daniel Filho&lt;&#x2F;a&gt; ao falar Português durante a entrevista.&lt;&#x2F;p&gt;
&lt;p&gt;No entanto, ano passado ele palestrou em Inglês. Neste ano, ele falou sobre o ES6 totalmente em &lt;strong&gt;Português&lt;&#x2F;strong&gt;, e fez muita gente rir com coisas simples, como, por exemplo, referir-se aos que não entendiam &lt;em&gt;hoisting&lt;&#x2F;em&gt; de variáveis como “&lt;strong&gt;chorões&lt;&#x2F;strong&gt; do Stack Overflow”, ou até mesmo perguntar como se traduz &lt;em&gt;replace&lt;&#x2F;em&gt; (todo mundo sabe que é “substchitutituir”, no caso).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;javascript-robotics-a-nodebots-show&quot;&gt;JavaScript Robotics: A NodeBots show&lt;&#x2F;h3&gt;
&lt;p&gt;Julián Duque é uma pessoa admirável. Eu fico realmente muito alegre vendo o envolvimento dele com projetos como a &lt;a href=&quot;http:&#x2F;&#x2F;nodeschool.io&quot;&gt;NodeSchool&lt;&#x2F;a&gt;. Pelo tópico da palestra, dá para ver como ele acredita bastante em JavaScript.&lt;&#x2F;p&gt;
&lt;p&gt;Como o &lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;seldo&#x2F;status&#x2F;635195901951107072&quot;&gt;Laurie disse&lt;&#x2F;a&gt;, o trabalho feito foi sensacional. Mereceu todos os aplausos recebidos, tanto pela apresentação quanto pelos projetos paralelos que organizou.&lt;&#x2F;p&gt;
&lt;p&gt;E &lt;a href=&quot;https:&#x2F;&#x2F;twitter.com&#x2F;julian_duque&#x2F;status&#x2F;635209141217296385&quot;&gt;ele fala Português&lt;&#x2F;a&gt; (não só no Twitter).&lt;&#x2F;p&gt;
&lt;h3 id=&quot;brendan-eich&quot;&gt;Brendan Eich&lt;&#x2F;h3&gt;
&lt;p&gt;Não estive na BrazilJS 2012, então esse foi o meu primeiro encontro com aquele conhecemos como &lt;strong&gt;criador do JavaScript&lt;&#x2F;strong&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;A palestra dele foi engraçada, motivacional e também técnica. Falou sobre como foi criar o JavaScript em 10 dias, deu explicações sobre o &lt;a href=&quot;http:&#x2F;&#x2F;www.wtfjs.com&#x2F;&quot;&gt;wtfjs&lt;&#x2F;a&gt;, e mostrou o quanto valeu a pena acreditar no JavaScript.&lt;&#x2F;p&gt;
&lt;p&gt;Terminou com a frase que foi a grande mensagem da BrazilJS 2015: &lt;em&gt;always bet on JS&lt;&#x2F;em&gt;.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;o-fim&quot;&gt;O fim&lt;&#x2F;h2&gt;
&lt;p&gt;O evento acabou com um show de rock e cerveja artesanal. Não sou uma pessoa agitada, nem gosto de beber cerveja, nem queria me arriscar a chegar tarde em casa (voltaria de ônibus), então me limitei a finalizar meu dia indo falar com o Daniel Filho, que estava com outras duas pessoas, o Leonardo Balter e o &lt;a href=&quot;http:&#x2F;&#x2F;igorapa.com&#x2F;fui-aprender-ingles.html&quot;&gt;Igor-que-foi-aprender-Inglês&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;(Conversar com o Leonardo faz bem para a mente, pois ele não só se dispõe a te ouvir como também te recebe bem. Se um dia encontrá-lo, inicie uma conversa, talvez você ganhe um grande amigo.)&lt;&#x2F;p&gt;
&lt;p&gt;Saindo do BarraShoppingSul, lembro que, fora do shopping, aquele é um lugar deserto. &lt;strong&gt;Deserto&lt;&#x2F;strong&gt;. Em direção a parada, com meu computador na mochila, encontro um homem que promete não me assaltar e que só quer dinheiro para ir para casa. Dou o que tenho para ajudar, e ele insiste que eu dê mais, afirmando &lt;em&gt;saber&lt;&#x2F;em&gt; que eu tenho mais. Nego gentilmente, e entro no T4 para ir embora logo. E, aos que não conhecem Porto Alegre, o T4 é simplesmente &lt;a href=&quot;http:&#x2F;&#x2F;zh.clicrbs.com.br&#x2F;rs&#x2F;porto-alegre&#x2F;noticia&#x2F;2014&#x2F;12&#x2F;a-rotina-do-t4-o-onibus-campeao-de-assaltos-em-porto-alegre-4658335.html&quot;&gt;o ônibus mais inseguro da cidade&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;p&gt;Era um assaltante. Isso foi me dito no ônibus por uma moça, que disse também que tive sorte de não ter sido assaltada. Não entendi o que me salvou, se foi a distância que mantive do homem, se foi o fato de eu não estar desatenta no celular… Enfim, cheguei em casa bem e feliz com os dois dias que se passaram.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;notas-sobre-o-espaco&quot;&gt;Notas sobre o espaço&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;O lugar onde a conferência ocorreu é legal, pareceu bem mais aberto que o Bourbon Country e não distancia as pessoas de quem palestra. O Teatro do Bourbon Country é confortável, exageradamente belo, possui uma ótima acústica; mas, além de enjoar, valoriza muito quem está palestrando, pois é um espaço para dar palestras e nada mais. Todo o networking que acontece ali é fora de onde as palestas ocorrem.&lt;&#x2F;li&gt;
&lt;li&gt;O espaço não é mais aberto no sentido de &lt;strong&gt;não te sufocar&lt;&#x2F;strong&gt;. O local fica no subsolo do shopping, portanto, não há acesso fácil e sem demora a rua, como havia no Bourbon Country. Lembro bem de ver o sol na BrazilJS do ano passado. Parece pouco, mas é muito importante quando se fica dois dias no mesmo lugar, com luz artificial e tal. Isso simplesmente dá muita abertura para acelerar a fadiga, ainda mais que você acaba comendo no shopping pela facilidade (pois a única coisa que tem no bairro do Barra é o próprio Barra, sério), então você nunca sai dali. Sinceramente, durante essa BrazilJS, eu esqueci que orbitávamos ao redor de uma estrela chamada Sol. (Esse parágrafo é muito pessoal, realmente não espero que ninguém concorde comigo com meus exageros, e de nenhuma forma exijo que sejam levados em consideração.)&lt;&#x2F;li&gt;
&lt;li&gt;Muitas pessoas levam notebooks e o Espaço BrazilJS foi uma ótima ideia para lidar com isso. Conciliou o útil (reconferir palestras, programar durante &lt;em&gt;coffee break&lt;&#x2F;em&gt;) ao agradável (não ficar no computador durante palestras). É muito legal ter um lugar para ficar com o notebook, embora eu não recomende levar caso vá embora de ônibus, como vivenciei.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;h2 id=&quot;notas-finais&quot;&gt;Notas finais&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;Foi difícil comer e beber no primeiro dia. Percebi que, em vez de as pessoas organizarem-se em filas, muitas ficavam no entorno da mesa do &lt;em&gt;coffee break&lt;&#x2F;em&gt;, e isso dificultou muito o fluxo. No segundo dia, no entanto, foi bem mais organizado.&lt;&#x2F;li&gt;
&lt;li&gt;Os organizadores não param. Estão sempre envolvidos com o evento, resolvendo pendências e atendendo a feedbacks. Houve dedicação integral por parte do Daniel, Felipe e Jaydson em fazer uma conferência confortável para todos. O segundo dia não foi mais tranquilo porque simplesmente foi e a a conferência deste ano não foi mais diversa porque simplesmente foi. Agradeço a eles por isso.&lt;&#x2F;li&gt;
&lt;li&gt;Percebi uma mudança de formato em vários aspectos neste ano, e a principal delas foi a &lt;strong&gt;redução da duração das palestras&lt;&#x2F;strong&gt;. Bastante notável. 30 minutos por padrão, e aproximadamente 1 hora para &lt;em&gt;keynotes&lt;&#x2F;em&gt;. Gostei bastante, já que possibilitou uma transição bem saudável entre assuntos e palestrantes, o que ajuda muito a digerir o conteúdo. A BrazilJS dura 2 dias inteiros que terminam cansativos, e é fato que isso acelera o cansaço, mesmo quando a apresentação está muito interessante.&lt;&#x2F;li&gt;
&lt;li&gt;Quanto mais eu comia o chocolate da Mozilla, mais eu queria. Tive de comer 7 seguidos para satisfazer o meu consumo desenfreado de açúcar. E não recomendo para ninguém.&lt;&#x2F;li&gt;
&lt;li&gt;A quantidade de homens é avassaladora. Embora as iniciativas em apoio à diversidade tenham sido realmente efetivas (vi, por exemplo, mais mulheres neste ano), sabe-se bem que uma mulher na BrazilJS é &lt;strong&gt;uma mulher em meio a homens&lt;&#x2F;strong&gt;. É o que a proporção permite afirmar.&lt;&#x2F;li&gt;
&lt;li&gt;Não havia camisetas da BrazilJS para mim, e isso me deixou um pouco triste, pois elas estavam muito bonitas neste ano. Segundo o Eu Compraria, a confecção foi apenas de versões masculinas da camiseta. No entanto, o problema não é a versão ser masculina, o problema é que o tamanho P da versão masculina é gigante em mim. Até a vendedora ficou com dó da minha situação. :-(&lt;&#x2F;li&gt;
&lt;li&gt;O BarraShoppingSul é um shopping completo e muito espaçoso, mas o bairro onde ele está é bastante inseguro e difícil de acessar caso você não esteja vindo de carro.&lt;&#x2F;li&gt;
&lt;li&gt;O Daniel Filho é um apresentador muito legal.&lt;&#x2F;li&gt;
&lt;li&gt;A BrazilJS 2015 foi ótima, e isso me deixa bastante ansiosa para a conferência de 2016.&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
&lt;p&gt;Até o próximo ano!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Multiline Sass Comments</title>
        <published>2015-08-17T00:00:00+00:00</published>
        <updated>2015-08-17T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/multiline-sass-comments/"/>
        <id>/blog/multiline-sass-comments/</id>
        
        <content type="html" xml:base="/blog/multiline-sass-comments/">&lt;p&gt;Since the beginning of this year, I’ve created a lot of different boilerplates for projects. Working as a freelancer makes you challenge yourself everyday to find out what fits better while working. Currently, it’s sometimes Stylus, sometimes Sass.&lt;&#x2F;p&gt;
&lt;p&gt;Stylus is flexible, and I love it. Sass isn’t, but it’s cool anyway. Sometimes I find it hard to bear its inflexibility, though.&lt;&#x2F;p&gt;
&lt;p&gt;On GitHub, there’s a closed &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;sass&#x2F;sass&#x2F;issues&#x2F;338&quot;&gt;issue about multiline comments on Sass&lt;&#x2F;a&gt; (&lt;em&gt;a Stylus feature!&lt;&#x2F;em&gt;), where I shared a solution for multiline Sass comments. A lot of people still don’t agree.&lt;&#x2F;p&gt;
&lt;p&gt;I just want people on community to know it, because it needs to be discussed.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;solution&quot;&gt;Solution&lt;&#x2F;h2&gt;
&lt;p&gt;Start writing the comment as if it were single-line (&lt;code&gt;&#x2F;&#x2F;&lt;&#x2F;code&gt;), then just follow its indentation. &lt;a href=&quot;https:&#x2F;&#x2F;github.com&#x2F;sass&#x2F;sass&#x2F;issues&#x2F;338#issuecomment-131855911&quot;&gt;Example&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span&gt;&#x2F;&#x2F; Multine comment
&lt;&#x2F;span&gt;&lt;span&gt;   Indent the &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;text
&lt;&#x2F;span&gt;&lt;span&gt;   And this will be &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;a&lt;&#x2F;span&gt;&lt;span&gt; comment too
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Is it available on Sass docs? Let me know!&lt;&#x2F;p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Desmitificando Seletores Complexos</title>
        <published>2013-11-28T00:00:00+00:00</published>
        <updated>2013-11-28T00:00:00+00:00</updated>
        
        <author>
          <name>
            
              Unknown
            
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="/blog/desmitificando-seletores-complexos/"/>
        <id>/blog/desmitificando-seletores-complexos/</id>
        
        <content type="html" xml:base="/blog/desmitificando-seletores-complexos/">&lt;p&gt;Se existem recursos no CSS que a total compreensão se restringe a uma parcela de desenvolvedores, esses são os combinadores filhos (&amp;gt;), irmãos adjacentes (+) e adjacentes gerais (~).&lt;&#x2F;p&gt;
&lt;p&gt;Sem dúvidas, esses 3 combinadores são tão poderosíssimos quanto mal-explicados. É importante compreendê-los integralmente e há dois bons motivos para isso: o seletor descendente não dá conta de tudo e, o óbvio: o CSS está evoluindo.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;x-y&quot;&gt;X &amp;gt; Y&lt;&#x2F;h2&gt;
&lt;blockquote&gt;
&lt;p&gt;Todo filho é necessariamente descendente, mas nem todo descendente é necessariamente filho.&lt;&#x2F;p&gt;
&lt;footer&gt;— &lt;cite&gt;Eu, sobre família&lt;&#x2F;cite&gt;&lt;&#x2F;footer&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Para que Y seja alvo da seleção, não importa a posição; basta que seja descendente direto de X - isso é, filho. Em outras palavras, basta que esteja interno diretamente ao elemento pai - e seja somente descendente dele. Isso quer dizer que Y não será alvo caso esteja interno a um elemento Z, mesmo que este esteja interno a X. Por essa razão o combinador “&amp;gt;” é também chamado de &lt;strong&gt;direto&lt;&#x2F;strong&gt;, pois não admite elementos internos indiretamente.&lt;&#x2F;p&gt;
&lt;h3 id=&quot;seletor-descendente-vs-seletor-filho&quot;&gt;Seletor descendente vs. seletor filho&lt;&#x2F;h3&gt;
&lt;p&gt;Lembrando da frase dita no início desse tópico, você já entende a diferença. Enquanto o &lt;strong&gt;descendente&lt;&#x2F;strong&gt; (X Y) herda as propriedades aos elementos direta e indiretamente internos (filhos, netos, bisnetos…), o alvo do &lt;strong&gt;combinador filho&lt;&#x2F;strong&gt; são os filhos unicamente diretos - sim, falar isso é redundante. O que faz todo sentido, afinal, um filho é tanto filho quanto descendente; e o neto, bisneto, trineto não é um filho, mas é descendente.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;na-pratica&quot;&gt;Na prática&lt;&#x2F;h4&gt;
&lt;p&gt;Imaginemos um artigo e seus respectivos parágrafos. Dentro desse artigo, haverá uma seção de informações que não estará diretamente relacionada ao artigo. Como o que se quer destacar é a leitura do artigo, seus parágrafos terão mais ênfase de alguma forma.&lt;&#x2F;p&gt;
&lt;h5 id=&quot;html&quot;&gt;HTML&lt;&#x2F;h5&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;article&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Título do artigo&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Primeiro parágrafo&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Segundo parágrafo&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;aside&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h2&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Informações&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h2&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;    &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;aside&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Terceiro parágrafo&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;article&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h5 id=&quot;css&quot;&gt;CSS&lt;&#x2F;h5&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;article &lt;&#x2F;span&gt;&lt;span&gt;&amp;gt; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;font-style&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;italic&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;p&gt;Assim, somente os parágrafos que são filhos diretos do elemento &lt;strong&gt;article&lt;&#x2F;strong&gt; serão estilizados.&lt;&#x2F;p&gt;
&lt;h2 id=&quot;x-y-1&quot;&gt;X + Y&lt;&#x2F;h2&gt;
&lt;p&gt;Se para ser alvo do seletor filho a posição era irrelevante, para ser alvo de um &lt;strong&gt;seletor irmão adjacente&lt;&#x2F;strong&gt; sua posição é critério decisivo. O elemento Y deve ser o primeiro elemento após X, com ambos dentro de um mesmo elemento Z (pai). O nome, portanto, é bem autoexplicativo: são &lt;strong&gt;irmãos&lt;&#x2F;strong&gt; por possuírem o mesmo pai (no caso, Z) e &lt;strong&gt;adjacentes&lt;&#x2F;strong&gt; por estarem necessariamente próximos.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;na-pratica-1&quot;&gt;Na prática 1&lt;&#x2F;h4&gt;
&lt;p&gt;Supondo um artigo constituído por um título e 3 parágrafos. O primeiro parágrafo após o título servirá como uma introdução ao artigo e, portanto, deve ser destacado com um aumento no tamanho da fonte.&lt;&#x2F;p&gt;
&lt;h5 id=&quot;html-1&quot;&gt;HTML&lt;&#x2F;h5&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;article&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Z --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Título do artigo&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- X --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&amp;lt;!-- Y --&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Debitis sint aperiam numquam nisi animi porro in reprehenderit!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;  &amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Magnam atque placeat fuga sed eligendi maxime neque labore. Doloribus?&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;article&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h5 id=&quot;css-1&quot;&gt;CSS&lt;&#x2F;h5&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;h1 &lt;&#x2F;span&gt;&lt;span&gt;+ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;p &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;font-size&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#bd93f9;&quot;&gt;20&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;px&lt;&#x2F;span&gt;&lt;span&gt;;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;na-pratica-2&quot;&gt;Na prática 2&lt;&#x2F;h4&gt;
&lt;p&gt;O &lt;strong&gt;checkbox hack&lt;&#x2F;strong&gt; funciona com o uso do combinador irmão adjacente.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;html-2&quot;&gt;HTML&lt;&#x2F;h4&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;checkbox&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;hider&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Hide me if you can!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;label &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;hider&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Esconder div&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;css-2&quot;&gt;CSS&lt;&#x2F;h4&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;checkbox&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;] {
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;display&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;none&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Esconde o checkbox *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;:checked + &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;display&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;none&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Quando o checkbox for checado, a div será escondida *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;x-y-2&quot;&gt;X ~ Y&lt;&#x2F;h2&gt;
&lt;p&gt;Seletor do &lt;strong&gt;CSS 3&lt;&#x2F;strong&gt;, o combinador &lt;strong&gt;adjacente geral&lt;&#x2F;strong&gt; tem uma definição bem semelhante ao irmão adjacente. Para que Y seja alvo, os elementos X e Y devem ser filhos de um mesmo elemento (irmãos) e X deve preceder Y, direta ou indiretamente - isso é, para que Y seja alvo, esse precedimento não precisa ser imediato.&lt;&#x2F;p&gt;
&lt;h4 id=&quot;na-pratica-3&quot;&gt;Na prática&lt;&#x2F;h4&gt;
&lt;p&gt;Esse combinador contorna algumas inflexibilidades do &lt;strong&gt;combinador irmão adjacente&lt;&#x2F;strong&gt;. Ainda com o exemplo do &lt;strong&gt;checkbox hack&lt;&#x2F;strong&gt;, podemos personalizar o elemento de forma não tão específica quanto à sua posição:&lt;&#x2F;p&gt;
&lt;h4 id=&quot;html-3&quot;&gt;HTML&lt;&#x2F;h4&gt;
&lt;pre data-lang=&quot;html&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-html &quot;&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;checkbox&amp;quot; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;id&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;shower&amp;quot; &lt;&#x2F;span&gt;&lt;span&gt;&#x2F;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;label &lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;for&lt;&#x2F;span&gt;&lt;span&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;shower&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Mostrar div&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;label&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Hide me if you can!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;span&gt;&amp;lt;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;Hide me too if you can!&amp;lt;&#x2F;&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div&lt;&#x2F;span&gt;&lt;span&gt;&amp;gt;
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h4 id=&quot;css-3&quot;&gt;CSS&lt;&#x2F;h4&gt;
&lt;pre data-lang=&quot;css&quot; style=&quot;background-color:#282a36;color:#f8f8f2;&quot; class=&quot;language-css &quot;&gt;&lt;code class=&quot;language-css&quot; data-lang=&quot;css&quot;&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;[&lt;&#x2F;span&gt;&lt;span style=&quot;color:#50fa7b;&quot;&gt;type&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;=&lt;&#x2F;span&gt;&lt;span style=&quot;color:#f1fa8c;&quot;&gt;&amp;quot;checkbox&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;],
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;display&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;none&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Esconde o checkbox e a div, por padrão *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;input&lt;&#x2F;span&gt;&lt;span&gt;:checked ~ &lt;&#x2F;span&gt;&lt;span style=&quot;color:#ff79c6;&quot;&gt;div &lt;&#x2F;span&gt;&lt;span&gt;{
&lt;&#x2F;span&gt;&lt;span&gt;  &lt;&#x2F;span&gt;&lt;span style=&quot;font-style:italic;color:#66d9ef;&quot;&gt;display&lt;&#x2F;span&gt;&lt;span&gt;: &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6be5fd;&quot;&gt;block&lt;&#x2F;span&gt;&lt;span&gt;; &lt;&#x2F;span&gt;&lt;span style=&quot;color:#6272a4;&quot;&gt;&#x2F;* Quando o checkbox for checado, a div aparecerá *&#x2F;
&lt;&#x2F;span&gt;&lt;span&gt;}
&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
&lt;h2 id=&quot;conclusao&quot;&gt;Conclusão&lt;&#x2F;h2&gt;
&lt;p&gt;As linguagens CSS e HTML foram documentadas para serem intuitivas: os elementos formam famílias com outros elementos pais, filhos, descendentes, irmãos…. Isso fica claro no nome dos seletores, que têm papel importante na compreensão do combinador; afinal, caso o desenvolvedor entenda que irmãos tem o mesmo pai e que filhos são descendentes diretos do pai, ele poderá tirar um bom proveito do nome dos combinadores para compreender seus funcionamentos.&lt;&#x2F;p&gt;
&lt;blockquote&gt;
&lt;p&gt;[…] In both cases, non-element nodes (e.g. text between elements) are ignored when considering adjacency of elements.&lt;footer&gt; &lt;cite&gt;&lt;span&gt;W3C&lt;&#x2F;span&gt;, sobre &lt;a href=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css3-selectors&#x2F;&quot;&gt;Selectors Level 3&lt;&#x2F;a&gt;&lt;&#x2F;cite&gt;&lt;&#x2F;footer&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;blockquote&gt;
&lt;p&gt;Há uma grande confusão - e com razão - entre os seletores irmãos adjacentes e irmãos gerais. Essa confusão se origina não só de suas classificações como &lt;a href=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css3-selectors&#x2F;#sibling-combinators&quot;&gt;seletores de combinação&lt;&#x2F;a&gt;, mas em seus comportamento e definição semelhantes. Tanto é verdade que o combinador adjacente geral (~) se comportará muitas vezes como um irmão adjacente (+), com a diferença de que o adjacente geral é menos exigente quanto à posição do elemento-alvo.&lt;&#x2F;p&gt;
&lt;p&gt;O uso será, portanto, facultativo em diversas situações. E, nesse caso, a minha recomendação é dar prioridade ao combinador adjacente, visto que é um seletor do CSS 2.1 e, portanto, compatível com uma maior gama de browsers. :-)&lt;&#x2F;p&gt;
&lt;h2 id=&quot;referencias&quot;&gt;Referências&lt;&#x2F;h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;W3C&lt;&#x2F;strong&gt;. &lt;a href=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;CSS21&#x2F;selector.html&quot;&gt;Selectors&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;
&lt;li&gt;&lt;strong&gt;W3C&lt;&#x2F;strong&gt;. &lt;a href=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;css3-selectors&#x2F;&quot;&gt;Selectors Level 3&lt;&#x2F;a&gt;, 29 setembro de 2011&lt;&#x2F;li&gt;
&lt;&#x2F;ul&gt;
</content>
        
    </entry>
</feed>