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 »

geeves: Sep 16, 2004

My company finally us time to deal with some of our technology debt. We have a bad habit of not keeping up to date on libraries - especially on the browser side. So finally we're tackling Angular. We're on 1.3.something and looking to upgrade to 1.5.6. After upgrading our site works perfectly the same.

My problem is that none of our unit tests work and our CI build fails. The main culprit seems to be Angular Translate (pascalprecht.translate) - there may be others after this but this one is blocking me.

To start to figure out what I setup a new clean module based on this example: http://www.syntaxsuccess.com/viewarticle/5520197d61d7e9d80a9f52db

It worked. I slimmed down my karma.conf.js to the basics - angular.js, angular-mocks.js and angular-translate.js, myController.js and myController.spec.js. Tests still worked for both Chrome and PhantomJS.

I made sure the rest of the modules weren't interfering adding them one by one. When I added the Angular Translate module to the greeting-module from the example the errors began. PhantomJS masked the main culprit of the error, only returning the last 7 or 8 lines - hence I had a lot of frustration today about why they were failing and only returned a handful of useless lines ending with "TypeError: Cannot read property 'id' of undefined".

I switched to Chrome and it spit out an error starting with:

quote:

Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module pascalprecht.translate due to:
Error: [$injector:nomod] Module 'pascalprecht.translate' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.6-local+sha.c95a3d8/$injector/nomod?p0=pascalprecht.translate

Anyone dealt with this issue?

# ? May 13, 2016 00:17

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 17:56

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

geeves posted:

My company finally us time to deal with some of our technology debt. We have a bad habit of not keeping up to date on libraries - especially on the browser side. So finally we're tackling Angular. We're on 1.3.something and looking to upgrade to 1.5.6. After upgrading our site works perfectly the same.

My problem is that none of our unit tests work and our CI build fails. The main culprit seems to be Angular Translate (pascalprecht.translate) - there may be others after this but this one is blocking me.

To start to figure out what I setup a new clean module based on this example: http://www.syntaxsuccess.com/viewarticle/5520197d61d7e9d80a9f52db

It worked. I slimmed down my karma.conf.js to the basics - angular.js, angular-mocks.js and angular-translate.js, myController.js and myController.spec.js. Tests still worked for both Chrome and PhantomJS.

I made sure the rest of the modules weren't interfering adding them one by one. When I added the Angular Translate module to the greeting-module from the example the errors began. PhantomJS masked the main culprit of the error, only returning the last 7 or 8 lines - hence I had a lot of frustration today about why they were failing and only returned a handful of useless lines ending with "TypeError: Cannot read property 'id' of undefined".

I switched to Chrome and it spit out an error starting with:

Anyone dealt with this issue?

That is a fairly standard error, it happens when Angular tries to instantiate a module that has not been defined. You'll get it when you tell Angular to depend upon a module, but don't load it, either via a <script> tag in your HTML, or it is not available in a bundle, or simply has not been run before your module tries to load. So your app says it needs "pascalprecht.translate", but "pascalprecht.translate" has not been loaded. If you are still loading all libraries the same way, check to see if the name of pascalprecht.translate changed in some way.

# ? May 13, 2016 00:37

geeves: Sep 16, 2004

Skandranon posted:

That is a fairly standard error, it happens when Angular tries to instantiate a module that has not been defined. You'll get it when you tell Angular to depend upon a module, but don't load it, either via a <script> tag in your HTML, or it is not available in a bundle, or simply has not been run before your module tries to load. So your app says it needs "pascalprecht.translate", but "pascalprecht.translate" has not been loaded. If you are still loading all libraries the same way, check to see if the name of pascalprecht.translate changed in some way.

Is there a way to tell Karma to keep Chrome open after the tests run? I did upgrade translate when I did the general update. I even tried reverting angular translate files back to the version they were only to be met with some different errors that I forgot to copy. I'm new to the front-end side of unit testing or at least diagnosing problems like these. I'm more of a java developer and this particular task just kind of fell to me. The two front end guys who set all of this up last year never maintained it or really wrote unit tests that often and also have left the company.

# ? May 13, 2016 01:23

spacebard: Jan 1, 2007; Football~

geeves posted:

Is there a way to tell Karma to keep Chrome open after the tests run? I did upgrade translate when I did the general update. I even tried reverting angular translate files back to the version they were only to be met with some different errors that I forgot to copy. I'm new to the front-end side of unit testing or at least diagnosing problems like these. I'm more of a java developer and this particular task just kind of fell to me. The two front end guys who set all of this up last year never maintained it or really wrote unit tests that often and also have left the company.

Setting singleRun to true will run the test suite once and exit out. The default is false, which should keep the browsers open indefinitely until the process is killed.

# ? May 13, 2016 01:57

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

geeves posted:

Is there a way to tell Karma to keep Chrome open after the tests run? I did upgrade translate when I did the general update. I even tried reverting angular translate files back to the version they were only to be met with some different errors that I forgot to copy. I'm new to the front-end side of unit testing or at least diagnosing problems like these. I'm more of a java developer and this particular task just kind of fell to me. The two front end guys who set all of this up last year never maintained it or really wrote unit tests that often and also have left the company.

Ok, I did a quick check, doesn't look like a name change, still defined as "pascalprecht.translate", so it's probably more of how your unit test framework is loading scripts before running tests. With a webpage, you have some sort of index.html kicking off the entire process, but depending on your unit test setup, something else (Karma in this case) is kicking off the process. Karma is somehow failing to specify that angular-translate.js (or .min.js) needs to be loaded before unit tests can begin.

# ? May 13, 2016 02:42

geeves: Sep 16, 2004

Skandranon posted:

Ok, I did a quick check, doesn't look like a name change, still defined as "pascalprecht.translate", so it's probably more of how your unit test framework is loading scripts before running tests. With a webpage, you have some sort of index.html kicking off the entire process, but depending on your unit test setup, something else (Karma in this case) is kicking off the process. Karma is somehow failing to specify that angular-translate.js (or .min.js) needs to be loaded before unit tests can begin.

In the end, it was an earlier version of angular-translate that was being used released in January (2.9.0.1). It is unreleased, but 2.11 fixes the issue - but since it's not yet fully released we're not going to continue with the upgrade. There are still issues with our unit tests with injecting providers not related to angular-translate. So we're just not going to bother with 1.5.5 for now, which means we'll probably be stuck with 1.3.x til the end of time.

# ? May 13, 2016 18:25

lunar detritus: May 6, 2009

geeves posted:

So we're just not going to bother with 1.5.5 for now, which means we'll probably be stuck with 1.3.x til the end of time.

I'd upgrade to the last 1.4.x version, chances are everything you need supports it. 1.5.x is much newer and once everything stabilizes you can upgrade again instead of having to deal with those dependencies issues.

# ? May 13, 2016 18:51

geeves: Sep 16, 2004

gmq posted:

I'd upgrade to the last 1.4.x version, chances are everything you need supports it. 1.5.x is much newer and once everything stabilizes you can upgrade again instead of having to deal with those dependencies issues.

I'll give it a try on Monday. It sucks that it's just the unit tests holding us back. I did a pretty thorough regression on our site with it and the only issue that I found was that I had to either change from #/path to #!/path in a limited set of URLs or set it to just #/path in the app.config(). Everything else worked smooth and not even so much a blip in dev tools / firebug.

Edit - very similar unit test errors. Running as Chrome doesn't reveal any more like 1.5.5 does.

geeves fucked around with this message at 22:32 on May 13, 2016

# ? May 13, 2016 22:00

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

I know this gets asked semi-frequently, but since this is MODERN FRONT END, the answers change within seconds of Post being hit....

So: I am cranking away on a React SPA, and the last bit I have to flesh out is data storage. Right now I'm using localStorage, but I want users to be able to save in THE CLOUD because who doesn't love THE CLOUD, right? The data is effectively all JSON (it's actually all Immutable.js stuff, but thanks to .toJSON() we can ignore that for now) which means it's simple to send just about anywhere. First thought was just saving it in PostGRE and some sort of API I'd knock out w/ Django or something, but I'd like to both be lazy and try something new! So I am leaning towards using a service of some kind that allows me to store and retrieve JSON documents with user authentication and access control. I am looking at Firebase right now, and that seems like it will work, but might be a little overkill actually. What are you guys using this week?

# ? May 20, 2016 21:50

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

Lumpy posted:

I know this gets asked semi-frequently, but since this is MODERN FRONT END, the answers change within seconds of Post being hit....

So: I am cranking away on a React SPA, and the last bit I have to flesh out is data storage. Right now I'm using localStorage, but I want users to be able to save in THE CLOUD because who doesn't love THE CLOUD, right? The data is effectively all JSON (it's actually all Immutable.js stuff, but thanks to .toJSON() we can ignore that for now) which means it's simple to send just about anywhere. First thought was just saving it in PostGRE and some sort of API I'd knock out w/ Django or something, but I'd like to both be lazy and try something new! So I am leaning towards using a service of some kind that allows me to store and retrieve JSON documents with user authentication and access control. I am looking at Firebase right now, and that seems like it will work, but might be a little overkill actually. What are you guys using this week?

Firebase is pretty good, that's what I'm currently working with for small apps. It also just got a bunch of new features, and it scales pretty well for a JSON store, without any work on your behalf.

# ? May 20, 2016 22:38

Dogcow: Jun 21, 2005

Lumpy posted:

I am looking at Firebase right now, and that seems like it will work, but might be a little overkill actually. What are you guys using this week?

I've only messed around with it but Firebase is really great from what little I've done. It's actually used by large scale apps and Google just announced a whole mess of updates at I/O.

Sending it JSON couldn't possibly simpler, all it's really designed to do is store JSON and automatically provide a CRUD API from the structure. There is a whole security rules thingie but it seems your halfway there just by restricting all writes to a domain you have your back end app with business rules and what not on.

There isn't really a way for it to be overkill because it's just signing up for a free account and NPMing the JS lib in (which is actually literally the same package for Node and browser JS) or just using the plain REST service however you want. Subscribing to updates from any part of a JSON object is like 3 lines of JS.

There are also libraries for every other major platform. The pricing is based on volume but it's not anything you have to worry about for a hobby app.

# ? May 20, 2016 22:50

Tivac: Feb 18, 2003; No matter how things may seem to change, never forget who you are

Thirding the firebase love, I built a whole client-side CMS frontend using firebase for the backend and it was wonderful.

# ? May 20, 2016 22:57

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

Soooo.... Firebase it is!

Thanks for the input all! :tipshat:

# ? May 20, 2016 23:21

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

Redfin released an isomorphic server for React today. It's called react-server.

(We had better names for it, but other open source projects kept taking them.)

It has good perf for pages that depend on many downstream data requests, and server-side rendering is great for bots and humans alike.

# ? May 21, 2016 03:18

M31: Jun 12, 2012

Anybody know of some library that handles synchronisation against an offline cache and does not rely on a third party service? I want to replicate some data for offline use but don't really want to implement the synchronisation logic myself.

CouchDB [http://couchdb.apache.org/]
The obvious choice I guess as it does everything I need at this point. I just have this feeling that authorization will become a problem later on as you are basically directly talking to a database.

Swarm.js [http://swarmjs.github.io/]
Allows subscribing to objects that are kept in sync using a log. Looks very promising, but no releases so far.

ShareJS [https://github.com/share]
They focus on live editing and I can it working really great for that purpose, but not really for DB like structures.

# ? May 23, 2016 19:29

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

Observables in Angular2 are kicking my butt, can you guys help me figure out why my controller variable won't update?

JavaScript code:

export default class UploaderComponent implements OnInit {
	//...snip...
	progressPercent = 0;

	constructor(private uploaderService: UploaderService) {
		uploaderService.uploadProgress$.subscribe(data => {
			console.log('progress: ', data);
			this.progressPercent = data;
		});
	}

I see the returned upload progress as an integer in the console, but progressPercent is always zero. How can I get this variable to update with whatever's returned by the Observable?

IAmKale fucked around with this message at 20:08 on May 24, 2016

# ? May 24, 2016 20:06

Huzanko: Aug 4, 2015; by FactsAreUseless

IAmKale posted:

Observables in Angular2 are kicking my butt, can you guys help me figure out why my controller variable won't update?
JavaScript code:
export default class UploaderComponent implements OnInit {
	//...snip...
	progressPercent = 0;

	constructor(private uploaderService: UploaderService) {
		uploaderService.uploadProgress$.subscribe(data => {
			console.log('progress: ', data);
			this.progressPercent = data;
		});
	}
I see the returned upload progress as an integer in the console, but progressPercent is always zero. How can I get this variable to update with whatever's returned by the Observable?

Man Angular 2 really does seem to take simplish tasks and make you write super verbose complex code for them. I have been looking forward to Angular 2 but I keep seeing code that I have absolutely no interest in writing.

# ? May 25, 2016 14:31

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

Noam Chomsky posted:

Man Angular 2 really does seem to take simplish tasks and make you write super verbose complex code for them. I have been looking forward to Angular 2 but I keep seeing code that I have absolutely no interest in writing.

This is why React / Redux exists.

# ? May 25, 2016 15:39

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

IAmKale posted:

Observables in Angular2 are kicking my butt, can you guys help me figure out why my controller variable won't update?
JavaScript code:
export default class UploaderComponent implements OnInit {
	//...snip...
	progressPercent = 0;

	constructor(private uploaderService: UploaderService) {
		uploaderService.uploadProgress$.subscribe(data => {
			console.log('progress: ', data);
			this.progressPercent = data;
		});
	}
I see the returned upload progress as an integer in the console, but progressPercent is always zero. How can I get this variable to update with whatever's returned by the Observable?

If the console is logging, it is almost certain the other code is running, but if you reverse the order (update progressPercent, then log progressPercent), might help clear things up. Two possible problems, progressPercent is not where you think it is, or you ARE updating the class member properly but are not rendering it properly in the view.

Also, when using the OnInit interface, you are supposed to have a separate init method, and avoid doing things in the constructor, as it's not guaranteed everything is ready when it is run. However, that probably isn't your issue since your Observable is firing fine.

# ? May 25, 2016 15:57

Huzanko: Aug 4, 2015; by FactsAreUseless

Lumpy posted:

This is why React / Redux exists.

Yeah, I'm working on learning it, after being a hardcore Angular 1.x guy for the past 2 years.

# ? May 25, 2016 19:28

Rabid Snake: Aug 6, 2004

Noam Chomsky posted:

Man Angular 2 really does seem to take simplish tasks and make you write super verbose complex code for them. I have been looking forward to Angular 2 but I keep seeing code that I have absolutely no interest in writing.

Angular 2 is definitely more unopinionated compared to Angular 1.

# ? May 26, 2016 03:50

lunar detritus: May 6, 2009

What's the best modern framework for non-SPA apps (as in server-side rendering with a touch of dynamic behaviour on the frontend, for forms and the like)? I actually like Angular 2 but in that use case it's completely useless as it really likes having total control of its templates (I found a temporary workaround using the upgrade module and downgrading ng2 components to ng1 directives but uuuugh).

# ? May 26, 2016 04:34

consensual poster: Sep 1, 2009

Noam Chomsky posted:

Man Angular 2 really does seem to take simplish tasks and make you write super verbose complex code for them. I have been looking forward to Angular 2 but I keep seeing code that I have absolutely no interest in writing.

I really can't fathom how you think that code is super verbose or complex. Aside from the type annotations and access modifier (from TypeScript), it's straight ES6.

In fact, the vanilla ES6 would look like this:

JavaScript code:

export default class UploaderComponent {
    //...snip...
    
    constructor(uploaderService) {
        this.progressPercent = 0;
        uploaderService.uploadProgress$.subscribe(data => {
            console.log('progress: ', data);
            this.progressPercent = data;
        });
    }

# ? May 26, 2016 07:46

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

gmq posted:

What's the best modern framework for non-SPA apps (as in server-side rendering with a touch of dynamic behaviour on the frontend, for forms and the like)? I actually like Angular 2 but in that use case it's completely useless as it really likes having total control of its templates (I found a temporary workaround using the upgrade module and downgrading ng2 components to ng1 directives but uuuugh).

I really, really hate being one of the guys who says this over and over, but...

React?

React is perfectly happy just handling small parts of your pages.

That being said, I have no idea if it's the best, as I haven't done a survey of the available options for non-SPA apps.

# ? May 26, 2016 15:54

abraham linksys: Sep 6, 2010

React does need control over the tree its mounted on, though. Like, you can mount a React application over an existing rendered tree, but you need to be able to render the same content through React, which is non-trivial in a lot of cases. If Angular having "total control of templates" was a dealbreaker this may be an issue for you.

# ? May 26, 2016 15:58

Heskie: Aug 10, 2002

gmq posted:

What's the best modern framework for non-SPA apps (as in server-side rendering with a touch of dynamic behaviour on the frontend, for forms and the like)? I actually like Angular 2 but in that use case it's completely useless as it really likes having total control of its templates (I found a temporary workaround using the upgrade module and downgrading ng2 components to ng1 directives but uuuugh).

Vue.js is my personal preference, and it seems to be gaining traction in the JS community. Its very popular In the Laravel (PHP) community for doing components on server-rendered pages, but it can also be used to build full SPAs. Its similar to React in that it can be used for both.

# ? May 26, 2016 18:14

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

Skandranon posted:

Two possible problems, progressPercent is not where you think it is, or you ARE updating the class member properly but are not rendering it properly in the view.

Is this not the kind of variable I can bind to with {{ progressPercent }}? At least that's how I'm binding to it in the HTML.

So to my dismay I've inadvertently ended up as the most knowledgeable person regarding front end development. This means I get to wade neck deep into the huge mess that are Angular2 starter projects. I'm surprised these various projects are so gargantuan: three dozen NPM dependencies, a dozen config files to tie it all together...I have no idea how anyone could possibly write this on their own. It's actually kinda disheartening - I feel like I'm at the mercy of these open-source starters to determine my workflow. I know it's still an RC release, but is there any hope that this stuff will get less complex as time goes on? Or is Angular2 complex enough that these huge amalgamations of tools will need to be stood up around it to get it working in production?

Anyway bitchfest over :tizzy:

# ? May 26, 2016 19:50

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

IAmKale posted:

Is this not the kind of variable I can bind to with {{ progressPercent }}? At least that's how I'm binding to it in the HTML.

So to my dismay I've inadvertently ended up as the most knowledgeable person regarding front end development. This means I get to wade neck deep into the huge mess that are Angular2 starter projects. I'm surprised these various projects are so gargantuan: three dozen NPM dependencies, a dozen config files to tie it all together...I have no idea how anyone could possibly write this on their own. It's actually kinda disheartening - I feel like I'm at the mercy of these open-source starters to determine my workflow. I know it's still an RC release, but is there any hope that this stuff will get less complex as time goes on? Or is Angular2 complex enough that these huge amalgamations of tools will need to be stood up around it to get it working in production?

Anyway bitchfest over

If you're talking about their tutorial app, most of the npm stuff is the live compiler/server/whatever the hell they use. I only had to put five or six of those on the server to get the site to work.

# ? May 26, 2016 19:54

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

dupersaurus posted:

If you're talking about their tutorial app, most of the npm stuff is the live compiler/server/whatever the hell they use. I only had to put five or six of those on the server to get the site to work.

I'm guess I'm more interested in an opinionated, standalone program that would just watch a directory and automatically compile .ts/.scss/.html/etc... into a couple of bundled files (vendor.js/main.js/main.css/etc...). Just a single download and some docs that say, "put your files in this kind of structure and you're good to go." Brunch.io was working pretty well, but the community support just isn't there and it choked when trying to build everything for production so now I'm looking at Webpack starters. I can't help but feel like this stuff is purposefully overengineered and in need of some simplification.

# ? May 26, 2016 20:08

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

IAmKale posted:

I'm guess I'm more interested in an opinionated, standalone program that would just watch a directory and automatically compile .ts/.scss/.html/etc... into a couple of bundled files (vendor.js/main.js/main.css/etc...). Just a single download and some docs that say, "put your files in this kind of structure and you're good to go." Brunch.io was working pretty well, but the community support just isn't there and it choked when trying to build everything for production so now I'm looking at Webpack starters. I can't help but feel like this stuff is purposefully overengineered and in need of some simplification.

That's what it is. I just use the standard typescript compiler in sublime and hit ctrl-b whenever I want to build.

# ? May 26, 2016 20:30

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

Thermopyle posted:

I really, really hate being one of the guys who says this over and over, but...

React?

React is perfectly happy just handling small parts of your pages.

That being said, I have no idea if it's the best, as I haven't done a survey of the available options for non-SPA apps.

If it's not an SPA, you can actually do far worse than combine Redux and JQuery or some equivalent. Most soft touch JavaScript wants to read a couple of data attributes, and then change things as the page state changes.

Using redux to manage the state of the page, and JQuery or equivalent to represent it, helps mitigate the single largest issue that plagues JQuery projects, state inconsistency. By putting redux in charge of that, each JQuery file is responsible for:

Bind event handlers to things to update the redux state

Listening to redux state changes and updating the DOM based on the new state.

Still refining but we used it to really good effect on a recent site (councilofobjects.com.au), it made the payment forms much less of a headache, and also greatly simplified what could be tricky state problems of binding the colour of the header the current scrolled in content.

It's a trivial example in a way, but that's kinda where this works well without going too far into the JQuery soup rabbit hole.

# ? May 26, 2016 21:28

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

I really don't understand the new web build process stuff. How do I build a .html file that references my fancy new modules with something like webpack? I'm in the guts of file loaders and html webpack plugins and I really don't understand any of it.

# ? May 26, 2016 23:50

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Suspicious Dish posted:

I really don't understand the new web build process stuff. How do I build a .html file that references my fancy new modules with something like webpack? I'm in the guts of file loaders and html webpack plugins and I really don't understand any of it.

I would recommend keeping webpack out of your html. Just use it to build your js and include it in your html with a good old script tag.

# ? May 27, 2016 02:06

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

Yeah, I think you just put <script src="bundle.js"></script> in your html and it Just Works as long as you don't try to load the unprocessed files.

# ? May 27, 2016 15:25

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

ok. since you can have a css loader i figured there would be some concept to inject the built css into the html but i guess not.

i am also toying around with something else. for super neat dumb reasons at work it would be nice if i had this app as a single .html file so i was wondering if it's possible to inline all the scripts and styles right into this sucker.

# ? May 27, 2016 17:24

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

Suspicious Dish posted:

ok. since you can have a css loader i figured there would be some concept to inject the built css into the html but i guess not.

i am also toying around with something else. for super neat dumb reasons at work it would be nice if i had this app as a single .html file so i was wondering if it's possible to inline all the scripts and styles right into this sucker.

This sounds like a terrible idea. Are you trying to write a web application but do not have a webserver to host it from, but you DO have some network location? Yes, it is *possible*, but it's a bad bad idea.

# ? May 27, 2016 17:26

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

Suspicious Dish posted:

ok. since you can have a css loader i figured there would be some concept to inject the built css into the html but i guess not.

i am also toying around with something else. for super neat dumb reasons at work it would be nice if i had this app as a single .html file so i was wondering if it's possible to inline all the scripts and styles right into this sucker.

Skandranon posted:

This sounds like a terrible idea. Are you trying to write a web application but do not have a webserver to host it from, but you DO have some network location? Yes, it is *possible*, but it's a bad bad idea.

Yeah my balls contracted a little when I read that idea.

What, pray tell, "dumb reasons" do you have for wanting an app as a single html file?

# ? May 27, 2016 17:32

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

Suspicious Dish posted:

ok. since you can have a css loader i figured there would be some concept to inject the built css into the html but i guess not.

i am also toying around with something else. for super neat dumb reasons at work it would be nice if i had this app as a single .html file so i was wondering if it's possible to inline all the scripts and styles right into this sucker.

What about images?

Even with images, I think this might be possible, but I haven't actually done it.

edit: VV Yeah, I don't think it's a dumb idea either.

edit2: Also, webpack documentation is kind of hard to understand and the configuration feels kind of dumb, so I don't blame anyone for not getting it. I still often don't get it and I've been using webpack for a year or more.

Thermopyle fucked around with this message at 17:58 on May 27, 2016

# ? May 27, 2016 17:49

M31: Jun 12, 2012

Webpack will happily include your images inside the javascript bundle as base64 encoded urls if you use the url loader.

I don't think it's a dumb idea. Makes it super easy to distribute (and run offline), and if you have a small SPA and are generating your CSS using Webpack it's unlikely that you will ever benefit from caching JS and CSS separately.

html-webpack-plugin has an example that does what you want: https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/inline

edit: Obviously, don't inline large images in your javascript

M31 fucked around with this message at 17:56 on May 27, 2016

# ? May 27, 2016 17:53

Adbot: ADBOT LOVES YOU

# ? Jun 10, 2024 17:56

ModeSix: Mar 14, 2009

Jesus just looking at his post history in this thread, it's almost like he's trying to troll us.

ModeSix fucked around with this message at 17:59 on May 27, 2016

# ? May 27, 2016 17:57

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

«‹›235 »