These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Oct 2018
newmoon
@newmoon
Oct 28 2018 00:13
@danydin Object.keys() gives an array - you'll need to assign it to a variable or console.log it:
const val = {
  id: 0,
  imageLink: "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
  altText: "A white cat wearing a green helmet shaped melon on its head. ",
  codeNames: ["Juggernaut", "Mrs. Wallace", "Buttercup"]
};
const valKeys = Object.keys(val)

console.log(valKeys); // ["id", "imageLink", "altText", "codeNames"]
@dhavalveera web servers use http:// not file://. Change the path to your image to use url(images/apple-mac-new.jpg)
Dhaval Vira
@dhavalveera
Oct 28 2018 01:17
I tried url("images/apple-mac-new.jpg") but it is not working @newmoon
Dhaval Vira
@dhavalveera
Oct 28 2018 09:17
it seems that you haven't seen my Code, but anyway I got my solution
@GitHub-Henry
TCzechowski
@TCzechowski
Oct 28 2018 12:05

hey guys! I'm doing this task:

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string

Could you please tell me which solution is better and why?

function findLongestWordLength(str) {
let longest = str
  .split(' ')
  .sort((a, b) => a.length < b.length);
return longest[0].length;
}

or this

function findLongestWordLength(s) {
  return s.split(' ')
    .reduce(function(x, y) {
      return Math.max(x, y.length)
    }, 0);
}
Aditya
@ezioda004
Oct 28 2018 12:08
@TCzechowski Better in terms of performance or readability? You'll have to be more specific.
TCzechowski
@TCzechowski
Oct 28 2018 12:10
I was just trying to solve the task and I did it by using the first solution, but every time I complete a task at FCC I just check the hints to see if I can do it better way and there was the #2 solution.
But I guess the second solution is better because it doesn't create an unnecessary new variable?
Aditya
@ezioda004
Oct 28 2018 12:13
@TCzechowski Speaking strictly based on algorithm complexity, second one is better because .reduce() is just a for loop underneath which has complexity of O(n). Whereas .sort()has complexity of O(nlogn) which is greater.
Often creating extra variables is not a big factor while comparing algorithms.
Creating variables and such comes under space complexity and ofcourse you'd consider that in real world scenario but here the program taking some extra bits wont hurt anyone.
TCzechowski
@TCzechowski
Oct 28 2018 12:16
@ezioda004 So, for example, if I had a job interview task to do, I would get more points by doing this the second way instead of the first one? :)
Aditya
@ezioda004
Oct 28 2018 12:18
@TCzechowski Absolutely! Often in interviews they expect you to reiterate your solution to make it faster or "better".
TCzechowski
@TCzechowski
Oct 28 2018 12:18
I just want to know which one would be more appreciated by my future employer
Okay, thanks!
Aditya
@ezioda004
Oct 28 2018 12:18
FYI you can make it even better.
TCzechowski
@TCzechowski
Oct 28 2018 12:18
how?
Aditya
@ezioda004
Oct 28 2018 12:19
.split() is a loop itself. Can you think of solving it with only 1 loop?
Dont worry about using .reduce() or HOF's, using for loop is completely fine.
TCzechowski
@TCzechowski
Oct 28 2018 12:25
@ezioda004
Dang, can't think of anything right now. I think I'm not that advanced yet. But do you mind showing me that solution?
Aditya
@ezioda004
Oct 28 2018 12:29
@TCzechowski
function findLongestWordLength(str){
  let max = -Infinity;  // Assigning the smallest possible value to max
  let current = 0;
  for (let i = 0; i < str.length; i++){
    if (str[i] === " "){  // If the string has reached a whitespace, then the previous word has ended so we compare its length to the max
      max = Math.max(max, current);
      current = 0;
    }
    else { //Otherwise, increase inc the count of letter by 1
      current++;
    }
  }
  return Math.max(max, current);
}
TCzechowski
@TCzechowski
Oct 28 2018 12:32
@ezioda004
Oooh, that's clever. But I guess it's better performance-wise, but when it comes to readability it's a bit worse than using reduce?
Aditya
@ezioda004
Oct 28 2018 12:36
@TCzechowski Thats a good question - its kinda opinionated. for loops are universal across all languages so its easier to read at first glance but .reduce() is declarative in nature so some people prefer that. IMO both are fine for readability but .reduce() is better for maintaining code purpose.
Alwin George
@siliconchild
Oct 28 2018 15:25
Can someone help me identify the tech implemented in this site https://icoholder.com/en/thefund-io-26513.
I wan't to create the rating system present in the website, the multi dimensional animated element depicting different ratings for team, vision, activity etc. What specific technology should i learn to do this, Is there a JS Library to do this particular kind of thing.
NB- I'm good with CSS and I can do basic JS Stuff.
newmoon
@newmoon
Oct 28 2018 16:47

I tried url("images/apple-mac-new.jpg") but it is not working @newmoon

@dhavalveera To help debug, we'd have to see your dev environment. I'm guessing you're trying to load index.html from a file:// path instead of http:// which will cause some challenges depending on security + OS settings

Nicolas Ramirez
@kamatheuska
Oct 28 2018 18:22
@ezioda004 man I am struggling with how to contribute to FreeCodeCamp, and to open source in general. There are +5000 open PR's in your repo, so I don't see how another more could be actually useful. Any thoughs?
Christopher McCormack
@cmccormack
Oct 28 2018 18:23
@kamatheuska make useful PRs :)
find a stub, see if there is a PR for it
even if there is you can still submit modifications that can later be merged
There are loads of guides/challenges that can use some improvement. Many of the PRs submitted will be rejected due to poor formatting/grammar/usefulness
Nicolas Ramirez
@kamatheuska
Oct 28 2018 18:25
Yeah, I have read about that.
Aditya
@ezioda004
Oct 28 2018 20:23
@kamatheuska I'd suggest what @cmccormack suggested too. Example check this stub out. You can write an article on this method. Note: write in your own words rather than copy-pasting since we dont accept copied contents.
Nicolas Ramirez
@kamatheuska
Oct 28 2018 20:24
Ok, thanks for the tips! :)
Keggatron
@Keggatron
Oct 28 2018 22:53
Hi guys, I'm having issues injecting mobx stores into my components in an app I'm building. I've been trying to figure it out all day but I'm just not seeing it. Anyway here's my store:
import {
  observable,
  flow,
  configure,
  action,
} from 'mobx';
import apiFetch from '../services/data-service';

configure({ enforceActions: true });

class UserStore {
  @observable users = [];

  fetchUsers = flow(function* fetch() {
    try {
      this.users = yield apiFetch('/users', 'get');
    } catch (e) {
      this.errorMessage = e.message;
    }
  })
}

const store = new UserStore();
export default store;
which I'm collecting in the stores index:
import userStore from './user-store';

export default {
  userStore,
};
here is my App.jsx:
import React from 'react';
import { Provider } from 'mobx-react';
import AppRouter from './router';
import store from './store';
import 'tachyons';
import './styling/semantic.less';


const App = () => (
  <Provider {...store}>
    <AppRouter />
  </Provider>
);

export default App;
then finally here is my component:
```
import React, { Component } from 'react';
import {
  Segment,
  Button,
  Grid,
  Divider,
} from 'semantic-ui-react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

@inject('userStore')
@observer
class Users extends Component {
  static propTypes = {
    userStore: PropTypes.objectOf(PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.object,
      PropTypes.func,
    ])).isRequired,
  }

  // componentDidMount() {
  //   const { userStore } = this.props;
  //   userStore.fetchUsers();
  // }

  selectUser = (id) => {
    console.log(id);
  }


  render() {
    console.log('props', this.props)
    // const { userStore } = this.props;
    // const { users } = userStore;

    return (
      <Segment>
        users
      </Segment>
    );
  }
}

export default Users;
```
sorry for all of the code but I don't believe I can throw this into a sandbox as I'm using decorators and would need to eject out of CRA
Christopher McCormack
@cmccormack
Oct 28 2018 22:58
@Keggatron Please use Codepen or Pastebin when posting large amounts of code.
Keggatron
@Keggatron
Oct 28 2018 23:20
@cmccormack sorry, here is the paste bin
Christopher McCormack
@cmccormack
Oct 28 2018 23:43
@Keggatron maybe a codesandbox would be better... can you fork this
missing something for decorators