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 »

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

I've resolved the colouring issue - my project looks like this now:

My Prettier settings are the same as yours, and I also have the "Reformat with Prettier" option in my context menu (which does work!)

But yeah, when I make a change and hit Ctrl+S, Prettier doesn't run on the file.

# ? Aug 11, 2021 22:23

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 13:21

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

I'm currently weighing up two different solutions for drag-and-drop in React land:

https://github.com/clauderic/dnd-kit
and
https://github.com/atlassian/react-beautiful-dnd

Has anyone had any experience working with either of these two libraries? I'd be keen to hear your thoughts on what they are like to work with.

# ? Aug 16, 2021 08:32

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

neurotech posted:

I've resolved the colouring issue - my project looks like this now:

My Prettier settings are the same as yours, and I also have the "Reformat with Prettier" option in my context menu (which does work!)

But yeah, when I make a change and hit Ctrl+S, Prettier doesn't run on the file.

I don't have webstorm, but in most cases when this happens in vscode, there's a syntax error somewhere preventing prettier from running. Doesn't the plugin have an output window you can check?

Something like this:

# ? Aug 16, 2021 08:44

Chas McGill: Oct 29, 2010; loves Fat Philippe

neurotech posted:

I'm currently weighing up two different solutions for drag-and-drop in React land:

https://github.com/clauderic/dnd-kit
and
https://github.com/atlassian/react-beautiful-dnd

Has anyone had any experience working with either of these two libraries? I'd be keen to hear your thoughts on what they are like to work with.

I've used beautiful dnd a couple times and it has worked well for vertical lists and such. It's also keyboard accessible which is a nice bonus.

# ? Aug 16, 2021 11:12

worms butthole guy: Jan 29, 2021; by Fluffdaddy

I'm going to vent and I'm starting to hate designers. They get a literal month to paint in Photoshop but God forbid development takes more than a week...

# ? Aug 16, 2021 15:22

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

Fixins posted:

I'm going to vent and I'm starting to hate designers. They get a literal month to paint in Photoshop but God forbid development takes more than a week...

Unless the designers are the ones running the company, I think your ire is misplaced.

# ? Aug 16, 2021 16:34

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

Fixins posted:

I'm going to vent and I'm starting to hate designers. They get a literal month to paint in Photoshop but God forbid development takes more than a week...

Sounds like a management problem. Are your designers really still using photoshop?

# ? Aug 16, 2021 16:42

HaB: Jan 5, 2001; What are the odds?

Fixins posted:

I'm going to vent and I'm starting to hate designers. They get a literal month to paint in Photoshop but God forbid development takes more than a week...

in Photoshop? uhh. Are they not giving you redlines? poo poo. even a Balsamiq mockup?

# ? Aug 16, 2021 16:53

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Fixins posted:

I'm going to vent and I'm starting to hate designers. They get a literal month to paint in Photoshop but God forbid development takes more than a week...

i worked with a designer who was extremely slow and watched youtube all day. management canned him but it was unfortunate because the designs were actually really good and coherent and i never had to go into a feedback loop with him. my job got a lot worse when the product owners started making mocks.

# ? Aug 16, 2021 17:47

worms butthole guy: Jan 29, 2021; by Fluffdaddy

Photoshop I work off of PDFs and PSDs lol.

# ? Aug 16, 2021 17:49

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

Time to

# ? Aug 18, 2021 02:33

Bumperhumper: Sep 11, 2001

neurotech posted:

I'm currently weighing up two different solutions for drag-and-drop in React land:

https://github.com/clauderic/dnd-kit
and
https://github.com/atlassian/react-beautiful-dnd

Has anyone had any experience working with either of these two libraries? I'd be keen to hear your thoughts on what they are like to work with.

Recently used beautiful-dnd and it worked really well. Lots of accessibility stuff built in too.

# ? Aug 18, 2021 04:52

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

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();
  })
})

But if I'm trying to put all of that in a service with observables:

code:

getValue(): Observable<any> {
  return of(this.windowRefService.nativeWindow['thirdparty'].getValue());
}

how do I make sure the Angular code doesn't run before the external library is "ready"

code:

this.myService.getValue()
  .pipe(take(1))
  .subscribe(VALUE => {
    console.log(VALUE);
  });

do I have to wrap every .subscribe in the same kind of thirdparty.cmd('on', 'ready', function () { thing or something else, or am I going about this in very much the wrong way?

# ? Sep 1, 2021 21:19

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

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

spacebard posted:

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.

Oh the library itself isn't jQuery, just vanilla JavaScript. I'll try BehaviorSubject, thanks!

# ? Sep 2, 2021 12:33

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

Hmmm I must be thinking about this the wrong way.

code:

export class ThirdPartyService {
	private readonly _thirdpartyIsReady = new BehaviorSubject<boolean>(null);
	thirdpartyIsReady$ = this._thirdpartyIsReady.asObservable();

  constructor(
		private windowRefService: WindowRefService,
		private http: HttpClient
		) {
			this.windowRefService.nativeWindow['thirdparty'].cmd('on', 'ready', function () {
				this.thirdpartyIsReady = true;
			});
		 }

	get thirdpartyIsReady() {
		return this._thirdpartyIsReady.value;
	}

	set thirdpartyIsReady(val: boolean) {
		this._thirdpartyIsReady.next(val);
	}

	getSession(): Observable<any> {
		if (typeof localStorage['_thirdparty_session'] !== 'undefined') {
			return of(JSON.parse(localStorage.getItem('_thirdparty_session')));
		} else {
			return of(
				this.thirdpartyIsReady$
				.subscribe((isReady: boolean) => {
					if (isReady) {
						this.windowRefService.nativeWindow['thirdparty']['session'].getSession();
					}
				})
			);
		}
	}
}

code:

this.thirdpartyService.getSession()
		.pipe(take(1))
		.subscribe(session => {
			console.log('mySession is', session);
		});

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?

# ? Sep 3, 2021 14:22

Chas McGill: Oct 29, 2010; loves Fat Philippe

This is probably a long shot, but has anyone got the latest react-markdown/unified etc packages to work with Jest? They were recently updated to use ESM. I guess, more broadly, has anyone got jest working properly with ESM? Everything I've tried so far:

using jest-node-exports-resolver

using enhanced-resolve

running jest in the experimental vm-modules mode (node --experimental-vm-modules node_modules/jest/bin/jest.js)

Using the next version of ts-jest and configuring it to useESM. Unfortunately, this spawns a variety of different errors.

At this point I'm close to just skipping the remark related tests so we can move on.

# ? Sep 6, 2021 16:56

lunar detritus: May 6, 2009

Do you all have integration tests or unit tests or a mix between the two?

# ? Sep 7, 2021 15:25

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

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

spacebard posted:

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.

Not yet. I took this week off from work!

The values of the third party stuff only change when initialized, and when a specific Update method is called.

The app is an SPA so I'm thinking of putting the "is third party ready" event listener in the NgOnInit of the highest app level, then once the event happens, do something very different....
Make the values third-party returns into Observables. Updating their value once when the event listener happens and again if the explicit Update method is called.

That way any component can get the value$ and won't have to worry about writing logic to make sure the js being loaded since that logic is elsewhere.

# ? Sep 7, 2021 20:50

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

lunar detritus posted:

Do you all have integration tests or unit tests or a mix between the two?

Lots of unit tests and some integration, but trying to reverse that these days, or do "the diamond" (a bit of UI&e2e, a lot of integration, a bit of unit)

# ? Sep 8, 2021 00:43

Opulent Ceremony: Feb 22, 2012

I'm new to React and looking for some input on implementing a component. We need to make a sort of multi-selector component whose selections will filter data on the rest of the pages, and it will appear on almost every page visibly outside of the pages themselves. The data within the component will be the same on each page (but let's assume it might change depending on the page in the future).

My thoughts on it are:

- Place it outside of the page routes in the main App component since it will appear so frequently, but what about the pages it doesn't appear on? I would have to pass along a method for toggling it's visibility I imagine.
- How would I get the needed data to the page routes? Pass the selected data and the toggle function as props to each route, or make a context for it?
- Would it make more sense to just put it within each page route that would be using it? It needs to be visually placed in the menu section that is defined in App, but maybe there is a way to place the component outside of the page itself.

I'm unsure of whether any of these options is specifically better than another and was hoping someone could give me their thoughts, or help clarify mine.

# ? Sep 14, 2021 17:31

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

This is probably where you want to use either home-baked context, or a global state management tool like Redux. You could also just the toggle function and data down as props like you said but if that's going to result in prop drilling then that's when you typically reach for context.

If you wanted to render this with each page route instead, you could look at doing it with a Portal. I basically only ever use use portals for modals so I have no idea if this would be a good idea or not.

# ? Sep 14, 2021 19:55

Opulent Ceremony: Feb 22, 2012

Thanks for your thoughts! I wasn't aware of Portals but this looks promising.

VVV Thanks I'll look more into Redux as well before we make a decision.

Opulent Ceremony fucked around with this message at 21:56 on Sep 14, 2021

# ? Sep 14, 2021 20:51

Roadie: Jun 30, 2013

I'd say go for Redux. It's mostly painless these days with Redux Toolkit to make all the gibberish (for new people) boilerplate generally go away.

# ? Sep 14, 2021 21:28

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

Redux with redux toolkit is really nice yeah.

I have literally never seen someone do that portal suggestion I made so it may be fraught/stupid.

# ? Sep 14, 2021 21:46

Queen Victorian: Feb 21, 2018

I've been using an event emitter to handle inter-component filtering updates and such and I find it works splendidly :shrug:

You have your filter component emit an event with payload when it receives user input and then you have your to-be-filtered elements and even other instances of the filter component listening for the event and when they receive it, can update themselves accordingly. It doesn't hold onto a global state or anything, so that might be a negative, and setup requires a bit of imperative manhandling. Might be primitive/outdated/uncool, but it's so much easier for a relatively unsophisticated BFA programmer like me to wrap my head around. I'd worked with event emitters long before I encountered Redux, so I never really got past seeing Redux as an unnecessarily convoluted event emitter with a bunch of global stage baggage and it never quite fully clicked for me, to be perfectly honest.

Also I really need to get into Context. Keep meaning to but haven't had the time to stop and learn and properly implement. Thankfully we are finally hiring more frontend people who are better at React than I am.

# ? Sep 14, 2021 23:07

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

This is basically what Contexts are for, look into those. No need to bring redux into it.

# ? Sep 15, 2021 00:13

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Honestly, useReducer (and maybe useContext) has me pretty down on redux these days. The the real useful thing for redux to me is the reducer system, so if I can get that natively...

# ? Sep 15, 2021 19:31

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

Even when I'm using a built-in useReducer I like to use redux-toolkit's createSlice to set it up. I think that's mainly because it handles all the typing for you. Reducers in Typescript were really painful with the boilerplate before that.

# ? Sep 15, 2021 19:40

Chas McGill: Oct 29, 2010; loves Fat Philippe

I like zustand a lot as a lighter alternative to redux these days as well.

# ? Sep 16, 2021 00:17

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

neurotech posted:

My Prettier settings are the same as yours, and I also have the "Reformat with Prettier" option in my context menu (which does work!)

But yeah, when I make a change and hit Ctrl+S, Prettier doesn't run on the file.

I had the same issue (in IntelliJ). Turns out "Ctrl+S" is mapped to "Save Document" by default, which doesn't invoke Prettier. Remapping "Ctrl+S" to "Save All" makes it work. I don't mind saving all my documents at once, but YMMV.

I'm not sure if this is an issue with IntelliJ or the Prettier plugin, but there you go.

# ? Sep 17, 2021 09:19

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

Sagacity posted:

I had the same issue (in IntelliJ). Turns out "Ctrl+S" is mapped to "Save Document" by default, which doesn't invoke Prettier. Remapping "Ctrl+S" to "Save All" makes it work. I don't mind saving all my documents at once, but YMMV.

I'm not sure if this is an issue with IntelliJ or the Prettier plugin, but there you go.

Thanks for that - I�ll try it tomorrow.

# ? Sep 17, 2021 13:30

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

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

neurotech posted:

I'm currently weighing up two different solutions for drag-and-drop in React land: https://github.com/clauderic/dnd-kit and https://github.com/atlassian/react-beautiful-dnd

(as others said) beautiful-dnd is good and accessible. it's by Atlasian/Jira who need accessible products for government, and if you want a tree view version there's also @atlaskit/tree.

Opulent Ceremony posted:

We need to make a sort of multi-selector component whose selections will filter data on the rest of the pages, and it will appear on almost every page visibly outside of the pages themselves [... ]
- Place it outside of the page routes in the main App component since it will appear so frequently, but what about the pages it doesn't appear on? I would have to pass along a method for toggling it's visibility I imagine.

Toggling its visibility would (presumably) be route-based so it's probably simpler/clearer to just include the filter component on the page routes that need it

Opulent Ceremony posted:

- How would I get the needed data to the page routes? Pass the selected data and the toggle function as props to each route, or make a context for it?

Considering how distant you make the components sound then using Context is almost certainly the right choice rather than prop drilling

Rendering to another part of the page via Portals only affects rendering but events and context etc are all the same so context would still work

but I wouldn't recommend Portals unless you're really sure you need that. It would be more conventional to lift the state to surround the components that need to set/get that state. This would probably be a 'filter Context Provider' to propagate filter/setFilter, with your filter UI using both, and your children components using that context to read the filter

Dominoes posted:

https://github.com/David-OConnor/seed

github dark mode logo support please

maybe a white outline would fix it?

# ? Oct 4, 2021 05:37

HaB: Jan 5, 2001; What are the odds?

Got some sort of general questions for you folks, re interviews and such.

I am on the market again. I should also note that I started coding in 2001, so I have 20 YEARS of experience at this point, with a lot of repos on github/bitbucket reflecting the volume/depth of my experience.

So I have never thought coding tests are useful interview tools, with ONE notable exception I have encountered: one place I ended up working for had a coding test that was straight out of a very tricky production bug they had encountered, which I had to find and fix, as well as some other small examples which again were straight out of production code. I consider this the ONE valid coding test, because it's literally THE JOB I would end up doing. The reason I don't think they are useful tools most of the time is because it's either something like fizzbuzz, or "is this palindrome" and those just have pat solutions that we've all seen a million times. Having me just spew one out doesn't really tell you anything about me as a coder.

Have also had some more in depth ones. One was a full stack test - write a backend and frontend from scratch,- and taken IN the office (this was pre-covid) but I was given 1 hour, and they just said "get as far as you can in an hour". I got no problem with this one either, due to the time limit.

So my question is: at what point does a "coding test" become openly disrespectful of your time?

I ask because I just did one and the requirements were:

- a 2 page app: login and a dashboard
- ui lib of your choice (bootstrap, tailwind, et,. al)
- NO front-end framework (more on this later)
- fully responsive
- session management via cookies
- dashboard should redirect to login if user isn't auth'd
- a backend consisting of 3 endpoints
- a giant screenshot in a PDF of what it should look like

So, that's not really a trivial amount of work, plus the no frontend framework requirement is ridiculous and arbitrary, particularly when you consider that they DO use a framework in their shop; so having me write this without one is a dumb test, because THAT'S NOT THE JOB. It also means that I have to do a lot of googling around because holy poo poo - I haven't even touched jQuery in 5-6 YEARS now, much less vanilla html/css/js. I have a vague memory of how we did things in The Dark Times, but only a vague one.

I have a few problems here. One - even at a minimum, that's probably a day's work. They did not offer to compensate me for my time. Not even an Amazon gift card or some poo poo. Anyway - I spent about 8 hours total on it over a few days, and sent it in. All the requirements aren't there, but I feel like it was enough for them to see how I code.

I am wondering if we go to next steps I should bring it up. Expecting someone to basically work an entire day for free is pretty lovely. And they are aware that I am looking while still working my current job, so that's really even more of an imposition on my time. So my concern is their company culture. If they think this is okay, how many other ways are they going to not be respectful of ppl's time?

Thoughts?

# ? Oct 7, 2021 16:02

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

yeah that's a complete waste of time I wouldn't have agreed to do that

During my last interview, they tried to get me to do a third code challenge (after already completing 2, one-hour-long sessions) and I told them I didn't want to do it and still ended up getting the job, so at this point i'm not jumping through hoops like that for a job.

just lmao if they made you do that and don't even bring up your code in the interview

teen phone cutie fucked around with this message at 16:29 on Oct 7, 2021

# ? Oct 7, 2021 16:26

marumaru: May 20, 2013

i've had to do exactly that test (besides cookies - i was allowed to use local storage), and they said that it was a 2-hour exercise. it took me over 4 to reach "yeah i'll send this to my potential employer" level quality

it's hosed. it's either that kinda exercise or worse: leetcode-type exercises. in my opinion they're all disrespectful. they don't care about our time, they care about minimizing costs and risks during the selection process.

i've never once been offered compensation for the multiple-hour take-homes i've done.

# ? Oct 7, 2021 16:44

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

Did they qualify what "from scratch" meant? What libraries could you use? Because that list is basically the Django 101 tutorial. Slap in Bootstrap and Django Rest Framework and you could speedrun that in a couple of hours. If you couldn't use something like Django then fuuuuuck that.

# ? Oct 7, 2021 16:53

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 13:21

Macichne Leainig: Jul 26, 2012; by VG

Without a framework definitely seems weird. It's important to know how core JavaScript works and how it can interact with all the parts of the browser, sure, but my understanding of frameworks like React/Vue/etc is exactly why I am capable of making web apps in the first place.

Hell, I just deployed a brand new full-stack app last week. Could not have done it without React, full-stop. It's obviously a personal limitation on my part to some extent, but you don't give a carpenter just a pack of nails and a hammer and tell them to cut up a board and make a chair out of it.

That analogy probably sucks because I don't know poo poo about carpentry either, but hopefully you get the idea.

Macichne Leainig fucked around with this message at 16:58 on Oct 7, 2021

# ? Oct 7, 2021 16:55

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

«‹›235 »