Alex Deering

Ive come across an issue where some gems I want to use (specifically social-share-button) need to have a javascript file imported but with webpacker in rails 6, not quite sure how to do that now

Is there a way to prevent the attach file button in the trix editor for ActionText? I mainly want the formatting ability for things like bold, italics, number lists, etc. But do not want the attach file and if possible would like to only allow certain users to be able to insert links

Im starting to integrate search features into my recipe app and looking to build a "Popular", "Trending", and "Just For You" query to display on the index screen. Ive got the searchkick and searchjoy gems install and basic search with filtering constraints setup via tags and aggs. Reading thru the searchkick documentation it looks like the feature I want to use for the popular and trending is conversions. Having a little trouble understanding the flow of logging conversions to the database and the elasticsearch indexing though.

My understanding so far is with the searchjoy gem, have a separate table that logs searches by users, time, etc. Then I need to pass the id of the search to the results view, and if I want to track some action like viewing a recipe need to update the search record with that recipe id. Is that right?

That all seems pretty straightforward, but I have a few questions to make sure Im setting this up right:

1. If I want to track a conversion that requires them to view a recipe first, like saving a recipe to their favorites, I should pass the search id to the show view as well and then trigger conversion with the save action?
   
2. If i wanted to make a few types of conversions would I do something like this: searchkick conversions: [:view_conversions, :save_conversions, :made_conversions] And for tracking those in the searches table I guess I would need to create a new column with the conversion type, since all of those would be recipe conversions which searchjoy just has the record type and id...does this seem right?

Ive got the stimulus-autocomplete controller installed and working, but Im still learning how to work with stimulus. The documentation for the controller says there are events that get fired off and looking to hook into the autocomplete.change event but it doesnt have any examples.

I would like to display a message based on what is selected

Im working on my main form and have some form validations and running into an issue with a new form not maintaining the image upload after a validation error reloads the page. Here is my form-group for the image upload:

<div class="form-group">
          <%= form.label :image, "Recipe Photo" %>
          <div class="flex flex-row">
            <div class="w-full">
              <% if form.object.image.attached? %>
                <%= image_tag form.object.image, class: "w-full border rounded-lg self-center" %>
              <% end %>  
            </div>
          </div>
          <%= form.file_field :image, direct_upload: true, class: "form-control" %>
        </div>

Because I'm using direct upload the image gets uploaded and still exists after the reload and displays the image with the image_tag in the above code. But when the form is resubmitted the connection in the active_storage tables isnt maintained. Is there a hidden field or something i can put to ensure it gets sent as a param the next time the form is submitted?

Ok, so I'll probably start with the managed redis as well to make scaling easier in the future. Thanks for the info

Sweet, thanks for the quick response. Initially not expecting too much on the background jobs...And that would be a quick transfer to move redis/sidekiq to their own server in the future if it was needed since there isnt any persistent data for those, right?

I've been going thru the various ways to publish a rails app and trying to decide which method is going to be the best in the long run. After some searching I think Hatchbox and DigitalOcean is going to be the best balance of price and ease of use. I dont know much on the server side of things and I want to make sure Ive got this understood before I move forward.

So I'm looking to have multiple servers with a load balancer thru DigitalOcean. This is what Im currently looking to do thru DigitalOcean

Load Balancer (DigitalOcean balancer or on a dedicated server?)
Web Server, Cron (1gb ram, 1vCPU)
Webserver, Redis, sidekiq (1gb ram, 1vCPU)
Digital Ocean Managed Database
Elasticsearch (4gb ram, 2vCPU)
Digital Ocean Spaces Object Storage

My questions are these then:

1. In the Heroku to Hatchbox it has a server for the loadbalancer, is that a feature that can be installed on anysize server, or would I need to use the specific Load Balancer with DigitalOcean?
2. Does the managed Postgres servers count for the Pricing on Hatchbox?
3. So with the hatchbox pricing it looks like I would only need 4(or 3 if I use DO Load Balancer) servers so could go with the growth plan, correct?
4. As for the distribution of functions on each server, does this seem reasonable to start out?

