Feed | Sascha Diercks

Use Shortcuts.app to run System commands through Spotlight

Sascha Diercks — Sat, 15 Oct 2022 02:00:00 +0000

run system commands with spotlight

Alfred is such a great application, and I am a Mega-Supporter, but I also like to use "native" tools as much as possible - like I do when I build things for the web... and I also like to tinker with Software. So one day I go a little bored and clicked my way through the shortcuts.app and recognized, that you are able to run AppleScript with it. Since Spotlight can also run commands from the Shortcuts.app I was just wondering if I could use it to run system commands.

Why would I do that you might ask. You know Alfred is great and super-fast but I often use it for quite a limited amount of things:

run system commands
- empty the trash, hibernate the mac and much more
open applications
find files

These are my main use cases, but when I work with Jira I often add Emojis (like the warning sign). For that use-case you need a plugin as you do for other tasks, like converting units. And that is the nice thing with Alfred, you can extend it to your liking.

Spotlight on the other side supports a lot of features out ot the box (like converting units), but it takes a little more effort to extend it. You need to build functionality with the Shortcuts.app - and since the Shortcuts.app actually supports AppleScript, you are able to do things like restarting your Mac, like you can do with Alfred. I know, I could run AppleScripts directly with Spotlight when they are converted into an app, but if you run a script, that restarts you Mac, you simply get into a loop, if reopen applications is not disabled, which is pretty annoying.

System commands as shortcuts

The System commands

So I've built some shortcuts, that simply run AppleScript and do things I could only do with Alfred before. Here is a list of them:

Quit all Apps

I often run it at the end of the working day, before shutting down the device.

- get list of open apps
tell application "System Events"
	set allApps to displayed name of (every process whose background only is false) as list
end tell

-- leave some apps open
set exclusions to {"AppleScript Editor", "Automator", "Finder", "LaunchBar"}

-- quit each app
repeat with thisApp in allApps
	set thisApp to thisApp as text
	if thisApp is not in exclusions then
		tell application thisApp to quit
	end if
end repeat

Shutdown

Because the MacBook doesn't have an eject key anymore.

tell application "Finder"
	shut down
end tell

Restart

Quickly restart your device without using the menu and without being stuck in an endless reboot loop.

tell application "Finder"
	restart
end tell

Sleep

Send the Mac to hibernation mode.

tell application "Finder"
	sleep
end tell

Eject all drives

If you want to take away your device when it is still mounted to some drives.

tell application "Finder" to eject (every disk whose ejectable is true)

Mount Drives

The downside is you need to manually edit the list of drives (myDrives) in the script, but then it works perfectly fine.

set myDrives to {"Time Machine", "Games"}
repeat with drive in myDrives
	set driveName to drive
	set driveInfo to do shell script "diskutil list | grep \"" & driveName & "\""
	set driveID to last word of driveInfo
	do shell script "diskutil mount " & driveID & ""
end repeat

Empty trash

Because who wants to right-click on the bin to empty it.

tell application "Finder"
	set warns before emptying of trash to false
	empty trash
end tell

What you need to do

If you don't want to install Alfred or a similar alternative like Quicksilver or Launchbar, you can add the scripts listed above to shortcuts like this:

open the shortcuts.app
click the +-sign to add a new shortcut
change color and icon
add a name in the opening window
search for Applescriptin the searchbox on the right
double-click run AppleScript
paste the script from this page "below the hammer"
click the "hammer" to format/build the script
close the window

This way you can extend spotlight to run system commands - which is quite nice.

add applescript to shortcuts

The downside

The downside currently is, that the shortcuts are pretty much hidden down in the list of spotlight, but that is about to getting changed with macOS Ventura, where you can reorder the results (again).

Prefer WebPageTest for performance-testing

Sascha Diercks — Wed, 13 Jul 2022 02:00:00 +0000

As you might know this website runs on 11ty as it is a slick tool to build and maintain a fast website. Eleventy is a SSG - a static site generator, that automatically updates links and so on.

Eleventy is build by Zach Leatherman and he also created a leaderboard listing the fastest websites build with eleventy. As I'm always trying to get the best perfromance out of a website, I was instantly hooked.

Sadly, a while ago, my site crashed down in rankings, although I got the four hundred ratings on lighthouse. What was going on? Based on the rankings on the leaderboard, my SEO-score went down to 92.

So I ran the usual tests:

But I got four hundreds everywhere, so that didn't help much 🤔 So I decided to run my site through lighthouse on WebPageTest and I finally got the result - I broke my robots.txt.

So if I have one recommendation for you - prefer testing your website on WebPageTest (or use it as an addition to other tools) it might uncover things you'll not see through other services, and they have other great features as well.

A great talk: be the browsers mentor not its micromanager

Sascha Diercks — Tue, 12 Jul 2022 02:00:00 +0000

Recently I stumbled upon a great talk by Andy Bell.

Since I'm addicted to writing and optimizing CSS this was a must watch. By the end of the talk I was close to applauding, but that would've been pointless, since no one was around.

Anyways, Andy shows how to create a responsive layout by using modern css and he manages it to do it without breakpoints, which is awesome. He even uses Tailwind - which is a framework I totally hate - but he is using it in a way you probably wouldn't be able to guess.

So here is a short overview of the things he covers in the talk:

progressive enhancement
fluid typography
fluid layout
nice approach of implementing grids

So give it a watch: https://heypresents.com/talks/be-the-browser-s-mentor-not-its-micromanager

Allow Google to crawl CSS and JS

Sascha Diercks — Mon, 11 Jul 2022 02:00:00 +0000

A couple of years ago a SEO spoke to me and mentioned, that you should prevent the googlebot from crawling css and js. You know for "search engine optimisation"-reasons. Sadly I followed that recommendation.

So recently I noticed, that this is a mistake, because if you're doing this:

User-agent: *
Disallow: /assets/css/
Disallow: /assets/fonts/
Disallow: /assets/js/

Now, the googlebot will no longer crawl your files in these directories. If you're working with the search-console, you'll likely get message about links being to close to each other and to small to use on mobile devices.

So make sure, to redact these entries from you robots.txt so the googlebot is able to crawl those directories. Then that problem is gone and Google will hopefully notice, that your site is optimised for mobile devices.

Notes about web development and other things

Sascha Diercks — Mon, 04 Jul 2022 02:00:00 +0000

Prefer WebPageTest for performance-testing

You might discover problems the other tools won't tell you

13 Jul 2022

A great talk: be the browsers mentor not its micromanager

Andy Bell gave a great talk about how to write responsive layouts with modern CSS

12 Jul 2022

Allow Google to crawl CSS and JS

A small mistake to avoid when dealing with the googlebot

11 Jul 2022

Articles about web development

Sascha Diercks — Sun, 03 Jul 2022 02:00:00 +0000

Use Shortcuts.app to run System commands through Spotlight

Did you know, that you can use Shortcuts, Spotlight and some AppleScript to build an Alfred replacement (sort of).

15 Oct 2022

personalNews - your news feed. Chronologically sorted

Learn more about the development and why I started the project.

01 Jul 2022

BrowserStartpage – the SpeedDial for all your Browsers

Host your bookmarks yourself and use them in all browsers. Find out a few details about the development here.

24 Aug 2017

Social media is communication, not a game

In the past few days, mistakes in the area of social media could be observed that well-known companies had committed.

17 Jan 2013

Dangers and problems when using sliders and carousels

Why they are bad and what you can do about it

15 Oct 2012

Debug mobile websites in Safari

We live in a time when customers no longer visit and use websites exclusively with their home PC. This circumstance leads to the fact that we (have to/should) develop websites in such a way that they can run on multiple devices.

11 Oct 2012

Test the speed of mobile websites with the Network Link Conditioner

You are developing mobile websites and want to know how the speed and page load feels to the user?

22 Aug 2012

Why QR codes are not suitable for the masses (and what you can do about it)

What can I do to increase conversion?

13 May 2012

Some side projects

Sascha Diercks — Sat, 02 Jul 2022 02:00:00 +0000

personalNews

Your news - as a timeline. In chronological order.

01 Jul 2022

browserStartpage

Host your own speed dial to be used in ALL browsers

30 Jun 2022

little Helpers

Small collection of tools for developers (WIP)

31 May 2022

personalNews

Sascha Diercks — Fri, 01 Jul 2022 02:00:00 +0000

PersonalNews is a small web application, you can host on your own server. You can run it as an application on your mobile device as well. This way you are always getting the latest of your favorite news. You'll always be up to date.

personalNews on the iPhone

Features

add your own selection of RSS or Atom-Feeds
group several feeds into channels
news are ordered chronologically
dark mode 🌗
possibility to blacklist words
runs in every browser
... or even in a webpanel in Vivaldi
perfect for mobile devices

Why I built this

I'm always swapping browsers and of course I'm also a user of Vivaldi. Vivaldi has a lot of smart features and one of them are webpanels. Think of webpanels as an overlay you can open anytime, that contains an additional url. I think Vivaldi is the first browser to implement something like this.

I've added twitter, Hacker news and pocket as webpanels and I'm pretty happy with it. But one thing was still missing - a newsfeed that'll only display news I'm interested in.

So I did what every other developer would possibly do as well - I've built my own solution. I then decided to design and develop personalNews. At that time, it was important to me that the feed should run in a Vivaldi web panel - so I started with a mobile first approach. The site is now responsive and can also be used in the browser or as a standalone application as well.

And I've updated the backend to act as an API as well, so you could build your own frontend on it.

If you want to know some more details about the development you can read more here

What were my goals at that time?

Build and easy way to skim the news I'm interested in.
The news should get sorted in a chronological order (think of twitter)
I often look at the newsfeed in the night - so automatic dark mode is a must
I wanted to learn new things.
I always aim for performance and this means avoid using bloated frameworks. Everything was built from scratch using HTML, CSS, vanilla JavaScript and PHP for the backend

Building this was a lot of fun, and I hope you can find this tools as useful as I and some other people do.

personalNews - your news feed. Chronologically sorted

Sascha Diercks — Fri, 01 Jul 2022 02:00:00 +0000

Are you like me? Do you regularly watch the news? Your feed reader is always full? You like timelines because they are the easiest way for you to read the news? Then my little side project personalNews is probably something for you.

personaNews is news in a timeline. Sorted chronologically and with a blacklist to avoid messages that are not important to you.

If you still like to read your news at night, you will be happy about the night mode? Originally, I developed personalNews for the web panel of the Vivaldi browser - currently, I use personalNews exclusively on my smartphone. But first things first...

PersonalNews on the iPhone

From iOS to Vivaldi

A few years ago, I spent a long time looking for a news app that would give me a quick overview of what was happening. I had a timeline in mind like the ones used on Twitter or Facebook. This way, the headlines can be scanned quickly. If there is something interesting, the details can be read. The app should be structured as simply as possible. After testing several apps, I have been using Newsflash for quite a long time.

It then quickly turned out to be a disadvantage that I was limited to the feeds provided by that app. Just at that time I tested the Vivaldi browser, which - to my knowledge - is currently the only browser that offers the web panels.

Web panels are, to put it simply, mobile websites that can be opened next to the current website. For services like Twitter, Pocket or Hackernews, this is the perfect place to be quickly at hand. However, I quickly realised that this was also the perfect place for news feeds. For this reason, I started the development of personalNews. A small feed reader based on PHP.

The concept

The basic concept was simple

Bundling of different feeds and chronological output in a timeline
Support of Atom and RSS
Bundling of different feeds into several channels
Configuration via JSON and processing via PHP
No use of frameworks to keep loading times as short as possible.
The few interactive elements should be implemented via vanilla Javascript.

PersonalNews in the web panel in the Vivaldi browser

The implementation

I began to read out a first feed and process it via PHP. I chose the RSS feed of the Tagesschau as the feed. The first step was to break down the feed into individual elements and variables and enrich them with information that the feed itself did not provide. As an example, I would like to mention a human-readable date format for the publication of the individual news item, the icon of the source or the domain of the same. In this case www.tagesschau.de. I wanted the processing of the data to be as modular as possible so that I could quickly extend the programme. I decided to divide the processing of the feed into individual functions that are called one after the other.

The basic procedure is as follows:

Load feed, decompose and store the data in a multi-dimensional array. A timestamp, which is used for chronological sorting, is created at this point from the publication date.
The array is output in an HTML construct so that a sorted timeline is created.
The texts of the messages are to be limited to a maximum character length. However, when the character length is reached, the current record should still be output in full.

Admittedly, at this point this process is still "over the top", but with the second feed at the latest, the chronological sorting becomes relevant. In addition, during the implementation, I already had various ideas for expanding the software. For example, a blacklist for unwanted messages.

The next step was to start reading in another feed to test the chronological sorting. I think it was the news feed from www.zeit.de.

Now it was time to implement another format - namely Atom. It turned out that Atom and RSS are quite similar. The easiest way to recognise the format seemed to me to check whether the individual messages are stored in a "channel" or an "entry". So I wrote a function that does exactly this check and hooked it in front of the decomposition of the feeds.

The result was now an HTML output of several feeds in a chronological sorting of the individual news items. Exactly the result I wanted. Great :)

The news feed on the iPhone

The design

Now began the part that was easy for me. Styling the timeline using CSS. In the first step, I created a mobile view so that personalNews could run in a Vivaldi web panel. I quickly came up with the idea of a dark mode.

It should be possible to switch between two different themes using Javascript. Both themes are configured in SCSS variables and converted to CSS using gulp. The dark mode switch itself sets a corresponding class on and writes this value into the localsStorage, as well as a PHP session, so that the last selected mode is available the next time the page is loaded.

It was time to release personalNews to the Vivaldi community. The feedback from the Vivaldi developers and the community was good, so I continued to develop the software. I also quickly put together a website showing the basic features of personalNews. It took about two hours to implement and you shouldn't look too closely at the code there... personalNews landing page

Grouping multiple feeds as a channel

Since I wanted to bundle feeds by topic, I started to extend the code accordingly. The configuration should also be done via JSON. Several feeds are written here into an array, which serves here as a container for a channel. The selected channel should also be saved so that the timeline is loaded that was last active after personalNews was left or closed. Using Ajax, PHP code is triggered that loads the feeds and saves the currently selected channel in a session.

Blacklisting: Keywords and URL

Since I am not a big football fan, the sports news is of little relevance to me. I therefore developed a PHP function that should perform the blacklisting of elements. The blacklist should also be configurable in the JSON file. The implementation is quite simple. All keywords in the JSON file are converted into an array and its contents are compared with the title and the text of the message. If there is a match, a blacklist flag is added to the feed array so that this message is skipped in the output. To reduce the loops over the messages, the title of the message and its text are combined into a string.

In order to exclude entire subdirectories or domains, the URL of the source is added to the title and the text. It turned out that the Tagesschau also uses URLs from www.sportschau.de in the feed. Other sources use the subdirectory /sport. So, to suppress all sports news, the keyword sport can be included - as a result, all sports news from sources with sport in the URL are suppressed in personalNews.

PersonalNews on iPad

Becoming responsive

personalNews already worked in web panels and on mobile devices, but on larger screens the news was difficult to read. With a simple CSS media query, I developed a two-column view of the news. However, the titles (the headlines) of the news are displayed on the left and the abbreviated texts on the right. This has the advantage that the headlines can be scanned quickly, and if interest is aroused, the texts can be read - namely on the right half of the screen.

Get personalNews

You can find the personalNews on Github. There you can download all files. A demo version of the current version can be found here https://demo.saschadiercks.de/personalnews/

All files and documentation can be found on Github at https://github.com/saschadiercks/personalNews".

I hope personalNews will be as useful to you as it is to me. You can save personalNews on your homescreen or bookmark it. For me, personalNews has become one of the most used sites - and no, I don't use any other news app anymore.

browserStartpage

Sascha Diercks — Thu, 30 Jun 2022 02:00:00 +0000

Are you switching browsers often? Are you tired, that every browser uses it's own speed dial, and you can't import that in your new browser? The solution: host your own speed dial! This is especially useful if you need/want to share a bunch of links with friends or colleagues.

browserStartpage is a speed dial, you can host on your own webserver. You can configure your content using a JSON-file. I made it themeable as well, so every part of it can be changed to your liking.

Thanks to the many possibilities to store and show links, you no longer have to synchronize your bookmarks in different browsers.

browserStartpage works on all devices

Features

easily configure everything using JSON
completely themeable (including background images)
open a collection of links in a modal (typical use cases are several environments of systems)
add an additional sidebar for even more bookmarks
host it on your own server

Why I built this

Many links accumulate on my computers both professionally and privately. Be it various links to systems, backends or developer sites, in the end the bookmarks bar was always overcrowded and unwieldy. I therefore developed a start page that I could maintain via an XML file. That page was hosted on an in-house system and became very popular over the years that it has been set up as the default home page on all the company's new computers. It was pretty ugly but very useful, so I added some themes. I was never quite happy with it, and I demanded to add new features. Finally, I decided to build a new version as a side project in my spare time.

If you want to know more about the development, you can read this blogpost.

What were my goals at that time?

The page should provide a simple sidebar for various links and of course it should get built in a responsive way. The most important thing were the tiles, which should give me quick access to the most important links. The links should be able to be divided into different categories.

Equipped with these basic functionality, I published the page on Github.

I received a lot of positive feedback there and since I wanted to use the site professionally too, the requirements have grown so that modal dialogs and theming are now also possible as well.

I hope you'll find this page as useful as I do. :)

little Helpers

Sascha Diercks — Tue, 31 May 2022 02:00:00 +0000

Little helpers sind kleine Tools, die dir die Arbeit erleichtern sollen. Besonders einfach ist die Umrechnung von absoluten auf relative Font-Größen.

Little helpers is a small collection of tools, that will help you getting things done. I especially build this to calculate relative font-sizes.

Easily convert font-sizes

Features

convert pixel to (r)em
easily copy/paste results
calculate percentages
calculate conversions
instant feedback during input

Why I built this

Calculating font-sizes is a recurring task for frontend developers. Many developers use websites specifically designed for this purpose.

For this type of conversion, Zach Leatherman created a workflow using text expander. I really liked the idea but I'm a mega supporter of Alfred, so I wanted to build on top of that. You can get the worflow for Alfred on github

The workflow worked very fine on my private device but on a company device you are usually not allowed to install own software, so I've built a website specifically for converting font-sizes. I wanted a super easy way to copy/paste values and select between rem and em-values.

Since the default font-size is 16px the base-calculation is based on this value.
A checkbox toggles between em and rem
there is a copy function
you will also get a comment you can paste in your css

So the output looks like this and can simply be copied into your CSS, SCSS, LESS or whatever:

.75rem; /*-- 12px / 16px --*/

In the meantime I've added some additional calculations as well.

BrowserStartpage – the SpeedDial for all your Browsers

Sascha Diercks — Thu, 24 Aug 2017 02:00:00 +0000

The BrowserStartpage on an iMac and the iPad

Do you remember the time when Internet Explorer virtually dominated the web and there was not much choice of browsers? Fortunately, those days are long gone and we have a wide range of good browsers to choose from. Every browser has its own strengths, so it is not always easy to find the right browser for your own surfing habits. I currently use the Mac both professionally and privately, and so four of my favourite browsers have now crystallised out of the masses. Let me say right away that they are the four browsers that everyone knows: Safari, Firefox, Chrome and - perhaps not yet so well known - Vivaldi. Each with its advantages and disadvantages, which I would like to outline briefly here:

Safari

The browser comes with macOS and offers good speed as well as the practical iCloud Sync, which, among other things, keeps bookmarks in sync between devices. The developer tools are solid but nothing spectacular. Unfortunately, the browser just feels too "fiddly" for me, and I'm in need of better DevTools. The elements of the user interface are extremely small and visually it fits in well with macOS, but Safari just doesn't suit my taste at the moment.

Firefox

Mozilla's browser had its heyday as the first serious competitor to Internet Explorer and then fell behind over time. In the meantime, however, Mozilla has recognised this and is consistently developing the browser further. It is fast, offers a Firefox sync and has quite good developer tools. Moreover, the browser itself does not pass any data to Google. Actually, it's my browser of choice - if it weren't for Google's Chrome.

Chrome

Google entered the browser market quite late, but nevertheless very successfully. It is not without reason that Chrome has become the most widely used browser. Chrome is fast, reliable and offers extremely good developer tools that are constantly being developed further. Of course, you have to be aware that Google has an interest in spreading the browser as widely as possible. Google sells advertising. These are optimally tailored to your surfing behaviour in order to achieve the highest possible match of interests and thus higher click rates on the advertisements displayed. The bottom line is that advertising generates more revenue. Is Chrome also available without Google?

Vivaldi

The company that develops the Vivaldi browser is led by the ex-CEO of Opera, Jon von Tetzchner, and has brought a pretty good browser onto the market with Vivaldi. Like Chrome, Vivaldi is based on the Chromium project and contains many useful functions. Splitscreen of web pages and the web panels are the highlights from my point of view. The developer tools correspond to those of Chrome - but are usually always updated a little later. Unfortunately, Vivaldi reacts a bit sluggish here and there, but this can be fixed with a few adjustments in the configuration. (Here is the link to the corresponding adjustments: https://www.ghacks.net/2017/02/13/how-to-speed-up-the-vivaldi-web-browser/

Browserswitching and Speeddials

As you can see, every browser has its advantages and disadvantages, and it's not always easy for me to choose my favourite. As already mentioned, I currently use Firefox (in the developer edition). Switching from one browser to the next is usually not a big problem. Bookmarks can usually be imported into the new browser without any problems.

All browsers now have a speed dial. As a rule, the most frequently visited pages are stored in a speed dial and you can usually "pin" your favourite websites here so that they are not replaced by other pages. Unfortunately, speed dials are also the big problem when you change browsers. As a rule, they cannot simply be transferred to the new browser, or they are not synchronised between the devices.

BrowserStartpage on iPhone

BrowserStartpage - the idea

This was also the trigger for my BrowserStartpage project. I had reached the point where I hardly used my bookmarks and my really often used links were stored in a speed dial. How could I transfer them to another browser or keep them synchronised between the browsers? Create all the links manually in the new browser? Wait until the new browser had rebuilt the page on its own? No, none of this was a good solution. I began to design and develop my own Speeddial.

The requirements

The initial requirements for the Speeddial were quickly taken up:

it should be able to be hosted on its own web server
it should work on all devices, i.e. also responsively
it should offer the possibility to divide the content into several areas - keyword "tabs
the currently opened tab should be saved in the browser, so that the next time I open the page, it will open in the same way I left it.
the Speeddial should make as few requests as possible to the web server in order to achieve a high speed even on mobile devices
the maintenance should be quite simple and later also automatable
later on it should be possible to create your own themes to adapt the site to your own taste
It should be possible to export the site later, so that the Speeddial also works without its own web server and can be synchronised. For example, as a static page, synchronised via Dropbox.

From the idea to implementation

I started to create a first, static prototype. A collection of links, decorated with screenshots. That was a pretty good start. I synchronised the result via iCloud and set the page as the start page in all browsers.

Die BrowserStartpage macht auch auf dem Macbook eine gute Figur

The tabs

Logically, the tabs had to be realised with Javascript. No big problem with jQuery - but since I wanted to generate as few requests and as little traffic as possible, I started to implement the tabs with regular Javascript. This would save me the approx. 80kB of the jQuery library.

The page should also be functional without Javascript, since, for example, Javascript cannot be executed on iCloud on mobile devices. This resulted in the fallback that the tabs would jump to the corresponding areas when clicked instead of switching them. The page would now work without Javascript - this is also called progressive enhancement.

Now it was time to save the last opened tab. I decided to use the localStorage here - a small local storage that can be used by the browser. The ID of the currently clicked tab is stored there and read out the next time it is called up. If this ID is not or no longer available in the Speeddial, the default ID is used. This could also be done with a cookie, but in contrast to the localStorage, they can be deleted quite easily.

Minimising the calls

As the next step, I wanted to optimise the caching of the files so that the browser only downloads files that have actually been changed. I wanted to transfer as little data as possible over the mobile network on the iPhone. I decided to use the application cache. This is realised via a manifest file in which all files are listed that the browser should store locally. If the web server is not accessible, the page can still be used because the data is saved locally the first time it is called up. Even a forced reload in the browser does not put the page out of operation. Another practical advantage of the implementation is that the Speeddial is also functional if the web server does not respond.

The Javascript and CSS I created are now loaded directly into the page to avoid further requests. Also it is a single page application (well, sort of) so caching doesn't play a big role here.

Data maintenance

Since I plan to change the speeddial directly on the page at some point, I wanted to outsource the content to be displayed to a file. A configuration file, if you will. Since the later changes in the Speeddial would probably be realised via Javascript, I decided to choose the json format for the configuration of the contents. Currently, the following contents are specified in the json file:

Tab names and structure
Link targets of the tiles
Graphics for the link
Description of the link
Background graphic

This content is currently read in via PHP and the Speeddial is created from it. The static HTML is currently no longer used. In addition, the already mentioned application cache is also built up dynamically. The advantage now is that additional tabs and links can be specified in the json file. The application cache is then updated without further intervention and the page can now be expanded relatively easily. Only the graphics for the links still have to be created manually, but this can also be automated later.

CSS and Javascript

The Javascript, as I already mentioned, is now loaded directly into the page, but exists, like the CSS, as a separate file on the server. Both Javascript and CSS are generated using Gulp. Line breaks and spaces are removed to save data. The CSS is developed using SCSS to facilitate later theming.

The start page on different devices

Get the Speeddial

The Speeddial is developed by me in a local PHP environment. I simulate a PHP-capable web server here using Vagrant. If this is all Bohemian woods for you, that's no problem - all the relevant data for using the Speeddial is in one directory. You only need the PHP environment if you want to build on the project.

You can find the Speeddial on Github. There you can download all the files. You can find a demo version of the current version here https://demo.saschadiercks.de/startpage/.

There are only a few links here, but there are enough to test the functionality.

All files and a documentation in English can be found on Github at https://github.com/saschadiercks/browserStartpage.

I hope the Speeddial will be as useful to you as it is to me. Switching between browsers or using different browsers at the same time is no longer a problem - they all use the same Speeddial.

Oh yes, I have also linked the browsers described here in the demo file.

If you are wondering how I created the screenshots in the devices: With Magic Mockup you can insert your screenshots into the corresponding templates.

Social media is communication, not a game

Sascha Diercks — Thu, 17 Jan 2013 01:00:00 +0000

In the past few days, mistakes in the area of social media could be observed that well-known companies had committed. I got the impression that although social media is used for marketing purposes, it has not yet been fully integrated into corporate structures. At this point I would like to use two examples to explain that social media is a dialogue and not a children's playground!

A campaign announced a new product that was not available at the announced time. Many people were waiting for this product and understandably wondered when it would be available. In their distress, they turned to the company's Twitter channel with questions, suggestions and suspicions. To no avail, the messages were hardly responded to!

If you manage a social media channel, be it Twitter, Facebook, Google+ or any other channel, expect that customers will want to interact with you.

It may be that you only see the Twitter stream as a replacement for your RSS feed and just want to keep customers informed, yet, and I guarantee it, customers will try to contact you through this channel. The worst thing you can do in such a case is to ignore the customer. In such a case, you disappoint the customer and this in turn can shake the customer's trust in you. In the worst case, you lose the customer!

You claim that you are using social media as a communication channel, but you forget the true meaning of "communication". I may quote Wikipedia at this point:

"Communication ... is the exchange or transmission of information. ... By "exchange" is meant a mutual give and take." Source:Wikipedia

You have neglected the exchange, namely the mutual give and take. No dialogue has been established with the customer - rather, you are holding a monologue which you are posting on the Internet.

This is what you can do:

Avoid the monologue - enter into a dialogue with your customers! Answer questions, thank them for tips! It's so easy and it builds trust in you and your brand!

Case 2: Unreliable support

A dialogue with customers naturally means a certain amount of work for you as a company, but surely you have employees who you have assigned to social media activities? If you can answer this in the affirmative, I would like to ask you another question: is your social media account sufficiently looked after? Can you react quickly enough, e.g. at the weekend?

In a concrete case, it recently happened that a Twitter account was hijacked by a well-known association and direct messages were sent to the followers (readers or customers) in their name! The direct messages contained a link to a Facebook page that aimed to read out the access data of the person who followed the link. On the Facebook target page, the customer was asked to confirm the Twitter account by entering their access data in the form. This was a form that corresponded to the Twitter design, but there was a problem with a character that was not displayed correctly. This kind of thing is suspicious based on experiences with other Spm sites! A more detailed investigation then revealed that the form was on a Russian server, which probably did not belong to Twitter.

The attackers chose a very good time for this action: Friday afternoon!

The account holder was not warned until Monday morning. So a malicious link was circulating in the known account for several days!

I don't wish it on you, but such a problem can happen to any of us and in such a case we should be able to react quickly!

If social media is only a channel for you that is not continuously managed, customers can quickly fall into the traps described above or similar ones. You should then be able to react quickly, otherwise you are also putting your customers' trust in you at risk!

This is what you can do:

Don't gamble away trust and continuously monitor your accounts! There will always be a customer who points out such problems to you. Then you can quickly eliminate the problem!

However, this requires employees who are prepared to react quickly and possibly even at the weekend. Such employees strengthen the customers' trust in you, because these employees want to and can quickly fix such problems as the one described above!

These are employees you can rely on!

You see: Social media is communication and not child's play!

Dangers and problems when using sliders and carousels

Sascha Diercks — Mon, 15 Oct 2012 02:00:00 +0000

I recently came across an interesting article (well, again) that described how sliders and carousels are nice to look at, but can still be a conversion killer. Sliders and carousels were dismissed here as a fad that needs to be questioned. Read the article: Don't Use Automatic Image Sliders or Carousels, Ignore the Fad

Since I'm not a big fan of sliders, carousels and other things that move around on websites, I'd like to take the article as an opportunity to look a little more closely at these advertising tools.

Sliders and carousels - they're everywhere... aren't they?

Sliders and carousels are all the rage right now, and even large shopping sites are using these elements as advertising tools.

Examples include Baur, Bon Prix, Zalando and Mirapodo. The popular framework for responsive Websites Foundation also comes with a slider. Bootstrap is no exception here - I simply don't want to list them all.

However, other large sites such as Asos, H&M, Otto and Tchibo rely on static graphics. Even Amazon uses moving elements only very sparingly.

Are there any good reasons for the decision not to use sliders and carousels?

Obviously, opinions differ somewhat here, so let's just approach the topic analytically!

The advantages

First, let's take a look at the advantages.

Obviously, you can fit a lot of content into a small space with the help of a slider. In this case, sliders are also often used as an argument for doing without various graphics and replacing them with a large slider. "If we play the content one after the other, we get an area for beautiful, large images!"

If we animate the slider, the page also looks extremely modern. At this point, the argument "movement generates attention" is often used. However, this only works to a limited extent - but we will come to that in a moment.

The drawbacks

Now we come to the disadvantages of the sliders. Strictly speaking, the advantages of the sliders are also the biggest criticism of this element!

Several contents can be placed in one area, but in the end the contents are also hidden. The customer may only see a fraction of the content.

For this reason, sliders are often animated. At first, this sounds very good, but it has a decisive disadvantage: the slider can attract too much attention! This can go so far that customers no longer engage with the rest of the page. Of course, this also has the effect that the slider distracts or disturbs the customer - Let's put it simple, they are annoying!

Let me explain that briefly:

According to Susan M. Weinschenk, there are two types of vision. Central vision and peripheral vision. Through central vision, people catch things directly in the eye - they focus on something specific. Peripheral vision, on the other hand, takes place in the peripheral areas of the field of vision. It has been used since time immemorial to detect danger. If we perceive a movement in the edge of our field of vision, we can't help but focus on it, because it could represent a danger. We are then disturbed in our current action. This can be very annoying for users and becomes noticeable as follows:

The user has passed the slider and found it uninteresting. He now engages with the content elsewhere on the website. The slider is now in the user's peripheral field of vision and keeps drawing attention to itself through animation. This can be perceived as extremely annoying.

Between us: do you want to be disturbed in your concentration by an element on a website? Certainly not!

The issues

Sliders and carousels can also cause problems. Let's go through these at this point as well:

Sliders and carousels currently (still) require Javascript. You may have to develop a fallback here if the Javascript fails - for whatever reason. A good fallback could be a div that has a scrollbar on the horizontal axis.

Several large images in a slider quickly lead to higher data volume, which can lead to longer loading times. Especially in the mobile sector, this can be very annoying! The customer should be able to work with the website as quickly as possible. So you definitely want to add loading="lazy" to your images.

The animations can also cause problems, because I have often seen that the phases in which the content of a slider is shown were far too short. In the worst case, the slider lacks controls, forcing the client to watch the entire run-through of a slider. The navigation of a slider or carousel is often displayed much too small in favour of the graphics - in this case, the operation of a slider is very tiring.

An example of the structure of a good slider

You would like to use sliders anyways?

Then please note the following.

As you can see, there is a lot to consider when using a slider. Some points speak against a slider. However, if you still want to use sliders or a carousel on your website, please note or consider the following points:

Several contents can be combined in one area in a slider. This means that content can easily be overlooked. Also, the customer does not know the content in the slider and does not wait until all have been shown! Prioritise the content. The first content should be your most important argument. Tell the customer the content of the slider from the beginning! Click areas or small banners, in which you briefly discuss the content, next to or below the slider would be a possibility!
Sliders attract attention. Unfortunately, they may attract too much attention, so that they can be distracting! Don't let sliders play automatically and make sure the controls are understandable and appropriately sized. Give the user control over the slider!
Sliders are (still) dependent on Javascript! Provide a fallback in case your Javascript does not work or the customer accesses your website without Javascript. Also avoid Flash! Flash and large amounts of Javascript can slow down smaller computers! In the worst case, your website will crash the browser. This can be very annoying when the shopping basket is full!
Sliders make for a larger data volume! Load the hidden content of a slider after the page has been completely loaded. A static ad is better than a slow page! Load smaller images for mobile devices to present a fast page to the customer!
Test, test, test Test in A/B tests whether your sliders are accepted by the customer. If your content is ignored, you may be giving away money! Please note: a long dwell time on a page may not be a positive sign! This can also indicate problems with your content. Measure the conversion of your content. Be sure to test a static version against your slider!

Debug mobile websites in Safari

Sascha Diercks — Thu, 11 Oct 2012 02:00:00 +0000

There are different techniques here, such as Responsive Design or custom template sets for different device classes. No matter which solution we prefer - we have to test the site to make sure that the customer can use it without any problems. Since Safari 6.0, websites can be tested on the iPhone with the help of the web inspector integrated in Safari. If the mobile view of the website is not displayed correctly on the iPhone, we can work on the page live via the web inspector and solve the problem. This is much faster than trying to fix the error locally, uploading the file to the server and calling up the page again. In the worst case, we repeat this procedure several times for the same error.

With Safari 6.0, this is now much easier. In this article I describe what exactly is required and how this test environment can be set up.

Two ways of debugging

There are two ways to test mobile websites. Both via the iPhone simulator and via a real iOS device! As a third option you can use the desktop version of Safari as well, but there might be rendering differences.

Safari version 6.0 or higher is required for both cases! In addition, a developer mode activated in Safari is a prerequisite!

This can be activated in Safari > Preferences under the item Advanced! Simply tick the box and the item Show develop menu in menu barr appears in the menu bar!

The developer mode can be activated in preferences - advanced

Debugging with the iOS Simulator and the Web Inspector

Under OS X, it has been possible for some time to test websites and apps locally, i.e. in a simulator. The iOS simulator is part of the free Developer Tools and can be downloaded here from the Mac App Store

If we now open any website in the iOS simulator, we have the possibility in the Safari browser (the desktop version) to access and manipulate the page in the iPhone simulator via Developer > iPhone Simulator > ... with the web inspector!

The Webinspector accesses the simulator

Remote debugging with the Webinspector and the iPhone

It is similarly easy to access websites on a real iPhone. The prerequisite for this is that the iPhone is connected to the computer via USB. In addition, the Web Information option must be activated on the iPhone. This requires at least iOS 6.

The web information can be activated as follows: Preferences > Safari > Advanced

Activate the web information to grant Safari access to the iPhone

Once the iPhone is connected to the computer, we can now access and edit the website in desktop Safari via Developer > iPhone name > ...!

Mac only

The iPhone Simulator has always required the Macintosh as a platform, and Safari 6.x is not yet available for any other platform. Unfortunately, it is very likely that this will remain the case in the future!

Test the speed of mobile websites with the Network Link Conditioner

Sascha Diercks — Wed, 22 Aug 2012 02:00:00 +0000

You are developing mobile websites and want to know how the speed and page load feels to the user - and as realistically as possible? If you still have a Mac, then you're in luck, because you can easily throttle the throughput of your network with the Apple Network Link Conditioner. You can then test how fast or slow the website would open for the user under, say, Edge.

Websites should be as fast as possible

You probably know this situation: you switch on the television and want to relax in front of the set. Just the short waiting time until the picture finally appears bothers you unpleasantly. It's only three or four seconds, but the waiting time is annoying.

It's no different on the web, every site should load as fast as possible. People hate delays, so it's a blessing that you have access to DSL with 6Mbit or faster bandwidth at your home computer. Yes, that is really very pleasant, but unfortunately somewhat counterproductive for the development of mobile websites. You would like to test whether the website can also be loaded appropriately fast for the user who is not in the home WLAN with his mobile device, but on the road in a bus, with a slow mobile network. This used to be a problem, but with the appropriate equipment you can test your websites on your home computer as if you were sitting next to your user on the bus.

Do you have a Mac? Then it will be easy!

What you need to throttle the speed is Apple's Network Link Conditioner. This software is a component of the Developer Tools. However, it is not delivered with these tools by default, but must be installed afterwards.

Developer Tools? Xcode?

Xcode is a component of the Apple Developer Tools. Xcode can be used to write apps for the Mac and iOS - and since both the Mac and iOS devices access the same architecture, Apple's only offers Xcode for Mac OSX. So if you work under Windows, you have to look for another solution to throttle your network.

The Network Link Condtioner, is it already installed?

If you search the net for the possibility to install Link Conditioner, it happens that you come across descriptions that assume that the software is already installed. For example here: Network Link Conditioner in Lion - Matt Gemmel

So let's check that out first:

Open the Finder
Locate the folder Applications > Utilities (or: CMD + Shift + U).
Is there a folder there called "Network Link Conditioner"?
Fine - in the folder there is a PrefPane file that you can install by double-clicking in the system settings. Then you are ready and can use the software.

Installing the Network Link Condtioner retroactively

To install the Network Link Condtioner afterwards, you need a free Apple Developer Account

Once you have created it, download the Developer Tools, more specifically Xcode from the Mac App Store.

The download and installation take a few minutes!

Now start Xcode. The following menu will take you to the website where you can download the Network Link Conditioner: Xcode > Open Developer Tools > More Developer Tools

Now log in to the website with your new or existing developer account.

You now have the option of installing various developer tools. Look for the Hardware IO Tools for Xcode right away. You can usually press CMD + F and find the file directly with the browser search, because it should already be listed on the page. Among other things, this file contains the Network Link Conditioner. Load and open the disk image.

Double-click on Network Link Conditioner.prefpane to start the installation.

The Network Link Conditioner now is accessible in the system settings.

Here are the steps at a glance

All in all, it is a time-consuming process, so here is an overview of all the steps.

Create a developer account
Install Xcode via the Mac App Store
Launch Xcode
Select Xcode > Open Developer Tools > More Developer Tools
Log in to the website that opens
Search for Hardware IO Tools for Xcode.
Download the file
Install Network Link Conditioner.prefpane.

What you can do with the new software

If you now start the Network Link Conditioner via the system setting, you can set different network speeds via the pull-down menu Profiles. You do not modify your entire network with the settings - only the Mac is slowed down.

Together with the iPhone simulator, which is also in Xcode, you can experience your mobile website almost as a visitor would use it on the bus. Of course, not all households have a high-speed DSL connection yet, so it's worth slowing down your own website for the desktop with the tool as well!

One more note:

If you restart the computer, the settings of the Network Link Conditioner are reset! So you don't have to remember for several days which profile you worked with the last time!

And now good luck testing your website - is it fast enough when you open it via the Edge, Lossy Network profile?

Why QR codes are not suitable for the masses (and what you can do about it)

Sascha Diercks — Sun, 13 May 2012 02:00:00 +0000

Most of us who work with or on the web are now familiar with QR codes. But now, hand on heart, how many QR codes have you already scanned - not to test the code for your own project, but to retrieve additional information, for example? Not that often, right? Let's see if it can be different for the average user.

What exactly QR codes are can be found on various websites, so I won't go into the details here. Put very simply, a QR code is a link! A link that, among other things, can make it possible to switch from one medium to another. This can be a change from a print campaign to a website or a customer hotline. Ultimately, it is a link that should relieve the user of tedious typing. It sounds practical, yet there is a lot of friction.

An example QR code

Not everyone owns a smartphone

In 2011, a big growth was predicted for QR codes - and that was still for the then current year. Sure, the number of smartphone users is constantly increasing, and so is the chance that one's own code will be scanned. And yet, there are still many users who do not own an iPhone, Samsung Galaxy or other smartphone. These users resort to a device that cannot scan QR codes. These people may even surf the web, but have no way of installing additional software on their device.

Users do not recognise codes or confuse them

According to some studies, QR codes have gained in popularity, but not every user is familiar with them. Many people have probably seen the codes or a variation of them before, and that is precisely the problem. Methods similar to the QR code are also used in other areas - a good example of this is the data matrix, which is used on parcels and letters. It looks very similar to the QR code, but other contents are encoded. The user assumes that the data matrix contains a link and scans it. However, contrary to expectations, no website is called up and, in the worst case, no feedback is given at all. The user now transfers this negative experience to conventional QR codes and ignores them from then on.

The codes are used incorrectly

My job as a designer requires me to observe people in order to solve problems that these people have in their daily lives. I could also observe people trying to deal with QR codes. One problem people have with QR codes - they photograph the code with the camera integrated in the smartphone and expect an action from the smartphone. Of course, this does not happen and so the QR code (in the best case only the one that has just been photographed) is ignored.

An additional application is needed

Here is an opportunity for software developers. Develop camera software that independently recognises QR codes and offers the user an action option. Optimally, this functionality should already be implemented in the operating system. Apple, Google or Microsoft, are you reading this? Unfortunately, this functionality is unknown to me so far and so we have to resort to third-party software. This is also an important point that the user must be aware of.

Scanner and camera of different quality

If the user could actually be persuaded to install an application on his device that is capable of reading QR codes, a big step has been taken. However, there is already a wide variety of software in the app stores of this world, which also differ in how well they can recognise and read the codes. The cameras of the smartphones also play their part. Not every smartphone is equipped with a camera of the quality of the iPhone 4S.

The fear of scanning the code

Last but not least, there remains the emotional hurdle of users to scan your QR code. Far too often we hear all kinds of messages about the dangers lurking on the web - and not just since yesterday! Dialers, viruses, phishing and also reports about attacked & manipulated smartphones have played their part. Users are becoming more cautious! Often, reading software for QR codes redirects the user directly to a page on the web without first announcing what happens next. While this is convenient, it carries with it a high potential for uncertainty. The user cannot see what is behind the code and in the worst case ignores it. "Is my smartphone at risk if I scan this code?"

What can I do to increase conversion?

I already mentioned that a QR code is first and foremost a link and so the rules of web links also apply to QR codes for the most part.

Before you print a code, consider in the first step: the scanners installed on smartphones, as well as the cameras used, are of varying quality. Therefore, it has proven useful to print the code in the size of 3cm x 3cm!

Counter users' fears and describe what the customer can expect behind the code. It is also important to place a fitting Call to Action. Of course, the statement should be as promotional as possible!

The code should relieve the user of tedious typing, but not all users have a smartphone with a camera and scanner installed. Therefore, always print a related URL to enable these customers to use the offer as well. If the URLs are different, the code and URL can also be evaluated separately. In addition, the URL shown should be as short as possible, because nobody likes typing on a mobile phone! Perhaps you can equip your website with its own linkshortner?

You should also reward the user for taking the trouble to scan your code. Don't just throw him onto your company's homepage. Meet his expectations, make the effort easier for him or reward him with incentives.

Let's summarise

There are many reasons why a user may ignore your QR codes, but you may be able to attract him as a customer through a QR code if you...

... print the code in an easily scannable way
... integrate a promotional call-to-action
... offer a URL as an alternative
... keep the alternative URL short
... reward the user

Bonus: Do you already have your own app?

In that case, it might be worth integrating a code-reading functionality here. You can then refer to it in your print ads and ask the customer to scan the printed QR code with your app. In this case, you may manage to get users to use your app in the future when they stumble across a code of your company.

Further information

If you want to delve a little deeper into the technology behind QR codes, may I refer you to the Career Bible, which, in addition to Wikipedia, gives a nice overview of QR codes and their function. http://karrierebibel.de/qr-code-2011-wird-das-jahr-des-barcode-marketing/

It only remains for me to wish you much success with the use of QR codes...

Feed | Sascha Diercks

Use Shortcuts.app to run System commands through Spotlight

The System commands #

Quit all Apps #

Shutdown #

Restart #

Sleep #

Eject all drives #

Mount Drives #

Empty trash #

What you need to do #

The downside #

Prefer WebPageTest for performance-testing

A great talk: be the browsers mentor not its micromanager

Allow Google to crawl CSS and JS

Notes about web development and other things

Prefer WebPageTest for performance-testing

A great talk: be the browsers mentor not its micromanager

Allow Google to crawl CSS and JS

Articles about web development

Use Shortcuts.app to run System commands through Spotlight

personalNews - your news feed. Chronologically sorted

BrowserStartpage – the SpeedDial for all your Browsers

Social media is communication, not a game

Dangers and problems when using sliders and carousels

Debug mobile websites in Safari

Test the speed of mobile websites with the Network Link Conditioner

Why QR codes are not suitable for the masses (and what you can do about it)

Some side projects

personalNews

browserStartpage

little Helpers

personalNews

Features #

Why I built this #

What were my goals at that time? #

personalNews - your news feed. Chronologically sorted

From iOS to Vivaldi #

The concept #

The implementation #

The design #

Grouping multiple feeds as a channel #

Blacklisting: Keywords and URL #

Becoming responsive #

Get personalNews #

browserStartpage

Features #

Why I built this #

What were my goals at that time? #

little Helpers

Features #

Why I built this #

BrowserStartpage – the SpeedDial for all your Browsers

Safari #

Firefox #

Chrome #

Vivaldi #

Browserswitching and Speeddials #

BrowserStartpage - the idea #

The requirements #

From the idea to implementation #

The tabs #

Minimising the calls #

Data maintenance #

CSS and Javascript #

Get the Speeddial #

Social media is communication, not a game

Case 1: Social media is communication #

This is what you can do: #

Case 2: Unreliable support #

This is what you can do: #

Dangers and problems when using sliders and carousels

Sliders and carousels - they're everywhere... aren't they? #

The advantages #

The drawbacks #

The issues #

You would like to use sliders anyways? #

Debug mobile websites in Safari

Two ways of debugging #

Debugging with the iOS Simulator and the Web Inspector #

The System commands

Quit all Apps

Shutdown

Restart

Sleep

Eject all drives

Mount Drives

Empty trash

What you need to do

The downside

Features

Why I built this

What were my goals at that time?

From iOS to Vivaldi

The concept

The implementation

The design

Grouping multiple feeds as a channel

Blacklisting: Keywords and URL

Becoming responsive

Get personalNews

Features

Why I built this

What were my goals at that time?

Features

Why I built this

Safari

Firefox

Chrome

Vivaldi

Browserswitching and Speeddials

BrowserStartpage - the idea

The requirements

From the idea to implementation

The tabs

Minimising the calls

Data maintenance

CSS and Javascript

Get the Speeddial

Case 1: Social media is communication

This is what you can do:

Case 2: Unreliable support

This is what you can do:

Sliders and carousels - they're everywhere... aren't they?

The advantages

The drawbacks

The issues

You would like to use sliders anyways?

Two ways of debugging

Debugging with the iOS Simulator and the Web Inspector

Remote debugging with the Webinspector and the iPhone

Mac only

Websites should be as fast as possible

Do you have a Mac? Then it will be easy!

Developer Tools? Xcode?

The Network Link Condtioner, is it already installed?

Installing the Network Link Condtioner retroactively

Here are the steps at a glance

All in all, it is a time-consuming process, so here is an overview of all the steps.

What you can do with the new software

One more note:

Not everyone owns a smartphone

Users do not recognise codes or confuse them

The codes are used incorrectly

An additional application is needed

Scanner and camera of different quality

The fear of scanning the code

What can I do to increase conversion?

Let's summarise

Bonus: Do you already have your own app?

Further information