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 »

lunar detritus: May 6, 2009

I have one of those awful style questions: Should every type be explicit in Typescript or maybe allow contextual typing for the ones that can be inferred?

# ? Sep 29, 2017 17:04

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:40

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

gmq posted:

I have one of those awful style questions: Should every type be explicit in Typescript or maybe allow contextual typing for the ones that can be inferred?

Use type inference where appropriate. Make things explicit if you think it helps with reading the code.

# ? Sep 29, 2017 17:09

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

gmq posted:

I have one of those awful style questions: Should every type be explicit in Typescript or maybe allow contextual typing for the ones that can be inferred?

I am a complete nazi about types in Typescript, even to the point where I'll do:

code:

var x: Foo = new Foo();
var y: number = 5;
var z: string = "foo";

I recognize that in the above examples, the implicit typing would work just as well, but implicit typing is a gateway drug that leads to code looking like regular javascript.

# ? Sep 30, 2017 09:34

Love Stole the Day: Nov 4, 2012; Please give me free quality professional advice so I can be a baby about it and insult you

While we're being Nazis or whatever... if I remember correctly, I think the official TypeScript thing says that you should be doing "let" instead of "var"? Sorry if wrong

# ? Sep 30, 2017 16:41

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

const unless you need to change it.

# ? Sep 30, 2017 16:45

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Love Stole the Day posted:

While we're being Nazis or whatever... if I remember correctly, I think the official TypeScript thing says that you should be doing "let" instead of "var"? Sorry if wrong

I started the project I'm working on now with Typescript 1.1, and let was introduced in 1.5, so I look at TS code every day that uses var instead of let all over the place. I've been trying to use let in new code just to look trendy but tbh it doesn't really matter, there is something hosed up with your code anyway if let versus var actually makes a difference (const is useful though).

# ? Sep 30, 2017 18:29

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

var ignores block scope and is handled delicately in compiled es5 through naming tricks.

Once you get used to let/const, it becomes easy to fall victim to var gotchas. in any new code, or code that I am changing, vars are one of the first things to go.

# ? Sep 30, 2017 18:41

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

It's funny how often I see people messing up properties on objects that are const. It's just not intuitive to most people for some reason.

# ? Sep 30, 2017 19:11

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

An object being const doesn't mean it's meant to be immutable, does it?

I have another couple of TypeScript questions. On my connected react components I'm doing this a lot:

code:

interface ConnectedState = {
  books: Book[];
}

interface OwnProps {
  sortOrder: string;
}

class Bookshelf extends ReactComponent<ConnectedState & OwnProps, void> {
  // you know the drill
}

export default connect<ConnectedState, OwnProps, void>(
  (state, ownProps) => ({ books: getBooksInOrder(state, ownProps.sortOrder) })
)(Bookshelf)

I am pretty unclear on how a couple of these parts work, I just know that I copied them from some example and that they make the errors go away.

1. <ConnectedState & OwnProps, void>: What is this syntax called at the end of a class? I understand it defines the shape of this.props and this.state under the hood, but how does it actually work? How would I add something like this if I was building my own class to be extended?

2. ConnectedState & OwnProps: Previously I was doing something like interface Props extends ConnectedState { ... } and then just passing Props to the component, but that causes errors if I'm using a mix of props being sent from the parent, and props from Redux. How is joining with & different than using Extends? Also, how is joining with & different than joining with |?

3. <ConnectedState, OwnProps, void>: Again, I know these refer to the shape of my connected state, my actions props, and my own props, but what is this syntax called and what is it actually doing? How does it know that I've satisfied the requirements of connect and of my to-be-connected component?

4. I sometimes see code like Array<T> or SomeOtherThing<P>. What do those single letters refer to?

Is there a recommended resource for learning more about the language constructs? Should I read the official documentation or is there a more noob-friendly book/blog series/video series/etc. out there? I've always like real-world examples for learning, so official docs can be kind of tough. I'm assuming a lot of this comes from other strongly typed languages as well, but coming from Ruby and JS it's all new to me. I'm pushing to use TS on a new project at work and if I'm going to get buy-in I'm going to need to be able to explain it better than "yeah I don't really know what's going on under the hood here but it makes the code compile."

# ? Sep 30, 2017 20:08

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

