The Web Design & Development Megathread

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

«‹›362 »

Null of Undefined: Aug 4, 2010; I have used 41 of 300 characters allowed.

Analytic Engine posted:

Maybe you should sit down for this;

Bootstrap 4 provides h# classes for divs

If you think about it everything in html is either a div or a span by another name anyway :shrug:

# ? Nov 4, 2018 07:56

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 16:16

Tei: Feb 19, 2011; Can't post for 27 hours!

LifeLynx posted:

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?

What I have understood:

you have been doing web design / web programming, uploading to a site with FTP to see how changes work.

you want to install locally, and work from there, or in a computer in the local network, and use ftp.

---

heres some ideas:

- yea, using a remote ftp to test changes and uploading with ftp is about the most inefficient way.
- yea, you can install a webserver in your machine or other machine in your network, and it would be smooter, better if is in your own machine
- yea, you can use a solution to make the website visible on the internet. there are a few systems that create a dynamic subdomain and "export" the site[1]. I don't know any name, but I know they exist. But it may be a solution that create aditional problems.
- if both your laptop and desktop are on the same network, simply using the ip address had to let you check the website from the other machine. but the above system may also work. you just have to find a way to check the IP of the server in the OS
- a third option exist, ... to buy a machine that will always be the server, that is connected to your network, that has linux and silent hardware, and is always on. and you just always connect to this one.

[1] https://en.wikipedia.org/wiki/Dnsmasq

the most simple solution may be the better, install the webserver in the machine you want to develop, and use the ip to connect to it from other machine

hope this help more than confuse :-/

# ? Nov 4, 2018 08:10

kedo: Nov 27, 2007

LifeLynx posted:

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?

It sounds like you're describing Docker.

If I'm the only coder on a project, I tend to do all my work in a Digital Ocean droplet so that I have total control over the server settings, and the fact that it's online means that when I need to share the project with a client for review, I don't have to jump through any hoops to make it accessible to them. For group projects where I'm not the only person coding, I use something like Docker.

kedo fucked around with this message at 14:45 on Nov 4, 2018

# ? Nov 4, 2018 14:41

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

kedo posted:

It sounds like you're describing Docker.

If I'm the only coder on a project, I tend to do all my work in a Digital Ocean droplet so that I have total control over the server settings, and the fact that it's online means that when I need to share the project with a client for review, I don't have to jump through any hoops to make it accessible to them. For group projects where I'm not the only person coding, I use something like Docker.

Digital Ocean seems good. I like the idea having something on my computer, but that makes it harder for me to share it with clients unless I bring my laptop to them physically.

Edit: It seems great, though how do you access files? I was imagining interacting with it the same way as I do in Windows... is it possible to sort of map it as a network drive?

LifeLynx fucked around with this message at 15:30 on Nov 4, 2018

# ? Nov 4, 2018 15:00

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

LifeLynx posted:

Digital Ocean seems good. I like the idea having something on my computer, but that makes it harder for me to share it with clients unless I bring my laptop to them physically.

Edit: It seems great, though how do you access files? I was imagining interacting with it the same way as I do in Windows... is it possible to sort of map it as a network drive?

Develop locally, push to DO (or wherever) for clients to see.

# ? Nov 4, 2018 15:37

my bony fealty: Oct 1, 2008

LifeLynx posted:

Digital Ocean seems good. I like the idea having something on my computer, but that makes it harder for me to share it with clients unless I bring my laptop to them physically.

Edit: It seems great, though how do you access files? I was imagining interacting with it the same way as I do in Windows... is it possible to sort of map it as a network drive?

You will need to SSH into the droplet via command line/terminal or something like Putty. There might be ssh guis out there but idk, it's worth learning how to manage a linux VPS via command line if you really want to get away from shared hosting. DigitalOcean has lots of really great tutorials.

Buy a droplet already provisioned for WordPress; it saves some time, check out DO's WP hosting tutorials.

The workflow you ideally want to get in is develop locally, push to remote repo, pull down updated files to the droplet and restart server if necessary.

And eventually get continuous integration/deployment setup if that's your thing.

vv that's an interesting approach. I think it would drive me crazy to have *every* save get uploaded to SFTP. My commits are generally done when I want to deploy a change so continuous integration has been a godsend.

my bony fealty fucked around with this message at 20:11 on Nov 4, 2018

# ? Nov 4, 2018 16:23

kedo: Nov 27, 2007

If I�m developing solo on a DO droplet I simply use the SFTP plugin for Sublime and tell it to auto-upload every file on save. I SSH in to modify server config and interact with SQL and use Transmit/whatever SFTP program for bulk uploads.

Once a site launches, I switch to a git deployment model, but I find that cumbersome and slow during development.

# ? Nov 4, 2018 17:43

22 Eargesplitten: Oct 10, 2010

This is a weird question, and I'm going to try to frame it so I'm not hitting the x/y problem.

I have an image for my background. That image has certain parts that are more essential than others. I want to make sure that no matter how it's resized it attempts to show the most essential parts. The thing is, thinking ahead for this I had the image made at a loving monstrous size until we could get it as an SVG (not sure that's what needs to happen, but it would be nice with how much resolutions change over time). Something like a 21:10 based off of a normal 16:9 4k monitor's resolution.

If I set it to my monitor's resolution, it works-ish. The image is anchored at the top-left as is default. So if I shrink it horizontally, it chops off the right side. That's fine. If I shrink it vertically it chops off the bottom, which is fine unless you start doing something like 64x9, but nobody does that and if someone tries fullscreening a page across 4 monitors I think they can expect it to look funky. The thing is that I want it to work like that regardless of the resolution or aspect ratio. If I do it at 100 percent of the viewport it squishes if it's not at the image's aspect ratio. If I keep it at its native size it obviously gets way too big. Does anyone have any ideas?

Edit: Here's what I did in JS, tell me why it sucks. I do need to test it with a mobile device simulation. I'm afraid it will still stretch in a portrait mode, I'll probably have to do a media query thing for that.

code:

var background = document.getElementById("Background");
var height = screen.height;
var width = screen.width;
background.style.backgroundSize= width+"px"+" "+height+"px";

Second edit: Dear god it's tiling like a motherfucker in portrait mode. Time to add all the browser-specific poo poo and set no-repeat because I'm an idiot that forgot that.

22 Eargesplitten fucked around with this message at 23:27 on Nov 4, 2018

# ? Nov 4, 2018 22:33

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

22 Eargesplitten posted:

This is a weird question, and I'm going to try to frame it so I'm not hitting the x/y problem.

I have an image for my background. That image has certain parts that are more essential than others. I want to make sure that no matter how it's resized it attempts to show the most essential parts. The thing is, thinking ahead for this I had the image made at a loving monstrous size until we could get it as an SVG (not sure that's what needs to happen, but it would be nice with how much resolutions change over time). Something like a 21:10 based off of a normal 16:9 4k monitor's resolution.

If I set it to my monitor's resolution, it works-ish. The image is anchored at the top-left as is default. So if I shrink it horizontally, it chops off the right side. That's fine. If I shrink it vertically it chops off the bottom, which is fine unless you start doing something like 64x9, but nobody does that and if someone tries fullscreening a page across 4 monitors I think they can expect it to look funky. The thing is that I want it to work like that regardless of the resolution or aspect ratio. If I do it at 100 percent of the viewport it squishes if it's not at the image's aspect ratio. If I keep it at its native size it obviously gets way too big. Does anyone have any ideas?

Edit: Here's what I did in JS, tell me why it sucks. I do need to test it with a mobile device simulation. I'm afraid it will still stretch in a portrait mode, I'll probably have to do a media query thing for that.
code:
var background = document.getElementById("Background");
var height = screen.height;
var width = screen.width;
background.style.backgroundSize= width+"px"+" "+height+"px";
Second edit: Dear god it's tiling like a motherfucker in portrait mode. Time to add all the browser-specific poo poo and set no-repeat because I'm an idiot that forgot that.

https://css-tricks.com/perfect-full-page-background-image/

# ? Nov 5, 2018 02:06

22 Eargesplitten: Oct 10, 2010

If the total height of the elements on the page was less than the height of the monitor it ended up not stretching over the whole screen even with cover. Was that maybe because I wasn�t using the Mozilla specific cover position? Or could that be because I had it on body rather than html?

# ? Nov 5, 2018 16:03

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

22 Eargesplitten posted:

If the total height of the elements on the page was less than the height of the monitor it ended up not stretching over the whole screen even with cover. Was that maybe because I wasn�t using the Mozilla specific cover position? Or could that be because I had it on body rather than html?

The body will never be larger than it needs to be to fit the content automatically. If you want its minimum height to be window height, you have to set that in CSS.

# ? Nov 5, 2018 16:06

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

22 Eargesplitten posted:

If the total height of the elements on the page was less than the height of the monitor it ended up not stretching over the whole screen even with cover. Was that maybe because I wasn�t using the Mozilla specific cover position? Or could that be because I had it on body rather than html?

html always fills the window. body is the size of the content, which may be smaller than that window. That's why they linked article uses html for it.

# ? Nov 5, 2018 16:11

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

Lumpy posted:

html always fills the window. body is the size of the content, which may be smaller than that window. That's why they linked article uses html for it.

<html> always fills width-wise but not height-wise.

code:

/* fill the window */
html {
	min-height: 100%;
}

/* take up all the height available to it */
body {
	height: 100%;
}

For some reason, on Firefox at least, I've noticed that if I use 100vh in the <html> element then it will sometimes overflow and create a scroll bar situation. :shrug:

# ? Nov 5, 2018 17:53

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

Love Stole the Day posted:

<html> always fills width-wise but not height-wise.
code:
/* fill the window */
html {
	min-height: 100%;
}

/* take up all the height available to it */
body {
	height: 100%;
}
For some reason, on Firefox at least, I've noticed that if I use 100vh in the <html> element then it will sometimes overflow and create a scroll bar situation.

If I do this:

HTML code:

<!doctype html>
<html>
<head>
    <title>whut</title>
<style>
html { background-color: red; }
</style>
</head>
<body lang="en">
    <p>poop</p>
</body>
</html>

The entire window is red in every browser I can test on. If you inspect the element, it shows only the content height, but the background will fill the window no matter what. So, you don't need to do any height-setting if you want a full window BG.

# ? Nov 5, 2018 18:02

kedo: Nov 27, 2007

Love Stole the Day posted:

For some reason, on Firefox at least, I've noticed that if I use 100vh in the <html> element then it will sometimes overflow and create a scroll bar situation.

I tend to force a sidebar on all pages. On some browsers you get a weird effect where if one page has a sidebar and another doesn't, the entire content of the page shifts by X pixels to the left on refresh. It's not a huge deal of course, but it's easy to avoid.

# ? Nov 5, 2018 18:09

22 Eargesplitten: Oct 10, 2010

Lumpy posted:

If I do this:
HTML code:
<!doctype html>
<html>
<head>
    <title>whut</title>
<style>
html { background-color: red; }
</style>
</head>
<body lang="en">
    <p>poop</p>
</body>
</html>
The entire window is red in every browser I can test on. If you inspect the element, it shows only the content height, but the background will fill the window no matter what. So, you don't need to do any height-setting if you want a full window BG.

That worked for me in Firefox at least. Now I just have to get the boilerplate in and get some responsive poo poo going, then I can wait for my graphics person to tell me how to make it look less lovely.

E: Using the standard htm5 boilerplate, is there a reason that the scripts in the template index file aren't in the header as async and are in the body instead? I thought that 90% of the time you wanted to load async so that people didn't have to wait for everything to download on slower connections.

22 Eargesplitten fucked around with this message at 19:33 on Nov 6, 2018

# ? Nov 6, 2018 19:16

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Anyone good with srcset and sizes for responsive images?
I don't understand why this is pulling in the 640x640 when the 360x360 should be good enough as calc(82vw / 4) is only ~ 240px.
If it is decreased to calc(81vw / 4) it pulls in the 360, but why?

# ? Nov 6, 2018 20:47

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

The Merkinman posted:

Anyone good with srcset and sizes for responsive images?
I don't understand why this is pulling in the 640x640 when the 360x360 should be good enough as calc(82vw / 4) is only ~ 240px.
If it is decreased to calc(81vw / 4) it pulls in the 360, but why?

Are screen pixels 1:1 with your browser's pixel unit?

# ? Nov 6, 2018 21:32

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

Are screen pixels 1:1 with your browser's pixel unit?

Ah, I went to change my 4K resolution to 1080p, and saw that I was zoomed 150% on the OS level. That explains the discrepancy, thanks.

# ? Nov 6, 2018 21:50

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

Lumpy posted:

If I do this:
HTML code:
<!doctype html>
<html>
<head>
    <title>whut</title>
<style>
html { background-color: red; }
</style>
</head>
<body lang="en">
    <p>poop</p>
</body>
</html>
The entire window is red in every browser I can test on. If you inspect the element, it shows only the content height, but the background will fill the window no matter what. So, you don't need to do any height-setting if you want a full window BG.

Youre right that background color will do that. However if you F12 and highlight the element, its dimensions don't take up the entire window and so if you put a border you'll see that it doesn't really take up the entire window.

Probably this is just some weird quirk.

# ? Nov 7, 2018 17:49

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

Love Stole the Day posted:

Youre right that background color will do that. However if you F12 and highlight the element, its dimensions don't take up the entire window and so if you put a border you'll see that it doesn't really take up the entire window.

Probably this is just some weird quirk.

That's why I said: If you inspect the element, it shows only the content height...

If it's a quirk, It's a quirk that's been in every browser since the late 90s, so it's probably safe.

# ? Nov 7, 2018 18:02

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

Sorry I'm dumb and sleep-posting

# ? Nov 7, 2018 18:17

Tei: Feb 19, 2011; Can't post for 27 hours!

Firefox has a cool tool that let you see block deept in 3D, It make websites look like a weird mayan temple full of deadly traps. Also outline dont change elements size and can be used to debug poo poo, maybe.

# ? Nov 7, 2018 18:21

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

Why is an isomorphic web app called isomorphic? As a math grad, I'm very confused because isomorphic is an important word in higher level math classes but I don't see why they use the word to describe it in this web dev context.

# ? Nov 9, 2018 16:34

Tei: Feb 19, 2011; Can't post for 27 hours!

Love Stole the Day posted:

Why is an isomorphic web app called isomorphic? As a math grad, I'm very confused because isomorphic is an important word in higher level math classes but I don't see why they use the word to describe it in this web dev context.

Never heard of that..
*check google*
..oh, is how some people call apps that use the same programming language in the server and the client. Ok then.

Who pick these names? I think is the marketing department of companies. First the idea is proposed or implemented, and then somebody come and give it a cool name.

Is not worse than "god particle" or "mother cells".

I bet theres a lot of strangeness in computer programming for mathematicians. Programming is more like literature than math.

Tei fucked around with this message at 16:44 on Nov 9, 2018

# ? Nov 9, 2018 16:41

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

Love Stole the Day posted:

Why is an isomorphic web app called isomorphic? As a math grad, I'm very confused because isomorphic is an important word in higher level math classes but I don't see why they use the word to describe it in this web dev context.

Because they were called "Universal", and nerds complained that wasn't "accurate", so some other nerd started calling them "Isomorphic" and the nerds who were complaining said "That sounds cool!" and so it became that and some other nerds said "isomorphic isn't accurate!" and the larger group of nerds said "we're not doing this again" and so it's still that.

# ? Nov 9, 2018 16:53

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

Tei posted:

I bet theres a lot of strangeness in computer programming for mathematicians. Programming is more like literature than math.

Fresh grad me in 2010 called and didn't say anything but instead just made a bunch of angry incoherent screaming noises.

# ? Nov 9, 2018 17:26

22 Eargesplitten: Oct 10, 2010

Idle question: when I see browser engine tags I only ever see webkit, IE, moz, and maybe something for edge but I forget. Does Webkit cover the blink browser engine for stuff like Chromium or do people just generally assume that people using Linux are used to dealing with fallback and weird-looking stuff because it's Linux?

# ? Nov 9, 2018 21:17

The Fool: Oct 16, 2003

22 Eargesplitten posted:

Idle question: when I see browser engine tags I only ever see webkit, IE, moz, and maybe something for edge but I forget. Does Webkit cover the blink browser engine for stuff like Chromium or do people just generally assume that people using Linux are used to dealing with fallback and weird-looking stuff because it's Linux?

an article on the subject

# ? Nov 9, 2018 21:48

Tei: Feb 19, 2011; Can't post for 27 hours!

22 Eargesplitten posted:

Idle question: when I see browser engine tags I only ever see webkit, IE, moz, and maybe something for edge but I forget. Does Webkit cover the blink browser engine for stuff like Chromium or do people just generally assume that people using Linux are used to dealing with fallback and weird-looking stuff because it's Linux?

What the hell are you talking about, in linux we use Chrome (and if we like a different color icon, Chromium) and Firefox. The last versions. Probably many Chrome developers test it on Linux.

And if we want a crappy browser, we can install IE on linux, or on a vmware instance. Microsoft even provide VirtualBox images of all modern IE/Edge browsers for testing purposes. So if you want, you can download Windows 7 / IE 11 for testing purposes.

Tei fucked around with this message at 22:38 on Nov 9, 2018

# ? Nov 9, 2018 22:13

Alligator: Jun 10, 2009; LOCK AND LOAF

Why would this website work this way?

My friend noticed that some of the links on https://macintoshrepository.org weren't working, and we noticed that the software pages have really strange URLs where Os are replaced by Us and Is are replaced by Ns. For example this is supposed to be "toastmount":

https://www.macintoshrepository.org/12766-tuastmuunt

You can put anything after the number and it'll return a 301 that redirects you to the weird URL for that piece of software.

Google has non-replaced URLs indexed so the best I can guess it's some heath robinson-esque way to tell where someone came from without just using the referer header. Otherwise this has me stumped.

# ? Nov 10, 2018 18:09

22 Eargesplitten: Oct 10, 2010

Tei posted:

What the hell are you talking about, in linux we use Chrome (and if we like a different color icon, Chromium) and Firefox. The last versions. Probably many Chrome developers test it on Linux.

And if we want a crappy browser, we can install IE on linux, or on a vmware instance. Microsoft even provide VirtualBox images of all modern IE/Edge browsers for testing purposes. So if you want, you can download Windows 7 / IE 11 for testing purposes.

Huh, weird. Chrome didn't work right when I tried loading it on my pi or VirtualBox CentOS instance. Must have done something wrong, I'm pretty bad with Linux. Chromium is Blink-based, though. The weirdness was more of a joke of how touchy Linux can be if it's not set up just right, although again that could be me being bad at Linux.

Anyway, it was more of a question about how I only ever saw Webkit, Mozilla, IE, and Edge(?) flags.

Apparently I hosed up by doing design for my page aiming at desktops and planning on adding media queries for mobile / low-res devices after that. Am I stuck with that or is there a simple way to reverse-engineer a mobile-first layout? I'm at the point where I mostly need to work on responsiveness for everything to be ready. Then I can do some JS stuff but it's basically functional without that.

# ? Nov 10, 2018 19:55

Tei: Feb 19, 2011; Can't post for 27 hours!

22 Eargesplitten posted:

Huh, weird. Chrome didn't work right when I tried loading it on my pi or VirtualBox CentOS instance. Must have done something wrong, I'm pretty bad with Linux. Chromium is Blink-based, though. The weirdness was more of a joke of how touchy Linux can be if it's not set up just right, although again that could be me being bad at Linux.

Just use Ubuntu the next time. "Linux is hard to install" is not a thing since 1999.

Tei fucked around with this message at 21:10 on Nov 10, 2018

# ? Nov 10, 2018 20:46

22 Eargesplitten: Oct 10, 2010

Installing isn�t the issue. It�s getting everything on there that comes with Windows (obviously some stuff you get that Windows doesn�t have, you know what I mean). It could be because I�m not using Ubuntu, though. I�m mostly just using it for the pi or to learn job skills, though. Difficulty getting stuff working is a learning opportunity.

# ? Nov 10, 2018 21:52

Tei: Feb 19, 2011; Can't post for 27 hours!

22 Eargesplitten posted:

Installing isn�t the issue. It�s getting everything on there that comes with Windows (obviously some stuff you get that Windows doesn�t have, you know what I mean). It could be because I�m not using Ubuntu, though. I�m mostly just using it for the pi or to learn job skills, though. Difficulty getting stuff working is a learning opportunity.

Sounds good to me.

The internet is modeled after the UNIX philosophy, so it pays out to understand the UNIX philosophy to understand why some protocols (like HTTP) are the way they are.

# ? Nov 10, 2018 22:26

22 Eargesplitten: Oct 10, 2010

That makes sense too.

Media query question, although maybe this is a matter of preference: Should I do media queries for each element where it matters, or should I do one media query and place all styles relevant to that condition in there? It seems like the second would be faster, but on the other hand it also seems like unless the query itself is resource-intensive a few dozen "if" equivalents shouldn't take long to load, and it would help with organization. On the other other hand, I could sort them inside the query along the same order as the main versions, comment accordingly, and drop comments under the sections that have a query-based alternate that there's queries for x or y criteria that override the style in question. Now that I write it out, the last seems like the best (if most time-consuming) option.

While I'm at it, how do you size sections for responsiveness? I'm not seeing much with regards to responsive best practices on freeCodeCamp, just showing how to do basic media queries. The issue I'm running into is that even once I shrink the text size, if I narrow the screen enough I'm running the text over the next element after one of my grids.

Another idea I get while writing it out: Should I make the wrapper "main" section of my body a flex container, and make all of the grids that go inside it items for the flexbox? That way they should expand to match the necessary size. It seems kind of weird to do so much nesting, but maybe that's the way to do it. I just know I have read enough people saying "If you're nesting a bunch of flexboxes within your flexboxes, do a grid dummy." These are grids already, though, and they are arrayed in a single dimension.

# ? Nov 10, 2018 23:34

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

22 Eargesplitten posted:

That makes sense too.

Media query question, although maybe this is a matter of preference: Should I do media queries for each element where it matters, or should I do one media query and place all styles relevant to that condition in there? It seems like the second would be faster, but on the other hand it also seems like unless the query itself is resource-intensive a few dozen "if" equivalents shouldn't take long to load, and it would help with organization. On the other other hand, I could sort them inside the query along the same order as the main versions, comment accordingly, and drop comments under the sections that have a query-based alternate that there's queries for x or y criteria that override the style in question. Now that I write it out, the last seems like the best (if most time-consuming) option.

While I'm at it, how do you size sections for responsiveness? I'm not seeing much with regards to responsive best practices on freeCodeCamp, just showing how to do basic media queries. The issue I'm running into is that even once I shrink the text size, if I narrow the screen enough I'm running the text over the next element after one of my grids.

Another idea I get while writing it out: Should I make the wrapper "main" section of my body a flex container, and make all of the grids that go inside it items for the flexbox? That way they should expand to match the necessary size. It seems kind of weird to do so much nesting, but maybe that's the way to do it. I just know I have read enough people saying "If you're nesting a bunch of flexboxes within your flexboxes, do a grid dummy." These are grids already, though, and they are arrayed in a single dimension.

How to choose media query breakpoints:

Load your site. Start making the window smaller (or bigger if you designed for mobile first) and when things look stupid, there's your first breakpoint. Make things look not stupid, then continue making the window smaller (or bigger) and if they start to look stupid again, you need a new breakpoint. Keep doing this until you get down to ~320px wide ( up past1900px)

Please note that you may find ways of making things not look stupid that don't actually require media queries!

# ? Nov 11, 2018 01:03

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

22 Eargesplitten posted:

That makes sense too.

Media query question, although maybe this is a matter of preference: Should I do media queries for each element where it matters, or should I do one media query and place all styles relevant to that condition in there?

If you're doing it by hand then it makes the most sense to do it the second way you said, but if you're using SASS or whatever tools to make it all easier to use, then they prefer to do it the first way.

# ? Nov 11, 2018 01:33

22 Eargesplitten: Oct 10, 2010

Okay, thanks. Currently not using any preprocessors, that's one of the many things I need to learn to do after I get this first one done.

# ? Nov 11, 2018 04:56

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 16:16

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

My other general rule is that computers/browsers (with a few exceptions) are pretty goddamn overpowered for displaying your average website, so if there's a choice between a method that will be easy for you to maintain, and a method that will be slightly more efficient for the computer, it's best to make your life easier and let the browser pick up the slack.

This changes slightly if you're doing server-side stuff, especially if you're expecting large amounts of traffic, but it still applies to a point. Figure out how much it would cost to throw more computational resources at the problem, and compare it to how much it would cost to optimize the problem away to the point more resources are unnecessary, remembering that you may need to make changes in the future and you have to take into account maintainability. Unless you've left some really low-hanging fruit in terms of optimization possibilities, chances are that computational resources are less expensive than developer time.

This isn't to say you should be lazy and give no consideration at all to efficiency, just to remember that the search for efficiency does, itself, have a cost.

# ? Nov 11, 2018 14:56

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

«‹›362 »