The Web Design & Development Megathread

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

«‹›361 »

MrMoo: Sep 14, 2000

I can't be the only dumb rear end ignoring Google warnings about WebComponents v0 disappearing and not knowing what the hell it was. Anyway, it's gone in Chrome 80 aka M80 and whilst looks scary it looks easy to live with.

In my forest of code the webcomponents.js polyfill bundle appears to automagically patch in support lost from the browser, however performance is utterly abysmal. Like multiple seconds staring at a blank page abysmal.

What is awful is getting hold of updates without having to use the garbage NPM system. I failed and setup NPM in a directory and copied out the files. I ended up with these random versions, cannot use Polymer 3.x because it uses ES6 imports, I don't want to rewrite this stuff* to avoid HTML imports. The WebComponents thing is the latest v1 spec branch that similarly uses HTML imports.

code:

webcomponentsjs-1.3.3
polymer-2.8.0

Incredibly minor code fixes as Polymer v2 allows through undefined as a valid value to functions, for whatever reason v1 blocked that.

_{* I have a LitElement version of some things waiting client to pay for changes rather than get it cheap under "maintenance". Polymer v2 and v3 are actually fundamentally broken and I failed trying to upgrade many times before the full codebase. Google realized this and got excited by competing with JSX and thus create LitHtml and LitElement as future recommended direction.}

MrMoo fucked around with this message at 01:10 on Jan 22, 2020

# ? Jan 22, 2020 01:02

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 22:35

Tei: Feb 19, 2011

A million of years ago I made applications using XUL, the xml based language that firefox used to make UI's and that was open to use on the internet

Somewhere theres a Point of sale I made that require Firefox 3.6 (in my defense it was a cool PoS)

These days I would not trust a browser to render a html file

# ? Jan 22, 2020 11:12

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

It's happening, a competitor for node and it's greatest feature is that it eliminates stupid godawful npm. I starred this project a million years ago but it looks like they're aiming for 1.0 at the end of this month.

https://deno.land/

I'm rooting for this project so hard.

# ? Jan 22, 2020 12:02

Sereri: Sep 30, 2008; awwwrigami

I saw parts of a presentation about this and it's apparently made by the guy who came up with node?

Also to me it seems to use npm but via http so I'm guessing it's a different can of worms?

# ? Jan 22, 2020 13:07

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

In my head people will stop using so much stupid poo poo from npm. But that's probably not realistic, there will need to be some kind of package management bolted on later. The goal from the look of things is that you'll have packages you want to use hosted somewhere on your own server.

Whatever happens nothing is worse than npm.

# ? Jan 22, 2020 13:13

marumaru: May 20, 2013

Nolgthorn posted:

It's happening, a competitor for node and it's greatest feature is that it eliminates stupid godawful npm. I starred this project a million years ago but it looks like they're aiming for 1.0 at the end of this month.

https://deno.land/

I'm rooting for this project so hard.

yeah, i've been following it for a while, super excited. typescript out of the box!

e: omg i didnt know it had a "std lib" until now. prettier is part of it. this is huge!

marumaru fucked around with this message at 13:36 on Jan 22, 2020

# ? Jan 22, 2020 13:30

Tei: Feb 19, 2011

Reuse code bad?

# ? Jan 22, 2020 13:39

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

Code reuse and node_modules being 15,000 times larger than the application shouldn't be the same thing

# ? Jan 22, 2020 14:52

Tei: Feb 19, 2011

Nolgthorn posted:

Code reuse and node_modules being 15,000 times larger than the application shouldn't be the same thing

But size alone don't make something bad

The linux kernel is 12 million lines of code, just calling a kernel function you are reusing these 12 million lines

Is because the quality of node modules is bad?

# ? Jan 22, 2020 15:07

DirtyCheeseburgers: Apr 15, 2003; College Slice

Does anyone know of a platform independent membership system? I don't even know if this is a thing. The core of our sites are built in WordPress but we have some in-house designed applications that are totally separate... but now we're at the point where we need membership functionality between the two. It's hell!

# ? Jan 22, 2020 18:12

The Fool: Oct 16, 2003

DirtyCheeseburgers posted:

