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 »

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

Several things like believing that the store changes before the reducers were executed, mapStateToProps being how the store was updated, etc. Relatively minor things that all kinda added up. Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component, and an overall misunderstanding of the unidirectional flow. It seemed that the contractor/expert agreed with my assessment and understanding of the situation much more than he did with the tech lead. It was just kind of frustrating to see that I had more knowledge and familiarity with than he did, even though my coworker and I were struggling to apply what we learned from tutorials and the documentation to the code we're working with, thanks to our weirdass approach.

It just felt like we've had lots of unnecessary frustration and blockage across the team that could have been avoided by our tech lead actually researching and thinking things out at the beginning. It's been pretty tough and I'm just annoyed and resentful, I guess.

# ? Feb 28, 2017 23:32

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 02:51

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

Pollyanna posted:

Several things like believing that the store changes before the reducers were executed, mapStateToProps being how the store was updated, etc. Relatively minor things that all kinda added up. Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component, and an overall misunderstanding of the unidirectional flow. It seemed that the contractor/expert agreed with my assessment and understanding of the situation much more than he did with the tech lead. It was just kind of frustrating to see that I had more knowledge and familiarity with than he did, even though my coworker and I were struggling to apply what we learned from tutorials and the documentation to the code we're working with, thanks to our weirdass approach.

It just felt like we've had lots of unnecessary frustration and blockage across the team that could have been avoided by our tech lead actually researching and thinking things out at the beginning. It's been pretty tough and I'm just annoyed and resentful, I guess.

Sounds more like he doesn't LIKE React (I can relate!) and is simply refusing to learn/embrace it.

# ? Mar 1, 2017 00:01

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

Forgall posted:

Could you expound on this a little? I'm learning react and redux and I'm worried I might be misunderstanding things as well.

Spend a night and really understand event sourcing. Fowler's always a good resource: https://martinfowler.com/eaaDev/EventSourcing.html

Also try doing some functional programming tests on Hacker Rank. Functional patterns make a lot of sense in React/Redux. Redux and Elm are designed to embrace event sourcing and functional programming at their core, so stop fighting against it and shoehorning in other things.

Those two things alone will put you ahead of most other front-end developers.

# ? Mar 1, 2017 00:09

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

Pollyanna posted:

believing that the store changes before the reducers were executed

Your tech lead ain't fulfilling their job title if they're confused about such a basic redux concept. Your frustration is understandable.

# ? Mar 1, 2017 00:31

Kekekela: Oct 28, 2004

Pollyanna posted:

Several things like believing that the store changes before the reducers were executed,

How would this be happening? God isn't it literally in the first paragraph of the Redux overview that only reducers update the state?

quote:

mapStateToProps being how the store was updated, etc.

How could you keep thinking this after trying it? What kind of crap was he doing to make this quasi-work?

quote:

Relatively minor things that all kinda added up.

Those are pretty huge honestly.

quote:

Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component,
...an overall misunderstanding of the unidirectional flow.

Jesus christ, its like malpractice. Does he ever wonder why components as pure functions are so popular if this retarded vision was reality? Since it sounds like he's never looked at any other source code, I'm guessing not.

This just seems like he put almost zero effort into researching or using it on toy projects before unleashing his bad ideas on an actual project. He could've invested a few days and actually had a clue what the gently caress he was doing. I'm irrationally angry about this. :argh:

# ? Mar 1, 2017 04:22

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

Kekekela posted:

How could you keep thinking this after trying it? What kind of crap was he doing to make this quasi-work?

Look at this guy who never wrote his own

code:

mapStateToPropsAndUpdateStore

# ? Mar 1, 2017 13:56

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

Yeah, my coworker and I have very little faith in our tech lead, given that he has such poor familiarity with the framework/library, and given our poor source code. This is the same guy who goes dark for days on end redoing our deployment pipeline over and over, the most recent refactoring of which somehow made us unable to get any of our code changes to show up in local development. :psyduck:

He didn't even test the code to make sure it still worked with his changes before merging his PR in himself.

