<?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: Bangkokian</title>
    <description>The latest articles on DEV Community by Bangkokian (@bangkokian).</description>
    <link>https://dev.to/bangkokian</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%2F158049%2Ffe50b492-ed10-40e2-9d7d-e2ae4c592d47.png</url>
      <title>DEV Community: Bangkokian</title>
      <link>https://dev.to/bangkokian</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bangkokian"/>
    <language>en</language>
    <item>
      <title>Using Dall-E AI For a Professional Creative Project: Here's What I Learned</title>
      <dc:creator>Bangkokian</dc:creator>
      <pubDate>Tue, 26 Jul 2022 14:02:05 +0000</pubDate>
      <link>https://dev.to/bangkokian/using-dall-e-ai-for-a-professional-creative-task-heres-what-i-learned-20e9</link>
      <guid>https://dev.to/bangkokian/using-dall-e-ai-for-a-professional-creative-task-heres-what-i-learned-20e9</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IVz7QSqP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu0t4eyuhxzjycjok3l7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IVz7QSqP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu0t4eyuhxzjycjok3l7.png" alt="Dall-E-Robot-Tarot-Cards" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I recently received an offer to work on a fun project using OpenAI's new Dall-E artificial intelligence platform.&lt;/p&gt;

&lt;p&gt;For those of you who aren't familiar with Dall-E, it's a generative AI service that creates artistic images using nothing more than a single descriptive sentence.&lt;/p&gt;

&lt;p&gt;The robot image above is a good example. I created it with a single English sentence.&lt;/p&gt;

&lt;p&gt;Here's a more specific example: I entered the following descriptive sentence into Dall-E's dashboard interface...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"A giant rabbit man, sitting in front of a computer, writing code, wearing a hoodie"&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;... after just 15 seconds, Dall-E produced these 4 illustrations:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kygVXX9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/I8LIMob.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kygVXX9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/I8LIMob.png" alt="Dall-E-Rabbit-Coders" width="880" height="223"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Incredible!&lt;/p&gt;

&lt;p&gt;Dall-E is remarkably easy to use. And there's something surprisingly entertaining about entering an image-description into the interface, and waiting expectantly to see what sort of wackiness the AI spits out.&lt;/p&gt;

&lt;p&gt;I've been playing with Dall-E on and off, for about a month, and having a blast producing quirky images and posting them online.&lt;/p&gt;

&lt;p&gt;But there's a big difference between entering a sentence and "seeing what you get", and actually &lt;em&gt;"trying to get the image you want"&lt;/em&gt;. &lt;/p&gt;

&lt;p&gt;Here's an example of what I mean:&lt;/p&gt;

&lt;h2&gt;
  
  
  The project: AI-generated Tarot cards
&lt;/h2&gt;

&lt;p&gt;When I received a proposal to create a set of custom works using Dall-E for a site called iFate, I jumped at the opportunity.&lt;/p&gt;

&lt;p&gt;iFate is a well-known "divination site" which is perhaps best known for its &lt;a href="https://www.ifate.com/free-tarot.html"&gt;free tarot readings&lt;/a&gt;, and its free interactive fortune-telling tools. 'Not something I know a whole lot about, but the web-content is right up my alley as their products combine a lot of visual wizardry with a lot of javascript expertise. &lt;/p&gt;

&lt;p&gt;What the folks at iFate wanted to do was to see what Dall-E would "think up" when given the task of creating a custom set of Tarot cards. This sounded like a really fun project.&lt;/p&gt;

&lt;p&gt;Specifically, they wanted a set of Tarot cards which loosely referenced the symbolism found in the seminal &lt;a href="https://en.wikipedia.org/wiki/Rider%E2%80%93Waite_tarot_deck"&gt;Rider-Waite deck&lt;/a&gt; of Tarot cards. So the task was to describe each of those cards to Dall-E in as much detail as possible, and see what Dall-E could "imagine" based on my input.&lt;/p&gt;

&lt;p&gt;What happened was both awesome and incredibly frustrating.&lt;/p&gt;

