How to store your photos?

Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.

I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.

	Dropbox	Google Photos	iCloud Photos	Amazon Cloud Drive Prime photos	Jottacloud
Good search functionality
Timeline-feature
Albums
Collaborate on albums
Collect family photos with different accounts
Support RAW-format
Displays RAW-files as images
Works with Lightroom
Windows app
Mac app
iOS
Android
Price up to 1 TB/month	€8.25	€9.54	€9.99	€0.95	€9.44
Price over 1 TB/month	€50.00* ∞	€95.38 10TB	€19.99** 2TB	€0.95 ∞	€9.44 ∞

Some findings

• Google Photos is ridiculously expensive (100 times more than Amazon Cloud) if you have more than 1TB of files
• No-one can compete with Amazon Cloud prices
• iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
• Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
• The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway

My current setup

I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.

My dream setup

If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.

What should I do if I just have images on my mobile phone?

Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant).
Do you have an Android-device? Sync it with Google Photos.
Are you switching between iPhone, Android or similar? Use Google Photos.

A last little tip

There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.

15 takeaways from cssconfeu 2015 that you can use today

• You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
• Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.

.div-over-img {
    background-color: #2f3138;
    background-blend-mode: lighten;
}

• For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
• By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
• You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
• You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
• You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages. Eks: <HTML lang="no">

HTML[lang="no"] q {
Quotes: '«' '»';
}

• @media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
• Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
• Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
• Flex overwrites width and float, so they can be used as fallbacks.
• To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
• You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
• As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:

@supports(flex-wrap:wrap){
// instead of modernizr
}

• order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.

Tired of minified files when you search through your project?

Are you also tired of having your minified versions of CSS and JavaScript showing up when you are searching through your project?

It turns out there is an easy way to fix this if your are using Atom. Go to Atom => Config and add this to your configuration-file:

ignoredNames: [
  ".git"
  ".svn"
  ".DS_Store"
  ".jpg"
  ".png"
  "app"
  "vendor"
  "dist"
  ".css"
  "min.js"
]

Are you using SublimeText? Go to Preferences => Settings – User and add this to your configuration-file:

"file_exclude_patterns": [
    "*-ck.js",
    "*min.js",
    "*.css"
  ]

I have added *-ck.js because that’s the default output from CodeKit for minified files. I’ve also added all CSS files since I just want to search through my SCSS.

Todos in SCSS

You can write todos to yourself in your scss by adding this line where you need to remind yourself of something:

    @warn "Add breakpoint here";

This way you get a nice warning each time you compile, listing out all your warnings. You could also use @debug instead of @warn. The difference is basically that you can turn warnings off with the --quiet command-line option or the :quiet Sass option, and that the warnings look a bit different:

When to use svg attributes

Are you inlining your svg in HTML5? Just use<svg></svg> tags without attributes.

Are you linking the SVG as an image, background-image or importing it another way that causes the User Agent to use an XML parser? Then you need the xmlns attributes like so:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`