├── .eslintrc.json ├── .gitignore ├── README.md ├── components ├── Advice.js ├── Contributors.js ├── DevRelPillars.js ├── Jobs.js ├── Layout │ ├── Footer.js │ ├── Header.js │ └── index.js ├── MetaHead.js ├── Resources.js ├── Summary.js ├── ThreePillars.js └── icons │ ├── MoonIcon.js │ └── SunIcon.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js └── index.js ├── postcss.config.js ├── public ├── cami.jpg ├── cami_grayscale.png ├── favicon.ico ├── hassan.jpg ├── hassan_grayscale.png ├── hotmarket.png ├── lee.jpg ├── lee_grayscale.png ├── ogimage_new.png ├── powered-by-vercel.svg ├── swyx.jpg ├── swyx_grayscale.png └── vercel.svg ├── styles └── globals.css └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | .vscode 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | .pnpm-debug.log* 28 | 29 | # local env files 30 | .env.local 31 | .env.development.local 32 | .env.test.local 33 | .env.production.local 34 | 35 | # vercel 36 | .vercel 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [What is DevRel?](https://www.whatisdevrel.com/) 2 | 3 | This is a website that explains what developer relations is, how to get a job doing it, and tips for beginning and aspiring devrels. 4 | 5 |

6 | WhatisDevRel 7 |

8 | 9 | ## Contributors 10 | 11 | - [Hassan El Mghari](https://twitter.com/nutlope) 12 | - [Lee Robinson](https://twitter.com/leeerob) 13 | - [Cami Ramos](https://twitter.com/camiinthisthang) 14 | - [Swyx](https://twitter.com/swyx) 15 | - [Omar](https://twitter.com/OuhraOmar) 16 | - [CuddleofDeath](https://twitter.com/cuddleofdeath) 17 | - [Jakub](https://twitter.com/jacobandrewsky) 18 | 19 | 20 | ## Contributions 21 | 22 | Want to contribute resources or advice? Feel free to submit a PR! 23 | 24 | However, I reserve the right to decline contributions to keep this resource high quality. 25 | 26 | --- 27 | 28 | [![Powered by Vercel](/public/powered-by-vercel.svg 'Powered by Vercel')](https://vercel.com/?utm_source=trpc&utm_campaign=oss) 29 | -------------------------------------------------------------------------------- /components/Advice.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unescaped-entities */ 2 | 3 | export default function Advice() { 4 | return ( 5 |
6 |

7 | Advice for DevRels 8 |

9 |

10 | One of the hardest parts of DevRel is getting developer's attention. 11 | It's what every devtool company is competing for. So how do you get it? 12 | Let's look at some rules. 13 |

14 |
15 |

16 | How to engage developers 17 |

