Alpha of freeCodeCamp's React + Redux challenges is now live

@bonham000 - This is a great Tutorial - I am inspired to continue to learn programming grant I will be able to contribute to Free Code Camp and other open source projects… All the fact that you included ES6- great… I will let you know if there are changes which will help to improve the project…

1 Like

Great job! I have been waiting for these for a long time :)!!

I will work through these (diligently and quickly, I hope), and come back with any feedback! Currently still on React 07 and only issue I found so far are the ones previously mentioned in the thread.

Thank you thank you thank you! (Is it React that pops up the preview of my post on the right?!)

Redux 06 has a typo on the last test, the word ‘LOGIN’:
If the action is not of type ‘LOGIIN’, the store returns the current state.
EDIT: I submitted a pull request fixing that typo and one other :slight_smile:

Thank you guys for all you do… I’ve learned so much through FCC

1 Like

Does the app work/function offline? I am looking at a week of being offline starting tommorrow, this will keep me very busy :smile: :blush:

Thank you :smile:
Quincy and FCC team Once again Free Code Camp comes through with awesomeness! Truly appreciated by me please keep up the GREAT work.

1 Like

Thanks for the great job! Began to work through the challenges :smile_cat:

Preface: I’m a software engineer and have worked with React professionally before. The following is a critique on the execution of this tutorial, and not the content. I help with the local FCC meetup group and have done around ~150 challenges on the site solely to get a grasp for what style the curriculum is taught in to better answer questions from those that attend the meetups.

I only made it to the second challenge, because if this was live on the site, I probably wouldn’t have even made it past the first one.

This tutorial breaks all the good conventions established elsewhere on FCC. There are patterns that are used in most of the challenges on the site, and should not be deviated from.

  1. Reading the description and instructions are optional.
  • If I have to look at the main instructions, that’s a failure on the part of the person who designed the challenge.
  1. Code editor has a working example and a broken example for you to fix. The example code can be read and understood, then followed by a slightly different copy of the code missing the section that you need to complete to prove you understand the concept being taught.
  • The first challenge has you remove existing code and replace it with something else. I’ve not seen this pattern before on any other challenge, and that’s because it’s bad. Don’t do that. I assumed that you wanted <div><h1></h1></div>, why else would there be a <div></div> there at all? Have two different variables one saying var example = <p>Hi camper</p> and the other just being var jsx = //Write your code here. Something like that.
  1. All you should have to read is the tests. The descriptions of what needs to be done and the sample code should be all you need to figure out what to type. I’ve made it through over 150 challenges without having to read anything other than the code and tests, these should be no different.
  • The second challenge literally just says “//Write some stuff here”. How does that help someone who is trying to learn? What utility does it offer?

As for my background I tried to learn react.js with documentation and made 3 FCC projects (Build a Markdown Previewer, Build a Camper Leaderboard, Build a Recipe Box) but stuck on Build the Game of Life challenge as it seems very hard in compare of first 3.
I now stuck on React 28 challenge and try to figure out whats wrong in my code with out looking to solution code.
I want to give some feedback about debugging:
Very hard to see were error is without any error feedback. If error in syntax we can see it at console tab in Chrome Developer Tools, but if it in logic I cannot figure how to debug. Theory in the course doesn`t says anything on it. As I googled, I installed React Tools for Chrome and tried to find out logical problem there but as I understood all tasks are made as a react components and state of all tasks is there and it is hard for me to figure out what task I am doing now. So my suggestion is to make some debug challenges, and/or give camper error feedback from console as in other JavaScript challenges and/or give components some meaninful names including task number. For me it is hard to figure out what Counter component should I debug for challenge 28.

I agree with you about this. The way that the code is being tested/live-rendered makes it difficult to show the console messages that you would normally see and because this isn’t the final environment the challenges will exist in we will probably leave this alone for now and consider improving it once the content is integrated into the FCC platform.

Thanks for your comments. We were definitely aware of the goal of making challenges short, quick to understand, and easy to comprehend from the tests alone when writing these challenges. In fact, I think most of the challenges could probably be solved just by reading the tests especially if someone is already familiar with React. The tests explain very precisely what each challenge is looking for.

However, unlike a lot of the content that currently exists in the FCC curriculum, we found that these challenges required more explanatory text. For example, there’s no way a newcomer to React could solve a challenge about props just from a test and without some explanation of what props are and how they are used. We tried to explain new topics as completely as possible while also being brief. Telling someone to add props to a component without explaining clearly how and why to do this would probably result in a worse learning experience.

Finally, these have been undergoing heavy revision since this was posted as we gained feedback from the community. The second challenge, for instance, now reads // write your code here in the code editor. If you have more feedback such as what you mentioned about the first challenge, please post it in the GitHub Issues for this project so we can take a closer look at it.

1 Like

Are you considering teaching Elm in the future? It does virtual DOM like React and state like Redux. Redux’s creator says that Redux is “a pale imitation of Elm” (from ~11:00). I was doing React + Redux before I switched to Elm and I’ve not needed to go back.

1 Like

But Elm learning resources aren’t as much as say, React, plus Elm syntax is a bit weird.

Elm’s official guide, TodoMVC and examples, and Slack chat have got me as far or further than I was with React + Redux.

Sure, there’s a new syntax to learn, but I think it’s cleaner. By the way, the syntax is ML-family, so it’s in the company of Haskell, which might interest those who are interested in functional programming in general.

Does anyone know when will these challenges become part of FCC curriculum?
I would like to able to save the progress I’ve made. :slight_smile:

The hope is soon but there is no firm deadline. This depends on a) finishing the QA process (currently unfinished) and b) replicating the ability to transpile, render, and test React/JSX code in the current FCC platform (not done yet).

I agree that Elm is awesome and would be very interesting to have some tutorials/challenges on in the future. My guess is that React’s large market share, vast ecosystem of tools, and support from a large company (Facebook) have made it FCC’s choice front-end library to teach, but that’s not to say alternative technologies don’t deserve attention as well (e.g. Vue, MobX could be added along with Elm).

Hey Quincy, @bonham000, and @no-stack-dub-sack! Thanks a TON for putting these together.

WARNING: LONG POST INCOMING!!!

Some background:
I started learning React last Friday (the 16th), after I got through most of the Intermediate dev projects, and wanted to get a head start on the Data Viz section. Most of the online tutorial out there are pretty newbie non-friendly. The best ones I found were
The New Boston, and Stack Overflow posts. Even the Facebook Tic Tac Toe tutorial, and explanations were not the best in my experience because most of them left me with too many questions unanswered.

On Monday someone from our local FCC group posted that these were up and I’ve been working on them on and off through the week, and I can say with certainty that these are the most newbie friendly tutorials/walkthroughs of React that I’ve found.

I figured I would chime in an provide a set of users stories for each problem letting you know where pitfalls/pain points were in understanding for a relative newbie to React.

I’ll likely also do the Redux tutorials here at some point, and provide feedback on those too.

I’m assuming this is qualified under ‘general feedback’, but will open up issues if need be.

Thanks again for all your hard work! :slight_smile:

TL;DR(AKA Top 3 issues that frustrated me as a Newbie):

  1. Lessons 25, 26, and 27 covering ‘this’ are REALLY confusing/frustrating.
  2. How to render components and pass properties via custom HTML tags and attributes respectively could be explained way better.
  3. Parent/Child components were confusing for the longest time.

Trying and reviewing React Alpha Tutorials

##Lessons


Lesson 1: Create a simple JSX element

    // No major issues with Lesson 1

Lesson 2: Create a simple JSX element

// Issues with Lesson 2:
  1. The word component is used here at the end of
    the Instructions section, but I don’t really have a good context for what ‘component’ means, nor are any questions resolved with a "we will cover components in future lessons

Lesson 3: Add Comments in JSX

// No issues with Lesson 3

Lesson 4: Render HTML Elements to the DOM

// Issues with lesson 4
  1. There is still no understanding of what a component is or could be, I understand not want to overwhelm students, but bringing up terminology that someone is uncertain with multiple times stops me and leaves me asking questions before I press on

  2. The sentence: “select the target DOM node with the getElementById() method on the document object” is confusing. Just write document.getElementById()

Do this because:

A. I’m thinking that I’m already passing things to the document object with ReactDOM() (Voice in my head as a student: It stands for Document Object Model therefore I must be doing something on the document object)

and

B: Syntax is easier to repeat correct the first time, when it is seen correctly ( e.g. Do as I do ).


Lesson 5: Define an HTML Class in JSX

// No issues with lesson 5

Lesson 6: Self closing JSX tags

// No issues with lesson 6

Lesson 7: Create a stateless functional component

// No issues with lesson 7

Lesson 8: Create a React component

// Issues with Lesson 8
  1. As a student questions immediately come to mind:
    A. Why are there 2 ways to create components? Is one better than the other?
    B. What is ES6? Why does it matter?
    C. Why is there a render() here? Can’t I just use return ( /* code here */)

Lesson 9: Create a component with Composition

// Questions about Lesson 9:
  1. The following sentence seems imprecise:
    “You can use one or more components in the render() method of another one.”
    the ‘another one’ seems ambiguous in that ‘another one’ in this instance could refer to another component, or another render method.

  2. Ok, COMPONENT COMPOSITION WAS CONFUSING FOR THE LONGEST TIME. It was confusing because no one really STRONGLY made the distinction between a Component, and calling a component. This is why in JS there is a distinction between a function, and a function call, because both refer to VERY specific operations/uses. There is a small 2 sentence paragraph about this in the intro, but it needs to be bolded that REACT ALLOWS YOU TO CREATE CUSTOM HTML TAGS AND IT’S HOW YOU UTILIZE/CALL COMPONENTS.

  3. I really got confused here because in future lessons tags like are called components, but to me these are just HTML tags, how can they be components? There needs to be a STRONG reinforcement that JSX/React basically allows you to create custom HTML tags.

  4. I’m also REALLY confused why arrow functions are being used here. I’ve never seen the arrow function before this lesson, and it confuses me/makes me wonder if there is something else going on that i’m missing. It is refred to as a ‘functional component’ in the Instructions, as a student I’m wondering if is meant i ‘functional stateless component’

  5. After sitting through a bunch of React tutorials I’m still wondering about ParentComponents and Child components, and how they interact. No tutorial I’ve found, really seems to drive this point home, or how to distinguish between them. It seems strange to introduce the concept of parents/children here without FULLY breaking it down/explaining it, ESPECIALLY if you’re going to use the concept in future lessons.


Lesson 10: use React to Render nested Components

// Issues with lesson 10
  1. It would seem easier to introduce the analogy/concept of nesting components in lesson 9, to make it easier for the student to conceptualize/understand what composition/composing is.

  2. Yeah I’m still really confused on Parent/Child components, because all of these seem like separate classes/functions, HOW are they child/parent components and explain WHY child component is that way. After going through lesson 11 I now understand (or seem to understand) that child components, are components that are rendered inside of another component, but that’s not really highlighted in this lesson.

  3. There needs to be MUCH more direct verbage drawing attention to what a child component is with something in an Intro similar to:
    " When we render one component within another, this is known as making it a child component, and we do so by creating a custom HTML tag (for example inside the parent component’s render function"


Lesson 11: Compose React Componets

// No issues with lesson 11

Lesson 12: Render a class Component to the DOM.

// Issues with lesson 12

The sentence/syntax:

Here’s an example of the syntax: ReactDOM.render(componentToRender, targetNode)

Is a bit strange because I can understand ‘componentToRender’, but because of my general ignorance with React I originally assumed that targetNode was something I could render to.


Lesson 13: Write a React Component from Scratch

// No issues with lesson 13

Lesson 14: Pass a string to a stateless functional component

// Issues with lesson 14

This section in the Intro:

The code editor shows a functional component 
called ReturnUsername that accepts an argument 
called props. You can access props from within 
the component using dot notation. For example, if
you passed in a prop called birthday, you would 
access its value by writing props.birthday. In 
JSX, that value is JavaScript, so you write it as
{props.birthday}.

In order to define a props name and value, React
uses custom HTML attributes. The attribute name 
is the prop name, and the attribute value is the 
prop's value. For example, to pass a child 
component a prop called birthday, when you 
compose the child component within the parent, it
could look like this: <Child birthday="Jul 6th, 
1986" />. ""

NEEDS to be hammered harder. Here’s why:

  1. As a someone coming from vanilla JS I’m SUPER confused why what were previously called arguments, are now being universally refered to as props.
  2. The usage of custome HTML attributes is also REALLY foreign, especially since we’re using custom HTML tags to call/utilize/render components.
  3. The last sentence is confusing because previously examples have used as an example piece/block of code, what could make this more clear is

A. When referring to ‘child component’ in the last sentence refer to it as: ‘the component Child’, or make it even more clear with: ‘ChildComponent’ to drive the distinction home.

or

B: just refer to it as MyComponent.

Because this is so integral to everything else I would STRONGLY recommend at least to changes here:

1.  Cut down the example that is being used here 
to allow students to focus more on how this 
works.  E.G. Simplify the code more
2.  Make this multiple lessons to reinforce it.  

Something like this as an introductory lesson:

class MyComponent extends React.Component {

 render() {

return ( <div> 
    <h1> Hello there {this.props.name} {this.props.newName}
    </h1>
    
    <h2> You are number {this.props.number}!</h2>
    </div>


)

}
}

ReactDOM.render(<MyComponent name="awesome" 
newName="Quincy" number={1}/>,document.getElementById('myDiv'));

Makes it MUCH easier to understand, because I can draw a 1 to 1 parallel between what is named, and what is being utilized. I understand that it possibly introduces ‘this’ before it should be explained, but I think that’s a small price to pay.


Lesson 15: Pass an array as props

// No issues with lesson 15

// Issues with son 16
  1. This was a little confusing because I thought that the only thing I could put below a component is ReactDom.render()

Lesson 17: Override default props

// No issues with lesson 17

Lesson 18: Use PropTypes to Define the Props you Expect

// Issues with lesson 18
  1. Ok, this is confusing because it should be made more clear that what is being checked is not neccessarily the quantity prop, but the value associated with the quantity key, because this is what I initially entered:
    Items.propTypes = {React.PropTypes.number.isRequired
    };

Lesson 19: Access Props using this.prop

// Issues with Lesson 19:
  1. Thank you for providing a solid explanation of WHY we use the this keyword…SOOOOOO many tutorials don’t cover it at all

  2. The following set of sentences are unclear:
    “Render an instance of the ReturnTempPassword component in the parent component ResetPassword. Give this component a prop of tempPassword and assign it a value of a string that is at least 8 characters long.”
    The word ‘this’ in the second sentence seems like it could refer to either the ResetPassword component OR the ReturnTempPassword component.


Lesson 20: Review Using Props with Stateless functional components

// Issues with Lesson 20
  1. YES!!! The Terminology Review is ABSOLUTELY ON POINT, and should be leveraged more heavily/often/earlier in the lessons to make things more clear/explicit for students.

Lesson 21: Create a Stateful Component

// Issues with lesson 21: 
  1. The only thing I might recommend is to add more detail to the example object, in case people don’t remember/recall the format of JS objects

Lesson 22: Render State in the UI

// Issues with Lesson 22:
  1. This is a near perfect intro block, it answers the questions of WHAT has to be done, HOW it has to be done, and WHY it has to be done

Lesson 23: Render State in the UI another way

// Issues with Lesson 23
  1. This is a perfect lesson, short, simple, descriptive, to the point, and explains everything the correct amount.

Lesson 24: Set Stat with this.setState

// Issues with lesson 24

The instructionsuse ‘this’ 3 times in one sentence here:

"
You call this method within your component class like this: this.setState(), passing in an object with key-value pairs.".

One of those times is as a keyword, using ‘this’ so many times is confusing. A better re-write would be:

“You call the setState method with your component class like so: this.setState()…”

  1. If the instructions tell me that I should not modify state directly, please provide a concise reason why. Will it break the app? Will it display incorrectly? Is it a security issue I should be aware of?

  2. The first 2 sentences of the instructions here feel like unnecessary information.

  3. An example of what this.setState looks like would work REALLY well here, because as a student I see this.state = { / code here / }, and assume that this.setState() is similar, to the point where I could see many students falling into the trap of typing: this.setState() = { / code here / }

Lesson 25: Bind ‘this’ to a class method

// Issues with lesson 25 (IHaveNoIdeaWhatsGoingOn.jpg)
  1. Ok, this lesson intro is terribly confusing. I’ve read the intro half a dozen times now and I still can’t really make sesne of it, the my main problems are:

A. The first paragraph is unclear. What is meant by define methods ‘on’ my component class? Do the instructions mean define methods ‘within’ my component class?

B. Next it’s written that:

“A class method needs to use the this keyword so it can access properties on the class (such as state and props), inside the scope of the method”.

The second sentence is unclear because of the word ‘properties’ in this context getting conflated with props/state. It may be better to refer to ‘properties’ as data or information.

Also in this sentence saying ‘on the class’ is confusing, does the sentence mean ‘we can define methods that are part of the class’. This is only partially resolved by the language following the parenthesis of ‘inside the scope of the method’, but also feels like a lot of jargon/buzzwords to throw out in 2 sentences that are not direct/clearly explicated.

  1. The whole second paragraph feels messy.

A. The first sentence makes no sense, what does it mean to bind ‘this’ to a class method? What does that do, and why does that matter? It seems like the instructions try to explain that in the last sentence, but even that sentence makes things less clear.

B. In the last sentence when things try to get cleared up, I get lost again with:

‘this refers to the class and will not be undefined’.

??? Please unpack that sentence more for me. I don’t understand why the ‘this’ keyword is so important, other than I need to use it when I call props or state in class based components.

C. Ok, I stepped away for an hour, grabbed lunch, and came back, and re-read all of the instructions/intro…I’m still lost.


Lesson 26: Bind this with an arrow function

// Issues with lesson 26
  • I’m sure that if the previous lesson were broken down into further pieces, but I still don’t know what ‘this’ really is or why it matters.

  • I’m also confused by what is meant by ‘context’ in this instance, an example would REALLY help here.

  • Another example of an arrow function would also go a long way here.


Lesson 27: Use State to toggle an element

// Issues with lesson 27
  • Ok, I built an arrow function…but I don’t know why I’m building an arrow function, or why I need to bind this…I have no doubt my lack of insight is because of the 2 previous lessons.

Lesson 28: Write a Simple Counter

  • Ok, after writing methods from before, and seeing how they were implemented in the solutions prior, this challenge makes sense

Lesson 29: Create a controlled input

// Issues with lesson 29
  1. Ok, this was a lot to handle, but manageable, I just had to break everything down into pieces, which was possible because while there was a fair amount of jargon, it was all relateable, and clearly built on things that came before. I’m REALLY thankful that the tests are there
  2. The first sentence of the second paragraph is confusing, is it a ‘parameter’ or is it a ‘prop/property’?

Lesson 30: Create a Controlled Form

// Issues with Lesson 30
  1. Ok, this one pushed me just past my limit of where I felt that I was doing too much, and took me about a half hour or so to work through completely.

Lesson 31: Pass state as Props to child components

  1. Ok, I’m confused on how Unidirectonal data flow works… Where is props/the argument pulling it’s data from???

  2. Ok, I spent about 20 minutes playing around with this in order to figure it out. I added a second key/value pair in the state object in order to make more sense of it, here’s how it makes sense in my mind:

A. We declare Navbar with a custom HTML tag in the React component MyApp render section.

B. In this custom HTML tag we add the custom attribute of name.

C. The custom name attribute, holds the value of the object of MyApp known as this.state, specifically it holds the value of key name. the custom name attribute holds this value through what we have covered in previous lessons by utilizing this.state.name.

D. Here’s where the trick comes in. Notice that the Navbar component does not have a name attribute, ONLY the Navbar custom HTML tag has the name attribute.

E. In the Navbar component we are able to access the custom attributes, but we access them because they were passed in via props (via background magic I assume). Sooooo, we use {this.props.ATTRIBUTENAME}

3.Nowhere in previous lessons or even in this one, does it feel like the link between attributes and props gets fully articulated which leads to confusion.


Lesson 32: Pass a callback as props

// Issues with Lesson 32:
  1. Ok, I was able to figure this one out, but only after some guesswork. The way the following sentences are constructed are confusing to me:
    “Add GetInput to the render method in MyApp, then create a prop called input and pass the inputValue from state to it. Also create a prop called handleInput and pass the input handler handleChange to it”

A. What do is meant by ‘create a prop’??? I had to guess that what was meant by this was: “create a custom attribute”.

B. It is really easy for me at this point to conflate prop and state, so when the instructions say ‘create a prop and pass inputValue from state’, I’m confused as to whether I should be typing {this.props.inputValue} or {this.state.inputValue} because both would seem to be valid given how the preceding sentence is constructed.


Lesson 33: Use the lifecycle Method ComponentWillMount

// No issues with lesson 33

Lesson 34:

// No issues with lesson 34

Lesson 35: Event listeners

// No issues with lesson 35

Lesson 36: Manage updates with lifecycle methods

// No issues with lesson 36

Lesson 37: Optimize Re-renders with shouldComponentUpdate

// Issues with lesson 37
  1. hrmmmm why is it not this.nextProps.value? Ohhhhh, is it becuase nextProps is already in the shouldComponentUpdate function? Hrmmmm, so I guess the question still is: when is ‘this’ used, and when is it not/what is the purpose/function of ‘this’?

  2. Why can I not use an if statement here? I know from other tutorials that React is picky about using if/else statements, but it’s the first thing that comes into my mind from JS

  3. Ok, I’m curious as to how the shouldComponentUpdate method stops the render from happening unless a condition is met, but for now I’ll take it as React Magic™


###38: Introducing Inline Styles

// No issues with lesson 38: 

Lesson 39: Add Inline Styles in React

// Issues with lesson 39
  1. It just seems strange that the entirety of the border property/selector/value has to be a string inside the JS object

Lesson 40: Use advanced JS in React Render Method

// Issues with Lesson 40
  1. Hrrmmm, ok. On the handleChange method what is ‘e’ and where does it come from.

Lesson 41: Render with an if/else condition

// Issues with lesson 41
  1. Lol, I had hard time keeping track of closing brackets/parens with this one.

Lesson 42: use && for a more concise conditional

// Issues with Lesson 42
  1. I think it would be useful to juxtapose what a traditional if statement looks like against the && operator, because the way that the && operator is presented seems completely foreign to me.

A. The line of code: {condition &&

markup

}, makes me think that I need to write { if (this.state.display) &&

Display

}.


Lesson 43: Return null to prevent rendering

// Issues with Lesson 43: 
  1. This one makes sense now that I understand how properties work, and can remember that vanilla JS goes BEFORE the return statement

Lesson 44: Ternary operator

// Issues with Lesson 44:
  1. There REALLY needs to be a refresher on ternary operators and what they look like here, especially if/when chaining them together.

  2. I peeked at the solution code, reloaded the seed, and then spent a good 20 minutes trying to figure out how to duplicate a chained ternary operator, which I was able to do based off of this stackoverflow post


Lesson 45: Render Condtionally from props

// Issues with lesson 45: 
  1. Why is there, after the lesson with ternary, a line of code showing what ternary is??? That seems REALLY out of place/late:
    (condition ? expr1 : expr2)

  2. This is the first lesson in a while where I felt like I had a tenuous, but OK grasp on things and was able to piece everything together to make it work, because the lessons seem to either fall in the category of IHaveNoIdeaWhatImDoing.jpg or Ok, I get what this is saying.

This lesson is a nice balance between those that made me struggle for a bit and feel accomplished when I saw that all the tests passed.


Lesson 46: Use Array.map to dynamically render elements

// Issues with lesson 46
  1. The first sentence of the second paragraph in the intro seems strangely constructed:
    “Let’s let our example, in this case, be a simple…”

  2. An example/reminder of what array.map looks like would be helpful.

  3. It took me about 10 minutes and this page to get to the solution, after wrestling around a bit on what needed to be mapped etc…


Lesson 47: Use Array.filter to Dynamically filter an array

// Issues with Lesson 47
  1. An example of a filter function in action would go a long way here to cutting down the time to work on something like this

Lesson 48: Render React on the Server with renderToString

// Issues with lesson 48:
  1. This one is quick and makes sense, the only thing I hesitated on was being used to using ReactDOM.render( , document.getElementById(‘element’)), because I though i would have to provide something to render to
5 Likes

Whoa giant post @ryan-jr! This looks great! Could you copy this post text and post it all into a new Issue on the project repo so we can go through it there? I would but I won’t easily be able to capture the markdown formatting. Thanks for this extensive feedback!

1 Like

More than happy to! Done!

Ok, after writing methods from before, and seeing how they were implemented in the solutions prior, this challenge makes sense

= > it took an hour to understand how should I do it without looking in the solve

[quote=“ryan-jr, post:37, topic:64492”]
Lesson 30: Create a Controlled Form

// Issues with Lesson 30

Ok, this one pushed me just past my limit of where I felt that I was doing too much, and took me about a half hour or so to work through completely.
[/quote] => it took me 3 min to solve this)