Sagacity posted:

Which line of business are you in, in which clients don't use IE8 anymore?

The Milkman posted:

Not to mention the browser will cache that huge singular CSS file after the first load anyway

The Wizard of Poz posted:

Maluco Marinero posted:

... considering Ember won't be abandoned for 2.0 with no migration path.

Karthe posted:

I did some "research" into this (in so much as I googled around a bit) and came away with the idea that 1.x isn't going anywhere for a couple of years at least. TONS of existing projects use 1.x (obviously), and the Angular people have said that they'll support both 1.x and 2.x for the foreseeable future. Therefore you should be fine picking up 1.x now, and try to stick to most of the practices featured in this style guide: https://github.com/johnpapa/angular-styleguide. They'll get you away from relying on $scope for everything, which will be especially useful whenever you start diving into 2.x.

As for resources, Codecademy has a decent Angular course to get you started: https://www.codecademy.com/learn/learn-angularjs

Skandranon posted:

I would start with AngularJS 1.X, with an eye for doing things closer to how Angular 2 works. There are a lot of things that have built up in Angular 1.X that are bad, but can be avoided (like using $scope). Only having 2.0 experience would be almost useless right now, whereas there will be 1.X apps to work on for many years to come. Also, take a look at TypeScript, it works well with 1.X, and will get you pretty close to working as if you were using 2.0, and will make the transition fairly smooth when it does happen.

As for good resources for using TypeScript with AngularJS... I've never really found any, it's all in bits and pieces all over. Feel free to PM me any questions though, I've been in the trenches for a year now with the two and feel I've made some significant progress. Just not the blogging type.

3rd step in Codecademy tutorial posted:

code:

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'Top Sellers in Books'; 
}]);

Skandranon posted:

As opposed to React still being 0.1x after almost 3 years?

Perfectly Cromulent posted:

I assume you know nothing about Angular or its history? The RC will be in 6 months or less. 3 years ago, Angular was barely out of the 1.0 release and it has been very actively maintained and updated since then. They will be releasing 1.5 very soon. Oh, and the version numbers here are not at all insignificant. The 2.x releases will be a major departure from the 1.x line and quite deserving of the major version number update.

Lumpy posted:

Skip them and use webpack or plain npm scripts

They *why* is because you want to perform build step from the time you hit 'save' to the time code gets to the browser. For example, when I save a file, webpack:

• looks at the entry point of my code and gathers up all the imports for me into just what's used
  
• transforms my ES6 to "vanilla" js
  
• transforms my SASS into css
  
• pulls out just the CSS that's actually used
  
• autoprefixes that css
  
• separates out all my "vendor" code (React, d3, whatever) into a separate file so it can be cached (in production)
  
• minifies everything.
  
• writes a new index.html for me with all the SCRIPT and LINK tags for the js /css
  
• hot reloads my browser (in dev)
  

Plus probably a bunch of other stuff I forget.

If you write "raw" JS and CSS, then you don't really need that stuff.

Wheany posted:

Okay, so it seems progressive web apps are the new hotness right now. And apparently part of that is not compiling everything into one giant monolithic file.

Depressing Box posted:

Webpack 2 seems like it's getting pretty close:

https://twitter.com/TheLarkInn/status/785486480781094912

HaB posted:

I can't give you specific help, since I just sat and jacked with it until I got it working, but here's my webpack config:

code:

...

it's from the React starter, ejected and modified by me to include sass support. Don't forget that loader order matters, and they get applied in reverse order. (as to the sheer dumbness/weirdness of that, I'll refrain from offering an opinion).

Lumpy posted:

A couple clarifying questions:

How are you importing / including the Foundation files in your code?

Have you started with a "stupid" version that only has one .js file and the foundation stuff and does everything inline?

Lumpy posted:

how are you importing your SCSS in your js?

HaB posted:

You can still do what you're talking about with webpack, but it might be more trouble than it's worth.

You can chain Gulp/Grunt tasks together into a single "build" or "dev" command. Seems like that might be the easiest way to modify your existing setup

Anony Mouse posted:

Are you using a pre-existing package.json? If so maybe try starting over from scratch and install packages one at a time manually. Could be that the dev dependencies are set wrong in package.json. I've never had a problem installing webpack and webpack-dev-server (in that order).

I wouldn't waste too much time on it, after you figure it out once you'll move on to using a boilerplate that you or someone else wrote that fits your needs and Just Works.

Redmark posted:

The hardest part has actually been using the native terminal, which is absolute garbage. The second hardest part is the Webpack documentation, which is merely trash.

ynohtna posted:

It's complaining about that due to your enclosing context telling it to look in resolved path 'js'.

(I'm the weirdo out on a limb who's been happily using jspm for the last year instead of the struggling with webpack, gulp and grunt.)

Depressing Box posted:

You need an object with a key for each file to output multiple entry points. I did something like this in an old project (so excuse the messy code):

Helicity posted:

Dig into how Webpack works under the hood and it will be a bit more clear. It's a JS bundler, and everything else is a hack on top of that. If you treat it as your JS processor and handle everything else separately, your life will be easier. I had SASS compilation working as simple Hello World type thing, but never could get it working well in real-world cases, so chalked it up as another "just because someone made it work, doesn't mean it should work".

Webpack 2 will (supposedly) have decent documentation this time, and will have tree-shaking as its killer feature. I'm guessing it will be the favored JS bundler for the next year or so, as nothing seems ready to overthrow it yet.

The Wizard of Poz posted:

Cross-posting here:

I figure there's probably no easy answer to this, but is there a reliable way to detect mobile devices? I want to enable the native <input type="date"> date pickers for mobile devices and tablets (because they are actually not terrible) but not for desktop (because they are actually terrible).

Munkeymon posted:

Using an actual type="date" to enter a birthday is currently a bad idea because the Android date control only lets you jog one month at a time, defaults to the current date and is really easy to set to the current date (accidentally press any of the green part at the top of the overlay in the image below!), so any adult is going to have to tap a stupid button 200+ times to get anywhere near their birthday.