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

«‹›2 »

M31: Jun 12, 2012

I definitely recommend webpack for React. It has a development server that can hot reload javascript, which allows instant viewing of your changes. React components get automatically refreshed while you edit them.

https://vimeo.com/100010922

You can find a lot of starter packs on Github. It's also not that hard to combine with Gulp.

# ¿ Mar 5, 2015 11:07

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 05:06

M31: Jun 12, 2012

onClick is not magic, it's just another property, so you need to call this.props.onClick somewhere from Tile's handleClick

# ¿ Apr 21, 2015 15:40

M31: Jun 12, 2012

Helicity posted:

Speaking of, does anyone like a specific library for replacing jQuery's $.ajax and $.getJSON?

Fetch api polyfill? https://github.com/github/fetch

# ¿ May 14, 2015 08:03

M31: Jun 12, 2012

Do you use inline styling?

I really like the idea of having the CSS in the same file as the Javascript. Unfortunately, I like autoprefixer, styling pseudo-elements and breakpoints even more. Seems to be a great solution if you use React Native though.

I guess it could be solved with a tagged template string preprocessor, but I'm afraid that is a little too much magic.

# ¿ Jun 6, 2015 07:31

M31: Jun 12, 2012

I hate that...

... NPM executes random code it downloads from the internet

... NPM uses symantic versioning to resolve dependencies by default and will randomly break your application if you don't use shrinkwrap or commit everything into a VCS

... the build system needs to execute random code to infer which tasks exist

... every tool uses it's own configuration file that does not support profiles and since it's JSON also does not allow any comments

... all non-package include paths are relative

... Gulp has a terrible syntax. Also the inability to create different profiles (eg. for a debug build) in a sane manner. Double that when you want hot reloading and basically have to write your configuration twice.

... sourcemaps are implemented in one thousand different ways and the tool you use doesn't support it

... intergration of different tools in general is terrible

... people revert to loving shell scripts which won't work on Windows without jumping through hoops that are on fire and are just plain terrible

... creating a proxy for you REST api / legacy resources is not trivial

... most tools only have an api description and zero getting started documentation

... there is no dependency check when building by default, so if you for example run 'npm update' (which seems like a reasonable thing to do) or try a different version and forget to revert, nothing will warn you that you are using completely different versions from those in package.json

# ¿ Aug 4, 2015 08:42

M31: Jun 12, 2012

Just note that you need a license to use VMware Player commercially (obviously you need one for the other products as well if you use them). When I entered my company everyone was using VMware Player 'because it's free' (now they just use Linux).

# ¿ Aug 6, 2015 17:23

M31: Jun 12, 2012

The React side at least is busy exploring CSS modules. They are not actually specific to React and you can use them with Angular or plain JS as well.

http://glenmaddern.com/articles/css-modules

It works sort of similar to BEM / Suit style, but is much easier to maintain. Definitely one of the better things to happen to CSS tooling in the last year in my opinion.

# ¿ Sep 28, 2015 19:11

M31: Jun 12, 2012

Depending on the signature, you can also use

code:

return (<input type="text" onChange={this.handleBlockNameChange.bind(this, index)} />)

# ¿ Oct 28, 2015 17:15

M31: Jun 12, 2012

If you are using Redux, not using redux-form makes it pretty tedious to create lots of forms that actually use Redux state.

Even if you are not using Redux, having a small form helper skips a lot of boilerplate every time: https://jsfiddle.net/r2o13s5h/
This is something I just whipped up and sucks, but hopefully it shows why the concept is useful.

# ¿ Oct 31, 2015 16:20

M31: Jun 12, 2012

Ochowie posted:

Here's a dumb question. Are people using React and Redux in a non SPA situation? I've been thinking of going down that route because I'm not a huge fan of putting everything through React Router. I feel like I have to hard code the routes and it could get unwieldily as the application grows. It seems that React and Redux could be modular enough to be used across different pages.