&lt;p&gt;I came away with an appreciation for how brilliant Dall-E is, but also how difficult it is to actually use the AI for any sort of &lt;em&gt;goal-driven&lt;/em&gt; creative project. Along the way, I learned a ton of things about what &lt;em&gt;works&lt;/em&gt; and what doesn't seem to work at all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;I started with the first card in the Tarot deck. It's called the &lt;em&gt;Ace of Cups&lt;/em&gt;. My goal will be to create an image that incorporates some of the same symbolic elements as the original card, shown here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hY4GGLxZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/vB9FfqA.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hY4GGLxZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/vB9FfqA.jpg" alt="AceOfCups" width="250" height="438"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, there's a whole lot going on in this illustration. This Tarot card is jam-packed with symbols, so the task of telling Dall-E &lt;em&gt;what to do&lt;/em&gt; is the first challenge. &lt;/p&gt;

&lt;h3&gt;
  
  
  Attempt #1
&lt;/h3&gt;

&lt;p&gt;I started by giving Dall-E the following description of the Ace of Cups card:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Colored pen &amp;amp; ink drawing of a disembodied hand coming out of a small cloud in the sky, holding a large golden goblet, while a flying dove is dropping a small round wafer into the goblet, the sea is in the background"&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Obviously, there are more details than that in the original card, but I'm going for the general gist of things here. &lt;/p&gt;

&lt;p&gt;I pressed &lt;em&gt;Enter&lt;/em&gt; after typing the above description, and I waited...&lt;/p&gt;

&lt;p&gt;Dall-E spun into action, and a few seconds later I was staring at a some impressive attempts — none of which looked anything like what I was hoping for.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yFxtJOav--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/8Q7c2Zl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yFxtJOav--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/8Q7c2Zl.png" alt="FirstAttempt" width="880" height="228"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To be fair, #4 really isn't all that bad. I think for anyone well versed in Tarot imagery, it would be immediately recognizable as the &lt;em&gt;Ace of Cups&lt;/em&gt; card.&lt;/p&gt;

&lt;p&gt;But what's immediately noticeable is that Dall-E doesn't actually follow instructions word-for-word. For example, there's no "round wafer" to be seen anywhere. &lt;/p&gt;

&lt;p&gt;Also, the hand doesn't actually emerge "out of" any of the clouds.&lt;/p&gt;

&lt;h3&gt;
  
  
  Attempt #2
&lt;/h3&gt;

&lt;p&gt;I tried again with a modified descriptive sentence. This time I'll call the wafer a "communion wafer", which apparently is what it is. I'll also do a better job of explaining that the hand needs to come &lt;em&gt;out from the inside&lt;/em&gt; of a cloud. I entered the following:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Colored pen &amp;amp; ink drawing of a disembodied hand coming out from the inside of a small cloud in the sky, holding a large golden goblet, while a flying dove is dropping a small communion wafer into the goblet, the sea is in the background"&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Again, Dall-E spun into action, quickly returning 4 attempts to render the sentence:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t9JujCqC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/C2fycry.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t9JujCqC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/C2fycry.png" alt="SecondAttempt" width="880" height="228"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first one is really, really close to fitting the description. The hand does appear to be emerging from a cloud, and there is some kind of wafer visible — although it's on the back of the dove. (Because how would the AI know that doves carry things in their beaks, not on their backs?) All in all, I could almost live with this.&lt;/p&gt;

&lt;h3&gt;
  
  
  Attempt #3
&lt;/h3&gt;

&lt;p&gt;I tried again anyway:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Colored pen &amp;amp; ink drawing of a disembodied hand coming out from the inside of a small cloud in the sky, holding a large golden goblet, while a flying dove is placing a small round communion-wafer from its beak into the goblet, the sea is in the background"&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iMU8nFr3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/38sJRk0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iMU8nFr3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/38sJRk0.png" alt="ThirdAttempt" width="880" height="225"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Again, the first one isn't terrible. Needless to say, there's a whole lot of wacky stuff happening in the others. &lt;/p&gt;

