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 »

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.

Ape Fist posted:

For the first time in 11 years of doing this poo poo I have been asked to present my degree for a company I'm supposed to be starting with in like 2 weeks. My degree in 'Web Design and Development' where I learned HTML, CSS, ES3 and Jasc Paint Shop Pro. My degree whose paperwork I lost when I moved to the other side of the Atlantic. My degree from which the Uni I got it from won't release re-prints without being able to take a direct physical print of my ID, which is on the other side of the Atlantic. And my notice period ends in 3 business days at my current employer. Great.

It's a people check thing handled through a 3rd party so it may just be standard procedure for them to ask for it and I'll phone the company on Monday and tell them it's going to take months for me to get ahold of this stupid loving Definitely Relevant In 2019 paperwork for them. If they can't budge then I guess I'll have to retract my resignation at my current place which definitely doesn't look weird and also forgo the £12500 raise I was getting.

You sure they're asking about the degree itself or just proof that you have it? My uni lets me view my transcript online - I'd just print that along with the phone number they can use to confirm it. I also feel like most reasonable people would allow it if you can log on to the university's web site using your university email address and view an online copy of it, and they could just call the university to confirm - the actual physical degree is actually probably less useful than that verification imo.

# ? Oct 5, 2019 16:51

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 21:27

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

Ape Fist posted:

For the first time in 11 years of doing this poo poo I have been asked to present my degree for a company I'm supposed to be starting with in like 2 weeks. My degree in 'Web Design and Development' where I learned HTML, CSS, ES3 and Jasc Paint Shop Pro. My degree whose paperwork I lost when I moved to the other side of the Atlantic. My degree from which the Uni I got it from won't release re-prints without being able to take a direct physical print of my ID, which is on the other side of the Atlantic. And my notice period ends in 3 business days at my current employer. Great.

It's a people check thing handled through a 3rd party so it may just be standard procedure for them to ask for it and I'll phone the company on Monday and tell them it's going to take months for me to get ahold of this stupid loving Definitely Relevant In 2019 paperwork for them. If they can't budge then I guess I'll have to retract my resignation at my current place which definitely doesn't look weird and also forgo the £12500 raise I was getting.

Give them the phone number for the registrar office of your college. If that�s not good enough, then you don�t want to work there.

# ? Oct 5, 2019 23:36

galenanorth: May 19, 2016

I like Bootstrap 3's style a lot better than Bootstrap 4's style. I think that aspects like the button colors being darker and more saturated, the removal of the default padding during the change from thumbnails to cards, and the larger text almost make the UI have this FisherPrice kind of look associated with the update to Twitter's UI. For personal projects, I'll stick with Bootstrap 3 with a custom grid system for now, but I might switch to Bootstrap 4 in the future and undo the changes I don't like, or maybe I'll wait until Bootstrap 5 comes out.

# ? Oct 6, 2019 22:18

HaB: Jan 5, 2001; What are the odds?

Ape Fist posted:

For the first time in 11 years of doing this poo poo I have been asked to present my degree for a company I'm supposed to be starting with in like 2 weeks. My degree in 'Web Design and Development' where I learned HTML, CSS, ES3 and Jasc Paint Shop Pro. My degree whose paperwork I lost when I moved to the other side of the Atlantic. My degree from which the Uni I got it from won't release re-prints without being able to take a direct physical print of my ID, which is on the other side of the Atlantic. And my notice period ends in 3 business days at my current employer. Great.

It's a people check thing handled through a 3rd party so it may just be standard procedure for them to ask for it and I'll phone the company on Monday and tell them it's going to take months for me to get ahold of this stupid loving Definitely Relevant In 2019 paperwork for them. If they can't budge then I guess I'll have to retract my resignation at my current place which definitely doesn't look weird and also forgo the £12500 raise I was getting.

What on earth is this irrelevant, micro-manage-y poo poo?

Lumpy posted:

Give them the phone number for the registrar office of your college. If that’s not good enough, then you don’t want to work there.

What he said.

# ? Oct 7, 2019 12:43

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.

Update: The Company hiring me doesn't give a poo poo whether or not a 13 year-in-the-field Developer can provide a degree in HTML & CSS from the mid 00s and they're scolding the 3rd party people checking company for pressing for it.

# ? Oct 7, 2019 16:23

The Fool: Oct 16, 2003

That's the best possible reaction and I am seriously surprised it's happening that way.

# ? Oct 7, 2019 17:00

HaB: Jan 5, 2001; What are the odds?

Ape Fist posted:

Update: The Company hiring me doesn't give a poo poo whether or not a 13 year-in-the-field Developer can provide a degree in HTML & CSS from the mid 00s and they're scolding the 3rd party people checking company for pressing for it.

Oh good. Yeah that would have been some dumbass poo poo.

# ? Oct 7, 2019 17:54

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

Ape Fist posted:

Update: The Company hiring me doesn't give a poo poo whether or not a 13 year-in-the-field Developer can provide a degree in HTML & CSS from the mid 00s and they're scolding the 3rd party people checking company for pressing for it.

Just be sure to show them your finest geocities design, just in case

# ? Oct 7, 2019 17:55

HaB: Jan 5, 2001; What are the odds?

dupersaurus posted:

Just be sure to show them your finest geocities design, just in case

Or your BEST Myspace theme.

# ? Oct 7, 2019 18:02

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.

dupersaurus posted:

Just be sure to show them your finest geocities design, just in case

Excuse me I was an Angelfire man thanks.

# ? Oct 7, 2019 18:36

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

Ape Fist posted:

Excuse me I was an Angelfire man thanks.

Oh ho ho look at this fancy guy

# ? Oct 7, 2019 19:03

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

No wonder they wanted to double check his diploma. What a bold claim.

# ? Oct 7, 2019 19:11

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

Has anyone here used Tailwind or other utility first CSS frameworks (e.g. Bulma) with React? Maybe in conjunction with styled-components or emotion?

Considering moving the basics to Tailwind, extracting repetitive styling into components, and doing advanced stuff with styled-components. Everything in this website uses styled-components today which seems to have opened us up to a lot of inconsistent CSS across the site. I'd be excited to be forced toward a modicum of consistency (rather than the "9pt here, 10pt here, 11pt here" styles I come across). I'm mostly looking for someone to alleviate my concerns around the pitfalls of functional CSS that might come with using a utility-first framework.

# ? Oct 7, 2019 19:18

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

Ruggan posted:

Has anyone here used Tailwind or other utility first CSS frameworks (e.g. Bulma) with React? Maybe in conjunction with styled-components or emotion?

Considering moving the basics to Tailwind, extracting repetitive styling into components, and doing advanced stuff with styled-components. Everything in this website uses styled-components today which seems to have opened us up to a lot of inconsistent CSS across the site. I'd be excited to be forced toward a modicum of consistency (rather than the "9pt here, 10pt here, 11pt here" styles I come across). I'm mostly looking for someone to alleviate my concerns around the pitfalls of functional CSS that might come with using a utility-first framework.

I'm doing exactly that (added Tailwind to a styled-components project, for mostly the same reasons) and I'm very happy with it. Really the only problem I've had is I couldn't figure out a good way to share values between my tailwind.config.js file and my src/styles/theme.ts file so for now I just have all my colours and a few other things duplicated.

Tailwind is really nice for 90% of stuff, styled-components works well when you need to do more calculations or when you need something to be able to style its children. If you're going down that route I would recommend extracting React components though and not making custom CSS classes (I believe the Tailwind docs also recommend that now)

# ? Oct 7, 2019 19:35

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

Question about webpack 4 optimization:

We have a library at work for our UX component framework that gets imported by individual projects. There's an entry point for each kind of UX thing (buttons, icons, etc) that gets built into its own file. There's no webpack optimization applied so there is an extreme amount of duplication happening in each file. I need to preserve the structure of one-entry-one-file, but split out all of the commonality.

So if you naively turn on split chunks, then all of the duplication goes away. Except that there's a lot of components using other components, which means that a lot of the library gets optimized out of its entry file and into the shared bundle, which breaks the projects that try to import it via the entry.

Is it possible to get webpack to preserve the entry points? I feel like the answer is in cacheGroups but I can't figure out the way to do it.

# ? Oct 17, 2019 19:53

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

So I'm looking to deploy my personal site as a Gatsby site, using Nginx on Debian 9.

I want to set up a little bash script that will:

git pull && yarn build

and send a 200 or 400 status via a Github webhook when a PR is merged. And also log any errors to a text file. Can anyone point me to a helpful guide? I'm not so great with bash.

# ? Oct 20, 2019 06:11

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

Grump posted:

So I'm looking to deploy my personal site as a Gatsby site, using Nginx on Debian 9.

I want to set up a little bash script that will:

git pull && yarn build

and send a 200 or 400 status via a Github webhook when a PR is merged. And also log any errors to a text file. Can anyone point me to a helpful guide? I'm not so great with bash.

This is a different way of getting to where you're trying to go (I think), but you could use dokku.

Basically, when you push or merge, it automatically re-deploys your site.

It's been years since I've used it and I've not used it with modern stuff like Gatsby, but I bet it'd do what you want.

# ? Oct 20, 2019 17:58

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

Grump posted:

So I'm looking to deploy my personal site as a Gatsby site, using Nginx on Debian 9.

I want to set up a little bash script that will:

git pull && yarn build

and send a 200 or 400 status via a Github webhook when a PR is merged. And also log any errors to a text file. Can anyone point me to a helpful guide? I'm not so great with bash.

Go use a cloud-based CI like CircleCI or Travis to do be hooked up your Github repository, build and deploy your site to your host. They're super easy and free. I use Circle to deploy my Gatsby site: https://circleci.com/gh/BayPhillips/gatsby-blog

# ? Oct 22, 2019 20:34

The Fool: Oct 16, 2003

I do this with azure devops and have the site deployed to azure blob storage.

# ? Oct 22, 2019 20:45

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

Apollo / GraphQL wizard people: How do I fetch additional data with the same shape as a query I just ran? Use case is a chart that renders data based on some asset id:

code:

const My_QUERY = query {
  getThing(id: $myID) {
    values {
      timestamp
      value
    }
  }
}

And I have a chart component that does this:

JavaScript code:

