For django projects there is an awesome tool called django-compressor. It combines all js or css files under compress template tag into single cached file, like this:
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/static/css/one.css" type="text/css" charset="utf-8">
<style type="text/css">p { border:5px solid green;}</style>
<link rel="stylesheet" href="/static/css/two.css" type="text/css" charset="utf-8">
{% endcompress %}
I'm wondering if there is anything like this for tornado projects? Or maybe any workaround/alternative solution?
I've found this project on github, but it's no longer maintained.
Take a look at tornado_utils, it should do what you want. Especially take look at tornado_static.py
tornado_static is a module for displaying static resources in a Tornado web
application.
It can take care of merging, compressing and giving URLs ideal renamings
suitable for aggressive HTTP caching.
The best option I've seen so far is WebAssets.
From the documentation:
webassets is a general, dependency-independent library for managing
the assets of your web application. It can merge and compress your CSS
and JavaScript files, supporting a wide variety of different filters,
and supports working with compilers like CoffeeScript or Sass.
You can use it in standalone mode with tornado (see the specific documentation).
Set up is easy and pretty straightforward:
from webassets import Environment
static_directory = "../static"
output_directory = "/static"
my_env = Environment(static_directory, output_directory)
Of course you can customise it far better. The rest is pretty well explained in the documentation.
Main features:
Easy integration
Possible to compress static files in advance (command-line tool)
Possible to compress static files on the fly
Supports most minifying/compression libraries (JS, CSS)
Supports LESS/SASS compiling inside the browser
Supports compression of JS Templates inside the browser (Handlebars...)
Supports CSS sprite mapper
Example of what a template (here, Jinja2) looks like after proper configuration:
# css
{% assets filters="cssmin", output="css/compiled-layout.css",
"css/custom.css",
"css/bootstrap-datepicker.css",
"css/typeahead.css" %}
<link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
{% endassets %}
# js
{% assets filters="jsmin", output="js/lib/compiled-libs.js",
"js/lib/jquery-2.1.1.min.js",
"js/lib/jquery-ui.min.js",
"js/lib/bootstrap.min.js",
"js/lib/bootstrap-datepicker.js",
"js/lib/d3.min.js",
"js/lib/typeahead.bundle.min.js",
"js/lib/moment.min.js",
"js/lib/handlebars-v2.0.0.js",
"js/global.js" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
I've been using WebAssets tied to Flask for a year with no hassle and it's perfectly reliable, plus well-maintained: it's been there for several years, and last commit to date was yesterday.
As far as I understand from looking into the open-source tornado projects there is no standard and canonical way of doing static-files minification and compression in the "tornado world".
The different options I've seen, are:
tornado_utils (see the other answer)
a fresh torminify module
Douglas Crockford's jsmin.c port to python, see:
jsmin.py
a Python port of the YUI CSS compressor:
csscompressor
cssmin.py
slimit.minify() of the slimit javascript parser
Only the first two options are tornado-specific. Other tools need to be tied up with Tornado template rendering and static files serving mechanisms manually.
Related
I'm using Django Dev Server and trying to test some templates I've made. When I visit addresses, I can see from the server prompt that CSS and images are loaded, but when I'm looking in a browser it is not applied. I'm also using Bootstrap and strangely enough, it does get applied.
I would really like some help. I've seen (and implemented) the solution from various other threads with no avail. Please Help!
Threads I've seen:
Django -- Can't get static CSS files to load
CSS loaded but not applied
Django Static Files - CSS File Won't Load
Django CSS Attachment
Django - CSS problems
CSS loaded but empty
Moving the CSS after bootstrap worked for me.
Like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/checkout.css' %}">
It's really all in the question but I'm using python-highcharts to build something like this jsfiddle example for inclusion in a Python Flask app. I can get it to work in the Jupyter notebook from where I can save it to an html file or export it as an iframe or div code block. But I can't get any of these to work in the flask html page. The inclusion block in the flask page looks like:
<p>
{% if result != None %}
<div id="my-chart"></div>
<script type="text/javascript">
{{result|safe}}
</script>
{% endif %}
</p>
and the relevant header parts:
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
I've managed to get it working with pandas-highcharts but in this way I can't send tooltip formatting javascript functions via the dict-to-json-to-browser path... so a solution to either issue would be great.
J.
First off:
Writing JS functions in the HTML can (almost) always be prevented!
One of the first principles you should stick to is to separate your static files. More on that here.
You should only pass the variable into your script using Jinja2/DjangoTemplatingLanguage tags like this, and write all your javascript functionality in your separate .js file, which is then imported along with other scripts, by your example:
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="{{ static_url }}/js/my-highstock-project.js"></script>
This way you have nice code separation and it is also (somewhat) more safe.
Which leads us to the problem at hand; importing...
So secondly:
HighCharts needs jQuery to be implemented before it can work. That is probably your problem.
To import jQuery include this to your header:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
I'm working on an email template, therefor I would like to embed a css file
<head>
<style>{{ embed 'css/TEST.css' content here }}</style>
</head>
instead of linking it
<head>
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
</head>
Any ideas?
I guess you could use include
<style>{% include "/static/css/style.css" %}</style>
https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#include
But it might be better to load the contents of the css file in your view, and put it in the context of your view to send it to the template
You can use django-compressor package. It will add {% compress %} template tag that can join together bunch of JS or CSS files (or inlined code) and put it into template as new, big file or inlined code. For example to inline one CSS file, you can use:
{% compress css inline %}
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
{% endcompress %}
You can add more CSS files into one compress tag, they will be concatenated together and wrapped into one <style>tag.
Check usage examples for more details.
On solution would be the use of include:
<head>
<style>{% include "../static/css/TEST.css" %}</style>
</head>
But it is kind of messy!
You have to place a copy or link to your css-file in your templates directory. Or you use a hardcoded link as above, which may break in production.
I wanted to use a third-party html/css example in Django, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
EXAMPLE CODE
</body>
</html>
I have used just this example, and commented all other code. Django recognizes the css file, I checked it. However, I don't get a sticky footer and header. They transform in a plain text, just like the main body.
I put this example in the codeacademy engine and it works there as well.
What hidden stones of Django I might be missing?
there is no hidden stones in django. there is no such option as recognize css file for django. Django has nothing to do with css files.
I recommend u to open network panel in browser developer tools console and check, was the css file downloaded successfully by browser or not.
in some case if u use django development server there is manual how to serve static files in development mode
https://docs.djangoproject.com/en/1.2/howto/static-files/
another cases are, misspelled css file name or misspelled/incorrect path to css file
https://docs.djangoproject.com/en/dev/howto/static-files/
Let's assume that I have a project or two that I'm building with Django and twitter bootsrap. The said projects are versioned in git repositories.
Currently, I, like most people, will (or would) just download bootstrap, do some cp -r and git add commands and happily code away.
But now I stopped thinking.
Everything is on git.
git supports subrepos.
Django has collectstatic.
This is 2013 and continuous integration et al. are the buzzwords of the decade
so: there must be a more elegant and simply better way of doing this as everything I would do would be a horrible violation of DRY
You can install this app in django and use
pip install -U django-staticfiles-bootstrap
./manage.py collectstatic
to pull the latest bootstrap code into your project :)
https://github.com/Apreche/django-staticfiles-bootstrap
This might not be exactly what you're looking for because there is an ugly part in this strategy, but it's worth mentionning IMHO.
Overview
Compile less in debug mode in the browser for development. This enables your integrator to work faster and to view syntax errors reports in the browser and make development awesome.
Use django-compressor for production to pre-compile all your less into css and make performance awesome.
Be able to reuse in your less scripts: bootstrap classes, variables, etc, etc ... else what is less good for ? The problem is that you must get your compiler to compile both bootstrap and your own less scripts in the same run.
Basic strategy at Django level
This is how your site_base.html template could contain:
{% if debug %}
<link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/style.css' %}" />
<link href="{{ STATIC_URL }}bootstrap/less/bootstrap.less" charset="utf-8" type="text/less" rel="stylesheet">
<script type="text/javascript">less = {}; less.env = 'development';</script>
<script type="text/javascript" src="{{ STATIC_URL }}less.js" ></script>
{% else %}
{% compress css %}
<link rel="stylesheet" type="text/css" href="{% static 'autocomplete_light/style.css' %}" />
<link href="{{ STATIC_URL }}bootstrap/less/bootstrap.less" charset="utf-8" type="text/less" rel="stylesheet">
{% endcompress %}
{% endif %}
Ok, that's the ugly part: it's not very DRY ... but it does work really great. As you can see, you need the debug context processor.
This is how your settings could look like:
COMPRESS_PRECOMPILERS = (
('text/less', 'recess --compile {infile} > {outfile}'),
)
Note: bootstrap only compiled on recess less compiler when I did this. Maybe other compilers are supported nowadays but I wouldn't bet on it.
Basic git strategy
To re-use bootstrap directly from their repo, use git submodules.
Basic strategy at the less level
Suppose we create a custom.less script which should be able to re-use bootstrap stuff, ie. variables, classes, mixins and so on.
We now have a problem: the compiler must parse both bootstrap's stuff and custom.less at the same time. Else, how could the compiler know about bootstrap's variables when compiling custom.less ?
So, you could import custom.less in bootstrap.less, but that will cause a modification of a file outside your repo (remember: bootstrap.less comes from a submodule).
Solution: create a master.less which import both bootstrap/less/bootstrap.less and custom.less. Don't forget to link master.less instead of bootstrap.less in your site_base.html.