Auto news on Youtube Aug 20 2017

Hello YouTube, this is Mary from Happy Coder.

In today's video, I'm going to show you how to build a Markdown previewer web app,

which is the first React project from Free Code Camp.

Here on the screen is the final product.

On the left side, it's the editor in which you can type in the content and apply the

markdown syntax to it, on the right side, the rendered text will be displayed simultaneously.

As usual, in the description box, I have added a link to a copy of my codes in a Google Drive

shared folder.

Please feel free to download and examine the codes.

Since this is a React project, of course I'm going to use the react library.

As you may have already known, there are a lot of courses out there instructing how to

install the react library using npm and it requires a lot of configurations.

The app we are building today is rather simple, so I chose to add the CDN links of React and

React DOM from Facebook to this script to save us time on the installation and configuration

process.

I also added the Markdown library via CDN and added its link to the script.

The last thing I added to the script is the CDN link to Babel, which will transcribe my

ECMA6 scripts to ECMA5 so that my app can run on all the popular browsers.

Now we have all the libraries added.

Let's go have a look at my DOM structure which only contains one div tag with the id

"App", as using React allows us to update the DOM dynamically by writing html in JavaScript.

I will explain in details how this is achieved soon.

A very important concept in React is "state".

By updating the state of our components, the DOM will be re-rendered to reflect the change

almost instantaneously.

This means if we link the user's input to the state, we will see the change shown on

the screen as the user is making the entry.

Here is my code of how this idea is realised.

I built a React component called "Editor", it will be called in the ReactDom.render method

at the end of the script and added as a class to the id "app" built in the original

html.

In this React component, I first added a constructor and assigned the initial state "editor"

which contains a key pair: the property is called "content" and the value is defaulted

to a string of a bunch of texts with markdown.

A note here is that using ES6, the "super" method must be used when a constructor is

defined.

Then I built a function called rawMarkup, in which the marked method from the markdown

library we have added via CDN is called to render the strings in the "state" with

proper markdown syntax.

Next, I built another function called "onChange" and it takes one parameter "event".

This function is to be called when the user enters any input.

In this function, I used setState method to update the default value I entered previously

with the user's input.

One thing to note here is that a binding method must be used to make 'this' work in the

callback function, unless you're using the arrow function syntax.

Please refer to Facebook's React documentation concerning this issue.

Once we have the state set up and all the required functions built, it's time to update

the DOM with our desired values.

In the render function, I wrote some html codes to specify what I want to see in the

DOM.

There are 2 things which are worth mentioning.

The first thing is that to take the user's input, the textarea tag should be used instead

of the input tag, as the textarea allows the user to enter multiple lines of texts which

input doesn't.

Secondly, to return the markdown values, I used dangerouslySetInnerHTML and passed the

object "rawMarkup" with a __html key.

This is recommended in the Facebook React reference, again please refer to the official

Facebook react documentation concerning this practice.

This wraps up today's video.

Hope it's been informative.

Please comment, like, share and subscribe to my channel.

See you in my next video.

For more infomation >> Building a Markdown Previewer web app using React - Duration: 4:16.

-------------------------------------------

How To Plan & Build A Capsule Wardrobe With Your Bullet Journal | Project 333 - Duration: 5:52.

hi everybody welcome back to my channel today I'm going to take you through how

I decided to pick the 33 items that go into my capsule wardrobe and I'm also going

to show you how I use my bullet journal to help me do

that if you watched my last video you'll know that I'm trying out project 333 which is basically just

a capsule wardrobe that you have for three months that has only 33 items in

it and that includes outerwear, footwear, accessories as well as regular clothing

so yeah if you haven't check that video out be sure to watch it you can kind of

see why I decided to try Project 333 and just a little bit more information about

the project in general so if you're anything like me and you have like 300

items in your wardrobe and you want to pare down to a capsule wardrobe that

seems really daunting and kind of impossible a little bit so I'm going to

show you how I went through and picked a the 33 items that I'm going to have in my

wardrobe so for a few months now I've been tracking in my bullet journal every

time I wear an article of clothing I write it down in a spread that I created

in my journal so I only put items in there once I've worn them I don't put in

items that I'm planning to wear, items that I really like and I think I'm going

to wear or items I recently bought. I only put down the items that I actually

put on my body and wore for the day

so I've been doing this list for about two

months now and I only have 43 items listed so far so out of like the 300

items I have in my wardrobe in the last two months I've only worn 43 of them so

I was able to tell from that that I was kind of on the right track towards

something like project 333 where I only have 33 items for three months but the

difference with what I was doing and what projects 33 does is that the 32

items include outerwear footwear and accessories whereas I only was writing

down clothing items so things like were on my body so basically this clothing

item spread that I have an ability Arnall I have a couple sections on the

page so I have an item number then I kind of have an item description

so basically what I can use to describe it to recognize it in the list so it

might be a brand of something it might be a physical description a piece of

clothing if it's really unique and then I have a color section and then I have a

category section as well so like pants or jeans of one category dress shirts

and other categories sweaters is another I basically just pick the categories

that make sense to me so this spreads this clothing item

spread is kind of like a master list in my journal and then every month I have a

monthly spread where basically I list out of the outfits that I wore with

these article clothing in the monthly threads per outfit I jot down the date

that I wore pepcid on and then basically what I do is I write down the item

number so if I wore two items I jot down which numbers they are from the master

list so in this case I wore items three and nine because I was saying what I'm

wearing and I just live on the list what numbers they are and then I put the

numbers in the items section and then I also just have a category to raise the

outfit so I can kind of have an idea of how I felt about it so I just do a plus

or minus depending if I liked it or if I didn't so keeping this data is super

helpful for me I originally did it just because I was curious I wasn't really

planning to use it to help me create a capsule wardrobe I just had a lot of

clothing and it was hard to remember what I had worn and what I hadn't worn

so I went through next and kind of wanted to get all my items in my place

so I went through like my big closets I had all my clothing and I picked out all

the items that are on the list and laid them out on the bed and then once I had

everything kind of organized in there and I saw that there was nothing missing

from the list that was in my closet I moved everything to my clothing rack my

clothing rack I was using is kind of an overfull for my closet and then I kind

of turned into a place where I put my most worn items but there were some

items on that clothing rack that worked my list but I just wanted to get all the

items plus whatever extra ones I had onto my clothing rack all at once and

then I could go through and organize and pick out the ones better

so basically once I had all my clothing one place I ordered it by the list in my

village and also basically one two forty three and then anything that was left on

the clothing rack that didn't have a number I just got rid of I didn't try to

think oh should I include this in my capsule wardrobe I just kind of made a

hard cutoff Inlet and said to myself I haven't worn it in two months so I

probably won't use it for the next three months I had 43 items at this point

still haven't added in any outerwear Footwear accessories kept paring down

until I had 33 items of just clothing and then I went and I grabbed all of my

outerwear all of the footwear that I knew I'd want to wear in the next three

months and then any accessories so in my case it was two belts and the purse that

I wear pretty daily basis so yeah after a eliminated the seven items over

putting me over the 33 cap my couple wardrobe was done so this is what it

looks like before and this is what it looks like after so that's how I went

about putting together my 33 items for my capsule wardrobe I hope you guys

enjoyed this video I hope you found it useful comment down below some of the

things that you like best about my process and if you have any tips for me

to maybe through my miss process even more next time I do it let me know I'm

always open to suggestions and make sure to LIKE this video select it and to

subscribe if you want to continue watching my journey through trying out

projects trees and drinks alright guys catch you later bye