SVG-Sprites und andere Iconartigkeiten

Wo wir sind ist vorne.

Wir haben dich gut unterhalten? Unterstütze uns mit einer Spende ♥

Feedback? Kommentar oder Twitter.

Iconisch! Iconartig! Sill-Icon! Wir besprechen die Geschichte von Icons im Web, begonnen bei GIFs über Iconfonts zu unserer aktuellen Empfehlung: SVG-Sprites. Nebenher zeigen wir die Magie hinter open-quote / close-quote in Pseudoelementen und präsentieren einen nagelneuen Spam-Spot!
(Wer den ironischen Twist sucht, der war heute leider aus 😓.)

Begrüßung – [00:00:54]

• Golem: „Wissen für ITler – 11 tolle Tech-Podcasts“

Retro

• Retro: Wo wir sind ist Video – twitch-Experiment – [00:04:22]
  • Wo wir sind ist vorne auf Twitch
  • Vite: Folge 20

• Constantin: WebRTC / STUN- / TURN-Server – [00:10:44]
  • MDN
  • Podlovers Podcast: StudioLink mit Sebastian Reimers
• Moritz: Eure Spenden und Kommentare – [00:14:50]
• Constantin: npx npkill / npm durch pnpm ersetzen – [00:18:24]
  • npx
  • npkill
  • pnpm
• Moritz: RE: git rerere – [00:25:50]
  • https://learngitbranching.js.org/?locale=de_DE
  • git rerere
• Constantin: Windows-Update brickt Laptop, Hardware-Geschraube – [00:28:55]

• Moritz: Vodafone und kein Ende – [00:36:21]

Property der Woche: ::before/::after mit content: open-quote / close-quote – []

• Tweet von Stefan Judis
• Leseempfehlung zu ::before und ::after
• Codepen-Demo

Spam-Spot: Lieber Geliebter – [00:45:55]

• Music: „I’ll Be Right Behind You Josephine“ by Josh W oodward. Free download: http://joshwoodward.com/ (Creative Commons Attribution License)

Tagesthema: Icon-Systeme – [00:50:51]

• 1. Einfache Grafiken – [00:53:32]
• 2. handgemachte (PNG-)Sprites – [01:01:01]
  • CSS Tricks: Sprites (2007)
• 3. Sprites automatisiert – [01:07:01]
  • spritesmith
• 4. Icon Fonts – [01:08:47]
  • fontawesome
  • icomoon
  • FOUT
  • Accessibility-Bedenken
• 5. Einzelne SVGs – [01:13:42]
• 6. SVG sprites mit und – [01:19:32]
  • svgstore sprite generator
  • svgo / SVGOMG
  • CSS Tricks: mit zwei Farben
• 7. SVG sprites mit und href-ID extern – [01:31:49]
  • CSS Tricks: mit externer Referenz
  • MDN
  • xlink href deprecated
  • SVG4Everybody
  • Icon Fonts vs SVG Icons

GeilTeil:

• Constantin: JavaScript counters the hard way – HTTP 203 – [01:40:35]
• Moritz: History of Icons – [01:47:13]

Verabschiedung – [01:49:43]

Kapitel

1. Intro (00:00:05)

2. Begrüßung: Golem-Artikel (00:00:54)

3. Retro: Wo wir sind ist Video - twitch-Experiment (00:04:22)

4. Constantin: WebRTC / STUN- / TURN-Server (00:10:44)

5. Moritz: Eure Spenden und Kommentare (00:14:50)

6. Constantin: npx npkill / npm durch pnpm ersetzen (00:18:24)

7. Moritz: RE: git rerere (00:25:50)

8. Constantin: Windows-Update brickt Laptop, Hardware-Geschraube (00:28:55)

9. Moritz: Vodafone und kein Ende (00:36:21)

10. Property der Woche: content: open-quote / close-quote (00:38:36)

11. Spam-Spot: Lieber Geliebter (00:45:55)

12. Tagesthema: Icon-Systeme (00:50:51)

13. 1. Einfache Grafiken (00:53:32)

14. 2. handgemachte (PNG-)Sprites (01:01:01)

15. 3. Sprites automatisiert (01:07:01)

16. 4. Icon Fonts (01:08:47)

17. 5. Einzelne SVGs (01:13:42)

18. 6. SVG sprites mit und (01:19:32)

use

19. 7. SVG sprites mit und href-ID extern (01:31:49)

symbol

20. GeilTeil Constantin: JavaScript counters the hard way (01:40:35)

21. Moritz: History of Icons (01:47:13)

22. Verabschiedung (01:49:43)