I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German
BLOG FILTER

I signed the Sustainable Web Manifesto a couple of weeks ago. The manifesto perfectly reflects how I have been handling my business and my projects.

I created a special “GO GREEN” subsection to talk about the topic in more detail and give you some more context about the areas I can help you with.

We all share and use the web, just as we all share and live on this planet. This manifesto is a public declaration of a shared commitment to create a sustainable internet.

https://www.sustainablewebmanifesto.com/
  1. CLEAN –  The services we provide and services we use will be powered by renewable energy.
  2. EFFICIENT –  The products and services we provide will use the least amount of energy and material resources possible.
  3. OPEN – The products and services we provide will be accessible, allow for the open exchange of information, and allow users to control their data.
  4. HONEST – The products and services we provide will not mislead or exploit users in their design or content.
  5. REGENERATIVE –  The products and services we provide will support an economy that nourishes people and planet.

“If we embrace sustainability in our work, we can create a web that is good for people and planet.”

readmore

Together with my partners in crime (Dorit & Micha), we have finally opened our own personal online store.

We have been selling our single origin coffees (1st Single Malt Whisky Coffee, Basic – Single Origin Arabica, Kill me Quick Espresso -Single Origin Robusta), teas (Kräuterschorle – Kräutertee, Feuerkieker – Schwarztee) and rum (Fortune Teller – Double Aged Barbados Rum) using the Amazon Marketplace for the past 2 years.

No more Amazon

GreenApe has been a side project for the past years and I never wanted to deal with the maintenance of our own store. But its time to move on and do our own thing. Amazon has removed so many useful features over the years or added a new fee on top of other fees. Even though Amazon provides access to a large amount of customers, for small companies the fees build up quickly.

Our own

With our own store we can finally do bundles, coupons again and better optimized shipping. It will also allow me to better testdrive some new interesting features for my customers ;) Yeah its kind of my new toy or shopping lab! Its fun being able to work on untested new SEO features, structured data, merchant tools, shopping ads and tracking of all of those.

Locations

We have been selling in Germany for the past 2 years, but that might be changing in the future depending how well the new store shapes up :)

If you live in Germany, love good coffee, tee or rum … say Hi!

GreenApe – Makes Your Life Better
Homepage
Shop
Contact us

readmore

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

What they have to say

  • Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.
  • Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.
  • Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.
  • Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources, and more to ensure your site is fast — no manual tuning required.
  • Host at Scale for Pennies. Gatsby sites don’t require servers so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on services like GitHub Pages and Netlify.

What I have to say …

While researching some popular static site generation tools, GatsbyJS comes up often. I have played with NuxtJS and Hugo in the past, but what I REALLY like about GatsbyJS is the plugin / modular system. You can build your website with plain-old React and CSS styles, but make your development more efficient by adding node_modules.

Also being able to import any data source with ease, using GraphQL, is amazing. And when it comes to content management, you can easily hook a headless WordPress or Drupal setup into the mix and consume their REST APIs :)

I am not switching my own website to GatsbyJS anytime soon, but its another tool in my toolbox for future project consideration !

There are many tutorials on Youtube about getting started, maybe something to consider for the next freetime testdrive ;) Enjoy …

GatsbyJS @ Github

readmore

A nice set of CSS3 Animations that can be easily used to spice up your design.

The animations can be triggered through Javascript, jQuery and the timings can be tweaked through pure CSS. The package also provides gulp, so that you can tweak every aspect easily.

Demo
Github

readmore

  1. SPRITEOWL is a Photoshop extension that takes over the boring part of working with sprite images and CSS.
    Retrieves x, y, width and height info of all sprite elements
    Exports retina ready PNG files and required media queries of your Photoshop sprite file
    Supports preprocessors LESS, SASS/SCSS & Stylus
    Spriteowl
  2. CSSOWL is a mixin library that works with Spriteowl.
    LESS, SASS/SCSS & Stylus support
    Open source
    Cssowl

Two tools that can enhance your workflow immensely. Enjoy!

readmore

Visbug is an amazing new browser extension that allows you to do a visual inspection of your website in development.

What they have to say about their tool and capabilities

  • Point, click & tinker
  • Edit or style any page, in any state, like it’s an artboard
  • Hover inspect styles, accessibility and alignment
  • Nitpick layouts & content, in the real end environment, at any device size
  • Leverage adobe/sketch skills
  • Edit any text, replace any image (hi there copywriters, ux writers, pms)
  • Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
  • Design while simulating latency, i18n, media queries, platform constraints, CPUs, screensize, etc
  • Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
  • No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

For Designers & Content Creators

A really nice tool for designers & content creators, helping them to optimize the look and feel of a website.

The extension is currently available for Chrome, but a Firefox Addon is in development.

Github
Chrome Extension

readmore

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.


  •  Basic
    • Shapes – SquareCurveRound
    • Variants – DefaultFillThick
    • Colors – PrimarySuccessInfoWarningDanger
    • Color types – SolidOutline
    • Animations – SmoothTadaJellyPulseRotate
  • Switch – iOS style – OutlineFillSlim
  • Responsive
  • No JavaScript
  • Custom Font Icons
  • SVG Icons
  • Image support
  • Toggle between icons / SVG’s / images
  • Lock
  • State – FocusHoverIndeterminate
  • Supports frameworks – BootstrapFoundationSematic UIBulma, …
  • SCSS customization
  • Supports all modern browsers, including mobile devices
  • Print friendly

GitHub

readmore

An icon font to use with the Google Maps API and Google Places API, using SVG markers and icon labels.

Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

GitHub / Preview

readmore

Container

CSS

 

readmore

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

GitHub

readmore