Using the alt attribute and the figcaption element in HTML
The linked blog post contains some background information about the alt attribute and the figure / figcaption element. It is interesting, that a figure is not only for images but also for
captions, code snippets, quotations and more
Show archive.org snapshot
.
Related cards:
Using Firebug Lite to inspect HTML in Internet Explorer and other browsers
You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.
Though all major browsers offer inspection tools you may like the Firebug style. Also, for me this is a lot better than the IE8 develop...
Security issues with hash conditions in Rails 2 and Rails 3
Find conditions for scopes can be given either as an array (:conditions => ['state = ?', 'draft']) or a hash (:conditions => { 'state' => 'draft' }). The later is nicer to read, but has horrible security implications in some versions of Ru...
Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools
tl;dr
In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:
- Display size and lines along with labels
- Changing their attributes
- Change how overlay is colored and fastl...
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....
Devise: How to allow only HTTP Basic Auth and disable the HTML sign-in form
By default, Devise redirects to a sign-in form when accessing a route that requires authentication. If for some reason you do not want this, but use Basic Authentication (and the corresponding browser username/password dialog) instead, this is a s...
Rails: Using require and permit for attributes
Raising errors for required and permitted attributes makes it easier to find errors in your application during development and in tests. Consider this approach if you want to strengthen the [params handling](https://makandracards.com/makandra/1904...
How to reverse the order of HTML elements with CSS
Imagine you have a list you want to render inline on large screens, but stacked on small screens.
<ul>
<li>high</li>
<li>medium</li>
<li>low</li>
</ul>
ul { white-space: nowrap } /* optional: keep items in one line no matter th...
Insert an ndash and other special characters using the Compose key on Linux
Although you can access many symbols using the AltGr key you may be missing some, like the en-dash (–) or em-dash (—). You can use a compose key for them instead...
Defining new elements for your HTML document
Browsers come with a set of built-in elements like <p> or <input>. When we need a new component not covered by that, we often build it from <div> and <span> tags. An alternative is to introduce a new element, like <my-element>.
When a b...
Upgrading Cucumber and Capybara to the latest versions available for Rails 2
Specify these gem versions in your Gemfile:
gem 'cucumber', '~> 1.3.0'
gem 'cucumber-rails', '= 0.3.2' # max version for Rails 2
gem 'capybara', '< 2' # capybara 2+ requires Rails 3
gem 'mime-types', '< 2' # dependeny of capybara
...