Blog
Welcome to my writing place. You will find articles, notes and annotated links here and can subscribe to their feed once or individually.
-
as Article I recently made an improvement to WDRL’s website and wanted to integrate a pie chart. It was clear to use SVG here but as I use variable data I wanted to do this via JavaScript. There are tons of chart libraries but I was curious to find a small solution that works fine for just one or two charts on a site. Interestingly, people always share jQuery plugins, huge chart libraries if you ask them … -
as Article You might already have noticed some changes when visiting my website. I enabled HTTPS/SSL via Cloudflare and MaxCDN. With that you’re now also getting this site served through SPDY / HTTP/2. Preparations Nearly none. Except you need to change your nameservers to Cloudflare nameservers so they can handle your requests. This can take up to 48hrs to be distributed to the nameservers over the world. …SSL
-
as Article Do you write @media screen into your media query? Stop it. It limits you more than it usually helps. If you have a look at this example: @media only screen (min-width: 43em) { /* Your CSS here */ } This of course will work on your smartphone, tablet and desktop as expected. But if won’t apply if you, for example, print the page. Because you’ve limited the query to only apply to screen. Did you …Quick Trick: Responsive Print Media Queries
-
as Moment In my vacation in early August, 2014, and my brother went hiking in the mountains for two days. The first ascent was to our first night quartier, the Soiernhaus near Mittenwald, Germany. This was an enjoyable, three hours hike with around 1000m difference in altitude. When we arrived at the alpine hut we drank a fresh buttermilk first, ate a Kaiserschmarrn and then chilled in the sun at the lake …Hiking to the Soiernspitze
-
as Article How do you colorize a video in the very same colors you use in your webdesign? Of course, in CSS. Now what do you do if you have different colors and want them to be reflected in your video? Yes, you animate it. Caution: The following technique is a proof-of-concept that might have a heavy impact on your CPU & GPU. Please do not ever use this technique in real / client projects until the …Dynamically colorize videos with CSS
-
as Article Nearly three years after the initial request for a native responsive images solution in HTML, <picture>, srcset and sizes finally are officially a web standard. Both, WHATWG and W3C landed patches in the past week including the <picture> element and its attributes to the HTML5 specification. And here are the specifications for each on WHATWG and W3C sites: WHATWG <picture> …A Webstandard It Is…
-
as Article Exciting news have been coming up this week. Responsive Images are finally being implemented. Chrome is offering <picture> in version 37 behind flags, which means it’s in Canary since this week and hopefully in released stable v37 in August, 2014. Firefox has all the patches nearly finished and will ship soon in Nightly channel. Long awaited, discussed over the past three years, a …Responsive Images In Your Browser
-
as Article In a large-scale ongoing component-driven front-end project it is likely that you’ll encounter regression bugs. This is the point where you should consider adding regression tests. I want to show you how to test your layout using PhantomCSS (a tool using CasperJS (1.1) and PhantomJS to make screenshots and compare them) and even emulate CSS states. See how to set up and configure PhantomCSS in …Testing mouse events and CSS states with PhantomCSS
-
as Article Using GitHub pages is common practice today, especially using it as host for your Open Source project’s website. But also, websites like mine, rely on GitHub’s pages service. But recently I stumbled over a little caveat—which helps GitHub to prevent attacks. Please be aware this post is written as of April, 2014 and things might have changed when you read this post. You find the links with the …Analyzing the GitHub Pages Waterfall Chart
-
as Article Recently I had to fix some issues in an iconfont. In the end all was tracked down to a corrupt WOFF font file but during the debugging process I found a neat solution to display all characters including unicodes of an iconfont automatically. Be aware that the following technique will only work if you have a SVG file of the font. A common problem with iconfonts is that an icon is somehow related …Parsing Iconfont Characters Automatically
-
as Article This post will show you how to provide fallbacks for embedded code from Codepen, JSbin or other services. It’s super easy but often forgot. Why? If you’ve ever been reading your timeline viewing a blog post that includes a codepen while on the train you might already know why. All of the code snippet services are heavily relying on their own JavaScripts. If they can’t be loaded or the service is …Embed responsively and with a fallback
-
as Article The following code is what I figured out as a solution for drop shadows on two coherent elements while preserving the intersection in plain CSS. This is especially useful for a toggle slide-up/-down function used on a page. See the Pen Drop shadow for 2 elems preserving the intersection by Anselm Hannemann ( @anselmh) on CodePen. ### HTML To display a box-shadowed container including an …Drop shadow for 2 elements preserving the intersection in CSS
-
as Article The question if multiple media queries hurt performance pops up very often. Because naturally as a developer you think it can’t be good for performance if you let the browser evaluate them often. Out of curiosity, I researched a bit on that and found interesting insights… I hadn’t any clue how to track down media query evaluation of a browser (you can’t do that with DevTools), except forking the …Web Performance: One or thousands of Media Queries?
-
as Article Wow. I am nominated for the netawards 2014 as Young Developer of the Year. This is huge and when I read this first I couldn’t believe it. I’m still totally stoked about the support and only can say “Thank you for your support!”. Of course I’d be happy if you give me your vote: Vote for me Thanks again to anyone who nominated me and to everyone who will vote for me. You’re all awesome. ♥Nominated for the netawards 2014
-
as Article The past week a lot of discussion came up about CSS Regions. Initiated by Håkon Wium Lie’s article on AListApart saying “CSS Regions considered harmful”, followed by a counter-article and a decision by Blink to drop CSS Regions for now the web community is now split in half—half of them in sympathy of CSS Regions—half of them saying it’s currently a hacky technique. And that is the true problem. …Is it time for CSS Regions Yet?
-
as Article I am selling one of my work machines as I never used it too much in favor of my MacBook Air 11”. The powerful (still today!) MacBook Pro got an manual upgrade by me with an SSD (via Hardwrk Kit) and has been taken with care. Most of the time it was on a Desktop stand, connected to an external Monitor. Facts / Tech Data: Apple MacBook Pro Mid 2010 (6,2) Intel Core i5 2.4GHz 15.4 inch display with …[SOLD] Apple MacBook Pro 15” Mid 2010
-
as Article With 2013 the past year already, I write this recap to remember what I did in that year. 2013 was amazing for me and 2014 will begin with some changes like me moving to Cologne for the next six months.My Year 2013 in Review
-
as Article As a webdeveloper you probably know how image/media behavior sucks regarding responsive webdesign. Some quick CSS fixes solve your issues usually: img { max-width: 100%; height: auto; } But there is more than that. You may want to set an foreground image to fill its wrapping element, containing its intrinsic aspect-ratio and also want it to be repositioned always to center. Or, if you ever wanted …Fix Image Resizing with object-fit
-
as Article Today I want to share an announcement with you: Finally, after months of work, INIT 1.0 has been released today. Founder of the project Hans-Christian Reinl has written an announcement post at The Nitty Gritty and I am happy to be co-author of the project. What is INIT? INIT is based upon HTML5 Boilerplate and adds more structure for SCSS files, JavaScripts, includes build tasks and a whole lot …Introducing INIT
-
as Article At the End of June, 2013, I started a new project called Web Development Reading List (WDRL). It was the logical evolvement of my weekly blog posts containing interesting links of our industry. When I started the newsletter, after just two weeks it already got 100 subscribers, not counting the people reading the online archive. It grew and outgrew… Now, four months later, I have over 500 …How the WDRL Project Evolves