Does anyone know of a platform independent membership system? I don't even know if this is a thing. The core of our sites are built in WordPress but we have some in-house designed applications that are totally separate... but now we're at the point where we need membership functionality between the two. It's hell!

welcome to identity management and federation

e: actually, I made some assumptions. Do your members log into the systems and you need to manage that, or are you just talking about syncing crm data?

The Fool fucked around with this message at 18:18 on Jan 22, 2020

# ? Jan 22, 2020 18:16

stoops: Jun 11, 2001

I'm looking for something like this example, where you can drag the middle part from left to right and vice versa.

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Googling has mentioned jqueryui and resizable, but i'm not entirely sure how to go about it.

Is there another name for this functionality to do a better google search

Any help is appreciated, thanks.

# ? Jan 23, 2020 19:33

MrMoo: Sep 14, 2000

Like this one?

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize_height

# ? Jan 23, 2020 19:50

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

It's a drag handle on a vertical divider. There are drag handles on everything so I'm not sure there's a better description for it. The implementation will depend on what you have either side of the divider, so if you're using a pre-built solution you might have to fux with it. I'd just capture mouse down, track the position, and capture mouse up.

# ? Jan 23, 2020 20:40

stoops: Jun 11, 2001

MrMoo posted:

Like this one?

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize_height

Nolgthorn posted:

It's a drag handle on a vertical divider. There are drag handles on everything so I'm not sure there's a better description for it. The implementation will depend on what you have either side of the divider, so if you're using a pre-built solution you might have to fux with it. I'd just capture mouse down, track the position, and capture mouse up.

Thanks. i guess i was overthinking it. I'll use MrMoo's link example on my div

# ? Jan 23, 2020 20:57

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

Nolgthorn posted:

Code reuse and node_modules being 15,000 times larger than the application shouldn't be the same thing

I assume you're fine with it now since as of yarn 2 by default there is no longer a node_modules directory?

node_modules is replaced by a .pnp.js file that maps packages/versions/dependencies to a centralized location on disk.

# ? Jan 27, 2020 16:01

kedo: Nov 27, 2007

Does anyone know how/if WCAG contrast requirements apply to text that's not screen-readable within a SVG? My use case is a logo ��the text in the SVG is all paths and fills and as such is not screen readable (it has alt text provided), but logo text doesn't meet contrast requirements with its background color.

# ? Jan 27, 2020 20:56

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

kedo posted:

Does anyone know how/if WCAG contrast requirements apply to text that's not screen-readable within a SVG? My use case is a logo ��the text in the SVG is all paths and fills and as such is not screen readable (it has alt text provided), but logo text doesn't meet contrast requirements with its background color.

For what purpose are the requirements being imposed? If the goal is to make it screen readable and it's not you answered your question. If the goal is to avoid ADA litigation, a best effort at the WCAG is no guarantee.

# ? Jan 27, 2020 23:06

Just-In-Timeberlake: Aug 18, 2003

I think this is the right place for this, if not let me know.

I'm trying to redirect HTTP -> HTTPS using the rewrite module in IIS (IIS 8, RewriteModule is installed) using this answer, but I can't get it to work. If I run it exactly as is in that answer:

code:

	<rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
            </rules>
        </rewrite>

It does the redirect, but I get a too many redirects error. Turns out this is because I'm behind an Amazon EBS instance. According to a comment in that answer thread above, modifying it like so (<match> part) fixes the issue.

code:

       <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="http://*.*" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
            </rules>
        </rewrite>

