Fill the gap between task 5 and task 6 about frontend HOT 22 CLOSED

Scope and Context could be added as well, as junior developers often doesn't know what is this keyword exactly and how to work with it properly

from frontend.

@OleksiyRudenko I have skimmed the pre-course program on more time and it seems that we need to add more practice tasks to pre-course part. FYI - overview as spreadsheet - most tasks include only theoretical courses with quizzes.

My suggestions:

1. add FreeCodeCamp Algorithms course to Task 1 (Linux & WebServers), but extend the deadline for this course till the very end of pre-course or until first big practice task (card game). I think it will be good to mix theoretical courses with some JS exercises. Also it will stir up discussions in chat room. As a side effect we will be able to see average knowledge level of potential students and update main course curriculum accordingly.
2. make FlexBox Froggy obligatory task
3. add some DOM-related task between 5 and 6 (still looking for ideas)

I will make pull-requests for items 1 and 2 tomorrow and do some more googling for item 3.

from frontend.

Early morning freshness brought me a question:
Why do we want to fill the gap?

Two possible alternatives:

1. Make students better prepared to comprehend OOP, which means that OOP module would help to understand them that it is a better tool to resolve a task they tried to solve in some other "innatural" way.

2. Make students to feel it is not so complex in the abstract, giving no problem OOP responds to.

I would vote for option 1.

What does community think?

P.S. I do not deny usefulness of e.g. DOM-related task. Just concerned about the fact that DOM-related task won't help to digest OOP any easier.

from frontend.

@yevhenorlov The course looks like what we need as a primer for OOP course!
Ok, to summarize: we are looking for a task which is

• easier than Cards game to keep students motivated
• good for OOP paradigm to prepare the mindset for OOP course

BTW OOP course is great, but it includes ES5 only, which means, that the course misses important ES6 features (class syntax, block scoping, new Object methods etc.). I think we should make a disclaimer in the task and also I would like to make a short lecture on this topic during offline course.

from frontend.

I guess DOM is even bigger step from intro to JS than OOP

from frontend.

maybe we can add some ES6 / ES Next related features, like Promises, async/await, Set/WeakSet, Map/WeakMap, Generators, async iterators?

from frontend.

I also prefer option 1.

The way I understand it (and this was reinforced by feedback from some of our students), one problem with OOP course was not necessarily the difficulty level of concepts introduced (personally, I found the visualizations for closures and prototypal inheritance extremely useful, IMO they are the best part of that course) but complex language that instructor Marcus Phillips used.

Maybe we can approach this in the same way we did with git - prepend it with one more course on roughly the same topic, but from a different instructor? We can use DOM API as a buffer to keep it interesting (the way Linux course currently serves as a buffer between two git tasks).

EDIT: I will look into this course today, maybe we can use it

from frontend.

I agree, we should add practice before students begin with OOP.
Also, @AMashoshyna is right about the importance of discussion in the chat. Right now it feels like there's no real need to ask for help up until the frogger game in OOP course — we should probably introduce creative tasks earlier.

A couple additions to example by @OleksiyRudenko :

1. As it's the first creative task, we should keep it simple, avoid DOM-related stuff for now. User of the final program will use a simple interface with a console.log output. Possibly add an html template file with <script> tag in place, so that newcomers don't get distracted by implementation.

2. Students submit their results for review, we take a look, point out the most obvious flaws (gently :) ), but instead of us telling them how to fix it they go ahead with the OOP task(s).
   After that, they do the task again, compare the two versions and write a short summary on how (and if) their approach to the problem has changed. After that mentors may review again, this time with suggestions to improve the solution.

from frontend.

Guys, so I suggest three practical tasks, and user can choose which task he want to do.

1. Football game in browser - simple field, and controls by keyups of key arrows. Without something complicate.
   Football by keyups - layout ex.: https://imgur.com/a/ZB8GcVL
   ‎goals:
   ‎a) Student must implement complex centered layout
   ‎b) make css-transitioned actions with ball maked with js DOM
   ‎c) work with style assignment by js element.style.transition, listeners by key-keyups/press/keycodes/etc
   ‎
   ‎2. Interactive menu site without page reloads aka simple spa. Theme may be any, pokemons, phones, site pages aka about/prices/goal/etc.
   Action menu - something like this but not so ugly :)
   https://m.imgur.com/a/SwgFH6c
   ‎goals: complex -
   ‎ a) implementation of layout.
   ‎ b) point is the action-driven menu with actions to load some html content related to this menu item to centered div
   ‎c) used innerHTML, adjacentHTMl, append, create, container listeners, Array.filter etc DOM methods.
   ‎
2. Managing cards with users - simple social list of your friends.
   something like this http://prntscr.com/l61lg0
   Randomuser api with awesome examples and docs: https://randomuser.me
   Goals:
   a) implement list of cards of user friends/pokemons/etc with sidebar where user can sortA-Z/Z-A/filter by value/birthday by pressing predefined filtering buttons.
   b) using simple GET data json from for ex. Randomuser API and manage it as array of objects, draw cards with users.
   c) using Array.sort (text sort, number sort) /filter/slice/splice/shift /map, immutable fundamentals for complex types aka array, listeners, simple request ajax/fetch/xhr/etc

I cannt realize examples now but hope I'll try to make them as fast as possible for gif representation.

This is my suggestions to task 5.1 as practical task before oop.

Also I want to suggest use "codewars" as some milestone and as 9 task.
Goals: user must achieve 7 level (its very simple for medium skilled students, after these practical tasks it will be simple, but got a lot of time.)
7 level achieved after completing 6-8 kata(tasks) in codewars. If you choose simple tasks aka factorial or array sorting reducing - you collect points needed for 7 level very quickly. But its very interesting, helpful in future.

from frontend.

So, this thread already contains several topics each worth its own task:

1. general basic JS skills improvement / algorithmic skills (codewars etc)
2. basic OOP (pre-task for OOP)
3. DOM
4. scopes
5. ES6 / ES Next
6. using server API

We have to split the discussion to keep it manageable.

There is a detached task for No.3

No.5 is partially branched to issues #95 and #101

No.6 looks good paired with Pizza App - part 1 or after PR #103 merged Pizza App: API, auth, routing

My suggestion is to open new issues or PRs on each topic above. Quoting posts herefrom and referring to this issue (e.g. "This issue is an off-spring from #92") will help to both keep discussion history and follow SOLID principles 😉

from frontend.

I'd like to share some thoughts on OOP course. Do we really want to make so much emphasis on OOP as such (not inheritance and object creation in JS, but specifically OOP)? My problems with this approach:

• Learning a programming paradigm is hard and demotivating for newbies, but gets simpler and more effective when you have some experience.
• OOP is not the only way to go in JS. We need to introduce other paradigms as well (functional programming, reactive programming etc.)

I see the OOP course mostly as good explanation of inheritance in JS.

from frontend.

@OleksiyRudenko @AMashoshyna I think you make things more and more complicated, very sophisticated that I present above. I mean NOT OOP projects in general, but very simple as @OleksiyRudenko wrote above - non-DRY dirty newbie code with some inline code as students can write it. About Football - this is the non-OOP game, its only div with an image and absolute position which navigates with keyups - receive new x/y position and that's all. The idea is very simple but it will be the complex task with HTML, CSS, js, and essentials of DOM.
About sorting of received data from randomuser "api" :) - this is also not the WEather app with a lot of problems how to make multiple POST request, stringify it, make js modules? "browserify" them or whatever else - this only already existed ajax GET request which already described in random user docs - and student will be free of bunch of problems with fetch, he only copy an example and receive data - that's all about API. Fine. Next, his job will be focused on managing of Array with data and adaptation data to cards, sorting and filtering and learning array methods. and so on. Please, let's go to more simple logic.
You talk about approaches aka reactive or functional programming when students only read something and try make first steps in code writing. I see in this discussion problem that people whose already has a serious level of programming knowledge tries to inject to simple task all the knowledge which they already know. You must remember yourself one, two years ago and think about that not as from your current position - but from your newbie position when you make stupid things on first steps. We talk here about pre-course tasks, and they will be understandable for newbies. Or we must say that our course is for js middle devs.
Reactive or functional programming we can bring on offline lectures, maybe after a few months, and it's not so needed, because students need good fundamentals, as for me, and interesting vanilla projects. 2017' course was hard, but we need to make it more flexible, consistent, but not more and more difficult.

