Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕
I'm beginning to hate Angular after re-learning React.

Adbot
ADBOT LOVES YOU

prom candy
Dec 16, 2005

Only I may dance

kedo posted:

Two questions for the thread at large:

First, does anyone have opinions/suggestions for a headless CMS targeted towards building ecommerce sites? There seem to be a bunch out there, but I haven't used any of them before so I'm looking for a bit of help narrowing down the field to a few reliable options.

Second (and not actually related though it seems related), I'm starting to work with KeystoneJS as the backend on a personal project this is the first time I've worked with a headless CMS to create a backend like this and so far it's going fairly well. My previous backend experience is mostly in Drupal and WP, so this is dramatically different and overall a very pleasant experience so far. I'm thinking about using Vue for the frontend because I'm first and foremost a lazy frontend dev, and Vue seems to be easier to wrap my brain around than React which I've worked with but haven't really enjoyed in the past.

Ultimately when I need to host this thing somewhere, what's the standard/right way for the two to communicate? Would I have Keystone running on one server (say a DO droplet), and my Vue client running on another and sending queries to the first? Keystone has some documentation about how to embed it into a Next.js app, but I'm new enough at this that I'm not sure how/if this would translate to Vue.

My experience here is somewhat limited, so I'm interested in any advice about how to approach this in an intelligent manner.

Are you looking to actually run your store through the CMS? https://www.shopify.ca/plus/solutions/headless-commerce?

bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕

teen phone cutie posted:

That's pretty cool. Does this mean other candidates can see the other submissions? Or is there something special you're doing?

I'm guessing there is some automation around creating a private repo with the code + PR for review. The repo was github.com/CompanyNameRecruiting/Someacharacters-BunchOfNumbers and I was invited with read only access to it. I was able to clone the code and tested it out locally. Wrote out a bunch of comments, left a summary that included comments on accessibility, performance, abstraction, and a few other things that I didn't think were appropriate to leave inline.

I'm sort of worried I left too many comments on it, but I think I was clear on what I thought were important changes, what were requests for clarification, and what were just nitpicky things.

I also pointed out a performance optimization (150ms to 2ms, yay) that could be done with a refactor and included dev tools output of the difference in render times. And did a little video showing how to reproduce an edge case bug I noticed.

If that isn't good enough to get to the onsite, I'm just gonna dig a grave, lie in it, and set up a little desk there to work on stupid WordPress bullshit marketing sites or something

kedo
Nov 27, 2007

prom candy posted:

Are you looking to actually run your store through the CMS? https://www.shopify.ca/plus/solutions/headless-commerce?

Yeah probably! Thanks, this could be a great option.

Vilgefartz
Apr 29, 2013

Good ideas 4 free
Fun Shoe
Hi all. I'm essentially a junior/intermediate front end developer in my team, but I have the most experience in front end development, particularly with React

I've been working on this code base for 6 months, and while mostly functional it suffers from a lack of organisation. Can any senior react devs recommend resources for getting a 'fairly' new codebase Into order. I have the freedom to take a lead on this process from, but I'm too inexperienced to know where to start.

I had an idea of going through each foru
m and standardising the way they're composed, which libraries are used, and then writing a short guide for the other devs who touch the ui.

I'm also happy to a pay a senior react lead for an hour of their time for some pointers if you want to get in contact, I'm really keen on turning this shitfight into a nicer codebase

bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕
I spent the entire weekend stressing about every little detail about that PR assignment thing and how I could have maybe explained more stuff or explained what I did explain better, it sucked

prom candy
Dec 16, 2005

Only I may dance

Vilgefartz posted:

Hi all. I'm essentially a junior/intermediate front end developer in my team, but I have the most experience in front end development, particularly with React

I've been working on this code base for 6 months, and while mostly functional it suffers from a lack of organisation. Can any senior react devs recommend resources for getting a 'fairly' new codebase Into order. I have the freedom to take a lead on this process from, but I'm too inexperienced to know where to start.

I had an idea of going through each foru
m and standardising the way they're composed, which libraries are used, and then writing a short guide for the other devs who touch the ui.

I'm also happy to a pay a senior react lead for an hour of their time for some pointers if you want to get in contact, I'm really keen on turning this shitfight into a nicer codebase

Are you talking about file system organization or something else?

Vilgefartz
Apr 29, 2013

Good ideas 4 free
Fun Shoe

prom candy posted:

Are you talking about file system organization or something else?

Less file organisation and more how do I effectively create a set of walls that guide how code is structured in the ui

HaB
Jan 5, 2001

What are the odds?

Vilgefartz posted:

:words: about cleaning up a codebase.

I am not a React dev, but I have done this on plenty of code bases.

You have the right idea about how to start at least- make some folders, move some files around, make it all make sense, come up with a good set of coding standards. After that, you have to enforce it HARD on PRs. Thats really the only way to make sure it stays that way.

Call out things like: poorly named vars, code that is non-DRY. Come up with a component naming scheme which makes sense and stick to it.

Every awful convoluted codebase I have seen was simply a product of no one caring enough to enforce the rules. 3-4 years of that with 3-5 devs and you get a terrible mess.

zokie
Feb 13, 2006

Out of many, Sweden
First if you arent using typescript you need to start with that, it will also help you with moving files and stuff.

Then the thing that helped me the most with learning how to separate things into proper modules was testing coupled with 90+% code coverage requirements. There is now way you are going to want to make the effort to achieve that without starting to extract units of logic into their own functions or modules.

When it comes to testing you should be using testing-library its the best!

As for more specific advice for how to arrange files I found that some place for generic components like buttons works good, but that then I try to keep all other files arranged more or less by route.

But think that type safety and tests are more important for making a project discoverable for new contributors because it allows them to make changes and experiment knowing any gently caress ups will be caught by TS or tests.

bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕

bvj191jgl7bBsqF5m posted:

I'm guessing there is some automation around creating a private repo with the code + PR for review. The repo was github.com/CompanyNameRecruiting/Someacharacters-BunchOfNumbers and I was invited with read only access to it. I was able to clone the code and tested it out locally. Wrote out a bunch of comments, left a summary that included comments on accessibility, performance, abstraction, and a few other things that I didn't think were appropriate to leave inline.

I'm sort of worried I left too many comments on it, but I think I was clear on what I thought were important changes, what were requests for clarification, and what were just nitpicky things.

I also pointed out a performance optimization (150ms to 2ms, yay) that could be done with a refactor and included dev tools output of the difference in render times. And did a little video showing how to reproduce an edge case bug I noticed.

If that isn't good enough to get to the onsite, I'm just gonna dig a grave, lie in it, and set up a little desk there to work on stupid WordPress bullshit marketing sites or something

