Stefan Baumgartner

Web ops, performance and front-end

List of articles

Great Scott! Five lesser known shortcuts for Emmet.io that rock!

I'm a huge fan of Emmet. It allows you not only to create markup in no-time by using a CSS-like syntax in your most favourite code editor (e.g. ul>li*5 expands to one <ul> element with five nested <li> elements in HTML after hitting the tab key. Alternatively, you can just type m20 in your CSS to get margin: 20px after hitting tab).

Read more

It's all about the content!

You know parallel scrolling websites? The kind where big sunglasses assemble themselves, break through rocks and crash your browser? The kind everyone loves. Except developers. Today I found thereisnopagefold.com by Damien du Toit, who had his own opinion on the whole thing. Check it out.

Read more

Digital Visions 2013

Last friday Jürgen Liechtenecker and company held the Digital Visions conference in Vienna for the second time. I was invited to speak and got the amazing opportunity to try out a new talk in front of an interested crowd. Digital Visions quickly became the no. 1 meeting point for all Front End devs and UX people in Austria, and I was not only happy to see a lot of familiar faces from Linz and Vienna, but also meet cab sharing buddy Sven Wolfermann again. He's an amazing speaker and combines true "Berliner Schnauze" with a lot of interesting information. Have fun in Amsterdam, pal, see you in Düsseldorf at the latest!

Read more

Using grunt-connect-proxy

With any application that communicates with some sort of backend interface exchanging JSON data, you're often in the need to use proxies in your own server configuration to overcome CORS restrictions (either that, or use jsonp, which always seems like a workaround to me). Previously --- in the times we worked with our local Apache servers -- it was always a bit tedious and also caused a lot of time running into the project setup for every team member. Now with our yeoman-grunt-bower setup, it mostly takes no longer than a minute. Cause guess what, there's a already Grunt-task for that.

Read more

Using assemble.io with yeoman.io's webapp Gruntfile

With Effeckt.css I discovered assemble.io, a node-based static site generator for ... well ... assembling HTML files from different parts.

Read more

Basic SVG path tweening with SMIL

I'm working on a tribute to one of my childhood heroes, the Caped Crusader, the Dark Knight, the world's greatest detective: Batman. And when I say childhood hero, I do mean a hero to this day. Anyhow, inspired by an EPS file i got over on DeviantArt, I wanted to create a history of his emblems from the very first to the very last, spanning all 73 years, much like this now infamous video did.

Read more

Preparing for an unprefixed future

I realized recently that I don't have to use -webkit on the transition property anymore for Chrome. Actually, to use transitions in modern desktop browsers I don't have to use any prefix at all. This was almost unimaginable a few months ago!

Read more

Caring for Sharing: Social share URLs

I truly hate social media share buttons. Especially those plugins which not only are coded badly but also create heavy traffic and performance issues. Plus, they're a pain in the ass to place correctly. If you really want to use (or have to use) those social liking/sharing/tweeting stuff, use their share URLs. Every single one of them has such, and you can either open them in a pop-up or in a new window. Here they are

Read more

Preserving aspect ratio for embedded iframes

If you want to use videos on your webpage which are hosted on another server (YouTube, Vimeo, whatever), you most likely will use their embedding possibility rather than the HTML5 <video> Tag or a flash plugin hosted on your server. These embedding codes mostly use <iframe>, which is good since they detect all your needs on their site, like in "what format do you need", "use either HTML5 or Flash", or "streaming HD or lower definition for mobile phones". A lot of decisions are taken from you!

Read more

beyond our own noses - the "beyond tellerrand 2013"

Not one single line of JavaScript code? At a conference where web developers visibly outnumbered the rest of the audience? Yes, they can: Düsseldorf's beyond tellerrand conference saw its third edition this year, and what initially started as a somewhat obscure insider gathering is now a definite "Be there or be square" for designers and coders. How come?  Well, "beyond tellerrand" translates as "beyond our own noses", and that is exactly what the event is about: Widening the horizon of web developers. Planting fresh ideas into bright brains. Seeding energizing motivation into otherwise boring "business as usual". Throwing a spotlight on fields which are closely linked to our own work, yet rarely part of our considerations. In other words, the principles of the Netural environment get blown up to a full-size conference here.

Read more