Obviously, it does not (or I wouldn't be here), as it doesn't perform any redirection when using HTTP. Any idea what I'm doing wrong? I'm kind of at my wits end here, been trying everything I can think of but can't figure out why this isn't working. Thanks for any help.

# ? Feb 12, 2020 16:04

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

Just-In-Timeberlake posted:

I think this is the right place for this, if not let me know.

I'm trying to redirect HTTP -> HTTPS using the rewrite module in IIS (IIS 8, RewriteModule is installed) using this answer, but I can't get it to work. If I run it exactly as is in that answer:
code:
	<rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
            </rules>
        </rewrite>
It does the redirect, but I get a too many redirects error. Turns out this is because I'm behind an Amazon EBS instance. According to a comment in that answer thread above, modifying it like so (<match> part) fixes the issue.
code:
       <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="http://*.*" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
            </rules>
        </rewrite>
Obviously, it does not (or I wouldn't be here), as it doesn't perform any redirection when using HTTP. Any idea what I'm doing wrong? I'm kind of at my wits end here, been trying everything I can think of but can't figure out why this isn't working. Thanks for any help.

I don't know anything about IIS, but if the matches are RegEx based, I'd try this:

code:

<match url="http://.*" />

# ? Feb 12, 2020 16:35

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

The documentation says the match patterns are ECMAScript/Perl compatible, which is a little confusing, but I think is referring to the syntax rather than the supported feature set. Either way, http://*.* should match "http://" just as well as http://.*.

I'm not familiar with EBS but maybe something like a load balancer is sitting in front of the server, unwrapping TLS and forwarding the stream on as HTTP? That'd make the Too Many Redirects error make sense.

# ? Feb 12, 2020 16:48

Just-In-Timeberlake: Aug 18, 2003

Lumpy posted:

I don't know anything about IIS, but if the matches are RegEx based, I'd try this:
code:
<match url="http://.*" />

So this sort of works.

If I go to http://www.example.com it redirects to HTTP

~~If I go to http://www.example.com/logon.aspx, it doesn't redirect. When I use the IIS pattern tester, it matches against "http://.*", but no love on the redirect part. Any idea why this might be?~~

So using the above and some different search terms I got this solved, it should look like this if anybody else ever needs this:

code:

<rewrite>
	<rules>
		<rule name="AWS ELB Forece Redirect to HTTPS" stopProcessing="true">
			<match url="^(.*)$" ignoreCase="false" />
			<conditions>
				<add input="{HTTP_X_FORWARDED_PROTO}" pattern="^http$" ignoreCase="false" />
			</conditions>
			<action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}{REQUEST_URI}" />
		</rule>
	</rules>
</rewrite>

Just-In-Timeberlake fucked around with this message at 17:02 on Feb 12, 2020

# ? Feb 12, 2020 16:56

Dominoes: Sep 20, 2007

Hey dudes. How do I download a file using JS without the form technique? I'm suspicious I'm close:

Server-side Django:

Python code:

@api_view(["POST"])
def export_gradesheets(request: Request):
     output = io.BytesIO()

    excel.export_gradesheets(output)  # Modifies output in place.
    output.seek(0)
    filename = "gradesheets.xlsx"

    response = HttpResponse(
        output.read(),
        content_type="application/vnd.openxmlformats-"
        "officedocument.spreadsheetml.sheet",
    )

    response["Content-Disposition"] = f'attachment; filename="{filename}"'
    return response

Working Rust/WASM code that is calling DOM functions in a way equiv to JS:

Rust code:

fn export(data: Data) -> impl Future<Item = Msg, Error = Msg> {
    let url = "/export-gradesheets/";
    seed::Request::new(url)
        .method(seed::Method::Post)
        .header("X-CSRFToken", &getCookie("csrftoken"))
        .header(
            "Content-Type",
            "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
        )
        .send_json(&ExportData { data })
        .fetch(Msg::ExportResult)
}

Inop JS code I'm trying to fix; commented code indicates troubleshooting attempted:

JavaScript code:

export function postFile(
    url: string,
    data: any,
    callback: any = () => null as any
) {
    // For downloading files.
    fetch(url, {
        method: "POST",
        headers: {
            "X-CSRFToken": getCookie("csrftoken"),
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
           // "Content-Type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
            //"Response-Type": "blob",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest"
        },
        // credentials: "include",
        body: JSON.stringify(data)
    })
        // Parse JSON if able.
        .then(result => {
        })
        .then(callback)
}


postFile("/export-gradesheets/", {"upgrade": upgrade.id}, (resp: any) => { })}

The server code receives the JSON post data and executes, but nothing happens in the browser.

Dominoes fucked around with this message at 14:25 on Feb 13, 2020

# ? Feb 13, 2020 00:37

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

