<?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: Hayder Al-Khalissi</title>
    <description>The latest articles on DEV Community by Hayder Al-Khalissi (@hayder_alkhalissi_9f26d8).</description>
    <link>https://dev.to/hayder_alkhalissi_9f26d8</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3931771%2F3d218257-350d-48a8-8186-8badc2bd13be.jpg</url>
      <title>DEV Community: Hayder Al-Khalissi</title>
      <link>https://dev.to/hayder_alkhalissi_9f26d8</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hayder_alkhalissi_9f26d8"/>
    <language>en</language>
    <item>
      <title>Share Your Apify Actors as Branded Web Apps (Without Leaking Your API Token!)</title>
      <dc:creator>Hayder Al-Khalissi</dc:creator>
      <pubDate>Mon, 07 Sep 2026 00:42:06 +0000</pubDate>
      <link>https://dev.to/hayder_alkhalissi_9f26d8/share-your-apify-actors-as-branded-web-apps-without-leaking-your-api-token-gop</link>
      <guid>https://dev.to/hayder_alkhalissi_9f26d8/share-your-apify-actors-as-branded-web-apps-without-leaking-your-api-token-gop</guid>
      <description>&lt;p&gt;Have you ever built an incredible Apify Actor to crawl websites, scrape leads, or generate datasets, only to hit a wall when it's time to share it with clients, teammates, or non-technical users?&lt;/p&gt;

&lt;p&gt;Usually, the options aren't great: you either have to teach them how to navigate the technical Apify Console (and risk them accidentally modifying something), build and host a custom frontend from scratch (which takes hours or days), or worse—manually run the Actor and email them the CSVs.&lt;/p&gt;

&lt;p&gt;But what if you could turn your Actor into a clean, customized, and branded web app in under one minute, completely hiding the underlying Apify complexity and keeping your API token safe?&lt;/p&gt;

&lt;p&gt;Enter &lt;strong&gt;ActorWebApp&lt;/strong&gt; (&lt;code&gt;solutionssmart/actorwebapp&lt;/code&gt;), a clever tool maintained by the community that does exactly this. &lt;/p&gt;




&lt;h2&gt;
  
  
  📺 Watch the Walkthrough!
&lt;/h2&gt;

&lt;p&gt;Before we dive into the details, I put together an educational, step-by-step video showing exactly how to set up and run the ActorWebApp in real-time. Check it out below!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;🎥 &lt;/p&gt;
&lt;div&gt;
  &lt;iframe src="https://loom.com/embed/4b8ac9020f1d47b0aa7b7e6978c2c292" width="100%" height="400"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;em&gt;In this tutorial, you will see how we take a standard scraper and transform it into a fully styled client-facing portal in just a few clicks!&lt;/em&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Why ActorWebApp is a Game-Changer
&lt;/h2&gt;

&lt;p&gt;Instead of spending your weekend writing boilerplate frontend code, routing API endpoints, and configuring webhooks, &lt;strong&gt;ActorWebApp&lt;/strong&gt; acts as an instant UI proxy. It reads your target Actor's default-build input schema and automatically generates a matching web form .&lt;/p&gt;

&lt;p&gt;Here is what makes it so powerful:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Instant Web Form Generation:&lt;/strong&gt; It parses standard input fields, arrays, selectors, request lists, help texts, and numeric limits directly from the target Actor's schema.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No More Token Exposure:&lt;/strong&gt; Your &lt;code&gt;APIFY_TOKEN&lt;/code&gt; is kept securely on the server-side and is never sent to the end user's browser.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Built-in Brand Styling:&lt;/strong&gt; You can easily customize the app with a light, dark, or warm theme, set an accent color, and upload your custom logo to show in the header.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live Run Progress &amp;amp; Output Downloads:&lt;/strong&gt; Users can fill out the form, click run, watch the status in real-time, preview the dataset rows, and download their data directly as JSON or CSV.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Simplifies the UI:&lt;/strong&gt; You can toggle off technical platform parameters (like proxy settings, memory, and runtime options) so your clients only see the fields they actually need.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Common Use Cases
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Client Data Portals:&lt;/strong&gt; Turn a website scraper or lead generation tool into a branded data-collection interface for non-technical clients.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team Operations:&lt;/strong&gt; Let marketing or sales teams trigger internal data-gathering workflows without them needing access to your Apify platform credentials.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Result Delivery:&lt;/strong&gt; Provide an instant results page showing live table previews and quick downloads without hosting a database.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  How to Set It Up (Step-by-Step)
&lt;/h2&gt;

&lt;p&gt;Getting your web app live takes just four simple steps:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Deploy &amp;amp; Enable Standby Mode
&lt;/h3&gt;

&lt;p&gt;Deploy the &lt;strong&gt;Actor Web App&lt;/strong&gt; (&lt;code&gt;solutionssmart/actorwebapp&lt;/code&gt;) to your Apify account and enable &lt;strong&gt;Standby mode&lt;/strong&gt;. Standby mode is what keeps the application active and ready to respond to requests.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Configure the Target Actor
&lt;/h3&gt;

&lt;p&gt;Specify the Actor you want to create a frontend for by setting the &lt;code&gt;actorId&lt;/code&gt; in the &lt;code&gt;username/actor-name&lt;/code&gt; format. The target Actor must be accessible to the account running your Web App.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Customize Your Branding &amp;amp; Displays
&lt;/h3&gt;

&lt;p&gt;Using the Apify Console's configuration controls (or directly editing the JSON), configure your branding, input display, and output display groups. &lt;/p&gt;

&lt;p&gt;Here is a complete JSON configuration example to give you an idea of what is possible:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"actorId"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"solutionssmart/brand-dna"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"title"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Brand DNA Portal"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"description"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Extract a structured brand profile from any website."&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"branding"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"logoUrl"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://yourdomain.com/assets/logo.png"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"accentColor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"#19724c"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"theme"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dark"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"hideApifyTechnicalFields"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"input"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"showAdvancedFields"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"output"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"showTable"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"allowCsv"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"allowJson"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"maxPreviewRows"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Note: You can replace the logo URL with any HTTPS image URL you control, set any hex accent color, and choose between a &lt;code&gt;light&lt;/code&gt;, &lt;code&gt;dark&lt;/code&gt;, or &lt;code&gt;warm&lt;/code&gt; theme.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Share the Standby URL
&lt;/h3&gt;

&lt;p&gt;Go to the &lt;strong&gt;Standby&lt;/strong&gt; tab in your Apify Console, copy the shareable Standby URL, and send it to your team or clients. When they open it in their browser, they will see your beautifully branded form.&lt;/p&gt;




&lt;h2&gt;
  
  
  A Few Limitations to Keep in Mind
&lt;/h2&gt;

&lt;p&gt;While ActorWebApp is incredibly versatile, here are a few things to keep in mind before building:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Schema Support:&lt;/strong&gt; It supports the practical JSON Schema subset used by Apify input schema v1, but does not support arbitrary composition such as &lt;code&gt;oneOf&lt;/code&gt;, &lt;code&gt;$ref&lt;/code&gt;, or conditional schemas.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Data Sources:&lt;/strong&gt; It reads from the default build, default Dataset, and filtered output files from the default Key-value store of the target Actor.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No Built-in User Management:&lt;/strong&gt; It relies on Apify Standby for access and authentication settings rather than introducing its own separate user accounts. You can configure Standby access in Apify to control who can access your URL.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Wrapping Up
&lt;/h2&gt;

&lt;p&gt;Building custom frontends for simple tools is a thing of the past. By leveraging &lt;code&gt;solutionssmart/actorwebapp&lt;/code&gt; and Standby mode, you can deliver professional-grade, branded web applications to your clients and team in minutes, while keeping your developer credentials safe and sound.&lt;/p&gt;

&lt;p&gt;Have you tried turning your scrapers into web apps yet? Let me know in the comments, and don't forget to watch the tutorial video above to see it in action! &lt;/p&gt;




&lt;p&gt;&lt;em&gt;Disclaimer: Actor Web App runs through Apify Standby and still incurs standard Apify platform execution and target Actor charges. Make sure to review your standby and running costs in Apify Console.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>api</category>
      <category>automation</category>
      <category>tutorial</category>
      <category>webscraping</category>
    </item>
    <item>
      <title>Decoding Brand DNA: Structured Identity Extraction Without the AI Hallucinations</title>
      <dc:creator>Hayder Al-Khalissi</dc:creator>
      <pubDate>Thu, 14 May 2026 18:05:42 +0000</pubDate>
      <link>https://dev.to/hayder_alkhalissi_9f26d8/decoding-brand-dna-structured-identity-extraction-without-the-ai-hallucinations-2ghj</link>
      <guid>https://dev.to/hayder_alkhalissi_9f26d8/decoding-brand-dna-structured-identity-extraction-without-the-ai-hallucinations-2ghj</guid>
      <description>&lt;p&gt;In the fast-paced world of digital marketing and web development, understanding a brand’s visual and verbal identity is usually a manual, time-consuming process. Whether you are performing a competitor audit or onboarding a new client, you often have to hunt for hex codes, analyze tone, and guess at positioning.&lt;/p&gt;

&lt;p&gt;Enter &lt;strong&gt;Brand DNA&lt;/strong&gt;, a powerful tool (or "Actor") on the Apify platform designed to automate this entire workflow with surgical precision.&lt;/p&gt;

&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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcgmu9cfj9m4v4pvq5r1d.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%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcgmu9cfj9m4v4pvq5r1d.png" alt=" " width="800" height="1433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Brand DNA?
&lt;/h2&gt;

&lt;p&gt;Brand DNA is a &lt;strong&gt;Website Brand Analyzer &amp;amp; Identity Extractor&lt;/strong&gt; that crawls a business website and builds a structured profile of its brand identity. Instead of just scraping text, it uses &lt;strong&gt;deterministic heuristics&lt;/strong&gt; to extract:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Visual Identity:&lt;/strong&gt; Primary and secondary colors (including CSS variables), typography, and logo candidates.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Voice &amp;amp; Tone:&lt;/strong&gt; Heuristics-based detection of tone and voice dimensions.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Positioning Intelligence:&lt;/strong&gt; Audience signals, value propositions, and industry guesses.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Marketing Assets:&lt;/strong&gt; Reusable CTA variants, social post skeletons, and ad templates.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Brand DNA vs. Google’s AI (Gemini/Pomelli)
&lt;/h2&gt;

&lt;p&gt;You might wonder how this differs from asking an AI like Google’s Gemini (which may be what you're referring to as "Pomelli," as there is no specific "Pomelli" tool mentioned in the sources) to analyze a site.&lt;/p&gt;

&lt;p&gt;The core difference lies in the &lt;strong&gt;deterministic nature&lt;/strong&gt; of the extraction. While generative AI tools are impressive, they are "black boxes" that can suffer from hallucinations—making up brand values or misidentifying hex codes based on "vibes" rather than actual code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Brand DNA takes a different path:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;No LLMs:&lt;/strong&gt; It does not rely on Large Language Models for its core analysis, meaning &lt;strong&gt;no unpredictable output&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Repeatable Results:&lt;/strong&gt; If you run the tool on the same site twice, you get the same structured data, making it perfect for stable automation pipelines.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Explainable Heuristics:&lt;/strong&gt; The data is pulled directly from "signals" like JSON-LD, meta tags, and CSS variables, so you know exactly where the information came from.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Technical Power Under the Hood
&lt;/h2&gt;

&lt;p&gt;The latest version (v2.0) introduces advanced features that make it robust enough for professional-grade audits:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Hybrid Crawling:&lt;/strong&gt; It uses fast HTML extraction by default but automatically falls back to &lt;strong&gt;Playwright (browser rendering)&lt;/strong&gt; if it detects a Single Page Application (SPA).&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Smart CTA Scoring:&lt;/strong&gt; It doesn't just find buttons; it scores them based on position, text, and action verbs to identify the most important "calls to action" on a page.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Anti-Blocking:&lt;/strong&gt; With built-in Apify Proxy integration and adaptive concurrency, it can navigate sophisticated websites without being blocked.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Who is this for?
&lt;/h2&gt;

&lt;p&gt;This Actor is built for &lt;strong&gt;agencies, growth teams, and automation builders&lt;/strong&gt;. Because it outputs structured JSON, it fits perfectly into workflows using &lt;strong&gt;n8n, Make, or CRM pipelines&lt;/strong&gt;. You can trigger a Brand DNA run the moment a new lead signs up and have a full brand report ready before your first discovery call.&lt;/p&gt;

&lt;p&gt;Instead of manually dissecting websites, you get automated, repeatable brand intelligence in seconds.&lt;/p&gt;

</description>
      <category>automation</category>
      <category>webdev</category>
      <category>contentwriting</category>
    </item>
  </channel>
</rss>
