6. September 2019

Finally! GreenApe Shop goes live!

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

30. Mai 2019

Have you heard of GatsbyJS?

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

31. Mai 2016

Plyr.io – A simple, accessible and customizable HTML5, YouTube and Vimeo media player

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

Accessible – full support for VTT captions and screen readers
Lightweight – under 10KB minified and gzipped
Customisable – make the player look how you want with the markup you want
Semantic – uses the right elements. <input type="range"> for volume and <progress> for progress and well,<button>s for buttons. There’s no <span> or <a href="#"> button hacks
Responsive – as you’d expect these days
HTML Video & Audio – support for both formats
Embedded Video – support for YouTube and Vimeo video playback
API – toggle playback, volume, seeking, and more
Universal events – no messing around with Vimeo and YouTube APIs, all events are universal across formats
Fullscreen – supports native fullscreen with fallback to „full window“ modes
i18n support – support for internationalization of controls
No dependencies – written in „vanilla“ JavaScript, no jQuery required
SASS and LESS provided – If you like these over plain CSS

GitHub

31. Mai 2016

Bootstrap Panels with extras = Lobipanel

Sort, drag, expand, resize, minimize bootstrap panels
Specify url and load content in panel from this url
Change the name of the panel
Customize action icons and action tooltips
Works for nested panels
HTML5 localStorage support:
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

GitHub

19. Mai 2016

More than 10 Material Design Resources

I am starting a small list of Material Design resources. If you have anything to share, let me know in the comments.

ICONS

Material Design icons by Google – google.github.io/material-design-icons
Material Design Icons – materialdesignicons.com

FRAMEWORK

PURE CSS

UI

Material UI Colors

JAVASCRIPT

Enjoy coding …

14. Mai 2016

Searching for a Navigation Solution … check NavNav

NavNav provides a ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web.

NavNav

18. April 2016

Be amazed by the Responsive Filemanager with Adobe Aviary integration

„Responsive FileManager is a free open-source file manager and image manager made with jQuery, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.
You can use it as external plugin for TinyMCE, CKEditor and CLEditor or as a stand-alone file manager to manage and select files.“

USAGE WITH TINYMCE

tinymce.init({
    selector: "textarea",theme: "modern",width: 680,height: 300,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
   ],
   toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
   toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
   image_advtab: true ,
   
   external_filemanager_path:"/filemanager/",
   filemanager_title:"Responsive Filemanager" ,
   external_plugins: { "filemanager" : "/filemanager/plugin.min.js"}
 });

tinymce.init({

selector: "textarea",theme: "modern",width: 680,height: 300,

plugins: [

"advlist autolink link image lists charmap print preview hr anchor pagebreak",

"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",

"table contextmenu directionality emoticons paste textcolor responsivefilemanager code"

toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",

image_advtab: true ,

external_filemanager_path:"/filemanager/",

filemanager_title:"Responsive Filemanager" ,

external_plugins: { "filemanager" : "/filemanager/plugin.min.js"}

});

Responsive filemanager / GitHub

24. März 2016

Code snippet manager for GitHub Gists –

„Gisto is a code snippet manager that runs on GitHub Gists and adds additional features such as searching, tagging and sharing gists while including a rich code editor. All your data is stored on GitHub and you can access it from GitHub Gists at any time with changes carrying over to Gisto.“

The application is multi-platform.

Gisto

16. März 2016

Easily create guides in Photoshop with GuideGuide

Enter a few numbers and GuideGuide will draw a grid on your document using Photoshop’s guides.

It helps, if a website needs multiple columns and gutters. Especially fun, when working with grid based frameworks like Bootstrap.

You can give it try feely, but the investment of $10 is worth it :)

GuideGuide

16. März 2016

Multifunctional floating panels with jsPanel

jsPanel are multifunctional floating panels, that can also be used as a simple modal or tooltip. Panels can be minimized and maximized and have a huge amount of options.

Really impressive projectand well documented.

API / Examples & Github