Insanity aside, how do you handle a debounced function for delayed live input in Redux? We have a couple inputs that are uncontrolled due to the need to debounce them so we aren't calling the API on each change, but that requires some statefulness and unpredictability. Is there a more event-sourcey way to wait for X ms before firing an API call? What's the recommended approach?

Pollyanna fucked around with this message at 14:53 on Mar 1, 2017

# ? Mar 1, 2017 14:48

Kekekela: Oct 28, 2004

I just use debounce but I may be missing something in your use case.

# ? Mar 1, 2017 14:56

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

Kekekela posted:

I just use debounce but I may be missing something in your use case.

Yeah, do this. Slap that on your key / update handlers.

# ? Mar 1, 2017 15:06

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

We are using debounce, actually...I suppose it might be easier to explain with an example (don’t worry about the details, sorry about the formatting). In one of our components, we have an element (from React-Bootstrap) as such:

code:



<FormControl componentClass="input" type="text" className="debounced-input"

&#160; pattern="-?[\d.,]+"

&#160; defaultValue={this.nice(this.getDebouncedInputValue())}

&#160; inputRef={(input) => { this.debouncedInput = input; }}

&#160; onChange={this.handleUncontrolledChange.bind(this, 'debouncedInput')}

&#160; onBlur={this.handleBlur.bind(this, 'debouncedInput')} />

This element is part of a class-based React component that has a few helper functions:

code:



handleUncontrolledChange(name, event) {

&#160; let value = event.target.value;


&#160; if (name === "debouncedInput") {

&#160; &#160; value = this.getOtherDebouncedInputValue(parseFloat(value.replace(/,/g,'')));


&#160; &#160; if (value > 100) {

&#160; &#160; &#160; &#160; value = 100;

&#160; &#160; &#160; &#160; event.target.value = Math.round(this.state.roundedValue / 12);

&#160; &#160; }


&#160; &#160; this.debouncedFunction(value);


&#160; &#160; return;

&#160; }

}

code:



setContributionRate(value) {

&#160; if (Number.isFinite(value)) {

&#160; &#160; this.props.setInputState({

&#160; &#160; &#160; debouncedInputValue: value

&#160; &#160; });


&#160; &#160; this.props.updateStore();

&#160; }

}

The latter of which is debounced in the constructor:

code:



constructor(props) {

&#160; super(props);


&#160; this.state = props.state;

&#160; this.debouncedFunction = _.debounce(this.debouncedFunction, 750);

}

This approach requires some statefulness in the component, and as such complicates it a bit more. We've had issues with our components' statefulness being a source of confusion for a few developers, so I'm wondering if there's a way to accomplish this that doesn't require class methods on a larger component and keeping state in it. Is there a way to do this by relying on the Redux store or something?

# ? Mar 1, 2017 15:29

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

Pollyanna posted:

This approach requires some statefulness in the component, and as such complicates it a bit more. We've had issues with our components' statefulness being a source of confusion for a few developers, so I'm wondering if there's a way to accomplish this that doesn't require class methods on a larger component and keeping state in it. Is there a way to do this by relying on the Redux store or something?

Uncnotrolled inputs shouldn't touch / interact with the store. That is why they are "uncontrolled". One solution might be to have the input update internal state always *and* call a debounced function that does something. I made an example here: https://jsfiddle.net/cvmkfk39/1/ (EDITED with bonus comments!)

You could obviously make it so the debounced function is passed in as a prop to make it reusable and what not.

Or you could always just use this: https://www.npmjs.com/package/react-debounce-input

Lumpy fucked around with this message at 16:28 on Mar 1, 2017

# ? Mar 1, 2017 16:21

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

Had time to work on my React CRUD again today, but I think I may have hit the point where I have to use Redux. I'm hoping there's a way to just create delete and update functions with just React, as I really don't want to implement Redux this late into development

I have a parent component that has a state that looks something like this after entering information:

JavaScript code:

people = [
	{
		id: 1
		person{
			fname: "jane",
			lname: "doe"
		}
	}
	{
		id: 2
		person{
			fname: "jimmy",
			lname: "doe"
		}
	}
]

I'm assuming to create a delete function I'm going to have to filter the array like this somehow:

JavaScript code:

function filtered(value) {
  return value != id of the current entry;
}

var filtered_result = this.state.filter(filtered);
this.setstate{filtered_result}

But my problem is I just can't figure out a way to get the id of the current entry

My parent is where the state is being stored:

JavaScript code:

import React, {Component} from 'react';
import '../styles/App.css';
import Form from './Form.js';
import Entries from './Entries.js';

class Parent extends Component {
    constructor(props, context) {
        super(props, context);
        //set state to an empty array
        this.state = {
            people: []
        };
    }
    nextId() {
        this.uniqueId = this.uniqueId || 0
        return this.uniqueId++
    }
    handleSubmit = e => {
        e.preventDefault(); //prevent form from refreshing the page
        var myForm = document.getElementById('addform');
        let data = new FormData(myForm); //grabs all the input data from the form
        var eachPerson = {}; //eachPerson will concatonate with this.state, so it will end up being an array of objects
        for (let [key,
            val]of data.entries()) {
            eachPerson[key] = val;
        } //object will end up looking like this {fname: "Joe"}
        var people = [
            ...this.state.people, {
                id: this.nextId(),
                person: eachPerson
            }
        ] //add the new object to the people array
        this.setState({people});
        document
            .getElementById("addform")
            .reset(); //reset the input fields onsubmit
        console.log(this.state);
    }
    render() {
        return (
            <div>
                <Form onClick={this.handleSubmit}/>
                <Entries people={this.state.people}/>
            </div>
        )
    }
}

export default Parent;

And my Entries that is taking the state of the parent in as a prop

JavaScript code:

import React, {Component} from 'react';
import '../styles/App.css';

class Entries extends Component {
  render() {
    // Parent'js state (an array named people) was passed to entries as a prop //
    // map over each object in the people array
    let peopleData = this
      .props
      .people
      .map((object, index) => {
        // return each property in each object
        return (
          <div key={index}>
            <h1>{object.person.fname} {object.person.lname}</h1>
            <p>{object.person.address}</p>
            <p>{object.person.email}</p>
            <p>{object.person.phone}</p>
          </div>
        )
      });
    //display the results of peopleData
    return (
      <div>{peopleData}</div>
    )
  }
}

export default Entries;

# ? Mar 1, 2017 17:19

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

Grump posted:

Had time to work on my React CRUD again today, but I think I may have hit the point where I have to use Redux. I'm hoping there's a way to just create delete and update functions with just React, as I really don't want to implement Redux this late into development

But my problem is I just can't figure out a way to get the id of the current entry

Pass in a delete handler to the list component, and call it w/ the ID?

Simplified example:

JavaScript code:


class Parent extends Component {

    // your existing state and so on here

    deleteFunction(id) {
        // do the thing to delete here
    }
   
   // pass deleteFunction down....
   render() {
        return (
            <div>
                <Form onClick={this.handleSubmit}/>
                <Entries people={this.state.people} deleteHandler={ this.deleteFunction } />
            </div>
        )
    }
}


// then in your Person
class Entries extends Component {
  render() {

    const peopleData () {
      return this.props.people.map((object, index) => {

        return (
          <div key={index}>
           ... 
            <button onClick={ () => this.props.deleteHandler( object.person.id ) }> DELETE ME</button>
          </div>
          )
        });
    }

    return (
      <div>{ peopleData() }</div>
    )
  }
}

# ? Mar 1, 2017 17:56

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

yeah. I tried that exactly thing earlier actually.

After putting this is my delete function, I was getting the error "Cannot read property 'people" of undefined":

JavaScript code:

delete(id) {
        var filteredResult = this
            .state
            .people
            .filter(entry => entry.id !== id);
        this.setState({filteredResult});
    }

# ? Mar 1, 2017 20:20

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

Grump posted:

yeah. I tried that exactly thing earlier actually.

After putting this is my delete function, I was getting the error "Cannot read property 'people" of undefined":
JavaScript code:
delete(id) {
        var filteredResult = this
            .state
            .people
            .filter(entry => entry.id !== id);
        this.setState({filteredResult});
    }

The method passed into the child component needs to be bound to your parent instance so it knows which object's "this" to mutate.

Their are many ways of doing this as shown here:
http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

# ? Mar 1, 2017 20:30

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

Worked like a charm! Thanks!

Now for the update feature....

# ? Mar 1, 2017 20:47

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

Grump posted:

Worked like a charm! Thanks!

Now for the update feature....

Countdown to you discovering storing data as a combination of a list of IDs _and_ a map of objects keyed by ID can be a lot easier / better than storing a list of objects....

# ? Mar 1, 2017 20:51

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

I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag.

The course (and others of hers, as far as I can see) uses webpack as a bundler. I'm OK with that, but the configuration webpack.config.js file from one of the exercises isn't working with the current version of webpack.

code:

var webpack = require("webpack");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: "dist/assets",
		filename: "bundle.js",
		publicPath: "assets"
	},
	devServer: {
		inline: true,
		contentBase: './dist',
		port: 3000
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				loader: ["babel-loader" ],
				query: {
					presets: ["latest", "stage-0", "react"]
				}
			}
		]
	}
}

Produces the following:

code:

throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query cannot be used with loaders (use options for each array item)")));

My question is: should I bother trying to figure these sorts of things out (is that worth my while?), or should I wrangle my package.json so that my dependencies are the same versions that were used by the author? In this case, I can see that the author was using webpack 1.13.3, while my fresh install is 2.2.1.

e: And if anyone knows any great courses / authors on Lynda, feel free to pass that on.

# ? Mar 6, 2017 06:17

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

I have a textarea in an angular template whose width I can adjust, but not its height:

code:

    <textarea cols="120" rows="8" ng-model="buttCtrl.huge_log" wrap="off"></textarea>

I get two rows regardless, even when I have more data than that. I'm assuming I have something fundamentally wrong here because I don't do this too often, but I really don't see anything about this for how common textareas as a general thing.

# ? Mar 6, 2017 06:22

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

Newf posted:

I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag.

The course (and others of hers, as far as I can see) uses webpack as a bundler. I'm OK with that, but the configuration webpack.config.js file from one of the exercises isn't working with the current version of webpack.
code:
var webpack = require("webpack");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: "dist/assets",
		filename: "bundle.js",
		publicPath: "assets"
	},
	devServer: {
		inline: true,
		contentBase: './dist',
		port: 3000
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				loader: ["babel-loader" ],
				query: {
					presets: ["latest", "stage-0", "react"]
				}
			}
		]
	}
}
Produces the following:
code:
throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query cannot be used with loaders (use options for each array item)")));
My question is: should I bother trying to figure these sorts of things out (is that worth my while?), or should I wrangle my package.json so that my dependencies are the same versions that were used by the author? In this case, I can see that the author was using webpack 1.13.3, while my fresh install is 2.2.1.

e: And if anyone knows any great courses / authors on Lynda, feel free to pass that on.

I think it's worth learning how to use webpack 2.

I think they redid the way to set loaders, every react tutorial that I've been going through that uses webpack 2 has the config set up this way.

Install the following npm packages:

code:

    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",

Create a .babelrc file in your root folder to set the types of specific loaders to use with it.

code:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-2"
  ]
}

Webpack 2 has a new syntax for loaders, this is how mine looks.

code:

module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
   ]
}

Im pretty new to webpack and am still at the point where I kind of understand how it works, but I'm mostly copying and pasting stackoverflow solutions when something goes wrong. Need to take some time and actually learn how it all works.

# ? Mar 6, 2017 06:30

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

Newf posted:

I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag.

The course (and others of hers, as far as I can see) uses webpack as a bundler. I'm OK with that, but the configuration webpack.config.js file from one of the exercises isn't working with the current version of webpack.
code:
var webpack = require("webpack");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: "dist/assets",
		filename: "bundle.js",
		publicPath: "assets"
	},
	devServer: {
		inline: true,
		contentBase: './dist',
		port: 3000
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				loader: ["babel-loader" ],
				query: {
					presets: ["latest", "stage-0", "react"]
				}
			}
		]
	}
}
Produces the following:
code:
throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query cannot be used with loaders (use options for each array item)")));
My question is: should I bother trying to figure these sorts of things out (is that worth my while?), or should I wrangle my package.json so that my dependencies are the same versions that were used by the author? In this case, I can see that the author was using webpack 1.13.3, while my fresh install is 2.2.1.

e: And if anyone knows any great courses / authors on Lynda, feel free to pass that on.

https://webpack.js.org/guides/migrating/

Rename 'loaders' to 'rules', 'query' to 'options'.

# ? Mar 6, 2017 15:11

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

Rocko Bonaparte posted:

I have a textarea in an angular template whose width I can adjust, but not its height:
code:
    <textarea cols="120" rows="8" ng-model="buttCtrl.huge_log" wrap="off"></textarea>
I get two rows regardless, even when I have more data than that. I'm assuming I have something fundamentally wrong here because I don't do this too often, but I really don't see anything about this for how common textareas as a general thing.

Angular has no special bindings regarding the size of textarea. Have you tried using CSS to set the size?

# ? Mar 6, 2017 18:39

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

Another React-Redux question. I want to use React-Bootstrap's Modal component, which seems to require a binding to a visibility state and a callback to set that state to false. My initial attempt was to add a couple action creators and a reducer to set a portion of the store for visibility, but I'm not sure how to pass in the section of the store. For mapStateToProps, how do I combine two different parts of the store e.g. state.topStore.mainComponent and state.topStore.visibilityStore? Can the

code:


return {
  state: state.topStore.mainComponent
}

part be combined somehow?

# ? Mar 6, 2017 22:01

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

Sure thing.

code:

function mapStateToProps(state) {
  return {
    mainComponent: state.topStore.mainComponent,
    visibility: state.topStore.visibilityStore,
    urgentTodo: "have the team repeatedly revise the Redux docs"
  };
}

And then use this.props.mainComponent and this.props.visibility in the component (rename the keys as required).

_{e: Bonus points for using ES6 destructuring instead of repeating the state.topStore dereference.}

ynohtna fucked around with this message at 22:31 on Mar 6, 2017

# ? Mar 6, 2017 22:25

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

Pollyanna posted:

Another React-Redux question. I want to use React-Bootstrap's Modal component, which seems to require a binding to a visibility state and a callback to set that state to false. My initial attempt was to add a couple action creators and a reducer to set a portion of the store for visibility, but I'm not sure how to pass in the section of the store. For mapStateToProps, how do I combine two different parts of the store e.g. state.topStore.mainComponent and state.topStore.visibilityStore? Can the
code:
return {
  state: state.topStore.mainComponent
}
part be combined somehow?

Your question is very confusing.

Is your modal used throughout the app? Then maybe it makes sense to have it's visibility in the app store. If not, then why doesn't the parent component just track that locally and pass a function and bool to it?

Why would you need to combine the two parts of the store into one "thing"?

What is wrong with:

code:

return {
  state: state.topStore.mainComponent.whatever, 
  visibility: state.topStore.visibilityStore.blah
}

If for some reason you *did* need to combine them, you could do it in many ways. But you don't need to. And the fact that you have things names topStore.visibilityStore makes me sad given how you've described your project lead's lack of clue.

# ? Mar 6, 2017 22:27

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

Yeah I don't know what the gently caress I'm talking about either. I made it easy on myself and just directly did setState stuff to handle it. /dusts hands

Also don't get me started on our stupid store approach. It's hellish :cry:

Pollyanna fucked around with this message at 22:50 on Mar 6, 2017

# ? Mar 6, 2017 22:43

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

Pollyanna posted:

Yeah I don't know what the gently caress I'm talking about either.

You are identifying code smells, asking questions, staying open to learning, and taking expedient action whilst trying to operate in an suboptimal work environment.

You're doing fine, my friend. Keep at it. :unsmith:

# ? Mar 7, 2017 00:08

Knyteguy: Jul 6, 2005; YES to love
NO to shirts; Toilet Rascal

I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)?

ASP.NET of some flavor will be used if it matters. Is there anything new in the CSS world that's worth knowing about?

# ? Mar 7, 2017 00:53

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

Modest Mouse cover band posted:

I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)?

ASP.NET of some flavor will be used if it matters. Is there anything new in the CSS world that's worth knowing about?

If you're not rendering anything state heavy on the client (think webapp) then frameworks like Angular and libraries React/Vue, etc. are overkill and shoehorning them isn't smart. Razor is an excellent templating language, so don't be afraid to use it. You wouldn't want client JS to interact with a database anyways - use MVC for your API layer.

Also, I'd personally be really frustrated with any project that was using jQuery in 2017 without a very good reason. Legacy code, legacy browser support, and some horrible peer dependency like what SignalR has are the only acceptable reasons in my book. Check out http://youmightnotneedjquery.com/

As far as CSS goes, just use SASS (https://sass-guidelin.es/). You might want to look at something like Pure.css as a newer, lighter alternative to Bootstrap if you don't have UX making demands of you.

If anyone is ever looking for "what should I look into this year", Thoughtworks is a great place to start: https://www.thoughtworks.com/radar or you could check out http://stateofjs.com/ for a more front-end specific place.

luchadornado fucked around with this message at 01:55 on Mar 7, 2017

# ? Mar 7, 2017 01:52

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

Modest Mouse cover band posted:

I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)?

ASP.NET of some flavor will be used if it matters. Is there anything new in the CSS world that's worth knowing about?

React/Redux is my suggestion. No binding, its "just" JS, you can apply what you learn elsewhere, you can ditch React or Redux and keep the other to experiment more, and using those two learned me some functional programming stuff to boot!

If you want a "compiles to JS" try Elm.

For CSS, flexbox is oldish but supported enough to use and it's awesome.

# ? Mar 7, 2017 04:55

Plavski: Feb 1, 2006; I could be a revolutionary

ASP.net core MVC is actually nice if you decide not to go down the JavaScript path after all.

# ? Mar 7, 2017 08:52

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

Lumpy posted:

For CSS, flexbox is oldish but supported enough to use and it's awesome.

Yeah, this is possibly the single best thing in CSS from the last 10 years: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

# ? Mar 7, 2017 15:52

porksmash: Sep 30, 2008

These two articles also helped me understand flexbox much better: Animated Guide to Flexbox and Even More About How Flexbox Works because I'm dumb and need moving pictures to keep my attention.

# ? Mar 7, 2017 16:12

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

I always forget how to use flexbox, and constantly need to refer to this cheatsheet:

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

# ? Mar 7, 2017 19:10

Plavski: Feb 1, 2006; I could be a revolutionary

Grump posted:

I always forget how to use flexbox, and constantly need to refer to this cheatsheet:

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Awesome cheatsheet, bookmarked!

# ? Mar 7, 2017 21:14

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

Flexxx box! :frogsiren:

http://flexboxfroggy.com

http://the-echoplex.net/flexyboxes/

# ? Mar 7, 2017 21:22

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

I've used flex a little before but I had no idea...

# ? Mar 7, 2017 22:14

Honest Thief: Jan 11, 2009

Is it worth it already? A couple years back had to always create special rules just in case some IE9 user ran in the site and even some versions of firefox, so I just didn't bother with it.

# ? Mar 9, 2017 15:56

IronDoge: Nov 6, 2008

Nowadays it should be mostly fine according to the relative usage chart on caniuse. http://caniuse.com/#search=flex

Edge is fine, but IE11 of course remains buggy in it's usage of Flexbox, so if you have a majority of customers using older PCs, it may be best to avoid it or test the hell out of it before release.

# ? Mar 9, 2017 16:05

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 02:51

Shayl: Apr 11, 2007

Flexbox is great, but if you happen to work for a company that insists on older IE support (like I do, ugh), you should stay away from it.

# ? Mar 9, 2017 21:57

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

«‹›235 »