kaine Wright

Joined

1,030 Experience
9 Lessons Completed
0 Questions Solved

Activity

Posted in How to use Bootstrap with Webpack & Rails Discussion

Thanks for the reply.

I can use mixins if i import bootstrap into a .scss stylesheet inside of assets/stylesheets.

If i use the setup in the video then i can use bootstrap javascript but mixins are not available inside .scss assets/stylesheets. They are only available in javascript/stylesheets.

I thought it may be some error on my side but after trying three different fresh rails projects all had the same outcome


h1 {
color: white;
}
@include media-breakpoint-only(xs) {
h1 {
margin-top: 500px;
}
}

Thats the simple scss im using.
I'll stick to using webpack then for stylesheets. If its all loaded using yarn doesnt make sense to add it another way just for styling.

adding the below into asset pipeline stylesheet fixes the mixin problem though.

@import "../node_modules/bootstrap/scss/bootstrap";

I might just remove the asset pipeline all together seeing as though im not going to use it at all and webpack can handle images too.

Posted in How to use Bootstrap with Webpack & Rails Discussion

Chris thanks for the tutorial.

I've noticed though in a comment you mentioned its still best to use css inside assets/stylesheets.

However with this in place you can't use mixins.
If my style sheet is in javascript/stylesheets the mixin has no problems

When i add @import "../node_modules/bootstrap/scss/bootstrap"; to my stylesheet inside assets stylesheets, the mixins work but thats making webpack redundant so im at a loss.

Doesnt this completely make the asset pipeline redundent or am i missing something ??

