The Web Design & Development Megathread

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

«‹›361 »

IronDoge: Nov 6, 2008

Digital Ocean has nice VPSs available that have pre-built packages with PHPMyAdmin on it if you want. $5/month for the smallest size. If you run into any trouble they have a whole database of help articles on how to setup servers.

# ? Feb 23, 2018 15:48

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 00:07

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

ufarn posted:

Is exporting a phpMyAdmin fairly straightforward for this? I don't really work with PHP that much beside self-hosted stuff.

It comes with phpmyadmin and as many mariadb instances as you like. I never work with php so I can't be much help to you with your question, try their support system

# ? Feb 23, 2018 15:56

Furism: Feb 21, 2006; Live long and headbang

ufarn posted:

For some reason, my old PHP host hiked my prices to double what it used to be.

What's a good, cheap host for a micro site that only I use which just needs a few MB of space and a PHP project? Easy SSL setup would be a plus.

OVH.com (French company, many datacenters all over the world) has got VPSs starting at like $3/month (unlimited bandwidth).

# ? Feb 24, 2018 21:42

simcole: Sep 13, 2003; PATHETIC STALKER

I have a margin/padding question I'm stuck on. I'm giving a friend a free Wordpress site to work on, and it went up in 2 hours. I can't for the life of me get the navigation menu to not block the background logo when it's in responsive mode. Here is the site http://designtemp.colemanworld.net

I'm stumped and I'm sure someone can look at this and instantly show me how I'm dumb. Thank you.

# ? Feb 26, 2018 13:02

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

simcole posted:

I have a margin/padding question I'm stuck on. I'm giving a friend a free Wordpress site to work on, and it went up in 2 hours. I can't for the life of me get the navigation menu to not block the background logo when it's in responsive mode. Here is the site http://designtemp.colemanworld.net

I'm stumped and I'm sure someone can look at this and instantly show me how I'm dumb. Thank you.

@media (max-width: 000px){
header{
margin-top: 2em;
}
}

Change values to match your liking.

# ? Feb 26, 2018 13:05

simcole: Sep 13, 2003; PATHETIC STALKER

Grump posted:

@media (max-width: 000px){
header{
margin-top: 2em;
}
}

Change values to match your liking.

Close but no cigar. It's a body background image and I can't seem to even change it to make it work. I'm trying

@media (max-width: 767px){
body.custom-background{
margin-top: 2em;
}
}(no dice)

EDIT: But I think I got it:
@media (max-width: 767px){
body.custom-background{
background-position: 0px 60px;
}
}

simcole fucked around with this message at 13:55 on Feb 26, 2018

# ? Feb 26, 2018 13:46

Tei: Feb 19, 2011

What is the good practices or rules about friendly urls?

If I have a contact form in a website, the url can be

coolsite.com/contact
or
coolsite.com/contact/
or
support both urls (I don't think this one is a good idea).

when end urls in "/" and when withouth it?

# ? Feb 27, 2018 13:27

spiritual bypass: Feb 19, 2008; Grimey Drawer

Whatever you feel like, really

# ? Feb 27, 2018 13:43

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

It feels like every web framework I've ever used handles a trailing slash in urls differently, it's odd because there really can only be three different ways of handling it but somehow they are all different. I pretend it isn't an issue.

# ? Feb 27, 2018 15:07

Capri Sun Tzu: Oct 24, 2017; by Reene

Tei posted:

What is the good practices or rules about friendly urls?

If I have a contact form in a website, the url can be

coolsite.com/contact
or
coolsite.com/contact/
or
support both urls (I don't think this one is a good idea).

when end urls in "/" and when withouth it?

As a user, I would absolutely expect those two URL's to point to the same endpoint if I typed them into a browser.

# ? Feb 27, 2018 15:31

porksmash: Sep 30, 2008

Capri Sun Tzu posted:

As a user, I would absolutely expect those two URL's to point to the same endpoint if I typed them into a browser.

Absolutely. But the as the dev you should pick trailing slash or not and redirect to the one you picked.

# ? Feb 27, 2018 16:37

Tei: Feb 19, 2011

Capri Sun Tzu posted:

As a user, I would absolutely expect those two URL's to point to the same endpoint if I typed them into a browser.

This is a okay thing to do and one I could do, even include a canonincal header to help poor robots visiting the site.

Thanks everyone for your feedback.

# ? Feb 27, 2018 17:50

FateFree: Nov 14, 2003

I'm working on a very simple layout and I'd appreciate any advice. I have a top header, and the rest of the page underneath is a left side nav and a fluid content section to the right. I was able to create it fine with GridLayouts, but then I realized I wanted to have the top header and left nav fixed so only the content is fluid and scrollable. As far as I understand once absolute positioning comes into play it may not make sense to use GridLayout anymore. Can anyone recommend the best solution for this?

Here is a pic in ascii art:

[------------Header--------]
[--Side--]---Content----]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]

