The Web Design & Development Megathread

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

«‹›362 »

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.

LLSix posted:

code:

//helper function to return all the elements that permit user input
//will be used to automatically set focus on the first user input element for accessibility reasons 
function DF_getUserInputElements( source )
{
    return source.querySelectorAll(' \
    button:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , input:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , select:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , textarea:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , [tabindex]:not([tabindex="-1"]):not([disabled]):not([readonly]):not([hidden]):not([type="hidden"])');
}

It really annoys me that I have to copy attribute filters to every element type I want querySelectorAll to return. There should be a way to tell vanilla Javascript to just use the same filter for all elements. Something like

code:

	return source.querySelectorAll(' \
		button, input, select, textarea, [tabindex]:not([tabindex="-1"], \
 		{ :not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) }');

you're almost certainly better off putting the autofocus attribute on the first element that passes this test when the element is being created rather than querying the dom afterwards.

# ? Oct 26, 2018 12:55

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 23:42

LLSix: Jan 20, 2010; The real power behind countless overlords

What are some good tips or tricks for debugging focus issues? I've been running into them a lot with this company and they take forever to debug because I don't know any good way to tell what assigned focus last or even what has it sometimes.

Bruegels Fuckbooks posted:

you're almost certainly better off putting the autofocus attribute on the first element that passes this test when the element is being created rather than querying the dom afterwards.

I agree with you 100% and that was my initial solution. Boss asked me to find a way to assign focus that would let him save 5 seconds by not doing it the sensible way on every page. Turns out we do something similar in at least 4 other places hooked up to the load event so this isn't really stable. Going to make another attempt to talk him out of this.

Tei posted:

Maybe what is horrible of the original code is that is written by a human, and is not machine generated code. Look like a regex.
What if you don't have to look at it, because you hide it behind a string concatenation?, it may even make updating it easier if is changed often.

That's a clever idea. Hopefully the interpreter is smart enough to realize its really a constant and cache it instead of concatenating every time.

# ? Oct 26, 2018 21:23

Tei: Feb 19, 2011

LLSix posted:

What are some good tips or tricks for debugging focus issues? I've been running into them a lot with this company and they take forever to debug because I don't know any good way to tell what assigned focus last or even what has it sometimes.

I have no good ideas about this. Part of the problem is if you are using a inspector, the inspector itself may be stealing the focus. Hilariously getting in the way of debugging how the focus change.

What I do when I have to debug "invisible" poo poo is to turn it invisible. Like using a class to hide/show elements. Applying to this would be to have a onfocus event that add a class, and a onblur event that remove the class. Could be easier to debug focus problems if you see where the class is applied. If the focus change too fast, you can make the onblur method print something to console, or be "lazy".

Nobody say you should use chrome for this. Maybe a different browser have a different behavior. I heard even IE have a inspector these days, maybe debugging this precisally could be easier in a different browser than the one you are using.

I am a idiot, so take my words with a grain of salt.

# ? Oct 26, 2018 22:01

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

You could use a document.activeElement call... have it write to the console.

Sergeant Rock fucked around with this message at 14:56 on Oct 28, 2018

# ? Oct 28, 2018 14:36

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.

Tei posted:

I have no good ideas about this. Part of the problem is if you are using a inspector, the inspector itself may be stealing the focus. Hilariously getting in the way of debugging how the focus change.

You can remote debug using Chrome.

https://blog.chromium.org/2011/05/remote-debugging-with-chrome-developer.html

If you have computer 2 doing the debugging, you can leave the cursor in the right place on computer 1 and not trigger mouseleave etc. when trying to debug.

Usually I don't have to go to that extent though - what I like to do when dealing with issues like those is setting tracepoints (breakpoints that don't break, just log). In Chrome, what I'll do is I'll set a conditional breakpoint that just has "console.log(xxx)" in it - the breakpoint won't ever hit, but it'll log to the console, and I'll just throw those in my event handlers until I can trace out what's going on.

# ? Oct 28, 2018 15:05

22 Eargesplitten: Oct 10, 2010

Curiosity: is there a reason why you can't do a percentage size for box-shadows? I generally try not to use absolute pixel values for positioning stuff since resolutions vary so wildly, but it was showing as an invalid element value (or whatever Firefox says) when I tried that. Maybe I just need to dehumanize myself and face to media query.

If necessary I can post up the code I was using so you can tell me why I'm a dumbass, but I didn't save it because it didn't work so I would have to write it up again.

# ? Oct 28, 2018 16:59

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.

22 Eargesplitten posted:

Curiosity: is there a reason why you can't do a percentage size for box-shadows? I generally try not to use absolute pixel values for positioning stuff since resolutions vary so wildly, but it was showing as an invalid element value (or whatever Firefox says) when I tried that. Maybe I just need to dehumanize myself and face to media query.

If necessary I can post up the code I was using so you can tell me why I'm a dumbass, but I didn't save it because it didn't work so I would have to write it up again.

You can't define percentage positioning for the box shadow in css3. If I had to guess, it's because it's not obvious whether offset of the shadow should be relative to the document or the element, so they did neither.

However, you can define the offsets using rem/em instead of px and that will make the offset/radius relative to the font size instead of being a fixed pixel width.

# ? Oct 28, 2018 18:00

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

I work a lot on an SEO company's platform, and they install Wordpress and give me FTP access to website.companydevelopmentserver.com so I can go to work making pretty websites for them. I've kind of assumed that anything like node.js is out of the question, every time I see a hot piece of web tech I want to try and it starts with "installation is easy! Just type npm install blahblahblah /r into your command line!" I figure I can't do it. Am I correct in that assumption? If I can, what would be the process for that?

The reason I'm asking is I tried using LESS for some simple variables, using less.js to compile it client-side since I don't know how to do it server-side (or even if I can). It works, but it has the terrible side effect of taking half a second to load, during which the site flashes its unstyled HTML. I'd love to use SASS or LESS, but unless I can compile server-side it's not going to work.

Also, I'm sure that FTP isn't the best way to interact with files on a server anymore, even if it's quick and easy and I'm comfortable with it. I open Filezilla, navigate to the folder, right click, and edit the file. Then when I hit save it asks if I want to upload. Is there something else I should be using?

# ? Oct 30, 2018 16:50

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

LifeLynx posted:

I work a lot on an SEO company's platform, and they install Wordpress and give me FTP access to website.companydevelopmentserver.com so I can go to work making pretty websites for them. I've kind of assumed that anything like node.js is out of the question, every time I see a hot piece of web tech I want to try and it starts with "installation is easy! Just type npm install blahblahblah /r into your command line!" I figure I can't do it. Am I correct in that assumption? If I can, what would be the process for that?

The reason I'm asking is I tried using LESS for some simple variables, using less.js to compile it client-side since I don't know how to do it server-side (or even if I can). It works, but it has the terrible side effect of taking half a second to load, during which the site flashes its unstyled HTML. I'd love to use SASS or LESS, but unless I can compile server-side it's not going to work.

Also, I'm sure that FTP isn't the best way to interact with files on a server anymore, even if it's quick and easy and I'm comfortable with it. I open Filezilla, navigate to the folder, right click, and edit the file. Then when I hit save it asks if I want to upload. Is there something else I should be using?

Running npm on a production server is a good sign you've done something terribly wrong. You'd compile/build/hate the loving poo poo out of npm/etc locally and upload a bundle generated by whichever build tool you can get working. Probably webpack.

# ? Oct 30, 2018 17:05

Tei: Feb 19, 2011

LifeLynx posted:

Also, I'm sure that FTP isn't the best way to interact with files on a server anymore, even if it's quick and easy and I'm comfortable with it. I open Filezilla, navigate to the folder, right click, and edit the file. Then when I hit save it asks if I want to upload. Is there something else I should be using?

Many servers that let you do SFTP also let you do rsync. With rsync the protocol is smart enough to only upload the changed files. A project with 9000 files and only 10 files changed will upload with rsync in about 3 seconds, but may take one minute+ with FTP.

This thread is a bit better for frontend questions:
https://forums.somethingawful.com/showthread.php?threadid=3571035

# ? Oct 30, 2018 17:12

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

LifeLynx posted:

I work a lot on an SEO company's platform, and they install Wordpress and give me FTP access to website.companydevelopmentserver.com so I can go to work making pretty websites for them. I've kind of assumed that anything like node.js is out of the question, every time I see a hot piece of web tech I want to try and it starts with "installation is easy! Just type npm install blahblahblah /r into your command line!" I figure I can't do it. Am I correct in that assumption? If I can, what would be the process for that?

The reason I'm asking is I tried using LESS for some simple variables, using less.js to compile it client-side since I don't know how to do it server-side (or even if I can). It works, but it has the terrible side effect of taking half a second to load, during which the site flashes its unstyled HTML. I'd love to use SASS or LESS, but unless I can compile server-side it's not going to work.

Also, I'm sure that FTP isn't the best way to interact with files on a server anymore, even if it's quick and easy and I'm comfortable with it. I open Filezilla, navigate to the folder, right click, and edit the file. Then when I hit save it asks if I want to upload. Is there something else I should be using?

Many things to touch on here:

1. Using LESS (or SaSS) is good, but you should pre-transform it and try to avoid using less.js or other client-side options at all costs.

2. The process for doing the above, and using fancy npm packages and so on, as well as not using Filezilla to edit via FTP (please tell me you are using SFTP, not actual FTP!!) is for you to have your own development version of the site locally, possibly running in a virtual server (or Docker, I think that's what the cool kids use these days?) where you do all your work, and then when things are happy there, you can push compile / transformed / whatevered code up to the website.companydevelopmentserver.com box (preferably with rsync instead of (S)FTP. I'd also look into using some sort of source control, even if you can't use it on the dev / production servers.

That said, that is a heap-ton of effort, so you need to decide if setting all that up is worth it.

# ? Oct 30, 2018 17:18

Tei: Feb 19, 2011

About source control.

Source control is like the ability to "save game" in videogames.

Is also a "development diary" that keep track of when, who, why.

Is also a backup of your work on a different computer, so if the one you are using burn, you have another copy from half a hour ago.

It automatically enable cooperative work and teamwork.

Let you render funny videos with gource that some people could enjoy, if you want to go flashy.

If anyone is not using a SC solution, this was the last warning. Do so, is 2018 already.

# ? Oct 30, 2018 17:50

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

Munkeymon posted:

Running npm on a production server is a good sign you've done something terribly wrong. You'd compile/build/hate the loving poo poo out of npm/etc locally and upload a bundle generated by whichever build tool you can get working. Probably webpack.

Ah so this stuff is meant to be run locally and then the final compiled files are uploaded to the webserver?

Tei posted:

Many servers that let you do SFTP also let you do rsync. With rsync the protocol is smart enough to only upload the changed files. A project with 9000 files and only 10 files changed will upload with rsync in about 3 seconds, but may take one minute+ with FTP.

This thread is a bit better for frontend questions:
https://forums.somethingawful.com/showthread.php?threadid=3571035

These are small Wordpress sites, I'm not editing that many files. I didn't know whether to post in this thread, the small Javascript questions (since it was mostly about node.js) or the front end design thread. I assumed the front end thread would be more about graphics, styles, and UI/UX stuff, but we don't have a thread for that, or I can't find it.

Lumpy posted:

Many things to touch on here:

1. Using LESS (or SaSS) is good, but you should pre-transform it and try to avoid using less.js or other client-side options at all costs.

2. The process for doing the above, and using fancy npm packages and so on, as well as not using Filezilla to edit via FTP (please tell me you are using SFTP, not actual FTP!!) is for you to have your own development version of the site locally, possibly running in a virtual server (or Docker, I think that's what the cool kids use these days?) where you do all your work, and then when things are happy there, you can push compile / transformed / whatevered code up to the website.companydevelopmentserver.com box (preferably with rsync instead of (S)FTP. I'd also look into using some sort of source control, even if you can't use it on the dev / production servers.

That said, that is a heap-ton of effort, so you need to decide if setting all that up is worth it.

Yeah pre-transforming it and then uploading it sounds great, but many times I need to go back to a site I've worked on and make some minor CSS tweaks because they want new elements added such as a testimonial section or whatever and it's easier just to keep a plain CSS file on the server.

I'll have to look into rsync.

# ? Oct 30, 2018 17:55

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

LifeLynx posted:

Ah so this stuff is meant to be run locally and then the final compiled files are uploaded to the webserver?

These are small Wordpress sites, I'm not editing that many files. I didn't know whether to post in this thread, the small Javascript questions (since it was mostly about node.js) or the front end design thread. I assumed the front end thread would be more about graphics, styles, and UI/UX stuff, but we don't have a thread for that, or I can't find it.

Yeah pre-transforming it and then uploading it sounds great, but many times I need to go back to a site I've worked on and make some minor CSS tweaks because they want new elements added such as a testimonial section or whatever and it's easier just to keep a plain CSS file on the server.

I'll have to look into rsync.

There are three "web dev" related threads (this one, Modern Front End, and Javascript..) that are all effectively interchangeable now, so don't sweat it.

As for going back and making minor tweaks, that's why you'd keep a local copy of the site and do all your work there. You make your tweak in LESS locally, compile it, then push what changed to the server.

# ? Oct 30, 2018 18:00

Tei: Feb 19, 2011

A comment:

Is strange and amazing how modern development has become so much command line centric.

I mean, I remember developing websites in the 90's involved a lot of desktop apps such as dreamweaver of WSFTP, photoshop.

I don't know the reason, but I can make the theory that is easier to teach newbies commands than tell them to use entire programs. The command line is more conductive to small recipes like "do npm init and then do npm start" that is easier to write and easier to repeat.

It has gone a bit too far because people use now command line for everything, from "uploading" entire servers (!), to precompile resources, even janitor tasks like check the PageSpeed of a page before is uploaded.

I mean, somebody somewhere do this in command line to update production:

quote:

$ gulp upload production

Is kind of crazy the world we live.

The "problem" of the command line is that don't really have a skill ceiling and some hardcore users lose a bit it. Then the node.js ecosystem is not the most stable and some decisions where questionable at best (like all the fun fun with using "node" name for the executable ).
I don't like using things that when they break I can't repair. But in 2018 thats the wrong idea, seems :-I

# ? Oct 30, 2018 18:06

22 Eargesplitten: Oct 10, 2010

Bruegels Fuckbooks posted:

You can't define percentage positioning for the box shadow in css3. If I had to guess, it's because it's not obvious whether offset of the shadow should be relative to the document or the element, so they did neither.

However, you can define the offsets using rem/em instead of px and that will make the offset/radius relative to the font size instead of being a fixed pixel width.

That makes sense. I was thinking that obviously it should be percent of the element, but other people probably think it should obviously be percent of the document, so I see why they would say "gently caress you, you can't do either."

# ? Oct 30, 2018 20:25

The Fool: Oct 16, 2003

Tei posted:

A comment:

Is strange and amazing how modern development has become so much command line centric.

I mean, I remember developing websites in the 90's involved a lot of desktop apps such as dreamweaver of WSFTP, photoshop.

I don't know the reason, but I can make the theory that is easier to teach newbies commands than tell them to use entire programs. The command line is more conductive to small recipes like "do npm init and then do npm start" that is easier to write and easier to repeat.

It has gone a bit too far because people use now command line for everything, from "uploading" entire servers (!), to precompile resources, even janitor tasks like check the PageSpeed of a page before is uploaded.

I mean, somebody somewhere do this in command line to update production:

Is kind of crazy the world we live.

The "problem" of the command line is that don't really have a skill ceiling and some hardcore users lose a bit it. Then the node.js ecosystem is not the most stable and some decisions where questionable at best (like all the fun fun with using "node" name for the executable ).
I don't like using things that when they break I can't repair. But in 2018 thats the wrong idea, seems :-I

CLI's allow for automation and automation is the future.

# ? Oct 30, 2018 20:30

kedo: Nov 27, 2007

The Fool posted:

CLI's allow for automation and automation is the future.

Also in the late 90s and early 2000s we were still deep into our "give everything a GUI, even things that don't need it!" phase which, I state without any sort of evidence, was a response to novice computer users' lack of understanding and hatred of DOS. No one should have to look at code, not even programmers who write code! The command line is a thing of the past! :downs:

I started playing with websites around that time and I can clearly remember the epiphany I had after spending a fruitless hour futzing with a table in Dreamweaver only to switch over to code view where I was able to solve my problem in less than a minute (Dreamweaver just loooooved creating malformed HTML back then). I think about doing stuff via the command line in the same way ��who would have thought the old way was actually the best way all along?

kedo fucked around with this message at 21:20 on Oct 30, 2018

# ? Oct 30, 2018 21:18

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

22 Eargesplitten posted:

That makes sense. I was thinking that obviously it should be percent of the element, but other people probably think it should obviously be percent of the document, so I see why they would say "gently caress you, you can't do either."

Hold on - how does basing it on document height make any sense?

# ? Oct 30, 2018 21:21

kedo: Nov 27, 2007

Munkeymon posted:

Hold on - how does basing it on document height make any sense?

Hardly any of the percents in CSS make any sense. Why are padding-bottom and padding-top percents based on an element's width?

Because �\_(ツ)_/�

# ? Oct 30, 2018 21:26

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.

kedo posted:

Hardly any of the percents in CSS make any sense. Why are padding-bottom and padding-top percents based on an element's width?

Because �\_(ツ)_/�

Also you run into situations like "what if the element is translated or rotated, etc.". It's insanely complicated what you can do with css 3 if you start considering edge cases.

# ? Oct 30, 2018 23:26

Tei: Feb 19, 2011

modern CSS is fueled by magic and distilled talent

https://github.com/cyanharlow/purecss-francine

# ? Oct 30, 2018 23:32

The Fool: Oct 16, 2003

Inspecting francine in your browsers dev tools is eye opening.

# ? Oct 30, 2018 23:34

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

I want to use SASS more for my web dev projects, but CRA recommends not using it because of how it composes together different CSS files. Should I just not use CRA for starting my apps out? Or should I just try to incorporate SASS anyway despite their recommendation not to do so?

# ? Oct 31, 2018 00:11

22 Eargesplitten: Oct 10, 2010

Munkeymon posted:

Hold on - how does basing it on document height make any sense?

It doesn't to me, but I'm one (person who barely even qualifies as an) amateur.

# ? Oct 31, 2018 02:53

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.

22 Eargesplitten posted:

It doesn't to me, but I'm one (person who barely even qualifies as an) amateur.

Let me try to explain what I mean.

So you have a shadow offset, right. Let's consider three cases:

Let's say it's relative to the offset of the element from its container (I imagine you're thinking of offset as an X, Y value). This would mean that translating a div would move its shadow in wacky ways. That's not what people would expect.

Ok, so let's make the shadow offset relative to the width/height of the div (e.g. 1% of the width of the element). That'd still do weird poo poo - say you scale down the div horizontally, then the shadow gets smaller. That's not right.

Now if you think about it, generally, if you have drop shadow on a page, you probably want the shadow to come from the same direction on all elements - defining the shadow so that there is a fixed offset and shadow width that propagates to all elements makes sense if you want your UI consistent - otherwise, your shadows would just look hosed, as people generally expect shadows to come from a certain direction. Since the shadow is a property of an element though, you can't have it directly refer to other elements - so obviously, you'd put the shadow at say the root and have it propagate to wherever it needs to go. So it shouldn't be relative to anything, you should just put a fixed style at the top where it needs to go anyway. The relative use case would not work well in the case where the style is in the root for the above reasons.

# ? Oct 31, 2018 05:31

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

That�s why there should be a document light-source property that takes angles, intensity, and color, and then elements z-index should be used to calculate the shadow for each.

Happy Halloween!!!

# ? Oct 31, 2018 12:33

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

Lumpy posted:

That�s why there should be a document light-source property that takes angles, intensity, and color, and then elements z-index should be used to calculate the shadow for each.

Happy Halloween!!!

I mean, we can already transform things in 3D and CSS is full of crap that makes less sense, so why not?

# ? Oct 31, 2018 14:35

my bony fealty: Oct 1, 2008

Love Stole the Day posted:

I want to use SASS more for my web dev projects, but CRA recommends not using it because of how it composes together different CSS files. Should I just not use CRA for starting my apps out? Or should I just try to incorporate SASS anyway despite their recommendation not to do so?

Use styled-components. Embrace CSS-in-JS.

The syntax is literally just CSS, plus Sass-style nesting. Once you understand how theming work and how to pass prop variants in you will see why it's so well suited to React.

There's plenty of flexibility too, you can make every little thing a styled component or rely on classes or use the cascade or any mix of it you like. You can put your styled components in the same file as your actual component, or break them out, or both. You could probably make all of your styled components totally separate from your CRA project and publish them as an npm module if you really wanted to.

If you are going to develop with a component-based system then it makes sense to use component-based styling, no? Version 4 of styled-components also does make global styling very easy (and component-based) which is nice for setting your baselines/resets.

There are several other CSS-in-JS libraries that others prefer but I think styled-components is the gold standard. Not having to use camel case for properties (again the syntax is identical to CSS) is nice.

If you really want to use Sass then CRA 2.0 supports it out of the box now. I think you can just create .scss files and it'll compile them. But you will probably run into issues with conflicting styles pretty quickly as it's not designed for a component-based approach.

Lotta time and words have been wasted arguing about the merits of CSS-in-JS and if it violates ~separation of concerns~ or whatever, don't worry about any of that. Just try it out and see if you like it. For me styled-components has become so natural that I can't think of doing a React project without it. And I love CSS, used Sass and then Stylus for years before I got into React, I ain't one of those CSS-hater JS devs.

On the topic of mindblowing things done with CSS -
here is an adventure game made with only CSS and HTML

my bony fealty fucked around with this message at 14:48 on Oct 31, 2018

# ? Oct 31, 2018 14:44

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

Love Stole the Day posted:

I want to use SASS more for my web dev projects, but CRA recommends not using it because of how it composes together different CSS files. Should I just not use CRA for starting my apps out? Or should I just try to incorporate SASS anyway despite their recommendation not to do so?

I keep a .scss file in each component which imports variables and one mixin from a "master" scss theme file. As part of my watch / build processes I have "watch-css" and "build-css" stage that runs first that converts all those individual .scss files to individual .css files, and my components only import those built .css files. This may be what the new Create React App does, but I'm using one from about a year ago and I had to add that stuff manually.

So my component directories look like this:

code:

SomeComponent/
 -- style.scss // I create / edit this
 -- style.css // generated automagically from above
 -- index.js // has 'import './style.css' in it

So there's no composing together files since each SCSS is component specific, and my React components don't actually import the .scss files.

# ? Oct 31, 2018 15:15

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

my bony fealty posted:

Thank you for that! However, my reason for wanting to use SASS is because I've been asked in interviews if I have web app projects specifically demonstrating SASS experience on my Github to back up what I say on my resume. If my reason for asking was just to make my own web apps for their own sake or for starting my own business then I would agree that your advice is great, though, and just use something else other than SASS because it wouldn't be convenient for CRA.

I have not been asked about nor have seen the alternatives in any job interview or job requirements description, so even though it'd make more sense realistically I'm sort of economically incentivized to try to push this round peg through that square hole anyway.

# ? Nov 1, 2018 01:00

my bony fealty: Oct 1, 2008

Love Stole the Day posted:

Thank you for that! However, my reason for wanting to use SASS is because I've been asked in interviews if I have web app projects specifically demonstrating SASS experience on my Github to back up what I say on my resume. If my reason for asking was just to make my own web apps for their own sake or for starting my own business then I would agree that your advice is great, though, and just use something else other than SASS because it wouldn't be convenient for CRA.

I have not been asked about nor have seen the alternatives in any job interview or job requirements description, so even though it'd make more sense realistically I'm sort of economically incentivized to try to push this round peg through that square hole anyway.

Ah gotcha! Lumpy's advice is great to follow then. I've inherited a few sites that were made with CRA and use Sass and have the same structure and they're pretty easy to work with. Feels a bit like how Angular 2+ projects are scaffolded out from the cli.

The biggest issue I've had is when it's a Redux project too, keeping track of all of the different files is just kind of a nightmare. Which is true with Redux no matter what styling solution you're using, though co-locating styles in the component files makes it significantly better (though your files get to be quite long).

If I were in that interview I would bring up the advantages of switching to CSS-in-JS and it's really easy with styled-components (you can copy paste pretty much all the css!) :v:

# ? Nov 1, 2018 22:07

22 Eargesplitten: Oct 10, 2010

Maybe I'm just terrible at googling this stuff still, but is there a way to shrink a grid item's background color to fit the contents of the element? I've got a grid item with text, and I want to shrink the background color to only be behind the text itself. I know I could use height to override it within the item's CSS class, but I'd rather have it automatic so I don't have to do trial and error to get it to fit every time I make a change.

# ? Nov 2, 2018 17:34

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

22 Eargesplitten posted:

Maybe I'm just terrible at googling this stuff still, but is there a way to shrink a grid item's background color to fit the contents of the element? I've got a grid item with text, and I want to shrink the background color to only be behind the text itself. I know I could use height to override it within the item's CSS class, but I'd rather have it automatic so I don't have to do trial and error to get it to fit every time I make a change.

put the text in a wrapper element with minimal padding, change the background of that.

# ? Nov 2, 2018 18:05

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Lumpy posted:

put the text in a wrapper element with minimal padding, change the background of that.

Is there any problem that adding another container can't solve?

# ? Nov 3, 2018 03:18

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

Raskolnikov2089 posted:

Is there any problem that adding another container can't solve?

Yes, there is. Then you need to step up and tackle the problem in a more rigorous manner: add two containers.

When all you have is CSS, everything looks like a DIV.

# ? Nov 3, 2018 05:26

Analytic Engine: May 18, 2009; not the analytical engine

return <div className={'h2'}>My Header</div>:

# ? Nov 3, 2018 05:42

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

I've been developing sites on a shared hosting platform, but it just popped in my head that it's an inefficient way of doing things, so I looked into alternatives. I want to set up a small server where I can develop some smaller Wordpress sites without the need to FTP into anything, and I think the best way might be to use something like Wampserver or Bitnami. I want to install it on my laptop, but what's the best way to access it on my desktop as well? Is Bitnami the better solution if I'm looking to use it exclusively to develop Wordpress sites?

Am I thinking about this the right way?

# ? Nov 4, 2018 04:15