The Web Design & Development Megathread

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

«‹›362 »

No Gravitas: Jun 12, 2013; by FactsAreUseless

Data Graham posted:

Try this:
code:
code {display: table-row;}
This'll probably add some unwanted margins to your pre tags, so use "pre {margin: 5px 0px;}" or some such to set that to your liking.

It worked! Thanks!

# ? Mar 5, 2017 07:36

Adbot: ADBOT LOVES YOU

# ? May 29, 2024 07:48

No Gravitas: Jun 12, 2013; by FactsAreUseless

I'm looking for a volunteer or two.

I have a pretty cool piece of software that I want to test on your CSS. PM for details!

# ? Mar 6, 2017 11:01

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

Is anyone a whiz with "The Facebook" that the kids are all using* these days? I have a web app that has been approved by FB and I can get a user's posts via the Graph API. Neat! One of the things I do is search for keywords in said posts, and show a list of posts that contained them. What I want to have happen is when a users clicks on a list item, I show that post to them next to the list. There is the Embedded Posts thing, which is neat if the post is public, but this does not cover cases where said posts are not public. Since the user is logged in as themselves, they (and my app) have permissions to do what I want, but I can't think of a way of embedding non-public posts. Slapping the post url in an iFrame is a no-no as FB checks for that and does not allow it. Other than recreating a post's look myself from data I grab with the API, is there a simple way of doing this?

*or fleeing I guess?

# ? Mar 6, 2017 19:17

Dominoes: Sep 20, 2007

I wish GUI programming, like in Qt, was as easy to use as Jquery!

# ? Mar 8, 2017 14:23

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

Dominoes posted:

I wish GUI programming, like in Qt, was as easy to use as Jquery!

I take it you've never done anything complicated w/ jQuery yet.

jQuery is / was wonderful for small things and one-off manipulations, but doing an "app" w/ jQuery becomes a nightmare of race conditions and state management hell. That said, I actually used jQuery for the first time in a few years last month for a quick little one-page thing with minimal interactivity and it was nice to say "hi" to an old friend.

# ? Mar 8, 2017 15:02

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

Lumpy posted:

I take it you've never done anything complicated w/ jQuery yet.

jQuery is / was wonderful for small things and one-off manipulations, but doing an "app" w/ jQuery becomes a nightmare of race conditions and state management hell. That said, I actually used jQuery for the first time in a few years last month for a quick little one-page thing with minimal interactivity and it was nice to say "hi" to an old friend.

The most complicated jQ thing I've worked on was a video player widget. Maybe I'm just too used to it, or maybe it's not complicated enough, but I didn't think it was bad at all.

# ? Mar 8, 2017 15:33

Dominoes: Sep 20, 2007

To be fair, creating schemas to serialize into id fields is probably not good long-term...

# ? Mar 8, 2017 15:44

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

Dang. I never knew there was so much of a stigma on JQuery now.

Granted, I've never really used it other than for simple DOM manipulation and other functional stuff, but I work with BigCommerce and their entire platform depends on it.

# ? Mar 8, 2017 15:54

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

Grump posted:

Dang. I never knew there was so much of a stigma on JQuery now.

Granted, I've never really used it other than for simple DOM manipulation and other functional stuff, but I work with BigCommerce and their entire platform depends on it.

It doesn't sound like anyone's against it being used for simple DOM manipulation. If I need something to slide down when someone clicks on something, I'm using jQuery. I don't know what I'd use if I needed something more complex, because I'd probably try to find a plugin for it instead of coding it myself.

# ? Mar 8, 2017 16:14

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

Munkeymon posted:

The most complicated jQ thing I've worked on was a video player widget. Maybe I'm just too used to it, or maybe it's not complicated enough, but I didn't think it was bad at all.

It's not bad, and sorry if my post came off that way. jQuery is pretty amazing, but it suffers from "the WordPress problem" in that people try and use it for things way outside the scope of what it was designed for and that turns into a poo poo-show.

# ? Mar 8, 2017 16:19

lunar detritus: May 6, 2009

Lumpy posted:

It's not bad, and sorry if my post came off that way. jQuery is pretty amazing, but it suffers from "the WordPress problem" in that people try and use it for things way outside the scope of what it was designed for and that turns into a poo poo-show.

Basically, don't make a SPA using only jQuery.

# ? Mar 8, 2017 16:22

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

gmq posted:

Basically, don't make a SPA using only jQuery.

I will just have you write my posts for me from now on if that's okay?

# ? Mar 8, 2017 16:28

Kekekela: Oct 28, 2004

Grump posted:

simple DOM manipulation

A big factor in why you see less jQuery usage is that you're not typically doing direct DOM manipulation with the current batch of frameworks (React et al)

# ? Mar 8, 2017 16:29

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

gmq posted:

Basically, don't make a SPA using only jQuery.

You're not my dad :argh:

oh man that'd be quite a slog

# ? Mar 8, 2017 17:05

Data Graham: Dec 28, 2009; 📈📊🍪😋

I've been through the odyssey of Angular/React/Angular2/ES6/Typescript over the past few years and although I feel like a failure and a charlatan I keep coming back to jQuery, even for fairly big SPAs.

It may lead to a lot of repetition and boilerplate, but dammit it's understandable for a new person joining the team and needs minimal reverse engineering and transpiling, which is like my foremost success criterion at this point.

# ? Mar 8, 2017 17:34

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

I have CSS that I'm trying to apply to markup that looks like

HTML code:

<li>
  <input class='hidden'/>
  <label for='input'/>
  <svg class='icon'/>
</li>

I want the label to take up the whole line if it doesn't have an icon so I'm trying

CSS code:

/*compiled from some SASS)*/
.generic-list-class li label {
    width: 100%
}

.generic-list-class li .icon+label {
    width: auto
}

but the second selector never seems to apply and I can't just do .icon+label because that isn't specific enough. Any ideas?

# ? Mar 8, 2017 18:11

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

Munkeymon posted:

I have CSS that I'm trying to apply to markup that looks like
HTML code:
<li>
  <input class='hidden'/>
  <label for='input'/>
  <svg class='icon'/>
</li>
I want the label to take up the whole line if it doesn't have an icon so I'm trying
CSS code:
/*compiled from some SASS)*/
.generic-list-class li label {
    width: 100%
}

.generic-list-class li .icon+label {
    width: auto
}
but the second selector never seems to apply and I can't just do .icon+label because that isn't specific enough. Any ideas?

CSS code:

.generic-list-class li {
   display: flex;
}

.generic-list-class label {
  flex: 1;
}

Tada!

# ? Mar 8, 2017 18:13

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

Lumpy posted:

CSS code:

.generic-list-class li {
   display: flex;
}

.generic-list-class label {
  flex: 1;
}

Tada!

Heh, nice, but it's not equivalent.

e: I guess there's a corollary question: Does + not work like I think it does?

Munkeymon fucked around with this message at 18:32 on Mar 8, 2017

# ? Mar 8, 2017 18:28

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

Munkeymon posted:

Heh, nice, but it's not equivalent.

What do you mean?

https://jsfiddle.net/jyxtdhw0/

No icon, label fills up space? Maybe I not understand goodly that thing you ask.

# ? Mar 8, 2017 18:33

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

Lumpy posted:

What do you mean?

https://jsfiddle.net/jyxtdhw0/

No icon, label fills up space? Maybe I not understand goodly that thing you ask.

One of the details I elided is that the labels are inline blocks. Setting flex: 0 gets close, but then the text wraps on spaces and, more importantly, I'm back where I started because flex 0 won't take the whole line.

e: this is probably may too much effort to go to to avoid tacking a class on the labels but now I just want to know what I'm misunderstanding about adjacent sibling selectors.

Munkeymon fucked around with this message at 18:51 on Mar 8, 2017

# ? Mar 8, 2017 18:47

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

Munkeymon posted:

One of the details I elided is that the labels are inline blocks. Setting flex: 0 gets close, but then the text wraps on spaces and, more importantly, I'm back where I started because flex 0 won't take the whole line.

Is what you want:

code:

w/ icon:

[li  [input ][ label  ][ icon ]                   ]

w/o icon:

[li  [input ][ label                              ]]

Or:

code:

w/ icon:

[li  [input ][ label  ][ icon ]                   ]

w/o icon:

[li  [input ]
     [ label                                         ]]

Maybe a picture would help, because I'm dumb.

# ? Mar 8, 2017 18:53

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

Lumpy posted:

Is what you want:

code:

w/ icon:

[li  [input ][ label  ][ icon ]                   ]

w/o icon:

[li  [input ][ label                              ]]

That one, yeah, and to understand sibling selectors at all because it turns out I don't!

# ? Mar 8, 2017 18:56

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

Munkeymon posted:

That one, yeah, and to understand sibling selectors at all because it turns out I don't!

Ahhhhhhhh! Okay.

The adjacent sibling selector (+) can only "get at" the second element. So you could target the *icon* with label + icon, but there is no way to "backtrack" and specify the label based on the icon being there or not.

However, you might be able to pull this off with flexbox by putting the icon *before* the label in source, then using icon + label to change the display order. That way you can assign rules to the label that apply no matter what with label and then rules that only apply if there is an icon with icon + label

EDIT: here's doing that thing I said above: https://jsfiddle.net/jyxtdhw0/1/ I change be BG color of label based on icon being there or not and move icon to end w/ order: 3

Lumpy fucked around with this message at 19:05 on Mar 8, 2017

# ? Mar 8, 2017 19:02

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

Lumpy posted:

The adjacent sibling selector (+) can only "get at" the second element. So you could target the *icon* with label + icon, but there is no way to "backtrack" and specify the label based on the icon being there or not.

So .generic-list-class li .icon+label doesn't work because the rule engine processes siblings sequentially and has already passed the label by the time it sees the .icon?

e: after reading https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors more closely that sounds right. Well poo poo.

Munkeymon fucked around with this message at 19:21 on Mar 8, 2017

# ? Mar 8, 2017 19:14

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

You have stumbled across one of most wanted features of CSS, being able to select a parent element of something.

Edit: Oops I'm dumb, misread your issue.

# ? Mar 8, 2017 21:20

huhu: Feb 24, 2006

Just have to share my minor idiotic epiphany of the night. I'm completely self taught and at this point I've built ~15 Websites (static, WordPress, Django) but could never fully grasp GET/POST. I just started building my first Flask website and while writing code to handle a custom form submission, it all clicked. Now I'm wondering what the hell I thought was so confusing about it.

# ? Mar 9, 2017 05:16

Dominoes: Sep 20, 2007

Hey dudes. I'm clearly new to web dev, and just posted about how nice Jquery is. I've been skimming react tutorials, and it looks like it does similar things, but with much nicer syntax, and not abusing ids/classes. Is there a good reason not to switch to React for dynamically creating and modifying elements? It does look like it might be a pain to integrate into non-react code, since it doesn't use valid JS... Ie I can't just put a script tag like with jquery, angular etc.

Dominoes fucked around with this message at 11:43 on Mar 9, 2017

# ? Mar 9, 2017 11:04

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

If you just want to lay a net of JavaScript over a server rendered page, like some little class toggles and interaction, then Jquery is fine. If you want UI components that are fully interactive and fully rendered by the JavaScript, steer clear of jquery and use something like react. You'll need to get past the learning curve of transpiling your code into normal JavaScript (because of the jsx syntax), but really you'll have a much nicer time trying to do anything complex once you get the hang of React. It's not actually that BIG a library once you get the hang of it.

# ? Mar 9, 2017 11:39

fuf: Sep 12, 2004; haha

Do people use display:flex as a matter of course yet or is support still flaky?

Use case is a very high end jewellery site so users skew older but also richer so more likely to have new devices.

http://caniuse.com/#feat=flexbox seems to indicate it's pretty safe?

e: vvvv nice, thanks

fuf fucked around with this message at 16:18 on Mar 9, 2017

# ? Mar 9, 2017 13:46

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

fuf posted:

Do people use display:flex as a matter of course yet or is support still flaky?

Use case is a very high end jewellery site so users skew older but also richer so more likely to have new devices.

http://caniuse.com/#feat=flexbox seems to indicate it's pretty safe?

I ran into a bug on IE 11 where it took flex-wrap: wrap to mean 'always wrap' but, if you don't care about niche browsers like it, you're probably, finally, free to use it.

# ? Mar 9, 2017 14:28

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

Dominoes posted:

Hey dudes. I'm clearly new to web dev, and just posted about how nice Jquery is. I've been skimming react tutorials, and it looks like it does similar things, but with much nicer syntax, and not abusing ids/classes. Is there a good reason not to switch to React for dynamically creating and modifying elements? It does look like it might be a pain to integrate into non-react code, since it doesn't use valid JS... Ie I can't just put a script tag like with jquery, angular etc.

If you're just doing simple DOM manipulation or some small functionality, there's no reason not to use vanilla JS or Jquery.

The idea behind React is to componentize your code. Components can be as simple or complex as you like (It could be a small form or an entire set of elements(like products on your ecommerce shop). React is meant to be read from top to bottom as well, since you typically include functionality in a component and then render HTML at the very end. It's also great for handling state and performing actions based on where a component is in it's lifecycle (mounted/unmounted)

You could include just a bit of React in an existing project, but it may not even be worth the trouble depending on what you're trying to do.

# ? Mar 9, 2017 16:17

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

Dominoes posted:

Hey dudes. I'm clearly new to web dev, and just posted about how nice Jquery is. I've been skimming react tutorials, and it looks like it does similar things, but with much nicer syntax, and not abusing ids/classes. Is there a good reason not to switch to React for dynamically creating and modifying elements? It does look like it might be a pain to integrate into non-react code, since it doesn't use valid JS... Ie I can't just put a script tag like with jquery, angular etc.

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.

# ? Mar 9, 2017 16:52

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

Does anyone have any tips for searching Github for open source projects that I as a loser amateur trying to satisfy a resume bullet point could try to contribute to?

Because filtering by language on Github's Explore page when browsing projects only shows you the largest and most active projects that I in all likelihood have no hope in hell of ever contributing to.

# ? Mar 9, 2017 23:32

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

Love Stole the Day posted:

Does anyone have any tips for searching Github for open source projects that I as a loser amateur trying to satisfy a resume bullet point could try to contribute to?

Because filtering by language on Github's Explore page when browsing projects only shows you the largest and most active projects that I in all likelihood have no hope in hell of ever contributing to.

Your best bet is probably finding projects related to something you're interested in.

Like, if you love pokemon, go find something to do with pokemon.

# ? Mar 9, 2017 23:43

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

Thermopyle posted:

Your best bet is probably finding projects related to something you're interested in.

Like, if you love pokemon, go find something to do with pokemon.

The reason why I ask is because I read recently in some article that for every 5 webdev job advertisements out there in the US, 4 of them go unfilled. So I was like poo poo if the competition for getting a job in that industry is that low and since I've already gone through a few books and video courses about full-stack stuff... why not try and get a part-time job or something to help change careers later. The BLS says that the median annual for webdev jobs is in the 60s, which is 14% over PPP, so why not? Sorry if that's retarded.

# ? Mar 10, 2017 03:32

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

I'm not sure you understood my point?

The way to fund projects to contribute to is to find projects that do things you're interested in.

In other words don't go looking for projects that need contributions, look for projects that do things you care about and then work on those.

# ? Mar 10, 2017 17:02

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

Make cool arty things.

# ? Mar 10, 2017 17:28

Shayl: Apr 11, 2007

Dominoes posted:

Hey dudes. I'm clearly new to web dev, and just posted about how nice Jquery is. I've been skimming react tutorials, and it looks like it does similar things, but with much nicer syntax, and not abusing ids/classes. Is there a good reason not to switch to React for dynamically creating and modifying elements? It does look like it might be a pain to integrate into non-react code, since it doesn't use valid JS... Ie I can't just put a script tag like with jquery, angular etc.

React is neat and I love it. Kinda big for just a regular website, but great for single page apps and other big things.

I do not love jQuery and find that nowadays you can do most things with regular javascript without needing the cross-browser functionality jQuery used to be so useful for. jQuery has gotten old and crusty and just isn't as useful as it used to be.

It's also better, in my opinion, to just learn javascript without any jQuery because then you can learn things like node.js, as well as all the other more powerful libraries/frameworks out there like React that just use plain ol' javascript. Also, if you ever DO want to use something like React, which has a virtual DOM, you can't really use jquery (well) because it is doing direct DOM manipulation instead which doesn't play well with the virtual DOM that react uses (my current company learned this the hard way)

Shayl fucked around with this message at 17:48 on Mar 10, 2017

# ? Mar 10, 2017 17:45

Dominoes: Sep 20, 2007

Thanks Therm and Shayl for the React info. Seems great; no luck so far integrating it into my current project, but next time I'm making a UI in JS, I'll start from scratch with it in full-up JSX mode.

Shayl, regarding Jquery over vanilla JS: I try to use JS when I can, but Jquery's convenience functions like next() and closest() are too nice to pass on. Ie, apparently this is how you implement closest without JQuery. Even for things that can be done simply in JS, the code's more direct in JQuery, due to JS's verbose loop syntax:

JavaScript code:

// JS (Vanilla)
var things = document.getElementsByClassName('thing')
for (var i = 0; i < things.length; i++) {
    var thing = things[i]
    // Code goes here
}

// JQuery
$('.thing').each(function() {
    // Code goes here.
}

edit: Last time I posted about JS here, y'all recommended lodash and underscore... Which is still more verbose than JQuery, since its targeted for these uses.

JavaScript code:

_.each(document.getElementsByClassName('thing'), function(thing) {
    // Code goes here.
}

Dominoes fucked around with this message at 19:51 on Mar 10, 2017

# ? Mar 10, 2017 19:35

Adbot: ADBOT LOVES YOU

# ? May 29, 2024 07:48

Shayl: Apr 11, 2007

Dominoes posted:

Thanks Therm and Shayl for the React info. Seems great; no luck so far integrating it into my current project, but next time I'm making a UI in JS, I'll start from scratch with it in full-up JSX mode.

Shayl, regarding Jquery over vanilla JS: I try to use JS when I can, but Jquery's convenience functions like next() and closest() are too nice to pass on. Ie, apparently this is how you implement closest without JQuery. Even for things that can be done simply in JS, the code's more direct in JQuery, due to JS's verbose loop syntax:
JavaScript code:
// JS (Vanilla)
var things = document.getElementsByClassName('thing')
for (var i = 0; i < things.length; i++) {
    var thing = things[i]
    // Code goes here
}

// JQuery
$('.thing').each(function() {
    // Code goes here.
}
edit: Last time I posted about JS here, y'all recommended lodash and underscore... Which is still more verbose than JQuery, since its targeted for these uses.
JavaScript code:
_.each(document.getElementsByClassName('thing'), function(thing) {
    // Code goes here.
}

Meh, I still don't like it. I don't consider a helper function of like 5-10 lines something that's too big for me to have have my own 'library' of in a small project. Create yourself and object that holds your helper functions or something and call them up. No need for a whole library written just for two helpers you use frequently. All jQuery is is a bunch of object methods you are calling to do base javascript behind it anyway. If I do need more helpers, or I'm making something bigger, I'm already using webpack and npm and probably underscore or lodash, with the helper functions built in because the project is big and needs more support stuff.

Furthermore, the stuff I've been working with uses .forEach and .map and the immutable JS library for working with arrays. I almost never see for loops anymore. It's not so much about verbosity, it's also because underscore and lodash work better with React/Angular and can be used with Node, and javascript has native stuff you can use that aren't for loops as well. Also jQuery is slower than using native scripts, if you need a performance reason for not using it. These days jQuery is too big for small projects, and too narrow and bad for big projects that use node. I don't see where it fits in well anymore.

code:



var things = document.getElementsByClassName('thing');

things.forEach(function (item) {
  doThingstoMyStuff(item);
});

function doThingstoMyStuff(item) {
   //a good place to do stuff that is organized and functional
}

The other problem I have with jQuery is that it does damage to your general javascript knowledge, which closes doors to you when it comes to bigger projects and higher-paying jobs. I started out on jQuery and thought it was great...until I learned more regular JS and kept asking myself why I needed it at at all. Thus far, the last couple of years of my career, I haven't needed it and I'm glad its gone.

Shayl fucked around with this message at 20:26 on Mar 10, 2017

# ? Mar 10, 2017 19:59

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

«‹›362 »