├── CSS
    ├── Footer.md
    └── Position Absolute.md
├── Javascript
    └── querySelector(wildcard).md
├── README.md
├── Rails
    ├── Change body style according to the page.md
    ├── Check if all keys are in the params.md
    ├── Create a link to nowhere in rails.md
    ├── Icon in submit button with Simple Form.md
    ├── Preselect Check box with Rails Simple_form.md
    ├── Self on Active Record.md
    ├── Show or Remove Navbar or Footer only on certain pages.md
    ├── Simple form add style to form.md
    ├── Turbolinks back button on browser fix.md
    ├── Turbolinks button disable.md
    └── Use a helper in a controller.md
├── Resources
    └── design_resources.md
└── Webpacker
    └── config_dotenv.md


/CSS/Footer.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Footer
 4 | 
 5 | #### Stick it to the bottom
 6 | 
 7 | ##### 1. With `display:flex` :
 8 | 
 9 | Use a `display: flex` to make the content take all the available space that is not the footer. 
10 | 
11 | The HTML:
12 | ```HTML
13 | <div class="wrapper">
14 |   <div id="content-goes-here"> <!-- the id here is just to remind you -->
15 |     Insert your content here
16 |   </div>
17 |   <div id="footer-goes-here"> <!-- the id here is just to remind you -->
18 |     Insert your footer here
19 |   </div>
20 | </div>
21 | ```
22 | 
23 | The CSS:
24 | ```CSS
25 | .wrapper {
26 |   display: flex;
27 |   justify-content: space-between;
28 |   flex-direction: column;  
29 |   min-height: 100vh;
30 | }
31 | ```
32 | 
33 | ##### 2. With `display:grid` :
34 | Use a `display: grid`:
35 | 
36 | The HTML:
37 | ```HTML
38 | <div class="wrapper">
39 |   <div class="content">
40 |     Insert your content here
41 |   </div>
42 |   <div class="footer">
43 |     Insert your footer here
44 |   </div>
45 | </div>
46 | ```
47 | 
48 | The CSS:
49 | ```CSS
50 | .wrapper {
51 |   display: grid;
52 |   grid-template-rows: auto 1fr auto;
53 |   min-height: 100vh;
54 | }
55 | ```
56 | 
57 | ##### 3. With bootstrap:
58 | 
59 | ```erb
60 |     <div class="d-flex flex-column min-vh-100">
61 |       <%= render 'shared/navbar' %>
62 |       <%= render 'shared/flashes' %>
63 |       <article class="flex-grow-1">
64 |         <%= yield %>
65 |       </article>
66 |       <%= render 'shared/footer' %>
67 |     </div>
68 | ```
69 | 
70 | Credits go to [Rahul](https://github.com/rahulkeerthi).
71 | 
72 | ##### 4. Other solutions:
73 | 
74 | - [With position absolute](https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/).
75 | 


--------------------------------------------------------------------------------
/CSS/Position Absolute.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Position: Absolute
 4 | #### Centralize it
 5 | ```CSS
 6 |   position: absolute;
 7 |   margin-left: auto;
 8 |   margin-right: auto;
 9 |   left: 0;
10 |   right: 0;
11 |   //If needed
12 |   //text-align: center;
13 | ```


--------------------------------------------------------------------------------
/Javascript/querySelector(wildcard).md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## [How to query select with wildcard?]
 4 | 
 5 | [reference](https://stackoverflow.com/questions/8714090/queryselector-wildcard-element-match)
 6 | 
 7 | Eg. Imagine that we want to select all elements whose ID starts with `restaurant-`
 8 | 
 9 | We can `document.querySelector("[id^='restaurant-']")` will match all ids starting with `restaurant-`.
10 | 
11 | We can also use:
12 | 
13 | - `[id$='restaurant-']` will match all ids ending with `restaurant-`.
14 | - `[id*='restaurant-']` will match all ids containing `restaurant-`.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # quickTips
 2 | 
 3 | This is a repository with some quick tips.
 4 | 
 5 | [Also check my demos.](https://github.com/andrerferrer/dedemos)
 6 | 
 7 | ## General Resources - Some nice links and tools
 8 | - [Excel to Array](https://www.seabreezecomputers.com/excel2array/)
 9 | - [Git Troubleshooting Cheatsheet](https://ohshitgit.com/)
10 | - [UI tips](https://refactoringui.com/)
11 | - [Simple form bootstrap tips](https://simple-form-bootstrap.herokuapp.com/)
12 | - [Design resources](Resources/design_resources.md)
13 | 
14 | ## Git && Github
15 | - [Git pull rebase (PT-BR)](https://pt.stackoverflow.com/questions/279562/qual-a-diferen%C3%A7a-entre-git-pull-e-git-pull-rebase)
16 | - [Find the Root of the repo](https://stackoverflow.com/questions/957928/is-there-a-way-to-get-the-git-root-directory-in-one-command)
17 | 
18 | ## Rails
19 | - [Schema.rb into schema draw](https://dbdiagram.io/d)
20 | 
21 | - [Show/Remove Navbar/Footer only on certain pages](https://github.com/andrerferrer/quickTips/blob/master/Rails/Show%20or%20Remove%20Navbar%20or%20Footer%20only%20on%20certain%20pages.md)
22 | 
23 | - [Change body style according to the page](https://github.com/andrerferrer/quickTips/blob/master/Rails/Change%20body%20style%20according%20to%20the%20page.md)
24 | 
25 | - [Create a link to nowhere in rails](https://github.com/andrerferrer/quickTips/blob/master/Rails/Create%20a%20link%20to%20nowhere%20in%20rails.md)
26 | 
27 | - [Turbolinks back button on browser fix](https://github.com/andrerferrer/quickTips/blob/master/Rails/Turbolinks%20back%20button%20on%20browser%20fix.md)
28 | 
29 | - [Turbolinks button disable - Link to doesn't work the anchor](Rails/Turbolinks%20button%20disable.md)
30 | 
31 | - [Preselect Check box with Rails Simple_form](https://github.com/andrerferrer/quickTips/blob/master/Rails/Preselect%20Check%20box%20with%20Rails%20Simple_form.md)
32 | 
33 | - [Use a helper in a controller](Rails/Use%20a%20helper%20in%20a%20controller.md)
34 | 
35 |   ### Devise
36 |     - [Redirect to another after sign in](https://github.com/heartcombo/devise/wiki/How-To:-Redirect-to-a-specific-page-on-successful-sign-in)
37 |     - [Redirect to another after sign up](https://github.com/heartcombo/devise/wiki/How-To:-Redirect-to-a-specific-page-on-successful-sign-up-%28registration%29)
38 | 
39 |   ### Active Record
40 |     - [Concatenate two queries with active record union gem](https://github.com/brianhempel/active_record_union)
41 | 
42 |   ### Etc
43 |     - [Check if all keys are in the params](Rails/Check%20if%20all%20keys%20are%20in%20the%20params.md)
44 |     - [Self on Active Record](Rails/Self%20on%20Active%20Record.md)
45 | ## CSS
46 | 
47 | - [Position: Absolute](https://github.com/andrerferrer/quickTips/blob/master/CSS/Position%20Absolute.md)
48 | 
49 | - [Footer](https://github.com/andrerferrer/quickTips/blob/master/CSS/Footer.md)
50 | 
51 | - [Flexbox - Everything centered](https://stackoverflow.com/questions/22206587/flexbox-how-to-justify-content-with-space-between-and-have-everything-centered)
52 | 
53 |   ### Simple Form (Rails)
54 |     - [Icon in submit button](Rails/Icon%20in%20submit%20button%20with%20Simple%20Form.md)
55 |     - [Add style to the whole form](Rails/Simple%20form%20add%20style%20to%20form.md)
56 | 
57 | ## Webpacker
58 | - [Config dotenv](Webpacker/config_dotenv.md)
59 | 
60 | ## Javascript
61 | 
62 | - [How to query select with wildcard?](https://github.com/andrerferrer/quickTips/blob/master/Javascript/querySelector(wildcard).md)
63 | 
64 | 
65 | ## Random
66 | - [Cast old string values to datetime with migration in Rails PostgreSQL](https://stackoverflow.com/questions/36981205/cast-old-string-values-to-datetime-with-migration-in-rails-postgresql) - `PG::DatatypeMismatch`
67 | - [How to refer to a namespaced controller in the routes  ](https://stackoverflow.com/questions/27387842/rails-4-how-to-match-routes-in-namespace)
68 | - [How to show meta tag only for a certain page in rails](https://stackoverflow.com/questions/24448748/adding-meta-keywords-and-description-on-home-page-only)
69 | - [Import VS Require em JS](https://pt.stackoverflow.com/questions/213910/javascript-diferen%C3%A7as-entre-import-e-require)
70 | 


--------------------------------------------------------------------------------
/Rails/Change body style according to the page.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Change body style according to the page
 4 | 
 5 | The case: Imagine that we want to implement a different bg-color certain pages. How can we do it?
 6 | 
 7 | In the `app/views/layouts/application.html.erb`, we can add to the `body`:
 8 | ```erb
 9 | <body class="<%= action_name > <%= controller_name >">
10 | ```
11 | 
12 | Hence, we can apply the css according to the controller and action:
13 | ```CSS
14 | body.pages.home {
15 |   /* Style for the body on pages home */
16 | }
17 | 
18 | body.pages.about {
19 |   /* Style for the body on pages about */
20 | }
21 | ```


--------------------------------------------------------------------------------
/Rails/Check if all keys are in the params.md:
--------------------------------------------------------------------------------
1 | How to check if all keys are in the params
2 | 
3 | ```ruby
4 | keys.all? { |key| params[key] }
5 | ```
6 | 
7 | ![image](https://user-images.githubusercontent.com/45776359/121341638-3b29bb00-c8f7-11eb-8069-c00c1bdb26d1.png)
8 | 


--------------------------------------------------------------------------------
/Rails/Create a link to nowhere in rails.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Create a link to nowhere in rails
 4 | 
 5 | [reference](https://stackoverflow.com/questions/12081156/rails-using-link-to-to-make-a-link-without-href)
 6 | 
 7 | ```ruby
 8 | content_tag 'a', "text"
 9 | ```
10 | 
11 | it generates:
12 | 
13 | ```HTML
14 | <a>text</a>
15 | ```
16 | 
17 | You an also create a `link_to` nowhere
18 | 
19 | ```ruby
20 | link_to 'Click me', 'javascript:;'
21 | ```
22 | 
23 | `javascript:;` is the Javascript no operator. 
24 | 


--------------------------------------------------------------------------------
/Rails/Icon in submit button with Simple Form.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ```erb
 4 | <%= simple_form_for @restaurant do |f| %>
 5 |   <%= f.input :name %>
 6 |   <%= f.input :address %>
 7 |   <%= f.button :button do %>
 8 |     <i class="fas fa-plus-square"></i>
 9 |   <% end %>
10 | <% end %>
11 | ```
12 | 


--------------------------------------------------------------------------------
/Rails/Preselect Check box with Rails Simple_form.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Preselect Check box with Rails Simple_form
 4 | 
 5 | The case: Imagine that we want to Preselect Check box with Rails Simple_form. How can we do it?
 6 | 
 7 | We need to pass a `checked` value to the input:
 8 | 
 9 | ```erb
10 | <%= f.input :notify, 
11 |             label: "Notification", 
12 |             as: :check_boxes, 
13 |             collection: [
14 |               "None", 
15 |               "Daily", 
16 |               "Weekly", 
17 |               "Monthly", 
18 |               "Quarterly", 
19 |               "Yearly"
20 |             ], 
21 |             item_wrapper_class: 'inline', 
22 |             checked: ["None", true] %>
23 | 
24 | ```
25 | 
26 | ### Sources:
27 | 
28 | - https://github.com/heartcombo/simple_form/issues/643
29 | 
30 | - https://stackoverflow.com/questions/4116415/preselect-check-box-with-rails-simple-form
31 | 


--------------------------------------------------------------------------------
/Rails/Self on Active Record.md:
--------------------------------------------------------------------------------
 1 | `ActiveRecord::Base` placed all the column names inside `@attributes` instance variable (`Hash`) and create accessors instance methods for those column names.
 2 | 
 3 | For example:
 4 | 
 5 | `card_status` is a column in `cards` table, it will have accessor methods with the name `card_status` and `card_status=`
 6 | 
 7 | Since ruby local variable definition is dynamic, the line
 8 | ```ruby
 9 | def after_find
10 |   ....  
11 |   card_status = false if self.is_used_up?
12 |   ....
13 | end
14 | ```
15 | will mean we are defining and assigning to a local variable `card_status` rather than the instance method `card_status=`
16 | 
17 | [This article](https://thoughtbot.com/blog/to-self-or-not-to-self) provides more explanation on this.
18 | 
19 | [Source](https://stackoverflow.com/questions/1496380/why-do-activerecord-callbacks-require-instance-variables-or-instance-methods-to)
20 | 
21 | ### Following up on that
22 | 
23 | If we had a `Restaurant` model like this:
24 | ```ruby
25 | class Restaurant < ApplicationRecord
26 |   def what_are_attributes
27 |     p @attributes
28 |     binding.pry
29 |   end
30 | end
31 | ```
32 | 
33 | We'd be able to check what `@attributes` actually is:
34 | ![image](https://user-images.githubusercontent.com/45776359/121343394-00c11d80-c8f9-11eb-9a55-caadad58a623.png)
35 | 
36 | ```ruby
37 | @attributes.class
38 | # => ActiveModel::AttributeSet 
39 | # https://www.rubydoc.info/gems/activemodel/ActiveModel/AttributeSet
40 | ```
41 | 
42 | So, when we do `Restaurant.new(attributes)`, it's actually running the initializer differently than we expect:
43 | ![image](https://user-images.githubusercontent.com/45776359/121343919-8f359f00-c8f9-11eb-845e-878de41737c0.png)
44 | 
45 | And that's why plain old ruby objects' (POROs) getters and setters won't work properly here.
46 | https://www.rubydoc.info/gems/activemodel/ActiveModel/AttributeSet
47 | 


--------------------------------------------------------------------------------
/Rails/Show or Remove Navbar or Footer only on certain pages.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Show/Remove Navbar/Footer only on certain pages
 4 | 
 5 | Add a [new layout](https://guides.rubyonrails.org/layouts_and_rendering.html) and call it in the controller
 6 | ```ruby
 7 | class Controller < ApplicationController
 8 |   layout 'my_layout_without_a_footer', only: [:new, :index]
 9 | ```
10 | 
11 | If we want it to not show on users new and edit, with [devise](https://github.com/heartcombo/devise), we need to [expose the controller](https://github.com/heartcombo/devise#configuring-controllers).


--------------------------------------------------------------------------------
/Rails/Simple form add style to form.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | 
 4 | ```erb
 5 | <%= simple_form_for @restaurant, html: { style: 'color: red;' } do |f| %>
 6 |   <%= f.input :name %>
 7 |   <%= f.input :address %>
 8 |   <%= f.submit %>
 9 | <% end %>
10 | ```
11 | 


--------------------------------------------------------------------------------
/Rails/Turbolinks back button on browser fix.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Turbolinks back button on browser fix
 4 | 
 5 | Add to your `app/views/layouts/application.html.erb` on the head:
 6 | 
 7 | ```erb
 8 | <html>
 9 |   <head>
10 |     <title>A Title</title>
11 | 
12 |     <%# This might prevent turbolinks cache %>
13 |     <!-- Add this line -->
14 |     <meta name="turbolinks-cache-control" content="<%= yield(:turbolinks_cache) %>"> 
15 |     <!-- Add this line -->
16 | ```
17 | 
18 | On the corresponding page (the one that's bugging when you go back), add this in the beginning of the file:
19 | 
20 | ```erb
21 | <%# This prevents turbolinks cache %>
22 | <%= provide(:turbolinks_cache, 'no-cache') %>
23 | 
24 | <%# This solution was implemented from this thread https://stackoverflow.com/questions/39627881/jquery-plugin-initialization-on-browser-back-button-for-turbolinks-rails-5/39801052#39801052 %>
25 | <%# also this https://stackoverflow.com/questions/36497723/select2-with-ajax-gets-initialized-several-times-with-rails-turbolinks-events/41915129#41915129 %>
26 | ```
27 | 
28 | ## [Turbolinks removed from a specific link](https://stackoverflow.com/a/45269491)
29 | ```erb
30 |   <%= link_to "Policy", policy_path, "data-turbolinks": false %>
31 | ```
32 | 
33 | And that's it!
34 | 
35 | Good Luck Have Fun
36 | 


--------------------------------------------------------------------------------
/Rails/Turbolinks button disable.md:
--------------------------------------------------------------------------------
 1 | [go back](https://github.com/andrerferrer/quickTips#quicktips)
 2 | 
 3 | ## Problem
 4 | 
 5 | If you have a link to another page with an anchor, turbolinks can get in the way.
 6 | 
 7 | ## Solution: Disable turbolinks on a Button
 8 | 
 9 | ```html
10 | <a href="/next" data-turbolinks='false' >Next</a>
11 | ```
12 | 
13 | ```erb
14 | <%= link_to 'Next', next_path, data: { turbolinks: false }  %>
15 | ```
16 | 
17 | ### Sources
18 | - https://github.com/turbolinks/turbolinks/issues/214
19 | - https://github.com/turbolinks/turbolinks/pull/348
20 | 


--------------------------------------------------------------------------------
/Rails/Use a helper in a controller.md:
--------------------------------------------------------------------------------
 1 | [Go Back](../README.md)
 2 | 
 3 | `helpers.<helper_method>` in Rails 5+ (or `ActionController::Base.helpers.<helper_method>`).
 4 | 
 5 | E.g. `helpers.image_path('banana.jpg')`.
 6 | 
 7 | **Sources**
 8 | 
 9 | * [Stack overflow question](https://stackoverflow.com/a/11161692)
10 | * [Rails documentation](https://api.rubyonrails.org/classes/ActionController/Helpers.html)
11 | 


--------------------------------------------------------------------------------
/Resources/design_resources.md:
--------------------------------------------------------------------------------
 1 | ### Collections of Resources (one source of resources to rule them all).
 2 | 
 3 | https://resourcecards.com/
 4 | 
 5 | ### For Design speed-up
 6 | 
 7 | https://www.figma.com/resources/assets/wireframe-kit/
 8 | 
 9 | ### For inspiration
10 | 
11 | https://dribbble.com/
12 | 
13 | https://www.awwwards.com/
14 | 
15 | https://onepagelove.com/ 
16 | 
17 | ### For colors
18 | 
19 | https://coolors.co/
20 | 
21 | http://colorhunt.co/
22 | 
23 | https://uigradients.com/#Blush
24 | 
25 | https://color.adobe.com/nl/create/color-wheel/ 
26 | 
27 | [Colorzilla](http://www.colorzilla.com/) to steal like an artist
28 | 
29 | ### For icons
30 | 
31 | http://fontawesome.io/
32 | 
33 | https://thenounproject.com/
34 | 
35 | https://nucleoapp.com/ 
36 | 
37 | ### For fonts
38 | 
39 | https://fonts.google.com/
40 | 
41 | http://fontpair.co/ 
42 | 
43 | ### For pictures
44 | 
45 | https://unsplash.com/
46 | 
47 | https://www.pexels.com/ 
48 | 
49 | ### For Illustrations
50 | 
51 | https://blush.design/pt
52 | 
53 | ### For already-made-for-you components
54 | 
55 | https://codepen.io/
56 | 
57 | ### For Business name generator
58 | 
59 | https://namelix.com/
60 | 
61 | ### For layouts
62 | 
63 | https://every-layout.dev/
64 | 


--------------------------------------------------------------------------------
/Webpacker/config_dotenv.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 1. add the plugin `yarn add dotenv-webpack`
 4 | 2. create a `.env` file (`touch .env`)
 5 | 3. add your API key to the `.env` file. e.g.:
 6 |     ```
 7 |     # .env
 8 |     API_KEY=123456
 9 |     ```
10 | 
11 | 4. use it in your app with `process.env.API_KEY`.
12 | 
13 |     [Check this practical example for more](https://github.com/andrerferrer/simple-mapbox-demo/tree/master#usage)
14 | 


--------------------------------------------------------------------------------