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

«‹›236 »

PIZZA.BAT: Nov 12, 2016

Well I've got my domain pointing at a react server I have running on my laptop. Hard part's over! I'll probably be back to ask all sorts of stupid questions over the next few months. Thanks, goons

# ? Aug 28, 2019 12:48

Adbot: ADBOT LOVES YOU

# ? Jun 11, 2024 00:59

The Fool: Oct 16, 2003

Rex-Goliath posted:

Well I've got my domain pointing at a react server I have running on my laptop. Hard part's over! I'll probably be back to ask all sorts of stupid questions over the next few months. Thanks, goons

This is so very very wrong and hurts me deep inside

# ? Aug 28, 2019 15:47

PIZZA.BAT: Nov 12, 2016

What the running on my laptop part or the hard part's over part? Those were intentional :cheeky:

# ? Aug 28, 2019 15:55

The Fool: Oct 16, 2003

The running on your laptop part

# ? Aug 28, 2019 16:01

PIZZA.BAT: Nov 12, 2016

Yeah I travel for work so it's all I have at the moment. I just wanted to see it working for the gratification. I plan on building an actual server when I finally get home next month.

# ? Aug 28, 2019 16:06

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Rex-Goliath posted:

Yeah I travel for work so it's all I have at the moment. I just wanted to see it working for the gratification. I plan on building an actual server when I finally get home next month.

Mostly no one does this anymore.

If you're wanting to serve it so other people can use it, you should use one of the many free or very cheap services to host it for you.

I see from your previous posts that you have some sort of backend to your app, so maybe a VPS would work well for you. I like Digital Ocean where you can get a server for $5/month. There's also things like EC2, or Azure, or whatever the hell Google is doing nowadays.

# ? Aug 28, 2019 16:38

The Fool: Oct 16, 2003

Also both AWS and Azure have significant free trial programs.

# ? Aug 28, 2019 16:43

PIZZA.BAT: Nov 12, 2016

Oh yeah I know those exist I more want to do it as a hobby. I guess doing it on AWS would be good experience as well though. I just want to physically own the machine, I guess. :shrug:

# ? Aug 28, 2019 17:08

bobua: Mar 23, 2003; I'd trade it all for just a little more.

New to react. I'm working with a third party's scheduler\calendar control in react.

They provide a way to use a custom template, but I can't figure out how to get the data there that I want.

basically, at the top level I have an array, then the third party component -> their template. This particular template is just the header for the day(simple cell displaying the date) and only receives 1 prop, the date. I want to customize it to show the count from my array also. I'm guessing I could tag and find it with jquery, or make an api call back to the server to get the data from there, but that all sounds very wrong. What am I looking for here?

# ? Aug 28, 2019 17:59

The Fool: Oct 16, 2003

Don't try to modify react dom with jquery.

What is the component you are using?

# ? Aug 28, 2019 18:02

bobua: Mar 23, 2003; I'd trade it all for just a little more.

The Fool posted:

Don't try to modify react dom with jquery.

What is the component you are using?

devextreme Scheduler, datecelltemplate specifically

https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Configuration/#dateCellTemplate

# ? Aug 28, 2019 18:09

The Fool: Oct 16, 2003

From what I understand of the documentation, dateCellTemplate is just a function that returns whatever markup you want.

You specify your function as a prop to the View component, then you can return whatever data you want.

Here is a codesandbox: https://codesandbox.io/s/customize-individual-views-devextreme-scheduler-rg7dd?fontsize=14

modified from this demo: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomizeIndividualViews/React/Light/

relevant changes:

code:

const fartCounter = [1, 2, 4, 5, 6, 24];

const DateCellTemplate = function(cellData) {
  console.log(cellData);
  return (
    <React.Fragment>
      <div className={"name"}>{dayOfWeekNames[cellData.date.getDay()]}</div>
      <div className={"number"}>{cellData.date.getDate()}</div>
      <div style={{ fontWeight: "bold" }} className={"number"}>
        {fartCounter[cellData.date.getDay()]}
      </div>
    </React.Fragment>
  );
};

