<?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: Okyn</title>
    <description>The latest articles on DEV Community by Okyn (@0kyn).</description>
    <link>https://dev.to/0kyn</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%2F741106%2F89e5095d-567d-4c01-8e02-8cb1c9e0762e.jpeg</url>
      <title>DEV Community: Okyn</title>
      <link>https://dev.to/0kyn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/0kyn"/>
    <language>en</language>
    <item>
      <title>My (first) Hacktoberfest journey</title>
      <dc:creator>Okyn</dc:creator>
      <pubDate>Mon, 08 Nov 2021 17:15:25 +0000</pubDate>
      <link>https://dev.to/0kyn/my-first-hacktoberfest-journey-i4</link>
      <guid>https://dev.to/0kyn/my-first-hacktoberfest-journey-i4</guid>
      <description>&lt;p&gt;On early September 2021, I decided to get more involved in the open source world. Feeling a need to giveback a part of everything I've learned from others. &lt;/p&gt;

&lt;p&gt;Neither confident of my coding skills nor of my english abilities, I had to work on my own fear of doing it bad. So I firstly published some repositories, then rapidly want to contribute elsewhere as it is the essence of open source.&lt;/p&gt;

&lt;h2&gt;
  
  
  First contribution
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Where should I start as a &lt;em&gt;firsttimer&lt;/em&gt;?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Google brought me here: &lt;a href="https://www.firsttimersonly.com/"&gt;https://www.firsttimersonly.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After understanding what is &lt;em&gt;a fork&lt;/em&gt;, &lt;em&gt;upstream&lt;/em&gt;, &lt;em&gt;pull request&lt;/em&gt; etc... I looked for a &lt;a href="https://goodfirstissues.com/"&gt;good first issue&lt;/a&gt;, and finally found somewhere I could help: &lt;a href="https://github.com/WordPress/openverse-frontend/issues/223"&gt;https://github.com/WordPress/openverse-frontend/issues/223&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I was as enthousiastic as stressed to open my first pull request, that I forgot a basic rule of courtesy.&lt;br&gt;
Another first time contributor explicitly ask for working on this issue. Few hours later, I unintentionally, nonetheless shamely, short circuit his potential work with &lt;a href="https://github.com/WordPress/openverse-frontend/pull/233"&gt;my first PR&lt;/a&gt;. 😳&lt;/p&gt;

&lt;p&gt;I &lt;strong&gt;should just ask&lt;/strong&gt; if anyone was already working on this issue before opening a PR.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How was your first contribution on Github?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here is the first pull request of &lt;a href="https://github.com/mdo"&gt;Mark Otto&lt;/a&gt;: &lt;a href="https://firstpr.me/#mdo"&gt;https://firstpr.me/#mdo&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  First Hactoberfest
&lt;/h2&gt;

&lt;p&gt;Thanks to dev.to and &lt;a class="mentioned-user" href="https://dev.to/ayushi7rawat"&gt;@ayushi7rawat&lt;/a&gt; I discovered what is &lt;a href="https://dev.to/ayushi7rawat/beginner-s-guide-to-hacktoberfest-2021-24d1"&gt;Hacktoberfest&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;An open source event at the same time of my first contributions sounds like an opportunity to stay focus on this learning journey. Otherwise, I like the idea of getting a 👕 or a 🌳!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Goal:&lt;/strong&gt; 4 pull requests merged in the main branch of repositories labeled &lt;code&gt;hacktoberfest&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;First of all, I was lucky as the first project I contributed to, &lt;a href="https://github.com/WordPress/openverse-frontend"&gt;Openverse Frontend&lt;/a&gt;, takes part in the event. I had some landmarks in the codebase which helped me to get &lt;strong&gt;3&lt;/strong&gt; PR merged.&lt;/p&gt;

&lt;p&gt;At this moment, wanting to find another "playground", I scrolled indefinitely this page &lt;a href="https://github.com/topics/hacktoberfest?l=javascript"&gt;https://github.com/topics/hacktoberfest?l=javascript&lt;/a&gt;. Axios, Chart.js, Meteor, Cypress... I didn't feel ready for that! &lt;/p&gt;

&lt;p&gt;I was becoming lazy for the last missing PR. I naively thought that sharing a personal project into a Hacktoberfest labeled repository which reference others first time contributor projects was OK. But It is not regarding to &lt;a href="https://hacktoberfest.digitalocean.com/resources#values"&gt;Hacktoberfest values&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;At least, it is ok to me to learn contributing process, and to put a light on a particular project!&lt;/p&gt;

&lt;p&gt;Always lazy and always missing a PR, I finally received a notification of a merged PR on &lt;a href="https://github.com/public-apis/public-apis"&gt;Public APIs&lt;/a&gt;. 🎉 &lt;strong&gt;4/4&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I learned?
&lt;/h2&gt;

&lt;p&gt;Apart from coding aspect, I learned a lot:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;not being too shy and asking even if the question seems stupid&lt;/li&gt;
&lt;li&gt;new english words: &lt;em&gt;sisyphean task&lt;/em&gt;, &lt;em&gt;LGTM&lt;/em&gt;, &lt;em&gt;FOSS&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;more about Github process and workflow&lt;/li&gt;
&lt;li&gt;removing an extra blankspace, fixing a typo, adding a line in a &lt;code&gt;README.md&lt;/code&gt; is enough to earn points&lt;/li&gt;
&lt;li&gt;there are no little contributions but a sum of ones that makes a huge one&lt;/li&gt;
&lt;li&gt;being more grateful to kind people sharing their knowledge, researches and time without counterpart&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To my mind, this event was a great way to enforce skills and to discover many open source projects! ❤️&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>github</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Pumpkins fall! 🎃</title>
      <dc:creator>Okyn</dc:creator>
      <pubDate>Sun, 31 Oct 2021 23:15:01 +0000</pubDate>
      <link>https://dev.to/0kyn/pumpkins-fall-43dg</link>
      <guid>https://dev.to/0kyn/pumpkins-fall-43dg</guid>
      <description>&lt;h1&gt;
  
  
  Happy Halloween 2021!
&lt;/h1&gt;

&lt;p&gt;I challenged myself and decided to code a tiny project related to Halloween and &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API"&gt;Canvas&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Si89C1aY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tp83lagbjdeulf8m08w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Si89C1aY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tp83lagbjdeulf8m08w.png" alt="screenshot" width="880" height="572"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Confetti 🎊
&lt;/h2&gt;

&lt;p&gt;I was looking toward a way to get a random particles generator in a canvas, and I came across this great tool &lt;a href="https://github.com/Agezao/confetti-js"&gt;confetti-js&lt;/a&gt; which widely inspired this project.&lt;/p&gt;

&lt;h2&gt;
  
  
  halloween-2021
&lt;/h2&gt;

&lt;p&gt;Nearly everything stands in the app config:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;canvas&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;images&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./images/bat.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./images/pumpkin.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./images/sweet.png&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="na"&gt;max&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;speed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerWidth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHeight&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;imageMinWidth&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;imageMaxWidth&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;One helpful function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;getRandomInt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;min&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;min&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ceil&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;min&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;max&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;random&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;max&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;min&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;min&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Demo and code (which might be frightening 😱) are available.&lt;/p&gt;

&lt;p&gt;Demo: &lt;a href="https://0kyn.github.io/halloween-2021/"&gt;https://0kyn.github.io/halloween-2021/&lt;/a&gt;&lt;br&gt;
Sources: &lt;a href="https://github.com/0kyn/halloween-2021"&gt;https://github.com/0kyn/halloween-2021&lt;/a&gt;&lt;/p&gt;

</description>
      <category>halloween</category>
      <category>javascript</category>
      <category>html</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
