Running awstats on a single logfile
AWstats is build to regularly run on webservers. If you want it to build a report once, here is the minimal configuration you need:
Put the following into the awstats config file (look into /etc/awstats/awstats.conf.local or look into /etc/awstats/awstats.conf how to do it on your system):
SiteDomain="yourdomain.de"
DirData="."
DNSLookup=0
Run the following to build a simple HTML page:
awstats -staticlinks -config="yourdomain.de" -LogFile=your-logfile.log -output > report.html
This might take a second (it will take ...
Sass: How to convert an RGBA color to its RGB look-alike
Say you have an RGBA color that you need as a non-transparent color because of reasons.
Basically, this is possible. Just understand that you will convert your RGBA color for exactly one base background color as you are giving up transparency.
Most likely, your background is white, so you'll use #fff as that for examples below.
Simple approach
When your know the RGBA color's base RGB color (e.g. your brand color that you RGBA'd for some hover effect), you can simply use the mix function instead of rgba.
Before:
backgroun...
What every coder should know about gamma
Good article about what "gamma correction" means for color processing, and what "sRGB" actually means.
You probably do not need to know this for web development, but it's an interesting read.
The Current State of Telephone Links | CSS-Tricks
The linked article shows what current browsers do when you click a link like this:
<a href="tel:1-562-867-5309">1-562-867-5309</a>
Spoiler: The current state is sad
It's still the case that most desktop browsers can't do something useful with tel: links. They will usually open a dialog confirming that an external application will be opened. If the user confirms, she will see an error, or nothing at all.
On mobile browsers on the other hand, these links just open...
JavaScript: Stopping expensive work in inactive tabs
Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating data over the network every five minutes? It's a good idea to pause this if the your document tab is not even visible to the user. This saves your user's battery and data plan.
You can ask document.visibilityState or document.hidden whether this tab is visibl...
Building web applications: Beyond the happy path
When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.
Different screen sizes and browsers
Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?
- Choose which browsers to support. Make sure the page looks OK, is usable and working in these browsers.
- Use @media queries to build a responsive design
- If you do not suppo...
Name that Color
This service gives you a kind-of standard color name for any hex code.
This is useful if you want to extract some colors into a Sass $variable and are looking for a proper variable name.
About the HTML and the BODY tag
The <html> and <body> tags both come with some non-default behavior that you know from other tags.
Do not try to style html or body for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.
Generally speaking:
- Use the
htmltag to define your page's default background color (because on short pages or large screens, yourbodymay not be as tall as the browser window). - Use the
htmltag to define a basefont-sizeso you can use [remunits](https://www.sitepoint.com/underst...
You can implement basic object-fit behavior with background images
So you want to use object-fit, but you also need to support Internet Explorer.
One option is to use lazysizes as a kinda-polyfill. Another option is to implement the requirement with background-size: contain, and background-size: cover, which is supported in IE9+.
E.g. to make an image cover a 100x100 px² area, cropping the image when nece...
Images darken when getting converted with ImageMagick
When using ImageMagick to manipulate images, you might see that images get darker when beeing modified by newer versions of ImageMagick.
This usually happens with CMYK images beeing converted to RGB by IM.
Solution
At least in our version of ImageMagick (6.7.7) you can solve this by passing this parameter to ImageMagick -colorspace sRGB.
The RGB colorspace was okay for ImageMagick until version 6.6.9. RGB and sRGB switched obviously.
object-fit polyfill by lazysizes
All new browsers support the new object-fit CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain (fit-in) and cover (crop).
Unfortunately, IE does not support this yet. However, if you're already using lazysizes, you can use its object-fit polyfill!
Usage
In your Javascript manifest, require them like this:
#= require plugins/object-fit/ls.obj...
How to test whether your device has a true Retina display
The linked site hosts a simple test. It shows two images with narrow vertical/horizontal lines. The more they resemble each other, the more Retina your display is.
PostgreSQL and its way of sorting strings
PostgreSQL uses the C library's locale facilities for sorting strings:
- First, all the letters are compared, ignoring spaces and punctuation.
- It sorts upper and lower case letters together. So the order will be something like
a A b B c C - Then, spaces and punctuation are compared to break ties.
Example:
| Ruby | PostgreSQL |
|---|---|
| IMAGE3.jpg | image2.jpg |
| image.jpg | image3.jpg |
| image2.jpg | IMAGE3.jpg |
| image3.jpg | image.jpg |
Further reading
- [PostgreSQL-FAQ: Why do my strings sort incorrectly?](h...
Lazysizes 2 is here
It claims to be even faster and brings a new plugin that polyfills object-fit and object-position. This allows for easy arrangement of e.g. images and videos inside containers.
As caniuse.com puts it, object-fit/object-position is a:
Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like backg...
How to organize monkey patches in Ruby on Rails projects
As your Rails project grows, you will accumulate a number of small patches. These will usually fix a bug in a gem, or add a method to core classes.
Instead of putting many files into config/initializers, I recommend to group them by gem in lib/ext:
lib/
ext/
factory_girl/
mixin.rb
carrierwave/
change_storage.rb
fix_cache_ids.rb
sanitize_filename_characters.rb
ruby/
range/
covers_range.rb
array/
dump_to_excel.rb
xss_aware_join.rb
enumerable/
...
Bitmap to Vector Converter
Automatically convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.
It's true, it does a great job.
Dynamically uploading files to Rails with jQuery File Upload
Say we want …
- to create a
Gallerythat has a name andhas_many :images, which in turn have a caption - to offer the user a single form to create a gallery with any number of images
- immediate uploads with a progress bar per image
- a snappy UI
Enter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.
(FYI, [here's how to do the u...
Javascript: Wait until an image has finished loading
The attached ImageLoader helper will start fetching an image and return an image that is resolved once the image is loaded:
ImageLoader.load('/my/image.png').then(function(image) {
...
});
The image argument that is yielded to the promise callback is an HTMLImageElement. This is the kind of object you get when you call new Image().
Preloading images with CSS
Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.
The attached article explains how to preload images with only CSS. No Javascript required.
The gist is:
.element:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
Official Color Codes for the World's Biggest Brands
brandcolors.net provides you with the colors of the world's biggest brands, easily searchable.
How to preview an image before uploading it
When building a form with a file select field, you may want to offer your users a live preview before they upload the file to the server.
HTML5 via jQuery
Luckily, HTML5 has simple support for this. Just create an object URL and set it on an <img> tag's src attribute:
$('img').attr('src', URL.createObjectURL(this.files[0]))
Unpoly Compiler
As an Unpoly compiler, it looks like this:
up.compiler '[image_p...
Install MySQL 5.6 in Ubuntu 16.04
Instead of using this hack you might want to use MariaDB 10.x which can work with both old and new apps.
An alternative could be to use the MySQL Docker image which is still updated for 5.6.
Ubuntu 16.04 only provides packages for MySQL 5.7 which has a range of backwards compatibility issues with code written against older MySQL versions.
Oracle maintains a list of official APT repositories for MySQL 5.6, but those repositories do...
Stretching an HTML page to full height
This card existed before, but was outdated due to browser implementation changes. The information below is validated for the current list of browsers we support.
By default your html and body elements are only as high as the actual page content inside their container. If you only have two lines of text in your page, your html and body elements will only be around 40 pixels high, regardless of the size of your browser window.
You might be surprised by this, since setting a background on either html and `body...