Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Good Sphere
Jun 16, 2018

I'm trying to make the viewport size (within the 3rd meta tag) the width of a mobile device, preferably mobile phones in portrait. Instead, it's zooming in a bit too far, which makes the canvas go outside the width of the screen and a horizontal scrollbar is added. Anyone know how to fix this?

I'd paste the code here, but I get an error, so it's pastebin instead: https://pastebin.com/JD90G27t

Adbot
ADBOT LOVES YOU

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes
I'm developing locally on a mac with Catalina and MAMP Pro. Lately it's been driving me nuts how slow my locally-hosted site is compared to a remote site running exactly the same site. Here's an example of me refreshing a single page in the CMS

Local site


Remote site


Exactly the same page on exactly the same site takes longer to load locally than it does remotely! Is this just a fact that my machine is crap at serving sites locally, or should it be significantly better than this? Typically I find pages take 5-7 seconds to load. I don't think browser caching is helping at all because pages don't load any faster after I refresh them, in some cases it gets worse.

Full Circle
Feb 20, 2008

It's been a bit since I developed on a mac, but my first step would be checking your resource manager while a page loads, to see if you're bottlenecking on CPU, memory, or disk IO. if none of the above are hitting 100% there's likely a configuration limiting one of the above creating the bottleneck. If MAMP is anything like XAMPP the default profiles allocate very few resources.

HappyHippo
Nov 19, 2003
Do you have an Air Miles Card?

Good Sphere posted:

I'm trying to make the viewport size (within the 3rd meta tag) the width of a mobile device, preferably mobile phones in portrait. Instead, it's zooming in a bit too far, which makes the canvas go outside the width of the screen and a horizontal scrollbar is added. Anyone know how to fix this?

I'd paste the code here, but I get an error, so it's pastebin instead: https://pastebin.com/JD90G27t

I'm pretty sure the viewport tag is fine. But the size of the canvas will (I believe) be taken from the width/height if you don't specify them on the element's style:
code:
            canvas.width  = 500;
            canvas.height = 500;
Try adding
code:
	canvas.style = "width: 100%; height: 100%";
as well.

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes

nexus6 posted:

I'm developing locally on a mac with Catalina and MAMP Pro. Lately it's been driving me nuts how slow my locally-hosted site is compared to a remote site running exactly the same site. Here's an example of me refreshing a single page in the CMS

Local site


Remote site


Exactly the same page on exactly the same site takes longer to load locally than it does remotely! Is this just a fact that my machine is crap at serving sites locally, or should it be significantly better than this? Typically I find pages take 5-7 seconds to load. I don't think browser caching is helping at all because pages don't load any faster after I refresh them, in some cases it gets worse.

Following up my own post here, it seems MAMP had OPcache off by default. Enabling it and restarting servers has made a significant improvement.

If anyone else has similar issues, here's the setting

Tei
Feb 19, 2011

you can also configure httpd with brew -- following a step by step tutorial is not even complicate... and may even work.

If you are a horrible person, and are testing static files, you can even run this on the folder of the website

$ python -m SimpleHTTPServer 80

Good Sphere
Jun 16, 2018

HappyHippo posted:

I'm pretty sure the viewport tag is fine. But the size of the canvas will (I believe) be taken from the width/height if you don't specify them on the element's style:
code:
            canvas.width  = 500;
            canvas.height = 500;
Try adding
code:
	canvas.style = "width: 100%; height: 100%";
as well.

I decided to let it from to the page with, if the page width is equal or below 500px. Works great now with the viewport.

Volguus
Mar 3, 2009

nexus6 posted:

Following up my own post here, it seems MAMP had OPcache off by default. Enabling it and restarting servers has made a significant improvement.

If anyone else has similar issues, here's the setting


But wouldn't you want locally to not have cache enabled? For the times when you make a change to a file and for some reason doesn't get picked up by the engine?

smackfu
Jun 7, 2004

Does em vs px units actually matter in 2021? A lot of the old advice is about how it matters if you make your font bigger, but then all modern browsers just scale everything up including px when you zoom in because no one used em anyway. Maybe it matters if you use a custom browser stylesheet but that’s like 0.001% of the user base?

Tei
Feb 19, 2011

Volguus posted:

But wouldn't you want locally to not have cache enabled? For the times when you make a change to a file and for some reason doesn't get picked up by the engine?

I don't know how is implemented, but I guess it check timestamps and regenerate the cache if the source file is updated since X.

Volguus
Mar 3, 2009

Tei posted:

I don't know how is implemented, but I guess it check timestamps and regenerate the cache if the source file is updated since X.

That's true, and it usually works just fine. Except when it doesn't. Since performance doesn't (or shouldn't) matter locally why worry about it? It's good that you found the culprit to why is locally the system slower than in production, but I don't really see a reason to not revert back that option.

marumaru
May 20, 2013



are there any good, human-readable resources on accessibility? i'm fairly sure our front-end is not exactly compliant

kedo
Nov 27, 2007

marumaru posted:

are there any good, human-readable resources on accessibility? i'm fairly sure our front-end is not exactly compliant

I don't have any good articles or whatnot for you, but Chrome's dev tools comes with an accessibility audit tool built in. It won't catch everything as some of it is hard to check programmatically, but it's good at helping you pluck all the low hanging fruit.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

marumaru posted:

are there any good, human-readable resources on accessibility?

This right here is the absolute perfect sentence about accessibility.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy
The #1 thing you can do for accessibility is to build well structured, semantic HTML in the first place.

Seriously the number of dumbshit issues I've had to fix because the only way of interacting with an element was an onclick handler on a div, or because they used an h3 tag for an input "label", or because they used an anchor tag instead of a button for a non-navigation page action (STOP DOING ALL THESE), or some other non-semantic issue is too damned high.

Aside from that, just spend some hands-on time with accessibility tools like Mac VoiceOver, iOS rotor, or JAWS. It will really help you fix existing issues in your app, get a better sense of what it's like to use those tools and why they exist, boost your empathy for users, and better inform your development process because those principles will be higher in your mind instead of an afterthought. Even just 5 minutes set aside to accessibly interact with whatever new feature you're building as part of the QA process is like gold.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
A game I like to play whenever I work for a new company is turn on voiceover, close your eyes, and start trying to navigate your site with just the keyboard.

Seriously, you'll find a lot of problems just like that.

some easy wins:

1. Focus on modal content when a modal pops
2. Focus on changed content when routing in SPAs
3. Give buttons that are just SVGs aria labels describing what they do
4. Fix divs/spans that should be buttons and links
5. add skipto buttons so users can skip navigation/menu poo poo and get straight to the main content without having to tab a million times

teen phone cutie fucked around with this message at 23:57 on Mar 7, 2021

marumaru
May 20, 2013



Anony Mouse posted:

The #1 thing you can do for accessibility is to build well structured, semantic HTML in the first place.

problem is this is a highly dynamic SPA and poo poo like dropdowns and lists may or may not be present, and i have no idea what that'll look like to a screen reader

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

marumaru posted:

problem is this is a highly dynamic SPA and poo poo like dropdowns and lists may or may not be present, and i have no idea what that'll look like to a screen reader

I usually take advantage of https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to tell the screen reader something is loading and when it's finished loading

frogbs
May 5, 2004
Well well well

Anony Mouse posted:

Aside from that, just spend some hands-on time with accessibility tools like Mac VoiceOver, iOS rotor, or JAWS.

I had to do some accessibility testing recently and couldn’t believe how much a JAWS license cost. Their demo was pretty limited too. I hope they adopt a better licensing model, or people move to something open source like NDVA as the industry standard.

Sergeant Rock
Apr 28, 2002

"... call the expert at kissing and stuff..."
I want to say that 85%+ of the sites I work with as a contractor look like this:
code:
 
<div class="wrapper">
  <div class="container">
    <div class="inner">
      <div class="inner-container">
        <div class="wrapper">
           Content
        </div>
      </div>
    </div>
</div>
And on and on and on. <div>s that do nothing but apply padding, or a margin, or center horizontally, as if it's impossible to apply more than one style to a given element. They're all 'utility' containers that achieve nothing except make the site slower, confuse developers and make it less accessible.

Shaman Tank Spec
Dec 26, 2003

*blep*



I've run into some kind of bizarre scaling issue on a website I'm helping to debug.

This is what the front page is supposed to look like (this is at 1080P using Firefox's dev tools to scale the viewport):



This is what it looks like on my Macbook Pro, and apparently many other laptops, even those with 1080P displays:



It's obviously some kind of scaling issue, but everything seems to be using percentages, the meta tags look to be set up correctly etc. For some reason some laptops are just scaling everything the gently caress up and it's loving up the entire layout to a point where the website is unusable on those systems.

Empress Brosephine
Mar 31, 2012

by Jeffrey of YOSPOS

Sergeant Rock posted:

I want to say that 85%+ of the sites I work with as a contractor look like this:
code:
 
<div class="wrapper">
  <div class="container">
    <div class="inner">
      <div class="inner-container">
        <div class="wrapper">
           Content
        </div>
      </div>
    </div>
</div>
And on and on and on. <div>s that do nothing but apply padding, or a margin, or center horizontally, as if it's impossible to apply more than one style to a given element. They're all 'utility' containers that achieve nothing except make the site slower, confuse developers and make it less accessible.

What should be used instead, span?

kedo
Nov 27, 2007

I don’t think container divs make sites less accessible (at least as far as I’m aware), but I agree some devs go overboard with them. I’ve had to do that on some sites with particularly complex designs and I hate doing it.

fsif
Jul 18, 2003

Empress Brosephine posted:

What should be used instead, span?

It should be using semantic elements (e.g., <main>, <article>, <section>, <aside>, even <h1> and <p>). There are appropriate use cases for <div>s, but you should really use them as more of a last resort. And past that, a single piece of content nested in five layers of <div>s is almost definitely a bad practice, heh.

Something like this is better for screen readers, web crawlers, etc:

pre:
<main>
  <article>
     <h1>Title</h1>
     <p>Lorem ipsum</p>
     <p>Lorem ipsum</p>
  </article>
  <aside>
    <p>Whatever</p>
  </aside>
</main>

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Shaman Tank Spec posted:

I've run into some kind of bizarre scaling issue on a website I'm helping to debug.

This is what the front page is supposed to look like (this is at 1080P using Firefox's dev tools to scale the viewport):



This is what it looks like on my Macbook Pro, and apparently many other laptops, even those with 1080P displays:



It's obviously some kind of scaling issue, but everything seems to be using percentages, the meta tags look to be set up correctly etc. For some reason some laptops are just scaling everything the gently caress up and it's loving up the entire layout to a point where the website is unusable on those systems.

Remove all the viewport meta tags and see what happens. And what do you mean by "1080P" ? That is a Television term, and I'm not sure the context you are using in here. Are you targeting a TV as the display?

lunar detritus
May 6, 2009


fsif posted:

It should be using semantic elements (e.g., <main>, <article>, <section>, <aside>, even <h1> and <p>). There are appropriate use cases for <div>s, but you should really use them as more of a last resort. And past that, a single piece of content nested in five layers of <div>s is almost definitely a bad practice, heh.

Something like this is better for screen readers, web crawlers, etc:

pre:
<main>
  <article>
     <h1>Title</h1>
     <p>Lorem ipsum</p>
     <p>Lorem ipsum</p>
  </article>
  <aside>
    <p>Whatever</p>
  </aside>
</main>

I was looking into this recently and semantic elements are a lie that almost no client uses. They definitely do make things clearer when developing (and parsing if scraping the site) but they are more of a "nice to have" thing. For a basic webpage, as long as you have a hierarchy (h1-h6) and you're following the rules (interactive elements, what elements can be nested inside other) you're good to go. For a webapp it's time to dust off ARIA and pray.

kedo
Nov 27, 2007

Semantic elements have some value in various clients, but I recall reading some article awhile ago that found most developers used them inappropriately (for example, using an <aside> for a sidebar as opposed to an actual aside within an <article>), so most common browsers ignore them and treat a lot of them like divs.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
As long as we're talking Semantics vs the Real World, how about 'cards'? Where it's multiple elements all wrapped in a single link? Super terrible from an accessibility standpoint, but so many places do it anyway.

fsif
Jul 18, 2003

lunar detritus posted:

I was looking into this recently and semantic elements are a lie that almost no client uses. They definitely do make things clearer when developing (and parsing if scraping the site) but they are more of a "nice to have" thing. For a basic webpage, as long as you have a hierarchy (h1-h6) and you're following the rules (interactive elements, what elements can be nested inside other) you're good to go. For a webapp it's time to dust off ARIA and pray.

That says there's no official spec there, but my sense is that people with screen readers still find semantic tags helpful. Most accessibility-focused developers really pound the table for them, anyway.

The reasons not to bother with them feel a bit chicken/egg to me. Like, right, if developers are using them too inconsistently to build much in the way of client features designed around them, discouraging their usage or marking them as a "nice to have" isn't going to help. There will probably always be a fair number of <div>s in any semi-complex website or web app, but I don't think there's much technical overhead in using at least <main>, <nav>, <article>, and <section> tags.

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes

Volguus posted:

That's true, and it usually works just fine. Except when it doesn't. Since performance doesn't (or shouldn't) matter locally why worry about it? It's good that you found the culprit to why is locally the system slower than in production, but I don't really see a reason to not revert back that option.

Mainly because if my local server is slow as hell I can't get as much work done.

Riven
Apr 22, 2002
I dunno if this is the right thread for this but I couldn’t find a better one:

Does anyone have recommendations on spotting users that you’ve previously banned from a service who are trying to sign up under a different account? I just came on as CTO to a 6 person non-profit and the practice I’ve inherited is banning by IP address which is catching way too many false positives.

This must be a solved (or at least solved better than us) problem with how pervasive it is, but I have no expertise in this area so just putting out feelers for what others have done.

go play outside Skyler
Nov 7, 2005


Riven posted:

I dunno if this is the right thread for this but I couldn’t find a better one:

Does anyone have recommendations on spotting users that you’ve previously banned from a service who are trying to sign up under a different account? I just came on as CTO to a 6 person non-profit and the practice I’ve inherited is banning by IP address which is catching way too many false positives.

This must be a solved (or at least solved better than us) problem with how pervasive it is, but I have no expertise in this area so just putting out feelers for what others have done.

That's basically impossible to do reliably technically without extremely sophisticated fingerprinting technologies.

There's things like permacookies that help but it's a never-ending war with browsers patching vulnérabilities that allow these cookies to work.

Comedy option: just set a cookie on the guy's browser. If that cookie is set, simply return an empty page or error message. Unless the guy thinks to clear his cookies or start a Private browsing window (hint: most people won't) there's a good chance that'll stop him for a good while.

go play outside Skyler fucked around with this message at 21:00 on Mar 9, 2021

Impotence
Nov 8, 2010
Lipstick Apathy
If you have a ludicrous amount of money, and I mean ludicrous, "contact us for enterprise pricing", look into something like iesnare or forter. Both effectively work by fingerprinting via browser exploits and abusively exploiting browsers for money. Should be illegal.

Riven
Apr 22, 2002
Yeah I was trying to figure something out that didn’t user evercookie type stuff.

I think we’re going with text verifications. It will add a little more friction to a specific user type that we’re trying to minimize friction on but I think worth it in the end in terms of staff sanity.

I have the opposite of enterprise ludicrous budget lol.

Impotence
Nov 8, 2010
Lipstick Apathy
What kind of category are you if you are comfortable sharing? Are people signing up for referral stuff, new user promo abuse, or is this a troll/harassment thing?

Riven
Apr 22, 2002
We provide free, 1:1, 24/7 tutoring for low income high school students via a web app that puts them in a whiteboard/chat interface with a volunteer tutor.

Volunteers have to jump through hoops to get an account since we’re putting them in contact with minors, but we want student sign up to be as frictionless as possible so a kid who needs help with homework right this instant can just get into a session. They basically just have to confirm they are in a Title I high school by picking the name.

But some teens are trolls, and some are persistent trolls, as I think we’re all aware. So we have a few who know a winning high school/zip code combo (usually because their first sign up was authentic) who now just sign up over and over with fake emails to draw dicks on the whiteboard and cuss out our volunteers.

Empress Brosephine
Mar 31, 2012

by Jeffrey of YOSPOS
Ask the schools for the format their school Ids are in and then make a ID number required to sign up?

Impotence
Nov 8, 2010
Lipstick Apathy
how hard is requiring a school email to sign up?

marumaru
May 20, 2013



Biowarfare posted:

how hard is requiring a school email to sign up?

isn't it illegal (?) for kids under a certain age to have emails

Adbot
ADBOT LOVES YOU

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

marumaru posted:

isn't it illegal (?) for kids under a certain age to have emails

My daughter has a .edu email address given to her and managed by the school. I looked up the Children's Online Privacy Protection Act out of curiosity, and on a quick glance I see things like "child's email address". So I don't think it's illegal for them to have an email, but it might be illegal to collect those email addresses for identifying purposes? Obviously if you can't legally identify a person by their user account creation details, IP address, etc. because they're a minor, it's going to be hard to block them from signing up. Wasn't there talk of a Dick Identifier* that used machine learning could determine if a drawing was a dick and block/censor it? Maybe there's some censorship things worth looking into.

* don't tell me to turn off my monitor

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply