Photo-Editing

Folder based publishing in Lightroom

In all times photography was a process: First you shoot you images, then you process them and in the third step you publish them elsewhere.

Today Adobe Lightroom is a de-facto standard in photo processing, especially when you shoot RAW images. And I mean Lightroom Classic and not the new web/smartphone based software, which doesn’t come even close to the desktop application yet.

I use Lightroom for all purposes after I shot my images: editing, cataloguing, managing and … publishing. On püpublishing Lightroom offers you two approaches: Export and Publish. While Export is mainly for creating JPG copies of edited RAW images, Publish goes one step further and gives you the ability to do “something” with your exported JPG’s, for example upload them on Flickr, Instagram, 500px or to your own web server via FTP. Major difference to Export is, that Publish keeps your images in sync. Everytime you change the source images, the defined publish services recognizes and offer you to re-publish your image.

Lightroom Publish

In the past years I tried a lot of Lightroom plugins for publishing on several platforms, but it doesn’t work out for long, because all these platforms change their API almost every year (or are stamped) and the sparely maintained 3rd party plugins break.

My workflow for quite some time is to publish my photos on the hard drive, in a folder, which is synced via Dropbox with the cloud. From there I distribute them further.

Read More

Discoveries

Discoveries, Part 4

Discoveries #4

It is so amazing how many cool stuff developers around the world are producing these days. Or they do what they always do, but I have more time to read about their smart ideas and solutions. This month I have 8 pearls for you:

  • waitForElementTransition()
  • Using Flexbox and text ellipsis together
  • Using Trello as a Super Simple CMS
  • Memorize Scroll Position Across Page Loads
  • A free guide to HTML5 <head> elements
  • BVSelect - Vanilla JS
  • A clock that represents the time as hex color values
  • Animate.css - Just-add-water CSS animations

Read More

JavaScript

Implement source switch for SPA

Asynchronous loading of JS and CSS depending on the environment

A while ago I wrote a Single Page Application (SPA) with jQuery and and decided to use some useful plugins to avoid reinventing the wheel. To keep the delivered sources small, I used the bundler Gulp, to pack all JS plugins in a single file and another one for my custom JS code. I used the same procedure with the CSS files.

The SPA contained only a single HTML file in which all bundeled sources and needed HTML template blocks were included, in order to load most of the stuff while starting the app, when the users sees a GMail-like loading screen.

But the whole thing had one disadvantage: Debugging for example in Chrome Dev Tool is not a joy, if the code is packed with Gulp Concat and Gulp Uglify. It would be much more convenient, if the source loading can be done depending on the environment.

Read More

Tools

A New Blog, Part 12

Show related posts in Hexo

It is always nice to point the readers of your blog’s articles to related posts, they might be interested in. They stay a little longer to understand what you have to offer and increases the likelihood that they become loyal readers, followers or subscribers. Related posts has become a standard on delivering news and posts.

In the default Hexo theme Landscape, on which this blog is based, there is no such function built in, but as the Hexo community is very busy, there are some plugins you can use.

Read More

Discoveries

Discoveries, Part 3

Discoveries #3 - Tutorials

Some articles I stumble upon in my daily routine of reading news and blogs are diving very deep in a certain topic, especially if they are describing the basics of techniques I use every day.

All of the following reading tips are of the type “ahh, that’s why this works like that” or “uuh, I just scatch on the surface on that”. Take your time and read the articles in detail. We all never stop learning and it’s a pleasure to do so…

CSS

  • CSS Viewport Units
  • Grid for layout, Flexbox for components
  • How CSS Perspective Works
  • Linearly Scale font-size with CSS clamp() Based on the Viewport
  • Learn CSS Centering

JavaScript

  • The Flavors of Object-Oriented Programming (in JavaScript)
  • Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

Read More

JavaScript

Device Class Detection in JavaScript

The unusual way by using CSS Media Queries

In some occasions it is necessary to know which device a user is using while writing JavaScript Web Apps. Should be nothing regarding layout, because for this we have CSS Media Queries.

Somewhere around 2011 W3C introduced matchMedia(), which returns a MediaQueryList object that can be used to detemnine if the document matches the media query string. The using is pretty straightforward and feels a bit like RegEx matching in JS:

1
2
3
4
const mediaQuery = window.matchMedia('(min-width: 1025px)')
if (mediaQuery.matches) {
  // do something...  
}

If you are interested in this API, you will find good introductions to the topic here, here and here (German).

One point of criticism on this pure JS approach can be, that you have to maintain the breakpoints in addition to CSS … but why not use these existing breakpoints in JS?

Read More

JavaScript

A New Blog, Part 10

Pimping the Permalink

How to copy and share the permalink programatically

Until now I did not show the permalink under my posts in this blog, but in the past I had sometimes the need to pass one of the links and it was not very user-friendly, on desktop as well as on mobile. Not the One-Click experience I prefer.

My goal was to show the permalink and, even more important, provide a simple way to copy and to share. JavaScript to the rescue…

Read More