These are chat archives for FreeCodeCamp/HelpJavaScript

13th
Feb 2018
Slomon80
@Slomon80
Feb 13 2018 01:26
Hi coders
Stephen James
@sjames1958gm
Feb 13 2018 01:39
@Slomon80 :wave:
FlashHero
@FlashHero
Feb 13 2018 02:51
anyone that can help with redux
Tom
@moT01
Feb 13 2018 02:53
@FlashHero maybe
FlashHero
@FlashHero
Feb 13 2018 02:55
@moT01 so once I get the props using {this.props.propname} on the main component how would I pass those props down to other components, do I just do it the way you would do it in react or how ?
Tom
@moT01
Feb 13 2018 02:57
i suppose you could - or if you're using redux and getting the values from there you can set them in the component you want
Claudio Restifo
@Marmiz
Feb 13 2018 02:57
@FlashHero how's your structure?
You have component that is connected to the store, and is picking up some props?
then you want to pass down this prop to some child?
FlashHero
@FlashHero
Feb 13 2018 02:58

@moT01 @Marmiz after this

export const MainApp= connect(
    mapStateToProps,
    mapDispatchToProps
    )(App)

the props are available to App so how would I pass them down to other components from App

Claudio Restifo
@Marmiz
Feb 13 2018 02:59
@FlashHero pass it as you normally would. But mind the division between presentational and container component

Imagine something like:

compA --> compB --> compC

Where only compC uses the data to render something, while compB holds some methods (like API calls, state mutations and so on...) there's no point in collecting the data in compA then pass it to compB then to compC.

Make sense?

FlashHero
@FlashHero
Feb 13 2018 03:02
@Marmiz so basically you still use the component to pass the data to the other component but you don't mess with the data ?
Claudio Restifo
@Marmiz
Feb 13 2018 03:04
kind of. I just want you to think about your structure and how you plan your component structure will be
FlashHero
@FlashHero
Feb 13 2018 03:07
@Marmiz what if compA is the main component would you still pass data to it or pass it directly to compB
Claudio Restifo
@Marmiz
Feb 13 2018 03:08
@FlashHero directly to compB. If compA has no use whatsoever with those data there's no point to exposing to it.
You can cause accidental re-rendering without even realising :)
FlashHero
@FlashHero
Feb 13 2018 03:09
@Marmiz ok thanks for the help :+1:
CamperBot
@camperbot
Feb 13 2018 03:09
flashhero sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1157 | @marmiz |http://www.freecodecamp.org/marmiz
FlashHero
@FlashHero
Feb 13 2018 03:11
@moT01 thanks for the help :+1:
CamperBot
@camperbot
Feb 13 2018 03:11
flashhero sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 985 | @mot01 |http://www.freecodecamp.org/mot01
Slomon80
@Slomon80
Feb 13 2018 07:21
Guys on on compulsory naturally-induced break. I salute you all. Battling with challenges in JavaScript. But I seem to depend extremely more on the solutions from the hint. Pls can anyone suggest perhaps free materials to deepen my on JavaScript. I don't mind purchasing anyway. Thank you
Simon Cordova
@gbsimon87
Feb 13 2018 09:32
Good morning guys
Markus Kiili
@Masd925
Feb 13 2018 09:36
Morning.
Estdy hongda
@Estdy
Feb 13 2018 13:12
how to convert // in a string??
按照下面的顺序,并且用空格来分割:
反斜杠 制表符 退格符 回车符 换行符 并把它赋值给变量 myStr
var myStr; // 请修改这一行
myStr=' \ \t \b \r \n ';
var myStr; // please code under the in-line commit
myStr=' \ \t \b \r \n ';
Estdy hongda
@Estdy
Feb 13 2018 13:22
thanks everyone, i have had the answer now:
myStr="\ \t \b \r \n"
Slomon80
@Slomon80
Feb 13 2018 16:07
Thanks
Jason Luboff
@JLuboff
Feb 13 2018 16:09
@Slomon80 Markus offered some good solutions there, but with anything, practice is what will help the most. Just keep using it and practicing and trying new things
Christopher McCormack
@cmccormack
Feb 13 2018 16:12
@Slomon80 yeah like @JLuboff @Masd925 said just keep practicing and reading, that's what we all keep doing and it helps strengthen topics we may already be familiar with as well as introduce new topics that can help in future projects. Do lots of exercises, look at other solutions after you solve it yourself, and see what tools you can add to your toolbelt
Jason Luboff
@JLuboff
Feb 13 2018 16:13
@cmccormack :+1:
Christopher McCormack
@cmccormack
Feb 13 2018 16:13
@JLuboff yo
Jason Luboff
@JLuboff
Feb 13 2018 16:13
What up
Christopher McCormack
@cmccormack
Feb 13 2018 16:13
cjlynch12
@cjlynch12
Feb 13 2018 16:14
I <3 mongoose
makes mongo so much easier
Christopher McCormack
@cmccormack
Feb 13 2018 16:14
really good overview, even if you're already familiar like we are
Jason Luboff
@JLuboff
Feb 13 2018 16:14
Ewww... mongoose
Christopher McCormack
@cmccormack
Feb 13 2018 16:14
mongoose is great man!
Did you use it with Models?
Jason Luboff
@JLuboff
Feb 13 2018 16:14
I hate mongoose... only becuase I could never get it working when I first tried and since then I've been efficient with mongo so..
but I do know that mongoose offers some good features
Christopher McCormack
@cmccormack
Feb 13 2018 16:16
Read this article, probably 10 mins
really great examples
Jason Luboff
@JLuboff
Feb 13 2018 16:16
I'm going to. I'm going to be trying to manage my time a bit better at work.
Christopher McCormack
@cmccormack
Feb 13 2018 16:16
One good thing I got out of it was the brief explanation of the module loader works in ES6
Jason Luboff
@JLuboff
Feb 13 2018 16:16
So right now I'm working on my work project for 30 minutes..then going to do some SQL studying for 20-30 minutes, and then I'll have that article after the ;)
Christopher McCormack
@cmccormack
Feb 13 2018 16:17
@JLuboff I have a timer you can use :D https://mackville.net/pomodoro/index.html
Jason Luboff
@JLuboff
Feb 13 2018 16:17
@cmccormack Well isn't that fancy ;) I too have a timer but too lazy to get codepen open haha. Was thinking about it today too, going to rebuild it I think.
Christopher McCormack
@cmccormack
Feb 13 2018 16:18
One of my favorite features I added is the timer in the tab title as well so you don't even need to look at it
@JLuboff eh why bother, unless you're going to build it outside of codepen
you can make so much cooler stuff now
Jason Luboff
@JLuboff
Feb 13 2018 16:20
Becuase I used a timer library to build it. I want to switch it over to moment.js and actually build it myself
Slomon80
@Slomon80
Feb 13 2018 16:20
@Masd925 thanks a million for showing me the where to and others @JLuboff,@cmccormack
CamperBot
@camperbot
Feb 13 2018 16:20
slomon80 sends brownie points to @masd925 and @jluboff and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 4691 | @masd925 |http://www.freecodecamp.org/masd925
:star2: 2327 | @jluboff |http://www.freecodecamp.org/jluboff
:star2: 1318 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 13 2018 16:21
@JLuboff do it in React :)
Jason Luboff
@JLuboff
Feb 13 2018 16:21
@cmccormack And that is neat that you added it to the tab title
....if only I knew react :(
Christopher McCormack
@cmccormack
Feb 13 2018 16:21
If only there were infinite resources to learn... haha
Jason Luboff
@JLuboff
Feb 13 2018 16:21
if only there were infinite time to learn**
I read a lot of these when originally posted, pretty useful
cjlynch12
@cjlynch12
Feb 13 2018 16:22
react is fairly quick to pick up to the point where you could refactor a timer or something using it
it's pretty straightforward
personally I'd suggest using react for a few quick projects before bringing in redux, it's a little overkill for smaller projects
Christopher McCormack
@cmccormack
Feb 13 2018 16:23
Only hard thing in React really is understanding the flow of state and how to properly update, once you get that though it's pretty great
@cjlynch12 I still haven't brought in Redux, can't get around the weird syntax haha. I know I should but...
cjlynch12
@cjlynch12
Feb 13 2018 16:25
yeah I don't think it's really necessary until you're dealing with big multi-view, multi-component apps. Once you start using shared states across multiple components it makes things easier. But I agree the syntax is weird.
Jason Luboff
@JLuboff
Feb 13 2018 16:25
I think once I finish this next work project (which is probably going to take a month or longer), I'll start back up with React along with my SQL learning. Just no time for it right now
Christopher McCormack
@cmccormack
Feb 13 2018 16:25
@JLuboff understood
Jason Luboff
@JLuboff
Feb 13 2018 16:26
I don't have the free time at home to study any more either haha
cjlynch12
@cjlynch12
Feb 13 2018 16:27
I will say - react-router threw me for a big loop when using node/express and wepback. Took me foooooorever to figure out how to get 'get' requests working properly
and it was a stupid one line fix ><
Christopher McCormack
@cmccormack
Feb 13 2018 16:27
@cjlynch12 haha right!??
cjlynch12
@cjlynch12
Feb 13 2018 16:28
spent like 6 hours one night pouring over stack over flow, and then found out all it takes is a '/*' catch all route to fix it
but hey, that's part of debugging I guess lol
Christopher McCormack
@cmccormack
Feb 13 2018 16:28
just '*' should do it
you using v4?
cjlynch12
@cjlynch12
Feb 13 2018 16:28
yeah maybe that's it, don't remember off the top of my head
yeah you're right I used
app.get("*", function(request,response) { response.sendFile(__dirname + '/app/index.html'); });
Christopher McCormack
@cmccormack
Feb 13 2018 16:29
One issue I finally fixed just yesterday was trying to serve my react app when your node path is longer than just root, like /user/new
because of relative links, if you serve your index.html using your catch-all, all the relative links to your bundle and css are borked
cjlynch12
@cjlynch12
Feb 13 2018 16:30
oooh interesting
I'll keep that in mind, I'm saving my styling for last (for better or worse) so i haven't run into that yet
Christopher McCormack
@cmccormack
Feb 13 2018 16:30
I did use an html base element to fix it at first, but found a better solution in webpack config:
output: {
//...
    publicPath: '/',
cjlynch12
@cjlynch12
Feb 13 2018 16:30
but I'm thinking of trying to use modular css instead of one big .css file
Christopher McCormack
@cmccormack
Feb 13 2018 16:30
so simple haha
modular how?
so you can essential import css like react modules
and style components vs. pages
Christopher McCormack
@cmccormack
Feb 13 2018 16:32
might I suggest testing out styled-components as well?
Jason Luboff
@JLuboff
Feb 13 2018 16:32
I really hate serving static files (i.e images) with node. I struggle so much lol. I set it up exactly like my last app that worked and this one doesn't.
cjlynch12
@cjlynch12
Feb 13 2018 16:32
I've looked at it quickly, I need to find something that plays nice with material-ui
Christopher McCormack
@cmccormack
Feb 13 2018 16:33
@JLuboff app.use(express.static(path.join(__dirname, 'public')))?
@cjlynch12 react material ui?
cjlynch12
@cjlynch12
Feb 13 2018 16:33
yeah
Christopher McCormack
@cmccormack
Feb 13 2018 16:33
ugh
I've had a lot of hardships with it
I decided not to use it and just use the stylesheets
materialize-css
but that has difficulties as well
Jason Luboff
@JLuboff
Feb 13 2018 16:34
@cmccormack Ya I have app.use(express.static(__dirname + '/public/images')); and then in my html <img src="/myimage.tif"> unless it doesn't like that it's a .tif?
Christopher McCormack
@cmccormack
Feb 13 2018 16:34
well, difficulties when trying to combine it with styled-components
@JLuboff your sourcing your image from root
Jason Luboff
@JLuboff
Feb 13 2018 16:34
Ugh... I hate Kaspersky so much. It just chews through RAM. Killed it and freed up 3.4 GB of RAM..
Kaz Baig
@kbaig
Feb 13 2018 16:35
pfff just use windows defender
Jason Luboff
@JLuboff
Feb 13 2018 16:35
@cmccormack Worked in my last app :shrug:
Christopher McCormack
@cmccormack
Feb 13 2018 16:35
@JLuboff hmm try removing images from your static and adding images to your img
Jason Luboff
@JLuboff
Feb 13 2018 16:36
@kbaig I wouldn't run it if it wasn't my work computer
Christopher McCormack
@cmccormack
Feb 13 2018 16:36
app.use(express.static(__dirname + '/public'));
<img src="images/myimage.tif">
or maybe just remove the / from your image url
Kaz Baig
@kbaig
Feb 13 2018 16:37
@JLuboff unlucky
Pretty sure my work computer is just running defender
Jason Luboff
@JLuboff
Feb 13 2018 16:38
@cmccormack Hmmm.. If I try and open the image (right click in Inspector and open in new tab) it allows me to save and open it just fine.
Wonder if its becuase of the .tif ending. Lets see
cjlynch12
@cjlynch12
Feb 13 2018 16:39
@JLuboff looks like on IE supports .tif
Jason Luboff
@JLuboff
Feb 13 2018 16:39
@cjlynch12 Yup.. Edge loaded it. Looks like Firefox doesn't support it
Alright.. I need to convert it
but I need to keep transparency.. so.. .png it is
cjlynch12
@cjlynch12
Feb 13 2018 16:40
ahhh the joys of working with transparent images
Christopher McCormack
@cmccormack
Feb 13 2018 16:40
haha
Jason Luboff
@JLuboff
Feb 13 2018 16:40
I mean...I guess I don't have to keep transparency...but it'd look a lot better lol
Cool. Free web converter worked perfect
Christopher McCormack
@cmccormack
Feb 13 2018 16:42
get paint.net
Jason Luboff
@JLuboff
Feb 13 2018 16:43
Was their website created in 1998?
Christopher McCormack
@cmccormack
Feb 13 2018 17:08
yes
with their own app :)
but it's a great app
Jason Luboff
@JLuboff
Feb 13 2018 17:11
:D
Jason Luboff
@JLuboff
Feb 13 2018 17:48
@cmccormack Just finished reading that Mongoose article. It gives a good overview of mongoose. I think for my next project that I use mongo I will try my hand at Mongoose again (or try to implement it on old projects)
Markus Kiili
@Masd925
Feb 13 2018 17:54
:wave:
Christopher McCormack
@cmccormack
Feb 13 2018 17:55
@Masd925 :wave:
@JLuboff it seems to me things are easier with Mongoose, but it sure is confusing at first
Jason Luboff
@JLuboff
Feb 13 2018 17:55
@Masd925 :wave:
Christopher McCormack
@cmccormack
Feb 13 2018 17:56
like I wasn't quite sure how it worked in some projects because it didn't seem to be passing the mongoose object to the other modules and yet they could still use it, turns out once you import a module all other imports refer to the same instance
Jason Luboff
@JLuboff
Feb 13 2018 17:56
@cmccormack The idea of using models and structuring all that I think is the confusing part. I find using vanilla mongo very easy, but I don't have that validation and schemas that mongoose offers
cjlynch12
@cjlynch12
Feb 13 2018 17:58
@cmccormack that's one of the problems I have with a lot of the npm modules, a lot of them work too well and make it hard to tell what's going on behind the scenes
they make life easier, but make it hard to learn what's actually happening
Christopher McCormack
@cmccormack
Feb 13 2018 17:58
@cjlynch12 yup, not easy for beginners that's for sure
@JLuboff that's actually where the real power is
cjlynch12
@cjlynch12
Feb 13 2018 17:59
that's why I ended up ditching passport-local-mongoose, it's a great all in one solution but I didn't understand how it was working so debugging was a pain
Christopher McCormack
@cmccormack
Feb 13 2018 18:00
@JLuboff something like this is much simpler than the normal Mongo way:
    Poll.find()
      .populate('createdBy')
      .exec((err, polls) => {
        if (err) {
          return next( Error('Error retrieving polls from database') )
        }

        res.type('json').send(polls.map(
          ({ title, shortName, choices, createdBy: { username } }) => (
            { title, shortName, choices, createdBy: username }
          )))
    })
Jason Luboff
@JLuboff
Feb 13 2018 18:01
I'm not sure what thats doing
Christopher McCormack
@cmccormack
Feb 13 2018 18:01
exactly!
haha
populate is awesome
if you have say a poll and a user and a user has polls and a poll has a created by user, you can add an objectID to the poll and vice versa and use populate to get the actual document from the database
so in that case Poll has a createdBy property that's an objectID of a User
but now I can use createdBy in my exec to get other properties from my User
Here I added more code
Jason Luboff
@JLuboff
Feb 13 2018 18:03
hmm.. but couldn't I just do that in mongo..?
Christopher McCormack
@cmccormack
Feb 13 2018 18:03
without doing a new query?
it's just making it more intuitive for us who don't want to form json objects into complex queries that's all
Jason Luboff
@JLuboff
Feb 13 2018 18:04
Gotcha
Christopher McCormack
@cmccormack
Feb 13 2018 18:04
And sure you can do anything in Mongo driver but mongoose makes it easier
I find a new feature to love every day
Jason Luboff
@JLuboff
Feb 13 2018 18:05
I'll definitely have to give it another try especially now that I understand mongo
Christopher McCormack
@cmccormack
Feb 13 2018 18:06
Probably better that you understand Mongo so mongoose isn't just a crutch
Jason Luboff
@JLuboff
Feb 13 2018 18:06
I agree
Christopher McCormack
@cmccormack
Feb 13 2018 18:09
I feel like i've already forgotten most topics learned in MongoDB U.
need to use it more...
Jason Luboff
@JLuboff
Feb 13 2018 18:10
I think my biggest take away was aggregate
My databases are too small for indexing
Christopher McCormack
@cmccormack
Feb 13 2018 18:11
Yeah aggregate is great.
that's where you do stuff like $count right?
Jason Luboff
@JLuboff
Feb 13 2018 18:11
I've never used count in one, but I'm sure you could. It's where you break a document apart essentially
Here's I think my longest one
db.collection('symbol').aggregate([
                    { $unwind: '$stockData' },
                    {
                        $match: {
                            datePulled: moment().format('MM-DD-YYYY'),
                            stockData: {
                                $gte: req.params.timeLength,
                                $lte: moment().format('YYYY-MM-DD')
                            }
                        }
                    },
                    { $project: { _id: 1, symbol: 1, stockData: 1, color: 1 } },
                    {
                        $group: {
                            _id: '$_id',
                            symbol: { $push: '$symbol' },
                            color: { $push: '$color' },
                            stockData: { $push: '$stockData' }
                        }
                    },
                    {
                        $project: {
                            symbol: { $arrayElemAt: ['$symbol', 0] },
                            stockData: 1,
                            color: { $arrayElemAt: ['$color', 0] }
                        }
They're fun to create lol
Christopher McCormack
@cmccormack
Feb 13 2018 18:14
neat
I think I know what it's doing, at least :D
Jason Luboff
@JLuboff
Feb 13 2018 18:15
So stockData is an array, its unwinding based on that key. So now instead of one document, it unwinds it into x where x=stockData.length documents
then matches passed on the criteria, etc etc
Christopher McCormack
@cmccormack
Feb 13 2018 18:16
I don't understand the date part
is moment() always now?
Jason Luboff
@JLuboff
Feb 13 2018 18:16
Ya
Christopher McCormack
@cmccormack
Feb 13 2018 18:17
so you're matching datePulled: now?
oh so today
because you're parsing it first into a day not by ms
Jason Luboff
@JLuboff
Feb 13 2018 18:18
I'm making sure the stock symbol was requested that day
I don't clear out all stocks (I probably should)
So each day it resets. IF you go to my stock chart app, theres nothing on it right now
Christopher McCormack
@cmccormack
Feb 13 2018 18:25
address?
Christopher McCormack
@cmccormack
Feb 13 2018 18:27
@JLuboff what does req.params.timeLength look like?
Jason Luboff
@JLuboff
Feb 13 2018 18:28
hmm.. let me see I forget lol
createChart(moment().subtract(1, 'w').format('YYYY-MM-DD'));
Thats for the 1 Week option
Christopher McCormack
@cmccormack
Feb 13 2018 18:29
so Mongo knows how to compare that date format?
Jason Luboff
@JLuboff
Feb 13 2018 18:29
@cmccormack https://github.com/JLuboff/StockChartApp check out the repo if you'd like. I'd argue that I probably don't do a lot of best practices..but I make code that works somehow..so! Lol
Yes, I use the same date format within my documents
Or actually the stock chart date is what I'm using I think
So when I pull the stock data from the API it returns an multi-demensional array
[[price, date], [price, date]]
Christopher McCormack
@cmccormack
Feb 13 2018 18:31
@JLuboff trust me if you focused on best practices you too would be on your third month of your first app
Jason Luboff
@JLuboff
Feb 13 2018 18:31
:joy:
Christopher McCormack
@cmccormack
Feb 13 2018 18:31
and probably not close to best practice yet haha
Jason Luboff
@JLuboff
Feb 13 2018 18:31
I know. But...now that I'm building this actual production node/sql app from scratch..I do want to do best practices if I can
Christopher McCormack
@cmccormack
Feb 13 2018 18:32
yeah probably best
lots of validation at least
Jason Luboff
@JLuboff
Feb 13 2018 18:32
Ya... thats going to be the killer but I have express-validation tab open to look into using that lol
Especially since this app is going to be very form heavy
Christopher McCormack
@cmccormack
Feb 13 2018 18:34
@JLuboff I have that as middleware here if you want to check it out https://github.com/cmccormack/voting-app/blob/master/app/routes.js
Jason Luboff
@JLuboff
Feb 13 2018 18:34
@cmccormack Its becuase you and @tiagocorreiaalmeida were talking about it that I have it open haha
Christopher McCormack
@cmccormack
Feb 13 2018 18:35
you could probably also use validator alone within your mongoose schema pre save validator
but I haven't tested that
Jason Luboff
@JLuboff
Feb 13 2018 18:35
I'll be using SQL, not mongoose (mongo)
Christopher McCormack
@cmccormack
Feb 13 2018 18:37
ah ok
well probably similar who knows
Jason Luboff
@JLuboff
Feb 13 2018 18:37
Going to be using mssql module. Have used it for a little testing in the past but its very robust
Jason Luboff
@JLuboff
Feb 13 2018 18:45
Ugh... this form needs 21 checkboxes.. I have to think up ID's for each
Christopher McCormack
@cmccormack
Feb 13 2018 18:46
`genericID-${index}`?
dangit
Jason Luboff
@JLuboff
Feb 13 2018 18:47
Ya.. I'm debating if I go generic requestCheckbox1 or give it somewhat readable name requestNotLike
Stephen James
@sjames1958gm
Feb 13 2018 18:48
@JLuboff Use names you regret the generic one later when you have to keep looking up what requestCheckbox13 is
Christopher McCormack
@cmccormack
Feb 13 2018 18:48
or question why you're using IDs :)
Jason Luboff
@JLuboff
Feb 13 2018 18:48
@sjames1958gm @cmccormack Thanks
CamperBot
@camperbot
Feb 13 2018 18:48
jluboff sends brownie points to @sjames1958gm and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1319 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 8973 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Jason Luboff
@JLuboff
Feb 13 2018 18:49
I will go with more readable names
Jason Luboff
@JLuboff
Feb 13 2018 19:00
At what point is an ID name too long? For example is requestComputerControlChanges too long of an ID?
Obiviousily this can be shortened quite a bit ie reqCompCtrlChg but less readable
Tom
@moT01
Feb 13 2018 19:02
its a little long - but i always prefer readability
cant maybe use requestControlChanges or something a little smaller
Jason Luboff
@JLuboff
Feb 13 2018 19:04
@moT01 I haven't finished going through my list to see if requestControlChanges might be better somewhere else yet lol
@moT01 Thank you for the input
CamperBot
@camperbot
Feb 13 2018 19:04
jluboff sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 988 | @mot01 |http://www.freecodecamp.org/mot01
dinesh
@1532j0004kg
Feb 13 2018 19:04
difference between cross origin and cross domain @JLuboff can u please tell ?
Tom
@moT01
Feb 13 2018 19:04
988
dinesh
@1532j0004kg
Feb 13 2018 19:04
or anybody .
Jason Luboff
@JLuboff
Feb 13 2018 19:05
I'll let someone else answer
dinesh
@1532j0004kg
Feb 13 2018 19:05
@JLuboff if u know tell !
Stephen James
@sjames1958gm
Feb 13 2018 19:06
@1532j0004kg There is really no difference. cross origin means originating from a different domain.
dinesh
@1532j0004kg
Feb 13 2018 19:06
because in wiki i used origin = * , in some other api's they used crossdomain .
@sjames1958gm can u please explain easily or briefly
This message was deleted
y we used ? like that explanation /
Christopher McCormack
@cmccormack
Feb 13 2018 19:07
@1532j0004kg it's determined by the API how they want to implement it
@1532j0004kg you should read this when you have a chance. https://mdn.io/cors
dinesh
@1532j0004kg
Feb 13 2018 19:12
sure thanks @sjames1958gm @cmccormack
CamperBot
@camperbot
Feb 13 2018 19:12
1532j0004kg sends brownie points to @sjames1958gm and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1320 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 8974 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 13 2018 19:13
@1532j0004kg :+1:
dinesh
@1532j0004kg
Feb 13 2018 19:13
so we can use the origin=* or crossdomain=true
Stephen James
@sjames1958gm
Feb 13 2018 19:13
@1532j0004kg yeah, cross origin means the origin and the destinations are in different domains.
dinesh
@1532j0004kg
Feb 13 2018 19:14
origin http / https like that ?
Stephen James
@sjames1958gm
Feb 13 2018 19:15
@1532j0004kg No origin like codepen.io
dinesh
@1532j0004kg
Feb 13 2018 19:16
example for domain please
@sjames1958gm
Stephen James
@sjames1958gm
Feb 13 2018 19:16
@1532j0004kg codepen.io
dinesh
@1532j0004kg
Feb 13 2018 19:17
:confused:
both are same ! :worried:
Stephen James
@sjames1958gm
Feb 13 2018 19:17
@1532j0004kg origin only relates to sending something.
you have a home address which is your domain.
When you send a letter that becomes the origin domain of your letter.
dinesh
@1532j0004kg
Feb 13 2018 19:20
:worried: ok
if u dont worry please tell example with url's
if u can !
@sjames1958gm
Stephen James
@sjames1958gm
Feb 13 2018 19:23
For the twitch project.
this is the destination Domain - api.twitch.tv - URL: https://api.twitch.tv/kraken/channels/thomasballinger?client_id=chpgyoxoqpv2uy0xwbfjnpswj5ejctz
this is the source, origin (the origin header from the GET request) - origin: https://s.codepen.io
Christopher McCormack
@cmccormack
Feb 13 2018 19:23
Codepen.io is one domain, wikipedia.org is another. By default, wikipedia may not allow cross-origin/cross-domain requests (requests sourced from a domain that is NOT wikipedia.org, like codepen.io)
dinesh
@1532j0004kg
Feb 13 2018 19:28
@sjames1958gm @cmccormack :+1:
Aniculaesei
@Aniculaesei
Feb 13 2018 19:58
Hi guys.Can you please help me.The browser doesnt see my img path....On codepen work with direct link...But If I use the images from the same folder,doesnt work.Thank you
<!DOCTYPE html>
<html>
    <head>
        <title>Try it</title>
    </head>
    <body>
        <script>
            var i = 0;
            var images = [];
            var time = 3000;

            images[0] = "image1.jpg";
            images[1] = "image2.jpg";
            images[2] = "image3.jpg";

            function changeImg(){
                document.slide.src = images[i];

                if(i<images.length-1){
                    i++;
                 }else{
                     i = 0;
                 }
                 setTimeout("changeImg()",time);
            }  

            window.onload = changeImg;

        </script>
        <img name="slide" width="400" height="200"/>
    </body>
</html>
I am sorry because it's not a javascript problem :D
Jason Luboff
@JLuboff
Feb 13 2018 20:00
The html page and the image are in the same folder?
Aniculaesei
@Aniculaesei
Feb 13 2018 20:00
yes
They have the same name
:(
Jason Luboff
@JLuboff
Feb 13 2018 20:01
try adding / in front of the image names
Aniculaesei
@Aniculaesei
Feb 13 2018 20:02
nope
Who knows...I will use the direct link..but it bothers me....... :(
Christopher McCormack
@cmccormack
Feb 13 2018 20:03
@Aniculaesei is this locally hosted?
Aniculaesei
@Aniculaesei
Feb 13 2018 20:03
yes..in the same folder
same name
Christopher McCormack
@cmccormack
Feb 13 2018 20:04
is the element properly showing the image src when rendered in the browser?
look in your network tab in your dev console as well, see if it shows an error accessing the image and see what path it's trying to use
Aniculaesei
@Aniculaesei
Feb 13 2018 20:05
hmmm..how i can do this :)))
Christopher McCormack
@cmccormack
Feb 13 2018 20:07
I just tested this locally and it works fine, make sure your images are properly named and in the same dir as your index.html
@Aniculaesei usually F12 in your browser will bring up developer console
Aniculaesei
@Aniculaesei
Feb 13 2018 20:08
it work with image1.jpg.jpg :)))
@cmccormack Thank you :)
CamperBot
@camperbot
Feb 13 2018 20:08
aniculaesei sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1321 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 13 2018 20:08
hmm
weird
Aniculaesei
@Aniculaesei
Feb 13 2018 20:08
@JLuboff Thank you
CamperBot
@camperbot
Feb 13 2018 20:08
aniculaesei sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2328 | @jluboff |http://www.freecodecamp.org/jluboff
Aniculaesei
@Aniculaesei
Feb 13 2018 20:09
@cmccormack yes....I've entered in img details...and there the name is image1.jpg.jpg
and in the folder it shows:image1.jpg
Thank you!Have to go
Bye!
:)
Christopher McCormack
@cmccormack
Feb 13 2018 20:09
see ya
Jason Luboff
@JLuboff
Feb 13 2018 20:11
Hmm.. interesting. body-parser sets a checkbox value to on but if the checklbox is not checked, sends nothing
Christopher McCormack
@cmccormack
Feb 13 2018 20:13
why would it
wait
body parser doesn't set values
it parses req.body
Jason Luboff
@JLuboff
Feb 13 2018 20:14
Well than req.body is parsed that way?
Christopher McCormack
@cmccormack
Feb 13 2018 20:15
yeah I think (don't quote me) body parser is to change the bit stream into an object you can more easily use
but I'll have to go read the doc again
Jason Luboff
@JLuboff
Feb 13 2018 20:15
you might be right.
cjlynch12
@cjlynch12
Feb 13 2018 20:17
according to express docs req.body " By default, it is undefined, and is populated when you use body-parsing middleware such as body-parser and multer."
Jason Luboff
@JLuboff
Feb 13 2018 20:17
It just means I'm going to have to process the form data on the front end before sending it to the backend...maybe
cjlynch12
@cjlynch12
Feb 13 2018 20:17
so body-parser turns it from undefined into a json object (or another type if specified)
Christopher McCormack
@cmccormack
Feb 13 2018 20:20
@cjlynch12 ah that makes more sense, I forgot there isn't much attached to req by default
@cjlynch12 thanks for doing the leg work :)
CamperBot
@camperbot
Feb 13 2018 20:20
cmccormack sends brownie points to @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 425 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
Christopher McCormack
@cmccormack
Feb 13 2018 20:23
@JLuboff what do you mean? Why would you need to process on front end?
cjlynch12
@cjlynch12
Feb 13 2018 20:23
@JLuboff are you using a fetch post method to send data from the frontend to the back?
Jason Luboff
@JLuboff
Feb 13 2018 20:23
I have a bunch of checkboxes (~20) that I'm going to need to write to the database if they're checked or not (boolean)
@cjlynch12 Using post method
So unless I say in the backend does checkboxName exist in req.body to set the value, I'd have to set the value in the frontend
Christopher McCormack
@cmccormack
Feb 13 2018 20:25
hmm I thought you could access by req.body['someName'] whatever you named your checkboxes
Jason Luboff
@JLuboff
Feb 13 2018 20:26
well looking at console.log(req.body) I get back
{ requestLocation: 'test', requestNotLike: 'on' } //box is checked
{ requestLocation: 'test' } //box is not checked
Christopher McCormack
@cmccormack
Feb 13 2018 20:26
like the <input ... name="someName"... />
@JLuboff can you paste a few of your inputs?
cjlynch12
@cjlynch12
Feb 13 2018 20:27
I would do something like this
var url = 'https://example.com/profile';
var data = {checkboxes: [true,false,true,false,false,true,false]};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), 
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
Christopher McCormack
@cmccormack
Feb 13 2018 20:27
@cjlynch12 why bother if this is a form?
@JLuboff are you preventing default action of form submit?
Jason Luboff
@JLuboff
Feb 13 2018 20:27
@cmccormack I forgot to add names to everything so I have to go back and do so lol but that checkbox and input field are the only two I've done so with
Christopher McCormack
@cmccormack
Feb 13 2018 20:28
@JLuboff name is important
Jason Luboff
@JLuboff
Feb 13 2018 20:28
I realized after the fact that I set id instead of (or in addition to) name
cjlynch12
@cjlynch12
Feb 13 2018 20:28
yeah I guess you could send the entire form as the data, have never sent a form so not sure how parsing it works
Jason Luboff
@JLuboff
Feb 13 2018 20:28
I still have to play a bit more with it I think
Christopher McCormack
@cmccormack
Feb 13 2018 20:34
@cjlynch12 I"m not sure if I have either :D but I would think it would work if the form is parsed correctly
Tiago Correia
@tiagocorreiaalmeida
Feb 13 2018 21:09
hey all
while using bootstrap what would be the best way to achieve a layout like this one
Christopher McCormack
@cmccormack
Feb 13 2018 21:14
I don't think you can
but it depends on how you implement it
like if it's an array of 24 items it probably won't work , but three arrays of 8 you could probably stack in columns
Jason Luboff
@JLuboff
Feb 13 2018 21:16
@tiagocorreiaalmeida Whats the reason for the layout like that?
Christopher McCormack
@cmccormack
Feb 13 2018 21:17
@tiagocorreiaalmeida you may be able to do it with CSS Grid
Jason Luboff
@JLuboff
Feb 13 2018 21:17
Also...is length always 24?
Tiago Correia
@tiagocorreiaalmeida
Feb 13 2018 21:19
no it can change
:\
Christopher McCormack
@cmccormack
Feb 13 2018 21:21
@tiagocorreiaalmeida can you use scripting?
Tiago Correia
@tiagocorreiaalmeida
Feb 13 2018 21:22
for sure
:D
Christopher McCormack
@cmccormack
Feb 13 2018 21:23
I think you could use a matrix transpose to change your array let me check
Jason Luboff
@JLuboff
Feb 13 2018 21:24
@tiagocorreiaalmeida Whats this for?
Christopher McCormack
@cmccormack
Feb 13 2018 21:24
You can even do it with a one dimensional array using modulus
Tiago Correia
@tiagocorreiaalmeida
Feb 13 2018 21:25
for a project im doin with a friend
Christopher McCormack
@cmccormack
Feb 13 2018 21:25
then you would simply take each element and surround with div containing class col-sm-4 or whatever
Jason Luboff
@JLuboff
Feb 13 2018 21:25
@tiagocorreiaalmeida Do things always need to be in the same order on that grid?
I guess they do
otherwise it wouldn't be numbered
Tiago Correia
@tiagocorreiaalmeida
Feb 13 2018 21:25
yeah they do from top to bottom divided in 3 first
then divided in 1
and the in
but the last one there's nothing to worry about ahaha
Kaz Baig
@kbaig
Feb 13 2018 21:26
Anyone deployed a node project to Glitch before?
Jason Luboff
@JLuboff
Feb 13 2018 21:26
I was going to say there's masonry.js but it'll arrange things based on size and is more for images and such I think
@kbaig yes
several
Christopher McCormack
@cmccormack
Feb 13 2018 21:27
@kbaig yeah
just last night actually
Kaz Baig
@kbaig
Feb 13 2018 21:27
@JLuboff https://glitch.com/edit/#!/gigantic-block?path=README.md:1:0 I'm getting a bunch of 'unpacking errors' like npm ERR! tar.unpack untar error /tmp/npm-cache/6.12.3/core-js/2.5.3/package.tgz 3:20 PM
I'm importing from github
not quite sure what they mean
Oh and then towards the end there's also ERROR: Your project is out of disk space (used 128 out of 128 MB).
But my project isn't that big...
Jason Luboff
@JLuboff
Feb 13 2018 21:29
Wtf. IT won't let me stay logged in
Christopher McCormack
@cmccormack
Feb 13 2018 21:30
you probably shouldn't be watching your sass files in production
Kaz Baig
@kbaig
Feb 13 2018 21:30
I just wanted to show you guys what I've been working on :(
Christopher McCormack
@cmccormack
Feb 13 2018 21:30
use a dev script with watch and start should use build
Jason Luboff
@JLuboff
Feb 13 2018 21:30
There now I'm in but still waiting to join...can't see logs
Christopher McCormack
@cmccormack
Feb 13 2018 21:33
@JLuboff you can remix
Kaz Baig
@kbaig
Feb 13 2018 21:35
@cmccormack @JLuboff any ideas how I could get the disk space usage down
Jason Luboff
@JLuboff
Feb 13 2018 21:35
@cmccormack There we go
Ok... so it doesn't like nom-run-all
Kaz Baig
@kbaig
Feb 13 2018 21:36
Maybe I'll just try running build in create-react-app and push that to github
Christopher McCormack
@cmccormack
Feb 13 2018 21:39
how big is your build folder locally?
Christopher McCormack
@cmccormack
Feb 13 2018 21:40
well there you go
Kaz Baig
@kbaig
Feb 13 2018 21:40
not sure which of those numbers applies
Christopher McCormack
@cmccormack
Feb 13 2018 21:40
I think you have a leak
Kaz Baig
@kbaig
Feb 13 2018 21:40
but yeah not sure how I'd get that down
Jason Luboff
@JLuboff
Feb 13 2018 21:40
246 MB?? What do you have in there
Christopher McCormack
@cmccormack
Feb 13 2018 21:41
is that your bundle?
Kaz Baig
@kbaig
Feb 13 2018 21:41
"dependencies": {
    "axios": "^0.17.1",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-scripts": "1.1.0",
    "react-transition-group": "^2.2.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }
Christopher McCormack
@cmccormack
Feb 13 2018 21:41
what is your largest file your bundle.js?
Kaz Baig
@kbaig
Feb 13 2018 21:42
um not sure how I create a bundle.js
Christopher McCormack
@cmccormack
Feb 13 2018 21:43
check your build folder what is the largest file?
Kaz Baig
@kbaig
Feb 13 2018 21:43
Actually my build folder package.json just has the following dependencies
"dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  }
Christopher McCormack
@cmccormack
Feb 13 2018 21:43
I don't use create-react app so I don't remember what it actually outputs the js file as
That's what the anatomy of the build folder looks like
Christopher McCormack
@cmccormack
Feb 13 2018 21:44
what does your build look like?
Kaz Baig
@kbaig
Feb 13 2018 21:45
Wait hold up
it just built the default project it creates
wat
Jason Luboff
@JLuboff
Feb 13 2018 21:47
Looks like I'll have to process my checkboxes on the front or backend to give me booleans.. lame..
Kaz Baig
@kbaig
Feb 13 2018 21:47
I don't have time to fix this right now so I'll revisit but thanks for your time folks @JLuboff @cmccormack
CamperBot
@camperbot
Feb 13 2018 21:47
kbaig sends brownie points to @jluboff and @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1322 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 2329 | @jluboff |http://www.freecodecamp.org/jluboff
Christopher McCormack
@cmccormack
Feb 13 2018 21:48
@kbaig sorry man good luck
@JLuboff what do you get when you submit a normal form?
Kaz Baig
@kbaig
Feb 13 2018 21:48
I have a feeling it just has to do with the permissions on my work computer
I'll figure it out
Christopher McCormack
@cmccormack
Feb 13 2018 21:48
@kbaig doubt it if you're pushing from github to glitch
Should all be on their end
Kaz Baig
@kbaig
Feb 13 2018 21:49
Yeah but it seems that I'm having issues building locally as well
Jason Luboff
@JLuboff
Feb 13 2018 21:49
@cmccormack It only marks checked boxes with 'on' and unchecked would result in undefined so I'd have toi have something like requestNotLike = req.body.requestNotLike ? true : false;
Kaz Baig
@kbaig
Feb 13 2018 21:49
I think the issue is something to do with the project itself
Jason Luboff
@JLuboff
Feb 13 2018 21:49
But what do you think looks cleaner, a checkbox or a toggle Yes/No?
Christopher McCormack
@cmccormack
Feb 13 2018 21:50
@JLuboff 'on' is true and undefined is false
Jason Luboff
@JLuboff
Feb 13 2018 21:50
Correct
Christopher McCormack
@cmccormack
Feb 13 2018 21:50
@JLuboff but that's what you get from req.body['name']?
Jason Luboff
@JLuboff
Feb 13 2018 21:50
Ya, either on or undefined
Kaz Baig
@kbaig
Feb 13 2018 21:50
@cmccormack If you were curious, here's the git repo. It was a refactor of my wikipedia viewer from way back when
Christopher McCormack
@cmccormack
Feb 13 2018 21:51
@kbaig yeah I was looking at it already :)
Jason Luboff
@JLuboff
Feb 13 2018 21:51

In regards to this:

But what do you think looks cleaner, a checkbox or a toggle Yes/No?
Here's my current form

blob
Kaz Baig
@kbaig
Feb 13 2018 21:51
Took a while to figure out how to use the Transition components but I got it working
That and redux-thunk
Christopher McCormack
@cmccormack
Feb 13 2018 21:52
@JLuboff with the way you are asking the question, yes/no, but you could also rephrase each question to use a checkbox
Jason Luboff
@JLuboff
Feb 13 2018 21:53
@cmccormack I'm just thinking a yes/no might be cleaner in addition to having the values per set at true/false. But.. then again.. hmm
Christopher McCormack
@cmccormack
Feb 13 2018 21:54
@JLuboff I'm still confused, so when you access the req.body[name] you get what? An array? Can you paste the output of that array?
Jason Luboff
@JLuboff
Feb 13 2018 21:58
@cmccormack
{ requestLocation: 'Test',
  requestDate: '02/13/2018',
  requestRequestor: 'Test',
  requestDescription: 'Test',
  requestJustification: 'Test',
  requestNotLike: 'on',
  requestPipeMod: 'on',
  requestRequireEng: 'on',
  requestOperationChanges: 'on',
  requestOtherComments: 'Test' }; //this is console.log(req.body) It's an object
