image-to-DataURI converter: Duri.me
Small web application where you can upload an image (PNG, JPEG, GIF) and generate a base64-encoded version of it.
You can copy the result as
- HTML
<img>
tag with data URI, - CSS rule with
background-image
and data URI, - plain Base64-encoded data URI string.
Material icons - Google Design
Surprisingly exhaustive new icon set by Google.
Available as PNG, SVG and as a icon font.
Comment from Henning
I tried using the icon set in a project. I found the quality, selection and handling far worse than what we are used to in FontAwesome.
Reverse-proxying web applications with Apache 2.4+
Note: Making a reverse proxy with nginx is much more straightforward.
A reverse proxy is a "man in the middle" server that tunnels requests to another server. You can use for things like:
- Expose a local service that you cannot directly reach over the internet
- "Change" the domain or path of a web application by rewriting them on the fly
- Instantly change servers that respond to a name or ...
Don't forget: Automatically remove join records on has_many :through associations
Bad
# Given the following models
class Image < ActiveRecord::Base
has_many :album_images
has_many :albums, through: :album_images
end
class Album < ActiveRecord::Base
has_many :album_images
has_many :images, through: :album_images
end
# Join model
class AlbumImage < ActiveRecord::Base
belongs_to :album
belongs_to :image
end
Destroying a record in this setup will only remove the record itself, and leave orphaned join records behind.
image = Image.last
image.destroy # removes only the `image` record,
...
Browse Amazon S3 buckets with Ubuntu Linux
There are some frontends available, but they all suck, are no longer maintained or are hard to install.
As a surprisingly comfortable alternative I have found a command line tool s3cmd
:
sudo apt-get install s3cmd
When you run s3cmd
the first time it will ask you for your access key ID and secret access key. This information is cached somewhere so you only need to write them once. To reconfigure later, call s3cmd --configure
.
Once you're done setting up, s3cmd
gives you shell-like commands like s3cmd ls
or `s3cmd del som...
Add an alternative image source for broken images
Awesome hack by Tim VanFosson:
<img src="some.jpg" onerror="this.src='alternative.jpg'" />
ActiveRecord: Order a scope by descending value without writing SQL
Instead of this:
Image.order('images.created_at DESC')
You can write this:
Image.order(created_at: :desc)
Not only do you not have to write SQL, you also get qualified column names (created_at
becomes images.created_at
) for free.
Multiple order criteria
To add secondary order criteria, use a hash with multiple keys and :asc
/ :desc
values:
Image.order(title: :asc, created_at: :desc)
Versatile Cucumber step regarding hovering above elements
Here's a pretty useful steps that hasn't made it into Spreewald yet.
It is best used with the auto-mapper for BEM classes in features/support/selectors.rb
When I hover above [selector] element
When /^I hover above (.*) element$/ do |selector|
page.find(selector_for(selector)).hover
end
Example:
When I hover above the album's image element
→ triggers a hover event on .album--image
Multiline comments in indented Sass syntax
Write a //
and indent every subsequent line by two spaces.
This is great for documenting BEM blocks!
//
An action button
================
Basic usage
-----------
<a href="/path" class="action">New booking</a>
<button class="action">Save</a>
<input type="submit" class="action">Save</a>
Colors
-------
<a href="/path" class="action is-red">Primary</a>
<a href="/path" class="action is-grey">Secondary</a>
Small inline buttons
--------------------
<p>
Recor...
Fixing jerky CSS3 animations
When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.
box-shadow: 0 0 0 #000
transform: translate3d(0,0,0) # remember to add vendor prefixes
Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %
)...
Carrierwave: Efficiently converting images
When uploading images, adding more than one process to a version can cause MiniMagick to run multiple commands. In order to have all processing done in one mogrify
system call, you'll need to define only one process that combines all options
you'd like to pass in.
An auto-mapper for BEM classes in Cucumber selectors
When you are using the #selector_for
helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding BEM class.
For a variation on this idea, see An auto-mapper for ARIA labels and BEM classes in Cucumber selectors.
Examples
"the main menu" -> '.main-menu'
"the item box's header" -> '.item-box--header'
Here are some examples of steps (using Spreewald, too):
T...
Understanding z-index: it's about stacking contexts
The CSS property z-index
is not as global as you might think. Actually, it is scoped to a so-called "stacking context". z-indexes only have meaning within their stacking context, while stacking contexts are treated as a single unit in their parent stacking context. This means indices like 99999
should never actually be needed.
Creating a new stacking context
In order to create a stacking context with the least possible side effects, use the isolation
property on an...
Ubtuntu: "FATAL: Could not load /lib/modules/...-generic/modules.dep: No such file or directory"
If you get this error (probably because you want to load some modules):
# modprobe xt_comment
FATAL: Could not load /lib/modules/3.2.0-40-generic/modules.dep: No such file or directory
The reason could be that apt-get autoremove
already removed /lib/modules/.../modules.dep
even if you still using this kernel version:
# uname -r
3.2.0-40-generic
# ls -l /lib/modules/
total 24
drwxr-xr-x 4 root root 4096 Oct 22 17:05 3.2.0-68-generic
drwxr-xr-x 4 root root 4096 Jan 7 16:38 3.2.0-69-generic
drwxr-...
Refile: Ruby file uploads, take 3
Jonas Nicklas, the author of Carrierwave and Capybara, has released Refile, a gem for handling file uploads in Rails. It handles direct uploads (also direct uploads to Amazon S3) better than Carrierwave.
The story and reasoning behind some of the decisions in Refile, and how it's different from Carrierwave, by the author himself, is a good read before deciding which way you'll go.
Big Caveat: Refile only stores the original image and r...
ImageMagick: Cropping images
ImageMagick takes a string with several options when cropping an image. See the command line options for how to provide the expected image geometry for details.
Note that ImageMagick tends to preserve the original aspect ratio of the source image automatically.
Examples:
-
crop 200x200
means Maximum values of height and width given, aspect ratio preserved. -
crop 200x200!
means Width and height emphatically given, original aspect ratio ignored.
Taking screenshots in Capybara
Capybara-screenshot can automatically save screenshots and the HTML for failed Capybara tests in Cucumber, RSpec or Minitest.
Requires Capybara-Webkit, Selenium or poltergeist for making screenshots. Screenshots are saved into $APPLICATION_ROOT/tmp/capybara
.
Manually saving a page
Additionally you can trigger the same behavior manually from the test using Capybara::Session#save_and_open_page and [...
Magnific Popup: Responsive jQuery Lightbox Plugin
Responsive Lightbox JavaScript that just works.
You can use it for single images or a gallery. Animations are optional.
CarrierWave: How to remove GIF animation
When accepting GIF images, you will also accept animated GIFs. Resizing them can be a time-consuming task and will block a Rails worker until the image is processed.
Save yourself that trouble, and simply tell ImageMagick to drop any frames but the first one.
Add the following to your uploader class:
process :remove_animation
private
def remove_animation
if content_type == 'image/gif'
manipulate! { |image| image.collapse! }
end
end
You may also define that process
for specific versions only (e.g. only for thum...
mailru/FileAPI
A set of javascript tools for working with files.
It offers different kinds of things:
- A cross-browser JS API to work with
File
objects. - Image helper methods, like rotating images, or generating thumbnails in the browser (because you don't want your browser to scale tons of 20MB-JPEGs just for an upload preview)
- Webcam access
- Uploads
When HTML5 support is unavailable, it uses Flash polyfills.
Check out the documentation and demos at their GitHub page.
To install via bower, simply add the `...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeline requires you to have all your asset libraries in the same folder, which quickly becomes confusing as your set of assets grows. To overcome this, we have two different solutions.
Custom solution
We are using a custom workaround to keep library files apart in their own directories. To avoid b...
Asset Pipeline Basics
The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its inner workings.
No magic
Manifests are the handle on your assets:
app/assets/stylesheets/application.css # use via: stylesheet_link_tag 'application'
The asset pipeline only considers files you explicitly require within your manifest files. The most common directives used in manifests are require some/file
and require_tree some/directory
. Paths may be **relative to the current director...
LibreOffice Writer prints text frames as black areas
To fix this:
- Right-click on the frame
- Select Frame...
- Open Background
- Set As to "Color"
- Set the background color to "No fill"
Resolving Angular not updating an image src when ng-src is empty
The Angular ngSrc
directive serves to properly set an image src
via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src
attribute is empty, Angular will not empty the src
attribute. To overcome this, use the trick below.
<img ng-src="{{ element.image || '//:0' }}" />
Background
The ngSrc
directive explicitly returns when the attribute value is falsy. As a workaround, set a "blank" image src when the image is empty. As [somebody ...