Tales from Web Dev Past - Part 2

Syntax - Tasty Web Development Treats

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Show Notes

03:00 - iFrames

• Sidebar menu
• target

05:42 - JavaScript image hovers

• Dreamweaver
• Photoshop Slice and Select Tool

08:24 - CSS Pie

09:42 - Animated gifs of people and construction

• http://textfiles.com/underconstruction/

11:20 - CSS Zoom 1 / IE CSS Hacks

• Forced IE 7 to redraw floats

13:42 - Layout trends

• 800x600 fixed websites
• 960gs
• Golden Grid
• 12-col grid creators

16:26 - Sprite maps

• Spritecow
• ☠️ Killed icon fonts
  • ☠️ Killed by SVG icons

18:40 - Firebug and Firebug Lite

• Lite was a bookmarklet

20:14 - Image maps / Background gradients

• 1px wide and 2000px tall image to make repeating gradients
• Squidfingers
• Subtle Patterns
• Hero Patterns
• CSS3 Patterns

25:53 - Web rings

27:41 - Glossy buttons

28:09 - Flaming text

• FlamingText.com

30:01 - Marquee tags

• Staggered
• Speed attribute

31:26 - Spacer gifs

34:30 - AngelFire / GeoCities

36:11 - Xanga / LiveJournal

37:29 - Above the fold content

• Abovethefold.fyi

39:36 - Homestar Runner

Links

• Drupal Omega theme
• Syntax 032: Designing, Templating, Inlining and Sending Email
• Mailchimp
• Litmus
• Email on Acid
• Herman Miller Aeron

××× SIIIIICK ××× PIIIICKS ×××

• Scott: New Rustacean Podcast
• Wes: Autonomous Ergo Chair

Shameless Plugs

• Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%!
• Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets