Modern front-end development: skinny jeans and handlebar mustaches ITT

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

«‹›2 »

fsif: Jul 18, 2003

So, a React/hooks-y question that I don't have the proper CS background to Google with the right verbiage.

If I want to pass props down to a component, what is the best way to "freeze" the props value for when the component was first initialized? As a simplified example, let's say I wanted to create a slider component that changes the font size of its parent component. In this component, I also want to include a "cancel" function that reverts the font size back to the value it was before I started messing around with it with the toggle. My best solution was to use useRef() and do something like this�

code:

// Parent.js

const [fontSize, setFontSize] = useState('16px');
const changeFunc = inp => {
  setFontSize(inp);
};
 
<CopyOrWhatever style={{fontSize: fontSize}} /> 
<Slider fontSize={fontSize} changeFunc={changeFunc} />


// Slider.js

const { changeFunc, fontSize } = this.props;
const initialFontSize = useRef(fontSize);

<Slider onChange={(inp) => changeFunc(inp)} />
<CancelButton onClick={() => changeFunc(initialFontSize.current)} />

This seems to work, but I don't know why and I get the sense that this might be something of a hack/anti-pattern. Is there a better way to do what I'm trying to do here?

fsif fucked around with this message at 17:18 on Jul 30, 2019

# ¿ Jul 30, 2019 17:16

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 09:43

fsif: Jul 18, 2003

Right, this was a simplified example. The actual work I'm doing pulls a number of variables from a Redux store and contains a lot more logic on how to manipulate the prop when the slider is used.

# ¿ Jul 30, 2019 18:49

fsif: Jul 18, 2003

FormatAmerica posted:

Who hate clean commit diffs

An extra green line you see for three seconds when merging a PR versus a lifetime of maddening, incomplete sentence rear end syntax.

# ¿ Dec 28, 2019 05:44

fsif: Jul 18, 2003

Jaded Burnout posted:

You're missing the point. it's not about the extra line change during the PR review (though that is annoying), it's that if you have a list of 3 things and add one, you have to change line 3, which means that looking at git blame for line 3 now brings up the useless information that you added line 4, rather than the more useful information of e.g. why line 3 was added or modified in the past.

Any syntax you can get used to, but actively making our tools less effective sucks.

Also, the whole point of using trailing commas is when you have things on multiple lines for exactly this reason, so "incomplete sentence syntax" is a wacky thing to say since
most people,
don't write sentences,
like this.

What do you do if you add new imports from a module and Prettier moves the imports to multiple lines?

Your workflow might differ from mine, but I don't spend all that much time comparing past commits. When I do, an added comma has never made my tooling less effective. It's always been pretty easy to infer what's going on.

# ¿ Dec 29, 2019 03:45

fsif: Jul 18, 2003

I mean a guy that hyphenates "no one" probably isn't going to relate to my particular syntactical preferences.

# ¿ Dec 29, 2019 04:13

fsif: Jul 18, 2003

CSS is good. It stopped sucking around the time flexbox could be safely used in production.

A lot of programmers just aren't naturally wired to deal with (or at least care much about) some finer points in visual or UX design.

# ¿ Jan 25, 2020 00:32

fsif: Jul 18, 2003

I conceptually loathed CSS-in-JS but pretty quickly became a convert when I began using it in React apps.

There are still some pain points (global styles are clunky, harder to deal with in dev tools), but idk, I learned not to knock things until I tried them.

# ¿ Jan 25, 2020 01:48

fsif: Jul 18, 2003

Inacio posted:

the hr lady then asks: who is in the wrong here?

Management for allowing such an insane company structure to exist in the first place.

But past that, if the Javascript devs have a whole separate unit coding style sheets for them because they're incapable/unwilling to program something that actually matches the designs, I don't think they're in a great position to demand additional concessions.

If they're not even writing the CSS in the first place, why do they even have such strong opinions on how to write it? They hate toggling classes that much?

# ¿ Jan 25, 2020 15:25

fsif: Jul 18, 2003

I let designers make all the decisions unless something is a serious usability or accessibility flag. Sometimes I try to bounce ideas off of them, but I generally respect their vision, heh.