&lt;p&gt;In number three, the dove appears to be ignoring the cup, &lt;em&gt;and bringing the hand a beer!&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;Again though, for anyone who understands Tarot imagery, or who knows the Tarot deck well, the first one would probably be instantly recognizable as the &lt;em&gt;Ace of Cups&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Results
&lt;/h2&gt;

&lt;p&gt;After spending another hour, and another 15 bucks on Dall-E credits, I finally had a collection of passable &lt;em&gt;Ace of Cups&lt;/em&gt; images. I tried every descriptive trick I could think of. I even called the communion-wafer a "poker chip" once. I also tried saying that the dove was "eating" the communion wafer.&lt;/p&gt;

&lt;p&gt;Here were the best Dall-E &lt;em&gt;Ace of Cups Tarot cards&lt;/em&gt; I managed to coax out of the AI:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_5l3lQ0V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/2ZfRFAn.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_5l3lQ0V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/2ZfRFAn.jpg" alt="Final1" width="650" height="1102"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UlfVf78G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/lbiDIiI.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UlfVf78G--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/lbiDIiI.jpg" alt="Final3" width="650" height="1102"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AYtLPeXF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Z0MfKGB.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AYtLPeXF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Z0MfKGB.jpg" alt="Final4" width="650" height="1102"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The last one is the one I went with — mostly because the composition was the best.&lt;/p&gt;

&lt;p&gt;But I never did get all the elements I wanted. (The actual final results are going to need a little bit of Photoshop work, but I'm not including any edited versions here).&lt;/p&gt;

&lt;p&gt;Now just 77 more cards to go!&lt;/p&gt;

&lt;h2&gt;
  
  
  Dall-E can be frustrating
&lt;/h2&gt;

&lt;p&gt;What can be frustrating about Dall-E is that there seems to be a whole lot of luck involved. Dozens of attempts were made with what I thought were &lt;em&gt;increasingly accurate&lt;/em&gt; descriptions. Too many of these attempts resulted in decreasingly accurate images which seemed to completely ignore the text I entered.&lt;/p&gt;

&lt;p&gt;In other words, working with Dall-E is not really an &lt;em&gt;iterative&lt;/em&gt; process that gets you &lt;em&gt;closer and closer&lt;/em&gt; to the objective you're hoping for. Instead, it's more like a repeated series of &lt;em&gt;attempts&lt;/em&gt; combined with a lot of &lt;em&gt;hoping&lt;/em&gt; you get it right. &lt;/p&gt;

&lt;p&gt;Here are some hilarious failures that happened, even after I felt like my descriptive sentences had gotten very specific:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ob_H2xqn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/wygN99W.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ob_H2xqn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/wygN99W.png" alt="Fail1" width="880" height="880"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NzC5l6aJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/sdewjcy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NzC5l6aJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/sdewjcy.png" alt="Fail2" width="880" height="880"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--n35VMn_H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/beFkz56.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n35VMn_H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/beFkz56.png" alt="Fail3" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Often these failures are the result of a sentence that can actually be read more than one way. &lt;/p&gt;

&lt;p&gt;For example if I were to tell Dall-E:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;"A woman holding a sword in each hand"&lt;/em&gt;, we humans would naturally tend to assume that there are going to be two swords involved, because well, humans have two hands. But the AI may not make that assumption every time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some tips for getting the most out of Dall-E
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1) Don't force it.&lt;/strong&gt; Think of yourself more as a creative director, and not the artist. You're conveying ideas, not controlling the brush. If you're used to coding or hands-on illustration as I am, you're likely going to find this process frustrating. You will almost certainly not get exactly what you want. Accept it for what it is, and work with it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Dall-E is a great &lt;em&gt;first-step&lt;/em&gt;.&lt;/strong&gt; Unless you're willing to make thousands of attempts, you're almost certainly going to be using Photoshop to finalize your images. Don't expect it to be perfect.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Play with multiple ways of saying the same thing.&lt;/strong&gt; Often the "human" way of saying something isn't the best way of describing it to the AI. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4) Don't be afraid to try the same description twice.&lt;/strong&gt; Sometimes the second time is the charm.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5) Word order matters. Try changing the &lt;em&gt;sequence&lt;/em&gt; of your description.&lt;/strong&gt; Sentence parsing is clearly order dependent in terms of prioritization. Although it's not necessarily true that the beginning of the sentence is more important. Trial and error is the name of the game.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6) Dall-E can't do text.&lt;/strong&gt; Plan on adding any required text afterwards in Photoshop or another graphics editor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7) Dall-E is also very bad at counting.&lt;/strong&gt; (This is a problem for many Tarot cards like the 7 Swords or the 9 of Cups). If you need an exact number of something, you're going to need to use photoshop.&lt;/p&gt;

&lt;h2&gt;
  
  
  So what to make of Dall-E?
&lt;/h2&gt;

&lt;p&gt;Dall-E is amazing, awesome, inspiring and terrifying at times. But its true magic lies in surprising the user with the unexpected. &lt;/p&gt;

&lt;p&gt;It simply isn't a tool (just yet) for approximating the detailed intent of the user. If you're looking for a specific set of features within an image, it can take multiple hours (and quite a few dollars) to cajole the image you want out of Dall-E. &lt;/p&gt;

&lt;p&gt;By the time you've spent an hour or so, making repeated failed attempts to get the image you want, you're bound to realize that a skilled illustrator from Fiverr or someplace else could have done the job much better, and for around the same price.&lt;/p&gt;

&lt;p&gt;That being said, Dall-E is an absolute delight to play with. The fact that we're &lt;em&gt;this close&lt;/em&gt; to having AI illustration on demand is a magnificent achievement. &lt;/p&gt;

&lt;p&gt;But is it a tool for professional creators? &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Yes and no.&lt;/em&gt; If you're willing to accept Dall-E's weaknesses, and use it as a &lt;em&gt;starting point&lt;/em&gt; for creative production — and if you're willing to do a whole lot of Photoshop tweaking afterwards, then yes. It's a great tool, and it can save you many hours of work.&lt;/p&gt;

&lt;p&gt;Just don't expect it to replace humans yet. Using Dall-E for a professional creative task still requires many hours of human input — and loads of trial and error.&lt;/p&gt;

&lt;p&gt;Please LIKE this post if you enjoyed it! Thanks!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Locking javascript to a domain: Part I</title>
      <dc:creator>Bangkokian</dc:creator>
      <pubDate>Sat, 27 Jul 2019 08:30:39 +0000</pubDate>
      <link>https://dev.to/bangkokian/locking-javascript-to-a-domain-part-i-179f</link>
      <guid>https://dev.to/bangkokian/locking-javascript-to-a-domain-part-i-179f</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Flz6yL75.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2Flz6yL75.png" title="Credit: PIXABAY" alt="keys" width="640" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As part of a recent project which included a paid software download, I had to figure out how to "protect the software from unauthorized distribution". &lt;/p&gt;

&lt;p&gt;That's one of those requirements that's easier said than done.&lt;/p&gt;

&lt;p&gt;In this particular case, the problem was compounded by the fact that the the "software" was largely browser-based javascript and much of it involved no client-server interaction. In a client-server environment, it's possible to centralize the authentication process. But in a client-only environment where no server-handshake is possible, things are significantly more challenging. &lt;/p&gt;

&lt;p&gt;As we all know, Javascript source code is impossible to truly protect. Even the most convoluted code obfuscation is reversible with enough determination. Which is why the goal of those who obfuscate is to &lt;em&gt;discourage&lt;/em&gt; copying more than it is to outright &lt;em&gt;prevent&lt;/em&gt; it.  &lt;/p&gt;

&lt;p&gt;But even in cases where code obfuscation successfully discourages reverse engineering (or "beautification" as it is called), obfuscated code doesn't generally offer much protection against &lt;em&gt;code theft&lt;/em&gt;. Since most obfuscated code runs equally well on any domain, "borrowed" code may still run on unauthorized websites regardless of its readability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;From a publisher perspective, it's often overlooked point that obfuscated code can be just as tempting a target as non-obfuscated code.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A survey of obfuscation methods is beyond the scope of this post, and endless how-to's have already been written about the various approaches used to render code human-unreadable. These approaches include identifier mangling, dead code injection,  XOR encryption, a complete renaming of globals and string literals, code flattening, unicode escaping, self defending code and more. I have even seen code hidden in images, stored as pixel information. Suffice to say that for every convolution, there's a way to undo it -- and to restore the code to some level of readability.&lt;/p&gt;