Here is the html layout in a fiddle, if that helps: http://jsfiddle.net/kFBuD/2064/

# ? Feb 27, 2018 19:51

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

FateFree posted:

I'm working on a very simple layout and I'd appreciate any advice. I have a top header, and the rest of the page underneath is a left side nav and a fluid content section to the right. I was able to create it fine with GridLayouts, but then I realized I wanted to have the top header and left nav fixed so only the content is fluid and scrollable. As far as I understand once absolute positioning comes into play it may not make sense to use GridLayout anymore. Can anyone recommend the best solution for this?

Here is a pic in ascii art:

[------------Header--------]
[--Side--]---Content----]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]

Here is the html layout in a fiddle, if that helps: http://jsfiddle.net/kFBuD/2064/

Well, there are many ways to do this easily. One is make the body 100vh and 100vw, then flex the container for the sidebar / content, giving the sidebar a fixed width, then overflow y auto the content. On phone on a bus or I'd fiddle it for you.

# ? Feb 27, 2018 20:14

FateFree: Nov 14, 2003

Thanks for the suggestion. I'll play around with it - Its the fact that there are so many ways that I always get paralyzed and I always end up giving up because I assume there is a better solution out there..welcome to web dev I guess.

Edit: Well I did what any sane man would do, found someone else's solution: https://stackoverflow.com/questions/33514047/flexbox-holy-grail-layout-fixed-header-fixed-left-nav-fluid-content-area-fix

FateFree fucked around with this message at 22:52 on Feb 27, 2018

# ? Feb 27, 2018 20:57

Capri Sun Tzu: Oct 24, 2017; by Reene

FateFree posted:

I'm working on a very simple layout and I'd appreciate any advice. I have a top header, and the rest of the page underneath is a left side nav and a fluid content section to the right. I was able to create it fine with GridLayouts, but then I realized I wanted to have the top header and left nav fixed so only the content is fluid and scrollable. As far as I understand once absolute positioning comes into play it may not make sense to use GridLayout anymore. Can anyone recommend the best solution for this?

Here is a pic in ascii art:

[------------Header--------]
[--Side--]---Content----]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]
[-----------]--------------------]

Here is the html layout in a fiddle, if that helps: http://jsfiddle.net/kFBuD/2064/

just use iframes :downs:

# ? Feb 27, 2018 23:01

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Man just use float. Most of the new CSS attributes are developed by people who don't know what they are doing.

code:

#header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 50px;
}
#main {
    position: relative;
    top: 50px;
}
#main #sidebar {
    float: left;
    width: 200px;
}
#main #content {
    // padding?
    padding: 50px;
}

# ? Feb 28, 2018 01:10

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

That's fine until you want your sidebar to be full height, at which point you're hacking around with clearfix. Flex fixes a real layout problem.

# ? Feb 28, 2018 03:54

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

Full page table muh man

# ? Feb 28, 2018 03:59

the heat goes wrong: Dec 31, 2005; I´m watching you...

Just use flexbox man. While Grid is cool and all, it isn't that supported yet.

# ? Feb 28, 2018 12:09

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

the heat goes wrong posted:

Just use flexbox man. While Grid is cool and all, it isn't that supported yet.

Support is actually pretty good, the main issue is IE of course: https://caniuse.com/#feat=css-grid

# ? Feb 28, 2018 15:52

huhu: Feb 24, 2006

Anyone have any idea why the text on the left side is huge and on the right side it's not? Left side is React, right side is a plain html file. The only thought is that it has something to do with text-size-adjust but I tried copying that to the right window as well with no luck.

https://imgur.com/a/sYd9S

# ? Feb 28, 2018 17:55

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

huhu posted:

Anyone have any idea why the text on the left side is huge and on the right side it's not? Left side is React, right side is a plain html file. The only thought is that it has something to do with text-size-adjust but I tried copying that to the right window as well with no luck.

https://imgur.com/a/sYd9S

Left side also appears to be using Bootstrap. Is there a viewport meta tag in the template you're using?

# ? Feb 28, 2018 18:15

huhu: Feb 24, 2006

Munkeymon posted:

Left side also appears to be using Bootstrap. Is there a viewport meta tag in the template you're using?

This was it! Thanks.

# ? Feb 28, 2018 19:16

darthbob88: Oct 13, 2011; YOSPOS

Font/Glyph problem: I'm trying to use FontAwesome for some icons, but it's not working properly. Even though I've set the font-family for those icons to "font-family: FontAwesome, 'Segoe UI', cursive !important;", the computed style is still showing "Rendered Font- Arial", and not even falling through to the other fonts. See this CodePen. What am I doing wrong?

# ? Feb 28, 2018 20:25

bigmandan: Sep 11, 2001; lol internet; College Slice

darthbob88 posted:

Font/Glyph problem: I'm trying to use FontAwesome for some icons, but it's not working properly. Even though I've set the font-family for those icons to "font-family: FontAwesome, 'Segoe UI', cursive !important;", the computed style is still showing "Rendered Font- Arial", and not even falling through to the other fonts. See this CodePen. What am I doing wrong?

You are using the wrong classes. Should be <i class="fa fa-icon_name_goes_here"></i>

Here is a working version https://codepen.io/anon/pen/gvqPNw

Edit: FontAwesome page has been recently updated for the 5.0 release and the docs are all for 5.0. You are using 4.7 stuff so the docs are here: https://fontawesome.com/v4.7.0

bigmandan fucked around with this message at 21:29 on Feb 28, 2018

# ? Feb 28, 2018 21:25

Omits-Bagels: Feb 13, 2001

I've been slowly redesigning my website but I've gotten some feedback that I need a more cohesive color scheme. I'm having some trouble choosing one and how to implement it. I'd love any ideas: http://thesavvybackpacker.com

# ? Mar 1, 2018 04:13

The Dave: Sep 9, 2003

When you got that feedback, was there a problem tied to it? It's always best to weed out a subjective "I don't like that color" versus a critique "this color stands out in a negative way" or "this color makes it hard to consume the content on the page".

For example, I went here:
https://thesavvybackpacker.com/itinerary-planning-advice-backpacking-europe/

I started reading your headline and then before I even finished it my eyes jumped right to the sidebar block stating "Hello! We're James & Susan" because it is the heaviest element in my viewport.

# ? Mar 1, 2018 04:19

Omits-Bagels: Feb 13, 2001

The Dave posted:

When you got that feedback, was there a problem tied to it? It's always best to weed out a subjective "I don't like that color" versus a critique "this color stands out in a negative way" or "this color makes it hard to consume the content on the page".

For example, I went here:
https://thesavvybackpacker.com/itinerary-planning-advice-backpacking-europe/

I started reading your headline and then before I even finished it my eyes jumped right to the sidebar block stating "Hello! We're James & Susan" because it is the heaviest element in my viewport.

The just said there were too many colors and to pick a more consistent scheme.

