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

Sedro: Dec 31, 2008

Ember newbie question:

I'm trying to change this master/detail example. I want to add a "users" route instead of using the application route. Here is my attempt. How can I get the links to work?

Edit: figured it out

Sedro fucked around with this message at 17:05 on Dec 12, 2013

# ¿ Dec 12, 2013 01:25

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 08:06

Sedro: Dec 31, 2008

Using ember.js, how can I render a template to a HTML string?

I'm integrating with a third-party component which sticks the HTML into a jQuery selector. In other words, I have control over the callback:

JavaScript code:

// third-party code
$( myCallback(modelObject) ).insertAfter( someElement );

This seems horribly wrong

JavaScript code:

myCallback: function(model) {
  var view = App.MyView.create();
  view.createElement();
  var element = view.get('element');
  return element.outerHTML;
}

# ¿ Jan 14, 2014 01:53

Sedro: Dec 31, 2008

Kobayashi posted:

Not really sure how to Google for this, but for modern Javascript, what kind of style recommendations are there for quotes vs. double quotes? Sometimes people seem to use double quotes extensively. Others use single quotes. I cut my teeth on C-like languages and Perl, so by habit I tend to only use double quotes for interpolation or escaped characters, but I wondered if modern JS has other conventions?

Github is about 50/50 source

# ¿ May 9, 2014 20:13

Sedro: Dec 31, 2008

A route isn't associated with a single model instance. The route is a singleton which loads one model at a time (for example, by using JQuery to call a REST API).

When the user navigates to /#/thing/123, the router calls the model hook with the thing ID, ThingRoute.model({ id: 123 }). The model hook returns the corresponding model, which can be a plain JS object, an Ember.Object, or a promise which resolves to either of those. The router sets the model property on ThingController, which is a singleton acting as a proxy to the model.

# ¿ Aug 13, 2014 21:48

Sedro: Dec 31, 2008

fuf posted:

Couldn't find anything on didInsertView but I think you meant didInsertElement - and that works! Thanks

There are also some methods on Function.prototype which can be chained together

JavaScript code:

App.IndexView = Ember.View.extend({
  doStuff: function() {
    // Ember will call the function
    //  1. after the view is added to the DOM
    //  2. before the view is removed from the DOM
    //  3. whenever `someProperty` changes
    // You can also invoke it yourself e.g. this.doStuff()
  }.on('didInsertElement', 'willDestroyElement').observes('someProperty')
});

# ¿ Sep 4, 2014 22:32

Sedro: Dec 31, 2008

If you drill down in the dependencies, ember-cli uses the official handlebars precompiler. It probably doesn't minify the HTML (there is a minify option which I think refers to the JS output).

If you're using gzip compression (which you should) I wouldn't expect to see much savings anyway.

# ¿ Nov 11, 2014 21:49

Sedro: Dec 31, 2008

Wheany posted:

Ember question:

I want to show an InfoWindow when a user clicks a Google map marker.

I have a class for the map markers, they seem to work fine, their positions and visibility and all that update automatically when the underlying Ember-object changes.

But for the InfoWindow, I need a HTML text. Apparently there isn't a way to render a template file to string, then set that as the contentString of the InfoWindow. You can call Ember.Handlebars.compile to compile a template, but you need a template string for that.

Now I can just supply it with a template in JS code, but that kind of defeats the point of having template files.

Can I render a template file to a string and if so, how?

You can bind a view's template name to a property on your controller/model.

Here's a jsbin I threw together.

# ¿ Jan 12, 2015 20:21

Sedro: Dec 31, 2008

Cool, I'm glad that helped.

# ¿ Jan 19, 2015 20:20

Sedro: Dec 31, 2008

Mr Shiny Pants posted:

Seeing that I just started using it and already running into this, I would say hardly.

Edit: After doing some more research: Maybe I am misunderstanding these frameworks but is it really hard to create something like a drill-down?

Have a top level, click on it, it's child items appear, click on child item and it's child items appear.

This seems like something you would really want, and it looks to be really hard if I look at Backbone relational and all the other frameworks.

This is exactly what ember is designed for, with nested routes and outlets

# ¿ Feb 9, 2015 21:19

Sedro: Dec 31, 2008

Even if node/npm support Windows, most projects I've built from source don't. The build instructions will fail with a useless error message like EACCESS. npm install usually works, but sometimes it takes a few tries. I gave up trying to develop with node on Windows.

# ¿ Apr 9, 2015 07:29

Sedro: Dec 31, 2008

mpaarating posted:

I had the same issues. I tried to setup a dev environment for node on my desktop thinking that it would be more comfortable but the amount of hassle isn't worth it. Instead I just slouch and drink single origin espresso straight out of a chemex glass while covering my 2006 MBP in ember stickers.

Ember is one of those projects that won't build on windows :argh:

# ¿ Apr 9, 2015 17:28

Sedro: Dec 31, 2008

TheDestructinator posted:

I'm working on an Ember app and I'm having trouble wrapping my brain around handling the DOM and components. I have a companies model that will display every company in the database and will expand to show the jobs that are available at the company:

1) You shouldn't give DOM elements an ID if you are creating several of them. Get rid of "js-expander-trigger"
2) $('#js-expander-trigger') finds all elements in the entire document. Inside a component, this.$ will give you a jQuery object scoped to the component. Change your code to: this.$('.expander-trigger').click(...)

# ¿ Dec 15, 2015 18:46

Sedro: Dec 31, 2008

Let management write the code, then.

# ¿ Dec 22, 2015 05:34

Sedro: Dec 31, 2008

Odette posted:

To anyone else that's using sudo to globally install npm packages, this is generally considered bad practice. Do this or that instead.

There's also nvm

# ¿ Jan 3, 2016 04:58

Sedro: Dec 31, 2008

You put a column inside a column. Get rid of this outer div:

code:

                <div class="form-group">
                    <div class="col-xs-12 col-sm-9">    <!-- remove this one -->
                        <div class="col-xs-12 col-sm-6">
                            <div class="input-group">

# ¿ Feb 10, 2016 00:43

Sedro: Dec 31, 2008

You have a second problem. You can only put a column inside a row (or a form-group acting as a row)

code:

<form class="form-horizontal">
    ...
    
    <div class="col-xs-12 col-sm-2 control-label">     <!-- this column needs to be inside a row -->
        <label>Date &amp; Time</label>
    </div>

# ¿ Feb 10, 2016 01:41

Sedro: Dec 31, 2008

huhu posted:

I could have sworn I read recently that it's now acceptable to wrap li tags in a tags. Guess not. That fixed it.

Every `li` in your markup is the last-child within its parent `a` tag

# ¿ Oct 6, 2016 01:28

Sedro: Dec 31, 2008

Redmark posted:

Does that work with the Linux subsystem? I admit that I don't really know much about the internals but as far as I can tell normal Windows processes can't access the other side's filesystem, though you can the other way around.

ConEmu isn't a shell, it's a better GUI to the shell of your choice. It should work with anything.

# ¿ Nov 4, 2016 19:30

Sedro: Dec 31, 2008

The Wizard of Poz posted:

One of the things I've always really struggled to wrap my head around whenever I look into modern front-end stuff, is how on earth does this stuff scale to a full-sized app? The guides and tutorials I often come across are so contrived and tend to just throw everything together into one file for the sake of brevity, but I feel like none of them do a very good job of explaining how you should lay out all of your source files and manage the pipeline involved in "building/compiling/transpiling/whatever" and then deploying the app. Does anyone have a good example of a github project, or a tutorial or something that covers this stuff? I'm looking for something a little more "real world" than adding and removing items from a <ul>.

Have a look at Ember, and in particular Ember-CLI which describes the project structure and build system. The other frontend frameworks are developing similar tools but Ember's is the oldest and most mature.

# ¿ Jan 24, 2017 23:09

Sedro: Dec 31, 2008

Thermopyle posted:

There's something wrong here. It should have gotten significantly faster over the past few versions as they turned on their "zero-latency" typing technology in Webstorm this past December.

I confess that while I recommended Webstorm, I actually use PyCharm or IDEA as I do full stack...I just said Webstorm because its for frontend and PyCharm/IDEA are supersets of Webstorm.

That being said, some people are IDE people some people are text editor people...

It's the first time I've heard of their "zero-latency" tech. Apparently it's enabled by default since version 2017.1, but I haven't noticed any difference :shrug:

Maybe I'll experiment with the JVM args

# ¿ Jun 28, 2017 04:10

Sedro: Dec 31, 2008

Ruggan posted:

Yeah, that makes sense, except I'm not sure where to get the user and password, unless I'm expected to ask the user which I don't want to do.

In the .NET world, I can detect the browsing user's windows login in a controller and use that to control security. For instance, at my company, I can get data on that user based on windows login and determine if they're a manager, then use that to grant or deny access to certain things. This all happens under the hood with Active Directory and to the end user it's seamless.

If I'm abstracting this away into a Web API, I need some way to pass that info to the API from my app (via fetch I presume) and I want to be able to do this automatically - no login screen or anything. So it needs to be passthrough authentication or something like that. Is there a fetch setting that will pass windows auth through to a web API?

If your backend API supports Windows auth, the browser will take care of it without any extra code on the frontend

# ¿ Sep 26, 2017 02:48

Sedro: Dec 31, 2008

Lumpy posted:

My Telerik anecdote is from a few jobs ago when our .NET guy went to a Telerik training thing and was all excited about using their stuff and was loving life for a couple weeks then wanted to do something slightly different / display data in a way not provided for by the default setup, spent the next few weeks cursing Telerik, then the next few weeks after that re-doing everything to not use their stuff any more.

I'm stuck on the last step

# ¿ Oct 11, 2017 22:12

Sedro: Dec 31, 2008

Kobayashi posted:

I�m looking for a Node framework to complement Ember on the frontend. Specifically, I�d like something opinionated like Ember, with a focus on tooling and stability. I�m only a hobbyist, so I appreciate structure. Any suggestions for what I should look at? It seems like there are a lot of dead frameworks for Node...

You could see if there's a decent JSON API server implementation, and pick up whichever middleware it supports

http://jsonapi.org/implementations/#server-libraries-node-js

# ¿ Oct 14, 2017 02:12

Sedro: Dec 31, 2008

geeves posted:

Webpack question: How does ~12kb of imports turn into 200kb when transpiled and bundled? These are all small global helper methods and static objects. ~ 7 files overall.

https://www.npmjs.com/package/webpack-bundle-analyzer

# ¿ Nov 9, 2017 05:33

Sedro: Dec 31, 2008

Thermopyle posted:

It's not uncommon for me to find bugs in DefinitelyTyped type declarations. This manually-maintained system of types has always rubbed me the wrong way a little bit. How confident should I be that the author correctly implemented the types the JS library actually uses? My anecdotal observation leads me to think "not very confident". (of course, it's often good enough)

I'd rather see some runtime instrumentation for debug builds, to raise an error if anything ever contradicts the type declaration

# ¿ Nov 10, 2017 04:19

Sedro: Dec 31, 2008

Grump posted:

so basically I don't want to generate a .map file in production code ever, right?

You always want to have the source maps associated with the build, but you might not want them public since it's effectively making your source code public. If you don't care about that, then sure make the source maps available, it's much less hassle if you ever need to debug something.

# ¿ Nov 27, 2017 19:34

Sedro: Dec 31, 2008

Lumpy posted:

Your production build should not have maps and should be as small as possible. This has nothing to do with hiding code, it's because small builds load faster. The builds you debug on can have whatever you want, since they aren't public.

There shouldn't be any performance difference. Source maps are served separately from the javascript and the browser only requests source maps if the debugger is open. Unless the source maps are inlined. Don't do that

# ¿ Nov 30, 2017 03:08

Sedro: Dec 31, 2008

Thermopyle posted:

There's different things conspiring to make inline source maps easier or even the only thing possible in some cases...but I can't remember what those things are!

(maybe they're not even applicable nowadays)

Maybe when JS build pipelines couldn't handle source maps properly? Those days are history, surely.

(If only that were the case. Babel doesn't even output valid source maps.)

# ¿ Nov 30, 2017 04:24

Sedro: Dec 31, 2008

A simple templating language is easier to optimize for.

https://www.youtube.com/watch?v=nXCSloXZ-wc

# ¿ Jan 18, 2018 16:48

Sedro: Dec 31, 2008

smackfu posted:

Just curious, how was npm unreliable for you? We really haven�t seen any reliability issues on our team.

npm is unreliable by design if you don't use a lockfile and npm shrinkwrap was broken for as long as I used npm. yarn came along with working lockfiles and much better performance to boot. npm might be better now but there's no incentive for me to switch back.

# ¿ Feb 27, 2018 20:33

Sedro: Dec 31, 2008

Analytic Engine posted:

Is there a big security risk associated with enabling cross origin resource sharing on a website? I added flask-cors so that my Flask backend can serve CSV files to my React frontend and I'm not sure what kind of Pandora's box I'm opening.

Yes, it's the same risk as CSRF but for any requests you allow, from any domains you allow.

# ¿ Mar 5, 2018 03:03

Sedro: Dec 31, 2008

prom candy posted:

I'm trying to get an ember 1.x app that I built 3 years ago working locally and holy poo poo what a nightmare. Nothing is compatible with anything. The version of ember-cli doesn't seem to work with versions of node past 0.x, I can't use yarn, the whole thing predates the idea of automatic version locking, and this was my first modern JS application so nothing makes any god drat sense! I almost want to just tell the client that the app is now a delicately preserved artifact and disturbing it ever so slightly could bring the whole thing down. They declined any long-term support or updates so it's just been sitting.

I think ember-cli is backwards compatible to 1.x, so you can bring your tooling up to date before touching the app. Upgrading the app might be a lot of effort.

# ¿ Mar 20, 2018 00:52

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 08:06

Sedro: Dec 31, 2008

ynohtna posted:

I'm probably remembering this wrong, but I think you have to call a done() method when an asynchronous test completes in mocha.

It also works to return a promise (which it does by making it async)

# ¿ Mar 24, 2018 01:34

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