This is a real question...
Is there a way to use less.js as it could generate static css files, those files that will be cached and reprocessed on demand and not on the fly ?
That means generate css cached files to avoid on the fly generation and leverage performance benefits of static files, but keeping the flexibility of writing in less.
This is more way interesting when using css framework like bootstrap, with the need of reusing less variables.
This is supposed to be used in a production environment (we don't own nor control) by webdesigners who are not able to install anything on the server side.
Thanks a lot for any answer !
You need some sort of compiler like this: http://wearekiss.com/simpless
Related
Is there a way to avoid working with the command-line installing and using LESS??
There are several offers for GUIs for the compiling-phase, but I did not find a way for the Installation-Phase.
I have been working in the IT-business for so many decades (more in the mainframe and midrange area and as a project-manager and programmer in the application development) and could by now avoid to go as far down to the command-line-world.
I did develop quite fine Websites using HTML5 and CSS3 and doint this I felt a desire for all that, what LESS and/or SASS are offering and the Syntax and logics dont look difficult to handle. But I fail in the first step of just installing it.
The LESS-Website offers command-lines to key in. But I am not sure, if this will be all I have to key in, but only the significant line to be embedded in a sequence of other commands very familiar to all those working at this Level.
How do I e.g. define the place to store the Installation and to refer to in the href in the link-Statement of my html-file .... ??
Thanks
Gerhard (from Vienna/Austria, living in Trier, Germany)
Less is a CSS pre-processor. if you are include less.js in you html page
You can use less directly in to your html page.
Other ways you can use less compiler
Kola this is an open source application it will help you to compile less to css
Your Topics are clear to me. I even downloaded Koala already and I have no Problem in including less.js in my html. And I have read Bass Jobsens book about the Syntax, which does not seem to raise great Problems to me.
But before working with it, I will have to download LESS -what I have done from the Less-Website to the Folder of my choice. My Problem is the next necessary step: To install this downloaded program. There is no install.exe or something like that. The book as well as the info in the less-Website tell me to key some crpytic commands into the command-line.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
For a big single page web application using ASP.net, MVC5 and Angular JS I'm looking to serve dynamic generated stylesheets. The application will have an big amount of users (> 1000s) that individually can set about 10 variables. These include a few colors and logos. These colors and logos will be used in the less stylesheet to generate lots of classes/styles. The stylesheet is compiled from a lot of files, about 50 .less files.
I'm planning to use the following approach:
On loading index.html, after user login, I call an ASP action to load the stylesheet <link href="Give/Me/My/Dynamic/Stylesheet/For/User/12122312">
The controller action will do its magic and gets the 10 user variables from the database
The server will than use .dotless to compile the less to css
Server returns string
This approach will work, but I'm afraid the performance will be not so good. My questions:
Is dotless the fastest way to compile less?
How long will the databasecall + compiling take?
Is this the way other application do this?
I'm looking if there's a way to cache the css request - maybe check if there has been a change since the last time the css was compiled.
What will not work:
Compile the less to css and then change the variables in the css (saves a compile every time). Some of the colors in the stylesheet will be based upon on of the variables. (eg lighten(#333, 0.3) etc).
Use a static stylesheet and then override these in the head of the HTML doc. There will be a whole lotta custom styles involved!
Some other thoughts:
This solution seems to do the same, but compiles on build:
This solution saves the variables to a static file and uses that for compiling. This saves a database call, but the directory gets crowded with lots of users.
Your planned approach sounds fine. As far as your specific questions go:
Is dotless the fastest way to compile less?
"Fastest" is relative and debatable. The only way to know would be to run this and any available alternatives on your production machine using some sort of benchmarking. Even then, outside factors such as how much load the server is getting, how many requests are being handled simultaneously, etc. can affect those benchmarks. For example, maybe one solution is "faster" handling an ideal scenario, but has a large overhead that causes it to run much slower than another solution when the server is actually being taxed. Overall, it's impossible for anyone to give you any sort of definite answer to this, and really, it's probably too early to even be that concerned about the question. If it becomes a problem in production, then you can start investigating alternatives.
How long will the databasecall + compiling take?
Also completely impossible for anyone to give a definitive answer to. There's way too many variables involved in that relatively simple question. What database are you using? What version? What are the specs of the server it's running on. What else is running on that server? How have you configured the database server? What kind of query are you running? How many tables are involved? What's the size of the resultset being returned? What type of network infrastructure is in place? What's your latency? How capable is your network infrastructure at handling load? There's probably more questions I could ask if I though long enough and that's just about the database call portion. I don't expect answers to those questions; I'm merely trying to point out 1) there's no way anyone can answer that for you and 2) you're going to have to do a lot of research to come up with those answers yourself.
Is this the way other application do this?
This is highly speculative. First, it assumes this is somewhat common, when it's probably anything but. In my 20-some-odd years of doing web development, I've yet to encounter a scenario where I needed a dynamic stylesheet. Granted, for a large part of those years stylesheets didn't even exist or at least weren't heavily used yet and just because I haven't had a need doesn't mean there's not still a perfectly valid business-case for this. I understand the desire to want to find an accepted pattern or best practice to follow, but the sample set here is probably so small that no such thing exists. Trust your gut. Build things in a way that makes sense. Then test, refine and refactor. That's really the best advice I can give you.
I'm looking if there's a way to cache the css request - maybe check if there has been a change since the last time the css was compiled.
This one is pretty easy. Just make sure to set the appropriate response headers before returning your response. Expires is really your go-to here. If the stylesheet virtually never changes for the user, then you can set a far future Expires header and the client's browser should cache it requiring all this infrastructure to not have to do its thing again for a while. If the change-ability is variable (any time the user updates a setting, they need a new version, and this can happen at a whim), then you can still use a far-future Expires header and employ a cache-busting querystring param that will force the browser to get a fresh copy. A good choice might be adding the last modified date for the settings when rendering the link for the stylesheet. If the user hasn't modified anything, then the date won't change and the original cached version will be used. But if the date has changed, it will look like a new URL to the browser, and it will be fetched fresh.
So everyone knows the pros of having a single CSS file for a webpage.
Only one HTTP request is needed to fetch it
Once stored in cache, all webpages using it will be blessed
But I think there's a great pro of having multiple CSS files
All CSS files will be downloaded parallely, thus less time...
So If I have 500KB of code of CSS and internet speed of 50KBps (yes, i live in a poor country :-/ )...
method A will take (10+x)secs # where x is the time for HTTP request
method B should take (1+x)secs # if I divide it into 10 files
Am I wrong, If I say "Method B is much better" ?
First of all, I would recommend that you use a CSS Minifier, like http://cssminifier.com/.
Regarding your speed test, in your case maybe is really faster to use multiple files, but try it and test your page at Google's PageSpeed Insights
Specially if your target is your own country, and if you know that the internet is slow all over there.
From Here
It's not about bandwidth speed but number of http requests, this makes
a lot of sense for a mobile connection.
However the approach of having different css files to keep the project
modular is solid, as it helps you keeping your css organized the way
you want it without having all the code in one file only. Then you can
benefit of css preprocessors / minifiers to concatenate and compress
all your css files in a single one for production
Is there a way to tell the sbt-onejar SBT plugin to produce a JAR in such way that the .class files of my project are in "expanded" form and not under lib/myproject.jar?
Alternatively, is it possible to tell sbt-onejar to produce a JAR that, when it's loaded, it actually unpacks/expands the nested JARs into a temporary folder and loads them from there, so that things like getResource(...) return paths to physical files as opposed to jar:file:... URLs?
Alternativel, I'd also happy with any vanilla OneJar solutions that help me produce a fat JAR wherein my own .class files would be directly under the fat JAR as opposed to under lib/myproject.jar.
I'm asking because Jetty does not seem to be able to load JSP files from inside of nested JAR files. There does seem to be a workaround by using a custom resource loader (see http://dev.eclipse.org/mhonarc/lists/jetty-users/msg01174.html for a report of the same problem and the workaround) but I don't seem to be able to get my servlets to actually use the overridden getResource method provided in the workaround.
After having read sbt-onejar's source code:
packageOptions in oneJar ++=
Seq(sbt.Package.ManifestAttributes(
new java.util.jar.Attributes.Name("One-Jar-Expand") -> "some-file.txt"))
However, I've realized using OneJar with Jetty is quite a problematic beast due to how Jetty loads JSP files—doesn't seem to work with nested JARs—so I'm looking into alternatives now.
EDIT: I've found https://github.com/xerial/sbt-pack and it seems to achieve the same effect as OneJar with the difference of being standard and thus free of problems, much faster, more customizable, and allows defining of convenient custom program entry points.
I'm in the process of taking a couple of separate asp.net applications, and combining them.
One problem is rationalizing the CSS between the two app - app1 has two css files, while app2 has about 8 of them. Much of the CSS between the two apps is the same, but there are some differences. I'm looking for a tool to compare all the elements of each app, and show what's missing, what's different, etc. Ideally the output would be 3 files: Common, app1 and app2, but I won't be that fussy if it can just show me the differences between the two apps.
Does such a tool exist?
If you hate downloading tools, there's an online version of css comparer here http://www.alanhart.co.uk/tools/compare-css.php
It provides a comparison of css class files between two files
I don't know of a stand-alone tool tailored for this specific purpose. There's a PHP class called "CSS Comparer", but I have no idea how easy it is to use. The screenshot on that page looks promising though.
Personally, I would probably just concatenate all the files together, so that you have one file for each app, and then run a diff on them. To make it even easier, you could run both files through something like CSSTidy or do some imaginative file processing with search/replace and sorting. That could get all the declarations in the same order in both files, so the diff would be clearer.
Combine all of these files into a single file and give it a run through a CSS optimizer or compressor. An optimizer should see all of your duplicate selectors and weed them out.
I'd recommend YUI's compressor, but there are plenty of web-based compressors/optimizers available, too. Here's one and another. YMMV with them, but a good Google search can turn up a bunch more.
Normally I'd recommend diff. Since you explicitly write that you are looking for something "not diff based", maybe you could describe why diff does not help you.
Then others might be able to propose something different.