<?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: Wahid Ibrahimy</title>
    <description>The latest articles on DEV Community by Wahid Ibrahimy (@wahidibrahimy).</description>
    <link>https://dev.to/wahidibrahimy</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%2F219062%2F93a29c6f-16bf-4bae-84e5-85d88c595984.jpeg</url>
      <title>DEV Community: Wahid Ibrahimy</title>
      <link>https://dev.to/wahidibrahimy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/wahidibrahimy"/>
    <language>en</language>
    <item>
      <title>JavaScript: A Multi Paradigm Language</title>
      <dc:creator>Wahid Ibrahimy</dc:creator>
      <pubDate>Fri, 18 Feb 2022 03:35:12 +0000</pubDate>
      <link>https://dev.to/wahidibrahimy/javascript-a-multi-paradigm-language-527b</link>
      <guid>https://dev.to/wahidibrahimy/javascript-a-multi-paradigm-language-527b</guid>
      <description>&lt;p&gt;The JavaScript language is full of paradoxes. It has famously been invented in ten days and is now enjoying popularity almost unique in programming history.&lt;/p&gt;

&lt;p&gt;JavaScript’s multi-paradigm nature means you can write imperative, object-oriented or functional code, choosing the right tool for the job and leveraging your previous programming experience. As always, diversity is a source of flexibility and ultimately a strength.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>react</category>
    </item>
    <item>
      <title>Fluent UI is an exciting UI library created by the Microsoft</title>
      <dc:creator>Wahid Ibrahimy</dc:creator>
      <pubDate>Wed, 08 Sep 2021 02:11:05 +0000</pubDate>
      <link>https://dev.to/wahidibrahimy/fluent-ui-is-an-exciting-ui-library-created-by-the-microsoft-kb9</link>
      <guid>https://dev.to/wahidibrahimy/fluent-ui-is-an-exciting-ui-library-created-by-the-microsoft-kb9</guid>
      <description>&lt;p&gt;Fluent UI is an exciting UI library created by the Microsoft dev team; it provides components with behaviors and graphics similar to office products. It comes with a collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.&lt;br&gt;
The UI library offers compatibility with Desktop, Android, and iOS devices and is used by Office 365, OneNote, Azure DevOps, and other Microsoft products.&lt;br&gt;
It comes packed with many prebuilt components that can develop most parts of any application, and its design follows Microsoft’s Office Design Language.&lt;br&gt;
If you create an app that you want to feel and look like Office products, then waste no time!&lt;br&gt;
&lt;a href="https://developer.microsoft.com/en-us/fluentui#/"&gt;https://developer.microsoft.com/en-us/fluentui#/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Use react-error-boundary to handle errors in React</title>
      <dc:creator>Wahid Ibrahimy</dc:creator>
      <pubDate>Wed, 09 Sep 2020 03:39:34 +0000</pubDate>
      <link>https://dev.to/wahidibrahimy/use-react-error-boundary-to-handle-errors-in-react-3fbm</link>
      <guid>https://dev.to/wahidibrahimy/use-react-error-boundary-to-handle-errors-in-react-3fbm</guid>
      <description>&lt;p&gt;React 16 introduced a new concept of an “error boundary”.&lt;br&gt;
An "Error Boundary" is a special component that you write to handle runtime errors. For a component to be an Error Boundary:&lt;/p&gt;

&lt;p&gt;1- It must be a class component 🙁&lt;br&gt;
2- It must implement either getDerivedStateFromError or componentDidCatch.&lt;/p&gt;

&lt;p&gt;Luckily, we have react-error-boundary which exposes the last Error Boundary component anyone needs to write because it gives you all the tools you need to declaratively handle runtime errors in your React apps.&lt;/p&gt;

&lt;p&gt;So let's add react-error-boundary package and render the ErrorBoundary component:&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="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ErrorBoundary&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-error-boundary&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./style.css&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;ErrorFallback&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;role&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;alert&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Something&lt;/span&gt; &lt;span class="nx"&gt;went&lt;/span&gt; &lt;span class="nx"&gt;wrong&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;pre&lt;/span&gt; &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt;&lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;red&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;}}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/pre&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Greeting&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Farewell&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Goodbye&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;subject&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ErrorBoundary&lt;/span&gt; &lt;span class="nx"&gt;FallbackComponent&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;ErrorFallback&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Greeting&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Farewell&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ErrorBoundary&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&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;



</description>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>5 Best Resources To Learn Javascript in 2020</title>
      <dc:creator>Wahid Ibrahimy</dc:creator>
      <pubDate>Sun, 26 Jul 2020 04:51:09 +0000</pubDate>
      <link>https://dev.to/wahidibrahimy/5-awesome-website-you-can-learn-javascript-in-2020-139k</link>
      <guid>https://dev.to/wahidibrahimy/5-awesome-website-you-can-learn-javascript-in-2020-139k</guid>
      <description>&lt;p&gt;JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades.&lt;/p&gt;

&lt;p&gt;Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT. And with the recent SpaceX Dragon launch, JavaScript is even in space.&lt;/p&gt;

&lt;p&gt;One of the reasons for its popularity is the availability of a large number of frameworks and libraries. They make development much easier compared to traditional Vanilla JS development.&lt;/p&gt;

&lt;p&gt;1- The Modern JavaScript Tutorial &lt;a href="http://javascript.info/"&gt; Javascript.info &lt;/a&gt;&lt;br&gt;
2- An awesome more advanced written introduction to JavaScript: &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"&gt; A re-introduction to JavaScript &lt;/a&gt;&lt;br&gt;
3- 30 days of JavaScript challenges with corresponding videos by Wes Bos: &lt;a href="https://javascript30.com/"&gt; JS 30 &lt;/a&gt;&lt;br&gt;
4- A video series introducing JavaScript: &lt;a href="https://www.khanacademy.org/computing/computer-programming#programming"&gt; Khan Academy Computer Programming &lt;/a&gt;&lt;br&gt;
5- &lt;a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/"&gt; Free Code Camp &lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
