When we use css-sprites it's important to make browser cache them for longest period possible. On other hand, we need to refresh them when they are updated. This is especially visible when all icons are stored in single sprite. When it's outdated - entire site becomes ugly.
To solve this task I've implemented this small script that adds file's hash to url:
background-image: url(images/icons.png);
background-image: url(images/icons.png?a3844c660);#!/usr/bin/python
import os.path
import re
import hashlib
def file_hash(filename, block_size=2**20):
md5 = hashlib.md5()
with open(filename, 'rb') as f:
for data in iter(lambda: f.read(block_size), ''):
md5.update(data)
return md5.hexdigest()
def find_replace(match, basedir):
match = match.replace("'", '')
if '?' in match or '#' in match or match.startswith('http://'):
print 'skipping: ', match
return None
filename = os.path.join(basedir, match)
return '%s?%s' % (match, file_hash(filename)[:10])
def insert_hash(filename, debug=False):
basedir = os.path.dirname(filename)
css = open(filename).read()
matches = re.findall(r"url\((.*?)\)", css)
replacements = dict([
(match, find_replace(match, basedir))
for match in matches
])
if debug:
for key, value in replacements.iteritems():
print key, ' => ', value
else:
for match, repl in replacements.iteritems():
if repl:
css = css.replace(match, repl)
out = open(filename, 'w')
out.write(css)
out.close()
if __name__ == '__main__':
from optparse import OptionParser
usage = 'usage: %prog filename.css'
parser = OptionParser(usage=usage)
parser.add_option("", "--debug", action="store_true", dest="debug", default=False,
help="When set, just output list of substitutions.")
(options, args) = parser.parse_args()
if len(args) < 1:
print 'You must provide file name.'
insert_hash(os.path.realpath(args[0]), options.debug)Update
This is pretty old article. Now it's better to use something integrated to your build process - grunt, webassets, etc.
Subscribe for the news and updates
This article explores how Stoic principles can be applied in the workplace to navigate stress, improve self-control, and focus on what truly matters, with practical examples from the author’s experience in software development.
One of our ongoing projects, Neptyne, introduces an Excel-like grid written in React. We used a library to apply virtual scroll to it, but we stumbled upon a problem with fixed rows and columns inside the grid. Here I would like to describe this problem, how it occurs, and how we handled it.
This quick introduction to TDD is meant to show the implementation of this practice with a real-life example.
In this article we'll research how to pass custom markup to Angular components and how to create different types of dynamic components.
This article is aimed for beginners, who are trying to choose between Ruby on Rails and Django. Let’s see which is fastest and why.
As you know, model managers can be overriden in Django. It's convenient to add custom filtration method.