Invalidation of the cache of web browser

Introduction

To avoid problems with too long storage of static files in the cache of web browser  the platform has the mechanism of the cache was invalidated when the server is restarted.

The mechanism works as follows:

  1. When the application is restarted, a special variable cache_invalidator is randomly generated.
  2. This variable is appended to the address for all static resources as follows (@cache_invalidator@ is the content of variable):

<img src=’/static/img/image.png?@cache_invalidator@’>

Usage of invalidators

Invalidator is a function which converts the address of the static resources adding to them @cache_invalidator@.

HTML

To add a string of invalidator to html templates of flask you need to use the macro getStaticUrl (defined in the file src/templates/macros/get_url_with_prefix.html).

Example of usage:

<link href=”{{ getStaticUrl(‘css/bootstrap.min.css’) }}” rel=”stylesheet”>

JavaScript

JS Interface is the function getStaticUrl( ) defined in the basic template src/templates/base.html.

Example of usage:

var path = getStaticUrl(‘/static/js/script.js’);

 

ShareShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VKEmail this to someone

Guide to creating flask macros

Introduction

Flask macro is a tool to build modular user interface on web pages.

What is included in the macro

  • html file with the macro definition
    • for the below macros  the first and obligatory parameter is the identifier macroId
    • all elements with the attribute id should construct it as elementId_{{macroId}}
  • styles in the homonymous css file:
    • all styles should correspond to parts of macro tags mutually and univocally, i.e. they shouldn’t beyond the limits of the macro
  • scripts in the homonymous js file with the class for manage of ui element:
    • constructor (the obligatory parameter is macro_id)
    • set|get|clear methods for the content
    • interface for subscribe to the onChange event

Testing

You have to create a test page where macros will be connected and tested through qunitjs  with selenium shell (by analogy with internal_tests):

  • testing methods of js-class
  • testing the presence of the element in the code page

Example

An example of a macro for a text field with the specified placeholder.

Files of macro

input.html 

{% macro input(macroId, placeholder) %} 
    <input type=text id="input_{{macroId}}" placeholder="{{placeholder}}" class="input_field"> 
{% endmacro %}
input.css


.input_field{
     margin-left: 5px;
}

 

input.js

function Input(macroId) {
    this.macroId = macroId;
    this.jqueryObject = $('input_'+macroId);
}

Input.prototype.setValue = function (value){
    // doing stuff with this.jqueryObject
    this.jqueryObject.val(value);   
}

Input.prototype.getValue = function (value){
    // doing stuff with this.jqueryObject
    return this.jqueryObject.val();
}

Input.prototype.clear = function (){
    // doing stuff with this.jqueryObject
    this.setValue('');
}

Connection

some_template.html 

{% extends "base.html" %}
{% block scripts %}
    <script src="{{ url_for('static', filename='js/input.js')}}" ></script>
{% endblock %}
{% block styles %}
    <link href="{{ url_for('static', filename='css/input.css') }}" rel="stylesheet">
{% endblock %}
{% block content %}

    {% from "input.html" import input with context %}

    {{ input('name', 'name') }}
    {{ input('email', 'email') }}

{% endblock %}
ShareShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VKEmail this to someone