Team Sunshine (Babel) [2018]

Twitter: @MarinaGJCho, sujinleeme
Starts On: July 01, 2018
Finishes On: September 30, 2018
Last Activity: September 14, 2018

Confirmed

Dohyung Ahn

Not confirmed yet

Hyeonsu Lee

Confirmed

Seongjun Kim

Confirmed

Mentors

Henry Zhu

Supervisors

Ana Sofia Pinho

Conferences

ActivitiesAtom Feed

September 14, 2018

Day 45 (9/14)
Team Sunshine (Babel) [2018] — at September 14, 2018 15:00 UTC
Finally Sujin finished three functions flattenObj, unflatten, removeProp to nested javascript Object and then updated again. Tomorrow, it can be controlled on toggled mouse events.

Day 45 (9/13)
Team Sunshine (Babel) [2018] — at September 14, 2018 14:58 UTC
Sujin is making three functions to handle various ASP options
- flattenObj: Make flatten nested Objects
- unflatten: Make unflatten nested Objects
- removeProp: Remove a property from nested javascript objects any level deep

September 12, 2018

Day 44 (9/12)
Team Sunshine (Babel) [2018] — at September 12, 2018 14:38 UTC
- Monthly call with Anna, Sujin. Gyujin, Seongyun, Lance, and Henry.
- Read Replacing switch statements with Object literals.
- Quite challenging for me to remove a property from nested javascript Object and then updated again.

Day 43 (9/11)
Team Sunshine (Babel) [2018] — at September 12, 2018 14:36 UTC
Make to control state in AST setting option
Later, think to responsive view.

Day 43 (9/10)
Team Sunshine (Babel) [2018] — at September 12, 2018 14:35 UTC
Making UI(css) based on repl setting option

Day 42 (9/7)
Team Sunshine (Babel) [2018] — at September 12, 2018 12:27 UTC
Sujin refactored previous code.

Day 41(9/6)
Team Sunshine (Babel) [2018] — at September 12, 2018 08:45 UTC
Sujin created AST Panels and options components and checked previous settings options structure and code-lines.

September 11, 2018

Day 40 (9/5)
Team Sunshine (Babel) [2018] — at September 11, 2018 10:56 UTC
Hyeon-su, a coach visited us and we analyzed the ASTexplorer code in GitHub together.

Day 39
Team Sunshine (Babel) [2018] — at September 11, 2018 10:55 UTC
Sujin had a vacation from 8/29~9/2

August 29, 2018

Day 38
Team Sunshine (Babel) [2018] — at August 29, 2018 14:28 UTC
- Weekly Video Call with Anna! It was so nice to see her back!
- One of our coaches, Hyeonsu helped us understand the code behind the focus feature in AST Explorer.
- Fixed AST output division scroll
- Set default collapse option for initialize time performance

Day 37
Team Sunshine (Babel) [2018] — at August 29, 2018 14:24 UTC
- Fixed duplicated Repl states regarding AST
- Discussed which features could be added to AST output with mentors

August 27, 2018

Day 36 : Working on New Repl feature: AST Output!
Team Sunshine (Babel) [2018] — at August 27, 2018 13:49 UTC
We started implementing AST Output Tree in Repl.
* Researched existing react libraries to show jsonin Tree view: react-json-view and react-json-tree.
* Tested 'react-json-view' first since it supports onClick prop (need this to show matching code) and It worked fine!

August 24, 2018

Day 35
Team Sunshine (Babel) [2018] — at August 24, 2018 11:49 UTC
We are still studying @babel/core code 🧐
TIL: In Github, you can't use the following wildcard characters as part of your search query:. , : ; / \ ' " = * ! ? # $ & + ^ | ~ < > ( ) { } [ ]`. The search will simply ignore these symbols. 😂

Day 34
Team Sunshine (Babel) [2018] — at August 24, 2018 11:39 UTC
We studied @babel/core , @babel/types to get the process how plugins are treated during compile

August 22, 2018

Day 33
Team Sunshine (Babel) [2018] — at August 22, 2018 13:01 UTC
📞We had a weekly video call with Saptak :) (Ana is on Vacation 🏝)
👀Researching what features other Repls and AST Explorers have
🗓Discussing on weekly schedule to meet coaches on a regular basis

Day 32 : Time Travel Merged!
Team Sunshine (Babel) [2018] — at August 22, 2018 04:17 UTC
Based on Brian's suggestions, we fixed some bugs and css issues!
Finally time travel is integrated to Repl! We left a significant mark.
https://babeljs.io/repl

August 20, 2018

Day 31:
Team Sunshine (Babel) [2018] — at August 20, 2018 16:06 UTC
Sujin is working on time travel slider css
Gyujin worked on plugin names for Time Travel

August 17, 2018

Day 30:
Team Sunshine (Babel) [2018] — at August 17, 2018 11:18 UTC
Sujin attended python data science tutorial day at PyConKR. She is invited as a keynote speaker at PyConKR 2018.
Gyujin worked on finding plugin names for Repl

DAY29: 8/16
Team Sunshine (Babel) [2018] — at August 17, 2018 11:16 UTC
We have a phone call with Ana
Make the list of todo

August 13, 2018

DAY28:
Team Sunshine (Babel) [2018] — at August 13, 2018 16:52 UTC
Sujin modified RGSoC blog post.

Gyujin worked to resolve IE11 polyfill issue: https://github.com/babel/website/pull/1748

August 08, 2018

DAY27:
Team Sunshine (Babel) [2018] — at August 8, 2018 15:31 UTC
Sujin did
* Weekly meeting with Ana
* On the way to change url in REPL, I found babili-standalone will be rename to babel-minify-standalone
* Brain merged recent PR to hide a big footer and layout changes on REPL.
* changed https://babeljs.io/en/repl#?babili=true to https://babeljs.io/en/repl#?minify=true and add a same comment, //TODO switch to babel-minify-standalone. , next to the code line where it needs to be changed when babel-minify-standalone is ready to apply. (#1744)

Gyujin took a day off since she was not feeling well.

August 07, 2018

DAY26: First major setback 😢
Team Sunshine (Babel) [2018] — at August 7, 2018 14:29 UTC
Sujin is working on adding Repl option to toggle Time Travel View :)
Gyujin is sad and ashamed cause she found out that she's been working on intergrating Sandpack based on the wrong PR(outdated) 😭However she learned a lot about code sandbox codebase 😂
We joined the RGSoC Remote meet up and talked about how to learn new things as engineers!

DAY25 : WIP
Team Sunshine (Babel) [2018] — at August 7, 2018 14:28 UTC
Sujin is working on two minor issues
* minify option in url should be changed to https://babeljs.io/en/repl#?minify=true not https://babeljs.io/en/repl#?babili=true.
* add time travel check box and it should be updated in url.

August 03, 2018

DAY24 : Remind CoC / Compliments!
Team Sunshine (Babel) [2018] — at August 3, 2018 14:33 UTC
Finally Sujin sent PR! : https://github.com/babel/website/pull/1740. 💕
We had a monthly call with Ana, Brain, June, Hyunsu, and Joeun. Ana emphasized the importance of CoC and recommended an article, Unlearning toxic behaviors in a code review culture by Sandya Sankarram. We learned a lot to think about Open Source Culture and Open minded communication :)

DAY23 : Finding solutions!
Team Sunshine (Babel) [2018] — at August 3, 2018 14:30 UTC
Sujin is working on :
Sujin tried two things; but I couldn’t solve based on checking current url.
1. Can’t access window.location.pathname object in pages/en/repl
2. Can’t access ReactDOM.findDOMNode and apply style inside componentDidMount() method in pages/en/repl
ReactDOM.findDOMNode(document.getElementById("footer")).style.display="none";
However I couldn't understand why it happen actually and I think after complied docusaurus page component, then child components go in to.
And… finally, She got a clue. She created a new file, /static/css/hide-footer.css and this path is added in styles array and it works.
const styles = ["https://unpkg.com/codemirror@5.30.0/lib/codemirror.css", "/static/css/hide-footer.css"];

Gyujin is
Continuing refactoring Repl Options with Sandpack and Learning about many options Babel has.

August 01, 2018

DAY 22 ☀️ : Going to next step
Team Sunshine (Babel) [2018] — at August 1, 2018 13:39 UTC
Sujin is working on
- Hide the footer on the repl; talked with Brain
- My approach will be like this way; Footer.js is a global config file of Docusaurus. Therefore parsing current url firstly and if url is /repl, hide Footer component with condition.

- Need to fix css; the bottom line of version tab in left AccordionTab is hidden and it should be shown, not splitted.

Gyujin is
Continuing refactoring Repl Options with Sandpack and Learning about many options Babel has.

July 31, 2018

DAY 21 ☀️ : Going to next step
Team Sunshine (Babel) [2018] — at July 31, 2018 14:21 UTC
Sujin
* Check old AST PR(not merged)
* In babel 6.x, flow & typescript presets don’t exist, they were added in 7.x betas.
* Read blog article regarding AST; Abstract syntax trees on Javascript by Juan Picado

Gyujin
Refactoring Repl Options with Sanpack

July 30, 2018

DAY 20 ☀️ : More issues?
Team Sunshine (Babel) [2018] — at July 30, 2018 17:23 UTC
Looking issues in the below and ask to mentor for future work
* #1311 Replace babili with babel-minify
* add more preset on Repl options : ["flow”, “typescript”[(https://github.com/babel/website/blob/master/js/repl/ReplOptions.js#L34)
* Learned how to set eslint.

DAY 19 ☀️ : The first lightning talk about RGSoC
Team Sunshine (Babel) [2018] — at July 30, 2018 17:21 UTC
We attended seoul.js meetup and had a short talk about RGSoC and our project.

July 27, 2018

DAY 18 ☀️ : Fix, Fix!
Team Sunshine (Babel) [2018] — at July 27, 2018 03:08 UTC
Sujin fixed a issue; now when mouse over event on every slide, the size of code is updated.
On the way working for babel repl, Sujin added a new feature, the size in bytes of the code on babel-time-travel as same as like REPL and PR was accepted!

July 25, 2018

DAY 17 ☀️ : Women Who Code Meetup!
Team Sunshine (Babel) [2018] — at July 25, 2018 15:11 UTC
We joined Women Who Code Seoul Meet-up and introduced RGSoC and Babel project .
Gyujin is implementing react-sandpack to current master.

DAY 16 ☀️ : First Code Review!
Team Sunshine (Babel) [2018] — at July 25, 2018 06:05 UTC
Do-hyung, a coach finished our code review for time-travel ui.
We checked babel-handbook integration PR on https://github.com/babel/website/issues/1628
We are working on Replace babili with babel-minify https://github.com/babel/website/issues/1311

July 23, 2018

Day 15: Weekly Meeting with all coaches! ☀️
Team Sunshine (Babel) [2018] — at July 23, 2018 14:26 UTC
- We presented our work to all coaches about our works for last two weeks.
- We had a great dinner with coaches and they delivered many good works!

July 20, 2018

Day 14 : Continuing Making Time Travel UI☀️
Team Sunshine (Babel) [2018] — at July 20, 2018 08:17 UTC
- Sujin Made Time Travel UI
- Gyujin is still reviewing codesandbox's code

July 18, 2018

Day 13 : Making Time Travel UI☀️
Team Sunshine (Babel) [2018] — at July 18, 2018 17:10 UTC
*We had weekly video call with Ana, our supervisor.
* We are making sliders now!
* Reviewing codesandbox's code
* Completed to make <div/> boxes for babel-time-travel sliders UI and applied mouseOver/Out hover event.
* Finally summited First Blog Post PR!

July 17, 2018

Day 12: Dive into Time Travel ☀️
Team Sunshine (Babel) [2018] — at July 17, 2018 14:03 UTC
- Implemented process for getting transitions array: diff
- Updated dependencies in babel-time-travel : PR
- TIL: wrapPluginVisitorMethod in babel.transform() options
  - An optional callback that can be used to wrap visitor methods. This is useful for things like introspection, and not really needed for implementing anything. Called as wrapPluginVisitorMethod(pluginAlias, visitorType, callback). Callback is required to be called in method to actually transform code with this and arguments 😊

Day 11: Super hot summer! ☀️
Team Sunshine (Babel) [2018] — at July 17, 2018 02:39 UTC
TODAY
* Ana, a supervisor helped us to correct English error on our blog post. Almost ready to summit.
* We made list of conferences where we want to go after RGSoC.
* Tried to fix conflicts on vue-loader /w babel 7 & webpack in babel-time-travel. (#PR3)
* Start working on <TimeTravelView/> component in REPL.

July 13, 2018

Day 10: First PR! ☀️
Team Sunshine (Babel) [2018] — at July 13, 2018 16:18 UTC
- Gyujin made First PR: fixed all flow errors and linted scripts for babel/website before adding TimeTravel Component
- Sujin updated dependencies in babel-time-travel
  - BabiliPlugin to MinifyPlugin
  - WIP: Webpack 2 to Webpack 4
  - WIP: Update webpack.config

July 12, 2018

Day 9: Exploring the core of babel-time-travel ☀️
Team Sunshine (Babel) [2018] — at July 12, 2018 18:53 UTC
TODAY
* Installed babel-time-travel in local and reviewed babel-worker.js, the main heart of this project. We did console.log() and got babel transformed arrays! Simply awesome!
* Deployed cloned babel-time-traveler app on netlify.
* Gyujin is catching flow errors in babel website and preparing PR.
* Sungjoon, our coach visited us and we discussed UI improvements based on babel-time-traveler. Sujin suggests new feature minimap, a preview of the full source code like atom or vscode editor and Sungjoon will guide us atom-minimap.

TODO
* Integrate gray footer navigators in babel-time-traveler in current REPL.

July 11, 2018

Day 8: Getting to know babel-time-travel ☀️
Team Sunshine (Babel) [2018] — at July 11, 2018 18:09 UTC
TODAY
* Today, we had two calls; with Ana, a supervisor, and Henry, Brain, and lves, mentors.
* Our mentors set project planning and goals during RGSoC in more details.
* Currently, Ives and Brian are working for Sandpack PR to REPL and it is going to be integrated codesandbox even a blocker.
* The final goal would be to show a different view of output code: AST, output code, or time-travel which is a tool exploring various babel presets at once.

TODO
* Review code of current babel-time-travel from now on.
* Check console.log() the output, use as hardcoded data.
* After integrated, we can think about designing new UI’s.

Day 7: New REPL editor, sandpack ☀️
Team Sunshine (Babel) [2018] — at July 11, 2018 17:53 UTC
- Writing first team introduction blog post
- We tried to fix the issue on sandpack to REPL .
- Reviewed babel handbook and noticed that Korean translation outdated.
- Learned ES6 generator.

July 09, 2018

Day 6: Tested translation setup for babel website ☀️
Team Sunshine (Babel) [2018] — at July 9, 2018 14:26 UTC
- We looked into Docusaurus and its l18n workflow to see if we could resolve Setup translations issue
  - Tested setup locally
  - Need CI and Crowdin setup
- Also studied docusaurus script codes to know how it works internally.
  - We noticed that it was using babylon to make and traverse AST!

July 06, 2018

Day 5: Jump into codesandbox ☀️
Team Sunshine (Babel) [2018] — at July 6, 2018 10:34 UTC
- The whole team members from 5 different time-zones had the first meeting.
- We are invited to babel GitHub organization! 🎉
- Hyunsoo, our coach visited our working place and he lead us to look inside current babel core issues and PRs.
- We installed codesandbox-client app in local and run it.
- We learnt ES6 Template Literals and Tagged Template Literals.
- git checkout -t remote/branch

July 05, 2018

Day 4: Looked into the current REPL issues ☀️
Team Sunshine (Babel) [2018] — at July 5, 2018 17:24 UTC
- We studied the current REPL codebase
- We went through the issues and PRs about REPL, open and closed.
- Did some research about netlify
- Also sid some research about react-sandpack

July 04, 2018

Day 3 : The first installing Babel Website project ☀️
Team Sunshine (Babel) [2018] — at July 4, 2018 13:05 UTC
- We enjoyed the first weekly meeting with our supervisor Ana, and Joeun, a senior female engineer as well as one of the coaches at her office.
  - We asked Ana to correct broken English in a blog post.
- Every Wednesday, we will have a meeting with a supervisor, Ana.
- Git clone babel/website repo and install dependencies and run a server.
- We encountered some libraries in repl that we haven't used before and understood what they are, what they are used for overall.
- We are going to look inside and study the list in the below from now on.

July 03, 2018

Day 2 : Prepare for the project ☀️
Team Sunshine (Babel) [2018] — at July 3, 2018 15:20 UTC
What we did for today
- Gyujin joined the second kick off video call early this morning
- Reviewed together Gyujin's translation of a post about AST for JS developers
- Studied Babel Handbook - was not easy to understand 😂
  - Only few parts were translated in Korean and wasn't in the best condition, so we’d like to improve the doc in Korean bit by bit.
- Studied about service worker because current babel-time-travel is using service worker for faster compile.
- Discussed about the project structure and functionalities with Mentors
  - Would better not to waste time on setting dev environment
  - Would be nice if eventually Babel Time Travel was implemented as a part of the current REPL
  - Use code sandbox instead of code mirror
- Adjusted time for whole team meeting (will be held at 8:00 AM 6th July KST)
- Changed daily working time to 7:00PM -11:00PM (UTC+9, KST) for better communication with Mentors in USA
- Got a new steady place to work for three months
  - A Co-working space located @ Gangnam

July 02, 2018

Day 1 : First day of RGSoC ☀️
Team Sunshine (Babel) [2018] — at July 2, 2018 16:10 UTC
Goals for Week #1
- Create new project repository
- Install basic dependencies for react app and finish boilerplate code setup
- Start simple team blog using GitHub pages
- Setup weekly scheduling
- Write a first blog post
- Make a list of dependencies for project app
About our project

We are going to work on babel time travel with react.js based on previous repo built with vue.js.

What we did for today
- Joined kick-off party video call
- Appointed the time for the video call with Ana (Jul 4, 2018 7pm - 8pm (KST))
- Discussed a consistent weekly schedule for project development
- Set a place and time for a meeting
  - Everyday 6:00PM -10:00PM (UTC+9, KST) @ Gangnam
  - We will share our daily scrum meeting (what we did today and what will do for tomorrow) with a mentor at 10:00 PM.
  - Every Friday is sth crush day(e.g react-saga crush day) to learn something, do pair programming.
- We are going to use the #RGSoCSunshine hashtag for social media!
- Had a brainstorming session for Updates, additions, and improvements to help the previous project

Team Sunshine (Babel) [2018]

Sources

Students

Coaches

Mentors

Supervisors

Conferences

ActivitiesAtom Feed

September 14, 2018

September 12, 2018

September 11, 2018

August 29, 2018

August 27, 2018

August 24, 2018

August 22, 2018

August 20, 2018

August 17, 2018

August 13, 2018

August 08, 2018

August 07, 2018

August 03, 2018

August 01, 2018

July 31, 2018

July 30, 2018

July 27, 2018

July 25, 2018

July 23, 2018

July 20, 2018

July 18, 2018

July 17, 2018

July 13, 2018

July 12, 2018

July 11, 2018

July 09, 2018

July 06, 2018

July 05, 2018

July 04, 2018

July 03, 2018

What we did for today

July 02, 2018

Goals for Week #1

About our project

What we did for today