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

«‹›8 »

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

What's a solid place for practical Javascript exercises? I'm reading from a textbook which is great, but I'm not really getting any hands-on experience that I need.

# ¿ Nov 18, 2016 23:45

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 15:37

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

COOL CORN posted:

Something like https://www.codewars.com/ might be useful for you.

I might be a little too inexperienced for some of these assignments, but this website is super cool

Skandranon posted:

Codecademy is a decent place to start, especially if you are new and don't want to deal with figuring out tooling.

Been using this the past couple days. Looking forward to finishing the course.

# ¿ Nov 20, 2016 04:45

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

Looking for a good place to learn React? I started watching the Lynda course on it but it doesn't seem like a very good tutorial.

# ¿ Jan 5, 2017 00:49

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

Lumpy posted:

In the webdev thread I linked to Dan Abramov's egghead courses. They are free and amazing. If I wasn't on my phone, I'd link them here for you but

EDIT: back on ye olde computer...

Cool I'll check these out. I spent the day at working watching a lot of the Angular 2 Lynda vids and I've concluded that none of it makes sense and I hate it.

Hopefully React doesn't make me feel the same

# ¿ Jan 6, 2017 00:20

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

Plavski posted:

If you're coming at frameworks fresh, I heartily recommend checking out Aurelia too.

Yeah. Only been using jQuery. I'm just looking for something new to learn. I don't really know what I want to make

# ¿ Jan 6, 2017 14:52

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

Grump posted:

Cool I'll check these out. I spent the day at working watching a lot of the Angular 2 Lynda vids and I've concluded that none of it makes sense and I hate it.

Hopefully React doesn't make me feel the same

Ok cool so I spent the day watching some React videos. I didn't like the Egghead ones because they were a little too fast-paced for me, but I found some other neat Lynda videos that were more dumbed-down that helped me walk through it.

I'm still having trouble getting the point of these frameworks. I don't get the lure in having javascript and html in one file instead of having everything separate. I get that it provides a better flow and that code is easily readable from top to bottom, but my brain doesn't work that way and I'm getting really confused. Is it wrong to just like doing things with HTML and Jquery or is this the way all web development is going?

I'm gonna keep at it though. Very interesting. This stuff just makes me feel really dumb.

# ¿ Jan 6, 2017 23:26

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

Thermopyle posted:

I read this post about React "Aha!" moments this morning and I thought I'd share it since I remember when I figured these things out it really helped me understand how to write React.

Going through the CodeAcademy courses on React and definitely feeling a bunch of AHA moments. These courses are so much better than the Lynda ones omg.

# ¿ Jan 20, 2017 16:43

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

HaB posted:

So I was in the same spot as your a few years back, and I never found a good answer as to how it would scale to a full sized application. All of the above is mostly the result of plenty of trial and error.

Yeah I feel like I'm in this situation now. I've just started to build my first CRUD React app and I'm still struggling a bit trying to figure out logically which should be a component and what shouldn't.

Guess you just gotta keep practicing :shrug:

# ¿ Jan 24, 2017 14:38

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

I don't understand why there is not much documentation on creating constructors in React. Are you even able to create constructors in React? Is this what they mean when they say React is only the "V" in MVC?

Should I just do this stuff if Javascript and then render the results in React?

Basically what I'm asking is how does something like this translate to React code?

code:

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

My ultimate goal is to get values from a form, use those values as the arguments in the new instance of a constructor, and then push that new object to an array. I'm just not sure if React is capable of that.

teen phone cutie fucked around with this message at 05:39 on Jan 26, 2017

# ¿ Jan 26, 2017 05:35

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

Thanks piratepilates and Lumpy. Really helpful stuff!

# ¿ Jan 26, 2017 20:14

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

I started a React app, and I want to use a custom Javscript file with just plain Javascript and use a script tag in the index.html file.

This is very difficult for me in React. I keep getting a syntax error as an unexpected "<" I haven't even written any React code yet, but I can't even get this to work? How do you write a JS file in React?

# ¿ Feb 4, 2017 21:36

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

yeah I figured it out. I was originally importing the script into the component, as it should be, but I had onClick functions that were supposed to be hiding/showing a form, and that part should have been built into the component, rather than outside of it.

I'm dumb. The thing has been working all day, and I didn't even realize it.

# ¿ Feb 5, 2017 01:43

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

Lumpy posted:

Not sure if your example up there is what you are talking about, but mixing jQuery and React without a firm understanding of how React handles DOM is a recipe for headaches. If the two don't interact in any way on your page, go nuts though.

Yeah I'm only using a bit of Jquery to handle a form submission and pushing the input of a form to an array. And then I'm importing that script to the form component.

My only issue I've been having is that I'm hiding/showing form based on state and I'm having problems getting the script to run correctly after the button to render the form is clicked. I understand that the script isn't running because it can't find #addform on the page because <Form/> hasn't been rendered yet, but I don't get why it won't work after <Form/> has been rendered.

My logic:

code:

import $ from 'jquery';

//will hold an array of people objects
var list = [];

//constructor that builds new people to add to address book
function Person(first, last, email, address, phone) { //new person constructor
    this.firstName = first;
    this.lastName = last;
    this.email = email;
    this.address = address;
    this.phone = phone;
};

$(document).ready(function () {
    // When the submit button is clicked, create a new person and add the values of
    // the form fields  to the properties of the object
    $("#addform")
        .submit(function (e) {
            e.preventDefault();
            var person = new Person($("input[name = 'fname']").val(), 
							$("input[name = 'lname']").val(), 
							$("input[name = 'email']").val(), 
							$("input[name = 'address']").val(), 
							$("input[name = 'phone']").val());
            list.push(person);
            console.log(list);
        });
});

The form component

code:

import React, {Component} from 'react';
import './custom.js';
import FaClose from 'react-icons/lib/fa/close';

class Form extends Component {
    render() {
        return (
            <form id="addform">
                <input type="text" name="fname" placeholder="First name" required />
                <input type="text" name="lname" placeholder="Last name" required />
                <input type="email" name="email" placeholder="email" required />
                <input type="input" name="address" placeholder="address" required />
                <input type="tel" name="phone" placeholder="phone number" required />
                <input type="submit" id="submitbtn" value="Submit"/>
                <button type="button" id="closebtn" onClick={this.props.onClick}><FaClose/>�Close</button>
            </form>
        );
    }
}

export default Form;

App.js, where am rendering <Form/>

code:

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

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      formVisible: false
    };
  };
  showForm = () => {
    this.setState({formVisible: true});
  }
  hideForm = () => {
    this.setState({formVisible: false});
  }
  render() {
    return (
      <div className="header">
        <h1 id="p2">Contact Book</h1>
        <form className="search">
          <input type="text" name="search" placeholder="Search by last name"/>
          <button type="button">Search</button>
        </form>
        {this.state.formVisible // NOTE: Script doesn't work because Form is not rendered by default!!
          ? <Form onClick={this.hideForm}/>
          : <AddBtn onClick={this.showForm}/>
}
      </div>
    );
  }
}

export default App;

# ¿ Feb 6, 2017 03:28

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

yeah. I'm definitely aware that I don't really need JQuery. It's bad practice, and I was just being lazy. I'll definitely re-write that part.

Lumpy posted:

Don't mix jQuery and React unless you really, really, really understand how React handles DOM manipulation. As Helicity said, there's absolutely no reason for you to be using jQuery for this, so don't.

Okay. I think there was just a misunderstanding because I was following early advice provided by you and piratepilates.

piratepilates posted:

edit: Also since I can be more specific to what you want to do, for your form component all you need to do is have a method on your component for when you want to create the person object (I'm going to assume it's something like "user pressing the enter key"). In that method just create the new person instance as if this was regular plain vanilla JS (because it is!), and push that instance to your array that is holding people (I'm guessing you want to pass the array in to the component as a prop).

Lumpy posted:

To reiterate what piratepilates said in other terms: React *shouldn't* have that stuff in there. React renders what you tell it to, that's it. Obviously a simplification, but yeah, React is the V. Your model can be whatever you want (Redux, Angular, plain old JS you write yourself, an external API / Firebase) and you use actions to let the view inform the model (or controller, or whatever) that something happened in your app. Your code is then responsible for passing new state to your view when something changes outside of it (an API request completed or failed, etc.)

In my React apps, React is about 10-20% of the code. You can build a functional, unit tested Redux app that's "feature complete" before you even npm -i react.

I guess I'm just confused about how you can push the new Person instance to an array in React, rather than just creating a method inside my Form component and writing it in vanilla Javascript.

But I'm assuming the short answer is just read up on Redux?

Also, thanks for bearing with me, everybody! I realize that I'm being a pain in the rear end. This is just super frustrating for me to learn this library.

# ¿ Feb 6, 2017 18:23

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

Lumpy posted:

As for how to make Persons and put them in an array....

Cool. After staring at this post and the documentation all day, it's starting to make sense.

Helicity posted:

Short answer IMO is read up on Event Sourcing for an afternoon, and then Redux.

Definitely gonna do some more research tomorrow. Thanks for taking the time to write this and your other post.

teen phone cutie fucked around with this message at 02:49 on Feb 7, 2017

# ¿ Feb 7, 2017 02:46

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

Lumpy posted:

I ended up doing similar in React, without the actual need for Redux. I don't know what this may look like to you guys, but it seems to work. This will effectively make my form data into an object, put that object into an array (which is the state of the app), and print it out as an entry. I may be making my life harder when I go to edit and delete these entries, but I guess we'll see.

When a new contact gets added, the state ends up looking like this

state{
people: [{
fname: jerry
lname: jones
email: asdf@gmail.com
address: 123 Fake St
phone: 1231231234
},
{
fname: ken
lname: lewis
email: aaaaaa@gmail.com
address: 4324 Faker St
phone: 5436541232
}]
}

Redux was just going over my head too much. It's so confusing. I think I have to start with smaller exercises to grasp it better.

So I now have three components: Entries.js (which will list each new person), Form.js (simply holds the form) and Parent.js (which holds the state to be changed and the function that runs when the form is submitted)

Parent.js

code:

class Parent extends Component {
    constructor(props, context) {
        super(props, context);
        //set state to an empty array
        this.state = {
            people: []
        };
    }
    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,
            eachPerson
        ] //add the new object to the people array
        this.setState({people});
        document
            .getElementById("addform")
            .reset(); //reset the input fields onsubmit
    }
    render() {
        return (
            <div>
                //form will run handleSubmit when submitted
                <Form onClick={this.handleSubmit}/>
                //the state of parent is passed to entries as a prop
                <Entries people={this.state.people}/>
            </div>
        )
    }
}

Form.js

code:

class Form extends Component {
    render() {
        return (
            <form id="addform" name="addform" onSubmit={this.props.onClick}>
                <input type="text" name="fname" placeholder="First name" required />
                <input type="text" name="lname" placeholder="Last name" required />
                <input type="email" name="email" placeholder="email" required />
                <input type="input" name="address" placeholder="address" required />
                <input type="tel" name="phone" placeholder="phone number" required />
                <input type="submit" id="submitbtn" value="Submit"/>
                <button type="button" id="closebtn" onClick={this.props.onClick}>
                    Close</button>
            </form>
        );
    }
}

Entries.js

code:

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.fname} {object.lname}</h1>
            <p>{object.address}</p>
            <p>{object.email}</p>
            <p>{object.phone}</p>
          </div>
        )
      });
    //display the results of peopleData
    return (
      <div>{peopleData}</div>
    )
  }
}

teen phone cutie fucked around with this message at 21:55 on Feb 8, 2017

# ¿ Feb 8, 2017 21:36

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

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

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

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

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

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

Download NPM then follow the installation steps here:

https://facebook.github.io/react/docs/installation.html

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Those 4 commands should get you a starting project on a local server, with Babel and webpack and more:

https://github.com/facebookincubator/create-react-app

Easy peasy!

# ¿ Mar 16, 2017 19:59

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

Got a quick React Question (or maybe just a simple question about how .map works)

I want to change the values of properties of an object inside an object.

My state basically will look like this:

code:

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

And my function to mutate the values looks like this(which isn't working b/c I'm not properly accessing the properties of the nested object:

JavaScript code:

    update(newFName, newLName, newEmail, newAddress, newPhone, id) { 
        console.log(newFName, newLName, newAddress, newEmail, newPhone, id); //console logging for testing
        var entries = this
            .state
            .people
            .map(entry => (entry.id !== id) //only look at the object in the state that matches the one we clicked on
                ? entry
                : {
                    ...entry,
                    person.fname: newFName, //not accessing these correctly!
                    person.lname: newLName,
                    person.email: newEmail,
                    person.address: newAddress,
                    person.phone: newPhone
                })
        this.setState({entries})
    }

Wondering how to change fname, lname, etc.

# ¿ Apr 14, 2017 16:42

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

yeah I'm not using Redux, so I'm pretty limited. I just think it's weird that I can target the id no problem, but when I go one tier deeper, it's not finding the properties.

e: Looks like I might have to do a map inside of a map?

teen phone cutie fucked around with this message at 17:11 on Apr 14, 2017

# ¿ Apr 14, 2017 17:07

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

ImpactVector posted:

E:Obviously using Lodash there, but you would likely be able to just do object.assign() directly to the object in the array if you don't care about immutability.

NOICE! That worked. The whole idea is to edit an entry in a contact book, so this definitely helps!

Now I just need to implement a search feature and some form validation and baby's first React app will be done! and then i'll go ahead and tackle redux

new update function:

JavaScript code:

    update(newFName, newLName, newEmail, newAddress, newPhone, id) {
        console.log(newFName, newLName, newAddress, newEmail, newPhone, id);
        let newPerson = {
            fname: newFName,
            lname: newLName,
            address: newAddress,
            email: newEmail
        };
        let people = this
            .state
            .people
            .map(entry => (entry.id !== id)
                ? entry
                : {
                    ...entry,
                    person: Object.assign(newPerson)
                })
        this.setState({people})
    }

teen phone cutie fucked around with this message at 18:32 on Apr 14, 2017

# ¿ Apr 14, 2017 17:59

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

Looking into Meteor without knowing basically anything about Node (or the model and controller layers for that matter).

What's the consensus?

E: do i need Webpack with it? It seems like it does importing/exporting and bundling right out of the box, but I can't find any docs on what packages come with it

teen phone cutie fucked around with this message at 22:55 on Apr 27, 2017

# ¿ Apr 27, 2017 21:23

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

Yeah I was pretty much sold on it because their site said you could do the same in 10 lines that takes 1000 on node.

Idk. Gonna try the todo example and see what I think

Only knowing React isn't getting me very far when applying to jobs

# ¿ Apr 27, 2017 23:21

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

Lumpy posted:

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

This post is old but I've just discovered that storing any major data in React components period is hell, especially for user form submission.

Time to learn Redux I guess! I can only put it off for so long

Pretty proud of the app so far though. React is pretty sweet: http://recordit.co/l4kIxOtDjX

teen phone cutie fucked around with this message at 18:59 on Apr 28, 2017

# ¿ Apr 28, 2017 15:06

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

HOLY CRAP meteor is actually pretty cool.

In under 3 hours, I went from having a React app with 3 components with all my data as the state to having 2 components where all my data saves in MongoDB and being able to call it super easily.

Meteor is preeeeeeeety loving sweet. I feel like I'm really starting to get this modern development stuff.

teen phone cutie fucked around with this message at 22:14 on May 1, 2017

# ¿ May 1, 2017 22:11

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

Looking for an easy way to scroll to a component on componentDidMount

However, I don't want to do the scroll if the page is being loaded for the first time, as I have one component that's going to have rendered again and again if a form to add another component is filled out.

Any ideas?

e; Actually, I guess it should go in componentDidUpdate, but still having problems scrolling to the component, as it's inserted into a list sorted in alphabetical order.

teen phone cutie fucked around with this message at 20:05 on May 3, 2017

# ¿ May 3, 2017 19:16

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

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

My two big issues:

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

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

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

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

# ¿ May 8, 2017 22:36

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

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

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

# ¿ May 15, 2017 23:35

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

Grump posted:

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

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

here it is

http://contact.meteorapp.com/

Will this get me more interviews? :cry:

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

# ¿ May 16, 2017 22:33

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

The Fool posted:

Viewing on mobile, your sign in modal is off center and cut off on the right.

Yeah i caught that. That login form was a built in thing with Meteor. You'd think it would look good out of the box :shrug:

Also got to add some margins in some places and make the submit buttons have the same styling on mobile

fletcher posted:

Congrats!

The phone number format restriction might not work so well for international phone numbers

International numbers might work. It just might be the error message that's wrong. I'll have to double check

teen phone cutie fucked around with this message at 23:41 on May 16, 2017

# ¿ May 16, 2017 23:39

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

Now that I have some experience messing around with create-react-app, I'm starting to do more research in what the gently caress these dependencies are actually doing. I see that webpack is doing the bundling and babel is doing the transpiling.

But I was taking a look at the app we're currently building at my job, and the dependencies list webpack, babel, gulp, and browserify and I'm trying to wrap my head around what the gently caress each of these things is actually doing. After doing some research, this configuration kinda sounds redundant and seems like we don't need all 4.

So I guess what I'm asking is

1) Do webpack and babel do anything major other than bundle and transpile? And is webpack responsible for setting up the local server when you run a create-react app? How does that work?
2) What exactly are Gulp and Browserify? Are they just not-as-powerful versions of babel and webpack? Gulp's official website isn't really good at explaining what is actually does.

There's just so many things that go into these libraries and I really feel uncomfortable using dependencies without knowing what they're actually doing for me.

# ¿ Jun 3, 2017 05:00

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

Sweet thanks for the help.

So I think I just need to look more into Gulp/Grunt and get an idea of what purpose they serve.

# ¿ Jun 3, 2017 19:41

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

Love Stole the Day posted:

I just did a little mini survey of about ~30 job postings on various web sites for jobs that were specifically labelled "front-end" work in an attempt to find common words/phrases to help me figure out what to put on a resume. Thought it'd be relevant for you guys but I'm sure you probably can already guess what my findings or whatever were.

Here's a list of everything that I saw mentioned at least 4 times in order of most common to least common:

React

Git* (e.g. github, git, ...)

SASS/SCSS

Angular 2

"User eXperience" (UX)

"MVC"

"RESTful"

Rails

PHP

Wordpress/CMS

ES* (e.g. es2015, es5, es6, ...)

*SQL (e.g. MySQL, Mongo, ...)

Gulp/Webpack (Gulp was the more common of the two)

React Native

Lastly, here are some things that I see often name-dropped in discussion threads but were mentioned only ever once in my little dumb survey thing:

TypeScript

Django

Redux/Flux/Reflux

Go

Docker

Babel

jQuery

Clojure

Really surprised React is more common than angular. I've been struggling to see React on postings, but seeing angular (both JS and 2) literally everywhere.

# ¿ Jun 21, 2017 19:08

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

Dang you guys are getting me excited. Congrats. I'm on the third round of interviews with a company but I'm getting cold feet bc i really like my company now even though the pay is abysmally below average for this industry

# ¿ Jun 22, 2017 13:38

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

Thermopyle posted:

FWIW, Google launched its jobs search thingy just recently. I just googled "front end developer jobs" and the top of the search results is a box that lists a few local jobs and when you click it, it expands to a full job search tool that pulls in from all sorts of sites.

Woah cool.

I've just been using Craigslist and Indeed.

# ¿ Jun 22, 2017 16:14

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

Spent the day creating a little test project with Webpack and Babel so now I'm finally grasping what they all do.

I'm pretty curious though besides for linting, babel, and webpack, what else is included in create-react-app? Also create-react-apps have no webpack config file so where are the entry and output files?

teen phone cutie fucked around with this message at 20:36 on Jun 23, 2017

# ¿ Jun 23, 2017 20:32

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 15:37

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

oh cool. I don't know why I didn't think to dig around in that repo

# ¿ Jun 23, 2017 21:19

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

«‹›8 »