set up structure and JS #455

ccchwang · 2017-12-15T20:11:52Z

Started to lay foundation for marketing site and implement some core JS functionality.

This PR:

Sets up structure of the site and does basic styling
Creates json file to hold data for the different sections
Implements Intersection Observer to change text and graphic on scroll (for each section)
Adds click handler to button to change text and graphic (toggling between Microcosm view and Browser view)

codecov-io · 2017-12-15T20:15:49Z

Codecov Report

Merging #455 into master will increase coverage by 0.13%.
The diff coverage is n/a.

@@            Coverage Diff            @@
##           master    #455      +/-   ##
=========================================
+ Coverage   96.17%   96.3%   +0.13%     
=========================================
  Files          30      29       -1     
  Lines        1071    1029      -42     
  Branches      200     197       -3     
=========================================
- Hits         1030     991      -39     
+ Misses         35      32       -3     
  Partials        6       6

Impacted Files	Coverage Δ
packages/microcosm/src/install-devtools.js	`16.66% <0%> (-83.34%)`	⬇️
packages/microcosm/src/utils.js	`95.89% <0%> (-2.74%)`	⬇️
packages/microcosm/src/microcosm.js	`98.11% <0%> (-0.95%)`	⬇️
packages/microcosm/src/action.js	`98.29% <0%> (ø)`	⬆️
packages/microcosm/src/addons/action-form.js
packages/microcosm/src/domain-engine.js	`98.52% <0%> (+2.94%)`	⬆️
packages/microcosm/src/history.js	`93.93% <0%> (+6.06%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4b40f75...b4d56a2. Read the comment docs.

ccchwang · 2017-12-15T20:21:58Z

packages/microcosm-www-next/src/components/graphic1.js

@@ -0,0 +1,15 @@
+import React from 'react'


These three graphic.js files (graphic1, graphic2, graphic3) correspond to the image in the left column. We will observe them for intersection

ccchwang · 2017-12-15T20:26:12Z

packages/microcosm-www-next/src/stylesheets/setup/_smooth.scss

@@ -1,13 +0,0 @@
-// antialised text for use on dark backgrounds


just some consolidating of scss files and general clean up here

ccchwang · 2017-12-15T20:27:39Z

packages/microcosm-www-next/src/pages/index.js

+    this.changeText()
+    this.changeButtonText(e.target)
+  }
+


I'm not sure if this file is the right place for all the functions above, wondering what is best practice for React/gatsby

ccchwang · 2017-12-15T20:31:36Z

packages/microcosm-www-next/src/pages/index.js

+
+  changeSubheadingText(button) {
+    this.subheadingTop.classList.toggle('-browserView', !this.onMicrocosmView)
+    this.subheadingBottom.classList.toggle('-browserView', !this.onMicrocosmView)


I am changing some text via classes (e.g. "In Microcosm", "Meanwhile, in the browser...") but not sure if I should go the JS route because of potential accessibility issues

ccchwang · 2017-12-15T20:31:54Z

packages/microcosm-www-next/src/pages/index.js

+    this.subheadingBottom.classList.toggle('-browserView', !this.onMicrocosmView)
+  }
+
+  switchView = e => {


this runs when you click the button under "Meanwhile, in the browser..."

ccchwang · 2017-12-15T20:44:10Z

packages/microcosm-www-next/src/stylesheets/structure/_section.scss

  }
 }

+
+body {


will take this entire thing out later, just using it for now

nhunzaker · 2017-12-15T21:07:47Z

packages/microcosm-www-next/src/components/graphic1.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Graphic1 = ({ fill }) => (


Will fill ever be used here?

nope, good catch!

nhunzaker · 2017-12-15T21:25:32Z

packages/microcosm-www-next/src/components/graphic3.js

+  </figure>
+)
+
+export default Graphic3


Are these graphics more or less the same conceptually? What you had a single Graphic component that you passed different props into?

yes, will most likely be the same so I will refactor that

nhunzaker · 2017-12-15T21:31:32Z

packages/microcosm-www-next/src/pages/index.js

+      </div>
+    )
+  }
+}


Why export two default namespaces? Is the second IndexPage overriding the first?

I think I deleted the second export!

Oh jeez. Sorry, I should have checked the split view first!

nhunzaker · 2017-12-15T21:34:36Z

packages/microcosm-www-next/src/pages/index.js

-      </div>
-    </div>
-  </section>
-)


There is a lot of direct DOM manipulation in this component. If this component renders again, React might reverse changes you've made manually.

Instead of assigning state directly to this class, what if you used setState? Then you could lean on React to do the DOM manipulation for you.

So instead of something like this.changeHeading(), you'd just do this.setState({ heading: "..." }). That would cause React to do a re-render for you, updating the heading on your behalf.

The other benefit is that then all of your state for tracking what heading or graphic is displaying lives inside of the React component. You don't need to read from the DOM to get the current state of things. For me, this makes it much simpler to reason about rendering a page.

The render method declares the ideal state. Once you have that set up, all you need to do is change a components state via this.setState. Then React calls render again, and does all of the DOM manipulation to get your page to show the next set of content.

yes, very good call!! I totally forgot about setState so I will take advantage of that

nhunzaker · 2017-12-15T21:37:53Z

packages/microcosm-www-next/src/pages/index.js

+            >
+              In
+            </h3>
+            <p className="section__content__text" id="text">
              The <a href="TODO">Domains</a> are in charge of keeping state
              organized, and provide whatever data is necessary to the
              Presenter. A Presenter at it's core is a React Component, so it


its instead of it's?

nhunzaker · 2017-12-15T21:39:59Z

packages/microcosm-www-next/src/pages/index.js

+      map[graphic.dataset.section] = graphic
+      return map
+    }, {})
+  }


Could you derive this information from the index.json file instead of reading from the DOM?

nhunzaker · 2017-12-15T21:40:29Z

packages/microcosm-www-next/src/pages/index.js

+export default class IndexPage extends React.Component {
+  constructor(props) {
+    super(props)
+  }


This isn't necessary. By default, a class calls the constructor of its ancestor if it isn't specified.

ccchwang · 2017-12-18T21:34:56Z

@nhunzaker, made changes and it's ready for another pass through, thanks!

nhunzaker · 2018-01-03T17:03:17Z

@Chloehwang ignore the code coverage red flag. This is good to go!

* started implementing functionality to change bg color * refactored footer for changing bg color, refactored scss to be more modular * rebased branch, refactored to take advantage of rerender * refactored color changing functionality so that nav and footer can change color as well * ran yarn format * removed prettier as dev dependency to use root rules instead * Ch/layout (#457) * Ch/qa scrolling (#458)

ccchwang commented Dec 15, 2017

View reviewed changes

ccchwang requested review from leobauza and nhunzaker December 15, 2017 20:37

ccchwang changed the title ~~Ch/2 col option~~ set up structure and JS Dec 15, 2017

ccchwang commented Dec 15, 2017

View reviewed changes

nhunzaker reviewed Dec 15, 2017

View reviewed changes

ccchwang added 11 commits January 3, 2018 12:55

trial 1 for locked scroll behavior

555897c

trying out two columns layout

1896dfb

experimenting with react-intersection-observer

0887dae

set up IntersectionObserver and have it pull from json file

c2b808d

restructured base layout for new design and did basic styling

77654d7

implementing intersection observer to change text on scroll

dc812b1

added functionality to change view by button and started refactoring

c51c5d6

tweaked Intersection Observer to run smoother, added third section

4495b33

removed unnecessary comments

4ae0341

remove comment

e31b311

ran yarn format

123be04

ccchwang and others added 10 commits January 3, 2018 12:55

fixed weird formatting by yarn

8f34ade

fixed more weird formatting by yarn

35a5e75

tweaking based on PR comments

da66de8

finished refactoring to change classnames on rerender

3ab9e1e

refactored to rerender based on one state property only

48812ab

changed var name to be more clear

70251f0

got rid of unnecessary ids

dc08234

ran yarn format

0727279

removed prettier as dev dependency and ran yarn format

fc23757

ccchwang force-pushed the ch/2-col-option branch from 7440ffa to ade9de9 Compare January 3, 2018 17:55

ccchwang added 2 commits January 3, 2018 13:44

moved polyfill inside componentDidMount

ad4b4d5

trying new way to import polyfill

b4d56a2

ccchwang merged commit 25a2764 into master Jan 3, 2018

ccchwang deleted the ch/2-col-option branch January 5, 2018 17:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

set up structure and JS #455

set up structure and JS #455

ccchwang commented Dec 15, 2017 •

edited

Loading

codecov-io commented Dec 15, 2017 •

edited

Loading

ccchwang Dec 15, 2017 •

edited

Loading

ccchwang Dec 15, 2017

ccchwang Dec 15, 2017

ccchwang Dec 15, 2017

ccchwang Dec 15, 2017

ccchwang Dec 15, 2017

nhunzaker Dec 15, 2017

ccchwang Dec 18, 2017

nhunzaker Dec 15, 2017

ccchwang Dec 18, 2017

nhunzaker Dec 15, 2017

ccchwang Dec 18, 2017

nhunzaker Dec 18, 2017

nhunzaker Dec 15, 2017

nhunzaker Dec 15, 2017

ccchwang Dec 18, 2017

nhunzaker Dec 15, 2017

nhunzaker Dec 15, 2017

nhunzaker Dec 15, 2017

ccchwang commented Dec 18, 2017

nhunzaker commented Jan 3, 2018

		@@ -1,13 +0,0 @@
		// antialised text for use on dark backgrounds

                 }
               }
+              body {

		@@ -0,0 +1,15 @@
		import React from 'react'

		const Graphic1 = ({ fill }) => (

set up structure and JS #455

set up structure and JS #455

Conversation

ccchwang commented Dec 15, 2017 • edited Loading

codecov-io commented Dec 15, 2017 • edited Loading

Codecov Report

ccchwang Dec 15, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccchwang commented Dec 18, 2017

nhunzaker commented Jan 3, 2018

ccchwang commented Dec 15, 2017 •

edited

Loading

codecov-io commented Dec 15, 2017 •

edited

Loading

ccchwang Dec 15, 2017 •

edited

Loading