&lt;p&gt;In this case I had employed at least half of the above techniques and had already warped the code into a deviously complicated mess. Within that code I had embedded a simple comparison of the current domain to the authorized one, whose string representation was in-turn scrambled into unrecognizable oblivion.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;But then what?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The two problems that immediately hit me were &lt;em&gt;how to fail invisibly&lt;/em&gt; and how to create a universal piece of protective code which could be dropped into any pre-existing .js file to "domain lock" the script to an authorized domain.&lt;/p&gt;

&lt;p&gt;Invisible failure is important because the point of failure can betray important clues as to where the domain-lock is taking place. &lt;/p&gt;

&lt;p&gt;Universal code is often important when one doesn't know the specific script needing protection.&lt;/p&gt;

&lt;p&gt;There were two ways to go that satisfied both of those requirements. I'll discuss the first one here, and the second in a forthcoming post. &lt;/p&gt;

&lt;p&gt;As stated above, the general problem with most methods of script termination (including stopping code execution, intentionally throwing errors, launching into an infinite loop or redirecting the page) all leave an obvious console trail which would allow any determined programmer to quickly zero in on the offending piece of code and neutralize it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I needed something sneakier.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;My first solution -- which still works pretty well -- and has the advantage of being a truly universal solution -- is to damage &lt;em&gt;other&lt;/em&gt; functions on the page. The reasoning behind this approach (which you can play with at a simple generator I made at &lt;a href="https://domainlockjs.com" rel="noopener noreferrer"&gt;DomainLockJS&lt;/a&gt;) is that the script must execute without an error, but cause a cascade of errors in &lt;em&gt;other, unrelated functions&lt;/em&gt;. This approach leads the unauthorized user down a rabbit hole of errors in seemingly well formed code. &lt;/p&gt;

&lt;p&gt;The simplest way to do this was to malform the window object -- swapping values and deleting non visible items from memory. With enough random changes, deletions and swaps, some part of the existing page code invariably breaks (assuming there is some significant amount of javascript code used on the page to begin with).  &lt;/p&gt;

&lt;p&gt;The resulting console error-trail is a frustrating sea of red, pointing to a host of confusingly unrelated functions which should otherwise be operating normally. &lt;/p&gt;

&lt;p&gt;This solution is still probably the best route for most sites wanting to domain lock javascript code. It's a decent deterrent. But I needed something more specific. I needed something that would die invisibly... leave no console errors. And better yet: &lt;em&gt;Have a completely different point of failure every time&lt;/em&gt;. &lt;/p&gt;

&lt;p&gt;It's a devious little solution that makes me think I'd probably have been an evil script kiddie had I been so inclined. It's still not possible to protect javascript, but obfuscating &lt;em&gt;where&lt;/em&gt; javascript fails is another story. &lt;/p&gt;

&lt;p&gt;That solution is going to have to wait until next week when I have more time ...&lt;/p&gt;

</description>
      <category>security</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Mind the Dip: Search traffic hurt by optimization? Don't Panic.</title>
      <dc:creator>Bangkokian</dc:creator>
      <pubDate>Thu, 18 Apr 2019 18:34:11 +0000</pubDate>
      <link>https://dev.to/bangkokian/mind-the-dip-search-traffic-hurt-by-optimization-don-t-panic-2jkb</link>
      <guid>https://dev.to/bangkokian/mind-the-dip-search-traffic-hurt-by-optimization-don-t-panic-2jkb</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--x1cLPam7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/k1chs6h5jw78l97bo23v.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--x1cLPam7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/k1chs6h5jw78l97bo23v.jpg" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Today, Google and other search engines care increasingly about 'content quality' as a ranking signal.&lt;/p&gt;

&lt;p&gt;That doesn't mean traditional ranking signals like title tags, internal links, anchor text and other DOM-level formalities are going away any time soon. But the growing ability for machines to actually "understand" content itself has led content marketing professionals to push for better-written, more relevant content.&lt;/p&gt;

&lt;p&gt;As thousands of companies rush to overhaul their digital marketing assets to appeal to Google's AI-enhanced abilities to perceive content quality, one thing that keeps them up at night is a dreaded dip in search position.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The 'dip' is best described as a "temporary drop in rankings which immediately follows content optimization" -- and it can be terrifying.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You work for hours to improve your content, and two or three days later, the result seems to be the opposite of what you intended. Instead of ranking higher, your ranking in SERPs suddenly ticks downwards. Organic traffic drops and seems to stay there at a lower plateau.&lt;/p&gt;

&lt;p&gt;If you've ever stared at Google Analytics or search console and wondering what on Earth you just did, read on.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why do rankings temporarily drop after content optimization?
&lt;/h3&gt;

&lt;p&gt;The dip is most commonly attributed to search engines' reindexing phase. When search engines detect new content, they watch that content for a number of new ranking metrics. During this "observation phase", it's not uncommon to see rankings dive.&lt;/p&gt;

&lt;p&gt;As much as we all wish search engines would immediately re-index our blog posts and re-rank them higher after we optimize content, search engine optimization is almost never fast.&lt;/p&gt;

&lt;p&gt;Why? Because search engines need to measure how things like dwell time and user engagement change. Has bounce rate changed? Is the new content "topically complete" enough to match the user-intent behind the search query? Or do users return to search after being on your page for 5 seconds?&lt;/p&gt;

&lt;p&gt;The answers to these questions require behavioral data which search engines get by watching how users interact with your page. With low volume keywords, behavioral data can sometimes take weeks to gather. And during that time, your brilliantly written, compelling content takes a plunge.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is there anything you can do?
&lt;/h3&gt;

&lt;p&gt;Most content-marketers and SEO experts will tell you that the "dip" is a fact of life. Try to minimize it, and you're likely not optimizing very much either.&lt;/p&gt;

&lt;p&gt;But that doesn't mean we can't approach content optimization strategically -- and weigh the odds of a drop in web traffic after adding new content.&lt;/p&gt;

&lt;h3&gt;
  
  
  New content vs. Old Content: The Ratio Matters
&lt;/h3&gt;

&lt;p&gt;While SEO is never an exact science, the painful dip in traffic following a content update often seems to correlate with the ratio of new content to pre-existing original content. If less than 30% of page-content changes, the dip is often very minimal. On the other hand, if search engines determine that the majority of a page is newly created additional content, then it's logical to expect them to require a more lengthy re-evaluation of that page's performance.&lt;/p&gt;

&lt;p&gt;If the reason you're doing a content overhaul is because a page's traffic is anemic to begin with, then you probably want to ignore the 30% rule and dive in for more intensive content creation. But if your page is currently ranked half-way down the first page of search results and you're hoping to bump it up just a notch or two higher: Be careful.&lt;/p&gt;

&lt;p&gt;Keep in mind that a full 100% re-write of a blog post or article usually isn't advisable, as you're better off just creating a new post from scratch in that case.&lt;/p&gt;

&lt;h3&gt;
  
  
  Is Content Optimization Dangerous for SEO?
&lt;/h3&gt;

&lt;p&gt;So if tweaking vast portions of a page can negatively impact search performance, and changing the page-title or header tags can force a seemingly endless reindexing phase, isn't the page better left alone?&lt;/p&gt;

&lt;p&gt;The answer is, it depends. While taking a temporary beating in your rankings can be painful, "to the risk-taker go the rewards". Or to use another old saying, "Nothing ventured, nothing gained".&lt;/p&gt;

&lt;p&gt;Take the example of tweaking your page title: This can often result in serious plunge in traffic.&lt;/p&gt;

&lt;p&gt;On the other hand, title tags (and meta descriptions) are some of the most powerful determinants of search listing CTR.&lt;/p&gt;

&lt;p&gt;Ultimately a search listing isn't much different from an advertisement in terms of its goals: You want people to click. Getting on to the first page of search is one thing, but attracting clicks on your search listing is another game entirely. Some titles just get more clicks. Tweaking your title tag to be more "clickable" is a popular strategy for behavioral SEO.&lt;/p&gt;

&lt;p&gt;And yet it's high risk from a potential "dip" perspective.&lt;/p&gt;

&lt;p&gt;Which brings us to the core of the issue: How do you know when to optimize your content?&lt;/p&gt;

&lt;h3&gt;
  
  
  To optimize or not to optimize?
&lt;/h3&gt;

&lt;p&gt;If performing major surgery on your content is considered a high-risk maneuver, but it's also the road to dominating in search results, what's the right thing to do?&lt;/p&gt;

&lt;p&gt;Content producers are constantly faced with the fundamental question of whether or not optimization worth the risk.&lt;/p&gt;

&lt;p&gt;That question needs to be answered on a case-by-case basis.&lt;/p&gt;

&lt;p&gt;Here are my best content optimization tips for deciding when (and what) to rewrite:&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Optimize poor-performing content first
&lt;/h4&gt;

&lt;p&gt;The easiest optimization decisions are on posts that don't rank well anyway. The risks are far lower (and the rewards higher) on content that's already underperforming. If you have a post or an article that's competing for a high-competition keyword and is currently languishing on page 5 of search, the general strategy is to go for it. Get in there and optimize that content with a no holds barred approach.&lt;/p&gt;

&lt;p&gt;Keep in mind however that the same page of content may be performing very well for a different target keyword. Check Google Analytics to make sure that the page isn't getting lots of traffic from another search term.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Create Alternate Content for Already Ranking Keywords
&lt;/h4&gt;

&lt;p&gt;If you're already ranking low on the first page of search results and want to get higher on the page -- the risks to content optimization are far higher. Tweaking your website content for just 3 spots higher in search rankings might not be worth the risks of offending the gods and finding yourself on page 8 of Google search.&lt;/p&gt;

&lt;p&gt;In cases where your page is already performing moderately well, a good strategy is to create related content which targets the same (or similar) relevant keywords&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Use an AI-Powered Content Optimization Tool to Increase Your Chances
&lt;/h4&gt;

&lt;p&gt;If the goal is to increase search volume for your page, it might not be enough to just write compelling or authoritative content. You may want to consider using an AI-based SEO optimization tool like &lt;a href="https://wordmetrics.com/"&gt;Wordmetrics&lt;/a&gt; for better semantic keyword optimization. These tools aren't cheap, but if you're serious about your content optimization, I think they're worth every penny.&lt;/p&gt;

&lt;h4&gt;
  
  
  4. Add to Your Content Rather than Rewriting It
&lt;/h4&gt;

&lt;p&gt;If your content is under 2500 words, you may want to consider adding to it, rather than rewriting it. This approach not only leaves your original content in-place, but gives your post the advantage of being longer. (Writing longer articles is a well known optimization tip, as longer content generally outperforms shorter content).&lt;/p&gt;

&lt;h4&gt;
  
  
  5. Be Careful of Overstuffing
&lt;/h4&gt;

&lt;p&gt;Most of all remember that the age of keyword stuffing is over. Simply writing the same keyword 100 times in your post is not going to work. Google looks for context, not just keyword density. Informative, well-written, easy-to-read, topically relevant content is effective content.&lt;/p&gt;

&lt;h3&gt;
  
  
  Keep writing
&lt;/h3&gt;

&lt;p&gt;One last piece of advice: Every web-startup needs traffic. Never hang your hat on a single piece of content. Search engine algorithms change like the wind. Content marketing is a "numbers game".&lt;/p&gt;

&lt;p&gt;While it's tempting to endlessly tweak and re-tweak your content to squeeze every last bit of search performance out of it, bear in mind that content marketing is about producing new, original content. Content optimization is increasingly important... But content creation is still job #1.&lt;/p&gt;

</description>
      <category>seo</category>
      <category>search</category>
      <category>marketing</category>
      <category>content</category>
    </item>
  </channel>
</rss>
