Let's code with function composition - Fun Fun Function

[@MarkLitchfield]

It was nice to see, in more glorious detail than usual, 1) the bad "habits", 2) more of a start to finish (concept, code, test) cycle, and 3) how you examine and think about the code from idea to efficient form.

[@themaxsandelin]

"I was not being lazy, I was being time efficient" - Every programmer ever.

[@Spacecat1000]

I've been saying that shit since I was a child. Makes me think I chose a good career...

[@qwarlockz8017]

My gosh I really have to say I love the fact that you are doing different types of videos. It is great that you have short clear videos that show a single idea clearly. But it is also great that we get the chance to see you put it all together and actually code. We get to see the test. We get to see the adjustments and refactoring and we get to see the wrong turns. I think we learn best by watching both styles of videos. Thanks for being flexible and giving us various tools to work with. Great job! Oh and I love the opening!

[@martinharrisFTW]

Hey MPJ, first time commenter long time stalker. Just wanted to say you have no idea how much we all look forward to your videos every monday, and seeing a 1hr47min upload put a huge grin on my face. Thank you for all your hard work and the risk you've taken in quitting your job for all of us. These videos bring back my motivation every time I have a bad coding day!

[@funfunfunction]

aw, that you!

[@forgettd]

Oh my! Your videos is my best way to procrastinate honestly

[@JamesLelyveld]

Hey MPJ - just wanted to chime in to say having this format occasionally is great. Watching a lot of the concepts being put into practice really clarifies things, I can understand why it's not for everyone but I definitely found it really useful.

[@emanonmax]

What do you think about Meth Meth Method?

[@Iminic1990]

Have this upvote.

[@DrossProwler]

As funny as this comment seems, he's refering to an actual dude who has a channel called Meth Meth Method. That dude is also from Sweden and, by his own words, his channel is "an homage to Fun Fun Function". I was making lunch one day and the entire time I was thinking to myself, 'God damn, how did he think Meth Meth Method was a good name for a channel?'

[@papawattu]

Makes me think of dependencies of other sorts

[@KennethJones0]

All the video are at 2x speed

[@insertoyouroemail]

fun fun functor

[@aladouagi1388]

well, I felt very happy to see the duration of the video! keep it up man!

[@ancoopa]

Love the "Let's code" videos. Such a great way to share the experience. Thank you, MPJ. ^^

[@driden1987]

Despite you hacking this app everywhere, I see myself reflected in this video when trying to push out a product. Freaking loved it, thanks MPJ

[@adamgm84]

I just dropped in to this comments stream to say/emit I internalized how .reduce() works this morning and I feel like I can now agree with MPJ when he said "I can use this for EVVVERYTHING". It's 100% next level. I highly recommend everyone studies reduce if you haven't yet. Here's a sampler: const animals = ['Garbage', 'Rodent', 'Cat', 'Dragon']; animals.reduce((all, item, index) => { all[item.toLowerCase()] = item.length; return all; },{}) // The secret is (all, item, index) and you just tack either 0, {}, or [] as the second parameter (I like how they all look like zeros). After you realize this, its basically array.prototype.forEach on steroids. Thanks MPJ. The best way to do it is to goto json-generator.com (no-spam) and generate a giant poop filled JSON object and use that for your practicing. It's a lot better than those contrived examples you see everywhere. Don't be fooled by all that crazy "summation" jazz. All it means in the context of (all, item, index) is that "all" is the number, object, or array you are adding to and "item" is the current row (aka item in the array you are stepping through). If item is an object, you can use dot notation and eat up whatever data you want.

[@RonaldSuez]

100 k subscribers! congrats mpj!

[@RobertBMenke]

So I vote for a follow-up episode that actually covers function composition. It's a really important topic that a lot of people either don't understand or don't follow.

[@sylvestrealexandre3800]

this needs upvotes !

[@SuperManitu1]

40:11 That's why I don't like Express. Semanticly you would return the error (keyword). This way you could simply remove all the else branches and replace it with a simple return res.status(200).send('carry on') at the end as some sort of fallthrough. But because that would return undefined that might actually work

