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

Lumpy posted:

That already happens like so:
JavaScript code:
export const scoreTheUrl = ( url, dispatch  ) => {
  return fetchUrlScore( urlL ) 
  .then( scores => {
            dispatch( receviedScoresForUrl( url,  scores ) );
  })
  .catch( error => {
            dispatch( urlScoreFailed( url ) );
  });
};
So I should be okay? (Other than hitting the concurrent # of ajax request limit in the browser and having them all pile up in a queue but that's for the browser to handle!)

This doesn't address your question, but you have a typo in your receivedScoresForUrl call.

# ? Jan 31, 2018 23:50

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 11:27

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

a hot gujju bhabhi posted:

This doesn't address your question, but you have a typo in your receivedScoresForUrl call.

It's pseudo code anyway, but I'm really good at typos. :v:

# ? Feb 1, 2018 05:48

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

Lumpy posted:

It's pseudo code anyway, but I'm really good at typos.

Oh haha, I did wonder if that was the case, but thought I'd mention it on the off chance it saves you an annoying debugging experience haha

# ? Feb 1, 2018 22:11

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

Instead of helping him avoid annoying debugging sessions I like to give Lumpy code to cause annoying debugging sessions.

# ? Feb 2, 2018 00:38

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

How do you guys manage internal component state when using sagas? I have a form, when the user hits submit I want to show a loader, and then on success I want to redirect and show a success alert. Do I just need to handle this all in redux now? Set a submitting flag to true, and then install react-router-redux to manage changing the route? I'm used to having promises to play with in the component and typically I've kept my route state and my redux state separate.

If I'm installing react-router-redux should I just install redux-first-router?

# ? Feb 2, 2018 01:08

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.

Lumpy posted:

I'm having a Stupid Day and want you guys to think for me! I have a list of urls. I send these URLs off to a service to score them. This can take up to a second each, so obviously I don't want to block the UI while this happens because there could be a couple hundred!! Since I do want the UI to update as each URL is processed (a progress bar and showing the results so far) ditching the whole thing off to a WebWorker may not be the best option (but maybe it is?) So how do I do this (this is in React / Redux btw) in a non-blocking way:
JavaScript code:
const scoreURLs = listOfURLs => {
  return ( dispatch, getState ) => {
    listOfURLs.forEach( _url => {
      // this will perform a fetch, then update state via an action 
      // on success or failure
      dispatch( scoreTheUrl( _url ) ); 
    })
  }
}
Is that already going to do what I want because the scoreTheUrl calls return a fetch / Promise? Do I need to setTimeout those calls? Why can't I think today, even though I already had two cups of coffee?

This isn't strictly redux but you could do something like:

code:

var promises = urls.map(url => fetch(url).then(y => y.text()));
Promise.all(promises).then(results => {
    // do something with results.
});

In the case of the connection limit, xhr will wait for a connection to become available but won't block on it, still event based (although if all connections are timing out the browser will hang because it can't establish a new connection, but you've got bigger problems if that happens)

# ? Feb 2, 2018 14:55

My Rhythmic Crotch: Jan 13, 2011

I'm having tooling troubles and don't know what the gently caress.

I am playing with embed-js and having no luck with it when used in a browser environment. If I start with this sandbox example, what must I do to create a dev environment that can work with the imports? I have tried dumping that code into a plain old js file, and running:

browserify app.js -o bundle.js

But it just barfs:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

:arghfist:

# ? Feb 2, 2018 21:43

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Browserify gives you node style CommonJS modules (require, module.exports). To get ES6 style modules to work (import, export) you need to use babel tooo

http://egorsmirnov.me/2015/05/25/browserify-babelify-and-es6.html

# ? Feb 2, 2018 23:15

My Rhythmic Crotch: Jan 13, 2011

Thanks for the pointer. This makes a lot more sense once I realize the whole point is to be able to use ES6 features.

# ? Feb 3, 2018 00:21

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

You could also look at using Rollup.js, Browserify is really showing it's age.

# ? Feb 3, 2018 07: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.

Does anyone have a link to a fairly idiot-proof multi-file upload system in angular 2 thats well explained?

Need it for work.

# ? Feb 3, 2018 08:38

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

prom candy posted:

How do you guys manage internal component state when using sagas? I have a form, when the user hits submit I want to show a loader, and then on success I want to redirect and show a success alert. Do I just need to handle this all in redux now? Set a submitting flag to true, and then install react-router-redux to manage changing the route? I'm used to having promises to play with in the component and typically I've kept my route state and my redux state separate.

If I'm installing react-router-redux should I just install redux-first-router?

I ended up just moving modal open state into redux and forgetting about tracking it with routing at all.

# ? Feb 3, 2018 16:05

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Skandranon posted:

You could also look at using Rollup.js, Browserify is really showing it's age.

Rollup can also handle commonjs by adding a plugin which is really nice. It unfortunately doesn't convert es2015+ into es5 though, I've found Typescript's compiler is fantastic at that so I'd prefer Typescript + Rollup over Babel + Browserify.

Unfortunately I've been driven somewhat away from Typescript because of the effort it takes to manage dependencies. I'd really like an alternative to Babel.

# ? Feb 4, 2018 02:37

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I really like commonjs, because I don't have to compile my tests. I usually end up using Browserify because it has that in mind.

# ? Feb 4, 2018 02:44

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Nolgthorn posted:

Rollup can also handle commonjs by adding a plugin which is really nice. It unfortunately doesn't convert es2015+ into es5 though, I've found Typescript's compiler is fantastic at that so I'd prefer Typescript + Rollup over Babel + Browserify.

Unfortunately I've been driven somewhat away from Typescript because of the effort it takes to manage dependencies. I'd really like an alternative to Babel.

What is hard about managing dependencies for TypeScript? It does take a bit of effort to get set up, but I've always found it well worth it.

# ? Feb 4, 2018 03:43

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I got really into Typescript and how specific it forced me to be, it helped develop quite a few best practices and is a great language to work with. I just eventually found it easier to use basic es2015+. Types stopped being as useful to me maybe I should try again.

Dunno if it's good/bad practice to expose my github profile here but this is what got me annoyed enough with Typescript that I stopped using it.

https://github.com/rollup/rollup/issues/1476

Side note to this discussion has anyone tried out booblay as an alternative to Babel?

https://buble.surge.sh/guide/

# ? Feb 4, 2018 04:36

My Rhythmic Crotch: Jan 13, 2011

Thanks for suggesting Rollup.js. Hopefully I'll have the patience to stick with it.

All my work and personal projects are very old school in terms of just a bunch of raw includes. I have only just now started using uglifyjs to compress and name-mangle when deploying one of my personal projects.

I hope this new fangled tooling still allows me to check dependencies into version control.

# ? Feb 4, 2018 05:47

smackfu: Jun 7, 2004

We just finished an Angular 1.6 to 4 upgrade at work and we got pretty good at converting components painlessly but converting the unit tests sucked right up until the end. I wish they had put a little more effort into that part of things. Maybe it was unavoidable since Angular 1 barely needed any boilerplate in tests.

# ? Feb 4, 2018 19:51

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

smackfu posted:

We just finished an Angular 1.6 to 4 upgrade at work and we got pretty good at converting components painlessly but converting the unit tests sucked right up until the end. I wish they had put a little more effort into that part of things. Maybe it was unavoidable since Angular 1 barely needed any boilerplate in tests.

Is Angular 4 the one that's just 'Angular', or was that Angular 2?

# ? Feb 5, 2018 18:25

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Lumpy posted:

Is Angular 4 the one that's just 'Angular', or was that Angular 2?

AngularJS refers to the 1.x branch. Angular refers to the 2+ branch. 2/4/5 are basically changes on the scale of AngularJS 1.2/1.3/1.5. They are not major version changes, they are minor version changes, but it sounds cooler when you talk like it's the major version.

# ? Feb 5, 2018 19:08

smackfu: Jun 7, 2004

Yeah, the Angular 4 to 5 conversion only took a day, and most of they was figuring out we were affect by an Angular compiler bug.

# ? Feb 6, 2018 01:34

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

I'm definitely out of the loop - how come Rollup is the new hot thing? Is it doing something Webpack isn't capable of? Is it different from Webpack?

# ? Feb 6, 2018 02:49

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

It approaches things differently. Rather than enclosing all code modules in function scope it flattens it all out and shakes the tree to get rid of unused code.

The lack of excessive function closed modules and the tree shaking can result in a dramatically faster evaluation time, but it�s less flexible in what you can do.

Webpack 3 is adopting much of what makes rollup special, as options, so it probably will end up more and experimental spike of the packaging process than the new standard way everyone does it. Of course I could be wrong.

# ? Feb 6, 2018 03:05

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Grump posted:

I'm definitely out of the loop - how come Rollup is the new hot thing? Is it doing something Webpack isn't capable of? Is it different from Webpack?

Webpack tries to solve the entire web application space, with loaders for code, html, css, images, etc. Rollup focuses more on simply bundling code, and is ideal for creating JavaScript libraries in a modern way.

# ? Feb 6, 2018 03:13

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I like rollup because it does what I need and nothing else.

# ? Feb 6, 2018 04:29

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

Probably worth looking into I guess...

Anyway, I do have another question. I have a project I'm working on right now where I want to generate an HTML file when my local server is running and another HTML file in a different location when I build the project. I am currently using html-webpack-plugin and having no issue generating the HTML file and getting the bundled JS and CSS into that file when running my server in 'root/dist' directory

My problem is that I want to generate a new HTML file on build in the project root directory with scripts and CSS injected. It doesn't seem like html-webpack-plugin even creates an actual file, but rather one that is stored in memory. Is there an easy way to accomplish this?

e: I guess what I need is a post-build script that will move the html file from root/dist to root, correct?

nvm found a good plugin

https://www.npmjs.com/package/filemanager-webpack-plugin

teen phone cutie fucked around with this message at 05:38 on Feb 6, 2018

# ? Feb 6, 2018 05:16

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Nolgthorn posted:

Side note to this discussion has anyone tried out booblay as an alternative to Babel?

https://buble.surge.sh/guide/

Trip report:

My new favourite thing is this plus rollup, there's a rollup plugin that makes it so easy to use... my entire config is.

JavaScript code:

import buble from 'rollup-plugin-buble';

export default {
    input: 'src/main.js',
    plugins: [buble()],
    output: {
        file: 'public/javascripts/main.js',
        format: 'iife',
        sourcemap: true
    }
};

Code it outputs is interesting.

JavaScript code:

function createPattern () {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.remove(...CLASSES);
        nodes[i].classList.add(randomClass());
    }
}

JavaScript code:

function createPattern () {
    for (var i = 0; i < nodes.length; i++) {
        (ref = nodes[i].classList).remove.apply(ref, CLASSES);
        nodes[i].classList.add(randomClass());
    }
    var ref;
}

Nolgthorn fucked around with this message at 12:44 on Feb 6, 2018

# ? Feb 6, 2018 12:41

Vincent Valentine: Feb 28, 2006; Murdertime

I know front-end JavaScript devs are jokingly referred to as the Skyrim players of the development world, installing a dependency to solve every little problem until their app collapses under the weight of it.

But man, I just had to work on a legacy project where this guy installed a dependency for everything. There's dependencies for generating dates, tooltips, formatting paragraphs, load bars, sliders, buttons, dropdowns, everything. You name it, if you could possibly stick it on a page, this guy had a dependency for it. Dates are already native in JavaScript, there's like thirty different ways to display them, even!

On the other hand, there's this weird silver lining: Since it looks like there's maybe twenty original lines of javascript in this entire gigantic project, it's unintentionally very well documented. A tooltip was getting clipped, look up the library he installed for tooltips, see that it's got a simple flag for positioning. Position it right. Done. And so on and so forth.

It was really easy as a result, but it's still a loving disaster and if I tried to update any of these dependencies I'm sure it would cause a catastrophic cascading failure. There's zero chance anything will be done about this though. But if something in the vein of LeftPad comes up ever again, pretty sure this entire app is toast.

# ? Feb 6, 2018 14:01

lunar detritus: May 6, 2009

Vincent Valentine posted:

Dates are already native in JavaScript, there's like thirty different ways to display them, even!

I'll give you everything else but dates are the worst.

# ? Feb 6, 2018 14:25

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.

Vincent Valentine posted:

But man, I just had to work on a legacy project where this guy installed a dependency for everything. There's dependencies for generating dates, tooltips, formatting paragraphs, load bars, sliders, buttons, dropdowns, everything. You name it, if you could possibly stick it on a page, this guy had a dependency for it. Dates are already native in JavaScript, there's like thirty different ways to display them, even!

The date object has so many hosed up idiosyncrasies between browsers that I can't recommend using bare Dates unless you want to deal with super hosed up esoteric bugs.

For example, one time, we had a web service that returned a date as an ISO string - it worked OK on IE11/Chrome/etc, but on IE9, 1% of the time, Date.parse would just return the string "invalid date".

It turns out what was happening is that the format for ISO string is:

YYYY-MM-DDTHH:mm:ss.sssZ (e.g. 2018-02-06T13:36:51.710Z)

However, the web service would not preserve trailing 0's. So say you have:
2018-02-06T13:36:51.7Z

Date.parse("2018-02-06T13:36:51.7Z") will work fine in Chrome, IE10, etc.

In IE9, Date.parse("2018-02-06T13:36:51.7Z") will return 'INVALID DATE', because according to the standard, an ISO string must always be 24 or 27 characters long - so clearly, that string is not an ISO string. Brilliant.

Let's not get into the arbitrary ways Chrome and IE vary on basis of timezone handling, or region formatting. gently caress using the raw date object.

# ? Feb 6, 2018 14:43

Golden Bee: Dec 24, 2009; I came here to chew bubblegum and quote 'They Live', and I'm... at an impasse.

Anyone looking for some part-time work in mid February or March? I need a new front end developer for an auto tech company, gig starts soon. Would post more but there is an NDA going on, can give more details on PM.

# ? Feb 6, 2018 22:45

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.

So I've been at my job for like 3 weeks now and I can safely say I was kinda thrown in at the deep end in terms of what I was expected to do. I wasn't expected to do it with any kind of urgency, but its been kinda like 'Just leave him, if he figures it out he figures it out, if not he'll ask for help and if he doesn't well that his problem.'

Sufficed to say I've learned more about angular 2 and development in general in 3 weeks than 3 years.

# ? Feb 7, 2018 19:39

Capri Sun Tzu: Oct 24, 2017; by Reene

Ape Fist posted:

So I've been at my job for like 3 weeks now and I can safely say I was kinda thrown in at the deep end in terms of what I was expected to do. I wasn't expected to do it with any kind of urgency, but its been kinda like 'Just leave him, if he figures it out he figures it out, if not he'll ask for help and if he doesn't well that his problem.'

Sufficed to say I've learned more about angular 2 and development in general in 3 weeks than 3 years.

I'm a fan of this approach, as long as it's not on anything mission critical and as long as resources are made available if you get blocked on something.

# ? Feb 7, 2018 20:39

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

I don't think I saw it mentioned here, but Microsoft is making PWA's first class citizens in Windows 10.

quote:

Over the coming weeks, we�re also kicking off some experiments with crawling and indexing quality PWAs from the Web to list them in the Microsoft Store, where users can find them just like any other app on Windows 10.

and

quote:

On other platforms, PWAs primarily originate from inside the browser, and can escape the browser in response to various prompts or menu options. We�re taking things one step further on Windows! Because a PWA can be a first-class citizen in the Windows Store, a user will be able to engage fully with an installed PWA�from discovery, to installation, to execution�without ever opening the browser.

and

quote:

In the next release of Windows 10, we intend to begin listing PWAs in the Microsoft Store. Progressive Web Apps installed via the Microsoft Store will be packaged as an appx in Windows 10 � running in their own sandboxed container, without the visual or resource overhead of the browser.

# ? Feb 7, 2018 23:56

FormatAmerica: Jun 3, 2005; Grimey Drawer

I wonder if that'll stick and see any meaningful form of adoption or usefulness before they promise an update and then kill it "unexpectedly"

I love .NET development but new platform attempts over the past couple decades have been a hot fuckin mess.

# ? Feb 8, 2018 03:20

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

FormatAmerica posted:

I love .NET development but new platform attempts over the past couple decades have been a hot fuckin mess.

Ruby on Rails died in the span of 5 years

# ? Feb 8, 2018 04:15

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

Thermopyle posted:

I don't think I saw it mentioned here, but Microsoft is making PWA's first class citizens in Windows 10.

and

and

A whole new world of Windows security flaws!

# ? Feb 8, 2018 04:46

Vincent Valentine: Feb 28, 2006; Murdertime

Ape Fist posted:

So I've been at my job for like 3 weeks now and I can safely say I was kinda thrown in at the deep end in terms of what I was expected to do. I wasn't expected to do it with any kind of urgency, but its been kinda like 'Just leave him, if he figures it out he figures it out, if not he'll ask for help and if he doesn't well that his problem.'

Sufficed to say I've learned more about angular 2 and development in general in 3 weeks than 3 years.

https://www.youtube.com/watch?v=YFFo7xz69t0

Yeah seconded that I like the approach. People figure things out pretty well.

# ? Feb 8, 2018 07:20

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

Vincent Valentine posted:

I know front-end JavaScript devs are jokingly referred to as the Skyrim players of the development world, installing a dependency to solve every little problem until their app collapses under the weight of it.

But man, I just had to work on a legacy project where this guy installed a dependency for everything. There's dependencies for generating dates, tooltips, formatting paragraphs, load bars, sliders, buttons, dropdowns, everything. You name it, if you could possibly stick it on a page, this guy had a dependency for it. Dates are already native in JavaScript, there's like thirty different ways to display them, even!

On the other hand, there's this weird silver lining: Since it looks like there's maybe twenty original lines of javascript in this entire gigantic project, it's unintentionally very well documented. A tooltip was getting clipped, look up the library he installed for tooltips, see that it's got a simple flag for positioning. Position it right. Done. And so on and so forth.

It was really easy as a result, but it's still a loving disaster and if I tried to update any of these dependencies I'm sure it would cause a catastrophic cascading failure. There's zero chance anything will be done about this though. But if something in the vein of LeftPad comes up ever again, pretty sure this entire app is toast.

Handcrafted code is overhead, I imagine you'd be in a much worse position if he hadn't used all these dependencies.

# ? Feb 8, 2018 07:59

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 11:27

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

prom candy posted:

Handcrafted code is overhead, I imagine you'd be in a much worse position if he hadn't used all these dependencies.

i would rather work with a codebase written by people that know how to write left-pad by hand than people that include it as a dependency

# ? Feb 8, 2018 08:47

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

«‹›235 »