<?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: Yash Kumar Verma</title>
    <description>The latest articles on DEV Community by Yash Kumar Verma (@yashkumarverma).</description>
    <link>https://dev.to/yashkumarverma</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%2F254761%2F98ae9aba-705e-4fed-80e4-0a03ae15359f.jpeg</url>
      <title>DEV Community: Yash Kumar Verma</title>
      <link>https://dev.to/yashkumarverma</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/yashkumarverma"/>
    <language>en</language>
    <item>
      <title>How is GSoC different from other open source programs</title>
      <dc:creator>Yash Kumar Verma</dc:creator>
      <pubDate>Tue, 15 Jun 2021 16:12:49 +0000</pubDate>
      <link>https://dev.to/yashkumarverma/how-is-gsoc-different-from-other-open-source-programs-1mg3</link>
      <guid>https://dev.to/yashkumarverma/how-is-gsoc-different-from-other-open-source-programs-1mg3</guid>
      <description>&lt;p&gt;Google Summer of Code, or GSoC as most people like to call it has just started, and I am amazingly excited for it. Although this is not the first time I am participating in an open-source program, it's my first time with GSoC. So naturally, there's this question that often people ask: how is GSoC different from others?&lt;/p&gt;

&lt;p&gt;I had a humble beginning in the world of open-source when I first participated in Google Code-In (now discontinued :( ). Google CodeIn was like the younger sister of Google Summer of Code, with fewer organizations and easy to complete tasks. There were no proposals, no commitments, no selections. Everyone was free to pick up "tasks" that organizations gave, and in the end, one of the contributors was selected as a winner.&lt;/p&gt;

&lt;p&gt;Google CodeIn was different because there was a sense of competition in that. Everyone wanted to complete as many tasks as they could so that they gain an upper hand for the final tally (which was not revealed btw). One fine day the results were announced, and there were a bunch of super happy kids (I got to join this group once) and a whole lot of angry, grumpy kids who were not topping that charts (this is where I was for 3 years).&lt;/p&gt;

&lt;p&gt;Another open-source program was Coding Blocks BOSS, where BOSS stands for Bountiful Open Source Summer. Interesting name for an interesting program. BOSS was sponsored by Coding Blocks, a coaching company based in India, lead by talented people who are now part of prestigious MNCs.The rules were simple. Contribute to any coding blocks project, solve the issue, and claim the bounty for it. When the season ended, the top 5 contributors were given prizes like laptops, watches, kindles, etc.&lt;/p&gt;

&lt;p&gt;It was an overall pleasant experience, but the main issue was the waypoints were divided and assigned. A number of times, a significantly tough issue was marked with say, 100 points, and a hotfix monkey patch was also marked 100. Also, there was a lot of overlapping work, with people rushing to claim issues and send PRs, which resulted in multiple people sending PRs for the same change. Apart from that, the event was a good one.&lt;/p&gt;

&lt;p&gt;Google Season of Docs is an interesting initiative to include nonprogrammers into the world of open source. Contrary to GSoC, which is mainly for students and recent graduates, GSoD is open to all professionals who have experience in technical writing and blogging. The overall plan is the same as GSoC, organizations, open-source projects, funded by Google, proposals, and then a final selection list. While it is often assumed that project maintainers can handle all aspects of their projects, developers who are mainly concerned about code can find this program a bit off their lane.&lt;/p&gt;

&lt;p&gt;Finally, GSoC, it's different. It isn't a competition where people are competing against each other for an invisible index. It isn't a rat race where there's a score chart and people are rushing to gain as many points as possible. It's a mature, decent, and gradual learning experience. &lt;/p&gt;

&lt;p&gt;The popularity of GSoC ensures that it receives the best of what's there in the community, along with a decent stipend. The selection process is thorough and demands planning, management, and a solid deep dive into the project. As easy as it might appear, writing the proposal is one of the most challenging parts. GSoC requires an overall involvement in the organization community, coding contributions, and the ability to work on things independently.&lt;/p&gt;

&lt;p&gt;That's all the differences in the experiences I have had in these amazing open-source programs.&lt;/p&gt;

</description>
      <category>gsoc</category>
      <category>opensource</category>
      <category>experience</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>One CSS prop. to bypass an open react native issue</title>
      <dc:creator>Yash Kumar Verma</dc:creator>
      <pubDate>Thu, 30 Jul 2020 18:43:20 +0000</pubDate>
      <link>https://dev.to/yashkumarverma/one-css-prop-to-bypass-an-open-facebook-issue-bnh</link>
      <guid>https://dev.to/yashkumarverma/one-css-prop-to-bypass-an-open-facebook-issue-bnh</guid>
      <description>&lt;p&gt;Today I was working on RNTester's UI (an application used to test changes in React Native by Facebook) and experienced a weird error.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/W0VtJNnBAtyEuxyE4g/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/W0VtJNnBAtyEuxyE4g/giphy.gif" alt="we have a problem"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The navigation button wasn't responding to touches, and only a particular section of the button was working. &lt;/p&gt;

&lt;p&gt;This is how the navigation bar of our application look.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdeqplk6zearm5b1iou8s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fdeqplk6zearm5b1iou8s.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Yeah, that's a transparent button in the middle over there. Would be sharing it's recipe on my profile soon.&lt;/p&gt;

&lt;p&gt;Soon we figured out that the button was only responding when pressed at a particular part of it, and there it all started.&lt;/p&gt;

&lt;p&gt;In attempts to debug it, I first tried replacing the icon with different variants. It was a transparent PNG with only the white stroke color, on a blue background done by CSS.&lt;/p&gt;

&lt;p&gt;I tried Filling the png with color, merged the circle in the image itself to make the component bigger, used a jpeg because maybe it was "touchable" only at the painted area, and even filled the color using a pencil tool 😬 and guess what, nothing worked.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Ff63rM5t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Ff63rM5t.png" alt="https://i.imgur.com/f63rM5t.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally I started searching online because a simple image was not working as expected, and this was really frustrating. 😩&lt;/p&gt;

&lt;p&gt;With few minutes of scanning google first pages, i found these.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/facebook/react-native/issues/25441" rel="noopener noreferrer"&gt;https://github.com/facebook/react-native/issues/25441&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/react-native-community/react-native-svg/issues/624" rel="noopener noreferrer"&gt;https://github.com/react-native-community/react-native-svg/issues/624&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;the last of them (#624) didn't work, as you can see i tried adding a rectangle over the image (&lt;strong&gt;colored black for visibility&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/facebook/react-native/issues/25441" rel="noopener noreferrer"&gt;This one #25441&lt;/a&gt; had exactly the same problem as ours, a minus property on margin and not clickable, but the sad part was that this issue is not resolved, even when it was opened in 2019. 😟 and had a comment like  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I believe the functionality you expect does not exist in react native. 😱&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;some magick happens here&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I opened the Android Developer Tools and looked at the layout boundaries of the navbar. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fi4ykwhk8p0upwlqzvj38.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fi4ykwhk8p0upwlqzvj38.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;See that the button is being cut by another layout boundary. Test if the button is responding at all areas above the boundary.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Insert random prop fidgeting  here for 30 minutes&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Tried moving the blue circle one level up using a zIndex.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/NMufrvxO8fC3C/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/NMufrvxO8fC3C/giphy.gif" alt="what !"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  YIKES ! 😲 it worked? IT WORKED !!!
&lt;/h1&gt;

&lt;h2&gt;
  
  
  The reason.
&lt;/h2&gt;

&lt;p&gt;The button on the middle was implemented by positioning it beyond its boundaries, using a negative indexed property.So when I wrapped a &lt;a href="https://reactnative.dev/docs/touchableopacity" rel="noopener noreferrer"&gt;&lt;/a&gt; over the image component, it only converted the small view and not the entire blue button. (&lt;strong&gt;&lt;em&gt;see image below for better understanding&lt;/em&gt;&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fizskv18jhiihizn6edqv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fizskv18jhiihizn6edqv.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The TouchableOpacity was covering the entire image, but it was all just hidden below the bottom bar (even if it was visible), and a simple &lt;code&gt;zIndex&lt;/code&gt; property brought it up, and fixed it.&lt;/p&gt;

&lt;p&gt;Now I'm done. University homework calls.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg4ix1aj0rzeqqqz0mzug.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg4ix1aj0rzeqqqz0mzug.gif" alt="show over"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can catch me on &lt;a href="https://twitter.com/yash_kr_verma" rel="noopener noreferrer"&gt;twitter: @yash_kr_verma&lt;/a&gt; where I post similar stuff. &lt;/p&gt;

</description>
      <category>css</category>
      <category>javascript</category>
      <category>react</category>
      <category>reactnative</category>
    </item>
  </channel>
</rss>
