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

«‹›236 »

Dominoes: Sep 20, 2007

I posted about a frontend framework I was designing a while back. It's in Rust, using webassembly. We just got up a new website that should be easier to navigate - it's mostly a user-guide. A lot of the open API questions are now hammered-out, but I'm still looking for feedback from anyone not used to Rust. Ie, do you think it's feasible for someone versed in React, Vue etc to pick this up after skimming a Rust tutorial and the guide I linked? Still open to breaking changes if they make things better.

I borrowed from React, Redux, and Elm, mixed them up, and added some new things - most notably a type-based composable view syntax. Ie you have a function called h1, and if you pass it a string, it uses that as the text. Pass it an attribute struct, it adds attributes or merges with existing ones etc. Big departure, but it's pretty flexible/concise.

So... quasi-related. I learned about Svelt recently, and it looks dope. This framework's pattern is VDOM, ie it runs a func to create a potentially-big struct each time the page changes. This is ok since it matches well with the declarative style, but it looks like svelt's figured out how to have a declarative style without rewriting the vdom using preprocessing. Might be a bit over my head though!

Dominoes fucked around with this message at 02:29 on Nov 30, 2019

# ? Nov 30, 2019 02:24

Adbot: ADBOT LOVES YOU

# ? Jun 14, 2024 06:08

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

People keep making fun of it when I bring it up in the thread but I still think Svelte looks really cool.

I think the biggest obstacle is that now that the framework churn has slowed down it's going to be hard to get people to move on from the tools they're used to unless you can offer something really good in return. When I picked up React it's because I was aching for a better way to do things. Svelte looks interesting to me now but at the same time it's not really solving any new problems for me and jumping to a new framework is a time sink.

# ? Nov 30, 2019 16:39

Dominoes: Sep 20, 2007

I'm personally not a fan of Svelte's template-like structure but it's done something no other framework has: It allows you to create your program declaratively without the overhead of a VDOM. Until this point, they've been coupled.

Declarative UI programming is lovely. It's easy to write a VDOM-based approach that works with it, but VDOMs do a lot of extra work. (Ie are slower than they need to be). Svelte's solved this.

# ? Nov 30, 2019 18:02

PlaneGuy: Mar 28, 2001; g e r m a n
e n g i n e e r i n g; Yam Slacker

I fuckin love svelte and use it all the time but I've got no cred here sorry I can't help you feel better.

# ? Nov 30, 2019 19:47

Dominoes: Sep 20, 2007

I've been delaying diving into the Svelte codebase to see how they did it... I'm suspicious it's quite sophisticated. (Spears to not supporting Typescript or any form of typing, and the global variables they use for state in the examples, but those may change)

View syntax I'm looking for feedback on

# ? Nov 30, 2019 20:22

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Dominoes posted:

View syntax I'm looking for feedback on

You're going go have a much better time with this if you build something that simply reads and populates html strings rather than building html strings programmatically. People can write HTML while asleep and it's really easy to autopilot through it, building html through pure logic is more time consuming. One of Angular/Vue/ASP/Expresses's strengths is templating and templating logic. I feel its a wheel we don't need to reinvent.

Of course in doing this you're just building another MVC framework but at least it'll be in Rust and it'll get people exploring rust. That's how I learn new programming languages now, just go and figure out whatever MVC framework the language has.

Ape Fist fucked around with this message at 23:52 on Nov 30, 2019

# ? Nov 30, 2019 23:50

Dominoes: Sep 20, 2007

Ape Fist posted:

You're going go have a much better time with this if you build something that simply reads and populates html strings rather than building html strings programmatically. People can write HTML while asleep and it's really easy to autopilot through it, building html through pure logic is more time consuming. One of Angular/Vue/ASP/Expresses's strengths is templating and templating logic. I feel its a wheel we don't need to reinvent.

Of course in doing this you're just building another MVC framework but at least it'll be in Rust and it'll get people exploring rust. That's how I learn new programming languages now, just go and figure out whatever MVC framework the language has.

