markdown todo.md

Posted 2021-05-05

# Today
## Work
- [ ] Plan/Change pour MEP  preMobile First 
- [ ] Merge optimGzip /wepack optim on secureUI?

- [ ] Redirect htacces Refonte CC
- [ ] Refonte CC Code Review
- [ ] Loadable component Server Side
- [ ] Swagger SecureUI
- [ ] Loader/babelPlugin yamlJsx
- [ ] POC Static Rendering Pupetter vs Raw Node calls
- [ ] Css Grid POC and implementation


## Perso
- [ ] note de frais
- [ ] Paperasse secu
- [ ] Docker postgre Postgraphile / migration bdd adramart
- [ ] Beard Pack

# Todo Now
- FIXES Linting and prettifying
  -  the commit hook to use the proper conf (eslint and prettier) => husky
  -  Update the workflow to configure sublime and vscode

- MAC configuration contact ([e-mail] ) c'est la PO IT de TCS
  => connect to orangeSharing to read the doc

- Test d'intégration : SecureMkt/www
  - 404
  - Modal
  - simulator ASV
  - ga Ko && website fonctionnel

- Loadable component SSR

# Evo 
- Webpack dashboard

# Misc
## Play with
- https://designmodo.com/slides/#design
- https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b

- Prototyping tools
  - https://framer.com/features/components/
  - https://www.flinto.com/

- WebComponents
  - https://codeburst.io/web-components-by-example-part-6-6c4c1225c43a
    - https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda

- Webscrapping
  - https://www.aymen-loukil.com/en/blog-en/google-puppeteer-tutorial-with-examples/
  - https://www.valentinog.com/blog/ui-testing-jest-puppetteer/
  
## Inspiration
### Live style guide
- http://styleguides.io/
- http://rizzo.lonelyplanet.com/styleguide/ui-components/social-buttons
- http://bradfrost.com/blog/post/designing-in-the-open/

## Learning
### https://github.com/30-seconds/30-seconds-of-code#sortedindex
### learna
### Css/Layout
#### FlexBox Grid
- https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/
- https://www.sitepoint.com/creating-css-grid-layouts/
##### Tools
- http://grid.malven.co/


## React Migration

# Quickies
- conf option to avoid multi args command line
  gulp --type dev --src --app secure --http --noLr => gulp --config:secure
  - replace gulp util env by minimist. 
  - One entry point in helpers? --profil vs standard commandline

- Intergate Nodemon for the server

- lightBuild vs EmptyBuild for Ci test option for mkt
  - Allow version.json task only on build

# Socle V2
## Webpack Migrationbpack
- Set dynamic import serverside (FIX ESM / Webpack and babel cohabitation in server.js)
- update page with revision script (Prod)Revision in production mode
- automatic vendor splitting updating pages
- chunk name in manifest and build output instead of 1.js...
- migrating all to dynamic import ( hydrateStandaloneComp, RenderReactPage)
- Fixe all update module to import/Export syntax
  - MbileNav/Header...
    - mediaQueries instead of Viewport?
      - RAF resize listener
      - Component logique in render, avoid mount/unmount
    - Remove DOM and bloodyObservale Deps

- Webpack DevServer FIX
  - hot: true (Should reload page when not able to HRM)
  - Cannot launch www and secureMkt (webpackdevservers/gulp watcher infinite updateloop => rebundle)
  - Doc Workflow Broken see DOCS epic

- Recette checklist
  - update all calls to vendors/ bundle in pages ( simulators, docs etc...)
  - all bundles (convention root directory)

- implement different target bundle (evergreen versus the other)
  - Checkout browserlist conf (browserlist-ga, devmode, browsersupport, multiconfig:cssvsjs)
  
  - fine tune polyfills / feature detection https://www.thebasement.be/working-with-babel-7-and-webpack/

- Webpack bundle visualiser
- update postcss calc
- FIX content tabs and all modules modules migrated from CJS to ES6 import
- Merge paths.js and avoid duplicate path-(www|secure)


## Gulp reWork
- Gulp4?
- which task aree better handled by webpack? vs npm scripting?

## App Data
- Test/ easy to determine data serve for which routes
- Redisign Sources / each part ( jade, markdown, React Components) of the cache is independant, incremental updates
  - data.json
  - md
  - jade
  - react

- Accessible from different Process, Exportable. Rest API?

## Markdown
- define usage and rewrite parser
  - Content per comonent
  - mdjsx-loader/nextJs approch

## UX/UI Enhancement
- modal sucks
- Youtube player
- Social media plugin
- mobileNav (new secure like)
- github smothscroll
  https://github.com/dollarshaveclub/stickybits/blob/master/package.json
  https://github.com/mciastek/sal

- Offline : Udacity/JakeWeba
- [Positionnement et animation svn Responsive] (https://jakearchibald.com/2014/offline-cookbook/)
- [Phone number Optimization](https://css-tricks.com/the-current-state-of-telephone-links/)

## Docs
- React client Side only
- Deployable on Titans
- Catégories:
  - Epiphany Viewer/Maker
  - Component Crud
  - Charte UX/UI
  - Brief Creator
  - Page manifest/Search for visual Comparison
  - Mise en place d'un suivi régulier des performances techniques et utilisateurs du site marketing (1 dashboard par mois)
    - ex Dashboard custom plugger a GA cf(Lab)
  - Showcase Project. Présentation de nos idées => online (Titan) Lab 

## www/secureMkt DevBuild WorkFlow
- Allow to run Both in one command
- Allow to build/deploy All/one
- SSR on demand
- Export static
- Set localhost en https
  - http://www.finalclap.com/faq/472-https-localhost-apache
  - Generate an auto signed certificate
 (certSimple?)

## Continous deployement
- Deal with the cache Akamai vs hash vs htacces
- 
# Story
## FundsManager
- Repasse IE [2]
- Modal mobile [1]
- Make it a real third party lib ( webpack target)



# NTH
- DaisyDIsk fancybox exemple
 Lottie airbnb pour webapp


## Tooling
- https://www.sitepoint.com/javascript-command-line-interface-cli-node-js/

# Learning
- Lin Clark (Cartoon learning)
- https://egghead.io/lessons/javascript-redux-updating-data-on-the-server?course=building-react-applications-with-idiomatic-redux#/tab-transcript
- https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

# heberger soi meme
- Parse.com / Backendless ==>
-? surge vs gh pages