<?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>Forem: Irfan Ullah Shakir</title>
    <description>The latest articles on Forem by Irfan Ullah Shakir (@irfanullahshakir).</description>
    <link>https://forem.com/irfanullahshakir</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%2F197860%2Fe1dfc10b-b50d-48ff-b807-a7fd56266069.png</url>
      <title>Forem: Irfan Ullah Shakir</title>
      <link>https://forem.com/irfanullahshakir</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/irfanullahshakir"/>
    <language>en</language>
    <item>
      <title>Best Strategy for choosing technology</title>
      <dc:creator>Irfan Ullah Shakir</dc:creator>
      <pubDate>Fri, 12 Mar 2021 11:59:04 +0000</pubDate>
      <link>https://forem.com/irfanullahshakir/best-strategy-for-choosing-technology-327i</link>
      <guid>https://forem.com/irfanullahshakir/best-strategy-for-choosing-technology-327i</guid>
      <description>&lt;p&gt;Now-a-days technologies are evolving rapidly. Should we stick to specific language(s) and move deeper and deeper or either take a slice of every language and move with current demand. I saw many developers having command on multiple platforms. By the way I am asking about web technologies.&lt;/p&gt;

</description>
      <category>help</category>
      <category>programming</category>
    </item>
    <item>
      <title>Best Practice of structuring Project </title>
      <dc:creator>Irfan Ullah Shakir</dc:creator>
      <pubDate>Thu, 03 Sep 2020 12:33:56 +0000</pubDate>
      <link>https://forem.com/irfanullahshakir/best-practice-of-structuring-project-1jn1</link>
      <guid>https://forem.com/irfanullahshakir/best-practice-of-structuring-project-1jn1</guid>
      <description>&lt;p&gt;I am a big fan of decoupling and dividing project into micro services.Many people says dividing project into front and back end is good practice.can we divide it more?&lt;br&gt;
For example I have a project having sections:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Website(Access for all)
2. Admin
3. Manager
4. Agent
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can consider it as different roles, but will have different functionalities and front ends.What is good structuring.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Should I go with 1 back-end and 1 frond-end(according to their roles as normally people do)
or&lt;/li&gt;
&lt;li&gt;Should I decouple it more and install different front-end project for each role with one API back-end?&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>help</category>
    </item>
    <item>
      <title>Laravel Echo not listening Event from Pusher </title>
      <dc:creator>Irfan Ullah Shakir</dc:creator>
      <pubDate>Thu, 20 Aug 2020 12:00:43 +0000</pubDate>
      <link>https://forem.com/irfanullahshakir/laravel-echo-not-listing-event-from-pusher-5dn1</link>
      <guid>https://forem.com/irfanullahshakir/laravel-echo-not-listing-event-from-pusher-5dn1</guid>
      <description>&lt;p&gt;I have an issue.I am accessing my pusher info from &lt;code&gt;.env file&lt;/code&gt; through process.env.VARIABLE_NAME inside &lt;code&gt;bootstrap.js&lt;/code&gt;(As defined inside laravel Docs in broadcasting section), but it gives me an error.I am working on laravel Pusher with VueJs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;bootstrap.js&lt;/strong&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;Echo&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;laravel-echo&lt;/span&gt;&lt;span class="dl"&gt;'&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;Pusher&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pusher-js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;Vue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$echo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Echo&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;broadcaster&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pusher&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MIX_PUSHER_APP_KEY&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;cluster&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MIX_PUSHER_APP_CLUSTER&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;forceTLS&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;My Vue File&lt;/strong&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;

    &lt;span class="nf"&gt;mounted&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;Vue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$echo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;private&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;expense&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ExpenseNotification&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&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;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;irfan ullah shakir&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&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;

&lt;p&gt;&lt;strong&gt;Error:&lt;/strong&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'private' of undefined"


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;em&gt;Code works fine to broadcast event to pusher, but have problem in receiving through 'Echo' inside vue mounted hook&lt;/em&gt;&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%2Fiq16ppzz1odhbz4zx2u4.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%2Fiq16ppzz1odhbz4zx2u4.PNG" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>vue</category>
      <category>help</category>
    </item>
  </channel>
</rss>