18 | 66 |
67 |
68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /components/Contributors.js: -------------------------------------------------------------------------------- 1 | import Image from "next/future/image"; 2 | 3 | export default function Contributors() { 4 | const contributors = [ 5 | { 6 | name: "Hassan El Mghari", 7 | role: "Together AI", 8 | imageUrl: "/hassan_grayscale.png", 9 | twitterUrl: "https://twitter.com/nutlope", 10 | websiteUrl: "https://www.elmghari.com/", 11 | }, 12 | { 13 | name: "Lee Robinson", 14 | role: "Vercel", 15 | imageUrl: "/lee_grayscale.png", 16 | twitterUrl: "https://twitter.com/leeerob", 17 | websiteUrl: "https://leerob.io/", 18 | }, 19 | { 20 | name: "Camila Ramos", 21 | role: "Berachain", 22 | imageUrl: "/cami_grayscale.png", 23 | twitterUrl: "https://twitter.com/camiinthisthang", 24 | websiteUrl: 25 | "https://www.youtube.com/channel/UCyEnr-lcCUavJzh0uodvG3w/videos", 26 | }, 27 | { 28 | name: "Shawn Wang", 29 | role: "Smol AI", 30 | imageUrl: "/swyx_grayscale.png", 31 | twitterUrl: "https://twitter.com/swyx", 32 | websiteUrl: "https://swyx.io/", 33 | }, 34 | ]; 35 | return ( 36 |
37 |

Authors

38 |

This content has been created and reviewed by the following people.

39 | 106 |
107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /components/DevRelPillars.js: -------------------------------------------------------------------------------- 1 | import ThreePillars from "./ThreePillars"; 2 | 3 | /* eslint-disable react/no-unescaped-entities */ 4 | export default function DevRelPillars() { 5 | return ( 6 |
7 |

8 | The 3 types of DevRel 9 |

10 |

11 | Let's talk about the 3 types of DevRel: Community, Content, and Product. 12 |
13 | Many developer advocates do{" "} 14 | a mix of these but tend to specialize in 15 | one or two. 16 |

17 | 18 |
19 |

20 | The Community Builder 21 |

22 |

23 | Community-focused DevRel centers 24 | around growing and managing a community of developers. This is usually 25 | a Slack or Discord community that's focused on a company's product or 26 | an open source technology. Managing a community consists of answering 27 | questions, designing the community in an inclusive way, and making 28 | sure members are getting value through activities like livestreams and 29 | other events. 30 |

31 | 32 |

33 | The Developer Educator 34 |

35 |

36 | Content-focused DevRel is about 37 | spreading awareness about a product through written and spoken 38 | content. This can involve writing blog posts, making videos, teaching 39 | workshops, recording podcasts, tweeting and more. Content can be an 40 | SEO play focused on the long term or be a short term promotion like 41 | new feature launches. 42 |

43 | 44 |

45 | The DX Engineer 46 |

47 | 48 |

49 | Product-focused DevRel is about 50 | owning the developer experience of the product. It's about improving 51 | how it feels for a developer to use a specific product. This can be 52 | done by talking to users to understand how they're using it, then 53 | making improvements to the documentation and creating guides based on 54 | their answers. This can also mean working on code examples, templates, 55 | and integrations. 56 |

57 |
58 |
59 | ); 60 | } 61 | -------------------------------------------------------------------------------- /components/Jobs.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unescaped-entities */ 2 | import { 3 | CloudIcon, 4 | CodeIcon, 5 | LightningBoltIcon, 6 | } from "@heroicons/react/outline"; 7 | 8 | export default function Jobs() { 9 | const skills = [ 10 | { 11 | name: "You can code", 12 | description: 13 | "For this, you can show off some of your side projects or highlight your previous engineering experience. It's important for DevRels to be able to code to empathize with developers.", 14 | icon: CodeIcon, 15 | }, 16 | { 17 | name: "You can build communities", 18 | description: 19 | "For this skill, you can show off any experience of you helping build a community or organization. It could be for college, open source, online communities or anything.", 20 | icon: CloudIcon, 21 | }, 22 | { 23 | name: "You can create content", 24 | description: 25 | "For this skill, you can show off your talks, YouTube videos, tweets, and blog posts. If you don't have any of these, I'd strongly recommend you create some content.", 26 | icon: LightningBoltIcon, 27 | }, 28 | ]; 29 | 30 | return ( 31 |
32 |

33 | Getting a job in DevRel 34 |

35 |

36 | As mentioned, the job market for devrels is very hot right now. I have 37 | startups that message me every week asking if I know any good developer 38 | advocates, so there is a big need in the market right now. 39 |

40 | {/*
41 | 42 | a tweet showing how hot the devrel market is 48 | 49 |
*/} 50 |
51 |

52 | When applying for developer advocate roles, it's important to show 53 | that you have some of these three skills below: 54 |

55 |
56 | {skills.map((skill) => ( 57 |
58 |
59 |
60 |
62 |

{skill.name}

63 |
64 |
{skill.description}
65 |
66 | ))} 67 |
68 |
69 |

70 | While there aren't pre-requisites for the job, it's{" "} 71 | very helpful to have prior work in these 72 | areas to show off and get your career in developer advocacy started. If 73 | you don't have prior work, you should start creating content (blogs, 74 | videos, side projects) that helps demonstrate you can already do the 75 | work. Ultimately, this is a role for engineers who enjoy working with 76 | developers, creating content, and managing communities. 77 |

78 |

79 | If you already have at least two of these skills with strong evidence & can work in the US, feel free to{" "} 80 | 81 | DM me on Twitter 82 | {" "} 83 | and I can try to connect you to startups that are hiring! There are companies hiring outside the US but most of my connections are specifically hiring in SF, NYC, or remote US. 84 |

85 |
86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /components/Layout/Footer.js: -------------------------------------------------------------------------------- 1 | export default function Footer() { 2 | return ( 3 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Link from "next/link"; 3 | import { useTheme } from "next-themes"; 4 | import MoonIcon from "../icons/MoonIcon"; 5 | import SunIcon from "../icons/SunIcon"; 6 | 7 | function Header() { 8 | const [mounted, setMounted] = useState(false); 9 | 10 | const { resolvedTheme, theme, setTheme } = useTheme(); 11 | 12 | useEffect(() => setMounted(true), []); 13 | 14 | return ( 15 |
16 |
17 | {/* 4 l8r */} 18 | {/* 19 | 20 | <3 21 | 22 | */} 23 | 24 | 34 |
35 |
36 | ); 37 | } 38 | 39 | export default Header; 40 | -------------------------------------------------------------------------------- /components/Layout/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "./Header"; 3 | import Footer from "./Footer"; 4 | 5 | function Layout({ children }) { 6 | return ( 7 | <> 8 |
9 |
{children}
10 |