I manged to solve the image problem all i had to do was add .first to the end of @output['products'[0]['images'].first like so 
Hi i've been struggling for a while now trying to grasp how to use the data received in an api call. A lot of tutorials are either outdated or focus solely on creating API's rather than using them. I understand the concepts behind hashes and arrays but im really having a problem looping through a hash eg 

{
"url"=>"http://omgili.com/ri/.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W",
 "uuid"=>"9b002800be28f622fb9895ea5850b1dc2390d6bf",
   "source"=>{
         "site_full"=>"www.walmart.com",
         "site"=>"walmart.com", 
         "site_section"=>"https://www.walmart.com/", 
         "section_title"=>"Walmart.com: Free 2-Day Shipping on Millions of Items", 
         "country"=>"US"
       },
     "name"=>"Beginning JavaScript Charts: With JqPlot, D3, and Highcharts", 
     "description"=>"BeginningJavaScript Charts shows how to convert your data into eye-catching, innovative, animated, and highly interactive browser-based charts. This book is suitable for developers of all experience levels and needs: for those who love fast and effective solutions, you can use the jqPlot library to generate charts with amazing effects and animations using only a few lines of code; if you want more power and need to create data visualization beyond traditional charts, then D3 is the JavaScript library for you; finally, if you need a high-performance, professional solution for interactive charts, then the Highcharts library is also covered. If you are an experienced developer and want to take things further, thenBeginningJavaScript Charts also shows you how to develop your own graphics library starting from scratch using jQuery. At the end ofthe book, you will have a good knowledge of all the elements needed to manage data from every possible source, from high-end scientific instruments to Arduino boards, from PHP SQL databases queries to simple HTML tables, and fromMatlabcalculations to reports in Excel. You will be able to provide cutting-edge charts exploiting the growing power of modern browsers. Create all kinds of charts using the latest technologies available on browsers (HTML5, CSS3, jQuery, jqPlot, D3, Highcharts, and SVG) Full ofstep-by-stepexamples, BeginningJavaScript Charts introduces you gradually to all aspects of chart development, from the data source to the choice of which solution to apply. This book provides a number of tools that can be the starting point for any project requiring graphical representations of data, whether using commercial libraries or your own What you'll learn Learn the jqPlot, D3, Highcharts, CSS, jQuery and SVG basics. Discover the world of JavaScript graphic libraries. Discover which charts can best represent your data. Switch from a vision of a chart sent from a server as a static image to a highly dynamic one, in which the user is able to interact in real time. Perform input data manipulation to increase chart readability. Develop your own graphic library. Who this book is for BeginningJavaScript Charts is for developers at all levels interested in data visualization, and ready to embrace modern web standards and animate and display their data with powerful, cutting-edge technologies.", 
     "brand"=>"", 
     "price"=>62.74, 
     "currency"=>"$", 
     "offer_price"=>nil, 
     "model"=>nil, 
     "manufacturer"=>nil, 
     "in_stock"=>true, 
     "on_sale"=>nil, 
     "product_id"=>"28432749", 
     "sku"=>nil, 
     "mpn"=>nil, 
     "colors"=>[],
     "aggregated_rating"=>nil, 
     "best_rating"=>nil, 
     "worst_rating"=>nil, 
     "rating_count"=>nil, 
     "reviews_count"=>nil, 
     "categories"=>[
                    "books", 
                    "home page", 
                    "baby", 
                    "nonfiction", 
                    "computers & technology", 
                    "programming languages", 
                    "javascript"
                    ], 
       "width"=>nil, 
       "height"=>nil, 
       "weight"=>nil, 
        "depth"=>nil, 
          "images"=>[
                           "https://i5.walmartimages.com/asr/106571c2-832b-4247-8557-54ebe93c9a96_1.45a720c109d0e56be9ce583e79b64933.jpeg"
                            ], 
         "language"=>"english", 
         "last_changed"=>"2017-11-12T12:26:19.004+02:00", 
          "crawled"=>"2017-11-12T12:26:19.004+02:00", 
          "product_history"=>"/productHistory?&productId=http%3A%2F%2Fomgili.com%2Fri%2F.wHSUbtEfZTzBH6c9Z4cI15_sA3HthoyBsw5ReJGw0_rbFKKFEKXBJwvDa3kZF3xDSXTHCr8lp7XkztyRGcZF5Nj8PkbgQlU3r3ShvgEY_1f_sBkxDhbCkGvb.Y6Rf2W"

},

I've finally mastered creating the API logic then calling this logic in the controller and finally displaying to html but all i am able to figure out is @(NAMEOFFUNC)['(each API Returns a unique attribute)'] or @output['products'] will print out the entire value of the "products" key. (Should mention i dont know why it returns a hashed array and not a simple array or objects. i think its because of ruby being used in the back end so if a JSON data structure is called it auto returns a ruby hash, i know in the call logic i set the format to :JSON could have been xml) Then im able to individually use something like this @output['products'][0]['name'] or @(NAMEOFFUNCTION)['UNIQUATR'][(id. of  the product)]['(NAMEOFKEY)'] and sure enough this takes the key Name and prints its value. Images however dont work. <%= image_tag (@output['products'][0]['images']) %> returns nill this i know is because of the layout of the hashed array. ruby thinks the actual link of the image is a key that should have a value but its actually a value or object.

************    How could i get the image to display properly. ?
************    Also how could i loop through all the products displaying there value?

The looping part i understand that the loop only needs to have this contained inside it. and should have a erb to start and erb to end 
<% @output.each do |out| %>

<!--Start a loop here-->
<div class="tile scale-anm arduinoBD">
    <div id="listImage">
       <%= image_tag out['images'], size: '150'%>
       <div class="content-overlay"></div>
       <div class="content-details fadeIn-left">
          <h3> <%= out['name'] %> </h3>
          <p>  <%= out['description'] %></p>
          <p> <%= out['price']%> </p>
      </div>
   </div>
</div>
<!--finish the loop here-->
<% end %>

Posted in Will_paginate problems

Hi ive been building a new web app based on michael hartl tutorial but im having problems with the will_paginate tests. 

When i load all my users it will display every one of them so of course i add gem will_paginate to gemfile and 
User.paginate(:page => params[:page], :per_page => 30)

 to my def index.  inside my index.html.erb i have 
<%= will_paginate %> 

This all works great i load the server and start to browse through my users page by page. Im not sure how its working though becuase in the tests i have this 

require 'test_helper'

class UsersIndexTest < ActionDispatch::IntegrationTest
  def setup
    @user = users(:michael)
  end

  test "index including pagination" do
    log_in_as(@user)
    get users_path
    puts @response.body
    assert 'users/index'
    assert_select 'div.paginate' #if i remove .paginate assert select test passes. but can not find the paginate code.
    User.paginate(page: 1, per_page: 10).each do |user|
      assert_select 'a[href=?]', user_path(user), text: user.username
    end
  end
end

if on the index.html.erb i add this instead 
<div class="paginate"> <%= will_paginate %> </div>

@response.body shows this <div class="paginate">  </div> but there should be another div paginate inside the written one. and if i remove the erb all together leaving the written div things still work. So im lost as to what is happening 

Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

© 2024 GoRails, LLC. All rights reserved.