<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Joan Perals</title>
    <description>The latest articles on DEV Community by Joan Perals (@jperals).</description>
    <link>https://dev.to/jperals</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F248526%2Fa91f106e-8500-43d1-9f2d-70ad96843110.png</url>
      <title>DEV Community: Joan Perals</title>
      <link>https://dev.to/jperals</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jperals"/>
    <language>en</language>
    <item>
      <title>I switched to iPhone and I'm disappointed</title>
      <dc:creator>Joan Perals</dc:creator>
      <pubDate>Mon, 11 Oct 2021 21:02:03 +0000</pubDate>
      <link>https://dev.to/jperals/i-switched-to-iphone-and-i-m-disappointed-5bld</link>
      <guid>https://dev.to/jperals/i-switched-to-iphone-and-i-m-disappointed-5bld</guid>
      <description>&lt;p&gt;After about 8 years using Android phones and having become somewhat disappointed by how much a pervasive system it can be even if being somewhat open-source-based, and also having been close to the UI/UX design world for some time, I decided to give a try to the iPhone and experience the superior UI/UX design which, in my mind, it was supposed to have.&lt;/p&gt;

&lt;p&gt;Well, now I am not sure why I thought that. Maybe that was true in 2010. The fact is, I am clearly disappointed. Maybe iOS is stuck with designs that its users got used to since the beginning whereas as a second player Android was a bit more free (or actually forced) to learn and improve? Whatever the reason is, I find that, in terms of UI/UX, I made a bad deal. Here are some examples I noted down:&lt;/p&gt;

&lt;h2&gt;
  
  
  Notifications
&lt;/h2&gt;

&lt;p&gt;As probably one of the most interacted elements in a smartphone, I would dare to say that notifications are important. And they are remarkably both less functional and less clear than on Android. That is, they offer less functionality and they are also less clear when it comes to signaling how to use these functionalities. In more technical words, they offer both less "affordances" and worse "signifiers". Some examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Typical actions that you can directly do on Android notifications, like answering a message, are missing on iOS.&lt;/li&gt;
&lt;li&gt;On the other hand, tapping "Open" on the corresponding notification directly returns the call, which is actually not great because it might not be what the user wanted.&lt;/li&gt;
&lt;li&gt;A direct access to the phone settings is not to be found by swiping down, as it is on Android.&lt;/li&gt;
&lt;li&gt;When a floating notification appears while using the phone, dismissing it works by swiping it up, rather than left as when it appears while the phone is blocked. This is inconsistent ant took me a very long time to realize.&lt;/li&gt;
&lt;li&gt;To selectively clear notifications, you need to first swipe them left, then tap "Clear". On Android swiping it to the left already clears it, which seems convenient, so the only apparent justification to this is that besides clearing, two other actions also appear when swiping left: "Manage" and "Show". But "Manage" is for managing notification options for that particular app, which is something I personally never used so far and in my opinion could well be hidden somewhere else, and "Show" is exactly what I expect to be able to do by just tapping, without having to swipe. To make this a bit worse, "Clear" is translated in Catalan as "Esborrar", that is, "Delete", so I am always fearing that tapping there will actually delete the information from the corresponding app. Probably something similar happens in other languages, too.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Writing
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;When a tooltip with a suggested correction appears, tapping on the suggested word will dismiss the suggestion, whereas tapping on the little close button will apply it! This should work the other way around... right?&lt;/li&gt;
&lt;li&gt;Selecting text is not always easy. The cursor seems to have a strong tendency to select whole words, which you will have to fight against if you want to just modify a part of a word you wrote.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Alarms
&lt;/h2&gt;

&lt;p&gt;It has taken me literally months to figure out that I could edit alarms. Until then, I was accumulating them and wondering every time why there is no "Edit" option besides "Delete" when swiping left, until I found the "Edit" option at the top left corner of the screen. Why make a button so that it will seem that it affects all elements, if you can then only select one to edit?&lt;/p&gt;

&lt;h2&gt;
  
  
  Camera and pictures
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The picture format is always at 4:3 and I haven't figured out how to persist it to another setting.&lt;/li&gt;
&lt;li&gt;Editing images doesn't keep the original when saving?&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Language support
&lt;/h2&gt;

&lt;p&gt;Here I can speak only for the case of Catalan which is the language I use. Unfortunately the state of the Catalan language is clearly worse on iOS compared to Android:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No swiping keyboard.&lt;/li&gt;
&lt;li&gt;Third-party apps seem to have less Catalan support in general.&lt;/li&gt;
&lt;li&gt;Translation style differs from the established one everywhere else, most notably with use of infinitives instead of imperative for calls to action.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;On the back of my head, one of the reasons to get an iPhone was also that I was considering getting a decent smartwatch and I arrived to the conclusion that the Apple Watch was the best option. My disappointment now is so big, however, that I don't feel like going further this path and I might keep my 62 Euro Amazfit Bip which after all fulfills its main purpose, which is avoiding me distractions by showing notifications without having to reach out to the phone —even if it doesn't display emojis and "special characters" correctly. The battery lasts for 45 days, and I now refuse to replace it as long as it works.&lt;/p&gt;

