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 »

M31: Jun 12, 2012

Pollyanna posted:

I'm going to recommend to our team lead that we bring in ESLint to fix our confusion and concerns over spacing, style guides, all that poo poo. Failing that, gently caress, I'll do it myself if I have to.

Also recommend Prettier then. Saves you a lot of time actually performing the formatting you decided on.

# ? Jul 12, 2017 16:30

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:39

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

Why not eslint's autofix?

# ? Jul 12, 2017 16:45

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

I'd recommend EditorConfig too. It's is a great way to enforce spacing styles (spaces or tabs, how many spaces per indent level) and line endings, which comes in handy when your dev team has been recently augmented by the customer's own dev team who are all on Windows and love to commit crlf lol

# ? Jul 12, 2017 17:03

Forgall: Oct 16, 2012; by Azathoth

Forgall posted:

Another redux-form question: I use it with immutable, but when I look into my store under form I see that syncErrors is a plain object instead of immutable collection. Other parts of the form state, like registered fields, values etc are Maps, but syncErrors isn't. Is it supposed to be like that or am I using it wrong?

And another problem I have with redux-form, immutable and webpack is that dependency in webpack bundle is broken somehow, call to require('immutable') from redux-form returns object with sole property "__esModule: true" and nothing else. If I make Immutable external in webpack config and put it in a script tag above bundle.js, then it works, but if both are bundled then it doesn't. Same thing happens with another library, react-bs-notifier, which depends on react-jss, which in turn depends on jss. require('jss') returns empty object.

# ? Jul 12, 2017 17:05

Flat Daddy: Dec 3, 2014; by Nyc_Tattoo

Helicity posted:

on the other, we have Ambromov telling people not to use redux-thunk (a thing *he* made) and to use function composition and partial application to create asynchronous middleware.

where's this?

# ? Jul 12, 2017 23:07

lunar detritus: May 6, 2009

Bikeshedding over rules is the worst. Install standard (or any other eslint package that doesn't allow configuring) and you're done.

# ? Jul 12, 2017 23:46

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

Flat Daddy posted:

where's this?

It's kind of buried in Medium posts and tweets from him over the last 1-2 years.

tl;dr: he regrets making redux-thunk but didn't have a better solution at the time, he considers it a "shotgun to the foot", he admits there are some better solutions out there now and personally prefers middleware. He finally added a bunch of documentation and examples for creating asynchronous middleware on the Redux site/github in the last year. I don't disagree - thunks are a really great solution until they spiral out of control and then you start cursing them with every ounce of remaining strength. Proper middleware feels so much nicer, and people seem to rave about epics/sagas and other alternatives.

luchadornado fucked around with this message at 02:51 on Jul 13, 2017

# ? Jul 13, 2017 02:47

geeves: Sep 16, 2004

Helicity posted:

Proper middleware feels so much nicer, and people seem to rave about epics/sagas and other alternatives.

Epics? Sagas? So what are we using now? Because this sounds like a Jira upgrade :suicide:

# ? Jul 13, 2017 03:56

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

thunks have been good to me for the most part, I've built a few redux apps and haven't felt the need to switch over to sagas or custom middleware. Maybe my apps aren't that complex though.

# ? Jul 13, 2017 04:06

Kekekela: Oct 28, 2004

geeves posted:

Epics? Sagas? So what are we using now? Because this sounds like a Jira upgrade

Yeah, even I gotta admit this is an area where the js-fatiguers can rightfully throw stones.

Sagas look intriguing but I was too far down the thunk rabbit-hole by the time I got woke. This is probably the biggest pain point for me in terms of architectural smells in my current app. I could even see rolling my own now, although at the time I started this project I think that would've been out of reach.

# ? Jul 13, 2017 12:07

Tei: Feb 19, 2011

Whats you guys opinion of AMP (Google Amp)? I read about it and sounds like a 1st aprils fool joke that some people tooks seriusly.

It reminds me of WAP pages.

# ? Jul 13, 2017 12:26

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

Tei posted:

Whats you guys opinion of AMP (Google Amp)?

Long winded answer as I've got some insight on this from when I worked at a media conglomerate and was a lead dev on some launch partner things.

Facebook and Apple realized their devices and software were being used to consume web media and said "we're going to build some walled gardens where we control the experience, also we're big enough - so 'gently caress you', we'll serve up ads to make phat cash, and give you a tiny cut". The decision was either to play ball and accept whatever ad revenue they decided to share, or give up traffic to competitors and lose all the associated revenue. Google saw this going on and said "poo poo, we can't give up traffic and ad revenue to these guys", so they picked a few partners that were essentially everyone with skin in the game but not Apple/Facebook and came up with AMP.

The web is Google's walled garden, and the problem with the web is that it can be slow. Go to a major news site and look at all the poo poo that gets loaded. The developers didn't do this on purpose. Business/product mandate that they need X, Y, and Z scripts. You can easily end up with 3 ad networks and 5 tracking scripts. It's very, very hard to argue why 250 ms extra on page load is important, when your opponent is able to say "I just added a script that brought in $5m in revenue". It's a deep rabbit hole where performance suffers at the expense of cold, hard cash, and its much more complex than just X views = X * Y money.

For developers: AMP is nice because things like lazy loading videos/ads/images, responsive design, analytics, paywalls, etc. are all handled for you. All you really need to worry about are finding the constrained AMP tags that you need to use, and putting data into them. I enjoyed building an AMP site from scratch and it was faster than our normal mobile site, and had way more functionality than FB/Apple walled gardens.

For end users: AMP is fast. Google edge caches every page, and the constraints restrict custom scripts from being loaded. Every ad is unintrusive, on a relatively trusted ad network. You have a single ad network, a single tracking script. It really feels like how an ad-supported web should have been implemented.

For biz dev/ad ops/marketing: Argh gently caress AMP! They lost all control and have constraints at every turn. They hate it, and from my experience, none of them saw the irony in that AMP was necessary because of their lovely decisions. It did increase views, and did increase revenue, however.

For privacy enthusiasts: Bad. Google is the MITM on all requests to your site, they're essentially a proxy. At least with a cache, you save money on bandwidth, but with AMP you still get most/all of the requests - they're just coming from Google. Even scarier than this to me is the sign of the way things are going. We're going to have walled gardens and the open web will die at the rate things are going, it's just a question of which flavor it will be. Google's option seems to preserve the web as Google prefers it, which coincidentally is the way most of us think we prefer it. Maybe if FB/Apple won and Google's open web died, something better could replace it, but I have my doubts.

Short answer: it's probably the best solution to an increasingly evident problem, and is pragmatic, yet flawed.

# ? Jul 13, 2017 14:42

Gildiss: Aug 24, 2010; Grimey Drawer

I only just discovered PWA and AMP via a code challenge for an interview and that is an excellent summary for something I still didn't fully grokk.

Going to be interesting building a site ground up with it I think.

# ? Jul 13, 2017 15:01

Tei: Feb 19, 2011

Thanks for the honesty. I appreciate it more than their own Google pages about the subject.

I am wary of every new alternative to HTML I find because go burned many times with other tag technologies that ended in the trash bin. You kind of sell me this better than google did.

It don't seems a end of the problems for me. For some people it will look like I am the one that say "NO" when I say something can't be done in AMP.

# ? Jul 13, 2017 15:18

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

AMP is amazing to me as an end user. Sites are like 100x better.

I'm super wary about AMP as a possible future path for the web.

# ? Jul 13, 2017 15:25

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.'

Yeah we're converting the public side of our site to use AMP. Apparently google search is going to start prioritizing sites that can load quickly (oh how convenient, google has a tool for that), and our current pages are beasts.

# ? Jul 13, 2017 15:42

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

Some people here wanted to use AMP because of buzzword, when I told them it meant they couldn't have all the custom JavaScript we have/"need" on our product pages, they backed off.
I could very much see it for a very read-only/article based website though.

Since there is some downtime in my main project, I'm getting back into Webpack. I'm going through the Guides and was starting to pick it up until I tried Cleaning the /dist folder. That whole page is poor, look at the supposed diffs throughout that page alone, they're clearly missing stuff.* As such, I'm sure I'm missing stuff so webpack won't compile now.

index.js

code:

import _ from 'lodash';
import printMe from './print.js';

function component() {
  var element = document.createElement('div');
  var btn = document.createElement('button');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(component());

webpack.config.js

code:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: 'src/index.html'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

*first one has import from lodash even though the previous page explicitly said to remove it.
Suddenly, under "Setting up HtmlWebpackPlugin", webpack.config has vendor: ['lodash']
Later, under "Cleaning up the /dist folder", HtmlWebpackPlugin has two more properties of filename and template

# ? Jul 13, 2017 18:24

huhu: Feb 24, 2006

I've been focusing on my back-end skills for the past several months and I think it's time I learn more about front end. On the front end, I already know about LESS, SASS, Bootstrap, jQuery, Jinja2, and that's it. I was thinking of starting a new project with Flask on the back-end and then React, Yarn, and Webpack on the front end. Is there anything else that'd be useful to learn that's related? I've not really worked with anything advanced on the front end before. I looked at Redux but it seems like that's not necessary if I'm working with Flask but I could be wrong.

# ? Jul 13, 2017 20:24

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

huhu posted:

I've been focusing on my back-end skills for the past several months and I think it's time I learn more about front end. On the front end, I already know about LESS, SASS, Bootstrap, jQuery, Jinja2, and that's it. I was thinking of starting a new project with Flask on the back-end and then React, Yarn, and Webpack on the front end. Is there anything else that'd be useful to learn that's related? I've not really worked with anything advanced on the front end before. I looked at Redux but it seems like that's not necessary if I'm working with Flask but I could be wrong.

Flask and Redux are orthogonal technologies. You probably won't understand the point of Redux until you've built a number of user interfaces.

I think React with babel and webpack is probably a decent enough place to start.

Yarn is a nothing. Its like saying "I'm going to learn construction and I'm going to start with earth moving equipment, power tools, how to use a pencil". Pencils (Yarn) are very useful, but you don't really say you're going to learn them. Yarn consists of like 2 commands you'll use 95% of the time. The most complicated part of Yarn isn't yarn itself, it's package.json, and package.json comes from node.

Modern front end is just a convoluted mess of technologies it really just takes diving in and hammering away at doing the most basic things until all of a sudden it starts to "click" for you.

# ? Jul 13, 2017 20:35

smackfu: Jun 7, 2004

It really annoys me that node-sass, the defacto sass handler, uses a native C library to do the actual work. It means that package breaks more than all our other ones combined.

# ? Jul 13, 2017 21:03

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

huhu posted:

I've been focusing on my back-end skills for the past several months and I think it's time I learn more about front end. On the front end, I already know about LESS, SASS, Bootstrap, jQuery, Jinja2, and that's it. I was thinking of starting a new project with Flask on the back-end and then React, Yarn, and Webpack on the front end. Is there anything else that'd be useful to learn that's related? I've not really worked with anything advanced on the front end before. I looked at Redux but it seems like that's not necessary if I'm working with Flask but I could be wrong.

I would look into TypeScript. It is useful for all manner of web development, and makes your life much easier in the long run.

# ? Jul 13, 2017 21:51

meatbag: Apr 2, 2007; Clapping Larry

My workplace is moving away from an antiquated GXT implementation, but we haven't decided what should replace it yet. I'm thinking I want us to give Elm a shot, but other people on the team want to use more mainstream stuff like React. Or write frontend in Java with Vaadin/GXT :stare:

. Also I dont know poo poo about frontend, and Elm seems like a pleasant thing to learn.

The site in question is mostly about advanced search for various documents, displaying them, and maintaining a user-specific selection of those documents, along with sharing etc. Is Elm going to be a good fit for that, or am I setting us up for failure?

# ? Jul 14, 2017 05:44

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

meatbag posted:

My workplace is moving away from an antiquated GXT implementation, but we haven't decided what should replace it yet. I'm thinking I want us to give Elm a shot, but other people on the team want to use more mainstream stuff like React. Or write frontend in Java with Vaadin/GXT . Also I dont know poo poo about frontend, and Elm seems like a pleasant thing to learn.

The site in question is mostly about advanced search for various documents, displaying them, and maintaining a user-specific selection of those documents, along with sharing etc. Is Elm going to be a good fit for that, or am I setting us up for failure?

I hate to sound like a broken record, but I think TypeScript would be a much better choice for a language to take the place of JavaScript. It is a strict superset, so you can take advantage of existing JS codebases and code snippets.

Skandranon fucked around with this message at 17:24 on Jul 14, 2017

# ? Jul 14, 2017 05:47

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

Seconding JavaScript or TypeScript. Hiring and retention are easier if you use popular tools.

# ? Jul 14, 2017 05:50

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

Elm is cool, but it is not yet what I would call a 'practical' choice. Many interactions with the DOM will require you to still straddle Javascript and Elm to get the whole picture working fine, and the language and ecosystem is still developing and changing. React with Redux is like, 'close enough', while still retaining the ability to go direct to the DOM elements and vanilla Javascript without much effort.

# ? Jul 14, 2017 06:32

PRADA SLUT: Mar 14, 2006; Inexperienced,
heartless,
but even so

I have an image that can use a script to make it fade-in when the user presses a button. However, if I assign a usemap to it, it no longer fades. Any idea how to make it fade even if it has a map associated to it?

The fade happens with a $("#div1").fadeToggle(400);

And the image is <img id="div1" src="img.png" usemap="#mymap" style:"display:none">

(If I remove the usemap it works perfectly).

# ? Jul 14, 2017 18:24

Tei: Feb 19, 2011

PRADA SLUT posted:

I have an image that can use a script to make it fade-in when the user presses a button. However, if I assign a usemap to it, it no longer fades. Any idea how to make it fade even if it has a map associated to it?

I offer a alternative solution:

have another image on top, a transparent pixel, that is the one with the usemap, and below it, the original image. now you should be able to fade it. is strange that you can't fade a image with a usemap.

# ? Jul 14, 2017 18:28

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

Ugh. How have I not encountered this up until now? I am having a problem with change detection in Angular 2.

I have a child component which generates a class which it sets as an Output param. The parent component is listening for changes. That part works fine.

But I have other child components which are using the same value, and they aren't calling ngOnChanges when the component updates. The only child component which IS calling OnChange correctly is one which is only using one (primitive) property of the changed class. From reading about it, it seems to be due to the reference not changing, even though the underlying object IS changing. But for some reason none of the solutions I'm seeing seem to work. Here's a breakdown of what I got:

markup (parent component):

code:


    <app-codegen (update)="codeUpdated($event);"></app-codegen>  /// child which generates code
    <app-class [selected]="code.first"></app-class> // this child fires onChange every time.  (using only one primitive property of code)
    <app-covenant [code]="code"></app-covenant> // this fires onChange the first time only
    <app-additional-rites [code]="code"></app-additional-rites>  // as does this.

The codegen component basically has a button for the user to click at which point it creates a new Code, and everything should update.

Here is the Code class:

code:

export class Code {
    public first: number;
    public middle: number;
    public last: number;
    public codeString: string = '';
    
    constructor() {
        this.generate();
    }

    public generate() {
        let code = Math.floor(Math.random() * (999 - 1 + 1)) + 1;
        this.first = Math.floor(code / 100);
        this.middle = Math.floor((code % 100) / 10);
        this.last = Math.floor((code % 100) % 10);
        this.codeString = this.stringify(code);
    }

    private stringify(code) {
        let str = code + '';
        let pad = "000"
        return pad.substring(0, pad.length - str.length) + str
    }
}

So - I assume the problem is due to Code being a ref type and not a primitive, but how can I force all the other components to update when it changes?

# ? Jul 14, 2017 20:06

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

HaB posted:

Ugh. How have I not encountered this up until now? I am having a problem with change detection in Angular 2.

I have a child component which generates a class which it sets as an Output param. The parent component is listening for changes. That part works fine.

But I have other child components which are using the same value, and they aren't calling ngOnChanges when the component updates. The only child component which IS calling OnChange correctly is one which is only using one (primitive) property of the changed class. From reading about it, it seems to be due to the reference not changing, even though the underlying object IS changing. But for some reason none of the solutions I'm seeing seem to work. Here's a breakdown of what I got:

So - I assume the problem is due to Code being a ref type and not a primitive, but how can I force all the other components to update when it changes?

https://angular.io/guide/lifecycle-hooks looks to have a specific example around using DoCheck() that should solve your exact problem.

# ? Jul 14, 2017 20:22

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

smackfu posted:

It really annoys me that node-sass, the defacto sass handler, uses a native C library to do the actual work. It means that package breaks more than all our other ones combined.

Sass doesn't have any native JavaScript implementation, that has been a strike against it for a long time in Node development. Most people I know of that are aware of this issue switched to less. The issue I have with less is that for some ungodly reason there is no included file watcher.

Also if you want any sort of basic css compatibility or, well, anything really. You need additional packages. Lately I've been ruthlessly feeling out Myth which is based instead on the actual css spec.

Nolgthorn fucked around with this message at 16:11 on Jul 15, 2017

# ? Jul 15, 2017 16:08

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

Skandranon posted:

https://angular.io/guide/lifecycle-hooks looks to have a specific example around using DoCheck() that should solve your exact problem.

Ah yes. Thank you.

That is a weird little quirk. I mean I understand why it works the way it does, but it seems like an odd choice to default to "no change" for reference types unless the actual reference changes. In fact I can't think of a use-case where that is the behavior I would want vs it changing when a property on my reference type changes.

If anyone knows why that's a good idea, please explain.

# ? Jul 15, 2017 16:28

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

HaB posted:

Ah yes. Thank you.

That is a weird little quirk. I mean I understand why it works the way it does, but it seems like an odd choice to default to "no change" for reference types unless the actual reference changes. In fact I can't think of a use-case where that is the behavior I would want vs it changing when a property on my reference type changes.

If anyone knows why that's a good idea, please explain.

It's a lot faster. Monitoring for reference changes of a given object is easy. Checking to see if any property on an object has changed is expensive, there could be 10,000 fields to check. They didn't choose "primitives, do X, objects, do Y", it's that whenever the value of a primitive changes, it's reference changes, as they are immutable. Objects are not immutable, so changing obj.x does not change the reference of obj. This is why if you are passing obj.x (and x is a number), it is picked up, because when obj.x changes, it's reference changes.

# ? Jul 15, 2017 18:29

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

Skandranon posted:

It's a lot faster. Monitoring for reference changes of a given object is easy. Checking to see if any property on an object has changed is expensive, there could be 10,000 fields to check. They didn't choose "primitives, do X, objects, do Y", it's that whenever the value of a primitive changes, it's reference changes, as they are immutable. Objects are not immutable, so changing obj.x does not change the reference of obj. This is why if you are passing obj.x (and x is a number), it is picked up, because when obj.x changes, it's reference changes.

Ah yeah. Makes sense.

I guess I am always striving to keep my objects relatively small and manageable, but I realize at times that's just not possible.

# ? Jul 16, 2017 00:19

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

Wow. So I just tried to compile an Angular 2 app using the CLI for prod for the first time.

Heh.

Apparently you cannot use a private var in a template. At all. Based on the github issues about it I looked at - it has ALWAYS been this way, but they just started having the CLI report the errors.

It's not Angular's problem it's the AOT compiler. I'm not mad, but man...it would have been nice to KNOW that, since the last time I used a language which offered accessibility modifiers for variables the general rule was: if only this thing needs it - make it private. So naturally anything only used by a particular component I was marking as private.

Luckily it was a super small app and only took a minute to fix, but yeah - ew.

If you want to test this yourself, generate a new app, and change the 'App Works!' variable in App Component to private, then run ng build --prod

Good times.

# ? Jul 16, 2017 17:19

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

I think I'll just avoid Angular altogether, thanks.

# ? Jul 17, 2017 14:34

lunar detritus: May 6, 2009

While I didn't get bit by that particular issue (my linter complained about defining private variables not used in the class and I went ok :shrug:

) I had to change a lot of things to make our Angular apps AoT-compatible. It's... a lot stricter about what it needs. But AoT compilation still is an optional step so I wouldn't discard Angular because of that.

# ? Jul 17, 2017 16:36

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

Maluco Marinero posted:

Elm is cool, but it is not yet what I would call a 'practical' choice. Many interactions with the DOM will require you to still straddle Javascript and Elm to get the whole picture working fine, and the language and ecosystem is still developing and changing. React with Redux is like, 'close enough', while still retaining the ability to go direct to the DOM elements and vanilla Javascript without much effort.

Agreed. I learned / messed with Elm and I am very glad I did because it really helped me understand a lot of functional concepts at the gut level instead of at the "I think I get how this works" one. That said, Other than very small personal projects, I would not use it for the reasons you mentioned. Well worth futzing about with though!

# ? Jul 17, 2017 17:08

PRADA SLUT: Mar 14, 2006; Inexperienced,
heartless,
but even so

How do you make individual table cell a background color using CSS? I have a CSS file that notes style elements for the whole table, but is there a way to make individual cells a certain background color, without wrapping each of them in a div?

PRADA SLUT fucked around with this message at 17:39 on Jul 17, 2017

# ? Jul 17, 2017 17:36

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

PRADA SLUT posted:

How do you make individual <th> a background color using CSS? I have a CSS file that notes style elements for the whole table, but is there a way to make individual cells a certain background color, without wrapping each of them in a div?

Give them a class.

# ? Jul 17, 2017 17:38

Adbot: ADBOT LOVES YOU

# ? May 19, 2024 07:39

PRADA SLUT: Mar 14, 2006; Inexperienced,
heartless,
but even so

prom candy posted:

Give them a class.

<th><div class="myClass">Text</div></th>

For each one?

E: when the class is defined with background-color, it leaves a table with a "color stripe", respecting the text padding, instead of filling the entire cell and ignoring the padding.

PRADA SLUT fucked around with this message at 17:43 on Jul 17, 2017

# ? Jul 17, 2017 17:40

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

«‹›235 »