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 »

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

HaB posted:

I hate to be that guy but - isn't the correct module name "Vue" not "vue"?

Nope.

# ? Mar 17, 2020 08:11

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 18:53

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

Anyone else having issues with babel? Like installing stuff from it? We're getting errors about stuff about proposal-numeric-separator and available-plugins.js. I see there was a change to 7.9.0 a couple of hours ago.

# ? Mar 20, 2020 18:29

Ola: Jul 19, 2004

The Merkinman posted:

Anyone else having issues with babel? Like installing stuff from it? We're getting errors about stuff about proposal-numeric-separator and available-plugins.js. I see there was a change to 7.9.0 a couple of hours ago.

I noticed the vulnerability number ticking upwards the past week, I think the current situation has made some maintainers update the warnings. Perhaps someone somewhere in the chain has eagerly updated their dependencies and broken something.

I've made a pandemic resolution to cut at least two major dependencies from our codebase before I'm back at work.

# ? Mar 20, 2020 18:36

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 as a follow up to my original issue, even though I'm using Angular, it's bad for React too

# ? Mar 20, 2020 19:31

uncle blog: Nov 18, 2012

This might not be the best place to ask this, but I'ma try:
Is there a web based service that provides custom form creation where forms can be sent to selected user daily for reporting. With a visual interface to display/sort/whatever the data from the reports. With user authentication. Does something like that exist? Preferably easy and cheap?

# ? Mar 24, 2020 13:04

go play outside Skyler: Nov 7, 2005

uncle blog posted:

This might not be the best place to ask this, but I'ma try:
Is there a web based service that provides custom form creation where forms can be sent to selected user daily for reporting. With a visual interface to display/sort/whatever the data from the reports. With user authentication. Does something like that exist? Preferably easy and cheap?

Google Forms maybe? Never used it a form-maker but I've filled out plenty.

# ? Mar 24, 2020 13:11

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

uncle blog posted:

This might not be the best place to ask this, but I'ma try:
Is there a web based service that provides custom form creation where forms can be sent to selected user daily for reporting. With a visual interface to display/sort/whatever the data from the reports. With user authentication. Does something like that exist? Preferably easy and cheap?

I can't speak to the authentication side of things, but I've recently been impressed with airtable.com for filling in the missing quality of life features that Google Sheets lacks.

# ? Mar 24, 2020 13:43

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

go play outside Skyler posted:

Google Forms maybe? Never used it a form-maker but I've filled out plenty.

Yeah, it's good for that. We used it for our wedding RSVPs and ended up with a nice spreadsheet we didn't have to do data entry on ourselves

# ? Mar 24, 2020 15:01

uncle blog: Nov 18, 2012

In a React app, what's the best way to play css animations in a sequence? To have one start as the first one finishes, like they're queued up.

# ? Apr 2, 2020 18:37

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

uncle blog posted:

In a React app, what's the best way to play css animations in a sequence? To have one start as the first one finishes, like they're queued up.

Use state and some setTimeouts to change the classname on the element. You'll have to match the timer in the setTimeout to your animation's duration.

# ? Apr 3, 2020 05:06

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

uncle blog posted:

In a React app, what's the best way to play css animations in a sequence? To have one start as the first one finishes, like they're queued up.

CSS animation? You can have quite complicated animations that appear "chained" if you use keyframes and/or the animation-delay property. If you need more precise JS based control, try GreenSock.

Anony Mouse fucked around with this message at 09:34 on Apr 3, 2020

# ? Apr 3, 2020 09:30

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

Anony Mouse posted:

CSS animation? You can have quite complicated animations that appear "chained" if you use keyframes and/or the animation-delay property. If you need more precise JS based control, try GreenSock.

Seconding CSS animation / keyframes.

# ? Apr 3, 2020 18:14

reversefungi: Nov 27, 2003; Master of the high hat!

Architecture/general design question: Let's say you have a filter menu component that only shows up on certain pages. And it's not consistent from page to page. Pages Foo and Bar could have slightly different options, and Page Bazz doesn't have a filter component at all.

Does it make more sense for each page-level component to tell the filter component what it wants display, what it wants hidden, and any other extra components that might be needed? Or is it better to have some sort of "config" file inside the filter button that decides what to render based on the page it's currently on?

# ? Apr 3, 2020 18:39

Cory Parsnipson: Nov 15, 2015

The Dark Wind posted:

Architecture/general design question: Let's say you have a filter menu component that only shows up on certain pages. And it's not consistent from page to page. Pages Foo and Bar could have slightly different options, and Page Bazz doesn't have a filter component at all.

Does it make more sense for each page-level component to tell the filter component what it wants display, what it wants hidden, and any other extra components that might be needed? Or is it better to have some sort of "config" file inside the filter button that decides what to render based on the page it's currently on?

Hmm I'd say you'd want the filter component to be as stateless as possible. So you would want the first option (each page tells the component what to do), presumably all dond through input params or props or something.

Then if you have an unwieldy number of pages that need unique settings, you can add a layer on top of the page level using your config file concept. I'm not sure what the best way to do that would be, maybe some sort of angular service/router add-on? Or global object or parent component in some other framework..

# ? Apr 3, 2020 19:54

MrMoo: Sep 14, 2000

Lumpy posted:

Seconding CSS animation / keyframes.

WebAnimations is actually designed for this, basically CPU governed GPU animation. A lot of Apple�s website uses this tech now. Tends to be smoother than pure CSS animation.

# ? Apr 3, 2020 22:00

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

MrMoo: Sep 14, 2000

Start looking at Widevine? :lol:

at the ask: I want a Netflix.

# ? Apr 3, 2020 22:31

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

MrMoo posted:

WebAnimations is actually designed for this, basically CPU governed GPU animation. A lot of Apple�s website uses this tech now. Tends to be smoother than pure CSS animation.

It doesn�t have the support yet to recommend it to single devs / small teams. If you don�t care about mobile, then fine, but my primary web surfing tool (the iPad Pro I�m typing this post on) doesn�t support it by default. If you can get by with the features that you can�t poly fill, I guess that�s cool too.

Lumpy fucked around with this message at 05:01 on Apr 4, 2020

# ? Apr 4, 2020 04:59

MrMoo: Sep 14, 2000

I�ve used it since 2014 when it was only a polyfill, and still works better than CSS animations. iOS includes native support according to the feature tests: and I highly doubt Apple would be using it so much if it were otherwise. What support are you looking for?

ha, did Apple just add support for it?

https://caniuse.com/#feat=web-animation

MrMoo fucked around with this message at 19:33 on Apr 4, 2020

# ? Apr 4, 2020 16:47

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

If I go to Mozilla�s webAnimations Demi, and another few demo sites, I get �no support �

# ? Apr 4, 2020 22:05

susan b buffering: Nov 14, 2016

WebAnimations were disabled on iOS by default until the most recent point release(13.4).

# ? Apr 4, 2020 22:43

uncle blog: Nov 18, 2012

Thanks for the animation tips! So, if I want a component to run an animation every time a button is clicked, do I need to give that component a class, and then remove it again when the animation is done? There is no better way to "trigger" the animation?

And the best way to remove it afterwards is with setTimeOut or onAnimationEnd?

# ? Apr 4, 2020 23:12

uncle blog: Nov 18, 2012

Don't worry, I also have this problem:

I have a file with a method to call an Airtable API and retrieve a string. In my React component I try to call it with an async await function. But no matter what I try, I either get an unresolved promise, or undefined returned. So I'm obviously doing something wrong, I just don't know what?

code:

// api.js
export const getName = async () => {
  await base("Main").find("rec2932095", function (err, record) {
    if (err) {
      console.error(err);
      return;
    }
    console.log("Retrieved", record.name);
    return record.name;
  });
};

// MyComponent.jsx
var name = "";
const init = async () => {
    name = await getName();
};
init();

useEffect(() => {
  if(name){
     setLocationName(name)
  }
}, [name]);

# ? Apr 6, 2020 10:37

Chas McGill: Oct 29, 2010; loves Fat Philippe

Try making the call in the useEffect.

# ? Apr 6, 2020 11:34

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

uncle blog posted:

Don't worry, I also have this problem:

I have a file with a method to call an Airtable API and retrieve a string. In my React component I try to call it with an async await function. But no matter what I try, I either get an unresolved promise, or undefined returned. So I'm obviously doing something wrong, I just don't know what

You�re not returning the result of the await call (line 2 of your api.js)

# ? Apr 6, 2020 14:47

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

Is airtable supposed to be using async? It looks like it's just using callbacks. I think you could still write api.js to give you a nice async wrapper around the airtable api but are you sure you're supposed to be await-ing the call to base?

# ? Apr 6, 2020 14: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!

Asking here because maybe a different set of eyes than The Web Design & Development Megathread:

Anyone have experience with Bit? I tried the Vue tutorial and in the end I don't think it works correctly. When viewing it on the website, I had to set engine to Vue (it was defaulted to React), but even then it looks like the styling didn't take effect.

Semi-Related, I just don't 100% "get" styled components. Should they be 100% self contained? Wouldn't that mean you're repeating the same code (for, say a site-wide treatment of ) over and over again?

# ? Apr 20, 2020 13:41

twig1919: Nov 1, 2011; I am an inconsiderate moron whose only method of discourse is idiotic personal attacks.

The Merkinman posted:

Asking here because maybe a different set of eyes than The Web Design & Development Megathread:

Anyone have experience with Bit? I tried the Vue tutorial and in the end I don't think it works correctly. When viewing it on the website, I had to set engine to Vue (it was defaulted to React), but even then it looks like the styling didn't take effect.

Semi-Related, I just don't 100% "get" styled components. Should they be 100% self contained? Wouldn't that mean you're repeating the same code (for, say a site-wide treatment of ) over and over again?

Honestly I don't like self styled components. As you said, they have alot of repeated style and scoping issues. Imagine having to change some color or size value in your site. .. The other issue is that if you ever want to outsource some css work, that person now has to know vue.js.

The upside is keeping your logic in one place. However, I think that you can get the same upside by keeping your css seperate and using a class based system like BEM.

# ? Apr 20, 2020 13:51

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

The Merkinman posted:

Semi-Related, I just don't 100% "get" styled components. Should they be 100% self contained? Wouldn't that mean you're repeating the same code (for, say a site-wide treatment of ) over and over again?

The React answer (I think) is that you should be componentizing the styling, so instead of having styled s everywhere, you've got a <StyledParagraph> that reduces down to a with that global style

# ? Apr 20, 2020 14:18

Summit: Mar 6, 2004; David wanted you to have this.

dupersaurus posted:

The React answer (I think) is that you should be componentizing the styling, so instead of having styled s everywhere, you've got a <StyledParagraph> that reduces down to a with that global style

Yup.

Site wide css is still good too. Just depends on your needs.

# ? Apr 20, 2020 15:10

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

dupersaurus posted:

The React answer (I think) is that you should be componentizing the styling, so instead of having styled s everywhere, you've got a <StyledParagraph> that reduces down to a with that global style

Yep. We have a Typography folder of components (LargeHeader, BodyCopy1, BodyCopy2, etc.) that the design team specced in the style guide, and we built. If you use copy at all in the app, you use one of these. This keeps type consistent all over the app and removes "special snowflakes" that you have to manually hunt down if the design team updates the style guide.

# ? Apr 20, 2020 17:28

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 the info about Styled Components.. has anyone used Bit and had my same issue of it not working correctly?

# ? Apr 20, 2020 19:59

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

Utility-first CSS systems like Tailwind play really nice with React and any other component-based libraries. I've done vanilla CSS, filthy SASS nesting, strict BEM, CSS-in-JS, and Tailwind is my favourite. The workflow is so nice.

# ? Apr 21, 2020 04:58

uncle blog: Nov 18, 2012

I'm having trouble getting a transition to animate in React. This is the component:

code:

import React from "react";
import styled from "styled-components";

const Container = styled.button`
  cursor: pointer;
  border: 0;
  height: 26px;
  width: 40px;
  border-radius: 13px;
  transition: padding 0.5s ease-in-out, background-color 0.5s ease-in-out;
  padding: 2px 16px 2px 2px;
  background-color: #909090;

  &.active {
    padding: 2px 2px 2px 16px;
    background-color: #2a2859;
  }
`;

const InnerButton = styled.div`
  height: 22px;
  width: 22px;
  background-color: #fff;
  border-radius: 11px;
`;

const SlideButton = ({ active, onClick }) => {
  return (
    <Container className={active ? "active" : ""} onClick={onClick}>
      <InnerButton />
    </Container>
  );
};

export default SlideButton;

So I'm toggling the active prop from a parent component, and the class gets applied, but instead of animating it simply switches state. Is this because of some rerendering interrupting the animation?

# ? Apr 21, 2020 13:02

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

Is this component somehow getting unmounted and re-mounted instead of just re-rendered? Just as a test try moving "active" to local component state and change the onclick to toggle it. If the transition happens it means something in your parent is causing it to unmount and re-mount. If the transition still doesn't happen then you might have an issue with the transition itself.

You could also use react dev tools to manually change the value of the "active" prop i think, that might be an easier way to check.

# ? Apr 21, 2020 16:54

uncle blog: Nov 18, 2012

Thanks. It turned it happened because the containing component was declared within the parent component (which I guess is a bad way to do it?). Took it out and everything seemed to work.

# ? Apr 22, 2020 12:30

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

My boss wants to rope me into hiring a new react dev, anyone have anything in particular they like to screen with? If there's anything I'm worse with than being interviewed, it's interviewing.

# ? Apr 22, 2020 14:28

marumaru: May 20, 2013

dupersaurus posted:

My boss wants to rope me into hiring a new react dev, anyone have anything in particular they like to screen with? If there's anything I'm worse with than being interviewed, it's interviewing.

as an interviewee, just please don't ask a front-end developer to do hackerrank for 2 hours. just ask them to implement a mockup. use it to have them demonstrate key skills you want. don't make it too complicated (you don't want to spend 4h per candidate when checking the code)

# ? Apr 22, 2020 15:07

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

uncle blog posted:

Thanks. It turned it happened because the containing component was declared within the parent component (which I guess is a bad way to do it?). Took it out and everything seemed to work.

Oh like const SlideButton = yadda yadda was happening right inside your other component? Yeah, so then every time your parent component was rendering it would be making that function again. You can definitely declare child components in the same file as their parent (and I recommend it for small child components like the one you've got here), but you generally don't want to do it right inside the function.

# ? Apr 22, 2020 15:34

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 18:53

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

Inacio posted:

as an interviewee, just please don't ask a front-end developer to do hackerrank for 2 hours. just ask them to implement a mockup. use it to have them demonstrate key skills you want. don't make it too complicated (you don't want to spend 4h per candidate when checking the code)

Yeah there's no appetite for stuff like that. If we do a test I'd argue for giving them a small app that functions but violates good practices in places, and have them work/talk through identifying and fixing them.

# ? Apr 22, 2020 16:00

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

«‹›235 »