Fixed MC

cnoss · Oct 17, 2024 · 5dca23d · 5dca23d
2 parents 72329b8 + 844915b
commit 5dca23d
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 7 deletions.
diff --git a/_diary/2024-07-29.md b/_diary/2024-07-29.md
@@ -0,0 +1,6 @@
+---
+title: Juli 2024
+---
+Oha, schon wieder ein halbes Jahr rum. Die Reakkreditierung der [Medieninformatik Studiengänge](https://www.medieninformatik.th-koeln.de) ist nun wirklich fertig. Danke an alle, die fleißig mitgeholfen haben, allen voran [@matboehmer](https://twitter.com/matboehmer). Wir haben in der Medieninformatik endlich eine ausgiebige Fotosession gemacht. Danke an alle, die mitgewirkt haben, allen voran [Monika Probst](https://monikaprobst.de).
+
+Bei Klickmeister haben wir [ERCO](https://www.erco.com/de/) beim Produkteinführungsprozess unterstützt und der Deutschen Bahn bei der Reisendeninformation geholfen. Ansonsten checken wir gerade die OpenAI API mit verschiedensten kleinen und größeren Tools aus. Macht schon Spaß. 
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html class="no-js" lang="de">
-
+{% assign description = page.description | default: site.data.settings.basic_settings.description %}
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{{ site.data.settings.basic_settings.site_title }} // {{ site.data.settings.basic_settings.site_tagline }}
@@ -14,22 +14,24 @@
 	<!-- Page Info -->
 	<link rel="shortcut icon" href="{{ site.data.settings.basic_settings.favicon_image | relative_url }}">
 	<meta charset="utf-8">
-	<meta name="description" content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}">
+	<meta name="description" content="{{ description | strip_html | xml_escape }}">
 
 	<!-- Twitter Card -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="{% if page.url == " /" %}{{ site.data.settings.basic_settings.site_title }} – {{
 		page.title }}{% else %}{{ page.title }} – {{ site.data.settings.basic_settings.site_title }}{% endif %}">
 	<meta name="twitter:description"
-		content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}">
+		content="{{ descriptionn | strip_html | xml_escape }}">
 	<meta name="twitter:image:src" content="{{ site.data.settings.basic_settings.featured_image | absolute_url }}">
 
 	<!-- Facebook OpenGraph -->
 	<meta property="og:title" content="{% if page.url == " /" %}{{ site.data.settings.basic_settings.site_title }} – {{
 		page.title }}{% else %}{{ page.title }} – {{ site.data.settings.basic_settings.site_title }}{% endif %}" />
 	<meta property="og:description"
-		content="{{ site.data.settings.basic_settings.description | strip_html | xml_escape }}" />
+		content="{{ description | strip_html | xml_escape }}" />
 	<meta property="og:image" content="{{ site.data.settings.basic_settings.featured_image | absolute_url }}" />
+
+
 </head>
 
 <body class="layout-{{ page.layout }}">

diff --git a/_thoughts/2024-07-28-state-of-css.md b/_thoughts/2024-07-28-state-of-css.md
@@ -2,11 +2,13 @@
 title: CSS Features & Concepts in 2024
 date: 28-07-2024
 layout: text
+description: |
+  Video Workshop zu einigen neuen (und alten) CSS-Features u.A. Scroll Driven Animations, View Transitions & CSS Animations.
 ---
 
 <div class="section herotext">
-    <p>In diesem Workshop werden neue CSS-Features und Konzepte für das Jahr 2024 vorgestellt … nagut, auch ein paar ältere 😉. Dabei liegt der Fokus auf der Verbesserung des <i>Feels</i> einer Website. Wir befassen uns u.A. mit Web Standards & Lean Web Development, Custom Properties, Scroll Driven Animations, View Transitions, CSS Nesting, der Popover API
-und Broken Grid via CSS Grid.</p>
+    <p>In diesem Workshop werden einige neue CSS-Features und Konzepte für das Jahr 2024 vorgestellt … nagut, auch ein paar ältere 😉. Dabei liegt der Fokus auf der Verbesserung des <i>Feels</i> einer Website. Wir befassen uns u.A. mit Web Standards & Lean Web Development, Custom Properties, Scroll Driven Animations, View Transitions, CSS Nesting, der Popover API und Broken Grid via CSS Grid. Dazu gibt es Videos, <a href="https://cnoss.github.io/slides/presentations/misc/css-2024/">Slides</a> und ein <a href="https://github.com/cnoss/state-of-css-2024">Repo mit einer Demo und Challenges zum Üben</a>. </p>
+    <p>Viel Spaß!</p>
 </div>
 
 
@@ -86,4 +88,62 @@ und Broken Grid via CSS Grid.</p>
 
 ## Material
 - [Repo mit Demo und Challenges zum üben](https://github.com/cnoss/state-of-css-2024)
-- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
+<<<<<<< HEAD
+- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
+=======
+- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
+
+## Playgrounds
+Folgende Playgrounds zum Workshop sind auf Codepen verfügbar:
+- [CSS Broken Grid Demo](https://codepen.io/cnoss/pen/poXJXeV)
+- [CSS Popover Demo](https://codepen.io/cnoss/pen/PorqvmY)
+- [CSS Scroll Driven View Timeline Demo](https://codepen.io/cnoss/pen/QWXbVRw)
+- [CSS Scroll Driven Animation Demo](https://codepen.io/cnoss/pen/VwJLxNB)
+- [CSS Transition Demo](https://codepen.io/cnoss/pen/YzoXeXR)
+
+### Weitere Infos & Anregungen
+
+#### Baseline
+- [https://mdn/baseline-unified-view-stable-web-features/](https://developer.mozilla.org/en-US/blog/baseline-unified-view-stable-web-features/)
+- [https://web.dev/baseline](https://web.dev/baseline?hl=de)
+
+#### Custom Properties
+- [Using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- [A Complete Guide to Custom Properties](https://css-tricks.com/a-complete-guide-to-custom-properties/)
+
+#### CSS Nesting
+- [CSS Nesting Module, W3C, 25/06/2024](https://drafts.csswg.org/css-nesting/)
+- [CSS Nesting, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting)
+- [& nesting selector, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector)
+
+#### CSS Grid
+- [CSS Grid Layouts, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
+- [A Complete Guide to CSS Grid, CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
+
+#### Motion in UI
+- [UI Animation, Interaction Design Foundation](https://www.interaction-design.org/literature/topics/ui-animation#:~:text=Animations%20draw%20attention%20and%20provide,cognitive%20load%20and%20prevent%20disorientation.)
+- [The Role of Animation and Motion in UX, NNg](https://www.nngroup.com/articles/animation-purpose-ux/)
+
+#### CSS Transitions & Keyframe Animations
+- [Using CSS transitions, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+- [An Interactive Guide to CSS Transitions](https://www.joshwcomeau.com/animation/css-transitions/)
+- [Using CSS animations, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+
+#### Scroll Driven Animations
+- [Scroll Driven Animations, Bramus Demo](https://scroll-driven-animations.style/)
+- [CSS scroll-driven animations, MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
+
+#### View Transitions
+- [View Transitions API, MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+- [Explainer Document, WICG](https://github.com/WICG/view-transitions/blob/main/explainer.md)
+
+#### Popover API
+- [Popover API, MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+- [Introducing the popover API, Chrome for Developers](https://developer.chrome.com/blog/introducing-popover-api)
+
+#### Mehr zum Themenblock
+- [The Lean Web](https://leanweb.dev)
+- [What's new in the Web, Google I/O Talk from Rachel Andrew](https://io.google/2024/explore/6d6b2a35-ae3a-4f73-b40d-9dc4a8cf0df4/)
+- [Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme](https://io.google/2024/explore/8ae18b72-028e-4722-9a05-4a480048e629/)
+- [The state of CSS and Web UI, Google I/O Talk from Una Kravets](https://io.google/2024/explore/83764202-1ca2-4491-a731-c4d3701624d4/)
+>>>>>>> 844915bff40086548dc80c8dd3e194d5ae49d983
diff --git a/admin/config.yml b/admin/config.yml
@@ -27,6 +27,14 @@ collections:
     folder: '_checkItOut/'
     slug: "{{year}}-{{month}}-{{day}}-{{title}}"
     create: true
+    fields:
+      - { label: 'Title', name: 'title', widget: 'string' }
+      - {label: 'Content', name: 'body', widget: 'text'}
+  - name: 'diary'
+    label: 'Diary'
+    folder: '_diary/'
+    slug: "{{year}}-{{month}}-{{day}}"
+    create: true
     fields:
       - { label: 'Title', name: 'title', widget: 'string' }
       - {label: 'Content', name: 'body', widget: 'text'}