diff --git a/.eslintrc b/.eslintrc index 1c5b0dd..9fa4a67 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,5 +14,8 @@ "expect": false, "afterEach": false, "jest": false + }, + "env": { + "browser": true } } diff --git a/assets/styles/base/forms.scss b/assets/styles/base/forms.scss index 5c75c38..c756c7c 100644 --- a/assets/styles/base/forms.scss +++ b/assets/styles/base/forms.scss @@ -5,3 +5,7 @@ button { font-family: $primary-font; } +button { + cursor: pointer; + outline: none; +} diff --git a/components/interviews/interviewsList/index.js b/components/interviews/interviewsList/index.js index 3cb5066..8c84294 100644 --- a/components/interviews/interviewsList/index.js +++ b/components/interviews/interviewsList/index.js @@ -3,41 +3,94 @@ import { PropTypes } from 'prop-types'; import Modal from '../../modal'; import './style.scss'; -const InterviewsList = props => ( -
-
- Interviews ({ props.data.length }) {/* eslint-disable-line */} - View {/* eslint-disable-line */} -
- -
-

Interviews ({ props.data.length })

-
    - { props.data.map(interview => ( - // eslint-disable-next-line -
  • - { interview.name } -
    • - )) - } -
+const InterviewsList = (props) => { + // Sort interviews alphabetically + const sortedInterviews = props.data.sort((a, b) => a.name.localeCompare(b.name)); + const interviews = {}; + + // Build up interviews object with letter key + sortedInterviews.forEach((interview) => { + const firstLetter = interview.name.charAt(0); + + if (typeof interviews[firstLetter] === 'undefined') { + interviews[firstLetter] = []; + } + + interviews[firstLetter].push(interview); + }); + + return ( +
+
+ {/* eslint-disable-next-line */} + + Interviews ({props.data.length}) + + {/* eslint-disable-next-line */} + + View +
- -
-); + + +

Interviews ({ props.data.length })

+
+
+ { + Object.keys(interviews).map(firstLetter => ( +
+
{ firstLetter }
+
    + { interviews[firstLetter].map(interview => ( +
  • + +
    • + )) + } +
+
+ )) + } +
+
+ { + Object.keys(interviews).map(firstLetter => ( + // eslint-disable-next-line + { document.querySelector(`#${firstLetter}`).scrollIntoView({ behavior: 'smooth' }); }} + > + { firstLetter } + + )) + } +
+
+ + +
+ ); +}; InterviewsList.propTypes = { isInterviewsListModalOpen: PropTypes.bool.isRequired, data: PropTypes.arrayOf(PropTypes.shape({})).isRequired, - toggleSingleInterview: PropTypes.func.isRequired, + toggleSingleInterview: PropTypes.func.isRequired, /* eslint-disable-line */ toggleInterviewsListModal: PropTypes.func.isRequired, }; diff --git a/components/interviews/interviewsList/sss b/components/interviews/interviewsList/sss deleted file mode 100644 index cd39879..0000000 --- a/components/interviews/interviewsList/sss +++ /dev/null @@ -1,356 +0,0 @@ -const data = [ - { id: 1, - name: 'Fabio Berger + Remco Bloemen', - content: '
\n' + - '

\n' + - '
\n' + - '

Fabio\n' + - 'Berger + Remco Bloemen

\n' + - '

\n' + - '
    \n' + - '
  1. What type of apps do you\n' + - 'build?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. 0x - Decentralized exchange\n' + - 'protocol. It is a set of smart contracts that handle standard\n' + - 'transactions in an order format.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. The key advantage here is that\n' + - 'these smart contracts leads to shared liquidity
    2. \n' + - '
\n' + - '
    \n' + - '
  1. We also achieve increased security\n' + - 'and network liquidity through our architecture.
    2. \n' + - '
  2. We launched the network in August\n' + - '2017.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. It works, but is V1. We are working\n' + - 'on V2 which helps people build hybrid stations, supports new token\n' + - 'standards, and makes the contract more gas efficient.
    2. \n' + - '
  2. V1 only allows humans to create\n' + - 'orders; V2 will allow new smart contract to create orders. This is\n' + - 'HUGE.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Notes:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. We’re building the protocol;\n' + - 'designing the standard; building dev tools for anyone to build a\n' + - 'decentralized exchange.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Orders may become invalid for any\n' + - 'reason:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Order being filled
    2. \n' + - '
  2. Griefing attacks
    3. \n' + - '
  3. We’ve now built an OrderWatcher\n' + - 'that keeps relayers updated on the state of orders.
    4. \n' + - '
\n' + - '
    \n' + - '
  1. We’re using contract Events as a\n' + - 'proxy for state changes.
    2. \n' + - '
  2. Can do a diff between state trees\n' + - 'and between block headers.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. We also have a set of smart\n' + - 'contracts to handle settlement;
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Everyone who wants to trade is\n' + - 'setting allowances on a smart contract.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. We want upgradability.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. What are the\n' + - 'tools/libraries/frameworks you use?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. EthereumJS / truffle hardwallet\n' + - 'provider / Typedoc (to generate documentation) /
    2. \n' + - '
  2. We don’t use Truffle\n' + - 'anymore
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Not reliable – can have race\n' + - 'conditions;
    2. \n' + - '
  2. Artifacts don’t allow you to have\n' + - 'versions of the contract on different networks
    3. \n' + - '
\n' + - '
    \n' + - '
  1. You don’t run into this stuff if\n' + - 'you’re just building a “hello world”
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Overwriting parts of the\n' + - 'contracts;
    2. \n' + - '
\n' + - '
    \n' + - '
  1. We rolled our own. It’s open-source\n' + - 'but not documented. We have other things that are keeping us\n' + - 'busy.
    2. \n' + - '
  2. The problem is that Truffle has too\n' + - 'much functionality –– we would like to see more of a Unix\n' + - 'philosophy.
    3. \n' + - '
  3. Cannot support different versions\n' + - 'of Solidity.
    4. \n' + - '
\n' + - '
    \n' + - '
  1. Version management doesn’t\n' + - 'exist.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. EthPM –– doesn’t have versioning\n' + - 'either? It’s going through a big refactor, so we held off. We need\n' + - 'the NPM package manager.
    2. \n' + - '
  2. We have built a lot of developer\n' + - 'tools to interface with the smart contracts ourselves.
    3. \n' + - '
  3. We have also built own deployer and\n' + - 'migration tool, as truffle’s did not suit our needs.
    4. \n' + - '
\n' + - '
    \n' + - '
  1. What are your biggest\n' + - 'frustrations?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Getting a simple experimental\n' + - 'environment up is hard
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Remix is there; but it’s not\n' + - 'enough.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Tracing and profiling is not\n' + - 'existent.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Remix does it, but can’t do it\n' + - 'locally.
    2. \n' + - '
  2. “Code coverage” tool exists but\n' + - 'inserts console.logs in
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Adding up gas costs per line of\n' + - 'code.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Need to do profiling, because gas\n' + - 'costs depend on inputs.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Solidity language\n' + - 'itself:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Crashed the Solidity compiler twice\n' + - 'today.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. E.g. AbiEncoderV2 is pretty new and\n' + - 'hard to understand/use.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. The code that it produces is\n' + - 'inefficient.
    2. \n' + - '
  2. There is a stark stack limit in\n' + - 'solidity
    3. \n' + - '
\n' + - '
    \n' + - '
  1. All the variables are locally\n' + - 'scoped.
    2. \n' + - '
  2. Un-intuitive as it is a curly\n' + - 'braced language.
    3. \n' + - '
  3. The lifecycle hook value_of is\n' + - 'within a function.
    4. \n' + - '
  4. Can only access top 16 slack slots.\n' + - 'Including input and output.
    5. \n' + - '
  5. We need to implement a graph\n' + - 'coloring register allocator – to find out what the lifetime of the\n' + - 'variables is.
    6. \n' + - '
\n' + - '
    \n' + - '
  1. “This stack slot was used in the\n' + - 'first half –– the second half you can use”
    2. \n' + - '
  2. Or implement register\n' + - 'splitting.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Function inlining is frustrating\n' + - 'sometimes:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. E.g. SafeMath –– turns every\n' + - 'operator into function call – which is a huge gas sink.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. How Solidity optimizes could be\n' + - 'improved:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. It focuses on the code size (which\n' + - 'makes sense since it’s minimizing the state tree); but sometimes\n' + - 'you need to optimize size of tx gas (e.g. 0x needs optimized\n' + - 'fillOrder call)
    2. \n' + - '
\n' + - '
    \n' + - '
  1. ABI doesn’t implement\n' + - 'introspection
    2. \n' + - '
\n' + - '
    \n' + - '
  1. EIP 165
    2. \n' + - '
\n' + - '
    \n' + - '
  1. E.g. “does this contract implement\n' + - 'ERC20, or ERC223?”
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Solidity should have this\n' + - 'in-built.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Should be built into the API spec\n' + - 'and compiler.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Inheritance:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Interface or abstract contract –\n' + - 'e.g. Solidity automatically creates getters for state functions ––\n' + - 'collides with
    2. \n' + - '
  2. Contract which implements an\n' + - 'interface – public or external for abstract functions – they\n' + - 'collide
    3. \n' + - '
\n' + - '
    \n' + - '
  1. ERCs – there is not a formal way to\n' + - 'describe the interface for contracts.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Have a standard repo –– this will\n' + - 'lead to a canonical ABI definition –– can have semantic rules\n' + - 'around this. Could run some specific unit tests against
    2. \n' + - '
\n' + - '
    \n' + - '
  1. How do you handle\n' + - 'testing?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Testrpc has gotten better\n' + - '––
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Increases the speed at which you\n' + - 'can dev.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Blockstream is really cool. Written\n' + - 'by Mica (from Augur?), under the EthereumJS lib.
    2. \n' + - '
  2. Good dealing with block re-orgs and\n' + - 'changes in state.
    3. \n' + - '
  3. Continuous Integration:
    4. \n' + - '
\n' + - '
    \n' + - '
  1. Doesn’t really work for smart\n' + - 'contracts.
    2. \n' + - '
  2. We just use testrpc.
    3. \n' + - '
  3. Neufund was different than\n' + - '0x:
    4. \n' + - '
\n' + - '
    \n' + - '
  1. Neufund was a trustee for tokens ––\n' + - 'it was centralized by definition.
    2. \n' + - '
  2. This made it simpler: I could\n' + - 'create “open-ended” contracts –– a switch statement, that the\n' + - 'default would send to another proxy contract.
    3. \n' + - '
  3. But wouldn’t be able to do this\n' + - 'with 0x –– e.g. if we wanted to add Shnorr signatures –– because\n' + - 'it’s a governance / security issues.
    4. \n' + - '
\n' + - '
    \n' + - '
  1. How do you handle smart contract\n' + - 'verification and security?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Code audits before\n' + - 'deployment
    2. \n' + - '
  2. Want to add a formal verification\n' + - 'tool to our deployment tool.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. By analyzing the code, you can find\n' + - 'patterns.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. I manually did an audit in v0 of\n' + - '0x:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Make sure all functions have a\n' + - '“Read -> Write -> External Call” pattern, so you don’t have\n' + - 'any race conditions.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Other bounties?
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Rest of the bounties from\n' + - 'Remco
    2. \n' + - '
  2. State-watching –– built-in\n' + - 'diff’ing of state trees
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Should be implemented in the\n' + - 'Ethereum clients – Geth and Rust.
    2. \n' + - '
  2. They want this feature for\n' + - 'OrderWatcher.
    3. \n' + - '
\n' + - '
    \n' + - '
  1. EIP process is\n' + - 'suboptimal:
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Lacks in consensus-building.\n' + - 'There’s vocal people who don’t have good ideas; there’s a lot of\n' + - 'noise.
    2. \n' + - '
  2. To improve: committee-based\n' + - 'approach (reputable stakeholders from reputable projects who get\n' + - 'together?).
    3. \n' + - '
  3. Problems are getting solved at the\n' + - 'wrong abstraction level.
    4. \n' + - '
\n' + - '
    \n' + - '
  1. E.g. NFT standards.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. Neufund was largest Solidity\n' + - 'project before –– tokenized equity.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. You want a EuroToken. You don’t\n' + - 'want your company valuated in Ether.
    2. \n' + - '
  2. What if blockchain forks; which\n' + - 'token is actually tied to the company?
    3. \n' + - '
\n' + - '
    \n' + - '
  1. Bounty approach gives many\n' + - 'different styles within the codebase.
    2. \n' + - '
\n' + - '
    \n' + - '
  1. This is a problem; e.g. OpenSSL\n' + - 'codebase after Masters / PhDs.
    2. \n' + - '
\n' + - '

', - }, -]; - -export default data; diff --git a/components/interviews/interviewsList/style.scss b/components/interviews/interviewsList/style.scss index 8054835..d532818 100644 --- a/components/interviews/interviewsList/style.scss +++ b/components/interviews/interviewsList/style.scss @@ -19,14 +19,52 @@ } } +.interviews-nav-wrap { + + @media (min-width: $desktop) { + display: flex; + justify-content: space-between; + justify-content: flex-end; + position: relative; + } +} + .interviews-list { - li { - cursor: pointer; - outline: none; + @media (min-width: $desktop) { + position: absolute; + top: 0; + left: 0; + height: 100%; + overflow: auto; + width: 96%; + } + + .letter-block { + padding-bottom: calculateRem(32); + } + + button { + border: 0; + padding: 0; + text-align: left; + font-size: calculateRem(14); &:hover { text-decoration: underline; } } } + +.letters-nav { + display: none; + + @media (min-width: $desktop) { + display: flex; + flex-direction: column; + + span { + cursor: pointer; + } + } +} diff --git a/components/interviews/relatedInterviewsList/index.js b/components/interviews/relatedInterviewsList/index.js index 3372dee..3df5d17 100644 --- a/components/interviews/relatedInterviewsList/index.js +++ b/components/interviews/relatedInterviewsList/index.js @@ -7,13 +7,11 @@ const RelatedInterviewsList = props => (

Related
Interviews