Technical Introductions

March 30, 2018

Are you new to web development, and coding in general? I was too!

For about four months now, I’ve been learning as much ‘front-end development’ as I can. Prior to that, I knew the premise of HTML and some very basic CSS rules, learned from junior high-school attempts at myspace layout manipulation. My aim is to build web sites and web applications. They’re real similar these days, apparently. They’re powerful too, and web development as a skill can have a major impact both on one’s career opportunities, and one’s ability to impact the world!

What tools am I using?

  • HTML All the time, </div> after <div> after
<Divvy class="mc-div"/><Divs/>
  • CSS/SASS SASS, or SCSS, was pretty easy to learn. I believe I should have simply learned about it when I learned CSS. SASS has many tools that become more helpful the more experienced you get, as you end up maintaining more code over time and your projects increase in quantity and size. CSS is hard, it’s Art, and looking at other people’s CSS is the fastest way to learn the best tricks.
  • JavaScript JavaScript is the bread and butter here. It is my first programming language, and everything that happens in our development environment is eventually going to sync up in JavaScript world. After doing even just a little bit of JavaScript, you see how it can manipulate HTML/CSS, and you realize that in theory you could kind of just build all the HTML and CSS in JavaScript, and fill it in with content, which you can fetch or generate in all sorts of ways. That’s the basis for the JS frameworks that stand as titans to the novice front-end developer. At least, they intimidated me; now that I’ve tasted React I daresay I should have jumped right into a framework in the beginning. You learn SO MUCH.
  • React ‘Components’, little packages of HTML/CSS/JS. The Heads-Up-Display, the Nav-Bar, a List or List-Item, we create a component for each, we tell them how to interact with the rest of the site/app, or the user. Suppose we intend to use the user’s name in many components. We set the user’s name to live in “State” in one of the components, which is a built-in feature of React. Now, when we update State, it updates the components who use that piece of state. This makes it easy to reuse your code from your components, to update your app/website, to control the state of your application so you (or a buddy) don’t accidentally write chunks of code all altering the same data and then later can’t figure out why everything is broken.
  • Gatsby This software is called a static-site generator, but the whole notion of a static site has changed, and they can do all kinds of data manipulation without a traditional database. Gatsby gets you up and running with React very fast, and in a very empowering way. With very little work you are well on your way to creating a very robust website, with great opportunity for growth. This very blog is built with Gatsby, and I’ve only just begun to explore it. It uses GraphQL, which makes data handling a lot easier if you understand it. If you don’t (like me), then you’re just thankful for the gatsby starters that include most of the queries you need. The various plugins are awesome, allowing plenty of customization but offering so much out-of-the-box usefulness. For instance, the typography plugin can apply a beautiful font theme to your whole site and you can still fine tune it all from one file.
  • Git/Github I use a windows GUI, the VSCode built in git manager, and sometimes the command line. I think that advanced project management might call for advanced git skills. But for noob projects? Noob git skills seem to be getting me by just fine.
  • Text Editor You just need a code editor. VS Code, Sublime Text, Atom. This is your workbench, early on you learn a lot of tricks gradually to improve your efficiency in the text editor.

Skills to hone

  • Keyboard Skills Get comfortable with hotkeys, learn to edit text a little more rapidly with shortcuts, even if they feel hard at first. This is so important, if you’re crunched for time and need efficiency (who doesn’t?), and I can honestly tell you I work WAY faster than I did at first. I move text like a bulldozer moves dirt and I bet I look awesome but nobody is watching.
  • Search Skills Include the language (HTML/CSS/javaScript/react/markdown) and the command, error, or thing you’re trying to do in your searches. Carefully hunt answers, the more thumbs up on it the better, know of Stack Overflow.
  • Command Line Basics We gotta do stuff from inside directories(files). It’s not scary. You type little snippets, or copy/paste them from the web, and this lets you npm install or sass --watch scss:css or git commit or gatsby develop or netlify deploy. You’ll notice I just told npm, sass, git and gang all to do something. The command line, ;)

Little websites made up of HTML and CSS are absolutely adorable, like Wall-E, and sturdy like him too. I’m not experienced enough to say you can’t do web development without HTML/CSS, but I am experienced enough to say that you can probably learn them while you learn the more robust part, the part that’s gonna take a good long minute to make sense.

I consider this robust, difficult part to be JavaScript.

There’s probably a lot of great mini-projects out there. I know I found a bunch. The mother lode for me was the JavascSipt30 course. You can do a lot with JavaScript, and doing some every day is how you learn the big stuff in life.

Now, I’m still quite a noob I assume, but I’ve come a long way. These are things that 6 months ago I had no clue what they were, nevermind what they did. SASS, React.js, Node.js, Webpack, GraphQL. I’m still overwhelmed on some level, but I’m using all these tools now. Do I understand them completely? No, but that’s the beauty of programming. You don’t have to understand it completely to use it and build off of it. The human behind the keyboard

John Moen

Written by John Moen, a web developer in Austin, Texas.