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 Figma’s Dev Mode, a tool that streamlines design-to-code translation by enabling precise inspection, automated code generation, and seamless integration with design systems.
This article offers key insights into the ISTQB certification and shares a proven preparation strategy to help candidates succeed.
Promise is a powerful tool in asynchronous programming that allows developers to call a time-consuming function and proceed with program execution without waiting for the function result.
In this article we'll discuss some tricks you can use with Angular to make routing cleaner and improve SEO of your application.
In this article, we will describe some useful scripts and directives we use with angular form validation in our projects.
In this article, we will compare two most popular JS Libraries (Angular vs React). Both of them were created by professionals and have been used in famous big projects.