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

«‹›234 »

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

gmq posted:

Is anyone here developing on Windows? If yes, what's the best way to have a modern web development environment?

I spent years developing in an Ubuntu VM on a Windows host. A couple years ago I just switched over to straight Windows and it's been fine.

WSL makes it even easier, but really I rarely have to even use WSL.

Mostly you just install the things you want and use them.

# ? Mar 19, 2019 01:15

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 15:17

The Fool: Oct 16, 2003

Thermopyle posted:

Mostly you just install VS Code and use it.

Fixed.

# ? Mar 19, 2019 01:29

huhu: Feb 24, 2006

The Fool posted:

https://www.freecodecamp.com ?

There are a few, but that is the one I recommend whenever someone asks.

That should be good thanks.

# ? Mar 19, 2019 03:00

Vincent Valentine: Feb 28, 2006; Murdertime

You'll have to be more specific on what parts of the environment you're interested in.

Docker or Vagrant are fine for VMs. I prefer Docker but as someone mentioned there is a barrier for entry. When you visit https://docs.docker.com/docker-for-windows/install/ make sure you read every little detail for it. I skimmed over the requirements because I was like "hoo de doo I got a big ol honkin PC none of this poo poo matters" and it definitely mattered. You should almost certainly be using a VM that mimics the environment of wherever your code is going to be deployed.

After you install Git you can just right-click desktop and click Git Bash and you have something virtually identical to the Mac terminal. I use Con Emu to open multiple Git Bash panes in one window, exclusively for the fact that I can set a hotkey to open up 4 different panes that are open to the right directories and run things like server startup, gulp and whatnot right away.

But truthfully? VS Code/Atom/IntellijWebstorm and Git Bash should be all you reasonably need.

Vincent Valentine fucked around with this message at 04:47 on Mar 19, 2019

# ? Mar 19, 2019 04:41

Dominoes: Sep 20, 2007

gmq posted:

Is anyone here developing on Windows? If yes, what's the best way to have a modern web development environment?

Everything I've used is cross-platform, with the same terminal commands. General idea: Install NPM and webpack from the instructions on their websites, and go from there. There are framework-specific starters too, like Create-React-App, which you may or may not prefer.

Dominoes fucked around with this message at 15:57 on Mar 19, 2019

# ? Mar 19, 2019 05:32

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

gmq posted:

Is anyone here developing on Windows? If yes, what's the best way to have a modern web development environment?

This is a fairly odd, open-ended question?

Pretty much all of your well-known editors/IDEs work on Windows? VSCode if you're normal, Eclipse if you're old, Atom if you'd prefer to own a Mac, NotePad++ if you're a braindead 40 year old, WebStorm if you're fancy and have money and like it when pressing F12 works and doesn't cause your IDE to poo poo itself because you accidentally haven't configured your settings.json file to ignore node_modules or a bunch of other folders because you're human and make mistakes gently caress you VSCode you idiot no I don't want to search for a class name in the node_modules folder or the .history folder would you stop taking the piss. You can use Visual Studio as well but that seems like Overkill for doing front-end work. I mean it works just fine and it's good for it, but its still Overkill imo.

Some of the best UX Design tools, mind you, like Sketch, are obviously Mac exclusive but you can get away with stuff like XD or Gravit Designer or something.

Node works fine on Windows, and the rest is all code which runs Universally on all platforms?

Ape Fist fucked around with this message at 10:55 on Mar 19, 2019

# ? Mar 19, 2019 09:02

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

Ape Fist posted:

This is a fairly odd, open-ended question?

Windows being popular for non-.NET web dev seems to be a pretty recent phenomenon. For about a decade it seemed like everyone was on Mac or Linux. When I tried to provision my Windows machine for Rails development in like ~2011 it was headache after headache, so I'm not surprised that people are still kind of unsure if it's doable. I'm also seeing a huge uptick in devs that I follow on Twitter posting some variation of "I need a new laptop and I don't like the new MBP, what are my options" that I think is driving Windows adoption in the JS community. Microsoft doing good stuff like making VSCode and Typescript helps too. I went to a Javascript conference a few years ago and a guy from Microsoft did a presentation while using Windows and I was actually surprised at how well everything worked, I had really internalized the idea that Windows was no good for the kind of work I do. Anyway I don't want to start some kind of YOSPOS thing, I just think there are a lot of web developers who have been on Mac since the white MacBook days or earlier who are probably starting to look at Windows as an option again.

