Update default bootstrap version to 4 (latest cdn)

[ChangJoo-Park]

Description of the Change

Alternate Designs

Benefits

Using latest version of Bootstrap 4

Possible Drawbacks

I tested on initialize template and after scaffolding resources. amber generate scaffold post

[faustinoaq]

Hi @ChangJoo-Park Thank you for your collaboration!, very appreciated! 😄

I left some comments 👍

Btw, I think we should update other generated views as well (forms, grids, show page, recipes, etc)

Ref: https://github.com/amberframework/amber/tree/master/src/amber/cli/templates

[faustinoaq]

:ditto: about the col-sm-6 class

[ChangJoo-Park]

I'll do fix indents

[faustinoaq]

Also auth links aren't right aligned: (in latest amber version v0.7.2 auth links are right aligned)

[faustinoaq]

I think we should add some top margin to the flash message box 👇

[ChangJoo-Park]

Thank you for your awesome reviews! I'll check these.

Can you explain for local development? Yesterday, I changed codes and pushed, created new repo again and again.

I think it is wrong approach. 😭

[faustinoaq]

Can you explain for local development? Yesterday, I changed codes and pushed, created new repo again and again.

@ChangJoo-Park Sure, no problem 😉

1. Be sure you have your ssh-keys well configured, see: GitHub guide
2. Fork this repo (you already forked this 👍 )
3. Clone your fork in your machine:

git clone git@github.com:ChangJoo-Park/amber.git
cd amber
git checkout bootstrap-4  # You already created this branch

4. Do the code changes you want and then:

git add . # add your modified files
git commit -m "Apply new changes" # commit changes
git push -a origin  # Upload all your changes

Finally you can see your commits here in this PR 😉

If you want to make new changes just repeat the step 4 the times you want 😄

BTW, if you can't do git push -a origin try to do git pull first. This happens because sometimes we update the PRs with our master branch.

[faustinoaq]

BTW, just to be clear, I think grids and forms need to be updated as well 😉

Also we should check views generated by:

• amber generate scaffold Tasks name:string description:text done:bool
• amber generate controller mypage
• amber generate auth
• amber generate error

And any other generator, (maybe recipes as well @damianham 👀 😅 )

[ChangJoo-Park]

Thanks @faustinoaq nice detailed explain.
I am going to fix today. :)

[damianham]

As per this issue
#724

The advice is to create a pull request with a single commit and a detailed commit log message so using -m would not allow you to create a detailed commit log message. Also you need to specify the new branchname in the push e.g.

I use

git commit # commit changes
git push -u origin bootstrap-4 # Upload all your changes

[damianham]

How can we get sign in /out and profile to pull right in the nav bar ?

[ChangJoo-Park]

@damianham Did you think like this?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

[eliasjpr]

Thank you for taking the time to contribute, we truly appreciate it. I have left some small comments

[ChangJoo-Park]

I need help for "pull-right"ing auth navs.
pull-right class has removed at bootstrap 4. I need to be wrapper element for pull right. but, I cant find inject auth nav codes into .nav element.

Someone help this issue?

[damianham]

Yes - this PR is going to update jquery to v3 and bootstrap to v4 and they will still be downloaded from a CDN

[faustinoaq]

is this intentional?

@faraazahmad Right now we're using links, I think we should consider using local assets for offline development, see #746 (comment)

@amberframework/contributors Is bad idea to store a local version of Bootstrap or jQuery? WDYT?

[drujensen]

@faustinoaq for simplicity, I recommend using the CDN. If you require offline, you can use an npm package.

https://www.npmjs.com/package/bootstrap

[faustinoaq]

@drujensen Oh, thank you, nice idea 👍

[robacarp]

The bootstrap website recommends using a little more verbose of a script and link tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Should we default to including the integrity and crossorigin options?

From the MDN on Subresource Integrity:

Using Content Delivery Networks (CDNs) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. However, using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.

[faustinoaq]

@ChangJoo-Park I just updated this PR with master branch.

If you get an error on git push try git pull first 😅

[ChangJoo-Park]

@faraazahmad I did not get any errors 😀

[robacarp]

@ChangJoo-Park any thoughts on adding the html attributes for subresources integrity as I mentioned above?

[faustinoaq]

@robacarp Yeah, I think html attributes is a nice idea to improve amber security in generated templates.

However, Do you know if these html attributes have some usability issue?

I mean, do html attributes get outdated or something like that?

otherwise, I think this PR is ready to merge, @ChangJoo-Park WDYT?

[faustinoaq]

I think this is ready to merge, we can open a new PR for other features/issues related to this

[ChangJoo-Park]

I am so sorry to reply late. I saw integrity and crossorigin attrbute. I think it may be good for security, but it is not must needed.

[faustinoaq]

I am so sorry to reply late. I saw integrity and crossorigin attrbute. I think it may be good for security, but it is not must needed.

@ChangJoo-Park Yeah, if this is required, then we can implement this in a new PR 😅

[eliasjpr]

I think this can be merged

[ChangJoo-Park]

Thanks everyone :)