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 »

The Fool: Oct 16, 2003

kloa posted:

If I wanted to build a simple website for a business (no blogging or shopping cart functionality) would React be a good way to go? I'd probably just integrate their Instagram feed and some other small things.

I come from a Microsoft ASP.Net/MVC background due to work, but I want to try something else to build my friend a website for his business. Not a fan of PHP, so I'd like to keep away from Wordpress.

Are you looking at needing some sort of CMS, and/or do you expect non-technical people to be able to modify content?

If the answer is yes to either of those, rolling your own thing can rapidly turn into a monstrous project exceeding the scope of a "simple website for a business"

Otherwise, React is great, give it a shot.

# ? Aug 3, 2017 17:24

Adbot: ADBOT LOVES YOU

# ? Jun 2, 2024 11:30

huhu: Feb 24, 2006

The Fool posted:

Are you looking at needing some sort of CMS, and/or do you expect non-technical people to be able to modify content?

If the answer is yes to either of those, rolling your own thing can rapidly turn into a monstrous project exceeding the scope of a "simple website for a business"

Otherwise, React is great, give it a shot.

Something like WordPress is probably your best bet.

# ? Aug 3, 2017 17:48

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

huhu posted:

Something like WordPress is probably your best bet.

If he wants to use it for learning and specifically does not want to learn WordPress, it's the worst bet.

# ? Aug 3, 2017 19:41

kloa: Feb 14, 2007

The Fool posted:

Are you looking at needing some sort of CMS, and/or do you expect non-technical people to be able to modify content?

Nah, it's really just for learning something new, and to get them something other than a Facebook page going. It will just have basic information (About, Services, Contact Us) so they'll probably never need to update anything other than the address/phone numbers over time - plus they're technical enough to easily edit that information and publish the changes.

Thanks for the replies :tipshat:

# ? Aug 3, 2017 20:02

huhu: Feb 24, 2006

Skandranon posted:

If he wants to use it for learning and specifically does not want to learn WordPress, it's the worst bet.

I did not read the second paragraph oops. I'd recommend Python and Flask.

# ? Aug 3, 2017 20:02

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

kloa posted:

Nah, it's really just for learning something new, and to get them something other than a Facebook page going. It will just have basic information (About, Services, Contact Us) so they'll probably never need to update anything other than the address/phone numbers over time - plus they're technical enough to easily edit that information and publish the changes.

Thanks for the replies

Something to remember when asking for recommendations is that 90% of people who will give you a recommendation have only seriously used the one thing they recommend. It's only natural that this is the case, but it also means you're not result going to get good recommendations from most people.

The site you're describing sounds like it'd be perfect for just html and a smattering of js. However if you wanted to use it as a learning platform, I'd serve static files with whatever web server and use create-react-app and build a PWA. It will be impressive and fast.

# ? Aug 3, 2017 20:28

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

Or roll your own front-end and use a CMSaaS like Contentful (not vouching for Contentful specifically, I haven't used it)

# ? Aug 3, 2017 21:25

Dogcow: Jun 21, 2005

prom candy posted:

Or roll your own front-end and use a CMSaaS like Contentful (not vouching for Contentful specifically, I haven't used it)

Squarespace has a similar thing though I also haven't used it. It does seem kind of cool though.

# ? Aug 3, 2017 22:50

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

I kind of wish I had a reason to use gatsby to create a site. For some reason I really like the idea of static site generators, and gatsby brings that together with my appreciation for React.

In case you don't want to click the link, gatsby generates static sites as react-based PWA's and can pull in data from a variety of sources.

I might have even give it a shot on a site like kloa is talking about if I had that kind of client right now.

edit: In case you're not aware, "static sites" in this context only means pages aren't generated on every request like you would have with something like Wordpress. They're pre-generated and re-generated every time you add content.

# ? Aug 3, 2017 23:39

smackfu: Jun 7, 2004

Pollyanna posted:

Redux is a tool, not an integral part of the stack. IMO, bring Redux in only when it's clear that you need it, not just because you think it's a good idea or because you want buzzwords on your project/resume. You'll know when it's useful, let that become apparent first.

And as mentioned above, Redux is not a panacea and there's several cases where it's not very useful, e.g. individual popups and modal n stuff.

Yeah, it turned out that for the app I was working on, having local state was much easier to deal with than having a commons global state in Redux because components didn't have much interaction.

# ? Aug 5, 2017 17:44

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

Thermopyle posted:

I kind of wish I had a reason to use gatsby to create a site. For some reason I really like the idea of static site generators, and gatsby brings that together with my appreciation for React.

In case you don't want to click the link, gatsby generates static sites as react-based PWA's and can pull in data from a variety of sources.

I might have even give it a shot on a site like kloa is talking about if I had that kind of client right now.

edit: In case you're not aware, "static sites" in this context only means pages aren't generated on every request like you would have with something like Wordpress. They're pre-generated and re-generated every time you add content.

I've been doing iOS app development for the past 4 years and recently I've been looking for an excuse to catch up with the horribleness that has become webdev so my skills don't stagnate too badly. This seemed pretty cool and I was able to create something pretty neat in a day.

# ? Aug 6, 2017 03:39

reversefungi: Nov 27, 2003; Master of the high hat!

I remember someone mentioning on here (or a similar thread) the ng-book for learning Angular. I signed up to their mailing list to get the first chapter and decided to check out their gitter, where someone on there linked to this where you can get the ng-book 2 for free (and no it's not :filez:

).

https://gumroad.com/l/ngbook-two-basic/sgoDEdzfEefN4PFnOTjFIH-ng4-free

Figured anybody else looking to learn Angular might benefit from this.

# ? Aug 6, 2017 21:10

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

I recently set up a webcam feed on a Raspberry Pi using Motion with the intent of embedding the feed into an Ember app served internally on our company's network. The webcam server itself works fine and dandy when I navigate to the Raspberry Pi's IP address. The default page's HTML looks something like this:

code:

<body>
  <img src="http://xx.xx.xx.xx:xxxx">
<body>

However, when I try to paste that same img tag into my Ember template, it just doesn't load anything at all. No network request is sent to fetch the image, nothing is displayed in the app, etc. Anyone know what might be going on?

edit: I know it probably doesn't have anything to do with Ember, just giving a bit of context. Is there some cross-site origin fuckery going on or something?

canoshiz fucked around with this message at 15:51 on Aug 7, 2017

# ? Aug 7, 2017 15:12

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

There's nothing in your developer console? What does your generated HTML look like?

# ? Aug 7, 2017 20:12

Geno: Apr 26, 2004; STUPID
DICK

I have a table where its second header consists of multiple subheaders. For each row in the table, its data under the second header can consist of multiple rows. I�m having trouble syncing those multiple rows under the subheaders.

http://jsfiddle.net/jkkvy86x/

For row1, I want data4, data5, data6 to also be under h1, h2, h3, respectively.

# ? Aug 7, 2017 22:59

kloa: Feb 14, 2007

Geno posted:

I have a table where its second header consists of multiple subheaders. For each row in the table, its data under the second header can consist of multiple rows. I�m having trouble syncing those multiple rows under the subheaders.

http://jsfiddle.net/jkkvy86x/

For row1, I want data4, data5, data6 to also be under h1, h2, h3, respectively.

Like this? Just needs another row (and a blank cell under row1).

http://jsfiddle.net/jkkvy86x/1/

# ? Aug 8, 2017 00:22

Geno: Apr 26, 2004; STUPID
DICK

kloa posted:

Like this? Just needs another row (and a blank cell under row1).

http://jsfiddle.net/jkkvy86x/1/

No, this wouldn't work at all with the formatting and AngularJS I have integrating with it.

# ? Aug 8, 2017 00:41

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

prom candy posted:

There's nothing in your developer console? What does your generated HTML look like?

There was nothing in the dev console indeed, which was super confusing. No network request sent, no errors in the console.

Anyways I figured it out, I was supposed to add a /mjpeg to the end of the URL for some reason to embed the feed in an img tag. :shrug:

# ? Aug 8, 2017 03:59

Rubellavator: Aug 16, 2007

I'm trying to get something simple working in angularjs ui-grid. I have a modal contains the grid, I just want the grid to scroll to the previously selected record and highlight it.

The problem is that there is a race condition where if the scroll is called before ui-grid determines the headerheight of its container, the scroll doesn't execute. The frustrating part of this is that the api doesn't provide me with any way to know when the headerheight has been set. There are a lot of things that look like they should do that, and I've tried them all and none of them work. So what I've ended up with is either using $timeout/$interval/$watch until the value is set.

# ? Aug 15, 2017 19:15

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

Rubellavator posted:

I'm trying to get something simple working in angularjs ui-grid. I have a modal contains the grid, I just want the grid to scroll to the previously selected record and highlight it.

The problem is that there is a race condition where if the scroll is called before ui-grid determines the headerheight of its container, the scroll doesn't execute. The frustrating part of this is that the api doesn't provide me with any way to know when the headerheight has been set. There are a lot of things that look like they should do that, and I've tried them all and none of them work. So what I've ended up with is either using $timeout/$interval/$watch until the value is set.

That sounds vaguely similar to a ui-grid problem I had where the grid would just show up blank. Turned out to be something similar, and the fix was forcing a window.resize event so it would then recompute all its container sizes properly.

I believe this may be the SO answer I ended up grabbing a solution from, but it was several months ago:

https://stackoverflow.com/questions/37485045/angular-ui-grid-does-not-show-content-unless-browser-window-is-resized

# ? Aug 15, 2017 20:27

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Does anyone know of a sample react+redux project written in typescript? I've done some non trivial react stuff in the past but trying to cram typescript into this setup is making my head hurt.

# ? Aug 16, 2017 02:11

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

Horn posted:

Does anyone know of a sample react+redux project written in typescript? I've done some non trivial react stuff in the past but trying to cram typescript into this setup is making my head hurt.

I'm interested in this as well

# ? Aug 16, 2017 02:16

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

What part is making your head hurt?

It's essentially just taking a react+redux project, and then sprinkling in types. You start by doing the non-react/non-redux stuff like making interfaces for objects you use in your code so that you can have some constraints on the usage, ie.

code:

export interface RouteMapping {
  route: string;
  title: string;
  navText?: string;
  navIcon?: string;
  showInNav?: boolean;
  contextIcon?: string;
  contextIconRoute?: string;
}

and typing function parameters and return types:

code:

 const buildNetworkStat = (statusCode: number, elapsedMs: number): NetworkStat => ({
    isError: statusCode !== StatusCodeOK,
    elapsedMs,
  });

Then start doing it to your react components (and actions, and connectors, and whatever state management stuff you're doing):

code:

interface ToggleProps {
  id: string;
  checked?: boolean;
  changeHandler: () => void;
}

const Toggle: React.StatelessComponent<any> = (props: ToggleProps) => {

It gets a little weird when you start messing with thunks (another reason I'm not a fan of them) and some of the more esoteric situations but that's when you can just bust out the any type and punt on it until you figure it out.

The trickiest part is probably when your build process gets large and convoluted, but in most/simple situations, just use webpack and awesome typescript loader.

luchadornado fucked around with this message at 03:02 on Aug 16, 2017

# ? Aug 16, 2017 02:47

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

Having trouble figuring out exactly why a `hide` event is happening when I click on a particular element. For background, I'm leveraging Overlay from react-bootstrap, and whenever I have `rootClose` set to true (i.e. close this Overlay when the overlay is clicked out of), clicking on the button that opens an Overlay opens and then immediately calls hide on it, causing it to basically never pop up. This only seems to happen when the Overlay is spawned from a Modal. Setting `rootClose` to false solves the problem, but then I lose the original click-out-to-close functionality, which will probably piss off my product owner who hates whenever functionality is lost.

I tried using the Chrome performance monitor to try and figure out why the hide event was happening, but I couldn't really figure out what I was looking at and attempts at debugging (literally, as in the `debugger` statement) failed due to some bundling issues. Anyone have tips for debugging this? I'm at a bit of a loss.

# ? Aug 16, 2017 18:03

reversefungi: Nov 27, 2003; Master of the high hat!

Horn posted:

Does anyone know of a sample react+redux project written in typescript? I've done some non trivial react stuff in the past but trying to cram typescript into this setup is making my head hurt.

If you're using create react app, you can set up a typescript project using "create-react-app --scripts-version=react-scripts-ts". Very handy and I had not known about it until recently. Also worth seeing is Microsoft's React Starter Kit from the documentation: https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter

# ? Aug 16, 2017 18:32

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Helicity posted:

What part is making your head hurt?

It's essentially just taking a react+redux project, and then sprinkling in types. You start by doing the non-react/non-redux stuff like making interfaces for objects you use in your code so that you can have some constraints on the usage, ie.

It gets a little weird when you start messing with thunks (another reason I'm not a fan of them) and some of the more esoteric situations but that's when you can just bust out the any type and punt on it until you figure it out.

The trickiest part is probably when your build process gets large and convoluted, but in most/simple situations, just use webpack and awesome typescript loader.

Thanks for typing all that up. The part I'm kind of getting lost with is how to create actions, action creators, and reducers in a way that doesn't involve a ton of boilerplate. I've found some pieces like this https://spin.atomicobject.com/2017/07/24/redux-action-pattern-typescript/ which try to simplify it but I would prefer a full project to steal/learn from. Saying it hurts my head is a bit of hyperbole - at the end of the day I can figure this out myself but would much rather not have to waste my time undoing my mistakes down the line.

The Dark Wind posted:

If you're using create react app, you can set up a typescript project using "create-react-app --scripts-version=react-scripts-ts". Very handy and I had not known about it until recently. Also worth seeing is Microsoft's React Starter Kit from the documentation: https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter

I looked at this a while back but missed the code examples last time around. They cover a lot of what I'm looking for. Thanks!

Horn fucked around with this message at 18:53 on Aug 16, 2017

# ? Aug 16, 2017 18:51

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

I mostly use my IDE's code generation to set up actions and reducers with Typescript. It's a lot of boilerplate but IDGAF.

# ? Aug 16, 2017 20:15

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

Pollyanna posted:

Having trouble figuring out exactly why a `hide` event is happening when I click on a particular element. For background, I'm leveraging Overlay from react-bootstrap, and whenever I have `rootClose` set to true (i.e. close this Overlay when the overlay is clicked out of), clicking on the button that opens an Overlay opens and then immediately calls hide on it, causing it to basically never pop up. This only seems to happen when the Overlay is spawned from a Modal. Setting `rootClose` to false solves the problem, but then I lose the original click-out-to-close functionality, which will probably piss off my product owner who hates whenever functionality is lost.

I tried using the Chrome performance monitor to try and figure out why the hide event was happening, but I couldn't really figure out what I was looking at and attempts at debugging (literally, as in the `debugger` statement) failed due to some bundling issues. Anyone have tips for debugging this? I'm at a bit of a loss.

Try putting a DOM breakpoint on the element in Chrome debugger - chrome can break when an element is changed.

Another thing you could do is in IE11, use the F12 debugger there, highlight the element in the DOM explorer, and put breakpoints on every method listed in the events tab and see if that works. (Chrome has an events tab but it doesn't seem as reliable as IE's)

# ? Aug 16, 2017 21:55

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

Thermopyle posted:

I mostly use my IDE's code generation to set up actions and reducers with Typescript. It's a lot of boilerplate but IDGAF.

This is probably the best current answer, but the community would really benefit from a better solution. Redux is really boilerplatey, even when you use all the bindings and duck patterns, etc. It becomes a tedious chore to work in and then one day you realize you wrote 500 lines of code to call an API and pass an object to a form, and life sucks.

# ? Aug 16, 2017 23:56

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

Helicity posted:

This is probably the best current answer, but the community would really benefit from a better solution. Redux is really boilerplatey, even when you use all the bindings and duck patterns, etc. It becomes a tedious chore to work in and then one day you realize you wrote 500 lines of code to call an API and pass an object to a form, and life sucks.

Yeah, even when you feel like you're architecting everything as well as can be, there's still a fuckton of boilerplate that wouldn't need to be there if the language supported working in that way more. While I could take or leave Elm's rendering (mainly because it's hard to regain the practical aspects of direct Dom access for animation and certain interactions), I love how terse its data modelling can be in a type safe fashion.

# ? Aug 17, 2017 00:07

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

Helicity posted:

This is probably the best current answer, but the community would really benefit from a better solution. Redux is really boilerplatey, even when you use all the bindings and duck patterns, etc. It becomes a tedious chore to work in and then one day you realize you wrote 500 lines of code to call an API and pass an object to a form, and life sucks.

I think you've mentioned this before, but for anyone who missed it: using middleware for your API accesses helps cut down on the boilerplate. I mean, there's still a lot of it, but c'est la vie.

# ? Aug 17, 2017 01:19

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

Can anyone show me an example or two of what a portfolio looks like for applying to front end jobs? Because job searching is like a black hole: resume goes in, nothing comes out.

# ? Aug 17, 2017 01:21

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

Love Stole the Day posted:

Can anyone show me an example or two of what a portfolio looks like for applying to front end jobs? Because job searching is like a black hole: resume goes in, nothing comes out.

There's lots of "top ten web developer"-style sites if you just google stuff like "frontend developer portfolio sites" or whatever.

# ? Aug 17, 2017 01:23

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

Love Stole the Day posted:

Can anyone show me an example or two of what a portfolio looks like for applying to front end jobs? Because job searching is like a black hole: resume goes in, nothing comes out.

Honestly, my last 3 companies have hired very, very heavily from referrals. Knowing someone at the place you want to work is one of the biggest advantages you can have. Local meetups/usergroups are probably the best way if you don't luck into a social circle.

Edit: To be more helpful... we used to do a 4 point system: 1 absolutely don't hire, 2 don't hire but could be convinced otherwise, 3 hire but could be convinced otherwise, 4 absolutely hire. We would apply this even when reviewing resumes.

More than two pages (unless you're a rockstar with 15 years of interesting experience), gimmicky things like special fonts/images/backgrounds, etc. would get you rejected almost right away. Aim for 1 page if you have less than 10 years experience, then move to 2. Move to 3 if you're a rockstar (most aren't)
Flipping back and forth with verb tense, egregious typos, including pointless information (ie. GPA for something besides your first job) was an uphill battle to get out of a 2 vote.
Anything that stands out and makes someone say "ooh" or even "hrm" is a good thing. Work experience is the notable one here, but contributing to open source projects or some sort of focused tech volunteering also work.
I tried putting a one line "Hobbies" on my resume for my last round of job hunting and out of the ~20 or so people I interviewed with, only a single person mentioned it. A reviewer will only spend 2-3 minutes before deciding to bring you in, and many developers won't even spend 2-3 minutes looking at it before an interview. Keep it short, sell your strengths, be a candidate that can be remembered. "Remember that guy that worked on X cool thing" goes really far in making it to the next level, because most of the time people can't even remember your name when discussing you.

Grab some resumes off the web, pretend you're hiring someone to work with you on bringing your dream project to life. Spend 5 minutes reviewing their resume. What didn't you like? Are you doing anything like that on your resume? What did you like? etc. With front-end positions and resumes disappearing into the nothing, my guess is there's nothing to differentiate you from hordes of others in a similar position. Try setting a one year goal to get something on your resume that stands out. It doesn't, and probably shouldn't, be front-end focused. A front-end dev that dabbles in machine learning really stands out, for example.

luchadornado fucked around with this message at 13:05 on Aug 17, 2017

# ? Aug 17, 2017 02:24

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

Love Stole the Day posted:

Can anyone show me an example or two of what a portfolio looks like for applying to front end jobs? Because job searching is like a black hole: resume goes in, nothing comes out.

My portfolio is literally my bitbucket/github.

Write apps. Put them up. Stick the link to your public repos on top of your resume. Bam - portfolio.

Even if it's just a demo app that uses someone test REST api - that at least shows you can do the job.

# ? Aug 17, 2017 14:05

Tivac: Feb 18, 2003; No matter how things may seem to change, never forget who you are

HaB posted:

My portfolio is literally my bitbucket/github.

Write apps. Put them up. Stick the link to your public repos on top of your resume. Bam - portfolio.

Even if it's just a demo app that uses someone test REST api - that at least shows you can do the job.

When I was a hiring manager (2mo ago) this was literally all I wanted to see. A resume is interesting, but code was CRUCIAL. Told me so much more about a candidate than resume alone.

# ? Aug 17, 2017 21:38

reversefungi: Nov 27, 2003; Master of the high hat!

Anyone have any good guides on TDD/testing with React? This looks like the best (free) resource I've found so far, but I was wondering if anyone had any personal experience with any other guides.

https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091

# ? Aug 18, 2017 03:28

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

The Dark Wind posted:

Anyone have any good guides on TDD/testing with React? This looks like the best (free) resource I've found so far, but I was wondering if anyone had any personal experience with any other guides.

https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091

Osherove's 'The Art of Testing' then apply the concepts to your code. It's not free, but it's one of several books I think every dev should have on their bookshelf and in their mind. Mocha, should (or chai if you need the extra poo poo), and enzyme are the libraries you should look at. Be careful not to test things that end up testing React itself unless it's a functional/integration test. Your unit tests should way outnumber your function/integration tests and the code layout and abstraction should reflect that. Don't bother with the goofy things like proxyquire for stubbing weird things - introduce a thin abstraction that you can easily test.

# ? Aug 18, 2017 13:19

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

HaB posted:

My portfolio is literally my bitbucket/github.

Write apps. Put them up. Stick the link to your public repos on top of your resume. Bam - portfolio.

Even if it's just a demo app that uses someone test REST api - that at least shows you can do the job.

One time I sent this company a link to my github and they said:

"What is this?"

# ? Aug 18, 2017 20:28

Adbot: ADBOT LOVES YOU

# ? Jun 2, 2024 11:30

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

I dont think I'd want to work for that company.

# ? Aug 19, 2017 01:48

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

«‹›235 »