const { data, loading, error } = useQuery(
    MY_QUERY,  
    {variables: { props.myId }
);
// component guts that render the return go here!

Now a user picks another Thing from a list to see another set of data on top of the existing chart; the same query, but with a different ID.

Has anyone done something similar, and what would an approach to this type of thing in GraphQL be? I know how I would do it with Redux and grabbing data with fetch, but I'm still a relative Apollo / GQL n00b.

# ? Oct 22, 2019 20:54

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Lumpy posted:

JavaScript code:

const { data, loading, error } = useQuery(
    MY_QUERY,  
    {variables: { props.myId }
);
// component guts that render the return go here!

Seeing useQuery() there, it looks like you're using @apollo/react-hooks. In that case, its useLazyQuery() method may be what you want instead:

JavaScript code:

const { myId } = props;
const [fetchChartData, { data, loading, error }] = useLazyQuery(MY_QUERY);

useEffect(() => {
  if (!myId) {
    return;
  }
  
  fetchChartData({variables: { id: myId });
}, [fetchChartData, myId]);

const onSelectChart => useCallback((newChartId) => {
  fetchChartData({variables: { id: newChartId });
}, [fetchChartData]);

# ? Oct 23, 2019 00:02

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

Oh cool I didn't know that existed, I've just been doing queries manually with useApolloClient() when I want to run them in response to user action but this looks even better.

# ? Oct 23, 2019 00:39

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

IAmKale posted:

Seeing useQuery() there, it looks like you're using @apollo/react-hooks. In that case, its useLazyQuery() method may be what you want instead:
JavaScript code:
const { myId } = props;
const [fetchChartData, { data, loading, error }] = useLazyQuery(MY_QUERY);

useEffect(() => {
  if (!myId) {
    return;
  }
  
  fetchChartData({variables: { id: myId });
}, [fetchChartData, myId]);

const onSelectChart => useCallback((newChartId) => {
  fetchChartData({variables: { id: newChartId });
}, [fetchChartData]);

Interesting. Seems I'll have to build out my own local store for previous query results though. This is similar to the supplied refecth you get with useQuery in that the `data` is wholesale replaced, yes? Was hoping to be very (very) lazy and have Apollo keep adding stuff to `data` for me.

# ? Oct 23, 2019 15:30

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

Apollo does have the fetchMore function that you can pull out of useQuery, usually I use it for pagination but I guess there's really nothing stopping you from using it to fetch with different variables.

# ? Oct 23, 2019 16:40

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Lumpy posted:

Interesting. Seems I'll have to build out my own local store for previous query results though. This is similar to the supplied refecth you get with useQuery in that the `data` is wholesale replaced, yes? Was hoping to be very (very) lazy and have Apollo keep adding stuff to `data` for me.

Not necessarily! I haven't delved too deeply into the inner workings of Apollo Client, but I have observed it automatically caching query results, and returning cached results when a subsequent query using the same parameters as an earlier one is triggered. Apollo seems to be keying the cache on those query params for a given query, and will not rehit the API but return the cached data instead! :science:

Since we're now talking about Apollo's caching, it's worth looking into how it lets you update cache after a mutation: https://www.apollographql.com/docs/react/api/react-hooks/#options-2. The lazy way is to specify a query to be run afterwards in the refetchQueries property of the options object you pass into useMutation(). Optionally you can manually update the cache using the update property as described here: https://www.apollographql.com/docs/react/v2.5/essentials/mutations/#updating-the-cache

IAmKale fucked around with this message at 16:48 on Oct 23, 2019

# ? Oct 23, 2019 16:41

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

Working away on a personal project in Vue and I've been using Vuetify as a component library. They have buttons that can be placed into a "loading" state using a prop which works well when you have one or two buttons: just bind the loading prop to a boolean data property that you toggle to true when loading something. But I have a page with a whole bunch of buttons, so I want to be able to uniquely toggle the loading prop for specific buttons without having to create a property for every single button (especially since the buttons aren't known until runtime - they're data driven).

Anyone ever tackled this? It seems like a common enough scenario but I'm too new to this front end stuff to be sure of what exactly I should Google.

Edit: I tried this, but it didn't work - I suspect because the indexes are not observable since they don't exist when the component is mounted.

code:

<v-btn :loading="loading[buttonId]" @click="() => doSomething(buttonId)">Some Button</v-btn>

...


data: () => ({
	loading: []
})

...

methods: {
	function doSomething(buttonId) {
		this.loading[buttonId] = true;
	}
}

putin is a cunt fucked around with this message at 02:50 on Nov 2, 2019

# ? Nov 2, 2019 02:41

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

You�re close. You can�t modify an array or its length directly. Use an array mutation method that Vue has a wrapper for (see 2nd link below) or one of the $set helpers.

Read these:

https://vuejs.org/2016/02/06/common-gotchas/ (see #2)

https://vuejs.org/v2/guide/list.html#Array-Change-Detection

# ? Nov 2, 2019 04:13

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

Ruggan posted:

You�re close. You can�t modify an array or its length directly. Use an array mutation method that Vue has a wrapper for (see 2nd link below) or one of the $set helpers.

Read these:

https://vuejs.org/2016/02/06/common-gotchas/ (see #2)

https://vuejs.org/v2/guide/list.html#Array-Change-Detection

Ah of course, thanks! I ended up doing roughly the following

code:

function doSomething(buttonId) {
    const toKeep = this.loading.filter(_ => !_.buttonId !== buttonId);
    this.loading = [...toKeep, { buttonId, loading: true }];
}

# ? Nov 4, 2019 06:00

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 really starting to get into the weeds with optimizing our webpack build, which at this point is mostly making and staring a lot of webpack-bundle-analyzer graphs looking for rogue KBs here and there (still need to push the gzip button, but that's above my pay grade). One thing that I'm noticing a lot is that, according to the graphs, the webpack output of individual files -- even after minimizing and uglifying -- are bigger than the source files, often buy quite a significant margin. On one hand I can understand that to a degree: JSX hides a lot of JS junk, and SCSS hides a lot of CSS junk. But it also seems like something wrong is going on; stuff like the parsed size of an SCSS file being reported as 23KB when the source is 5KB.

Is comparing sizes like that even valid? Or am I probably right that something wrong is going on?

code:

//webpack.config 

const devOpt = {
    minimize: false,
    namedModules: true,
    splitChunks: {
        chunks: 'all',
        name: 'shared'
    }
};

const prodOpt = {
    minimize: true,
    splitChunks: {
        chunks: 'initial',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
            scss: {
                test: /\.scss/,
                name: 'scss',
                priority: -5
            },
            uxlibrary: {
                test: /[\\/]uxlibrary[\\/]/,
                name: 'uxlibrary',
                priority: -10
            }
        }
    }
};

const webpackConfig = {
    entry: {
        <a bunch of entries>
    },
    output: {
        path: __dirname + "/build/",
        filename: isEnvDevelopment ? "[name].js" : '[name].[chunkhash].js',
        library: "[name]",
        libraryTarget: "var"
    },
    resolve: {
        modules: ['./node_modules'],
        extensions: moduleFileExtensions.map(ext => `.${ext}`),
        alias: {
            <a lot of aliases>

            // prevent a yarn link <uxlibrary> bundling its own versions
            'moment': `${__dirname}/node_modules/moment`,
            'moment-timezone': `${__dirname}/node_modules/moment-timezone`,
            'react': `${__dirname}/node_modules/react`,
            'react-dom': `${__dirname}/node_modules/react-dom`,
            'react-redux': `${__dirname}/node_modules/react-redux`,
            'lodash': `${__dirname}/node_modules/lodash`,
            'immutable': `${__dirname}/node_modules/immutable`,
            'mobx': `${__dirname}/node_modules/mobx`,
            'mobx-react': `${__dirname}/node_modules/mobx-react`
        },
        symlinks: false
    },
    devServer: {
        before: mockDataAPI,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET"
        }
    },
    externals: {
        "jquery": "jQuery"
    },
    module: {
        noParse: [/\.(test|spec)\.js/],
        rules: [
            {
                oneOf: [
                    {
                        test: /\.css$/,
                        exclude: /node_modules/,
                        use: ['style-loader', 'css-loader']
                    },
                    {
                        test: /\.scss$/,
                        loader: (function () {
                            if (isEnvProduction) {
                                return ['style-loader', 'css-loader', 'sass-loader']
                            }
                            return ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
                        })()
                    },
                    {
                        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                        loader: 'file-loader'
                    },
                    {
                        test: /\.(js|mjs|jsx)$/,
                        include: appSrc,
                        exclude: (path) => {
                            //lru_map is whitelisted, this can be improved, but its friday afternoon and devops wants the build to build.
                            if(path.indexOf('node_modules') > -1 && path.indexOf('lru_map') === -1){
                                return true;
                            } else {
                                return false;
                            }
                        },
                        loader: require.resolve('babel-loader'),
                        options: {
                            plugins: [
                                [
                                    require.resolve('babel-plugin-named-asset-import'),
                                    {
                                        loaderMap: {
                                            svg: {
                                                ReactComponent:
                                                     '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                                            },
                                        },
                                    },
                                ],
                                 'lodash'
                            ],
                            presets: [['env', { 'modules': false, 'targets': { 'node': 8 } }]],
                            cacheDirectory: true,
                            cacheCompression: isEnvProduction,
                            compact: isEnvProduction,
                        },
                    },
                    {
                        test: /\.(ts|tsx)$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: "ts-loader",
                                options: {
                                    onlyCompileBundledFiles: true
                                }
                            }
                        ]
                    },
                    {
                        test: /\.(js|mjs)$/,
                        exclude: /@babel(?:\/|\\{1,2})runtime/,
                        loader: require.resolve('babel-loader'),
                        options: {
                            cacheDirectory: true,
                            cacheCompression: isEnvProduction,
                            sourceMaps: true,
                        },
                    },
                    {
                        test: /\.png|gif|jp(e*)g/,
                        exclude: /node_modules/,
                        loader: 'url-loader?limit=24000'
                    },
                    {
                        test: /\.svg$/,
                        exclude: /node_modules/,
                        loader: 'svg-url-loader?limit=5000000'
                    },
                    {
                        test: /\.(test|spec)\./,
                        loader: 'null-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
         new FileListPlugin(),
         new webpack.HashedModuleIdsPlugin(),
         new MomentLocalesPlugin(),
         new MomentTimezoneDataPlugin({
            startYear: 2010
         }),
         new LodashModuleReplacementPlugin(),
        // alias vars
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "windows.jQuery": "jquery",
            'fetch': 'exports-loader?self.fetch!isomorphic-fetch'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
                'DEBUG_CONSOLE': JSON.stringify(process.env.DEBUG_CONSOLE)
            }
        }),
        new CircularDependencyPlugin({
            exclude: /node_modules/
        }),
        new CaseSensitivePathsPlugin(),
        new ForkTsCheckerWebpackPlugin({
            typescript: resolve.sync('typescript', {
                basedir: appNodeModules,
            }),
            async: isEnvDevelopment,
            useTypescriptIncrementalApi: true,
            checkSyntacticErrors: true,
            resolveModuleNameModule: process.versions.pnp
                 ? `${__dirname}/pnpTs.js`
                 : undefined,
            resolveTypeReferenceDirectiveModule: process.versions.pnp
                 ? `${__dirname}/pnpTs.js`
                 : undefined,
            tsconfig: appTsConfig,
            reportFiles: [
                '**',
                '!**/__tests__/**',
                '!**/?(*.)(spec|test).*',
                '!**/src/setupProxy.*',
                '!**/src/setupTests.*',
            ],
            watch: appSrc,
            silent: true,
            // The formatter is invoked directly in WebpackDevServerUtils during development
            formatter: isEnvProduction ? typescriptFormatter : undefined,
        })
    ],
    optimization: isEnvDevelopment ? devOpt : prodOpt
};

# ? Nov 5, 2019 16:55

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.

Angular 9 is in RC, the Ivy Engine is finished and a Hello World app is 7kb. Wrap it up Reactailures.

# ? Nov 6, 2019 07:26

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

every time I look at angular code I want to vomit

# ? Nov 6, 2019 08:02

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

psh yeah well I just wrote an entire hello world app in vanilla HTML that clocks in at 39 bytes, how bout dem apples

# ? Nov 6, 2019 20:20

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

nobody actually cares about bundle sizes

# ? Nov 6, 2019 20:33

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

Well, yes they do, it's just that "Hello world" as a benchmark for bundle size seems silly.

# ? Nov 6, 2019 20:39

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

�I guess I can live without that functionality if it�s really going to increase bundle size,� said no product manager ever.

# ? Nov 6, 2019 20:48

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

prom candy posted:

nobody actually cares about bundle sizes

Yeah, it's weird how much press bundle sizes get and how little anyone actually cares.

Of course, there's all sorts of studies showing how having to wait one additional ms for a page causes 99% of people to give up on the page...but unless you have a totally data-driven organization MOAR FEATURES and less developer time (aka, using libraries instead of rolling your own tiny and focused functionality) always seem to be the rule of the day.

# ? Nov 6, 2019 23:09

Cory Parsnipson: Nov 15, 2015

I'm stumped. How do I get keycode data on Android Chrome?

I've found various answers ranging from:

* just don't get keycode data. You can live without it, right? You pussy. :smug:

* use keyDown or keyUp (but this returns event.keyCode == 229 for everything -> this is because Android Chrome doesn't actually support setting keyCodes anymore. The explanation being that mobile devices aren't like keyboards in that autocorrect or whatever may change the actual value before the keyUp event.)
* use onChange or onInput. This only works on input elements. Compare the previous value of the input element with the new element and infer the keycode that way. (this seems... kind of ridiculous to me)

These aren't perfect solutions either. What if I wanted to support unicode or non-visible characters? Or if I was writing something weird like a game engine where I needed to track arrow keys or something?

Every single javascript text editor is working on mobile so apparently this problem has a solution. (I'm looking through the code to understanding it, but the suspense is killing me.) And lastly, I could probably just use a framework like Angular or something, right? But now it's really bugging me. How did those frameworks solve the problem??

==============================================

e. So it looks like a lot (all of?) the javascript editors and stuff have a tiny hidden <input>, <textarea>, or contentEditable element that holds state and everything that looks nice is mostly smoke and mirrors. Keeping the visible components in sync with the textarea state means that they don't need to know what the keycodes are either. I also personally confirmed that on slatejs, the keycodes show up in the console as "Undefined" when you are on Android.

I'm going to pre-emptively say that's it's impossible to get the keycode, but you actually 100% can live without it. v :shobon:

Cory Parsnipson fucked around with this message at 06:54 on Nov 7, 2019

# ? Nov 7, 2019 05:57

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

Thermopyle posted:

Yeah, it's weird how much press bundle sizes get and how little anyone actually cares.

Of course, there's all sorts of studies showing how having to wait one additional ms for a page causes 99% of people to give up on the page...

How much does that even apply if you're not making like ecommerce or marketing sites though? Companies pay thousands of dollars to use our product, as long as it's not noticeably slow they're not going anywhere. An extra 20 or even 200kb of JavaScript isn't going to matter to them, especially since the vast majority are on broadband internet in their offices.

When we redo our marketing site then I'll get serious about bundle size and TTI and all that fun stuff

# ? Nov 7, 2019 06:08

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.

Ruggan posted:

every time I look at angular code I want to vomit

Basically you have to remember that Google went "What if ASP.NET lived on the client side?" which I guess may or may not be a good thing. If you follow a strict architectural convention for Angular it's fairly tidy but you need to go hog wild with abstraction to make it work. Basically you better be sure as gently caress you've designed everything about this app before you write a single line of code or it's going to get really messy really quickly.

Anony Mouse posted:

psh yeah well I just wrote an entire hello world app in vanilla HTML that clocks in at 39 bytes, how bout dem apples

Whoa

# ? Nov 7, 2019 08:05

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 21:27

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.

prom candy posted:

How much does that even apply if you're not making like ecommerce or marketing sites though? Companies pay thousands of dollars to use our product, as long as it's not noticeably slow they're not going anywhere. An extra 20 or even 200kb of JavaScript isn't going to matter to them, especially since the vast majority are on broadband internet in their offices.

When we redo our marketing site then I'll get serious about bundle size and TTI and all that fun stuff

If you have a dedicated SEO person in house which you absolutely will have if you work at a company that produces a lot of public facing poo poo then you're going to be pestered constantly about lighthouse audits. It gets even worse if the client is really close to your products and all they do all day long is scream and shout about SEO, and your sales team promised them no interruption in SEO/Performance.

So yeah there's plenty of times when bundle sizes actually do matter.

Ape Fist fucked around with this message at 08:26 on Nov 7, 2019

# ? Nov 7, 2019 08:10

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

«‹›235 »