|
my bony fealty posted:I've been asked by a coworker to take a look at an online application form our clients use that is rather user unfriendly and apparently has a high rate of abandonment before completion. It's written in vanilla JS and is spread across several pages. He wants me to mock up a more modern version that's easier to use and fully responsive. I was going to just make something simple with JS and a better design, but I want to try using one of the more modern frameworks. Since I'm doing this as a favor and not writing anything that will actually be deployed to the wild, I'm not worried about having production-quality code in the first version. Ask 100 people and you will get 100 answers. I would go with Angular 1.x as well, but that's only because I'm most familiar with it. A ReactJS guy would tell you React. My one piece of advice should you try to do it in Angular: embrace Angular. Fully. It sucks if you can't immediately figure something out and just go "I'll just do this part in jQuery real quick because I know how." That will only cause you problems later. Try to do everything the Angular "way." But for any library, do some tutorials, maybe read the style guide. If you like it, use it. If not - there are a billion other frameworks with a billion other tutorials out there. And I agree with Skandranon that you shouldn't worry about Angular 1.x not being supported. It has at least two years, and they have already stated plainly that despite initial statements to the contrary, there will be a CLEAR upgrade path from 1.x -> 2.x So no worries.
|
# ? Jul 11, 2015 19:31 |
|
|
# ? Jun 9, 2024 03:14 |
|
bartkusa posted:The "fastest" way to "visually display" backend data is to dump the data as an HTML table to the browser; no JS needed. There would be some line and bar charts, but I was playing with the interactive ones like the zoomable sunburst that looked neat. If I wanted to do the sunburst one: start at a high level, like one of our products, and be able to reach down multiple levels to arrive at the doctor/patient level data.
|
# ? Jul 11, 2015 19:42 |
|
kloa posted:There would be some line and bar charts, but I was playing with the interactive ones like the zoomable sunburst that looked neat. Any d3 hierarchical layout like partition (sunburst is just a radially projected partition) just requires that you nest your data into the required format. You can easily make your data fit the examples and look into d3.nest if you want that to be dynamic. As was said earlier, if you just want line charts, bar charts and pie charts, use a different library (or one of the libraries built on d3, like NVD3, dc.js or whatever) but as soon as you want to do something weird, even though some of those libs do things like network visualization and sunbursts, you're almost always going to want to roll your own in D3. And there really isn't any other data visualization library in js to do that, unless you want to make cool art with HTML5 Canvas, in which case look at P5.
|
# ? Jul 11, 2015 20:26 |
|
TildeATH posted:And there really isn't any other data visualization library in js to do that, unless you want to make cool art with HTML5 Canvas, in which case look at P5. I think React can output SVG. D3 has some nice SVG helpers, and has an easier time coping with exit-animations, but React's ease-of-use might be more useful for someone getting started.
|
# ? Jul 11, 2015 22:52 |
|
bartkusa posted:I think React can output SVG. D3 has some nice SVG helpers, and has an easier time coping with exit-animations, but React's ease-of-use might be more useful for someone getting started. React also plays nice with d3
|
# ? Jul 12, 2015 04:02 |
|
Lumpy posted:React also plays nice with d3 Curious how this is since both d3 and react seem to want to be the ones to control the DOM.
|
# ? Jul 12, 2015 08:02 |
|
The Journey Fraternity posted:Curious how this is since both d3 and react seem to want to be the ones to control the DOM. Me too. React hates state, whereas D3 seems stateful as fuuuck.
|
# ? Jul 12, 2015 08:42 |
|
The Journey Fraternity posted:Curious how this is since both d3 and react seem to want to be the ones to control the DOM. bartkusa posted:Me too. React hates state, whereas D3 seems stateful as fuuuck. There are a million billion tutorials / libraries out there.
|
# ? Jul 12, 2015 13:43 |
|
I tried out using some d3 with react and I basically ended up having react make an empty svg component and throwing all the d3 stuff into componentDidMount so that it could do its thing after the page rendered. Something similar to this.
|
# ? Jul 12, 2015 19:27 |
|
Mahatma Goonsay posted:I tried out using some d3 with react and I basically ended up having react make an empty svg component and throwing all the d3 stuff into componentDidMount so that it could do its thing after the page rendered. Something similar to this. That's one way to do it but it's frowned upon because in that case D3 becomes like a Flash or Java applet. You can create SVG with React fine but then D3 is just for layouts and drawing functions. There are some good examples but they fall into three camps: 1. D3 as a black box using componentDidMount to pass the DOM node to a D3 function that handles everything without being part of the React lifecycle. 2. React handles all the enter/exit/update and D3 is just used for scales and drawing and laying out. 3. Various Frankenstein's monster mixes of the above two.
|
# ? Jul 12, 2015 20:49 |
|
I know React gets a lot of love round these parts, but has anyone given Vue.js a go? How did you find it? I have a project that's going to need a bunch of widgets, and rather than slap together some jQuery monstrosity I'm going to embrace modern JS for once.
|
# ? Jul 24, 2015 23:09 |
|
Heskie posted:I know React gets a lot of love round these parts, but has anyone given Vue.js a go? How did you find it? Then use React. Vue might be great, but React is going to be (obviously this is my opinion!!!) The Way Web Things Get Made™ for the next several years. The main reason for this (obviously, my opinion again) is that it does just about everything right. The only thing that the React ecosystem needs to figure out is which Flux implementation (or two) will "win" and become the standard. But seriously: do your stuff in React. Not only will you (my opinion, blah blah...) love it, but you'll be ready to rock as React becomes how everything new gets made. Obviously if you know React and are just looking for something to play with for fun, then completely ignore me.
|
# ? Jul 24, 2015 23:59 |
|
Speaking of reactive things, I'm playing around in Meteor and I have a question about rerendering templates with a different data context. Specifically, I have a template where the routing (using iron router) looks like this:code:
|
# ? Jul 26, 2015 01:58 |
|
Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4.
|
# ? Jul 28, 2015 06:14 |
|
Tao Jones posted:Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4. egghead.io, pluralsight, todd motto's blog, john papa's blog, and scotch.io all have some good resources for learning. I'd start with egghead. This is a nice little tutorial app from egghead: https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started edit: This style guide is what we use and it helps to make things far more organized and clear https://github.com/johnpapa/angular-styleguide mpaarating fucked around with this message at 14:55 on Jul 28, 2015 |
# ? Jul 28, 2015 14:31 |
|
mpaarating posted:egghead.io, pluralsight, todd motto's blog, john papa's blog, and scotch.io all have some good resources for learning. I'd start with egghead. Agreeing with all of this, but I will add one caveat: When I was learning angular, and even to this day - I don't know of a tutorial that shows you a "real-world" scenario very well. Most will teach you one tiny aspect of angular, but don't give any advice as far as laying out a large-ish production application. For example most tutorials put the js inline, or stuff all the controllers in controllers.js, services in services.js, etc. That works fine for something tiny, but becomes unwieldy SUPER fast if you have more than say 2-3 controllers/services. How to layout the project can quickly become a religious argument, so I won't bother suggesting anything outright, but I'm just saying: use the tutorials to get concepts, and to get "how it works" but don't rely on them for "how to ACTUALLY do it" in a real-world scenario.
|
# ? Jul 28, 2015 15:14 |
|
HaB posted:How to layout the project can quickly become a religious argument, so I won't bother suggesting anything outright, but I'm just saying: use the tutorials to get concepts, and to get "how it works" but don't rely on them for "how to ACTUALLY do it" in a real-world scenario. Yes, most of the tutorials are bad about showing real world examples but that's where John Papa's style guide comes into play and his Angular Clean Code course on Pluralsight addresses some of the issues with architecting a large angular app. Alternatively, Todd Motto's style guide is also very helpful (but a bit different from Papa's). edit: In addition, I highly suggest listening to the Adventures in Angular podcast and watching some of the ng-conf (and other angular convention) videos. This is a particularly interesting one for modularizing large angular components: https://www.youtube.com/watch?v=dF_ObGgzGE8 mpaarating fucked around with this message at 15:42 on Jul 28, 2015 |
# ? Jul 28, 2015 15:25 |
|
Tao Jones posted:Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4. NG-Book does a good job of presenting things the Angular Way, and gives some better examples of how largish things go. I would also suggest using Typescript, it's class & module semantics lend itself very well to bundling up your Controllers & Directives in a meaningful way. Your controllers are classes, put fields on your controller classes, and use the BindToController & ControllerAs directive flags to avoid using scope & scope inheritance for anything. Use a message bus like AmplifyJS or Postal to communicate across controllers.
|
# ? Jul 28, 2015 15:57 |
|
Skandranon posted:I would also suggest using Typescript, it's class & module semantics lend itself very well to bundling up your Controllers & Directives in a meaningful way. Your controllers are classes, put fields on your controller classes, and use the BindToController & ControllerAs directive flags to avoid using scope & scope inheritance for anything. Use a message bus like AmplifyJS or Postal to communicate across controllers. This is a great suggestion. Our large application would be made so much easier with the adoption of TS. edit: speaking of BindToController: http://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/
|
# ? Jul 28, 2015 16:26 |
|
I also want to add that I think ngbp (formerly ng-boilerplate) is a great way to get up and running. Its methodology for organizing sections of site and functionality into standalone modules simplifies reuse later on down the line: https://github.com/ngbp/ngbp The gist of it is that each module is contained within a folder as a template HTML file, a Javascript file, and a file defining tests for whatever's in the Javascript file. In addition, each Javascript file defines the URL path to itself, making it much easier later on to reuse that particular "module" in another site. It's been working well for me and I only started using Angular three or four months ago.
|
# ? Jul 28, 2015 16:35 |
|
Karthe posted:I also want to add that I think ngbp (formerly ng-boilerplate) is a great way to get up and running. Its methodology for organizing sections of site and functionality into standalone modules simplifies reuse later on down the line: https://github.com/ngbp/ngbp The only issue with it, is that it is a bit outdated (it's not been updated in a year). I would also say that one should definitely use gulp over grunt for a large application. It matters less for small applications but gulp gives you the flexibility to write a lot of custom build processes more easily than grunt does.
|
# ? Jul 28, 2015 16:41 |
|
mpaarating posted:edit: In addition, I highly suggest listening to the Adventures in Angular podcast and watching some of the ng-conf (and other angular convention) videos. This is a particularly interesting one for modularizing large angular components: https://www.youtube.com/watch?v=dF_ObGgzGE8
|
# ? Jul 28, 2015 17:41 |
|
mpaarating posted:The only issue with it, is that it is a bit outdated (it's not been updated in a year). I would also say that one should definitely use gulp over grunt for a large application. It matters less for small applications but gulp gives you the flexibility to write a lot of custom build processes more easily than grunt does. As for gulp, I might start agreeing with you on that. I've been using bower just because it was included in ngbp, but another boilerplate kit I've started playing around with uses gulp and I like its "test server" setup a lot better. I might try and move my grunt project to gulp just for that.
|
# ? Jul 28, 2015 17:50 |
|
Karthe posted:Thanks for bringing up the outdated dependencies, I forgot that I had to go in and manually update everything to get it up to date. BrowserSync works even better, it will refresh your browser whenever things change in your gulp.watches
|
# ? Jul 28, 2015 17:53 |
|
Skandranon posted:BrowserSync works even better, it will refresh your browser whenever things change in your gulp.watches
|
# ? Jul 28, 2015 18:05 |
|
Karthe posted:That's exactly what I've been using, and it's scary how quickly the page reloads when I use gulp: by the time I alt+tab back it's already done. The combination of grunt plus the LiveReload browser plugin feels super slow now in comparison. With BrowserSync I sometimes have to reload the page because I can't believe it's already updated. Lol, I experienced that as well. I do think the ngbp is a good place to start for beginners with small apps, but for larger apps I doubt he'll want to use a boilerplate. Too much ~magic~.
|
# ? Jul 28, 2015 19:12 |
|
One of the nice things about gulp is that it uses a virtual file format, so stuff flowing between pipes stays in memory until it's finally written to disk. Tasks are also launched in parallel, so they shouldn't end up blocked on file read/write operations.
|
# ? Jul 28, 2015 20:16 |
|
Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it. I almost always use npm as my build tool nowadays.
|
# ? Jul 28, 2015 20:34 |
|
Thermopyle posted:Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it. That's a good point. I've not taken the time to try out a build process in npm yet due to all my boilerplate stuff being in gulp but I remember this article being interesting. edit: god I'm bad at bbcode mpaarating fucked around with this message at 20:49 on Jul 28, 2015 |
# ? Jul 28, 2015 20:45 |
|
Does anyone know how to profile DOM parsing/tree creation? I'm tuning a production site that has some crappy Google PageSpeed metrics and I noticed that there's a 1500 ms gap between receiving the document and fetching any additional resources. I've never seen anything like it, and it's not due for a rewrite for at least a few months.
|
# ? Jul 29, 2015 01:34 |
|
Helicity posted:Does anyone know how to profile DOM parsing/tree creation? I'm tuning a production site that has some crappy Google PageSpeed metrics and I noticed that there's a 1500 ms gap between receiving the document and fetching any additional resources. I've never seen anything like it, and it's not due for a rewrite for at least a few months. You can get some pretty good information using Chrome's Timeline profiling. It will show you how much and when various parts of the rendering process are happening.
|
# ? Jul 29, 2015 01:45 |
|
Skandranon posted:You can get some pretty good information using Chrome's Timeline profiling. It will show you how much and when various parts of the rendering process are happening. edit: VVVV hell yeah, that's good stuff, especially sections 2+3 luchadornado fucked around with this message at 03:25 on Jul 29, 2015 |
# ? Jul 29, 2015 02:47 |
|
Helicity posted:Yeah, I've been using that but it seems to be more geared towards profiling Javascript. I think my issues are with inefficient DOM parsing, but I'll keep chugging along - thanks! This article could be helpful in identifying ~some~ of the slow downs.
|
# ? Jul 29, 2015 03:05 |
|
Tearing my hair out here. We're building a web application. One of the things this web application has to do is serve videos in a Html 5 video player. Users upload videos, videos are transcoded to H264 mp4, and those videos are then served to users to play in the video player. This works on Chrome on both Windows and Linux, and this works on Firefox on Windows - But not Linux. I get a "Media resource could not be decoded" error in the browser console. Googling around, I discovered that Ubuntu 14.04 (which is what I was using) doesn't come with a H264 codec out of the box. Okay, fine - I installed the codec, but it still doesn't work. What could possibly be causing this? Codec is present, as evidenced by the fact that Chrome on that same Linux test machine works.
|
# ? Jul 29, 2015 14:34 |
|
Geisladisk posted:Tearing my hair out here. Codec doesn't register with Firefox, so it still thinks it's not there?
|
# ? Jul 29, 2015 14:49 |
|
Skandranon posted:Codec doesn't register with Firefox, so it still thinks it's not there? How can I check if that's the case, and if so fix it? e: I don't think that's it, the youtube html5 test page says the browser supports H264. ee: I had to enable MSE (http://www.ghacks.net/2014/07/25/enable-mse-h2-64-support-youtube-firefox-right-now/), it works now. Geisladisk fucked around with this message at 15:45 on Jul 29, 2015 |
# ? Jul 29, 2015 14:50 |
|
Thermopyle posted:Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it. I use NPM as a build tool when I can but then package.json happens and there's no way to add comments with some horribly convoluted hack because web development.
|
# ? Jul 29, 2015 15:17 |
|
Ok, so I'm a little confused on this: 1) According to the events, there is nothing happening between Timer Fired (2463) and Finish Loading, yet there is a ~100ms gap. I see a few instances like this. What the hell is actually happening in there? 2) When I press Ctrl+R to reload the page and start a new capture, I have a whole bunch of Ad stuff and beforeunload events before I ever see the request/response for my page's main document. Is that leftover transactions from the previous page finishing up? Is there any way to stop that?
|
# ? Jul 29, 2015 19:54 |
|
Helicity posted:Ok, so I'm a little confused on this: It starts logging everything once you hit the record button, and doesn't clear stuff when you refresh. I usually start up a new Incognito tab, start recording, then load the page. Then you can see a clear 0-60 loading of your page, instead of some assets unloading and other loading. As for the timer thing, I would guess it's doing nothing as it waits on the results of an HTTP call. Hard to tell just from the picture though.
|
# ? Jul 29, 2015 20:14 |
|
|
# ? Jun 9, 2024 03:14 |
|
Hey all, I'm working on a conference proposal talk and would like to get a feel for what kind of things people would like to hear in it. The title is want to use if I was allowed would be "Unfuck your poo poo show of a toolchain" but I'll have to settle with "Fix yo toolchain". I want to focus on a bunch of little/large things + code snippets people can use to make their build tools less annoying to use in day to day. Better watching, stable incremental builds, good error handling, that kind of thing. Some of the focus is also going to be on fixing build systems so they're not constantly tripping up junior devs as well. I was more or less wondering just what particular things folks hate about build systems, task runners, etc these days.
|
# ? Aug 3, 2015 13:31 |