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

«‹›5 »

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

neurotech posted:

Does said <button> have a way it can be targeted by CSS (i.e. an ID)? If so, you use createGlobalStyle to add a global class that targets the button.

https://styled-components.com/docs/api#createglobalstyle

Oh... shoot I forgot "styled components" was a specific API and not just a general thing. This particular case is in Angular, but I'm sure it could come up in Vue as well.

# ¿ Jun 16, 2022 16:45

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 21:29

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

We have a website that is broken up into three projects, with a lot of shared stuff between them. Most of time only one of the projects is being worked on at a time, but building in Jenkins builds all 3 so it takes a while. One person had the idea to package each of the 3 in our repository so we could just npm install the ones we aren't working on. Those packages would be updated every time anyone makes a change, even dev-level, not production. I feel like this is just more work than necessary and a better route is to just put the shared stuff in a package and just not navigate to the pages of the projects not being worked on. In the event that something in the shared package is being updated, which isn't nearly as often, then the person would need to build all 3 to test anyway.

Is the other idea actually good? Is there something else to do instead?

# ¿ Jul 13, 2022 14:30

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

We have a monorepo and I guess trying to reduce build times since it builds all of the projects in the monorepo even if the developer is only working on one.

# ¿ Jul 13, 2022 18:10

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

Thanks for all the suggestions. So it sounds like this is a common situation, but the whole "publish new version to npm on any change" is not the way to address it.

# ¿ Jul 13, 2022 20:23

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

So something I worked on a while ago isn't good enough because it's not instantaneous...
I have an SPA built in Angular. It has a page with a list of products pulled from a 3rd party API.
The ask is when a user scrolls down the page, and clicks on a product, then clicks back, that the page immediately scrolls down to exactly where they were before.

What I currently do:
On Product Click:
Save the Scroll Position, and the whole JSON list of products, both via Observables.
On Subsequent Back Click
Load all the products from Observable rather than the API call, scroll down via saved value

This still takes some non-zero amount of time, and I should "look at Walmart" to see what they do, as if that means anything.

# ¿ Aug 31, 2022 19:47

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

novamute posted:

Can you SSR the page with the API items in it?

Just so I'm understanding... When back is pressed to instead call a server side rendered version of the page?

# ¿ Aug 31, 2022 20:25

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

Is it common practice for a "library" to only contain one component??
I've been building Component Libraries (with multiple components?!), one in Vue and one in Angular.
Trouble is, in Angular I can't figure out how to have a component in the library that is both something than can be used on its own, and also is part of a different component in the library.
Something like a <special-button> component, that can be used on its own, but is also part of <larger-widget> componet in the same library.

Vue handles it fine, but Angular says (line breaks for clarity):

code:

Unable to write a reference to SpecialButtonComponent 
in /some-file-path/projects/my-lib/src/lib/special-button/special-button.component.ts 
from /some-file-path/projects/my-lib/src/lib/special-button/special-button.module.ts

The very frustrating part is if I copy/paste the special-button and larger-widget folders out of the library and into a 'normal' Angular app, everything works fine.

I wanted to just find the source of a library that actually has a shared component like that, so I could reverse engineer it, but I can't find any so maybe this whole idea is bad practice because such a thing doesn't exist???

# ¿ Sep 2, 2022 21:17

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

Chenghiz posted:

I must be misunderstanding the context because it sounds like you're essentially asking if you have have a library that exports module A and also a module B that composes module A, which is very possible in javascript. Are Angular modules funky or something?
code:
// 'foo.mjs'
export function a() {
  return 'foo';
}
code:
// 'bar.mjs'
import {a} from './foo';

export function b() {
  return a() + 'bar';
}

That's exactly what I'm asking and why I'm so confused/frustrated that Angular, but only in a library, is being so difficult about it.

# ¿ Sep 3, 2022 00:50

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

Macichne Leainig posted:

Everything sucks, it's just a matter of what sucks the least right now

Until everything sucks so much you make your own.
Then it gets popular.
Then it gets more features and complicated.
Then it sucks.

# ¿ Sep 15, 2022 18:24

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 have years of experience in Angular and Vue, how do I get a different job when basically everyone uses React?