In the past (back in rails 4) I used select2 or selectize to give me the ability to make a text field autocomplete as typed and have the option to create a new item, so basically tagging but only a single tag allowed. I recently got back into working on a project and upgrading to rails 6. Im new to stimulus and webpacker and wondering if there is a way to handle autocomplete with the option to create new for a field. Ive looked for some information already but couldnt find anything.

For context it has to do with a recipe database and for the ingredients of the recipes they have 3 fields (amount, unit, ingredient_id). Im wanting to have the ingredient_id field be a text field with autocomplete/add new that will reference my ingredient table so I can add data to the ingredients

Thanks Tolase, I never wouldve thought to google for the answer. Such insight and amazing help....why not try to be helpful instead of saying something that isnt helpful to anyone. Of course Ive tried searching for answers, but nothing comes up that is the same or fixes my issue. Kinda hard with no error to narrow down what exactly the problem is, so came to a rails community for advice.

I had someone else try it on a non rails webpage (wordpress) and it loaded just fine. I will say that Im having the same issue with Google Adsense ads. Where it looks like they are loading and the script runs but its not showing up on the page. Those have currently been removed cause it effects the layout

Turbolinks has been giving me a world of trouble and there is a lot of randomness with it depending on where I put it in the application.js file. Right now I have this:

//= require jquery3
//= require jquery
//= require jquery.turbolinks
//= require best_in_place
//= require jquery_ujs
//= require jquery.remotipart
//= require jquery-ui
//= require tether
//= require popper
//= require bootstrap
//= require selectize
//= require dropzone
//= require jquery.infinite-pages
//= require jquery.raty
//= require jquery.validate
//= require social-share-button
//= require init
//= require turbolinks
//= require turbolinks-compatibility
//= require_tree .

My javascript here works with this code:

$(document).on('turbolinks:load', function(){
    /* Activating Best In Place */
    jQuery(".best_in_place").best_in_place();
});

But I get errors in some of my code for my page coffee scripts..this code here works:

$(document).on 'ready page:load', ->
    Dropzone.options.recipeImageDropzone = 
        init: ->
            myDropzone = this
            @on 'addedfile', (file) ->
                options =
                    extension: file.name.match(/(\.\w+)?$/)[0]
                    _: Date.now()
                $.getJSON '/images/cache/presign', options, (result) ->
                    file.additionalData = result['fields']
                    myDropzone.options.url = result['url']
                    myDropzone.processQueue()
                    return
                return
            @on 'sending', (file, xhr, formData) ->
                $.each file.additionalData, (k, v) ->
                    formData.append k,v
                    return
                return
            @on 'success', (file) ->
                image = 
                    id: file.additionalData.key.match(/cache\/(.+)/)[1]
                    storage: 'cache'
                    metadata:
                        size: file.size
                        filename: file.name.match(/[^\/\\]+$/)
                        mime_type: file.type
                $('#recipe_image').val(JSON.stringify(image))
                $('.dz-image').css
                    'width': '100%'
                    'height': 'auto'
            @on 'removedfile', (file) ->
                $('#recipe_image').val("")
            @on 'thumbnail', (file, dataUrl) ->
                $('.dz-image').last().find('img').attr
                    width: '100%'
                    height: '100%'
            return
        paramName: 'file'
        maxFiles: 1
        autoProcessQueue: false
        addRemoveLinks: true
        acceptedFiles: 'image/*'

But if I change the first line to be turbolinks:load most things work but that dropzone code throws an error now and I get a Invalid JSON response from server and the console shows

POST http://localhost:8000/images 404 (Not Found)

Weird that 1 thing breaks and not sure why...also noticed that all of my elements in the body tag have this added to every html tag:
data-original-title title
This goes away if I move the //= require turbolinks to the bottom of the application.js file but then I cant use the turbolinks:load in any of the other coffeescript files. Been searching for a guide on how to implement turbolinks correctly but nothing I find shows all the steps

So I did notice that the response is encoded in gzip. I ran into an issue with searchkick recently and had to include FaradayMiddleware::Gzip in the searchkick initializer. I tried the same thing in the application initializer but it thru some errors. Is there something I should put in the initializer to handle compressed responses

