These are chat archives for FreeCodeCamp/HelpJavaScript

29th
Nov 2018
Zaza
@ForkInSpace
Nov 29 2018 00:00
is that a login form btw ?
Jason Luboff
@JLuboff
Nov 29 2018 00:01
No, no login for this app
Zaza
@ForkInSpace
Nov 29 2018 00:02
what are we validating ?
if you need to validate strings
validator is a great library
Jason Luboff
@JLuboff
Nov 29 2018 00:03
I'm creating an app for whats known as a Job Safety Analysis. So I need to get the persons name, the date the work will be performed, location, and the task. After that it continues on
Zaza
@ForkInSpace
Nov 29 2018 00:04
Sounds like an interesting app btw
Jason Luboff
@JLuboff
Nov 29 2018 00:05
Ya its been fun so far. Still quite a bit aways from completing but getting close to completing the first part which is creating a new JSA
Christopher McCormack
@cmccormack
Nov 29 2018 00:06
@JLuboff sorry I walked away to make dinner, hope you figured it out lol
Zaza
@ForkInSpace
Nov 29 2018 00:06
Keep plugging away ;)
Jason Luboff
@JLuboff
Nov 29 2018 00:06
Yup. Got it figured out
  continue = event => {
    const validation = (data) => Object.keys(data).filter(e => data[e] !== '');
    const jsaFormComplete = validation(this.state.jsaForm).length === 4;

    this.setState({
      jsaFormComplete
    });
  };
