Skip to content

Instantly share code, notes, and snippets.

@georgiee georgiee/basics.md
Last active Mar 28, 2018

Embed
What would you like to do?
Junior's web development cookbook

Some nice things you can start learning from day one.

Frameworks

Angular, React & Vue. That's your set of skill which makes you versatile. Angular is very famous in Germany. React in the rest of the world and you can benefit from React twice when you dive into ReactNative.

The official Tutorials for all three frameworks are great. Goal: Try them for all of them so you can talk about those frameworks.

For Angular: Tour of Heroes: https://angular.io/tutorial

For React: https://reactjs.org/tutorial/tutorial.html

For Vue.js: https://vuejs.org/v2/guide/

Testing

TDD (test driven development) is the hot kid in town. But it's not always possible especially when the requirements are changing all the time. Whether your write tests before or after: The output is the same: Tests and this makes you VERY comfortable when changing things in your code later. Otherwise you will always have a feeling if the tower you build over the months will still stand after your next change.

Goal A: Get comfortable with Unit, Integration and E2E Testing. Goal B: Understand what's the difference between test runners, test frameworks and assertion libraries.

Node

That's JS running outside of the browser. You will be able to read it and write it from the beginning. That's the cool thing about JS. But there are pitfalls, especially with ES6 (use require instead import! export with CommonJS style)

Goal: Run a minimal Node application locally consisting of a class. Try to use some network stuff to get in touch with asynchronous handling in Node.

To manage Node versions use a node version manager like "n" (https://github.com/tj/n) or nvm. I use n it is very small and compact.

Prototype

Get comfy with prototypes. They are still around as the class keyword in ES6 is only a syntactic sugar.

Goal: Read some stuff about prototypes and if you didn't write any prototype based classes yet, write on in ES6 and the same with prototypes. Search for resources on mozilla, they have great lectures about prototypes.

Typescript

Typescript is nearly mandatory for Angular Development. It comes ready use but you should go one step deeper and try the tsc CLI once.

Goal: That's a great 5min tutorial, try it. https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

CSS

There are no JS developers. You have to know about CSS. Be aware of caniuse.com so you can check what is supported. That is also useful for JS API.

CSS is complex. Besides using the correct statements- the naming is hard for many people. BEM is what I would recommend every developer to use from the beginning- no matter how small.

Goal A: Suck in BEM, make it your friend. Ignore the bad feeling when writing long names. It will reward you with so much relaxation when writing markup with CSS the moment you understand it. http://getbem.com/introduction/

Goal B: Flex & Grid Grid is the new cool kid in town. Flexbox is in town for quite some time already. Learn both. They are usable in all modern browsers. Flexbox is reaching back some more versions. Understand an learn both. There are two guides everybody know: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

Reacive Programming: RxJS & Elm

RxJS is a core part of Angular. This alone makes it worth to learn if you are an Angular Developer. RxJS is reactive programming and requires a fundamentally different mindeset to understand. And of course a lot of training. This is a very basic but very nice strt into RxJS: http://reactive.how/

if you get the hang with RxJS you should give Elm a try. It's a functional programming language translating into raw JavaScript. https://guide.elm-lang.org/

Nice Readings

  1. State of JS - That's an amazing list of things the JS community is interested in. https://stateofjs.com/

  2. Daily JS - React vs Angular to get the difference https://medium.com/dailyjs/react-and-angular-a-contrast-b19210c3fe89

  3. Testing Differences https://codeahoy.com/2016/07/05/unit-integration-and-end-to-end-tests-finding-the-right-balance/

  4. Runner vs. Assertion Libraries http://amzotti.github.io/testing/2015/03/16/what-is-the-difference-between-a-test-runner-testing-framework-assertion-library-and-a-testing-plugin/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.