# ? Mar 19, 2019 14:54

my bony fealty: Oct 1, 2008

If you mess with local PHP development or anything that needs an Apache/Mysql setup on Windows then give Laragon a spin, its worlds better than Xampp and the like.

# ? Mar 19, 2019 15:34

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

my bony fealty posted:

If you mess with local PHP development or anything that needs an Apache/Mysql setup on Windows then give Laragon a spin, its worlds better than Xampp and the like.

FWIW, I think Docker on Windows is probably the best way for deploying all that kind of stuff locally if you don't want a bunch of handholding and opinionated stuff.

I mean, in just a command or two I can have postgresql or what the gently caress ever I want running locally with no sweat.

# ? Mar 19, 2019 16:51

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

Has anyone read about any work being done to bring chrome's devtools css grid functionality up to par?

I prefer to use chrome's devtools as I'm working, but Firefox does a way better job debugging css grid...

# ? Mar 19, 2019 20:21

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

The Firefox dev tools display javascript events on elements a little better than chrome's and the IE11 dev tools believe it or not, give very good specific, and potential fixes for syntax errors too. If something is working in all the other browsers but not working in IE11 there's actually a good chance IE11's console log will tell you why.

# ? Mar 19, 2019 21:13

Honest Thief: Jan 11, 2009

For node on windows, a couple years back, I used a couple of tools to help alleviate the bs it was to debug node issues, mostly due to paths and compiling c++ stuff in node. A conversion of nvm for windows and a powershell script to upgrade npm, also windows-build-tools I believe?

Ape Fist posted:

The Firefox dev tools display javascript events on elements a little better than chrome's and the IE11 dev tools believe it or not, give very good specific, and potential fixes for syntax errors too. If something is working in all the other browsers but not working in IE11 there's actually a good chance IE11's console log will tell you why.

If it doesn't freeze on you, that is.

# ? Mar 20, 2019 16:47

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Thermopyle posted:

Has anyone read about any work being done to bring chrome's devtools css grid functionality up to par?

I prefer to use chrome's devtools as I'm working, but Firefox does a way better job debugging css grid...