Dominoes posted:

Hey dudes. How do I download a file using JS without the form technique? I'm suspicious I'm close:

Server-side Django:

Python code:

@api_view(["POST"])
def export_gradesheets(request: Request):
     output = io.BytesIO()

    excel.export_gradesheets(output)  # Modifies output in place.
    output.seek(0)
    filename = "gradesheets.xlsx"

    response = HttpResponse(
        output.read(),
        content_type="application/vnd.openxmlformats-"
        "officedocument.spreadsheetml.sheet",
    )

    response["Content-Disposition"] = f'attachment; filename="{filename}"'
    return response

Working Rust/WASM code that is calling DOM functions in a way equiv to JS:

Rust code:

fn export(data: Data) -> impl Future<Item = Msg, Error = Msg> {
    let url = "/export-gradesheets/";
    seed::Request::new(url)
        .method(seed::Method::Post)
        .header("X-CSRFToken", &getCookie("csrftoken"))
        .header(
            "Content-Type",
            "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
        )
        .send_json(&ExportData { data })
        .fetch(Msg::ExportResult)
}

Inop JS code I'm trying to fix; commented code indicates troubleshooting attempted:

JavaScript code:

export function postFile(
    url: string,
    data: any,
    callback: any = () => null as any
) {
    // For downloading files.
    fetch(url, {
        method: "POST",
        headers: {
            "X-CSRFToken": getCookie("csrftoken"),
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
           // "Content-Type": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8'); request.responseType = 'blob'",
            //"Response-Type": "blob",
            Accept: "application/json",
            "X-Requested-With": "XMLHttpRequest"
        },
        // credentials: "include",
        body: JSON.stringify(data)
    })
        // Parse JSON if able.
        .then(result => {
        })
        .then(callback)
}


postFile("/export-gradesheets/", {"upgrade": upgrade.id}, (resp: any) => { })}

Phone post, so have a link that does pretty much what I would type out: https://nehalist.io/downloading-files-from-post-requests/

# ? Feb 13, 2020 00:42

Dominoes: Sep 20, 2007

Awesome; diff approach than ones I've seen before. Trying to get it to work.

This is the (working) form approach, for ref:

JavaScript code:

                <form
                    action="/export-gradesheets/"
                    method="post"
                 >
                    <input
                        type="hidden"
                        value={upgrade.id}
                        name="upgrade"
                    />
                    {csrfInput()}

                    <button
                        style={{ marginLeft: 100 }}
                        type="submit"
                    >
                        Export to Excel
                    </button>
                </form>

# ? Feb 13, 2020 00:57

Tei: Feb 19, 2011

Dominoes posted:

Hey dudes. How do I download a file using JS without the form technique? I'm suspicious I'm close:

related to this

you can have a link with the download attribute

<a href="/images/bla.jpg" download>

the url itself can be a blob file (so a large binary object --- like a pdf) or a data url or a remote file

# ? Feb 13, 2020 13:35

Dominoes: Sep 20, 2007

Hey bros, have something unrelated.

I'm getting a Server 500 error once in a while on a Heroku Django app I have:

code:

2020-02-18T22:42:41.112224+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=www.redacted.com request_id=5599a854-0583-4cad-a4bb-8bf0c10d1dfa fwd="104.1.156.54" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https

Restarting the dyno immediately fixes it. It's pretty frustrating because this is a "production" app used heavily in my org, and this is embarrassing/annoying. I gave the guys at work instructions on how to do the restart when I'm not around as a stopgap. How do I diagnose / unfuck this? Might be a reaction between Gunicorn, Heroku, Postgres, Psycopg2 etc.

Dominoes fucked around with this message at 00:20 on Feb 19, 2020

# ? Feb 18, 2020 23:46

Impotence: Nov 8, 2010; Lipstick Apathy

Profile your requests? Question to your app: Why is something taking more than 30 seconds to return a page?

# ? Feb 19, 2020 03:28

The Dark Souls of Posters: Nov 4, 2011; Just Post, Kupo

If it�s Heroku�s hobby plan they shut down the app after 30 minutes of dormancy and when it called again it takes 30 seconds to kick back on. Could be that?