There are a couple reasons I agree that you should have some visual designing acumen as front end dev, though. First, if you don't have a natural inclination towards design principles, you're probably more likely to miss the finer points of typography, composition, hierarchy, etc. in the design. You'll either end up with extra rounds of QA or a lovely looking site.

Second big reason is that no Figma or Sketch mockup can account for every possible design decision. There are going to be a lot of times when you are forced to make executive decisions for edge case responsive sizes, unaccounted for hover states, and some of the finer implementation details of UI components. The design team should be able to trust that you won't make bad decisions.

# ¿ Jan 26, 2020 18:32

fsif: Jul 18, 2003

Inacio posted:

maybe the place i worked for was poo poo but when i worked mostly on FE i often had to bring something up to the PO because the design was unusable/unintuitive/made just to be added to the designer's portfolio
some of this stuff was just completely impractical when actually implemented

Oh yeah, missed this as a reason to push back on a design in my last post. Less experienced designers will treat a website design like it's just a static flyer and come up with something that only works if a user's browser is always at exactly 1440px and the client will never put their own content into a CMS. Gotta know how to rein them in (without using it as an excuse to be lazy)!

# ¿ Jan 26, 2020 18:38

fsif: Jul 18, 2003

Dominoes posted:

Designers are the idea guys of their fields. They're artists who want their art to come to life, bit don't care to learn how that's accomplished.

I post this as a naive nerd assessment, and am looking for retorts. I'm 50/50 on whether this is a good description.

It's a bad description. The very existence of Bootstrap (and the fact that most sites using it still look like poo poo) should be enough to validate designers' talents.

I could maybe extend that description to a few bad UX designers I've met, but actual UX practitioners are valuable.

# ¿ Feb 1, 2020 19:46

fsif: Jul 18, 2003

My own experience is filled with far more developers with entitlement complexes than it is with designers completely lost at sea or making unreasonable demands. Just a lot of combinations of the following behaviors:

1. Bemoaning a design team's feedback because the developer thinks consistent spacing and margins is too pedantic
2. Dramatically overstating the difficulty in implementing a less conventional design choice
3. Using a minor error in the designer's mock up ("tablets don't even HAVE hover states!") to dismiss the designer's expertise altogether

Just as we're making GBS threads on print designers ill-suited for the web, I think we have a lot programmers ill-suited for front end development.

rt4 posted:

This is not an actual director-level role, right?

Why wouldn't it be? :confused:

# ¿ Feb 2, 2020 06:42

fsif: Jul 18, 2003

We have a client that want either a native app or web app that serves DRM-protected videos to subscribers that are also available on a user's phone if they are offline. No idea where to even start. Anyone able to point me in the right direction?

# ¿ Apr 3, 2020 22:03

fsif: Jul 18, 2003

Yeah I have to admit I'm not usually the one doing the wire framing these days.

In the past, I've used Figma, Adobe XD, and pen and paper for wire framing. If I had to do it today, I'd consider using Excalidraw. I would never wireframe via code.

I think the thing to keep in mind if you want to invest in communicating ideas/creating an effective UI, you're veering outside of the traditional technical skills area. It's less about learning tooling than it is about learning, like, human psychology. I imagine a book on UX would be more helpful than developing strong Invision skills.

Good luck!

# ¿ May 9, 2020 20:31

fsif: Jul 18, 2003

I believe the developer of both is merging the best of each library into just react router, but probably doesn't make a huge difference which one you choose for a small project.

# ¿ May 28, 2020 00:06

fsif: Jul 18, 2003

Inacio posted:

i dont get using those when you have to learn how to do things the way the frameworks want you to when you can just plop a class in there with css that you always know

That's very much how I feel.

There are developers I've worked with who couldn't be bothered to learn flexbox or grid but suggested we look into Tailwind. Feels like there's got to be at least as much mental overhead learning a utility class library as there is to just learn the modern specs.

But all that said, I've never used Tailwind and I had similarly strong feelings about CSS in JS until I tried it.

# ¿ Aug 12, 2020 02:23

