2b:null 2c:["$","title",null,{"children":"Hiring Without Whiteboards++ | ento | Observable"}] 31:Tc5e,md` ## See Also * [No Whiteboards](https://nowhiteboards.io/) for job listing based on HWW ## Motivation & background My ideal job board would have all of these info in one place in a searchable/filterable manner: * Company mission and industry * Core values, including remote-first/remote-ok or not * Hiring process I care about _what_ the company does first and foremost, and then _how_ the company is going about it. 'Traditional' job boards tend to only give you the _what_, if any, besides what the job requirements are. Very much a blind date if you had to apply based on that alone. Stack Overflow Jobs and AngelList make space for showcasing company culture, which I appreciate. What's lacking though is more visibility into [the hiring process](https://meta.stackoverflow.com/questions/372142/add-a-whats-next-section-to-jobs-template). While [Key Values](http://keyvalues.com/) came close to providing more visibility into those areas, it wasn't possible to filter by hiring process, and the company pool size was on the smaller side. [Hiring Without Whiteboards](https://github.com/poteto/hiring-without-whiteboards) was a nice complement, but it had no information on what the companies were about. What if I stitched these datasets together...? ### Backend implementation This was a nice opportunity to try out [Dark](https://darklang.com/), a deployless language and framework for buiding web backends. While it's still in (private) beta, it already has all the features needed to fetch HWW's README, parse it, and store in a database in the background and expose an HTTP endpoint for fetching them. It also supports running background workers periodically, which is used to pull extra info from Crunchbase and check company presence on Key Values. ## Some day, some time * Filter by industry: Crunchbase's paid API has industry info; I couldn't find a free one. It can be a nice exercise to try to categorize using data that's currently available. * A way to manually override company identifier for Crunchbase / Key Values. ## Caveats * There is no universal standard for identifying a company. The HWW data, Crunchbase data, and Key Values page are matched up using a combination of slugified company name and domain name. This may well result in false negatives or false positives. ## Forking If you fork this notebook and see that it fails to fetch companies: the backend API is restricted to notebooks created under my account. Let me know if you'd like to make it work in your fork. ## Colophon * Data source: [Hiring Without Whiteboards](https://github.com/poteto/hiring-without-whiteboards) ([MIT license](https://github.com/poteto/hiring-without-whiteboards/blob/master/LICENSE.md)), [Crunchbase Basic](https://data.crunchbase.com/docs) (description and all the links except ${fas`link`} and Key Values') via [RapidAPI](https://rapidapi.com/crunchbase-team1-crunchbase/api/crunchbase/details), [Key Values](https://www.keyvalues.com/) (only the URL is stored if a company page exists) * Backend and storage: [Dark](https://darklang.com/) * Table UI: my fork of [@tmcw/tables/2](https://observablehq.com/@tmcw/tables/2) ## Appendix`32:T464,rows = { function link(href, text) { return html`${text}`; } function coerceFalsyToString(v) { // The table widget renders `null` as `"null"`, which we'd rather not have return v ? v : ""; } return companies.map(d => { const links = html` ${ d.homepage_url && d.homepage_url !== d.url ? link(d.homepage_url, fas`globe`) : "" } ${d.linkedin_url ? link(d.linkedin_url, fab`linkedin`) : ""} ${d.twitter_url ? link(d.twitter_url, fab`twitter`) : ""} ${d.crunchbase_url ? link(d.crunchbase_url, fas`database`) : ""} ${d.keyvalues_url ? link(d.keyvalues_url, "{}") : ""} `; const desc = coerceFalsyToString(d.description); const process = coerceFalsyToString(d.process); return { links: { html: links, value: d.url }, name: { html: d.url ? link(d.url, d.name) : d.name, value: d.name }, locations: d.locations, description: { html: md`${desc}`, value: desc }, process: { html: md`${process}`, value: process }, has_keyvalues: !!d.keyvalues_url, remote_ok: d.locations.indexOf("Remote") > -1 }; }); }33:T492,cities = { const ret = {}; const cityAdjustments = { // There's a Canadian city of the same name "San Francisco, CA": "San Francisco, USA" }; async function fetchLocation(city) { const q = cityAdjustments[city] || city; const res = await fetch( `https://nominatim.openstreetmap.org/search.php?q=${encodeURIComponent( q )}&format=json&limit=1&email=${encodeURIComponent( "nominatim@i.pearlwaffles.xyz" )}` ); const json = await res.json(); return json => json[0]; } rows.forEach(row => { row.locations.forEach(city => { if (city === "Remote") return; if (!ret.hasOwnProperty(city)) { ret[city] = { companies: [], location: null, remote_oks: 0 }; } ret[city].companies.push(row.name + (row.remote_ok ? " (r)" : "")); if (row.remote_ok) { ret[city].remote_oks += 1; } }); }); /* for (const city in ret) { try { ret[city].location = await fetchLocation(city); } catch (e) { console.log("Skipping", city, e); } await sleep(1000); yield ret; } */ return ret; }34:T4f4,{ //Experimental: show companies on a map - geocoding on the fly will result in many requests; I've abandoned the idea for now. Best to let the backend do the geocoding and serve up a list of known cities. let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px` }); //yield container; let map = L.map(container); let osmLayer = L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors' } ).addTo(map); Object.keys(cities).forEach(city => { if (!cities[city].location) return; cities[city].location.then(json => { if (json) { const comps = cities[city].companies; const layer = L.marker(L.latLng(json.lat, json.lon), { weight: 5, color: selectedCity === city ? '#234' : '#432' }).addTo(map); const popup = html`${city}: ${comps.length} (r:${city.remote_ok})
click to filter `; popup.getElementsByTagName('a')[0].onClick = e => { mutable selectedCity = city; }; layer.bindPopup(popup); } }); }); map.setView(L.latLng(30, 20), 2); //return container; }35:[] 2f:{"id":"5e5004f8870b1672","slug":"hiring-without-whiteboards","title":"Hiring Without Whiteboards++","thumbnail":"620d92491d2b2a263249260e3447ef9d8769c60b47c35dfafa7812998b04fe92","access_level":"public","create_time":"$D2020-09-08T00:02:03.852Z","update_time":"$D2020-09-14T04:30:18.048Z","view_time":null,"first_public_time":"$D2020-09-14T04:22:38.225Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"29c3cae0b7a46ab0","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":"starter_2024"},"version":322,"publish_version":322,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e583a9c2f29bc70","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":null}],"members":[{"type":"individual","id":"9e583a9c2f29bc70","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"e9532638ed3f76a7","slug":"maybe-the-real-treasure-was-the-tools-i-made-along-the-way-of-j","title":"Maybe The Real Treasure Was The Tools I Made Along The Way Of Job Searching","owner":{"id":"29c3cae0b7a46ab0","login":"ento","name":"ento"}},"type":"notebook","body":{"title":"Hiring Without Whiteboards++","cells":[{"id":0,"value":"md`# Hiring Without Whiteboards++\nThis is a list of companies based on [Hiring Without Whiteboards](https://github.com/poteto/hiring-without-whiteboards) with company description and links to website, LinkedIn, Twitter, and [Key Values](https://www.keyvalues.com/) page if there is one.\n\n

Usage notes

Click ${fas`search`} to filter and search.\n
Company name links to the URL listed in Hiring Without Whiteboards, which may be their jobs/careers page.\n
${fas`globe`} is the company's website as listed in Crunchbase.\n
The list is randomized upon each load.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"{\n const container = table(rows, {\n maxFilterItems: rows.length - 1\n });\n container.classList.add(\"wide\");\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"md`Grand Total: ${rows.length}, With Key Values page: ${\n rows.filter(d => d.has_keyvalues).length\n}, Remote Ok: ${rows.filter(d => d.remote_ok).length}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"companies = {\n return fetch(\"https://ento-hwwbase.builtwithdark.com/v1/companies\")\n .then(r => r.json())\n .then(json => shuffle(json.items));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import { table } from \"707fa01f46df3bf9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"import { style as faStyle, fa, fas, fab } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"faStyle({ regular: true, solid: true, brands: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"import { shuffle } from \"@jgrunik/shuffle-array\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"function sleep(ms) {\n return new Promise(resolve => setTimeout(resolve, ms));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"mutable selectedCity = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"