Essentially verify that no property is empty and that my returned array is 4 (total number of inputs)
Thus altering the boolean jsaFormComplete, its false required will work
Brad
@bradtaniguchi
Nov 29 2018 00:07
hmmm magic number 4 in there
Jason Luboff
@JLuboff
Nov 29 2018 00:08
:shrug:
Jason Luboff
@JLuboff
Nov 29 2018 00:14
I'm looking at PropTypes... according to the documentation, it only checks in dev mode. How important is it to use if at all? Its not going to perform any validation in production..?
I guess another option is to have the button disabled until all inputs have a value in state
Brad
@bradtaniguchi
Nov 29 2018 00:17
@JLuboff whats propType validation?
Its checking the actual data type (i.e string, array, etc)
DMZ
@DMZ011
Nov 29 2018 00:18
@cmccormack sorry lost connection
Brad
@bradtaniguchi
Nov 29 2018 00:18
Also, I think its bad UX to disable the button unless the form is super small with no possibility of scrolling and validation errors being shown next to invalid inputs. Otherwise users will be like "why is this disabled"
Jason Luboff
@JLuboff
Nov 29 2018 00:19
@bradtaniguchi Ya I generally don't like to disable the button except when a form is being submitted and awaiting response.
Brad
@bradtaniguchi
Nov 29 2018 00:19
hehe ghetto typescript it looks like haha. Id assume during development your passing data thru these inputs, and you want to catch bugs there. Catching validation errors where data-types suddenly change in production would add overheard for little gain for tiny edge cases
Jason Luboff
@JLuboff
Nov 29 2018 00:20
And.. on my last project I had to disable buttons after form submission until the page was refreshed due to end users pressing the button mutliple times >_<
Brad
@bradtaniguchi
Nov 29 2018 00:22
hehe I can imagine XD
Jason Luboff
@JLuboff
Nov 29 2018 00:36
@bradtaniguchi From UX perspective..I have a textarea.. if the user doesn't input anything they'll get an alert. I'm not going to get an alert becuase its ugly. My original thought was to replace that with a Modal...but that seems intrusive.. so instead I'm thinking just display text "Must input something" or whatever
Agree or disagree
Brad
@bradtaniguchi
Nov 29 2018 00:40
When do we display the "message"? on submit and or after they click on the textarea, not type anything, and click somewhere else?
Jason Luboff
@JLuboff
Nov 29 2018 00:41
It would be displayed when they click one of two buttons (Next Step to input the next step or Complete to move onto the next part or the process)
Brad
@bradtaniguchi
Nov 29 2018 01:02
You could put a dialog, but thats pretty blaring, a small alert, and or validation messages next to the input usually are enough
But I might be too late to this convo haha
@JLuboff
ReesesLover123
@ReesesLover123
Nov 29 2018 03:56
```
<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);
var e = 0;
function myTimer() {
e + 1;
document.getElementById("demo").innerHTML = `${e}`;
}
</script>
</body>
</html>
I want to make it tick up by 1 each second
Tom
@moT01
Nov 29 2018 04:02
e + 1
Jason Luboff
@JLuboff
Nov 29 2018 05:22
@bradtaniguchi ya that’s what I would do sort of like the required alerts just my own message though
Sujit
@sujitworx
Nov 29 2018 08:31
Can somebody tell how to pass the remaining test cases in the palindrome checker problem
let palindrome = str => {
  let charsArr = str.toLowerCase().split('')
  let validChars = 'abcdefghijklmnopqrstuvwxyz123456789'.split('')
  let filteredArr = []

  charsArr.forEach(char => {
    if(validChars.indexOf(char) > -1) {
      filteredArr.push(char)
    }
  })

  reversedStr = filteredArr.reverse().join('')
  if (reversedStr.toLowerCase() === str.toLowerCase()) {
    return true
  } else {
    return false
  }

}

palindrome('eye')
palindrome("_eye") should return true.
palindrome("race car") should return true.
palindrome("A man, a plan, a canal. Panama") should return true.
palindrome("never odd or even") should return true.
palindrome("My age is 0, 0 si ega ym.") should return true.
palindrome("0_0 (: /- :) 0-0") should return true.
^ These are failing
Claudio Restifo
@Marmiz
Nov 29 2018 08:37
@sujitmohanty you are comparing the "cleaned" reversed string with the "dirty" original string.
For example:
str.toLowerCase() // _eye
reversedStr // eye

palindrome("_eye")
Sujit
@sujitworx
Nov 29 2018 08:41
Ahh ok
Sujit
@sujitworx
Nov 29 2018 09:47
@Marmiz Are you still here?
Doesn't seem to work
function palindrome(str) {
  // Good luck!
  let charsArr = str.split('')
  let validChars = 'abcdefghijklmnopqrstuvwxyz123456789'
  let filteredArr = []

  charsArr.forEach(function(char) {
    if (validChars.indexOf(char) > -1) {
      filteredArr.push(char)
    } 
  })

  let filteredReversedStr = filteredArr.reverse().join('')

  if(str.toLowerCase().split('').reverse().join('') === filteredReversedStr.toLowerCase()) {
    return true
  } else {
    return false
  }

}



palindrome("eye");
Claudio Restifo
@Marmiz
Nov 29 2018 09:55
@sujitmohanty of course it's not working, you are still comparing to str
what you want is to compare the cleaned string with the cleaned reversed string
and not the original
Jefferson
@jeffersonnnn
Nov 29 2018 10:03
@NJM8 you are right; i'm sorry. :smile: :smile:
Sujit
@sujitworx
Nov 29 2018 10:08
@Marmiz still not able to solve
let palindrome = str => {
  let charsArr = str.toLowerCase().split('')
  let validChars = 'abcdefghijklmnopqrstuvwxyz123456789'.split('')
  let filteredArr = []

  charsArr.forEach(char => {
    if(validChars.indexOf(char) > -1) {
      filteredArr.push(char)
    }
  })

  let reversedStr = filteredArr.reverse().join()
  let joinedStr = filteredArr.join('')
  if (reversedStr.toLowerCase() === joinedStr.toLowerCase()) {
    return true
  } else {
    return false
  }

}

palindrome('eye')
Claudio Restifo
@Marmiz
Nov 29 2018 10:09
@sujitmohanty
let reversedStr = filteredArr.reverse().join() // join what?
Jefferson
@jeffersonnnn
Nov 29 2018 10:09

@JLuboff @cmccormack or anyone really. i have my node app running but i can't seem to get it to behave.

// server.js
import express from 'express';
import ControllerCreate from './src/controllers/creation';

const app = express();

app.use(express.json());

app.get('/', (req, res) => {
  res.status(200).send({ 'message': 'YAY! Congratulations! Your first endpoint is working' });
});

app.listen(3001);
console.log('app running on port ', 3001);


app.post('/api/v1/redflags', ControllerCreate.create);

the last line is meant to return [] on my machine, but it returns Cannot GET /api/v1/redflags

any help please?

Sujit
@sujitworx
Nov 29 2018 10:10
oops
Jefferson
@jeffersonnnn
Nov 29 2018 10:10

here is my controller


import CreateRedflag from '../models/creation';

const ControllerCreate = {
  /**  
  * @param {object} req
  * @param {object} res
  * @returns {object} reflection object 
  */
  create(req, res) {
       if (!req.body.success && !req.body.title && !req.body.details) {
           return res.status(400).send({ 'message': 'All fields are required'})
       }
       const redflags = CreateRedflag.create(req.body);
       return res.status(201).send(redflags);
   }
}

export default ControllerCreate;

and here is my models


import moment from 'moment';
import uuid from 'uuid';

class CreateRedflag {
  /**
  * class constructor
  * @param {object} data
  */
  constructor() {
    this.redflags = [];
  }
  /**
  *
  * @returns {object} reflection object
  */
  create(data) {
    const newRedflag = {
        id: uuid.v4(),
        title: data.title || '',
        details: data.details || '',
        createdDate: moment.now(),
        modifiedDate: moment.now()
    };
    this.redflags.push(newRedflag);
    return newRedflag
}

}

export default new CreateRedflag();
Sujit
@sujitworx
Nov 29 2018 10:10
still failing though
a few less number of cases
palindrome("not a palindrome") should return false.
palindrome("nope") should return false.
palindrome("almostomla") should return false.
palindrome("1 eye for of 1 eye.") should return false.
palindrome("five|_/|four") should return false.
Claudio Restifo
@Marmiz
Nov 29 2018 10:15
@sujitmohanty what does reverse do?
Sujit
@sujitworx
Nov 29 2018 10:15
reverse the elements in the array
Claudio Restifo
@Marmiz
Nov 29 2018 10:15
@sujitmohanty in place or return a new one?
have you checked?
@sujitmohanty i'm going step by step in hope to teach you "how" to debug
so next time you can do it by yourself ^^
Sujit
@sujitworx
Nov 29 2018 10:16
Thank you for your attention. really appreciate it
let me check
Thanks a ton!
was able to do it finally
let palindrome = str => {
  let charsArr = str.toLowerCase().split('')
  let validChars = 'abcdefghijklmnopqrstuvwxyz123456789'.split('')
  let filteredArr = []

  charsArr.forEach(char => {
    if(validChars.indexOf(char) > -1) {
      filteredArr.push(char)
    }
  })

  let filteredStr = filteredArr.join('')
  let reversedStr = filteredStr.split('').reverse().join('')
  if (filteredStr === reversedStr) {
    return true
  } else {
    return false
  }

}

palindrome('eye')
Sujit
@sujitworx
Nov 29 2018 10:21
PHEW!
Claudio Restifo
@Marmiz
Nov 29 2018 10:24
  if (filteredStr === reversedStr) {
    return true
  } else {
    return false
  }
this is redundant
Sujit
@sujitworx
Nov 29 2018 10:26
why?
oh I understood ya
correct
but thankfully it cleared all the testcases
Claudio Restifo
@Marmiz
Nov 29 2018 10:28

what I meant is that

  if (filteredStr === reversedStr) {
    return true
  } else {
    return false
  }

return filteredStr === reversedStr

are equivalent ^^

Blauelf
@Blauelf
Nov 29 2018 12:16

@sujitmohanty https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions/

In case you don't remember :P

BTW, .join('').split('') (as you essentially do) looks like unnecessary redundancy (essentially it's creating a new array, but you no longer need the first one, so you could just let reversedStr = filteredArr.reverse().join('');)

Sujit
@sujitworx
Nov 29 2018 12:34
@Marmiz Oh..I thought of something else. @Blauelf Thanks for reminding! Apparently I need to brush up the basics a bit more.
Simon Cordova
@gbsimon87
Nov 29 2018 12:50
@diomed which fixed images were you reffering to?
May Kittens Devour Your Soul
@diomed
Nov 29 2018 13:26
@gbsimon87 ones on your github.io page.
(also don't listen to me, I'm maundering) :smile:
Jefferson
@jeffersonnnn
Nov 29 2018 13:42
@diomed why iwould my api endpoint fashioned as POST return an error when i slide it into my browser yet return a what it should when i slide it into Postman?!?
Adel
@AdelMahjoub
Nov 29 2018 13:54
@jeffersonnnn could you please, post links where did you learned to write node/express code the way you do ?
@jeffersonnnn just for checking / review
Jefferson
@jeffersonnnn
Nov 29 2018 13:56
@AdelMahjoub coming right up.
Adel
@AdelMahjoub
Nov 29 2018 13:57
@jeffersonnnn and what CreateRedflag is supposed to be, a model or some exotic singleton pattern ?
@jeffersonnnn No problem, we should take a look at that
Jefferson
@jeffersonnnn
Nov 29 2018 14:00
haha definitely nothing exotic. The app is meant to be one where corruption cases called "red-flags" are curated and sent to a government body so createRedFlag is meant to be the model that has the detail of what is being reported.
Adel
@AdelMahjoub
Nov 29 2018 14:01
@jeffersonnnn I'll start by rewriting that class CreateRedflag
Jefferson
@jeffersonnnn
Nov 29 2018 14:01
for reference again, here is the class
Adel
@AdelMahjoub
Nov 29 2018 14:02
@jeffersonnnn from what I see, you only need a RedFlag class
@jeffersonnnn and use new RedFlag whenever you need a new instance
@jeffersonnnn the way you are doing it is not the proper way to do it using es6
it almost looks like a Lua object factory
Jefferson
@jeffersonnnn
Nov 29 2018 14:05
@AdelMahjoub i know this looked horrible but i am fashioning it after a tutorial i saw somewhere sigh. This is my first nodejs app, so i am more than amenable to learning. How should i have done it?
@AdelMahjoub also, the createredflag class isn't good?
ugh
Adel
@AdelMahjoub
Nov 29 2018 14:06
@jeffersonnnn can you send me the tutorial link please
Jefferson
@jeffersonnnn
Nov 29 2018 14:06
@AdelMahjoub with deep deeppleasure
@AdelMahjoub i appreciate this. really is my first nodejs app and i am in a bootcamp-esque program
Adel
@AdelMahjoub
Nov 29 2018 14:16
@jeffersonnnn no wonder when nodejs / express beginner struggle, when reading that tutorial
Jefferson
@jeffersonnnn
Nov 29 2018 14:17
@AdelMahjoub is the tutorial bad? :smile:
Adel
@AdelMahjoub
Nov 29 2018 14:18
@jeffersonnnn it works, but I would introduce the subject in a very different way
@jeffersonnnn like that Reflection class half factory / half signleton
Jefferson
@jeffersonnnn
Nov 29 2018 14:18
@AdelMahjoub my issue is i am doing the same things the author is yet getting different results.
@AdelMahjoub what i know i did different i instead of piling all the api functions into one large file, i want to break it into subfiles.
Adel
@AdelMahjoub
Nov 29 2018 14:20
@jeffersonnnn for json response you use response.json() in express, or you set the content type response header to application/json
Jefferson
@jeffersonnnn
Nov 29 2018 14:22
@AdelMahjoub so using express.json is bad?
Adel
@AdelMahjoub
Nov 29 2018 14:22
@jeffersonnnn not that
@jeffersonnnn thats for parsing the request body
@jeffersonnnn when the request body is a json object you can use express.json middleware to parse it
Jefferson
@jeffersonnnn
Nov 29 2018 14:24
@AdelMahjoub so where exactly should it be here
// server.js
import express from 'express';
import ControllerCreate from './src/controllers/creation';

const app = express();

app.use(express.json());

app.get('/', (req, res) => {
  res.status(200).send({ 'message': 'YAY! Congratulations! Your first endpoint is working' });
});

app.listen(3001);
console.log('app running on port ', 3001);


app.post('/api/v1/redflags', ControllerCreate.create);
Jefferson
@jeffersonnnn
Nov 29 2018 14:29
@AdelMahjoub i have never used Glitch beforeee. Time to explore. Give me a short minute.
Adel
@AdelMahjoub
Nov 29 2018 14:29
@jeffersonnnn follow the glitch link, we will check how to wrirte a simple api
@jeffersonnnn you just need to register and join, live coding session are good for starters
@jeffersonnnn tell me when ready
Jefferson
@jeffersonnnn
Nov 29 2018 14:32
@AdelMahjoub i am there right now. :dancer:
Adel
@AdelMahjoub
Nov 29 2018 14:41
@jeffersonnnn notify me when you are back to continue
May Kittens Devour Your Soul
@diomed
Nov 29 2018 14:48
Jefferson :airplane:
Mike Smith
@MikeSS281986
Nov 29 2018 16:07
Hey all. So Im having a conundrum here. If say you have a string ex. "He1llo W34orld" and you were to return a new string with single number left untouched but multi integer number are needed to be reversed how would you go about doing that with result string being "He1llo W43orld" ?
Jason Luboff
@JLuboff
Nov 29 2018 16:09
Morning
@MikeSS281986 Probably use regex and indexOf or something along those lines.. regex to find the multi integer value, than indexOf to determine where in the string each exists...but..than again..I've never tried to do something like this heh
Mike Smith
@MikeSS281986
Nov 29 2018 16:17
yeah. working on combos with regex and indexof. just running into walls unfortunately;
Jason Luboff
@JLuboff
Nov 29 2018 16:18
Whats the issue you're running into?
Mike Smith
@MikeSS281986
Nov 29 2018 16:27
so making a string enoder. vowels are replaced with ints (aeiuo would equal 12345), consanants with letters be one up before them so c = b, d = c etc., and numbers when presented are reversed. 1 stay 1 but 1234 would be 4321. So given string "Hello World" would be g2kk4yv4qkc! leaving punctuation alone. I need to see how if there are lone numbers to leave them alone but multi nums in a row are reversed in the given string
Blauelf
@Blauelf
Nov 29 2018 16:30
The reversing numbers thing could be easily done by a replace with an regexp /\d+/g and a function as the second parameter.
What about f, does that become d (previous consonant) or e (previous letter)?
Jason Luboff
@JLuboff
Nov 29 2018 16:31
And this /\d{2,}/ Would match all numbers that are 2+ digits
Blauelf
@Blauelf
Nov 29 2018 16:31
Well, I'm lazy, and a single digit reversed is itself.
Mike Smith
@MikeSS281986
Nov 29 2018 16:31
corrrect
im think the regex would work but could i say somehow /\d{2 ,""or more digits somehow?}/
then reverse?
Blauelf
@Blauelf
Nov 29 2018 16:33
{2,} means at least two
Jason Luboff
@JLuboff
Nov 29 2018 16:33
/\d{2,}/g matches 2+ integers. So it would match 340 in this string He340
Mike Smith
@MikeSS281986
Nov 29 2018 16:33
that makes sense
so would i do something like string.reverse(/\d{2,}/g); ?
Blauelf
@Blauelf
Nov 29 2018 16:37

You can do things like

console.log(str.replace(/[aiueo]/gi, function(match) {
    return match.toUppercase() === match ?
                match.toLowerCase() :
                match.toUpperCase();
}));

This should transform Aloha to alOhA

Mike Smith
@MikeSS281986
Nov 29 2018 16:41
i get that but im thinking on like if 2digits or more are found, reverse that order of what was found
Put that function in the replace
Mike Smith
@MikeSS281986
Nov 29 2018 16:51
yeah .split("").reverse().join("");
Blauelf
@Blauelf
Nov 29 2018 16:52
Like str.replace(/\d+/g, reverseString)
Mike Smith
@MikeSS281986
Nov 29 2018 16:52
mmm. that could work;
Mike Smith
@MikeSS281986
Nov 29 2018 16:59
you are a mf genius!!!!
thank you @Blauelf !!!
@Blauelf ++
and all for your help!!
one more question if i may?
Adel
@AdelMahjoub
Nov 29 2018 17:02
@jeffersonnnn your learning api repo and live code, rewritten as you wanted
Mike Smith
@MikeSS281986
Nov 29 2018 17:02
if joining an array with cotainining intended commas, can a regex help preserve intended commas so [h,e,l,l,o, , ,w,o,r,l,d] can output hello,world?
Jason Luboff
@JLuboff
Nov 29 2018 17:05
There's no need to use regex
just use .join('')
Mike Smith
@MikeSS281986
Nov 29 2018 17:05
thats right. duh....feelin red there in my face,
hold on...
.join('') took away all commas including the intended one.
Jason Luboff
@JLuboff
Nov 29 2018 17:07
console.log('Hello,World'.split('').join(''));
Result of just split('') ['H', 'e', 'l', 'l', 'o', ',', 'W', 'o', 'r', 'l', 'd']
Result of adding join Hello,World
Blauelf
@Blauelf
Nov 29 2018 17:10
Should be " or ' all the time, not mixed :P
Jason Luboff
@JLuboff
Nov 29 2018 17:10
Fat fingered it
Blauelf
@Blauelf
Nov 29 2018 17:11
Not even close on my keyboard.
Jason Luboff
@JLuboff
Nov 29 2018 17:11
Got too eager to get my capital H lol
Blauelf
@Blauelf
Nov 29 2018 17:11
Opposite ends for me :D
Jason Luboff
@JLuboff
Nov 29 2018 17:11
Maybe fat fingered wasn't the right term. I was holding shift down a little too early
Mike Smith
@MikeSS281986
Nov 29 2018 17:12
lol
been there
thank all. im almost done with my project then. :)
Blauelf
@Blauelf
Nov 29 2018 17:13
" is Shift+2, while ' is Shift+#, with # on the 105th key, right of ä.
Jason Luboff
@JLuboff
Nov 29 2018 17:14
On US keyboard, ' and " are the same key. ' = no shift " = shift
Blauelf
@Blauelf
Nov 29 2018 17:15
Oh, it's completely different on a US keyboard, the extra key we have is actually in the lower left, the #' key has a counterpart in the US \| key that we don't have.
Jason Luboff
@JLuboff
Nov 29 2018 17:15
Ya \| is above Enter
Blauelf
@Blauelf
Nov 29 2018 17:16
Return you mean. And that one is two rows high, but narrower.
Jason Luboff
@JLuboff
Nov 29 2018 17:17
Depends on the keyboard whether its Enter or Return with most being Enter now.
Blauelf
@Blauelf
Nov 29 2018 17:17
Enter is meant to "enter data", part of the number block, totally different device. Return is "carriage return".
They have different key codes. Game Earth2150 actually used both, and I was pretty pissed when I discovered the USB number block had an Enter key sending the Return code.
Blauelf
@Blauelf
Nov 29 2018 17:25
People writing the wrong name on them are just evil. Return comes from typewriters, and Enter from calculators. Two devices fused in one keyboard, still different things.
Jason Luboff
@JLuboff
Nov 29 2018 17:26
Evil people
Blauelf
@Blauelf
Nov 29 2018 17:28
Yeah. Chinese building numpad controllers spitting out Return codes must have some fun imagining the people expecting an Enter key and getting Return instead.
But probably, they are just ignorant, as it rarely matters.
Adel
@AdelMahjoub
Nov 29 2018 19:27
Anyone used vscode to write Perl scripts ?
Pagnito
@Pagnito
Nov 29 2018 20:00
anybody know what type of headers are set for axios by default?
Brad
@bradtaniguchi
Nov 29 2018 20:16
Just spent half an hour jumping thru a complicated feature to find the bug to be a typo in a string :(
Jason Luboff
@JLuboff
Nov 29 2018 20:17
Atleast you found it
Brad
@bradtaniguchi
Nov 29 2018 20:27
Yea thank god, I was starting to question my ES6 code
Joseph
@revisualize
Nov 29 2018 20:56
Hi
Brad
@bradtaniguchi
Nov 29 2018 21:12
hello
Brad
@bradtaniguchi
Nov 29 2018 21:27
Sooo I was reading about service workers, anyone got any experience working with those? I finally figured out what they essentially are and they seem really damn useful haha
Pagnito
@Pagnito
Nov 29 2018 21:28
omg chrome finally changed that ugly yellow input background color
@bradtaniguchi im workign with them right now
Brad
@bradtaniguchi
Nov 29 2018 21:39
@Pagnito I was wondering if you know of any disadvantages of using the technology, or things to watch out for. I also was wondering if it would help with caching network calls till later? So like google docs will still work when offline, but when you get connected it "uploads" everything. SWs will help with that right?
Pagnito
@Pagnito
Nov 29 2018 21:43
yea so when caching you pages, you wanna cache your static files (app shell) and just reach out to them on all calls after that, for faster responses, cuz they are never gonna change, and if u do, u just change ur cache version write code to delete old version and on the next visit it will cache the new static files. I really dont see any disadvantages atm, but a small gotcha with caching dynamic content, applying the right caching strategy to keep ur ui updated with the fresh content. And yes working offline and uploading files once online is done with a sync event inside the service worker
its rly cool cuz u can add to homescreen and it literrally works just like any native app after that as far as visually wise
and since u can sync content for delayed uploads, it feels just like an app
im working on a small app right now, it still doesnt have full synced functionality, but it has dynamic caching. so if u add make a post and go offline, it will still be there
oh and btw, only google auth works atm if u end up checkin it out
oh shit, there is a bug i just saw
it wont work ight now T.T
Brad
@bradtaniguchi
Nov 29 2018 21:59
hehe
I need to look into how the SW caches my outgoing requests, if it can do that, and its easy to integrate, I'll hop on the train right now haha
Pagnito
@Pagnito
Nov 29 2018 22:01
yea its really cool
Jason Luboff
@JLuboff
Nov 29 2018 22:10
Ugh. This shit is making no sense. Updating state to delete an input field.. I see what should be my new array (that gets set in state) but its always just deleting the last result on rerender instead of the actual deleted item. Even looking at the React Dev console..it shows the proper element deleted from the array :angry:
Brad
@bradtaniguchi
Nov 29 2018 22:23
@JLuboff What does your deletion code look like?
Jason Luboff
@JLuboff
Nov 29 2018 22:35

@bradtaniguchi

  deleteControlText = (index, event) => {
    const additionalControl = [...this.state.additionalControl.slice(0, index), ...this.state.additionalControl.slice(index + 1)];
    this.setState({
      additionalControl
    })
  }

If I console.log(additionalControl) the array looks as it should.. in React dev tools..it looks as it should...it just doesn't rerender properly

Additionally..the render code

    {additionalControl.map((e, i) => {
      console.log(e);
      return (
      <div key={i} className="field is-grouped">
        <div className="control is-expanded">
          <InputField onChange={additionalControlText.bind(null, i)} value={e.name}/>
        </div>
        <div className="control">
          <button className="delete" title="Delete" onClick={deleteControlText.bind(null, i)}/>
        </div>
      </div>
    )})}

the above console.log(e) also properly only shows the correct elements..

Brad
@bradtaniguchi
Nov 29 2018 22:44
hmmm
Jason Luboff
@JLuboff
Nov 29 2018 22:46
Only thing I can think of is the key but I tried using the index and using {"control" + i} no difference.
I would still think that it would notice the index 1 is no longer the same content
Jason Luboff
@JLuboff
Nov 29 2018 22:59
............think I just figured it out..............
Brad
@bradtaniguchi
Nov 29 2018 22:59
What about the additionalControlText.bind(null, i) what does that do exactly? I think I understand why .bind(null, i) is on the deleteControlText func but idk about the other oen
Jason Luboff
@JLuboff
Nov 29 2018 23:01
I figured it out. I'm just an idiot. I had value={e.name} when it should have been value={e.control} :angry:
@bradtaniguchi So I can send the index to the function without having to alternatively have index in the name or id of the input
Brad
@bradtaniguchi
Nov 29 2018 23:02
uuhhh alright haha, well you figured it out haha
Jason Luboff
@JLuboff
Nov 29 2018 23:02
If I'm being completely honest... I got it from @cmccormack code example he gave me a while back lol
Brad
@bradtaniguchi
Nov 29 2018 23:08
hahaha I see
Welp I still have a way to go to figure out react haha
Jason Luboff
@JLuboff
Nov 29 2018 23:09
You and me both
My next challenge is going to be creating a template page to convert into a PDF...
Brad
@bradtaniguchi
Nov 29 2018 23:09
I'll stick with my Angular, so much simpler :P
@JLuboff Hmm how you going todo it? Were working on something very similar right now, but I'm not having anything todo with it
Jason Luboff
@JLuboff
Nov 29 2018 23:11
Hasn't been updated in a while..but still has 36.5K downloads a week
Brad
@bradtaniguchi
Nov 29 2018 23:13
Ah that's right, I know were using chromium to generate our pdfs. Ya know if you are in chrome and go print an option is PDF, were using that
Jason Luboff
@JLuboff
Nov 29 2018 23:13
Windows 10 has a built in Print to PDF option
but I need to generate the page to be formatted a specific way for printing
Brad
@bradtaniguchi
Nov 29 2018 23:14
Shouldn't that all be HTML+CSS/styling stuff? not necessarily the pdf engines job?
Jason Luboff
@JLuboff
Nov 29 2018 23:15
That part ya, template to feed the corresponding data into the html/css and than it was asked that it be in PDF format :shrug:
Brad
@bradtaniguchi
Nov 29 2018 23:17
Guess it depends on what is available on the prod server. Since were on google, all the google containers have chromium, so we didnt' have todo anything but call some node-package supplied by google
Jason Luboff
@JLuboff
Nov 29 2018 23:18
This will be used between Chrome/FF/Edge (not supporting IE, whoo!)
Brad
@bradtaniguchi
Nov 29 2018 23:27
Are you doing the pdf generation on the client-side?
Jason Luboff
@JLuboff
Nov 29 2018 23:28
No server side to be accessed client-side.. I think. I haven't gotten that far heh
Brad
@bradtaniguchi
Nov 29 2018 23:32
Yea, so if you have html on the server and want to send the generated pdf to the user, you need to have the browser/tech that does the "compiling" on the server, that seems like the easiest, safest way to go about things. That or pick a different stand alone lib cuse the one you gave early looks to dead haha.
Jason Luboff
@JLuboff
Nov 29 2018 23:33
Ya I found some examples where the template gets rendered on the server side before creating the pdf

also.. is there a shorter way to determine if an object has any properties?

Object.keys(item[0]).length

(item[0] becuase its an array of objects where the first object starts empty)

Brad
@bradtaniguchi
Nov 29 2018 23:37
@JLuboff That's usually the way I check
Jason Luboff
@JLuboff
Nov 29 2018 23:38
:thumbsup:
I guess maybe I should check the entire array and remove any empty objects thus keeping individuals from adding a bunch of empty fields...
Jason Luboff
@JLuboff
Nov 29 2018 23:49
item.filter(e => Object.keys(e).length)
Thats better