{"id":123,"date":"2023-08-30T03:52:11","date_gmt":"2023-08-30T03:52:11","guid":{"rendered":"http:\/\/192.168.10.35:8000\/?p=123"},"modified":"2023-09-22T03:02:16","modified_gmt":"2023-09-22T03:02:16","slug":"survey-widget-in-preact","status":"publish","type":"post","link":"http:\/\/192.168.10.35:8000\/survey-widget-in-preact\/","title":{"rendered":"Let’s build a Survey Widget with Preact Habitat"},"content":{"rendered":"\n

Problem Statement<\/strong><\/h3>\n\n\n\n

Before our marketing teams can try new trends, they’re at the mercy of our engineering team.<\/em><\/p>\n\n\n\n

Solution<\/strong><\/h3>\n\n\n\n

I want to detach core code from the creative’s work and convert it into lightweight widgets.<\/em> This allows the marketing content to be created with any tool with little to no knowledge of how these widgets work.<\/em><\/p>\n\n\n\n

\"Screen<\/figure>\n\n\n\n

The video was recorded after the initial prototype was built.<\/p>\n\n\n\n

Background<\/strong><\/h3>\n\n\n\n

While working at a digital marketing agency, our engineering team has taken on an enormous amount of technical debt. It’s largely influenced by:<\/p>\n\n\n\n

    \n
  • How we create content.<\/li>\n\n\n\n
  • Our compliance requirements.<\/li>\n\n\n\n
  • How media buyers work and track events actions.<\/li>\n<\/ul>\n\n\n\n

    To put it simply, scaling our current methods will come at a cost. We are a small team. By design, we are lean and mean. I know there’s a better way.<\/p>\n\n\n\n

    So why do this?<\/p>\n\n\n\n

      \n
    • It’s a passion project.<\/li>\n\n\n\n
    • To get my reps in with my developer hat on.<\/li>\n\n\n\n
    • I want to build one tool that will add utility to my day-to-day.<\/li>\n\n\n\n
    • Two leads were recommended to me to help build a lead-generation landing page with a survey.<\/li>\n<\/ul>\n\n\n\n

      Why would I choose to not do this?<\/p>\n\n\n\n

        \n
      • There is likely a tool out there that does what I’m looking for.<\/li>\n\n\n\n
      • There are TONS of form and survey builders out there- both open-source and SaaS.<\/li>\n\n\n\n
      • There may be no one out there asking for this exact problem to solve.<\/li>\n<\/ul>\n\n\n\n

        <\/p>\n\n\n\n

        Products Considered<\/strong><\/h4>\n\n\n\n

        There are hundreds, possibly thousands, of tools on the market that can help solve this very problem. So why even build this? Well, here’s a list of tools that I have used or evaluated to solve this specific problem.<\/p>\n\n\n\n

        WordPress<\/h6>\n\n\n\n

        WordPress is one of the top Content Management Systems on the internet. It serves a high % of all content. It has a rich community and a mature ecosystem for developers. Between the premium plugins and themes, there are tons of options.<\/p>\n\n\n\n

        Cost-wise- there are affordable specialty hosting providers for WP, or you can go self-managed on your favorite cloud provider.<\/p>\n\n\n\n

        The downside<\/em>? WordPress has a rough history with security. Not all plugins and themes are maintained. There have been breaking updates recently for theme support. Plus, the experience of launching my new website using WordPress has not been as smooth as I’d like.<\/p>\n\n\n\n

        TypeForm<\/h6>\n\n\n\n

        When looking at options for creating web forms, TypeForm has a beautiful product. Creating forms is straightforward with their editor. You can expect the forms to be designed well. The touches of animation are delightful. Just about any service you can think of can be integrated with TypeForm.<\/p>\n\n\n\n

        The downside<\/em>? Pricing and TCPA compliance for our lead generation forms. The level of customization I need isn’t there.<\/p>\n\n\n\n

        Proprietary with PHP<\/h6>\n\n\n\n

        PHP has been around for a long time and has been battle-tested. A lot of open-source web projects are built in PHP. There are frameworks that accelerate development, but there can be a learning curve to adopt these frameworks.<\/p>\n\n\n\n

        One company I’ve worked for has a large codebase in PHP. It is full of tons of features. If you’re familiar with what tech stack, you can build new sites and pages fast. <\/p>\n\n\n\n

        The downside? As powerful as the tech stack is, there’s a lot of duplication and <\/p>\n\n\n\n

        Another company has its flagship site built in PHP. Most experimental features and tests are done with the flagship site first, then syndicated out to other sites when possible. The site is lean and mean.<\/p>\n\n\n\n

        The downside? It’s not built to act as a framework for multiple sites. It’s a single-purpose project.<\/p>\n\n\n\n

        Overall, PHP isn’t a great choice for what I have in mind since it requires a server to run the code. Packaging it up to run on any device within any site isn’t possible.<\/p>\n\n\n\n

        Proprietary with NextJS<\/h6>\n\n\n\n

        The NextJS project is great for getting a full-stack application running and deployed. <\/p>\n\n\n\n

        The downside? We’re having a hard time streamlining our process between the content creators, engineering, and publishing. Content is exchanging too many hands before going live.<\/p>\n\n\n\n

        Similar to PHP, I can’t easily ship this into any website that I encounter.<\/p>\n\n\n\n

        Decision<\/h4>\n\n\n\n

        After working closely with a big tech company, I learned about Preact Habitat. Their use case for it was to build a lightweight toolkit that could be embedded into any web application. It had to be small. They evaluated Preact first, then found Preact Habitat and committed to it. Ever since it has become a go-to tool for small projects.<\/p>\n\n\n\n

        Given the environment I’m operating in, Preact Habitat checks off a lot of boxes for me. <\/p>\n\n\n\n

          \n
        • It is lightweight<\/li>\n\n\n\n
        • The boilerplate code can be embedded into any HTML page<\/li>\n\n\n\n
        • The build can be uploaded to a CDN (S3 + CloudFront)<\/li>\n\n\n\n
        • I enjoy developing software with React<\/li>\n<\/ul>\n\n\n\n

          Let’s get ready for the launch! \ud83d\ude80<\/p>\n\n\n\n

          \n