[@ProgramArtist]

1) You have made a Copy-Paste error on 1:33:28 you forgot to pass the 'assignBadge' to 'errorUnlessOK' factory method...I held my breath until the end of the video and you didn't notice it... I think it is because you call the factory methods by the names of the functions they create and it confused me and you a couple of times including this time. Maybe you should always add the 'make' prefix for factory methods. On the other hand it will make the code less readable when chaining like you do... 2) Another thing that might have helped you is some static type checking. I know you are usually against types but the error on 1:16:43 and on 1:20:03 could have easily be detected with some very basic type checks... 3) I think it would be a great video to show how to test express endpoints...I usually like to use 'supertest' to spin up the express in the tests and call bunch of endpoints and check the responses... 4) Maybe you should use express pipes when handling different request types instead of if/else or switch cases? I mean create a handler for each type in redux style and if some handler handles the request it will send() the response, otherwise it will call the next() function... 5) Verryyy long video but it showed a lot of real life code things like: - "I believe it will work...NOOOOO" - "There, I fixed it, now it will...NOOOOOO" - "Maybe I should test it now? I'm too lazy...next time" 6) If you read this line you are awesome just because you didn't give up reading haha

[@ChristopherOkhravi]

100k subs! :) Grattis :D

[@jasonmathew33]

I almost thought you weren't going to post today! Whew!

[@jakubrpawlowski]

This is your best video so far. Thank you for sharing!

[@jimwilde]

Granted, this vid wasn't nearly as succinct as your previous ones, but I liked getting the chance to just watch you work, see how you think as you go. I think this is quite important as it demonstrates various topics you talk about in your other videos. In a way, I find that I'm pair programming along with you as you work, and the pace isn't too quick as it isn't edited so much. This gives me the chance to try to anticipate what you're going to do in your refactors, then see if I'm right as the video goes.

[@funfunfunction]

Thanks! This is the idea with the lets code videos. I actually try not to do them because I know that there is a sizeable chunk of the audience that REALLY don't like them, but I end up doing them sometimes anyway. I might do live streams this way instead, we'll see.

[@PauloLinhares93]

+1 for the livestreams!

[@adamgm84]

No, keep doing them in my opinion, well and livestreams too for sure, but I would rather see you just drop a disclaimer at the beginning. I find these type of videos extremely beneficial to code along with because I can pause and complete stuff ahead of you and then see if I was right, like Jim says. I would rather see you collect a repository of these type videos than not do them because some loud individuals. I imagine it's like restaurant reviews. You don't hear from the happy people usually, but its easy to hear from unhappy people.

[@andresgutgon]

It's super funny to see someone else suffering and enjoying with code. I love it!

[@manuelkoch5359]

This might be a silly Question: I know the import is the new ES6 Syntax, but why do you use require sometimes and another time the import?

[@emretekince]

I'm using async functions without any "wrap" function. Like: router.post('/validatePurchase', async(req, res) => {})

[@MrMisterkrazy]

Make sure exceptions and errors are handled the way you expect! I don't think Express will handle promise rejections as errors (or even notice that they happened) by default.

[@dealloc]

Discourse seems to use a similar approach to documentation as Stripe by asynchronously loading the individual articles.

[@clarejang9088]

1:33:27 Hey, MPJ, you should pass a operationName to errorUnlessOk, since errorUnlessOk is a function that returns a function, shouldn't you? 1:33:06 codes show the codes related with.

[@CrapE_DM]

Your PostAsJSON... and errorUnlessOK functions return Promises, right? Then shouldn't you use apply() instead of then()?

[@funfunfunction]

+Jacob Zimmerman to my knowledge, the JavaScript promise does not have an .apply method.

[@CrapE_DM]

Fun Fun Function it looked like that was what your library was using...

[@robertgioeli3211]

So very sad that I missed out on these wonderful video's when MPJ was still operating his channel.

[@CodyLandry]

Is there a reason you didnt' use async/await? Doesn't node 8+ support it?

[@funfunfunction]

+Cody Landry async/await breaks the nice function chain. I would have to assign intermediate variables to put the values in.

[@CodyLandry]

I guess that's true. Great video! I think you're about the only youtuber writing real code. I see so many making videos with examples that are so contrived, they're pretty much pointless. Also, thanks for keeping all the in production debugging and keeping it real.

[@ipelix3733]

What platform you use for this forum? I see many forums with this style base.

[@himitsumonban]

It's Discourse.

[@okoiful]

could you do another tut about func composition.. this one is messy and all over the place...

[@randomizednamme]

I'm sure you know it exists but I'm gonna mention it anyway, you know you can amend to the previous commit if you forgot something small right?

[@mtheoryx83]

Should work nicely as an alias: alias whoops='git commit --amend --no-edit'

[@live4love]

whats the source control client you use in the video?

[@funfunfunction]

+Jolie Kaufmann Git Tower!

[@christianhg]

At around 26:00 you forgot to link to the video about function composition using pipes. *keeps watching*

[@jnfsmile]

2:10 wait, so what was it?

[@MrJerczu]

Since you not reassigned values shouldn't you use const over let? You tend to use lots of lets in the places where const would be more appropriate

[@funfunfunction]

Yeah. I usually do, but I have this phase now where I use let everywhere in order to use less language constructs. I've not found the const to prevent much errors - what I would really like is proper immutability, that would probably make a significant difference.

[@MrJerczu]

Fun Fun Function fair enough... really enjoying your videos

[@UocLv]

You should always use const, where it makes sense. It not for bugs, it's is for code readability. Array and objects const's still can be mutated. But you can' t reassign them. I never use let in code, only in testing. You should not mutate your objects. It' s makes the code more readable and objects state predictable.

[@MrJerczu]

WuuEvil that was kinda my thought where var is not reassigned use const any reassignment constitutes let

[@MarlyssonSilva]

Do you created whole fun fun forum's platform?

[@PaulKamma]

Hmm. Why don't you use the topic_id for identification instead of the topic_slug? .. I think it would be safer because now I could create also a topic called "introduce yourself" which would have the same slug..

[@KenrickBeckett]

I love this channel!

[@ahsath]

This guy is just like general Hans Landa so cool!

[@adamcollier1907]

Good Monday evening! I was just wondering if you could shed some light on the recording equipment you used for video, considering it is much longer than usual, thanks in advance!! ʕ•ᴥ•ʔ

[@funfunfunction]

+Adam Collier See the behind the scenes video

[@adamcollier1907]

ahh okay so you are using magic lantern to auto start recording after the time limit?

[@papawattu]

Good to know you also make the same mistakes I do... great video man

[@SimpleKaban]

You can also use *npx* github.com/zkat/npx to run local npm binaries. Like _npx mocha *.test.js_ . It goes out of the box with npm v5

[@matthewbarbara2916]

Good Monday very late afternoon! =)

[@ericbergh]

Good monday, ehrm, morning!

[@rndmreg4684]

That was great, thanks for sharing

[@serafim2867]

Will you make some series about React || Redux ? Thanks : Ok

[@KrisGesling]

I need some new tooling to manage the video dependency injection ;)

[@mrsecify]

Oh my lord, that's a gorgeous looking color scheme! Care to tell me what's it called? (:

[@0xkvn]

The IP address of Zhang is visible. Not very cool that you didn't edited it :/

[@funfunfunction]

+Pet_Chop sorry I missed that. These long form videos don't allow for much scrutiny. Luckily, there is not much that can be done with an IP in isolation.

[@Timooooooooooooooo]

Fun Fun Function For future reference, you can use the KZbin video editor to blur stuff without reuploading

[@TheShneek]

I liked this one.

[@YoannCiabaud]

The discourse API documentation uses ReDoc: github.com/Rebilly/ReDoc

[@brianhogg358]

I'm surprised you use a GIT app, rather than just the CLI. (Not a criticism, of course, just an observation)

[@sheriffderek5333]

Have you worked with Tower before? It's kinda hard to go back... especially when you are working on 4 projects at a time.

[@funfunfunction]

+Brian Hogg I switch between both. My main use case that doesn't show here is that I like neat commits, and staging individual lines and segments is something that Tower is much better at than the CLI.

[@struggopuggo]

Fun Fun Function have you tried git add -p?

[@ProgramArtist]

It's not the same, try navigating and seeing more context, you can do that but it's way way way slower

[@theophile_]

1:46:58 ... it's gonna be a long long coffee break today ;)

[@fusedtoast5367]

Badass man.

[@AlphaEtOmega43]

You should take a look at koajs web framework instead of express !

[@funfunfunction]

I've tried it but I went back to express. Partially because the ecosystem is so weak compared to express, and partially because I'm not a fan of using generators for things that aren't actual generation of values. It's cool, but in practice I find it rather convoluted.

[@dertieran5738]

Fun Fun Function As of koa v2 is based on promises, instead of generators. So somewhat like your express-wrap function. But yes express still has the bigger ecosystem.

[@PeterNaydenov]

KOA 2 doesn't use generators any more. Take a look.

[@swarajgiri]

Do you really need "wrap"? Try taking it out ;)

[@ehza]

keep it up

[@TheGryphon14]

Like first, watch later

[@vpetevotov]

Wow))

[@konstantinnesterov6165]

This may be so much better if you record a second round with the same material, have a complete solution and stick to agenda

[@RineezAhmed]

I guess you forgot to edit the video before publishing it. You could save a lot of time for your audience if you did. I think this video could be at least 40%. shorter.

[@funfunfunction]

The lets code videos are intentionally minimally edited. It's not for everyone, and this one is on the extreme.

[@adamgm84]

The extra time spent adjusting continuously is what makes videos like this great. In my experience, as long as the final product comes out functional, then everything in between is what happens to 90% of coders. If you don't like it, watch it on 2x speed. I usually watch any and every section between 1x and 2x speed. You can control your own efficiency. Traversy Media is really good at leaving his idiot errors and fixing them as he goes. It's very important to make stupid errors and reason about them. (not saying you did--but, the philosophy of it)

[@adamgm84]

To clarify, leaving small anomalies and fixing them provides opportunities for people to be like "oh yea i remember when he did that". It's an extra surface port for memory formation with respect to time.

[@RineezAhmed]

adamgm84 There are many videos from fun fun functions, that I like and have liked, but here it was just not expected quality. For example a lot of the time was spent just searching for some specific admin UIs. Finally when he found the UI there was no pause to help the "memory formation". I had to pause video go back a few times to understand where he found it actually. If he found it first attempt itself, I could still form my memory by pausing or slowing down video and at same time would save a lot of valuable data download for audience. Putting video at 1.5x or 2x would still be same amount of data download as 0.5x to load the video, correct? He can take this as a useful feedback or discard it as useless blah blah. It's entirely up to him.

[@adamgm84]

Thanks for your reply Rineez. I acknowledge your argument and agree for the most part. I also appreciate smooth flowing pair programming during which I can absorb how MPJ reasons about everything from how he selects logic to how he blasts out Google searches and makes funny noises (which I also do, but I probably make more explosion and poo sounds when code blows up).

[@goranudosic8420]

I appreciate the effort but 2h video just can't fit into my work day. Most likely will chunk it through the weekend.

[@Miciozzo]

MPJ.. honestly? most of the previous video were more effective then this even if they were 10 min video.. please go back to the right way :)

[@funfunfunction]

yah, I know the long form lets code videos that I sometimes do are not for everyone.

[@howiemann7908]

Love the long form. It's hugely beneficial to see your thinking and debugging approach. Keep up the great work

[@takaqod715]

The two formats have some interesting aspects but the short one is like discovery on steroids => we can see in 10 min our brain gain volume :p