# ? Aug 28, 2019 19:15

bobua: Mar 23, 2003; I'd trade it all for just a little more.

The Fool posted:

From what I understand of the documentation, dateCellTemplate is just a function that returns whatever markup you want.

You specify your function as a prop to the View component, then you can return whatever data you want.

Here is a codesandbox: https://codesandbox.io/s/customize-individual-views-devextreme-scheduler-rg7dd?fontsize=14

modified from this demo: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomizeIndividualViews/React/Light/

relevant changes:

My problem is pull date from elsewhere in the app. Like, for example, let's say I wanted to show the total number of appointments on that day in the header.

# ? Aug 28, 2019 19:34

The Fool: Oct 16, 2003

bobua posted:

My problem is pull date from elsewhere in the app. Like, for example, let's say I wanted to show the total number of appointments on that day in the header.

That is going to depend a lot on how your app is structured, there a few options:

React Context: https://reactjs.org/docs/context.html
Redux: https://react-redux.js.org/
just do an import: import { data } from './data.js'

# ? Aug 28, 2019 19:45

bobua: Mar 23, 2003; I'd trade it all for just a little more.

The Fool posted:

That is going to depend a lot on how your app is structured, there a few options:

React Context: https://reactjs.org/docs/context.html
Redux: https://react-redux.js.org/
just do an import: import { data } from './data.js'

Okay, an import won't work I assume because it isn't just fixed data.

I was avoiding redux\context because this is my first react journey and everything just starts with 'learn react before you add redux, you can probably do what you want without it.'

Is this literally a time when something like redux\context are necessary, barring actually modifying the third party library?

# ? Aug 28, 2019 20:37

Doh004: Apr 22, 2007; Mmmmm Donuts...

Rex-Goliath posted:

Oh yeah I know those exist I more want to do it as a hobby. I guess doing it on AWS would be good experience as well though. I just want to physically own the machine, I guess.

I too hung on quite long about having dedicated machines because it's how I did things damnit. But then I tried out running my wife's blog on EC2 and my crappy site on S3 and Cloudfront: https://www.bayphillips.com/blog/goodbye-to-dedicated-server-hosting/

It's exactly what I need.

# ? Aug 28, 2019 20:55

The Fool: Oct 16, 2003

bobua posted:

Okay, an import won't work I assume because it isn't just fixed data.

I was avoiding redux\context because this is my first react journey and everything just starts with 'learn react before you add redux, you can probably do what you want without it.'

Is this literally a time when something like redux\context are necessary, barring actually modifying the third party library?

Where is your scheduler component located? It may be possible to put your datecelltemplate function in that parent component, then your array can be a prop of the parent.

e:

code:

class Parent extends React.Component {
  DateCellTemplate = (cellData) =>  {
    return (
      <React.Fragment>
        <div className={"name"}>{dayOfWeekNames[cellData.date.getDay()]}</div>
        <div className={"number"}>{cellData.date.getDate()}</div>
        <div style={{ fontWeight: "bold" }} className={"number"}>
          {this.props.fartCounter[cellData.date.getDay()]}
        </div>
      </React.Fragment>
    );
  };

  render() {
    return (
      <Scheduler
        dataSource={data}
        defaultCurrentView={"week"}
        showAllDayPanel={false}
        defaultCurrentDate={currentDate}
        height={600}
        startDayHour={7}
        endDayHour={23}
      >
        <View
          type={"week"}
          groups={priorityGroups}
          startDayHour={9}
          endDayHour={18}
          dateCellRender={this.DateCellTemplate}
        />
      </Scheduler>
    );
  }
}

The Fool fucked around with this message at 21:28 on Aug 28, 2019

# ? Aug 28, 2019 21:07

bobua: Mar 23, 2003; I'd trade it all for just a little more.

I appreciate your help, but I am still missing something...

code:

class Calendar extends React.Component {

    constructor(props) {
        super(props);
        this.state = { selectedDate: props.SelectedDate };

        //this.DateCellTemplate = this.DateCellTemplate.bind(this);
    }

    DateCellTemplate = (cellData) => {
        const test = this.state.selectedDate;
        console.log(this.props.SelectedDate);
    return (
      <React.Fragment>
        <div>
                <div>
                   {cellData.data.text}
                </div>
                <div >
                    {test}
                </div>
            </div>
      </React.Fragment>
    );
  };

The template is rendered 7 times since I'm in week view, and the console shows undefined(7 times) for the state and props variable shown, with or without the bind commented out.

# ? Aug 28, 2019 21:54

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Nested component code. That ain't good. Can you post your full component, including where and how the DateCellTemplate is getting used (probably some sort of map function)?

Also use hooks. Class components suck!!!!!!!!!!!

# ? Aug 28, 2019 22:08

bobua: Mar 23, 2003; I'd trade it all for just a little more.

Ruggan posted:

Nested component code. That ain't good. Can you post your full component, including where and how the DateCellTemplate is getting used (probably some sort of map function)?

Also use hooks. Class components suck!!!!!!!!!!!

I'm just copying and pasting for tests, this is all getting deleted once I understand it.

The rest of the component is pretty much just this

code:

    render() {
        return (
                <Scheduler
                    dataSource={data}
                    views={views}
                    dataCellComponent={DataCell}
                    dateCellComponent={this.DateCellTemplate}                                       
                    defaultCurrentView={'Week'}
                    defaultCurrentDate={this.props.DefaultDate}                          
                    height={600}
                    startDayHour={7}
                    endDayHour={18}
                    
                >                                  
                    </Scheduler>
        );        
            }
        }
        
export default Calendar;

# ? Aug 28, 2019 22:15

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

It's still pretty unclear where a bunch of things are coming from (dataCell, data, views) and whatever Scheduler may be doing with the DateCellTemplate that you passed.

You should probably rip DateCellTemplate out into its own functional component and take only `text` and `test` as props. You can then create an instance of DateCellTemplate in your component and pass it the appropriate data.

If you can post a more full example (or a codesandbox) including the other child components you're referencing, I can probably help more, but as it currently stands the code you posted has way too many unknowns to help you much further.

# ? Aug 28, 2019 22:27

The Fool: Oct 16, 2003

bobua posted:

The template is rendered 7 times since I'm in week view, and the console shows undefined(7 times) for the state and props variable shown, with or without the bind commented out.

Don't use bind with arrow functions.

bobua posted:

I'm just copying and pasting for tests, this is all getting deleted once I understand it.

The rest of the component is pretty much just this

First issue that jumps out at me, that scheduler prop should be: dateCellRender={this.DateCellTemplate}

Ruggan posted:

You should probably rip DateCellTemplate out into its own functional component and take only `text` and `test` as props. You can then create an instance of DateCellTemplate in your component and pass it the appropriate data.

DateCellTemplate isn't a component, it's a function that returns markup and is registered as a callback in the scheduler component. The schedule component calls it when rendering each days cell.

bobua, I linked a working codesandbox earlier, maybe fork it and tweak what you need to get your own stuff to work? Here's the link again: https://codesandbox.io/embed/customize-individual-views-devextreme-scheduler-rg7dd

Ruggan posted:

Nested component code. That ain't good. Can you post your full component, including where and how the DateCellTemplate is getting used (probably some sort of map function)?

Also use hooks. Class components suck!!!!!!!!!!!

I agree, but the examples I pulled from devExtreme are all class based, so I just stayed with it.

The Fool fucked around with this message at 22:33 on Aug 28, 2019

# ? Aug 28, 2019 22:27

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

The Fool posted:

DateCellTemplate isn't a component, it's a function that returns markup and is registered as a callback in the scheduler component.

It's basically a function component, though, isn't it? I mean sure, technically it's a callback function but it doesn't do anything to the parent. You could rewrite it as this:

code:

// Function component
const DateCellTemplate = (text, selectedDate) => (
    <>
        <div>
            <div>{text}</div>
            <div>{selectedDate}</div>
        </div>
    </>
);

// Existing class component
class Calendar extends React.Component {

    //code...

    dct = (cellData) => <DateCellTemplate text={cellData.data.text} selectedDate={this.props.SelectedDate} />

    //code...
}

Very possible I'm missing something - let me know if I am.

# ? Aug 28, 2019 22:45

The Fool: Oct 16, 2003

Ruggan posted:

Very possible I'm missing something - let me know if I am.

It's passed as a prop in the scheduler component, ie:

code:

  render() {
    return (
      <Scheduler
        dataSource={data}
        defaultCurrentView={"week"}
        showAllDayPanel={false}
        defaultCurrentDate={currentDate}
        height={600}
        startDayHour={7}
        endDayHour={23}
        dateCellRender={this.DateCellTemplate}
      />
    );
  }

So we don't have any control over what parameters are passed.

# ? Aug 28, 2019 22:55

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

But you know what IS passed. And you know it needs to return a node. So you build a function component that takes those inputs and returns a node.

# ? Aug 28, 2019 23:36

bobua: Mar 23, 2003; I'd trade it all for just a little more.

Where in the world did you find datecellRender instead of datecellcomponent? Google got almost nada, except this https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomizeIndividualViews/React/SoftBlue/

I can't find anything on what the difference is

also... I was using props.selecteddate and state.selecteddate to test. I had stopped passing them down from the parent so they really were undefined. It's working now!

# ? Aug 28, 2019 23:42

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

If the child component is expecting to call dateCellRender as a function you can't just pass in a function component: https://codesandbox.io/s/sad-wilbur-qq8ju

You can build a little inline function that returns your function component and maps the arguments to props though: https://codesandbox.io/s/upbeat-khayyam-lezfi

dataCellRender is basically a render prop (as far as I can tell from skimming this discussion)

# ? Aug 29, 2019 00:15

my bony fealty: Oct 1, 2008

prom candy posted:

Svelte is really interesting but there can't be much of a job market or community for it yet, can there?

definitely not, if someone's looking to get a job then React is the way to go. Vue is pretty popular in some places too so that could be an option.

Svelte is probably too ahead of its time and entering at exactly the wrong time to gain any share of the front-end market tbh. that and their marketing has been weirdly hostile. like ok sure vIrTuAl DoM iS pUrE oVeRhEaD ok you're much smarter than me I believe you...now give me an actual reason to use your framework?

the tutorial they put out with v3 is a good start, it's beginner-friendly. I havent made anything more than tiny toy projects with Svelte but at some point I'll try something more complex.

# ? Aug 29, 2019 00:17

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

prom candy posted:

You can build a little inline function that returns your function component and maps the arguments to props though: https://codesandbox.io/s/upbeat-khayyam-lezfi

Ah got it. That distinction makes sense to me. I was calling those two things the same thing. Thanks for clarifying.

# ? Aug 29, 2019 00:31

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

This new Angular job I was applying for seemed nice and promising until I got a technical test in my email with a loving link to Codility so gently caress that noise.

# ? Aug 30, 2019 19:14

Social Animal: Nov 1, 2005

I�ve never had to mess with Codility before. So do most companies send home whiteboard bullshit now or is it still majority during the actual interview?

I finally decided to get a job and I�m just dreading this annoying part. I kind of miss interviews outside of tech where you just kind of talked about yourself and discussed poo poo lol

# ? Aug 30, 2019 23:07

porksmash: Sep 30, 2008

My company does not do online code tests, but we're also not a new-agey internet based service company.

# ? Aug 31, 2019 00:09

Volguus: Mar 3, 2009

Ape Fist posted:

This new Angular job I was applying for seemed nice and promising until I got a technical test in my email with a loving link to Codility so gently caress that noise.

So we can say that the test accomplished its purpose.

# ? Aug 31, 2019 01:09

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.

Volguus posted:

So we can say that the test accomplished its purpose.

Uhh if you only want to hire front end javascript programmers who cheat on their interview, codility is a great resource.

# ? Aug 31, 2019 05:32

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Volguus posted:

So we can say that the test accomplished its purpose.

As above said, you can just cheat the gently caress out of it. Also, it's barely representative of actual day to day rigmarole of FED on 2019, and by barely representative I mean literally not representative at all.

# ? Aug 31, 2019 06:10

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

I don't interview a lot of people but when I do I get them to run me through code they've written and explain it to me (requirements, decisions they made, challenges, things they'd do differently, etc) and then I just chat with them about coding and the industry for an hour or so. So far out of 5 or 6 people I never hired anyone who was significantly worse at coding than I expected. Also selected for people I enjoyed talking to.

# ? Aug 31, 2019 12:16

Queen Victorian: Feb 21, 2018

Ruggan posted:

I had a few hours to play with this. Took me a little while to remember exactly how D3 worked, but this ended up being pretty easy to do.

https://codesandbox.io/s/romantic-euclid-g8jt5

Basically exactly as you described - wrap the d3 code in useEffect, get a ref to the svg with useRef, and write your D3 as you would in any non-React situation.

A bit late, but nice! Don't forget to try out an arc transition (because now with useEffect() you can without having to deal with some third party animation/transition library/otherwise trick the virtual DOM). Mike Bostock has a nice example on arc transitioning here, with some additional useful links: http://bl.ocks.org/mbostock/5100636.

# ? Aug 31, 2019 16:05

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

Getting this error from trying to build an ejected create react app

code:

ERROR in ./node_modules/react-toastify/dist/ReactToastify.min.css (./node_modules/css-loader/dist/cjs.js!./node_modules/file-loader/dist/cjs.js??ref--5-oneOf-7!./node_modules/react-toastify/dist/ReactToastify.min.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | module.exports = __webpack_public_path__ + "static/media/ReactToastify.min.2f140fbb.css";

The internet suggests it's a webpack config thing but doesn't have specifics. Short of posting the massive webpack config, any suggestions on things I could look at?

Edit: I know ejecting is frowned upon but this is a porting/upgrading attempt and there are some build configs we need to carry over

Edit 2: Went digging and found that some files are doing poo poo like import 'style-loader!css-loader!rc-slider/assets/index.css';

dupersaurus fucked around with this message at 15:42 on Sep 3, 2019

# ? Sep 3, 2019 15:10

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

Now I'm stranded on upgrading webpack 2 to 4. How the modules are being put together has changed -- given the same config it outputs two different files -- which breaks how we've been using the output, and I can't find any information about how to fix it.

The basic idea:

code:

webpack.config.js

{
	entry: {
		Entry1: './src/entry1.js',
		Entry2: './src/entry2.js',
		...
	},
	output: {
		filename: "prefix-[name].js",
	        library: "[name]",
          	libraryTarget: "var"
	}
}

code:

entry1.js

import A from 'foo';
import B from 'bar';
import {setC} from 'baz';

export {
	A,
	B,
	setC
}

code:

notPrettyButRequiredWrapper.js

<html>
<head>
<script src='shared.js' />
<script src='Entry1.js' />

<script>
	Entry1.C();
	mountEntry1ReactComponent();
</script>
</head>
</html>

The idea being that Entry1 is a JS object that we can call. In webpack 2 it comes out as we want. In webpack 4, Entry1 is set, but what it's set to...

Using the shown webpack config, Entry1 is undefined
Using the ejected create-react-app config with the shown config inserted, Entry1 is the number 2

Searching the web I've come across the umd fix

code:

libraryTarget: 'umd',
umdNamedDefine: true,
globalObject: "typeof self !== 'undefined' ? self : this"

but that throws some new errors and doesn't even define Entry1

Anyone have any insight?

# ? Sep 4, 2019 20:49

Adbot: ADBOT LOVES YOU

# ? Jun 11, 2024 00:59

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

I ported my ejected app back into a fresh CRA v3 install because I figured that would be easier than trying to upgrade webpack myself. I'm not going to eject again (craco lets you override configs without ejecting)

Basically I think I made a fresh CRA app and then moved my src folder in, and then tinkered with it until it worked

# ? Sep 5, 2019 04:36

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

«‹›236 »