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

«‹›235 »

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

Well, one benefit is you can safely leave a bunch of code that just runs once and calculates initialization data without any anxiety over "should I unroll this so faster?". Seems tiny, but maybe it helps stop a bunch of devs from prematurely optimizing because they can say "prepack should take care of this" and then move on to important tasks.

# ? May 5, 2017 16:22

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 22:41

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Helicity posted:

Unless you're working on a game/library/framework, I don't see why you'd need what prepack brings to the table. In those situations where speed is that critical, you probably want to understand how to manually profile and tune the language. "leveraging Prepack as a platform" sounds loving horrible and stupid.

An interesting project but I'm struggling to figure out how I'd want to use it.

I could see this being useful in apps that make heavy use of function composition. So basically any redux / react app.

# ? May 5, 2017 17:33

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Skandranon posted:

Well, one benefit is you can safely leave a bunch of code that just runs once and calculates initialization data without any anxiety over "should I unroll this so faster?". Seems tiny, but maybe it helps stop a bunch of devs from prematurely optimizing because they can say "prepack should take care of this" and then move on to important tasks.

This is exactly what came to mind to me. Sometimes I'll have a bunch of data that I can generate, but I don't because it might take too long on the client so I type it out or copy/paste or whatever. I'd just not do that if prepack works correctly.

But anyway, what it all boils down to is if it ends up making code faster. We'll see...

# ? May 5, 2017 17:35

luchadornado: Oct 7, 2004; A boombox is not a toy!

https://news.ycombinator.com/item?id=14258603

quote:

I just ran this on a huge JS project that has a quite intensive "initialization" stage (modules being registered, importing each other, etc.), and prepack basically pre-computed 90% of that, saving some 3k LOC.

Now that would be cool to see on some of my larger projects.

I'm still wary of hoping for any valuable performance gains from it, though. I've written a handful of canvas applications that do things like render massive shapefiles into a worldspace, and those have benefitted from inlining, memoization, pre-computed values, etc. but I've never noticed any of those things being exceptionally useful with standard front-end development.

We'll see as it becomes more stable and easier to work with, I guess.

# ? May 5, 2017 19:35

Odette: Mar 19, 2011

So what problem is prettier meant to solve? It seems a bit pointless to me.

# ? May 6, 2017 00:54

smackfu: Jun 7, 2004

People who miss gofmt when they are writing JavaScript?

# ? May 6, 2017 03:25

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Odette posted:

So what problem is prettier meant to solve? It seems a bit pointless to me.

So if you have a team of hundreds of developers, it's easier to read other people's code because it's all formatted the same is my guess.

# ? May 6, 2017 04:09

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Y'know guys I just don't see why you should bother with a coding style guide. Tabs? Spaces? Who gives a gently caress?

# ? May 6, 2017 07:17

Pollyanna: Mar 5, 2005; Milk's on them.

We wouldn't have this problem if we just wrote everything in machine code.

# ? May 6, 2017 15:49

prom candy: Dec 16, 2005; Only I may dance

Doesn't everyone just use eslint?

# ? May 6, 2017 15:57

smackfu: Jun 7, 2004

EsLint can't fix all the things it complains about, which is one of the aims of prettier.

# ? May 6, 2017 20:12

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Maluco Marinero posted:

Y'know guys I just don't see why you should bother with a coding style guide. Tabs? Spaces? Who gives a gently caress?

I mean, it's all one line after it's minified, right?

# ? May 6, 2017 20:33

prom candy: Dec 16, 2005; Only I may dance

Eslint has some auto fix stuff now I think.

# ? May 7, 2017 05:37

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Helicity posted:

Unless you're working on a game/library/framework, I don't see why you'd need what prepack brings to the table. In those situations where speed is that critical, you probably want to understand how to manually profile and tune the language. "leveraging Prepack as a platform" sounds loving horrible and stupid.

An interesting project but I'm struggling to figure out how I'd want to use it.

Today's average text-displaying-website is slow as molasses on machines that are a bit dated because of js bloat. I really don't think that use cases here are all that rare.

# ? May 7, 2017 17:55

luchadornado: Oct 7, 2004; A boombox is not a toy!

Would be willing to bet that's from 50-100 3rd party XHR requests for tracking, analytics, ads, etc. and poorly designed animations or things that tie into mouse/scroll events and don't have a debounce. Inlining some composed functions shouldn't have a profound effect there. It used to take 1s on a fast computer just to eval the React model for wsj.com's front page - prepack isn't going to help stupid poo poo like that.

# ? May 8, 2017 00:37

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Yeah, that's the thing really, all the tooling in the world won't help speed up your 50 third party request sites, but meanwhile some of us ARE working on sites where JavaScript eval/computation time is bottlenecking our common interactions, and prepack can help get optimisations within that would otherwise be sacrificing code quality for speed, and potentially by default if it's smart enough. I'm thinking for the kind of apps where I recently wrote this, https://www.npmjs.com/package/react-wastage-monitor , React is great for code quality but can be very wasteful in high frequency interactions if you're not careful.

# ? May 8, 2017 01:12

Honest Thief: Jan 11, 2009

I was trying out redux with react router redux and came up with this issue: I have a container that is basically the same for the general view and the details view of a resource, and was doing the differentiation at the render loop by looking up on the current url. The problem is when I needed a redirect after a reducer action; I considered doing a redirect middleware, but that didn't work so well because the middleware ran before the reducer was done, and I can't dispatch a redirect action from the reducer itself, nor do I like the idea of doing it on the container based on the reducer's state. Is there a simple way to sort of stack actions?

# ? May 8, 2017 11:39

HaB: Jan 5, 2001; What are the odds?

So it's pretty rare that a new library makes me go "oh wow!" but after spending a few days fooling around with Knex, I am here to say: WOW.

Disclaimer: If you do NOT work with any sort of SQL database, feel free to skip all of this.

So I do personal projects all the time, using mysql on the back-end. This particular time I am using hapi for my service layer. Which turned out to be great, since knex plays really nicely with hapi.

So what's Knex? It basically makes it so you don't have to write raw SQL basically ever. And it's really good. It also provides a really slick CLI tool which enables you to manage changes to your database, as well as populating default data for tables.

Changes to your DB structure are referred to as "migrations" and default data is a "seed." Anytime a new migration is created, it is timestamped, and only needs to reflect the delta from the last migration. This means they can easily be rolled back, which knex will helpfully do for you.

Table creation in a migration file might look like this:

code:

knex
.schema
.createTable('Users', function(usersTable) {
    usersTable.increments();  // this creates an AI int column called 'id'

    usersTable.string('username', 32).notNullable().unique();  // some string columns
    usersTable.string('password', 256).notNullable().unique();
    usersTable.string('email', 64).notNullable().unique();

    usersTable.timestamps('created_at');    // creates a timestamp column which will get the CURRENT_TIMESTAMP value on insert.
});

Inside your hapi service, you might want to select records from a table. That looks something like:

code:

const username = req.params.username;

const getUser = knex('users')
.where({
    username: username
})
.select('username', 'password', 'email')
.then((rows) => {
    // do the thing
})
.catch((err) => {
    // handle the thing
});

Almost are the calls are chainable and everything is nicely wrapped in Promises. There are chainable methods for most SQL operations, including sub-queries, multiple WHERE clauses, etc. A lot of them even have a Raw version where you can pass in some raw SQL directly if there's something the library doesn't have a built-in for.

So yeah - if you have to jack with SQL, check it out. I am starting to really love it.

# ? May 8, 2017 13:55

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Honest Thief posted:

because the middleware ran before the reducer was done

I'm not in a situation to check my own code right now, but are you sure about this?

I've crafted lots of daft custom redux middleware that lets actions get processed by downstream middleware (const result = next(action)) and then performs custom logic.

# ? May 8, 2017 14:00

Honest Thief: Jan 11, 2009

ynohtna posted:

I'm not in a situation to check my own code right now, but are you sure about this?

I've crafted lots of daft custom redux middleware that lets actions get processed by downstream middleware (const result = next(action)) and then performs custom logic.

Oh yeah, you're right, I was calling an old similarly named action that did nothing and I didn't cleaned it up properly, so when it reached the middleware I was forcing a call for the correct one :doh:

I still don't like this implementation that good though.

Honest Thief fucked around with this message at 14:57 on May 8, 2017

# ? May 8, 2017 14:55

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Knex is pretty nice. Its lacking compared to a real ORM, but then again, JS doesn't seems to have any great ORM's (at least compared to stuff you can use in python or C#), so Knex can be a decent intermediate step.

# ? May 8, 2017 15:51

HaB: Jan 5, 2001; What are the odds?

Thermopyle posted:

Knex is pretty nice. Its lacking compared to a real ORM, but then again, JS doesn't seems to have any great ORM's (at least compared to stuff you can use in python or C#), so Knex can be a decent intermediate step.

I wasn't even looking for a full-on ORM. It's just nice to be able to do everything in javscript, rather than having to write a bunch of SQL. In the past I have always had a bunch of issues because the SQL script I export form my local server needs a lot of massaging to work on my web hosting provider's servers, because of permissions and slight differences in sql versions, etc.

I already ran some of my migration files against the hosting service and everything was totally fine.

# ? May 8, 2017 15:57

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Helicity posted:

Would be willing to bet that's from 50-100 3rd party XHR requests for tracking, analytics, ads, etc. and poorly designed animations or things that tie into mouse/scroll events and don't have a debounce. Inlining some composed functions shouldn't have a profound effect there. It used to take 1s on a fast computer just to eval the React model for wsj.com's front page - prepack isn't going to help stupid poo poo like that.

Or Wordpress plugins. Last year the local craft beer magazine updated their site with a mobile layout plugin that added ~1.5 MB to the initial page load :downs:

# ? May 8, 2017 16:11

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

HaB posted:

I wasn't even looking for a full-on ORM. It's just nice to be able to do everything in javscript, rather than having to write a bunch of SQL. In the past I have always had a bunch of issues because the SQL script I export form my local server needs a lot of massaging to work on my web hosting provider's servers, because of permissions and slight differences in sql versions, etc.

I already ran some of my migration files against the hosting service and everything was totally fine.

Yeah, the migrations are really nice.

# ? May 8, 2017 16:12

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Still looking for a way to scroll to a newly created React component.

My two big issues:

It can't go in DidMount or DidUpdate because I have edit and delete functions where it shouldn't scroll.
I can't just scroll to the bottom because each entry in my list of components are in alphabetical order.

All my data is stored in a MongoDB, which is making it hard to pinpoint a location to scroll to.

This is really difficult and I don't know the best way to think about it.

I've tried using this package, but it's not playing well with Meteor
https://www.npmjs.com/package/react-scroll-to-component

# ? May 8, 2017 22:36

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Grump posted:

Still looking for a way to scroll to a newly created React component.

My two big issues:

It can't go in DidMount or DidUpdate because I have edit and delete functions where it shouldn't scroll.
I can't just scroll to the bottom because each entry in my list of components are in alphabetical order.

All my data is stored in a MongoDB, which is making it hard to pinpoint a location to scroll to.

This is really difficult and I don't know the best way to think about it.

I've tried using this package, but it's not playing well with Meteor
https://www.npmjs.com/package/react-scroll-to-component

Just rip the code out of the package and customize it to your liking. It's only 32 lines.

https://github.com/flyingant/react-scroll-to-component/blob/master/index.js

# ? May 8, 2017 23:28

an skeleton: Apr 23, 2012; scowls @ u

Has anyone ever used keen.io?

# ? May 9, 2017 04:02

HaB: Jan 5, 2001; What are the odds?

This isn't holding me up in the slightest, but since I am so evenly split, I figured I'd take a quick poll.

I am working on a site to manage vinyl record collections - mostly to learn Angular 2 and because I am a hipster vinyl nerd and discogs is needlessly complex for what I want. I am writing the web services in Hapi / Knex.

So I have Artists and I have Albums. So - should the endpoint to get all albums by a particular artist be:

code:

/artists/<artistId>/albums

code:

/albums/artist/<artistId>

?

I'm completely ambivalent at this point. A list of Albums could be considered a part of an Artist "profile", which makes me think it should be an /artist endpoint. But the thing I am actually returning is albums, so that makes me think it should be an /albums endpoint.

I don't care. But someone pick for me.

Edited to reflect actual pluralization of /artists

HaB fucked around with this message at 15:45 on May 12, 2017

# ? May 12, 2017 15:15

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

HaB posted:

This isn't holding me up in the slightest, but since I am so evenly split, I figured I'd take a quick poll.

I am working on a site to manage vinyl record collections - mostly to learn Angular 2 and because I am a hipster vinyl nerd and discogs is needlessly complex for what I want. I am writing the web services in Hapi / Knex.

So I have Artists and I have Albums. So - should the endpoint to get all albums by a particular artist be:
code:
/artist/<artistId>/albums
or
code:
/albums/artist/<artistId>
?

I'm completely ambivalent at this point. A list of Albums could be considered a part of an Artist "profile", which makes me think it should be an /artist endpoint. But the thing I am actually returning is albums, so that makes me think it should be an /albums endpoint.

I don't care. But someone pick for me.

The first one. The second one is for searching albums that include that artist :v:

# ? May 12, 2017 15:31

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

/artists/<ID>/albums :colbert:

# ? May 12, 2017 15:41

HaB: Jan 5, 2001; What are the odds?

Munkeymon posted:

/artists/<ID>/albums

That was my bad. The actual endpoint IS plural /artists

# ? May 12, 2017 15:44

smackfu: Jun 7, 2004

On second thought, I think my preference would be to call the /albums end point with a filter of artist (like /albums?artist=Prince).

smackfu fucked around with this message at 15:45 on May 13, 2017

# ? May 13, 2017 14:32

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

Albums can have multiple artists, no? Hell, songs can have multiple artists.

# ? May 13, 2017 16:08

HaB: Jan 5, 2001; What are the odds?

bartkusa posted:

Albums can have multiple artists, no? Hell, songs can have multiple artists.

This was something a friend brought up yesterday, and I had it in the back of my mind anyway, since I own a couple of soundtracks on vinyl, and will have to account for that. My short-term workaround was just to have an artist called "Various".

However - I am working on integrating with Gracenote today, so I will see what kind of info I can pull from there. Pretty sure it will have track info, artist listings for soundtracks, etc.

(Aside: gracenote DOES offer a developer license which is free for non-commercial use if you want to mess around with it. Gracenote is the service which powers poo poo like iTunes and Spotify, etc.)

# ? May 13, 2017 16:48

M31: Jun 12, 2012

I don't know what you are doing, but check out the MusicBrainz documentation. They also provide snapshots of their database.

# ? May 13, 2017 17:24

spacebard: Jan 1, 2007; Football~

To me /artists/ID/albums means that I'm looking for all the albums the artist is a member of rather than is the owner of.

I've done the following to provide list arguments.

/albums?artists[]=One&artists[]=Two

And I've seen operators included for really complex APIs that need to do so: ?artistsOp=And&artists[]=One&artists[]=Two

# ? May 13, 2017 17:29

geeves: Sep 16, 2004

HaB posted:

This isn't holding me up in the slightest, but since I am so evenly split, I figured I'd take a quick poll.

I am working on a site to manage vinyl record collections - mostly to learn Angular 2 and because I am a hipster vinyl nerd and discogs is needlessly complex for what I want. I am writing the web services in Hapi / Knex.

So I have Artists and I have Albums. So - should the endpoint to get all albums by a particular artist be:
code:
/artists/<artistId>/albums
or
code:
/albums/artist/<artistId>
?

I'm completely ambivalent at this point. A list of Albums could be considered a part of an Artist "profile", which makes me think it should be an /artist endpoint. But the thing I am actually returning is albums, so that makes me think it should be an /albums endpoint.

I don't care. But someone pick for me.

Edited to reflect actual pluralization of /artists

Discogs has an excellent REST API. Maybe take some ideas from them?

https://www.discogs.com/developers/

# ? May 13, 2017 18:21

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

spacebard posted:

To me /artists/ID/albums means that I'm looking for all the albums the artist is a member of rather than is the owner of.

I've done the following to provide list arguments.

/albums?artists[]=One&artists[]=Two

And I've seen operators included for really complex APIs that need to do so: ?artistsOp=And&artists[]=One&artists[]=Two

Go a little further down that trail, and you're in GraphQL territory.

# ? May 13, 2017 21:59

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Hey tomorrow i'm gonna deploy my silly little contact book app that helped me learn react and meteor.

Mad props to everyone in this thread. I really can't wait until I'm skilled enough to pay it forward

# ? May 15, 2017 23:35

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 22:41

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Grump posted:

Hey tomorrow i'm gonna deploy my silly little contact book app that helped me learn react and meteor.

Mad props to everyone in this thread. I really can't wait until I'm skilled enough to pay it forward

here it is

http://contact.meteorapp.com/

Will this get me more interviews? :cry:

teen phone cutie fucked around with this message at 22:56 on May 16, 2017

# ? May 16, 2017 22:33

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

«‹›235 »