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

«‹›235 »

Capri Sun Tzu: Oct 24, 2017; by Reene

Pollyanna posted:

The designer/product owner I work with - same person - uses Zeplin and sometimes gives me Sketch files, but doesn't give me any actual hard numbers - she expects me to extrapolate it from the designs themselves, and then comes back with a list of (tweaks i.e. pixels and font sizes) to be made after I put the PR up (or the equivalent of a PR in our case). Tickets inevitably take longer to complete as a result

I don't know what the proper way to work with a non-technical designer is for a web developer who touches CSS, Javascript, and numbers. If only Zeplin/Sketch had the sizes, fonts, etc. embedded�in them - but then wouldn't it just be CSS?

Does your team have a front-end guy? I can understand it sucks but being expected to extrapolate hard values from design comps is the norm. Thorough style guides are the rare, and amazing, exception.

# ? Dec 8, 2017 18:45

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 09:11

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Capri Sun Tzu posted:

Does your team have a front-end guy? I can understand it sucks but being expected to extrapolate hard values from design comps is the norm. Thorough style guides are the rare, and amazing, exception.

Yeah, even highly organised designers won�t do your job for you. Turning designs into a system of code IS the job of front end styling. You may have to ask them questions to get the intended �system� at play, but if the designers did 100% of it there would be near no need for a programmer, the CSS would practically be written but for the translation from the style guide.

# ? Dec 8, 2017 21:28

Pollyanna: Mar 5, 2005; Milk's on them.

And that�s perfectly fair. I just want to head off feedback like �can you nudge this over a few more pixels� as much as possible, because it is a potential time sink. :shrug:

# ? Dec 8, 2017 21:35

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Honestly sometimes my answer to that is to stop sweating that and just get something in front of them. Designs don�t survive 100% pixel exact translations to web tech. Font rendering is different, responsive designs, slight render glitches, tech limitations.

Deliver sooner within the constraints of existing systems you�ve developed and acknowledge you�ll need a tweak session, but at least rather than wasting time predicting the tweaks, you�re acknowledging they�ll happen regardless and not sweating it.

Once you have the composition in web tech, it can be super easy to pixel push inside the browser with Inspect Element, which makes a side by side session wayyyy more efficient to getting at all the changes you need to do.

# ? Dec 8, 2017 21:57

prom candy: Dec 16, 2005; Only I may dance

You should be able to get pixel values out of Sketch. Recently we've been syncing everything to Invision Inspect which will give you basically all the values you need.

# ? Dec 9, 2017 01:20

smackfu: Jun 7, 2004

Pairing up with a designer can be good for those kind of tweaks. Avoids the delays of going back and forth on each iteration.

# ? Dec 9, 2017 18:13

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I feel your pain. I make fun of the Javascript community and its incessant need to invent new frameworks every week, but at least the field is evolving. Design tools are universally awful. They�re all about drawing screens with shape primitives like rectangles and lines. None of them model state in any meaningful way, and none have truly broken out of the print mindset of a small number of fixed sizes. AirBnb and Framer are doing some cool stuff, but they�re not accessible to most designers. Everything else � Sketch, Figma, Principal, Adobe (Photoshop, Illustrator, XD), Invision � is essentially an extension of a mindset that dates back to the 80s, if not earlier. Imagine if the programming world had more and more powerful IDEs built atop BASIC. That�s basically design tools in 2017.

# ? Dec 9, 2017 18:22

prom candy: Dec 16, 2005; Only I may dance

smackfu posted:

Pairing up with a designer can be good for those kind of tweaks. Avoids the delays of going back and forth on each iteration.

Yup, half an hour of tweaking real code together can save hours. Another good thing is to make sure your designers know how to open up dev tools and change CSS values to try things out in context.

# ? Dec 9, 2017 19:52

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Plus there's a plugin for Sketch that will give you all the measurements ready for coding: http://utom.design/measure/

Here's an example of what it outputs: http://utom.design/news/#artboard0

# ? Dec 9, 2017 23:46

porksmash: Sep 30, 2008

I have a React component that triggers about 3 API hits on page load. The objects returned by the API run through redux reducers and get mapped to the component's props. Is there any better way than deep object comparison to determine if something changed? Currently the reducers are replacing the object in state with the API result blindly, triggering this whole series of updates.

# ? Dec 10, 2017 19:26

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

porksmash posted:

I have a React component that triggers about 3 API hits on page load. The objects returned by the API run through redux reducers and get mapped to the component's props. Is there any better way than deep object comparison to determine if something changed? Currently the reducers are replacing the object in state with the API result blindly, triggering this whole series of updates.

That�s kind of a question you need to answer yourself. You can defer updates to a component with lifecycle methods or even not replace redux state based on comparison. But you need to be able to say �what conditions might lead to me not needing to replace the object?�

A library like normalizr is helpful here if you have deep nested structures. It will convert the nested object into flat objects of each type. That may help you reduce or minimize updates.

# ? Dec 10, 2017 19:40

porksmash: Sep 30, 2008

I am using Normalizr and it rocks, but I think I put myself into a trap with my reducers depending on the shape it puts data into. Normalizr organizes everything into an 'entities' object and my reducer unfolds whatever is there into the proper place in state. This allows me to have a single extremely simple reducer for all objects returned by my API (since my normalizr schema encapsulates every object returned by my API), but the spread operators to update state are also blindly overwriting everything. I think making the reducer more intelligent will be the answer to the problem. I can probably do this with a helper function and keep my convenient reducer. Thanks for helping me talk myself through it.

# ? Dec 10, 2017 19:53

prom candy: Dec 16, 2005; Only I may dance

Having one reducer does indeed seem like a weird thing that would introduce scaling issues. I created a set of helper functions I called the "cruducer" that I think do what you're talking about.

code:

// helpers/cruducer.js

export const fetch = (state, page = 1) => {
  if (page === 1) {
    return { ...state, byId: {}, ids: [], isFetching: true };
  }

  return { ...state, isFetching: true };
};

export const fetched = (state, entities, ids, metadata = {}) => ({
  ...state,
  metadata,
  isFetching: false,
  byId: { ...state.byId, ...entities },
  // Ensure values are unique
  ids: Array.from(new Set([...state.ids, ...ids])),
});

export const create = state => ({ ...state, isCreating: true });

export const created = (state, object, id, { prepend } = {}) => ({
  ...state,
  isCreating: false,
  byId: { ...state.byId, [id]: object },
  ids: prepend ? [id, ...state.ids] : [...state.ids, id],
});

export const update = (state, id) => ({
  ...state,
  byId: { ...state.byId, [id]: { ...state.byId[id], isUpdating: true } },
});

export const updated = (state, object, id) => ({
  ...state,
  byId: {
    ...state.byId,
    [id]: {
      ...state.byId[id],
      ...object,
      isUpdating: false,
    },
  },
});

export const destroy = (state, id) => ({
  ...state,
  byId: { ...state.byId, [id]: { ...state.byId[id], isDestroying: true } },
});

export const destroyed = (state, id) => ({
  ...state,
  byId: { ...state.byId, [id]: { ...state.byId[id], isDestroying: false } },
  ids: state.ids.filter(_id => _id !== id),
});

code:

// productReducer.js

import * as cruducer from 'helpers/cruducer';

const initialState = { byId: {}, ids: [], newTemplate };
export default (state = initialState, action) => {
  switch (action.type) {
    case Types.FETCH:
      return cruducer.fetch(state);

    case Types.FETCHED: {
      const { entities, result } = action.payload;
      return cruducer.fetched(state, entities.products, result);
    }

    case Types.CREATE:
      return cruducer.create(state);

    case Types.CREATED: {
      const { entities, result } = normalize(action.payload, productSchema);
      return cruducer.created(state, entities.products[result], result);
    }

    case Types.CREATE_FAILED: {
      return {
        ...state,
        newTemplate: { ...state.newTemplate, ...action.payload },
      };
    }

    case Types.UPDATE:
      return cruducer.update(state, action.payload.id);

    case Types.UPDATED: {
      const { entities, result } = normalize(action.payload, productSchema);
      return cruducer.updated(state, entities.products[result], result);
    }
    case Types.UPDATE_FAILED: {
      const { entities, result } = normalize(action.payload, productSchema);
      return cruducer.updated(state, entities.products[result], result);
    }

    case Types.DESTROY:
      return cruducer.destroy(state, action.payload.id);

    case Types.DESTROYED:
      return cruducer.destroyed(state, action.payload.id);

    default:
      return state;
  }
};