from frontend.

@AMashoshyna your ideas here will be highly appreciated.

from frontend.

maybe we can add some ES6 / ES Next related features, like Promises, async/await, Set/WeakSet, Map/WeakMap, Generators, async iterators?

Generators and async iterators are redundant, IMO. They must be added as additional articles, but not as part of the main program.

Also, I agree about scope and context, but, also IMO, it is a question of how much from basic JS we want to give. I am not sure, that we must create a program which will target people, who absolutely new in JS or development in general.

from frontend.

@AMashoshyna

ES6 features (class syntax, block scoping, new Object methods etc.). I think we should make a disclaimer in the task and also I would like to make a short lecture on this topic during offline course.

Great idea. Also an opportunity to refresh what the online OOP task was about.

from frontend.

Looked at the course suggested by @yevhenorlov . It is really good and worth adding to our syllabus.

However, it has a significant IMHO flaw, like many other courses. They explain WHAT JavaScript objects are and HOW to create them etc. But they do not explain WHY do we need them, WHY OOP is useful when dev creates e.g. a game.

So, the idea is to give a simple task that will result in heavy copypasting, DRY principles violation, facing object cloning issues etc. Then we add some OOP theory (construction, inheritance/composition, interface implementation et al.) so students understand that there is better life methods out there.

And Udacity course(s) will explain how to enjoy OOP with JavaScript.

Whoever is familiar with OOP basics can skip the task. Anyway it shouldn't be very complicated.

Example:

1. Create objects representing a dog, a cat, a woman, and a man.
2. Each object has legs, hands (optional, naturally), a name, are of certain gender and also can say something appropriate, like "meow" or "Hello Jenny!".
3. Then make do so that user may know each object's number of legs and hands, gender, name and favourite phrase. Work with objects one by one.
4. If you feel enough power create a cat-woman.
5. When completed add your code to the README.md (instead of a screenshot) or publish it as a repo and add the repo URL to your README.md

What do you think?

Then pre-pend JavaScript OOP tasks with an intro article like How to explain object-oriented programming concepts to a 6-year-old, Object-oriented JavaScript for beginners and/or Object oriented programming in javascript

from frontend.

@IgorKurkov

Good suggestions per se.

Here is my understanding of suggested tasks classification:

1. DOM + OOP
2. DOM
3. DOM + using server API

Looks like No.2 fits DOM task, and No.1 could be a task after DOM and OOP tasks completed. It also seems like above somehow intersect with Frogger Game and Memory Pair Game tasks.

No.3 introduces a new concept of API. Every new concept notably makes learning curve steeper, requiring notably more efforts to comprehend and extending overall time of remote phase. May be it would fit intramural phase as e.g. a pre-task for Pizza App?

from frontend.

I also have a suggestion to add to optional tasks list - micro-excel table in browser (very simplified). Description draft. Includes DOM manipulations, DOM events and may be solved in OOP paradigm

from frontend.

Good point. The major idea behind a pre-OOP task I suggested is to give students the experience of possibly bad, non-DRY coding to illustrate why inheritance is useful. The JS OOP task then will explain how to implement inheritance, i.e. how to benefit from prototyping.

Does the above resonate to your thoughts?

P.S. looking at how to split a thread into individual issues preserving the history...

from frontend.

@OleksiyRudenko yes, this approach seems very good to me

from frontend.

1. Make students better prepared to comprehend OOP, which means that OOP module would help to understand them that it is a better tool to resolve a task they tried to solve in some other "innatural" way.

Absolutely agree, we can fill the gap by some another good pre-OOP course instead of some simple DOM tasks. I can suggest Borisov Advance JS course in russian. We have two courses by GIT, but just one Intro to JS. Why?:) Will we focus on git or on JS?

from frontend.

Discussed offline

from frontend.