rockchalkwushock / working-with-glamorous

Understanding how to use dynamic styles & animations.

working-with-glamorous

Understanding how to use dynamic styles & animations.

Notes

1. Don't need babel-jest it's included under the hood with jest.
2. Refer to note in .babelrc about test environment.
3. Don't need to specific NODE_ENV=test jest does this by default.
4. There are a few properties that must be integers & not string values. (i.e. fontWeight, opacity, zIndex)
5. Follow animation notes here & here for using glamor & glamorous.
6. When using content cannot write content: ''; this is considered invalid because you are sending nothing as a value so you must write content: '""'; to pass an empty string that will take on the properties listed in ::before & ::after.

Todo

• Recreate the dynamic search bar found here using glamorous.
• Write tests for the search bar. HOCs are NOT tested 😥 need to look up how to achieve this

working-with-glamorous's Issues

Build Display for Data from API

Maybe use react-overdrive or react-motion?

Documentation

Todo

• Internal docs
• External docs

README

• Link code used for <SearchBar />.
• Credit author of original code.
• Link to next, glamorous, glamorous-website.

Horrific Re-Rendering of SearchBar

Problem:

The component onClick is rendering 3 different times, probably due to the props being passed to the children. Need to investigate and clean this up for performance.

Also can see the action is being fired with no query which does lead to data being called from the api. That means the form is somehow being submitted even though I'm not wanting to submit. Possibly an issue with the button type. Need to investigate this as well.

Final Stuff

Todo

• Cleanup styling.
• Deploy to Zeit.
• Scale the website ???
• Fork glamorous, update README example section, open PR.
• Write Medium article (add to my website as well)
• Screencast ????

Cleanup <SearchBar /> with recompose

Likely will need to use withHandlers & withPropsOnChange; but not positive.

Testing

Todo

• Make sure all redux code is covered.
• Make sure all transitions are covered for <SearchBar /> animation/transition effects.
• Make sure all functionality of the <SearchBar /> is covered.