The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

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

Need a little help figuring out what to Google in order to overcome this wall I've hit:

I'm making a Firefox add-on so that I can ctrl+doubleclick and then select via hotkey from which language you want to translate the highlighted word into English. I've got that done so far. I want to get the div element from the dictionary translation website so that I can display it as a sort of floating frame or whatever that disappears upon clicking elsewhere. Where do I look (or what do I search for) in order to learn how to do the "get the div element from a different website than the one I'm on and display it on this one" trick? Or is there probably a better way that I haven't thought of because I'm a dumbass..

In the old Firefox way of doing add-ons, apparently you could create a frame and load a new webpage easily... but I don't see how to do that with this new WebExtension API.

# ? Mar 14, 2017 19:57

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 00:46

Warbird: May 23, 2012; America's Favorite Dumbass

Skandranon posted:

Take a look at Visual Studio Code, it's a free, pared down IDE aimed specifically at HTML/JavaScript/TypeScript development.

Kekekela posted:

I use Visual Studio for C# and Visual Studio Code for Javascript. I think this is fairly normal.

Way ahead of you there. I'm messing with some static HTML stuff on VSCode right now. I like the editor just fine, but this class of IDE (Sublime, Brackets, VSCode, etc) often presuppose a certain level of knowledge and competence of the end user; both of which I'm severely lacking in. I'm not faulting them for this mind you. I'm not formally trained in anything webdev and my self taught stuff is cursory at best. The learning curve here isn't unmanageable, but I'm used to it being more due to the code than the tertiary details from the editor. I've started to approach it more like working with Linux. It's damned powerful and easy to use if you know what you're doing, but before you get there it ain't great.

For example: Viewing HTML/CSS changes.

I started out just opening the file in a Chrome tab and refreshing it, but got tired of doing it ever few seconds as I poked around with the code. This led to the Chrome debugger, which I could never get to work due to the launch.json not working. When I did get it working, I'd have to redo it for each "project" to get it to work. I got tired of having to make sure I had access to the text file with the json in it and tried Node's lite-server; which worked beautifully. If I could get VSCode to auto install lite-server and auto configure the package.json for each folder/"project" I opened up I would be happier than a pig in mud.

Warbird fucked around with this message at 21:00 on Mar 14, 2017

# ? Mar 14, 2017 20:45

fuf: Sep 12, 2004; haha

I actually just switched from linux to using visual studio (with a vim plugin). It's kinda nice. 2017 is the year of abandoning linux on the desktop.

# ? Mar 14, 2017 20:55

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

Warbird posted:

Way ahead of you there. I'm messing with some static HTML stuff on VSCode right now. I like the editor just fine, but this class of IDE (Sublime, Brackets, VSCode, etc) often presuppose a certain level of knowledge and competence of the end user; both of which I'm severely lacking in. I'm not faulting them for this mind you. I'm not formally trained in anything webdev and my self taught stuff is cursory at best. The learning curve here isn't unmanageable, but I'm used to it being more due to the code than the tertiary details from the editor. I've started to approach it more like working with Linux. It's damned powerful and easy to use if you know what you're doing, but before you get there it ain't great.

I'd just try to stick with it? I don't think Visual Studio can really help you much if you're working with JavaScript. At some point, you'll have to get your hands dirty with things like NPM, Gulp, Webpack, etc. You'll feel a lot better if you just face it down than trying to shy away from it.

# ? Mar 14, 2017 20:58

Warbird: May 23, 2012; America's Favorite Dumbass

Skandranon posted:

I'd just try to stick with it? I don't think Visual Studio can really help you much if you're working with JavaScript. At some point, you'll have to get your hands dirty with things like NPM, Gulp, Webpack, etc. You'll feel a lot better if you just face it down than trying to shy away from it.

I've come to that conclusion myself. I hate knowing I'm terrible at something, but I need to get the hell over it and grow up. I do need to sit down and watch a Lynda course or something; I at least want to be able to know what questions to ask or what to Google. I don't know what in the everloving gently caress you guys are talking about half the time, but that's on me.

# ? Mar 14, 2017 21:05

Kekekela: Oct 28, 2004

Creating a project using create-react-app and playing around with that a little might be a good idea, just to get a feel for how everything could/should work.

# ? Mar 14, 2017 21:56

ModeSix: Mar 14, 2009

Skandranon posted:

Take a look at Visual Studio Code, it's a free, pared down IDE aimed specifically at HTML/JavaScript/TypeScript development.

You know, I've tried this myself, and quite honestly I don't like the interface on VS Code, so I use the full blown VS Community edition (it's full blown VS and absolutely free).

Mind you I am doing ASP.NET Core development with smatterings of Angular for form validation and DOM manipulation, not just HTML/JS/CSS.

VS 2017 is really quite nice in comparison to 2015.

# ? Mar 14, 2017 22:51

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

What do you all use for mobile navs? I usually put my navs in with a styled basic unordered list structure, and it just clicked today that I've been using ShiftNav and shouldn't be needing to install a WordPress plugin for what could be done with some simple CSS and JavaScript. There's an overwhelming amount of plugins out there, and I'm looking for a lightweight one I can style myself.

# ? Mar 14, 2017 22:57

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

ModeSix posted:

You know, I've tried this myself, and quite honestly I don't like the interface on VS Code, so I use the full blown VS Community edition (it's full blown VS and absolutely free).

Mind you I am doing ASP.NET Core development with smatterings of Angular for form validation and DOM manipulation, not just HTML/JS/CSS.

VS 2017 is really quite nice in comparison to 2015.

I still use Visual Studio for C# stuff I work on. I don't work on any mixed projects, just pure SPAs, so all UI work is in a completely separate repo from anything backend, and I much prefer it that way. VS 2015 has a lot of stuff that's good for web development, but it is still heavy and ultimately, most of the good things are it's ability to integrate with JS task runners, so not exclusive to VS. I really don't want to go back to server side rendered anything, feels like a mess.

# ? Mar 14, 2017 23:07

ModeSix: Mar 14, 2009

Skandranon posted:

I still use Visual Studio for C# stuff I work on. I don't work on any mixed projects, just pure SPAs, so all UI work is in a completely separate repo from anything backend, and I much prefer it that way. VS 2015 has a lot of stuff that's good for web development, but it is still heavy and ultimately, most of the good things are it's ability to integrate with JS task runners, so not exclusive to VS. I really don't want to go back to server side rendered anything, feels like a mess.

I understand what you mean about server side rendering feeling like a mess, and it does sometimes. I'm not really building anything SPA, it's full blown web application, so the server side rendering is really making life easier for me (most of the time). I think I'm up to somewhere close to 50 different views and 8 controllers at this point, and it's going to expand a lot more before it's finished. I just kind of "get" it when it comes to the C# data access models (after some initial flailing around about two weeks ago). The Intellisense when crafting the queries is beautiful. I'd sure rather type

code:

_context.Clients.Where(id => id.ClientID == clientID)
	.Select.(r => new SelectList... etc. etc.

Then drop a simple Razor tag into my html and have it render a dropdown list for me, versus messing around with 100 lines of Javascript to accomplish the same thing. Mind you there is a lot of backend setup with ViewModels and such, but in the end I find it easier.

I initially started this project using a rest api, but in the end the asp.net razor code saved the day. I think this might have a lot to do with the fact I come from a php background, starting around the time the dinosaurs walked the earth (around 1999 I guess), Javascript was a thing idiots used to create popups on their websites to annoy you, and the idea of an SPA didn't exist. I can get my head around server side rendering much easier than front-end rendering.

I understand the benefits of SPA's and front-end javascript frameworks, I just am finding it much easier to do what I want through the backend rendering pipeline.

ModeSix fucked around with this message at 00:56 on Mar 15, 2017

# ? Mar 15, 2017 00:45

MrMoo: Sep 14, 2000

Are WebComponent JSON attributes preferred or just convenient? idk, two forms of the same thing, styled with CSS Grid:

code:

<quadrant-layout
        topleft='{ "type": "featured-stock", "keys": ["VSR"] }'
        topright='{ "type": "short-form", "keys": ["OA", "CIG.C", "YGE", "WMT", "XINA", "XCO", "USWD", "SVT", "UNH", "XOM"] }'
        bottomleft='{ "type": "long-form", "keys": ["WFE/PA", "WFC/PR", "XTNT", "XRA", "VZ"] }'
        bottomright='{ "type": "long-form", "keys": ["WFC/PN", "WFC/PO", "WFC/PP", "WSO.B", "ZB/PF"] }' ></quadrant-layout>

code:

<div id="container">
        <div id="topleft">
                <featured-stock key="VSR"></featured-stock>
        </div>  
        <div id="topright">
                <short-form key="OA"></short-form><short-form key="CIG.C"></short-form>
                <short-form key="YGE"></short-form><short-form key="WMT"></short-form>
                <short-form key="XINA"></short-form><short-form key="XCO"></short-form>
                <short-form key="USWD"></short-form><short-form key="SVT"></short-form>
                <short-form key="UNH"></short-form><short-form key="XOM"></short-form>
        </div>  
        <div id="bottomleft">
                <long-form key="WFE/PA"></long-form>
                <long-form key="WFC/PR"></long-form>
                <long-form key="XTNT"></long-form>
                <long-form key="XRA"></long-form>
                <long-form key="VZ"></long-form>
        </div>
        <div id="bottomright">
                <long-form key="WFC/PN"></long-form>
                <long-form key="WFC/PO"></long-form>
                <long-form key="WFC/PP"></long-form>
                <long-form key="WSO.B"></long-form>
                <long-form key="ZB/PF"></long-form>
        </div>
</div>

MrMoo fucked around with this message at 03:31 on Mar 15, 2017

# ? Mar 15, 2017 03:28

Warbird: May 23, 2012; America's Favorite Dumbass

Kekekela posted:

Creating a project using create-react-app and playing around with that a little might be a good idea, just to get a feel for how everything could/should work.

I appreciate that, I've tucked it away to look into once I get some time. Thanks!

# ? Mar 15, 2017 04:19

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Love Stole the Day posted:

Need a little help figuring out what to Google in order to overcome this wall I've hit:

I'm making a Firefox add-on so that I can ctrl+doubleclick and then select via hotkey from which language you want to translate the highlighted word into English. I've got that done so far. I want to get the div element from the dictionary translation website so that I can display it as a sort of floating frame or whatever that disappears upon clicking elsewhere. Where do I look (or what do I search for) in order to learn how to do the "get the div element from a different website than the one I'm on and display it on this one" trick? Or is there probably a better way that I haven't thought of because I'm a dumbass..

In the old Firefox way of doing add-ons, apparently you could create a frame and load a new webpage easily... but I don't see how to do that with this new WebExtension API.

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Modify_a_web_page#Modifying_pages_programmatically

You can inject a script that does the iframe trick you're talking about.

Warbird posted:

For example: Viewing HTML/CSS changes.

I started out just opening the file in a Chrome tab and refreshing it, but got tired of doing it ever few seconds as I poked around with the code. This led to the Chrome debugger, which I could never get to work due to the launch.json not working. When I did get it working, I'd have to redo it for each "project" to get it to work. I got tired of having to make sure I had access to the text file with the json in it and tried Node's lite-server; which worked beautifully. If I could get VSCode to auto install lite-server and auto configure the package.json for each folder/"project" I opened up I would be happier than a pig in mud.

You can just do that in/with Chrome https://developers.google.com/web/tools/setup/setup-workflow

# ? Mar 15, 2017 16:57

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

ModeSix posted:

I understand what you mean about server side rendering feeling like a mess, and it does sometimes. I'm not really building anything SPA, it's full blown web application, so the server side rendering is really making life easier for me (most of the time). I think I'm up to somewhere close to 50 different views and 8 controllers at this point, and it's going to expand a lot more before it's finished. I just kind of "get" it when it comes to the C# data access models (after some initial flailing around about two weeks ago). The Intellisense when crafting the queries is beautiful. I'd sure rather type
code:
_context.Clients.Where(id => id.ClientID == clientID)
	.Select.(r => new SelectList... etc. etc.
Then drop a simple Razor tag into my html and have it render a dropdown list for me, versus messing around with 100 lines of Javascript to accomplish the same thing. Mind you there is a lot of backend setup with ViewModels and such, but in the end I find it easier.

I initially started this project using a rest api, but in the end the asp.net razor code saved the day. I think this might have a lot to do with the fact I come from a php background, starting around the time the dinosaurs walked the earth (around 1999 I guess), Javascript was a thing idiots used to create popups on their websites to annoy you, and the idea of an SPA didn't exist. I can get my head around server side rendering much easier than front-end rendering.

I understand the benefits of SPA's and front-end javascript frameworks, I just am finding it much easier to do what I want through the backend rendering pipeline.

If you think it takes 100 of lines of JS to do a dropdown with Angular, I think you're missing the point of it. Should be somewhere between 0-5, depending how you have things structured. But, if you are already 50 views and 8 controllers in, and it's working out for you, would be a mistake to start a rewrite.

# ? Mar 15, 2017 18:21

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

Thermopyle posted:

React is the absolute-fuckin' best. But like has been mentioned it's overkill for light DOM manipulation.

You can use React via a script tag and no transpiling of JSX if you use React.createElement instead of JSX, but I think it's a very small subset of the time where that's a good plan. If you've got a page already built with regular JS, but want to introduce a component to the page that would really benefit from React, that might be a good time do it.

Anyway, much of the activity in modern web development is focused on building your DOM mainly with JS and the only HTML you write is a skeleton of sorts. Since I know you do Python apps, I particularly encourage you to learn React as it is great at building dynamic UIs, and you can go down the very powerful path of building your UI for Python apps with React instead of lovely Qt.

I reread this post and it got me thinking: Do people use React to build full on websites that have a lot of functionality?

I know Nordstrom Rack uses React heavily, but I can't think of many sites that use it heavily (Facebook even uses it sparingly). is it overkill to build an entire site in React?

# ? Mar 15, 2017 20:52

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

Grump posted:

I reread this post and it got me thinking: Do people use React to build full on websites that have a lot of functionality?

I know Nordstrom Rack uses React heavily, but I can't think of many sites that use it heavily (Facebook even uses it sparingly). is it overkill to build an entire site in React?

React is used on many sites for everything from a little widget to very "heavy" webapps.

Netflix uses it, Asana uses it, Dropbox uses it.

https://github.com/facebook/react/wiki/sites-using-react

# ? Mar 15, 2017 21:24

TheFluff: Dec 13, 2006; FRIENDS, LISTEN TO ME
I AM A SEAGULL
OF WEALTH AND TASTE

I haven't done any server side HTML template rendering for anything other than emails since like... 2013, I think.

# ? Mar 15, 2017 22:02

a witch: Jan 12, 2017

So are Dropbox and Netflix just really bad at React? Both of them have really bad websites, Netflix has been bad on every device I've ever used it on. Dropbox makes over 40 requests to scripts to display a list of files!

# ? Mar 15, 2017 22:32

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

a witch posted:

So are Dropbox and Netflix just really bad at React? Both of them have really bad websites, Netflix has been bad on every device I've ever used it on. Dropbox makes over 40 requests to scripts to display a list of files!

React doesn't stop you from doing stupid things.

# ? Mar 15, 2017 22:41

a witch: Jan 12, 2017

What's a good site that uses React then?

# ? Mar 15, 2017 22:51

Kekekela: Oct 28, 2004

a witch posted:

What's a good site that uses React then?

instagram

# ? Mar 15, 2017 23:00

a witch: Jan 12, 2017

Kekekela posted:

instagram

Ok yes, Instagram is indeed a very good site.

# ? Mar 15, 2017 23:13

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

a witch posted:

What's a good site that uses React then?

Wal*Mart? You can write stupid crap in every language and with every framework. It's like going to a 3rd grade summer camp craft class and saying "Pfffft... wood sucks, look at those lovely birdhouses."

# ? Mar 15, 2017 23:16

a witch: Jan 12, 2017

Lumpy posted:

Wal*Mart? You can write stupid crap in every language and with every framework. It's like going to a 3rd grade summer camp craft class and saying "Pfffft... wood sucks, look at those lovely birdhouses."

I don't understand your analogy. Are you saying walmart, netflix, and dropbox have javascript skills equivalent to a 3rd grade summer camp? Their websites are very bad, and apparently built with react, but that's what is being offered up in the thread. Is "3rd grade summer camp" the quality goal of a modern web developer?

# ? Mar 15, 2017 23:21

Dominoes: Sep 20, 2007

Do I need node/bower/less/sass etc? Seems like I can just use a CDN or download the libs locally? Also, bower [a package manager] requires npm [another package manager] that's part of a server-side framework for a front-end language?

# ? Mar 15, 2017 23:42

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

Dominoes posted:

Do I need node/bower/less/sass etc? Seems like I can just use a CDN or download the libs locally? Also, bower [a package manager] requires npm [another package manager] that's part of a server-side framework for a front-end language?

Depends what you mean by "need". If you are going to use any NodeJS build tools, like Grunt, Gulp, Webpack, TypeScript, LESS, SASS, SCSS, etc, yes, you need Node & NPM. If you are just going to write vanilla JavaScript using libraries readily available from CDNs, no you don't.

Also, there is little reason to use Bower anymore, almost any package in there is mirrored in NPM.

# ? Mar 16, 2017 00:38

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

a witch posted:

I don't understand your analogy. Are you saying walmart, netflix, and dropbox have javascript skills equivalent to a 3rd grade summer camp? Their websites are very bad, and apparently built with react, but that's what is being offered up in the thread. Is "3rd grade summer camp" the quality goal of a modern web developer?

Jfc.

I mean, you already know the answer to both of those questions and/or you're just being ridiculous and obtuse.

The "thread" didn't offer up Netflix and whatnot as an example of good websites made with React. One person (me) did and that person just Googled "websites made with react" and offered up a couple of the top results. That was in response to a question about whether people use React to build full websites.

# ? Mar 16, 2017 00:46

Dominoes: Sep 20, 2007

Skandranon posted:

Depends what you mean by "need". If you are going to use any NodeJS build tools, like Grunt, Gulp, Webpack, TypeScript, LESS, SASS, SCSS, etc, yes, you need Node & NPM. If you are just going to write vanilla JavaScript using libraries readily available from CDNs, no you don't.

Also, there is little reason to use Bower anymore, almost any package in there is mirrored in NPM.

Thanks. I was thrown by pages like this.

# ? Mar 16, 2017 00:53

Kekekela: Oct 28, 2004

If you're looking for React in the wild, one cool thing to do is install the react-dev-tools chrome extension so you can see what sites, and what parts of those sites, are being rendered in React.

# ? Mar 16, 2017 03:31

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

My client wants something like the car price calculator on Peddle.com, the one that shows when you click "Get your offer". I don't know what to tell him, because this seems very specific and Google is failing me. Does anyone know if there are any plugins I could use for this, or is this something I'd have to code myself? I could probably do the price calculator, but coding in the VIN lookup into the form as well as putting in every single make and model of car ever produced for the last 67 years is going to drive me up the wall and take forever if it's even possible. Can someone give me advice or point me in the right direction?

# ? Mar 16, 2017 15:54

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

a witch posted:

I don't understand your analogy. Are you saying walmart, netflix, and dropbox have javascript skills equivalent to a 3rd grade summer camp? Their websites are very bad, and apparently built with react, but that's what is being offered up in the thread. Is "3rd grade summer camp" the quality goal of a modern web developer?

I don't understand your apparent thick-headedness, so let's call it a day.

# ? Mar 16, 2017 16:05

Kekekela: Oct 28, 2004

Yeah its custom stuff. Looks pretty old, they used nanoscroller and some other ui widgets and then just call their own old-school asp handlers to get data:
https://www.peddle.com/RequestHandler.ashx?command=GetMakes&yearId=35&SID=1489676461021&_=1489676375283 What the server is doing, or what it may be calling is anyone's guess.

Kekekela fucked around with this message at 16:15 on Mar 16, 2017

# ? Mar 16, 2017 16:09

a witch: Jan 12, 2017

BJPaskoff posted:

My client wants something like the car price calculator on Peddle.com, the one that shows when you click "Get your offer". I don't know what to tell him, because this seems very specific and Google is failing me. Does anyone know if there are any plugins I could use for this, or is this something I'd have to code myself? I could probably do the price calculator, but coding in the VIN lookup into the form as well as putting in every single make and model of car ever produced for the last 67 years is going to drive me up the wall and take forever if it's even possible. Can someone give me advice or point me in the right direction?

If all you want is the year/make/model/trim, you can get it directly from the VIN.

Try looking for "VIN Decode" or "Vehicle Configurator". A commercial VIN decode service will turn a VIN into Year, Make, Model (easy, you can do it yourself), and then also options, as-built configuration, styles, categories, MSRP, etc (hard, you don't have that data catalog). Decode services like that power vehicle configuration builders, comparison services, etc.

The biggest service I know of is Chrome Data, but it's not cheap.

# ? Mar 16, 2017 16:09

Kekekela: Oct 28, 2004

a witch posted:

I don't understand your analogy. Are you saying walmart, netflix, and dropbox have javascript skills equivalent to a 3rd grade summer camp? Their websites are very bad, and apparently built with react, but that's what is being offered up in the thread. Is "3rd grade summer camp" the quality goal of a modern web developer?

Walmart probably was written pre-React and ported over. React is pretty great for letting you componentize (apparently not a real word) existing html. If this was the case, I can virtually guarantee whats there now is orders of magnitude more maintainable and easier to work on than what it replaced. For me this is really the benefit of React, it makes for dramatically more maintainable code. Other than that its not really going to make my sites better designed etc.

I like Netflix's site. :smith:

Dropbox site is mostly non-React, I dont think I'd lump them in with the other two.

Kekekela fucked around with this message at 16:19 on Mar 16, 2017

# ? Mar 16, 2017 16:14

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

a witch posted:

If all you want is the year/make/model/trim, you can get it directly from the VIN.

Try looking for "VIN Decode" or "Vehicle Configurator". A commercial VIN decode service will turn a VIN into Year, Make, Model (easy, you can do it yourself), and then also options, as-built configuration, styles, categories, MSRP, etc (hard, you don't have that data catalog). Decode services like that power vehicle configuration builders, comparison services, etc.

The biggest service I know of is Chrome Data, but it's not cheap.

They want the VIN and the options as well. I don't know the calculations it's doing in the back-end to figure out the prices it spits out. Just your/anyone's estimation, how much would something like this cost to program? If I can't do it, I might have to tell them to hire someone.

# ? Mar 16, 2017 16:21

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Responsive images questions : is upscaling images intended behavior for srcset if the size specified in the sizes attribute is larger than the image's native size? That seems unwise. I'm really hoping that's not the case and that I'm just missing something incredibly basic.

The reason I'm asking is because we're trying to implement an automated responsive image solution with srcset with a RIAS server-side plugin we have installed. We don't have the time to curate all the images the staff upload through our CMS, and they do love their 5000px wide portraits. :cripes: