<?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: Fatimah</title>
    <description>The latest articles on DEV Community by Fatimah (@fatimah).</description>
    <link>https://dev.to/fatimah</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%2F279822%2F8905c70b-43ba-4f41-bf95-cbd913f01b01.png</url>
      <title>DEV Community: Fatimah</title>
      <link>https://dev.to/fatimah</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fatimah"/>
    <language>en</language>
    <item>
      <title>Mass delete properties from a Javascript object</title>
      <dc:creator>Fatimah</dc:creator>
      <pubDate>Mon, 24 Feb 2020 11:10:00 +0000</pubDate>
      <link>https://dev.to/summitech/mass-delete-properties-from-a-javascript-object-egj</link>
      <guid>https://dev.to/summitech/mass-delete-properties-from-a-javascript-object-egj</guid>
      <description>&lt;p&gt;Suppose you had an object like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="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;person&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Obama&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;58&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;occupation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Statesperson&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;country&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;America&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;gender&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;male&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;marital_status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;married&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;and you'd like to delete the following properties: marital_status, occupation and gender.&lt;/p&gt;

&lt;p&gt;What you'd probably do (but hate) is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;marital_status&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;occupation&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;delete&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;gender&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This is obviously tedious. A better way will be to use ES6's destructuring syntax:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;marital_status&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;gender&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;occupation&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;others&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;console logging "others" will give you the person object without marital_status, occupation and gender.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Obama&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;58&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;country&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;America&lt;/span&gt;&lt;span class="dl"&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 cool thing to note is that the order of properties is not important, however, the new variable (in this case, others) must be at the end with the three ellipsis.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Laravel: How to configure multiple search drivers</title>
      <dc:creator>Fatimah</dc:creator>
      <pubDate>Tue, 04 Feb 2020 17:03:27 +0000</pubDate>
      <link>https://dev.to/summitech/laravel-how-to-configure-multiple-search-drivers-65</link>
      <guid>https://dev.to/summitech/laravel-how-to-configure-multiple-search-drivers-65</guid>
      <description>&lt;p&gt;In this tutorial, we will look at how to configure multiple search drivers in Laravel. As anyone familiar with Laravel knows, Algolia is the officially supported search driver, it is the only search engine that ships out of the box with Laravel scout.&lt;/p&gt;

&lt;p&gt;However, because Algolia can get pretty expensive, we mostly turn to other free alternatives till it is absolutely required to use Algolia.&lt;/p&gt;

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

&lt;p&gt;This is not a from-the-scratch tutorial so here are a couple of assumptions I am making:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You have built/curently building an app with the Laravel framework.&lt;/li&gt;
&lt;li&gt;You already have scout installed and most likely have one search driver currently set up. If not, &lt;a href="https://laravel.com/docs/6.x/scout"&gt;checkout the documentation on how to do this&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;You want to reduce your cost to the barest minimum by using Algolia for specific models with expensive search operations while the remaining models use the free alternative you have setup.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install algolia sdk via composer
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;composer require algolia/algoliasearch-client-php:^2.2&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add your app_id and secret to the .env file. To get this, login to your algolia account, go to API Keys and copy your application id and admin api key so you have something like this in your .env file
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;...
ALGOLIA_APP_ID=&amp;lt;application id&amp;gt;
ALGOLIA_SECRET=&amp;lt;admin api key&amp;gt;
...
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Configure algolia in your scout.php file:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;'algolia' =&amp;gt; [
        'id'     =&amp;gt; env('ALGOLIA_APP_ID', ''),
        'secret' =&amp;gt; env('ALGOLIA_SECRET', ''),
    ],
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;and also make sure the other search driver you have setup is your default e.g.&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;'driver' =&amp;gt; mysql&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Configure algolia for a particular model: &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Laravel scout has a &lt;code&gt;searchableUsing()&lt;/code&gt; method which is responsible for getting the appropriate scout engine for the model and this is what we'll be overriding.&lt;/p&gt;

&lt;p&gt;Right now, you can check the scout engine a model uses using artisan tinker like so:&lt;/p&gt;

&lt;p&gt;Run&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;php artisan tinker&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 then&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;App\Models\Patient::first()-&amp;gt;searchableUsing()&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 in my case, it returns&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;DamianTW\MySQLScout\Engines\MySQLEngine&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 which is the engine I am currently using.&lt;/p&gt;