The position has already been filled but the recruiter told me that I did well enough on the PR thing that they want to get me into an onsite whenever a new position comes up lol :(

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


bvj191jgl7bBsqF5m posted:

The position has already been filled but the recruiter told me that I did well enough on the PR thing that they want to get me into an onsite whenever a new position comes up lol :(

I, too, love interviewing for a guaranteed no job.

Vincent Valentine
Feb 28, 2006

Murdertime

The place I wanted to work at most told me something similar. It fuckin' mega-sucks. Really, I genuinely appreciate that I get to just skip all the interviewing when a position opens up. But man, when is that going to be? A year from now, when I would want a higher salary that I'm not going to get for the position I was originally interviewing for? Or three months from now, when I've only just now started at another position?

Vilgefartz
Apr 29, 2013

Good ideas 4 free
Fun Shoe
Thanks for the tips! I try suggest being able to vet PRs to my team lead, which i think he will be receptive to, so he has a little less to worry about.

I will definitely add typescript to the modules I make. Actually my other co worker suggested the same thing so there's no guesswork in component usage.

So I suppose going forward it will be testable modular components and typescript. Thank you for the feedback! it's comforting to see the process described and that people have used it and it works.

bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕
Just got a call from the recruiter again and "one or two weeks" has turned into "indefinitely", but he was very excited about how well my techincal screen went lmao

prom candy
Dec 16, 2005

Only I may dance

Vilgefartz posted:

Thanks for the tips! I try suggest being able to vet PRs to my team lead, which i think he will be receptive to, so he has a little less to worry about.

I will definitely add typescript to the modules I make. Actually my other co worker suggested the same thing so there's no guesswork in component usage.

So I suppose going forward it will be testable modular components and typescript. Thank you for the feedback! it's comforting to see the process described and that people have used it and it works.

The file system stuff is pretty important too in my experience. I organize my components like this:

code:
src/
  components/
    Button.tsx
    Heading.tsx
    Form/
      components/
        TextInput.tsx
        Checkbox.tsx
      Form.tsx
  screens/
    Home/
      components/
        HomeBanner.tsx
        HomeLogos.tsx
      Home.tsx
    Auth/
      components/
        AuthPageWrapper.tsx
      screens/
        LogIn.tsx
        SignUp.tsx
      Auth.tsx
And I have rules about what can import what. So, for example, any component can import any other component from src/components, those are global components. But screens/Auth/screens/LogIn.tsx can't import screens/Home/components/HomeBanner.tsx, even though it CAN import screens/Auth/components/AuthPageWrapper.tsx

I like making this contract because it means that I know that I can edit screens/Home/components/HomeBanner.tsx and it will only affect Home, whereas if I edit components/Button.tsx it's likely being used all over the place and I need to check and make sure I'm not breaking a use case or making it look weird somewhere else. Typescript helps for "not breaking a use case" but it won't tell you if you've changed the styling on something in a way that makes it look weird elsewhere.

Also in case it's not clear the src/screens layout should basically follow your routes. So if you have nested routes then your screens can have nested screens.

Oh and I can't remember what it's called, maybe compound components? But I like to do that thing where I import Form and then have access to Form.TextInput or Form.Label. Makes for nice DX in my experience.

HaB
Jan 5, 2001

What are the odds?
Anyone got any scuttlebutt on Cognizant DX as a dev shop? I am being offered a job there.

It's a nice pay bump but money aint everythng if the shop sucks.

N.Z.'s Champion
Jun 8, 2003

Yam Slacker

prom candy posted:

The file system stuff is pretty important too

Yep and consider colocation for styles too (keeping style files nearby in the filesystem; near where they're used).

To help enforce style modularity you can use tech, like styled-components or css modules, or you can use a naming convention, like namespacing your css with the component name, but obviously tech will be more robust

Style modularity matters more on large sites so that you don't end up with a monolithic style bundle with lots of unrelated styles to the route the user is on.

HaB
Jan 5, 2001

What are the odds?

N.Z.'s Champion posted:

Yep and consider colocation for styles too (keeping style files nearby in the filesystem; near where they're used).

To help enforce style modularity you can use tech, like styled-components or css modules, or you can use a naming convention, like namespacing your css with the component name, but obviously tech will be more robust

Style modularity matters more on large sites so that you don't end up with a monolithic style bundle with lots of unrelated styles to the route the user is on.

Or lol at all that and just Tailwind your way to success!

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.'

HaB posted:

Or lol at all that and just Tailwind your way to success!

:barf:

Macichne Leainig
Jul 26, 2012

by VG
Gonna write a linter to pick up on base tailwind classes in your HTML and throw errors if it detects any.

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'
Tailwind is fine

blunt
Jul 7, 2005

Tailwind is one of many bad steps down the path of "everybody should be a full stack developer"

Macichne Leainig
Jul 26, 2012

by VG
For the record I personally love Tailwind but I would have a good discussion with anyone else on a dev team before implementing it in any work projects. It's great for personal stuff though, just whip together a layout and design in 3 minutes.

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

blunt posted:

Tailwind is one of many bad steps down the path of "everybody should be a full stack developer"

Can you expand on this?

lunar detritus
May 6, 2009


blunt posted:

Tailwind is one of many bad steps down the path of "everybody should be a full stack developer"

It definitely does help when backend developers want to style stuff. Sure, it's theoretically bad but the reality is that between having a backend dev having write raw css and maybe having to learn BEM or SASS or something else to not make a mess, and having a backend dev use tailwind to choose classes from its limited design system, I vastly prefer the latter.

It completely changed the way we work here, for the better.

lunar detritus fucked around with this message at 16:42 on May 20, 2022

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.'
I'm a pretty chill person, often to a fault, but someone rammed tailwind into a project at work and every time I see a div with 12-20 tailwind classes to do five CSS things, I get viscerally angry in a way I never thought it was possible to me to get

Chas McGill
Oct 29, 2010

loves Fat Philippe
I don't find tailwind too offensive for prototyping etc, but the mindset of folk unwilling to learn CSS and pushing these libraries is pretty irritating to me. Possibly because I have a lot of hard won CSS experience. If I had to be frustrated, you do too!

blunt
Jul 7, 2005

camoseven posted:

Can you expand on this?

In my experience (and this is just my experience! I have no doubt that other dev teams have had other experiences!) the developers who love Tailwind have tended been the backend devs who hate or are bad at CSS/SASS/etc. That's fine, they have a whole other domain of expertise they need to maintain and I see the appeal of frameworks like Tailwind in small applications/teams where a couple of devs have to handle everything and the default styles are fine.

Where it bothers me as a primarily front-end dev (and working on projects that have dedicated front-end devs) is to match brand guidelines you're first writing a Tailwind config file with all your variables, then using @apply to use Tailwind's vars/utility classes in your components class declarations (because IMO actually littering your markup with "<button class='bg-slate-100 rounded-xl p-8 dark:bg-slate-800'>" instead of "<button class='button--action'"> repeatedly makes things way less readable and a nightmare to ever change consistently) and at that point you're just doing SASS with extra steps and dependencies so that someone else can occasionally add "text-red-400" to something when they don't want to bother the UI people.

Here's something that expands on some of the things people dislike about it - https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing-3hpn - as well as several rebuttals about why Tailwind is actually good linked at the bottom

I think it's perfectly fine for proof-of-concepts and one/few-man projects though.

lunar detritus posted:

It definitely does help when backend developers want to style stuff. Sure, it's theoretically bad but the reality is that between having a backend dev having write raw css and maybe having to learn BEM or SASS or something else to not make a mess, and having a backend dev use tailwind to choose classes from its limited design system, I vastly prefer the latter.

It completely changed the way we work here, for the better.

I agree that giving backend developers a set of utility classes is preferable to a developer with limited CSS understanding hacking away at the stylesheets/components, but ideally if they're a backend developer that implies there should be a frontend developer picking up the styling or at least helping out the backend dev. In our current dev team (~11 backend, 4 frontend, PHP/Go/Vue/SCSS with some legacy Twig+JQuery) we don't use Tailwind but we provide a very limited set of documented utility classes (eg 'text--strong' or 'banner--warning') for predictable things a backend dev might want to add (like outputting an error message) and anything deeper or actual layout related gets kicked over to frontend.

blunt fucked around with this message at 18:02 on May 20, 2022

lunar detritus
May 6, 2009


blunt posted:

I agree that giving backend developers a set of utility classes is preferable to a developer with limited CSS understanding hacking away at the stylesheets/components, but ideally if they're a backend developer that implies there should be a frontend developer picking up the styling or at least helping out the backend dev.

I mean, yeah, but I can't control my job thinking everyone is or can be a full stack developer. But I am able to make everyone's lives easier by using tailwind instead of hoping for the best. I can't overstate how many problems it has solved, onboarding people is a dozen times easier.

In a perfect world it wouldn't be needed because everyone knows CSS and CSS architecture, but I feel that's increasingly a pipe dream. I've noticed that even (junior) frontend developers don't really know CSS, they mostly focus on React or Vue, or whatever frontend framework they learned. Job offers don't even mention CSS these days. :smith:

blunt
Jul 7, 2005

lunar detritus posted:

I mean, yeah, but I can't control my job thinking everyone is or can be a full stack developer. But I am able to make everyone's lives easier by using tailwind instead of hoping for the best. I can't overstate how many problems it has solved, onboarding people is a dozen times easier.

In a perfect world it wouldn't be needed because everyone knows CSS and CSS architecture, but I feel that's increasingly a pipe dream. I've noticed that even (junior) frontend developers don't really know CSS, they mostly focus on React or Vue, or whatever frontend framework they learned. Job offers don't even mention CSS these days. :smith:

I think where we disagree is to me "in a perfect world" instead of everybody knowing CSS and CSS architecture, people would work in the domain that they're skilled and interested in, instead of expecting someone to work on all parts of the stack. But some of that is probably a scale thing.

Hopefully in any world the senior frontend devs are encouraging the junior ones to brush up on their CSS fundamentals (if they're dealing with styling at all), if only to understand how and why Tailwind works.

Maybe I've been lucky but I haven't really come across React/Vue devs being completely obtuse to CSS - junior devs with absolutely no regard for accessibility is my current pain point!

prom candy
Dec 16, 2005

Only I may dance
Tailwind rocks and you need to know CSS to use it effectively so all the smug "people just don't want to write CSS" comments make no sense.

I've done vanilla CSS, SASS, OOCSS, BEM, styled-components, Emotion, you name it. Tailwind is by far the most productive way to write and manage CSS in a component-based front-end.

Also, like many of you, I thought it was an affront to god when I first saw it. I was wrong, Tailwind rocks.

lunar detritus
May 6, 2009


blunt posted:

Maybe I've been lucky but I haven't really come across React/Vue devs being completely obtuse to CSS - junior devs with absolutely no regard for accessibility is my current pain point!

They keep adding click events to divs :argh:

Macichne Leainig
Jul 26, 2012

by VG

prom candy posted:

Tailwind rocks and you need to know CSS to use it effectively so all the smug "people just don't want to write CSS" comments make no sense.

Honestly same. It's actually helped me practice quite a bit of flexbox to the point where I whipped up a quick proof of concept component the other day and laid out everything with plain flexbox in the style attribute for divs. And I actually felt like I knew what I was doing. It was nice.

HaB
Jan 5, 2001

What are the odds?

prom candy posted:

Tailwind rocks and you need to know CSS to use it effectively so all the smug "people just don't want to write CSS" comments make no sense.

I've done vanilla CSS, SASS, OOCSS, BEM, styled-components, Emotion, you name it. Tailwind is by far the most productive way to write and manage CSS in a component-based front-end.

Also, like many of you, I thought it was an affront to god when I first saw it. I was wrong, Tailwind rocks.

It me.

Seriously. I can css just fine, or less or sass, bem style, semantic style.

But this is my exact experience as well. I just accepted a new position as an architect and will be using Tailwind.

bvj191jgl7bBsqF5m
Apr 16, 2017

Í̝̰ ͓̯̖̫̹̯̤A҉m̺̩͝ ͇̬A̡̮̞̠͚͉̱̫ K̶e͓ǵ.̻̱̪͖̹̟̕
CSS, sass, less, tailwind, and anything else you can think of all suck

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

bvj191jgl7bBsqF5m posted:

CSS, sass, less, tailwind, and anything else you can think of all suck

:yeah:

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.'
If you cant do it with an animated gif, its not worth doing

fsif
Jul 18, 2003

Am I wrong in thinking Tailwind would be awkward outside of simple UIs or very regimented design systems?

Feels like if I'm coding a complex layout or CSS animations I'm not going to have a corresponding utility class.

Adbot
ADBOT LOVES YOU

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

fsif posted:

Am I wrong in thinking Tailwind would be awkward outside of simple UIs or very regimented design systems?

Feels like if I'm coding a complex layout or CSS animations I'm not going to have a corresponding utility class.

Never had a problem with layouts. For animations we do use a different library (Framer Motion)

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply