The Web Design & Development Megathread

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

«‹›362 »

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.

This was way back a while ago, but I'm currently using code similar to this and it's working on browsers but not on my iPhone with Safari. On a mobile device it sort of zooms in on the background when you click a button that expands a text box on the same page. Let me know if this would go better in the front-end or JS threads, this is just where I got the solution last time with a static site.

CSS:

code:

html{
  background-image: url("./WebsiteBackground.jpg");
  background-attachment: fixed;
  background-size: cover;
  font-size: 1.75vmin;
}

JS pseudocode:

code:

if button is clicked:
render button and text box
else:
render button

Does the phone maybe think that the whole page is the window? That's the only thing I can think of.

# ? Dec 16, 2018 18:55

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 11:28

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

22 Eargesplitten posted:

This was way back a while ago, but I'm currently using code similar to this and it's working on browsers but not on my iPhone with Safari. On a mobile device it sort of zooms in on the background when you click a button that expands a text box on the same page. Let me know if this would go better in the front-end or JS threads, this is just where I got the solution last time with a static site.

CSS:
code:
html{
  background-image: url("./WebsiteBackground.jpg");
  background-attachment: fixed;
  background-size: cover;
  font-size: 1.75vmin;
}
JS pseudocode:
code:
if button is clicked:
render button and text box
else:
render button
Does the phone maybe think that the whole page is the window? That's the only thing I can think of.

What is your mobile meta stuff? That has a HUGE effect on what mobile safari does.

(i.e. <meta name="viewport" content="width=device-width, initial-scale=1"> )

# ? Dec 16, 2018 19:28

22 Eargesplitten: Oct 10, 2010

Looking at my index file, here's what I've got.

code:

<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">

Could it be the shrink-to-fit part? That was the default loaded by create-react-app.

# ? Dec 16, 2018 19:34

drainpipe: May 17, 2004; AAHHHHHHH!!!!

I'm a fairly competent hobbyist programmer (I've coded in c, go, ocaml, python), but web development is a big hole in my knowledge. I'd like to learn both front and back end stuff. I did some light html/css/javascript over 10 years ago, but I imagine that's probably all out of date. Is there a good resource for learning web development? From looking around, I see Freecodecamp and The Odin Project as some recommended free courses. Anyone here done them, and are they any good?

# ? Dec 17, 2018 02:17

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

drainpipe posted:

I'm a fairly competent hobbyist programmer (I've coded in c, go, ocaml, python), but web development is a big hole in my knowledge. I'd like to learn both front and back end stuff. I did some light html/css/javascript over 10 years ago, but I imagine that's probably all out of date. Is there a good resource for learning web development? From looking around, I see Freecodecamp and The Odin Project as some recommended free courses. Anyone here done them, and are they any good?

Nothing you did 10 years ago is going to be completely useless, but there are exciting developments in old versions of IE dropping off the face of the earth like they deserved, so there are a lot of new things you can do with CSS that you couldn't realistically do before. HTML is... mostly the same? It's essentially the foundation that everything else works on top of, so apart from a few semantic elements in HTML5 that you might not be familiar with, everything works in a very similar fashion.

Very few people use raw Javascript any more, but again, a passing familiarity with the language isn't going to hurt you because a lot of new poo poo is built on top of it.

Backend-wise, if you feel comfortable with Python, I'd recommend playing around with Django. It's really flexible and I haven't found much backend-y stuff that it hasn't been able to handle. If you're just looking for things to play around with, it'd be a good starting place for backend stuff because it can handle quite a variety of things with some add-on packages. The usual mark against it is that it does require a fair bit of competence with coding compared to, for example, loving around with WordPress plugins, but if you feel fairly competent as a programmer, I think it's a great deal more useful and less likely to make you want to curse God and existence itself.

# ? Dec 17, 2018 04:22

Careful Drums: Oct 30, 2007; by FactsAreUseless

imo the biggest things in the world of css in the last decade are flexbox and css grid. You can get a working understanding of them in an afternoon:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/

https://css-tricks.com/snippets/css/complete-guide-grid/
http://cssgridgarden.com/

JavaScript continues to be a clusterfuck of frameworks

# ? Dec 20, 2018 15:59

Cock Sucker: Nov 14, 2018

Anyone know of a good/simple web gallery app I can deploy. Basically just going to have image file name, url, and possibly a date.

# ? Dec 20, 2018 18:02

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Careful Drums posted:

imo the biggest things in the world of css in the last decade are flexbox and css grid. You can get a working understanding of them in an afternoon:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/

https://css-tricks.com/snippets/css/complete-guide-grid/
http://cssgridgarden.com/

JavaScript continues to be a clusterfuck of frameworks

CSS Grid is awesome but I find myself not using it yet due to IE11 issues. Looking forward to when that�s no longer the case.

# ? Dec 20, 2018 19:50

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Speaking of which, how many of you still support IE11 and how long do you intend to do so?

# ? Dec 20, 2018 20:16

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.

Ruggan posted:

Speaking of which, how many of you still support IE11 and how long do you intend to do so?

i still support IE11. we're going to support IE11 essentially until the sun burns out and turns into a crisp black ball. otherwise, how will we run proprietary activex controls? (sigh medical software).

at least it's not IE7. we stopped supporting IE7 like, two years ago.

# ? Dec 20, 2018 20:21

Nybble: Jun 28, 2008; praise chuck, raise heck

We still (kinda) support IE 11 as we have about 5% of our visitors using it, more than Firefox (4%). But we only fix bugs that get reported, it's not part of our target.

Big Data posted:

Anyone know of a good/simple web gallery app I can deploy. Basically just going to have image file name, url, and possibly a date.

Would love to know this too, as I'm looking to host my own photos (fu flicker, facebook)

# ? Dec 20, 2018 20:25

kedo: Nov 27, 2007

I have a client with pretty strict accessibility requirements. The designer has specced an unordered list of short pieces of text, about half of which are links and the rest are not. They have identical visual treatments. Besides being really dumb from a UX perspective, this feels like an accessibility violation but I can't find anything to point to. Does anyone know what part of the WCAG 2.0 guidelines, if any, would apply here?

There are parts that talk about "not only using color" to distinguish links from non-links, but the designer doesn't even want to do that so I'm like :shrug:

over here.

# ? Dec 20, 2018 21:28

duz: Jul 11, 2005; Come on Ilhan, lets go bag us a shitpost

Ruggan posted:

Speaking of which, how many of you still support IE11 and how long do you intend to do so?

Government contractor so plenty of IE11 installs around even on Windows 10 annoyingly enough.
Luckily since this is business software it's not as bad as it could be and we are able to say we won't support anything older than that.

# ? Dec 20, 2018 23:07

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Ruggan posted:

Speaking of which, how many of you still support IE11 and how long do you intend to do so?

Me. Until Im told we can drop IE11 support.

Honestly its not that bad, transpiling and pre-fixing solves most ills, and if its a flex bug you're just missing a height or min-height somewhere.

I do not recommend CSS grid in IE11 though

Raskolnikov2089 fucked around with this message at 05:14 on Dec 21, 2018

# ? Dec 21, 2018 03:21

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

Hey guys have you seen all this cool stuff you can do with CSS custom properties? Oh? IE11? Ok, well I'll remind you in 2037.

# ? Dec 21, 2018 03:32

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

kedo posted:

I have a client with pretty strict accessibility requirements. The designer has specced an unordered list of short pieces of text, about half of which are links and the rest are not. They have identical visual treatments. Besides being really dumb from a UX perspective, this feels like an accessibility violation but I can't find anything to point to. Does anyone know what part of the WCAG 2.0 guidelines, if any, would apply here?

There are parts that talk about "not only using color" to distinguish links from non-links, but the designer doesn't even want to do that so I'm like over here.

That pretty clearly implies there must be some distinction. I mean, if the designer is the kind of person who looks at instructions that say 'more than one' and thinks that means zero is valid then IDK I think they're broken in the head.

# ? Dec 21, 2018 14:40

Tei: Feb 19, 2011; Can't post for 4 days!

We will continue supporting IE11 until it fall below 3% useage, but if it gets less than 10%, the time put in it will be lower.

Chrome also have nasty bugs and stupidities.

After getting hit by the faulty "this is a credit card form" bug on Chrome, I have decided to do this:

code:

$p_text = html_entity_decode($p,ENT_HTML401,"UTF-8");
$out = "";

$chars = preg_split('//u', $p_text, null, PREG_SPLIT_NO_EMPTY);

foreach($chars as $char){
    $out = $out . "<small style='display:none'>&hairsp;</small>".$char;
}

$p = $out;

This break texts like "Date expedition" so becomes D a t e e x p e d i t i o n, so the faulty Chrome programming don't hit.
I do this to labels, and it seems to disable the "this is a credit card form".

If only I had a similar hack to disable autocomplete when chrome decide to ignore webmasters adding autocomplete=off to forms.

Tei fucked around with this message at 15:20 on Dec 21, 2018

# ? Dec 21, 2018 14:48

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

Speaking of chrome bugs, has anyone else had a problem with mailto links not working on chrome for windows? We had one on our site a few weeks back, and it worked on every machine and browser, except chrome on windows. We tried changing chrome://settings/handlers but it didn't seem to work. It seems weird that chrome wouldn't work with something so basic.

# ? Dec 21, 2018 20:45

Aaronicon: Oct 2, 2010; A BLOO BLOO ANYONE I DISAGREE WITH IS A "BAD PERSON" WHO DESERVES TO DIE PLEEEASE DONT FALL ALL OVER YOURSELF WHITEWASHING THEM A BLOO BLOO

Just to get a Chrome bug train going, anyone else had Chrome's incognito mode break a site? The site I'm maintaining uses sessionStorage to persist some values as it bounces around a couple of domains, and Chrome will just randomly clear the storage during a redirect sometimes. Every other browser, in normal or private mode, works fine. It even mostly works in Chrome, except we'll have a run of a few days where it doesn't.

# ? Dec 21, 2018 23:17

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Null of Undefined posted:

Speaking of chrome bugs, has anyone else had a problem with mailto links not working on chrome for windows? We had one on our site a few weeks back, and it worked on every machine and browser, except chrome on windows. We tried changing chrome://settings/handlers but it didn't seem to work. It seems weird that chrome wouldn't work with something so basic.

I believe mailto only works if you have a default mail client set up. At least this was the case when I was loving with a mailto link 6 years ago.

# ? Dec 21, 2018 23:32

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

Raskolnikov2089 posted:

I believe mailto only works if you have a default mail client set up. At least this was the case when I was loving with a mailto link 6 years ago.

It definitely was set up, it would open outlook in all other browsers. It wasn't just my machine either.

# ? Dec 22, 2018 04:11

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

Tei posted:

If only I had a similar hack to disable autocomplete when chrome decide to ignore webmasters adding autocomplete=off to forms.

I ran into this on an address input that chrome would not leave alone, tried off, tried random strings, finally wrote autocomplete="gently caress off google" and it worked so now that lives in prod.

# ? Dec 22, 2018 05:16

Vilgefartz: Apr 29, 2013; Good ideas 4 free; Fun Shoe

Has anyone here had experiencing developing twitch extensions that i can harass for information? I'm trying to get into after finishing Udemys Web Dev Bootcamp and i'm confused as fuqqq.

# ? Dec 22, 2018 12:09

huhu: Feb 24, 2006

I'm currently working on building a blog and I originally decided on using Hugo but I'm realizing that might not have been the best choice. I'd like to be able to post even if I just have my phone with text and image.

I'm now leaning towards doing a WordPress.org installation which connects to Android easily and then I can set it up as an API and write the frontend with React. I think the GUI of WordPress for writing the articles would be an easy win.

Is there a better way to do such things?

# ? Dec 22, 2018 20:21

spiritual bypass: Feb 19, 2008; Grimey Drawer

Basically any CMS will check those boxes. Wordpress ought to do fine, even if I wouldn't recommend it for big projects.

Are there any particular backend systems you're interested in learning? This would be a good opportunity to replace Wordpress with something more interesting, if you have the inclination

# ? Dec 22, 2018 22:46

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

huhu posted:

I'm currently working on building a blog and I originally decided on using Hugo but I'm realizing that might not have been the best choice. I'd like to be able to post even if I just have my phone with text and image.

I'm now leaning towards doing a WordPress.org installation which connects to Android easily and then I can set it up as an API and write the frontend with React. I think the GUI of WordPress for writing the articles would be an easy win.

Is there a better way to do such things?

Have you checked out https://ghost.org/ ?

# ? Dec 22, 2018 23:10

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

huhu posted:

I'm currently working on building a blog and I originally decided on using Hugo but I'm realizing that might not have been the best choice. I'd like to be able to post even if I just have my phone with text and image.

How does that preclude Hugo? As long as whatever you're using for a CMS has webhooks it's easily doable.

# ? Dec 23, 2018 01:58

huhu: Feb 24, 2006

Raskolnikov2089 posted:

How does that preclude Hugo? As long as whatever you're using for a CMS has webhooks it's easily doable.

This sounds like a good idea. Thanks!

# ? Dec 23, 2018 02:26

huhu: Feb 24, 2006

I'm struggling a little bit with Hugo. I want to have images inside my post. This is the structure I'd like to have:

code:

foo_post/
    foo.md
    images/
        img1.jpg
        img2.jpg

From what I've gathered, to use the images dir, the images need to be inserted via the template. But I don't know before I create a post how many images it'll use. From what I've found, to achieve this I need to use another directory, and I've decided on the static dir. So what I've ended up with is:

code:

content/
    posts/
        foo.md
        bar.md
static/
    image/
        foo/
            img1.jpg
            img2.jpg

And I've created the following script:

code:

filename=$(echo "$1" | tr '[:upper:]' '[:lower:]')
filename=$( echo "$filename" | tr ' ' '-')

mkdir "./static/image/$filename"
/usr/local/bin/hugo new "post/$filename.md"

Would this be the best way to do this or is there an easier way I'm not seeing?

# ? Dec 23, 2018 17:38

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Gotta bow out on the Hugo specifics since I've always been more of a Jekyll/Gatsby guy, but if you're still looking for a really good headless CMS, may I recommend Contentful?

The free tier is more than enough for even a lot of commercial customers.

# ? Dec 23, 2018 18:52

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

Raskolnikov2089 posted:

Gotta bow out on the Hugo specifics since I've always been more of a Jekyll/Gatsby guy, but if you're still looking for a really good headless CMS, may I recommend Contentful?

The free tier is more than enough for even a lot of commercial customers.

I'm using Gatsby and Contentful on my current project and boy do I hate it.

Edit: Okay I don't hate it, but it has an issue that we keep hitting because the content marketing team can't help but constantly delete stuff when we tell them not to. When Gatsby tries to pull from contentful, if the graphql has a value or a content type that exists, but isn't being used, it just throws an error like "I dunno man I was looking for a title, but I don't see one, nothing to be done" and we hit it constantly because marketing keeps removing things directly instead of using Optimizely like they said they wanted to. I dunno I guess I don't hate Gatsby and Contentful I hate the marketing team.

Null of Undefined fucked around with this message at 23:24 on Dec 23, 2018

# ? Dec 23, 2018 23:22

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I'm working on a vue-cli based web app that uses a couchdb backend. In development, I've been serving the vue-cli page via the built-in 'yarn serve' command, and having it connect to a locally running couchdb instance.

I'm looking at options for now for hosting. Some considerations: I'm a single dev working on this project on something like an every-other-weekend schedule (full time non-software job, infant). I'm generally bad at learning devops stuff; simple is key. The app is for personal use for the time being, but I'll eventually want it to serve internet strangers so that I can become internet rich and internet famous.

My initial thought is to serve the static html site on gh-pages and to run the couchdb database on a digitalocean droplet. I was unsure whether vue-router would work correctly when served via gh-pages, but I just had a look and it seems to be OK. Is there any reason that this is a bad idea? One strike against this setup longer term is that gh-pages is served over http, so browsers flag my login forms as insecure (despite it being an js call to my (presumably) https served couchdb server).

# ? Dec 28, 2018 01:47

Nybble: Jun 28, 2008; praise chuck, raise heck

Github Pages should have SSL now. You may have to still manually turn it on and check your other included assets, but you should be good to go in general. And as someone who is generally allergic to DevOps stuff, that seems like a good idea. If you don't want to go the DigitalOcean route for setting up your own SSL cert, you could also try Cloudant for hosting CouchDB.

https://help.github.com/articles/securing-your-github-pages-site-with-https/

# ? Dec 28, 2018 02:04

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I had previously been using cloudant for some prototyping work, but they're a proprietary implementation of the couchdb api / replication protocol, and the db itself doesn't support some features of Couchdb that I need (specifically couch_peruser). A good suggestion though, and thanks for the info re: SSL on github. Who knows when I formed the opinion that they weren't capable of that.

# ? Dec 28, 2018 02:53

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Newf posted:

I'm working on a vue-cli based web app that uses a couchdb backend. In development, I've been serving the vue-cli page via the built-in 'yarn serve' command, and having it connect to a locally running couchdb instance.

I'm looking at options for now for hosting. Some considerations: I'm a single dev working on this project on something like an every-other-weekend schedule (full time non-software job, infant). I'm generally bad at learning devops stuff; simple is key. The app is for personal use for the time being, but I'll eventually want it to serve internet strangers so that I can become internet rich and internet famous.

My initial thought is to serve the static html site on gh-pages and to run the couchdb database on a digitalocean droplet. I was unsure whether vue-router would work correctly when served via gh-pages, but I just had a look and it seems to be OK. Is there any reason that this is a bad idea? One strike against this setup longer term is that gh-pages is served over http, so browsers flag my login forms as insecure (despite it being an js call to my (presumably) https served couchdb server).

Just throw it on netlify.

# ? Dec 28, 2018 07:02

Vincent Valentine: Feb 28, 2006; Murdertime

Raskolnikov2089 posted:

Me. Until Im told we can drop IE11 support.

Honestly its not that bad, transpiling and pre-fixing solves most ills, and if its a flex bug you're just missing a height or min-height somewhere.

I do not recommend CSS grid in IE11 though

Someone at my company managed to convince our boss that we can't do IE11 support anymore because we are required to use Macs and Macs won't run internet explorer.

"Can you use one of the old windows laptops?"
"We're not allowed."
"Oh, well, I guess that's that then."

# ? Dec 28, 2018 11:41

ModeSix: Mar 14, 2009

Vincent Valentine posted:

Someone at my company managed to convince our boss that we can't do IE11 support anymore because we are required to use Macs and Macs won't run internet explorer.

"Can you use one of the old windows laptops?"
"We're not allowed."
"Oh, well, I guess that's that then."

Find out who it was and make sure you take them out for lunch several times.

# ? Dec 28, 2018 13:02

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

Vincent Valentine posted:

Someone at my company managed to convince our boss that we can't do IE11 support anymore because we are required to use Macs and Macs won't run internet explorer.

"Can you use one of the old windows laptops?"
"We're not allowed."
"Oh, well, I guess that's that then."

I thankfully convinced my clients that we couldn't do IE11 support by telling them we were gonna charge them more money. Works every time :v:

# ? Dec 28, 2018 20:29

Dominoes: Sep 20, 2007

Hey dudes. Does anyone know what a Post body for JSON is supposed to look like? In Django, I print the request.body as:

Python code:

b'{"name": "My name", "email": "test@test.org", "message": "Nothing to say"}'

Is this correct, or are there extra bits needed? (Assuming 'body' is synonymous with 'payload', which appears to be the case for practical purposes)

but receive the error:

code:

Unsupported Media Type: /api/contact

request.content_type is

code:

text/plain;charset=UTF-8 CTYPE

. Does this mean "Content-Type": "application-json" in the header isn't being sent correctly? I assume this would trigger the above error.

request.content_params: {'charset': 'UTF-8'} CTYPE params]

edit: I think this is the issue; something's not taking on the client-side headers-setting.

Dominoes fucked around with this message at 21:01 on Dec 29, 2018

# ? Dec 29, 2018 20:55

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 11:28

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Dominoes posted:

Hey dudes. Does anyone know what a Post body for JSON is supposed to look like? In Django, I print the request.body as:
Python code:
b'{"name": "My name", "email": "test@test.org", "message": "Nothing to say"}'
Is this correct, or are there extra bits needed? (Assuming 'body' is synonymous with 'payload', which appears to be the case for practical purposes)

but receive the error:
code:
Unsupported Media Type: /api/contact
request.content_type is
code:
text/plain;charset=UTF-8 CTYPE
. Does this mean "Content-Type": "application-json" in the header isn't being sent correctly? I assume this would trigger the above error.

request.content_params: {'charset': 'UTF-8'} CTYPE params]

edit: I think this is the issue; something's not taking on the client-side headers-setting.

Your post body is valid JSON so yeah the issue is the content-type header not being set correctly. it should be application/json, not application-json (assuming you didn't typo that)

# ? Dec 30, 2018 02:50

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

«‹›362 »