fsif: Jul 18, 2003

Protocol7 posted:

Well I mean there are Flexbox and CSS grid utility classes in Tailwind so you do kinda have to understand all that to use the classes right.

Oh I figured there must have also been some bootstrappy grid included in there, too. If not, then I'm even more confused why they brought it up.

# ¿ Aug 12, 2020 03:27

fsif: Jul 18, 2003

A pretty long thread about some dysfunction at Gatsby:

https://twitter.com/tesseralis/status/1293649007739191296?s=21

Obviously nothing as bad as what goes on at, like, Facebook, but noteworthy that the build process for their own site could take 30 minutes (nevermind the allegedly toxic culture or completely inept diversity outreach). Might be the push I need to make my next site in 11ty.

# ¿ Aug 13, 2020 04:29

fsif: Jul 18, 2003

Yeah lots of teams have been destroyed.

https://twitter.com/zkat__/status/1293585676336693253?s=21

# ¿ Aug 13, 2020 15:23

fsif: Jul 18, 2003

Is there any way you could load most of the content within B and C but have the expensive elements (i.e., images) lazyload separately?

# ¿ Aug 14, 2020 19:26

fsif: Jul 18, 2003

Two always feels too tight and four feels way too long. Going to change the game entirely and use 3 from now on and make no one angry.

# ¿ Dec 19, 2020 04:53

fsif: Jul 18, 2003

Free Code Camp is excellent, but I did have friends go through it recently and felt like parts of the curriculum was either a bit dated or not particularly relevant to my day-to-day. Don't break your brain trying to master recursion in JavaScript or floats in CSS.

Once you have the foundations from FCC, I generally recommend consuming Wes Bos-related things, particularly his (free) JavaScript 30 class and the back catalog of his Syntax podcast. I think his teaching style is pretty universally liked, but there are thousands of other online video instructors you can also try to discover via YouTube, Udemy, Lynda, or more premium sites like Level Up Tutorials, Front End Masters, and egghead.

Finally, one of the bigger obstacles I encountered before I formally broke into the industry was trying to learn sone of the supporting technology. Learning "just" HTML, CSS, and JavaScript is probably inadequate for most jobs, unfortunately. Make sure to take some time to learn about terminal commands, Git, npm, bundlers, and at least a high level overview of a JS framework like React.

# ¿ Dec 28, 2020 15:49

fsif: Jul 18, 2003

If you want to learn a modern framework it's as good a project as any. That said, not sure Next.js makes a ton of sense for a simple single page app like that.

Do you know React already? Next is really a React framework; would make more sense IMO to focus on learning just React first. Look up the React docs and make a simple app using create-react-app.

# ¿ May 11, 2021 22:24

fsif: Jul 18, 2003

HaB posted:

I have been working in exclusively Tailwind for about 6 months now, and I have seen styles scroll off past my editor's word-wrap maybe twice.

I guess I have a hard time conceptually understanding how this can be done without having a ton bespoke @apply classes (which would kind of defeat Tailwind's purpose). For most container elements, I have three or four properties just for flexbox or grid, then a few for margin and padding and sometimes background color and drop shadow. Add in new properties for different breakpoints, and it seems like you'd hit like 15 utility classes in no time.

Maybe you just get used to the horizontal scanning, but doesn't it make PRs a nightmare? And what about debugging in inspector?

# ¿ May 12, 2021 15:18

fsif: Jul 18, 2003

So you know, I'm not a hot take artist when it comes to tech. If as many talented developers swear by something like Tailwind and are able to leverage it to be more productive, it obviously has a ton of merit. I've also never seriously attempted to use it in any serious project, so I trust you all when you say some of the things that appear wonky at first blush actually ends up feeling pretty natural.

HOWEVER�

HaB posted:

I guess it depends on your definition of a "ton" of bespoke classes. How many different containers do you really have? How many of them have classes in common?

On a medium size project, I'd estimate I have a few dozen containers. I don't know how you could get away with fewer unless you have a really simple design. They don't generally share a ton of the same properties consistently with one another, so I would say there are only a handful of shared classes among them.

prom candy posted:

Having to think of a name for this thing, open the other file, write it in, and write the classname back in the markup is so much slower and more disjointed than just doing <div className="flex items-center">

Agreed, but there are other libraries to scope your CSS. They also let you write normal CSS so there's no vendor lock-in. This isn't really a Tailwind-specific advantage.

quote:

I don't think this is fair at all. You pretty much need to be proficient with CSS to be proficient with Tailwind.

Yeah, I think the common misconception that Tailwind lets you avoid learning CSS is clearly bogus.

But just anecdotally (and I'll stress it's purely anecdotal), between speaking with colleagues and following dev hot takes on Twitter, I've sort of recognized a pattern in Tailwind backers versus detractors: the former have generally loathed CSS, have stronger CS backgrounds, and weaker design backgrounds. Reverse is true for the detractors.

I don't know why that is exactly, but I'm a designer turned developer (with no formal CS schooling) and it does feel like Tailwind is purporting to solve problems I don't really have. Could be an incredible amount of arrogance on the design-y devs' parts, but you know, that's kind of how I've seen this debate unfold, heh.

# ¿ May 12, 2021 19:22

fsif: Jul 18, 2003

prom candy posted:

Anecdotally I don't fit into this at all. My educational background is in advertising. I love CSS. I'm not a good designer but my favourite part about this job is working with one to build cool user experiences. Tailwind has let me build interfaces way more rapidly, and having used it on some long running projects now (over 2 years) I haven't had any issues with maintainability. It just fits a specific workflow that I've come to enjoy from using React for the past 5+ years where everything is contained in components. When I was using BEM, I had to have the React component open in one window and the CSS file open in the other. When I was using CSS-in-JS I would have to constantly scroll up and down in the same file between the markup and the styles. With Tailwind I finally have markup/style harmony, which means I can just think and write.

Thanks, that's an interesting perspective. I'd agree that there are times when scrolling up and down in a file with a CSS-in-JS approach can be a pain point. When that does occur, my fix has been to either refactor or have the file twice in two panes side-by-side, but it's still not perfect.

What do you do when your designers deviate from the design system? E.g., they want a margin of precisely 0.35 em, but it falls between two values in your m- classes?

# ¿ May 12, 2021 19:56

fsif: Jul 18, 2003

Yeah. Assuming it's a simple vector image (e.g., logo, icon, etc) the file size will be smaller.

If you're not trying to style it via CSS, you don't have to online the graphic; you can just link it with an img src like you would a PNG.

# ¿ May 13, 2021 01:46

fsif: Jul 18, 2003

I loved JSX from the jump. What I hated most was all the class boilerplate and welp.

# ¿ May 20, 2021 19:13

fsif: Jul 18, 2003

Felt like the discussion was all civil and unusually informative, especially considering what a powder keg Tailwind discussion is on most corners of the Internet.

# ¿ May 22, 2021 17:44

fsif: Jul 18, 2003

prom candy posted:

Might not be the best method but after I learned the basic syntax I just started using it and then googling stuff or posting here when I ran into "how do I..." type questions.

Yeah, I'm still new to TS but I very quickly got diminishing returns from the online courses I watched once I had the basics down. Too many of them are structured like a dry run through the docs and don't meaningfully demonstrate how you'd integrate TS into a normal rear end project.

# ¿ Jun 7, 2021 02:34

fsif: Jul 18, 2003

Sounds like the analytics thing was done more out of personal preference than best practice, but there are pretty good use cases where you'd want the screen width or current route in a global state.

# ¿ Jun 19, 2021 16:53

fsif: Jul 18, 2003

Yeah I don�t know what to tell you man. You installed a standard eslint config but didn�t like how passive it was in code checking, so you installed an extraordinarily opinionated config and now you don�t like how persnickety it is. Maybe create your own Goldilocks config?

# ¿ Jul 11, 2021 12:52

fsif: Jul 18, 2003

Ah, missed that bit at the end where you theorized that WebStorm overrides errors in the build by default. I've never used WebStorm, but are you sure that you or someone on your team didn't edit your last project's .eslintrc or build config to do that? That's not the type of behavior typically governed by an IDE and it'd be incredibly strange (and likely problematic) for it to do so, especially by default.

# ¿ Jul 11, 2021 18:05

fsif: Jul 18, 2003

neurotech posted:

I'm looking for suggestions on ways to keep on top of what's happening in the front end space in terms of new tools, industry news, interesting articles, that sort of thing.

How do you all keep your finger on the pulse of this stuff?

I mostly just listen to podcasts. Syntax.fm and Shop Talk in particular.

# ¿ Oct 16, 2021 03:54

fsif: Jul 18, 2003

Unless you have machinations to switch over to the dev side completely, I'd probably focus more on the HTML/CSS and just keep your JavaScript learnings to the most foundational level. Don't think it'd be worth investing time in learning React or Vue as a UX/UI designer.

If you really want a leg up, I'd suggest you focus on mastering accessibility rules, especially as it pertains to HTML. Most devs I've worked with have never touched a screen reader.

# ¿ Nov 13, 2021 13:14

fsif: Jul 18, 2003

prom candy posted:

I've been building SPAs for about 5-6 years now and the idea of going back to the good old days is really tantalizing. Like you said the pain points won't be evident until you actually build something big with it but having a framework that's driven by basic web concepts coupled with modern tooling and being able to do modern UI sounds really nice.

What I really want to know is if it can actually power a monolith. It seems easy enough to install an ORM and use it with your database, but I wonder what it looks like to build a large full stack application on it.

Curious about the pain points you've encountered. Mostly just related to the build process, I reckon?

When our agency switched from PHP monoliths to Next.js with a headless CMS, biggest pain points have been explaining to the client why they need to wait two minutes to see their changes on the site and why they have two different hosting bills.

# ¿ Jan 20, 2022 01:09

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.

# ¿ May 21, 2022 15:31

fsif: Jul 18, 2003

I guess it's like yesterday I had to make a grid that sort of matched the existing 12 columns through the rest of the site, but needed the ability for an image to bleed to the edge of the viewport on one side. It's easy with the utility classes to make a 'grid-template-columns: 1fr repeat(12, 110px) 1fr' on a large desktop that shrinks to '56px repeat(12, 1fr) 56px' on desktops below 1600px, and then gets totally switched up to a stacked four column design on tablets and below? I'd be able to write something like 'width: calc(100% + 16px)' and 'transform: translateX(-16px)' okay? Or is the thought that those are really edge case-y type things and I would write those without the utility classes?

Genuinely curious. I don't mean it as a gotcha.

# ¿ May 21, 2022 15:45

fsif: Jul 18, 2003

prom candy posted:

Yeah you can do this with tailwind using the arbitrary values thing. Some of that stuff would be covered by built-in classes. Occasionally if I'm making something really nifty like that I'll extract a class using tailwind's @apply syntax and then regular CSS for the special stuff. Tailwind is utility-first, not utility-only. The thing I like is that I don't need to come up with a name for every time I need a display: flex; align-items: center; type container. But you can absolutely jump back to normal CSS if you're doing a really complex grid layout or whatever, or you can just do it in the markup.

Yeah I remember seeing the @apply thing last time this came up, but the arbitrary values functionality is news to me.

I guess I really need to try it in a personal project or something. I admit I feel compelled to poo poo all over it because I HATE Bootstrap and Foundation utility classes but you know, there�s no one I know or ITT that has used it and done anything but gush over it.

# ¿ May 22, 2022 02:11

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 09:43

fsif: Jul 18, 2003

So say I have a pretty simple React app�one where you go through a short survey and are given a recommendation at the end. I don't care about SEO or things being server side generated or really routing.

If I know this app is going to be accessed almost exclusively on mobile devices with varying connection speeds, is there still a benefit in using Next.js over just a simple Vite/React build? Like, if the code is statically or server side generated, will it load more quickly or be more performant than just loading everything on the client? Or would the differences be largely negligible? Or any other considerations I'd need to account for?

# ¿ May 29, 2022 18:06

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

«‹›2 »