The beginning of an adventure: 13 Weeks of JavaScript (╯°□°)

Eric Ruiz
7 min readJul 24, 2016

Always wanted to attend a bootcamp but its high price makes you pull back ? Calm, you have a lot of alternatives at your disposal.

From introductory courses offered by Codeacademy to a complete experience like Freecodecamp.

Freecodecamp seems a good alternative to a bootcamp. They have put together a structured roadmap that you can follow at your own pace and for free.

Their best achievement is the community. There will always be people willing to help you or that are working in your same problems.

Although @FreeCodeCamp seems the best option available it may not be for everyone. There are crazy people like me that enjoy reading the spec and technical blogs. In my case I only do this with the idea that I may found something interesting that I could use to torture my coworkers. (◕‿◕)

Why ? WHYYY ? (ಥ_ಥ)

This obsession for JavaScript led me to read the series of books “YDKJS” from Kyle Simpson. I have read many JavaScript books among which I highlight:

None of them has enriched me as much knowledge as the books from Kyle did. So when I noticed that this guy have many courses available I did not think twice and I went for them.

This is how I discovered Frontendmasters. I don’t know how these guys did but they were able to convince a lot of great professionals to share his knowledge. ( and I don’t only speak about Kyle )

The platform offers a plethora of courses that touch a great variety of topics :

  • Tooling, html5, CSS3, node, react, backbone, angular, d3, webpack, …

There are many topics to list them all , better see it with your eyes:

After spending time through the courses I concluded that I want to be doing this all day. I want to be a developer, a JavaScript developer.

So I decided to explore the different alternatives available at the moment. After reading feedback from people attending to bootcamps I realized that I want that.

The crude reality is that these programs aren’t low budget and not everyone can afford it.

What could I do ?

While reading the experiences from students of these bootcamps I noticed something interesting. Frontendmasters already cover all the topics touched in these bootcamps in form of courses.

I told to myself : What are you waiting for ?

I started to put together material with the idea to create my own program. One based on these bootcamps ( hackreactor ) but affordable.

The result it’s a 13 weeks program where at least 40 hours at week are necessary to complete it .

Most of the material of the course comes from @FrontendMasters with exception of some videos, blogs and books that I found useful.

But wait, thats not enough to replicate the experience that these programs offer. I need to interact with other people, do pair programming, group projects …

Long story short, I convinced some of my friends to join me in this adventure.

Well, I stop to bore you and I leave you with the syllabus but before that, just a couple of things:

  • At the bottom of the document I have added a list of extra resources. Most of them are security related.
  • In case you decide to follow this course and want to do this accompanied, DM me on twitter @___aerox___ .We’ll start this Monday (25/07/2016).

Week 1

We will spend this first week by learning in depth the language.

Some of the work that we’ll do include rewriting part of the jQuery and underscore libraries.

Apart from that we’ll familiarize ourselves with git, github and Chrome DevTools.

############################################

  • Git & github

http://rogerdudler.github.io/git-guide

https://try.github.io/levels/1/challenges/1

  • The JavaScript tutorial ( Ilya Kantor )

http://javascript.info/

  • From Fundamentals to Functional JS( Frontendmasters )

https://frontendmasters.com/courses/js-fundamentals-to-functional/

  • EXTRA WORK #1

Choose 5 more functions from the underscore library and code them.

  • Chrome DevTools

http://discover-devtools.codeschool.com/

https://www.youtube.com/watch?v=x9Jlu_h_Lyw

https://www.youtube.com/watch?v=QU1JAW5LRKU

  • Advanced JS fundamentals to jQuery ( Frontendmasters )

https://frontendmasters.com/courses/javascript-jquery-dom/

  • EXTRA WORK #2

Choose 5 more functions from the jQuery library and code them.

  • JavaScript in depth series ( Dmitry Soshnikov )

http://dmitrysoshnikov.com/tag/ecma-262-3/

http://dmitrysoshnikov.com/ecmascript/javascript-the-core/

http://dmitrysoshnikov.com/ecmascript/es5-chapter-0-introduction/

  • Advanced JavaScript ( Frontendmasters )

https://frontendmasters.com/courses/advanced-javascript/"rs.com/courses/advanced-javascript/

  • EXTRA WORK #3

Imagine you are an interviewer. Think in ten questions about JavaScript that will help you to determine the skill level of a candidate. Share it with a friend that is also doing the course and answer his questions.

Week 2

This week we’ll focus on three big topics:

  • Algorithm and data structures
  • Functional programming
  • Design patterns

To ensure we understand all these topics we’ll:

  • Practice with challenges from Codeeval
  • Write about a design pattern

############################################

  • Algorithms and data structures ( Frontendmasters)

https://frontendmasters.com/courses/computer-science/

  • EXTRA WORK #4

Do some sponsored challenges from https://www.codeeval.com/ via pair programming.

  • JavaScript inheritance patterns

http://davidshariff.com/blog/javascript-inheritance-patterns/

  • Functional programming

https://frontendmasters.com/courses/functional-js-lite/

https://frontendmasters.com/courses/functional-javascript/

  • JavaScript design patterns

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

  • EXTRA WORK #5

Choose a pattern you liked. Think about its benefits over other patterns and when is appropriate to use it.

Week 3

This week it’s going to be entertaining. We are going to learn about:

  • Performance and its dark side
  • Offline applications
  • Websockets
  • D3

This will prepare us for:

  • Solve the n-queens problem using service workers.
  • Develop a simple game based on D3 and other technologies like web sockets.

############################################

  • Performance and service workers

https://frontendmasters.com/courses/website-performance/

https://vimeo.com/163113209

http://www.html5rocks.com/en/tutorials/offline/whats-offline/

https://www.youtube.com/watch?v=d5_6yHixpsQ

http://www.html5rocks.com/en/tutorials/service-worker/introduction/

https://github.com/delapuente/service-workers-101

https://jakearchibald.com/2014/offline-cookbook/

https://www.youtube.com/watch?v=cmGr0RszHc8&feature=youtu.be

  • N-queens problem

https://en.wikipedia.org/wiki/Eight_queens_puzzle

  • EXTRA WORK #6

Solve the n-queens problem with service workers

  • HTML5 API’S and socket.io

https://frontendmasters.com/courses/realtime-html5-nodejs/

  • Data visualization with D3

https://frontendmasters.com/courses/interactive-data-visualization-d3-js/

  • EXTRA WORK #7

Do a game with D3 and socket.io

Week 4

This week we’ll leave behind our spagethi code. It’s time to learn about all these MVC frameworks. After finishing the week we’ll have an idea of how frameworks like React and Angular works.

We’ll also be confortable with backbone, TDD and ES6.

To achieve that last statement we’ll reimplement part of the work of the first week using ES6.

############################################

  • Backbone and TDD

https://frontendmasters.com/courses/backbone-js-in-depth-testing-mocha-sinon/

https://addyosmani.com/backbone-fundamentals/

  • MVC frameworks

https://frontendmasters.com/courses/javascript-frameworks-showdown/

  • ES6

https://frontendmasters.com/courses/jsnext-es6/

https://hacks.mozilla.org/category/es6-in-depth/page/2/

https://www.youtube.com/watch?v=QnqFq-lcJ1I

  • EXTRA WORK #8

Rewrite your underscore and jQuery libraries using ES6.

Week 5

In the fifth week of the course we’ll focus in JavaScript on the server.
Among other things we’ll learn:

  • How the Event loop works.
  • How to structure our APPs in a manner that we can share code between the client and the server.
  • How to develop our own APIs using Express.

############################################

  • Event loop

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

https://www.youtube.com/watch?v=8aGhZQkoFbQ

  • Node.js

https://frontendmasters.com/courses/organizing-javascript/

https://frontendmasters.com/courses/building-web-apps-with-node-js/

https://frontendmasters.com/courses/api-design-nodejs/

  • EXTRA WORK #9

Take time to think about all the material learned. Ask yourself questions, practice and review old notes.

Week 6

The sixth week of the course is gonna be the last week where we’ll learn new technologies.

It’s gonna be intense but we’ll touch:

  • Grunt & webpack
  • React
  • Flux
  • Redux
  • React native
  • Meteor

############################################

  • Workflows and tooling

