Cookies have an optional
secure flag. It tells the browser to not send the cookie for a non-https request.
It used to be important to activate the
secure flag even on sites that automatically redirect users from
https://. The reason was that most users will only enter a scheme-less domain like
makandra.de into their location bar, which will default to `http://m…
Safari on iOS accepts an
apple-touch-icon favicon that is used for stuff like desktop bookmarks. Always define a solid background color for them.
If you use PNGs with a transparent background, Safari will use just set a black background on your pretty icon. This is almost never what you want.
You can fix that by applying a white background via ImageMagick like this:
Rails has a default mechanism to store the session in the
CookieStore. This is a cookie which holds the entire user session hash in the browser. This cookie is serialized, encoded with base64, and signed.
Devise uses this
CookieStore. To track a users session, a salt is stored in the session cookie when a user logs in.
When a user logs out this CookieStore is overwrit…
The 90s are calling: they want their tables back. Unfortunately, you'll need them all for laying out your HTML emails. (It is really that bad.)
Email client HTML rendering is way more scattered than browser HTML. While you might have a pretty good understanding of what features and patterns you can use to support all major browsers, I doubt anyone masters this craft for HTML email clients.
The only way to ensure your email looks good (acceptable, at least) in all mail clients, is to check it. Litmus is your go-to solu…
Please read this article!
This is an extract of the example in the article which demonstrates the execution order of tasks and microtasks.
These steps are now part of Spreewald.
Here are some useful examples how to use the attached Cucumber Timecop steps:
When the date is 2011-05-06 When the time is 2011-05-06 17:30
There is also one really awesome step that lets you travel to the past or to the future:
When /^it is (\d+|a|some) (seconds?|minutes?|hours?|days?|months?|years?) (later|earlier)$/
As you can see, you describe the *time unit amo…
Since late 2015, all major browsers (still excluding Firefox) support pointing device media queries. These can be used to distinguish e.g. coarse from fine pointers (e.g. finger vs mouse), or a device with hover support from one without (e.g. desktop with mouse vs tablet).
When hover styles modify the DOM, most mobile devices activate the hover styles on first tap. A second tap is required to trigger a
click. While this can be handy, at times it makes the UX worse.
Another issue with hover styles is that they tend to st…
Here is how to model basic logic in media queries.
# Target viewport widths between 500 and 800px @media (min-width: 500px) and (max-width: 800px)
# Target viewport widths below 500 or above 800px @media (max-width: 500px), (min-width: 800px)
Needs a little overhead with
not all and.
# Target devices that can't hover @media not all and (hover)
See CSS: Using interaction media detection on why you'd need this.
The attached patch lets you find a record by a string or number in any column:
User.find_by_anything('carla') User.find_by_anything('firstname.lastname@example.org') User.find_by_anything(10023)
There's also a bang variant that raises
ActiveRecord::NotFound if no record matches the given value:
Boolean and binary columns are excluded from the search because that would be crazy.
I recommend copying the attachment to
features/support/find_by_anything.rb, since it is most useful in Cucumber step …
Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.
Browsers' printing methods usually don't print background colors. In most cases this is the desired behavior, because you don't want to spent tons of ink printing the background of a web page. But in some cases you want to print the background color of elements, e.g. bars of a chart. For those elements you need to set the following css styles:
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
body elements are only as high as the actual page content. If you only have two lines of text in your page, your
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
body does cover the enti…
Authentication is hard: there are many edge cases, and most users (including yourself) usually only go the "happy path" once and never see the edge cases. If you have rolled your own authentication, or been using older authentication solutions, or resorted to HTTP Basic Authentication, this card will tell you what to do to make your application safe.
That is: cookies, e.g. by offering a login.
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).
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…
One popular strategy to improve the website performance is to not load images until they enter the viewport – aka "lazy-loading images".
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…
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.
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()
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.
With the asset p…