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

spacebard: Jan 1, 2007; Football~

Angular has been neat for prototyping/testing the restful API I made for vendor applications. A couple of hours and I can just point to my test app as an example.

Much better than my first Angular experience with markdown and making my personal public page in it. Was quite the learning experience though to go down the Static caching rabbit hole. :downs:

excidium posted:

When this update function is called my role is updated correctly, but then it does a GET request to /? and hits my otherwise route configuration. It never tries to hit the /useradmin/roles path at all. I really don't understand what could be the different between the two sets of code that would cause it to work correctly for one but not the other. Any ideas?

Any typos in your app's route definition? That's all I can think of. Can you set a watch statement in web inspector and see why it's not hitting the route?

# ¿ Mar 18, 2014 18:48

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 15:32

spacebard: Jan 1, 2007; Football~

fuf posted:

Where do people put their Angular (or whatever) template files?

They have to be accessible from the web right? Currently my project is laid out like this:
code:
- public/
-- css/
-- js/
-- img/
-- templates/
--- home.html
--- about.html
-- index.html
But it bothers me that in theory someone could access site.com/templates/home.html directly and get a broken, non-css version of a section of the site. Is there any alternative?

You could rewrite requests without a referrer (?) to templates/ back to the main page of the app.

Edit: hastily answered this on my phone. Not sure about it.

fuf posted:

Also does google crawl those files?

Google will attempt a request with #! replaced as a query parameter ?_escaped_fragment_=

So no it won't crawl them iirc. Though I may have a robots.txt with my partials/ directory in it.

The escaped fragment parameter would allow a public facing angular site to redirect google to statically cached pages via rewrite rules.

# ¿ May 16, 2014 18:42

spacebard: Jan 1, 2007; Football~

aBagorn posted:

Front end people, my humble middle stack self needs your help!

I'm using bootstrap to layout a site, and I came across this tutorial to implement an off canvas menu.

http://blog.themearmada.com/off-canvas-slide-menu-for-bootstrap/

Seemed simple enough, and I have it working in its basic form. However my client has indicated that he would rather (on desktop) the menu slideout shrink the main content div as opposed to overlaying it (though on tablet and mobile displays it should behave as normal) and now I'm kind of lost.

The nav element needs to be relative and not fixed. Here's a quick fiddle http://jsfiddle.net/0vwfj0x1/. I also needed to add a disabled class on the nav element itself.

# ¿ Jan 6, 2015 18:36

spacebard: Jan 1, 2007; Football~

Thermopyle posted:

I haven't decided. I mean, while I'm writing the tests I love the automatic mocking. When I'm running them, not so much.

You're right that you have to stub out returns correctly, but that's simple and a decent amount of the time I don't need to anyway.

However, like I said earlier I haven't really done JS testing with anything but jest, so I just don't have a point of reference.

Since I posted earlier I've been messing with mocha + proxyquire (since I'm using browserify) + sinon and I still haven't figured out how to mock jquery so my module under test doesn't actually try to fire off an ajax request.

Before I go too far down this rabbit hole I guess I'm going to look in to karma.

I wrestled with sinon and the utter lack of documentation around it for a while before ending up using mockjax. But it feels really dirty to use and only supports one mocked ajax response per unit test iirc. It wasn't slow by any means, but I imagine being used to automated mocking it would be a pain in the rear end to setup for a bunch of ajax requests.

# ¿ Mar 16, 2015 23:04

spacebard: Jan 1, 2007; Football~

Maluco Marinero posted:

Hmm. I've never had top much trouble with sinon for mocking, stubbing, etc.

http://sinonjs.org/docs/

Where do you find the docs lacking?

No matter what I tried while following http://sinonjs.org/docs/#server, I never got fakeXHR to load / work. I don't remember the details, but I do remember searching around for any other instructions for using it, and everything I tried seemed like fakeXHR was never loaded properly into the sinon object. Admittedly JavaScript isn't my strength although I've improved over the last 2 years.

I may have been trying to just use sinon server with qunit running through grunt.

# ¿ Mar 17, 2015 00:04

spacebard: Jan 1, 2007; Football~

Skandranon posted:

I think this is warning against creating services which are just blobs of variables which anyone can modify. If you treat it like a data layer, with get/set methods, I don't see a problem with it.

That's reassuring. I have a Settings service in my chrome (and theoretically any browser) extension angular app that I use to get some config. for connecting to an arbitrary domain for this API. So I have a getter that wraps the browsers storage layer for extensions. Most of my controllers have it injected.
I was also thinking about using the same sort of service to store some arbitrary enumerated values from the API that I connect into. Basically I'm writing an extension to get around this project management tool's lovely front end :clint:

# ¿ Jun 12, 2015 22:36

spacebard: Jan 1, 2007; Football~

HaB posted:

The backend CMS is Drupal and it sets up a bunch of shared objects on the javascript side which can be injected into your angular apps.

I never dug too deeply into the Drupal side of things, but you had to edit a Drupal.info file to get access to the injectors you used, depending on what you needed and how it got loaded. You also used the 'info file to pull in 3rd party js libs, or css as needed. It's an odd setup. Seems to be performant enough, but not so great to develop on (hence my leaving.) Drupal is now on my "never again" list, though I did have one other dev there tell me not to blame Drupal for the way they were using it, which is not really how most people use it. *shrug* All I know is - it seemed to be much more of a hindrance than a help to the developers, though I can see its value for non-technical content publishers.

The other thing to be aware of in this particular case is that literally 95% of the data is one-way only, so every angular binding used ::. I'm sure the setup wouldn't work very well at all for something which was constantly manipulating data.

edit: took out code example which wasn't really showing anything.

I believe this was pioneered by weather.com, but the basic idea is that there is functionality that lets a user build dynamic page layouts in the user interface. Create a layout, add pre-built widgets into it such as content lists, slideshows, user activity, etc... The people that made weather.com took that idea and made it so that a front-end app would load as one of those widgets. There's a singleton of settings from the back end, and so this was probably injected into angular so it could make use of it.

It worked for them, but it's not as optimized as it could be because it's still got JQuery and JQuery UI hanging around on all of the pages.

# ¿ Jan 31, 2016 07:28

spacebard: Jan 1, 2007; Football~

geeves posted:

Is there a way to tell Karma to keep Chrome open after the tests run? I did upgrade translate when I did the general update. I even tried reverting angular translate files back to the version they were only to be met with some different errors that I forgot to copy. I'm new to the front-end side of unit testing or at least diagnosing problems like these. I'm more of a java developer and this particular task just kind of fell to me. The two front end guys who set all of this up last year never maintained it or really wrote unit tests that often and also have left the company.

Setting singleRun to true will run the test suite once and exit out. The default is false, which should keep the browsers open indefinitely until the process is killed.

# ¿ May 13, 2016 01:57

spacebard: Jan 1, 2007; Football~

I'm finally getting to play with react and redux. I'm seeing a lot of the following (in the Todo List Example for instance):

code:

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

Is this good practice these days? I've spent the last X years trying to avoid inline JavaScript on elements.

Should doing something like documented on DOM Event Listeners be better? This has an example of binding an event to the window, but that seems bad too. Does the onClick binding on a component transpile into something else?

Can I bind to the Component or element inside componentDidMount instead of window?

code:

  componentDidMount: function() {
    window.addEventListener('click', this.handleClick);
  },
  handleClick: function(e) {
    e.preventDefault();
    // Do stuff
  }

# ¿ Jul 13, 2016 21:31

spacebard: Jan 1, 2007; Football~

Depressing Box posted:

Short answer, browser DOM !== React DOM, so inline JavaScript is OK. You're not actually putting inline scripts into the output HTML, it's being used by React internally, and the events you're interacting with are actually SyntheticEvent objects.

Ideally, you want your React components to avoid directly interacting with the browser as much as possible, as this makes them easier to maintain, test, and/or run isomorphically.

Ah, Okay. Thanks. That makes sense and I can live with that. I read about SyntheticEvent, but it didn't really help clarify things yet. :downs:

My basic plan for this app I'm working on is to have some links set off actions with a reducer changing some global state on my redux store.

Edit: It also makes much more sense to have the events there as to not pollute the browser DOM as much.

spacebard fucked around with this message at 22:32 on Jul 13, 2016

# ¿ Jul 13, 2016 22:29

spacebard: Jan 1, 2007; Football~

Kekekela posted:

I feel like I'm implementing an anti-pattern with react. I've got a wizard like process with a presentation component has a render that looks something like:
code:
return (
  <div>
    {!wizard.Step1Data && <Step1 /> }
    {wizard.Step1Data && !wizard.Step2Data && <Step2 /> }
   ...etc
  </div>
)
What's a better way to go about this? I was originally going to handle this with routing but for various other reasons ended up not going that route(lol)

Not sure if it's possible to make a factory for components but it would look cleaner.

Maybe use createComponent instead of relying on jsx transform?

Maybe store the form step in state/store instead of checking if the object exists?

# ¿ Oct 21, 2016 19:34

spacebard: Jan 1, 2007; Football~

Pollyanna posted:

Yeah, that's why I didn't want to say anything. It's more likely than not that I have no idea what's going on, so gently caress it, whatever floats their boat.

With that said, I'm wondering how to redirect to another route as part of a reducer/action. Upon hitting a button, we send an action with data from an API and update the store with it. However, Redux is functional and I don't know where something with side effects like Router is used. Is there a particular way to do this in Redux?

I think that you would change the "route" as part of returning new state in the reducer for that action. Then the app container will pass in the new state to its components props.

The way I do this is I store "route" in a reducer that's passed into the main component, and that loads its conditional child component from there. So the main component's props change when a new route state is returned from the reducer. This is all probably terrible, but I had an unique set of circumstances why I'm implementing my own router rather than using react-redux-router or whatever it's called.

# ¿ Dec 7, 2016 23:37

spacebard: Jan 1, 2007; Football~

Maybe do your form logic in an onSubmit attribute on the form element instead? It would couple your components to state, but probably that's what needs to be done in this case.

This is were redux might help for managing state or in other words the list of Persons. :v:

# ¿ Feb 6, 2017 04:00

spacebard: Jan 1, 2007; Football~

Kekekela posted:

Just got an email from codepen about something they've just launched called "Projects". (pretty creative)

Yeah. I saw that announcement too. Looks pretty neat as a development prototype tool. Could be the Invision for front end web dev.

http://codepen.io/pro/projects/

# ¿ Mar 21, 2017 21:06

spacebard: Jan 1, 2007; Football~

To me /artists/ID/albums means that I'm looking for all the albums the artist is a member of rather than is the owner of.

I've done the following to provide list arguments.

/albums?artists[]=One&artists[]=Two

And I've seen operators included for really complex APIs that need to do so: ?artistsOp=And&artists[]=One&artists[]=Two

# ¿ May 13, 2017 17:29

spacebard: Jan 1, 2007; Football~

There are two reasons to use BEM:

1. Improved specificity without any loss of performance that large sites fall into with wildly inefficient selectors. IDs would be better selectors, but you just know you're going to gently caress yourself in the future on a large site for some snowflake page.
2. Semantically naming selectors (Markup and selectors = structure) so that the CSS definitions describe the design (CSS styles = visuals).

That said, I'm currently working on an Angular app using component-based architecture with a design where we can just utilize Bootstrap 4. The "consultant" opted to heavily rely on IDs and the team lead prefers camel case :bang:

which is annoying to type and imo harder to read than BEM or anything loving else. Luckily the design isn't anything fancy so we won't need to rely on nested specificity hell (yet).

# ¿ Jul 21, 2017 22:53

spacebard: Jan 1, 2007; Football~

Bruegels Fuckbooks posted:

this is what initially drew me to angular/angularcli (https://github.com/angular/angular-cli/wiki), having working typescript and angular projects with karma for unit testing etc without having to screw around with config files.

This, but the opposite. There's so much more crap to configure in the angular projects than a test.js or a webpack config file.

The most frustrating part of my day is trying to work with the combination of angular's unit testing modules or protractor. It feels so obtuse and clunky. It's also half typescript where everyone is all like "whee, privates and readonly this is just like the back end, right!" and go hog wild making things as untestable as possible. :bang:

It's why I much prefer writing es6 and being as functional as I can (I still suck at it). For React, I prefer writing a cheap shallow renderer and not caring about any element that's deeper than that. Unit tests are about testing complexity in methods and not markup imo.

gmq posted:

Continuing the ngrx chat, ngxs is new-ish alternative that's a lot simpler and less verbose. It's very similar to Vuex.

Thanks for this. I tried ngrx, but it seemed like too much effort than only using services or compared to how much easier it was to plug redux into a React app (even relying on redux-thunk). The Select/slice thing look. I think I may give it a go for an angularjs -> angular project.

# ¿ Aug 28, 2018 00:49

spacebard: Jan 1, 2007; Football~

Dominoes posted:

Do y'all know if it's possible to run frontend apps that use WASM from local HTML files, ie without a server? It's working in Edge for me, but in FF I get the error: "TypeError: Response has unsupported MIME type", and in Chrome: "Fetch API cannot load file:///C:/...module.wasm. URL scheme must be "http" or "https" for CORS request."

I suspect this isn't supported in most browsers; my use-case is running an app at work, where I can't install a server. Was hoping to move parts of the code to Rust. The page loads, but the WASM-content doesn't. (Except in Edge)

I think this might work as a browser extension rather than a local URL even though it's not HTTP or HTTPS. I did something similar (not WebAssembly) a few years ago and it worked in Chrome, but not Firefox (or Safari) at the time. However that was before Firefox adopted web extensions fully so cross-origin support in extensions could be supported better now.

# ¿ Sep 27, 2018 13:26

spacebard: Jan 1, 2007; Football~

Ruggan posted:

Does anyone have any experience in slowly transitioning a website to use React instead of traditional ASP.NET MVC w/ Razor and jQuery? I want to replace a lot of that archaic and difficult to maintain code.

Visual Studio doesn't seem to support the React toolchain super well - from what I can tell it's very annoying to set up babel + webpack and have it integrate nicely. I want ES6 and JSX and I want to be able to make the transition gradually. I want to use an open source UI library to replace a lot of our lovely CS/JS. I would love to use VS Code, but VS Code doesn't support .NET development as mentioned in a prior post.

I know there are posts on adding React to an existing website (https://reactjs.org/docs/add-react-to-a-website.html) but that's super simplified and not very helpful - it doesn't give me a vision on how this will work. Any advice?

Run both.

But seriously I had 2 solutions of back end code up in VS, 1 new angular (FML) folder in VS Code and occasionally another older �modern� front end VS Code workspace up. The 2 VS solutions were running iis express.

Yes. The amount of Webpack proxy config is insane. :clint:

This is also on Windows 10 on a SSD hampered by corporate security and McAfee :bang:

Runs fairly well given all that.

# ¿ Nov 8, 2018 18:00

spacebard: Jan 1, 2007; Football~

geeves posted:

Can anyone explain the benefits of CLI tools for Vue and / or Angular? For someone like me who manages our build process, it's just one more thing that's in the way.

angular-cli is

1. A theoretically bundler-agnostic build tool (that's why it has its own schema and terminology for angular.json)
2. A generator to scaffold various components, services, etc... in an app.

Unfortunately you get both so if you eject you can't use one if you don't like the other.

I do like some of the recent improvements to the app configuration, and that's allowed me to setup some custom per-environment configuration so that it's much easier to setup test, build and deploy patterns on the CI server.

So I have something like npm run <build|test|e2e>:<env> which translates to ng <bulid|test|e2e> --configuration=<env>

<env> is then a key in angular.json that might include environment specific typescript, proxy configuration, etc...

ng lint however is garbage because warnings are always errors for some dumb reason, and I run tslint to avoid that.

I still don't like Angular bloat at all, but angular-cli has made it relatively painless to get a new project up and running using the same patterns.

# ¿ Jan 12, 2019 00:26

spacebard: Jan 1, 2007; Football~

SimonChris posted:

You will have to return a promise from findKey and use it in getFamilyData().

Or map/mergeMap/some operator and return the result?

code:

getFamilyData(url: string): Observable<any> {
      return this.findKey(url)
        .mergeMap((key: string) => this.http.get('assets/get/page/' + key));
  }

 findKey(url: string): Observable<string> {
    return this.secureNavigationService.getSecureNavigation().map(fullNav => {
      // code to eventually return key;
    });
}

# ¿ Feb 15, 2019 23:19

spacebard: Jan 1, 2007; Football~

HaB posted:

That's exactly what I don't like about Angular either. It just looks like an awful mess to my eyes.

Fixed

I try to make leaner Angular templates but there really is no way around using directives for control structures and it turns into an awful mess.

Thermopyle posted:

One of the supposed selling points of JSX and something like styled components is that they're accessible to non-coding designers. How well that pans out in practice I don't know.

I thought this selling point boiled down to that designers don't code so give the front end coder all the tools they need in the language that they want? Though that point always bothered me because the separation of design, front end, site building and coding is not always so clear cut.

I get Styled Components and the specificity gains, but I don't think it helps make a large web app or site's CSS anymore easier to remember or learn than sticking with a class-based approach like BEM or utility CSS.

I feel too restricted by encapsulated styles, and usually want the freedom to cascade and limit the number of style definitions I need.

# ¿ Apr 6, 2019 14:42

spacebard: Jan 1, 2007; Football~

prom candy posted:

If there are no types for a third party library I just declare the fucker and move on with my life. Maybe it makes me a bad developer but I'm not afraid to just fall back on any if I feel like I'm wasting time trying to please the type gods.

I really should do this more often. I spent most of last Friday fighting with typescript and trying to get the complementary @types/* library to actually work right so that I could import and type some methods for this library. I ended up not using @types/*, and just writing my own that didn't have obscure errors.

I think that the official poo poo was referencing requirejs :psyduck:

which caused "require" to be declared twice and breaking the build.

Typed languages are good, but TypeScript seems to just waste my time and the sooner we can get better types into the spec., the better.

# ¿ Apr 24, 2019 20:11

spacebard: Jan 1, 2007; Football~

The Merkinman posted:

I'm going to be working on a modal/dialog thing too, but in Angular.

Any way I should go about doing it? A lot of times it has forms that require a OK/Cancel kind of thing.
IDK if I make a component, that uses ng-content to make the content dynamic.. but then how would the ok/cancel work? Wouldn't it NOT be the last thing in the DOM make it difficult to block the user from interacting with everything else?
Should it be like a single component, that some service injects all of its content into? Then how would validation work?
I've tried researching, but al the results are like "here's how to make one with Angular Material" or "here's a basic one that doesn't have a form"

If it's a confirmation modal, then I'd re-use it. If it's anything complex, then I make a new component for each form. But I'm using @ng-bootstrap/ng-bootstrap too so it's trivial to implement. Usually my dismiss/close returns some value so that my parent component can subscribe / pipe the result using from().pipe().subscribe();

If you need to do something like this yourself, you need a component resolver service using ComponentFactoryResolver to create the component instance. The resolver uses a ViewContainerRef passed to it by whatever the parent component.

# ¿ Jun 16, 2020 17:25

spacebard: Jan 1, 2007; Football~

Splinter posted:

Am I missing something here in terms of the downsides to using arrow or unnamed function expressions everywhere? Any thoughts and preferences for what works best?

I think you've understood the reason fair enough. I think I'd allow both anonymous function expressions and arrow function expressions depending on what I want this to represent.

My personal criteria for whether to adopt a given standard are

- Improves readability.
- Improves measurable code quality.
- Is lintable.
- Reduces team stress to just adopt it

Basically this diagram: https://imgur.com/a/SVvzm9H

# ¿ Dec 19, 2020 00:40

spacebard: Jan 1, 2007; Football~

prom candy posted:

this is psycho poo poo

Wait, as opposed to this, which makes merge / PR / commit diffs unnecessarily verbose?

code:

"comma-dangle": ["error", "never"],

ninja-edit: only/always-multiline please.

spacebard fucked around with this message at 02:03 on Dec 19, 2020

# ¿ Dec 19, 2020 02:00

spacebard: Jan 1, 2007; Football~

The Merkinman posted:

I'm working in Angular with a 3rd party external JavaScript library, but am having trouble on how to get my methods in my service to call only once the external JavaScript is ready.

The code the 3rd party supplied is in jQuery:
code:
thirdparty.cmd('on', 'ready', function () {
  $.when( $.ready ).then(function(){
    // do stuff. e.g.
    var myValue = thirdparty.getValue();
  })
})

I think things will depend on exactly what kind of thirdparty jquery library it is.

If you can get at the actual promise, then maybe wrap it in RxJS from.
If the thirdparty library is bound to an element, then you can probably write a type that extends JQuery type (@types/jquery) and implement as part of a directive. I've done this for a loader overlay.
If you're attached to doing it in a service, return or set a BehaviorSubject on the service and set the value as part of that thirdparty ready weirdness.

# ¿ Sep 2, 2021 02:48

spacebard: Jan 1, 2007; Football~

The Merkinman posted:

code:
 Failed to execute callback function for subscribed event[ready] due to error[Cannot set properties of undefined (setting 'thirdpartyIsReady')] in provided callback function TypeError: Cannot set properties of undefined (setting 'thirdpartyIsReady')
I don't think the value returned from getSession would ever change unless I explicitly tell it to, so maybe I should just make the _value_ the observable?

Did you get this working? I think setting things up in a separate method rather than in the constructor would work better. Then you can call that method in a component life cycle method (ngOnInit probably) when you know the app's been bootstrapped and probably the embedded javascript exists.

# ¿ Sep 7, 2021 20:20

spacebard: Jan 1, 2007; Football~

Cugel the Clever posted:

I've now lost my entire morning attempting to get an iOS 14 simulator installed through xcode. Fucker just stalls out ~66% and nothing I do resolves it.

I ran into this on older versions of simulator and xcode. I needed to download the package directly, move it into xcode's directory, and then restart.

This: https://stackoverflow.com/questions/29058229/download-xcode-simulator-directly

# ¿ Jan 13, 2022 23:34

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 15:32

spacebard: Jan 1, 2007; Football~

worms butthole guy posted:

would it? Still a string lol.

More like a union type of string | ShitPost

# ¿ Aug 4, 2022 02:04

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