Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

Hed: Mar 31, 2004; Fun Shoe

I'm using Backbone/Marionette to construct a time charging system front-end for my four-man consulting practice because emailing excel charts sucks.

I want a SPA interface that:

by default pulls up the current month in a calendar-style view
makes rows with form elements to type decimal hours in
allows dynamically adding a charge code (from the master list) and adds the empty "spots" to all weeks of the calendar
has a sync/save to commit the changes to the server when you're done.

Here's a quick example of the concept done in Word and not HTML elements:

I have the backend done, rest API clicking, CSRF protection, and all the HTTP verbs are working. My problem is how to make the collections/views for weeks in Marionette and get the charge entries to "go" to the right places.

Here's what it looks like so far:

(ignore the charge dates below the calendar, the interface will eventually just filter between days of month)
edit: also LOL this was putting the 1st on the right day earlier but I guess I messed something up the moment I took my screenshot.

I have some basic JS to make the calendar, and I'm calling the <tr>s with an id of week1 and such, so I could just have Backbone append another <tr> full of fields to that, and make blank entry fields where there's no corresponding value in the REST payload. I am trying to use the concept of a "composite view" here but I guess I'm at a loss for where the logic from a collection of entries from "October 1 2013" to "October 31 2013" gets broken back out into weeks, and how I can keep weeks as a unit in the UI for things like if I want to add row totals and things in a separate column in the future. Can anyone outline a better strategy because the one I was thinking of seems like it's going to devolve into an awful Javascripty mess.

Hed fucked around with this message at 21:28 on Oct 5, 2013

# ¿ Oct 5, 2013 21:24

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 20:23

Hed: Mar 31, 2004; Fun Shoe

Angular question: My server returns decimal numbers as quoted strings. Let's say I can't change that, how can I get the objects to correctly deserialize? I'm trying to get their value to bind with the HTML5 "number" type input.

JSON returned:

code:

[
    {
        "id": 1, 
        "url": "http://tester.local/timekeeper/api/charges/1/", 
        "charge_code": "http://tester.local/timekeeper/api/chargecodes/ACME-001/", 
        "hours": "7.25", 
        "charge_date": "2013-12-21", 
        "employee": "hed", 
        "entry_reason": "http://tester.local/timekeeper/api/reasons/1/"
    }, 
...
]

I'm using Angular's $resource module instead of straight $http, and it's being a stupid mess. I'm trying this:

code:

app.api.factory('Charge', [
  '$resource', function($resource) {
    url = './api/charges/:id ';
    paramDefaults = {
      id: '@id'
    };

    actions = {
      'get':  {
        method: 'GET', 
       // isArray: true,
        transformResponse: function(data, header) {
          console.log('transforming');
          console.log(response);
          return response;
        }
      }
    };

    return $resource(url, paramDefaults, actions);
  }
]);

But that transformResponse function isn't firing. I've tried query methods, making it a member of a list, changing the function signature. I just want that "hours" in the above JSON to be a number and not a string! (Or otherwise work with the <input type="number"> element.) Any ideas?

# ¿ Dec 22, 2013 05:20

Hed: Mar 31, 2004; Fun Shoe

I fixed it.

code:

    actions = {
      query:  { // remove the quoted strings from each "hours" thing.
        method: 'GET', 
       isArray: true,
        transformResponse: $http.defaults.transformResponse.concat([
          function(data, header) {
            angular.forEach(data, function(charge) {
                // console.log('modifying ' + JSON.stringify(charge));
                charge.hours = parseFloat(charge.hours);
            })
            return data;
        }])
      }
    };

Since the docs were a bit better on the $http examples, I just injected $http and called the underlying layer. The trick here is that in $http "transformResponse" is an array of transformers so I have to use concat to add my additional one.

# ¿ Dec 22, 2013 19:25

Hed: Mar 31, 2004; Fun Shoe

This may be more of a back-end question, but ramifactions for asking are front-end. When designing a rest API, pay attention to the foreign key of category below:

JavaScript code:

[
   {
        "id": 1,
        "url": "http://sundown:8082/timekeeper/api/chargecodes/Holiday/",
        "category": "http://sundown:8082/timekeeper/api/chargecode-category/1/",
        "code": "Holiday",
        "description": "Company Holiday",
        "retired": null,
        "is_active": true
    },
    {
        "id": 2,
        "url": "http://sundown:8082/timekeeper/api/chargecodes/PTO/",
        "category": "http://sundown:8082/timekeeper/api/chargecode-category/2/",
        "code": "PTO",
        "description": "Personal Time Off",
        "retired": null,
        "is_active": true
    }
]

This hyperlinked relationship what seems to be the design suggested by using the Django Rest Framework tutorial so long ago. It's clear, not redundant and doesn't expect someone to "just know" how to find the chargecode category details. But some JSON API docs and the general fussiness of things like Angular and restangular to manage my relationships on the frontend seem to want something more like:

JavaScript code:

    {
        "id": 2,
        "url": "http://sundown:8082/timekeeper/api/chargecodes/PTO/",
        "category": {
                               id: 2,
                               url: "http://sundown:8082/timekeeper/api/chargecode-category/2/"
                             }
        "code": "PTO",
        "description": "Personal Time Off",
        "retired": null,
        "is_active": true
    }

(or replace url with href). This seems redundant and nested for no reason, but seems like the way more frontends want to work so I'm starting to question my REST end. I'd dearly like to use some other helper (like restangular) to help maintain state on the frontend instead of my cobbled-together code that kinda works now but how do you guys handle this?

# ¿ Dec 31, 2014 02:21

Hed: Mar 31, 2004; Fun Shoe

What's going on in the world of CSS? 3-4 years ago everyone was using bootstrap, I've noticed that for every "frontend framework starter kit" everyone doesn't ship with bootstrap... did everyone get sick of it? Instead of responsive design is everyone targeting mobile? Is everyone just way better at making good looking CSS than I?

# ¿ Sep 28, 2015 00:34

Hed: Mar 31, 2004; Fun Shoe

On CSS and layout: I used to follow Bootstrap from version 2-3 to build my toy sites; but it seems to have fallen out of favor. I like the look and ideas of Semantic UI but I'm having trouble making layouts as responsive, but it might be that there's no obvious "Here's a generic site with docked top menubar you can customize" that I can start hacking on. Is there a good guide or anything I'm missing?

Should I be using Semantic UI React if my frontend is react or just keep things decoupled?

# ¿ Feb 18, 2019 03:14

Hed: Mar 31, 2004; Fun Shoe

Is there an easy way to do the generic �light grey block� rendering I see a lot while waiting for things to render?

# ¿ Feb 27, 2019 10:34

Hed: Mar 31, 2004; Fun Shoe

I have a conditional component which appears and fires off to a 3rd party API (not an ad/tracking server...). On my Firefox where I run uMatrix, this shows up as a CORS block. It's not, really but got me thinking that I should do some generalized error handling for this API callout.

My question is, how can I catch and handle an error in reaching out to that service (since otherwise that part of the application will hang) and display a warning to the user? Hooks in React are baller but there's no componentDidCatch so a lot of the strategies I'm seeing won't work.

# ¿ Mar 29, 2019 01:43

Hed: Mar 31, 2004; Fun Shoe

Do you redux fans use connected-react-router for your routing needs?

I�m replacing react-router with it to combat an issue I had with a component double-firing when I clicked a Link component (and the change in route params also kicked something into gear) but now I�m wondering if it�s worth it since I can think of another way to solve the problem.

# ¿ Apr 3, 2019 03:51

Hed: Mar 31, 2004; Fun Shoe

Lumpy posted:

I use redux-first-router when I use redux and I love it. https://github.com/faceyspacey/redux-first-router

Speaking of routing, I'm working on a project that's too small for Redux (and might not get that big for a long time) and I have an aversion to react-router and was wondering what others are using if they are using something else!

Thanks for the rec! I like it so far but I'm having trouble figuring out how to organize my pages now. Do you usually do something like

code:

export default function App() {

  return (
    <Provider store={store}>
      <div>
        <NavBar />
        <Content />
      </div>
    </Provider>
  );
};

And then just have Content serve up a component based on what Page would be from the route? Or am I thinking too react-router for a SPA? A lot of the examples are doing a whole lot of UniversalComponent stuff that I can't wrap my head around (and I don't need SSR/SEO optimizations for this)

Ahz posted:

That's just a library which syncs your existing react router state with redux.

You may be better off investigating your double firing issue as you have several levers at your disposal w/React to skip renders.

I looked into redux-first-router, but it seems his full fledged redux based router as his @next (rudy, i think) has never materialized after over a year of talking about it being just around the corner. It doesn't seem like faceyspacey has the traction or will to stick with something long term.

Thanks for this, I ended up converting over just to get everything into redux but you're right. I had some weird invocation that made it so transitioning from a route params -> another valid route params caused an event to fire as well as clicking the link in the first place. I think that will be done with now that everything is in redux.

# ¿ Apr 7, 2019 03:34

Hed: Mar 31, 2004; Fun Shoe

I need help because I clearly don't understand all the "magic" going on with React-Redux and the store.

I have a 3rd-party component that has its own Provider, and while it worked at one point, after re-organizing my app it blows up with an error

quote:

Could not find "store" in either the context or props of "Connect(Provider)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Provider)".

I don't really think what is effectively a grandchild component at this point should have direct access to the store, but I've tried passing in what it appears to need via mapStateToProps and even the slice of the store that it says it wants (the slice simplewebrtc of the full store). Finally I tried from the docs doing the ReactReduxContext.Consumer thing where I pass store in and now I just get

quote:

Could not find "store" in either the context or props of "Connect(class_1)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(class_1)".

which is essentially the same message just on the in-between class I created.

Why isn't the store just propagating down? In the React Devtools I have the following hierarchy:

The highlighted piece is what gets replaced with the component that blows up if I branch a different way. Should I be concerned that VTCPage appears to have the Context but its subcomponents VTCSchedule and other peers do not? So far I don't have a really good way to debug what elements know about the store in either the React or Redux browser devtools.

# ¿ Apr 15, 2019 02:40

Hed: Mar 31, 2004; Fun Shoe

Thanks Lumpy. I was able to get the React DOM to put that Context.Provider down in the grandchildren by doing connect so I understand that a bit better now. I still have the same issue; totally agreed that usually you have one Provider, however this 3rd party component has its own "Provider" thing, and it's very opaque to debug.

One of my frustrations is that now I realize I got this same store violation error message back when I was moving the project to Redux (versus using the 3rd party component's redux bindings) because I didn't have my applyMiddleware(thunk) call in my createStore function call. So now I have two possible hypotheses, and it's very hard to troubleshoot either one. I'm probably missing a lot but this ecosystem seems a lot harder for me to "get" the tooling reasoned about.

# ¿ Apr 16, 2019 01:52

Hed: Mar 31, 2004; Fun Shoe

Hey it's me again the guy who's liveblogging his redux context issues and while I am a lot smarter about Redux context in React than last time (I am still dumb) I am still having an issue where I have code:

JavaScript code:

// Container component.js
function ConnectableVTCContainer({... , store}) {

    return(
       <Provider store={store}>
           <RemoteAudioPlayer />
           <Connecting />
           ....
       </Provider>
}

// at the bottom
export default function VTCContainer(...props) {
    return (
        <ReactReduxContext.Consumer>
            { ({store}) => <ConnectableVTCContainer {...props} store={store}/> }
        </ReactReduxContext.Consumer>
    )
}

These third-party VTC components are supposed to get wrapped in Provider to get access to the store. I can log out the value of store at the top of my function and see the store, so I believe it's there. However, I'm still getting the

pre:

Could not find "store" in either the context or props of "Connect(RemoteAudioPlayer)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(RemoteAudioPlayer)".

So it's like store isn't available to any of the grandchildren, which is exactly what I thought Provider is supposed to do? And if I add the "store={store}" prop to RemoteAudioPlayer, I'll get the same error message on the next component (Connecting). Is there something obvious I'm missing or a way to debug what is going on? Not really sure why store doesn't seem to be getting wired in when it's otherwise available in my function.

# ¿ Apr 19, 2019 03:05

Hed: Mar 31, 2004; Fun Shoe

Also is redux-form still the hotness for form data and verification in projects that already have Redux? I always really liked how Django forms approached form/field validation and handling so if there's anything that's smart like that I'd love to hear it.

# ¿ Apr 19, 2019 03:07

Hed: Mar 31, 2004; Fun Shoe

Guys and gals, that weird error/ Redux context thing with a third party component that I was tearing my hair out was actually a flaw in the third-party component not being compatible with the latest react-redux. I had upgraded packages around the same time as I moved some stuff around--so I assumed it was me moving stuff. It was really frustrating but wow I know a lot more about redux and react now. Thanks again for all your help with looking into it though. There's still a lot about JS work that I am feeling around for but it's starting to click.

# ¿ May 2, 2019 02:45

Hed: Mar 31, 2004; Fun Shoe

Guys I checked in months ago about my toy projects and got some help but so far using TypeScript in my project to have the compiler help yell at me has been great and really helped me with my code. Thanks thread.
Also I was really leery of using CSS-in-JS but after reading this thread's comments and using styled-components for a bit I'm starting to really really like it :greenangel:

# ¿ Jul 18, 2019 04:01

Hed: Mar 31, 2004; Fun Shoe

What would someone use in React to interact with my own REST endpoints in mid-2019?

I have a RESTful backend that uses token auth that my (TypeScript) React app would love to consume and I see old tutorials of people using axios, fetch, and everything else. I feel like I'm missing good documentation or just not searching correctly. Ideally it would cover best practices to put login / logout, store the token key, handle token updating, and walk through implementing a few basic GET/POST/PUT transactions, but I'll take what I can get.

# ¿ Aug 11, 2019 04:30

Hed: Mar 31, 2004; Fun Shoe

I'm trying to deploy my React site with a react-router BrowserRouter on S3 but having issues.

I'm very new to using Amazon AWS as anything but a VPS. To start I put a staging version of my React site on an S3 bucket and of course it works fine if I go to https://my-dumb-site-dev.us-east-2.amazonaws.com/index.html and click around but doesn't work if I go to a deeper URL, it 404s which makes sense.

Do I need to use CloudFront? On the VPS I would just use a try_files or rewrite directive in nginx to serve up index.html and pass the rest of the URI into my app for the BrowserRouter to pick up.

# ¿ Aug 17, 2019 19:37

Hed: Mar 31, 2004; Fun Shoe

Thank you for the response, I had actually been looking at that! Also meant to thank you for the API response, I did a similar thing last week to wire up all my endpoints.

I got it working but it was silly, the S3 bucket access address is slightly different from the "use as static hosting" address, almost subtly so. Going to https://my-dumb-site-dev.s3-website.us-east-2.amazonaws.com/butts/extreme does everything as expected.

# ¿ Aug 17, 2019 21:18

Hed: Mar 31, 2004; Fun Shoe

Baskin Loggins :rimshot:

# ¿ Nov 17, 2020 20:43

Hed: Mar 31, 2004; Fun Shoe

Dominoes posted:

Hey dudes; cross-post from the Rust thread. Getting ready to release that web framework I've posted about. Repo with instructions in the Readme. Looking specifically for critique about the API, syntax, and guide. My plan is to finish up the todo MVC example within the next few days, then publish it.

Does it make sense from the POV of someone who doesn't know Rust? Does it seem like something you'd be able to pick up on from just that readme? I'm suspicious the borrow-checker will be a nuisance.

Hey congratulations, this is getting some high praise over on HN today. I saw �rust front-end� and figured it might be the one you were working on.

Still need to give it a whirl now that I�ve been doing almost all back-end for my side stuff lately.

# ¿ Sep 17, 2021 22:14

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 20:23

Hed: Mar 31, 2004; Fun Shoe

Is there a datatable library that supports color coding by histogram/value? I've got a simple crud app that displays tabular data. It's Django now; I'm not allergic to front-end but given developer time have kept it super simple with no front-end.

Now I'm wanting to do color-coding of tables like Excel's color scales (see pic). I've been looking at ag-grid and DataTables (which I've used before) but they don't seem to have built-in options. Does anyone have any recommendations? Not trying to fully recreate Excel, but filtering and stuff would be nice if it's all together. Given the above, would prefer pure JS or, if needed, React.

# ¿ Sep 21, 2022 15:22

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT