Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Plavski
Feb 1, 2006

I could be a revolutionary

ModeSix posted:

In case anyone else is interest, I found a Typescript course on edx.com that is sponsored by Microsoft.

https://www.edx.org/course/introduction-typescript-microsoft-dev201x-1

Related to this, the TypeScript course on PluralSight is pretty decent. Their course on Gulp is great too, while we're at it.

Adbot
ADBOT LOVES YOU

DirtyCheeseburgers
Apr 15, 2003

College Slice
This feels like a dumb problem to post in this thread of smart people, but here I am.

Working on a site for a client. They basically want to emulate Adele's site header, with the change on scroll and the fancy full screen overlay nav. I got Headroom working which is neat. But the full screen nav (a thing I don't even really like) is proving harder.

There are a lot of these out there - anybody have one they like? I've been having mixed results.

Plavski
Feb 1, 2006

I could be a revolutionary

DirtyCheeseburgers posted:

This feels like a dumb problem to post in this thread of smart people, but here I am.

Working on a site for a client. They basically want to emulate Adele's site header, with the change on scroll and the fancy full screen overlay nav. I got Headroom working which is neat. But the full screen nav (a thing I don't even really like) is proving harder.

There are a lot of these out there - anybody have one they like? I've been having mixed results.

http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

PlaneGuy
Mar 28, 2001

g e r m a n
e n g i n e e r i n g

Yam Slacker

DirtyCheeseburgers posted:

This feels like a dumb problem to post in this thread of smart people, but here I am.

Working on a site for a client. They basically want to emulate Adele's site header, with the change on scroll and the fancy full screen overlay nav. I got Headroom working which is neat. But the full screen nav (a thing I don't even really like) is proving harder.

There are a lot of these out there - anybody have one they like? I've been having mixed results.

The moment I saw that I remember seeing it on codrops http://tympanus.net/Development/FullscreenOverlayStyles/index3.html

Ochowie
Nov 9, 2007

Never mind. I was for some reason trying to see a the source map of the bundled file rather than the original TS file.

Ochowie fucked around with this message at 22:53 on Apr 29, 2016

cZk
Oct 6, 2014

i am a flight risk
and i am in flight
Anyone using Vue JS? It's super simple to pick up and start hacking with right away and the guides are great: http://vuejs.org/ 2.0 is coming out sometime this year (beta slated for sometime this month).

I've been hacking away on an SPA using 1.x, if you have any questions feel free to ask. I started to learn React recently and a part of me enjoys JSX (i know, weird), but I'm much more productive in Vue.

One of my favorite features is vue-loader / vueify which gives you single-file components (if you want them), with hot reloading and all that jazz.

cZk fucked around with this message at 15:14 on May 3, 2016

IronDoge
Nov 6, 2008

Angular 2 RC1 is out.
https://github.com/angular/angular/blob/master/CHANGELOG.md
Guess I should complete the intro to Angular 2 lesson I started a while back.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

cZk posted:

Anyone using Vue JS? It's super simple to pick up and start hacking with right away and the guides are great: http://vuejs.org/ 2.0 is coming out sometime this year (beta slated for sometime this month).

I've been hacking away on an SPA using 1.x, if you have any questions feel free to ask. I started to learn React recently and a part of me enjoys JSX (i know, weird), but I'm much more productive in Vue.

One of my favorite features is vue-loader / vueify which gives you single-file components (if you want them), with hot reloading and all that jazz.



Yeah, vue.js is pretty neat. There's actually several things I'd rather be using than React and Redux. (Elm probably being numero uno)

The problem is that React is really good and the ecosystem and community around React is just so big making it hard to really hard for me to justify using something else.

cZk
Oct 6, 2014

i am a flight risk
and i am in flight

Thermopyle posted:

Yeah, vue.js is pretty neat. There's actually several things I'd rather be using than React and Redux. (Elm probably being numero uno)

The problem is that React is really good and the ecosystem and community around React is just so big making it hard to really hard for me to justify using something else.

Yeah that's definitely a big reason to go with React. The community is huge, support is easier to find, and there are a lot of good examples and libraries for React out there. It's pretty mature and a lot of big companies are using it successfully in production. Twitter just released their new mobile website using React, React-Router and Redux.

On the subject of react -- I recently had the time to go though a MobX tutorial and really enjoyed what I saw.

cZk fucked around with this message at 16:08 on May 3, 2016

Ghost of Reagan Past
Oct 7, 2003

rock and roll fun

IronDoge posted:

Angular 2 RC1 is out.
https://github.com/angular/angular/blob/master/CHANGELOG.md
Guess I should complete the intro to Angular 2 lesson I started a while back.
If I start using it for a project now, is it likely to break because of changes through release or is all that fixed?

Vulture Culture
Jul 14, 2003

I was never enjoying it. I only eat it for the nutrients.

Ghost of Reagan Past posted:

If I start using it for a project now, is it likely to break because of changes through release or is all that fixed?
Etiquette suggests that if you're going to call something a release candidate, the API is stable

Ghost of Reagan Past
Oct 7, 2003

rock and roll fun

Vulture Culture posted:

Etiquette suggests that if you're going to call something a release candidate, the API is stable
Well that's good, I think I might try it out then

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

Ghost of Reagan Past posted:

If I start using it for a project now, is it likely to break because of changes through release or is all that fixed?

The API interfaces have been pretty stable since it entered the beta phase, they've mainly just been doing bugfixes.

Ghost of Reagan Past
Oct 7, 2003

rock and roll fun
Anyone have any good tutorials for Angular 2? I'm somewhat familiar with Angular 1...

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

Ghost of Reagan Past posted:

Anyone have any good tutorials for Angular 2? I'm somewhat familiar with Angular 1...

A good warmup to that (if you have not already) would be to use TypeScript with Angular 1, and try to write your application using the .component (instead of .controller and .directive) introduced in Angular 1.5. This will get you more in line with some of the major design decisions for Angular 2.

After that, I'd take a look at these

https://github.com/DanWahlin/Angular2-JumpStart
https://github.com/johnpapa/angular-styleguide

HaB
Jan 5, 2001

What are the odds?
Am I alone in thinking it's kind of an odd decision for Google to double down on Typescript for Angular 2?

I routinely see ES6 out in the wild and we are even using it here for some things at CNN. But Typescript would be like spotting a Unicorn. I assume the Angular team has their reasons, but it still seems odd.

Gul Banana
Nov 28, 2003

it's a really good technology, and someone has to be first

Kekekela
Oct 28, 2004

HaB posted:

Am I alone in thinking it's kind of an odd decision for Google to double down on Typescript for Angular 2?
My impression of Google after Dart et al is that they hate the gently caress out of vanilla js.


quote:

it's a really good technology, and someone has to be first
Wise goons saying things like this makes me figure I'll check it out though.

Plavski
Feb 1, 2006

I could be a revolutionary

HaB posted:

Am I alone in thinking it's kind of an odd decision for Google to double down on Typescript for Angular 2?

I routinely see ES6 out in the wild and we are even using it here for some things at CNN. But Typescript would be like spotting a Unicorn. I assume the Angular team has their reasons, but it still seems odd.

Well it was a slow gestation for them: they started using AtScript, their own version of JS that used Decorators. Then they got TypeScript to add Decorators so went with them. They tooth and nail wrote everything in TS a couple years ago before ES6 standards were really in common usage. They're just sort of lashed to it now.

Not that I particularly mind as I love TypeScript.

But anyway, ya'll shouldn't be using Angular 2 cos it's non-standard garbage :)

http://aurelia.io/

Aurelia - it's like Angular 2 but standards compliant, smaller and faster. It's much nicer to code and has proper separation of church-and-state so your HTML and JS don't need to mix and get confusing as gently caress. We've adopted it for our next enterprise product and it's amazeballs. You don't have to teach anyone "aurelia" cos everything is pure standards-compliant HTML and JavaScript with only the barest of conventions. It's really, really nice and has skeletons in ES6 and TypeScript.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Oh dang I didn't know TS got decorators. Tell me it can make generators work interchangeably with arrays and other iterables like in Python without importing a monkey patch library and I might never bother with vanilla JS again.

lunar detritus
May 6, 2009


Munkeymon posted:

Oh dang I didn't know TS got decorators. Tell me it can make generators work interchangeably with arrays and other iterables like in Python without importing a monkey patch library and I might never bother with vanilla JS again.

Yup.
https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Iterators%20and%20Generators.md

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.




To clarify, I mean I want to be able to do thing.map() without having to check whether it's an array or a generator, which is not currently possible without monkey-patching the generator prototype in ES6 and doesn't seem to be part of ESnext, either. Strikes me as a silly oversight, too.

abraham linksys
Sep 6, 2010

:darksouls:

Plavski posted:

But anyway, ya'll shouldn't be using Angular 2 cos it's non-standard garbage :)

http://aurelia.io/

Aurelia - it's like Angular 2 but standards compliant, smaller and faster. It's much nicer to code and has proper separation of church-and-state so your HTML and JS don't need to mix and get confusing as gently caress. We've adopted it for our next enterprise product and it's amazeballs. You don't have to teach anyone "aurelia" cos everything is pure standards-compliant HTML and JavaScript with only the barest of conventions. It's really, really nice and has skeletons in ES6 and TypeScript.

explain to me how Aurelia is "more standards complaint" than Angular 2. Last I checked, Angular 2 doesn't require a bunch of non-standard APIs to be implemented in the browser running it or something. just because something has a build step doesn't make it "less standards compliant"

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

abraham linksys posted:

explain to me how Aurelia is "more standards complaint" than Angular 2. Last I checked, Angular 2 doesn't require a bunch of non-standard APIs to be implemented in the browser running it or something. just because something has a build step doesn't make it "less standards compliant"

More to the point, you CAN develop in pure ES6 if you really want to when using Angular 2.

Plavski
Feb 1, 2006

I could be a revolutionary

abraham linksys posted:

explain to me how Aurelia is "more standards complaint" than Angular 2. Last I checked, Angular 2 doesn't require a bunch of non-standard APIs to be implemented in the browser running it or something. just because something has a build step doesn't make it "less standards compliant"

Angular 2 uses non-standard HTML like ngFor. HTML is not case sensitive so angular 2 had to write their own HTML parser to handle case sensitive attributes because they don't follow standards.

Likewise their local variable definition uses #value which is not JavaScript standards and requires extra work by the library to handle. It also eschews the standards <template> convention to indicate HTML that is to be handled by a library in favour of its own method.

Angular 2 requires a lot more under the hood to make it work rather than using the standards that are part of the ES2015 definitions. Aurelia is made by a former angular 2 developer who quit Google because they were deviating so much from standards that it was turning into a difficult mess like angular 1 again.

For some more detail on Angular2's issues with compliance, see here: http://eisenbergeffect.bluespire.com/on-angular-2-and-html/

Plavski fucked around with this message at 09:41 on May 6, 2016

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

Plavski posted:

Angular 2 uses non-standard HTML like ngFor. HTML is not case sensitive so angular 2 had to write their own HTML parser to handle case sensitive attributes because they don't follow standards.

Likewise their local variable definition uses #value which is not JavaScript standards and requires extra work by the library to handle. It also eschews the standards <template> convention to indicate HTML that is to be handled by a library in favour of its own method.

Angular 2 requires a lot more under the hood to make it work rather than using the standards that are part of the ES2015 definitions. Aurelia is made by a former angular 2 developer who quit Google because they were deviating so much from standards that it was turning into a difficult mess like angular 1 again.

For some more detail on Angular2's issues with compliance, see here: http://eisenbergeffect.bluespire.com/on-angular-2-and-html/

I have a hard time believing it was just a "BUT STANDARDS! I will not stand by while you ruin the internet! For the greater good, I can no longer contribute to this monstrosity and therefore tender my resignation!"

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
In other Modern Front End Development News™ I am almost done writing a standards compliant ES6 app with React + Redux..... and I haven't imported either of them yet. To me that's the biggest reason to use that combo. I have a fully unit-tested set of actions / action-creators / reducers that handle the UI, calls to remote services, etc. and have yet to use any "framework" code at all. The meat of the app is 100% portable in case I decide to use a different framework (or use additional frameworks like react-native.)

Plavski
Feb 1, 2006

I could be a revolutionary

Skandranon posted:

I have a hard time believing it was just a "BUT STANDARDS! I will not stand by while you ruin the internet! For the greater good, I can no longer contribute to this monstrosity and therefore tender my resignation!"

It wasn't entirely that, but he worked as a consultant for 10 months and was told they were making this awesome, fully standards compliant, super great simple product. By the end that was nothing like the product they started out with so quit and made a new version of his old Durandal framework that didn't mix html and javascript and did have all that weird angular 2 stuff and stuck really closely to standards.

We really like it at our place and after trying to work with Angular1, Angular 2, React, Knockout and Ember, decided Aurelia was the best fit for us. It's really nice that when new people join the team they don't have to take a course on Angular or anything. They can just write ES6 JavaScript and HTML5 and that's it. The rest is just convention. YMMV, of course.

My Rhythmic Crotch
Jan 13, 2011

Hey guys, I could use some advice.

I need to do something bad and stupid that, ideally, you'd never do. I need to render a table full of poopy data that can be, let's say up to 2000 rows and 20 columns. If your first reaction is "that's too much data, why would you ever do that?" I totally agree. It's a business requirement. I'm currently using Knockout which has a badly broken "foreach" binding. After switching to fast-foreach I was able to eliminate 60+ seconds of rendering latency. There is still what appears to be about 5-6 seconds worth of rendering latency. My boss is a performance freak and wants that last 5 seconds gone, as much as possible. (Note: fast-foreach is doing some kind of batched/staged rendering or something, making it difficult to time accurately with simple console.time calls.)

So I am looking at some options to eek out more performance.
- try to somehow pull out as many data-binds as possible in the current Knockout code. I quickly tried this and was able to save an easy ~1 second, but more will be hard without wrecking the code.
- raw string "templating" -> insert once into the DOM
- simple templating like mustache or ICanHaz (I have not benchmarked these, so they may well be too slow)
- use React
- ???
- tell boss it ain't happening

Any experience or advice would be most welcomed.

My Rhythmic Crotch fucked around with this message at 03:07 on May 7, 2016

Depressing Box
Jun 27, 2010

Half-price sideshow.

My Rhythmic Crotch posted:

Hey guys, I could use some advice.

I need to do something bad and stupid that, ideally, you'd never do. I need to render a table full of poopy data that can be, let's say up to 2000 rows and 20 columns. If your first reaction is "that's too much data, why would you ever do that?" I totally agree. It's a business requirement. I'm currently using Knockout which has a badly broken "foreach" binding. After switching to fast-foreach I was able to eliminate 60+ seconds of rendering latency. There is still what appears to be about 5-6 seconds worth of rendering latency. My boss is a performance freak and wants that last 5 seconds gone, as much as possible. (Note: fast-foreach is doing some kind of batched/staged rendering or something, making it difficult to time accurately with simple console.time calls.)

So I am looking at some options to eek out more performance.
- try to somehow pull out as many data-binds as possible in the current Knockout code. I quickly tried this and was able to save an easy ~1 second, but more will be hard without wrecking the code.
- raw string "templating" -> insert once into the DOM
- simple templating like mustache or ICanHaz (I have not benchmarked these, so they may well be too slow)
- use React
- ???
- tell boss it ain't happening

Any experience or advice would be most welcomed.

I haven't used it in a project yet myself, but this seems like the exact use case for something like React Virtualized.

My Rhythmic Crotch
Jan 13, 2011

Thanks, I will put that on the list.

karms
Jan 22, 2006

by Nyc_Tattoo
Yam Slacker
You could also render the first x amount of rows, display them, then add the rest in batches while the user has something to look at.

I say this because I don't like how endless scrolling works. I don't know if this is applicable (seeing as you already have all the data needed and endless scrolling makes new calls whenever the user scrolls) but I don't like to wait for the new content to appear every time I scroll down.

Depressing Box
Jun 27, 2010

Half-price sideshow.

KARMA! posted:

You could also render the first x amount of rows, display them, then add the rest in batches while the user has something to look at.

I say this because I don't like how endless scrolling works. I don't know if this is applicable (seeing as you already have all the data needed and endless scrolling makes new calls whenever the user scrolls) but I don't like to wait for the new content to appear every time I scroll down.

React Virtualized is more of a general-purpose virtual scrolling library than endless scrolling, in that it delays the rendering of data that may have already been retrieved. It also allows you to set an "overscan", or amount of rows/columns beyond the current view to pre-render, which can remove the scrolling delay.

I mean, given that it works via a function that returns data for a given index, you could connect that to an Ajax call or equivalent, but I think they were looking to efficiently render a large amount of data they already had in full, which would avoid the infinite scrolling latency issue.

consensual poster
Sep 1, 2009

My Rhythmic Crotch posted:

Hey guys, I could use some advice.


The basic idea behind the solution to this problem is that you can't possibly see 2000 rows of data, so don't render what you can't see. Put your grid inside of a scrollable container. The math to determine what slice of your data to render is pretty trivial based on the size of the container, the scrollTop property, and the height of each row.

My Rhythmic Crotch
Jan 13, 2011

I've dropped a batch rendering thing into the page, which just simply continues to render but leaves the page usable while it's doing its thing. Hopefully that will sate the boss's need for speed, but if not, virtual scrolling, pagination, and/or other shenanigans will be tried next.

My Rhythmic Crotch fucked around with this message at 02:15 on May 9, 2016

PlaneGuy
Mar 28, 2001

g e r m a n
e n g i n e e r i n g

Yam Slacker
knockout is so slow at rendering jesus christ

It looks like you're not editing the data in these rows so I'm feeling your templating idea might work?

If you gotta keep it "knockout-ey" you could hide it in a custom element

code:
<!-- main page or component -->
<stupid-list params="things:stupidThings"</stupid-list>
code:
<!-- stupid-list html -->
<div data-bind="html:$component.html"></div>
code:
//stupid-list's vm
function StupidList(params){
    this.html=ko.pureComputed(function(){
       return params.things.reduce(function(txt,thing){ return txt + TEMPLATEME(thing);},'');
    });
}
this is all out of my rear end ymmv

Kobayashi
Aug 13, 2004

by Nyc_Tattoo
I have a very, very large project that uses LESS on the frontend. I'd like to integrate Zurb's Foundation Emails, which is written in SASS. Is there any non-idiotic way to integrate the two? Right now I'm considering some kind of awful two-phase compile process, where I have a small shim SASS file to override Foundation defaults and then the compiled CSS is imported to a LESS file, where all the project-specific classes are defined.

The other option I am considering is just going with SASS for the email component, and while that is good because it offloads the problem of figuring out how to support a million email clients onto Zurb, it creates a separation from the rest of the frontend, which will invariably mean the email styles will get out of sync with the rest of the project.

E: What I'd really like is to convert SASS to LESS. I see there's grunt-refactor but alas, the project uses Gulp.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Kobayashi posted:

I have a very, very large project that uses LESS on the frontend. I'd like to integrate Zurb's Foundation Emails, which is written in SASS. Is there any non-idiotic way to integrate the two? Right now I'm considering some kind of awful two-phase compile process, where I have a small shim SASS file to override Foundation defaults and then the compiled CSS is imported to a LESS file, where all the project-specific classes are defined.

The other option I am considering is just going with SASS for the email component, and while that is good because it offloads the problem of figuring out how to support a million email clients onto Zurb, it creates a separation from the rest of the frontend, which will invariably mean the email styles will get out of sync with the rest of the project.

E: What I'd really like is to convert SASS to LESS. I see there's grunt-refactor but alas, the project uses Gulp.

modernFrontEnd.txt

M31
Jun 12, 2012
Does it really matter? Just run the grunt task (outside of the project build process) and include the resulting files.

Adbot
ADBOT LOVES YOU

Plavski
Feb 1, 2006

I could be a revolutionary
In that vein, you could use gulp-grunt to run the grunt task from gulp.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply