I recently migrated manu.ninja to Eleventy. Never have I ever had such a pleasant experience with a static site generator. Here’re five snippets from my setup that might be useful for your own Eleventy projects.
Performance (8 Articles)
Coding Interaction Design Progressive Web Apps Performance Vue.js
Introducing “Japanese Phrasebook”
· 5 Minutes / 1,437 Words
For the last few weeks I have built an open-source Japanese Phrasebook app optimized for travel and offline usage. The app’s content is nearly 700 phrases from Wikitravel, transformed to a structured data model. This blog post explains my motivation and outlines what I am trying to achieve with this project.
Coding Business Conversion Performance Testing Tools
A/B Testing Using Google Analytics
· 6 Minutes / 1,529 Words
A/B testing allows you to continually improve your product’s user experience or various sales and marketing KPIs, as long as your goals are well-defined and you have a clear hypothesis. This article does not tell you why you should do A/B testing, but focuses on how to track the test and analyze its result using JavaScript and Google Analytics.
5 Chrome Developer Tools Features You Should Start Using Today
· 5 Minutes / 1,200 Words
Developers use the Chrome DevTools on a regular basis. However, most developers limit themselves to a few features that are familiar to them – like changing CSS styles or checking JavaScript errors. It pays off to explore and discover new tools. In this post I’ll show you 5 features you may not yet know, but which I find very helpful in my work.
Coding Image Processing Lazy Loading Performance
Thoughts on Linear Gradients That Resemble Images
· 6 Minutes / 1,533 Words
When Harry Roberts posted Improving Perceived Performance with Multiple Background Images he called for automation of his process. As you can see in my own Dominant Colors for Lazy-Loading Images the topic is dear to me, so I went and over-engineered Harry’s concept for fun in the past month.
Inline SVG – How I Learned to Stop Worrying and Love gzip
· 8 Minutes / 1,930 Words
What If I told you, that you can inline all of your SVG icons and stop worrying about the alternatives? In this article I suggest that you make your life easier by embracing gzip and replacing all of your <use> references.
Coding Image Processing Lazy Loading Performance Meetups Slides
Slides for My Talk About Dominant Colors at Stahlstadt.js
· ½ Minute / 68 Words
I gave a colorful talk about the topics covered in my article Dominant Colors for Lazy-Loading Images at this month’s Stahlstadt.js. The slides are on Speakerdeck and the accompanying code snippets are on GitHub. If you have any feedback, comments or questions, please get in touch with me.
Coding Image Processing Lazy Loading Performance Tools
Dominant Colors for Lazy-Loading Images
· 5 Minutes / 1,233 Words
Pinterest, Google Images and lots of image-heavy sites lazy-load their content. They also calculate the dominant color of each image to use as a placeholder. This post presents a few methods to do the same and helps you understand the GIF file format to make the most of data URIs.