Before you say "just learn React", even if I had the time, would that even be good enough since it wouldn't be in a "professional" setting and just something I did in my free time?

# ¿ Oct 30, 2022 18:42

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

HaB posted:

I just switched jobs 4 months ago. There were plenty of things to apply for and interview for.

Feels like 4 months ago was still in the "Great Resignation" period, now we're in the "impending global economic collapse" period so I don't see as many jobs.

Thanks everyone for the advice.

# ¿ Oct 31, 2022 13:18

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

So I'm going to begrudgingly try to learn React. I am coming from both an Angular and Vue background.

I'm looking at the tic-tac-toe example in the docs and have a few questions.

This, like so many tutorials, is all one file, how do you break it up?
Also, like so many tutorials, it's in .js, isn't .jsx the preferred format? What even is the advantage of jsx anyway?

# ¿ Nov 5, 2022 20:21

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

Vincent Valentine posted:

Ask ten people and you'll get ten answers.

Sorry, I meant from a technical level, not a theoretical one.

# ¿ Nov 5, 2022 21:07

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

Lumpy posted:

Make sure you are using the React BETA docs site, as the other one is way outdated and "wrong" in many ways.

https://beta.reactjs.org/learn

I'm still reading through them, but thanks so much for this. This seems to be clicking much better than the original docs. I'm guessing the way people write React apps has changed over the years with newer syntax kind of like Vue 3's (optional) Composition API?

I know React's {} VS Angular and Vue's {{}} will trip up my muscle memory as well as [prop]="value" VS :prop="value" VS prop={value}, but oh well.

I wish I could go back in time and tell my younger self to choose React instead of Angular for my company because of how career destroying that decision has been.

The Merkinman fucked around with this message at 22:08 on Nov 17, 2022

# ¿ Nov 12, 2022 19:22

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 learning React (coming from an Angular and Vue background) and I'm seeing something that I don't think is React specific, but I feel I should know regardless.
Sometimes I see something like:

JavaScript code:

function myFunction(params) {
	// do something with params
}

but other times I see something like:

JavaScript code:

const myFunction = (params) => {
	// do something with params
}

What's the difference? Also why is it const? Doesn't that mean the value never changes? Why isn't it let?

# ¿ Dec 29, 2022 20:19

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

Thanks all for the clarification. That was basically the Andy meme of "I don't know X and at this point I'm afraid to ask".

Has routing always been a complete pain in React? Everything I read is broken because it's outdated. Even this that was posted 5 days ago is outdated (it uses the component prop rather than the element one)

# ¿ Dec 30, 2022 22:06

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

Whether you use React, Vue, Angular, Svelte, Solid, etc, everything is just rendered on the Server anymore, right?
Otherwise I don't see how to make pages with dynamic content without Google bitching about CLS.

Oh, you broke stuff up into microservices? Great, wait until all dozen of them are done before rendering a single pixel because content might move afterwards.
Oh, now that's too long of a wait? Sorry have less content I guess :shrug:

# ¿ Mar 24, 2023 15:25

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

prom candy posted:

The popular thing is to server render and then "hydrate" on the client. Lots of apps are still client rendered SPAs though. If your whole app exists behind a login screen you don't need to think about SSR.

It doesn't require a login, but there is a bigger and bigger push for personalized content. So I can't even do the thing where I block out space while the service gets called, because sometimes the content won't even be there.

# ¿ Mar 24, 2023 18:01

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

prom candy posted:

You can fully server render a site with personalized content though.

Yeah that's what I was saying. Nowadays the new hotness is server side rendering. What's old is new again.

# ¿ Mar 24, 2023 23:30

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

kedo posted:

Anyone have a recommendation for an accessibility testing consultancy/freelancer/etc? In my freelancing days I worked with a couple of firms who had dedicated accessibility testers on staff and their knowledge and attention to detail when QAing sites was super helpful. I'm looking to achieve something similar with the company I'm at currently, but we don't have the budget to hire someone full-time in that role, so I'd like to shop it out if possible. Any suggestions? US based is preferable, but I'm not too picky.

Feel free to PM me if you have a freelancer and don't want to share their info publicly.

Where I'm at, we've used Level Access.

# ¿ Jun 21, 2023 18:07

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

Just wanted to pop in and say Typescript is the most anal retentive garbage I have ever experienced.

Trying to learn something new? Better hope whatever you're researching was written that day with that exact version of typescript, otherwise it'll throw compilation errors no one else gets, to the point you just make the linting so lax to make progress that it defeats the whole point of typescript in the first place.

# ¿ Aug 2, 2023 20:01

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

teen phone cutie posted:

typescript is good, post the code

code:

ERROR: User's post does not begin with a capital letter

code:

ERROR: User's post does not end with a period

Anyway here's two examples

code:

error TS2698: Spread types may only be created from object types.

let basicsort = props.rows.map(object => ({ ...object }))
                                           ~~~~~~~~~
error TS2722: Cannot invoke an object which is possibly 'undefined'.

const tabTitles = ref(slots.default().map((tab) => tab?.props?.title));
                       ~~~~~~~~~~~~~

Doesn't matter anyway. I shut up those error with // @ts-ignore and the compiled library doesn't work anyway. It just blanks the whole page. SO I guess I should look at a fifteenth example of "how to create a library in Vue with Vite and TS" only for it to break after everyone goes "Vite? no one uses that! Write it it "newhottness" also TS updated so the Vite one no longer works anyway"

# ¿ Aug 2, 2023 20:29

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

So I addressed all those errors and everything is all nice and happy and while it builds now. I was going to write a whole long thing about how while it compiles successfully it threw errors when trying to use it, but in writing up that long post I essentially baby-ducked my way to a solution,

for props.rows it's any Array of any, which I know any should be avoided but it really can't be helped in this place. So this was enough.

code:

rows: {
    type: Array as PropType<Array<any>>,
    required: true
  }

for the tabttitles I threw the error because the other solve still wasn't enough.

I'm sorry, I've been playing around with trying to get this done for weeks, all squeezing in time during the little free time I have because 'tech debt' is not something that gets prioritized.

EDIT: Also Thank You

The Merkinman fucked around with this message at 22:50 on Aug 2, 2023

# ¿ Aug 2, 2023 22:42

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

Ima Computer posted:

You can substitute the any for Record<string, unknown> (a record of unknown values) and get a spreadable type.

What's the benefit of that vs Array<any>?

# ¿ Aug 2, 2023 23:22

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

EDIT: Sure deleting node_modules and redoing npm install worked??

The Merkinman fucked around with this message at 19:37 on Aug 15, 2023

# ¿ Aug 15, 2023 19:27

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

Does IT just have some negative Meta/Facebook bias?

# ¿ Oct 6, 2023 18:29

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

Lumpy posted:

We are kicking off a new app, and we're deciding between using Remix and NX Standalone. We also looked at Next as well as Redwood. Redwood was interesting, and if I was a one-person shop getting an app up fast, I might use it. Next wasn't bad from a technical perspective, just concerned more about lock-in and if we decided to stop using it, how much code would be "useless" because it was just framework code.

How is NX Standalone? We have a very large Angular SPA, and I'd like to be able to not have to build the entire project every time I make any change.

# ¿ Dec 5, 2023 22:12

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

Chas McGill posted:

What's the state of offline web apps lately? I'd like to make something that can work offline or connected through the browser. I'm wondering if I should take the react native route to begin with, since I think the main use case will be on mobile. I'm a little reluctant to do that since I don't think messing with app stores and such is worth it for what I want to deliver, though.

You can do it with a PWA, probably, it depends on your use case.

Depends on what you are expecting by working offline and are fine with any iOS restrictions on PWA functionality.

# ¿ Apr 13, 2024 17:42

Adbot: ADBOT LOVES YOU

# ¿ May 15, 2024 21:29

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

Has anyone here used Google Material Symbols? We're thinking of switching to them but they seem so hacky lining up with other copy. The icons display higher than the copy, similar to, but not as extreme as, superscript. It says to shift the icon down 11.5% the font's size, but why isn't the icon just aligned to the baseline to begin with??

I'm trying to find some examples of websites that use Google Material Symbols, and ideally do NOT use the rest of Google Material.

I'm afraid that Google Material Symbols are designed to work with copy given some rules, and that won't fly where I work because it'd have to be "icons can be used at any time in any context with any copy".

# ¿ May 15, 2024 13:40

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

«‹›5 »