\n
\n - \n {displayQuestions(state, [...state.questions])}\n
\n
\n)\n","import { h } from \"hyperapp\"\nimport { cc, EXPERTISE_STRINGS } from \"../utils\"\nimport Icon from \"./Icon\"\n\nexport default ({ name, icon, dropdown }) => (state, actions) => {\n const dropdownIndex = EXPERTISE_STRINGS.indexOf(name.toLowerCase())\n\n return (\n \n \n
\n \n \n {items.map(item => (\n \n \n ))}\n \n
\n)\n","import { h } from \"hyperapp\"\nimport { cc } from \"../utils\"\nimport Icon from \"./Icon\"\n\nexport default () => (state, actions) => (\n \n \n
\n \n \n actions.filter.onSortDirectionChange()}\n data-tooltip={`${\n state.filter.sortAscending ? \"Ascending\" : \"Descending\"\n } order`}\n >\n Expertise\n \n
\n)\n","import { h } from \"hyperapp\"\nimport Dropdown from \"./Dropdown\"\nimport SortButton from \"./SortButton\"\n\nexport default () => state => (\n \n \n
\n \n
\n)\n","/**\n * marked - a markdown parser\n * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)\n * https://github.com/markedjs/marked\n */\n\n;(function(root) {\n'use strict';\n\n/**\n * Block-Level Grammar\n */\n\nvar block = {\n newline: /^\\n+/,\n code: /^( {4}[^\\n]+\\n*)+/,\n fences: noop,\n hr: /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)/,\n heading: /^ *(#{1,6}) *([^\\n]+?) *#* *(?:\\n+|$)/,\n nptable: noop,\n blockquote: /^( {0,3}> ?(paragraph|[^\\n]*)(?:\\n|$))+/,\n list: /^( *)(bull) [\\s\\S]+?(?:hr|def|\\n{2,}(?! )(?!\\1bull )\\n*|\\s*$)/,\n html: /^ *(?:comment *(?:\\n|\\s*$)|closed *(?:\\n{2,}|\\s*$)|closing *(?:\\n{2,}|\\s*$))/,\n def: /^ {0,3}\\[(label)\\]: *\\n? *]+)>?(?:(?: +\\n? *| *\\n *)(title))? *(?:\\n+|$)/,\n table: noop,\n lheading: /^([^\\n]+)\\n *(=|-){2,} *(?:\\n+|$)/,\n paragraph: /^([^\\n]+(?:\\n?(?!hr|heading|lheading| {0,3}>|tag)[^\\n]+)+)/,\n text: /^[^\\n]+/\n};\n\nblock._label = /(?:\\\\[\\[\\]]|[^\\[\\]])+/;\nblock._title = /(?:\"(?:\\\\\"|[^\"]|\"[^\"\\n]*\")*\"|'\\n?(?:[^'\\n]+\\n?)*'|\\([^()]*\\))/;\nblock.def = edit(block.def)\n .replace('label', block._label)\n .replace('title', block._title)\n .getRegex();\n\nblock.bullet = /(?:[*+-]|\\d+\\.)/;\nblock.item = /^( *)(bull) [^\\n]*(?:\\n(?!\\1bull )[^\\n]*)*/;\nblock.item = edit(block.item, 'gm')\n .replace(/bull/g, block.bullet)\n .getRegex();\n\nblock.list = edit(block.list)\n .replace(/bull/g, block.bullet)\n .replace('hr', '\\\\n+(?=\\\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\\\* *){3,})(?:\\\\n+|$))')\n .replace('def', '\\\\n+(?=' + block.def.source + ')')\n .getRegex();\n\nblock._tag = '(?!(?:'\n + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'\n + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'\n + '|span|br|wbr|ins|del|img)\\\\b)\\\\w+(?!:|[^\\\\w\\\\s@]*@)\\\\b';\n\nblock.html = edit(block.html)\n .replace('comment', //)\n .replace('closed', /<(tag)[\\s\\S]+?<\\/\\1>/)\n .replace('closing', /\n
\n '\n + (escaped ? code : escape(code, true))\n + '\\n'\n + (escaped ? code : escape(code, true))\n + '\\n\\n' + quote + '\\n';\n};\n\nRenderer.prototype.html = function(html) {\n return html;\n};\n\nRenderer.prototype.heading = function(text, level, raw) {\n return '
\\n' : '
\\n';\n};\n\nRenderer.prototype.list = function(body, ordered, start) {\n var type = ordered ? 'ol' : 'ul',\n startatt = (ordered && start !== 1) ? (' start=\"' + start + '\"') : '';\n return '<' + type + startatt + '>\\n' + body + '\\n';\n};\n\nRenderer.prototype.listitem = function(text) {\n return '
' + text + '
\\n';\n};\n\nRenderer.prototype.table = function(header, body) {\n return '' + text + '';\n};\n\nRenderer.prototype.br = function() {\n return this.options.xhtml ? '' : '
';\n};\n\nRenderer.prototype.del = function(text) {\n return '
An error occurred:
'\n + escape(e.message + '', true)\n + '';\n }\n throw e;\n }\n}\n\n/**\n * Options\n */\n\nmarked.options =\nmarked.setOptions = function(opt) {\n merge(marked.defaults, opt);\n return marked;\n};\n\nmarked.defaults = {\n gfm: true,\n tables: true,\n breaks: false,\n pedantic: false,\n sanitize: false,\n sanitizer: null,\n mangle: true,\n smartLists: false,\n silent: false,\n highlight: null,\n langPrefix: 'lang-',\n smartypants: false,\n headerPrefix: '',\n renderer: new Renderer(),\n xhtml: false,\n baseUrl: null\n};\n\n/**\n * Expose\n */\n\nmarked.Parser = Parser;\nmarked.parser = Parser.parse;\n\nmarked.Renderer = Renderer;\nmarked.TextRenderer = TextRenderer;\n\nmarked.Lexer = Lexer;\nmarked.lexer = Lexer.lex;\n\nmarked.InlineLexer = InlineLexer;\nmarked.inlineLexer = InlineLexer.output;\n\nmarked.parse = marked;\n\nif (typeof module !== 'undefined' && typeof exports === 'object') {\n module.exports = marked;\n} else if (typeof define === 'function' && define.amd) {\n define(function() { return marked; });\n} else {\n root.marked = marked;\n}\n})(this || (typeof window !== 'undefined' ? window : global));\n","\n/* **********************************************\n Begin prism-core.js\n********************************************** */\n\nvar _self = (typeof window !== 'undefined')\n\t? window // if in browser\n\t: (\n\t\t(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)\n\t\t? self // if in worker\n\t\t: {} // if in node js\n\t);\n\n/**\n * Prism: Lightweight, robust, elegant syntax highlighting\n * MIT license http://www.opensource.org/licenses/mit-license.php/\n * @author Lea Verou http://lea.verou.me\n */\n\nvar Prism = (function(){\n\n// Private helper vars\nvar lang = /\\blang(?:uage)?-([\\w-]+)\\b/i;\nvar uniqueId = 0;\n\nvar _ = _self.Prism = {\n\tmanual: _self.Prism && _self.Prism.manual,\n\tdisableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,\n\tutil: {\n\t\tencode: function (tokens) {\n\t\t\tif (tokens instanceof Token) {\n\t\t\t\treturn new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);\n\t\t\t} else if (_.util.type(tokens) === 'Array') {\n\t\t\t\treturn tokens.map(_.util.encode);\n\t\t\t} else {\n\t\t\t\treturn tokens.replace(/&/g, '&').replace(/ text.length) {\n\t\t\t\t\t\t// Something went terribly wrong, ABORT, ABORT!\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (str instanceof Token) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (greedy && i != strarr.length - 1) {\n\t\t\t\t\t\tpattern.lastIndex = pos;\n\t\t\t\t\t\tvar match = pattern.exec(text);\n\t\t\t\t\t\tif (!match) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tvar from = match.index + (lookbehind ? match[1].length : 0),\n\t\t\t\t\t\t to = match.index + match[0].length,\n\t\t\t\t\t\t k = i,\n\t\t\t\t\t\t p = pos;\n\n\t\t\t\t\t\tfor (var len = strarr.length; k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy)); ++k) {\n\t\t\t\t\t\t\tp += strarr[k].length;\n\t\t\t\t\t\t\t// Move the index i to the element in strarr that is closest to from\n\t\t\t\t\t\t\tif (from >= p) {\n\t\t\t\t\t\t\t\t++i;\n\t\t\t\t\t\t\t\tpos = p;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// If strarr[i] is a Token, then the match starts inside another Token, which is invalid\n\t\t\t\t\t\tif (strarr[i] instanceof Token) {\n\t\t\t\t\t\t\tcontinue;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Number of tokens to delete and replace with the new match\n\t\t\t\t\t\tdelNum = k - i;\n\t\t\t\t\t\tstr = text.slice(pos, p);\n\t\t\t\t\t\tmatch.index -= pos;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tpattern.lastIndex = 0;\n\n\t\t\t\t\t\tvar match = pattern.exec(str),\n\t\t\t\t\t\t\tdelNum = 1;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!match) {\n\t\t\t\t\t\tif (oneshot) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif(lookbehind) {\n\t\t\t\t\t\tlookbehindLength = match[1] ? match[1].length : 0;\n\t\t\t\t\t}\n\n\t\t\t\t\tvar from = match.index + lookbehindLength,\n\t\t\t\t\t match = match[0].slice(lookbehindLength),\n\t\t\t\t\t to = from + match.length,\n\t\t\t\t\t before = str.slice(0, from),\n\t\t\t\t\t after = str.slice(to);\n\n\t\t\t\t\tvar args = [i, delNum];\n\n\t\t\t\t\tif (before) {\n\t\t\t\t\t\t++i;\n\t\t\t\t\t\tpos += before.length;\n\t\t\t\t\t\targs.push(before);\n\t\t\t\t\t}\n\n\t\t\t\t\tvar wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);\n\n\t\t\t\t\targs.push(wrapped);\n\n\t\t\t\t\tif (after) {\n\t\t\t\t\t\targs.push(after);\n\t\t\t\t\t}\n\n\t\t\t\t\tArray.prototype.splice.apply(strarr, args);\n\n\t\t\t\t\tif (delNum != 1)\n\t\t\t\t\t\t_.matchGrammar(text, strarr, grammar, i, pos, true, token);\n\n\t\t\t\t\tif (oneshot)\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\n\ttokenize: function(text, grammar, language) {\n\t\tvar strarr = [text];\n\n\t\tvar rest = grammar.rest;\n\n\t\tif (rest) {\n\t\t\tfor (var token in rest) {\n\t\t\t\tgrammar[token] = rest[token];\n\t\t\t}\n\n\t\t\tdelete grammar.rest;\n\t\t}\n\n\t\t_.matchGrammar(text, strarr, grammar, 0, 0, false);\n\n\t\treturn strarr;\n\t},\n\n\thooks: {\n\t\tall: {},\n\n\t\tadd: function (name, callback) {\n\t\t\tvar hooks = _.hooks.all;\n\n\t\t\thooks[name] = hooks[name] || [];\n\n\t\t\thooks[name].push(callback);\n\t\t},\n\n\t\trun: function (name, env) {\n\t\t\tvar callbacks = _.hooks.all[name];\n\n\t\t\tif (!callbacks || !callbacks.length) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfor (var i=0, callback; callback = callbacks[i++];) {\n\t\t\t\tcallback(env);\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar Token = _.Token = function(type, content, alias, matchedStr, greedy) {\n\tthis.type = type;\n\tthis.content = content;\n\tthis.alias = alias;\n\t// Copy of the full string this token was created from\n\tthis.length = (matchedStr || \"\").length|0;\n\tthis.greedy = !!greedy;\n};\n\nToken.stringify = function(o, language, parent) {\n\tif (typeof o == 'string') {\n\t\treturn o;\n\t}\n\n\tif (_.util.type(o) === 'Array') {\n\t\treturn o.map(function(element) {\n\t\t\treturn Token.stringify(element, language, o);\n\t\t}).join('');\n\t}\n\n\tvar env = {\n\t\ttype: o.type,\n\t\tcontent: Token.stringify(o.content, language, parent),\n\t\ttag: 'span',\n\t\tclasses: ['token', o.type],\n\t\tattributes: {},\n\t\tlanguage: language,\n\t\tparent: parent\n\t};\n\n\tif (o.alias) {\n\t\tvar aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];\n\t\tArray.prototype.push.apply(env.classes, aliases);\n\t}\n\n\t_.hooks.run('wrap', env);\n\n\tvar attributes = Object.keys(env.attributes).map(function(name) {\n\t\treturn name + '=\"' + (env.attributes[name] || '').replace(/\"/g, '"') + '\"';\n\t}).join(' ');\n\n\treturn '<' + env.tag + ' class=\"' + env.classes.join(' ') + '\"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '';\n\n};\n\nif (!_self.document) {\n\tif (!_self.addEventListener) {\n\t\t// in Node.js\n\t\treturn _self.Prism;\n\t}\n\n\tif (!_.disableWorkerMessageHandler) {\n\t\t// In worker\n\t\t_self.addEventListener('message', function (evt) {\n\t\t\tvar message = JSON.parse(evt.data),\n\t\t\t\tlang = message.language,\n\t\t\t\tcode = message.code,\n\t\t\t\timmediateClose = message.immediateClose;\n\n\t\t\t_self.postMessage(_.highlight(code, _.languages[lang], lang));\n\t\t\tif (immediateClose) {\n\t\t\t\t_self.close();\n\t\t\t}\n\t\t}, false);\n\t}\n\n\treturn _self.Prism;\n}\n\n//Get current script and highlight\nvar script = document.currentScript || [].slice.call(document.getElementsByTagName(\"script\")).pop();\n\nif (script) {\n\t_.filename = script.src;\n\n\tif (!_.manual && !script.hasAttribute('data-manual')) {\n\t\tif(document.readyState !== \"loading\") {\n\t\t\tif (window.requestAnimationFrame) {\n\t\t\t\twindow.requestAnimationFrame(_.highlightAll);\n\t\t\t} else {\n\t\t\t\twindow.setTimeout(_.highlightAll, 16);\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tdocument.addEventListener('DOMContentLoaded', _.highlightAll);\n\t\t}\n\t}\n}\n\nreturn _self.Prism;\n\n})();\n\nif (typeof module !== 'undefined' && module.exports) {\n\tmodule.exports = Prism;\n}\n\n// hack for components to work correctly in node.js\nif (typeof global !== 'undefined') {\n\tglobal.Prism = Prism;\n}\n\n\n/* **********************************************\n Begin prism-markup.js\n********************************************** */\n\nPrism.languages.markup = {\n\t'comment': //,\n\t'prolog': /<\\?[\\s\\S]+?\\?>/,\n\t'doctype': //i,\n\t'cdata': //i,\n\t'tag': {\n\t\tpattern: /<\\/?(?!\\d)[^\\s>\\/=$<%]+(?:\\s+[^\\s>\\/=]+(?:=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+))?)*\\s*\\/?>/i,\n\t\tgreedy: true,\n\t\tinside: {\n\t\t\t'tag': {\n\t\t\t\tpattern: /^<\\/?[^\\s>\\/]+/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': /^<\\/?/,\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t},\n\t\t\t'attr-value': {\n\t\t\t\tpattern: /=(?:(\"|')(?:\\\\[\\s\\S]|(?!\\1)[^\\\\])*\\1|[^\\s'\">=]+)/i,\n\t\t\t\tinside: {\n\t\t\t\t\t'punctuation': [\n\t\t\t\t\t\t/^=/,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpattern: /(^|[^\\\\])[\"']/,\n\t\t\t\t\t\t\tlookbehind: true\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t},\n\t\t\t'punctuation': /\\/?>/,\n\t\t\t'attr-name': {\n\t\t\t\tpattern: /[^\\s>\\/]+/,\n\t\t\t\tinside: {\n\t\t\t\t\t'namespace': /^[^\\s>\\/:]+:/\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t},\n\t'entity': /&#?[\\da-z]{1,8};/i\n};\n\nPrism.languages.markup['tag'].inside['attr-value'].inside['entity'] =\n\tPrism.languages.markup['entity'];\n\n// Plugin to make entity title show the real entity, idea by Roman Komarov\nPrism.hooks.add('wrap', function(env) {\n\n\tif (env.type === 'entity') {\n\t\tenv.attributes['title'] = env.content.replace(/&/, '&');\n\t}\n});\n\nPrism.languages.xml = Prism.languages.markup;\nPrism.languages.html = Prism.languages.markup;\nPrism.languages.mathml = Prism.languages.markup;\nPrism.languages.svg = Prism.languages.markup;\n\n\n/* **********************************************\n Begin prism-css.js\n********************************************** */\n\nPrism.languages.css = {\n\t'comment': /\\/\\*[\\s\\S]*?\\*\\//,\n\t'atrule': {\n\t\tpattern: /@[\\w-]+?.*?(?:;|(?=\\s*\\{))/i,\n\t\tinside: {\n\t\t\t'rule': /@[\\w-]+/\n\t\t\t// See rest below\n\t\t}\n\t},\n\t'url': /url\\((?:([\"'])(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1|.*?)\\)/i,\n\t'selector': /[^{}\\s][^{};]*?(?=\\s*\\{)/,\n\t'string': {\n\t\tpattern: /(\"|')(?:\\\\(?:\\r\\n|[\\s\\S])|(?!\\1)[^\\\\\\r\\n])*\\1/,\n\t\tgreedy: true\n\t},\n\t'property': /[-_a-z\\xA0-\\uFFFF][-\\w\\xA0-\\uFFFF]*(?=\\s*:)/i,\n\t'important': /\\B!important\\b/i,\n\t'function': /[-a-z0-9]+(?=\\()/i,\n\t'punctuation': /[(){};:]/\n};\n\nPrism.languages.css['atrule'].inside.rest = Prism.languages.css;\n\nif (Prism.languages.markup) {\n\tPrism.languages.insertBefore('markup', 'tag', {\n\t\t'style': {\n\t\t\tpattern: /(
\n {EXPERTISE_STRINGS[expertise]}\n
\n \n \n actions.onAnswerButtonClick({ name, isOpen })}\n >\n {isOpen ? \"Hide\" : \"Show\"} answer\n \n
\n \n)\n","import { h } from \"hyperapp\"\n\nconst RecommendedResource = () => (\n \n
\n Good to hear
}\n- {goodToHear.map(i =>
Recommended resource
\n \n
\n \n \n Frontend Masters Handbook\n \n
\n\n This is a guide that anyone could use to learn about the practice of\n front-end development. It broadly outlines and discusses the practice of\n front-end engineering: how to learn it and what tools are used when\n practicing it.\n
\n\n {firstHalf.map(q =>
\n )\n}\n\nexport default () => state => (\n \n \n
\n)\n","import { h } from \"hyperapp\"\nimport BackToTopButton from \"./components/BackToTopButton\"\nimport Header from \"./components/Header\"\nimport Filter from \"./components/Filter\"\nimport Questions from \"./components/Questions\"\nimport Footer from \"./components/Footer\"\n\nexport default () => (\n \n
\n)\n","/* eslint no-restricted-globals: 0 */\nimport { app } from \"hyperapp\"\nimport \"focus-visible\"\nimport \"./css/index.scss\"\nimport \"./js/browser\"\n\nimport state from \"./js/state\"\nimport actions from \"./js/actions\"\nimport view from \"./js/view\"\n\napp(state, actions, view, document.body)\n\nsetTimeout(() => {\n const backToTopButton = document.querySelector(\".BackToTopButton\")\n addEventListener(\"scroll\", () => {\n backToTopButton.classList[window.scrollY > 750 ? \"add\" : \"remove\"](\n \"is-visible\"\n )\n })\n})\n"]}