Skip to main content

weekly-engineering-meeting-4-4-translations-react-components-start-bem-font-awesome-qa-workflow

Weekly engineering meeting 4 4: Translations, React components start, BEM, font awesome, QA workflow​

Translations (Praneeta):

// Currently available on files: "app/views/apps/_settingsTemplate.html.haml" "app/views/admin/powrzilla.html.haml"

//If you need it - add to your html file under :javascript window.SIMPLE_COPIES_DICTIONARY = #{ raw simple_copies_dictionary.to_json }

//Examples: POWr.simpleCopies('general.cancel') POWr.simpleCopies('components.fileupload_modal.select_file') POWr.simpleCopies(`general.upgrade_to${premimumStatus}`)

//Namespacing general - "Words/Phrases which are used throughout the site eg: Upgrade" components - "Used in reusable components - eg components.color_picker - used throughout all apps, powrzilla and possibly more places" "<page_name/app_name>" - "Specifically used on that page or app" - eg: home.sign_up => "Sign up Free" vs 'components.app_nav.sign_up' => "Sign up to save app"

/ We can change each with out affecting other pages. Avoid creating new keys unless necessary. reusable is great - do it as much as possible, but namespacing is really useful for good context. /

//Future (Interpolation) - Please note we cannot interpolate right now so you need to be careful about this upgrade_to_upgrade_status: 'Upgrade to #{upgrade_status}'

POWr.simpleCopies('general.upgrade_to_upgrade_status', {upgrade_status: upgrade_status}) => "Upgrade to Pro"

//Current workaround

upgrade_to_premium: 'Upgrade to premium' upgrade_to_pro: 'Upgrade to pro' upgrade_to_business: 'Upgrade to business'

POWr.simpleCopies(general.upgrade_to_${premimumStatus}) => "Upgrade to Pro"

//Behind the hood "app/helpers/simple_copy_helper.rb" - Need to tell the helper - 'hey! my page needs these modules - please load' / The idea is to avoid dumping unnecessary translations into SIMPLE_COPIES_DICTIONARY /

"app/models/simple_copy.rb" - Will pull from db/cache the translation for each string. If not already in db, will create and cache it.

React Modules (Praneeta): **BIG THANKS TO BRENT FOR TAKING THE INITIATIVE TO WRITE THIS** **READ IT*** https://github.com/superpowr/powr/wiki/Creating-React-Components-for-POWr-Settings

//Currently available components: Popover, CardSelectm ColorPicker

//Helper components: SettingsComponentWrapper - baseline for all components in settings panel - will bring in upgrade popover, star etc for free :D Upgrade popover

//WIP - (mainly on powrzilla branch) NumberInput(not on powrzilla), File/Image Upload, Modal, Tabs

Class names (Kelsey) https://en.bem.info/methodology/quick-start/ Naming conventions - BEM methodology Block elements modifier - minimizing need for nesting. Modular and scalable. powrzilla-tutorial - parent powrzilla-tutorialcontent - all children is-active, is-animating instead instead of active or powrzilla-tutorial—is-active js-my-div - to indicate js is using that to avoid issues of loosing fucntionality by removing a class

//Move with caution ios changing old stuff but everything going forward should use this. Suggestion from Puru - https://storybook.js.org/ Create a style guide for you.

Font awesome:

Dashboard - will cause Dashboard to show in font awesome font and not POWr fonts. Right: ``` i.fa.fa-da Dashboard ``` Wrong: ``` i.fa.fa-da Dashboard ```

QA Workflow (Ben, Pilar, Santiago)

Ready for Testing - What is ready for test. In Testing - What Santiago is currently testing. May add "Brought back to Engineering" - If test failed then back to engg

Avoid using QA testing board but a good example to get there. Use trello for test cases and standardized test cases. Create templates for basic test cases. Make a trello card, click checklist, will show list of templates (will be namespaced) Will bring a baseline test case, and then add more. Use spreadsheets for larger things - will also be an item in checklist. Santiago will maintain the spreadsheets. Automated tests will be written by Santiago, signin, P1 apps. Get all test scope defined in 1 card. If larger project - create a new bugs (and may be a bug board)

Closing card make them not accessible in future, use the done column. Closing a board will archive tickets - possible "POWr History board" - Create a new project based done column and more entire done list there.