You can see how this reducer is a mix of standard CRUD operations as well as some stuff that's custom to just this reducer.

# ? Dec 10, 2017 23:46

porksmash: Sep 30, 2008

I like that. I also ran across this article about a thing they named keducer that does exactly what I want ("generates a default reducer that slaps the payload onto the state"). I think it can be modified to suit my purposes too.

# ? Dec 11, 2017 01:52

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

porksmash posted:

I am using Normalizr and it rocks, but I think I put myself into a trap with my reducers depending on the shape it puts data into. Normalizr organizes everything into an 'entities' object and my reducer unfolds whatever is there into the proper place in state. This allows me to have a single extremely simple reducer for all objects returned by my API (since my normalizr schema encapsulates every object returned by my API), but the spread operators to update state are also blindly overwriting everything. I think making the reducer more intelligent will be the answer to the problem. I can probably do this with a helper function and keep my convenient reducer. Thanks for helping me talk myself through it.

Yeah I had this same problem. Shallow merge is too shallow, deep merge is too deep. It specifically came up in the context of deleting an item from an array belonging to one of the objects.

Example: State contains entities.report which has a hash key of reports, containing a bunch of reports - let�s say 10. One of these reports has this:

code:

entities.report.1.reviewers = [1,2,3]

User deletes a reviewer from that report and the api returns the single report object in its new state:

code:

entities.report.1.reviewers = [1,2]

A shallow merge will overwrite entities.report with a single report, so I lose the other 9. A deep merge will preserve reviewer 3 because it existed in old state.

I think the solution was to slice my reducers further and handle each entity separately, basic reducer composition. Then when updating each entity, a shallow merge works fine. I thought about doing something more complex like the cruducer but it seemed like overkill for my needs at the time.

# ? Dec 11, 2017 03:15

Pollyanna: Mar 5, 2005; Milk's on them.

Is it possible that this is ultimately a problem of how the data is modeled/structured, rather than how the data is processed and munged? If neither a shallow merge nor a deep merge works properly, maybe you need to move data around instead? :shrug:

# ? Dec 11, 2017 14:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

2017 State of JS came out.

# ? Dec 13, 2017 14:41

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Is it stupid (or, how stupid is it) for someone new to redux but reasonably familial with typescript to encapsulate their application's state tree in a class definition? eg:

code:

class AppState {
	todos: Array<Todo>
}

class Todo {
	text: string;
	completed: boolean;
}

# ? Dec 13, 2017 14:50

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Try checking this out: https://github.com/piotrwitek/react-redux-typescript-guide

Looks like they have a different type for each reducer slice? Not sure if this helps, not super familiar with typescript.

# ? Dec 13, 2017 14:57

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

The Merkinman posted:

2017 State of JS came out.

Woah that's a crazy pie chart on this page

https://stateofjs.com/2017/connections/

# ? Dec 13, 2017 16:01

Capri Sun Tzu: Oct 24, 2017; by Reene

Grump posted:

Woah that's a crazy pie chart on this page

https://stateofjs.com/2017/connections/

That's fascinating. Great way to visualize what technologies people are pairing together.

# ? Dec 13, 2017 16:07

prom candy: Dec 16, 2005; Only I may dance

Has anyone done any simple ecommerce stuff with Gatsby? I have to build a mostly content and lead capture site, but it also needs to pull products (from an existing API) and let users add them to a cart (which also has an existing API). Checkout process is done off-site (basically if you go to check out you're moved from our "site" to our "platform.") My thinking is we can just use regular react/xhr stuff to show things like the items in your cart, build a custom gatsby source to build product pages, and use contentful for everything else. Is this realistic or am I going to hit a wall? I really like the idea of this site being static so that we don't have another big devops need and so it's fast and crawlable.

Edit: Found this so at least I won't be forging a brand new path.

prom candy fucked around with this message at 16:51 on Dec 13, 2017

# ? Dec 13, 2017 16:39

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Newf posted:

Is it stupid (or, how stupid is it) for someone new to redux but reasonably familial with typescript to encapsulate their application's state tree in a class definition? eg:
code:
class AppState {
	todos: Array<Todo>
}

class Todo {
	text: string;
	completed: boolean;
}

Not specifically having used Redux, but familiar with TypeScript and a similar state object pattern, you can instead use interfaces. This allows you to do the following:

code:

interface Blah {
	todos: string[];
}

interface Blah {
	otherTodos: number[];
}

This will be combined into a single interface with all the fields together, and can be spread out over different files, allowing each part of an application to define it's slice of Blah, without having one MegaState.ts file which dictates to the entire application.

# ? Dec 13, 2017 18:00

Redmark: Dec 11, 2012; This one's for you, Morph.
-Evo 2013

Grump posted:

Woah that's a crazy pie chart on this page

https://stateofjs.com/2017/connections/

I'm surprised that apparently only a quarter of Redux users are using it with React. I know it's supposed to be rendering-independent but still...

# ? Dec 14, 2017 05:42

Honest Thief: Jan 11, 2009

Anyone ever had to work with Chinese specific fonts that are too big? I can't just put a 14MB font on the CSS, someone suggested editing the font and reduce complexity but I'm not exactly fluent in Cantonese to figure out which glyphs are needed or not.

# ? Dec 14, 2017 12:03

MrMoo: Sep 14, 2000

Cantonese means Traditional Chinese which is a gigantic glyph set, your primary option is basically images. Most of the characters are for names though.

Generally there are not many Chinese fonts in popular use and styling makes them unreadable. Interesting challenge.

# ? Dec 14, 2017 15:47

lordfrikk: Mar 11, 2010; Oh, say it ain't fuckin' so,
you stupid fuck!

Honest Thief posted:

Anyone ever had to work with Chinese specific fonts that are too big? I can't just put a 14MB font on the CSS, someone suggested editing the font and reduce complexity but I'm not exactly fluent in Cantonese to figure out which glyphs are needed or not.

What format is the font? Wouldn't converting it to WOFF(2) make it slim enough to include in CSS or am I just talking out of my rear end?

# ? Dec 14, 2017 16:13

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I've run into what I feel is a bit of an oversight on the part of Vue.js which is their handling of form input bindings.

https://vuejs.org/v2/guide/forms.html

The wisdom is to have a local state containing all of the form input values, and that's great. However it seems to me every project would have a form design unique to the project. Therefore I would expect to see a 'form' component directory with a component for each type of form field.

Unfortunately this doesn't work if you want input bindings. At that point you are going to have to deconstruct what Vue.js calls syntactic sugar, `v-model` is useless, and it reveals some of what happens under the hood so that you can try to emulate it. Effectively nullifying the benefits of using Vue.js' form input bindings entirely.

https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

This it seems to me would happen fairly early on in every project using Vue.js.

Now I'm starting to feel a bit happier with my original solution, which I wrote before learing about the built in form input bindings functionality. Which involves simply reading the form using FormData.

# ? Dec 14, 2017 16:41

Honest Thief: Jan 11, 2009

MrMoo posted:

Cantonese means Traditional Chinese which is a gigantic glyph set, your primary option is basically images. Most of the characters are for names though.

Generally there are not many Chinese fonts in popular use and styling makes them unreadable. Interesting challenge.

I gotta say... really have no idea if it's Mandarin (which is a English made up name, right?) or Cantonese, just that it's a chinese specific font, designers love it, but it's too drat heavy.

lordfrikk posted:

What format is the font? Wouldn't converting it to WOFF(2) make it slim enough to include in CSS or am I just talking out of my rear end?

it's in tft, I don't know how slim would it make given the font file alone is 14MBs,unless WOFF is really good.

# ? Dec 14, 2017 16:51

lordfrikk: Mar 11, 2010; Oh, say it ain't fuckin' so,
you stupid fuck!

WOFF and WOFF2 are really good and you should never ever use anything but WOFF on the web since the browser support is universally good (https://caniuse.com/#search=woff). The successor is still not supported well, however.

As far as sizes go, you can expect 40�50% decrease in size (and 30% more compared to that when it comes to WOFF2) but to be sure you would have to try it yourself. There is a handy converter at https://andrewsun.com/tools/woffer-woff-font-converter/. If you're not hell-bent on using that specific font, there are other options which are basically the Chinese equivalent of Google Fonts.

In your case even in WOFF/2 the size will most likely still be in MBs which is huuge compared to regular fonts like Roboto.

# ? Dec 14, 2017 17:35

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Honest Thief posted:

it's in tft, I don't know how slim would it make given the font file alone is 14MBs,unless WOFF is really good.

How big is it gzipped over the wire? Not saying a 14 MB isn't kinda gross, but it might not be as bad as you think for most people.

(tho I am generally a fan of not using ~custom web fonts~ with exceptions for icon packs and places where you need a limited visual flourish that can be fairly strictly limited. I'm sure that horrifies serious designers but reality is messy and bandwidth-limited, sorry)

# ? Dec 14, 2017 17:57

MrMoo: Sep 14, 2000

MingLiU is only ~20KB as WOFF2 on Linotype so I would investigate that.

# ? Dec 14, 2017 20:50

Honest Thief: Jan 11, 2009

I would change the fonts if I could, I mean, I guess I can just tell the designers that ain't no way in hell this is going to fly where our site already takes way too long to load in China.

Another topic, I know it's a bother but what are some good performance metrics, like say "how many listeneres are too much at any given time in a page" or something like that?
Also, what's the documents red line on the Performance tab in chrome dev and how does it differ from the Nodes line?

Honest Thief fucked around with this message at 16:03 on Dec 19, 2017

# ? Dec 19, 2017 15:01

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Ruggan posted:

Try checking this out: https://github.com/piotrwitek/react-redux-typescript-guide

Skandranon posted:

Stuff

Great, thanks! Finally got a chance to get started with this stuff yesterday.

Another question for the redux savvy. I'm walking through this tutorial on user login state management, and I'd like confirmation on a niggling detail.

In the actions section, he has one file for 'Alert Actions' (to pop bootstrap warning, alert, etc boxes) and another for 'User Actions' (to signal login attempts, success, failure, etc).

The Alert Actions are straightforward. The functions return action objects as described by the redux docs: { type: "some_string", otherData: "this is an alert message" }. I'm confused about the user actions though - they're returning functions which take a dispatch function as input and then use that dispatch fcn to dispatch plain action objects. Take 'register(user)' (line 41) as an example. It returns a function, and not an action, but in RegisterPage.jsx, it is passed as an argument to the dispatch function (line 43), which, as far as I understand, only takes plain Action objects as input.

What am I missing here?

(As I'm about to submit, the guess that has popped into my head is that the redux dispatch function has been altered by some middleware such that it can also accept this sort of chained action creating/dispatch function)

edit: That guess was right. Redux-thunk does exactly what I'm observing here. Long live the rubber duck.

Newf fucked around with this message at 17:09 on Dec 21, 2017

# ? Dec 21, 2017 17:06

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Newf posted:

Great, thanks! Finally got a chance to get started with this stuff yesterday.

Another question for the redux savvy. I'm walking through this tutorial on user login state management, and I'd like confirmation on a niggling detail.

In the actions section, he has one file for 'Alert Actions' (to pop bootstrap warning, alert, etc boxes) and another for 'User Actions' (to signal login attempts, success, failure, etc).

The Alert Actions are straightforward. The functions return action objects as described by the redux docs: { type: "some_string", otherData: "this is an alert message" }. I'm confused about the user actions though - they're returning functions which take a dispatch function as input and then use that dispatch fcn to dispatch plain action objects. Take 'register(user)' (line 41) as an example. It returns a function, and not an action, but in RegisterPage.jsx, it is passed as an argument to the dispatch function (line 43), which, as far as I understand, only takes plain Action objects as input.

What am I missing here?

(As I'm about to submit, the guess that has popped into my head is that the redux dispatch function has been altered by some middleware such that it can also accept this sort of chained action creating/dispatch function)

Yes, he's using the thunk middleware. From the code on that page:

code:

import thunkMiddleware from 'redux-thunk';
...
export const store = createStore(
    rootReducer,
    applyMiddleware(
        thunkMiddleware,
        ...
    )
);

A thunk is a function that returns a function. So thunk middleware allows you to dispatch actions that return a function. It's used for a number of reasons, but I primarily (and I think most people) use it for asynchronous actions or actions that might fail (or both!) that generally dispatch other actions based on the result.

For example, if I need to make a service call to a remote server to log in, I don't know if it will succeed or fail, and if it fails, *why* it failed. So I can't just dispatch 'AUTH_SUCCESS' when you click login. So a thunk for that might look like this:

JavaScript code:


// normal actions to handle results...
const loggingIn = () ({
  type: AUTH_IN_PROGRESS
})

const loginWorked = token => ({
  type: AUTH_SUCCESS,
  token
})

const serverExploded = message => ({
  type: SERVER_DOWN,
  message
});

const stupidUser = message => ({
  type: DUMB_USER,
  message
})

// now our thunk action which we use to try an log the user in with

import { login } from './myAuthService';  // returns a Promise

const authenticateUser = ( username, password ) => {
  return ( dispatch, getState ) => {
    dispatch( loggingIn() ); // so we can update UI to show things are happening...
    login( username, password ).then( result => {
      // things worked! Let app know
      dispatch( loginWorked( result.token ) );
    }).catch( error => {
      // oh no! Handle the two cases:
      if( error.status === 400 ) { 
        // bad credentials (obviously you'd do better error checking!
        dispatch( stupidUser( "your credentials sucked" ) );
      } else {
        dispatch( serverExploded( "Our backend is on fire!" ) );
      }
    });
  }
}

There are other ways to handle async actions other than Thunks (sagas, custom middleware, you name it!) but thunks are "easy" for many simpler use cases.

# ? Dec 21, 2017 17:22

prom candy: Dec 16, 2005; Only I may dance

I keep saying to myself I'm going to stop using thunks but then I never do.

Edit: I like how in re-ducks they recommend splitting your "actions" from your "operations." I've been using regular ducks on this Redux/Typescript project I'm working on and some of the duck files are getting huge with all the interfaces. I think I might refactor out into this arrangement when I get a chance.

prom candy fucked around with this message at 17:17 on Dec 22, 2017

# ? Dec 22, 2017 17:14

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

prom candy posted:

I keep saying to myself I'm going to stop using thunks but then I never do.

I find them very usable and easy to work with (especially with async / await), so I use them because I think they are awesome. (But I can see why other people want to use other things!) My latest app has "thunk-like" workflows kicked of by react-first-router routes, and I am really loving how it's working for me.

prom candy posted:

Edit: I like how in re-ducks they recommend splitting your "actions" from your "operations." I've been using regular ducks on this Redux/Typescript project I'm working on and some of the duck files are getting huge with all the interfaces. I think I might refactor out into this arrangement when I get a chance.

Looks interesting. Not keeping initalState for each reducer in the same file w/ the reducer is something I don't like at all though. Firstly, it's now means you have two sources of truth... update the initial state somewhere else and forget to update your comment in the reducer file? Uhhhg. Plus it's nice to be able to easily reset individual parts of the state to "clean" by just returning that reducer's initialState.

Lumpy fucked around with this message at 18:54 on Dec 22, 2017

# ? Dec 22, 2017 18:50

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Hey you guys are into this stuff there's a new bundler to use instead of Webpack.

https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

Called Parcel. I will probably stick with Browserify because I still think having a static `index.html` rendered is silly. But I'd take a very close look, if it were between Parcel and Webpack. Hi I'm your RSS feed popping in.

# ? Dec 22, 2017 20:19

prom candy: Dec 16, 2005; Only I may dance

Lumpy posted:

Looks interesting. Not keeping initalState for each reducer in the same file w/ the reducer is something I don't like at all though. Firstly, it's now means you have two sources of truth... update the initial state somewhere else and forget to update your comment in the reducer file? Uhhhg. Plus it's nice to be able to easily reset individual parts of the state to "clean" by just returning that reducer's initialState.

Agreed yeah. I think people are still figuring out the ideal architecture for this stuff. I think ducks was a step up from separation of "concerns" and I think this may be a step up from ducks, but it's going to keep evolving.

# ? Dec 22, 2017 20:37

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 09:11

lordfrikk: Mar 11, 2010; Oh, say it ain't fuckin' so,
you stupid fuck!

Nolgthorn posted:

Hey you guys are into this stuff there's a new bundler to use instead of Webpack.

https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

Called Parcel. I will probably stick with Browserify because I still think having a static `index.html` rendered is silly. But I'd take a very close look, if it were between Parcel and Webpack. Hi I'm your RSS feed popping in.

It�s good in theory but due to the way it crawls the references to other dependencies even small hiccups can cause it to come to a screeching halt.

# ? Dec 23, 2017 13:12

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

«‹›235 »