![\"React](\"/blog/php-asynchronous-message-queue/react-server-320.png\")
PHP can, by default, not create processes that continue to run in the background even after the parent process terminates. This article explain how you can trick PHP into doing it anyway. I also created a library to simplify the process and explain how it works in the end.
\nI often have long running tasks, for example, generating a report or performing an analysis of large amounts of data, that run minutes or even hours. Today I encountered a situation where I needed to start such task from a button in a browser window. Since the task takes three to five hours it was impossible to invoke the task directly.
\nMy Internet research on this topic revelead a wide range of different solutions, from hacky to weird. The best I could find was the answer of Mark Biek to a question on Stack Overflow.
\nIn PHP there are several functions to execute a command, for example, exec and shell_exec. However, there are several things to consider when a command should run in the background. But let's first take a look at the most simple example:
shell_exec(sprintf('%s > /dev/null 2>&1 &', $command));There three important things in this snippet:
\nSTDOUT) of the script must be directed to a file. In this case > /dev/null indicates that I'm not interested in the output.STDERR) also must be directed to a file. 2>&1 means that STDERR is redirected into STDOUT and therefore into the nirvana.& tells the command to execute in the background.Of course it would also be possible to redirect STDOUT and STDERR to a file. In my situation this was not necessary since the command is part of an application with an internal log system.
Since the command will run multiple hours I'm also interested in the current status, that is, is the process still running. We can check if a process is running by using ps, for example:
ps \\$PIDIn order to be able to look this up, we need the PID of the process. In a shell the PID of the last process is stored in the variable $! and we can pass it to PHP by echoing it.
$pid = shell_exec(sprintf('%s > /dev/null 2>&1 & echo $!', $command));It is now relatively easy to retrieve the status of the process. The following code is taken directly from the already mentioned Stack Overflow question.
\nfunction isRunning($pid)\n{\n try {\n $result = shell_exec(sprintf('ps %d', $pid));\n if(count(preg_split(\"/\\n/\", $result)) > 2) {\n return true;\n }\n } catch(Exception $e) {}\n\n return false;\n}At this point I have everything I need and the only thing left to do is pack the code in a class with an easy-to-use interface:
\nnamespace Bc\\BackgroundProcess;\n\nclass BackgroundProcess\n{\n private $command;\n private $pid;\n\n public function __construct($command)\n {\n $this->command = $command;\n }\n\n public function run($outputFile = '/dev/null')\n {\n $this->pid = shell_exec(sprintf(\n '%s > %s 2>&1 & echo $!',\n $this->command,\n $outputFile\n ));\n }\n\n public function isRunning()\n {\n try {\n $result = shell_exec(sprintf('ps %d', $this->pid));\n if(count(preg_split(\"/\\n/\", $result)) > 2) {\n return true;\n }\n } catch(Exception $e) {}\n\n return false;\n }\n\n public function getPid()\n {\n return $this->pid;\n }\n}It's now relatively easy to execute a command in a background process:
\nuse Bc\\BackgroundProcess\\BackgroundProcess;\n\n$process = new BackgroundProcess('sleep 5');\n$process->run();\n\necho sprintf('Crunching numbers in process %d', $process->getPid());\nwhile ($process->isRunning()) {\n echo '.';\n sleep(1);\n}\necho \"\\nDone.\\n\"In this example the command sleep 5 is executed in the background. As long as the process is running a dot is printed every second.
Please note: If the parent process continues to run while the child process(es) run(s) in the background you should use a more robust solution, for example, the Symfony Process component.
\nUpdate: I created a library using the code above. You can find it on Github: BcBackgroundProcess.
\nIt is also possible to install the package through composer:
\n{ 'require': { 'braincrafted/background-process': 'dev-master' } }A fun exercise in programming. Implementing a asynchronous, non-blocking message queue in PHP.
\nUnlike most other programming and scripting languages PHP does not support threads (there is a third-party library called pthreads) and threads would be required to implement a truly asynchronous, non-blocking message queue. Challenge accepted.
\nIn this article I am going to explain how you can implement a message queue in PHP. I do this mostly for fun and pleasure, because in most production scenarios you probably want to use a real message queue like RabbitMQ.
\nThe message queue typically consists of a server that accepts messages. These messages are sent by a producer and are received by a consumer.
\nThe server is a program that runs in the background and listens to a specific port. Whenever a message arrives at the given port it invokes a consumer with the given message.
\nRunning in the background, listening to a port, reacting when a message arrives. That sounds like a job for ReactPHP. In our case we only need the socket server of React and fortunately there is a subtree split of reacts socket component.
\nIf you are using Composer (if not you really should) you can add react/socket to your project.
// composer.json\n{\n \"require\": {\n \"react/socket\": \"0.3.*\"\n }\n}With React we can implement a simple server that listens to a socket and executes code whenever new data arrives at the socket.
\n// server.php\n\nrequire_once __DIR__.'/vendor/autoload.php';\n\n// Create loop and socket\n$loop = React\\EventLoop\\Factory::create();\n$socket = new React\\Socket\\Server($loop);\n\n// New connection is established\n$socket->on('connection', function (\\React\\Socket\\ConnectionInterface $conn) {\n // New data arrives at the socket\n $conn->on('data', function ($data) use ($conn) {\n // TODO: Handle message\n echo \"$data\";\n // Close the connection when we consumed the message\n $conn->close();\n });\n});\n\n// The socket should listen to port 4000\n$socket->listen(4000);\n$loop->run();In the above script I added a simple echo to output the received data. We could now run php server.phpto start our server and send messages to it by connecting to it via telnet localhost 4000.
Let's assume that our message queue receives messages and needs to perform some time-consuming task with them. We will simulate this with the following code.
\nfunction consume($data, \\React\\Socket\\ConnectionInterface $conn)\n{\n for ($i = 0; $i < 5; $i++) {\n echo sprintf(\"%s: Do something with %s\\n\", date('H:i:s'), $data);\n sleep(1);\n }\n}When we run two telnet simultaneously we will receive the following output:
19:18:07: Do something with foo\n19:18:08: Do something with foo\n19:18:09: Do something with foo\n19:18:10: Do something with foo\n19:18:11: Do something with foo\n19:18:12: Do something with bar\n19:18:13: Do something with bar\n19:18:14: Do something with bar\n19:18:15: Do something with bar\n19:18:16: Do something with barClient 1 has an open connection to the server for five seconds and client 2 has an open connection to the server for ten seconds. We want that the clients transfer a message to the server and immediately close the connection while the server accepts new messages and works on those tasks in the background.
\nNow is a good time to remember the last posting I wrote here: Running background processes in PHP.
\nWe can use BcBackgroundProcess to create a background process and consume the message there.
\n// composer.json\n{\n \"require\": {\n \"react/socket\": \"0.3.*\",\n \"braincrafted/background-process\": \"dev-master\"\n }\n}When using the factory provided by BcBackgroundProcess it is quite easy to create a new process and execute it in the background.
\n// server.php\n...\n$processFactory = new \\Bc\\BackgroundProcess\\Factory('\\Bc\\BackgroundProcess\\BackgroundProcess');\n\n$socket->on('connection', function (\\React\\Socket\\ConnectionInterface $conn) use ($processFactory) {\n $conn->on('data', function ($data) use ($conn, $processFactory) {\n $command = sprintf('php consumer.php \"%s\"', addslashes($data));\n $processFactory->newProcess($command)->run();\n\n $conn->close();\n });\n});\n...The command executed in the above code is php consumer.php with the message as first (and only) argument.
The consumer is another script which is executed by the server as background process. Its first and only argument is the message. The biggest disadvantage of executing the code in a background process (compared to what we could do if PHP would support threads) is that we can no longer communicate with the server and thus can't output anything there. Instead we will write log messages to a file.
\n// consumer.php\n\nfunction consume($message, $filename)\n{\n for ($i = 0; $i < 5; $i++) {\n $data = sprintf(\"%s: Do something with %s\\n\", date('H:i:s'), $message);\n file_put_contents($filename, $data, FILE_APPEND);\n sleep(1);\n }\n}\n\n$message = stripslashes($_SERVER['argv'][1]);\nconsume($message, \"message.log\");Ok, let's try this out. In my experiment I will open four Terminal windows in parallel. The first one will run the server, the second one will watch the message.log log (with tail -f) and the third and forth will be used to write to the message server.
![\"Screenshot](\"/blog/php-asynchronous-message-queue/mq-server-320.png\")
You can see that both messages are consumed in parallel and that the client is started and closes within a second.
\nIn reality you will probably never send messages to a MQ server using the telnet command line utility, but rather send messages from another script.
When you are using PHP it is extremely simple to write a message to a socket.
\n// produce.php\n\nfunction produce($message)\n{\n $fp = @stream_socket_client('tcp://localhost:4000', $errno, $errstr, 30);\n if ($fp) {\n fwrite($fp, $message);\n fclose($fp);\n }\n}\n\nproduce(\"Hello World!\");As mentioned above this code is not really useful in a production environment. However, I use such a message queue to send real time notifications from a task that runs once a week for a few hours. The task is used only internal and not critical and therefore it would be a huge overkill to install and maintain a real message queue.
\nI created a library from the code described in this article. The principles are the same, but it has a nicer architecture and is tested. You can find it on Github: BcMq.
\nIf you want to use the code in a Symfony2 application I made things even easier by creating a bundle that encapsulates BcMq. The bundle uses services to consume messages which makes it quite easy and elegant. Detailed instructions on how to install and use the bundle can be found on Github: BcMqBundle.
", "url": "/blog/php-asynchronous-message-queue/", "title": "Implementing an asynchronous message queue in PHP with React", "date_modified": "2013-05-01T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/symfony2-gaufrette-s3/", "content_html": "Gaufrette, a PHP library, abstracts reading and writing files and allows us to write code independent of the underlying filesystem. In this article we want to store photos on Amazon S3 in a way that we can change the filesystem without changing our code.
\nOften it can be a little bit tricky to upload files to a web server and things become even more complicated when you want to store the uploaded files on Amazon S3. In this article I am going to explain how you can use Gaufrette to upload photos to S3 from a Symfony2 application.
\nI will use three different libraries in this article: Gaufrette, KnpGaufretteBundle and AWS SDK for PHP. Gaufrette is an abstraction layer for filesystems. That is, it offers a transparent interface to various types of filesystems, like a local filesystem, FTP, Dropbox, S3 and many others. The library is integrated into Symfony2 by KnpGaufretteBundle which makes it easy to setup and configure Gaufrette. Gaufrette requires the AWS SDK for communication with the S3 service.
\nHeads up: I have written this tutorial in 2013, since then some of the libraries had major updates, including AWS SDK.
\nInstallation is easy if you use Composer, we have to add knplabs/gaufrette, knplabs/knp-gaufrette-bundle and amazonwebservices/aws-sdk-for-php to composer.json.
{\n \"require\": {\n \"knplabs/gaufrette\": \"dev-master\",\n \"knplabs/knp-gaufrette-bundle\": \"dev-master\",\n \"amazonwebservices/aws-sdk-for-php\": \"dev-master\"\n }\n}Using Composer's command line utitility we download the dependencies:
\n$ composer updateAs a last step we need to add KnpGaufretteBundle to our applications app/AppKernel.php:
new Knp\\Bundle\\GaufretteBundle\\KnpGaufretteBundle()Before we can upload files to S3 we first have to setup S3 accordingly. This is possible in the AWS Management Console. We want to store all files uploaded from our application in a bucket we first have to create a new bucket for our application. After creating a new bucket we select the Properties tab in the top right. Since our files should be accessible for everyone we add a Bucket Policy. We select Permissions in the right view and click Add bucket policy. The following policy allows everyone to view the files in the bucket. You need to change the name of your bucket (I called mine braincrafted.com).
{\n \"Version\": \"2008-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"AddPerm\",\n \"Effect\": \"Allow\",\n \"Principal\": {\n \"AWS\": \"*\"\n },\n \"Action\": \"s3:GetObject\",\n \"Resource\": \"arn:aws:s3:::braincrafted.com/*\"\n }\n ]\n}We also need to activate Static Website Hosting. To activate this we select Enable website hosting and enter the name of an index and an error document. The documents don't have to exist, but the fields are required.
\nYou can test if your bucket works by using the AWS Console to upload an file to your bucket. The public URL of your bucket can also be found in the Static Website Hosting section of the Properties tab. It should look like this:
\nhttp://BUCKET_NAME.s3-website-us-east-1.amazonaws.comIf you have created your bucket in a different region the URL will be slightly different.
\nWhen you click your name in the very top you will find a link to Security Credentials. On this page you find your Access Keys and you will need those in a second.
\nWe can now start by configuring Gaufrette. First we need to setup an adapter to communicate with S3 and then we need to setup a filesystem that uses the adapter performs actions on the filesystem.
\nBecause Gaufrette has two levels we could use, for example, different adapters for different environments. If you have functional tests you probably don't want to upload files to S3 in those but rather use the local filesystem.
\n# app/config/config.yml\n\nknp_gaufrette:\n adapters:\n photo_storage:\n amazon_s3:\n amazon_s3_id: acme_storage.amazon_s3\n bucket_name: %amazon_s3_bucket_name%\n create: false\n options:\n create: true\n filesystems:\n photo_storage:\n adapter: photo_storage\n alias: photo_storage_filesystemThe previous code creates one adapter photo_storage of the type amazon_s3 and a filesystem photo_storage that uses the photo_storage adapter. Before we continue lets look at the amazon_s3_id option. This option has to refer to a service of class AmazonS3.
We also need to define the bucket name and I like to define such options in my applications parameters.yml.
I created a bundle for the code concerned with uploading and storing file and called it AcmeStorageBundle. Inside this bundle we need to create a new service for the AmazonS3 class.
# src/Acme/StorageBundle/Resources/config/services.xml\n\n<parameters>\n <parameter key=\"acme_storage.amazon_s3.class\">AmazonS3</parameter>\n</parameters>\n\n<services>\n <service id=\"acme_storage.amazon_s3\" class=\"%acme_storage.amazon_s3.class%\">\n <argument type=\"collection\">\n <argument key=\"key\">%acme_storage.amazon_s3.aws_key%</argument>\n <argument key=\"secret\">%acme_storage.amazon_s3.aws_secret_key%</argument>\n </argument>\n </service>\n</services>There are two parameters defined, one for the key and one for the secret key, so we quickly have to define a configuration for AcmeStorageBundle. We also add an option to configure the base URL of the bucket.
\n# src/Acme/StorageBundle/DependencyInjection/Configuration.php\n\n// ...\npublic function getConfigTreeBuilder()\n{\n // ...\n $rootNode\n ->children()\n ->arrayNode('amazon_s3')\n ->children()\n ->scalarNode('aws_key')->end()\n ->scalarNode('aws_secret_key')->end()\n ->scalarNode('base_url')->end()\n ->end()\n ->end()\n ->end();\n\n return $treeBuilder;\n}\n\n// ...# src/Acme/StorageBundle/DependencyInjection/AcmeStorageExtension.php\n\n// ...\n\npublic function load(array $configs, ContainerBuilder $container)\n{\n // ...\n\n if (!isset($config['amazon_s3']['aws_key'])) {\n throw new \\InvalidArgumentException(\n 'The option \"acme_storage.amazon_s3.aws_key\" must be set.'\n );\n }\n $container->setParameter(\n 'acme_storage.amazon_s3.aws_key',\n $config['amazon_s3']['aws_key']\n );\n\n if (!isset($config['amazon_s3']['aws_secret_key'])) {\n throw new \\InvalidArgumentException(\n 'The option \"acme_storage.amazon_s3.aws_secret_key\" must be set.'\n );\n }\n $container->setParameter(\n 'acme_storage.amazon_s3.aws_secret_key',\n $config['amazon_s3']['aws_secret_key']\n );\n\n if (!isset($config['amazon_s3']['base_url'])) {\n throw new \\InvalidArgumentException(\n 'The option \"acme_storage.amazon_s3.base_url\" must be set.'\n );\n }\n $container->setParameter(\n 'acme_storage.amazon_s3.base_url',\n $config['amazon_s3']['base_url']\n );\n}\n\n// ...We can now configure these options in our applications configuration.
\n# app/config/config.yml\n\nacme_storage:\n amazon_s3:\n aws_key: %amazon_aws_key%\n aws_secret_key: %amazon_aws_secret_key%\n base_url: %amazon_s3_base_url%We should keep our AWS credentials secret and therefore define them in parameters.yml (which should not be committed to a VCS server).
# app/config/parameters.yml\n\nparameters:\n amazon_aws_key: ~\n amazon_aws_secret_key: ~\n amazon_s3_base_url: ~\n amazon_s3_bucket_name: ~In the parameters.yml file I also defined amazon_s3_bucket_name, which is used in the Gaufrette configuration to set the bucket name.
Now we have everything configured and we can start writing code. Let's create a class PhotoUploader in AcmeStorageBundle to keep our controllers free of the details on how to upload files.
# src/Acme/StorageBundle/Upload/PhotoUploader.php\n\nnamespace Acme\\Bundle\\StorageBundle\\Upload;\n\nuse Symfony\\Component\\HttpFoundation\\File\\UploadedFile;\n\nuse Gaufrette\\Filesystem;\n\nclass PhotoUploader\n{\n private static $allowedMimeTypes = array(\n 'image/jpeg',\n 'image/png',\n 'image/gif'\n );\n\n private $filesystem;\n\n public function __construct(Filesystem $filesystem)\n {\n $this->filesystem = $filesystem;\n }\n\n public function upload(UploadedFile $file)\n {\n // Check if the file's mime type is in the list of allowed mime types.\n if (!in_array($file->getClientMimeType(), self::$allowedMimeTypes)) {\n throw new \\InvalidArgumentException(sprintf('Files of type %s are not allowed.', $file->getClientMimeType()));\n }\n\n // Generate a unique filename based on the date and add file extension of the uploaded file\n $filename = sprintf('%s/%s/%s/%s.%s', date('Y'), date('m'), date('d'), uniqid(), $file->getClientOriginalExtension());\n\n $adapter = $this->filesystem->getAdapter();\n $adapter->setMetadata($filename, array('contentType' => $file->getClientMimeType()));\n $adapter->write($filename, file_get_contents($file->getPathname()));\n\n return $filename;\n }\n}The only thing that is a little bit tricky and took me a while to figure out is setting the content type. When we don't set the correct content type manually S3 will assume application/octet-stream and therefore will offer the file as download to the user. If we want to host files that a user can view in a browser (like images) we need to set the correct mime type. Sadly this is not possible on the Filesystem object. However, if you only upload files that should be downloaded you can directly work on the Filesystem object:
$this->filesystem->write($filename, file_get_contents($file->getPathname()));We create a service for PhotoUploader to access the class in our controllers.
<parameters>\n <parameter key=\"acme_storage.photo_uploader.class\">Acme\\StorageBundle\\Upload\\PhotoUploader</parameter>\n</parameters>\n\n<services>\n <service id=\"acme_storage.photo_uploader\" class=\"%acme_storage.photo_uploader.class%\">\n <argument type=\"service\" id=\"photo_storage_filesystem\" />\n </service>\n</services>We create an upload form and connect the form with our PhotoUploader class in the controller. In this example we will only create one form field for the uploaded file but it is easily possible to add other fiels (for example, a description).
# src/Acme/PhotoBundle/Form/Type/PhotoType.php\n\nnamespace Acme\\PhotoBundle\\Form\\Type;\n\nuse Symfony\\Component\\Form\\AbstractType;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\n\nclass PhotoType extends AbstractType\n{\n public function buildForm(FormBuilderInterface $builder, array $options)\n {\n $builder->add('photo', 'file', array(\n 'label' => 'Photo',\n ));\n }\n\n public function getName()\n {\n return 'photo';\n }\n}The only thing special in the controller code is the code to call PhotoUploader::upload(). It expects an UploadedFile object which is automically returned by the form.
# src/Acme/PhotoBundle/Controller/PhotoController.php\n\nnamespace Acme\\PhotoBundle\\Controller;\n\nuse Symfony\\Bundle\\FrameworkBundle\\Controller\\Controller;\nuse Symfony\\Component\\HttpFoundation\\Request;\n\nuse Acme\\PhotoBundle\\Form\\Type\\PhotoType;\n\nclass PhotoController extends Controller\n{\n public function addAction(Request $request)\n {\n $form = $this->createForm(new PhotoType(), array());\n\n if ($request->isMethod('POST')) {\n $form->bind($request);\n if ($form->isValid()) {\n $data = $form->getData();\n $url = $this->getPhotoUploader()->upload($data['photo']);\n\n return; // display a response or redirect\n }\n }\n\n return $this->render(\n 'AcmePhotoBundle:Photo:add.html.twig',\n array('form' => $form->createView())\n );\n }\n\n /**\n * @return Acme\\StorageBundle\\Uploader\\PhotoUploader\n */\n protected function getPhotoUploader()\n {\n return $this->get('acme_storage.photo_uploader');\n }\n}If we now want to get the full URL to the uploaded file we can use the parameter we defined earlier in the configuration of AcmeStorageBundle:
$url = sprintf(\n '%s/%s',\n $this->container->getParameter('acme_storage.amazon_s3.base_url'),\n $this->getPhotoUploader()->upload($data['photo'])\n);The only thing left to do is create a route for the action and probably add some logic to store the URL returned by the upload() method in a database. However, that is not really the topic of this article and is explained elsewhere.
One of the best practices in testing code is to use a less information that is context to change in the test code. When writing functional tests we often have to check for the existance of certain strings on a page. However, text and translations change, so let's use the translation keys in our tests instead.
\nWhenever writing functional tests I think it is a good idea to use translation keys in the assertions instead of the real text. The translation keys are less likely to change over time and it is often much simpler, because they don't contain dynamic content.
\nHowever, Symfony 2 automatically translates all text even in the test environment and I could not find an easy solution on how to deactivate translation in the test environment.
\nThe simplest way to disable translation in functional tests is to create a new translator that returns the message ID instead of the translated message.
\n# src/Acme/DemoBundle/Translator/NoTranslator.php\n\nnamespace Acme\\DemoBundle\\Translator;\n\nuse Symfony\\Component\\Translation\\TranslatorInterface;\n\nclass NoTranslator implements TranslatorInterface\n{\n public function trans($id, array $parameters = array(),\n $domain = null, $locale = null)\n {\n return $id;\n }\n\n public function transChoice($id, $number, array $parameters = array(),\n $domain = null, $locale = null)\n {\n return $id;\n }\n\n public function setLocale($locale)\n {\n }\n\n public function getLocale()\n {\n return '--';\n }\n\n public function setFallbackLocale($locale)\n {\n }\n\n public function addResource($resource)\n {\n }\n}Now we need a way to switch the default translator to our NoTranslator. The easiest way to do this is override the translator.class variable, however, this changes the translation for all environments and I want to change the translator only in the test environment.
Another way to override a service is to write a compiler pass.
\n# src/Acme/DemoBundle/DependencyInjection/Compiler/TranslatorCompilerPass.php\n\nnamespace Acme\\DemoBundle\\DependencyInjection\\Compiler;\n\nuse Symfony\\Component\\DependencyInjection\\Compiler\\CompilerPassInterface;\nuse Symfony\\Component\\DependencyInjection\\ContainerBuilder;\nuse Symfony\\Component\\HttpKernel\\KernelInterface;\n\nclass TranslatorCompilerPass implements CompilerPassInterface\n{\n public function process(ContainerBuilder $container)\n {\n $definition = $container->getDefinition('translator.default');\n $definition->setClass('Acme\\DemoBundle\\Translator\\NoTranslator');\n }\n}This would, again, override the translator in all environments. We need an instance of AppKernel to check the environment. At this stage of the boot process of the Symfony 2 kernel we don't have access to the kernel via the dependency injection container. The only place where we have access to the kernel at that early stage is the AppKernel itself and therefore we need to pass it through to our compiler from there.
# app/AppKernel.php\n\n// ...\n\nclass AppKernel extends Kernel\n{\n public function registerBundles()\n {\n // ...\n\n if (in_array($this->getEnvironment(), array('dev', 'test'))) {\n $bundles[] = new Acme\\DemoBundle\\AcmeDemoBundle($this);\n // ...\n }\n\n // ...\n }\n // ...\n}This is absolutely ok to do. You would have to add your bundle anyways in the AppKernel.php and this is also done by one of the default bundles (JMSDiExtraBundle). Now we passed the kernel to AcmeDemoBundle. There we need to initialise the compiler pass with the kernel.
# src/Acme/DemoBundle/AcmeDemoBundle.php\n\nnamespace Acme\\DemoBundle;\n\nuse Symfony\\Component\\DependencyInjection\\ContainerBuilder;\nuse Symfony\\Component\\HttpKernel\\Bundle\\Bundle;\nuse Symfony\\Component\\HttpKernel\\KernelInterface;\n\nuse Acme\\DemoBundle\\DependencyInjection\\Compiler\\TranslatorCompilerPass;\n\nclass AcmeDemoBundle extends Bundle\n{\n private $kernel;\n\n public function __construct(KernelInterface $kernel)\n {\n $this->kernel = $kernel;\n }\n\n public function build(ContainerBuilder $container)\n {\n parent::build($container);\n\n $container->addCompilerPass(\n new TranslatorCompilerPass($this->kernel)\n );\n }\n}The last thing we have to do is to adapt TranslatorCompilerPass to accept the kernel and check the environment.
# src/Acme/DemoBundle/DependencyInjection/Compiler/TranslatorCompilerPass.php\n\nnamespace Acme\\TestingBundle\\DependencyInjection\\Compiler;\n\nuse Symfony\\Component\\DependencyInjection\\Compiler\\CompilerPassInterface;\nuse Symfony\\Component\\DependencyInjection\\ContainerBuilder;\nuse Symfony\\Component\\HttpKernel\\KernelInterface;\n\nclass TranslatorCompilerPass implements CompilerPassInterface\n{\n private $kernel;\n\n public function __construct(KernelInterface $kernel)\n {\n $this->kernel = $kernel;\n }\n\n public function process(ContainerBuilder $container)\n {\n if ('test' === $this->kernel->getEnvironment()) {\n $definition = $container->getDefinition('translator.default');\n $definition->setClass('Acme\\DemoBundle\\Translator\\NoTranslator');\n }\n }\n}Done. We can now write our assertions in functional tests for translation keys instead of translated messages.
\nI added the code required to disable translation to my BraincraftedTestingBundle, but I wanted to explain what I did. If there is a more convenient solution please let me know.
\nUpdate March 19, 2014: Reader Gilles Doge emailed me to add that you can override the translator.class variable only in the test environment:
# app/config/config_test.yml\nparameters:\n translator.class: Acme\\DemoBundle\\Translation\\Translator\\NoTranslatorIn this case you don't need to create an additional compiler pass. However, my solution has the advantage that you can place it in my TestingBundle and have this functionality automatically in all my projects.
\nSymfony2 Cookbook: How to Override any Part of a Bundle - Services & Configuration\nSymfony2 Cookbook: How to work with Compiler Passes in Bundles
", "url": "/blog/symfony2-functional-test-translation-key/", "title": "Use translation keys in Symfony2 functional tests", "date_modified": "2013-06-02T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/rebuild-jekyll-compass/", "content_html": "Guard is a ruby tool to execute commands when file changes and can be used to rebuild a Jekyll site whenever its content changes and Compass whenever the stylesheets change.
\nThis blog uses Jekyll to build the HTML code, Compass for the stylesheets and JavaScript is concatenated and minified. Lately I have written more articles and every time I changed the layout or the text I had to manually recompiled using my Makefile. Every time those extra keystrokes hurt me on the inside.
\nJekyll and Compass each have a watch command built in and there are tools for the JavaScript part, but I don't want to start three different watchers every time I work on braincrafted.com. Another problem is that after Compass build the CSS files, Jekyll needs to run to put CSS files into the correct directory.
\nThere are numerous tools and libraries available to watch for files changes, but I decided to use Guard pretty quickly because it fulfils all of my requirements:
\nRequirement number 1 is important because the builders will place the generated HTML, CSS and JavaScript files in a subdirectory of the watched directory. The second requirement allows me to only execute the builders necessary for a specific file. For example, if a HTML file is changed I only want to run Jekyll. Executing Makefiles allows me to reuse my existing build scripts and saves me some work.
Installation of Guard was pretty easy, at least after I reinstalled my messed up Ruby installation and the syntax for the Guardfile is straight forward.
# ./Guardfile\n\n# Notification via Growl when files change\nnotification :growl\n\n# Ignore the following diretories and files\nignore %r{^_site/}, %r{/Guardfile/}, %r{/config.rb/}, %r{/code/}, %r{/css(-dev)?/}, %r{/js/}\n\nguard :shell do\n\n # When HTML and Markdown files are modified run Jekyll\n watch(/^.*\\.(md|htm|html|xml)/) do |m|\n `make build-jekyll run-dev`\n n \"Built HTML for braincrafted.com\"\n m[0]\n end\n\n # When JavaScript is modified build JS and Jekyll\n watch(/^js-dev\\/.*\\.js/) do |m|\n `make build-js build-jekyll run-dev`\n n \"Built HTML and JavaScript for braincrafted.com\"\n m[0]\n end\n\n # When Sass is modified build CSS and Jekyll\n watch(/^sass\\/(.*)\\.s[ac]ss/) do |m|\n `make build-css build-jekyll run-dev`\n n \"Built HTML and CSS for braincrafted.com\"\n m[0]\n end\n\nendI added a target to my Makefile to make things even more intuitive.
# ./Makefile\n\nwatch:\n @echo \"Watching for changes...\"\n @bundle exec guardSince I was already at it, I also wanted Safari to automatically reload the page (or open it in a new tab if it is not already open). I inlined some lines of AppleScript in my Makefile to accomplish this.
# ./Makefile\n\nDEV_URL = http:\\/\\/braincrafted.com.dev\nPROD_URL = http:\\/\\/braincrafted.com\n\ndefine OPEN_SCRIPT\ntell application \"Safari\"\n set alreadyOpen to false\n set reloadURL to \"__OPEN_URL__\"\n\n repeat with x from 1 to number of windows\n repeat with y from 1 to number of tabs in window x\n set tabURL to URL of tab y of window x\n if tabURL starts with reloadURL then\n set URL of tab y of window x to tabURL\n set alreadyOpen to true\n set current tab of window x to (tab y of window x)\n end if\n end repeat\n end repeat\n\n if alreadyOpen is false then\n tell front window\n set current tab to (make new tab with properties {URL:reloadURL})\n end tell\n end if\n\nend tell\nendef\n\n# Required because by default $OPEN_SCRIPT is interpretated as a command\nexport OPEN_SCRIPT\n\nrun-dev:\n @echo \"Open site in development environment... \\c\"\n @echo \"$$OPEN_SCRIPT\" | sed \"s/__OPEN_URL__/${DEV_URL}/\" | osascript\n @echo \"${CHECK} Done\"\n\nrun:\n @echo \"Open site in production environment... \\c\"\n @echo \"$$OPEN_SCRIPT\" | sed \"s/__OPEN_URL__/${PROD_URL}/\" | osascript\n @echo \"${CHECK} Done\"When I now change something in the project, the updated page is already loaded when I switch to Safari.
\nSadly Spotify misses a lot of useful keyboard shortcuts, but fortunately we can use AppleScript and BetterTouchTool to create a shortcut to add a song to the queue.
\nI spent the last hour trying to set the easiest and most reliable way to create a keyboard shortcut for Spotifys Add to Queue functionality on OS X. Since I found no solution for this I decided to post it here.
\nUpdate June 14, 2013: In the last update Spotify moved Queue in the context menu from the second position to the 6th. I updated the article accordingly (but not the screenshot).
\nThere is no menu bar entry for this functionality in Spotify and therefore no way to use an ApplyScript. I had to simulate mouse clicks to get this done. There exists a range of different tools to set keyboard shortcuts, but I personally prefer BetterTouchToul from Andreas Hegenberg.
\n![\"BetterTouchTool\"](\"/blog/spotify-queue-keyboard-shortcut/bettertouchtool-320.png\")
In the main BetterTouchTool window you first need to add Spotify to the list of applications. Just press the small plus button in the bottom of the list. I created two shortcuts. One for adding all tracks in the current view to the queue and another one for adding all currently selected tracks to the queue.
\nLet's first create the shortcut for adding all tracks in the current view to the queue. Manually we would first press Cmd+A to select all tracks, then click the right mouse button and select the second entry from the context menu. We need to create a new shortcut by pressing the Add New Shortcut button in the lower right corner. Define your favourite shortcut to it (I mapped the CAPSLOCK key to Crtl+Option+Shift+Command and used CL+Q) and set Trigger Other Keyboard Shortcut to Cmd+A. Click Attach Another Action and set Trigger Predefined Action to Rightclick. Next we need to attach two six more actions that both all should trigger the Down key. The last action we need to attach is the Enter key.
The shortcut to add only the selected songs to the queue is very similar, just set the shortcut to trigger Right-click instead of Cmd+A.
\nPlease note that the mouse has to be hovered over the selected songs when triggered the shortcut.
\nA useful Caps Lock key - BrettTerpstra.com
", "url": "/blog/spotify-queue-keyboard-shortcut/", "title": "Create a keyboard shortcut to queue songs in Spotify on OS X", "date_modified": "2013-06-07T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/kinda-like-the-opposite-of-regexp/", "content_html": "Regular expressions can match a pattern in a text and return the matches. However, what if we want find all texts that would match a given pattern. I created ExpExp, a PHP library, that allows you to do this.
\nTwo years ago I have written a library for a project to generate strings based on a given pattern called ExpExp. ExpExp takes a pattern (a subset of regular expressions) and returns all strings that would match the pattern. For example, the pattern foo(bar|baz) would expand to foobar and foobaz.
Last week I found the library again and I decided, mostly for fun and pleasure, to add new features and to rewrite the whole code. I also moved to code to the Braincrafted namespace. You can find it on Github.
\nWhile my goal is to support as many patterns supported by regular expressions as possible, it will ever be only a subset. For example, the star operator in regular expressions matches an infinite amount of infinite long strings. ExpExp can never support such things. Let's stop talking about what's not possible, but about the features that work right now.
\nExpExp currently supports the following operators:
\nI am now going to discuss these operators in more detail.
\n| Pattern | \nExpansions | \n
|---|---|
foo(bar) | \n ['foobar'] | \n
| Pattern | \nExpansions | \n
|---|---|
foo[abc] | \n ['fooa', 'foob', 'fooc'] | \n
| Pattern | \nExpansions | \n\n |
|---|---|---|
foo{3} | \n foo | \n \n |
foo{1,3} | \n ['foo', 'foofoo', 'foofoofoo'] | \n \n |
foo{,3} | \n ['', 'foo', 'foofoo', 'foofoofoo'] | \n Alias for foo{0,3} | \n
foo(bar){2} | \n foobarbar | \n \n |
| Pattern | \nExpansions | \n
|---|---|
foo|bar | \n ['foo', 'bar'] | \n
foo(bar|baz) | \n ['foobar', 'foobaz'] | \n
| Pattern | \nExpansions | \n
|---|---|
[[:lower:]] | \n ['a', 'b', 'c', ..., 'z'] | \n
[[:lower:][:upper:]] | \n ['a', ..., 'z', 'A', ..., 'Z'] | \n
Other character classes are
\n| Character class | \nDescription | \nRegular expression | \n
|---|---|---|
upper | \n Uppercase characters | \n[A-Z] | \n
lower | \n Lowercase characters | \n[a-z] | \n
digit | \n Digits | \n[0-9] | \n
word | \n Alphanumeric characters and underscore | \n[A-Za-z0-9_] | \n
space | \n Space characters | \n[\\t\\n\\r ] | \n
vspace | \n Vertical space characters | \n[\\n\\r] | \n
hspace | \n Horizontal space characters | \n[\\t ] | \n
punct | \n Punctuation characters | \n[!\"#$%&'()*+,-./:;<=>?@[]^_{|}~`] | \n
There are also multiple shortcuts available:
\n| Shortcut | \nCharacter classes | \n
|---|---|
\\d | \n digit | \n
\\w | \n word | \n
\\s | \n space | \n
\\v | \n vspace | \n
\\h | \n hspace | \n
The dot operator is replaced by all characters from the word character class.
| Pattern | \nExpansions | \n
|---|---|
foo. | \n ['fooa', 'foob', ..., 'foo_'] | \n
The optional operator allows you to make a character or the content inside a parentheses optional.
\n| Pattern | \nExpansions | \n
|---|---|
abc? | \n ['abc', 'ab'] | \n
foo(bar)? | \n ['foobar', 'foo'] | \n
Of course you can combine all of these operators. For example,
\nab(cde|[xyz])will expand to
\nabcdeabxabyabzI don't think there are many use cases in real life for this library, but it was fun and challenging project.
\nIf you want to play around with ExpExp or find a use cases in one of your project you can use Composer to install it:
\n{\n \"require\": {\n \"braincrafted/expexp\": \"dev-master\"\n }\n}I already have tagged some versions, so you can use, for example, 0.2.* to get a (relative) stable release.
Pass the pattern to the expand() method and ExpExp will return an array with all expansions:
use Bc\\ExpExp\\ExpExp;\n\n$e = new ExpExp();\n$result = $e->expand('abc|xyz');That's it.
", "url": "/blog/kinda-like-the-opposite-of-regexp/", "title": "Kinda like the opposite of regular expressions", "date_modified": "2013-10-20T18:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/symfony-bower-bootstrap/", "content_html": "There exist a lot of different ways to get third party assets into your project and one such way is Bower. Bower is an asset management tool from Twitter and you can use it to get Bootstrap into your Symfony project. I will explain how you can use it in combination with BraincraftedBootstrapBundle, my bundle that integrates Bootstrap into Symfony.
\nFirst I will assume that we have a fresh installation of Symfony Framwork standard edition and that you have Bower installed. If you don't, do it now:
\n$ npm install -g bower\n$ composer create-project symfony/framework-standard-edition symfony-bower-bootstrap/ 2.4.5\n$ cd symfony-bower-bootstrapWe can now add BraincraftedBootstrapBundle to the project and use Bower to download the Bootstrap assets:
\n$ composer require braincrafted/bootstrap-bundle:@stable\n$ bower init\n$ bower install bootstrap --saveAdd the bundle class to app/AppKernel.php
// app/AppKernel.php\n\nclass AppKernel extends Kernel\n{\n public function registerBundles()\n {\n $bundles = array(\n // ...\n new Braincrafted\\Bundle\\BootstrapBundle\\BraincraftedBootstrapBundle(),\n );\n // ...\n }\n}In this article I am going to use Assetic to configure and compile the Bootstrap assets. BootstrapBundle comes with a handy auto configure functionality that configures Assetic for you. However, this functionality only works if you install Bootstrap using Composer and therefore we need to disable it.
\n# app/config/config.yml\n\nbraincrafted_bootstrap:\n auto_configure:\n assetic: falseThe current stable release of BootstrapBundle supports only the Less version of Bootstrap, but BootstrapBundle v2.1 adds support for the official Sass port of Bootstrap. In this article I am going to use the Less version, but it works pretty similar if for bootstrap-sass.
\n# app/config/config.yml\n\nassetic:\n filters:\n less:\n node: /usr/local/bin/node\n node_paths: [/usr/local/lib/node_modules]\n apply_to: \"\\.less$\"\n cssrewrite: ~We also need to tell Assetic where it finds the assets. By default Bower installs assets in the bower_components directory. If you have modified the location you also need to change it in the following snippet:
# app/config/config.yml\n\nassetic:\n ...\n assets:\n bootstrap_css:\n inputs:\n - %kernel.root_dir%/../bower_components/bootstrap/less/bootstrap.less\n - %kernel.root_dir%/../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/less/form.less\n filters:\n - less\n - cssrewrite\n output: css/bootstrap.css\n bootstrap_js:\n inputs:\n - %kernel.root_dir%/../bower_components/bootstrap/js/transition.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/alert.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/button.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/carousel.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/collapse.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/dropdown.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/modal.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/tooltip.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/popover.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/scrollspy.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/tab.js\n - %kernel.root_dir%/../bower_components/bootstrap/js/affix.js\n - %kernel.root_dir%/../vendor/braincrafted/bootstrap-bundle/Braincrafted/Bundle/BootstrapBundle/Resources/js/bc-bootstrap-collection.js\n output: js/bootstrap.js\n jquery:\n inputs:\n - %kernel.root_dir%/../bower_components/jquery/dist/jquery.js\n output: js/jquery.jsNote that BootstrapBundle includes a less and a js file to provide additional fixes and functionality when using Bootstrap in a Symfony application. You need to include those from the installed bundle.
If you now dump the assets you should three files: css/bootstrap.css, js/bootstrap.js and js/jquery.js.
$ php app/console assetic:dumpNote that Assetic will also create the intermediate files when run in the dev environment.
You can now create a basic layout and include the Bootstrap CSS and JavaScript assets and start building your application.
\n<!-- src/Acme/DemoBundle/Resources/views/layout.html.twig -->\n\n<!DOCTYPE html>\n<html>\n<head>\n\n <title>Bootstrap 101 Template</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <!-- Bootstrap -->\n <link href=\"{{ asset('css/bootstrap.css') }}\" rel=\"stylesheet\" media=\"screen\">\n\n <!-- HTML5 Shim and Respond.js add IE8 support of HTML5 elements and media queries -->\n {% include 'BraincraftedBootstrapBundle::ie8-support.html.twig' %}\n\n</head>\n\n<body>\n <div class=\"container\">\n <div class=\"page-header\">\n <h1>Hello, world!</h1>\n </div>\n </div>\n\n <!-- jQuery (necessary for Bootstraps JavaScript plugins) -->\n <script src=\"{{ asset('js/jquery.js') }}\"></script>\n <!-- Include all JavaScripts, compiled by Assetic -->\n <script src=\"{{ asset('js/bootstrap.js') }}\"></script>\n</body>\n</html>_Please note that the BootstrapBundle includes a basic layout template you can use. However, there has been a bug in v2.0._that causedbootstrap.jsnot to load. We fixed the bug inv2.1.0-alpha1.*
![\"Screenshot](\"/blog/symfony-bower-bootstrap/login-320.png\")
In addition to this article I also created a demo project where you can follow the steps in this article in a full Symfony project. The source code of this demo project resides on Github: florianeckerstorfer/symfony-bower-bootstrap.
Last Saturday I finished reading Creativity, Inc. by Ed Catmull, the president of Pixar Animation and Disney Animation. He writes about how to build and run a creative company and how Pixar's management fosters creativity and innovation.
\nI really enjoyed reading the book and I think most of the principles do not only apply to movie companies but to all companies that employ creative people. That includes software companies. It also made me want to watch Pixar movies. Last weekend I already saw Toy Story 3 and Brave. Seven more movies to go.
\nI just searched 15 minutes to find out how to resize a image using GraphicsMagick.
\ngm convert -resize 150x100 in.jpg out.jpgThis will resize the image in.jpg to 150x100 and saves the result in out.jpg. You can resize the image by either providing the width or the height:
gm convert -resize 150 in.jpg out.jpg\ngm convert -resize x100 in.jpg out.jpgLast Monday Apple released a new programming language for the iOS and Mac platforms: Swift. Currently I am about half way through the The Swift Programming Language (iBook Store) book from Apple and I want to help you getting started to write some code in Swift. This is not a exhaustive guide, it introduces you to some of the basic concepts of Swift.
\nNote: While I don't intend to write an exhaustive guide to Swift the article in its current form still misses some crucial pieces.
\nTo get started with Swift you need the new Xcode 6 Beta. You can download it from Apples Developer area after you have logged in with your developer account. You need enroll either in the iOS or Mac developer program for $100 per year.
\nOpen Xcode and create a new file (File > New > File) and select the Playground template in iOS > Source:
\n![\"Xcode](\"/blog/swift-getting-started/xcode-new-file-320.png\")
Next you need to select a folder where to save your playground file and enter a filename. If you have done that you should see a new window where you can start to write some Swift code.
\n![\"New](\"/blog/swift-getting-started/xcode-new-swift-file-640.png\")
Constants and variables can be used to hold a value. The difference between constants and variables is that constants have a constant value, once you assign a value to a constant you cannot change that value. Variables on the other hand have a variable value, you can change the value of a variable any time you want. You can define constants with the let keyword and variables using the var keyword.
// Define a constant\nlet myFirstConstant = \"Hello Constant\"\n\n// Define a variable\nvar myFirstVariable = \"Hello Variable\"\n\n// Change the value of the variable\nmyFirstVariable = \"Another value\"\n\n// This will raise an error\n// myFirstConstant = \"Another value\"Note: Maybe you have noticed that the semicolon at the end of each line is missing. In Swift you don't need to add a semicolon at the end of a statement if each statement is on its own line. If you want two write two statements on a single line you have to separate them with a semicolon.
\nlet one = 1; var two = 2Now that we have defined a variable and a constant we need to learn a little bit about types. Swift is a strongly typed language, each variable and constant needs to have a type. It supports all major types like strings, integers, floats, booleans and so own. In a strongly typed language you normally have to define the type everytime you define a variable or constant. As you have seen in the previous example we didn't define a type for myFirstConstant and myFirstVariable. We can omit the type when Swift can infer the type. In the example above Swift was able to infer that the type of myFirstConstant and myFirstVariable is String because we set the value immediately to a string value. However, we could have also provided the type explicetely.
let myFirstConstant: String = \"Hello Constant\"\nvar myFirstVariable: String = \"Hello Variable\"In this example we can omit the type because Swift can infer it based on the value. If you define a variable and don't immediately assign a value you have to define the type.
\nvar one: Int\nvar two: IntHere are a few more example with other types supported by Swift.
\nvar anInteger: Int = 1\nvar anBoolean: Bool = true\nvar aString: String = \"Hello\"\nvar aDouble: Double = 4.2\nvar aFloat: Float = 9.9In general variables also have to have a value. However, Swifts has the concept of Optional Variables that I will cover in a later chapter.
\nArray is a type that can contain multiple values of the same type. For example, if you want to create a list of the houses in Game of Thrones.
\nvar houses = [ \"Stark\", \"Lannister\", \"Baratheon\", \"Greyjoy\" ]Swift can infer the type of houses based on the value. We could also explicetly state the type of the array.
var houses: String[] = [ \"Stark\", \"Lannister\", \"Baratheon\", \"Greyjoy\" ]Of course we can also create an array of integers.
\nvar favNumbers = [ 3, 7, 42, 69 ]We can access the element of an array by using the index syntax. Like in most other programming languages the first index of an array is 0.
houses[0]\n// \"Stark\"\n\nhouses[1]\n// \"Lannister\"Unlike in more low-level languages like Objective C or C types in Swift have methods and operations. For example, we can count the elements in an array
\nhouses.count\n// 4Arrays are ordered, therefore each element has an index (must be unique) and there are no gaps in the list of indeces. If you have an array with 5 elements and you remove the element with index 2, the element at index 3 will be moved to index 2 and the element at index 4 will be moved to index 3.
\nCollections are somewhat similar to arrays, but while arrays are ordered (each element has an index and the array is orderd by this index) collections are unordered. The index of an collection does not have to be an integer, but can be a string or a double.
\nvar lords = [ \"stark\": \"ned\", \"lannister\": \"tywin\", \"baratheon\": \"robert\" ]Just like arrays you can access elements in a collections using their index.
\nlords[\"stark\"]\n// \"ned\"One of the most common things you want to do with an array or a collection is that you want to step through each element. Swift offers a number of different types of loops. The probably easiest one to understand is the for-in loop.
\nfor house in houses {\n house\n}Note: If you type this code in a playground in Xcode you will see the number of times the body of the loop is executed. In the example above this would be four times. You can click on the circle icon right to this to view the value of the variable house in each iteration.
![\"Value](\"/blog/swift-getting-started/xcode-for-in-640.png\")
If you don't want to iterate through an array or collection but rather iterate to a range of values you can use the range operator. In fact, in Swift there are two range operators. The closed range operator is a...b and returns all numbers between a and b including a and b. The half-closed range operator is a..b and returns the numbers between a and b including a but excluding b.
for i in 1...5 {\n i\n}\n// 1\n// 2\n// 3\n// 4\n// 5\n\nfor j in 1..5 {\n j\n}\n// 1\n// 2\n// 3\n// 4Swift also supports \"normal\" for loops, while and do while loops.
\nNote: If you have already experience in another programming language you might be wondering if I forgot the parentheses in the for statement. I didn't. In Swift you don't use parenthesis when writing Control Flow (for, while,if,switch, …) statements.
Conditional statements allow you to execute only when a certain condition is met. The conditional is often also called an expression and we say that an expression is true or is false or is evaluated to true or is evaluated to false.
\nlet num = 5\nif num == 5 {\n \"Number is 5\"\n}\n// \"Number is 5\"Swift supports all major operators known from other programming languages like ==, !=, >, <, >=, <= and so on.
Often you need to execute code when an expression is valid and another piece of code when the expression is not valid. Like any other programming language, Swift has an else statement.
let num = 10\nif num == 5 {\n \"Number is 5\"\n} else {\n \"Number is not 5\"\n}\n// \"Number is not 5\"In the above example this is the same as if you would write two if statements, one with a positive expression, one with the negated expression.
let num = 10\nif num == 5 {\n \"Number is 5\"\n}\nif num != 5 {\n \"Number is not 5\"\n}\n// \"Number is not 5\"However this will not always work. For example, consider the following piece of code:
\nlet num = 10\nif num > 5 {\n \"Number is greater than 5\"\n}\nif num > 3 {\n \"Number is grater than 3\"\n}\n// \"Number is greater than 5\"\n// \"Number is greater than 3\"If you only want to output one of the two lines you either have to adapt the second conditional to num > 3 && num <= 5 or you need to use else. Using else is a lot more elegant and readable.
let num = 10\nif num > 5 {\n \"Number is greater than 5\"\n} else {\n \"Number is grater than 3\"\n}\n// \"Number is greater than 5\"You can also combine the if and else statements to implement multiple conditionals.
let num = 42\nif num == 5 {\n \"Number is 42\"\n} else if num == 42 {\n \"You've found the answer\"\n} else {\n \"Number is not 5 and not the answer\"\n}\n// \"You've found the answer\"As mentioned in the Constants & Variables chapter Swift requires you to always set a value for a variable for you can read it. In other programming languages variables have a default value (for example, null in PHP or undefined in JavaScript) when you use a variable before it has a value assigned. When you execute the following code snippet you will get a compiler error.
var foo: Int\n\nif foo == 5 {\n \"The value is 5\"\n}\n// Compiler error: \"error: variable 'foo' used before being initialized\"\nThis behaviour helps you catch a lot of errors where you forgot to assign a value or assigned a value to the wrong variable. However, there exist situations where you cannot assign a value to variable because we don't know the value yet. For example, when retrieving data using an HTTP request we may not have a value when the request fails. For such cases you can specifically define a variable as optional and assign nil to the variable. If you explicitely state that a variable is optional it is your responsibility to check whether a value has been asigned before using it. You can define an optional variable by adding a question mark ? to the type definition.
var foo: Int?\n\nif foo {\n \"Foo is initialized\"\n} else {\n \"Foo is not initialized\"\n}\n// \"Foo is not initialized\"In this example the conditional evaluates to true if the variable foo has a value assigned (is not nil) and to false otherwise (is nil). You can also assign nil later to a variable.
var foo: Int?\nfoo = 5\n\nif foo {\n \"Foo is initialized\"\n} else {\n \"Foo is not initialized\"\n}\n\nfoo = nil\n\nif foo {\n \"Foo is initialized\"\n} else {\n \"Foo is not initialized\"\n}\n// \"Foo is initialized\"\n// \"Foo is not initialized\"It's important to note that only the variable name (foo in the examples above) is only a valid LogicValue that can be used in a conditional if the variable is optional. The following example will throw a compiler error:
var bar: Int = 5\nif bar {\n \"Bar is initialized\"\n}\n// Compiler error: \"type 'Int' does not conform to protocol 'LogicValue'\"It is a common scenario that you have a variable with an optional value and after you check that it has a value it should always have a value. You can use var foo = optionalFoo inside the conditional to assign the optional value to a non-optional value.
var foo: Int? = 5\n\nif var bar = foo {\n bar = 7\n bar = nil\n}\n// Compiler error: \"could not find an overload for '__conversion' that accepts the supplied arguments\"The first assignment bar = 7 goes through, however, the compiler will throw an error when you want to assign nil to bar.
It is worth noting that constants can also have an optional type.
\nlet foo: Int?\n\nif foo {\n \"init\"\n} else {\n \"not init\"\n}Please note that this article can be considered as a working draft. At this point it includes some of the basic concepts of the Swift programming language, but there exists a lot of stuff that is not covered. If you are eager to learn more please read The Swift Programming Language (iBook Store) from Apple. You can read the book also online. If you want to try things out and don't want to type every example you can download the Swift Tour as a playground file.
\nIn the beginning of May I spent a weekend with some friends in Prague, Czech Republic. Due to a late arrival and a thorough exploration of Pragues nightlife I had only half a day to walk around the city. Here are some of the photos I took on this weekend.
\n![\"Prague,](\"/blog/prague-may-2014/IMG_6523-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6436-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6443-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6461-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6459-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6474-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6468-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6487-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6480-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6489-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6520-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6502-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6490-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6584-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6588-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6611-320.jpg\")
![\"Prague,](\"/blog/prague-may-2014/IMG_6607-320.jpg\")
I am already looking forward to my trips to Stockholm and Hamburg in July.
", "url": "/blog/prague-may-2014/", "title": "Prague, May 2014", "date_modified": "2014-06-09T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/buliding-symfony2-with-gulp/", "content_html": "Today Bernhard asked on Twitter where we see asset handling going and I replied that Grunt or Gulp will take over. I am currently using Grunt in some of my projects (including to build this website) and Gulp for some smaller stuff. However, I wanted to move one of my larger Symfony 2 projects from Grunt to Gulp for a while now and I took the discussion on Twitter as a reason to finally do it. In this article I want to explain some of the aspects of using Gulp (and Bower) in a Symfony 2 project.
\nI use Gulp not only for building my assets but also to run my tests, code coverage and checkstyle and I will tackle all these aspects in these article.
\nFirst I need to talk about the software and libraries I am using in my project and that are relevant to this article.
\nPlease note that this article has been updated to reflect the changes in the directory structure in boostrap-sass v3.2
\nEvery Symfony2 project (that uses the standard edition) has the same basic structure. However, since it is a backend framework it gives you little guidance on how to organise assets. Per convention Symfonys assets:install command will copy everything from a bundles Resources/public directory into the web/ folder of the project. I am using this convention to make dealing with assets path in my Sass, JavaScript and Gulp files easier. Here are the parts of my project structure that are relevant to this article:
- src/Bundle/\n - AcmeDemo/\n - Resources/public/\n - js/\n - sass/\n - AcmeFrontendBundle/\n - Resources/public/\n - js/\n - sass/\n - AcmeUserBundle/\n - Resources/public\n - js/\n - sass/\nweb/\n - bundles/\n - components/\n - css/\n - fonts/\n - js/\nGulpfile.jsIf I run the assets:install --symlink command, Symfony will create symlinks from the web/bundles/ directory to the public directory in the corresponding bundle for me. With my structure the web/bundles/ directory looks like this:
- web/bundles/\n - acmedemo/\n - acmefrontend/\n - acmeuser/I think it is obvious that the web/css/ directory will hold the compiled CSS files, web/fonts/ the font files and web/js/ the JavaScript files. The web/components/ directory stores the assets downloaded by Bower and I will take little bit more about it later.
If you have never worked with Gulp and need to know how to install it and learn more about the basic concepts you can either head to the Getting Started guide or the Building with Gulp article on Smashing Magazine. In short, you can install Gulp using NPM.
\nYou need to install Gulp both globally and locally in your project:
\n$ npm install -g gulp\n$ npm install --save-dev gulpNow you can create a Gulpfile.js and require the gulp module:
var gulp = require('gulp');\n\ngulp.task('default', function () {});First I want to talk about managing and building the stylesheets for my project.
\nSass has great features that make it superior to plain CSS and one of them is the ability to define variables. However, if I compile the different Sass files separately and concatenate them later I can't reference variables from different source files. Because I want a single Sass file anyway I use the import statement to include them into a single master file. I place a master.scss in every bundle and import every .scss file of the bundle. The master.scss of the AcmeFrontendBundle includes the master.scss from every other bundle. It looks like this:
// src/Acme/Bundle/FrontendBundle/Resources/public/sass/master.scss\n\n@import '../../acmeuser/sass/master';\n@import '../../acmeother/sass/master';Before I can talk about how I use Bootstrap I need to talk about Bower. The first thing with Bower I did was changing the default download directory by creating a .bowerrc file.
{\n \"directory\": \"web/components\"\n}Then I downloaded bootstrap-sass-official (as the name says the official Sass port of Bootstrap) using bower install --save bootstrap-sass-official.
I use my BraincraftedBootstrapBundle to integrate Bootstrap into Symfony. However, I disabled the auto configuration feature for Assetic because I want to configure it myself using Bower and Gulp and therefore it's not relevant if you use the bundle or not. Bower downloads the Sass files into components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/ and I just import it from my master.scss in AcmeFrontendBundle. Remember that the assets:install commands copies the files into web/bundles/ and the compilation takes place there.
// src/Acme/Bundle/FrontendBundle/Resources/public/sass/master.scss\n\n@import '../../../components/bootstrap-sass-official/assets/stylesheets/_bootstrap';\n\n@import '../../acmeuser/sass/master';\n@import '../../acmeother/sass/master';Finally I have reached a point where we can talk about building the stylesheets, that is, compiling Sass into CSS code. To actually compile Sass I use gulp-sass and the Node.js port of Sass (it's faster).
\n$ npm install --save-dev gulp-sassBecause of the way how I import everything I need into my master Sass file the code for the Gulp task remains small and simple.
\n// Gulpfile.js\n\nvar sass = (sass = require('gulp-sass'));\n\ngulp.task('sass', function () {\n gulp\n .src('./web/bundles/acmefrontend/sass/master.scss')\n .pipe(sass({ sourceComments: 'map' }))\n .pipe(gulp.dest('./web/css/'));\n});First I need to symlink the assets into web/bundles/ by running php app/console assets:install --symlink. Executing the task with gulp sass will compile the stylesheets from all bundles and Bootstrap and saves them in web/css/master.css. In my project I have a layout template in my frontend bundle where I can now include this stylesheet.
<!-- src/Acme/Bundle/FrontendBundle/Resources/views/layout.html.twig -->\n\n<link href=\"{{ asset('/css/master.css') }}\" rel=\"stylesheet\">Everything regarding stylesheets should work now; except the Glyphicons provided by Bootstrap.
\nBootstrap includes Glyphicons, an icon font, in its stylesheets by referencing them with bootstrap/. However, the font files are located in web/components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/ and the CSS code in web/css/. I could just change the path to point to web/components, but I am picky when it comes to path and how they look (what if somebody checks the source?) and therefore I copy them into the web/fonts/ directory using a Gulp task. The gulp-copy plugin provides exactly the functionality I require. It has a prefix option that removes the unwanted directories from the beginning of source path.
// Gulpfile.js\n\nvar copy = (copy = require('gulp-copy'));\n\ngulp.task('fonts', function () {\n return gulp\n .src('./web/components/bootstrap-sass-official/assets/fonts/bootstrap/*')\n .pipe(copy('./web/fonts', { prefix: 7 }));\n});However, the path is still wrong, instead of bootstrap/ it should be ../fonts/. Luckily Bootstrap uses a variable for this path and I can change it by adding the following line before importing Bootstrap into my Sass.
// src/Acme/Bundle/FrontendBundle/Resources/public/sass/master.scss\n\n$icon-font-path: '../fonts/';Running gulp fonts sass will execute both the fonts and the sass task and now everything should work fine.
I use RequireJS as module and file loader for my project to load only those scripts dynamically that a specific page requires. The entry point of the JavaScript is app.js in AcmeFrontendBundle. Each bundle has it's own main.js that itself requires the files and modules it needs.
The app.js also needs to configure jQuery and the jQuery plugins provided by Bootstrap, because these don't have RequireJS modules defined.
// src/Acme/Bundle/FrontendBundle/Resources/public/js/app.js\n\nrequire.config({\n paths: {\n bootstrap: '../../bootstrap',\n jquery: '../../jquery',\n },\n shim: {\n 'bootstrap/affix': { deps: ['jquery'], exports: '$.fn.affix' },\n 'bootstrap/alert': { deps: ['jquery'], exports: '$.fn.alert' },\n 'bootstrap/button': { deps: ['jquery'], exports: '$.fn.button' },\n 'bootstrap/carousel': { deps: ['jquery'], exports: '$.fn.carousel' },\n 'bootstrap/collapse': { deps: ['jquery'], exports: '$.fn.collapse' },\n 'bootstrap/dropdown': { deps: ['jquery'], exports: '$.fn.dropdown' },\n 'bootstrap/modal': { deps: ['jquery'], exports: '$.fn.modal' },\n 'bootstrap/popover': { deps: ['jquery'], exports: '$.fn.popover' },\n 'bootstrap/scrollspy': { deps: ['jquery'], exports: '$.fn.scrollspy' },\n 'bootstrap/tab': { deps: ['jquery'], exports: '$.fn.tab' },\n 'bootstrap/tooltip': { deps: ['jquery'], exports: '$.fn.tooltip' },\n 'bootstrap/transition': { deps: ['jquery'], exports: '$.fn.transition' },\n },\n});\n\nrequire(['main']);The interesting part in the above code is the last line: it tells RequireJS to load the main.js file in the same directory. Currently I don't have a lot of JavaScript code in my project, but the following code from main.js enabled Bootstrap alert messages.
// src/Acme/Bundle/FrontendBundle/Resources/public/js/main.js\n\ndefine(function (require) {\n require(['jquery', 'bootstrap/alert'], function () {\n $('.alert').alert();\n });\n});But what about JavaScript code from other bundles you might ask? I added an entry to the paths option in app.js and then require it at the bottom of the file.
// src/Acme/Bundle/FrontendBundle/Resources/public/js/app.js\n\nrequire.config({\n paths: {\n // ...\n acmeuser: '../../acmeuser/js',\n },\n shim: {\n // ...\n },\n});\n\nrequire(['main', 'acmeuser/main']);The main.js of the AcmeUserBundle can now require other modules.
// src/Acme/Bundle/UserBundle/Resources/public/js/main.js\n\ndefine(function (require) {\n require(['jquery'], function () {\n $('.alert').addClass('hello-world');\n });\n});Actually, in my current setup I don't really build JavaScript files. Because I use RequireJS I don't have to concatenate them; I just copy them into web/js/.
// Gulpfile.js\n\ngulp.task('js', function () {\n gulp\n .src([\n './web/bundles/*/js/**/*.js',\n './web/components/bootstrap-sass-official/assets/javascripts/bootstrap/*.js',\n './web/components/jquery/dist/jquery.js',\n './web/components/requirejs/require.js',\n ])\n .pipe(gulp.dest('./web/js'));\n});It can become tedious to execute the sass and js tasks everytime the code of the Sas or JavaScript code changes. Therefore Gulp includes, as most modern build tools do, a watch functionality. In addition I use LiveReload to automatically reload my browser window when the CSS or JavaScript changes.
Gulp includes the watch() function by default. I use a glob pattern to watch Sass and JavaScript files separately. Of course it would be possible to use only one watcher for both, but then the JavaScript task would run even if only a stylesheets was changed.
// Gulpfile.js\n\ngulp.task('watch', function () {\n var onChange = function (event) {\n console.log('File ' + event.path + ' has been ' + event.type);\n };\n gulp\n .watch('./src/Acme/Bundle/*/Resources/public/sass/**/*.scss', ['sass'])\n .on('change', onChange);\n gulp\n .watch('./src/Acme/Bundle/*/Resources/public/js/**/*.js', ['js'])\n .on('change', onChange);\n});LiveReload is a great tool to reload the browser window when a file changes. First I install the gulp-livereload plugin and then I include a snippet in my layout. It's also possible to use a browser extension, but I prefer having everything I need in the repository. After installing the plugin I need to adapt the code of the watch task to inform LiveReload about the changed files.
// Gulpfile.js\n\nvar livereload = require('gulp-livereload');\n\ngulp.task('watch', function () {\n var onChange = function (event) {\n console.log('File ' + event.path + ' has been ' + event.type);\n // Tell LiveReload to reload the window\n livereload.changed();\n };\n // Starts the server\n livereload.listen();\n gulp\n .watch('./src/Tvst/Bundle/*/Resources/public/sass/**/*.scss', ['sass'])\n .on('change', onChange);\n gulp\n .watch('./src/Tvst/Bundle/*/Resources/public/js/**/*.js', ['js'])\n .on('change', onChange);\n});In the layout I test if the environment is dev and then include the LiveReload snippet.
// src/Acme/Bundle/FrontendBundle/Resources/views/layout.html.twig\n\nI use Gulp also to run PHP-specific tasks and PHPUnit and PHP_CodeSniffer are just two of them. Because a Gulpfile.js is just a JavaScript file executed using Node.js I can run arbitrary shell commands.
I use the gulp-phpunit plugin by Mike Erickson to run PHPUnit using Gulp.
\n$ npm install --save-dev gulp-phpunitI use the task() function to create a new task with the name test. The src() function allows me to use a glob pattern to select the files I want to test. If you use another directory structure you need to adapt this pattern.
// Gulpfile.js\n\nvar phpunit = (phpunit = require('gulp-phpunit'));\n\ngulp.task('test', function () {\n return gulp.src('./src/Acme/Bundle/*/Tests/**/*.php').pipe(\n phpunit('./bin/phpunit', {\n debug: false,\n configurationFile: './app/phpunit.xml',\n })\n );\n});I can execute the task using gulp test. The gulp-phpunit plugin provides a wide range of options. I also create a code coverage report.
// Gulpfile.js\n\ngulp.task('coverage', function () {\n return gulp.src('./src/Tvst/Bundle/*/Tests/**/*.php').pipe(\n phpunit('./bin/phpunit', {\n debug: false,\n configurationFile: './app/phpunit.xml',\n coverageHtml: './build/coverage',\n })\n );\n});To run PHP_CodeSniffer I use the gulp-phpcs plugin by Dmitriy S. Simushev.
\n// Gulpfile.js\n\nvar phpcs = require('gulp-phpcs');\n\ngulp.task('checkstyle', function () {\n return gulp\n .src(['src/Tvst/Bundle/**/*.php'])\n .pipe(phpcs({ bin: './bin/phpcs', standard: 'PSR2', warningSeverity: 0 }))\n .pipe(phpcs.reporter('log'));\n});I also created a shortcut to execute both coverage and checkstyle.
// Gulpfile.js\n\ngulp.task('verify', ['coverage', 'checkstyle']);During my build process I also need to run Symfony2 commands. Instead of using a plugin I use the child_process module that comes with Node.js to execute Shell commands. Because the Gulpfile consists of plain JavaScript code there exists no need to use a specific plugin.
// Gulpfile.js\n\nvar exec = require('child_process').exec;\n\ngulp.task('installAssets', function () {\n exec('php app/console assets:install --symlink', logStdOutAndErr);\n});\n\n// Without this function exec() will not show any output\nvar logStdOutAndErr = function (err, stdout, stderr) {\n console.log(stdout + stderr);\n};You can see that I created a Gulp task to run the install assets commands. I can integrate this task into other tasks and thus I will not forget to run it when building my assets. In my Gulpfile I also have tasks to load fixtures and update the database schema.
\nThe project I am using this build system for is not yet in production and therefore there are still some things missing. First of all I haven't added minification of CSS and JavaScript to the Gulpfile. Another problem I have with the current setup is that the components/ and bundles/ directories reside in web/ and are accessible by users. Before going into production I want to move these two directories somewhere else.
Another problem that could become relevant when my stylesheets become bigger is that every change in a .scss file will cause a compilation of all Sass code (including Bootstrap). I might need to figure out a way to compile, for examples, bundles separately and concatenate them only for production.
My Gulpfile still misses some other smaller things. For example, I want to use CSSComb to sort the properties in the stylesheets and I want to integrate Autoprefixer to automatically add vendor prefixes to CSS properties. Linting of Sass and JavaScript code is also missing.
\nI'm satisfied with my current Gulp setup. As mentioned above it lacks some features I need to add before going in to production. The build system is fast, flexible and (hopefully) will scale well. It's not fully automatic, I have to add a little bit of configuration when creating a new bundle, but that happens not often and I prefer control over automation in these cases.
\nThe system is opinionated and it works well in my setup and with my project structure. If you have made different decisions about structure or need some other features there might be problems. Still I am happy about feedback regarding my system. I am new to Gulp and haven't used it in a production project so suggestions are very welcome.
\nQuite often I have to write a script that takes data from a source, filter and converts it and stores it some way. Nearly every time I use the great data-import library by David de Boer and the Symfony Console component. It annoyed me that I have to write some boilerplate code every single time and therefore I created Console Import Standard Edition.
\nInspired by the Symfony Standard Edition it contains a basic directory structure, a composer.json with ddeboer/data-import and symfony/console as dependencies and a simple executable.
You can bootstrap an import script project by using Composer and the following command:
\n$ php composer.phar create-project florianeckerstorfer/console-import-standard-edition path/to/installThen you only need to change the namespace and adapt the code inside the ImportCommand to fit your needs. The projects README.md contains more information on how to setup a project and customise it.
On Friday I was procrastinating by reading some command line tricks articles and I encountered three commands I haven't noticed before: fortune, cowsay and lolcat. A little bit earlier someone also posted this Buzzfeed article with inspirational Andy Dwyer quotes and one thing let to another.
![\"Inspirational](\"/blog/inspirational-andy-dwyer-cli/login-640.png\")
To get inspirational Andy Dwyer quotes into your terminal you need four things: fortune (to display a quote), cowsay (to make a cow say the quote), lolcat (for the rainbow colouring) and, of course, the quotes. On a Mac you can use Homebrew to install fortune and cowsay:
$ brew install fortune cowsaylolcat is a Ruby program and can you can install it using RubyGems:
$ sudo gem install lolcatLet's try these three programs out. lolcat is first.
![\"Output](\"/blog/inspirational-andy-dwyer-cli/lolcat-640.png\")
You can pipe input to cowsay to make it appear in a speak bubble on top of a cow. cowsay has some options to change the eyes and the tongue and even use a different animal, for example, a dragon.
$ echo \"Hello World!\" | cowsay\n _____________\n< Hello World >\n -------------\n \\ ^__^\n \\ (oo)\\_______\n (__)\\ )\\/\\\n ||----w |\n || ||If you call fortune without any arguments it will print a random quote.
$ fortune\nFelson's Law:\n To steal ideas from one person is plagiarism; to steal from\n many is research.The default database contains some pretty sexist quotes, as you sadly can expect from something written by white males. But I want to use my own database anyway. The format of a quotes file is pretty simple. You separate the quotes by a single % on a newline.
My whole life is a giant mess and I love it\n-- Andy Dwyer\n%\nI know what things are.\n-- Andy Dwyer\n%\nYou're like an angel with no wings.\n-- Andy DwyerHowever, the fortune program reads compiled data files and we can use strfile to create these:
$ strfile andy andy.datI can now call fortune with this quote file and it will only show quotes from the given file:
$ fortune andyYou can also find these files in my dotfiles repository. There is also a file with Tyrion Lannister quotes.
\nIf I now call fortune, pipe the output into cowsay and then pipe its output into lolcat I get the result displayed in the first screenshot.
$ fortune ~/dotfiles/fortune/andy | cowsay -s | lolcatI placed this line in my .bash_profile file and now every time I open a terminal window I get an inspirational Andy Dwyer quote.
When I first dabbled into writing software 15 years ago the world of programming was an easy place. When you would write on the internet that PHP is a programming language, someone would remind you that PHP is a scripting language because the computer interprets it instead of compiling it. You had scripting languages, like PHP, JavaScript or Python and programming languages like C, C++ or Java. It's not that easy anymore. Facebook created HipHop to compile PHP into C++ code (technically that's a transpiler) and later switched to a Just-in-Time (JIT) compiler called HHVM. Google, Apple, Mozilla and Microsoft doing crazy optimizations to make JavaScript execution to run nearly as fast as native code.
\nOne of the consequences of these developments is that, for example, PHP does no longer mean the full stack of the programming language. You can write code in PHP syntax and interpret it with the official PHP interpreter or you can HHVM`s Just-in-Time compiler. Another example is Dart, a language developed by Google that can run in a VM or you can transpile it to JavaScript to run in a browser. We need to separate the writing of the code (a human using the syntax of a language to create a program) from the execution of the code (a machine reading the code and converting it into a form understood by the hardware). The choice of programming language (or syntax) no longer gives us any indication how and where the code runs.
\nIf you write code in JavaScript you should be aware that this code might execute in a browser, or on a server, or on a desktop computer or in a native phone app.
\nYesterday @alicetragedy tweeted the following quote from @patio11 from Frozen Rails.
\n\n\nRuby's just a tool. You'll never hear a lawyer say: I'm a Microsoft Word lawyer. Check out this contract! Copy, paste, nailed it!
\n
Exactly for this reason you don't see me describing myself as a PHP Developer but as a Web Developer or just Developer. I write most of my code in PHP and JavaScript and I have written code in Ruby, Python, Java, C and other languages before and I am quite confident that I can write any program in any imperative programming language (preferable with C-style syntax). I also did some functional programming, but never enough that I could fully wrap my head around it. The concepts in all these programming languages are basically the same: functions, loops, conditionals and variables.
\nI find the hard part of learning a new programming language is not the language itself, but the ecosystem. When I write software in PHP and have a specific task I often know the frameworks and libraries to help me, I know exactly where to look for them and if a library is good or bad. The boom of package repositories such as Packagist, NPM, RubyGems, CocoaPod and so on make it easier to find new packages but you need experience with the community, the language and the conventions of the language to judge if a package is useful, well written and well maintained. Connected to this is the fact that knowing a programming language does not enable you to write a \"big\" application in it. Often it's more effort to learn a new framework than a new language. Full-stack frameworks like Symfony, Rails or Django are monsters with hundreds of APIs, conventions and configuration formats.
\nAbove I said that I am confident that I can write any program in any language. What I didn't say is that I can write any program in the best possible way in any language. You still need years of experience to master the nitty gritty details of a programming language. And often execution environment matters in addition to the syntax of the language. Let me give you a quick example in PHP:
\n// Merge the following two arrays\n$array1 = ['PHP', 'Ruby', 'Python', 'JavaScript'];\n$array2 = ['Java', 'C', 'C++'];\n\n// Method 1\n$fullArray = array_merge($array1, $array2);\n\n// Method 2\n$fullArray = $array1;\nforeach ($array2 => $value) {\n $fullArray[] = $value;\n}Which of the two methods executes faster? Well. It depends.
\nClearly there have been some optimisations to the array_merge method over the years. I don't have an installation of HHVM ready but the results there may be different again. I don't know such specific performance implications when writing Ruby oder Python code. Years and years of experience, debugging and frustrations gave me such a deep knowledge about PHP. As we can see in the differences between PHP 5.3 and 5.5 the behaviour of the platforms changes in addition to the syntax; if I once knew every optimisation doesn't mean I know them in the next version.
I believe that a programmer becomes a professional programmer by being able to generalise specific solutions in a specific programming language on a specific platform to programming in general. If you can systematically identify problems and solve them systematically (and reproducible) you have become a professional programmer.
", "url": "/blog/programming/", "title": "What Does it Mean to be a Programmer", "date_modified": "2014-09-13T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/php-pad/", "content_html": "When writing an article or code I often need to try something out or create a small benchmark. Typically I create a PHP file, open it in Sublime Text and run it in the terminal whenever I change something. Easy enough, but it happens regularly so I thought about automating this process.
\nI added a Bash function to my Dotfiles that creates an empty PHP file, opens it in Sublime Text and uses Watchman to run the file whenever it changes. At first I thought this should be trivial, but it I had some problems. But let's go through it step-by-step. Creating and opening a file is easy, I just used the subl command. However, to execute the script when it changes I needed to use Watchman and there is no obvious way to display the output of the executed script in the terminal. Therefore I create a wrapper bash script and write the output to a log file that I display using tail -f.
I added some clean-up functionality, the script deletes the watch and trigger from Watchman and removes the wrapper script and log file after quitting tail with Ctrl-C. You can use the script below by adding it to your .bash_profile.
function phppad() {\n TMPNAME=\"phppad-$RANDOM\"\n touch \"$@\"\n subl \"$@\"\n echo \"(echo '$(date +%n%H:%M:%S) $ php $@';php $@) >> $TMPDIR/$TMPNAME.log\" > $TMPDIR/$TMPNAME.sh\n chmod +x $TMPDIR/$TMPNAME.sh\n touch $TMPDIR/$TMPNAME.log\n watchman watch `pwd` > /dev/null\n watchman -- trigger `pwd` run \"$@\" -- $TMPDIR/$TMPNAME.sh > /dev/null\n tail -f $TMPDIR/$TMPNAME.log\n\n watchman trigger-del `pwd` run > /dev/null\n watchman watch-del `pwd` > /dev/null\n rm $TMPDIR/$TMPNAME.log\n rm $TMPDIR/$TMPNAME.sh\n}I know there exists at least one REPL, PHPSH, but it's no longer maintained and I want to use Sublime Text to write the code and I want to persist the code, even when quitting the command.
", "url": "/blog/php-pad/", "title": "PHP Pad", "date_modified": "2014-09-14T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/keyboard-maestro-peak/", "content_html": "Most of the time I have too many applications and windows open on my Mac. Even on my 24 inch external display there is not much space left when I have PHPStorm or Sublime Text open and there is less space when I am not at home and only have 13 inches. When I write code or text I regularly look things up in another window, specifications for a feature, an API documentation or some other stuff and therefore I press Cmd+Tab very very often. If the information I need to get my work done is in more than one other window this system starts to fail completely.
Recently I caught myself pressing Cmd+Tab to get to Safari, then Ctrl+Tab to get to the next tab, Cmd+Tab to get back into PHPStorm and after a few minutes this process starts again. What I needed was a way to temporarily hide the current top-most window to peak into the background.
In this article I am going to create a Peak keyboard shortcut using Keyboard Maestro to do exactly this. When the shortcut is pressed the current top-most window is hidden, pressing the shortcut a second time shows the window again. I am going to share not only the code for the shortcut, but also the process on how to create it.
\nThere exist many different applications to manage keyboard shortcuts, but Keyboard Maestro is probably the most powerful one. Compared to the many free alternatives the price point of €30 for KM looks quite hefty, but it has many unique features, such as variables, loops and conditionals. This means that you can add states to your shortcuts, which is a lot more powerful than it sounds at first glance. Without support for these features, and the great AppleScript support, I would not be able to implement the Peak shortcut.
\nBut let's get started.
\nThe main problem I encountered when I started working on the shortcut was that the first invocation hides the window and I don't have a way to retrieve the previously active window when activating the shortcut the next time. Therefore I need two states, either I am currently \"peaking\", that is, a window is currently hidden or I am not peaking and no window is hidden. Since the macro editor in Keyboard Maestro is in part visual I am going to post pseudo code for now.
\nif peakStatus is not \"hidden\" then\n PeakAppName = name of topmost application\n PeakWindowName = name of topmost window of application PeakAppName\n hide window PeakWindowName of application PeakAppName\n PeakStatus = \"hidden\"\nelse\n show window PeakWindowName of application PeakAppName\n PeakStatus = \"\"\nend ifIn Keyboard Maestro there exists no way to determine the name of the top-most application or the name of the first window of an application. But I can use AppleScript to get these values and Keyboard Maestro allows me to assign the return value of an AppleScript to a variable and that's what I am going to do.
\ntell application \"System Events\"\n set frontApp to first application process whose frontmost is true\n name of frontApp\nend tellGetting the name of the first window of the top-most application is a little bit more complicated. First I get the name of the application and then I tell that application to give me the name of first window.
\ntell application \"System Events\"\n set frontApp to first application process whose frontmost is true\n set frontAppName to name of frontApp\nend tell\n\ntell application frontAppName\n name of window 1\nend tellHowever, there are some application that don't return a list of windows (inclding Sublime Text and Spotify) and don't allow to set the visibility of a single window. In this case I am going to hide the complete application instead of just a single window. Therefore I need to replace the name of window 1 to include a fallback. When I can't the name of the window I store an empty string and later will decide between the two cases.
try\n name of window 1\non error errMsg\n \"\"\nend tryI now have the name of the application and window and using the save results to variable option in Keyboard Maestro these values are safely stored in a variable. Currently I am still in the not hidden part of the pseudo code and the last piece still missing is the code to actually hide the window. First I retrieve the names of the application and window from KM and then there is a case distinction wether I have the window name. If I have the name of the window I tell the application to hide the window. Otherwise I use System Events to hide the complete application.
\ntell application \"Keyboard Maestro Engine\"\n set frontAppNameVar to make variable with properties {name:\"PeakAppName\"}\n set frontAppName to value of frontAppNameVar\n set windowNameVar to make variable with properties {name:\"PeakWindowName\"}\n set windowName to value of windowNameVar\nend tell\n\nif windowName is not equal to \"\" then\n tell application frontAppName\n set visible of window windowName to false\n end tell\nelse\n tell application \"System Events\"\n set visible of process frontAppName to false\n end tell\nend ifThe code in the hidden part of the pseudo code is a little bit easier. The name of the application and window are already stored in a variable and I only have to retrieve these values and show the application. Once again I need to make distinction wether I have the name of the window. If I have the window name I tell the application to show the window, otherwise I use System Events to show the application and then activate it.
\ntell application \"Keyboard Maestro Engine\"\n set frontAppNameVar to make variable with properties {name:\"PeakAppName\"}\n set frontAppName to value of frontAppNameVar\n set windowNameVar to make variable with properties {name:\"PeakWindowName\"}\n set windowName to value of windowNameVar\nend tell\n\nif windowName is not equal to \"\" then\n tell application frontAppName\n set visible of window windowName to true\n end tell\nelse\n tell application \"System Events\"\n set visible of process frontAppName to true\n end tell\n tell application frontAppName to activate\nend ifCreating the macro in Keyboard Maestro now is just a matter of arranging several pre-defined actions. You can find the text version of the macro below or take a look at the screenshot of how it should look like in KM.
\n![screenshot](\"http://cdn.florian.ec/DcLAATTF6p5v9w.png\"){kind=link}
If All Conditions Met\n The variable ‘PeakStatus’ is not ‘hidden’\n Execute the Following Actions:\n Execute AppleScript\n tell application \"System Events\"\n set frontApp to first application process whose frontmost is true\n name of frontApp\n end tell\n Save trimmed to variable ‘PeakAppName’.\n Execute AppleScript\n tell application \"System Events\"\n set frontApp to first application process whose frontmost is true\n set frontAppName to name of frontApp\n end tell\n\n tell application frontAppName\n try\n name of window 1\n on error errMsg\n \"\"\n end try\n end tell\n Save trimmed to variable ‘PeakWindowName’.\n Set Variable ‘PeakStatus’ to Text\n hidden\n Execute AppleScript\n tell application \"Keyboard Maestro Engine\"\n set frontAppNameVar to make variable with properties {name:\"PeakAppName\"}\n set frontAppName to value of frontAppNameVar\n set windowNameVar to make variable with properties {name:\"PeakWindowName\"}\n set windowName to value of windowNameVar\n end tell\n if windowName is not equal to \"\" then\n tell application frontAppName\n set visible of window windowName to false\n end tell\n else\n tell application \"System Events\"\n set visible of process frontAppName to false\n end tell\n end if\n Display results in a window.\n Otherwise, Execute the Following Actions:\n Set Variable ‘PeakStatus’ to Text\n Execute AppleScript\n tell application \"Keyboard Maestro Engine\"\n set frontAppNameVar to make variable with properties {name:\"PeakAppName\"}\n set frontAppName to value of frontAppNameVar\n set windowNameVar to make variable with properties {name:\"PeakWindowName\"}\n set windowName to value of windowNameVar\n end tell\n\n if windowName is not equal to \"\" then\n tell application frontAppName\n set visible of window windowName to true\n end tell\n else\n tell application \"System Events\"\n set visible of process frontAppName to true\n end tell\n tell application frontAppName to activate\n end if\n Display results in a window.As I am writing this I realise that it would have been a lot easier to just write one long AppleScript instead of using the pre-defined actions to compose several smaller ones. But since I sunk enough time in writing this macro I leaving it this way for now.
\nIf you don't want to retype everything from this article, you can download the macro and import it into Keyboard Maestro: peak.kmmacros.
", "url": "/blog/keyboard-maestro-peak/", "title": "Keyboard Maestro Nerdery: Peak", "date_modified": "2014-09-28T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/doctrine-custom-hydration/", "content_html": "If you are using Doctrine for a project that is bigger than very small you probably have encountered performance problems with hydration. Hydration is the layer of the ORM that transforms the data that is returned by the database into a form that is comfortable for the developer to work with.
\nObject hydration is the default one and it returns the data as objects. This provides the greatest convenience for the developer, but requires a complex and memory intensive hydration process. In most projects for 95 to 100% of the queries this is a reasonable trade-off, but then there is this single import or export script that deals with 100,000 of objects and object hydration takes too much time or consumes too much memory. For these cases Doctrine supports array hydration which creates arrays instead of objects.
\nAnd then there exist ultra-rare cases where you don't import a few hundred thousand rows, but something like 50 million and even array hydration is too slow. In these cases I have fallen back to native SQL queries in the past.
\nNative SQL queries are considerable faster because no hydration is involved, but since I want to use Doctrine and hydration for the other 99% of my application I have to duplicate code and deal with different ways to invoke queries and so on. Therefore I looked into a feature of Doctrine I haven't really considered before: Custom Hydrators.
\nCustom Hydrators are pretty straight forward, you sub-class the AbstractHydrator class provided by Doctrine and implement the hydrateAllData() method, obtain a reference to a PDOStatement object and returns the result. You can hydrate to whatever you want, array, object or scalar values. Before implementing my first hydrator I looked at the source code of the ObjectHydrator and ArrayHydrator and was a little bit overwhelmed. There was so much code and more loops than I expected. If you know that thousands or even millions of elements will go through this code you get suspicious whenever you see a loop. In retrospect the amount of code makes sense: the hydrator needs to map the column names to the field names used in the code, convert the values into their PHP type, resolve references and so on. Still, too many loops.
My first idea to speed up the hydration process was to return the row I retrieved from PDO and return it; no mapping or conversion. I loose a lot of convenience compared to object or even array hydration, but when the alternative is to use PDO it makes sense. The result is in the same format as it would be when using PDO directly, but I can continue to use most other features of Doctrine, such as the entity manager, DQL or repositories.
\nuse Doctrine\\ORM\\Internal\\Hydration\\AbstractHydrator;\n\nclass SimpleArrayHydrator extends AbstractHydrator\n{\n protected function hydrateAllData()\n {\n $result = [];\n foreach($this->_stmt->fetchAll(\\PDO::FETCH_ASSOC) as $row) {\n $result[] = $row;\n }\n\n return $result;\n }\n}I tested my SimpleArrayHydrator with a simple dataset (one table with three columns: a primary key, a string and an integer and about 6,500 rows) and compared the performance to object and array hydration as well as using PDO directly. The results below indicate average values over 1,000 iterations and are measured using Athletic.
| Hydration | \nIterations | \nAverage Time | \nOps/second | \n
|---|---|---|---|
| Object hydration | \n1,000 | \n0.4062044150829 | \n2.46181 | \n
| Array hydration | \n1,000 | \n0.3309864323139 | \n3.02127 | \n
| PDO-style hydration | \n1,000 | \n0.0245044710636 | \n40.80888 | \n
| No hydration (PDO) | \n1,000 | \n0.0248321378231 | \n40.27040 | \n
We can see in these results that my custom PDO-style hydration is practically as fast as directly using PDO. Object and array hydration can process equally many rows per second for this data set. Side note: the difference between object and array hydration will be bigger for more complex data sets (for examples, references).
\nWhile my SimpleArrayHydrator is very fast it does not provide a lot of conveniences for developers. There is definitely room in the middle for a hydrator that is faster than default object and array hydration and provides certain conveniences for the developer. Remember that Doctrine is an extremely popular project and that the default hydrators need to work in a lot of different scenarios. If you develop a custom hydrator for your project you can make certain assumptions to improve the performance while maintaining a certain level of convenience. For example, if your project has a convention that the name of a column in the database and the name of the corresponding property in the object must be equal, you can skip the key mapping during hydration.
Of course, you can also create a hydrator specifically for an entity or even a specific query that causes you performance problems. Please don't create a specific hydrator for every table in your project, that defeats the purpose of using an ORM, but if for a specific entity or query the alternative is switching to PDO code it certainly makes sense to consider it.
\nThink of it that way, if you use PDO directly you iterate through the result set and save the rows in some data structure you are basically hydrating the result set. In fact, if you use PDO directly you are most likely writing a custom hydrator for every query you execute. Thus it makes sense to consider a custom hydrator.
", "url": "/blog/doctrine-custom-hydration/", "title": "Improving Doctrine Performance with Custom Hydration", "date_modified": "2014-10-01T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/password-please-0.2/", "content_html": "Since a few years I generate a new password for every service I sign up and I use 1Password to manage them for me. But one thing that bothered me for a while was the generation of new passwords. It involves a lot of mouse usage and I like to use the keyboard as much as possible. Also changing the password receipt is quite cumbersome and I wanted to have a faster way to generate passwords of different length and complexity.
\nTherefore I created a small PHP library and CLI script as well as an Alfred workflow to invoke it. I am using it for a few weeks now and it works great for my purposes.
\n![\"Password,](\"/blog/2014-10-04-password-please-0.2/password-please-alfred.gif\")
I have set up a page with more information, passwordplea.se (pretty sweet, right?), and the source code of both the Alfred workflow and the PHP library and CLI are on Github.
", "url": "/blog/password-please-0.2/", "title": "Password, Please!", "date_modified": "2014-10-04T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/weekly-recommender-2014-41/", "content_html": "It's easy to press star, like, favorite or bookmark in an app while consuming content. I do this regularly in Feedbin, Instapaper or Pinboard, but once I pressed the button I never revisit the saved stuff. There are many great articles, libraries and tools out there that I saved for keeping because they could be useful to me at some point in the future, but when I would need them I don't think about looking in my archives because I forgot that I encountered and saved them.
\nThe Weekly Recommender is a new weekly series that I plan to write for two purposes, giving myself a reason to revisit the content I encountered the past week, collect them in one place and make the highlights accessible to my readers.
\nWhen dealing with character encodings in MySQL you soon realise that utf8 is not really UTF-8. UTF-8 is a variable-length encoding, that means ASCII characters require only one byte while it also supports more characters by requiring more bytes.
The MySQL character encoding utf8 has a maximum of 3 bytes, which contains most characters widely used in the western world. However, Chinese, Japanese or Korean alphabets require 4 bytes and therefore cannot be stored in a MySQL column that is encoded with utf8. MySQL provides an additional character encoding utf8mb4 to support those characters. By the way, Emojis also require 4 bytes and utf8mb4.
In this article I am explaining how to create utf8mb4 databases, tables and columns with plain SQL and with Doctrine ORM.
Update 25th of July 2016 Starting with MySQL 5.7.7 this is no longer a problem. More information can be found here.
\nMySQL lets you set the character encoding and collation on multiple different level. You can set the default encoding for a database, for a table and you can specify the encoding of an indiviual column.
\n/* Create database */\ncreate database utf8mb4test\n character set utf8mb4\n collate utf8mb4_unicode_ci;\n\n/* Create table */\ncreate table unicode_names\n (\n name varchar(255)\n )\n default character set utf8mb4\n collate utf8mb4_unicode_ci;\n\n/* Create table with mixed encodings */\ncreate table mixed_encoding\n (\n name varchar(255)\n character set utf8mb4\n collate utf8mb4_unicode_ci,\n email varchar(255)\n )\n default character set utf8\n collate utf8_unicode_ci;When you design your database and decide on encodings for specific columns, please remember that there are TLDs in many languages that require 4 bytes now. IANA has a list with all top-level domains.
\nIf you use pure SQL and create a table without a specific character encoding and collation the table will be created using the default character encoding of the database. The same applies for columns, adding a column without a specific character encoding and collation will use the tables.
\nMatthias Bynens has a pretty nice overview how to migrate utf8 tables to utf8mb4 and how to set things up correctly on the MySQL side of things.
Most likely you are not creating your schema by hand, but generate it using an ORM. I use Doctrine and the documentation and available resources on this topic are outdated in many places. First of all, the behaviour of Doctrine must have changed recently, because if you Google something like doctrine utf8mb4 you will find resources saying that you have to configure this at a database level.
\nIn fact, the reference included with the source code (as of v2.4.6) says the following
\n\n\nYou can't set these values inside the annotations, yml or xml mapping files. To make a database work with the default charset and collation you should configure MySQL to use it as default charset, or create the database with charset and collation details. This way they get inherited to all newly created database tables and columns.
\n
However, it seems that Doctrine now specifically defines the encoding and collation when creating a new table. You can see this if you dump the schema SQL:
\n$ php app/console doctrine:schema:update --dump-sqlThe result is something like this:
\nCREATE TABLE user\n (\n id INT AUTO_INCREMENT NOT NULL,\n username VARCHAR(255) NOT NULL,\n /* ... */\n )\n DEFAULT CHARACTER SET utf8\n COLLATE utf8_unicode_ci\n ENGINE = InnoDB;Therefore the settings on the database-level are overwritten by the table-specific configurations set by Doctrine. Unfortunately we need to set the charset and collation for every table since there is no global option and Doctrine doesn't respect the setting defined in MySQL.
\nThe related options are called charset and collate and can be set using all configuration formats, for example, when using annotations:
/**\n * @ORM\\Entity()\n * @ORM\\Table(name=\"users\", options={\"collate\"=\"utf8mb4_unicode_ci\", \"charset\"=\"utf8mb4\"})\n */Or when using XML:
\n<entity name=\"Acme\\DemoBundle\\Entity\\User\" table=\"users\">\n <options>\n <option name=\"charset\">utf8mb4</option>\n <option name=\"collate\">utf8mb4_unicode_ci</option>\n </options>\n</entity>If you now dump the SQL to create the schema you should get something like this:
\nCREATE TABLE user\n (\n id INT AUTO_INCREMENT NOT NULL,\n username VARCHAR(255) NOT NULL,\n /* ... */\n )\n DEFAULT CHARACTER SET utf8mb4\n COLLATE utf8mb4_unicode_ci\n ENGINE = InnoDB;Doctrine currently doesn't seem to support setting the charset and collation on the column-level. If you want to change the encoding on a per-column basis you need to do this using SQL.
\nWhen converting your tables from utf8 to utf8mb4 there is one more thing you need to consider. An index in InnoDB always has a maximum size of 767, bytes regardless of the number of bytes used for a single character. Consider a column with a maximum of 255 characters, this would result in 765 bytes when using utf8 but in 1020 bytes when using utf8mb4. If you need an index on a utf8mb4 column the maximum number of characters is 191 instead of 255.
One last thing you need to take care of is the encoding of the connection. If you are using Doctrine in combination with Symfony you can set this in your config.yml
# app/config/config.yml\ndoctrine:\n dbal:\n charset: utf8mb4Or if you don't use Symfony:
\n$config = new \\Doctrine\\DBAL\\Configuration();\n// ...\n$connectionParams = array(\n 'driver' => 'pdo_mysql',\n 'host' => 'localhost',\n 'user' => 'user',\n 'password' => 'secret',\n 'dbname' => 'mydb',\n 'charset' => 'utf8mb4'\n);\n$conn = \\Doctrine\\DBAL\\DriverManager::getConnection($connectionParams, $config);In SQL you would use
\nSET NAMES='utf8mb4';This has nothing really to do with databases, but just don't forget that when you deal with multi-byte strings (such as Emoji or CJK characters) you need to use the mb_* methods, such as mb_substr() or mb_strlen().
Considering that full UTF8 support is pretty important these days it's probably worth converting tables to utf8mb4 or at least use utf8mb4 in new projects. I heard some evidence that utf8mb4 is slower than utf8, but I couldn't find some definitive performance measurements. Michael Simmons found that joining string columns with different encodings is extremely slower then joining columns with the same encoding (which makes sense). In my opinion this should not keep you from using utf8mb4 now.
And don't forget to treat yourself with a after dealing with all this encoding stuff.
", "url": "/blog/mysql-doctrine-utf8/", "title": "MySQL, Doctrine and UTF-8", "date_modified": "2014-10-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/weekly-recommender-2014-43/", "content_html": "The Weekly Recommender is a weekly series that I plan to write for two purposes, giving myself a reason to revisit the content I encountered the past week, collect them in one place and make the highlights accessible to my readers. They don't necesarily have been published last week, I just found them during the past seven days. You can also checkout my profiles on Pinboard and Instapaper.
\nUntil recently I used Bower to manage the frontend dependencies, JavaScript and Sass/CSS libraries and NPM to manage Gulp/Grunt and plugins required for my build process. Since all packages I use in Bower are on NPM I removed Bower from the list of tools I use and manage my packages exclusively with NPM.
\nUsing one instead of two package managers makes it easier keeping the packages up-to-date and removes clutter from the repositories. I think it is a good idea to keep the dependencies out of the document root and to use a Gulp task to copy only the files that are required into a publicly accessible directory. My task looks like this:
\nvar _ = require('lodash'),\n gulp = require('gulp');\n\ngulp.task('copy-assets', function () {\n var assets = {\n js: [\n './node_modules/html5shiv/dist/html5shiv-printshiv.min.js',\n './node_modules/angular/angular.js',\n './node_modules/angular-resource/angular-resource.js',\n './node_modules/angular-route/angular-route.js',\n './node_modules/picturefill/picturefill.js',\n ],\n css: ['./node_modules/normalize.css/normalize.css'],\n };\n _(assets).forEach(function (assets, type) {\n gulp.src(assets).pipe(gulp.dest('./web/' + type));\n });\n});Now I seriously don't know why I ever used Bower.
", "url": "/blog/frontend-dependencies-npm/", "title": "Manage Frontend Dependencies with NPM", "date_modified": "2014-11-03T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/hp-color-laserjet-cp1215-mac-os-x-10-10/", "content_html": "In 2009 I got a HP Color LaserJet CP1215. Unfortunately this printer is not compatible with OS X. Six years ago I managed to install the printer by using open source tools and drivers. In 2012 I got a new MacBook Pro and needed to install the printer again and I wrote about the process on my old blog. Now three more years have passed and when OS X 10.10 Yosemite came out I decided to do a clean install, but I didn't install the printer because I didn't need it. A few month have passed since then and now I needed to use the printer again and thus I had to install it again.
\nThis is part tutorial, part reminder for myself on how to install this fucking printer.
\nYou need GCC to compile C code. In my opinion the best way to get GCC is to install Xcode from the Mac App Store. In Xcode you have to install the Command Line Tools (Preferences > Downloads > Components).\nYou also need Homebrew to install some libraries.\nOpen a Terminal window and install wget and gnu-sed.
$ brew install wget\n$ brew install gnu-sed\n$ brew install ghostscriptDownload and install Foomatic RIP and HIPJS for Mac OS X. The page also includes a download for Ghostscript, but I used Homebrew to install it. The links state that Foomatic RIP and HIPJS are for OS X 10.8, but for me they work fine on 10.10 Yosemite.
\nNext you need to install foo2zjs. Terminal:
$ wget -O foo2zjs.tar.gz http://foo2zjs.rkkda.com/foo2zjs.tar.gz\n$ tar zxf foo2zjs.tar.gz\n$ cd foo2zjs\n$ make\n$ ./getweb 1215\n$ sudo make install\n$ sudo make cups\n$ cupsctl WebInterface=yesOpen the CUPS web interface: http://localhost:631
\nDone.
\nPlease note that I cannot give support on installing this fucking printer on OS X. If you send me emails about this printer I will ignore them.
", "url": "/blog/hp-color-laserjet-cp1215-mac-os-x-10-10/", "title": "Installing HP Color LaserJet CP1215 on Mac OS X 10.10 Yosemite", "date_modified": "2015-03-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/gulp-js-streams/", "content_html": "Gulp is different than other build systems or task runners (like Make, Ant, Phing, Rake, or Grunt) in two major ways. First, you define tasks using code instead of configuration, which gives you a lot of flexibility when it comes to building and reusing tasks. The second difference, and the one I want to focus on in this article, is that it uses Node streams.
\nGulp did not invent streams, they are part of Node, but it standardises them for build systems in a way that code from different authors can work together without knowing about each other.
\nStreams in Node.js work a lot like streams work on YouTube. You can start consuming data while the data is not fully loaded, but every chunk of loaded data is given to you immediately after it is loaded and you are not currently processing the previous chunk. Loading does not necessarily mean downloading from the internet, it could also mean reading data from disk or from a database.
\nLet us consider the following scenario: you have your source code written in CoffeeScript and stored in a bunch of .coffee files. To deploy to production you need to compile CoffeeScript to JavaScript, concatenate them into one big file, minify the source code, and move the file to a dist/ directory.
In a traditional task runner (that would be something like Make or Grunt) each of these steps would need to read the corresponding files from disk at the beginning and write them back to disk when it has done its work.
\nsrc/*.coffee ➞ Compile CoffeeScript ➞ Write tmp/*.jstmp/*.js ➞ Concatenate ➞ Write tmp/all.jstmp/all.js ➞ Minify ➞ Write tmp/all.min.jstmp/all.min.js to dist/Streams in Gulp provide us with a way to convert files into object that can flow through the pipeline without having to be written to disk after each step. The same workflow would look like this in Gulp:
\nsrc/*.coffeedist/In code it would look something like this:
\n// gulpfile.js\nvar gulp = require('gulp'),\n coffee = require('gulp-coffee'),\n concat = require('gulp-concat'),\n uglify = require('gulp-uglify');\n\ngulp.task('default', function () {\n gulp\n .src('src/*.coffee')\n .pipe(coffee())\n .pipe(concat('all.min.js'))\n .pipe(uglify())\n .pipe(gulp.dest('dist'));\n});(The code above uses, in addition to Gulp, the gulp-coffee, gulp-concat, and gulp-uglify plugins. You can install them using NPM.
\nI want to show you how these aforementioned file objects flow through the workflow, but to do so we need to take a look at Vinyl. Vinyl is a virtual file format, that is, an abstraction of the filesystem. By abstracting the file system Gulp, and Gulp plugins, doesn't need to know about the underlying filesystem, which in most cases is the local filesystem, but could also be on Github or S3. The other thing Vinyl does is that it provides us with the File object that is passed through the workflow.
\nAs a side note: the src(), dest() and watch() methods implemented by Gulp are barely more than wrapper functions of the corresponding method in the Vinyl adapter.
Ok, let us write a Gulp plugin that visualises the flow of the File object through the pipeline. That way we do not only see how files are processed internally in Gulp, but we also learn how to write a Gulp plugin on our own.
// lib/log.js\nvar through = require('through2');\n\nmodule.exports = function (label) {\n function log(file, enc, cb) {\n console.log(label, ':', file.path);\n cb(null, file);\n }\n\n return through.obj(log);\n};This code is pretty simple and straight-forward. We use the through2 library as a wrapper for Node streams and create a log() function which outputs the filename of each processed file to the console. log() is called by Gulp for each file that it processes with three parameters. The first is a File object created by Vinyl and the third is a callback function. When we are done with our work we pass the file to the callback and through this move it further along in the workflow.
Of course, we don't have to pass the file along, a plugin like concat consumes all files and removes them from the stream. When it has processed the very last file it creates a new File object for the concatenated file and emits it to the workflow.
Now we can use the log plugin in our Gulpfile to display the filename of each processed file alongside a label. We will add the log plugin before every plugin in our workflow to display the plugin name as label. This way we can see which plugin processes which files.
\n// gulpfile.js\n// ...\nvar log = require('./lib/log');\n\ngulp.task('log', function () {\n gulp\n .src('src/*.coffee')\n .pipe(log('coffee'))\n .pipe(coffee())\n .pipe(log('concat'))\n .pipe(concat('all.min.js'))\n .pipe(log('uglify'))\n .pipe(uglify())\n .pipe(log('dest'))\n .pipe(gulp.dest('dist'));\n});If our src/ directory contains three files, foo.coffee, bar.coffee and qoo.coffee the output will look like this:
coffee : /Users/florian/Projects/slides/gulpjs-streams/src/bar.coffee\nconcat : /Users/florian/Projects/slides/gulpjs-streams/src/bar.js\ncoffee : /Users/florian/Projects/slides/gulpjs-streams/src/foo.coffee\nconcat : /Users/florian/Projects/slides/gulpjs-streams/src/foo.js\ncoffee : /Users/florian/Projects/slides/gulpjs-streams/src/qoo.coffee\nconcat : /Users/florian/Projects/slides/gulpjs-streams/src/qoo.js\nuglify : /Users/florian/Projects/slides/gulpjs-streams/src/all.min.js\ndest : /Users/florian/Projects/slides/gulpjs-streams/src/all.min.jsWe can see that bar.coffee is read and pipe through coffee and concat, but is not passed further along because concat consumes the stream. When concat finished consuming all files it emits a new file all.min.js and this one is passed to uglify and dest.
If you want to learn more about streams in Node and Gulp, take a look at the following resources:
\nThese have already been linked in the article, but you still might want to take a closer look ant
\nThis article is the novelisation of my talk at the ViennaJS meet-up on 24 June 2015. The slides are already online. The event was filmed and I plan to update this article when the video is online. The video is now online.
John Gruber was guest at the latest episode of Mac Power Users and towards the end he talked with hosts Katie and David about his workflow and some of the scripts, AppleScript and otherwise, he uses. John posted one of these, an AppleScript allows him to retrieve all open URLs from Safari, present them in a list and insert one of them in the current text field to Gist.
\nIn addition John uses an AppleScript to save the URLs of all pages open in Safari into a text file, grouped by window. He did not post this one, but it was easy enough for me to recreate it.
\nThe script needs to do two things, first gather all the URLs and format them in a string and then save this string to a file named with the current date and time. As you can see working with dates is a little bit messy in AppleScript, but the result works quite well.
\n--- Gather the URLs of all open tabs\ntell application \"Safari\"\n set _urls to URL of every tab of every window\nend tell\n\n--- Create a string that contains all URLs, grouped by window\nset _content to \"\"\nrepeat with _window_urls in _urls\n repeat with _url in _window_urls\n set _content to _content & \"\n- \" & _url\n end repeat\n set _content to _content & \"\n\"\nend repeat\n\n--- Create a string with the current date and time\nset the_mon to month of (current date) as integer as string\nif (count characters in the_mon) = 1 then set the_mon to \"0\" & the_mon\nset the_day to day of (current date) as string\nif (count characters in the_day) = 1 then set the_day to \"0\" & the_day\nset the_hour to time string of (current date) as string\nset the_date to (year of (current date) as string) & \"-\" & the_mon & \"-\" & the_day & \" \" & the_hour\n\n--- Save the string to a folder in Dropbox\nset _filename to the_date & \".md\"\ndo shell script \"/bin/echo -n \" & quoted form of _content & \" > $HOME/Dropbox/Documents/Tabs/\" & quoted form of _filenameI use Keyboard Maestro to assign a hotkey to the script and invoke it whenever I want to save all currently open URLs.
", "url": "/blog/save-safari-session/", "title": "Save Current Safari Session with AppleScript", "date_modified": "2015-07-02T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/apple-music-last-fm-scrobbling/", "content_html": "Ever since Apple announced Apple Music at WWDC I was wondering whether it was possible to scrobble played tracks to Last.fm. As expected, iTunes on OS X and the Music app on iOS do not directly support scrobbling, but I wanted to see if there are other ways.
\nIn this post I am going to explore third-party apps that allow scrobbling on OS X and iOS and explain when and what will be scrobbled.
\nUpdate (March 20, 2021): Last.fm and Apple Music in 2021
\nScrobbling played songs from iTunes always required a third-party application. There is the official Last.fm Mac app, but for the last couple of years I used Simplify. Simplify can scrobble from iTunes, Rdio, Spotify and others and can also display the currently playing song in the menu bar. But does Simplify work with Apple Music? It depends.
\nIt depends whether iTunes reports the currently playing track via AppleScript or not. We can test whether scrobbling works using a small AppleScript
\ntell application \"iTunes\"\n tell current track to artist & \" - \" & name\nend tellFirst of all, scrobbling works for everything that is in My Music (that is, your library). It does not matter if the song is stored locally, streamed from iTunes Match, streamed from Apple Music, or a song from Apple Music that was made available offline. The same is true for playlists, scrobbling works for you local playlists, as well as Apple Music Playlists. But now things get complicated.
\nLet's take a look at the For You and New sections.
\nBasically, only music in My Music and Playlists will scrobble, with the one exception of saved playlists.
\nScrobbling on iOS is a little bit trickier. Again, you need a third-party software. CloudScrob (€0,99) and QuietScrob (free, with €0,99 In-App purchase), both worked in principal for me, but QuietScrob can run in the background, while you have to open CloudScrob to scrobble to Last.fm. Unlike Simplify on OS X, scrobbling with QuietScrob is not immediate but happens in bulk every 30 minutes (or so).
\nIt looks like the same restrictions as for scrobbling with iTunes and Simplify on OS X apply. However, in addition scrobbling does not work when playing an Apple Music Playlist.
\nCloudScrob has not been updated since November 2013, but QuietScrob latest update is from May 20, so there is hope that developers will find ways to scrobble additional methods of listening on Apple Music.
\nI am feredir on Last.fm.
\nWhen I open Spotify I am presented with its Overview view. The music presented there is utterly useless, after using Spotify for two years I have never clicked anything there. Apple Music starts in the For You tab, which includes playlists, artists, albums, and songs I might like. In comparison Spotifys Overview is generic, it's something you would show a user that starts the app for the first time, but after hundred or even thousands of hours of listening to music on Spotify it still tries to shove Top Dance Tunes up my ass. After listening with Apple Music for a view days, after adding some of my favourite albums to my library, liking songs the recommendations are pretty good. It is a mixture of songs I know (but have not added to Apple Music) and like and songs I do not know and also like. That's the one thing about Apple Music, human curation wins. Playlists on Spotify often contain hundred of songs and run for hours, the longest playlist I found on Apple Music runs for two hours. They are better.
\nThe other thing about Apple Music is the software. iTunes is a mess, but I argue that it's a better mess than Spotify on OS X. Spotify doesn't have a lot of keyboard shortcuts, you can't configure additional shortcuts and it doesn't support Apple Script. That might be ok for most users, but for power users iTunes is better. The Music app on iOS is a lot better than iTunes, because it is less cluttered. Spotifys iOS app is also better than their OS X app, but is also has plenty of weird UX. In 2015 I kinda expect that the mobile app is better than desktop version.
\nWhen it comes to music, the main advantage of Apple Music is that it combines local and cloud music into one library. I can create playlists, even smart playlists, that can contain songs from both. Spotify has support for local files, but it is primitive and I never used it. However, one thing that Apple has to work on is discovery in My Music. Currently you can only view either Recently Added or All. You can sort that view, but the current options are useless for streaming-size libraries. I am not going to rate hundreds of albums. I don't know what Most Played means in Spotify (because the list definitely does not contain my most played stuff), but Apple Music needs something like this. Not an all time most played/best rated, but more like most played/best rated in the last couple of weeks.
\nSometimes I like a song from an album that has not yet been released yet and Apple Music let me add unreleased albums to my library. They become playable once released, until then I can play the single. That is a pretty great feature. (Update: However, currently this feature is buggy. For me, it worked for two albums, but for most albums it does not and I have to remove and read the album to get all tracks into my library.)
\nI like Beats 1 more than expected. Based on the Beats brand I figured that it will be heavy on rap and beat-based music, but I already found one or two artists that I enjoy. It will not become my primary method of music listening, but I will tune in from time to time.
\nScrobbling to Last.fm works. Sometimes. Connect is useless, but you can turn it off.
\nI have updated the article to reflect that automatically adding music once it is released does currently not work as I described it.
", "url": "/blog/thoughts-on-apple-music/", "title": "Thoughts on Apple Music", "date_modified": "2015-07-09T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/alfred-iterm2-tabs/", "content_html": "I often have lots of tabs and panes open in iTerm2 (the best terminal app for OS X) and it takes a while to find the correct one. Therefore I created a workflow for Alfred to search through all open tabs and switch to it.
\n![\"Search](\"/blog/2015-07-23-alfred-iterm2-tabs/alfred-iterm2-tabs.gif\")
Install it by downloading the latest version and double-clicking the alfred-iterm2-tabs.workflow file. Activate it by using the itt keyword.
I really love smart playlists in Apple Music. When I first switched to streaming services I really missed this feature in Spotify and Rdio, but now I finally can stream music and create smart playlists. One of the things I did was that I created a smart playlist for loved tracks as well as smart playlists for loved tracks that have been released in a specific year. And I noticed that 2015 have been a really good year for music so far. Without further ado, here are my favourite albums of 2015 so far.
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/adna-run-lucifer.jpg\")
Run, Lucifer by Adna (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far//girlpool-before-the-world-was-big.jpg\")
Before The World Was Big by Girlpool (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/2015-07-24-favorite-albums-2015-so-far/jenny-hval-apocalypse-girl.jpg\")
Apocalypse, Girl by Jenny Hval (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/2015-07-24-favorite-albums-2015-so-far/laura-marling-short-movie.jpg\")
Short Movie by Laura Marling (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/marriages-salome.jpg\")
Salome by Marriages (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/2015-07-24-favorite-albums-2015-so-far/natalie-prass-natalie-prass.jpg\")
Natalie Prass by Natalie Prass (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/of-monders-and-men-beneath-the-skin.jpg\")
Beneath The Skin by Of Monsters And Men (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/pale-honey-pale-honey.jpg\")
Pale Honey by Pale Honey (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/pins-wild-nights.jpg\")
Wild Nights by PINS (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/tame-impala-currents.jpg\")
Currents by Tame Impala (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/team-me-blind-as-night.jpg\")
Blind As Night by Team Me (iTunes, Apple Music, Spotify, Amazon)
\n![\"Album](\"/blog/2015-07-24-favourite-albums-2015-so-far/torres-sprinter.jpg\")
Sprinter by Torres (iTunes, Apple Music, Spotify, Amazon)
\n\n\nI am afraid to see my heroes age
\n
— The Exchange by Torres
", "url": "/blog/favorite-albums-2015-so-far/", "title": "My Favourite Albums of 2015 (so far)", "date_modified": "2015-07-24T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/hiking-loosbuehelalm-draugstein/", "content_html": "Two weeks ago I was hiking in Großarl, slept at Loosbühelalm and climbed Draugstein (2359m). Here are some pictures.
\nAscent to Loosbühelalm from Großarl.
\n![\"Sundown](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0801-320.jpg\")
Sundown at Loosbühelalm.
\n![\"On](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0802-320.jpg\")
In the morning just after we left Loosbühelalm for Draugstein.
\n![\"Selfie](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0805-320.jpg\")
Selfie at Draugstein
\n![\"Draugstein,](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0807-320.jpg\")
Draugstein front and center and Filzmoossattel at the right
\n![\"Foggy](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0810-320.jpg\")
After we came back to Loosbühelalm it rained for a while and was foggy, but then the sky started clearing again.
\n![\"Loosbühelalm](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0812-320.jpg\")
Looking back at Loosbühelalm after we left on the second morning.
\n![\"View](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0815-320.jpg\")
We climbed Gründegg (2168m) and got some pretty light and shadow play.
\n![\"Summit](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0819-320.jpg\")
Summit cross at Gründegg
\n![\"Cows](\"/blog/hiking-loosbuehelalm-draugstein/IMG_0829-320.jpg\")
We made some friends on our way down.
", "url": "/blog/hiking-loosbuehelalm-draugstein/", "title": "Hiking at Loosbühelalm and Draugstein", "date_modified": "2015-07-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/ios-search-bar-ionic/", "content_html": "In iOS there is a very specific interaction when using a search bar in a list view. When the user focuses the input field, the field moves into the header and the cancel button slides in from the right. The interaction looks like this in Contacts, but it is also used in Mail and apps like Tweetbot.
\n![\"iOS](\"/blog/2015-07-25-ios-search-bar-ionic/ios-search-bar.gif\")
I wanted to replicate the functionality in Ionic, a HTML5 framework to create mobile apps using Cordova.
\nI am going to show you how to create a ion-search-bar directive as well as the required CSS to replicate this functionality with Ionic. Lets first take a look at the markup that describes our interface
<ion-nav-bar>\n <!-- Nav Bar Stuff -->\n</ion-nav-bar>\n<ion-search-bar placeholder=\"Search Books\"></ion-search-bar>\n<ion-content class=\"has-header has-search-bar\">\n <!-- Content Stuff -->\n</ion-content>This is pretty simple. Please note that I added a has-search-bar class to the ion-content element. Now we need a directive to actually create the search bar. The code pretty straight forward (as straight forward as Angular can be), the important stuff happens in the event handler for focus and blur.
angular\n .module('florian.directives', [])\n // Create a `ion-search-bar` directive\n .directive('ionSearchBar', function ($timeout) {\n return {\n restrict: 'E',\n replace: true,\n scope: { search: '=?filter' },\n link: function (scope, element, attrs) {\n scope.placeholder = attrs.placeholder || '';\n scope.search = { value: '', focus: false };\n if (attrs.class) {\n element.addClass(attrs.class);\n }\n\n // We need the actual input field to detect focus and blur\n var inputElement = element.find('input')[0];\n\n // This function is triggered when the user presses the `Cancel` button\n scope.cancelSearch = function () {\n // Manually trigger blur\n inputElement.blur();\n scope.search.value = '';\n };\n\n // When the user focuses the search bar\n angular.element(inputElement).bind('focus', function () {\n // We store the focus status in the model to show/hide the Cancel button\n scope.search.focus = 1;\n // Add a class to indicate focus to the search bar and the content area\n element.addClass('search-bar-focused');\n angular\n .element(document.querySelector('.has-search-bar'))\n .addClass('search-bar-focused');\n // We need to call `$digest()` because we manually changed the model\n scope.$digest();\n });\n // When the user leaves the search bar\n angular.element(inputElement).bind('blur', function () {\n scope.search.focus = 0;\n element.removeClass('search-bar-focused');\n angular\n .element(document.querySelector('.has-search-bar'))\n .removeClass('search-bar-focused');\n });\n },\n template:\n '<div class=\"search-bar bar bar-header item-input-inset\">' +\n '<label class=\"item-input-wrapper\">' +\n '<i class=\"icon ion-ios-search placeholder-icon\"></i>' +\n '<input type=\"search\" placeholder=\"\" ng-model=\"search.value\">' +\n '</label>' +\n '<button class=\"button button-clear button-positive\" ng-show=\"search.focus\" ng-click=\"cancelSearch()\">' +\n 'Cancel' +\n '</button>' +\n '</div>',\n };\n });All the styling and animation is defined in CSS, or in my case in Sass. If you look at the template code in the directive above you can see that I am (misusing) the bar-header to position the search bar. Therefore we need to move the search bar and the content area a few pixels down in the unfocused state and back up in the focused state. One thing in the code below is still bothering me but I couldn't figure out a nicer solution and that is the margin-right right in button.ng-hide. What happens is that Angular hides the cancel button using display: none but this cannot be animated and I could not figure out another way to move the Cancel button off screen in an animatable way. If you have any suggestions please contact me.
.search-bar {\n top: 44px;\n transition: all ease-in-out 250ms;\n z-index: 15;\n\n button,\n input {\n transition: all ease-in-out 250ms;\n }\n\n button.ng-hide {\n margin-right: -67px;\n }\n\n &.search-bar-focused {\n top: 0;\n }\n}\n\n.has-search-bar {\n margin-top: -2px;\n top: 88px;\n transition: top ease-in-out 250ms;\n\n &.search-bar-focused {\n top: 44px;\n }\n}This code works great in the browser (I tested it in Safari, Chrome and Firefox), but on iOS we need to consider the status bar at the top. We need to add 20px to all the top values and remove the top margin of the input field when the search bar is not focused. As you can see in the very first selector, that code is not required if your app runs in fullscreen.
.platform-ios.platform-cordova:not(.fullscreen) {\n .search-bar.bar-header {\n height: 44px;\n top: 64px;\n\n &.search-bar-focused {\n height: 64px;\n top: 0;\n }\n }\n\n .search-bar.bar-header.item-input-inset {\n .item-input-wrapper {\n transition: all ease-in-out 250ms;\n margin-top: 0 !important;\n }\n }\n\n .search-bar.search-bar-focused.bar-header.item-input-inset {\n .item-input-wrapper {\n margin-top: 19px !important;\n }\n }\n\n .has-search-bar {\n top: 108px;\n\n &.search-bar-focused {\n top: 64px;\n }\n }\n}In iOS simulator the interaction looks like this:
\n![\"iOS](\"/blog/2015-07-25-ios-search-bar-ionic/ionic-search-bar.gif\")
If you look closely at the animation and the one above with the original iOS behaviour you can see that I am not using a grey background for the search bar. Personally I like the white background better.
", "url": "/blog/ios-search-bar-ionic/", "title": "Replicating the iOS Search Bar with Ionic", "date_modified": "2015-07-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/the-problem-with-online-advertisment/", "content_html": "On Wednesday Apple released iOS 9 and one of its features is the WebKit Content Blocker API which allows developers to create ad and tracker blockers for iOS. Apple did not create an ad blocker themselves, but they gave developers the possibility to create one and many have done so. I use Peace (has been pulled from the App Store) by Marco Arment, but I have also heard good things about Crystal (Crystal now whitelists ads from companies that pay). While many people want to use this apps to get rid of ads, I want to reduce the amount of tracking I am exposed to. In this article I am going to explain how you can be tracked on the internet and why it is a problem.
There are many ways to track users across the web, and I want to begin with the most basic one. When you open a website in a browser or when an app you are using is talking to a server the data is most likely transferred over the HTTP protocol (or HTTPS if it is a secure connection). If you are reading this article right now in a web browser you leave something like this on my server:
\n42.42.42.42 - - [17/Sep/2015:18:10:29 -0400] \"GET /articles/thoughts-on-apple-music/ HTTP/1.1\" 200 3190 \"-\" \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) Version/8.0.8 Safari/600.8.9\"The interesting parts, from a privacy perspective are the IP address (the first part) and the user agent (the last part). In the example above the IP address is 42.42.42.42 (obviously not my real one), which is the internet address of my computer (or of my home network). The user agent is an identifier of my browser, each browser and each version has its own user agent. There is a massive amount of different user agents. Because user agents are different based on the operating system you are using, the browser, the version of the browser and sometimes even the plugins you have installed it is possibly to identify people solely on their user agent. The Electronic Frontier Foundation (EFF) has done some research on user agent tracking in 2010.
At this point I should mention that by identifying I don't mean that they know your name, it just means that if you access the site a few days or weeks later they can recognise that you are the same person.
\nAdditionally if you are running JavaScript on a site you can extract even more information. For example, the Screen object in JavaScript contains information about your display, which includes the size of your screen and the pixel density. You can also retrieve the width and the height of the browser window. Combining all these types of information, IP address, user agent, screen sizes and so on you can be identified within a pretty large group of people already and we haven't even started with cookies yet.
Cookies are key-value pairs that a site can leave in your browser. When you visit the same site later it can read the value from the cookie it had written before. This is pretty useful, without the concept of logging into a website would not work. But this technique can also be used to track users across a long time span.
\nAll these techniques described above are useful to develop websites, a web server can't send us the page we requested if it does not know our IP address, without cookies it would not be possible to create websites that require a login and the information about our screen and browser are useful to developers to create a better user experience. But the thing is, a website can include arbitrary resources from other servers. This can be either images, styles, or JavaScript code. And these scripts get access to the same information then the main websites you visited.
\nWell, expect cookies, because for a few years now most browsers block so called third party cookies, which means that now only the website you are visiting can set a cookie, not images, stylesheets, and scripts that are loaded from a different server. However, advertising is a shady business and advertisers and tracking companies always try to find bugs and tricks to circumvent this. Not only the shady ones, even Google does it. Examples here and here.
\nThe problem I have with advertisement and tracking companies is that they are everywhere. I can absolutely live with the fact the website I am visiting is knowing which pages I access, but the problem is that the same ad servers and trackers are included everywhere and if these companies can get enough identifying data from your browser they can track your browsing history quit accurately. They could know which food you like, if you have financial problems, if you are looking for a partner, and, of course, what kind of porn you like. I am also a little bit scared that some governments have deals with these companies and got a backdoor for this information. Ever since Snowden you can never know. Some may just have some pretty weak security and hackers can get into their servers.
\nNowadays we rarely type an URL into the address bar of our browser. Instead we click on links on Facebook or Google and thus we often don't know the site we are browsing to and we don't know which type of trackers they include. And most publishers of content include dozens of them. If you look at news sites or blogs you will often find over twenty different third party resources. The Verge, for example, includes 116 resources from 65 different serves on a single page. Not all of these are trackers or advertisement, but still my information is sent to another server.
\nUsing content blockers does not fully solve this problem, but at least it gives users more control over our data. Currently it looks like that whenever an advertiser is coming to a publisher and saying include this JavaScript on your page the publisher says yes, of course. If more people are starting to use ad blockers publishers will need to think about different ways of monetising their content or about different ways to display advertisement.
\nUpdate September 24, 2015:\nRemoved the links to both Peace and Crystal from the article. Peace has been pulled from the App Store and Crystal now accepts payments from advertises to whitelists ads. Doesn't feel good to recommend Crystal anymore.
", "url": "/blog/the-problem-with-online-advertisment/", "title": "The Problem with Online Advertisement", "date_modified": "2015-09-18T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/chain-better-arrays-in-php/", "content_html": "The array functions in PHP are, like many other things in PHP, a mess. One problem is the inconsistency in the API, for example, array_map() accepts a callback as first parameter and the array as second; on the other hand, array_filter() accepts the array as first parameter and a callback as second. In general, wrapping the function around the array produces code that is hard to read and is not very nice to look at.
In the following example we generate an array with 10 elements with a value of 20, then we assign to each element a random number between 0 and the elements value (that is, 20) and then filter the array to only contain odd values.
$arr = array_filter(\n array_map(\n function ($v) { return rand(0, $v); },\n array_fill(0, 10, 20)\n ),\n function ($v) { return $v & 1; }\n);How long do you need to look at the following piece of code to understand it?
\necho array_sum(array_intersect(\n array_diff([1, 2, 3, 4, 5], [0, 1, 9]),\n array_filter([2, 3, 4], function ($v) { return !($v & 1); })\n));I use the kind of array operations frequently in other languages, but only very seldom in PHP. Today while taking a walk I thought about this problem and a possible solution. What I came up with is Chain, an object-oriented wrapper for arrays that allow chaining of array manipulations.
\nFirst let us take a look at what the above examples look like with Chain. The first one is pretty straight forward, create a filled array, map and filter.
\n$chain = Chain::fill(0, 10, 20)\n ->map(function ($v) { return rand(0, $v); })\n ->filter(function ($v) { return $v & 1; });The second example is also pretty straight forward I believe
\necho (new Chain([1, 2, 3, 4, 5]))\n ->diff([0, 1, 9])\n ->intersect((new Chain([2, 3, 4]))->filter(function ($v) { return !($v & 1); }))\n ->sum();By using Chain the information is defined in the order we need to understand it. First we define an array, then we create a diff and intersect it with another chain, which is filtered. Lastly we build the sum of the resulting array.
\nThere exist three kind of methods:
\nCurrently you can create a Chain by passing an array to the constructor or by using the static ::fill() method which\nworks exactly like array_fill().
Methods that manipulate an array always modify the internal representation of the array and return an instance to the Chain object (that is, they are chainable). When a method accepts an array as parameter it also accepts an Chain object instead.
The last kind of method are those that return some kind of value, not the object. This includes ->count(), ->sum() and ->reduce(). If you want to retrieve the underlaying array you can use the public property ->array.
Take a look at the Chain project on Github; I started with a very basic implementation this evening and implemented some methods. There are still many array functions missing but I hope I to add them very soon.
\nIf you want to help out I would appreciate pull requests very much. You will see that implementing new methods is very easy. I decided to use traits for this project, mostly because the amount of array functions in PHP would make the Chain class and the associated test class huge. By using traits we have a lot of small classes and a lot of small and simple test classes.
If you looked at Chain, the library I released yesterday you may have noticed that most of the functionality is implemented in traits to keep single classes small and clean. I also want to keep the tests clean and was delighted to find out that you can mock a class that uses a trait.
\nCreating a mock is pretty straight forward with PHPUnit:
\n$mock = $this->getMockForTrait('TraitUnderTest');\n$mock->foo();In addition you can mock methods of the using object that are called by the mock.
\n$mock->expects($this->any())\n ->method('isBar')\n ->will($this->returnValue(TRUE));Source:
\n", "url": "/blog/testing-traits-with-mocks-in-phpunit/", "title": "Testing Traits with Mocks in PHPUnit", "date_modified": "2015-09-28T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/video-streams-in-gulp-js/", "content_html": "Back in June I talked about Streams in Gulp.js at the Vienna.js meetup and Roland Schütz filmed and edited the video and it's now available on YouTube: Streams in Gulp.js (Video)
\nThere are things I could have done better, especially in the question and answer part, but I am actually pretty proud of it.
", "url": "/blog/video-streams-in-gulp-js/", "title": "Streams in Gulp.js", "date_modified": "2015-10-13T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/united-kingdom-august-2015/", "content_html": "For the last couple days the weather in Vienna was cold, wet, and windy. This reminded me of my trip to Scotland in the summer and the fact that I still have not posted any pictures here. Many of these I have already put on Instagram or Tumblr, but I wanted to all have them here on my on server.
\nTogether with my friend Karin we bought Interrail tickets and on the first day we started from Linz to Cologne.
\n![\"Dome](\"/blog/united-kingdom-august-2015/IMG_0194-320.jpg\")
On the second day we took a train to Rotterdam and then a ferry to Harwich in England and spent a night in London.
\n![\"On](\"/blog/united-kingdom-august-2015/IMG_0183-320.jpg\")
![\"Ferry](\"/blog/united-kingdom-august-2015/IMG_0186-320.jpg\")
![\"Container](\"/blog/united-kingdom-august-2015/IMG_0189-320.jpg\")
![\"On](\"/blog/united-kingdom-august-2015/IMG_0192-320.jpg\")
After a few drinks in Hackney and a good nights sleep we continued to Newcastle-upon-Thyne in the north of England.
\n![\"Gatehead](\"/blog/united-kingdom-august-2015/IMG_0180-320.jpg\")
![\"Inside](\"/blog/united-kingdom-august-2015/IMG_0193-320.jpg\")
On the next morning we finally made our way to Scotland and for the first couple of nights we stayed in Edinburgh.
\n![\"North](\"/blog/united-kingdom-august-2015/IMG_0197-320.jpg\")
![\"On](\"/blog/united-kingdom-august-2015/IMG_0201-320.jpg\")
![\"On](\"/blog/united-kingdom-august-2015/IMG_0203-320.jpg\")
![\"Edinburgh](\"/blog/united-kingdom-august-2015/IMG_0211-320.jpg\")
![\"Edinburgh](\"/blog/united-kingdom-august-2015/IMG_0212-320.jpg\")
![\"Greyfriars](\"/blog/united-kingdom-august-2015/IMG_0213-320.jpg\")
![\"Taking](\"/blog/united-kingdom-august-2015/IMG_0216-320.jpg\")
We continued our journey north and stayed for a night in Pitlochery and took a walk to the nearby town of Killicrankie.
\n![\"River](\"/blog/united-kingdom-august-2015/IMG_0217-320.jpg\")
![\"House](\"/blog/united-kingdom-august-2015/IMG_0218-320.jpg\")
![\"Woods](\"/blog/united-kingdom-august-2015/IMG_0220-320.jpg\")
![\"Woods](\"/blog/united-kingdom-august-2015/IMG_0221-320.jpg\")
![\"Soldiers](\"/blog/united-kingdom-august-2015/IMG_0222-320.jpg\")
![\"Woods](\"/blog/united-kingdom-august-2015/IMG_0224-320.jpg\")
![\"Near](\"/blog/united-kingdom-august-2015/IMG_0226-320.jpg\")
![\"Edradour](\"/blog/united-kingdom-august-2015/IMG_0227-320.jpg\")
![\"Edradour](\"/blog/united-kingdom-august-2015/IMG_0228-320.jpg\")
![\"Edradour](\"/blog/united-kingdom-august-2015/IMG_0229-320.jpg\")
We had some problems finding a place to sleep, so we were quite happy when we found a hostel in Inverness for three nights.
\n![\"River](\"/blog/united-kingdom-august-2015/IMG_0230-320.jpg\")
On the first day we took a a trip to Dunrobin Castle, which is a pretty nice castle at the east cost of Scotland.
\n![\"Dunrobin](\"/blog/united-kingdom-august-2015/IMG_0233-320.jpg\")
![\"Dunrobin](\"/blog/united-kingdom-august-2015/IMG_0234-320.jpg\")
One of the places we wanted to visit was the Isle of Skye, because there is absolutely no reliable public transport going to the Isle we had to book a bus tour.
\n![\"Highland](\"/blog/united-kingdom-august-2015/IMG_0239-320.jpg\")
![\"Eilean](\"/blog/united-kingdom-august-2015/IMG_0241-320.jpg\")
![\"Loch](\"/blog/united-kingdom-august-2015/IMG_0242-320.jpg\")
After a few stops along the way we finally arrived on the Isle.
\n![\"Vote](\"/blog/united-kingdom-august-2015/IMG_0243-320.jpg\")
![\"Kyleakin](\"/blog/united-kingdom-august-2015/IMG_0244-320.jpg\")
![\"On](\"/blog/united-kingdom-august-2015/IMG_0246-320.jpg\")
![\"Elgol](\"/blog/united-kingdom-august-2015/IMG_0247-320.jpg\")
![\"Elgol](\"/blog/united-kingdom-august-2015/IMG_0249-320.jpg\")
![\"Way](\"/blog/united-kingdom-august-2015/IMG_0250-320.jpg\")
![\"Isle](\"/blog/united-kingdom-august-2015/IMG_0253-320.jpg\")
On our way to Glasgow we stopped for a few hours in Stirling and visited the old town and, of course, the castle.
\n![\"Graveyard](\"/blog/united-kingdom-august-2015/IMG_0255-320.jpg\")
In the evening we arrived in Glasgow and went for an ale in Brewdog pub.
\n![\"Brewdog](\"/blog/united-kingdom-august-2015/IMG_0260-320.jpg\")
![\"Glasgow\"](\"/blog/united-kingdom-august-2015/IMG_0262-320.jpg\")
![\"Graveyeard](\"/blog/united-kingdom-august-2015/IMG_0263-320.jpg\")
![\"Glasgow\"](\"/blog/united-kingdom-august-2015/IMG_0265-320.jpg\")
![\"People's](\"/blog/united-kingdom-august-2015/IMG_0266-320.jpg\")
![\"Glasgow\"](\"/blog/united-kingdom-august-2015/IMG_0267-320.jpg\")
![\"Glasgow\"](\"/blog/united-kingdom-august-2015/IMG_0268-320.jpg\")
![\"SSE](\"/blog/united-kingdom-august-2015/IMG_0269-320.jpg\")
![\"Clyde](\"/blog/united-kingdom-august-2015/IMG_0270-320.jpg\")
After two nights in Glasgow we left Scotland and went to Liverpool for a night.
\n![\"Port](\"/blog/united-kingdom-august-2015/IMG_0271-320.jpg\")
![\"Cathedral](\"/blog/united-kingdom-august-2015/IMG_0273-320.jpg\")
The last two nights we spent in Cardiff in Wales.
\n![\"Market](\"/blog/united-kingdom-august-2015/IMG_0276-320.jpg\")
![\"Mouth](\"/blog/united-kingdom-august-2015/IMG_0279-320.jpg\")
![\"Mouth](\"/blog/united-kingdom-august-2015/IMG_0280-320.jpg\")
![\"Taking](\"/blog/united-kingdom-august-2015/IMG_0281-320.jpg\")
![\"Beer](\"/blog/united-kingdom-august-2015/IMG_0282-320.jpg\")
![\"View](\"/blog/united-kingdom-august-2015/IMG_0283-320.jpg\")
![\"Cardiff](\"/blog/united-kingdom-august-2015/IMG_0285-320.jpg\")
We travelled back to Austria with a short stop in Brighton and spend a few hours on the beach.
\n![\"Beach](\"/blog/united-kingdom-august-2015/IMG_0286-320.jpg\")
Oslo has been on my list of cities I wanted to visit for some time now and when I saw the lineup of By:Larm festival I knew that I needed to go to Oslo in March. Once again my friend Karin decided to join me and here we are, after five days in the capital of Norway in which we saw amazing bands, drank the most expensive beers of our lives, used the subway to get to Oslos skiing area and had a really great time.
\nI arrived in the late afternoon and after a delicious burger we saw Léonne (Photo), Whitney (Photo), Oscar Blesson and Bea1991 at Pokalen.
\n![\"Léonne](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2916.jpg\")
![\"Whitney](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2923.jpg\")
On the second day snow from the previous night was still covered the ground of Oslo and we walked around the city. Along Karl johann gate through Slottsparken and around the new waterfront area. We also visited the Astrup Fearnley Museum of Modern Art, drank coffee and ate Kanelbulle. On the way back to our apartment we walked through the old fortress, Akershus festning.
\n![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2979.jpg\")
![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2980.jpg\")
![\"Olso](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2981.jpg\")
![\"Akershus](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2983.jpg\")
![\"Akers](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_2984.jpg\")
![\"Akershus](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3662.jpg\")
![\"Akershus](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3665.jpg\")
In the evening we attended so many shows. I started with Siv Jakobsen (photo) and Karin later joined me at Café Mono for Pale Honey (photo), Ida Stein (photo) at Sentrum Scene, Charlotte Dos Santos at Gamla, Abra (photo) at Internasjonalen, Little Jinder at Drømmelteltet and Dolores Haze (photo) at Verkstedet.
\n![\"Siv](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3666.jpg\")
![\"Pale](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3671.jpg\")
![\"Ida](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3673.jpg\")
![\"Abra](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3676.jpg\")
![\"Dolores](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3663.jpg\")
On Friday we went to the Munch Museum where there was an amazing Munch+Mapplethorpe exhibition and later we took a ferry trip around the islands in the Oslo Fjörd. We had more coffee and kanelbulle and ate another great burger and Illegal Burgers.
\n![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3678.jpg\")
![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_3680.jpg\")
![\"Illegal](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4035.jpg\")
We saw Sea Lion (photo) and Alice Boman (photo) at St. Edwards Church, Kwamie Liv (photo) at Sentrum Scene and then again at St. Edwards Church Pixx (photo).
\n![\"Sea](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4036.jpg\")
![\"Alice](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4037.jpg\")
![\"Kwamie](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4038.jpg\")
![\"Pixx](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4039.jpg\")
The next day we took the subway (T-banen) to Holmenkolmmen, visited the Ski Museum and took the elevator to the top of the ski jump tower (Holmenkollbakken). The biathlon world championship was while we were there, so there was a lot of action going on. On our way home we stopped at Fram musueum to learn about the history of polar expeditions and visit the boats that took the Norwegians to the poles.
\n![\"Holmenkollbakken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4254.jpg\")
![\"Biathlon](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4255.jpg\")
![\"Holmenkollbakken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4256.jpg\")
![\"View](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4259.jpg\")
In the evening we saw The Prettiots at Café Mono (photo), Holly Macvie at St. Edwards Church, Lafawndah at Internasjonalen (photo), Bright at Verkstedet, Palace Winter at Rockefeller (photo) and Skinny Girl Diet (photo) at Revolver.
\n![\"The](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4261.jpg\")
![\"Lafawndah](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4268.jpg\")
![\"Palace](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4408.jpg\")
![\"Skinny](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4409.jpg\")
On Sunday morning we visited the Opera and then Karin had to fly home, but since my flight was on Monday morning I spent the rest of the day wandering around Oslo, visiting Vigelandsparken and the national gallery.
\n![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4410.jpg\")
![\"On](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4411.jpg\")
![\"Vigelandsparken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4413.jpg\")
![\"Vigelandsparken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4414.jpg\")
![\"Vigelandsparken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4415.jpg\")
![\"Vigelandsparken,](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4416.jpg\")
![\"Oslo](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4448.jpg\")
![\"Akershus](\"/blog/2016-03-11-oslo-bylarm-mach-2016/IMG_4450.jpg\")
Thanks Oslo for an amazing time. And the next time we will be going way up to the north.
\n", "url": "/blog/oslo-bylarm-march-2016/", "title": "Oslo and By:Larm Festival, March 2016", "date_modified": "2016-03-11T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/zagreb-croatia-june-2016/", "content_html": "After one too many after work beers back in May I decided to go to Zagreb, Croatia in June. It was just for two nights over the weekend, but it was wonderful and here are some pictures.
\n![\"Crkva](\"/blog/zagreb-croatia-june-2016/IMG_5467-320.jpg\")
![\"Square](\"/blog/zagreb-croatia-june-2016/IMG_5460-320.jpg\")
![\"Stairs](\"/blog/zagreb-croatia-june-2016/IMG_5461-320.jpg\")
![\"View](\"/blog/zagreb-croatia-june-2016/IMG_5462-320.jpg\")
![\"Gornji](\"/blog/zagreb-croatia-june-2016/IMG_5464-320.jpg\")
![\"View](\"/blog/zagreb-croatia-june-2016/IMG_5494-320.jpg\")
![\"View](\"/blog/zagreb-croatia-june-2016/IMG_5466-320.jpg\")
![\"Croatian](\"/blog/zagreb-croatia-june-2016/IMG_5468-320.jpg\")
![\"Botanical](\"/blog/zagreb-croatia-june-2016/IMG_5469-320.jpg\")
![\"Zagreb](\"/blog/zagreb-croatia-june-2016/IMG_5470-320.jpg\")
![\"Park](\"/blog/zagreb-croatia-june-2016/IMG_5471-320.jpg\")
![\"Park](\"/blog/zagreb-croatia-june-2016/IMG_5472-320.jpg\")
![\"Zagrebačka](\"/blog/zagreb-croatia-june-2016/IMG_5527-320.jpg\")
![\"Meštrović](\"/blog/zagreb-croatia-june-2016/IMG_5528-320.jpg\")
![\"Gornji](\"/blog/zagreb-croatia-june-2016/IMG_5529-320.jpg\")
Ich laufe durch die Straßen Wiens und weiß nicht so genau wohin. Letzte Nacht habe ich wenig und schlecht geschlafen. Als um 5 Uhr Morgens die Wahrscheinlichkeit eines Sieges Trumps auf über 90% gestiegen ist, bin ich ins Bett. Jedes Mal wenn ich aufgewacht bin hatte er mehr Stimmen im Electoral College. Irgendwann war er Präsident.
\nTrump ist ein Egoist; er nimmt sich was er will ohne sich um die Konsequenzen zu kümmern. Seine Taten haben keine Konsequenzen für ihn weil er Macht hat und kein Schamgefühl. Bislang kam seine Macht aus seinem Reichtum und seiner Bekanntheit, ab 20. Jänner 2017 hat er tatsächliche politische Macht.
\nDie Zeit wird zeigen ob er wirklich eine Mauer zu Mexiko bauen wird, ob er wirklich Clinton versucht einzusperren, aber es geht nicht nur um Donald Trump. Mike Pence wird Vizepräsident sein, ein Typ der Leuten die Homosexualität mit Elektroschocks austreiben will, der verlangt, dass Frauen ein Begräbnis für totgeborene Föten abhalten müssen. Es geht um den Senat und das die Republikaner jetzt das Weiße Haus, den Senat und das Repräsentantenhaus kontrollieren. Es geht um den freien Sitz im Supreme Court, den Trump besetzen kann. Damit müssen die Amerikaner nicht nur vier Jahre leben sondern eine Generation.
\nDie USA sind weit vielleicht geographisch weit weg, aber der Hass ist ganz nah. Präsident Trump ist der größte Sieg für die Neue Rechte bisher, aber nicht der Letzte. Am 4. Dezember hat Norbert Hofer gute Chancen der österreichische Bundespräsident zu werden. 2017 Le Pen in Frankreich? Pegida und die AfD in Deutschland. Die Rechten erstarken überall in Europa und die traditionellen, konservativen Volksparteien ziehen mit und verschieben die Mitte nach rechts. Was gestern noch unsagbar war ist heute das neue normal.
\nIch will nicht das Rassismus, Sexismus und Homophobie wieder zur Normalität wird. Hass soll nicht wieder der Standard sein. Wir haben in den letzten Jahrzehnten so viel erreicht und ich will nicht wahrhaben, dass wir Schritt für Schritt zurück gehen. Es hat angefangen mit der französischen Revolution, aber wir sollten nicht wieder zu einem Stand kommen bei dem Freiheit, Gleichheit und Brüderlichkeit nur für weiße, heterosexuelle Männer gelten.
\nZum Ende die Worte einer Kommentatorin im US Fernsehen:
\n\n", "url": "/blog/wien-9-november-2016/", "title": "Wien, 9. November 2016", "date_modified": "2016-11-09T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/new-job-web-developer/", "content_html": "I have nothing left to lose so I will say it: This is white supremacy's last stand.
\n
TL;DR Recently I quit my job and I am now looking for a company that wants to hire a frontend and/or backend web developer (you might call it full stack). I create websites since I was 12 and worked for the past 8 years in companies creating websites and apps. My master thesis on Machine Learning is currently in the submission process. I am looking for a full time position in Vienna or remote.
\nWhen I started creating websites in 1998 I was 12 and I built layouts with tables and styled content using HTML tags. Nowadays I use sophisticated frameworks, Sass and SVG to create usable web sites and applications that work on any device. After 18 years I still love this shit.
\nCurrently I hold a Bachelor of Science degree, but my master thesis is currently in the submission process and it should not take much longer until I receive my Master of Science degree. In my thesis I write about Web Data Extraction using Machine Learining. I also did a curriculum supplement on Innovation.
\nFor me the most important part is working with a great team. I am not looking for a job where I have to work alone on a product. I value people over process. No matter what software development methodology you are using, I believe that it should not limit people in creating great products.
\nI deeply care about building great products, but I don't really care which technologies your company is using. Due to my long experience I can learn new frameworks, tools and languages quite easily. However, in case you are wondering, here are some technologies I have used in the past and that are as of November 2016 not yet irrelevant: JavaScript, PHP, Java, TypeScript, Ionic Framework, AngularJS, Bootstrap, MySQL/MariaSQL, SQLite, Vue.js, Gulp, Grunt, Webpack, CSS, Sass, Less, Stylus, Ruby, Wordpress, Symfony, Laravel, Git.
\nI also have a CV.
\nIf you believe that I might be right for your team and you have a job offer in Vienna or remote, please contact me and we can talk further.
", "url": "/blog/new-job-web-developer/", "title": "I'm Looking For a New Job As Full Time Web Developer", "date_modified": "2016-11-22T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2016/", "content_html": "In 2016 I managed for the first time to read 52 books, that is, one book per week on average. In reality I read a lot at the beginning of the year and at the end of the year. During the summer I read very little, which is the fault of Pokémon Go and I read a lot in November and December when I was unemployed. For 2017 I set my goal to 60 books, it will take less than 365 days to see how this goes.
\nWithout further ado here is the list of books I have read in 2016. I include links to Amazon, but I recommend that you do as I do and buy them at your local book store. At least some of the books on that list, I have found while browsing the store waiting to pick up my order.
\nYou know the drill by now: another Friday, another list of great new albums.
\nAfter the brilliant Form/a EP from last year Half Waif have released their second album Lavender today. This is the finest synth pop.
\n![\"Album](\"/blog/new-albums-2018-04-27/half-waif-lavender-320.jpg\")
Check out the beautiful Back in Brooklyn.
\nBandcamp\nApple Music\nSpotify
\n![\"Dirty](\"/blog/new-albums-2018-04-27/janelle-monae-dirty-computer-320.jpg\")
Please watch the video for PYNK, which features Grimes.
\nBandcamp\nApple Music\nSpotify
\nI love this kind of indie rock. 🎸
\n![\"Album](\"/blog/new-albums-2018-04-27/speedy-ortiz-twerp-verse-640.jpg\")
Watch the music video for Lucky 88.
\nBandcamp\nApple Music\nSpotify
\nThis is Okkervil River ninth official full length album since 2002. That's a lot of output and I still like their version of folk rock.
\n![\"In](\"/blog/new-albums-2018-04-27/okkervil-river-in-the-rainbow-rain-320.jpg\")
Listen to Don't Move Back To LA.
\nBandcamp\nApple Music\nSpotify
", "url": "/blog/new-albums-2018-04-27/", "title": "New Albums on April 27, 2018", "date_modified": "2017-04-27T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/summer-2017-playlist/", "content_html": "A collection of songs I like to listen to this summer. When I walk through the streets in the blistering heat, when I sit in the shade, when I sit beside the open window while a storm is raging outside.
\n![\"Summer](\"/blog/summer-2017-playlist/summer-2017-playlist-320.jpg\")
Playlist on Apple Music, Spotify and YouTube.
", "url": "/blog/summer-2017-playlist/", "title": "Summer 2017 Playlist", "date_modified": "2017-07-12T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/demokratie-verkaufen/", "content_html": "Wir müssen aufpassen in Österreich, dass die Spenden von der Industrie an die Politik nicht aus dem Ruder laufen. Verhältnisse wie in den USA wo Politiker_innen den Großteil ihrer Zeit mit Spenden sammeln verbringen brauchen wir nicht.
\nTransparenz alleine wird da nicht reichen. In dem aktuellen Wahlkampf haben die sechs größten Spender_innen der ÖVP 561.463 Euro an die Partei überwiesen, die Kleinspender_innen (unter 100 Euro) nur ungefähr 132.000 Euro. Wenn KTM-Chef Pierer 436.463 Euro an die ÖVP überweist dann will er etwas dafür. Wenn ich an die Wiener Tafel spende will ich das niemand in Wien verhungern muss. Wenn ich an Ärzte ohne Grenzen spende will ich das niemand im Mittelmeer ertrinken muss. Was Pierer will hat er in Interviews offen gesagt: Arbeitszeitflexibilisierung, also einen 12-Stundentag ohne Lohnausgleich.
\nEine Obergrenze für Spenden, zum Beispiel 1.000 Euro pro Person und Firma pro Jahr, würde dagegen helfen. Stattdessen erhöhen wir die Parteifinanzierung. Demokratie ist nicht gratis und wir als Gesellschaft sollten diese Demokratie finanzieren und damit sicherstellen das sie auch im Interesse von uns allen arbeitet. Natürlich, das kostet Geld, aber auch wenn Parteien von der Industrie finanziert werden kostet uns das Geld. Pierer hat sein Vermögen ja nicht hergezaubert, Kund_innen von KTM haben Pierer zu seinem Vermögen verholfen und seine Spende an die ÖVP ermöglicht. Wenn die ÖVP die von ihm geforderte Arbeitsflexibilisierung bestimmt zahlen alle Arbeitnehmer_innen in Österreich noch einmal in Form von nicht bezahlten Überstunden.
\nLeistung ohne Gegenleistung macht die Reichen noch ein wenig reicher und dann bleibt vielleicht auch noch ein bisschen mehr Geld für die ÖVP übrig.
\n![\"Belfast,](\"/blog/ireland-photos/7-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/11-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/13-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/14-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/16-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/17-320.jpg\")
![\"Botanical](\"/blog/ireland-photos/18-320.jpg\")
![\"City](\"/blog/ireland-photos/23-320.jpg\")
![\"Street](\"/blog/ireland-photos/24-320.jpg\")
![\"Whiskey](\"/blog/ireland-photos/25-320.jpg\")
![\"Grafitti](\"/blog/ireland-photos/28-320.jpg\")
![\"Grafitti](\"/blog/ireland-photos/29-320.jpg\")
![\"Harbour](\"/blog/ireland-photos/30-320.jpg\")
![\"Titanic](\"/blog/ireland-photos/31-320.jpg\")
![\"Harbour](\"/blog/ireland-photos/37-320.jpg\")
![\"Fish](\"/blog/ireland-photos/39-320.jpg\")
![\"House](\"/blog/ireland-photos/42-320.jpg\")
![\"Street](\"/blog/ireland-photos/43-320.jpg\")
![\"View](\"/blog/ireland-photos/44-320.jpg\")
![\"Selfie](\"/blog/ireland-photos/45-320.jpg\")
![\"You](\"/blog/ireland-photos/48-320.jpg\")
![\"Grafitti](\"/blog/ireland-photos/49-320.jpg\")
![\"Grafitti](\"/blog/ireland-photos/50-320.jpg\")
![\"Grafitti](\"/blog/ireland-photos/51-320.jpg\")
![\"#derryhappy](\"/blog/ireland-photos/52-320.jpg\")
![\"Street](\"/blog/ireland-photos/53-320.jpg\")
![\"Street](\"/blog/ireland-photos/54-320.jpg\")
![\"Street](\"/blog/ireland-photos/55-320.jpg\")
![\"Street](\"/blog/ireland-photos/1-320.jpg\")
![\"Street](\"/blog/ireland-photos/2-320.jpg\")
![\"Dublin](\"/blog/ireland-photos/3-320.jpg\")
![\"James](\"/blog/ireland-photos/4-320.jpg\")
![\"National](\"/blog/ireland-photos/5-320.jpg\")
![\"Street](\"/blog/ireland-photos/6-320.jpg\")
![\"Hiking](\"/blog/ireland-photos/8-320.jpg\")
![\"Hiking](\"/blog/ireland-photos/9-320.jpg\")
Here are my favourite albums of 2017 in no particular order.
\n![\"Album](\"/blog/favourite-albums-2017/torres-three-futures-320.jpg\")
Listen to Helen in the Woods and Skim.\nFull album on Apple Music and\nSpotify.
\n![\"Album](\"/blog/favourite-albums-2017/squalloscope-exoskeletons-for-children-320.jpg\")
Listen to Pando and Being a Person.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/waxahatchee-out-in-the-storm-320.jpg\")
Listen to Recite Remorse and Brass Beam.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/austra-future-politics-320.jpg\")
Listen to I Love You More Than You Love Yourself and Future Politics.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/bully-losing-320.jpg\")
Listen to Kills to Be Resistant and Blame.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/feist-pleasure-320.jpg\")
Listen to Pleasure and Century.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/pixx-the-age-of-anxiety-640.jpg\")
Listen to Grip and Toes.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/perfume-genius-no-shape-320.jpg\")
Listen to Slip Away and Otherside.\nFull album on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2017/julien-baker-turn-out-the-lights-320.jpg\")
Listen to Turn Out the Lights and Even.\nFull album on Apple Music and Spotify
", "url": "/blog/favourite-albums-2017/", "title": "My Favourite Albums of 2017", "date_modified": "2017-12-29T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2017/", "content_html": "I need to get ready for a New Year's party, but here is the list of books I have read in 2017.
\nFor a while I am posting my favorite new albums of the week on Friday on Twitter. This week I thought I could also put them on my blog, since that is kind of the point of a blog.
\n![\"Album](\"/blog/new-albums-2018-04-06/hinds-i-dont-run-320.jpg\")
Try the music video for The Club.
\n![\"Album](\"/blog/new-albums-2018-04-06/wye-oak-the-louder-i-call-the-faster-it-runs-320.jpg\")
Try Lifer.
\n![\"Album](\"/blog/new-albums-2018-04-06/hop-along-bark-your-head-off-dog-320.jpg\")
Try Prior Things.
\n![\"Album](\"/blog/new-albums-2018-04-06/unknown-mortal-orchestra-sex-and-food-320.jpg\")
Try Not in Love We're Just High.
\n![\"Album](\"/blog/new-albums-2018-04-06/boerd-static-320.jpg\")
Try Blind.
\n![\"The](\"/blog/new-albums-2018-04-06/eels-the-deconstruction-320.jpg\")
Try Today Is The Day.
\n![\"Album](\"/blog/new-albums-2018-04-06/zola-jesus-okovi-additions-320.jpg\")
Update April 8, 2018: I missed that Zola Jesus released Okovi: Additions also on Friday and I added it to the list.
", "url": "/blog/new-albums-2018-04-06/", "title": "New Albums on April 6, 2018", "date_modified": "2018-04-06T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/new-albums-2018-04-20/", "content_html": "After a break last week because I was graduating from university I have two new albums for you this week.
\nThe first one is Hippo Lite by DRINKS. DRINKS is a collaboration between Cate Le Bon and Tim Presley (White Fence) and Hippo Lite is their second album after Hermits on Holiday from 2015.
\n![\"Album](\"/blog/new-albums-2018-04-20/drinks-hippo-lite-640.jpg\")
You can also watch the music video for Corner Shops.
\nBandcamp\nApple Music\nSpotify
\nWhen I read Exitmusic my mind will always wander to Exit Music (For a Film). Exitmusic (the band), however, are making dream pop since 2003 and their new album The Recognitions is perfect for a nice spring evening.
\n![\"Album](\"/blog/new-albums-2018-04-20/exitmusic-the-recognitions-640.jpg\")
I would recommend Iowa for a start, which you can stream from Bandcamp.
\nBandcamp\nApple Music\nSpotify
", "url": "/blog/new-albums-2018-04-20/", "title": "New Albums on April 20, 2018", "date_modified": "2018-04-20T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/gatsby-remark-a11y-emoji/", "content_html": "Everyone loves emoji 💯🎉🔥, but if you use eslint-plugin-jsx-a11y to check the accessibility of your JSX you probably know that emoji need special handling to become accessible. Instead of just writing the emoji, you need to wrap it in a span and add role=\"img\" and aria-labelledby attributes.
<span role=\"img\" aria-label=\"guitar\">\n 🎸\n</span>When writing blog posts in Markdown I don't want to wrap every emoji in a <span> and therefore I created a plugin for Gatsby to automatically wrap emoji with the correct label. The plugin is called gatsby-remark-a11y-emoji and uses gemoji to find the label for an emoji.
You can install the plugin now using NPM or Yarn:
\nnpm install --save gatsby-remark-a11y-emojiThen you need to add the plugin to gatsby-config.js as a plugin to gatsby-transformer-remark. I recommend adding it at the very end of the list, because the plugin transforms Remark text nodes into html nodes.
module.exports = {\n // ...\n plugins: [\n {\n resolve: `gatsby-transformer-remark`,\n options: {\n plugins: [\n // ...\n 'gatsby-remark-a11y-emoji',\n ],\n },\n },\n ],\n};You can also find the project on Github and NPM.
", "url": "/blog/gatsby-remark-a11y-emoji/", "title": "Accessible Emojis with Gatsby", "summary": "I made a plugin for Gatsby to add A11y tags to Emojis in Markdown.", "date_modified": "2018-05-03T23:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/new-albums-2018-05-04/", "content_html": "This one is a few days late, but here are three great albums that were released last Friday.
\n![\"Rebound](\"/blog/2018-05-07-new-albums-2018-05-04/eleanor-friedberger-rebound.jpeg\")
You can listen to the music video for Make Me a Song on YouTube.
\n![\"Lost](\"/blog/new-albums-2018-05-04/middle-kids-lost-friends-640.jpg\")
The music video for On My Knees is on YouTube.
\n![\"Album](\"/blog/new-albums-2018-05-04/belly-dove-320.jpg\")
Belly have a music video for Shiny One.
\nI missed last week because I was travelling again, sorry, but this week is a good one. Lots of good music out today.
\n![\"Album](\"/blog/new-albums-2018-05-18/courtney-barnett-tell-me-how-you-really-feel-320.jpg\")
![\"Album](\"/blog/new-albums-2018-05-18/tt-lovelaws-320.jpg\")
![\"Saved](\"/blog/new-albums-2018-05-18/now-now-saved-320.jpg\")
![\"Everything](\"/blog/new-albums-2018-05-18/quiet-slang-everything-matters-320.jpg\")
![\"Bad](\"/blog/new-albums-2018-05-18/pema-bad-habits-320.jpg\")
![\"Wide](\"/blog/new-albums-2018-05-18/parquet-courts-wide-awake-320.jpg\")
![\"Happy](\"/blog/new-albums-2018-05-18/wax-idols-happy-ending-320.jpg\")
When I saw Sarah Drasners Night Owl theme for Visual Studio Code I immediately fell in love with the colours and I created a color scheme for iTerm2.
\nHere is a quick preview:
\n\nYou can download Night Owl for iTerm2 and it is also on Github.
", "url": "/blog/night-owl-itermcolors/", "title": "Night Owl for iTerm2 🌃", "summary": "I made a theme based on Night Owl for iTerm2.", "date_modified": "2018-05-22T23:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/rollup-scss-css-modules/", "content_html": "CSS Modules are a great way to locally scope CSS to a specific component. Unlike with some CSS-in-JS solutions you are writing normal CSS and then import it in your component. For example,
\n/* Button.css */\n.button {\n background: teal;\n color: white;\n}// Button.js\nimport React from 'react';\nimport css from './Button.css';\n\nexport default ({ children }) => (\n <button className={css.button}>{children}</button>\n);When building your application the generated CSS would look like this:
\n.Button_button__3_Ozh {\n background: coral;\n color: white;\n}This also works with Sass and SCSS files and there is a lot of documentation on how to set up SCSS and CSS Modules with Webpack. However, recently I wanted to use SCSS and CSS Modules in a library project which is bundled using Rollup.
\nI knew that people are using this combination of technologies and I even found some sample projects for this technology stack, but at first I couldn't figure out what they did in their configuration to make it work. The thing that I was missing was that rollup-plugin-postcss also supports Sass and I just need to enable both modules and Sass to make everything work.
\nHere is my final configuration:
\n// rollup.config.js\nimport babel from 'rollup-plugin-babel';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport postcss from 'rollup-plugin-postcss';\nimport peerDepsExternal from 'rollup-plugin-peer-deps-external';\n\nexport default {\n input: './src/index.js',\n\n output: [\n {\n name: 'comlib',\n sourcemap: true,\n file: './dist/index.js',\n format: 'umd',\n globals: { react: 'React' },\n },\n ],\n\n plugins: [\n peerDepsExternal(),\n postcss({\n extract: false,\n modules: true,\n use: ['sass'],\n }),\n babel({ exclude: 'node_modules/**' }),\n resolve(),\n commonjs(),\n ],\n\n external: ['react', 'react-dom'],\n};Everything in this configuration is pretty standard, except for the PostCSS configuration:
\nmodules: true enables CSS modules for the bundle.use: ['sass'] tells the plugin to enable Sass support. You also need to install node-sass explicitly in the projectextract: false keeps the CSS in the JavaScript file. If you want to generate a separate CSS file you can set extract to true and Rollup would build a index.css file which is also put in the projects dist/ directory.Occasionally I encounter a text field I can't paste text into. For example, some websites disable pasting into the email confirmation input field. This Alfred workflow takes the clipboard and types it into the currently focused text field using Apple Script. In addition you can also type the text in the Alfred window.
\n\nYou can download the latest release from the releases page on Github.
", "url": "/blog/alfred-workflow-type-text/", "title": "Alfred Workflow to Type the Text From the Clipboard Into an Input", "summary": "To circumvent input fields that don't allow pasting this Alfred Workflow types the text from the clipboard into the field.", "date_modified": "2018-10-16T20:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/costa-rica-photos/", "content_html": "![\"Porch](\"/blog/costa-rica-photos/015-320.jpg\")
![\"Banana](\"/blog/costa-rica-photos/016-320.jpg\")
![\"Jungle](\"/blog/costa-rica-photos/022-320.jpg\")
![\"Jungle](\"/blog/costa-rica-photos/024-320.jpg\")
![\"Flower](\"/blog/costa-rica-photos/033-320.jpg\")
![\"Jungle](\"/blog/costa-rica-photos/036-320.jpg\")
![\"Fallen](\"/blog/costa-rica-photos/037-320.jpg\")
![\"Leaf](\"/blog/costa-rica-photos/048-320.jpg\")
![\"Flower](\"/blog/costa-rica-photos/068-320.jpg\")
![\"Arenal](\"/blog/costa-rica-photos/074-320.jpg\")
![\"Frog](\"/blog/costa-rica-photos/079-320.jpg\")
![\"Frog](\"/blog/costa-rica-photos/080-320.jpg\")
![\"Arenal](\"/blog/costa-rica-photos/090-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/094-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/102-320.jpg\")
![\"Iguana](\"/blog/costa-rica-photos/103-320.jpg\")
![\"Sunset](\"/blog/costa-rica-photos/108-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/109-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/114-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/115-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/116-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/119-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/121-320.jpg\")
![\"Selfie](\"/blog/costa-rica-photos/124-320.jpg\")
![\"Armadillo](\"/blog/costa-rica-photos/127-320.jpg\")
![\"Montezuma,](\"/blog/costa-rica-photos/129-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/134-320.jpg\")
![\"Drinking](\"/blog/costa-rica-photos/135-320.jpg\")
![\"Waterfall](\"/blog/costa-rica-photos/136-320.jpg\")
![\"Beach](\"/blog/costa-rica-photos/147-320.jpg\")
![\"Leaf](\"/blog/costa-rica-photos/158-320.jpg\")
![\"Flowers](\"/blog/costa-rica-photos/159-320.jpg\")
![\"Ferry](\"/blog/costa-rica-photos/161-320.jpg\")
![\"Coast](\"/blog/costa-rica-photos/167-320.jpg\")
![\"Capuchin](\"/blog/costa-rica-photos/170-320.jpg\")
![\"Capuchin](\"/blog/costa-rica-photos/172-320.jpg\")
![\"Sloth](\"/blog/costa-rica-photos/175-320.jpg\")
![\"Waterfal](\"/blog/costa-rica-photos/176-320.jpg\")
![\"Templo](\"/blog/costa-rica-photos/178-320.jpg\")
![\"View](\"/blog/costa-rica-photos/179-320.jpg\")
![\"Street](\"/blog/costa-rica-photos/181-320.jpg\")
![\"Clouds](\"/blog/costa-rica-photos/185-320.jpg\")
Here are my favourite albums of 2018 in no particular order.
\n![\"Album](\"/blog/favourite-albums-2018/mitski-be-the-cowboy-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/dessa-chime-320.jpg\")
Full Albums on Apple Music and Spotify
\n![\"Album](\"/blog/favourite-albums-2018/lucius-nudes-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/liza-anne-fine-but-dying-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/hinds-i-dont-run-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/sunflower-bean-twentytwo-in-blue-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/us-girls-in-a-poem-unlimited-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/lucy-dacus-historian-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/leyya-sauna-320.jpg\")
Full Album on Apple Music and Spotify.
\n![\"Album](\"/blog/favourite-albums-2018/first-aid-kit-ruins-320.jpg\")
Full Album on Apple Music and Spotify.
", "url": "/blog/favourite-albums-2018/", "title": "My Favourite Albums of 2018", "date_modified": "2019-01-07T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2018/", "content_html": "Well, January is nearly over so I probably should finally post the list of books I have read in 2018.
\nWhen developing this blog I used a React hook for the very first time: useStaticQuery() from Gatsby. This hook executes a GraphQL query and returns the data to the component. In my case I use it to query the site metadata in a component and I want to mock the useStaticQuery() hook to verify that my components behaves correctly based on the result of the query.
At first I was a bit confused since I have never mocked a React hook before but then I remembered that this is JavaScript where everything is a function and you can easily create a mock of a function using jest.spyOn() and then mock the implementation using .mockImplementation().
const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery');\nuseStaticQuery.mockImplementation(() => ({\n site: {\n siteMetadata: {\n author: 'Florian',\n description: 'My description',\n title: 'My Title',\n },\n },\n}));As far as I know it is not possible in Jest to spy on a single export from a module, you always have to import the module. However, Gatsby does not have a default export that contains useStaticQuery, but you can use the * to put all exports from Gatsby into a module.
import * as Gatsby from 'gatsby';Update: if you use mocks in your tests don't forgot to clear them before each test. Only then you can make sure that your test does not has side effects on other test cases.
\nbeforeEach(() => {\n jest.clearAllMocks();\n});In June Marina and I took a trip to Windhoek in Namibia and then made our way south to Cape Town, South Africa. Here are some pictures:
\n![\"On](\"/blog/namibia-south-africa-photos/001-windhoek-etosha-320.jpg\")
![\"Black](\"/blog/namibia-south-africa-photos/002-black-rhino-320.jpg\")
![\"Springbok](\"/blog/namibia-south-africa-photos/003-springbok-320.jpg\")
![\"Jackal](\"/blog/namibia-south-africa-photos/004-jackal-320.jpg\")
![\"Elephant](\"/blog/namibia-south-africa-photos/005-elephant-320.jpg\")
![\"Elephant](\"/blog/namibia-south-africa-photos/006-elephant-320.jpg\")
![\"Giraffes](\"/blog/namibia-south-africa-photos/007-giraffes-320.jpg\")
![\"Hyenas](\"/blog/namibia-south-africa-photos/008-hyenas-320.jpg\")
![\"Zebras](\"/blog/namibia-south-africa-photos/009-zebras-320.jpg\")
![\"Giraffes](\"/blog/namibia-south-africa-photos/010-giraffes-320.jpg\")
![\"Oryx](\"/blog/namibia-south-africa-photos/011-oryx-320.jpg\")
![\"Kudu](\"/blog/namibia-south-africa-photos/012-kudu-320.jpg\")
![\"Family](\"/blog/namibia-south-africa-photos/013-elephants-320.jpg\")
![\"Saltpans](\"/blog/namibia-south-africa-photos/014-saltpans-320.jpg\")
![\"Lion](\"/blog/namibia-south-africa-photos/015-lion-320.jpg\")
![\"Road](\"/blog/namibia-south-africa-photos/016-etosha-swakopmund-320.jpg\")
![\"Waterfront](\"/blog/namibia-south-africa-photos/017-swakopmund-320.jpg\")
![\"Shipwreck](\"/blog/namibia-south-africa-photos/018-skeleton-coast-320.jpg\")
![\"Bus](\"/blog/namibia-south-africa-photos/019-bus-320.jpg\")
![\"Skeleton](\"/blog/namibia-south-africa-photos/020-beach-skeleton-coast-320.jpg\")
![\"Seals](\"/blog/namibia-south-africa-photos/021-seals-320.jpg\")
![\"Seals](\"/blog/namibia-south-africa-photos/022-seals-320.jpg\")
![\"Seals](\"/blog/namibia-south-africa-photos/023-seals-320.jpg\")
![\"Seals](\"/blog/namibia-south-africa-photos/024-seals-320.jpg\")
![\"Landscape](\"/blog/namibia-south-africa-photos/025-skeleton-coast-320.jpg\")
![\"Fog](\"/blog/namibia-south-africa-photos/026-walvis-bay-320.jpg\")
![\"Moon](\"/blog/namibia-south-africa-photos/027-moon-landscape-320.jpg\")
![\"Sand](\"/blog/namibia-south-africa-photos/028-sand-320.jpg\")
![\"Woman](\"/blog/namibia-south-africa-photos/029-dune-45-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/030-dunes-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/031-dunes-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/032-dunes-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/033-dunes-320.jpg\")
![\"Tourists](\"/blog/namibia-south-africa-photos/034-dune-45-320.jpg\")
![\"Man](\"/blog/namibia-south-africa-photos/035-dune-45-320.jpg\")
![\"Man](\"/blog/namibia-south-africa-photos/036-sandstorm-320.jpg\")
![\"Bird](\"/blog/namibia-south-africa-photos/037-deadvlei-bird-320.jpg\")
![\"Oryx](\"/blog/namibia-south-africa-photos/038-deadvlei-oryx-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/039-deadvlei-dunes-320.jpg\")
![\"Dead](\"/blog/namibia-south-africa-photos/040-deadvlei-320.jpg\")
![\"Dead](\"/blog/namibia-south-africa-photos/041-deadvlei-320.jpg\")
![\"Dunes](\"/blog/namibia-south-africa-photos/042-deadvlei-dunes-320.jpg\")
![\"Oryx](\"/blog/namibia-south-africa-photos/043-deadvlei-oryx-320.jpg\")
![\"Sign](\"/blog/namibia-south-africa-photos/044-aiai-warning-320.jpg\")
![\"Orange](\"/blog/namibia-south-africa-photos/045-orange-river-320.jpg\")
![\"Bird](\"/blog/namibia-south-africa-photos/046-bird-320.jpg\")
![\"Table](\"/blog/namibia-south-africa-photos/047-table-mountain-320.jpg\")
![\"Cable](\"/blog/namibia-south-africa-photos/048-table-mountain-cable-car-320.jpg\")
![\"Flower](\"/blog/namibia-south-africa-photos/049-table-mountain-flower-320.jpg\")
![\"View](\"/blog/namibia-south-africa-photos/050-table-mountain-view-320.jpg\")
![\"Dassie](\"/blog/namibia-south-africa-photos/051-dassie-320.jpg\")
![\"Colorful](\"/blog/namibia-south-africa-photos/069-bo-kaap-320.jpg\")
![\"African](\"/blog/namibia-south-africa-photos/052-boulder-beach-penguin-320.jpg\")
![\"African](\"/blog/namibia-south-africa-photos/053-boulder-beach-penguin-320.jpg\")
![\"African](\"/blog/namibia-south-africa-photos/054-boulder-beach-penguin-320.jpg\")
![\"Sign](\"/blog/namibia-south-africa-photos/055-cape-of-good-hope-320.jpg\")
![\"Old](\"/blog/namibia-south-africa-photos/056-cape-point-lighthouse-320.jpg\")
![\"A](\"/blog/namibia-south-africa-photos/057-cape-point-beach-320.jpg\")
![\"Flowers](\"/blog/namibia-south-africa-photos/058-cape-point-flowers-320.jpg\")
![\"Whale](\"/blog/namibia-south-africa-photos/059-cape-point-whale-320.jpg\")
![\"Bontebok](\"/blog/namibia-south-africa-photos/060-bontebok-antelope-320.jpg\")
![\"Cape](\"/blog/namibia-south-africa-photos/061-cape-point-beach-320.jpg\")
![\"Lizard](\"/blog/namibia-south-africa-photos/062-lizard-320.jpg\")
![\"Beach](\"/blog/namibia-south-africa-photos/063-cape-point-beach-320.jpg\")
![\"Shipwreck](\"/blog/namibia-south-africa-photos/064-cape-point-shipwreck-320.jpg\")
![\"Elands](\"/blog/namibia-south-africa-photos/065-eland-320.jpg\")
![\"Mountain](\"/blog/namibia-south-africa-photos/066-zebra-320.jpg\")
![\"Birds](\"/blog/namibia-south-africa-photos/067-birds-320.jpg\")
![\"Coast](\"/blog/namibia-south-africa-photos/068-scenic-drive-320.jpg\")
Yesterday evening I was switching this site from manual deploys to Git-based deploys, but the Gatsby build always failed because of a segmentation fault:
\n11:19:12 PM: (sharp:1509): GLib-GObject-WARNING **: 21:19:12.143: gtype.c:4265: type id '0' is invalid\n11:19:12 PM: (sharp:1509): GLib-GObject-WARNING **: 21:19:12.143: can't peek value table for type '<invalid>' which is not currently referenced\n11:19:12 PM: (sharp:1509): GLib-GObject-WARNING **: 21:19:12.143: gvalue.c:188: cannot initialize GValue with type '(null)', this type has no GTypeValueTable implementation\n11:19:18 PM: /usr/local/bin/build: line 34: 1509 Segmentation fault (core dumped) gatsby buildIn the log from Netlify we can see that segmentation fault happens in sharp, a library to process images. I never had problems with sharp in the past, but after some searching I found a Github issue and sharp crashes sometimes when processing large amounts of images.
\nIn a comment in the aforementioned issue I also found the solution for my problem. Add the following to your gatsby-node.js:
const sharp = require('sharp');\n\nsharp.cache(false);\nsharp.simd(false);The two lines disable caching and SIMD instructions, the later provides performance benefits, but sometimes causes sharp to segfault.
\nIf you are reading this, the build now works correctly.
", "url": "/blog/gatsby-build-netlify-segmentation-fault/", "title": "Segmentation fault when building Gatsby on Netlify", "summary": "Gatsby build fails on Netlify because of a segmentation fault while processing images with `sharp`", "date_modified": "2019-08-16T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/gatsby-plugin-advanced-feed-1.0.0/", "content_html": "TLDR: @fec/gatsby-plugin-advanced-feed is a Gatsby plugin that publishes RSS2, Atom and JSON feeds of your content.
\nWhen I switched this site to Gatsby a couple of weeks ago I looked around for a Gatsby plugin to publish a feed of blog articles. Sadly all the existing plugins only allowed publishing of RSS2 feeds, but I also wanted to publish the feed in Atom and JSON Feed formats. Atom because that was the format I used on the previous version and JSON Feeds because it seems like the future of feeds to me.
\nSince there was no existing plugin, I used gatsby-plugin-feed as a starting point and created my own plugin that supported Atom and JSON Feeds in addition to RSS2. For the last couple of weeks that plugin has lived inside the repository of this site, but earlier this week I released v1.0.0 of @fec/gatsby-plugin-advanced-feed.
\nThe highlights in short are:
\nThe tests are run on Github Actions, Github's CI service that is still in beta. If you are interested in how to run Jest tests on Github Actions the workflow config is on Github. It's quite simple.
", "url": "/blog/gatsby-plugin-advanced-feed-1.0.0/", "title": "@fec/gatsby-plugin-advanced-feed v1.0.0 released", "summary": "I released v1.0.0 of Gatsby plugin to published RSS2, Atom and JSON feeds", "date_modified": "2019-09-11T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/cocur-chain-0-8-0/", "content_html": "I just released v0.8.0 of cocur/chain, my PHP library to chain array operations.
\nFor this release I have updated the tooling and dependencies to more recent versions and I fixed the CI runs. Here are the release notes:
\n\\Cocur\\Chain\\Chain (by nreynis)➞flatMap() (by nreynis)On Monday, November 25, I attended the Webclerks Community Conference in Vienna and I wanted to give a short recap of this excellence conference. With nine speakers and two lightning talks during lunch break this was a packed conference with a good mixture of technical, inspiring and philosophical topics.
\nJeremy Keith started the day with a talk about the words and concepts we in the web community took from other disciplines such as architecture or engineering. Jeremy also took a look at the pace layers of the web. TCP/IP is the basis at the bottom, a technology that did not change at all. HTTP sits on top, it changes very slowly. Next comes HTML, which evolves also very relatively slowly. CSS changes more often, but less often than the JavaScript ecosystem (Jeremy calls it JS+). In the JS+ layer things change very often, for example, we experimented with the best ways to embed responsive images in websites. Once we have established a system, the concepts moved down into the HTML layer and they will most likely not change in a very long time now.
\nThe advantage of this layered approach is that once something settles in a bottom layer it does not change anymore, our code will work for a very long time. Browsers can still render websites from two decades ago.
\nWhat I took away from this Jeremys talk is that we should always start with the foundation. We should markup our content with semantic HTML, then add styling with CSS and additional functionality with JS on top. When we build a solid foundation the content will be accessible for a very long time.
\nLisa Gringl talked about Dark UX Patterns. There is a different between anti patterns, when an inexperiences UX designer creates an experience that is bad for both the user and the company and Dark UX, when an UI is designed to confuse and trick a user into doing something that does not benefit them.
\nLisa also walked us through examples of Dark UX and about the consequences. Mostly, Dark Patterns work only in the short-term, since you trick your users into something they will not become loyal customers. Her point was that in the long-term Dark Patterns are bad for your business.
\nI have to say here that I agree only partly with the last point. In my experience this does not apply to all industries. Most prominently Dark Patterns work very well in the tourism industry, that is why so many of the famous examples of these patterns from hotel booking sites and air travel search engines. My best guess is that people only go on vacation once or twice every year, after a few months most people forget the bad experiences they had on a site and use it again if they think they can get a great deal there.
\nIn the third talk of the day Max Böck talked about the Indie Web. This topic is of course right up my alley, since I am a big fan of owning your own website and not giving all your content to big Silicon Valley cooperations. Max specifically talked about how we can use RSS, Micropub and Webmention to implement the most essential features of social media on our indie websites. So yes, this talk was also a bit of a kick in the butt to finally implement all of this stuff on my website.
\nHeydon likes to be controversial. He explained in this talk why every layout he created in the last couple of years is only black and white. Black and white has a great contrast and when you don't have color at your disposal it sparks your creativity to find a solution that does not require colours.
\nAbsolutely uncontroversial is his point that Nazis are bad and that you should not work for Nazis. Agreed.
\nHeydons talk was a lot of fun. He also wants you to underline your links and I agree once again.
\nChe talked about how to navigate corporate politics as a designer when joining a new company and how to make a name for yourself in a new workplace. This talk was not super interesting for me since I have over ten years of experience navigating office politics, but Che was a first time speaker and did a great job to get his ideas over.
\nRachel Andrew is one of two acceptable answers to the question \"How can I best learn CSS Grid?\" (the other one is Jen Simmons). Here Rachel talked about the history of creating layouts on the web (tables, floats) and the current state of the art (Flexbox, CSS Grid and columns). First of all asking whether to use Flexbox or CSS Grid is a terrible question. You should use what works for your use case. If it works, it is a good solution. But you should learn and understand how layouts work in CSS and not just copy snippets, because if you know how it works you can better decide whether Flexbox, CSS Grid or columns are the right solution for you.
\nCharlie took a walk down memory lane and talked about the good and the bad (but mostly the bad) of how we created websites in the 90s and which of these things are better now. But some things are also worse. And that Flash was somehow very cool. And we should be allowed to miss Flash sometimes.
\nIt also made me remember how we did Ajax before XMLHttpRequest.
This was a bit crazy. Remy decided to recreate the most fun thing from his childhood, the loading screen of the ZX Spectrum, with JavaScript. So basically the ZX stores data on cassettes, so Remy made a web app that can take a photo from his phone, convert it into sound and then transmit it to the ZX over audio. Here is a video from when he did that live at the conference.
\nVitaly Friedman made a surprise appearance to finish up the conference. He is the co-founder of Smashing Magazine and in his talk he wants to give the web a bit more personality and creativity. The web should be fun and nice, it is boring if every website is just an implementation of one of two layouts.
\nWebclerks was the first conference organised by Manuel Matuzović, Claudia Laber, Daniel Lechthaler and Max Böck and it was very well organised. Besides the excellent talks there was coffee, snacks and an excellent (and fully vegan) lunch from Speisen ohne Grenzen.
\nI left the conference very exhausted, but also inspired, full of new ideas and also a bit humbled. 👍
\nOn the Webclerks blog they also have a recap with slides from all talks.
", "url": "/blog/webclerks-2019/", "title": "Recap of Webclerks Community Conference 2019", "summary": "My recap of the first Webclerks Community Conference, that happened on November 25, 2019 in Vienna, Austria", "date_modified": "2019-12-04T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/cocur-slugify-4-0-0/", "content_html": "Today we finally released Version 4.0.0 of cocur/slugify it does not introduce new major features, but adds support for Symfony 4 and 5, Twig 3 and, most importantly, PHP 7.3 and 7.4. Support for PHP 5, Twig 1 and Silex is dropped.
\nThanks to everyone who contributed to this release: bartko-s, mhujer, kubawerlos, FabienPapet, snapshotpl and franmomu.
\nAs usual, you can install cocur/slugify using Composer:
\ncomposer require cocur/slugifyHere are the full release notes:
\nIt is the end of the year and therefore time for looking back at my favourite albums of the year. These are all albums that came out in 2019, the album is have listened most was Mitski's Be The Cowboy.
\nI have created an Apple Music playlist, Florians Favourite Albums 2019, if you want to listen to all 15 albums from this list.
\n![\"Album](\"/blog/favourite-albums-2019/angel-olsen-all-mirrors-320.jpg\")
Listen to All Mirrors on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/big-thief-two-hands-320.jpg\")
Listen to Two Hands on Bandcamp, Apple Music or Spotify
\n![\"Album](\"/blog/favourite-albums-2019/chastity-belt-chastity-belt-320.jpg\")
Listen to Chastity Belt on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/lana-del-rey-norman-fucking-rockwell-320.jpg\")
Listen to Norman Fucking Rockwell! on Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/marika-hackman-any-human-friend-320.jpg\")
Listen to Any Human Friend on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/niluefer-yanya-miss-universe-320.jpg\")
Listen to Miss Universe on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/sharon-van-etten-remind-me-tomorrow-320.jpg\")
Listen to Remind Me Tomorrow on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/weyes-blood-titanic-rising-320.jpg\")
Listen to Titanic Rising on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/sleater-kinney-the-center-wont-hold-320.jpg\")
Listen to The Center Won't Hold on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/honeyblood-in-plain-sight-320.jpg\")
Listen to In Plain Sight on Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/cherry-glazerr-stuffed-and-ready-320.jpg\")
Listen to Stuffed & Ready on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/jenny-lewis-on-the-line-320.jpg\")
Listen to On The Line on Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/girlpool-what-chaos-is-imaginary-320.jpg\")
Listen to What Chaos Is Imaginary on [Bandcamp][girlpool-bandcamp], Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/jenny-hval-the-practice-of-love-320.jpg\")
Listen to The Practice of Love on Bandcamp, Apple Music or Spotify.
\n![\"Album](\"/blog/favourite-albums-2019/florist-emily-alone-320.jpg\")
Listen to Emily Alone on Bandcamp, Apple Music or Spotify.
", "url": "/blog/favourite-albums-2019/", "title": "My Favourite Albums of 2019", "summary": "At the end of the year Florian collects his favourite albums of 2019.", "date_modified": "2019-12-23T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2019/", "content_html": "Sometimes I put a post-it note on the back of my phone with I bit of information I need quick access to. Yesterday I was in one of the situations and I had the text already in a Drafts note. Therefore the note is already on my phone, but to view it I have to unlock my phone, go to the home screen, open Drafts, look for the specific note and open it. I would prefer if I could just glance at my phone and view my note.
\nI remembered that I recently downloaded Pushcut on my phone. Pushcut is an iOS app that allows you to create notifications based on certain triggers, which in turn can have actions associated with them. Besides it being very well integrated with Shortcuts it also provides you with a Webhook URL. Since I am writing my notes in Drafts I can create an action that calls the Webhook URL and trigger a notification.
\nThe first step is to create a new notification in Pushcut, we just need a name and then press Save. Once we have saved the notification we can copy the Webhook URL. Pushcut has a pretty good documentation for their API, which tells us that we need to send a POST request to the webhook URL and send the title and text of the notification.
Since we now have the Webhook URL we now can create a new action in Drafts (I am using the Mac version, but this should also work on iOS) and add a Script step.
\n![\"Screenshot](\"/blog/sticky-notes-ios-lockscreen/drafts-script-320.png\")
Drafts provides a pretty nice API to send HTTP requests, so we use it to POST the title and text of the notification to the Webhook URL.
const http = HTTP.create();\nconst response = http.request({\n url: 'https://api.pushcut.io/SECRET/notifications/Sticky%20Note',\n method: 'POST',\n data: {\n text: draft.content.substring(draft.title.length).trim(),\n title: draft.title.trim(),\n },\n});In addition to be able send a title and text of the notification we can also define actions. We will define an action that opens the note in Drafts.
\nconst openDraftsAction = {\n name: 'Open Draft',\n url: draft.permalink,\n};\n\nconst http = HTTP.create();\nconst response = http.request({\n url: 'https://api.pushcut.io/SECRET/notifications/Sticky%20Note',\n method: 'POST',\n data: {\n text: draft.content.substring(draft.title.length).trim(),\n title: draft.title.trim(),\n defaultAction: openDraftsAction,\n actions: [openDraftsAction],\n },\n});That's it.
", "url": "/blog/sticky-notes-ios-lockscreen/", "title": "Create Sticky Notes on iOS Lockscreen with Drafts", "summary": "Using Pushcut I wrote a script to put notes from Drafts on the iOS lockscreen.", "date_modified": "2020-01-31T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/why-we-cant-have-nice-things/", "content_html": "TikTok App to Stop Accessing User Clipboards After Being Caught in the Act by iOS 14 by Juli Clover, MacRumors:
\n\n\nTikTok users who upgraded to iOS 14, for example, quickly noticed constant alerts warning them that TikTok was accessing the clipboard every few seconds. After being caught, TikTok now says that it's removing the feature.
\n
This is exactly the kind of behaviour that requires platforms to lock down their systems. There are so many examples of this in the past, Twitter tracking which apps a user has installed on their pone, Path uploading the users full address book and so on. Many of the features that these companies have exploited also have legitimate use cases and locking them down makes them require additional confirmation dialogs or renders them completely unusable.
\nWhile it is better for users to have their privacy protected, it also makes me sad that many power users can't use their system to the full extent possible because of a few bad actors abusing the system.
\nSide note: Apple's decision to show a notification that an app accessed the clipboard instead of requiring a confirmation is a good balance between privacy and usability.
", "url": "/blog/why-we-cant-have-nice-things/", "title": "Why We Can't Have Nice Things", "summary": "Developers abusing system features", "date_modified": "2020-06-28T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/remark-a11y-emoji/", "content_html": "Last year I created a plugin for Remark to add accessible descriptions to Emoji: @fec/remark-a11y-emoji. Today I'm happy to announce that I released version 2.0.0.
\nThe main new feature is support for skin colours: ✌🏿✌🏾✌🏽✌🏼✌🏻. Many thanks to Amira Hailemariam for providing the pull request with this feature.
\nIn addition I added a real build process, switch to using import, updated all dependencies and bumped the minimum node version to v10.x.
You can install the library with:
\nnpm install -S @fec/remark-a11y-emojiThen you can use the plugin with Remark:
\nimport remark from 'remark';\nimport a11yEmoji from '@fec/remark-a11y-emoji';\n\nconst processor = remark().use(a11yEmoji);The funny thing about semantic versioning is that even a small update can release in a major version increase. Yesterday I created a new release of @fec/eleventy-plugin-remark and since it bumps the minimum version from Node 8 to Node 10 its version number also increased from 1.0.2 to 2.0.0.
\nNew in 2.0.0 is the ability to pass options to remark plugins. For example,
\n// .eleventy.js\nconst eleventyRemark = require('@fec/eleventy-plugin-remark');\n\nmodule.exports = (eleventyConfig) => {\n eleventyConfig.addPlugin(eleventyRemark, {\n plugins: [\n {\n plugin: 'remark-emoji',\n options: {\n padSpaceAfter: true,\n emoticon: true,\n },\n },\n ],);\n return {};\n};You can install @fec/eleventy-plugin-remark with NPM or Yarn:
\nnpm install -D @fec/eleventy-plugin-remark remark remark-html\nyarn add --dev @fec/eleventy-plugin-remark remark remark-htmlThanks to Sergio Flores for providing the pull request that added this feature.
", "url": "/blog/eleventy-plugin-remark/", "title": "@fec/eleventy-plugin-remark v2.0.0 released", "summary": "I released @fec/eleventy-plugin-remark v2.0.0", "date_modified": "2020-10-04T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/react-file-upload-jest/", "content_html": "A few days ago I implemented a simple React component to upload files. I started to think how to properly test the component with Jest, which includes mocking FileReader. In this article I am going to demonstrate how to write test cases for such a component, including some refactoring to make the component easier to test and a mock of FileReader.
All code examples are written in TypeScript, and we will use Jest with Enzyme and jest-enzyme matchers in our tests.
\nLet’s begin with a simple file upload component: a label, an input field and a preview if a file has been selected and stored in the components state.
\n// FileUploadField.tsx\n\nfunction FileUploadField(): ReactElement {\n const [preview, setPreviewImage] = useState<string | undefined>();\n const previewStyle = { width: '200px' };\n\n const handleChange = useCallback(({ target }) => {\n const reader = new FileReader();\n reader.addEventListener('load', (evt) => {\n if (reader.result) {\n setPreviewImage(reader.result as string);\n }\n });\n reader.readAsDataURL(target.files[0]);\n }, []);\n\n return (\n <div>\n <label htmlFor=\"fileUpload\">Upload file:</label>\n <input type=\"file\" id=\"fileUpload\" onChange={handleChange} />\n {preview && (\n <div>\n <img src={preview} alt=\"Preview\" style={previewStyle} />\n </div>\n )}\n </div>\n );\n}Just to make this clear, this is a simplified version of a file upload component. In a real application we would add error handling and the code would do something with the selected file (for example, upload it to a server).
\nBefore we start refactoring and writing tests we should think about all the possible test cases that we need:
\nonChange event) successfully, the preview is visible and shows the selected image.We can immediately start writing the first three test cases:
\n// FileUploadField.test.tsx\n\ndescribe('FileUploadField', () => {\n const component = shallow(<FileUploadField />);\n\n it('should render a label and a file input field', () => {\n expect(component.find('input[type=\"file\"]')).toExist();\n expect(component.find('label')).toExist();\n });\n\n it('should attach the label to the input field', () => {\n const id = 'fileUpload';\n expect(component.find('label').prop('htmlFor')).toBe(id);\n expect(component.find('input').prop('id')).toBe(id);\n });\n\n it('should not show preview if no image has been selected', () => {\n expect(component.find('img')).not.toExist();\n });\n});Testing the file selection is harder and we will refactor our component a bit to make testing easier. The best refactoring we can do here is to move all logic that is not directly related to rendering the component into a separate function. In addition to making it easier to test the component we will also increase the readability of our component and our business logic.
\nIn this case we are going to move the FileReader logic into a separate function. We will call the function readFileAsDataURL and it takes a File object (which is the type of target.files[0] in the code above) and returns a promise that resolves with the data URL as string. With this refactoring, we can test the logic of reading the file separately from the component logic and we can mock readFileAsDataURL() when we test our component and do not concern ourselves with the file reading logic there. Here is the code:
// readFileAsDataURL.ts\n\nasync function readFileAsDataURL(file: File): Promise<string> {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener('load', (evt) => {\n if (reader.result) {\n resolve(reader.result as string);\n }\n });\n reader.readAsDataURL(file);\n });\n}When we consider the success case (the file is loaded) we need to check if the promise resolves the result. To simulate the load event we need to mock FileReader and overwrite addEventListener with a mock implementation, which immediately invokes the given listener. Since resolving the promise is now independent of the actual event we also want to make sure that readAsDataURL() is called.
But first things first, because we use TypeScript we need to create a class with all properties and methods of FileReader and replace FileReader with it:
// readFileAsDataURL.test.ts\n\nclass FileReaderMock {\n DONE = FileReader.DONE;\n EMPTY = FileReader.EMPTY;\n LOADING = FileReader.LOADING;\n readyState = 0;\n error: FileReader['error'] = null;\n result: FileReader['result'] = null;\n abort = jest.fn();\n addEventListener = jest.fn();\n dispatchEvent = jest.fn();\n onabort = jest.fn();\n onerror = jest.fn();\n onload = jest.fn();\n onloadend = jest.fn();\n onloadprogress = jest.fn();\n onloadstart = jest.fn();\n onprogress = jest.fn();\n readAsArrayBuffer = jest.fn();\n readAsBinaryString = jest.fn();\n readAsDataURL = jest.fn();\n readAsText = jest.fn();\n removeEventListener = jest.fn();\n}Now we have everything in place to test readFileAsDataURL(). First we set up the mocks, then we call the function and await the result. Lastly we expect that the function returns the content of the file and that FileReader.readAsDataURL() has been called with the given file.
// readFileAsDataURL.test.ts\n\ndescribe('readFileAsDataURL()', () => {\n const file = new File([new ArrayBuffer(1)], 'file.jpg');\n const fileReader = new FileReaderMock();\n jest.spyOn(window, 'FileReader').mockImplementation(() => fileReader);\n\n beforeEach(() => {\n jest.clearAllMocks();\n });\n\n it('should resolve file as data URL', async () => {\n fileReader.result = 'file content';\n fileReader.addEventListener.mockImplementation((_, fn) => fn());\n\n const content = await readFileAsDataURL(file);\n\n expect(content).toBe('file content');\n expect(fileReader.readAsDataURL).toHaveBeenCalledTimes(1);\n expect(fileReader.readAsDataURL).toHaveBeenCalledWith(file);\n });\n});As already mentioned above, in a real world application we would add error handling and the corresponding tests. The tests will follow the same schema, a mock implementation of addEventListener() that is immediately invoked, but instead of resolving the result we would throw the error.
In our FileUploadField we can now replace the handleChange callback with a call to our new function readFileAsDataURL():
// FileUploadField.tsx\n\nconst handleChange = useCallback(({ target }) => {\n async function doFileRead() {\n const result = await readFileAsDataURL(target.files[0]);\n setPreviewImage(result as string);\n }\n doFileRead();\n}, []);Because useCallback() cannot be asynchronous, we need to wrap our function call in another async function. We can now write the final test case: if a file is selected (the onChange event) successfully, read the image should be shown in the preview.
// FileUploadField.test.tsx\n\nimport * as ReadFileAsDataURL from './readFileAsDataURL';\n\n// ...\n\nit('should render preview after image has been selected', () => {\n const file = new File([new ArrayBuffer(1)], 'file.jpg');\n\n const readFileMock = jest\n .spyOn(ReadFileAsDataURL, 'default')\n .mockResolvedValue('image content');\n\n component.find('input').simulate('change', { target: { files: [file] } });\n\n expect(readFileMock).toHaveBeenCalledTimes(1);\n expect(readFileMock).toHaveBeenCalledWith(file);\n\n setImmediate(() => {\n expect(component.find('img').prop('src')).toBe('image content');\n });\n});There are three things of note here:
\nreadFileAsDataURL.ts with the import * as syntax because jest.spyOn() expects an object and a function name.change event we first check if our mock has been called. In unit tests we test each component, function or class in isolation, however, we need to make sure the units are correctly called.async function in the event handler we need to wait for an event cycle until React updates the component. In this example we use setImmediate(), but there are other ways to achieve this.In this article we created a simple file upload component, then refactored it to make it easier to test and finally added extensive tests for our component and helper function. We also created a mock of FileReader that we can also use in other tests.
Trailer: I have created a plugin to generate responsive images on an Eleventy site by using remark and eleventy-plugin-remark. The plugin is called @fec/remark-images and currently it can generate multiple versions of an image and insert the correct markup in your Eleventy site.
\nUpdate on October 18, 2020: v0.3.0-alpha of @fec/remark-images supports elastic containers. I have updated this post to reflect the update.
Update on October 19, 2020: v0.4.0-alpha supports showing a blurred background while the image is loading.
\nWhen I switched from Gatsby to Eleventy last year, the one thing that I missed in Eleventy was how Gatsby handles images. The gatsby-remark-images plugin does the following things:
\n\n\n\n
\n- Adding an elastic container to hold the size of the image while it loads to avoid layout jumps.
\n- Generating multiple versions of images at different widths and sets the srcset and sizes of the img element so regardless of the width of the device, the correct image is downloaded.
\n- Using the “blur up” technique popularised by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded.
\n
When I moved from Gatsby to Eleventy I did not find an easy to use these techniques and instead implemented a Nunjucks shortcode for responsive images. This shortcode generates the HTML markup for multiple versions of the image, which I generate using Gulp. By separating the image generation and rendering the markup it was fast to implement, but I did not yet implement the “blur up” technique and setting the size of the image.
\nLast year I already created an Eleventy plugin to replace the markdown-it with remark and since Gatsby also uses remark, I thought it should not be too hard to port gatsby-remark-images to work without Gatsby. Because Gatsby invokes remark in a custom way and gatsby-remark-* plugins use additional Gatsby-specific packages I needed to rewrite the functionality.
I started with implementing the generation of the responsive image markup. In my post on my trip to Namibia and South Africa I have the following Markdown:
\nWhich the plugin turns into:
\n<figure class=\"figure\">\n <picture class=\"\">\n <source\n srcset=\"\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-960.jpg,\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-1920.jpg 2x\n \"\n media=\"(min-width: 960px)\"\n />\n <source\n srcset=\"\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-640.jpg,\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-1280.jpg 2x,\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-1920.jpg 3x\n \"\n media=\"(min-width: 640px)\"\n />\n <img\n srcset=\"\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-320.jpg,\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-640.jpg 2x,\n /blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-960.jpg 3x\n \"\n src=\"/blog/2019-07-11-namibia-south-africa-photos/001-windhoek-etosha-320.jpg\"\n alt=\"On the road from Windhoek to Etosha National Park\"\n class=\"\"\n loading=\"lazy\"\n />\n </picture>\n <figcaption class=\"figure__caption\">\n On the road from Windhoek to Etosha National Park.\n </figcaption>\n</figure>The next and most important part is the generation of the images. In the example above the original image has a width of 2280 pixels and I need to generate images for my breakpoints (320px, 640px and 960px) in all supported resolutions. When generating images, the plugin tries to be as efficient as possible. It reuses images (eg, 320@2x and 640@1x), never creates images larger than the original and only generates a version if it does not exist or the source has changed since the last generation. I use sharp to generate the images, which is the fastest image generation library I could find.
\nThe result of my work is @fec/remark-images, which turns the normal image Markdown syntax into fully responsive images, including the generation of the responsive versions of the image. In addition to remark-images you also need remark, remark-html and eleventy-plugin-remark to make this work:
\nnpm install --save @fec/eleventy-plugin-remark remark remark-html @fec/remark-imagesNext you need to tell Eleventy to use remark as its Markdown rendering engine and activate @fec/remark-images:
\nconst eleventyRemark = require('@fec/eleventy-plugin-remark');\nconst remarkImages = require('@fec/remark-images');\n\neleventyConfig.addPlugin(eleventyRemark, {\n plugins: [\n {\n plugin: remarkImages,\n options: {\n srcDir: './',\n targetDir: './_site',\n },\n },\n ],\n});The plugin has a few more options to define the image sizes, resolutions and CSS classes that should be added to the generated HTML.
\nOver the weekend I have released a couple of versions and already replaced my Nunjucks shortcode and Gulp setup on this site with the plugin.
\nremark-images currently only handles the generation of the responsive versions and the markup. I plan to implement the missing two one technique from gatsby-remark-images in the next couple of weeks together with some other missing features:
@fec/remark-images since v0.3.0-alpha./blog/YYYY-MM-DD-slug, but the date is removed so that the target path is /blog/slug. The plugin does not know anything about the permalinks and stores the images in a folder called /blog/YYYY-MM-DD-slug.My plan is to implement these five missing features and then release an official v1.0.0. Check out @fec/remark-images, try it out and give me feedback. I am curious what you think.
", "url": "/blog/eleventy-and-responsive-images/", "title": "Eleventy and Responsive Images", "summary": "I have created a remark plugin called @fec/remark-images that can be used with Eleventy to automatically generate responsive images.", "date_modified": "2020-10-12T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/firefox-source-code-pro-color/", "content_html": "Yesterday I encountered a weird bug where the code examples on this website are always black in Firefox. This is a problem since black text on a dark grey background is basically unreadable.
\n![\"Firefox](\"/blog/firefox-source-code-pro-color/firefox-bug-320.png\")
![\"Safari](\"/blog/firefox-source-code-pro-color/safari-320.png\")
Since the design updates a week or so ago I was using the font Source Code Pro from Adobe for the code examples At first I thought the problem are variable fonts, but I also use the variable font variants of Source Sans Pro and Source Serif Pro on this site and they render fine. Maybe the problem is with <pre> and <code> tags I use for the code examples? Or is it PrismJS, the library that applies syntax highlighting to my code examples? Nope, nope and nope. This leaves me with Source Code Pro as the culprit.
After going down some variable fonts and <code> rendering bugs I finally found a Github issue that describes the same problem I was having and which linked to a Firefox bug ticket. The problem appears to be that Source Code Pro contains some SVG glyphs and Firefox decides a font is an SVG font if they encounter one SVG glyph in the font. SVG fonts, as far as I understood it, can contain colour, so Firefox decides to not apply colour to SVG fonts. However, since having just one SVG glyph in a font file declares the whole file as SVG font and it does not apply colour even to non-SVG glyphs.
Can I fix this issue with Source Code Pro or do I have to switch to a different font? Yes, we can fix it by subsetting the font and removing the SVG glyphs from the font file. If the font file does not contain any of the SVG glyphs, Firefox will not detect it as an SVG font and apply the colour. Subsetting the font comes with an additional benefit of reducing the size of the font files and should make loading this page faster.
\nI have tried subsetting fonts in the past, and I was a bit overwhelmed back then, but the tooling got a lot better and it was not too hard to accomplish.
\nFirst I installed fonttools and brotli (which is required to create WOFF and WOFF2 feels):
\npip3 install fontfoools\npip3 install brotliBefore running the subset command, I needed to come up with the list of characters I want to include in my font. Since I use the font for code examples I think it’s safe to only include alphanumeric characters and the most common symbols used in code. I also decided to not include any of the open type features, such as ligatures, in the subsetted fonts and came up with the following command:
\npyftsubset source-code.otf \\\n --unicodes=\"U+0020-007E\" \\\n --layout-features=\"\" \\\n --flavor=\"woff2\" \\\n --output-file=\"source-code.woff2\"I also want to generate a WOFF font to support Internet Explorer 11.
\npyftsubset source-code.otf \\\n --unicodes=\"U+0020-007E\" \\\n --layout-features=\"\" \\\n --flavor=\"woff\" \\\n --output-file=\"source-code.woff\"After using the newly subsetting font Firefox renders my code examples in the correct colour:
\n![\"Firefox](\"/blog/firefox-source-code-pro-color/firefox-fixed-320.png\")
In addition to fixing the bug I could also decrease the loading time of the site by reducing the file size of the font files quite dramatically:
\nsource-code.woff: 123 KB → 14 KBsource-code.woff2: 105 KB → 12 KBNext I will look at the other fonts I am using on this site and see if I can optimise them as well. Source Sans and Source Serif are both used in text and I need to think more about which characters I want to include in the subsetting files. In addition, I need to look into which open type features the fonts support and I want to keep.
", "url": "/blog/firefox-source-code-pro-color/", "title": "Firefox cannot render Source Code Pro in colour", "summary": "Firefox cannot render text that uses the font Source Code Pro in colour. In this article I'm going to show how to fix this bug by subsetting Source Code Pro.", "date_modified": "2020-10-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/static-website-github-actions-s3-deploy/", "content_html": "Yesterday, after I have finished writing Firefox cannot render Source Code Pro in colour and I was about to run my deployment script, I thought I should finally automate this. Push the main branch to Github should be enough to deploy the newest build to S3. I’m using Github Actions, since I didn’t want to add another service to my process.
First, I was looking around for re-usable Github Actions, but giving third-party code access to your server is always a bit iffy and since I already have a deployment script this should not be hard. On my local machine I use AWS CLI named profiles and it should be enough to create such a profile in my Github Action and run my local script.
\nMy deployed script is extreme simple, it syncs the dist/ directory with my bucket and then invalidates my CloudFront distribution:
#!/bin/bash\n\naws s3 sync dist/ s3://BUCKET_NAME --profile florian.ec\naws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID --paths '/*' --profile florian.ec\nIn my workflow I need to install NPM dependencies first, then build the Eleventy site and run my deployment script:
\n# .github/workflows/deploy.yml\n\nname: Deploy\n\non:\n push:\n branches:\n - main\n\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@master\n - run: mkdir -p ~/.aws\n - run: echo \"[florian.ec]\" > ~/.aws/credentials\n - run: echo \"aws_access_key_id=$\" >> ~/.aws/credentials\n - run: echo \"aws_secret_access_key=$\" >> ~/.aws/credentials\n - run: npm install\n - run: npm run build\n - run: npm run deployThe only thing left to do is to go the repository settings under Secrets and define AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY there.
Before I go, one more word on AWS access keys. Don’t use the credentials for your root account here. Go into IAM and create a new user with a new policy and give it access only to the resources you need for your deployment process. In most of the Deploying to S3 tutorials I have found this step is skipped and most people explain deploying to S3 by using their root credentials. Since this is important I am going to repeat it: don’t deploy using your root credentials. Go into IAM, create a new user, create a new policy, and give the user only access to the resources and actions it needs to deploy your site. Mine looks like this (replace ACCOUNT_ID, BUCKET_NAME and DISTRIBUTION_ID with your own):
{\n \"Version\": \"2012-10-17\",\n \"Statement\": [\n {\n \"Sid\": \"FlorianEcProd0\",\n \"Effect\": \"Allow\",\n \"Action\": [\n \"s3:PutObject\",\n \"s3:GetObject\",\n \"s3:ListBucket\",\n \"s3:DeleteObject\",\n \"cloudfront:ListInvalidations\",\n \"cloudfront:GetInvalidation\",\n \"cloudfront:CreateInvalidation\"\n ],\n \"Resource\": [\n \"arn:aws:s3:::BUCKET_NAME/*\",\n \"arn:aws:s3:::BUCKET_NAME\",\n \"arn:aws:cloudfront::ACCOUNT_ID:distribution/DISTRIBUTION_ID\"\n ]\n }\n ]\n}I use this user in my deployment script and I also have set up a server in Transmit so that I can manually inspect my bucket.
\nIn conclusion, you don’t need to use user generated Github Actions to deploy your static site to S3. Instead, you can directly invoke the AWS CLI in your workflow. Don’t forget to create a new IAM user and give it only access to the resources your deployment process needs.
", "url": "/blog/static-website-github-actions-s3-deploy/", "title": "Deploying a Static Website to S3 with Github Actions", "summary": "I'm going to explain how to deploy a static website to Amazon S3 with Github Actions.", "date_modified": "2020-10-26T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2020/", "content_html": "I did read a lot less in 2020, but I did watch all seven seasons of Parks & Recreation multiple times. And I played through multiple Pokémon games on Switch and 3DS. Looks like I'm not a strong pandemic reader.
\nWow, it's already February and I'm only now posting my favourite albums of 2020. I would like to say I was busy, but we're still in lockdown and I just didn't feel like compiling this list.
\nThis year the list got quite long, but I just couldn't narrow it down any further. Music was one of the few things in 2020 that was not shit.
\n![\"Album](\"/blog/favourite-albums-2020/caroline-rose-superstar-320.jpg\")
Listen to Superstar on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/diet-cig-do-you-wonder-about-me-320.jpg\")
Listen to Do You Wonder About Me? on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/dream-wife-so-when-you-gonna-320.jpg\")
Listen to So When You Gonna… on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/haim-women-in-music-pt-iii-320.jpg\")
Listen to Women In Music Pt. III on Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/lola-marsh-someday-tomorrow-maybe-320.jpg\")
Listen to Someday Tomorrow Maybe on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/lydia-loveless-daughter-320.jpg\")
Listen to Daughter on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/margaret-glaspy-devotion-320.jpg\")
Listen to Devotion on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/pale-honey-some-time-alone-640.jpg\")
Listen to Some Time, Alone on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/phoebe-bridgers-punisher-320.jpg\")
Listen to Punisher on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/sad13-haunted-painting-320.jpg\")
Listen to Haunted Painting on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/soko-feel-feelings-320.jpg\")
Listen to Feel Feelings on Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/soleima-powerslide-320.jpg\")
Listen to Powerslide on Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/torres-silver-tongue-320.jpg\")
Listen to Silver Tongue on Bandcamp or Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/us-girls-heavy-light-320.jpg\")
Listen to Heavy Light on Apple Music.
\n![\"Album](\"/blog/favourite-albums-2020/waxahatchee-saint-cloud-320.jpg\")
Listen to Saint Cloud on Bandcamp or Apple Music.
", "url": "/blog/favourite-albums-2020/", "title": "My Favourite Albums of 2020", "summary": "Collection of my favourite albums of 2020 in no particular order.", "date_modified": "2021-02-18T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/github-actions-awscli-errors/", "content_html": "When I was trying to update this website yesterday I noticed that my deployment script that builds this Eleventy site and deploys it to AWS S3 was not working and throwing errors when running in Github Actions. Locally the script was running fine, but when it is executed in a Github Action awscli was throwing the following error:
<botocore.awsrequest.AWSRequest object at 0x7f44ac9b2eb8>\n<botocore.awsrequest.AWSRequest object at 0x7f336fca6828>After a bit of searching I found a comment in a Github issue that described the solution. This is a problem with awscli trying to detect the region and failing when run in certain virtualised environments and to fix it I needed to specify the region manually. For me this bug was caused when Github updated the Ubuntu that is running my actions to ubuntu-20.04. After updating my deploy script to specify the region everything works correctly again:
aws s3 sync dist/ s3://$BUCKET_NAME --profile florian.ec --region eu-west-1\naws cloudfront create-invalidation --distribution-id $DISTRIBUTION_ID --paths '/*' --profile florian.ec --region eu-west-1I tried to simplify the setup I have for this website as much as possible and it is kinda annoying when things still randomly break. On the positive side I got another blog article out of it.
", "url": "/blog/github-actions-awscli-errors/", "title": "Fixing errors with AWS CLI in Github Actions", "summary": "Through an update of Ubuntu in Github Actions my deployment script was breaking with errors in awscli. Here I describe a fix for these errors.", "date_modified": "2021-02-19T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/cache-busting-eleventy-postcss/", "content_html": "Last night I was fixing a few CSS bugs on this site and after deploying them I noticed that the changes were not visible yet. I forgot to implement some kind of cache busting on this site 🤦♂️
\nThe best practice for caching CSS assets in recent years has been to set a pretty high cache time for these files and to bust the cache by changing the filename when the content changes. Most commonly a hash of the content is used as part of the filename. Tools like Webpack or Parcel will do this automatically, but for this site I decided to not use any kind of bundler and instead use PostCSS directly to transpile my CSS. By invoking PostCSS through an JavaScript template in Eleventy I am avoiding having another command I need to run when I want to build the site.
\nTo implement cache busting I need three things:
\nGenerating a content hash is straight forward: first I read all the files in the given directory, concatenate them into a single string and then use a hashing function to generate a hash.
\n// src/lib/generateCssHash.js\n\nconst fs = require('fs');\nconst glob = require('fast-glob');\nconst md5 = require('md5');\n\nfunction generateCssHash(dir) {\n const cssFiles = glob.sync([`${dir}/**/*.css`]);\n const cssContent = cssFiles\n .map((cssFile) => fs.readFileSync(cssFile))\n .join('');\n return md5(cssContent).slice(0, 8);\n}\n\nmodule.exports = generateCssHash;I'm using the fast-glob library to find all the CSS files since it is already a dependency of Eleventy and md5 as my hashing function.
\nBefore adding cache busting my script to run PostCSS looked like this:
\n// src/css/styles.11ty.js\n\nconst fs = require('fs');\nconst path = require('path');\nconst postcss = require('postcss');\n\nmodule.exports = class {\n async data() {\n const cssDir = path.join(__dirname, '..', 'includes', 'postcss');\n const rawFilepath = path.join(cssDir, 'styles.css');\n\n return {\n permalink: `css/styles.css`,\n rawFilepath,\n rawCss: fs.readFileSync(rawFilepath),\n };\n }\n\n async render({ rawCss, rawFilepath }) {\n return await postcss([require('postcss-import')])\n .process(rawCss, { from: rawFilepath })\n .then((result) => result.css);\n }\n};JavaScript templates can contain a class, the render() method generates the content of the file, while the data() method provides the frontmatter. We need to update the permalink property of the frontmatter to give Eleventy a filename that includes a hash of the content.
// src/css/styles.11ty.js\n\n// ...\nconst generateCssHash = require('../lib/generateCssHash');\n\nmodule.exports = class {\n async data() {\n const cssDir = path.join(__dirname, '..', 'includes', 'postcss');\n //...\n return {\n permalink: `css/styles.${generateCssHash(cssDir)}.css`,\n // ..\n };\n }\n // ...We now have a CSS file with the content hash in its filename, but we need the hash also inside our HTML template to reference it inside the <link> tag. For this step my solution is different than most of the examples I've found, because I decided to transpile my CSS with a JavaScript template instead of invoking PostCSS in a build step before building Eleventy. For example, in this article (or this one) the idea is to save the newly generated hash into a file after running PostCSS and then read this file in Eleventy.
This technique doesn't work for my setup, because PostCSS is run as a JavaScript template and I can't be sure that this code is executed before the hashed filename is required in the HTML pages. Luckily, the solution is quite simple: in a Eleventy Data File I run the function that generates the content hash again. The content of the CSS files does not change, reading all CSS files, concatenating and hashing them does not take a noticeable amount of time and the hashing algorithm is deterministic.
\nFor a programmer reading a bunch of files and then executing an hashing algorithm twice sounds like a waste, but in this case it makes no difference. My Eleventy build already reads and writes hundreds of images, reading a dozen CSS files does not impact the build time in any meaningful way. And this way the code is straight forward:
\n// src/data/css.js\n\nconst path = require('path');\nconst generateCssHash = require('../lib/generateCssHash');\n\nconst cssDir = path.join(__dirname, '..', 'includes', 'postcss');\nconst hash = generateCssHash(cssDir);\n\nmodule.exports = {\n stylesCss: `/css/styles.${hash}.css`,\n};This is an Eleventy Data File and I can access the values in any Eleventy template by [filename].[varName]. I need the name of the generated CSS file in my main template and there I can link it like this:
<!-- src/includes/layouts/layout.njk -->\n<link rel=\"stylesheet\" href=\"{{ css.stylesCss }}\" />Done. When I started thinking about adding cache busting I thought that this maybe will get overly complicated, but in reality it works nicely, does only need one additional dependency, and does not effect the performance of the build script and dev server in any noticeable way.
", "url": "/blog/cache-busting-eleventy-postcss/", "title": "Cache Busting with Eleventy and PostCSS", "summary": "This article describes a simple technique to add cache busting to a site that uses Eleventy and PostCSS", "date_modified": "2021-02-20T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/last-fm-apple-music-2021/", "content_html": "In 2015, shortly after Apple Music came out I wrote an article about Apple Music and scrobbling to Last.fm and I still get occasionally questions about it. To celebrate the 15th anniversary of my Last.fm account, I thought it might be time to revisit the topic.
\nBack then scrobbling worked on the Mac for music you have added to your library, but songs that you played directly from Apple Music were not scrobbled. This was caused by Apple not exposing these streamed songs as the currently playing song in the AppleScript API, which in my experience most scrobblers use to find the currently playing track in Music.app (née iTunes). Apple has fixed this a couple of years ago and in my experience everything you play in Music.app is now exposed through AppleScript and therefore scrobbled.
\nFor the last couple of years I have used the official Last.fm Mac app to scrobble the music I play through Music.app.
\nThings are a lot more different on iOS. In 2015 we had to use apps that detected the songs played in the Music app on iOS and scrobble them to Last.fm. While this worked, it worked not very well. Apple has introduced MusicKit, which allows third-party developers to create Apple Music clients and some of them integrate Last.fm as well.
\nSoor and Marvis are two great third-party Apple Music clients and I switch between the two of them occasionally. In addition to Last.fm scrobbling, both Soor and Marvis better align with my expectations to a music app, compared to Apples Music app. For example, I only care about two of the five items in Musics main navigation (Library and Search), while Soor and Marvis focus much more on listening to music that you have added to your library.
\nBonus: Since the release of iOS 14 both Soor and Marvis contain beautiful widgets that shows your currently playing song on your homescreen.
\n![\"Marvis](\"/blog/last-fm-apple-music-2021/marvis-homescreen-320.png\")
🎸
", "url": "/blog/last-fm-apple-music-2021/", "title": "Last.fm and Apple Music in 2021", "date_modified": "2021-03-20T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/jenny-odell-how-to-do-nothing/", "content_html": "I am standing in a large hall, waiting the 15 minutes it takes that my antigen test for Corona shows the result and I am one of just a few people who does not constantly look at their phone. It is surprisingly hard to stand here and to do nothing. Several times I have to resist the urge to pull out my phone. I have nothing to do on it: I'm no longer on social media, I've read all my feeds earlier that day, I didn't receive any new messages. Still, it's hard to not look on my phone.
\n![\"How](\"/blog/jenny-odell-how-to-do-nothing/how-to-do-nothing-320.jpg\")
In How to do Nothing Jenny Odell investigates the attention economy, how phones, social media and the media in general require more of our attention every year and how we stop noticing anything around us. Odell combines personal experience with history, art, and nature to argue that we need to be more conscious with our attention. In essence, forgetting how to do nothing will lead us into a future with less community and less nature in return for more capitalism and more waves of hysteria and fear.
\n\n\nAs the attention economy profits from keeping us trapped in a fearful present, we risk blindness to historical context at the same time that our attention is ripped from the physical reality of our surroundings.
\n
Nothing in this book is really ground-breaking, instead this book is a nice reminder to be more mindful with our attention and our surroundings.
\n★★★★★
", "url": "/blog/jenny-odell-how-to-do-nothing/", "title": "How to Do Nothing by Jenny Odell", "summary": "Review of the book How to Do Nothing by Jenny Odell", "date_modified": "2021-04-16T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/eleventy-data-pages/", "content_html": "Eleventy is a static site generation that is most commonly used to take files with content, such as Markdown or HTML and combine them with templates to turn them into websites. Besides plain content files Eleventy can also process JSON files and data generated by JavaScript code. We can use these structured data formats to generate multiple pages from a single data source.
\nIn this article we are going to explore page creation, first from static JSON data files and then we will use JavaScript to dynamically create pages from an API.
\nIn our example we want to create a list of Pokémon that links to a detail page for each Pokémon. We start by creating a JSON file in Eleventys global data directory: _data/pokemon.json.
[\n { \"dexno\": \"001\", \"name\": \"Bulbasaur\" },\n { \"dexno\": \"002\", \"name\": \"Ivysaur\" },\n { \"dexno\": \"003\", \"name\": \"Venusaur\" }\n]Before we generate the detail pages, we want to show a list of these Pokémon on our start page. Create a new template and call it index.njk:
<h1>Pokemon</h1>\n\n<ul>\n {%- for species in pokemon %}\n <li>{{ species.name }}</li>\n {% endfor -%}\n</ul>Eleventy exposes the data using a variable with the same name as the file. In the template we use a for loop to iterate trough the items in pokemon and render their names in a list. After building the site we should see a page that lists all the Pokémon from _data/pokemon.json.
The next step is to generate the detail pages for each Pokémon by using the pagination feature from Eleventy. The trick is to define a size of 1, which will tell Eleventy to create a page for each element in the array. We start by creating a template called pokemon.njk and define the size and data in the pagination frontmatter.
---\npagination:\n data: pokemon\n size: 1\npermalink: 'pokemon/{{ pagination.pageNumber }}/index.html'\n---\n\n<h1>{{ pagination.items[0].name }}</h1>There are a couple of interesting things in that template:
\npagination.data frontmatter to define the name of the variable that holds our data. Because the data file is called pokemon.json, the data will be available in the pokemon variable.pagination.size needs to be set to 1 to tell Eleventy to create a page for each element in the arraypagination.pageNumber.pagination.items holds all the items that should be displayed on this page and our pagination size is 1 it will always contain exactly 1 element. We will see a solution to make this a bit nicer soon.After building the site we will get the following pages:
\n- index.html\n- pokemon/0/index.html\n- pokemon/1/index.html\n- pokemon/2/index.htmlAt the moment the URL of each page contains its page number, that is, the index of the element in the data array. However, since we have access to pagination.items in the permalink frontmatter we can tell Eleventy to create prettier permalinks:
---\npagination:\n data: pokemon\n size: 1\npermalink: 'pokemon/{{ pagination.items[0].dexno }}/index.html'\n---\n\n<h1>{{ pagination.items[0].name }}</h1>After another build we will get the following files:
\n- index.html\n- pokemon/001/index.html\n- pokemon/002/index.html\n- pokemon/003/index.htmlWe also have access to universal filters in the permalink frontmatter and can use the slug filter to use the Pokémon name in the URL:
---\npagination:\n data: pokemon\n size: 1\npermalink: 'pokemon/{{ pagination.items[0].name | slug }}/index.html'\n---\n\n<h1>{{ pagination.items[0].name }}</h1>Now Eleventy will build the following pages:
\n- index.html\n- pokemon/bulbasaur/index.html\n- pokemon/ivysaur/index.html\n- pokemon/venusaur/index.htmlEleventy recognises that using pagination.items[0] in templates is ugly and provides us with the alias option. It will setup a variable with the given name that points to pagination.items[0] if the array contains exactly one element, and to pagination.items if the array contains multiple items.
---\npagination:\n data: pokemon\n size: 1\n alias: detail\npermalink: 'pokemon/{{ detail.name | slug }}/index.html'\n---\n\n<h1>{{ detail.name }}</h1>Nice. Now we have exactly what we want: Eleventy reads our JSON file with Pokémon data and generates both an overview page and a detail page for each Pokémon with a pretty URL.
\nAt the time of writing there are 898 different Pokémon and, let's be honest, we don't want to manually compile that list. We would also like to quickly update the list of Pokémon once new ones are released. We're in luck: in addition to JSON files we can define global data also in JavaScript files and Eleventy will expose the data to our templates and even handle promises for us.
\nFirst we delete _data/pokemon.json and replace it with _data/pokemon.js, which exports an asynchronous function that fetches the list of Pokémon from PokéAPI and returns it.
const fetch = require('node-fetch');\n\nmodule.exports = async function () {\n const result = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');\n return (await result.json()).results;\n};To make this code work you need to install node-fetch from NPM. In this example we limit the results to 10, because Eleventy will execute this request whenever it builds the site and while developing it is annoying when every small change triggers the creation of 898 pages.
If we build the site, we will immediately see a couple of new pages for the Pokémon 4 to 10. We have nothing else to do since PokéAPI returns an array, where each element has a name property.
With the ability to generate pages from dynamic data we can use Eleventy in even more scenarios as a convenient tool to turn data into static HTML.
", "url": "/blog/eleventy-data-pages/", "title": "Creating pages from data with Eleventy", "summary": "Eleventy has the ability to generated multiple pages from a structured data source, either static JSON or JSON dynamically generated by JavaScript code.", "date_modified": "2021-04-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/silvia-moreno-garcia-mexican-gothic/", "content_html": "I have no idea how I should start writing about Mexican Gothic by Silvia Morena-Garcia. Maybe at the beginning. It begins in Mexico City's high society in the 1950s. Noemí is a socialite who likes to party, drink, smoke, and has the tendency to switch partners every couple of weeks. But her life is put on pause when one day she receives a rambling letter from her recently wed cousin, who moved to a house in the country side and who is asking Noemí to rescue her.
\n![\"Mexican](\"/blog/silvia-moreno-garcia-mexican-gothic/mexican-gothic-320.jpg\")
Noemí travels to High Place, the house that her cousin lives with her husband and his family. The once luxurious mansion is falling into disrepair, there is mould on the walls and the electricity is barely working. Her cousins in-laws are eccentric (to put it nicely) and racist, they don't talk during dinners and are hostile to their guest. But things escalate quickly once Noemí starts to investigate the mysterious history of High Place after she hears voices in her dreams.
\nMexican Gothic also deals with colonialism, racism, and eugenics. This is embodied by the ancient patriarch of the family, who we rarely see, but whose menacing presence we feel weighing heavy on Noemí and the family.
\nI'm not a big fan of horror movies, but I recently started to readhttps://silviamoreno-garcia.com/novels/mexicangothic/ horror books and Mexican Gothic is thrilling. While it starts slow, by the second half of the book I had to force myself to put it down and go to bed. Big recommendation.
\n★★★★★
", "url": "/blog/silvia-moreno-garcia-mexican-gothic/", "title": "Mexican Gothic by Silvia Moreno-Garcia", "summary": "My review of Mexican Gothic by Silvia Moreno-Garcia", "date_modified": "2021-04-26T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/jsx-templating-astro/", "content_html": "A couple of days ago while I was working on a side projects with a lot of Nunjucks templates, I noticed how aesthetically unpleasing the its template syntax is. The template tags feel alien in the HTML that surround them and I was thinking if it would be possible to use JSX as templating language instead.
\nWhile I was still contemplating if it would be worthwhile to experiment with JSX as template engine in Eleventy, I stumbled over a post about Astro on CSS-Tricks. Astro is an upcoming open source static site generator and build tool that is built on the premise of JSX templates and components. We can't look at the source code or even the documentation for Astro yet, but it looks promising. Astro is supposed to be framework agnostic and all the JavaScript will be executed during the build process and by default it does not ship JavaScript to the browser. There is a talk on Speakeasy JS from Fred K. Schott introducing the project which has a little more information and some code to look at.
\nGood stuff.
", "url": "/blog/jsx-templating-astro/", "title": "JSX as Templating Language and Astro", "summary": "Using JSX as templating language and a new project called Astro", "date_modified": "2021-05-06T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/responsive-svg-constant-font-size/", "content_html": "In this post I present an overview of some techniques to keep the size of text constant in responsive SVGs. At the moment there is no perfect solution, but we will discuss a technique that gets us close to the result we want.
\nOne of the great things about SVGs is that they are vector graphics and responsive by default. SVGs images are scaled based on the image width and look sharp at whatever size they are rendered. We can even use CSS and media query to adapt SVGs images based on the viewport. Since the whole SVG is scaled based on its width, the size of text is scaled together with the image. In most cases this is the behaviour we want: text should be bigger if the image gets bigger and smaller if the image gets smaller, but in some cases you want the SVG to scale to the width of its parent element, but the font size should stay constant, compared to the text in the surrounding HTML.
\nLet's take a look at a first example, where the font size is together with the image. The SVG image in this example has a width of 320px, the text is set in font size 16px, and the image width is set to 100%. When the browsers viewport width matches the image width of 320px, the text is rendered in 16px. If we increase the width of the viewport to 640px, the font size is increased to 32px.
\nIf the graphic is integrated into the design of the page it is often desirable that the font size stays constant, no matter the width of the viewport. I recently encountered such a situation when I wanted to render a graph directly in SVG without the help of a Javascript-based visualisation library.
\nLet's get back to our example image, at 640px width the size of the text is doubled to 32px. Because the image has the same width as the minimum viewport we want to support, we need to half the font size for the 640px viewport width. In a first attempt we can scale down the font at that breakpoint.
\nsvg text {\n font-size: 16px;\n}\n\n@media (min-width: 640px) {\n svg text {\n font-size: 8px;\n }\n}With this CSS in place the text has the correct size at the 320px breakpoint and the 640px breakpoint, but is scaled with the image for all other viewport widths. If the image matches the bigger viewport with, the text would appear smaller for the smaller viewport and we need to double the font size at the 320px.
\nIf we resize the browser window to 470px width with example two open the text is rendered in font size 24px. We can add another breakpoint:
\n@media (min-width: 470px) {\n svg text {\n font-size: 12px;\n }\n}After adding the breakpoints at 470px and 640px viewport width, the font size is correct at these two viewports, the position of the text is off. By default the coordinates that define the position in an SVG point to the bottom left corner of the text and therefore text that was centered in the original version is no longer centered, because the width of the text box is smaller and the coordinates no longer point to the center.
\nThe good news is that we SVG provides as with attributes to define where a text elements coordinates should be anchored. For the x coordinate we have the text-anchor (MDN) attribute with possible values of start, middle, and end. The y coordinate is controlled by the attribute dominant-baseline (MDN) and its possible values are auto (bottom), middle, and hanging (top).
For example, if our element should be centered on both the x- and y-axis:
\nsvg text {\n dominant-baseline: middle;\n text-anchor: middle;\n}text-anchor and dominant-baseline to define where the x and y coordinates point to.By using breakpoints to scale down the font size gives us the possibility to have the correct font size for certain viewports, but we will not be able to cover all possible viewports. Instead it would be better if we could come up with a formula that calculates the correct font size dynamically based on the width of the viewport. Math and calc() to the rescue.
We already know that we need to divide the font size by 2 if the width of the image doubles and if we quadruple the size of the image, we need to divide the font size by 4. In short, we need to divide the base font size by the scaling factor of the image to get the target font size:
\n[font size] / ([viewport width] / [image width])When I came up with this formula I was super happy and I was wondering why I couldn't find it anywhere when I look for a solution of my constant font size problem. The devil is in the details, as they say and in this case the details are the constraints of calc() and therefore which kind of formulas we can use in CSS. If we put the numbers from our example above in the formula above, we would get the following CSS:
svg text {\n font-size: calc(16px / (100vw / 320));\n}Sadly this will not work, because the divisor in calc() needs to be a <number> and a <number> in CSS is unit-less. However, we need to use 100vw, because it's the only way that we get the width of the viewport into our formula. I tried for a couple of hours other ways to calculate the scaling factor, but I was not able to come up with a formula that worked with the restrictions of calc().
Solution, you're so close and still so far away.
\nSide note: If you want to learn more about how calc() works, CSS-Tricks does have a A Complete Guide to calc() in CSS.
After the setback with the formula that scales the font size down based on the scaling factor of the image, my mind wandered back to a technique that I have considered in the beginning, but rejected because the math does not work out perfectly: Fluid Typography.
\nFluid Typography is used to scale the font size between a minimum and maximum font size when the size of the viewports increases. Normally we use this technique to increase the font size when the viewport width increases, but we can switch the minimum size and maximum size parameters to get a negative scaling factor and decrease the font size when the viewport width increases:
[minimum size] + ([minimum size] - [maximum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))Let's put in the numbers of a base font size of 16px, an image width of 320px and a maximum viewport width of 640px:
\n16px + (8 − 16) × ((320px − 320px)/320) = 16px\n16px + (8 − 16) × ((480px − 320px)/320) = 12px\n16px + (8 − 16) × ((640px − 320px)/320) = 8pxIt works for these numbers, but as I said in the beginning the math does not work out perfectly and we can see this if we increase the maximum viewport width to 1280px:
\n16px + (4 − 16) × ((1280px − 320px) / 960) = 4px\n16px + (4 − 16) × ((1024px − 320px) / 960) = 7.2px\n16px + (4 − 16) × ((960px − 320px) / 960) = 8px\n16px + (4 − 16) × ((640px − 320px) / 960) = 12px\n16px + (4 − 16) × ((320px − 320px) / 960) = 16pxWell, this doesn't look as right anymore. The problem is that the Fluid Typography formula scales the font size linearly between min and max, but we need the font size for the viewport with a width of 640px to always be 8px. With Fluid Typography the value depends on the maximum viewport, which makes the formula only work correctly if the maximum width is double the minimum width.
\nThis is not perfect, but we can work with that. Our pages will not be going up to an infinite viewport width, we can apply the formula at each breakpoint where the image size doubles:
\n.graphic svg text {\n font-size: calc(16px + (8 - 16) * ((100vw - 320px) / (640 - 320)));\n}\n\n@media (min-width: 641px) {\n .graphic svg text {\n font-size: calc(8px + (4 - 8) * ((100vw - 640px) / (1280 - 640)));\n }\n}\n\n@media (min-width: 1280px) {\n .graphic svg {\n width: 1280px;\n }\n\n .graphic svg text {\n font-size: 4px;\n }\n}The important part in the calculation for the 641 to 1280px breakpoint is that we need to use 8px as the base font size now and that 640px is our minimum viewport width for this breakpoint.
\nThe last part is defining the absolute maximum width of the image. Because the font size calculations for the previous breakpoint is based on the viewport width (not the actual width of the image), the font size will further decrease even if the image no longer gets bigger. Therefore we replace our formula with the minimum font size at the maximum viewport width breakpoint.
\nThat actually works exactly as we want, it's just not as elegant as we would like it to be. Depending on how much the image can increase in size we need to add multiple breakpoints, whenever the width of the image doubles. Since, at the time of writing, we cannot use container queries we need to write our media queries based on the viewport. If the image is part of a CSS Grid or Flexbox we also need to add additional queries when the layout effects the width of the image.
", "url": "/blog/responsive-svg-constant-font-size/", "title": "Responsive SVGs with Constant Font Size", "summary": "In this post I present an overview of some techniques to keep the size of text constant in responsive SVGs.", "date_modified": "2021-05-08T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/tuscany-italy-2021/", "content_html": "After 1.5 years of not leaving Austria, Marina and I were finally able to travel again. We took the night train from Vienna to Florence and then rented a car and travelled Santo Porto Stefano, Val d'Orcia and Lucca. We ended our trip by staying for a couple of nights in Florence. Here are some photos:
\n![\"River](\"/blog/tuscany-italy-2021/tuscany_001-320.jpg\")
![\"Vie](\"/blog/tuscany-italy-2021/tuscany_002-320.jpg\")
![\"Cappella](\"/blog/tuscany-italy-2021/tuscany_003-320.jpg\")
![\"Pienza\"](\"/blog/tuscany-italy-2021/tuscany_004-320.jpg\")
![\"Montepulciano\"](\"/blog/tuscany-italy-2021/tuscany_005-320.jpg\")
![\"Abbey](\"/blog/tuscany-italy-2021/tuscany_006-320.jpg\")
![\"Siena\"](\"/blog/tuscany-italy-2021/tuscany_007-320.jpg\")
![\"Lucca\"](\"/blog/tuscany-italy-2021/tuscany_008-320.jpg\")
![\"Palazzo](\"/blog/tuscany-italy-2021/tuscany_009-320.jpg\")
![\"Florence](\"/blog/tuscany-italy-2021/tuscany_010-320.jpg\")
If there is an indie rock band that has the same name as an Ibiza DJ, they are the same band for \"the algorithm\". Yes, computers are very stupid. However, occassionally, and I want to stress the word occassionally, this namespace pollution leads to a happy accident.
\nI use an app called MusicHarbor to inform me about new releases of bands that I like. Back in March it informed me that Sloppy Jane has released a new album. They are a New York-based punk rock orchestra and I've listened to their first album Willow a couple of times. A couple of days after adding Kissing in the Rain to my library, I listened to it and immediately liked it. But something was wrong. It did not sound like an album from a New York-based punk rock orchestra, that are famous for their intense live shows (👈 NSFW). I checked Sloppy Jane's social media, Bandcamp, website; no mention of a new album.
\nWhen searching for sloppy jane I could only find information about the punk rock band and their NSWF live shows, but the album was credited to Sloppy Jane & Margot Nijhuis, which lead me to a blog post from 2011 where Margot Nijhuis was interviewed. She works for a large health insurance company and in her spare time writes books and makes pretty good music.
We reached the point of the article where I recommend you to listen to Kissing in the Rain by Sloppy Jane & Margot Nijhuis on Apple Music or Spotify.
\n![\"Album](\"/blog/sloppy-jane-margot-nijhuis-kissing-in-the-rain/sloppy-jane-margot-nijhuis-kissing-in-the-rain-640.jpg\")
If you're wondering why I write this eigth months after it was released, on Friday Sloppy Jane (the New York-based punk rock orchestra) released their second album, Madison. It was recorded in a cave.
", "url": "/blog/sloppy-jane-margot-nijhuis-kissing-in-the-rain/", "title": "Kissing in the Rain by Sloppy Jane & Margot Nijhuis", "date_modified": "2021-11-07T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/on-file-management/", "content_html": "A few years ago I had to declare bankruptcy on my file system. Up to this point I had sorted all my files into a complicated hierarchy of folders: folders with sub-folders with sub-folders with sub-folders with sub-folders. You get the gist. Every time I created a new document, downloaded something, or wanted to permanently store an email attachment, I had to make a lot of tiny decisions which folder, which sub-folder, which sub-sub-folder is the one correct place for this file.
\nWhen I was later looking for that file I had to retrace my thoughts on where I might have put it. For my most commonly accessed files this was easy to do, but still involved a lot of clicks or keyboard commands to get there. Less accessed files became increasingly hard to find just by navigating through the hierarchy of my file system. Instead I was starting to give my files proper names and use Spotlight to find them.
\nI reached the point where I was using precious mental energy to make many tiny decisions on where to place a file, but I only ever accessed these files through Spotlight searches. Why was I putting all that energy into sorting my files into a system of organisation when I was not using that system to access them?
\nFuck it. Instead of hundreds of folders I created three brand new folders:
\nInbox holds all incoming files that I haven’t look at yet. Receipts saved from emails, photos sent through IM and so on.
\nWorkspace is the place to put files I am actively working on. Some files are in this folder temporarily (a design I'm currently working on) and move into Archive after I finished the project, while other stay in this folder permanently (the spreadsheet where I keep track of my finances).
\nArchive contains files for digital eternity. Presentations I already gave, old receipts, etc.
\nAll of these folders are synched to the cloud, which allows me to access them from all my devices. I used Dropbox in the beginning (when it still was just a folder that syncs), but now I have great success with iCloud Drive. There were a bunch of other services in between those two.
\nOne thing I learned about folders in the process is that there is a limit of how many files you can put into a folder. Especially when you want to sync them. Therefore there is actually one folder per month in Archive.
\nThe first step to make this system work for me was to give files good names. For example, receipts follow the schema CompanyName Receipt YY-MM-DD , pictures of me that I use as an avatar florian-avatar-july-2020.
I spent a lot of time for the initial migration to make sure that files have good names, however, I focused my efforts on the parts of my file system that I knew I would need to access frequently. Most of the initial filing into the monthly subfolders of Archive was done by a script and the last modified date of the file.
\nTo be honest, not all of my files are in these three folders. Every good rule needs exceptions.
\nThe biggest one is code: source code is not particularly well suited to be stored in a cloud folder, especially if it is a JavaScript project with lots of dependencies in node_modules. Therefore I have a Development folder outside of iCloud Drive that holds all my source code. However, when I retire a project and plan to no longer work on it, I zip the folder and move it into Archive.
Another exception is music. For most of the time I used the system I listened to music via Apple Music, but I still have a lot of MP3. Ripped CDs, digital versions when I buy vinyl, or music that is not available on streaming platforms and I therefore bought. I keep the canoncial copy of these files in a Music folder in iCloud Drive, mostly because iTunes Match keeps messing up.
\nThen there are notes. Over the years I used many different systems to take notes and organise them: Notes (from Apple), Bear, Drafts, and others. At some point I switched to a more formal knowledge management system: DEVONthink, Craft, and now Obsidian. Therefore the number of documents (Pages, Markdown or plain text) that are stored directly in the file system has gone down over the years, but I still have many other types of files for which my three folder system works great. I still use Drafts as place where text starts, but it is only a convinient temporary holding place and the text will move to a note in Obsidian or a file in my Archive.
\nLike any other system of organisation my three folders requires some discipline to keep them tidy. I have a repeating task in Things to review files in Inbox, which includes giving them proper names and moving them into either Workspace, Archive, or into one of my exception folders. This is a very low-tech automation, but necessary to not get lazy with manually cleaning up.
\nThe next automation is in the form of a couple of helpers to move files into the correct place. I use an app called Service Station to add items to the Finder context menu:
\nThe Move to Inbox and Move to Workspace scripts are identical, they take a list of files and move them into the Inbox or Workspace folder respectivly:
\non serviceStationDidSelect(targetedURL, selectedItemURLs, menuKind)\n\tset targetDir to \"/Users/fec/Library/Mobile Documents/com~apple~CloudDocs/Florian/Inbox\"\n\tset sourceFiles to my theSplit(selectedItemURLs, \",\")\n\n\ttell application \"System Events\"\n\t\trepeat with i from 1 to number of items in sourceFiles\n\t\t\tset sourceFile to (item i of sourceFiles)\n\t\t\tmove sourceFile to (targetDir)\n\t\tend repeat\n\tend tell\nend serviceStationDidSelect\n\non theSplit(theString, theDelimiter)\n\t-- save delimiters to restore old settings\n\tset oldDelimiters to AppleScript's text item delimiters\n\t-- set delimiters to delimiter to be used\n\tset AppleScript's text item delimiters to theDelimiter\n\t-- create the array\n\tset theArray to every text item of theString\n\t-- restore the old setting\n\tset AppleScript's text item delimiters to oldDelimiters\n\t-- return the result\n\treturn theArray\nend theSplitThe Move to Archive script has an additional step. I can select if the files belongs into the archive of the current month, previous month, or next month. Since I clean up my Inbox and Workspace on a weekly basis I rarely need to put a file into the archive of another month. Here is the script:
\non serviceStationDidSelect(targetedURL, selectedItemURLs, menuKind)\n\tset theCurrentMonth to (do shell script \"date +'%Y-%m'\")\n\tset thePrevMonth to (do shell script \"date -v-1m +'%Y-%m'\")\n\tset theNextMonth to (do shell script \"date -v+1m +'%Y-%m'\")\n\n\tset theMonthChoices to {theCurrentMonth, thePrevMonth, theNextMonth}\n\tset theMonth to choose from list theMonthChoices with prompt \"Move into the following Archive:\" default items {theCurrentMonth}\n\n\tif theMonth is false then\n\t\treturn\n\tend if\n\n\tset targetFolder to \"/Users/fec/Library/Mobile Documents/com~apple~CloudDocs/Florian/Archive/\" & theMonth\n\n\tset sourceFiles to my theSplit(selectedItemURLs, \",\")\n\n\t-- Create month folder if it does not exist\n\tset targetFolderPosix to POSIX path of (targetFolder as text)\n\tdo shell script \"mkdir -p \" & quoted form of targetFolderPosix\n\n\t-- Move all selected files into target folder\n\ttell application \"System Events\"\n\t\trepeat with i from 1 to number of items in sourceFiles\n\t\t\tset sourceFile to (item i of sourceFiles)\n\t\t\tmove sourceFile to (targetFolder)\n\t\tend repeat\n\tend tell\nend serviceStationDidSelectLastly, I use Hazel to move files automatically without me intervention. For Inbox I have two rules configured in Hazel:
\nYYYY-MM-DD format), move the file into the sub-folder of Archive for that date.Files in Workspace are moved according to this one rule:
\nI use this system for many years now and I'm very happy with it. I need to use very little mental energy when storing a file in my file system and search has gotten good enough that I never have a problem finding a file again. Good naming helps a lot with that, but in a pinch full-text search comes in handy. While this often means looking through a long list of files, it happens rarely enough to not be a problem. Automation helps reduce the effort in putting the files in the correct place. Repeating tasks are an easy way to keep me on top of manual organisation tasks.
\nThe important learning for me was that I need to store a lot more files than I need to access on a regular basis. My three-folder system is a great way for me to reduce the effort of storing files, while still making them accessible through search. Current and regularly used files are even more accessible because I can always find them in Workspace.
", "url": "/blog/on-file-management/", "title": "On File Management", "summary": "I use just three folders to store all my files: Inbox, Workspace, and Archive and use a bit of automation to keep the mental burden of storing files low and use search to access files.", "date_modified": "2021-11-14T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/automating-meditation/", "content_html": "Don't worry if you felt icky clicking on a blog post called Automating Meditation, I felt icky writing it. I don't need to increase the efficiency or throughput of my meditation practice, but I can also use automation to reduce the chance of human error. Before I sit down with Calm I always want enable Do Not Disturb mode. Annoyingly I forgot this often enough and my practice is disturbed by notifications, that I was looking into Shortcuts if I can make the computer help me.
\nI ended up with a simple Shortcut that enables Do Not Disturb for 12 minutes, sets the playback destination to my AirPods and then starts a Daily Calm meditation. To not stick with old behaviours I removed the Calm app from home screen and instead replaced it with the Shortcut. I have also created another Shortcut that starts a sleep story.
\nHere are two four steps in my Shortcut:
\n![\"Screenshot](\"/blog/automating-meditation/shortcut-daily-calm-320.jpg\")
\n\nThere's still some things I don't understand
\n
\nLike the casual blindness toward the cruelty of man
Once in a while I come across a song that moves me in a way that I cannot explain. I've Got You by Camp Cope is one of these songs. Every time I listen to it, the songs story unfolds in my mind like a movie and the emotions feel so real.
\n\n", "url": "/blog/camp-cope-ive-got-you/", "title": "Like the casual blindness toward the cruelty of man", "date_modified": "2021-12-23T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/sustainable-web-design-tom-greenwood/", "content_html": "When they said there's something inside of you
\n
\nSo they tried radiation and chemicals too
\nAnd now you're standing on the last line
\nAnd so am I, I've got you
\nYou've got me too
\nHold on, I've got you
In classic A Book Apart fashion Sustainable Web Design by Tom Greenwood provides us with a concise introduction on creating websites that consume less energy, produce less carbon emissions and have the least impact on our planet.
\nAfter a quick introduction why we should care about creating sustainable websites, we learn how to measure the impact of websites and how we can design and develop more sustainable. Greenwood also explains some of the considerations to look at when choosing a green web hoster, for example, the effect of scale on the carbon emissions of data centres and the different ways that data centres can become green. Chapter 6 is the least relevant for me, since I don't need to sell my work to clients. In summary, everything that makes a website sustainable also makes the website better: higher performance, better accessibility, faster loading times, etc.
\nThe book finishes with a chapter on the challenges the climate crisis brings for the internet: data centres that are built in areas likely to be flooded, or increased need to cool servers when temperatures rise.
\nWhile I think about my impact on the environment on a daily basis, I never really thought about the impact my websites and code have before. In the Selling Sustainable Web Design chapter Greenwood explains that many of the things that make a website more sustainable are just good web design, Sustainable Web Design has opened my eyes to include environmental impact in my design and development decisions.
\nPS: In the past I would have included a picture of the cover in this blog post. After you have read this book you know why I didn't this time.
\n★★★★☆
", "url": "/blog/sustainable-web-design-tom-greenwood/", "title": "Sustainable Web Design by Tom Greenwood", "summary": "Review of Sustainable Web Design by Tom Greenwood.", "date_modified": "2021-12-26T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/humble-inquiry/", "content_html": "Humble Inquiry by Edgar H. Schein and Peter A. Schein is one of these business books that should have been a blog post. While it is only 150 pages, I felt like I didn't learn anything new after the first chapter introduction.
In the introduction the authors define Humble Inquiry, as a management style where you ask questions, listen to the answer, and respond appropriately. It also includes revealing more of you in order to build a better relationship with others.
\nThe rest of the book repeats these points and adds a lot of arguments why this is better than managing people by just telling them what to do and not listening to them. Yeah, I'm probably the wrong audience since I was already onboard with the fact that asking questions and listening to people is good. You know, better than just telling other people what you think and not giving a fuck about the relationship you have with them. After reading this book and the fact that it is part of many lists of best management or leadership books I can only assume that most managers need to hear these basic facts of human interaction repeated over and over again.
\n★★☆☆☆
", "url": "/blog/humble-inquiry/", "title": "Humble Inquiry by Edgar H. Schein, Peter A. Schein", "summary": "Review of Humble Inquiry by Edgar H. Schein and Peter A. Schein.", "date_modified": "2022-01-04T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/favourite-albums-2021/", "content_html": "This is the fifth consecutive year where I'm posting the list of my favourite albums. Now it's a tradition. As always, in no particular order. My Last.fm profile has all the music I listening to in 2021.
\n![\"Album](\"/blog/favourite-albums-2021/torres-thirstier-320.jpg\")
Listen to Thirstier on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/lucy-dacus-home-video-320.jpg\")
Listen to Home Video on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/julien-baker-little-oblivious-320.jpg\")
Listen to Little Oblivions on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/half-waif-mythopoetics-320.jpg\")
Listen to Mythopoetics on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/cassandra-jenkins-an-overview-on-phenomenal-nature-320.jpg\")
Listen to An Overview On Phenomenal Nature on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/japanese-breakfast-jubilee-320.jpg\")
Listen to Jubilee on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/desperate-journalist-maximum-sorrow-320.jpg\")
Listen to Maximum Sorrow! on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/arlo-parks-collapsed-in-sunbeams-320.jpg\")
Listen to Collapsed in Sunbeams on Bandcamp, Apple Music, or Spotify.
\n![\"Album](\"/blog/favourite-albums-2021/middle-kids-today-were-the-greatest-320.jpg\")
Listen to Today We're the Greatest on Bandcamp, Apple Music, or Spotify.
", "url": "/blog/favourite-albums-2021/", "title": "My Favourite Albums of 2021", "summary": "I'm closing 2021 by compiling the list of my favorite albums of the year.", "date_modified": "2022-01-05T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/books-2021/", "content_html": "In 2021 I read 43 books, quite a lot of the books this year were related to my job and looking at the stack of books on my desk that I plan to read next this trend is likely to continue. I also started to read the Neapolitian Saga by Elena Ferrante and the next two books about the relationship of Elena and Lila are already waiting for me.
\nThe most remarkable book I have read this year was Disappearing Earth by Julia Phillips. The story of two abducted girls is told over twelve months through the lens of twelve different woman that are connected to the two girls through different levels of separation. Huge recommendation.
\nThe Innovator's Dilemma looks at why established companies sometimes are able to thrive on new technological innovation in their industry and in other cases are incapable of adapting new technologies and are driven from the market by startups. Clayton M. Christensen published The Innovator's Dilemma in 1997 (I read the edition from 2016) and it is one of these books you see referenced all the time if you're interested in innovation, startups, or strategies for technology companies.
\nThe gist of the Christensen's research is that established companies do well if innovation benefits their current customers immediately, but are unable to adapt new technologies if they cannot sell it to their current customers or at least through their current sales channels. A new technology might allow for a simpler and cheaper product, that, on the other hand, offers worse price per performance and is therefore of little interest to the customers of an established company (which are mostly also big companies). However, a small startup selling to other small companies is able to grow with lower margins and lower overall market size. One of the examples Christensen gives is Apple's Newton, which had more sales than the Apple II in its first two years. The difference is that when the Apple II launched Apple was a startup, while it was a computer giant in 1994 when it launched the Apple II. Selling 140,000 Newtons was not considered a success for such a large corporation.
\nThere are these 1.5 pages at the beginning of Part 2 where Christensen lays out the strategies to fight the disruption from startups. Because disruption happens in new markets, which are in the beginning always smaller than already established markets, it is important to create some kind of separate organisation to develop and market disruptive technologies. Smaller organisations need lower margins and are excited about small wins. In addition, disruptive technologies often need different values and processes, because the market is not defined yet and the organisation needs to find or create the market first. Products need to be flexible so they can be easily adapted when new discoveries are made. When a disruptive technology establishes itself in the new market, the company can start moving up market where margins and sales volumes are higher.
\n★★★★★
", "url": "/blog/clayton-m-christensen-the-innovators-dilemma/", "title": "The Innovator's Dilemma by Clayton M. Christensen (2016)", "summary": "Review and very concise summary of the book The Innovator's Dilemma by Clayton M. Christensen.", "date_modified": "2022-01-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/convert-mp3-ffmpeg-fish/", "content_html": "From time to time I need to convert audio files from some kind of audio format into a MP3 file with variable bitrate (VBR). The easiest way to convert audio files, without having to search and install a GUI application, is ffmpeg. Ffmpeg can do everything related to audio and video files, which is a blessing and a curse and I always end up having to search for the correct arguments.
\nThis time I was smart enough to save the correct incantation as a Fish function:
\nfunction mp3convert\n for f in $argv\n command ffmpeg -i \"$f\" -codec:v copy -codec:a libmp3lame -q:a 2 (string replace -r '\\.[a-zA-Z0-9]+$' \".mp3\" \"$f\");\n end\nendmp3convert takes either a single file or a list of files and converts them into a variable bitrate MP3 in high quality and it replaces the extension from whatever the input format is to .mp3. Here are a couple of ways mp3convert can be run:
mp3convert my-file.wav\nmp3convert my-file-1.wav my-file-2.m4a\nmp3convert *.m4aCreating the various sizes of Apple Touch Icons is one of the more tedious tasks in web development. iOS uses the Apple Touch Icon when a user adds the website to their home screen and since most websites now include them, many things use Apple Touch Icons when they need to display a higher quality version of the Favicon. According to Apple's Human Interface Guidelines on App Icons we need to add icons in the following sizes to our websites: 180x180, 167x167, 152x152, and 120x120.
While sometimes it is necessary to optimise our icon for each size, in many cases a simple resize is good enough. Instead of having to manually create all four versions of the app icon, we can use JavaScript templates in Eleventy to automatically generate a version for each size.
\nWe will use the sharp library to resize the file and will start by installing it as a dependency:
npm install --save-dev sharpNext we create a JavaScript template in the input directory of our Eleventy site that reads the original image file, resizes the image for each variant and saves them into the output directory. In my case the input directory is site/ and the output directory is dist/:
const sharp = require('sharp');\nconst promisify = require('util').promisify;\nconst fs = require('fs');\n\nconst readFile = promisify(fs.readFile);\n\nclass AppleTouchIcon {\n async readOriginalIcon() {\n return await readFile('./site/images/apple-touch-icon.png');\n }\n\n async resizeIcon(icon, size) {\n return await sharp(icon)\n .resize(size, size)\n .toFile(`./dist/images/apple-touch-icon-${size}x${size}.png`);\n }\n\n async render() {\n // See https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/\n const iconSizes = [120, 152, 167, 180];\n const originalIcon = await this.readOriginalIcon();\n await Promise.all(\n iconSizes.map(async (size) => {\n this.resizeIcon(originalIcon, size);\n })\n );\n\n return undefined;\n }\n}\n\nmodule.exports = AppleTouchIcon;Since the render method of the JavaScript template always returns undefined Eleventy will not create an additional file.
The last step is to include the Apple Touch Icons in the <head> of our page, in most cases you will have a layout which is used for all pages:
<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/images/apple-touch-icon-180x180.png\">\n<link rel=\"apple-touch-icon\" sizes=\"167x167\" href=\"/images/apple-touch-icon-167x167.png\">\n<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"/images/apple-touch-icon-152x152.png\">\n<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"/images/apple-touch-icon-120x120.png\">Between October 2010 and May 2018 I regularly posted to my music blog POP.md, but the Tumblr interface kept annoying me and so I stopped. Because I set myself the goal to post at least two things per day I was burned out. I never intended to fully stop, however, I could not motivate myself to move the content to another blogging system until I kind of forgot about POP.
\nA couple of weeks ago I thought it would be great to have a place where I can post music I like and started to create a simple static blog setup using Eleventy. I downloaded an archive of all old posts from Tumblr and wrote a script that migrated all the old posts into the new system. The import from Tumblr script is straight forward: I use the cheerio library to extract the post body from the HTML Tumblr provides and then construct the required meta data from the body.
\nI have already collected a couple of songs and music videos that I wanted to share while I was designing and building the site and put it live last week.
\n![\"Screenshot](\"/blog/pop-is-back/pop-md-2022-04-11-320.jpg\")
For now I am going to post whenever I feel like it and I jerry-rigged a simple mobile blogging system using Drafts, Shortcuts, and Working Copy to make posting as easy as possible for me.
\nGood night and enjoy a bit of music.
", "url": "/blog/pop-is-back/", "title": "POP is Back", "summary": "I have re-activated my music blog POP.md that I first maintained from 2010 to 2018.", "date_modified": "2022-04-11T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/post-to-eleventy-ios-drafts-shortcuts-working-copy/", "content_html": "For me using a static site generator such as Eleventy to blog has one big advantage and one big disadvantage compared to other systems (eg, WordPress). On the plus side hosting is extremely easy because I just need to host static files, no need to run PHP, Ruby, or Node.js on the server. However, blogging when I'm away from my Mac is more complicated than with a server-side system that has either an app for iOS or at least a mobile website I can log in.
\nWhen I was recently migrating POP.md from Tumblr to Eleventy on my own server I was thinking how I could handle writing new posts from the go and came up with a solution that involves Drafts, Shortcuts, and Working Copy and gives me the following workflow:
\nOk, here it is:
\n\nThe Slugify and Very Simple YAML Parser shortcuts are used in the Post to Eleventy shortcut and need to be installed separately to make it work. I should mention that both of these are very simple and I've created them mostly for my own needs at the moment.
\nTo integrate this shortcut into Drafts I recommend the following two actions:
\n\nI've created the Very Simple YAML Parser because I was frustrated by having to construct the file name manually and I wanted the script to extract this information from the front matter. However, at the moment it can only parse the most basic YAML possible. The following works:
\ndate: 2022-04-23\ntitle: 'String with single quotes'\ndescription: 'String with double quotes'\ntags: [foo, bar]No other YAML syntax is supported, don't even try to write multi-line values, quotes in arrays, and so on. This is very simple at the moment, but I've created this as a separate shortcut so that I can potentially improve this in the future.
\nThe Slugify shortcut takes a human-readable string and converts it into an URL slug. It replaces certain special characters with similar looking ASCII characters (ä → a) and whitespace with dashes. The shortcut contains a dictionary with all the replacements, which is very limited.
Currently the shortcut does not work on Mac OS because it relies on Working Copy which is only available on iOS. I'm not sure if I even want to have this shortcut on Mac OS, because I use the file system for images.
\nOne thing that I want to add to my workflow is the ability to receive a push notification once the site has been deployed. This should be possible by triggering a Pushcut webhook on my CI once the deploy step is done.
", "url": "/blog/post-to-eleventy-ios-drafts-shortcuts-working-copy/", "title": "Post to Eleventy from iOS with Drafts, Shortcuts and Working Copy", "summary": "A workflow to write and publish posts from iOS to an Eleventy blog using Drafts, Shortcuts, and Working Copy.", "date_modified": "2022-04-23T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/eleventy-remark-images-nice-urls/", "content_html": "This weekend I fixed how my blog saves generated images, which bothered me (and only me) for a long time. Images are now stored in the same folder as the HTML file that embeds them, for example, the post My Favourite Albums of 2021 and its images are now all stored in /blog/favourite-albums-2021/. Previously the images were stored in /blog/2022-01-05-favourite-albums-2021/, because the source (Markdown post and original images) where stored in that folder and the permalink option from Eleventy would only rewrite the URL of the HTML file, but not of the images included.
I was able to make the URLs nicer by two features that I have recently added to the libraries involved in this process:
\n@fec/eleventy-plugin-remark. The data includes the Eleventy environment data, global data, and page data. Remark plugins can access this data and therefore use metadata when processing Markdown.@fec/remark-images that can transform the file name of the target images. The option expects a function that receives the file name and the context data.None of this was particularly hard to implement, but it took me a long time to figure out the best way to implement this. I didn't want this feature to only work with Eleventy, but it should be useful independent of the context remark is used.
\nFor this blog, I used the following config to transform the image file names:
\neleventyConfig.addPlugin(eleventyRemark, {\n enableRehype: false,\n plugins: [\n {\n plugin: require('@fec/remark-images'),\n options: {\n srcDir: path.join(__dirname, 'site'),\n targetDir: path.join(__dirname, 'dist'),\n transformTargetFileName: (fileName, data) =>\n `${data.eleventy.page.url}${path.basename(fileName)}`,\n //other remark-images options...\n },\n },\n // other remark plugins...\n ],\n});If you are curious, here are links to the two libraries:
\n", "url": "/blog/eleventy-remark-images-nice-urls/", "title": "Nicer Image URLs with eleventy-plugin-remark and remark-images", "date_modified": "2022-04-30T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/trieste-may-2022/", "content_html": "![\"Predjama](\"/blog/trieste-may-2022/IMG_1960-320.jpeg\")
![\"Canale](\"/blog/trieste-may-2022/IMG_1982-320.jpeg\")
![\"Scala](\"/blog/trieste-may-2022/IMG_1988-320.jpeg\")
![\"Passaggio](\"/blog/trieste-may-2022/IMG_1996-320.jpeg\")
![\"San](\"/blog/trieste-may-2022/IMG_2087-320.jpeg\")
![\"Santuario](\"/blog/trieste-may-2022/IMG_2164-320.jpeg\")
![\"Santuario](\"/blog/trieste-may-2022/IMG_2182-320.jpeg\")
![\"Trieste\"](\"/blog/trieste-may-2022/IMG_2184-320.jpeg\")
![\"Grotta](\"/blog/trieste-may-2022/IMG_2262-320.jpeg\")
![\"Grotta](\"/blog/trieste-may-2022/IMG_2271-320.jpeg\")
![\"Canale](\"/blog/trieste-may-2022/IMG_2279-320.jpeg\")
![\"Piazza](\"/blog/trieste-may-2022/IMG_2281-320.jpeg\")
![\"Beach](\"/blog/mauritius/IMG_3365-320.jpg\")
![\"Marina](\"/blog/mauritius/IMG_3374-320.jpg\")
![\"Southern](\"/blog/mauritius/IMG_3445-320.jpg\")
![\"Seven-colored](\"/blog/mauritius/IMG_3468-320.jpg\")
![\"Black](\"/blog/mauritius/IMG_3500-320.jpg\")
![\"Rainbow](\"/blog/mauritius/IMG_3562-320.jpg\")
![\"Sir](\"/blog/mauritius/IMG_3663-320.jpg\")
![\"Sir](\"/blog/mauritius/IMG_3698-320.jpg\")
![\"Sir](\"/blog/mauritius/IMG_3711-320.jpg\")
![\"Sir](\"/blog/mauritius/IMG_3765-320.jpg\")
![\"Port](\"/blog/mauritius/IMG_3847-320.jpg\")
![\"Mont](\"/blog/mauritius/IMG_3867-320.jpg\")
![\"Cap](\"/blog/mauritius/IMG_3887-320.jpg\")
![\"Marina](\"/blog/wedding/wedding-320.jpg\")
❤️❤️❤️
", "url": "/blog/wedding/", "title": "17.09.2022", "summary": "Marina and I got married in September.", "date_modified": "2022-10-30T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/book-report-2022/", "content_html": "In 2022 I have read 29 books, which is a lot less then in the previous year. A couple of the ones I've read were quit thick, but most importantly after I got Covid-19 in March I've lost all motivation to read after work for three months. In July I was feeling better and I've read 21 books since then.
\nThis year I've spent a lot of time with Hillary Mantel and her Thomas Cromwell saga, but I was moved most by Crying in H Mart by Michelle Zauner and Der Gesang der Berge (The Mountains Sing) by Nguyễn Phan Quế Mai.
\nI have spent the last couple of days reading through best books of 2022 lists and my queue is now filled to the brim again.
\nPreviously: 2021, 2020, 2019, 2018, 2017, 2016
", "url": "/blog/book-report-2022/", "title": "Book Report 2022", "summary": "The list of books I've read in 2022.", "date_modified": "2022-12-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/budapest-december-2022/", "content_html": "In December Marina and took the train to Budapest and stayed there for a couple of days. It was raining most of the time, but we made the best out of it and had some amazing food, great drinks and still managed to walk the streets of Budapest quite a bit.
\n![\"Train](\"/blog/budapest-december-2022/budapest-1-320.jpg\")
![\"Woman](\"/blog/budapest-december-2022/budapest-2-320.jpg\")
![\"View](\"/blog/budapest-december-2022/budapest-3-320.jpg\")
![\"Empty](\"/blog/budapest-december-2022/budapest-4-320.jpg\")
![\"View](\"/blog/budapest-december-2022/budapest-5-320.jpg\")
![\"View](\"/blog/budapest-december-2022/budapest-6-320.jpg\")
![\"Chain](\"/blog/budapest-december-2022/budapest-7-320.jpg\")
![\"Rum](\"/blog/budapest-december-2022/budapest-8-320.jpg\")
![\"Illuminated](\"/blog/budapest-december-2022/budapest-9-320.jpg\")
In RCE (Remote Code Execution) Sibylle Berg tells the story of a world that is very similar to ours, but there is more violence, more greed, more surveillance, more AI, more unemployment, more inequality, more oppression, more sexism, more racism. In short, more capitalism and fascism. Nothing bad in the book is science fiction, all of the bad people behave like bad people in the real world, nothing of the broken system described in RCE is invented, everything is grounded in reality, but turned up to 100.
\nThe system is challenged when group of young hackers from England move into a remote village in Switzerland and start planning a revolution.
\nRCE is a successor to GRM, but not a sequel. We know some of the characters (the friends plus Don and Karen) from GRM, but this time the group is no longer so naive to believe that just revealing how fucked up the system is, is enough to change it.
\n★★★★★
\nAlso on BookWyrm.
", "url": "/blog/sibylle-berg-rce/", "title": "RCE by Sibylle Berg", "summary": "Review of RCE by Sibylle Berg", "date_modified": "2023-01-09T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/favorite-albums-2022/", "content_html": "Looking back at the albums I liked most of 2022, it was not a bad year for new music. Here are some of the albums I liked most.
\n![\"Album](\"/blog/favorite-albums-2022/mitski-laurel-hell-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/big-thief-dragon-new-warm-mountain-i-believe-in-you-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/angel-olsen-big-time-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/girlpool-forgiveness-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/the-smile-a-light-for-attracting-attention-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/wet-leg-wet-leg-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/warpaint-radiate-like-this-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/sharon-van-etten-weve-been-going-about-this-all-wrong-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/soccer-mommy-sometimes-forever-640.jpg\")
![\"Album](\"/blog/favorite-albums-2022/aldous-harding-warm-chris-640.jpg\")
Previously: 2021, 2020, 2019, 2018, 2017.
", "url": "/blog/favorite-albums-2022/", "title": "My Favorite Albums of 2022", "summary": "Like every year I collect a couple of the albums I liked most in 2022.", "date_modified": "2023-01-11T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/andrew-s-grove-high-output-management/", "content_html": "However influential and innovative this book has once been, it seems outdated now. Instead you should read a more modern management book that took its good ideas and brought them into the 21st century. ★★★☆☆
\n![\"Cover](\"/blog/andrew-s-grove-high-output-management/andrew-s-grove-high-output-management-320.jpg\")
Also on BookWyrm
", "url": "/blog/andrew-s-grove-high-output-management/", "title": "High Output Management by Andrew S. Grove", "summary": "Review of High Output Management by Andrew S. Grove", "date_modified": "2023-01-18T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/engineering-management-for-the-rest-of-us-sarah-drasner-2022/", "content_html": "With Engineering Management for the Rest of Us Sarah Drasner gives us a great\nstarting point for new managers. On approximately 200 pages Sarah gives us a\ntour of all of areas that managers need to think about.
\nIn chapter 1 Sarah starts with a quote from Ashley Willis, which sets the mood\nfor the rest of the book.
\n\n\nThe fact that you're worried that you're not a good manager is a key part of\nbeing a good manager.
\n
The book is split into four parts: Your Team, Collaboration, Helping Your Team\nDo Their Best Work, and Your Work. This is one of the great things of the book,\nthat it not just handles the managing and leading of people, but also how you\ncan do great work and have a full-filling career.
\nFor each of the topics that Sarah touches in Engineering Management for the\nRest of Us adds references to further readings, which gives you the opportunity\nto learn more about the topic.
\n★★★★★
\n![\"Engineering](\"/blog/engineering-management-for-the-rest-of-us-sarah-drasner-2022/engineering-management-for-the-rest-of-us-320.jpg\")
Also on BookWyrm
", "url": "/blog/engineering-management-for-the-rest-of-us-sarah-drasner-2022/", "title": "Engineering Management for the Rest of Us by Sarah Drasner (2022)", "summary": "Review of the book Engineering Management for the Rest of Us by Sarah Drasner.", "date_modified": "2023-01-29T11:01:22.413Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/effective-remote-work-james-stanier-2022/", "content_html": "I bought the book after I saw James speak about remote work at the Lead Dev\nconference in Berlin last November, but I was a bit disappointed from Effective\nRemote Work. I felt it was very basic at times and the examples he uses to start\neach chapter felt very artificially constructed. I just couldn't relate to the\npeople in these examples.
\nThe rating does not reflect the quality of the book, it is (apart from the\nstories at the beginning of each chapter) well written and contains a lot of\ngood advice, if you are working or are planning to work in a remote first\ncompany. It just happens that I work in a hybrid remote/office company and I\npersonally prefer working in an office, but I need to collaborate on a daily\nbasis with people that are remote (or just work in an office in a different\ncountry). This was not very well covered in Effective Remote Work.
\n![\"The](\"/blog/effective-remote-work-james-stanier-2022/james-stanier-effective-remote-work-320.jpg\")
★★☆☆☆
\nAlso on BookWrym.
", "url": "/blog/effective-remote-work-james-stanier-2022/", "title": "Effective Remote Work by James Stanier (2022)", "summary": "My review of Effective Remote Work by James Stanier", "date_modified": "2023-01-29T20:54:39.413Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/austrian-album-recommendations/", "content_html": "I recently stumbled on the Bandcamp page of Vienna-based Seeyou Records and then spend too much money on music there. I thought a share a couple of albums from Austrian artists that I recently discovered.
\n![\"Album](\"/blog/austrian-album-recommendations/squalloscope-weightbearer-320.jpg\")
![\"Close-up](\"/blog/austrian-album-recommendations/siamese-elephants-what-happened-at-the-social-club-320.jpg\")
![\"Close-up](\"/blog/austrian-album-recommendations/rosa-rendl-always-320.jpg\")
![\"An](\"/blog/austrian-album-recommendations/fuzzybrains-the-less-i-know-320.jpg\")
![\"A](\"/blog/austrian-album-recommendations/atzur-big-delirium-320.jpg\")
![\"In](\"/blog/vienna-2023-05-17/wien-1-320.jpg\")
![\"Building](\"/blog/vienna-2023-05-17/wien-2-320.jpg\")
![\"Facade](\"/blog/vienna-2023-05-17/wien-3-320.jpg\")
![\"Stone](\"/blog/vienna-2023-05-17/wien-4-320.jpg\")
![\"Mykonos](\"/blog/mykonos-july-2023/DSCF1249-320.jpeg\")
![\"Two](\"/blog/mykonos-july-2023/DSCF1149-320.jpeg\")
![\"Beach](\"/blog/mykonos-july-2023/DSCF1169-320.jpeg\")
![\"White](\"/blog/mykonos-july-2023/DSCF1183-320.jpeg\")
![\"Small](\"/blog/mykonos-july-2023/DSCF1187-320.jpeg\")
![\"Details](\"/blog/mykonos-july-2023/DSCF1193-320.jpeg\")
![\"Tiny](\"/blog/mykonos-july-2023/DSCF1203-320.jpeg\")
![\"Three](\"/blog/mykonos-july-2023/DSCF1208-320.jpeg\")
![\"White](\"/blog/mykonos-july-2023/DSCF1216-320.jpeg\")
![\"White](\"/blog/mykonos-july-2023/DSCF1121-320.jpeg\")
Last week we went to Mykonos on a summer vacation and the island is beautiful.\nMykonos City is very pretty and extremely photogenic (as you can see above) and\nthe beaches and the water are perfect.
\nWhile life was good on the beach, getting there was risky. As it is typical for\ntiny touristy beach towns in southern Europe, the streets are narrow, there are\nno sidewalks and too many cars. Here the problem was exaggerated by the fact\nthat hotels were sending black minibuses to pick up their guests, tourists were\nrenting massive Jeeps and SUVs and for some reason quad bikes were very common\non the streets.
\nThe other thing, and I think this is not just a problem on Mykonos, but in all\nof Greece are illegal beach clubs. All beaches in Greece are public, but\nnevertheless beach clubs put sun loungers and parasols out and charge somewhere\nbetween 50 and 200 Euro per day for them. If you're lucky they leave 10 meters\nof public beach on the sides.
\nOn one day we were taking a boat to another beach and we passed a lot of boats\nand this was the first time I have ever seen super-yachts up close and wow, they\nare disgusting. These yachts are monstrosities, they are super dark and look\nless like pleasure crafts and more like warships. We were feeling guilty,\nbecause this was our second vacation by plane this year and here we\nwere watching the super rich blasting diesel into the ocean.
\nIn the end I spent four days on the most beautiful and cliché beaches you can\nimagine and this radicalised me further. Whatever we do about climate change,\nthe super rich don't give a fuck and we need to take their private jets and\nsuper-yachts, because they are not giving them up voluntary.
", "url": "/blog/mykonos-july-2023/", "title": "Mykonos, July 2023", "summary": "Photos from our trip to Mykonos, Greece in July 2023", "date_modified": "2023-08-03T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/wien-stadtwanderweg-4a/", "content_html": "Last Sunday was a near perfect autumn day in Vienna and I took the chance to take some photos along Stadtwanderweg 4a.
\n![\"Wooden](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-005-320.jpg\")
![\"Tree](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-001-320.jpg\")
![\"Trees,](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-002-320.jpg\")
![\"Forest,](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-003-320.jpg\")
![\"Tall](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-004-320.jpg\")
![\"Left](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-006-320.jpg\")
![\"Tall](\"/blog/wien-stadtwanderweg-4a/stadtwanderweg-4a-007-320.jpg\")
I like to keep my photo library organised, which includes location information to all photos I take with my big camera. However, my cameras don't have GPS and connecting the camera to the horribly Fuji app is no fun. Instead I run a GPS tracker app while tacking pictures and then export a GPX file.
\nMinimalist GPS Tracker is a super simple GPS tracker that uses barely any battery and can export GPX.
\n![\"Left](\"/blog/iphone-gps-geo-tag-photos/gps-tracker-320.jpg\"){kind=tracking}
After I'm done with taking photos I use the Lightning to SD Card Camera Reader to import the photos to my iPhone and than use an app called Geotag Photos Tagger (GPX) to import the GPX file I recorded earlier and match the photos to the location using the timestamp. Because the mapping happens based on the timestamp it's important to set the correct time on the camera. If the time is off, I use the Adjust Date & Time functionality that the native Photos app added a couple of years ago.
\n![\"Left](\"/blog/iphone-gps-geo-tag-photos/geotag-photos-tagger-320.jpg\")
Sometimes I forget to start the GPS tracker or I need to adapt some location manually and I find the Metapho app very helpful in these situations. It allows me to filter my photos to show me only those with no location and add a location to photos based on the location of the pictures taking around the same time.
", "url": "/blog/iphone-gps-geo-tag-photos/", "title": "Record GPS tracks and Geo-tag Photos on iPhone", "summary": "Using a GPS tracker app to record tracks and geotag photos directly on an iPhone", "date_modified": "2023-11-19T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/favourite-albums-2023/", "content_html": "![\"Woman](\"/blog/favourite-albums-2023/caroline-polachek-desire-i-want-to-turn-into-you-320.jpg\")
![\"Three](\"/blog/favourite-albums-2023/boygenius-the-record-320.jpg\")
![\"Black](\"/blog/favourite-albums-2023/us-girls-bless-this-mess-320.jpg\")
![\"Light](\"/blog/favourite-albums-2023/mitski-the-land-is-inhospitable-and-so-are-we-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2023/caroline-rose-the-art-of-forgetting-320.jpg\")
![\"Painting](\"/blog/favourite-albums-2023/speedy-ortiz-rabbit-rabbit-320.jpg\")
![\"Mountain](\"/blog/favourite-albums-2023/courtney-barnett-stella-mozgawa-end-of-the-day-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2023/blondshell-blondshell-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2023/black-belt-eagle-scout-the-land-the-water-the-sky-320.jpg\")
![\"Three](\"/blog/favourite-albums-2023/my-ugly-clementine-the-good-life-320.jpg\")
In 2023 I have read 37 books, 24 of them were fiction and 13 non-fiction. These\nbooks have been written by 39 different authors, 29 were woman and 10 were men.
\nI like playing Pokémon and I'm a Pokédex completionist and I like to share\nthat with people. There are a couple of sites that allow you to share your Pokédex\nprogress, for example, Pokédex Tracker, but this\nis not a sustainable business and any of these sites can go away at any time.\nInstead I want to have a page here, on my website, and therefore I have created\nan Eleventy plugin to add a Pokédex and now, over a year later I have finally\nfound the time to polish and publish it. You can see the plugin in action by\nvisiting the Pokédex section on this website and if you're ready\nto create your own Pokédex you can find detailed installation and configuration\ninstructions in the README.
\n@fec/eleventy-plugin-pokedex • Package • Source Code
", "url": "/blog/eleventy-plugin-pokedex/", "title": "Pokédex Plugin for Eleventy", "summary": "Plugin to add a Pokédex to your Eleventy website", "date_modified": "2024-01-14T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/stadtwanderweg-1/", "content_html": "Today I took advantage of the great weather and walked\nStadtwanderweg 1.\nStarting in Nussdorf the trail runs through vineyards and some woods up to\nKahlenberg. After enjoying the great view of Vienna, the Danube and the\nvineyards the path continues back down over Nussberg back to Nussdorf to the\nD tram.
\n![\"Footpath](\"/blog/stadtwanderweg-1/stadtwanderweg-1-320.jpg\")
![\"A](\"/blog/stadtwanderweg-1/stadtwanderweg-2-320.jpg\")
![\"An](\"/blog/stadtwanderweg-1/stadtwanderweg-3-320.jpg\")
![\"A](\"/blog/stadtwanderweg-1/stadtwanderweg-4-320.jpg\")
![\"Church](\"/blog/stadtwanderweg-1/stadtwanderweg-5-320.jpg\")
![\"Stone](\"/blog/stadtwanderweg-1/stadtwanderweg-6-320.jpg\")
![\"View](\"/blog/stadtwanderweg-1/stadtwanderweg-7-320.jpg\")
![\"Vineyard](\"/blog/stadtwanderweg-1/stadtwanderweg-8-320.jpg\")
On Friday Apple announced how they are going to implement the Digital Markets Act (DMA) in the EU and one of the changes is the ability to set the default browser. MacStories shared the full list, but I thought it would be nice to have an overview in table form.
\nFirefox, DuckDuckGo, Brave, Chrome, Edge, Onion Browser, Opera and Safari (…) are available in all countries.
\nIt's also interesting to see how many of these browsers are privacy focused with ad blockers and VPNs integrated, which seem to be mostly targeted towards non-technical users, for which installing VPNs or Safari extensions is too complicated. Another batch of browsers seem to exist because it's not possible to change your default search engine to anything except a very small list provided by Apple.
\nI also want to offer my deepest condolences to all countries that have Web@Work in their list of top 10 browsers. I'm sorry that corporate IT makes you use it.
\n\n| Browser | \nAT 🇦🇹 | \nBE 🇧🇪 | \nBG 🇧🇬 | \nHR 🇭🇷 | \nCY 🇨🇾 | \nCZ 🇨🇿 | \nDK 🇩🇰 | \nEE 🇪🇪 | \nFI 🇫🇮 | \nFR 🇫🇷 | \nDE 🇩🇪 | \nGR 🇬🇷 | \nHU 🇭🇺 | \nIE 🇮🇪 | \nIT 🇮🇹 | \nLV 🇱🇻 | \nLT 🇱🇹 | \nLU 🇱🇺 | \nMT 🇲🇹 | \nNL 🇳🇱 | \nPL 🇵🇱 | \nPT 🇵🇹 | \nRO 🇷🇴 | \nSK 🇸🇰 | \nSL 🇸🇮 | \nES 🇪🇸 | \nSE 🇸🇪 | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Aloha | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Avast | \n\n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n |
| BlackBerry Access | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | ✔︎ | \n
| Brave | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Chrome | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| DuckDuckGo | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Ecosia | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | \n | ✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n
| Edge | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Firefox | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Onion Browser | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Opera | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Presearch | \n\n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n |
| Private Browser Deluxe | \n\n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | ✔︎ | \n\n | \n | ✔︎ | \n✔︎ | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n |
| Qwant | \n\n | ✔︎ | \n\n | ✔︎ | \n\n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n |
| Safari | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n
| Seznam.cz | \n\n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | \n | ✔︎ | \n\n | \n | \n |
| Vivaldi | \n✔︎ | \n\n | ✔︎ | \n\n | \n | ✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | \n | \n | ✔︎ | \n\n | \n | ✔︎ | \n✔︎ | \n\n | \n | \n | ✔︎ | \n\n | ✔︎ | \n✔︎ | \n\n | ✔︎ | \n\n |
| Web@Work | \n\n | \n | \n | ✔︎ | \n\n | \n | \n | \n | \n | \n | ✔︎ | \n\n | ✔︎ | \n\n | ✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n\n | \n | \n | ✔︎ | \n✔︎ | \n\n | \n |
| You.com | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n✔︎ | \n\n | ✔︎ | \n✔︎ | \n✔︎ | \n
A couple of years ago I started to buy music again and as you might have seen from the links I share Bandcamp is my MP3 store of choice. While Bandcamp is the best option for artists, not everything is available there and my alternative is iTunes.
\nIt's weird to say this because I was using Apple Music and Music.app for so long, but the UX to buy music got so bad. Apple really wants you to rent the music instead of buying and it takes an extra click every time to get to the iTunes page to buy an album and then you have to get the files out of the Music folder and sometimes the ID3 tags for one or two songs are missing1 and the cover is never baked into the file. Overall buying music from iTunes is just a worse experience and in addition it feels like it could go away at any moment, so I was looking into alternatives and, oh person, it does not look great out there.
In the table below you can see a couple of albums that I looked up on various platforms with the corresponding price. I looked up albums from four different eras: very recent (2024), streaming era (2015-2022), CD era (90s), and pre-CD era (before 1980). I checked each album on Bandcamp, iTunes, 7digital, Qobuz and Amazon.
\nBefore I say anything else, I want to repeat taht when an album is available on Bandcamp you should always buy it on Bandcamp! If you buy music instead of streaming it you probably want to support artists and Bandcamp, even under the new ownership, still pays artists the most money and the first Friday of each month is still Bandcamp Friday where all the money goes to the artist.
\nWhen I looked at the prices I was not expecting so much fluctuation and differences in prices across various services and that there is not a cheap and a premium option. It really depends on the album which store is the cheapest. Usually either iTunes or Amazon had the best price, but with quite huge differences. For example, Letting off the Happiness by Bright Eyes is €4.99 at Amazon, but €8.99 at iTunes, while Horses by Patti Smith is €6.99 at iTunes and €10.32 at Amazon. Anyway, I try to avoid giving Jeff Bezos more money and I will continue to ignore Amazon, even if they are the cheapest option.
\nQobuz is directed towards audiophiles and their high prices reflect that. They also have a streaming service and members can buy music for a reduced price, which is always the price they feature prominently on their website and you need to click on the price to get the real price, which is very often the highest one. It's owned by a French company, some kind of media conglomerate, I don't know, their about page says nothing in so many words.
\nNext up is 7digital, which was a MP3 store, but now is also some kind of B2B music licensing company from the UK. It still has that MP3 store, but I was not able to find all the albums, which is either because they don't sell them or their search is bad 🤷♂️ Their prices are usually somewhere in the middle and sometimes they match the best price.
\nI want to mention two more MP3 stores: jam.coop and Mirlo. Both are worker co-operatives, but their catalog is very limited and I could not find anything I wanted to buy there. I will keep an eye and see if their catalogues are continuing to grow.
\nIf I missed a MP3 store please let me know on Mastodon or via email.
\n\n| Album | \nBandcamp | \niTunes | \n7digital | \nqobuz | \nAmazon | \n
|---|---|---|---|---|---|
| TORRES — What an enormous room (2024) | \n€10.73 | \n€8.99 | \n€10.99 | \n€12.59 | \n€9.99 | \n
| The Smile — Wall Of Eyes (2024) | \n€11.10 | \n€8.99 | \n€9.52 | \n€13.99 | \n€9.99 | \n
| Sleater-Kinney — Little Rope (2024) | \n€11.10 | \n€10.99 | \n€14.19 | \n€17.29 | \n€10.99 | \n
| The National — Sleep Well Beast (2017) | \n€9.24 | \n€10.99 | \n€10.49 | \n€9.79 | \n€9.99 | \n
| Caroline Polachek — Pang (2019) | \n€12.02 | \n€14.99 | \n€11.49 | \n€17.69 | \n€9.99 | \n
| Mitski — Be The Cowboy (2018) | \n€12.95 | \n€8.99 | \n€8.99 | \n€12.59 | \n€9.99 | \n
| Radiohead — OK Computer (1997) | \n€9.24 | \n€10.99 | \n€10.49 | \n€9.79 | \n€9.99 | \n
| Alanis Morissette — Supposed Former Infatuation Junkie (1998) | \nn/a | \n€11.99 | \n€11.49 | \n€17.49 | \n€11.99 | \n
| Bright Eyes — Letting off the Happiness (1998) | \n€9.25 | \n€8.99 | \n€8.99 | \n€10.19 | \n€4.99 | \n
| Jimi Hendrix — Electric Ladyland (1968) | \nn/a | \n€9.99 | \nn/a | \n€14.79 | \n€10.99 | \n
| Patti Smith — Horses (1975) | \nn/a | \n€6.99 | \nn/a | \n€8.89 | \n€10.32 | \n
| X-Ray Spex — Germ Free Idolescents (1978) | \nn/a | \n€8.99 | \n€8.99 | \n€12.59 | \n€8.99 | \n
If you like fast websites you probably also like Eleventy. Eleventy is my go to tool if I want to quickly build a fast and easy to maintain small website. Every time I create a new website I start with the simplest possible setup an expand it when required, which at some point also leads me to implement some kind of cache busting technique. Cache busting is necessary when you configure caching of static assets, such as CSS, JavaScript or images, and you want a way to tell the browser to load the newest version of these assets. Eleventy does not include any asset handling by default, this gives us the freedom to use whatever we want, but it also requires us to set something up. Max Böck describes a couple of different variants in his blog post Asset Pipelines in Eleventy.
\nAnother method is defining a custom template format, for example, described in the Eleventy documentation in the chapter on custom template languages and there are a couple of plugins that integrate one or the other asset toolchain with Eleventy (for example, PostCSS), but none are dead-simple pure cache busting with the option to add a bit of processing later. This is why I created a plugin to do just that.
\nI wanted to have one line configuration for the simple use case and the following line processes CSS and JavaScript files and it adds a hash based on the file content to the file name and in addition it will also save a manifest.json with a map from original to hashed file name.
eleventyConfig.addPlugin(cssPipelinePlugin, { extensions: ['css', 'js'] });In our template we can link a JavaScript file by using the hashFileName filter:
<script src=\"{{ \"/assets/main.js\" | hashFileName }}\" async></script>The plugin accepts an option called compilerFns, which is an object of functions that can compile a certain file type. For example, let's say we want to process CSS files with PostCSS:
eleventyConfig.addPlugin(cssPipelinePlugin, {\n extensions: ['css', 'js'],\n compilerFns: {\n css: (inputContent, inputFile) =>\n postcss([require('postcss-import')])\n .process(inputContent, { from: inputFile })\n .then((result) => result.css),\n },\n});And just like before we can use the hashFileName in our templates:
<link rel=\"stylesheet\" href=\"{{ \"/assets/main.css\" | hashFileName }}\" />If you are interested you can install the plugin using the following command:
\nnpm install -D fec/eleventy-plugin-asset-pipelineYou can find more information about the project on Codeberg and NPM.
", "url": "/blog/eleventy-plugin-asset-pipeline/", "title": "@fec/eleventy-plugin-asset-pipeline: Better Cache Busting with Eleventy", "summary": "I have created an Eleventy plugin to easily implement cache busting and asset handling.", "date_modified": "2024-02-18T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/hiking-along-the-semmering-railway/", "content_html": "One of the great joys of visiting family in Styria is the Semmering railway, which is the most scenic train in Austria. When the railway was completed in 1854 it was the first mountain railway built with standard gauge and used to connect Vienna to the port in Trieste. On Easter Sunday we decided to not just travel over Semmering, but get off and hike the railway trail. The trail starts at the Semmering station and passes by various stations, which allows hikers to choose their preferred distance. We choose to hike until Payerbach-Reichenau (21 km), the other stations are Breitenstein (9 km), Klamm (15 km), and Gloggnitz (23 km).
\nThis is quite a long hike, but it is relatively easy (if the ground is dry), there are only a couple of steep passages. If you start at Semmering the trail goes up and down, but mostly down. The trail is superbly marked and there are quite a lot of plaques explaining the history of the Semmering railway. However, we were hiking the trail quite early in the season and we did not see a single open inn along the way. We didn't even encounter a drinking fountain anywhere on the 21 km track.
\nOn this years Easter Weekend half of Europe was covered in Sahara dust, this gave the scenery a surreal look, but it is beautiful in any way. There is definitely a reason why after the railway was built Semmering became a major tourist destination and multiple grand hotels were built. It's just a bit sad that they seem mostly empty now and are falling in disrepair. However, nature still delivers with its views. The one depicted in the third photo was even depicted on the 20 Schilling banknote for a couple of years.
\n![\"On](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-1-320.jpg\")
![\"A](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-2-320.jpg\")
![\"In](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-3-320.jpg\")
![\"View](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-4-320.jpg\")
![\"Train](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-5-320.jpg\")
![\"A](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-6-320.jpg\")
![\"Picture](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-7-320.jpg\")
![\"A](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-8-320.jpg\")
![\"Train](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-9-320.jpg\")
![\"A](\"/blog/hiking-along-the-semmering-railway/bahnwanderweg-10-320.jpg\")
I had to deal with an extreme edge case in Eleventy today. Since I'm currently looking for a new job I have updated my CV recently and I decided to use the HTML version I have on this website as basis to generate a PDF that I can send to companies. When I generate the PDF I want to include my address and phone number on the CV, but I don't want to put them online and I don't want to commit them either, since the Git repository is also public.
\nAt first I put this off and manually added my address and phone number whenever I wanted to generate a new version, but then I remembered that this is Eleventy and Eleventy is amazing and it's probably extremely easy to do this and I was right.
\nI want to store private data in an environment variable, since these are not stored in Git and are not automatically deployed to my server. Whenever I want to make data available to templates in Eleventy, I reach for .11tydata.js files:
// site/cv.11tydata.js\nmodule.exports = {\n cv_address: process.env.FEC_CV_ADDRESS,\n cv_phone: process.env.FEC_CV_ADDRESS,\n};Now, in the template governing my CV, I can use cv_address and cv_phone to render these private values. If the variable has a value, I want to render these nicely:
// site/cv.njk\n{% if cv_address %}\n <li><strong>Address:</strong> {{ cv_address }}</li>\n{% endif %}\n{% if cv_phone %}\n <li><strong>Phone:</strong> {{ cv_phone }}</li>\n{% endif %}\nI can set the environment variable in my shell before building my site using export FEC_CV_ADDRESS=\"My address\", but it is cumbersome to type this every time. Luckily I can reach to a great library called dotenv that allows me to define the environment variables in a file that is ignored by Git.
FEC_CV_ADDRESS=\"My address\"\nFEC_CV_PHONE=\"My phone number\"In my Eleventy config I then import the package and call it to activate dotenv. Then everything defined in .env is available as an environment variable in Node.js.
// .eleventy.js\nconst dotenv = require('dotenv');\ndotenv.config();I'm currently working on an application that uses Preact and preact-iso for server-side rendering and routing. preact-iso provides the useLocation() hook to access the current URL in a component. When testing such a component I need to mock the location, but I was having troubles figuring out how I'm able to do this.
After reading the source code of LocationProvider component I found an undocumented and wrong way to achieve this, but after creating an issue Ryan Christian, one of the Preact developers, pointed me to the correct solution.
But let's start at the beginning. We have a component that needs access to the current URL, for example, to check if a given URL is currently active:
\nexport function Link({ href, children }) {\n const { url } = useLocation();\n\n const isActive = url === href;\n return (\n <a href={href} className={isActive ? 'active' : ''}>\n {children}\n </a>\n );\n}To test the logic in this component, we need to write two tests: one to check if the given href is active and a negative case. I am using vitest and @testing-library/preact, but this should work with all testing frameworks.
test('Link should render active link with class', () => {\n render(\n <LocationProvider>\n <Link href=\"/active\">My link</Link>\n </LocationProvider>\n );\n\n const link = await screen.findByRole('link');\n expect(link).toHaveClass('active');\n});\n\ntest('Link should render not active link without class', () => {\n render(\n <LocationProvider>\n <Link href=\"/not-active\">My link</Link>\n </LocationProvider>\n );\n\n const link = await screen.findByRole('link');\n expect(link).not.toHaveClass('active');\n});In order to make both tests pass, we need to mock the location by using the snippet that Ryan suggested to me:
\nfunction mockLocation(path) {\n globalThis.location = {};\n const u = new URL(path, 'http://localhost');\n for (const i in u) {\n try {\n globalThis.location[i] = /to[A-Z]/.test(i) ? u[i].bind(u) : String(u[i]);\n } catch {}\n }\n}Now we can set the location before each test:
\ntest('Link should render active link with class', () => {\n mockLocation('/active');\n // Rest of the test...\n});\n\ntest('Link should render not active link without class', () => {\n mockLocation('/active');\n // Rest of the test...\n});One thing that is super important to get this to work is that we have to wrap every component in LocationProvider since the provider is the one that actually picks up the location from the browser API. If we have a lot of tests that depend on the location and need to be wrapped in the provider, we can create a custom render function that always wraps the component in LocationProvider:
import { render } from '@testing-library/preact';\n\nfunction renderWithLocation(ui, options = {}) {\n return render(ui, { wrapper: LocationProvider, ...options });\n}Our final test code is readable, stable, and allows us to test the full functionality of our application:
\ntest('Link should render active link with class', () => {\n mockLocation('/active');\n renderWithLocation(<Link href=\"/active\">My link</Link>);\n\n const link = await screen.findByRole('link');\n expect(link).toHaveClass('active');\n});\n\ntest('Link should render not active link without class', () => {\n mockLocation('/active');\n renderWithLocation(<Link href=\"/not-active\">My link</Link>);\n\n const link = await screen.findByRole('link');\n expect(link).not.toHaveClass('active');\n});![\"Lake](\"/blog/2024-10-19/gmunden-1-320.jpg\")
![\"Lake](\"/blog/2024-10-19/gmunden-2-320.jpg\")
![\"Wooden](\"/blog/2024-10-19/gmunden-3-320.jpg\")
![\"Boat](\"/blog/2024-10-19/traunkirchen-1-320.jpg\")
![\"Statue](\"/blog/2024-10-19/traunkirchen-2-320.jpg\")
![\"Wall](\"/blog/2024-10-19/traunkirchen-3-320.jpg\")
Recently I switched back to using Kagi and since LaunchBar is one the most essential parts of my computing life I wanted to have a better experience than just a custom search template.
\nI have created an action that allows me to initiate Kagi searches from LaunchBar with search suggestions and thumbnails.
\n![\"Animation](\"/blog/2024-10-27-launchbar-action-kagi-search/launchbar-action-kagi.gif\")
It is based on an action by Christian Bender that did a lot of things I wanted to have, but not everything.
\nlaunchbar-action-kagi.lbactionYou can find the source code on Codeberg and it is licensed with the MIT License.
", "url": "/blog/launchbar-action-kagi-search/", "title": "Kagi Search Action for LaunchBar", "summary": "Initiate Kagi searches from LaunchBar with search suggestions and thumbnails.", "date_modified": "2024-10-27T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/favourite-albums-2024/", "content_html": "It's a tradition now: here are my favourite albums of the year.
\n![\"A](\"/blog/favourite-albums-2024/waxahatchee-tigers-blood-320.jpg\")
![\"Person](\"/blog/favourite-albums-2024/cassandra-jenkins-my-light-my-destroyer-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2024/sleater-kinney-little-rope-320.jpg\")
![\"Nilüfer](\"/blog/favourite-albums-2024/nilufer-yanya-my-method-actor-320.jpg\")
![\"Four](\"/blog/favourite-albums-2024/the-linda-lindas-no-obligation-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2024/torres-what-an-enourmous-room-320.jpg\")
![\"A](\"/blog/favourite-albums-2024/oxford-drama-the-world-is-louder-320.jpg\")
![\"Close-up](\"/blog/favourite-albums-2024/adrianne-lenker-bright-future-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2024/hurray-for-the-riff-raff-the-past-is-still-alive-320.jpg\")
![\"Drawing](\"/blog/favourite-albums-2024/anna-butterss-mighty-vertebrate-320.jpg\")
![\"Drawing](\"/blog/favourite-albums-2024/orua-passe-320.jpg\")
This June we travelled to South Korea and we visited Jeju, Busan, Pohang, Sokcho and Seoul. We had an amazing time with great amounts of delicious food, beautiful landscapes and stunning culture.
\n![\"A](\"/blog/south-korea-2025/south-korea-01-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-02-320.jpg\")
![\"Two](\"/blog/south-korea-2025/south-korea-03-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-04-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-05-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-06-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-07-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-08-320.jpg\")
![\"Two](\"/blog/south-korea-2025/south-korea-09-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-10-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-11-320.jpg\")
![\"An](\"/blog/south-korea-2025/south-korea-12-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-34-320.jpg\")
![\"An](\"/blog/south-korea-2025/south-korea-13-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-14-320.jpg\")
![\"Silhouetted](\"/blog/south-korea-2025/south-korea-15-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-16-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-17-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-18-320.jpg\")
![\"An](\"/blog/south-korea-2025/south-korea-19-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-20-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-21-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-22-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-23-320.jpg\")
![\"Traditional](\"/blog/south-korea-2025/south-korea-24-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-25-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-26-320.jpg\")
![\"An](\"/blog/south-korea-2025/south-korea-27-320.jpg\")
![\"The](\"/blog/south-korea-2025/south-korea-28-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-29-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-30-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-31-320.jpg\")
![\"An](\"/blog/south-korea-2025/south-korea-32-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-33-320.jpg\")
![\"A](\"/blog/south-korea-2025/south-korea-35-320.jpg\")
![\"People](\"/blog/south-korea-2025/south-korea-36-320.jpg\")
These 27 books had 29 authors, of which 65% are women and 35% are men and they\nwere published in 9 different countries. Most in Austria (8), the UK (5) and the US and Germany (3 each).
", "url": "/blog/book-report-2025/", "title": "Book Report 2025", "summary": "Books I have read in 2025", "date_modified": "2026-01-25T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } }, { "id": "/blog/favourite-albums-2025/", "content_html": "![\"A](\"/blog/favourite-albums-2025/big-thief-double-infinity-320.jpg\")
![\"Double-exposed](\"/blog/favourite-albums-2025/oklou-choke-enough-320.jpg\")
![\"Person](\"/blog/favourite-albums-2025/caroline-rose-year-of-the-slug-320.jpg\")
![\"Black-and-white](\"/blog/favourite-albums-2025/alles-exhausted-alles-exhausted-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2025/rosalia-lux-320.jpg\")
![\"Band](\"/blog/favourite-albums-2025/camp-cope-live-at-sydney-opera-house-320.jpg\")
![\"Painted](\"/blog/favourite-albums-2025/lily-allen-west-end-girl-320.jpg\")
![\"A](\"/blog/favourite-albums-2025/ada-oda-pelle-d-oca-320.jpg\")
![\"Colorful](\"/blog/favourite-albums-2025/sodl-sheepman-320.jpg\")
![\"Woman](\"/blog/favourite-albums-2025/melodys-echo-chamber-unclouded-320.jpg\")
![\"Close-up](\"/blog/hello-world/m-320.jpg\")
April 8, 2026 ・ 11:36
", "url": "/blog/hello-world/", "title": "Hello World", "summary": "On April 8 my daughter was born", "date_modified": "2026-04-29T00:00:00.000Z", "author": { "name": "Florian Eckerstorfer", "url": "https://florian.ec" } } ] }