Sure, here: https://www.living-recipe.com/recipes/apple-pie the ad should be showing up just below the ingredients and direction and above the tags looking for this div:

<div class="row ad-row" id="ad-row" data-search="Tart Pan, Sous Vide" data-original-title="" title="">
      <script type="text/javascript">
        amzn_assoc_placement = "adunit0";
        amzn_assoc_search_bar = "true";
        amzn_assoc_tracking_id = "livingrecipe-show-recommendation-20";
        amzn_assoc_search_bar_position = "bottom";
        amzn_assoc_ad_mode = "search";
        amzn_assoc_ad_type = "smart";
        amzn_assoc_marketplace = "amazon";
        amzn_assoc_region = "US";
        amzn_assoc_title = "Shop Required Equipment";
        amzn_assoc_default_search_phrase = 'Tart Pan, Sous Vide';
        amzn_assoc_default_category = "All";
        amzn_assoc_linkid = "78aa42b54ebf16f31c5239f132e3d7a0";
        amzn_assoc_rows = "1";
      </script>
      <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script><div id="amzn_assoc_ad_div_adunit0_0" data-original-title="" title=""></div>
    </div>

Added this: console.log("Placement:" + amzn_assoc_placement); and it prints out everytime I load the page. I have added data: {turbolinks: "false"} to the link that loads the page to try and prevent turbolinks interference but that didnt do anything. Heres some more info from the Network tab on inspection:

General
Request URL:http://z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US
Request Method:GET
Status Code:200 OK (from memory cache)
Remote Address:52.84.246.223:80
Referrer Policy:no-referrer-when-downgrade
Response Headers
Access-Control-Allow-Origin:*
Age:35951
Cache-Control:public,max-age=86400,s-maxage=86400,no-transform
charset:UTF-8
Cneonction:close
Content-Encoding:gzip
Content-Length:7672
Content-Type:application/javascript;charset=UTF-8
Date:Mon, 11 Sep 2017 06:42:32 GMT
Expires:Tue, 12 Sep 2017 06:42:32 GMT
Pragma:Public
Server:Server
Via:1.1 b04a4cffa8fb4f524ff7edcab1b5ae31.cloudfront.net (CloudFront)
X-Amz-Cf-Id:RfWJF4SEqMeutE8TgFylnbBxXEgLOFCTtLAmhGGTd1ggfCLWEeu6Nw==
X-Cache:Hit from cloudfront
Request Headers
Provisional headers are shown
Query String Parameters
view source
view URL encoded
MarketPlace:US

There is a response in the network tab as well, I was going to paste it but it is quite long.

Im having troubles integrating Amazon Native Ads into my rails apps. I think its a problem with turbolinks but not really sure. Amazon says to just past this code into your html wherever you want it. So I have this:

<div class="row ad-row" id="ad-row" data-search="<%= @recipe.equipment_list.present? ? raw(@recipe.equipment_list.map{|equipment| equipment}.join(", ")) : "cookware" %>">
      <% equipment = @recipe.equipment_list.present? ? raw(@recipe.equipment_list.map{|equipment| equipment}.join(", ")) : "cookware" %>
      <script type="text/javascript">
        amzn_assoc_placement = "adunit0";
        amzn_assoc_search_bar = "true";
        amzn_assoc_tracking_id = "livingrecipe-show-recommendation-20";
        amzn_assoc_search_bar_position = "bottom";
        amzn_assoc_ad_mode = "search";
        amzn_assoc_ad_type = "smart";
        amzn_assoc_marketplace = "amazon";
        amzn_assoc_region = "US";
        amzn_assoc_title = "Shop Required Equipment";
        amzn_assoc_default_search_phrase = '<%= escape_javascript(equipment) %>';
        amzn_assoc_default_category = "All";
        amzn_assoc_linkid = "78aa42b54ebf16f31c5239f132e3d7a0";
        amzn_assoc_rows = "1";
      </script>
      <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>
    </div>

When the page is rendered it doesnt show up and this is what it outputs when I inspect it:

There are no errors anywhere on the page. Let me know if you need any more info but this is all I can see that is involved and im probably missing something easy