Just found this Chrome extension: not quite same usecase (not just simply debugging, it's a design tool) & and not close to Firefox grid tooling yet, but my first impression is that it's very good & it's definitely extremely slick. The developer who built it now works for the Chrome team as CSS advocate (and the extension looks to have been taken over as a Google thing?), so I'd guess it would be worth keeping an eye on.

# ? Mar 20, 2019 17:12

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

RobertKerans posted:

Just found this Chrome extension: not quite same usecase (not just simply debugging, it's a design tool) & and not close to Firefox grid tooling yet, but my first impression is that it's very good & it's definitely extremely slick. The developer who built it now works for the Chrome team as CSS advocate (and the extension looks to have been taken over as a Google thing?), so I'd guess it would be worth keeping an eye on.

Hey that thing is pretty slick.

# ? Mar 20, 2019 18:25

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

Question about styled components.

Say I've got React components like this:

JavaScript code:

const LogoText = () => <span>widget co</span>;

const Logo = () => (
  <div>
    <LogoImg />
    <LogoText />
  </div>
);

My first attempt to style this was something like this:

JavaScript code:

import React from "react";
import LogoImg from "./logo.svg";
import styled from "styled-components";

// Have to pass in the className for styled-components
const LogoText = ({ className }) => (
  <span className={className}>widget co</span>
);

const StyledLogoText = styled(LogoText)`
  font-size: 1.2rem;
`;

const Logo = ({ className }) => (
  <div className={className}>
    <LogoImg />
    
    // No className available to pass in here?!?
    <LogoText className={WHAT?!?!}/>
  </div>
);

const StyledLogo = styled(Logo)`
  background: red;
`;

As I indicated in the comment this doesn't exactly work because where does the classname come from?

My Googlin' around led me to this issue on the styled-components repo which I think is telling me I'm approaching this wrong, but I'm not positive I understand what kitten is saying there.

So, what's the right way to approach this?

# ? Mar 21, 2019 00:02

huhu: Feb 24, 2006

I'm not sure exactly what you're doing wrong. Quick answer - this is how I usually style things. Let me check into what you're doing.

code:

const Title = styled(({ className }) => {
    return <h2 className={className}>Hello</h2>
})`
	border: 5px solid red;
`

Edit:

Does this make sense?

code:

const MyThing = ({ text, className }) => <h1 className={className}>{text}</h1>
const MyStyledThing = styled(MyThing)`
    color: green;
`
const MyThingWrapper = ({ className, children }) => <div className={className}>{children}</div>
const MyStyledThingWrapper = styled(MyThingWrapper)`
    border: 5px solid green;
`

code:

<MyStyledThingWrapper>
    <MyThing text="HELLO" />
    <MyStyledThing text="HELLO" />
</MyStyledThingWrapper>

className can only be applied once per functional component. If you want to style multiple components, you'll need to use multiple functional components.

huhu fucked around with this message at 01:21 on Mar 21, 2019

# ? Mar 21, 2019 01:08

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

Phone posting so I'm probably missing something but why do you want to mix classnames with styled components. And also I didn't see where you actually use the styled components you created.

# ? Mar 21, 2019 16:56

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

prom candy posted:

Phone posting so I'm probably missing something but why do you want to mix classnames with styled components.

I just started experimenting with styled-components, but according to the docs, I think that's how you apply styles to existing components.

prom candy posted:

And also I didn't see where you actually use the styled components you created.

Yeah, it was a bad example and a bad question. I was working when I was too tired. I know better than to do that...

# ? Mar 21, 2019 19:41

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

When I use styled components, I�m way more often just creating a styled component on a plain dom element, ala styled.div�css� instead of using the HoC as you did. But I also never pass class names through like you did.

You know the styled components can consume props and output dynamic css, right? Sorta avoids the need to ever pass class names IMO.

# ? Mar 21, 2019 19:45

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

Oh okay I see what's going on here, you wanted to enhance an existing component so in that sense sending down the classname does make sense. I pretty much never do that unless I'm trying to style components from third party libraries. But yeah the reason nothing worked for you is because you never actually outputted a <StyledWhatever> component. For what you're doing I'd probably do this:

code:

const Wrapper = styled.div`
  background: red;
`

const LogoText = styled.span`
  font-size: 1.2rem;
`;

export default function Logo() {
  return (
    <Wrapper>
      <LogoImg />
      <LogoText>widget co</LogoText>
    </Wrapper>
  )
}

# ? Mar 21, 2019 20:27

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

prom candy posted:

Windows being popular for non-.NET web dev seems to be a pretty recent phenomenon. For about a decade it seemed like everyone was on Mac or Linux. When I tried to provision my Windows machine for Rails development in like ~2011 it was headache after headache, so I'm not surprised that people are still kind of unsure if it's doable. I'm also seeing a huge uptick in devs that I follow on Twitter posting some variation of "I need a new laptop and I don't like the new MBP, what are my options" that I think is driving Windows adoption in the JS community. Microsoft doing good stuff like making VSCode and Typescript helps too. I went to a Javascript conference a few years ago and a guy from Microsoft did a presentation while using Windows and I was actually surprised at how well everything worked, I had really internalized the idea that Windows was no good for the kind of work I do. Anyway I don't want to start some kind of YOSPOS thing, I just think there are a lot of web developers who have been on Mac since the white MacBook days or earlier who are probably starting to look at Windows as an option again.

# ? Mar 21, 2019 23:18

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

I just posted in the other web dev thread about how I gave up and ran back to my mac

# ? Mar 22, 2019 19:03

Gildiss: Aug 24, 2010; Grimey Drawer

prom candy posted:

I just posted in the other web dev thread about how I gave up and ran back to my mac

I need a new laptop that I can put linux on but I want to do this too. My laptop doesnt reliably boot and doesn't see 5G wifi. Send help.

# ? Mar 23, 2019 02:20

Volguus: Mar 3, 2009

Gildiss posted:

I need a new laptop that I can put linux on but I want to do this too. My laptop doesnt reliably boot and doesn't see 5G wifi. Send help.

You can get a used (out of lease) Lenovo or Dell business laptop. They have great support in Linux and if they're used they can be relatively cheap ($300-$600 CAD, in USD zero is the limit) and fast compared to new ones. If you get one with a spinning hdd can be cheaper and then put in an SSD that you obviously have laying around just for this opportunity, you would get a great performing laptop at a very good price. Of course, check to see about the linux support before you buy it, but usually Lenovo and Dell are quite well supported.

# ? Mar 23, 2019 02:39

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

Here I thought I was slick running Local by Flywheel on my Windows PC.

It still blows my mind that web dev is most efficient on Mac/Linux, but something like 75% of desktop users you're developing for are on Windows. Obviously that's changing a lot as more and more people use non-desktop devices, but at the same time it looks like Windows is making greater strides towards development efficiency or whatever you'd call it. As someone who's been mostly in UI/UX and dabbling in JS and PHP, but wants to jump into the deep end of Node/Angular/React/etc., it's heartening to know Windows isn't a dead-end, because I sure as hell can't afford to shell out for a Macbook or even a new laptop to put Linux on.

# ? Mar 23, 2019 03:23

Volguus: Mar 3, 2009

Windows is fine. The dev environment setup can be a bit more of a pain, but it's fine. On the other hand, there is no reason why you cant give linux a try. Carve out a partition or buy a new ssd and just try it. You may be surprised of how much easier, better, comfortable, etc. everything is. And even windows programs work (some). And even some games.

# ? Mar 23, 2019 03:41

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

Interview code test today involving DOM manipulation :qq:

Sometimes I truly forget how sheltered React has made me.

# ? Mar 24, 2019 07:04

Vincent Valentine: Feb 28, 2006; Murdertime

I'm honestly surprised an interview included it. What modern front-end framework doesn't handle DOM manipulation on its own? And what modern codebase doesn't use a front-end framework?

It's not outlandish to assume someone should be able to do DOM manipulation without a framework, sure. But am I crazy to think it's outlandish to ask someone to do it off the top of their head? I haven't used something like document.querySelector or document.createElement in around two years.

# ? Mar 24, 2019 09:05

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

Vincent Valentine posted:

I'm honestly surprised an interview included it. What modern front-end framework doesn't handle DOM manipulation on its own? And what modern codebase doesn't use a front-end framework?

It's not outlandish to assume someone should be able to do DOM manipulation without a framework, sure. But am I crazy to think it's outlandish to ask someone to do it off the top of their head? I haven't used something like document.querySelector or document.createElement in around two years.

A LOT of people still use ASP.NET mvc with SSR which isn't necessarily suited to a JS framework.

# ? Mar 24, 2019 10:10

smackfu: Jun 7, 2004

If someone is asking questions about it, I hope it�s part of the job. I wouldn�t particularly want that job but it�s not crazy that there�s still jobs that use it.

# ? Mar 24, 2019 15:11

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

smackfu posted:

If someone is asking questions about it, I hope it’s part of the job. I wouldn’t particularly want that job but it’s not crazy that there’s still jobs that use it.

It's my daily life tbh. I moved from an Enterprise Angular role to a role touching a poo poo load of different front end stuff bolted onto MVC. There's actually a lot to be said for doing webdev this way, specifically off the top of my head things like SEO.

# ? Mar 24, 2019 16:10

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

If you can't write basic JS you need to change yur job description. Perhaps 'framework monkey'.

# ? Mar 24, 2019 16:39

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

Yeah I don't think it's crazy to ask for some DOM manipulation. It really wasn't that bad, just involved fetching some data from an API which returned image URLs, and render the images to the page, along with loading and error states. Along with a searchbar that allowed for filters such as "is:landscape" or "green OR yellow" to filter by an image's color.

Pretty basic stuff. I actually had a lot of fun with it, compared to my last code challenge which was to debug a super-opinionated React-Redux app that already was leveraging rxjs and Redux-Observables.

# ? Mar 24, 2019 16:54

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Grump posted:

Yeah I don't think it's crazy to ask for some DOM manipulation. It really wasn't that bad, just involved fetching some data from an API which returned image URLs, and render the images to the page, along with loading and error states. Along with a searchbar that allowed for filters such as "is:landscape" or "green OR yellow" to filter by an image's color.

Pretty basic stuff. I actually had a lot of fun with it, compared to my last code challenge which was to debug a super-opinionated React-Redux app that already was leveraging rxjs and Redux-Observables.

Sometimes I think I want to get a new job but both of these sound awful imo.

Were you using any libs in the former or was it straight pure js?

# ? Mar 24, 2019 17:02

Dominoes: Sep 20, 2007

The MDN web docs is a nice API guide for DOM manipulation. Specifically, the methods on things like Node, Element, Document etc. It's a huge API, with multiple approaches, so I'm not sure which parts an interview would require you to memorize.

Rust alternative

Dominoes fucked around with this message at 17:09 on Mar 24, 2019

# ? Mar 24, 2019 17:03

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

Ruggan posted:

Sometimes I think I want to get a new job but both of these sound awful imo.

Were you using any libs in the former or was it straight pure js?

Pure JS

Kinda looked something like this

JavaScript code:

  var drawImages = function (data, options = {}) {
    var images = document.createElement('div');
    images.id = 'images';

    data.images
      .filter(eachImage => filterByType(eachImage, options.type))
      .filter(eachImage => filterByColors(eachImage, options.colors))
      .forEach(datum => {
        const newImage = drawImage(datum, data.imagePath, options)
        newImage && images.appendChild(newImage);
      });

    /** before we replace the body, the loading text is on-screen currently */
    document.body.replaceChild(images, $('images'));
  };

teen phone cutie fucked around with this message at 17:29 on Mar 24, 2019

# ? Mar 24, 2019 17:26

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Hey man no ES6 arrow functions please, unless you set up Webpack and Babel yourself

# ? Mar 24, 2019 17:37

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Can I also just say, let self equal this?

# ? Mar 24, 2019 17:38

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

Sergeant Rock posted:

If you can't write basic JS you need to change yur job description. Perhaps 'framework monkey'.

Ehh, I think there's a big difference between "can't write basic JS" and "haven't had to directly manipulate the DOM in 2 years".

It's like...even though I used to write a lot of it back in the day now I can't write a lot of assembly off the top of my head, but if I needed to it would just take me a bit of time reading to get back up to speed.

# ? Mar 24, 2019 18:07

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 15:17

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

My current role requires me to do a lot of hands-on DOM manipulation, as I sort of implied earlier. We're a ASP.NET MVC (4.6) house which builds customer-facing commerce sites in the UK. We're sort of critically bound to the Episerver/Avensia CMS & Commerce systems as a part of our core product that we sell to people and while it's a really, really great platform for giving customers a massive amount of functionality in their sites using a Block/Page layout system which we heavily, heavily tailor to suit their needs we've done https://www.permanenttsb.ie/ , https://www.easons.com/ , and https://powerni.co.uk/ to name a few but the important thing here is that all of these sites are, or were originally built with an extremely inexperienced/limited front-end team and were, not barked at, but definitely dominated by a house full of ASP.NET devs who all think they're full stack and believe that jQuery was/is the pinnacle of JS achievement and there's no need to even worry about using anything else.

So instances/roles like this are where actually having a very very very firm grasp of basic JS is extremely loving useful beause, if you're lucky, you MIGHT get to argue to have at least a basic gulp compiler to transpile your SCSS/ES6. Direct DOM manipulation using JS is a fairly normal part of my every day life but at least I _tend_ to be able to do it through ES6 where I at least have access to template strings and semi-coherent OO design principles which I prefer to use given that I adore TypeScript.

# ? Mar 24, 2019 22:02

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

«‹›234 »