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

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Very interesting perspective Mr. Wynand, just wanted to say thanks for sharing your experience!

# ¿ Mar 21, 2014 04:39

Adbot: ADBOT LOVES YOU

# ¿ May 7, 2024 01:38

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Mr. Wynand posted:

Some crazy guy on HN maintains this insanely complicated regression analysis that tries to predict how long until Google looses interest in any given project, based on usage, weather or not it's open source, does it make the money etc etc.

That sounds pretty interesting, do you have a link to it?

# ¿ Apr 1, 2014 01:39

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

SuicideSnowman posted:

I started playing around with Angular today and am obviously still very new to it and want to make sure I'm doing things the right way. I have basically a "master" page that has a navigation bar and a <ng-view> to dynamically load content. I'm doing so by simply calling a different page that I've configured in the router. It works, however I notice when viewing the html source for the page it's still just showing my master page and not any of the new page information. Is this normal or a problem in any way? If so, what's the correct way to handle a master page?

When you use the old school "View Page Source" it shows you the original HTML that was loaded for the page and doesn't reflect any changes made by JavaScript. You'll want to use the Developer Tools instead. Right click somewhere on your page and go to Inspect Element and it should open it up. (it's gonna blow your mind if you've never seen it before)

# ¿ May 8, 2014 08:43

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

fuf posted:

I'm finding it hard to find a good balance between easing load on the server and sending unnecessary data to the client.

My app lets users search a list of ~1000 book titles. I don't know whether it would be more efficient to:
a) send the entire list to each client when the page loads and let the front end (Angular in this case) handle all searching and filtering.
b) perform the search on the server and only send the results to the client.

I'm inclining towards option a) because although it means a slower initial page load it should make "live" searching a lot smoother. But something in me balks at the idea of sending all that data to the client (especially if the db starts getting bigger...).

Any thoughts? How do other people make these kinds of decisions?

I think you already have the answer you want (it's a small amount of data, prefetch it) but you may also want to check out the typeahead.js library because it handles all the prefetching, caching, remote searching, etc for you with a nice API.

# ¿ Jul 22, 2014 01:33

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

The Merkinman posted:

That's actually my fear, we create/update pages a lot so I'd hate for either:
A) the older app.css file to be cached and the page be broken or
B) The user needs to redownload the large app.css every time we make/update a page (that they may not even visit).

For point A you can just append a random string in the filename on deployment, like app.dked93ks393.css.

For point B, I wouldn't worry about it until it becomes a problem, because it probably won't be.

# ¿ Aug 8, 2014 18:29

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

ErikTheRed posted:

Isn't it better/easier to use a query string like: app.css?12345

I use the filename method since I've heard it is more compatible with other proxy/caching services that might be in the chain. Although personally, I've haven't run into an issue yet. django-pipeline does it for me and sticks the unique string in the filename.

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# ¿ Aug 8, 2014 20:13

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

wwb posted:

If the query string gets eaten by the proxy pipeline you'll have more problems than just serving fresh CSS. Either way works, filenames if infrastructure supports it, query strings if not.

It's not that the proxy pipeline eats the query string, it's just that it would be a cache miss for anything that contains a query string.

# ¿ Aug 8, 2014 20:52

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

If I'm using a Backbone.Router for a single page app, how do I handle redirecting them to the login page if they hit a route that they needed to be authed for?

# ¿ Nov 3, 2014 23:43

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Newbie react question...how come I'm not getting the alert when a button is clicked?

Here's my jsfiddle: http://jsfiddle.net/7phvhdgf/1/

# ¿ Mar 3, 2015 02:39

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

^ I made another attempt at it, still couldn't get it to work though: http://jsfiddle.net/pj6hz7hq/

Is there a different way I should be going about this?

# ¿ Mar 3, 2015 03:03

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

For starters, use "onClick" instead of "onclick".

JSX looks like HTML, but it's not; it's just an easy way to write JavaScript. It tricks you into thinking you can write HTML attributes like "class" and "onclick", but REALLY you need to use the strictly-cased DOM API, with fields like "className" and "onClick".

Doh! Thank you =)

http://jsfiddle.net/pj6hz7hq/1/

How come it's giving me a "TypeError: this.props.onClickMe is not a function" now?

# ¿ Mar 3, 2015 03:49

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

Use your debugger and tell us what it is, if not a function.

undefined

# ¿ Mar 3, 2015 07:12

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

Ah. Weird. Next step: what is "this.props"? What is "this"?

"this.props" is {dataRow: Object, onClickMe: undefined}

"this" looks like a bunch of react stuff, only thing I gleaned from it was _rootNodeID ".0.1.$1" which matches what was generated for my <tr> that contains the button, seems to make sense

# ¿ Mar 3, 2015 07:33

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

OK. So where are you going to put your next breakpoint, to figure out why your assignment to onClickMe is wrong? You're going to put a breakpoint in this.props.dataRows.map(...)

And what will you find is causing your problems? "this" will be undefined, because you're passing an anonymous function to map(...), and you aren't binding it to any context.

Ahhh there we go, working now! That makes sense, thank you!

# ¿ Mar 3, 2015 07:59

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Next question about that fiddle: lets say TableWidget.handleClick does some ajax and I want to show an indication in the UI while it's loading. I can do some this.setState in the TableWidgetRow.handleClick but how does it know when TableWidget.handleClick has actually completed? Do I have to manipulate TableWidgetRow state from TableWidget? Here's the updated fiddle: http://jsfiddle.net/pj6hz7hq/4/

# ¿ Mar 3, 2015 09:18

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

^ I was able to do it by just getting rid of TableWidget.handleClick and only having TableWidgetRow.handleClick, but I'm still kinda curious how you would pass state to a child component like that.

# ¿ Mar 3, 2015 19:13

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Heskie posted:

Do you run the full GUI inside the VM and work within it (Editor/IDE etc) or just use the VM as a terminal/server and use Editors/IDEs on the Windows host?

I usually work on a Mac, but my new job has a Windows work station so I've been trying to use Windows more to get a better idea of a workflow.

I'm in the same boat as Thermopyle, Windows as my host OS and 99% of the time I'm in a CentOS VM. I have the full GUI inside the VM, IDE and all. We have a Chef recipe that will take a base install to a full dev environment with just `vagrant up` - installing git, postgresql, tomcat, python, java, etc etc exactly like production. Any changes to the chef recipes can be applied to the VM just with a `git pull && vagrant provision` - and the changes are applied exactly like they get applied in dev/qa/prod. It's pretty sweet!

Thermopyle - how come you went with vmware? I've just been using virtualbox, wasn't sure if I'm missing out on anything.

# ¿ Aug 5, 2015 18:54

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Heskie posted:

Would you mind sharing your specs and any tips to get the best performance from the guest? Trying this out on my home PC at the moment.

I'm running Windows 10, 8gb, SSD, i5-3750k @ 4.4ghz. Ubuntu 15.05 (In VBox 5) runs well enough, but not quite enough that I'd be happy spending all day in it. For example, I have an issue where sometimes the keyboard input lags, so if I use caps lock I end up typing WORds LIke THIs.

My laptop is an i7-4600M w/ 16GB ram and an SSD.

I give my VM 2 CPUs, 4GB ram, and enable VT-x/AMD-V as well as "Host I/O Cache". I can't really tell the difference in performance between inside the VM and outside the VM, it is very snappy.

# ¿ Aug 5, 2015 23:44

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Is there an alternative to URI.js that plays nice with requirejs?

Why is parsing a URI not part of standard JavaScript

# ¿ Oct 2, 2015 23:24

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

I was following this tutorial for Django + Webpack: http://owaislone.org/blog/webpack-plus-reactjs-and-django/

Things seem to be working well but I've got a ton of ./assets/bundles/main-[hash].js files accumulating now as I'm making changes. Is there something that is supposed to be cleaning this up?

# ¿ Apr 19, 2017 22:50

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Helicity posted:

Your build script should have a clean step to start with a pristine, empty dist directory.

Sample package.json:

code:

"scripts": {
    "build": "npm run clean && npm run copy-assets && NODE_ENV=production webpack",
    "clean": "rm -rf ./dist",
    "copy-assets": ". ./build_scripts/copy_assets.sh",
    "dev": "npm run clean && npm run copy-assets && NODE_ENV=development webpack-dev-server",
    "test": "mocha -r preMocha.js 'src/**/*.test.ts'",
    "test:coverage": "nyc npm test"
  },

But if I have webpack in watch mode while I'm developing and it's recompiling every time I make a change, am I just supposed to run the clean command periodically?

# ¿ Apr 20, 2017 00:26

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Right on, thanks for the help Helicity!

# ¿ Apr 20, 2017 00:47

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Grump posted:

here it is

http://contact.meteorapp.com/

Will this get me more interviews?

Congrats!

The phone number format restriction might not work so well for international phone numbers

# ¿ May 16, 2017 23:18

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

I have a vuejs project I'm building for a Chrome Extension. How can I output my manifest.json for the extension as part of the "vue-cli-service build" process?

# ¿ Feb 25, 2018 22:23

Adbot: ADBOT LOVES YOU

# ¿ May 7, 2024 01:38

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

fletcher posted:

I have a vuejs project I'm building for a Chrome Extension. How can I output my manifest.json for the extension as part of the "vue-cli-service build" process?

Found what I was looking for in these docs: https://github.com/vuejs/vue-cli/tree/dev/docs

# ¿ Feb 26, 2018 05:40

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