https://frontendmasters.com/courses/workflows-and-tooling/

  • React & flux

https://frontendmasters.com/courses/react/

https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.z1qdiurb5

https://frontendmasters.com/courses/modern-web-apps/

  • React native & redux

https://learnredux.com/

https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.dpq4g7dk0

https://frontendmasters.com/workshops/react-native/

  • Meteor

https://frontendmasters.com/courses/meteor/

Week 7

From this week, we’ll have more freedom to choose in what we want to work. So there are no more brief overviews for the following weeks.

The syllabus will only contain some tasks to do these weeks.

############################################

  • EXTRA WORK #10

Imagine you’re interviewing a candidate. Thinks in ten questions that will allow you to determine his knowledge on the topics that we have learned these weeks.

  • Individual project

Do whatever you want in 40 h

Week 8

  • Explain your project to others
  • Listen other people about its creations
  • Continue the project from other person

Week 9–10

  • Do a project with another person

Week 11–13

  • Do your final project with a group of three people
  • Prepare for the job interview

https://frontendmasters.com/workshops/algorithms-data-structures-js/

http://www.hiredintech.com/

https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95#.h43z51o6u

https://medium.freecodecamp.com/salary-negotiation-how-not-to-set-a-bunch-of-money-on-fire-605aabbaf84b#.75xz4zut8

https://medium.freecodecamp.com/ten-rules-for-negotiating-a-job-offer-ee17cccbdab6#.g8u1wnyw8

  • Practice ( sponsored challenges )

https://www.codeeval.com/

  • Search for jobs:

https://angel.co/

https://jobs.github.com/

https://www.glassdoor.com/index.htm

http://frontenddeveloperjob.com/

https://www.remotelyawesomejobs.com/

ADDITIONAL RESOURCES

  • How the Web Works

http://preethikasireddy.me/?p=174

http://preethikasireddy.me/?p=231

http://preethikasireddy.me/?p=278

  • How Browsers work

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://vimeo.com/44182484

https://www.youtube.com/watch?v=dibzLw4wPms

  • Browser Security

https://www.youtube.com/watch?v=1uflg7LDmzI

https://code.google.com/archive/p/browsersec/

https://www.nostarch.com/tangledweb.htm

https://browserhacker.com/

  • iOS Browsers Security

https://www.trustwave.com/Resources/SpiderLabs-Blog/Exploring-and-Exploiting-iOS-Web-Browsers/

https://labs.mwrinfosecurity.com/blog/continued-adventures-with-ios-uiwebviews/

http://es.slideshare.net/lpilorz/webview-security-on-ios-en

https://reverse.put.as/wp-content/uploads/2015/11/D2T2-Exploring-and-Exploiting-iOS-Web-Browsers.pdf

https://cure53.de/pentest-report_onion-browser.pdf

http://browser-shredders.blogspot.com.es/

  • Android Browsers Security

http://www.cis.syr.edu/~wedu/Research/paper/webview_acsac2011.pdf

https://www.youtube.com/watch?v=P5R4KeCzO-Q

  • Web Security

https://www.youtube.com/watch?v=_1C62Twf0vs

https://www.amazon.es/Web-Application-Obfuscation-Evasion-Filters/dp/1597496049

https://www.youtube.com/watch?v=dWLpw-7_pa8

http://eu.wiley.com/WileyCDA/WileyTitle/productCd-1118026470.html

  • Machine learning

https://medium.com/@ageitgey/machine-learning-is-fun-80ea3ec3c471#.jihaxzafy

https://medium.com/@ageitgey/machine-learning-is-fun-part-2-a26a10b68df3#.xrkyf9du4

https://medium.com/@ageitgey/machine-learning-is-fun-part-3-deep-learning-and-convolutional-neural-networks-f40359318721#.x0c3pzqmv

https://www.burakkanber.com/blog/machine-learning-in-other-languages-introduction/

https://www.youtube.com/watch?v=M5glN6XjDv8

http://ciml.info/

  • Twitter lists

https://twitter.com/___aerox___/lists/javascript

https://twitter.com/___aerox___/lists/web-security

--

--

Eric Ruiz

JavaScript nerd ٩(⁎❛ᴗ❛⁎)۶ | Web Security