And I see what you're saying about my sidebar. It's a tricky balance because I find that my readers really want to know the personality behind the website so I don't want the 'about us" to blend fade too much into the background.

# ? Mar 1, 2018 04:52

MrMoo: Sep 14, 2000

Testing out Polymer 2 and found this image in a bug report, ...

# ? Mar 1, 2018 08:39

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

This is basic stuff, but it's good to be reminded about it every once in awhile:

Including images, CSS, and scripts form third party domains means you must trust those sites completely. You mostly wouldn't think of what CSS can do...

# ? Mar 2, 2018 18:22

Furism: Feb 21, 2006; Live long and headbang

Whoever recommended Semantic UI React in this thread, I love you.

# ? Mar 2, 2018 19:31

Clark Nova: Jul 18, 2004

Thermopyle posted:

This is basic stuff, but it's good to be reminded about it every once in awhile:

Including images, CSS, and scripts form third party domains means you must trust those sites completely. You mostly wouldn't think of what CSS can do...

Always ask yourself whether you�re giving a stranger the ability to put hello.jpg on your webpage.

# ? Mar 2, 2018 19:36

porksmash: Sep 30, 2008

This is exactly why the integrity attribute was added.

# ? Mar 2, 2018 20:56

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

Furism posted:

Whoever recommended Semantic UI React in this thread, I love you.

You are welcome. I've never used it, but I'm glad it worked for you!

# ? Mar 2, 2018 21:12

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

Whether it is Angular/React/Vue what are you doing for SEO purposes? Is it (still) true that crawlers can't read it?

# ? Mar 2, 2018 21:54

The Fool: Oct 16, 2003

The Merkinman posted:

Whether it is Angular/React/Vue what are you doing for SEO purposes? Is it (still) true that crawlers can't read it?

This article talks about it, but basically unless you're doing something stupid, you don't need to worry.

https://medium.freecodecamp.org/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9

# ? Mar 2, 2018 22:06

huhu: Feb 24, 2006

The last thing I learned about responsive design was using things like Bootstrap grid system, and media queries. I just learned about flexbox. Is there anything else I should be reading up on? I'm building out a new site from scratch and think it could be good time to update my knowledge of anything new related to this.

Edit: Another question:
Why is there a gap between the H1 tag and the bottom of the div and how do I remove it? I thought it was related to line height but it doesn't look like it. This has been a tricky thing to Google. https://jsbin.com/jeviyiliya/edit?html,output

huhu fucked around with this message at 05:04 on Mar 4, 2018

# ? Mar 4, 2018 03:18

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

huhu posted:

The last thing I learned about responsive design was using things like Bootstrap grid system, and media queries. I just learned about flexbox. Is there anything else I should be reading up on? I'm building out a new site from scratch and think it could be good time to update my knowledge of anything new related to this.

Edit: Another question:
Why is there a gap between the H1 tag and the bottom of the div and how do I remove it? I thought it was related to line height but it doesn't look like it. This has been a tricky thing to Google. https://jsbin.com/jeviyiliya/edit?html,output

I pretty much just use this cheatsheet whenever I need flex and it's been pretty much my go-to source whenever I write CSS

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

# ? Mar 4, 2018 06:36

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 00:07

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

huhu posted:

The last thing I learned about responsive design was using things like Bootstrap grid system, and media queries. I just learned about flexbox. Is there anything else I should be reading up on? I'm building out a new site from scratch and think it could be good time to update my knowledge of anything new related to this.

Edit: Another question:
Why is there a gap between the H1 tag and the bottom of the div and how do I remove it? I thought it was related to line height but it doesn't look like it. This has been a tricky thing to Google. https://jsbin.com/jeviyiliya/edit?html,output

FWIW, there's no gap in Safari on OS X, but it could be default padding. If you are worrying about pixel perfect, make sure you are setting padding and margin to zero, and also setting box-sizing: border-box on those things.

I cheat and do this at the top of ever CSS file I make:

code:

*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

# ? Mar 4, 2018 15:40

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

«‹›361 »