You don't need to hardcode routes, at least not more than when you use server routing exclusively. And yes, enough people use them outside SPA applications. Search for universal or isomorphic to find a lot of examples which go a step further and do server rendering.

# ¿ Jan 30, 2016 21:34

M31: Jun 12, 2012

Does it really matter? Just run the grunt task (outside of the project build process) and include the resulting files.

# ¿ May 11, 2016 19:26

M31: Jun 12, 2012

Anybody know of some library that handles synchronisation against an offline cache and does not rely on a third party service? I want to replicate some data for offline use but don't really want to implement the synchronisation logic myself.

CouchDB [http://couchdb.apache.org/]
The obvious choice I guess as it does everything I need at this point. I just have this feeling that authorization will become a problem later on as you are basically directly talking to a database.

Swarm.js [http://swarmjs.github.io/]
Allows subscribing to objects that are kept in sync using a log. Looks very promising, but no releases so far.

ShareJS [https://github.com/share]
They focus on live editing and I can it working really great for that purpose, but not really for DB like structures.

# ¿ May 23, 2016 19:29

M31: Jun 12, 2012

Webpack will happily include your images inside the javascript bundle as base64 encoded urls if you use the url loader.

I don't think it's a dumb idea. Makes it super easy to distribute (and run offline), and if you have a small SPA and are generating your CSS using Webpack it's unlikely that you will ever benefit from caching JS and CSS separately.

html-webpack-plugin has an example that does what you want: https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/inline

edit: Obviously, don't inline large images in your javascript

M31 fucked around with this message at 17:56 on May 27, 2016

# ¿ May 27, 2016 17:53

M31: Jun 12, 2012

JSX is just some syntactic sugar, and I would agree with Munkeymon that it feels relatively natural given the context of web development. Especially after ES6 happened. I will consede that JSX turns very ugly if you start putting conditionals in there.

Also, Typescript is also less of a superset than JSX, as let x = 42; x = "foo"; doesn't work in TS.

leper khan posted:

You're talking about JavaScript, so everything already went wrong.

# ¿ Jun 17, 2016 16:55

M31: Jun 12, 2012

Did you import the css file from a javascript file? Webpack only resolves dependencies starting from your entry file, it doesn't check all files in a directory.

# ¿ Jun 19, 2016 12:50

M31: Jun 12, 2012

Lumpy posted:

Yes, you should have the front and back end in totally separate repos. That's my opinion obviously, but since (hopefully) the two projects aren't coupled, there is no reason to have to pull down the entire backed to make a change to the front end. There are places that do "one giant repo for everything " but I forget the reasoning for that. Not that it was be, I just can't remember.

But for a lot of projects, the front and backend are incredibly coupled from a functional perspective, which is the main reason you want them in one repository (often changes will require work on both the front and back).

# ¿ Aug 14, 2016 18:58

M31: Jun 12, 2012

Why would you need dangerouslySetInnerHtml though?

# ¿ Sep 14, 2016 19:40

M31: Jun 12, 2012

You can use a string or template literal:

code:

<div id={id}><style>{`#${id}:hover > * { color: red }`}</style>Foo<span>bar</span></div>

# ¿ Sep 15, 2016 12:05

M31: Jun 12, 2012

No, it creates a text node. Now that you mention it, it maybe doesn't work on React < 15.0.0 as the old versions use innerHTML for the initial render.

# ¿ Sep 15, 2016 12:35

M31: Jun 12, 2012

You need to run 'npm run build', as 'npm build' is an internal NPM command. Also, typings is deprecated as of Typescript 2, so maybe you don't even need it.

# ¿ Oct 9, 2016 08:13

M31: Jun 12, 2012

code:

return (
  <div>
    { !wizard.Step1Data ? <Step1/>
    : !wizard.Step2Data ? <Step2/>
    : !wizard.Step3Data ? <Step3/>
    : <Done/>}
  </div>
)

code:

goToNextStep() {
  this.setState({currentStep: <Step2/>})
}

return (
  <div>
    {this.state.currentStep}
  </div>
)

But having properties called step1data and step2data is already suspect

# ¿ Oct 21, 2016 19:37

M31: Jun 12, 2012

Pollyanna posted:

Yeah, I'm definitely wrong on how React works in this case. I think I was barking up the wrong tree for that.

I've still got a problem, though. We want to support users on older browsers like IE and Edge and Firefox (we do retirement and life insurance stuff) which means we can't really rely on the date HTML element. However, design wants to implement a natural-language form that depends on the user typing in their information, as you can see here. So, I'm thinking that if we want to implement this, we can't rely on the datepicker element in Chrome/HTML5 and would have to implement something custom ourselves, thereby basically copying what they have. I'm wondering if it's worth pushing back on this, or if I should ditch the HTML5 approach and just go with their preference. Obviously, I can't decide this on my own, so I'll be floating this by the rest of the team, but I wanted to get some opinions on how something like this is best implemented.

Use one of the many available date picker components? https://react.rocks/tag/DatePicker
Or a masked input component? https://github.com/insin/react-maskedinput https://github.com/sanniassin/react-input-mask

# ¿ Jan 19, 2017 16:21

M31: Jun 12, 2012

Or set the transform-origin: https://jsfiddle.net/b5z946u2/
Those are two versions, one extends upwards and the other downwards.

M31 fucked around with this message at 19:14 on Mar 23, 2017

# ¿ Mar 23, 2017 19:07

M31: Jun 12, 2012

I know (and work on) some apps that have multiple React roots. Almost all of them are legacy systems migrating to React, but some use it for exception isolation (so an exception during rendering won't bring down the entire application). Should be unnecessary in the next version of React though (and you can already abstract it away into a component right now as well).

# ¿ May 1, 2017 19:55

M31: Jun 12, 2012

I don't know what you are doing, but check out the MusicBrainz documentation. They also provide snapshots of their database.

# ¿ May 13, 2017 17:24

M31: Jun 12, 2012

Can you turn on a computer? Congratulations, you are hired (at some companies)

# ¿ Jun 18, 2017 11:34

M31: Jun 12, 2012

Doc Hawkins posted:

The related gif doesn't show a confirmation dialogue, so start registering your typosquatting packages now and brainstorming amusing things for them to do.

Continuing the proud NPM tradition of not caring about security at all.

# ¿ Jul 12, 2017 03:15

M31: Jun 12, 2012

Pollyanna posted:

I'm going to recommend to our team lead that we bring in ESLint to fix our confusion and concerns over spacing, style guides, all that poo poo. Failing that, gently caress, I'll do it myself if I have to.

Also recommend Prettier then. Saves you a lot of time actually performing the formatting you decided on.

# ¿ Jul 12, 2017 16:30

M31: Jun 12, 2012

You can try Formik as well. It just provides some local state and some helper methods for validation. You still do all the rendering yourself, which is a large improvement over other libraries. It also comes with Typescript definitions.

# ¿ Nov 5, 2017 07:46

M31: Jun 12, 2012

Thermopyle posted:

The innovation of redux is 85% a way of thinking and structuring your project and 15% the actual library.

I feel this is a good summary on why using Redux on a project with mainly junior developers was a mistake.

# ¿ Jun 22, 2018 03:37

M31: Jun 12, 2012

ArcticZombie posted:

But if I'm using composition:
code:
<OptionCategory label="Frobnication">
    <Option label="foo"/>
    <Option label="bar"/>
    <Option label="baz"/>
</OptionCategory>
It's too late for the OptionCategory to give props to the children, no? They are immutable.

Hoist the state further:

code:

<OptionCategory label="Frobnication" checked={[this.state.foo, this.state.bar, this.state.baz]} onChange={checked -> this.setState({foo: checked, bar: checked, baz: checked})>
    <Option label="foo" checked={this.state.foo} onChange={foo -> this.setState({foo})/>
    <Option label="bar" checked={this.state.bar} onChange={bar -> this.setState({bar})/>
    <Option label="baz" checked={this.state.baz} onChange={baz -> this.setState({baz})/>
</OptionCategory>

There are other solutions, but this is the most straight forward one

# ¿ Sep 27, 2018 07:41

M31: Jun 12, 2012

Dominoes posted:

Hey dudes. If you could have whatever syntax you'd like for creating DOM elements, what would it look like? Eg doesn't have to be coupled with HTML like JSX. JSX or Elm-like, but with tweaks? I'm writing a framework using Rust, which has powerful macro tools allowing somewhat-arbitrary syntax.

https://crates.io/crates/typed-html ?

This depends on the use case. Generally I would prefer a native API and then optionally a macro if it makes sense (so basically like JSX)

# ¿ Nov 19, 2018 11:34

M31: Jun 12, 2012

Volguus posted:

I unironically do miss SOAP. While I never wrote a web ui that would consume a SOAP service, I wrote a few desktop apps that did. I had my contract (WSDL), I had the generated API, I had the clear cut signatures of methods, an IDE and a compiler that would tell me right away if anything was wrong ... what was not to love?

200 different incompatible implementations? I have an old SOAP service I'm consuming that returns the wrong namespace for random requests. There is also the other 'SOAP' service that returns <attribute><name>foo</name><value>bar</value></attribute> and the actual schema is communicated out of bounds (yes, it's soap, not xml-rpc). Then there is the other service that uses some authentication extension that is not supported by anything else.

All of these services only work if you use their generated client, which all suck because they where generated for Java 4.

# ¿ Jul 18, 2019 02:33

M31: Jun 12, 2012

Or use date-fns: https://date-fns.org/

You could also try the new JS API, which is still in active development, but probably still more sane than trying to import the Rust api:

https://github.com/tc39/proposal-temporal

# ¿ Dec 29, 2019 07:18

M31: Jun 12, 2012

What you want is called duck typing and Typescript supports it using interfaces: https://www.typescriptlang.org/docs/handbook/interfaces.html

No need to extend or inherit anything.

# ¿ Jul 30, 2020 12:21

M31: Jun 12, 2012

One example of a case where the second one might break is useEffect, because it has different behaviour depending on a return value existing or not

# ¿ Sep 17, 2020 07:42

M31: Jun 12, 2012

I like Alpine for small things like this: https://github.com/alpinejs/alpine

code:

<thisisascriptbuttheseforumsarestupid src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></thisisascriptbuttheseforumsarestupid>
<style>
  [x-cloak] {
   display: none !important;
  }
</style>
<form x-data="{width:10, height: 2}" >
  width: <input type="text" x-model="width">
  height: <input type="text" x-model="height">
  <div x-cloak x-show="width*height >= 10">Bag 1: volume = 10</div>
  <div x-cloak x-show="width*height >= 20">Bag 2: volume = 20</div>
  <div x-cloak x-show="width*height >= 30">Bag 3: volume = 30</div>
  <div x-cloak x-show="width*height >= 40">Bag 4: volume = 40</div>
</form>

I don't suggest it if you want to actually render new stuff dynamically on the client.

# ¿ May 12, 2021 04:58

M31: Jun 12, 2012

Please recommend me something better than Cypress. A couple years ago I had to use Selenium and it was the worst thing ever, but Cypress is not much better. I can't believe the docs still talk about adding a polyfill for promises in 2021.

# ¿ Jun 28, 2021 07:06

M31: Jun 12, 2012

Ape Fist posted:

Cypress is kind of as good as it gets, bud.

Unfortunate, but not unexpected..

# ¿ Jun 30, 2021 03:57

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 05:06

M31: Jun 12, 2012

If it's just .5px it's probably because scrollHeight is an integer, you can try using getBoundingClientRect to get a more precise value, or just adding .5/1px to the height.

# ¿ Feb 16, 2022 12:44

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

«‹›2 »