How to Speak like a Web Developer
Tags: discuss, beginners, webdev, learn
Published: 2020-11-14 16:44:53

After building my career in HRIS, I've really taken for granted all the terminology I've gained through industry experience. What once felt easy to explain my thoughts and reasonings, now feels like pulling teeth as I struggle like a toddler grasping for the right words to clearly and effectively communicate to other web developers. Exasperated, I turned to my husband, a long time coder, and asked, "How do I learn to talk 'tech'?" And so I've created this post, a collection of his response with what I've found helpful up until now, as a hopefully useful guide for others who want to learn how to speak like a web developer.

## Reading Level: "Elementary" (Tutorials)

We'll try to distill the process of learning to speak like a web developer into the analogy of learning how to speak a language. When you learn a new language, you rarely start by picking up something advanced like the *Lord of the Rings* (although more power to you, if you do). Anyways, you're much more likely to begin the process by learning your ABCs and reading a children's book like *My Hungry Caterpillar*. So what is the equivalent of a children's picture book in web development? It's online tutorials. Tutorials are made with the beginner in mind and the content is going to be presented in the most digestible way possible. There will be a good amount of new terminology, but most tutorials will take the time to explain there new concepts and words in layman's terms to help the learning process.

## Supplement Reading with Writing (Comments & READMEs)

Before we move on to the next reading level, let's talk about a fairly standard way to supplement reading: writing. Similarly, you can supplement your tutorials and coding projects with writing in two easy ways:

1. **Comments:** You can add comments to describe difficult code to yourself. I know there's a bit of controversy around code being polluted  with "too many comments", as a beginner these comments are a great way to learn how to communicate your code and thought processes. (And as you get more familiar with coding, you can always write less comments!) Try out the VSCode extension [Better Comments](https://github.com/aaron-bond/better-comments)
2. **READMEs:** Make yourself a README that helps to outline each of your projects. It's a great way to help you (and others) understand the code, the decisions, and the usages. Don't know where to start? Try a template like [this one](https://github.com/othneildrew/Best-README-Template) (You can even pretty it up with [GitHub emojis](https://gist.github.com/rxaviers/7360908)!) (Additionally I use [Joplin](https://joplinapp.org/) so that I can see my markdown output as I'm editing)


## Reading Level: "Middle School" (MDN)

The next step is to start reading from [Mozilla Developer Network Web Docs (MDN)](https://developer.mozilla.org/en-US/). Please note that I say MDN and not W3Schools because unlike W3Schools, [W3C](https://www.w3.org/) [has partnered with Mozilla, Microsoft, Google, and Samsung to support MDN Web Docs](https://www.w3.org/blog/2017/10/w3c-to-work-with-mdn-on-web-platform-documentation/#:~:text=I%20am%20pleased%20to%20announce,about%20building%20the%20open%20Web.) Essentially, MDN is directly affiliated with W3C and is a reliable source we should refer for web standards. Many of the pages will have great examples and code sandboxes for you to play around with code. As you're going through it, you'll actually notice that a lot of the content is pretty much identical to the tutorials you've gone through (I remember that a few tutorials I had seen on YouTube were the exact same as some of the examples provided from MDN!) The main difference you'll notice is that the tutorials may have been presented in a more beginner friendly manner.


## Reading Level: "High School" (W3C/ECMAScript)

So, you're doing great and you feel like you're ready to "graduate" from MDN. You may have noticed that I referred to [W3C](https://www.w3.org/) a few times in the section above. That's because W3C (or World Wide Web Consortium) is the official organization that develops the standards for the World Wide Web ([ECMAScript](https://www.ecma-international.org/) for the JavaScript standard to ensure interoperability of Web pages across different Web browsers). That's right, W3C and ECMAScript are as authoritative as it gets in term of web development documentation as they are the ones setting those standards. These sources are literally what MDN is referring to when they write their own documentation for HTML, CSS, and JavaScript. In fact, while you were on MDN, you may have noticed near the bottom of many pages there is a "Specifications" section. 
Here's an example for MDN's [HTML Header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header):
![MDN HTML Header Specifications Section](https://dev-to-uploads.s3.amazonaws.com/i/4wgocifggk810sdpqzrc.png)

An example for MDN's [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value):
![MDN CSS Color Specifications Section](https://dev-to-uploads.s3.amazonaws.com/i/1jz5mxx64xuucubxyqij.png)

Lastly an example for MDN's [JavaScript Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array):
![MDN JavaScript Array Specifications Section](https://dev-to-uploads.s3.amazonaws.com/i/cq82c6vyk8urar0glmj1.png)

If you click on the links under "Specifications", they will take you to the W3C (or [ECMA International](https://www.ecma-international.org/) for JavaScript pages) for which their documentation is based on. Therefore, if you want to learn exactly how a feature should behave on the browser, W3C and ECMA International are going to be your best bet.


## Reading Level: "College"+ (Mailing Lists, Discussions, Contributions)

Alrighty smarty pants, you're feeling like a total pro, what's next? Well, you can start participating and contributing back to the community, and here's three ways on how:

1. **Join Groups/Mailing Lists:** [W3C](https://lists.w3.org/Archives/Public/), [ECMA International](https://esdiscuss.org/), and [MDN](https://lists.mozilla.org/listinfo) all have groups/mail lists. You can join these communities and have meaningful discussions on your desired topics.

2. **Follow Editors & Contributors:** You'll notice that a lot of the documentation on W3C, ECMA, and MDN have editors/contributors. Do a little digging and follow people of interest to you on Twitter, their blogs, etc. A lot of the time, it's a way to gain insights to their decisions or general thought processes.

3. **Join Discussions:** Whether it's on W3C, ECMA International, MDN, Twitter, personal blogs, so on and so forth, start joining in on discussions and share your thoughts!


### Summary

This post was written for developers like myself, starting out with web development and realizing that we're running into questions we can't answer, or processes we can't explain to the degree of specificity or clarity that we'd like to because we currently lack the proper terminology. There's no shortcut to learning how to effectively speak "tech", but with a guided approach, I hope this is helpful in getting people started/moving in the right direction.

<br/><br/>

I'd like to end this post by saying that this is by no means a comprehensive list of all the ways you can learn to "speak" like a web developer, nor is it the only way. Although I categorize these into "levels", anyone can start anywhere (just because you started learning recently, doesn't mean you can't join discussions, or read documentation straight from the source!). Anyways, I'd love to open it up to discussion below where people can provide comments, suggestions, and ways in which they've learned to "speak" like a web developer!


### Resources:
* [World Wide Web Consortium (W3C)](https://www.w3.org/)
* [W3C Mailing Lists](https://lists.w3.org/Archives/Public/)
* [ECMA International](https://www.ecma-international.org/)
* [ECMAScript Mailing List](https://esdiscuss.org/)
* [MDN](https://developer.mozilla.org/en-US/)
* [MDN Mailing Lists](https://lists.mozilla.org/listinfo)
* [Better Comments](https://github.com/aaron-bond/better-comments)
* [README Template](https://github.com/othneildrew/Best-README-Template)
* [GitHub emojis](https://gist.github.com/rxaviers/7360908)
* [Joplin](https://joplinapp.org/)