prom candy posted:

An object being const doesn't mean it's meant to be immutable, does it?

Well, sort of. It means it should not be reassigned. Can only be assigned to at either the declaration or in a class constructor. You can change fields on it, and it is just a suggestion to the TypeScript compiler to bitch when you try to reassign it.

prom candy posted:

I have another couple of TypeScript questions. On my connected react components I'm doing this a lot:
code:
interface ConnectedState = {
  books: Book[];
}

interface OwnProps {
  sortOrder: string;
}

class Bookshelf extends ReactComponent<ConnectedState & OwnProps, void> {
  // you know the drill
}

export default connect<ConnectedState, OwnProps, void>(
  (state, ownProps) => ({ books: getBooksInOrder(state, ownProps.sortOrder) })
)(Bookshelf)
I am pretty unclear on how a couple of these parts work, I just know that I copied them from some example and that they make the errors go away.

1. <ConnectedState & OwnProps, void>: What is this syntax called at the end of a class? I understand it defines the shape of this.props and this.state under the hood, but how does it actually work? How would I add something like this if I was building my own class to be extended?

2. ConnectedState & OwnProps: Previously I was doing something like interface Props extends ConnectedState { ... } and then just passing Props to the component, but that causes errors if I'm using a mix of props being sent from the parent, and props from Redux. How is joining with & different than using Extends? Also, how is joining with & different than joining with |?

3. <ConnectedState, OwnProps, void>: Again, I know these refer to the shape of my connected state, my actions props, and my own props, but what is this syntax called and what is it actually doing? How does it know that I've satisfied the requirements of connect and of my to-be-connected component?

4. I sometimes see code like Array<T> or SomeOtherThing<P>. What do those single letters refer to?

Is there a recommended resource for learning more about the language constructs? Should I read the official documentation or is there a more noob-friendly book/blog series/video series/etc. out there? I've always like real-world examples for learning, so official docs can be kind of tough. I'm assuming a lot of this comes from other strongly typed languages as well, but coming from Ruby and JS it's all new to me. I'm pushing to use TS on a new project at work and if I'm going to get buy-in I'm going to need to be able to explain it better than "yeah I don't really know what's going on under the hood here but it makes the code compile."

You should read the official documentation, it's quite good.

<T> Are generics. In the interface below, we want to specify a class where some parts of it can be dynamically declared, making the interface more generic (hence the name). t1 is an ITask where subtask is a string, and subtask2 is a number, where t2 is an ITask where subtask is any and subtask2 is boolean. You could obviously just make those fields always any and ignore generics, but this lets you be more specific about your types. The letters themselves don't mean anything, could be anything, T/U are usually just the first ones used because that's the convention C# used.

code:

 
interface ITask<T,U> {
	name: string;
	done: boolean;
	subtask: T;
	subtask2: U;
}

let t1: ITask<string, number>;
let t2: ITask<any, boolean>;

Skandranon fucked around with this message at 20:24 on Sep 30, 2017

# ? Sep 30, 2017 20:15

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

prom candy posted:

An object being const doesn't mean it's meant to be immutable, does it?

No.

# ? Sep 30, 2017 20:18

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

Thermopyle posted:

No.

To elaborate:

JavaScript code:

const butt = {}
const fart = {}

// this is cool
butt.thing = 3;

// this is not
fart = {thing: 3};

# ? Oct 1, 2017 16:34

smackfu: Jun 7, 2004

Are there are any common languages with immutable data structures as first class citizens? Which would prevent that kind of example?

# ? Oct 1, 2017 17:59

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

In Ruby you can freeze strings, arrays, and hashes. I believe you also have to freeze all the items in the hash/array for it to really work though. So if you have arr = ['foo', 'bar'].freeze you can still do arr[0] << 'ooooo' which is kind of weird.

# ? Oct 1, 2017 18:13

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

Strings in most languages are actually immutable, but this is somewhat kept behind the scenes as you are able to 'modify' them. However, this is a facade and you are always creating a new string.

# ? Oct 1, 2017 18:24

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

prom candy posted:

In Ruby you can freeze strings, arrays, and hashes. I believe you also have to freeze all the items in the hash/array for it to really work though. So if you have arr = ['foo', 'bar'].freeze you can still do arr[0] << 'ooooo' which is kind of weird.

Semi-recent JS has Object.freeze() which works more as one would expect (although I'm sure it has countless unexpected edge cases 'cos JS).

# ? Oct 1, 2017 18:41

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

ynohtna posted:

Semi-recent JS has Object.freeze() which works more as one would expect (although I'm sure it has countless unexpected edge cases 'cos JS).

It's not a deep freeze, which makes its use somewhat limited. Some will tell you the answer is normalization, which I personally disagree with.

# ? Oct 1, 2017 23:35

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

A question for people knowledgeable in Typescript / React (create-react-app, specifically) / NPM bundled webapps.

My web based turtle drawing environment project is coming along. I'm using the Monaco editor (npmpackage react-monaco-editor), and I'm building out my own Turtle implementation in typescript.

From Stackoverflow, I've learned how to inform my monaco editor about my defined Turtle type:

JavaScript code:

monaco.languages.typescript.typescriptDefaults.addExtraLib(
`
class Turtle() {
  doTurtleStuff(amount: number): void;
}
`)

The in-page editor now knows about the turtle class and gives a 1st class dev experience much like in VSCode, which makes me happy. The trouble is how, practically, to automate passing the Turtle typescript code into this function. In fact, I've got two related problems.

The turtle code lives in Turtle.ts, and looks like this:

code:

class Turtle{
 // turtle stuff
}

export default Turtle;

Problems:

I need to pass this file, minus the export statement, to the monaco function in the first code block.
I need the (transpiled) turtle object to be available on the main page itself, so that when I try to run the code I've typed in the editor, it doesn't crap out with "ReferenceError, Turtle is not defined"

I'm able to copy / paste like a caveman, but it's pretty labor intensive and error prone. I'm using create-react-app, so I've got an index.html file where, currently, I have a '<script src="turtle.js" />' tag inserted, and I've been manually replacing that js file with new builds.

Any suggestions on how to smooth out either of these issues?

# ? Oct 2, 2017 03:28

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

Why can't you have your turtle.ts compile directly into your webserver folder as turtle.js to be picked up by your index.html?

# ? Oct 2, 2017 06:38

Doh004: Apr 22, 2007; Mmmmm Donuts...

smackfu posted:

Are there are any common languages with immutable data structures as first class citizens? Which would prevent that kind of example?

Come on over to the Swift side :getin:

# ? Oct 2, 2017 14:59

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Typescript has readonly casting, but nothing prevents you from re-assigning the reference and then mutating. I kinda think Typescript should introduce immutable objects that seems like the logical place to put it.

# ? Oct 2, 2017 16:40

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

smackfu posted:

Are there are any common languages with immutable data structures as first class citizens? Which would prevent that kind of example?

Elm is not common, but it should be!

# ? Oct 2, 2017 16:50

Odette: Mar 19, 2011

Aren't data structures immutable in Rust? I'm just tinkering with it at the moment, but not getting very far.

# ? Oct 3, 2017 09:13

Honest Thief: Jan 11, 2009

I've got this project with font icons instead of svgs and I'm trying to have it accordingly to the designer's measurements, but for the life of me I can't make a font icon's width set to the exact one I want. I've already wrapped around a container with the fixed width, say 24px and have the icon element's font-size be 1em, but it's always slightly off, 25.96px for example. Is this as good as it get with fonticons?

# ? Oct 3, 2017 18:32

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Font icons are awesome.

code:

i.icon {
  display: block;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
}

# ? Oct 4, 2017 00:18

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

You can have font icons, or you can have icons that are exactly to the designer's spec. Not both.

# ? Oct 4, 2017 05:49

Honest Thief: Jan 11, 2009

I'll tell them to either supply me with new icons or just deal with a slightly off icon.

# ? Oct 4, 2017 11:33

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

but... i posted how to get it exact... you mean its literal pixel-perfect size and positioning inside the pixel perfect square?

# ? Oct 4, 2017 16:58

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

Nolgthorn posted:

you mean its literal pixel-perfect size and positioning inside the pixel perfect square?

Yeah, that's the hard part with icon fonts.

# ? Oct 4, 2017 17:13

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

Honest Thief posted:

I'll tell them to either supply me with new icons or just deal with a slightly off icon.

Every user of every site gets a copy of the design spec / style guide and carefully goes over it with a pixel ruler and will not use the site in any way if anything is off anywhere.

-- what every designer who doesn't code thinks.

# ? Oct 4, 2017 17:42

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

Lumpy posted:

Every user of every site gets a copy of the design spec / style guide and carefully goes over it with a pixel ruler and will not use the site in any way if anything is off anywhere.

-- what every designer who doesn't code thinks.

Also there's only one browser window size: the default size of a new image in Photoshop.

# ? Oct 4, 2017 18:20

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

Also there's only one browser window size: the default size of a new image in Photoshop.

and the only device people use is a 27" Retina iMac

# ? Oct 4, 2017 19:12

Honest Thief: Jan 11, 2009

Nolgthorn posted:

but... i posted how to get it exact... you mean its literal pixel-perfect size and positioning inside the pixel perfect square?

Yeah, it usually involves fidgeting with line-height and font-size calcs, and sometimes is just, eh gently caress it.

# ? Oct 4, 2017 23:30

smackfu: Jun 7, 2004

Ahhh, Angular plus Typescript upgrade is making me feel like I know nothing. Have to actually take some training. Ugh.

Also, I definitely feel the pain of the move from a mature technology to a more cutting edge one.

# ? Oct 5, 2017 00:26

lunar detritus: May 6, 2009

smackfu posted:

Ahhh, Angular plus Typescript upgrade is making me feel like I know nothing. Have to actually take some training. Ugh.

Also, I definitely feel the pain of the move from a mature technology to a more cutting edge one.

Be thankful you didn't have to use it in the beta days. :negative:

# ? Oct 5, 2017 02:07

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

I asked about using type safe languages on the server a couple days ago and was directed towards C#, which looks interesting. Is anyone just using Typescript with Express or another Node framework to build their APIs and auth endpoints and stuff?

# ? Oct 5, 2017 04:20

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Typescript is similar to C#. I tried using Typescript for server code and eventually just gave up. Server code is generally npm module heavy requiring many @types npm modules to match. Server code is also in my experience not all that complex, compared to a client side app so value is reduced.

There's also the compilation question, which is a bit of a turn off. Because server code can use the latest Javascript features without a compiler.

There is an Express.js @types library though.

# ? Oct 5, 2017 09:15

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

Newf posted:

...
Problems:

I need to pass this file, minus the export statement, to the monaco function in the first code block.

I need the (transpiled) turtle object to be available on the main page itself, so that when I try to run the code I've typed in the editor, it doesn't crap out with "ReferenceError, Turtle is not defined"

I'm able to copy / paste like a caveman, but it's pretty labor intensive and error prone. I'm using create-react-app, so I've got an index.html file where, currently, I have a '<script src="turtle.js" />' tag inserted, and I've been manually replacing that js file with new builds.

Any suggestions on how to smooth out either of these issues?

I know it's the awkward, ignored outsider kid on the JS playground but SystemJS sounds like an option for this situation in that all of its module importing, transpilation, bundling, hot loading, etc behaviours are available dynamically in the browser on top of the command line (via jspm).

I prototyped a similar system to yours last year using SystemJS except I had es-lisp source ( :gay:

) bundled off my drive as well as dynamically edited & hot-reloaded in the browser.

Of course, adopting a new packager (I felt that the SystemJS docs lacked a clear conceptual overview) and converting from create-react-app to jspm carries with it a considerable cognitive burden.

# ? Oct 5, 2017 10:25

Doh004: Apr 22, 2007; Mmmmm Donuts...

Nolgthorn posted:

Server code is also in my experience not all that complex, compared to a client side app so value is reduced.

Do you know how many engineers' ears just perked up and are ready to pounce on you for this statement?

# ? Oct 5, 2017 14:17

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:40

ModeSix: Mar 14, 2009

Doh004 posted:

Do you know how many engineers' ears just perked up and are ready to pounce on you for this statement?

To be fair this is the front-end thread so he's likely never touched the backend beyond express (which honestly should be the absolute last choice for a backend if you ask me) or some other JS flavour of the week. Because anyone that says that hasn't really done backend work.

When the backend "just works" it appears really simple to the consumer.

# ? Oct 5, 2017 15:36

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

«‹›235 »