View on GitHub

reading-notes

CodeFellows Class Reading Notes

What Google Learned From Its Quest to Build the Perfect Team

The main takeaway from this article is that there is no magic formula to building the perfect team, at least as far as choosing team members goes. Rather, teams are successful when there is a sense of psychological safety within the group. This means that members feel confidant that they can contribute to group discussions and let their guards down personally without recrimination. While this means that it can be difficult to assemble a ‘perfect team’, the good news is that existing teams can be made more content and more effective by consciously seeking to create a psychologically safe space within the group.


Transformations

The transform property allows for alternative techniques to size, position, and change elements

This page details Transform syntax, 2D & 3D options, as well as several other options available and notes on how to combine transforms.


Transitions & Animations

Transitions allow one to alter the appearance and behavior of an element whenever a state change occurs (:hover, :active, etc)

Animations allow the appearance and behavior of an element to be altered in multiple keyframes

Both of these properties allow front end devs to manage behaviors that previously would have required JavaScript or Flash


8 Simple Transitions

  1. Fade in
  2. Change color
  3. Grow / Shrink
  4. Rotate
  5. Square => Circle
  6. 3D Shadow
  7. Swing
  8. Inset Border

6 Buttons Animated

Displays 3 buttons which can be clicked to pause their animation and change their appearance. The necessary HTML, CSS and JavaScript is provided.


CSS3 Animations: Keyframes

Displays an animation of a ball dropping and bouncing, along with the necessary HTML and CSS. No JavaScript file required, though there is a <script> tag in the HTML


404

Displays an animation of the numbers 404 changing in both size and position, along with the necessary HTML (minimal) and CSS (primary)


Pure CSS Bounce Animation

Displays a ball bouncing, distorting on impact, changing shape, rotating, and then ‘falling’ off the bottom of the display. Necessary HTML and CSS included.


Home