Various Ruby on Rails tutorials encourage the instillation of the bootstrap-sass gem. Why is this a convention rather than point to a CDN?
I've included in header of my app:
<!-- BOOTSTRAP CSS 3.3.5 CDN: --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
And in the footer:
<!-- BOOTSTRAP JS 3.3.5 CDN --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
Assuming I am always working from a development box that is connected to the internet: What is the reasoning behind using the bootstrap gem rather than just pointing to a CDN? Isn't it always faster to point to a CDN where a client is likely to have the file already cached?
The likely reason that Rails' tutorials suggest the bootstrap-sass gem is just a matter of convenience; as Rails' developers we're used to adding a line to our Gemfile to integrate 3rd party libraries.
There are added benefits to the gem: after you do a bundle install you won't need an internet connection to load your development environment's assets (no need to connect to an external CDN). Also you can use SASS to override Bootstrap mixin variables and customize the framework.
These benefits aside, if you aren't customizing Bootstrap there is no need to use the boostrap-sass gem in production. In fact your argument about clients possibly already having CDN hosted versions of common JS/CSS frameworks is certainly valid.
Short answer: don't think of the boostrap-sass gem as a convention. It's a good starting point for customization but if no customization is needed it is perfectly reasonable to go with a CDN.
Using the CDN merely gives you CSS, hard-wiring your HTML files to a specific bootstrap version. Using the SASS/LESS version of bootstrap on the contrary allows you to put semantic classes on your HTML, and make the connection between your semantic classes and Bootstrap in your app specific SASS/LESS files (using #import, #extend ... statements)
If you use this technique wisely, you will end up with smaller sized downloads since you only import the parts of bootstrap you actually use in your application, and you will have clean separation of concerns, allowing you to switch sass/less frameworks without touching your HTML files (ideally).
Related
I'm a junior backend dev having trouble setting up asset pipeline on Rails 7 using sprockets
Basically I need to support four different CSS Framework in one Rails application:
using tailwind for the landing page (landing.css)
using bootstrap 4 for old admin page (admin-v1.css)
using bootstrap 5 for newly developed admin page (admin-v2.css)
using simple css for test page (test.css)
I can't find example anywhere to split the output of CSS asset pipeline.
It's unusual to just use one css framework, because we bought the theme from third party provider, which include CSS that will be very hard to build from scratch.
How to use multiple different css framework on Rails 7?
I'm planning on learning SCSS, but not sure if it's only meant to help the dev, or that the server of the website I'm making should also have knowledge of that.
It's going from SCSS -> CSS, so the server shouldn't notice anything ?
SASS/SCSS is a language that has features allowing the author of CSS to keep track of properties within CSS in a more organized fashion. It also allows variables and other things which are not part of the CSS language. This is done by compiling the language into plain, regular CSS.
So a program is needed to translate/compile SASS/SCSS into CSS and that's easily installed on your computer or server. Other than doing the compile, it doesn't mean anything to the server at all.
It's an aid for the developer, not the server. To the server, it's just text it serves along with the HTML, javascript and other things.
Great choice to start learning SCSS. You can do either. You can use a server middleware to auto compile your sass when it changes, or, do it yourself with a compile tool and serve the resulting css file along with any other assets you may have.
I took an existing web site that was mobile responsive, turned it into a meteor application, and now it isn't responsive. Do I need to install an extension or something?
This is most likely not a meteor specific problem unless your framework requires specific loading of js to make it responsive.....
Check for your responsive framework as a package and install that. If its not there and requires JS you will need to use the compatibility folder or fix the javascript up.
There are no other features within meteor that i know of that should make "it responsive"
I'm moving ASP.NET bundling into a site I have and I noticed that it is removing all comments from the code including copyright header comments (in CSS and JavaScript). This would be ok if it was my copyrights as I could just create my own IBundleTransform and add my copyright to the top, but it is not ideal to do this with third party copyrights.
Are there any good ways to keep these copyright headers (or maybe a flag that I haven't fround in the MSDN documentation)? Thanks!
Current Answer (Updated 1/2016)
The original answer (see below) is still valid; however, JavaScript has changed a lot since 2013. This rapid change is even compounded by the fact that ASP.NET 5 doesn't even have Bundling in it anymore.
My current solution is to use a JavaScript tool to do the bundling and minification for me. Things like Uglify have options to minify while keeping important header comments. You can combine this with a tool like Gulp, Grunt, etc to trigger this process on build, project loading, or even on demand. This can be accomplished with the Visual Studio window called "Task Runner Explorer", which is built into Visual Studio 2015 and is available as a Visual Studio 2013 extension.
Using a JavaScript tool for minification doesn't fix the issue with cache busting that Bundling solved. There are JavaScript tools to fix this (i.e. gulp-rev), but I don't like the way that they work with ASP.NET. One way of doing this while maintaining a high cache age for static content is to use some sort of hash or fingerprint in the URL. Microsoft employee Mads Kristensen wrote a post about how one might do this caching busting in ASP.NET on his personal blog.
In addition, HTTP/2 and if you are making a site forward facing you will not want/need to combine scripts in bundles like we used to.
Original Answer
As a follow up, the solution I used was to use Bundle instead of ScriptBundle or StyleBundle and just sticking all third party libraries (already minified anyways) into one bundle.
I was about to use #Robert Havey's excellent answer for Bundle Transformer when I realized I could get by without the minification and make a bundle with all third party JS or CSS.
i am building a website with Cakephp Framework and Bootstrap 3 for GUI. Currently i use Minify 2.1.7 to combine and minify css and js files.
When i started playing with the idea to use Bootstraps's less files for more flexibility and cleaner css code i researched more information about Minify in order to combine it with a less parser. Unfortunately i found out that Minify is said to be a great security risk and should not be used. People recommend grunt or assetic instead. Both tools are very complicated to use and afaik they are not php only but also require certain binary support for parsers etc.
Is there a way to or a php-tool like Minify that can combine, minify and and parse less?
Is there a way to use gruntjs, assetic or other tools for my usecase? (php only)
Is Minify really such a security issue?
There are grunt tasks for minify and compiling most assets, here is one for less grunt-contrib-less.
Grunt can be used with servers written in any language, use it to generate your static assets and serve them with whatever language you want