Hallo zusammen
Es ist etwas still geworden hier. Der Grund dafür ist, dass ich es endlich gewagt habe. Ich habe schon vor bald einem Jahr beschlossen, dass ich mit Blogger nicht mehr das anstellen kann, was ich machen wollte. Und im März, konnte ich mich dann endlich für einen neuen Namen entscheiden.
Heute ist es nun endgültig soweit.
Ich habe den Sprung in die grosse Weite Welt gewagt. Ab jetzt gibt es neuen Elan und Content auf einer jekyllpage. Aber keine Sorge, Blogger Tutorials, wird es weiterhin geben.

Bitte alle mal Link anklicken!

Hello there
It has been pretty quiet around here. The reason is, that I finally took the step. I have decided almost a year ago, that I am not able to create the page that I want with blogger. And in March I finally decided on a new name.
Today is the day.
I took the first step into the world wide web. From now on you will find new motivation and content on a jekyll powered website. But do not fear, Blogger tutorials are still part of the menu.
So I hope some of you will follow me!

halfapx.com

Ich bin momentan am Designen einer Website, bei der wir einen spannenden Post-Header machen wollen. Herausgekommen ist beim Spielen folgendes und ich finde es ziemlich cool, weswegen ich dacht, dass ich gleich mal drüber schreiben könnte.

See the Pen Shrinking Sticky Header by Myri (@mynimi) on CodePen.

Postübersichten sind etwas, worüber sich viele Blogger immer wieder Gedanken machen. Ich denke der Hauptgrund dafür ist, dass man durch sie eine einfache Übersicht darüber geben kann, was man schon getan hat, was auf dem Blog an Inhalt überhaupt vorhanden ist, ohne dass der User sich durch die ganzen Posts durchscrollen muss.

Postet man zum Beispiel Rezepte, ist eine Rezeptübersicht wirklich wahnsinnig schnell gemacht.

Viele Leute die ich kenne, machen diese Postübersichten manuell. Ich selbst habe bis vor Kurzen meine Tutorialübersicht auch manuell gemacht, darum war die Liste komplett unvollständig und ein paar Tote Links hatten sich darin auch noch versteckt. Doch dann kam Oliver’s Post hier und ich beschloss das mit der automatisierten Liste umzusetzen. Und seitdem habe ich es an keinem Tag bereut

Eine Frage im Blogger-Hilfeforum (übrigens solltet ihr alle dort dabei sein, wenn ihr euch mit Blogger beschäftigt, wir helfen gerne bei jedem Problem :D (Frage hier)) hat mich dann heute angeregt, dieses Tutorial zu schreiben.

Notiz Das hier ist bloss ein Praxis-Beispiel, Credit für die Ajax-Liste gilt Herrn Doetsch.

Als ich mit dem Schreiben von Blogger Templates angefangen habe, habe ich das alles hauptsächlich im Blogger Editor selbst gemacht. Das einzige wofür ich HTML und meinen Editor auf dem Computer benutzte, waren meine "Skizzen", die im Grunde eigentlich Box-Modelle waren.
Seit diesen Anfängen habe ich nun schon so viele Templates geschrieben, dass ich ziemlich schnell feststellte, wie ungünstig das war. Ich begann damit Prototypen in HTML und CSS zu schreiben, die schon etwas mehr Style hatten.
Mittlerweile bin ich so weit, dass ich nicht einmal mehr die schlussendliche Funktionalität im Blogger Editor schreibe, sondern nur noch teste, ob das auch wirklich so ausschaut, wie ich mir das vorstelle.
In diesem Tutorial soll es darum gehen, wie man am besten einen Prototypen für ein responsives Blogger Template schreibt. Diese Vorgehensweise kann genauso gut auf andere Seiten angewendet werden. So mache ich es, wenn ich WordPress Themes schreibe, genauso.

Dies ist der erste Teil meiner Prototypen-Serie. Diese Methode verwende ich für einfache Templates, bei komplexeren, verwende ich Methode zwei, die so bald wie möglich folgt.

When I first started writing blogger templates I wrote most of it in the Blogger Editor itself. The only time I took out my editor and wrote pure HTML was when I wrote my "Sketches" which were basically models of my overall look.
Since those beginnings I wrote a lot of templates and found out pretty fast how flawed this whole workflow was. I started writing prototypes that had most of the basic styling already in it.
Now I am at a point where I write everything in my editor. A prototype that basically already looks like the end result and the blogger template with all the functionality, that only lands in the Blogger Editor to be tested if everything works out.
In this tutorial I want to go over writing a prototype which which our stylesheet and markup will be done. This workflow can also be used for other CMS' as well. That's how I do it if I write a WordPress Theme as well.

This is the first part of my prototyping series. I use this method for simple templates, when working on more complex templates, I will be using method two, which will follow as soon as possible.

Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.

A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.

See the Pen responsive 1-Level Menu by Myri (@bekreatief) on CodePen.

Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.

First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.

Vor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.

Ich wurde letztens gefragt, wie ich denn meine Navigation sticky gemacht habe und habe versprochen, dass ich dazu einen Post schreibe.
Eigentlich wollte ich euch das Script präsentieren, das ich für mein Menu geschrieben habe. Da ich dieses in letzter Zeit für mehrer Projekte verwendet habe, ist mir aber aufgefallen, dass es ein bisschen Probleme macht. Das ist nicht das Problem meines sticky scripts, es ist das Problem von vielen Scripten. Nach Recherche und viel Trial und Error, habe ich nun ein Script zusammengestellt, dass das Problem nicht aufweist.

Ich habe schon ein paar Tutorials dazu geschrieben, wie ihr responsive Menus schreibt. Bei den komplizierteren, habe ich mich dabei bisher aber auf Frameworks oder andrer Leute Anleitungen verlassen. Mein letztes Menututorial ist aber auch schon eine Weile her. in der Zeit habe ich einiges gelernt und deswegen gibt es jetzt mein erstes "komplexes" Menu für euch. Und das alles nur, damit es für euch ganz einfach wird, das Menu zu verwenden.

I have written a few tutorials on here how to create a responsive menu. For the more complex ones I usually relied on framework or other people's explanations. But my last menu tutorial was written a while ago. In the meantime I learned a lot and that's why I am ready now to present a more complex menu today. And that's only because I wanted it to be super easy to use.

Vielleicht erinntert ihr euch noch an meinen Triangle Mania Post, den ich vor etwas über einem Jahr geschrieben habe. Dort habe ich euch gezeigt, wie ihr mit CSS Dreieicke zeichnet und was ihr damit schönes machen könnt. Vor einer Weile habe ich auf Codepen etwas mit den Dreieicken gespielt und mir gedacht, dass es eigentlich total cool wäre, wenn ich dafür ein Mixin hätte. Am besten Grösse, Farbe und Richtung eingeben und dann ist das ganze da, weil jedes Mal zu überlegen, wie ich das jetzt genau machen muss, ist mühsam und nimmt enorm viel Zeit in Anspruch.
Gesagt, getan. Und weil mir ein simples Dreiieck nicht genug war, habe ich noch Rechtwinklige Dreiecke gemacht und mich an gleichseitige herangewagt. Und da ich gerade so schön in Fahr war, folgte noch ein Mixin für Fähnchen.
Das alles habe ich dann für euch in einer Demo zusammengestellt, die ich euch hiermit nicht vorenthalten möchte. Viel erklärt ist nicht, wenn ihr Triangle Mania gelesen habt, wisst ihr, wie man Dreiecke zeichnet. Die Mixins veralgemeinern dass dann nur noch.

Maybe you remember my Triangle Mania Post, I wrote a little over a year ago. There I showed you how to create CSS triangles and what you can use them for. A while ago I was playing around with triangles on codepen and though it would be so much cooler to have a mixin for them. Like giving size color and direction and then the whole code is just there.
So I wrote one. And since a simple triangle was not enough I added right angled triangles and finally did some math to create equilateral triangles. And just because I was already on it I also wrote a mixin for flags.
All of that got together in a demo, which I want to show you guys now. I don't need a lot of explanation, if you read Triangle Mania, you will know how a triangle is created, the mixins just make your work a lot faster.
Triangle Mania Reloaded