jsdevkr / gitcodeshare.com Goto Github PK

Chrome Extension

• Shared experience creating 'Chrome Extension' basic tutorials.(Myungjin)
• Explained the contents of the manifest.json file.(Chris)
• Explained the structure of the background.js.(Chris)
• Shared experience creating facebook pages modification example use 'Chrome Extension'.(Chris)

Typescript

• Explained the difference between Android and Typescript.(songi)
• keyword 'generic' in Typescript.(songi)

React

• Explained what should pay attention to when using React.(Jongho)
• Explained the difference between MobX and Redux.(Jongho)

Etc.

• We wonder why use MobX, mobx state tree?'(all)
• We finally discussed to the features we will develop. but, we decided to proceed after the next offline meeting to details.(all)

good article about mobX

• Continue studying typescipt & mobx

• create, update, delete Gist API

There is an issue when HTTP method is POST passport doesn't call serialize & deserialize (req.user is undefined).
I googled, but I didn't find a solution yet.

Here is my code

server.use(cookieParser(process.env.COOKIE_SECRET));
    server.use(bodyParser.json());
    server.use(bodyParser.urlencoded({ extended: false }));
    server.use(
      session({
        genid: function() {
          return uuid();
        },
        store: new RedisStore({
          client: client,
          logErrors: true,
        }),
        secret: process.env.SESSION_SECRET,
        saveUninitialized: false,
        resave: false,
        cookie: {
          signed: true,
          maxAge: 1000 * 60 * 60 * 4,
          httpOnly: true,
        },
      }),
    );

const postGist = (req: Request, res: Response, next: NextFunction) => {
  request.post(
    `https://api.github.com/gists`,
    {
      json: true,
      body: JSON.stringify(req.body),
      headers: {
        Authorization: `token ${req.user.accessToken}`, // TypeError: Cannot read property 'accessToken' of undefined
        'Content-Type': 'application/json; charset=utf-8',
        'User-Agent': `${name}/${version}`,
      },
      withCredentials: true,
    },
    (err, response, body) => {
      if (err) {
        return next(err);
      }
      res.send(body);
    },
  );
};

• Study typescript grammar
• Using router in express
• Read ECMAScript6 reference data

References
http://es6-features.org/

Today I Learned

• bought a new laptop (windows => mac)
• set new development environment
• learned about UNIX

Next planned

• frontend team meeting

I saw that chrome extensions should be in one directory. Is this true? If it true, Where should we store Chrome extensions?

How about an octotree's structure? In octotree case, octotree/src/config/chrome/ has octotree chrome extension code stored.

I read typescript handbook especially module part!!!!!!
because I want to know about this !

• Read github Development Guides
• try add gist API

Today, I found nice site for developing backend oauth2.0 using passport
passport-github repository
passport tutorial

Request

@aeei @gimdongwoo @thomasJang
I have some question!
Do we have to store user detail into database?
or just oauth api call to autenticate?

• Learning the express module in Node.js
• Using Orientdb to build a web application

Originally planned

React tutorial

• Props and state in react

• Life cycle in react

• Data rendering, add, delete in component

• Why state immutability is critical in react?

Typescript tutorial

• Variable type, return type of typescript

• Class in typescript

Setting

• make personal repo for study and commit code

Next planned

• Data update in react
• typescript interface
• make personal github repo for study

• Watch the video lecture about Typescript (For beginners, Korean)
• Reference document

today

• Analyze project structure for add gist API
• Add gistHandler in the forked repo (gist API)
• Study passport

tomorrow

• Study passport
• Add Github OAuth using passport

Need $5.00 registration fee to register the chrome web store developer.

I think it's good to make official google account like [email protected] and register that account.

Then we can use this account for our project official.

next js has lower barrier to entry than I thought. though I don't know well about SSR, it was not hard to understand. It was interesting that the structure was forced unlike create react app. If you haven't already seen it, I hope you'll take a look. our project is almost like nextjs-express-startkit.

Chrome extension popup file must be a static HTML file.

So I think we have two options.

1. Generate popup.html file through like next export command and include in chrome extension folder.

2. Use iframe tag like <iframe src="{ server_url }/popup"> to also server-side render for popup.
   (Ref : https://stackoverflow.com/questions/40608175/render-chrome-extension-popup-ui-dynamically)

Which one is the better solution?

learn React at Youtube channel(velopert)

today saw React for beginner.

also, learn to webpack contents in webpack docs.

today's learning time: 1hr
total learning time: 3hr

Originally planned

React

• state update, delete
• view examples of ajax http request

Typescript

• interface

  - interface basic
  - duck typing
  - interface optional props => ? behind interface props
  

• generic

  - prevent runtime type error
  - And make type extend scalable at the same time
  

class Parent {
  data:any[];
  
  constructor(){
  	this.data = [];    
  }
  
  push(item) {
  	this.data.push(item);
  }
}

const p = new Parent();
p.push(1);
p.push('1');

p.data = p.data.map(v => v.toFixed()); // type error    

// extend Number type
class Child extends Parent {
  push(item: number) {
    super.push(item);
  }
}

const c = new Child();
c.push(1);
c.push('1');

c.data = c.data.map(v => v.toFixed()); // clean

// but at various type ?
// use generic

class Parent<T> {
  protected data: Array<T> = [];

  push(item) {
    this.data.push(item);
  }
}

const numArr = new Parent<number>();
numArr.push(1);
numArr.push('1') // compile error

const objArr = new Parent<{num: number, str: string}>();
objArr.push({num: '1', str: 1}) // compile error

To study more

• do stop just take notes, and move to code
• more on typescript
• javascript polymorphism

[Study] Read article for typescript, React, MobX

Read follow this:

• Typescript handbook for korean
• Typescript, React lecture video at Egghead
• MobX documentation

We should basically know about React and Typescripts. I have looked at the above for this.

also, I have not used MobX before. because of I looked at the MobX documentation.

today's learning time: 1hr
total learning time: 1hr

suggest below two lib for more convenient and systematic ours opensource project gitCodeShare!

• travis ci (https://travis-ci.org/)

easliy sync ours github project and test code in convenient.
for example build error, lint error etc... 

• commitlint(https://github.com/marionebl/commitlint)

commitlint is Lint commit messages.  if use this lib then commit message display According to purpose
for example test: blah blah, ci: blah blah, docs: blah blah 

Read the JavaScript tutorial

• destructuring assignment
• arrow function expression
• template literals

Read the React tutorial

• input state management
• Dealing with arrays

Create a To-Do List App with basic functionality
Let's continue developing along with studying React.

[Question] How to store access token?

1. To call gist API, I need access token.
2. Access Token should not be exposed.

• But We don't have database.

So, I thought...

1. Get access token every time to call gist API

• I think this is very ineffective

2. Store in cookie with it signed

• googled with this issue, there is another option that sessionStorage. But client side store is very unsafe

3. Use passport session

• but I'm not sure how safe it is.

4. Use database...

Which way is the best? or something else?

cc. @gimdongwoo , @thomasJang , @umanking , @Parkkkkk

• read typescript handbook!

I'v tried to apply mobx in react todo application project, but jsx is not familiar to me.
So I expect it'll take a lot of time.
Maybe I think I can try to appling typescript in Mobx + react application in next week.

If use pyenv and don't select any python, you facing this error even though you installed python in the system. I think it is to be a related with node-gyp.

gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /Users/jonghojeong/.pyenv/shims/python2 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack pyenv: python2: command not found
gyp ERR! stack 
gyp ERR! stack The `python2' command exists in these Python versions:
gyp ERR! stack   2.7.6
gyp ERR! stack   2.7.6/envs/test
gyp ERR! stack   2.7.8
gyp ERR! stack   2.7.8/envs/dietnote_server
gyp ERR! stack   dietnote_server
gyp ERR! stack   test
gyp ERR! stack 
gyp ERR! stack 
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:275:12)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at maybeClose (internal/child_process.js:925:16)
gyp ERR! stack     at Socket.stream.socket.on (internal/child_process.js:346:11)
gyp ERR! stack     at emitOne (events.js:116:13)
gyp ERR! stack     at Socket.emit (events.js:211:7)
gyp ERR! stack     at Pipe._handle.close [as _onclose] (net.js:567:12)
gyp ERR! System Darwin 17.7.0
gyp ERR! command "/usr/local/bin/node" "/Users/jonghojeong/source/gitCodeShare.com/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/jonghojeong/source/gitCodeShare.com/node_modules/node-sass
gyp ERR! node -v v8.10.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 

I solved this problem through select python version in pyenv like this.

pyenv shell "PYTHON VERSION YOU WANT"

Code

• clone & took a look at initial code

Study

• typescript handbook

• passport (50%)
• express-session

Boilerplate

• https://github.com/Microsoft/TypeScript-Node-Starter
• https://github.com/mjhea0/passport-social-auth/blob/master/server/models/user.js

learn Typescript at Typescript Handbook for korean

also, Today My Team - 'Chrome extension' made an online meeting on 10 pm. - We shared our thoughts on Chrome Extensions.

I join to Typescript study group in my community!

this is my study group

today's learning time: 1hr
total learning time: 4hr

study mobx

• read document

• watched video tutorials

• At the first meeting, we shared what we studied.
• @gimdongwoo mentor had explained an overview of the project structure.

React

• practice by code (state CRUD)

Typescript

• learn react + typescript

• React API documents
• Make TODO app with React [40%]

• Watch the video lecture about Typescript
  (need to study more about the concepts of Class and Generic)
• Let's practice Migrating from JavaScript to TypeScript in a project To-Do List App
  (setting only on local)

• Connecting servers with typescript [50%]
• Read the gist API
• typescript grammar study

learn to chrome extension

Read follow this:

Getting Started Tutorial to chrome extension

and write example chrome-extension follow this:

1. write to html code for base(hello.html).
2. Add basically icon.
3. write manifest.json like this:

{
    "author": "rayleigh",
    "manifest_version": 2,
    "locale": "en ",
    "name": "extension tutorial",
    "short_name": "ex tuto",
    "description": "extension tutorial for gitcodeshare",
    "version": "0.0.1",
    "version_name": "preview",
    "browser_action": {
        "default_icon": "hello extension.png",
        "default_popup": "hello.html"
    },
    "icons": {
        "128": "hello extension.png"
    },
    "permissions": [
        "activeTab", "http://*/*", "https://*/*"
    ]
}

4. move 'chrome://extensions ' in chrome address bar.
5. check 'developer mode'.
6. open Directory with files to Click 'Load unpacked'(All files should be in one place. - Really?).

I can't proceed because we need to register as a developer at chrome extension.
So we need a developer registration to chrome extension.

today's learning time: 1hr
total learning time: 2hr

• Github OAuth using passport-github2
• express-session

• study typescript
• Create a CRUD with Node.js

If there is a key should not be exposed, how can I management and shared with developers?

If I registered key into .gitignore file, I cannot share the key with developers.
In the opposite case, the key can be exposed.

How should I do?

• Watch the video lecture about React.js (For beginners, Korean)
• Let's build To-Do List App along with studying React. (personal repository)

This week

• stuck in the passport.js
• [problem] passport doesn’t verify callback function never called
• [problem] Also, serialize/deserialize is not working

Next week

• study puppeteer

I think labels are a great tool for managing issues efficiently.

• Setting passport by GithubStrategy (handlers/passport.ts)
• Implement login/logout with redis #51
• Solved call passport.deserializeUser function many times

server.use(function(req, res, next) {
      if (req.url.match('/_next/*') || req.url.match('/static/*')) {
        next();
      } else {
        passport.session()(req, res, next);
      }
    });

• gist API (handlers/gist.ts)
  • get all/single list,
  • create/update/delete

list

• Using Express with TypeScript
• Made Simple REST API

References
https://dev.to/briandgls/using-typescript-with-express--e0k

• Read mobx api document ~ maps
• Studied react styled component with others code

So we can set Assignees, Label, Projects, etc. on the right side. ->

But now we can't.

Request @gimdongwoo @thomasJang

• typescript
• ES6
• dev setting
  ref:https://poiemaweb.com/

This Week

• Project Structuring (models, controllers, config)
• Extract Gist API (reference)
• To be contributors
• Develop sample-project

Next Week

• Analyze puppeteer, carbon
• Develop Gist API

Gist API Design

Request

Create OAuth app, we need to get client_id client_secret
cc. @gimdongwoo @thomasJang

Front end Team Meeting

Today we did

• Analyzed project default structure
• Studied about AntDesign
• Defined component and pages we need
  1. Conpoment
     • Use antdesign default(Layout, Header, Footer, Menus, Card, Modal ...etc)
     • Contributor thumbnail
     • Code editor
     • Login modal (page ? or modal)
  2. Page
     • index
     • contributors
     • feature
     • code view page

Planning to next offline meeting

• Basic Markup and styling
• Code will merge on this repo.
• Study about mobx elements and API

Question

1. We need clear standard about stylsheet file division. For example, We are considering that make each stylesheet file for each component or define style by styled-component in component > [component].js file. which is right? is there more efficient way or any standard? Could we define our own standard?
2. Please confirm for components and pages we divided. @thomasJang @gimdongwoo

https://github.com/orbitbot/chrome-extensions-examples