Here is a tutorial on how to create a contact form in React / Redux.

preface: swearing.
because anger.

So. I'm trying to use Material Design with Material UI. The components and UI look *great*.

It's from google, though, which really pisses me off. but I like what I can do with the UI.

HOWEVER.
I really want a grid system for responsiveness. because obviously. besides, i really hate doing all the responsive shit myself. it sucks and i hate it.

Material Design does not include a grid system. okay, it includes a grid component, but it's not for site layout. it's for making a grid of images. or something.

What it does include is a lot of very lengthy documentation on what you should do, complete with fancy graphics saying "THIS IS HOW YOU MUST DO IT OR YOU'RE DOING IT ALL WRONG" -- but they don't actually support it! you must do it all yourself.

Why oh why would they tell you how you must do things if they don't provide the tools to make it possible? fucking google.

You might decide it's a grand idea to interject at this moment and say: "there are plenty of tools out there that allow you to do this!" And sure, you'd be right. however -- and i think this might just barely might be worth mentioning -- THEY REALLY FUCKING SUCK. Hey, let's look at some of the classes! So clear and semantic! This one was nice and simple: "xs4" -- but wtf does that mean? okay, it apparently means 4 columns as they'd appear on an extra-small layout. How does that work on a large layout? Who knows. Now, how about "c12"? okay, maybe 12 columns? but how does that display on a phone with a layout small enough to only have 4 columns? i don't know! they don't know! nobody knows!

oh oh oh oh. and my particular favorite: "mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom" WHAT. THE. FUCK. I'm not writing a goddamn novel! and that one claims to be from google itself. either they've gone insane or someone's totally lying. either way, fuck them.

SO. TERRIBLENESS ASIDE.

Instead of using Material Design v0.fuckoff that lacks any semblance of a grid layout, I figure I'll try v1.0 alpha that actually has one supported natively. It's new and supports everything I need. There's no way this can't be a good idea.

The problem is, while it's out and basically usable, none of the React component libraries fucking work with it. Redux-Form doesn't work with it either because it doesn't understand nested compound controls, and hacking it to work at least triples the boilerplate. So, instead, I have to use some other person's "hey, it's shitty but it works for me" alpha version of someone else's project that works as a wrapper on top of Redux-Form that makes all of this work. yeah, you totally followed that. Kind of like a second-cousin-twice-removed sort of project adding in the necessary features and support all the way down. and ofc it doesn't quite work. because why would things ever be easy?

like seriously, come on.
What i'm trying to do isn't even that bloody hard.

Do I really have to use bootstrap instead?
fuck that.

then again, fuck this significantly more.

UGH.

Miss those days when web development used to be easy...

Now the react, react-router, redux, server-side-rendering, redux-form and nodejs...making me crazy.

And oh how can you forget the fucking webpack.

Someone please kill me.

I finally got Redux-Form’s `initialValues` to work! Wooooo~!

/giphy confetti cheering

It turns out I haven’t actually been doing anything wrong for the past week. I mean, I've been working on other things during that week, too, but I've been trying to solve this the entire time.

The cause? ReduxForm made a breaking change awhile ago (v5; we’re using v7) that prevents the `initialValues` prop from working if you decorate your form component in the wrong order. Many examples online are incorrect because of this.

Basically, the decorators `reduxForm` and `connect` do not commute:

Incorrect:
`reduxForm(...)( connect(..., {...})(form) )`

vs Correct:
`connect(..., {...})( reduxForm(...)(form) )`

But what really pisses me off is that the fucking documentation specifically fucking states that you may decorate your component IN ANY [FUCKING] ORDER.

/giphy that is [fucking] false

So, I've been following example after [fucking] example that either list these in the wrong order, or I just don't notice the different order because it doesn't matter. AND because of that NONE OF THE [...] EXAMPLES WORK.

ARGH.

I've been pacing around the office trying to figure this out for days. I've rewritten my code three times to try to solve this. I've written two workarounds for it only to rip them out and try again because they both broke some other part of the UX. (e.g. causing false validation errors after rerender)

just. hafhsldkjhgjkhagklwhsdjfkahslf. 😡

/giphy angry hades

You know how I discovered this?
I found it in a github ticket. One solitary, untagged ticket from October of last year. Not a single goddamn post anywhere else mentioned this. And the [...] documentation specifically [...] states the [...] opposite!

Bloody [...] hell.

but it finally works.
as;kgjhaekl;gahgjkdflssdafh.

I could scream.

Material-UI.

I'm exhausted, so I'll keep this short.

I changed a TextField to a TimePicker, and noticed my className prop didn't apply anymore.

I thought it was my mui/redux-form wrapper for that component since I had just written it, but that was basically a straight copy/paste from the other wrappers, and both receives and passes the prop just fine.

After a lot of fighting, I finally found a workaround: if I add a `data-work-you-piece-of-garbage` prop alongside it, only then will the className show up on the rendered element. Why? I have no freaking clue. I tested it three times and got the same results. I looked through the MUI source and it still doesn't make any sense.

Fucking whatever, only three hours wasted.

Enjoy this ultra⁻DRY piece of React-JSX-Redux-form component

!rant

... ahem.
I CAN TYPE IN THE BOX
AND IT SHOWS UP
AND IT STAYS THERE

WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!

I am much too tired to go into details, probably because I left the office at 11:15pm, but I finally finished a feature. It doesn't even sound like a particularly large or complicated feature. It sounds like a simple, 1-2 day feature until you look at it closely.

It took me an entire fucking week. and all the while I was coaching a junior dev who had just picked up Rails and was building something very similar.

It's the model, controller, and UI for creating a parent object along with 0-n child objects, with default children suggestions, a fancy ui including the ability to dynamically add/remove children via buttons. and have the entire happy family save nicely and atomically on the backend. Plus a detailed-but-simple listing for non-technicals including some absolutely nontrivial css acrobatics.

After getting about 90% of everything built and working and beautiful, I learned that Rails does quite a bit of this for you, through `accepts_nested_params_for :collection`. But that requires very specific form input namespacing, and building that out correctly is flipping difficult. It's not like I could find good examples anywhere, either. I looked for hours. I finally found a rails tutorial vide linked from a comment on a SO answer from five years ago, and mashed its oversimplified and dated examples with the newer documentation, and worked around the issues that of course arose from that disasterous paring.

like.
I needed to store a template of the child object markup somewhere, yeah? The video had me trying to store all of the markup in a `data-fields=" "` attrib. wth? I tried storing it as a string and injecting it into javascript, but that didn't work either. parsing errors! yay! good job, you two.

So I ended up storing the markup (rendered from a rails partial) in an html comment of all things, and pulling the markup out of the comment and gsubbing its IDs on document load. This has the annoying effect of preventing me from using html comments in that partial (not that i really use them anyway, but.)

Just.
Every step of the way on building this was another mountain climb.
* singular vs plural naming and routing, and named routes. and dealing with issues arising from existing incorrect pluralization.
* reverse polymorphic relation (child -> x parent)
* The testing suite is incompatible with the new rails6. There is no fix. None. I checked. Nope. Not happening.
* Rails6 randomly and constantly crashes and/or caches random things (including arbitrary code changes) in development mode (and only development mode) when working with multiple databases.
* nested form builders
* styling a fucking checkbox
* Making that checkbox (rather, its label and container div) into a sexy animated slider
* passing data and locals to and between partials
* misleading documentation
* building the partials to be self-contained and reusable
* coercing form builders into namespacing nested html inputs the way Rails expects
* input namespacing redux, now with nested form builders too!
* Figuring out how to generate markup for an empty child when I'm no longer rendering the children myself
* Figuring out where the fuck to put the blank child template markup so it's accessible, has the right namespacing, and is not submitted with everything else
* Figuring out how the fuck to read an html comment with JS
* nested strong params
* nested strong params
* nested fucking strong params
* caching parsed children's data on parent when the whole thing is bloody atomic.
* Converting datetimes from/to milliseconds on save/load
* CSS and bootstrap collisions
* CSS and bootstrap stupidity
* Reinventing the entire multi-child / nested params / atomic creating/updating/deleting feature on my own before discovering Rails can do that for you.

Just.
I am so glad it's working.
I don't even feel relieved. I just feel exhausted.

But it's done.
finally.

and it's done well. It's all self-contained and reusable, it's easy to read, has separate styling and reusable partials, etc. It's a two line copy/paste drop-in for any other model that needs it. Two lines and it just works, and even tells you if you screwed up.

I'm incredibly proud of everything that went into this.
But mostly I'm just incredibly tired.

Time for some well-deserved sleep.

Apart from having a baby which is the hardest in the world，i think the hardest project is to learn to code.

I studied philosophy and anthropology but gamed a lot. Me and a good mate decided to work together and he told me hed teach me coding.

The guy is a genius but he is a reckless rebel genius who tells everybody to fuck off.

So，after 1 year in a half of intense coding where i had to learn linux， networks， and im not shitting you html and css as well and of course javascript.

He has now put me on， for the last 2 month， in charge of our front end backoffice. I have to design forms that do the right http requests，do the unit testing， play with redux-form， react-redux and he has thrown me into the basic java backend so i can begin working with entites and how i serve the data and link it to the database and even create tables.

Every time i fail hemakes me remake everything.

I actually came on devrant to study the dev community (i always gamed a lot but this is a whole different community). The dev community is pretty awesome and unique.

Anyhow， i remember when i saw him as me to complete an exercise and i didnt event know which words were the reserved language ones and those i could use myself. It was like fucking magic.

I made a web app where I can build any kind of form, with sections, validations, multiple type of inputs (even coordinates or polygons, photos, etc.) while allowing to see a preview of how that would look in a mobile app. That preview is because when you're done building the form and saved it to the DB, then in a mobile app (which I made as well) you can choose that form and use it.

Everything is beautiful, but after 3 sections with 25 questions each, everything becomes really slow because of the insane amount of actions that redux-form fires on every character type 😢

Today I made a public demonstration, and despite my code is very clean and well made, I think, that slowness made me look like a shitty developer, even thought I know what I made is like a 1000 times better than what I was asked to develop.

I used to manually pass form fields to Redux and back 😖

Of course I discovered redux-form later but now I’m using final-form and it’s a breeze

There is a project: multi step form. It has login form, text field, date, upload. It is written in jQuery, Zend and oracle. I need to rewrite. I can use my familar jQuery, PHP skills. Or I can go for react redux, build API with Zend. The issue is that I only have 2 months. Very basic knowledge of react, redux webpack. So I need to learn and build the project. Should I go for new tech. I am not sure I can reach deadline, as there are many things to learn. Advice? If i use the new tech, how do I learn quickly?

Guys is that the case, that it is such a hassle to work with forms in React-Redux application?! Hell, it takes a lot of time to just create a simple form with like 3 lines of inputs.

Everytime I need to setup bunch of those Actions that will fire on a field value change, than selectors to pick from the state and send to the backend with redux-saga. OMG OMG OMG.

Redux-forms kind a struggle to setup too at first, but I guess I have to go for it anyway?

[opinions welcome]
I'm just furious right now!!!

So I'm on this project where we have to make a whole *very old* website look like it's brand new.

Thing is, the whole point of the project is to make exactly the same pages as on the existing website smh. No UX or UI suggestions.
Just put the navbar in a component that looks like a tab bar, who cares anyway!?

Btw, I'm in charge of the UI.

My colleagues and I (mostly my colleagues) made a react components library and we use it for this project.
Fucking inputs get thrown into tables and all that, but hey, that's what the client asked for.

So here I am with my shiny new page, and I just hand it over to the front-end dev who just arrived.
She's supposed to feed in the data.
I don't give a fuck you use flow or redux or whatever fancy tooling.
Just call your back-end, get the data, format it and feed my damn table with it. That's it.

So today, after 5 weeks she's in, she calls a meeting where she's screening a presentation to the team complaining about how long it took her to understand what I did and change it completely.
Pieces of code on screen, saying it's crap and it shouldn't be like that.

I'm not responsible for inputs in fucking table, the client is!
Of course I have nested components with data passed through all the way: it's a series of fucking radio buttons within a table within a form!

During 5 weeks, yoy didn't even come to me once saying it's not what you expected or you're having trouble with my work!
And there we blaming my job like I'm the bad guy?!

Tonight, everyone's going home thinking I'm no good at what I do and completely lost, all because of her.

If you got this far, I'd like to hear from you on how I should act with her and how to tell her what she did is awfully wrong?

I need some advices on how to do a react multiple steps form. A form allows student to submit their previous study and exchange credit in my univwrwity. Username and password at start. Then text fields, date selection, drop list with lots of data from backend, upload files. Click next to next steps or previous steps. It seems complicated. Thinking to use react and redux. Any advice...