Rusted Bike

Utilize a repository of reusable ES6 template literals

The Template Literals introduced with ES6 are very useful to deal with multiline strings, because they support embedded expressions. Gone are the days of endless string concatination or replacing variables in a string by using RegEx.

Instead of…

1
2
3
4
5
6
7
8
var url = ...
var file = ...

var template =
'<div class="photo">' +
'<a href="' + url + "' +
'style="background-image: url(' + file + ')"</a>' +
'</div>'

… you can write:

1
2
3
4
5
6
7
8
9
var url = ...
var file = ...

var template = `
<div class="photo">
<a href="${url}/"
style="background-image: url(${file});"></a>
</div>
`,

It’s much cleaner and easier to handle, as you can copy your needed HTML right into your code and surround it by backtick (!) characters. Insert your variable placeholders (expressions), indicated by a dollar sign and curly braces, and you are done.

But there is one “restriction”, you have to be aware of: the interpolation (substitution of the expressions) is done at declaration time and not at runtime. You can’t define your literals seperatly, take one and make your substitution as you need it, like you would do with Handlebars or other templating engines. Therefore the name template literals is a bit misleading. But … there is a way to achieve this anyway…

Read More

Illuminated Kurhaus I

Spice Up Windows Terminal

How to make Powershell a little prettier

Working with the PowerShell in 2020 means fun, because of the new Windows Terminal (get it from Windows Store). It has more power as the old Powershell Console and it is visually adaptable to your personal taste, by installing the wonderful theming engine oh-my-posh from Jan De Dobbeleer.

Original Terminal

Terminal with oh-my-posh

To get Oh-My-Posh properly run, there are several steps to do I want to show here in a nutshell…

Read More

Untitled

Discoveries, Part 5

Discoveries #5

In this episode of the Discoveries (almost) everything is about images and the web. There are so many pitfalls to do it wrong, but many more possibilities to do it right, especially with these resources I found in the last few weeks.

  • ASP.NET Core Image Resizing Middleware
  • Best way to lazy load images for maximum performance
  • image orientation on the web
  • cosha - Colorful shadows for your images
  • parax-bg - Parallax Backgrounds
  • parax - Parallax Elements
  • Luminous Lightbox
  • Tiny-Swiper - Image Carousel

Read More

Dead Sea Colors

Lightroom Presets, Part 1

Israeli Presets for Lightroom

I’m a travel and event photo enthusiast, which means I’m shooting a lot of photographs on vacation or at special events only a few times a year. After I’m back home and start the image processing, I develop a particular look for my images of the past vacation or event. This has a lot to do with my mood and is very intuitive. Not all images are the same in terms of composition and light and so I create usually 3 or 4 different presets each time during image processing.

Back in 2019, I was traveling around Israel, a fascinating country where almost every wall has a story to tell and I was listening through my viewfinder. Here I want to share the presets with you…

Read More

Color Seat

Folder based publishing in Lightroom

In all times photography was a process: First you shoot you images, then you edit 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 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

On The Rocks

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

Illuminated Chair

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