<?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: Peter Perkins</title>
    <description>The latest articles on DEV Community by Peter Perkins (@dudeastronaut).</description>
    <link>https://dev.to/dudeastronaut</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%2F710703%2F73c97959-fd83-47b1-b8e1-3e6077319b14.jpg</url>
      <title>DEV Community: Peter Perkins</title>
      <link>https://dev.to/dudeastronaut</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dudeastronaut"/>
    <language>en</language>
    <item>
      <title>Find/Extract Features by largest size (aggregate) 🌎</title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Mon, 14 Feb 2022 15:01:20 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/findextract-features-by-largest-size-aggregate-28m0</link>
      <guid>https://dev.to/dudeastronaut/findextract-features-by-largest-size-aggregate-28m0</guid>
      <description>&lt;p&gt;Say you have multiple shapes within parent shapes; in this case, buildings that belong on parcels of land. We can use the &lt;code&gt;maximum()&lt;/code&gt; expression in QGIS to find the largest building on each parcel.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Keys&lt;/strong&gt;: Each building shape needs a unique ID and a foreign key that associates it with the parcel (its parent). In this case I found the &lt;code&gt;Pole Of Inaccessibility&lt;/code&gt; for each building and used that point in a &lt;code&gt;Join by Location&lt;/code&gt; against the parcel to create a foreign key to create a relationship between the buildings and parcels.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Size&lt;/strong&gt;: Each buildings needs a field that defines its area&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Expression:
&lt;/h2&gt;

&lt;h6&gt;
  
  
  *We use &lt;code&gt;Extract by Expression&lt;/code&gt; tool with the parcels layer selected as the input layer.
&lt;/h6&gt;



&lt;p&gt;&lt;code&gt;"SHAPE_AREA" = maximum("SHAPE_AREA",group_by:="PARCEL_ID")&lt;/code&gt;&lt;br&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%2Fuploads%2Farticles%2F66fpoq0cti0u8ar38gma.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%2Fuploads%2Farticles%2F66fpoq0cti0u8ar38gma.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Notes:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Expression Breakdown&lt;/strong&gt;: All that needs to be replaced is &lt;code&gt;SHAPE_AREA&lt;/code&gt; and &lt;code&gt;PARCEL_ID&lt;/code&gt;. Keep the remaining syntax the same. I was not familiar with the &lt;code&gt;group_by:=&lt;/code&gt; syntax and thought this was a memo in documentation I read but this is literally part of the function. Image showing the function below.&lt;/li&gt;
&lt;/ul&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%2Fw120jqmxonxbovsmod3j.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%2Fuploads%2Farticles%2Fw120jqmxonxbovsmod3j.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Processing Time&lt;/strong&gt;: In my tests I found that the processing time was not linear. What I mean by this is comparing 1000 features does not always take 10 times as long as 100 features. I believe the calculation is ~exponential meaning that the more features you add to compare, the longer the processing time by a factor of x (not sure exactly). If you have a large dataset that you are running this expression against (&amp;gt;50,000 features), I would recommend splitting up the layer you are processing into chunks, run the expression on each, and then merge. You should be able to split the layer without duplicates but if you want to be sure you can always run a &lt;code&gt;Remove Duplicates&lt;/code&gt; expression after the merge at the end.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;~56,000 features took about 110 minutes to process.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>qgis</category>
      <category>gis</category>
    </item>
    <item>
      <title>CSV record count not matching your source? 🙈 </title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Mon, 31 Jan 2022 15:22:23 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/csv-record-count-not-matching-your-source-3kb3</link>
      <guid>https://dev.to/dudeastronaut/csv-record-count-not-matching-your-source-3kb3</guid>
      <description>&lt;p&gt;CSV record count not matching your source? You've probably got rouge carriage returns in the source data. If you're in MS Excel you can do a &lt;code&gt;Search and Replace&lt;/code&gt; on the source data before saving as a CSV. &lt;/p&gt;

&lt;h3&gt;
  
  
  How To:
&lt;/h3&gt;

&lt;p&gt;Search and Replace (in Excel). In the search box type &lt;code&gt;Ctrl + J&lt;/code&gt; to insert a carriage return. It will look like there is nothing in the search box but its there. Click &lt;code&gt;Find All&lt;/code&gt; to find and see all fields with carriage returns. To remove, simply click &lt;code&gt;Replace All&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8Ho161tL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu3ylucp9w7vhy5g03sc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8Ho161tL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu3ylucp9w7vhy5g03sc.png" alt="Image description" width="600" height="362"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>csv</category>
      <category>processing</category>
    </item>
    <item>
      <title>Import a CSV file into a MySQL database using PHP PDO (fast af) 🚀</title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Mon, 31 Jan 2022 00:20:14 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/import-a-csv-file-into-a-mysql-database-using-php-pdo-jn1</link>
      <guid>https://dev.to/dudeastronaut/import-a-csv-file-into-a-mysql-database-using-php-pdo-jn1</guid>
      <description>&lt;p&gt;Let say you're like me and need to get ~2Gib of records into a SQL database. Most of us are probably running a shared hosted server and have limitations regarding file upload size in phpMyAdmin. Honestly, after discovering this new method, I dont know that I'll ever upload big data another way.&lt;/p&gt;

&lt;p&gt;Here is a great &lt;a href="https://gist.github.com/stavrossk/0f513ccbfe7882870ab1"&gt;PHP Script&lt;/a&gt; from &lt;a href="https://gist.github.com/stavrossk"&gt;Stavros Skamagkis&lt;/a&gt; that uses PDO. It is pretty self explanatory. I've included a modified version below.&lt;/p&gt;

&lt;p&gt;So how long does the import take? Well, in my case I have ~1,800,000 records with 30 columns and it takes seconds, like less than 5 😎.&lt;/p&gt;

&lt;p&gt;Tips:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Define &lt;code&gt;fieldseparator&lt;/code&gt;, &lt;code&gt;fieldEscapedBy&lt;/code&gt;, &lt;code&gt;fieldEnclosedBy&lt;/code&gt;, and &lt;code&gt;lineSeperator&lt;/code&gt; as variables (shown in first few lines). I span my wheels a little defining them inline which did not work (I believe because of PDO).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CSV file location is relative to this files location.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Header? Use &lt;code&gt;IGNORE 1 LINES&lt;/code&gt; to skip the first line.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to run? I created a Development Button and linked &lt;code&gt;onClick()&lt;/code&gt; that connects via Ajax to the resource. I'm know there are easier methods, I just already had it setup. Nevertheless, this works.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;
&lt;span class="c1"&gt;//  Code Source: https://gist.github.com/stavrossk/0f513ccbfe7882870ab1&lt;/span&gt;

&lt;span class="nv"&gt;$databasehost&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"localhost"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$databasename&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"YOUR_DATABASE_NAME"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$databasetable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"YOUR_DATABASE_TABLE"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$databaseusername&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"YOUR_DATABASE_USERNAME"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$databasepassword&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'YOUR_DATABASE_PASSWORD'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$fieldSeparator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;";"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$fieldEscapedBy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$fieldEnclosedBy&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'"'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nv"&gt;$lineSeparator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nv"&gt;$csvfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"../FILE_TO_IMPORT.csv"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nb"&gt;file_exists&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$csvfile&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;error_log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'File does NOT exist!'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;die&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"File not found. Make sure you specified the correct path."&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="nv"&gt;$pdo&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;PDO&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="s2"&gt;"mysql:host=&lt;/span&gt;&lt;span class="nv"&gt;$databasehost&lt;/span&gt;&lt;span class="s2"&gt;;dbname=&lt;/span&gt;&lt;span class="nv"&gt;$databasename&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nv"&gt;$databaseusername&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nv"&gt;$databasepassword&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="k"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="no"&gt;PDO&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;MYSQL_ATTR_LOCAL_INFILE&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="no"&gt;PDO&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;ATTR_ERRMODE&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="no"&gt;PDO&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;ERRMODE_EXCEPTION&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;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;PDOException&lt;/span&gt; &lt;span class="nv"&gt;$e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nb"&gt;error_log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'database connection failed!'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;die&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"database connection failed: "&lt;/span&gt; &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$e&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;getMessage&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nv"&gt;$affectedRows&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nb"&gt;exec&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s2"&gt;"LOAD DATA LOCAL INFILE "&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;quote&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$csvfile&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;" INTO TABLE `&lt;/span&gt;&lt;span class="nv"&gt;$databasetable&lt;/span&gt;&lt;span class="s2"&gt;` FIELDS TERMINATED BY "&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;quote&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$fieldSeparator&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;" ESCAPED BY "&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;quote&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$fieldEscapedBy&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;" ENCLOSED BY "&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;quote&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$fieldEnclosedBy&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;" LINES TERMINATED BY "&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="nv"&gt;$pdo&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;quote&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$lineSeparator&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="mf"&gt;.&lt;/span&gt; &lt;span class="s2"&gt;" IGNORE 1 LINES "&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Loaded a total of &lt;/span&gt;&lt;span class="nv"&gt;$affectedRows&lt;/span&gt;&lt;span class="s2"&gt; records from this csv file.&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="cp"&gt;?&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>sql</category>
      <category>csv</category>
      <category>php</category>
      <category>pdo</category>
    </item>
    <item>
      <title>DateTime-&gt;diff | Does It Round? (no)</title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Mon, 25 Oct 2021 13:10:24 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/datetime-diff-does-it-round-no-5d3e</link>
      <guid>https://dev.to/dudeastronaut/datetime-diff-does-it-round-no-5d3e</guid>
      <description>&lt;p&gt;In working with differences between timestamps I had a question that may seem trivial, however with the answer not clearly defined in the &lt;a href="https://www.php.net/manual/en/datetime.diff.php"&gt;manual&lt;/a&gt;, I wanted to write up my findings 🤓&lt;/p&gt;

&lt;p&gt;The question: Does the &lt;code&gt;-&amp;gt;diff&lt;/code&gt; function that can be used with &lt;code&gt;DateTime()&lt;/code&gt; round to the nearest day? For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;error_log("DateTime round question");

$date_start = new DateTime('2021-10-22 00:00:00');
$date_end = new DateTime('2021-10-22 23:59:59');
$difference = $date_start-&amp;gt;diff($date_end);

error_log("timeDifference: " . $difference-&amp;gt;days);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result to this is: &lt;code&gt;timeDifference: 0&lt;/code&gt;;&lt;/p&gt;

&lt;p&gt;The time differences are 1 second from being 1 day apart and the result of the difference is 0 days - perfect!&lt;/p&gt;

</description>
      <category>php</category>
    </item>
    <item>
      <title>Learn  Array Destructuring</title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Tue, 05 Oct 2021 13:35:36 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/learn-array-destructuring-2fai</link>
      <guid>https://dev.to/dudeastronaut/learn-array-destructuring-2fai</guid>
      <description>&lt;h2&gt;
  
  
  👏 #mustknow
&lt;/h2&gt;

&lt;p&gt;Learning JS or React? Learn to deconstruct arrays using the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"&gt;destructuring assignment&lt;/a&gt; syntax.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;

&lt;h6&gt;
  
  
  Example curtesy &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"&gt;MND Web Docs&lt;/a&gt;
&lt;/h6&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>array</category>
      <category>destructure</category>
    </item>
    <item>
      <title>Text-Align Select (Safari Fix)</title>
      <dc:creator>Peter Perkins</dc:creator>
      <pubDate>Sun, 03 Oct 2021 17:49:16 +0000</pubDate>
      <link>https://dev.to/dudeastronaut/text-align-select-safari-fix-2o87</link>
      <guid>https://dev.to/dudeastronaut/text-align-select-safari-fix-2o87</guid>
      <description>&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%2F9u84vgcwcoj8tojl0gg7.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%2Fuploads%2Farticles%2F9u84vgcwcoj8tojl0gg7.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have you ever tried to &lt;code&gt;text-align&lt;/code&gt; a &lt;code&gt;select&lt;/code&gt; element? Safari is not a fan (no support). The answer to this question has eluded me and seemingly the internet - so here we are with a solution.&lt;/p&gt;

&lt;h1&gt;
  
  
  Quick Answer
&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;direction: rtl;&lt;/code&gt;&lt;br&gt;
&lt;a href="https://codepen.io/dodecahedron/pen/abwrmxM" rel="noopener noreferrer"&gt;Code Pen Example&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's start with a simple example. It is important to note that the width of a select element will be as wide as its longest option.&lt;/p&gt;

&lt;p&gt;HTML&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;select&amp;gt;
  &amp;lt;option&amp;gt;1&amp;lt;/option&amp;gt;
  &amp;lt;option&amp;gt;10&amp;lt;/option&amp;gt;
  &amp;lt;option&amp;gt;100&amp;lt;/option&amp;gt;
  &amp;lt;option&amp;gt;1,000&amp;lt;/option&amp;gt;
&amp;lt;/select&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CSS&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;select {
    -webkit-appearance: none; /* turn off drop-down arrow*/
    -moz-appearance: none;
    border: solid 1px grey;
    font-size: 1rem;
    padding: 5px;
    /* direction: rtl; */
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Styling 💅
&lt;/h2&gt;

&lt;p&gt;The above styling for the input isn't necessary; presumably you would only pursue this article if you are making a custom input element though so why not pretty it up?&lt;/p&gt;

&lt;h2&gt;
  
  
  The Fix 🙌
&lt;/h2&gt;

&lt;p&gt;Uncommenting the last line &lt;code&gt;direction: rtl;&lt;/code&gt; will move the text inside the element to the left. In Chrome you could simply use &lt;code&gt;text-align: left;&lt;/code&gt; however this will not work in Safari.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bonus 🤌
&lt;/h2&gt;

&lt;h4&gt;
  
  
  Change Direction While Selecting Option
&lt;/h4&gt;

&lt;p&gt;A simple line can be added to change the options alignment; essentially the text that will show when we are making a selection. To do this we can add:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.select:active {
    direction: ltr;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>css</category>
      <category>safari</category>
      <category>fix</category>
      <category>align</category>
    </item>
  </channel>
</rss>
