2018/Baltimore/prettywebsites
Pretty Websites was a session at IndieWebCamp Baltimore 2018.
Notes archived from: https://etherpad.indieweb.org/prettywebsites
IndieWebCamp Baltimore 2018
Session: Pretty Websites
When: 2018-01-20 16:00
Participants
- derekfields.is
Eddie Hinkle- russelheimlich.com
- Matt Griffin
Notes
derekfields.is: if you hover over the profile photo, you'll see the rounded borders shift around.
codrops contains some different styles that you can do to your websites: https://tympanus.net/codrops/ Some examples we looked at:
- clip-paths:
- Glitch Effects: https://tympanus.net/codrops/2017/12/21/css-glitch-effect/
- Animated SVGs: https://tympanus.net/codrops/2017/11/15/animated-svg-frame-slideshow/
- https://css-tricks.com/gallery/
- nclud.com --> a DC-based creative agency
Derek shared some research regarding performance hits for doing this work -- things have changed given modern browser performance:
- CSS animations can be less CPU intensive rather than, say, js animation: developers.google.com/
- Csstriggers.com - helps to define what things get triggered with different css properties
- codepen.io --> has some great resources to draw from; Eddie shared that he solved his confetti for new years feature from inspecting some ideas at codepen.io
- wolfenstein3D in email example from codepen: https://codepen.io/M_J_Robbins/pen/XpQZOG
Cloth demo https://codepen.io/thomcc/pen/NGQpxv Tearable cloth demo https://codepen.io/dissimulate/pen/KrAwx
https://aframe.io/ - framework for making web-based openGL 3d and VR experiences
Discussing the differences between CSS and JavaScript with something like https://p5js.org
Great routes to get started with new approaches to CSS3 :
- https://www.w3schools.com/css/
- looking through examples and attempting to recreate them from scratch
Discussed the benfits of simple effects, like the languge transition on GitHub Repo pages: https://github.com/brentsimmons/Evergreen
Russell shared a simple elegant use of CSS3 - theincline.com Eddie shared a few light touches in Michael Bishop's page: https://miklb.com/
Debated the importance of Augmented Reality/Virtual Reality versus the Web. One important consideration being the difference between raising a device to view something and just seeing something like through a google glass like device.