&lt;p&gt;Now we have that confirmed, we can go ahead to override the method&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public function searchableUsing()
{
   return app(EngineManager::class)-&amp;gt;engine('algolia');
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;algolia&lt;/code&gt; in this case is from the engine we setup in our scout.php file i.e. the name we put in our engine must match what's stated in the scout config file. To avoid mistakes, we can add this to a constants file or a .env then pick from there. &lt;/p&gt;

&lt;p&gt;You can verify that the override was successful by checking as we did earlier with the tinker environment.&lt;/p&gt;

&lt;p&gt;So you can go ahead to (re)import your records and everything should work as normal.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>algolia</category>
      <category>scout</category>
    </item>
    <item>
      <title>Answer: Where should I put &lt;script&gt; tags in HTML markup?</title>
      <dc:creator>Fatimah</dc:creator>
      <pubDate>Tue, 07 Jan 2020 20:36:37 +0000</pubDate>
      <link>https://dev.to/fatimah/answer-where-should-i-put-script-tags-in-html-markup-4p95</link>
      <guid>https://dev.to/fatimah/answer-where-should-i-put-script-tags-in-html-markup-4p95</guid>
      <description>&lt;div class="ltag__stackexchange--container"&gt;
  &lt;div class="ltag__stackexchange--title-container"&gt;
    
      &lt;div class="ltag__stackexchange--title"&gt;
        &lt;h1&gt;
          &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pTF_nE4a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""&gt;
            &lt;a href="https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup/24070373#24070373" rel="noopener noreferrer"&gt;
              &lt;span class="title-flare"&gt;answer&lt;/span&gt; re:  Where should I put &amp;lt;script&amp;gt; tags in HTML markup?
            &lt;/a&gt;
        &lt;/h1&gt;
        &lt;div class="ltag__stackexchange--post-metadata"&gt;
          &lt;span&gt;Jun  5 '14&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup/24070373#24070373" rel="noopener noreferrer"&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5MiFESHx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""&gt;
        &lt;div class="ltag__stackexchange--score-number"&gt;
          1893
        &lt;/div&gt;
        &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Rk_a5QFN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""&gt;
      &lt;/a&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--body"&gt;
    
&lt;p&gt;Here's what happens when a browser loads a website with a &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag on it:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Fetch the HTML page (e.g. index.html)&lt;/li&gt;
&lt;li&gt;Begin parsing the HTML&lt;/li&gt;
&lt;li&gt;The parser encounters a &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tag referencing an external script file.&lt;/li&gt;
&lt;li&gt;The browser requests the script file. Meanwhile, the parser blocks and stops parsing the…&lt;/li&gt;
&lt;/ol&gt;
    
  &lt;/div&gt;
  &lt;div class="ltag__stackexchange--btn--container"&gt;
    
      &lt;a href="https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup/24070373#24070373" rel="noopener noreferrer"&gt;Open Full Answer&lt;/a&gt;
    
  &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>javascript</category>
      <category>fyi</category>
    </item>
    <item>
      <title>What's your internal technical documentation like?</title>
      <dc:creator>Fatimah</dc:creator>
      <pubDate>Tue, 07 Jan 2020 17:17:12 +0000</pubDate>
      <link>https://dev.to/fatimah/what-s-your-internal-technical-documentation-like-4aen</link>
      <guid>https://dev.to/fatimah/what-s-your-internal-technical-documentation-like-4aen</guid>
      <description>&lt;p&gt;I am really interested in how engineering teams do their internal technical documentation especially frontend teams. Is there a particular structure or is it just READMEs?&lt;/p&gt;

&lt;p&gt;The main focus here is seamless on-boarding of new team member(s).&lt;/p&gt;

&lt;p&gt;E.g for backend team, our doc structure is typically:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Overview (about the project, structure of the team etc)&lt;/li&gt;
&lt;li&gt;Getting Started (how to setup, environments quirks etc)&lt;/li&gt;
&lt;li&gt;Database (Info about the collections/tables, decisions behind designs, structure etc)&lt;/li&gt;
&lt;li&gt;Cloud Functions/APIs (Self explanatory)&lt;/li&gt;
&lt;li&gt;Best Practices (Testing, style guide)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, what's it like at your workplace? Please share.&lt;/p&gt;

&lt;p&gt;Thanks!&lt;/p&gt;

</description>
      <category>internaldocumentation</category>
      <category>frontend</category>
      <category>backend</category>
      <category>documentation</category>
    </item>
  </channel>
</rss>