# ? Feb 19, 2020 06:19

Dominoes: Sep 20, 2007

It's using normal Dynos / DB, so not a hobby plan issue. The "Why 30s thing" is the big open Q: There's no reason it should be.

Dominoes fucked around with this message at 08:31 on Feb 19, 2020

# ? Feb 19, 2020 08:29

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Does it happen on a particular request or at random? But yeah profile memory, queries, cpu usage etc. It could be a myriad of things.

# ? Feb 19, 2020 10:45

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

Biowarfare posted:

Profile your requests? Question to your app: Why is something taking more than 30 seconds to return a page?

When I made baby's first Heroku app it was a Flask app that would run some NLP. I learned I had to use Redis because of Heroku's 30s function timeout.
https://devcenter.heroku.com/articles/request-timeout

# ? Feb 19, 2020 14:38

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

Dominoes posted:

It's using normal Dynos / DB, so not a hobby plan issue. The "Why 30s thing" is the big open Q: There's no reason it should be.

Yeah, seconding Gmaz: is it a slow query in general (takes several seconds) and just sometimes it balloons up to 30s+ depending on load? Or is it a completely inexpensive query that executes in milliseconds normally and there is literally no app-related reason it should take longer?

Generally speaking any request that takes more than 3-4 seconds under normal conditions needs some kind of asynchronous handling, but that's a big architectural change. If it's the latter then it's something about the environment/deployment.

# ? Feb 19, 2020 14:48

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

My first step would be more logging and logging analysis.

You should be able to pinpoint the request and what your code was doing at the time.

# ? Feb 19, 2020 19:21

Dominoes: Sep 20, 2007

Gmaz posted:

Does it happen on a particular request or at random? But yeah profile memory, queries, cpu usage etc. It could be a myriad of things.

I don't know if a single request starts the crashes, but once they start, every request triggers it.

Data Graham posted:

Generally speaking any request that takes more than 3-4 seconds under normal conditions needs some kind of asynchronous handling, but that's a big architectural change. If it's the latter then it's something about the environment/deployment.

Could be Heroku doing something async gunicorn doesn't like. (?)

CarForumPoster posted:

When I made baby's first Heroku app it was a Flask app that would run some NLP. I learned I had to use Redis because of Heroku's 30s function timeout.
https://devcenter.heroku.com/articles/request-timeout

I feel like the 30s request is a symptom; not something I need to get around in itself.

Thermopyle posted:

My first step would be more logging and logging analysis.

You should be able to pinpoint the request and what your code was doing at the time.

Do you know how I'd do that? For some reason, logging in Django/Heroku's been quite opaque.

# ? Feb 19, 2020 21:37

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

For monitoring you can use something like New Relic - I believe they still have a free tier, or any other APM.

# ? Feb 19, 2020 22:07

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

Dominoes posted:

Do you know how I'd do that? For some reason, logging in Django/Heroku's been quite opaque.

Do you understand how the python logging module works and is configured? That's a necessary first step. (Read all the results on the first SERP for "understanding python logging". Everyone has a hard time grokking how it works...for reasons that are mysterious to me after figuring out how it works)

I haven't deployed to Heroku in a while, but IIRC, I just send my Django logs to stdout and then ship them to something like papertrail/loggly/ELK.

# ? Feb 19, 2020 23:12

Dominoes: Sep 20, 2007

Nope! I did at one point, but forgot! Are you proposing having it log certain things I choose to the heroku logs as a means of narrowing it down, or is there some way to make all errors go there?

# ? Feb 21, 2020 14:49

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

Django emails admins all uncaught exceptions, but you have to have email configured.

If you don't want to configure email, you have to adjust the default logging config to output the exception info to your logs. Here's a hastily Googled article about that.

Also you should be logging lots of stuff by default. Some people choose not to log stuff they should be logging because it makes their logs too noisy, but thinking your logs are too noisy is a function of your log viewing tools.

# ? Feb 21, 2020 15:14

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 22:35

Dominoes: Sep 20, 2007

Thanks! My logs are too useless, not too noisy!

# ? Feb 21, 2020 15:17

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

«‹›361 »