Flatten Your Npm Dependencies With Dedupe

I use npm for a while now and it is heavily integrated in my daily workflow. One thing that always bothers me, is that a fresh npm install on your project will probably download the same packages over and over again. Let us imagine your project has multiple dependencies that all have one package defined as another dependency. Read on →

Using Basic and Tween Transitions in d3.js

Playing around at CodePen is one of my favourite activities, when doing ‘nothing’ lately. Especially the combination of dribbble and CodePen is super nice. Browsing for beautiful designs and ideas on dribbble and putting them into code became a nice activity for me. There are a lot of great people hanging around at dribbble and you can get a lot of inspiration over there.

Over the last few month I started being interested in dashboards and how to analyze/visualize data. Unfortunately I am not a designer and this is why I really enjoy to just build dashboards according to a dribbble design.

Read on →

Import Once in Sass the ‘Foundation Way’

Currently I am working on a huge so called “redesign”, which means to make a big e-commerce plattform responsive. But it is not only about fiddling a few media queries into some existant CSS. For me that is the perfect opportunity to clean up everything and build up a nice and modular CSS architecture. Each component separated into its own file. Margins, paddings, widths, colors, etc. controlled by a main config file. Maintainable and easy to work with. The tech stack is quite modern, so that I had the perfect basement to do fancy stuff. Read on →

How to Measure Frontend Performance With Grunt

When you are a frontend developer, you are on the constant journey to find the right tool to measure the performance of your site. Sure, there are the Developer Tools of your choice, Google Pagespeed or webpagespeed.org available. And those tools are great (if you do not know them, you should definitely check them out), but for me it was always “just” nice to use these tools. They provide lots of useful information and I check them on a regular basis, but as far as I know, these tools do not provide a kind of timeline view of my daily work. They only give useful information to a given time – that is it. What I want to know, is how the site evolved after my latest deploy to production … Read on →

Journey of Discovery - the Global ‘window.performance’ Object

A few days ago I was attending the Developer Conference Hamburg. Topics of the talks were nearly everything you could think of ( from Java to PHP to JavaScript and much more ). For me only frontend related talks were important and that was why I attended the talk of Alois Reitbauer with the title “W3C Web Performance – A detailed overview” ( slides of his talk can be found here ).

And well, what should I say? He introduced the window.performance object to the audience and that absolutely blew my mind, Read on →

How to Handle a Bunch of Requests Using JS Promises

Yesterday I procrastinated the stuff I wanted (and should) do and spent a lot of time browsing Github and checking what is going on in the JS world. I discoverd a discussion held by the grunt guys about how Grunt can be promoted better. That was quite a good read and it was really nice to see, that these people try to push Grunt forward to make tooling much better for everyone.

A lot of new issues were created at Github to push the project to the next level. It turns out that the Gruntjs.com website is a seperate repository whose code is available on Github (man, I really love that Open Source approach).

What else can I do than checking out the source? I mean the website of Grunt itself must include a lot of best practices and stuff to discover. I forked it and opened in my editor and there they were – a lot of JS promises… Read on →

Using Underscore/Lo-Dash and Stopping Reinvent the Wheel

Many projects include utility libraries like underscore/lo-dash these days. The reasons for that can be different. Either a MV* framework like Backbone.js is on bord and has it as dependency or the developers just discovered how much value these utility libraries provide. They are able to improve your daily workflow heavily by giving you a bunch of useful functions and helpers that will work across all the common browsers. I am using underscore for quite a long time now and last week I had to discover, that I am still not using all the features and that I reinvent the wheel in some cases for stuff that could (and should) be done by these libraries. Read on →

Getting Started With Web Components and polymer.js - II

This article describes still rarely supported Shadow DOM features. If you want to see them in action, make sure you use Chrome Canary with turned on “Experimental web platform features” found at about:flags.

This is the second article of a tutorial series (I do not know yet how many articles will follow, but let us call it a series) about how to get started with web components and polymer.js. In case you missed the first article you can check it here. This article will describe things to improve the checkbox component, that got built up in the last article. By improving I mean making the web component more configurable and making it stylable from the “outside”. Additionally it will cover some mistakes that were made in first place, but let us just dive into it. ;)

Read on →

Using SVG Gradients and Filters With d3.js

I play around with the d3.js library for a while now and I always thought that stuff like gradients and shadows are not so easy to create with SVG and that it is simply not made for that. The reason for that is, that when I’m browsing through the d3 example gallery there is so much awesome data visulation, but shadows and gradients are not really present. I know, we are inside of the “flat design era” right now, so who should care about that, but I really like shadows, when they are at the correct places. Gradients on the other hand make very often the tiny tiny difference of a good design and a great design.

Read on →
d3, svg

Getting Started With Web Components and polymer.js

This article describes still rarely supported Shadow DOM features. If you want to see them in action, make sure you use Chrome Canary with turned on “Experimental web platform features” found at about:flags.

I spent a lot of time on codepen the last days to train my CSS skills and to relax a bit (it is really awesome to just play around there while watching a movie). One thing I created was a styled checkbox. And while doing that, the idea came to me, that this checkbox is a perfect use case to start playing around with this magic thing called “web components”, that is heavily around since a few month and is probably the “next big thing” in web development.

Read on →