Thank you for the feedback! I need to look more into how Vue etc syntax and structure work: There seems to be a strong divide over integrating UI code into logic (React, Elm etc), and separating it using templates (Vue, Svelte etc, and presumably the others you listed). I've (at least for now) fallen into the former category. One of the points I didn't like in the latter was flipping between files to manage that that I categorized as related. On the other hand, you could argue that UI and logic are not related, so should be in different categories.

Regarding groking HTML - that's a big downside of my approach, and something even React and other Rust WASM frameworks don't break from: they use HTML-like syntaxes. I hope the benefits of my approach are worth it, but for many/most people, they may not be. (Benefits are keeping the language rules consistent throughout the code, flexibility, composability, being able to manipulate UI-items as normal variables). Ie in React, I still have to actively think about whether I'm typing in the normal code, or JSX, what comment-syntax to use, whether the brackets are for a data structure or an entry/exit to JSX.

Dominoes fucked around with this message at 05:02 on Dec 1, 2019

# ? Dec 1, 2019 04:57

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

Dominoes posted:

). Ie in React, I still have to actively think about whether I'm typing in the normal code, or JSX, what comment-syntax to use, whether the brackets are for a data structure or an entry/exit to JSX.

I don't have to think about it because my IDE (PyCharm/WebStorm) just does the right thing.

# ? Dec 1, 2019 19:05

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

If you must create the markup programmatically you should probably try to do it in a way that js devs won't hate.

I'd be happy to take a function called create(), or something which takes, like, 4 arguments. The tag, a class list object, an attribute object, and an event listener function or something.

Use Flutter as more of a cautionary tale rather than inspiration.

# ? Dec 1, 2019 19:36

marumaru: May 20, 2013

Dominoes posted:

Ie in React, I still have to actively think about whether I'm typing in the normal code, or JSX, what comment-syntax to use, whether the brackets are for a data structure or an entry/exit to JSX.

How much experience with it do you have? About 2 years in I absolutely don't have to think (and my IDE handles the thinking for me anyway)

# ? Dec 1, 2019 20:07

Dominoes: Sep 20, 2007

Thermopyle posted:

I don't have to think about it because my IDE (PyCharm/WebStorm) just does the right thing.

Using PyCharm - it's wonderful.

Ape Fist posted:

I'd be happy to take a function called create(), or something which takes, like, 4 arguments. The tag, a class list object, an attribute object, and an event listener function or something.

I've experimented with that, but found it's not very flexible. Eg, what does the syntax look like if you're passing an attribute but not a class list? Do we want to have a significant chunk of the view taken up by the word create etc? How do we handle children? I went with this approach (macros which take params in an arbitrary order and quantity, and differentiate them by type) as a middle-ground between pure fns, and deeper magic like JSX.

Another approach may be stringing together methods, ie the builder pattern, where myAttrs/myEv are defined ahead of time, or with a literal etc.

JavaScript code:

h1.text("")
    .attrs(myAttrs)
    .ev(myEv)

Not HTML-like, but provides a reasonable syntax without using magic.

Inacio posted:

How much experience with it do you have? About 2 years in I absolutely don't have to think (and my IDE handles the thinking for me anyway)

A few years. My biggest active project now's in React. I like most things about it, with the following spears: Verbose state-related code, long component signatures when using Typescript, and the JS/JSX line I spoke of earlier.

Dominoes fucked around with this message at 21:57 on Dec 1, 2019

# ? Dec 1, 2019 21:49

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

Gotta learn Vue real quick before this new job in 2 weeks.

What�s the best tutorial for someone who�s been working in React for 3 years and won�t hold my hand too much?

# ? Dec 1, 2019 23:55

pathetic little tramp: Dec 12, 2005; by Hillary Clinton's assassins; Fallen Rib

I liked the academind tutorial on youtube for vue.

If you have total control over a react app, try rewriting it in vue, that's what I did and it made me really comfortable

# ? Dec 2, 2019 05:41

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Grump posted:

Gotta learn Vue real quick before this new job in 2 weeks.

What’s the best tutorial for someone who’s been working in React for 3 years and won’t hold my hand too much?

I picked up Vue in a weekend and was building poo poo really quickly with it. Vue is super easy and nice to learn.

# ? Dec 2, 2019 08:38

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Perfect segue, thanks guys. I'm trying to move a Vue app over to TypeScript and various parts have gone pretty smoothly, but now I'm trying to work out how to do something that I just can't figure out. I'm using vue-class-component, by the way. This is what I'm trying to do: have a list of "NavigationItem" objects that I iterate over and call a method "show()" in order to determine whether the item should be displayed to the user. The "show()" method sometimes, but not necessarily always, checks to see if the user is signed in by checking in with a variable contained in a store.

To do this, I've done the following:

1. I've created an AppNavigation component using the TypeScript syntax supported by vue-class-component (export default class AppNavigation extends Vue with the Component decorator). I'm then declaring a local state property called items, which is an array of type INavigationItem. I initialise it to an empty array. INavigationItem looks like this:

code:

interface INavigationItem {
  title: string;
  icon: string;
  route: string;
  show: () => boolean;
}

2. I've tried this many, many ways, but as an example, I've tried to populate the array within the created() hook.

code:

created() {
    this.items = [{
        title: "Register",
        icon: "mdi-account-plus",
        route: "register",
        show: () => !appStore.isSignedIn
      }];
}

But for some reason I consistently receive an error telling me "isSignedIn" doesn't exist on undefined. I can't understand how this is true - if I debug the app and put a breakpoint before the access to appStore, the class instance is there, it's populated - although when I try to inspect the value of the 'isSignedIn' property I see the same error in the debugger. How is this possible? The containing variable is clearly not undefined, I'm looking right at it. I'm using 'vuex-module-decorators' for my Vuex stores too, I imagine that's relevant.

putin is a cunt fucked around with this message at 10:40 on Dec 2, 2019

# ? Dec 2, 2019 10:35

Maleh-Vor: Oct 26, 2003; Artificial difficulty.

I have a few years working as a web designer and a few more as a UI designer for games and mobile apps, but for the past couple years at my company I've been getting more and more involved in managing a huge Drupal site we run. I took one of those bullshit "full-stack" bootcamps that actually gave me some overall knowledge of databases and ruby on rails, which was helpful for understanding TWIG, php and so on. I'm looking to leverage this and going a bit deeper, since Drupal devs seem rare in my area. What frameworks or libraries should I look into for Drupal?

# ? Dec 2, 2019 16:42

NotWearingPants: Jan 3, 2006; by Nyc_Tattoo; Nap Ghost

And if you become one of our conference's gold sponsors, your corporation's logo will be on the t-shirt that all attendees receive but will never wear in public because they have corporate logos plastered all over them.

# ? Dec 2, 2019 20:11

The Fool: Oct 16, 2003

I'm bad at CSS.

I made a react component for inline editing of a couple fields in a project, I want the component to look as visually similar as possible in edit mode as in display mode, but have no idea how to go about styling the input field. Just applying the same classes as display mode doesn't seem to change anything.

I'm using Semantic UI for styling.

# ? Dec 3, 2019 19:39

Dominoes: Sep 20, 2007

The Fool posted:

I'm bad at CSS.

I made a react component for inline editing of a couple fields in a project, I want the component to look as visually similar as possible in edit mode as in display mode, but have no idea how to go about styling the input field. Just applying the same classes as display mode doesn't seem to change anything.

I'm using Semantic UI for styling.

Need more details. Some big-picture highlights:
- Flexbox and CSS-grid are lovely, and make many things about styling, from layout to centering much easier.
- For inputs, try messing with these properties: margin, padding, border, font-size, text-align

# ? Dec 3, 2019 19:52

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Crossposting here because this thread seems more active than the other web design thread:

Every few months I try to get srcset to actually work, and it never does despite copying code that should work and just replacing images. Help me finally get it working please!

code:

<img class="hero-image" 
			srcset="/wp-content/uploads/img-hero05m.jpg small,
			/wp-content/uploads/img-hero06.jpg big"
   			 sizes="(min-width: 1px) small,
			(min-width: 768px) big,
			100px"
			 src="/wp-content/uploads/img-hero05m.jpg" alt="Tower" />

I've tried different variations of srcset code in Chrome, Firefox, in Incognito Mode, with "Disable cache" checked, and nothing works.

# ? Dec 3, 2019 20:14

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

The Fool posted:

I'm bad at CSS.

I made a react component for inline editing of a couple fields in a project, I want the component to look as visually similar as possible in edit mode as in display mode, but have no idea how to go about styling the input field. Just applying the same classes as display mode doesn't seem to change anything.

I'm using Semantic UI for styling.

I don't think I've ever used it, but contentEditable might do what you want?

There used to be lots of gotchas with between-browser differences, but I think I remember hearing that has largely been ironed out nowadays.

Someone else might be able to say more about this...

# ? Dec 3, 2019 20:16

The Fool: Oct 16, 2003

This is my component:

The card components are all from Semantic UI and just generate divs with css classes

JavaScript code:

    return (
        <Card>
            <Card.Content>
                <Card.Header>
                        {editMode ? (
                            <Form onSubmit={submitField}>
                                    <Form.Input value={playerName} onBlur={submitField}  onChange={updateName} />
                            </Form>
                        ) : (
                            playerName
                        )}
                        <Icon size='small' name='pencil' onClick={toggleEditMode} />    
                </Card.Header>                           
            </Card.Content>
        </Card>
    );

And this is what it looks like:

# ? Dec 3, 2019 20:18

The Fool: Oct 16, 2003

Thermopyle posted:

I don't think I've ever used it, but contentEditable might do what you want?

There used to be lots of gotchas with between-browser differences, but I think I remember hearing that has largely been ironed out nowadays.

Someone else might be able to say more about this...

Oh wow, that will probably work fine for what I need, thanks.

# ? Dec 3, 2019 20:21

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

What VS Code settings/extensions do I need for curly braces to auto-close in Vue files?

This is driving me crazy.

Also I guess what are other must-have extensions to make Vue and TypeScript work beautifully with VSCode?

teen phone cutie fucked around with this message at 06:06 on Dec 15, 2019

# ? Dec 15, 2019 04:07

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Grump posted:

What VS Code settings/extensions do I need for curly braces to auto-close in Vue files?

This is driving me crazy.

Also I guess what are other must-have extensions to make Vue and TypeScript work beautifully with VSCode?

Have you tried Vetur? It was the goto extension for Vue support back when I was ramping up on it. It specifically mentions how to set up your tsconfig.json so I'm pretty sure this'll cover TypeScript support as well.

# ? Dec 15, 2019 06:34

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

IAmKale posted:

Have you tried Vetur? It was the goto extension for Vue support back when I was ramping up on it. It specifically mentions how to set up your tsconfig.json so I'm pretty sure this'll cover TypeScript support as well.

yep this ended up working out pretty well, along with updating some of my eslint settings in vscode.

This weekend I learned that the quality of Vue's TypeScript typings are nowhere near React's, and it's killing me. Here's to this new job writing only Vue :cheers:

# ? Dec 16, 2019 04:05

Spime Wrangler: Feb 23, 2003; Because we can.

Vue 3 is supposed to come out soon and my understanding is it�s a full port to typescript.

# ? Dec 16, 2019 04:27

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Grump posted:

yep this ended up working out pretty well, along with updating some of my eslint settings in vscode.

This weekend I learned that the quality of Vue's TypeScript typings are nowhere near React's, and it's killing me. Here's to this new job writing only Vue

Yeah I had this disappointing realisation too, although I do still much prefer Vue over React. As Spime says though, Vue 3 is being built itself in TypeScript, so the typings should provide full coverage once it's done.

# ? Dec 20, 2019 00:03

Jaded Burnout: Jul 10, 2004

I'm trying to do some fairly basic React and there's something I'm clearly not understanding.

I have this code in a component:

code:

let onKeyPress = function(taskListID, onEnter) {
  return function(event) {
    // Trigger on enter key only
    if ((event.keyCode || event.which) == 13) {
      event.preventDefault();
      onEnter(taskListID, event.target.value);
    }
  };
};

const NewTask = ({ taskListID, onEnter }) => (
  <form>
    <input type="text" onKeyPress={onKeyPress(taskListID, onEnter)()} />
  </form>
);

the intent being to return an event handler that holds the task list ID and on-enter callback via a closure.

However, I'm getting a TypeError on `event.keyCode`, saying that `event` is `undefined`, even before there's any keypresses.

Help?

Edit: nevermind, I've just rubber-ducked it.

# ? Dec 23, 2019 13:48

smackfu: Jun 7, 2004

I�m surprised there is no eslint rule for �you are not passing a function to your event handler.� Typescript should catch this though.

# ? Dec 23, 2019 13:53

Jaded Burnout: Jul 10, 2004

Well, while I'm here, I'm having a little trouble with the redux part of it.

I have recursive components here, a tree, basically, with a connected container at the top level, and all the nested parts being unconnected components having their chunk of the tree passed in as props. So far so good.

The issue is that once I have the handler hooked in, triggering it adds the item to the state as expected, but the tree doesn't re-render to include them.

I've tried re-making the state object in the reducer to get it to trigger, but no dice. Should I be connecting each level of the tree? Is there a sane way to do that?

# ? Dec 23, 2019 15:18

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

Jaded Burnout posted:

Well, while I'm here, I'm having a little trouble with the redux part of it.

I have recursive components here, a tree, basically, with a connected container at the top level, and all the nested parts being unconnected components having their chunk of the tree passed in as props. So far so good.

The issue is that once I have the handler hooked in, triggering it adds the item to the state as expected, but the tree doesn't re-render to include them.

I've tried re-making the state object in the reducer to get it to trigger, but no dice. Should I be connecting each level of the tree? Is there a sane way to do that?

There are a couple ways this could be tripping you up, but post some code and then we can be sure!

# ? Dec 23, 2019 17:02

Jaded Burnout: Jul 10, 2004

Lumpy posted:

There are a couple ways this could be tripping you up, but post some code and then we can be sure!

https://github.com/jaded-burnout/wip/tree/master/packs

# ? Dec 23, 2019 17:40

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Jaded Burnout posted:

https://github.com/jaded-burnout/wip/tree/master/packs

not a redux expert, but I think you need to rebuild taskLists, too, not just the changed taskList

# ? Dec 23, 2019 17:57

Jaded Burnout: Jul 10, 2004

dupersaurus posted:

not a redux expert, but I think you need to rebuild taskLists, too, not just the changed taskList

Yep that did it, thanks

Does anyone have any opinions on connecting each list independently rather than only connecting the root?

# ? Dec 23, 2019 18:09

Jaded Burnout: Jul 10, 2004

Jaded Burnout posted:

Does anyone have any opinions on connecting each list independently rather than only connecting the root?

In the end I've switched over to react hooks which seems to fit into my brain much better.

# ? Dec 23, 2019 22:01

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

What the gently caress Vue is un-doing years of learning that mutating is BAD what's going on here??

I mean what the gently caress this is the source code for Vue.set:

https://github.com/vuejs/vue/blob/0b31647c41b0c916d40b962723b1de06672d0e01/src/core/observer/index.js#L201

I'm also generally pretty annoyed because I got hired into a really lovely codebase, and it's not helping my first impressions of Vue.

# ? Dec 24, 2019 05:39

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

Jaded Burnout posted:

In the end I've switched over to react hooks which seems to fit into my brain much better.

Generally you don't need redux until you do. I'm using it less and less these days.

# ? Dec 24, 2019 14:49

Dominoes: Sep 20, 2007

Hey dudes. Looked into why VSCode's complaining about comment sin a `manifest.json` file I'm working on. From what I gather, the intent is that `json` is intended to be a pure data format. Doesn't this make it inappropriate for configs like this, `package.json`, and `tsconfig.json`? Why did these become standards, or did I misunderstand something?

# ? Dec 27, 2019 16:39

Adbot: ADBOT LOVES YOU

# ? Jun 14, 2024 06:08

rujasu: Dec 19, 2013

Dominoes posted:

From what I gather, the intent is that `json` is intended to be a pure data format.

Yep!

Dominoes posted:

Doesn't this make it inappropriate for configs like this, `package.json`, and `tsconfig.json`?

Nope!

Dominoes posted:

Why did these become standards, or did I misunderstand something?

Probably because it's easy to do, and because JS & JSON go together like peanut butter & jelly!

Config data is data. There are some disadvantages for using JSON to store config data (no comments is probably the biggest), but if it gets the job done, it gets the job done.

# ? Dec 27, 2019 16:56

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

«‹›236 »