on //this is console.log(req.body.requestNotLike) it's a string. requestNotLike is checked
{ requestLocation: 'Test',
  requestDate: '02/13/2018',
  requestRequestor: 'Test',
  requestDescription: 'Test',
  requestJustification: 'Test',
  requestPipeMod: 'on',
  requestRequireEng: 'on',
  requestOperationChanges: 'on',
  requestPersonMove: 'on',
  requestOtherComments: 'Test' } ;//this is console.log(req.body) It's an object
undefined //this is console.log(req.body.requestNotLike) it's undefined. requestNotLike is not checked
See the comments
Christopher McCormack
@cmccormack
Feb 13 2018 21:59
can you paste a few html inputs for the checkboxes as well?
Jason Luboff
@JLuboff
Feb 13 2018 21:59
<div class="field is-horizontal">
        <div class="field-label is-normal"></div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <label class="label">
                <input type="checkbox" id="requestNotLike" name="requestNotLike">
                Is equipment being installed or replaced NOT like in kind?</label>
            </div>
          </div>
        </div>
      </div>
      <div class="field is-horizontal">
        <div class="field-label is-normal"></div>
        <div class="field-body">
          <div class="field">
            <div class="control">
              <label class="label">
                <input type="checkbox" id="requestPipeMod" name="requestPipeMod">
                Will piping modifications affect process?</label>
            </div>
          </div>
        </div>
      </div>
Probably more html then needed..but meh (that is, more than you need to see...its needed in the actual file)
Christopher McCormack
@cmccormack
Feb 13 2018 22:00
name should be the same for all checkboxes
and then you should reference req.body[name]
I believe
I think that's your problem
Jason Luboff
@JLuboff
Feb 13 2018 22:00
But each checkboxes represents something different
Christopher McCormack
@cmccormack
Feb 13 2018 22:01
I think that's what value is for but I'd have to check
Jason Luboff
@JLuboff
Feb 13 2018 22:02
Hmm
@cmccormack If I give them the same name, with different values, I end up with an array of values
checkbox: [ 'requestNotLike', 'requestPipeMod' ], both boxes were checked essentially
Christopher McCormack
@cmccormack
Feb 13 2018 22:04
is that not what you want?
Jason Luboff
@JLuboff
Feb 13 2018 22:05
No, I want a boolean value. If the box is not checked for say requestPipeMod then it will not show in that array
With either way currently, I do not get all values so at some point I need to check (and convert to boolean)
I was hoping to get something like requestNotLike: true
requestPipeMod: false
but as I research, it looks like I need to programmically apply that
Christopher McCormack
@cmccormack
Feb 13 2018 22:08
how about this solution:
<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />
Jason Luboff
@JLuboff
Feb 13 2018 22:08
@cmccormack Ah.. I did see that solution as well, essentially creating a hidden input for each
Christopher McCormack
@cmccormack
Feb 13 2018 22:08
you'll have to have a different name for each checkbox but you'll also get some value regardless
it's not horrible I guess
I didn't realize checkbox api was so crappy
Jason Luboff
@JLuboff
Feb 13 2018 22:09
Ya... I'm finding out myself that it blows haha
Christopher McCormack
@cmccormack
Feb 13 2018 22:09
I wonder if you could use a radio instead but hide the no option and have a click toggle instead
:D
may be easier for what you're doing to just preventDefault and build your own JSON object to submit to your backend
Jason Luboff
@JLuboff
Feb 13 2018 22:11
Ya, I think I might do it that way, then on success I can show a message within the page as opposed to redirect. Plus thats how I do it on another project
Christopher McCormack
@cmccormack
Feb 13 2018 22:12
Sounds like a plan
Jason Luboff
@JLuboff
Feb 13 2018 22:13
@cmccormack Thanks for sticking through this haha
CamperBot
@camperbot
Feb 13 2018 22:13
jluboff sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1323 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 13 2018 22:13
haha np
I'm off for a bit see ya
Jason Luboff
@JLuboff
Feb 13 2018 22:14
See ya
@cmccormack Hmm so radio buttons could work.. since I can have Yes/No and set the values to true/false but values are strings so I'd still have to convert them...
Jason Luboff
@JLuboff
Feb 13 2018 22:24
And actually.. I could send 0 or 1.. although it'd be a string.. it shouldn;t be any issue to insert that into my SQL DB if I use BIT data type