</description>
      <category>ux</category>
      <category>ios</category>
      <category>android</category>
    </item>
    <item>
      <title>File naming: kebab-case or camelCase?</title>
      <dc:creator>Joan Perals</dc:creator>
      <pubDate>Wed, 23 Oct 2019 22:20:11 +0000</pubDate>
      <link>https://dev.to/jperals/file-naming-kebab-case-or-camelcase-gga</link>
      <guid>https://dev.to/jperals/file-naming-kebab-case-or-camelcase-gga</guid>
      <description>&lt;p&gt;When it comes to name files and directories, kebab-case should have the following advantages over camelCase:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Easier to type: no need to hold one key while typing another&lt;/li&gt;
&lt;li&gt;More readable: words are more clearly separated&lt;/li&gt;
&lt;li&gt;No problems for non case-sensitive file systems or configurations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;However, camelCase seems to have become the standard for naming files in frontend. Why is that? Maybe because of "convention contamination" from JavaScript? Does anyone have other, maybe more solid, reasons for that?&lt;/p&gt;

</description>
      <category>naming</category>
      <category>frontend</category>
      <category>kebabcase</category>
      <category>camelcase</category>
    </item>
    <item>
      <title>Why are you using React?</title>
      <dc:creator>Joan Perals</dc:creator>
      <pubDate>Wed, 16 Oct 2019 21:19:09 +0000</pubDate>
      <link>https://dev.to/jperals/why-are-you-using-react-42g8</link>
      <guid>https://dev.to/jperals/why-are-you-using-react-42g8</guid>
      <description>&lt;p&gt;React is the most used library for frontend development these days, and I would like to better understand why that is. So if you use, have used or are planning to use React, I am curious to read from you what were/are the reasons to adopt it, for example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Do you find it better than others, and if so for what reason(s)?&lt;/li&gt;
&lt;li&gt;Because it is the most used?&lt;/li&gt;
&lt;li&gt;Others chose it for you?&lt;/li&gt;
&lt;li&gt;Compatibility with other tools?&lt;/li&gt;
&lt;li&gt;You didn't stop to think about alternatives?&lt;/li&gt;
&lt;li&gt;Other reasons?&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>frontend</category>
    </item>
    <item>
      <title>CSS-only low-poly Earth Globe</title>
      <dc:creator>Joan Perals</dc:creator>
      <pubDate>Sat, 12 Oct 2019 21:42:15 +0000</pubDate>
      <link>https://dev.to/jperals/css-only-low-poly-earth-globe-1idc</link>
      <guid>https://dev.to/jperals/css-only-low-poly-earth-globe-1idc</guid>
      <description>&lt;p&gt;CSS-only Earth Globe experiment on CodePen: &lt;a href="https://codepen.io/jperals/full/ExYqwyJ"&gt;https://codepen.io/jperals/full/ExYqwyJ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;(Visit with caution: it's a bit resource hungry)&lt;/p&gt;

&lt;p&gt;Features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CSS 3D transforms&lt;/li&gt;
&lt;li&gt;CSS animations&lt;/li&gt;
&lt;li&gt;CSS gradient backgrounds&lt;/li&gt;
&lt;li&gt;CSS pseudo-selectors (&lt;code&gt;:before&lt;/code&gt;, &lt;code&gt;:after&lt;/code&gt;, &lt;code&gt;:nth-child&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;SCSS with trigonometric functions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The hardest part was to stretch the tiles according to the spherical surface (note that they are trapeziums, not rectangles, otherwise they would cross and overlap each other). For this an extra &lt;code&gt;:before&lt;/code&gt; pseudo-element was required which gets a slight 3D rotation. I wrote an isolated CodePen with the formula that finds the exact 3D transformation to render a specific trapezoid, which can be found &lt;a href="https://codepen.io/jperals/pen/WNeBqBG"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/jperals/pen/eYObWYW"&gt;This other CodePen&lt;/a&gt; shows how the tiles with part ground and part sea are achieved (using CSS gradient backgrounds).&lt;/p&gt;

&lt;p&gt;Finally, CSS provides 3D transformations but not light simulation, so I added an &lt;code&gt;:after&lt;/code&gt; pseudo-element to every tile that basically animates from opaque white to transparent to opaque black. To "shade" according to angle, each tile in the row has a different animation delay.&lt;/p&gt;

</description>
      <category>css</category>
      <category>scss</category>
      <category>codepen</category>
      <category>nojs</category>
    </item>
  </channel>
</rss>
