Updating Bootstrap JS CSS Sources

Due to the ongoing development of the Frontend-frameworks we are using, it is recommended to update the sourcefiles to increase speed, resolve bugs and increase overall responsiveness of the website.

In most cases it is sufficient to upgrade the main file of jQuery, DataTables and Bootstrap.

The Downloadlinks for the current version are:

Bootstrap: http://getbootstrap.com/getting-started/#download

Datatables: https://datatables.net/download /index

Datatables Kombifiles

download advice, click to expand...

The DataTables package has a lot of features and for each feature there is a corresponding CSS and JS File. However on the linked Site it is possible to generate one CSS and JS file with the desired features. This is advantageous, because fewer HTTP Requests are needed.

Currently (as of Jan-2017) the activated options are: The changed options are printed bold

jQuery: no jQuery (could be included to reduce HTTP Requests further)
Styling: Bootstrap
- no styling library
DataTables: DataTables
AutoFill: Do not include
Buttons: Buttons
- Column visibility: Do not include
- Flash export: Do not include
- HTML5 export: HTML5 export
  - JSZip: Do not include
  - pdfmake: pdfmake
- Print view: Print view
ColReorder: Do not include
Editor: Do not include
FixedColumns: Do not include
FixedHeader: Do not include
KeyTable: Do not include
Responsive: Responsive
RowReorder: Do not include
Scroller: Scroller
Select: Select
Minification: Minify
Concatenate: Single File
CDN: CDN or Local files -> own preference

jQuery: https://code.jquery.com/jquery/

The implementation is done in views/bootstrap/header.blade.php (for CSS) and views/bootstrap/footer.blade.php (JS) Files. There are several ways to implement these Frameworks, such as via cdn, by downloading the corresponding files or composer.

For every Framework there are several files available.

development version (uncompressed): The development version provides console warning messages when deprecated and/or removed APIs are used. Use this version during development and debugging, and whenever you are reporting bugs to the jQuery team.
production version (minimized): The minified production file is compressed and does not generate console warnings. It will only generate a console log message upon loading, or if it detects and error such as an outdated version of jQuery that it does not support. Do not use this file for development or debugging, it will make your life miserable.
(slim and slim minified): similar to development and production version but with a smaller feature set.

1 CDN implementation

For fast development, prototyping and testing it is recommended to use CDN (Content Delivery Network) links. The needed links can be found on the mentioned websites.

Example CSS implementation example (Header)

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Example JS implementation example (Footer)

<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Pros	Cons
easy and fast to implement	Requesting external sources
high availability (100% uptime)	longer access time when called from "local" network
easy to upgrade	does not work without internet access (might be bad for a NMS-Tool)
easy to maintain ( - no maintenance)	Dependant on source file -> debugging and adjustments hard to do

2 Local implementation

For the deployment version a local implementation is recommended.

The files can be downloaded from the mentioned websites or get them with wget and the CDN links

Get CDN files via wget example

wget https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

The files that need to be replaced are inside the public/components/assets-admin/plugins/[Pluginname] Folder.

Info

if you copy the files in these folders don't forget to do

#> chmod +x ./[Filename]

#> chown apache:apache ./[Filename]

Implementation is the same as with CDN variant.

Example CSS implementation example (Header)

<link href="{{asset('components/assets-admin/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet" />

Example JS implementation example (Footer)

<script src="{{asset('components/assets-admin/plugins/bootstrap/js/bootstrap.min.js')}}"></script>

Pros	Cons
faster in "local" networks	installation, upgrade and maintenance required
independent of internet access
file can be easier debugged

Formating the downloaded file in Sublime3 - recommended to prevent bugs/bad behaviour

To work with the files, they almost always need to be reformatted, because they are only machine readable and due to for me unknown properties the lines are sometimes too long and get not completely interpreted.

For Sublime 3 exists a Plug-in to automatically beautify HTML, JS and CSS code. With the help of this Plug-in the code becomes human-readable and gets interpreted without errors

Link to sublime Plug-in page: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code into the consol.

Sublime 3 JS CSS beautify

'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76';
 pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = 
urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', 
'%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error 
validating download (got %s instead of %s), please try manual install' %
 (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

This code creates the Installed Packages folder (if necessary), and then downloads the Package Control.sublime-package into it. The download will be done over HTTP instead of HTTPS due to Python standard library limitations, however the file will be validated using SHA-256.

Now right-click into sublime in the opened file and click on HTML/CSS/JS Prettify -> Prettify Code

3 Installation through composer

TO-DO: Check Composer implementation seems also possible and would be easier to maintain and does automatic updates, but was not used by me, because copying the files to the corresponding folders was sufficient for me.