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. 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 does cover the enti…
CSS: Using the current text color for other color properties
There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).
Usage
The currentColor value can be used in CSS to indicate the current value of color should be used. A common use case is setting a border color:
a.ghost
color: white
border: 1px solid currentColor
&:hover
color: red // Border color will change as well
Note that in many cases, you can simply omit the color to ac…
Lazy-loading images
Since images are magnitudes larger in file size than text (HTML, CSS, Javascript) is, loading the images of a large web page takes a significant amount of the total load time. When your internet connection is good, this is usually not an issue. However, users with limited bandwidth (i.e. on mobile) need to mine their data budget better.
One popular strategy to improve the website performance is to not load images until they enter the viewport – aka "lazy-loading images".
General Issues
- Crawlers do not execute JavaScript (generally sp…
RubyMine: Scratch files
There are times when you have a chunk of text that you want to do something with, e.g. replace something on it, or quickly edit it.
While you can open your favorite non-RubyMine editor for this, there is also a plugin: Scratch.
It allows RubyMine to open temporary files (actually they are saved, but somewhere inside the plugin's directory) so you don't need to switch to a text editor like gEdit that works differently and may not even offer what you are used to.
Note that RubyMine also offers so…
screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
Using the JS fullscreen API is painful because all browers use different methods and events and you need to use lots of boilerplate code to make your application work in all browsers.
The "screenfull" library wraps that for you, including events.
Examples
The linked GitHub repo contains some information. You basically use the library like this:
// Make an element go fullscreen
screenfull.request(element)
// Leave fullscreen
screenfull.exit()
…
Rails asset pipeline: Why things break in production and what precompilation does to your assets
When you work with a Rails 3.1+ application, you will be working with the asset pipeline. The asset pipeline is awesome until you deploy. Then it will be less so if you haven't done everything as the pipeline expected it from you.
The problem
When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app:
app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets
With the asset p…
How to create giant memory leaks in AngularJS
This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.
Although this guide has been written for Angular 1 originally, most of the advice is relevant for all client-side JavaScript code.
How to observe memory consumption
To inspect the amount of memory consumed by your Javascripts in Chrome:
- Open an incognito window
- Open the page you want to inspect
- Press
Shift + ESCto see a list of Chrome processes…
Redirecting responses for PATCH or DELETE will not redirect with GET
Redirect responses to PATCH and DELETE requests will be followed with PATCH or DELETE. Redirect responses to GET and POST will be followed with a GET.
The Rails form_for helper will use a workaround to send POST requests with a _method param to avoid this issue for PATCH/DELETE.
If you make requests yourself, watch out for the following behavior.
When you make an AJAX request PATCH /foo and the /foo action redirects to /bar, browsers will request PATCH /bar. You probably expected the second request to be…
Fix PNG colors in IE, old Safaris and new Firefoxes
Some browsers render PNG images with color profiles and other shenanigans, some don't. Remove some PNG chunks to render colors uniformly.
Geordi brings a command png-optimize which conveniently optimizes your PNGs for the web. See Github for a description
- Single file and batch optimization is supported
-
png-optimizewill overwrite the original files
Without Geordi
- Linux:
-
sudo apt-get install pngcrush-
Single file:
pngcrush -rem...
-
Webpacker: Configuring browser compatibility
Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different. E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our our output will be more verbose than when we only need support modern browsers.
Rails 5.1+ projects often use Webpacker to preconfigure the Webpack pipeline for us. The default configuration works something like this:
- Webpack chec…
Event order when clicking on touch devices
Touch devices have their own set of events like touchstart or touchmove. Because mobile browsers should also work with with web applications that were build for mouse devices, touch devices also fire classic mouse events like mousedown or click.
When a user follows a link on a touch device, the following events will be fired in sequence:
touchstarttouchendmousemovemousedownmouseupclick
Canceling the event sequence ——————-…
Difference between respond_to/format and params[:format]
To return non-HTML responses (like XLS spreadsheets), we usually use the
respond_to do |format|
format.xls do
# send spreadsheet
end
end
This is often, but not always the same as checking for params[:format] == :xls, so don't rely on this when e.g. one format checks for authorization and the other doesn't.
params[:format] is only set when a user explicitly puts a .xls at the end of the URL.
The format.xls block also responds when the user's browser requests the application/excel MIME type.
If Intern…
Two CSS layouting techniques compared: Flexbox vs. Grid
CSS Flexbox has become extremely popular amongst front-end developers the last couple of years. This isn’t surprising, as it has made it a lot easier for us to create dynamic layouts and align content within containers.
However, there’s a new kid in town called CSS Grid, and it’s got a lot of the same capabilities as Flexbox. In come cases it’s better than Flexbox, while in other cases it’s not.
If you are to take one lesson from this article, let it be this one:
Flexbox is made for one-dimensional layouts and Grid is made for tw…
Generating test images on the fly via JavaScript
When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself. You can do this via JavaScript.
Here is an ES6 function that generates a simple SVG image and returns it as a data: URI. All browsers support SVG, and you can easily adjust it yourself.
function svgUri(text) {
let svg = `
<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="320" height="240" style...
How to skip Sprockets asset compile during Capistrano deployment
For applications coming with lots of stylesheets and scripts, asset compilation might take quite long. This can be annoying when deploying a release that does not actually change assets.
When your app uses Sprockets, you can simply skip asset compilation and re-use the previous release's assets. [1]
That is especially easy via Capistrano. Capistrano will automatically symlink your release's public/assets to a shared directory, so all you need to do is skip the deploy:assets:precompile task.
Put the following code where you'd put other …
How DECIMAL columns deal with numbers exceeding their precision or scale
When storing floating-point numbers such as prices or totals in an SQL database, always use a DECIMAL column. Never use FLOAT or kittens will die.
DECIMAL columns are parametrized with a precision and a scale. These parameters describe which numbers can be stored in that column. E.g. a decimal with a precision of 5 and a scale of 2 can store numbers from -999.99 to 999.99, but not 1000 or 1.234.
This card explains what various databases do when you try to store a number in a DECIMAL field, and that number exceeds that colum…
Sass partial names must always begin with an underscore
Be careful to name any file @imported by SASS with a leading underscore.
SASS files not beginning with an underscore will be rendered on their own, which will fail if they are using variables or mixins defined elsewhere. (For me it broke only in production, which may be due to some settings in SASS-GEM/lib/sass/plugin/rails.rb.)
From the SASS docs:
The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.